@phren/cli/dist/ui/graph-chrome.d.ts

Knowledge layer for AI agents - CLI, MCP server, and data layer

export declare const GRAPH_HUD_STYLES = "\n/* \u2500\u2500 Full-bleed graph tab \u2014 total dark immersion (header included) \u2500\u2500 */\nbody:has(#tab-graph.active) { background: #04050b; }\nbody:has(#tab-graph.active) .main { max-width: none; padding: 0; }\nbody:has(#tab-graph.active) .header {\n  background: rgba(5, 6, 13, 0.92);\n  border-bottom: 1px solid rgba(103, 232, 249, 0.12);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\nbody:has(#tab-graph.active) .header .nav-item { color: #7f8db8; }\nbody:has(#tab-graph.active) .header .nav-item.active { color: #67e8f9; }\nbody:has(#tab-graph.active) .header .brand-name,\nbody:has(#tab-graph.active) .header-brand { color: #dbe6ff; }\n#tab-graph .graph-container {\n  background: #04050b;\n  border: none;\n  border-radius: 0;\n  position: relative;\n  overflow: hidden;\n}\n#tab-graph #graph-canvas {\n  height: calc(100vh - 64px);\n  min-height: 520px;\n}\n\n/* \u2500\u2500 Overlay chrome \u2014 compact HUD clustered top-right (GraphRAG) \u2500\u2500\u2500\u2500 */\n#tab-graph .graph-filters {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n  left: auto;\n  right: 60px;\n  width: min(560px, 60%);\n  z-index: 10;\n}\n#tab-graph .graph-controls { z-index: 10; }\n#tab-graph .graph-controls button {\n  width: 34px;\n  height: 34px;\n  border-radius: 8px;\n  border: 1px solid rgba(103, 232, 249, 0.2);\n  background: rgba(8, 10, 22, 0.85);\n  color: #9fb2e8;\n  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  cursor: pointer;\n  transition: border-color 0.15s ease, color 0.15s ease;\n}\n#tab-graph .graph-controls button:hover {\n  border-color: rgba(103, 232, 249, 0.55);\n  color: #e6f6ff;\n}\n\n/* \u2500\u2500 Docked dossier \u2014 left side, compact (GraphRAG inspector) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#graph-node-popover.phren-docked {\n  left: 16px !important;\n  right: auto !important;\n  top: 68px !important;\n  bottom: 16px;\n  width: 340px;\n  max-width: min(360px, calc(100% - 32px));\n  pointer-events: none;\n  z-index: 12;\n}\n/* Edge drag handle to widen/narrow the docked dossier (symmetric with the\n   contents pane). The popover itself is pointer-transparent, so the handle\n   re-enables pointer events for itself. */\n#graph-node-popover.phren-docked .phren-dossier-resize {\n  position: absolute;\n  right: -4px;\n  top: 0;\n  bottom: 0;\n  width: 9px;\n  cursor: ew-resize;\n  z-index: 20;\n  pointer-events: auto;\n  touch-action: none;\n}\n#graph-node-popover.phren-docked .phren-dossier-resize::after {\n  content: \"\";\n  position: absolute;\n  right: 3px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3px;\n  height: 38px;\n  border-radius: 999px;\n  background: rgba(103, 232, 249, 0.28);\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n#graph-node-popover.phren-docked .phren-dossier-resize:hover::after,\n#graph-node-popover.phren-docked .phren-dossier-resize.dragging::after {\n  opacity: 1;\n}\n/* GraphRAG-style stats row + relationships in the inspector */\n.phren-dossier-stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border: 1px solid rgba(103, 232, 249, 0.16);\n  border-radius: 8px;\n  overflow: hidden;\n  margin: 12px 0 4px;\n}\n.phren-dossier-stats > div {\n  padding: 8px 10px;\n  border-right: 1px solid rgba(103, 232, 249, 0.12);\n}\n.phren-dossier-stats > div:last-child { border-right: 0; }\n.phren-dossier-stats .k {\n  font: 700 8.5px/1.4 ui-monospace, Menlo, monospace;\n  letter-spacing: 0.12em; color: #6b76a0; text-transform: uppercase;\n}\n.phren-dossier-stats .v {\n  font: 700 14px/1.2 ui-monospace, Menlo, monospace; color: #67e8f9; margin-top: 3px;\n}\n.phren-rel-row {\n  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;\n  padding: 7px 0; border-bottom: 1px solid rgba(120, 150, 220, 0.08); cursor: pointer;\n}\n.phren-rel-row:last-child { border-bottom: 0; }\n.phren-rel-row .n { font-size: 12px; color: #d6e2ff; overflow: hidden; text-overflow: ellipsis; }\n.phren-rel-row .n small { display: block; color: #6b76a0; font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.phren-rel-row .w { font: 600 11px/1.4 ui-monospace, Menlo, monospace; color: #67e8f9; font-variant-numeric: tabular-nums; }\n.phren-rel-row:hover .n { color: #eaf2ff; }\n#graph-node-popover.phren-docked #graph-node-popover-card {\n  --surface: #0a0d1e;\n  --surface-raised: rgba(22, 27, 52, 0.9);\n  --surface-sunken: rgba(5, 6, 15, 0.92);\n  --ink: #dbe4ff;\n  --muted: #8b96c9;\n  --border: rgba(103, 232, 249, 0.2);\n  --accent: #67e8f9;\n  --accent-dim: rgba(103, 232, 249, 0.12);\n  height: 100%;\n  overflow: auto;\n  pointer-events: auto;\n  background: rgba(8, 10, 22, 0.92);\n  border: 1px solid rgba(103, 232, 249, 0.22);\n  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(103, 232, 249, 0.05);\n  border-radius: 12px;\n  color: #dbe4ff;\n  backdrop-filter: blur(14px);\n  -webkit-backdrop-filter: blur(14px);\n}\n#graph-node-popover.phren-docked .phren-dossier-kind {\n  font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: #67e8f9;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n}\n#graph-node-popover.phren-docked #graph-node-popover-card { padding: 14px 15px; }\n#graph-node-popover.phren-docked .phren-dossier-text {\n  white-space: pre-wrap;\n  line-height: 1.6;\n  font-size: 13px;\n  color: #dde6fb;\n}\n.phren-dossier-section {\n  font: 700 9.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: #67e8f9;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  margin-top: 4px;\n}\n.phren-dossier-nav {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: #8b96c9;\n}\n.phren-dossier-nav button {\n  width: 28px;\n  height: 28px;\n  border-radius: 6px;\n  border: 1px solid rgba(103, 232, 249, 0.2);\n  background: rgba(12, 15, 30, 0.9);\n  color: #9fb2e8;\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color 0.15s ease, color 0.15s ease;\n}\n.phren-dossier-nav button:hover {\n  border-color: rgba(103, 232, 249, 0.55);\n  color: #e6f6ff;\n}\n/* Dossier header: title block left, icon-button tools (prev/next, edit,\n   delete, close) right. Every target is a 44px circle. */\n.phren-dossier-head {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n.phren-dossier-tools {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: 4px;\n}\n.phren-dossier-iconbtn {\n  display: grid;\n  place-items: center;\n  box-sizing: border-box;\n  width: 44px;\n  height: 44px;\n  flex: 0 0 auto;\n  padding: 0;\n  border: 1px solid rgba(103, 232, 249, 0.22);\n  border-radius: 999px;\n  background: rgba(12, 15, 30, 0.9);\n  color: #dbe4ff;\n  cursor: pointer;\n  transition: border-color 0.15s ease, color 0.15s ease;\n}\n.phren-dossier-iconbtn:hover {\n  border-color: rgba(103, 232, 249, 0.55);\n  color: #e6f6ff;\n}\n.phren-dossier-iconbtn.danger {\n  color: #ef9898;\n}\n.phren-dossier-iconbtn svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n.phren-dossier-count {\n  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  letter-spacing: 0.06em;\n  color: #8b96c9;\n  white-space: nowrap;\n  padding: 0 2px;\n}\n";