dad726c777
Expose knowledge graph data in the Memory view through a localized, resilient dashboard panel. - Add protected knowledge graph API routes and access helpers. - Add a Memory view tab, graph panel, loading/error states, and localized labels. - Document graph navigation and cover access, route, hook, and component behavior. Files changed: .changeset/fn-9038-knowledge-graph-tab.md | 7 + docs/dashboard-guide.md | 2 + docs/knowledge-graph.md | 10 ++ packages/dashboard/app/api/legacy.ts | 17 ++- packages/dashboard/app/api/system/index.ts | 1 + .../dashboard/app/api/system/knowledge-graph.ts | 23 +++ .../app/components/KnowledgeGraphPanel.css | 35 +++++ .../app/components/KnowledgeGraphPanel.tsx | 68 +++++++++ packages/dashboard/app/components/MemoryView.tsx | 15 +- .../__tests__/KnowledgeGraphPanel.test.tsx | 49 +++++++ .../app/components/__tests__/MemoryView.test.tsx | 13 ++ .../app/hooks/__tests__/useKnowledgeGraph.test.ts | 66 +++++++++ packages/dashboard/app/hooks/useKnowledgeGraph.ts | 94 ++++++++++++ .../src/__tests__/knowledge-graph-access.test.ts | 88 ++++++++++++ packages/dashboard/src/knowledge-graph-access.ts | 160 +++++++++++++++++++++ .../register-knowledge-graph-routes.test.ts | 75 ++++++++++ .../src/routes/register-knowledge-routes.ts | 120 ++++++++++++++++ packages/i18n/locales/en/app.json | 15 +- packages/i18n/locales/es/app.json | 15 +- packages/i18n/locales/fr/app.json | 15 +- packages/i18n/locales/ko/app.json | 15 +- packages/i18n/locales/pt-BR/app.json | 15 +- packages/i18n/locales/zh-CN/app.json | 15 +- packages/i18n/locales/zh-TW/app.json | 15 +- 24 files changed, 939 insertions(+), 9 deletions(-) Fusion-Task-Id: FN-9038 Fusion-Task-Lineage: 4200e214-ad22-4f92-b980-c9bcb8ffd3b9 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
36 lines
4.0 KiB
CSS
36 lines
4.0 KiB
CSS
/*
|
|
FNXC:KnowledgeGraphDashboard 2026-08-13-23:30:
|
|
The graph view deliberately presents capped list/detail slices rather than a whole-graph canvas. Responsive stacking keeps every filter and drill-down control usable below the Memory view mobile breakpoint.
|
|
*/
|
|
.knowledge-graph-panel { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: var(--space-md); overflow: auto; }
|
|
.knowledge-graph-empty { align-items: center; justify-content: center; }
|
|
.knowledge-graph-status, .knowledge-graph-filters, .knowledge-graph-neighbors, .knowledge-graph-path { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md); }
|
|
.knowledge-graph-status > div { display: grid; gap: var(--space-xs); margin-right: auto; }
|
|
.knowledge-graph-status strong { color: var(--text); }
|
|
.knowledge-graph-status span, .knowledge-graph-muted { color: var(--text-muted); }
|
|
.knowledge-graph-status dl { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
|
|
.knowledge-graph-status dl div { display: grid; gap: 0; }
|
|
.knowledge-graph-status dt { color: var(--text-muted); font-size: var(--font-size-xs); }
|
|
.knowledge-graph-status dd { margin: 0; font-size: var(--font-size-xs); }
|
|
.knowledge-graph-toggle, .knowledge-graph-kind-options { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
|
|
.knowledge-graph-kind-options label { display: inline-flex; gap: var(--space-xs); align-items: center; color: var(--text-muted); font-size: var(--font-size-sm); }
|
|
.knowledge-graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); }
|
|
.knowledge-graph-results, .knowledge-graph-detail { min-width: 0; padding: var(--space-md); }
|
|
.knowledge-graph-results h3, .knowledge-graph-detail h3, .knowledge-graph-neighbors h3, .knowledge-graph-path h3 { width: 100%; margin: 0; }
|
|
.knowledge-graph-results ul, .knowledge-graph-edge-list ul, .knowledge-graph-neighbors ul { display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--space-sm) 0; padding: 0; list-style: none; }
|
|
.knowledge-graph-results li .btn { display: grid; width: 100%; justify-content: start; gap: var(--space-xs); text-align: left; }
|
|
.knowledge-graph-results li span { color: var(--text-muted); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
|
|
.knowledge-graph-pagination { display: flex; justify-content: space-between; gap: var(--space-sm); }
|
|
.knowledge-graph-edge-list h4 { display: flex; justify-content: space-between; margin: var(--space-md) 0 var(--space-xs); }
|
|
.knowledge-graph-edge-list h4 span { color: var(--text-muted); font-size: var(--font-size-xs); font-weight: normal; }
|
|
.knowledge-graph-edge-list li, .knowledge-graph-neighbors li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
|
|
.knowledge-graph-provenance { border-radius: var(--radius-full); padding: var(--space-xs) var(--space-xs); font-size: var(--font-size-xs); }
|
|
.knowledge-graph-provenance--extracted { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 15%, transparent); }
|
|
.knowledge-graph-provenance--inferred { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
|
|
.knowledge-graph-endpoint { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
|
|
.knowledge-graph-path-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); }
|
|
.knowledge-graph-path-chain span { display: inline-flex; align-items: center; gap: var(--space-xs); }
|
|
.knowledge-graph-path-chain em { color: var(--text-muted); font-size: var(--font-size-xs); font-style: normal; }
|
|
.knowledge-graph-error { width: 100%; color: var(--color-error); }
|
|
@media (max-width: 768px) { .knowledge-graph-layout { grid-template-columns: minmax(0, 1fr); } .knowledge-graph-status, .knowledge-graph-filters, .knowledge-graph-neighbors, .knowledge-graph-path { align-items: stretch; } .knowledge-graph-status > div { margin-right: 0; } .knowledge-graph-status dl { display: grid; grid-template-columns: minmax(0, 1fr); } }
|