nodedex 0.1.0

package/tui-dist/memory.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// memory.tsx — THE view. The graph as an explorer: roots on the left, the
+// selected block's STORY on the right (essence, unique facts, its chain, its
+// edges) — and the edges are walkable: focus the right pane, pick a relation or
+// chain member, enter jumps to it. Browse + Chains from v2 merged into one.
+//
+// Navigation model (same keys everywhere):
+//   ←/→ = pane focus · ↑/↓ = move in the focused pane · enter = open/jump
+//   esc = up one level (blocks→roots · jump-trail back · close search)
+//   /   = search overlay (the same three-signal /api/search agents use; hits carry
+//         root context + superseded/weak-match flags)
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { Section, Row, Keys, Panel, windowSlice } from "./components.js";
+import { theme, typeColorOf, typeGlyphOf, trunc, relTime } from "./theme.js";
+import { useTermSize } from "./hooks.js";
+import { fetchTree, fetchProjectBlocks, fetchBlockDetail, fetchChainMembers, searchMemory, } from "./api.js";
+export function MemoryTab({ isActive, onCapture }) {
+    const { rows: termRows, columns: cols } = useTermSize();
+    const listCap = Math.max(6, termRows - 12);
+    // ── left pane: roots → blocks ──────────────────────────────────────────────
+    const [roots, setRoots] = useState([]);
+    const [blocks, setBlocks] = useState([]);
+    const [level, setLevel] = useState("roots");
+    const [rootSel, setRootSel] = useState(0);
+    const [blockSel, setBlockSel] = useState(0);
+    const [openRoot, setOpenRoot] = useState(null);
+    // ── right pane: the story ──────────────────────────────────────────────────
+    const [detail, setDetail] = useState(null);
+    const [chain, setChain] = useState([]);
+    const [rightSel, setRightSel] = useState(0);
+    const [focus, setFocus] = useState("left");
+    const [trail, setTrail] = useState([]); // jump history (block ids) for esc-back
+    // ── search overlay ─────────────────────────────────────────────────────────
+    const [searching, setSearching] = useState(false);
+    const [q, setQ] = useState("");
+    const [results, setResults] = useState([]);
+    const [resSel, setResSel] = useState(0);
+    useEffect(() => {
+        let alive = true;
+        fetchTree().then((t) => { if (alive)
+            setRoots(t); });
+        return () => { alive = false; };
+    }, []);
+    useEffect(() => { onCapture(searching); }, [searching, onCapture]);
+    // Load the story for a block id (shared by list-select, search, edge-jump).
+    const inspect = useCallback((id) => {
+        if (!id) {
+            setDetail(null);
+            setChain([]);
+            return;
+        }
+        fetchBlockDetail(id).then(async (d) => {
+            setDetail(d);
+            setRightSel(0);
+            if (d?.chain_id)
+                setChain(await fetchChainMembers(d.chain_id));
+            else
+                setChain([]);
+        });
+    }, []);
+    // Selection in the left pane drives the right pane (debounced light).
+    const selectedBlock = level === "blocks" ? blocks[blockSel] : undefined;
+    const inspectTimer = useRef(null);
+    useEffect(() => {
+        if (inspectTimer.current)
+            clearTimeout(inspectTimer.current);
+        inspectTimer.current = setTimeout(() => inspect(selectedBlock?.id ?? null), 120);
+        return () => { if (inspectTimer.current)
+            clearTimeout(inspectTimer.current); };
+    }, [selectedBlock?.id, inspect]);
+    // Debounced search.
+    useEffect(() => {
+        if (!searching)
+            return;
+        const t = setTimeout(() => { void searchMemory(q, 8).then((r) => { setResults(r); setResSel(0); }); }, 150);
+        return () => clearTimeout(t);
+    }, [q, searching]);
+    const openRootBlocks = useCallback((root) => {
+        setOpenRoot(root);
+        setLevel("blocks");
+        setBlockSel(0);
+        void fetchProjectBlocks(root.label).then((b) => setBlocks(b));
+    }, []);
+    // Everything the right pane can jump to, in display order.
+    const jumpables = useMemo(() => {
+        if (!detail)
+            return [];
+        const out = [];
+        for (const m of chain)
+            if (m.id !== detail.id)
+                out.push({ id: m.id, label: m.label, kind: "chain", via: m.flow_role || "member", type: m.type });
+        for (const e of detail.outgoing ?? [])
+            if (e.target_id)
+                out.push({ id: e.target_id, label: e.target_label || e.target_id, kind: "out", via: e.type });
+        for (const e of detail.incoming ?? [])
+            if (e.source_id)
+                out.push({ id: e.source_id, label: e.source_label || e.source_id, kind: "in", via: e.type });
+        return out;
+    }, [detail, chain]);
+    useInput((input, k) => {
+        if (searching) {
+            if (k.escape) {
+                setSearching(false);
+                setQ("");
+                return;
+            }
+            if (k.return) {
+                const hit = results[resSel];
+                if (hit) {
+                    setTrail((t) => (detail ? [...t, detail.id] : t));
+                    inspect(hit.id);
+                    setFocus("right");
+                }
+                setSearching(false);
+                setQ("");
+                return;
+            }
+            if (k.upArrow) {
+                setResSel((s) => Math.max(0, s - 1));
+                return;
+            }
+            if (k.downArrow) {
+                setResSel((s) => Math.min(results.length - 1, s + 1));
+                return;
+            }
+            if (k.backspace || k.delete) {
+                setQ((s) => s.slice(0, -1));
+                return;
+            }
+            if (input && !k.ctrl && !k.meta && !k.tab)
+                setQ((s) => s + input);
+            return;
+        }
+        if (input === "/") {
+            setSearching(true);
+            setResults([]);
+            setResSel(0);
+            return;
+        }
+        if (k.leftArrow) {
+            setFocus("left");
+            return;
+        }
+        if (k.rightArrow) {
+            if (detail)
+                setFocus("right");
+            return;
+        }
+        if (focus === "left") {
+            if (level === "roots") {
+                if (k.upArrow)
+                    setRootSel((s) => Math.max(0, s - 1));
+                else if (k.downArrow)
+                    setRootSel((s) => Math.min(roots.length - 1, s + 1));
+                else if (k.return && roots[rootSel])
+                    openRootBlocks(roots[rootSel]);
+            }
+            else {
+                if (k.upArrow)
+                    setBlockSel((s) => Math.max(0, s - 1));
+                else if (k.downArrow)
+                    setBlockSel((s) => Math.min(blocks.length - 1, s + 1));
+                else if (k.return && detail)
+                    setFocus("right");
+                else if (k.escape) {
+                    setLevel("roots");
+                    setOpenRoot(null);
+                    setBlocks([]);
+                    setDetail(null);
+                    setChain([]);
+                    setTrail([]);
+                }
+            }
+            return;
+        }
+        // right pane focused — walk the story
+        if (k.upArrow)
+            setRightSel((s) => Math.max(0, s - 1));
+        else if (k.downArrow)
+            setRightSel((s) => Math.min(jumpables.length - 1, s + 1));
+        else if (k.return) {
+            const j = jumpables[rightSel];
+            if (j && detail) {
+                setTrail((t) => [...t, detail.id]);
+                inspect(j.id);
+            }
+        }
+        else if (k.escape) {
+            const back = trail[trail.length - 1];
+            if (back) {
+                setTrail((t) => t.slice(0, -1));
+                inspect(back);
+            }
+            else
+                setFocus("left");
+        }
+    }, { isActive: isActive && true });
+    // ── render ─────────────────────────────────────────────────────────────────
+    const leftW = Math.min(38, Math.max(28, Math.floor(cols * 0.32)));
+    const essW = Math.max(30, cols - leftW - 8);
+    const supersededBy = (detail?.incoming ?? []).find((e) => e.type === "superseded_by");
+    // Sliding viewports — the cursor stays visible past the fold in every list.
+    const rootsWin = windowSlice(roots, rootSel, listCap);
+    const blocksWin = windowSlice(blocks, blockSel, listCap);
+    const jumpWin = windowSlice(jumpables, rightSel, Math.max(4, listCap - 10));
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { flexGrow: 1, children: [_jsx(Box, { flexDirection: "column", width: leftW, marginRight: 2, children: level === "roots" ? (_jsxs(Section, { title: "roots", hot: focus === "left", right: _jsx(Text, { color: theme.dim, children: `${roots.length}` }), children: [roots.length === 0 ? _jsx(Text, { color: theme.dim, children: "empty graph \u2014 memory appears as your agents work" }) : null, rootsWin.above > 0 ? _jsx(Text, { color: theme.dim, children: `  ↑ ${rootsWin.above} more` }) : null, rootsWin.visible.map((r, i) => {
+                                    const idx = rootsWin.start + i;
+                                    return (_jsxs(Row, { selected: idx === rootSel, focused: focus === "left", children: [_jsx(Text, { color: typeColorOf("project"), children: "⌂ " }), _jsx(Text, { color: idx === rootSel ? theme.value : theme.label, children: trunc(r.label, leftW - 10) }), _jsx(Text, { color: theme.dim, children: `  ${r.children_count ?? ""}` })] }, r.id));
+                                }), rootsWin.below > 0 ? _jsx(Text, { color: theme.dim, children: `  ↓ ${rootsWin.below} more` }) : null] })) : (_jsxs(Section, { title: trunc(openRoot?.label ?? "blocks", leftW - 8), hot: focus === "left", right: _jsx(Text, { color: theme.dim, children: `${blocks.length}` }), children: [blocksWin.above > 0 ? _jsx(Text, { color: theme.dim, children: `  ↑ ${blocksWin.above} more` }) : null, blocksWin.visible.map((b, i) => {
+                                    const idx = blocksWin.start + i;
+                                    return (_jsxs(Row, { selected: idx === blockSel, focused: focus === "left", children: [_jsx(Text, { color: typeColorOf(b.type), children: `${typeGlyphOf(b.type)} ` }), _jsx(Text, { color: idx === blockSel ? theme.value : theme.label, children: trunc(b.label.replace(`${openRoot?.label ?? ""}_`, ""), leftW - 8) })] }, b.id));
+                                }), blocksWin.below > 0 ? _jsx(Text, { color: theme.dim, children: `  ↓ ${blocksWin.below} more` }) : null] })) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: !detail ? (_jsx(Box, { flexDirection: "column", children: _jsx(Section, { title: "memory", children: _jsx(Text, { color: theme.dim, children: level === "roots" ? "open a root (enter) to browse its blocks" : "select a block — its story shows here" }) }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { children: _jsx(Text, { color: typeColorOf(detail.type), bold: true, children: `${typeGlyphOf(detail.type)} ${detail.label}` }) }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: typeColorOf(detail.type), children: detail.type }), _jsx(Text, { color: theme.dim, children: detail.created_at ? `  ·  ${relTime(detail.created_at)} ago` : "" }), supersededBy ? (_jsx(Text, { color: theme.warn, children: `  ⚠ SUPERSEDED → ${trunc(supersededBy.source_label ?? "", 40)}` })) : null] }), _jsx(Box, { marginBottom: 1, width: essW, children: _jsx(Text, { color: theme.value, wrap: "wrap", children: detail.essence || "(no essence)" }) }), detail.content?.unique && Object.keys(detail.content.unique).length > 0 ? (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: Object.entries(detail.content.unique).slice(0, 6).map(([k, v]) => (_jsxs(Box, { children: [_jsx(Box, { width: 16, children: _jsx(Text, { color: theme.label, children: trunc(k, 15) }) }), _jsx(Text, { color: theme.value, children: trunc(String(v), essW - 18) })] }, k))) })) : null, jumpables.length > 0 ? (_jsxs(Section, { title: chain.length > 0 ? `⛓ chain + edges` : "edges", hot: focus === "right", children: [jumpWin.above > 0 ? _jsx(Text, { color: theme.dim, children: `  ↑ ${jumpWin.above} more` }) : null, jumpWin.visible.map((j, i) => {
+                                            const idx = jumpWin.start + i;
+                                            return (_jsxs(Row, { selected: idx === rightSel, focused: focus === "right", children: [_jsx(Box, { width: 14, children: _jsx(Text, { color: theme.dim, children: j.kind === "in" ? `← ${trunc(j.via, 11)}` : j.kind === "out" ? `→ ${trunc(j.via, 11)}` : `⛓ ${trunc(j.via, 11)}` }) }), j.type ? _jsx(Text, { color: typeColorOf(j.type), children: `${typeGlyphOf(j.type)} ` }) : null, _jsx(Text, { color: idx === rightSel && focus === "right" ? theme.value : theme.label, children: trunc(j.label, essW - 20) })] }, `${j.kind}-${j.id}-${idx}`));
+                                        }), jumpWin.below > 0 ? _jsx(Text, { color: theme.dim, children: `  ↓ ${jumpWin.below} more` }) : null] })) : null] })) })] }), searching ? (_jsxs(Panel, { title: "search memory", hot: true, children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: "/ " }), _jsx(Text, { color: theme.value, children: q }), _jsx(Text, { color: theme.accent, children: "\u258F" })] }), results.length > 0 && results[0].weak_match ? (_jsx(Text, { color: theme.warn, children: "\u26A0 weak matches only \u2014 memory likely has nothing on this; showing the nearest blocks" })) : null, results.map((r, i) => (_jsxs(Row, { selected: i === resSel, children: [_jsx(Text, { color: typeColorOf(r.type), children: `${typeGlyphOf(r.type)} ` }), _jsx(Text, { color: i === resSel ? theme.value : theme.label, children: trunc(r.label, 44) }), r.superseded_by ? _jsx(Text, { color: theme.warn, children: "  ⚠ superseded" }) : null, r.root_label ? _jsx(Text, { color: theme.dim, children: `  ⌂ ${trunc(r.root_label, 22)}` }) : null, _jsx(Text, { color: theme.dim, children: `  ${trunc(r.essence, Math.max(10, cols - 96))}` })] }, r.id))), results.length > 0 && results[resSel]?.root_essence ? (_jsx(Text, { color: theme.dim, children: `  ⌂ ${trunc(results[resSel].root_label ?? "", 24)} — ${trunc(results[resSel].root_essence, Math.max(20, cols - 40))}` })) : null, q && results.length === 0 ? _jsx(Text, { color: theme.dim, children: "no hits" }) : null] })) : (_jsx(Keys, { items: [
+                    ["↑↓", "move"], ["←→", "pane"], ["enter", focus === "left" ? (level === "roots" ? "open root" : "walk story") : "jump"],
+                    ["esc", "back"], ["/", "search"],
+                ] }))] }));
+}