Add Cortex Portal — web visualization for knowledge graph

Express API server wrapping existing store/graph core with REST endpoints for nodes, edges, graph, and search. React + Vite portal with React Flow for interactive graph visualization, Tailwind CSS styling, and full CRUD UI (sidebar, node panel, add/link modals, search bar, toast notifications).
2026-02-02 17:01:29 +01:00
parent 21107443a7
commit 08c26754a8
25 changed files with 4566 additions and 1 deletions
--- a/portal/src/components/Sidebar.tsx
+++ b/portal/src/components/Sidebar.tsx
@@ -0,0 +1,69 @@
+import { useState } from 'react';
+import { useNodes } from '../hooks/useNodes';
+import SearchBar from './SearchBar';
+import type { NodeKind } from '../types';
+
+const KINDS: (NodeKind | '')[] = ['', 'memory', 'component', 'task', 'decision'];
+
+export default function Sidebar({
+  selectedId,
+  onSelect,
+  onAddNode,
+}: {
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onAddNode: () => void;
+}) {
+  const [kindFilter, setKindFilter] = useState('');
+  const { data: nodes, isLoading } = useNodes(kindFilter ? { kind: kindFilter } : undefined);
+
+  return (
+    <aside className="w-72 bg-gray-900 border-r border-gray-800 flex flex-col h-full">
+      <div className="p-4 border-b border-gray-800">
+        <h1 className="text-lg font-bold text-white mb-3">Cortex Portal</h1>
+        <SearchBar onSelect={onSelect} />
+        <div className="flex gap-1 mt-3 flex-wrap">
+          {KINDS.map((k) => (
+            <button
+              key={k}
+              onClick={() => setKindFilter(k)}
+              className={`px-2 py-0.5 text-xs rounded ${
+                kindFilter === k
+                  ? 'bg-indigo-600 text-white'
+                  : 'bg-gray-800 text-gray-400 hover:bg-gray-700'
+              }`}
+            >
+              {k || 'All'}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto p-2">
+        {isLoading && <p className="text-gray-500 text-sm p-2">Loading...</p>}
+        {nodes?.map((n) => (
+          <button
+            key={n.id}
+            onClick={() => onSelect(n.id)}
+            className={`w-full text-left p-2 rounded mb-1 text-sm ${
+              selectedId === n.id
+                ? 'bg-indigo-600/30 text-white'
+                : 'hover:bg-gray-800 text-gray-300'
+            }`}
+          >
+            <span className="text-[10px] uppercase tracking-wide text-gray-500">{n.kind}</span>
+            <div className="truncate">{n.title}</div>
+            {n.status && <span className="text-[10px] text-gray-500">{n.status}</span>}
+          </button>
+        ))}
+      </div>
+      <div className="p-3 border-t border-gray-800">
+        <button
+          onClick={onAddNode}
+          className="w-full py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded text-sm font-medium"
+        >
+          + Add Node
+        </button>
+      </div>
+    </aside>
+  );
+}