@abstractframework/monitor-active-memory 0.1.0 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-# @abstractuic/monitor-active-memory
+# @abstractframework/monitor-active-memory
 
 ReactFlow-based explorer for **Knowledge Graph assertions** (`KgAssertion`) and the derived **Active Memory** text.
 
@@ -20,13 +20,13 @@ Declared in `monitor-active-memory/package.json`:
 
 ## Install
 
-- Workspace: add a dependency on `@abstractuic/monitor-active-memory`
-- npm (once published): `npm i @abstractuic/monitor-active-memory`
+- Workspace: add a dependency on `@abstractframework/monitor-active-memory`
+- npm (once published): `npm i @abstractframework/monitor-active-memory`
 
 ## Usage
 
 ```tsx
-import { KgActiveMemoryExplorer, type KgAssertion } from "@abstractuic/monitor-active-memory";
+import { KgActiveMemoryExplorer, type KgAssertion } from "@abstractframework/monitor-active-memory";
 
 const items: KgAssertion[] = [];
 
@@ -62,15 +62,21 @@ The component can persist per-view layouts in `localStorage` under key `abstract
 
 ## CSS
 
-- ReactFlow base styles are **not** imported by this package. In your app:
+- Import CSS in your app entrypoint (recommended):
 
 ```ts
-import "reactflow/dist/style.css";
+import "@abstractframework/monitor-active-memory/styles.css";
+import "@abstractframework/ui-kit/theme.css"; // shared tokens (optional but recommended)
 ```
 
-- This package imports `monitor-active-memory/src/styles.css` internally.
+- ReactFlow base styles are **not** included. In your app:
+
+```ts
+import "reactflow/dist/style.css";
+```
 
 ## Related docs
 
 - Getting started: [`docs/getting-started.md`](../docs/getting-started.md)
+- API reference: [`docs/api.md`](../docs/api.md)
 - Architecture: [`docs/architecture.md`](../docs/architecture.md)

package/dist/KgActiveMemoryExplorer.d.ts

@@ -1,5 +1,4 @@
 import type { JsonValue, KgAssertion, KgQueryParams, KgQueryResult } from './types';
-import './styles.css';
 export interface KgActiveMemoryExplorerProps {
     title?: string;
     resetKey?: string;
@@ -29,5 +28,5 @@ export interface KgActiveMemoryExplorerProps {
         assertion: KgAssertion;
     }) => void;
 }
-export declare function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, activeMemoryText, packets, packetsVersion, packedCount, dropped, estimatedTokens, effort, warnings, onQuery, onItemsReplace, onOpenSpan, onOpenTranscript, }: KgActiveMemoryExplorerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KgActiveMemoryExplorer({ resetKey, queryMode, items, activeMemoryText, packets, packetsVersion, packedCount, dropped, estimatedTokens, effort, warnings, onQuery, onItemsReplace, onOpenSpan, onOpenTranscript, }: KgActiveMemoryExplorerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=KgActiveMemoryExplorer.d.ts.map

package/dist/KgActiveMemoryExplorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KgActiveMemoryExplorer.d.ts","sourceRoot":"","sources":["../src/KgActiveMemoryExplorer.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAA4B,MAAM,SAAS,CAAC;AAC9G,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE;QAAE,IAAI,EAAE,YAAY,GAAG,uBAAuB,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/H,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;CACjG;AAgSD,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,WAAW,EACX,OAAO,EACP,eAAe,EACf,MAAM,EACN,QAAQ,EACR,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,EAAE,2BAA2B,2CAypD7B"}
+{"version":3,"file":"KgActiveMemoryExplorer.d.ts","sourceRoot":"","sources":["../src/KgActiveMemoryExplorer.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAA4B,MAAM,SAAS,CAAC;AAE9G,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACnC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE;QAAE,IAAI,EAAE,YAAY,GAAG,uBAAuB,CAAC;QAAC,MAAM,EAAE,aAAa,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/H,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;IACzF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,WAAW,CAAA;KAAE,KAAK,IAAI,CAAC;CACjG;AA0TD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,WAAW,EACX,OAAO,EACP,eAAe,EACf,MAAM,EACN,QAAQ,EACR,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,GACjB,EAAE,2BAA2B,2CAu1D7B"}

package/dist/KgActiveMemoryExplorer.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import ReactFlow, { Background, Controls, MarkerType, MiniMap, Panel, ReactFlowProvider } from 'reactflow';
+import ReactFlow, { Background, ControlButton, Controls, MarkerType, MiniMap, Panel, ReactFlowProvider, } from 'reactflow';
 import { buildKgGraph, buildKgLayout, forceSimulationEnergy, forceSimulationPositions, hashStringToSeed, initForceSimulation, sanitizeViewport, shortestPath, stepForceSimulation, } from './graph';
-import './styles.css';
 function normalizeScope(value, fallback = 'session') {
     const s = String(value ?? '')
         .trim()
@@ -23,6 +22,20 @@ function isCompactViewport() {
         return false;
     }
 }
+function LegendIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "3", y: "3", width: "3", height: "3", rx: "1" }), _jsx("rect", { x: "3", y: "7", width: "3", height: "3", rx: "1" }), _jsx("rect", { x: "3", y: "11", width: "3", height: "3", rx: "1" }), _jsx("rect", { x: "8", y: "3.5", width: "6", height: "2", rx: "1", fill: "none", strokeWidth: "1.4" }), _jsx("rect", { x: "8", y: "7.5", width: "6", height: "2", rx: "1", fill: "none", strokeWidth: "1.4" }), _jsx("rect", { x: "8", y: "11.5", width: "6", height: "2", rx: "1", fill: "none", strokeWidth: "1.4" })] }));
+}
+function clampNumber(value, lo, hi, fallback) {
+    const n = typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+    return Math.min(hi, Math.max(lo, n));
+}
+function forceOptionsForSpread(spread) {
+    const s = clampNumber(spread, 0.6, 2.4, 1);
+    // Keep defaults in `graph.ts` as the baseline.
+    const springLength = 240 * s;
+    const repulsionStrength = 9000 * s * s;
+    return { springLength, repulsionStrength };
+}
 const AMX_LAYOUT_STORAGE_KEY = 'abstractuic_amx_saved_layouts_v1';
 const AMX_VIEWPORT_MIN_ZOOM = 0.025;
 const AMX_VIEWPORT_MAX_ZOOM = 6;
@@ -305,7 +318,7 @@ function predicateSummary(assertions, opts = {}) {
     const more = preds.length > max ? ` +${preds.length - max}` : '';
     return `${label}${more}`.trim();
 }
-export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, activeMemoryText, packets, packetsVersion, packedCount, dropped, estimatedTokens, effort, warnings, onQuery, onItemsReplace, onOpenSpan, onOpenTranscript, }) {
+export function KgActiveMemoryExplorer({ resetKey, queryMode, items, activeMemoryText, packets, packetsVersion, packedCount, dropped, estimatedTokens, effort, warnings, onQuery, onItemsReplace, onOpenSpan, onOpenTranscript, }) {
     const flowRef = useRef(null);
     const stepSig = useMemo(() => {
         const first = items?.[0];
@@ -342,14 +355,22 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
     });
     const compactViewport = miniMapDefaults.compact;
     const [showMiniMap, setShowMiniMap] = useState(miniMapDefaults.show);
+    const [showLegend, setShowLegend] = useState(false);
     const layoutKey = resetSig;
     const defaultLayoutSeed = useMemo(() => hashStringToSeed(layoutKey), [layoutKey]);
     const [layoutKind, setLayoutKind] = useState('grid');
     const [layoutSeed, setLayoutSeed] = useState(defaultLayoutSeed);
     const [layoutPlaying, setLayoutPlaying] = useState(false);
+    const [layoutSpread, setLayoutSpread] = useState(1.0);
     const simRef = useRef(null);
     const pendingViewportRef = useRef(null);
     const pendingFitViewRef = useRef(false);
+    const [flowEpoch, setFlowEpoch] = useState(0);
+    const graphWrapRef = useRef(null);
+    const rescueRemountsRef = useRef(0);
+    const rescueAttemptsRef = useRef(0);
+    const rescueProbeRef = useRef(0);
+    const rescueRafRef = useRef(0);
     const [hasSavedLayout, setHasSavedLayout] = useState(false);
     const [savedLayoutAt, setSavedLayoutAt] = useState('');
     const [nodePositions, setNodePositions] = useState({});
@@ -508,6 +529,9 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
         simRef.current = null;
         pendingViewportRef.current = null;
         pendingFitViewRef.current = false;
+        rescueRemountsRef.current = 0;
+        rescueAttemptsRef.current = 0;
+        rescueProbeRef.current = 0;
         const saved = loadSavedLayout(layoutKey);
         if (saved && Object.keys(saved.positions || {}).length) {
             setLayoutKind(saved.kind);
@@ -547,7 +571,7 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
         setNodePositions(fallback);
         // If the user chose a force layout but hasn't saved one, auto-run a short stabilization pass.
         if (layoutKind === 'force' && graph.nodes.length > 0 && graph.nodes.length <= 320) {
-            simRef.current = initForceSimulation(graph, { seed, positions: fallback });
+            simRef.current = initForceSimulation(graph, { seed, positions: fallback, ...forceOptionsForSpread(layoutSpread) });
             setLayoutPlaying(true);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -647,6 +671,16 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
             simRef.current = null;
         }
     }, [layoutPlaying]);
+    useEffect(() => {
+        if (layoutKind !== 'force')
+            return;
+        const sim = simRef.current;
+        if (!sim)
+            return;
+        const opts = forceOptionsForSpread(layoutSpread);
+        sim.options.springLength = opts.springLength;
+        sim.options.repulsionStrength = opts.repulsionStrength;
+    }, [layoutKind, layoutSpread]);
     useEffect(() => {
         if (layoutKind === 'force')
             return;
@@ -663,7 +697,11 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
         if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
             return;
         if (!simRef.current) {
-            simRef.current = initForceSimulation(graph, { seed: layoutSeed, positions: nodePositionsRef.current });
+            simRef.current = initForceSimulation(graph, {
+                seed: layoutSeed,
+                positions: nodePositionsRef.current,
+                ...forceOptionsForSpread(layoutSpread),
+            });
         }
         let raf = 0;
         let lastTs = 0;
@@ -955,10 +993,10 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
         const positions = buildKgLayout(graph, { kind, seed });
         setNodePositions(positions);
         if (kind === 'force' && (next.autoPlay ?? true) && graph.nodes.length > 0 && graph.nodes.length <= 320) {
-            simRef.current = initForceSimulation(graph, { seed, positions });
+            simRef.current = initForceSimulation(graph, { seed, positions, ...forceOptionsForSpread(layoutSpread) });
             setLayoutPlaying(true);
         }
-    }, [graph]);
+    }, [graph, layoutSpread]);
     const toggleSimulation = useCallback(() => {
         if (layoutKind !== 'force')
             return;
@@ -966,9 +1004,137 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
             setLayoutPlaying(false);
             return;
         }
-        simRef.current = initForceSimulation(graph, { seed: layoutSeed, positions: nodePositionsRef.current });
+        simRef.current = initForceSimulation(graph, {
+            seed: layoutSeed,
+            positions: nodePositionsRef.current,
+            ...forceOptionsForSpread(layoutSpread),
+        });
         setLayoutPlaying(true);
-    }, [graph, layoutKind, layoutPlaying, layoutSeed]);
+    }, [graph, layoutKind, layoutPlaying, layoutSeed, layoutSpread]);
+    useEffect(() => {
+        return () => {
+            if (typeof window === 'undefined')
+                return;
+            if (typeof window.cancelAnimationFrame !== 'function')
+                return;
+            if (rescueRafRef.current)
+                window.cancelAnimationFrame(rescueRafRef.current);
+        };
+    }, []);
+    const isGraphViewportBlank = useCallback(() => {
+        const inst = flowRef.current;
+        if (!inst || typeof inst.getViewport !== 'function')
+            return null;
+        if (!nodeIds.length)
+            return null;
+        const el = graphWrapRef.current;
+        if (!el)
+            return null;
+        const rect = el.getBoundingClientRect();
+        if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height) || rect.width < 64 || rect.height < 64)
+            return null;
+        const vp = inst.getViewport();
+        const zoom = typeof vp?.zoom === 'number' && Number.isFinite(vp.zoom) ? vp.zoom : null;
+        const tx = typeof vp?.x === 'number' && Number.isFinite(vp.x) ? vp.x : null;
+        const ty = typeof vp?.y === 'number' && Number.isFinite(vp.y) ? vp.y : null;
+        if (zoom === null || tx === null || ty === null || zoom <= 0)
+            return null;
+        const margin = 140;
+        const maxCheck = Math.min(nodeIds.length, 180);
+        const pos = nodePositionsRef.current;
+        let checked = 0;
+        let valid = 0;
+        for (const id of nodeIds) {
+            const p = pos[id];
+            if (!p || !Number.isFinite(p.x) || !Number.isFinite(p.y))
+                continue;
+            valid += 1;
+            const candidates = [
+                { x: p.x, y: p.y },
+                { x: p.x + 90, y: p.y + 24 },
+            ];
+            for (const c of candidates) {
+                const sx = c.x * zoom + tx;
+                const sy = c.y * zoom + ty;
+                if (sx > -margin && sx < rect.width + margin && sy > -margin && sy < rect.height + margin)
+                    return false;
+            }
+            checked++;
+            if (checked >= maxCheck)
+                break;
+        }
+        if (!valid)
+            return null;
+        return true;
+    }, [nodeIds]);
+    const scheduleViewportRescue = useCallback((why) => {
+        if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
+            return;
+        if (rescueRafRef.current)
+            return;
+        rescueRafRef.current = window.requestAnimationFrame(() => {
+            rescueRafRef.current = 0;
+            const blank = isGraphViewportBlank();
+            if (blank === null) {
+                if (rescueProbeRef.current >= 12)
+                    return;
+                rescueProbeRef.current += 1;
+                window.setTimeout(() => scheduleViewportRescue(`${why}:probe`), 120);
+                return;
+            }
+            if (blank !== true) {
+                rescueProbeRef.current = 0;
+                rescueAttemptsRef.current = 0;
+                return;
+            }
+            rescueProbeRef.current = 0;
+            const inst = flowRef.current;
+            if (inst && typeof inst.fitView === 'function') {
+                try {
+                    inst.fitView({ padding: 0.2, duration: 0 });
+                }
+                catch {
+                    try {
+                        inst.fitView({ padding: 0.2 });
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+            }
+            rescueAttemptsRef.current += 1;
+            if (rescueAttemptsRef.current >= 4 && rescueRemountsRef.current < 1) {
+                rescueAttemptsRef.current = 0;
+                rescueRemountsRef.current += 1;
+                setFlowEpoch((v) => v + 1);
+                return;
+            }
+            if (rescueAttemptsRef.current < 8) {
+                window.setTimeout(() => scheduleViewportRescue(`${why}:retry`), 220);
+            }
+        });
+    }, [isGraphViewportBlank]);
+    useEffect(() => {
+        rescueAttemptsRef.current = 0;
+        rescueRemountsRef.current = 0;
+        rescueProbeRef.current = 0;
+        scheduleViewportRescue('mount');
+    }, [resetSig, scheduleViewportRescue]);
+    useEffect(() => {
+        scheduleViewportRescue('graph change');
+    }, [nodeIdsSig, scheduleViewportRescue]);
+    useEffect(() => {
+        const el = graphWrapRef.current;
+        if (!el)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        if (typeof ResizeObserver !== 'function')
+            return;
+        const obs = new ResizeObserver(() => scheduleViewportRescue('resize'));
+        obs.observe(el);
+        return () => obs.disconnect();
+    }, [scheduleViewportRescue]);
     const saveLayoutNow = useCallback(() => {
         const now = new Date().toISOString();
         const positions = {};
@@ -1246,77 +1412,79 @@ export function KgActiveMemoryExplorer({ title, resetKey, queryMode, items, acti
         setSelectedNodeId('');
         setSelectedEdgeId('');
     }, []);
-    const header = title ? `KG snapshot (${title})` : 'KG snapshot';
+    const header = 'Search KG';
     const nodeCount = graph.nodes.length;
     const edgeCount = graph.edges.length;
     const itemCount = visibleItems.length;
-    return (_jsxs("div", { className: "amx-root", children: [_jsxs("div", { className: "amx-left", children: [_jsx("div", { className: "amx-graph", "aria-label": "Knowledge graph", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, defaultViewport: { x: 0, y: 0, zoom: 1 }, minZoom: AMX_VIEWPORT_MIN_ZOOM, maxZoom: AMX_VIEWPORT_MAX_ZOOM, onInit: (inst) => {
-                                    flowRef.current = inst;
-                                    const vp = pendingViewportRef.current;
-                                    if (vp && typeof inst.setViewport === 'function') {
-                                        try {
-                                            inst.setViewport(vp, { duration: 0 });
-                                        }
-                                        catch {
+    return (_jsxs("div", { className: "amx-root", children: [_jsxs("div", { className: "amx-left", children: [_jsx("div", { className: "amx-graphbar", role: "toolbar", "aria-label": "Graph layout controls", children: _jsxs("div", { className: "amx-graphbar-row", children: [_jsx("span", { className: "amx-graphbar-title", children: "layout" }), _jsxs("select", { value: layoutKind, onChange: (e) => setLayoutKind(normalizeLayoutKind(e.target.value, layoutKind)), disabled: !nodeIds.length, children: [_jsx("option", { value: "grid", children: "grid (deterministic)" }), _jsx("option", { value: "radial", children: "radial (bfs)" }), _jsx("option", { value: "circle", children: "circle" }), _jsx("option", { value: "force", children: "force (simulation)" })] }), layoutKind === 'force' ? (_jsxs("label", { className: "amx-graphbar-spread", children: [_jsx("span", { className: "amx-graphbar-title", children: "spread" }), _jsx("input", { type: "range", min: "0.7", max: "2.2", step: "0.1", value: layoutSpread, onChange: (e) => setLayoutSpread(clampNumber(Number(e.target.value), 0.7, 2.2, 1)) }), _jsxs("span", { className: "amx-small", children: [layoutSpread.toFixed(1), "\u00D7"] })] })) : null, _jsx("button", { type: "button", className: "amx-btn", onClick: () => applyLayoutNow({ kind: layoutKind, seed: layoutSeed }), disabled: !nodeIds.length, children: "Apply" }), _jsx("button", { type: "button", className: "amx-btn", onClick: toggleSimulation, disabled: !nodeIds.length || layoutKind !== 'force', children: layoutPlaying ? 'Pause simulation' : 'Play simulation' })] }) }), _jsxs("div", { className: "amx-graph", "aria-label": "Knowledge graph", ref: graphWrapRef, children: [_jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, defaultViewport: { x: 0, y: 0, zoom: 1 }, minZoom: AMX_VIEWPORT_MIN_ZOOM, maxZoom: AMX_VIEWPORT_MAX_ZOOM, onInit: (inst) => {
+                                        flowRef.current = inst;
+                                        const vp = pendingViewportRef.current;
+                                        if (vp && typeof inst.setViewport === 'function') {
                                             try {
-                                                inst.setViewport(vp);
+                                                inst.setViewport(vp, { duration: 0 });
                                             }
                                             catch {
-                                                // ignore
+                                                try {
+                                                    inst.setViewport(vp);
+                                                }
+                                                catch {
+                                                    // ignore
+                                                }
                                             }
                                         }
-                                    }
-                                    if (pendingFitViewRef.current && typeof inst.fitView === 'function') {
-                                        try {
-                                            inst.fitView({ padding: 0.2, duration: 0 });
-                                        }
-                                        catch {
+                                        if (pendingFitViewRef.current && typeof inst.fitView === 'function') {
                                             try {
-                                                inst.fitView({ padding: 0.2 });
+                                                inst.fitView({ padding: 0.2, duration: 0 });
                                             }
                                             catch {
-                                                // ignore
+                                                try {
+                                                    inst.fitView({ padding: 0.2 });
+                                                }
+                                                catch {
+                                                    // ignore
+                                                }
                                             }
                                         }
-                                    }
-                                    pendingViewportRef.current = null;
-                                    pendingFitViewRef.current = false;
-                                }, nodesDraggable: true, nodesConnectable: false, elementsSelectable: true, onNodesChange: onNodesChange, onNodeClick: (_, n) => {
-                                    setSelectedEdgeId('');
-                                    setSelectedNodeId(n.id);
-                                }, onEdgeClick: (_, e) => {
-                                    setSelectedNodeId('');
-                                    setSelectedEdgeId(e.id);
-                                }, onPaneClick: () => {
-                                    setSelectedNodeId('');
-                                    setSelectedEdgeId('');
-                                }, children: [_jsx(Controls, {}), _jsx(Panel, { position: "top-right", children: _jsxs("div", { className: "amx-panel-toggles", children: [_jsx("button", { type: "button", className: "amx-minimap-toggle", onClick: () => setShowMiniMap((v) => !v), title: showMiniMap ? 'Hide minimap preview' : 'Show minimap preview', "aria-label": showMiniMap ? 'Hide minimap preview' : 'Show minimap preview', children: showMiniMap ? 'minimap on' : 'minimap off' }), layoutKind === 'force' ? (_jsx("button", { type: "button", className: "amx-minimap-toggle", onClick: toggleSimulation, title: layoutPlaying ? 'Pause force layout simulation' : 'Play force layout simulation', "aria-label": layoutPlaying ? 'Pause simulation' : 'Play simulation', children: layoutPlaying ? 'sim pause' : 'sim play' })) : null] }) }), showMiniMap ? (_jsx(MiniMap, { pannable: true, zoomable: true, maskColor: "rgba(0,0,0,0.45)", style: {
-                                            background: 'rgba(12, 18, 34, 0.88)',
-                                            border: '1px solid rgba(255,255,255,0.12)',
-                                            borderRadius: 10,
-                                            width: compactViewport ? 120 : 160,
-                                            height: compactViewport ? 80 : 110,
-                                        }, nodeColor: (n) => kindColor(n.data?.kind).minimap })) : null, _jsx(Background, { gap: 20, size: 1, color: "rgba(255,255,255,0.06)" })] }) }) }), _jsxs("details", { className: "amx-panel amx-controls", children: [_jsxs("summary", { children: [_jsx("span", { className: "amx-controls-title", children: header }), _jsxs("span", { className: "amx-small", children: [itemCount, " assertions \u00B7 ", nodeCount, " nodes \u00B7 ", edgeCount, " edges"] })] }), _jsxs("div", { className: "amx-toolbar", style: { marginTop: 10 }, children: [_jsxs("div", { className: "amx-toolbar-grid", children: [_jsxs("label", { children: ["search / highlight", _jsx("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "filter nodes by id/label" })] }), _jsxs("label", { children: ["group edges", _jsxs("select", { value: String(groupEdges), onChange: (e) => setGroupEdges(e.target.value === 'true'), children: [_jsx("option", { value: "true", children: "group (subject\u2192object)" }), _jsx("option", { value: "false", children: "no grouping" })] })] }), _jsxs("label", { children: ["view", _jsxs("select", { value: String(showStructural), onChange: (e) => setShowStructural(e.target.value === 'true'), children: [_jsx("option", { value: "true", children: "all assertions" }), _jsx("option", { value: "false", children: "hide rdf:type / labels" })] })] }), _jsxs("label", { children: ["path mode", _jsxs("select", { value: String(directedPath), onChange: (e) => setDirectedPath(e.target.value === 'true'), children: [_jsx("option", { value: "false", children: "undirected" }), _jsx("option", { value: "true", children: "directed" })] })] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "layout" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["layout", _jsxs("select", { value: layoutKind, onChange: (e) => setLayoutKind(normalizeLayoutKind(e.target.value, layoutKind)), children: [_jsx("option", { value: "grid", children: "grid (deterministic)" }), _jsx("option", { value: "radial", children: "radial (bfs)" }), _jsx("option", { value: "circle", children: "circle" }), _jsx("option", { value: "force", children: "force (simulation)" })] })] }), _jsxs("label", { children: ["seed", _jsx("input", { type: "number", step: "1", value: layoutSeed, onChange: (e) => setLayoutSeed(Math.trunc(Number(e.target.value || 0) || 0)) })] })] }), _jsxs("div", { className: "amx-actions", style: { marginTop: 10 }, children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => applyLayoutNow({ kind: layoutKind, seed: layoutSeed }), disabled: !nodeIds.length, children: "Apply layout" }), layoutKind === 'force' ? (_jsx("button", { type: "button", className: "amx-btn", onClick: toggleSimulation, disabled: !nodeIds.length, children: layoutPlaying ? 'Pause simulation' : 'Play simulation' })) : null, _jsx("button", { type: "button", className: "amx-btn", onClick: saveLayoutNow, disabled: !nodeIds.length, children: "Save layout" }), hasSavedLayout ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "amx-btn", onClick: loadSavedLayoutNow, children: "Load saved" }), _jsx("button", { type: "button", className: "amx-btn", onClick: clearSavedLayoutNow, children: "Clear saved" })] })) : null] }), _jsxs("div", { className: "amx-small", style: { marginTop: 10, opacity: 0.9 }, children: ["Drag nodes to adjust manually; use ", _jsx("span", { className: "amx-mono", children: "Save layout" }), " for a stable, replayable view.", hasSavedLayout ? (_jsxs("span", { children: [' ', "(saved", savedLayoutAt ? `: ${savedLayoutAt}` : '', ")"] })) : (_jsx("span", { children: " (no saved layout)" }))] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "path" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["path start", _jsxs("select", { value: pathStart, onChange: (e) => setPathStart(e.target.value), children: [_jsx("option", { value: "", children: "(none)" }), nodeIds.map((id) => (_jsx("option", { value: id, children: (() => {
-                                                                            const label = nodeLabelById.get(id) || id;
-                                                                            return label === id ? label : `${label} (${id})`;
-                                                                        })() }, id)))] })] }), _jsxs("label", { children: ["path end", _jsxs("select", { value: pathEnd, onChange: (e) => setPathEnd(e.target.value), children: [_jsx("option", { value: "", children: "(none)" }), nodeIds.map((id) => (_jsx("option", { value: id, children: (() => {
-                                                                            const label = nodeLabelById.get(id) || id;
-                                                                            return label === id ? label : `${label} (${id})`;
-                                                                        })() }, id)))] })] })] }), path ? (_jsx("div", { className: "amx-small", style: { marginTop: 10 }, children: pathSegments.map((seg, idx) => {
-                                                    const fromLabel = nodeLabelById.get(seg.from) || seg.from;
-                                                    const toLabel = nodeLabelById.get(seg.to) || seg.to;
-                                                    const arrow = seg.dir === 'reverse' ? ' ← ' : ' → ';
-                                                    const pred = seg.predicate ? ` (${seg.predicate})` : '';
-                                                    return (_jsxs("div", { children: [idx === 0 ? _jsx("span", { children: fromLabel }) : null, arrow, _jsxs("span", { children: [toLabel, pred] })] }, `${seg.edgeId}:${idx}`));
-                                                }) })) : pathStart && pathEnd ? (_jsxs("div", { className: "amx-small", style: { marginTop: 10, opacity: 0.9 }, children: ["No path found in the current subgraph (", noPathDiagnostics?.assertions ?? itemCount, " assertions \u00B7 ", noPathDiagnostics?.nodes ?? graph.nodes.length, " nodes \u00B7", ' ', noPathDiagnostics?.edges ?? graph.edges.length, " edges). Start reaches ", noPathDiagnostics?.reachableFromStart ?? 0, " nodes.", onQuery ? (_jsx("div", { style: { marginTop: 10 }, children: _jsx("button", { type: "button", className: "amx-btn", onClick: () => void expandNeighborhoodForPath(), disabled: expandLoading, children: expandLoading ? 'Expanding…' : 'Expand neighborhood' }) })) : null] })) : (_jsx("div", { className: "amx-small", style: { marginTop: 10 }, children: "(no path)" }))] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "query" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["query_text (semantic)", _jsx("input", { value: queryText, onChange: (e) => setQueryText(e.target.value), placeholder: "e.g. emotion chip" })] }), _jsxs("label", { children: ["subject (exact)", _jsx("input", { value: subject, onChange: (e) => setSubject(e.target.value), placeholder: "e.g. ex:person-data" })] }), _jsxs("label", { children: ["predicate (exact)", _jsx("input", { value: predicate, onChange: (e) => setPredicate(e.target.value), placeholder: "e.g. schema:about" })] }), _jsxs("label", { children: ["object (exact)", _jsx("input", { value: object, onChange: (e) => setObject(e.target.value), placeholder: "e.g. ex:concept-emotion-chip" })] }), _jsxs("label", { children: ["min_score", _jsx("input", { type: "number", step: "any", value: minScore, onChange: (e) => setMinScore(e.target.value), placeholder: "(auto)" })] }), _jsxs("label", { children: ["limit", _jsx("input", { type: "number", min: "-1", step: "1", value: limit, onChange: (e) => setLimit(e.target.value), placeholder: "0/-1 = unlimited (if supported)" })] })] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "advanced" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["scope", _jsxs("select", { value: scope, onChange: (e) => setScope(normalizeScope(e.target.value, scope)), children: [_jsx("option", { value: "run", children: "run" }), _jsx("option", { value: "session", children: "session" }), _jsx("option", { value: "global", children: "global" }), _jsx("option", { value: "all", children: "all" })] })] }), _jsxs("label", { children: ["recall level", _jsxs("select", { value: recallLevel, onChange: (e) => setRecallLevel(e.target.value || 'standard'), children: [_jsx("option", { value: "urgent", children: "urgent" }), _jsx("option", { value: "standard", children: "standard" }), _jsx("option", { value: "deep", children: "deep" })] })] }), _jsxs("label", { children: ["max_input_tokens", _jsx("input", { type: "number", min: "0", step: "1", value: maxInputTokens, onChange: (e) => setMaxInputTokens(e.target.value), placeholder: "(auto)" })] }), _jsxs("label", { children: ["model (budgeting)", _jsx("input", { value: model, onChange: (e) => setModel(e.target.value), placeholder: "qwen/qwen3-next-80b" })] })] })] }), _jsxs("div", { className: "amx-actions", children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => void runQuery(), disabled: !onQuery || queryLoading, children: queryLoading ? 'Querying…' : 'Query store' }), _jsx("button", { type: "button", className: "amx-btn", onClick: resetToStep, disabled: !override && !queryError && !queryLoading, children: "Reset to step output" }), override ? (_jsxs("span", { className: "amx-small", children: ["showing: ", overrideKind || 'live query'] })) : (_jsx("span", { className: "amx-small", children: "showing: step output" })), queryError ? _jsx("span", { className: "amx-small", style: { color: 'rgba(255, 80, 80, 0.95)' }, children: queryError }) : null, expandError ? _jsx("span", { className: "amx-small", style: { color: 'rgba(255, 80, 80, 0.95)' }, children: expandError }) : null] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "node colors" }), _jsx("div", { className: "amx-legend", style: { marginTop: 10 }, children: [
-                                                    { k: 'person', label: 'person' },
-                                                    { k: 'org', label: 'org' },
-                                                    { k: 'concept', label: 'concept' },
-                                                    { k: 'claim', label: 'claim' },
-                                                    { k: 'event', label: 'event' },
-                                                    { k: 'doc', label: 'doc' },
-                                                    { k: 'vocab', label: 'vocab' },
-                                                ].map(({ k, label }) => (_jsx("span", { className: "amx-legend-item", style: { borderColor: kindColor(k).stroke }, children: label }, k))) })] })] })] })] }), _jsxs("div", { className: "amx-right", children: [_jsxs("div", { className: "amx-panel", children: [_jsx("h3", { children: "Details" }), _jsx("div", { className: "amx-small", style: { marginBottom: 8 }, children: "Derived from `memory_kg_query` packetization (max_input_tokens); safe to inject into an LLM system prompt." }), (() => {
+                                        pendingViewportRef.current = null;
+                                        pendingFitViewRef.current = false;
+                                        scheduleViewportRescue('init');
+                                    }, nodesDraggable: true, nodesConnectable: false, elementsSelectable: true, onNodesChange: onNodesChange, onNodeClick: (_, n) => {
+                                        setSelectedEdgeId('');
+                                        setSelectedNodeId(n.id);
+                                    }, onEdgeClick: (_, e) => {
+                                        setSelectedNodeId('');
+                                        setSelectedEdgeId(e.id);
+                                    }, onPaneClick: () => {
+                                        setSelectedNodeId('');
+                                        setSelectedEdgeId('');
+                                    }, children: [_jsx(Controls, { className: "amx-flow-controls", children: _jsx(ControlButton, { type: "button", className: `amx-control-legend ${showLegend ? 'amx-control-legend-active' : ''}`, onClick: () => setShowLegend((v) => !v), title: showLegend ? 'Hide node color legend' : 'Show node color legend', "aria-label": showLegend ? 'Hide node color legend' : 'Show node color legend', children: _jsx(LegendIcon, {}) }) }), _jsx(Panel, { position: "bottom-right", className: "amx-panel-bottom-right", children: _jsx("div", { className: "amx-panel-toggles", children: _jsx("button", { type: "button", className: "amx-minimap-toggle", onClick: () => setShowMiniMap((v) => !v), title: showMiniMap ? 'Hide minimap preview' : 'Show minimap preview', "aria-label": showMiniMap ? 'Hide minimap preview' : 'Show minimap preview', children: showMiniMap ? 'minimap on' : 'minimap off' }) }) }), showMiniMap ? (_jsx(MiniMap, { position: "bottom-right", pannable: true, zoomable: true, maskColor: "rgba(0,0,0,0.45)", style: {
+                                                background: 'rgba(12, 18, 34, 0.88)',
+                                                border: '1px solid rgba(255,255,255,0.12)',
+                                                borderRadius: 10,
+                                                width: compactViewport ? 120 : 160,
+                                                height: compactViewport ? 80 : 110,
+                                                marginBottom: 56,
+                                            }, nodeColor: (n) => kindColor(n.data?.kind).minimap })) : null, showLegend ? (_jsxs(Panel, { position: "bottom-left", className: "amx-legend-panel", children: [_jsx("div", { className: "amx-legend-title", children: "node colors" }), _jsx("div", { className: "amx-legend", children: [
+                                                        { k: 'person', label: 'person' },
+                                                        { k: 'org', label: 'org' },
+                                                        { k: 'concept', label: 'concept' },
+                                                        { k: 'claim', label: 'claim' },
+                                                        { k: 'event', label: 'event' },
+                                                        { k: 'doc', label: 'doc' },
+                                                        { k: 'vocab', label: 'vocab' },
+                                                    ].map(({ k, label }) => (_jsx("span", { className: "amx-legend-item", style: { borderColor: kindColor(k).stroke }, children: label }, k))) })] })) : null, _jsx(Background, { gap: 20, size: 1, color: "rgba(255,255,255,0.06)" })] }) }, flowEpoch), _jsxs("details", { className: "amx-panel amx-controls", children: [_jsxs("summary", { children: [_jsx("span", { className: "amx-controls-title", children: header }), _jsxs("span", { className: "amx-small", children: [itemCount, " assertions \u00B7 ", nodeCount, " nodes \u00B7 ", edgeCount, " edges"] })] }), _jsxs("div", { className: "amx-toolbar", style: { marginTop: 10 }, children: [_jsxs("div", { className: "amx-toolbar-grid", children: [_jsxs("label", { children: ["search / highlight", _jsx("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "filter nodes by id/label" })] }), _jsxs("label", { children: ["group edges", _jsxs("select", { value: String(groupEdges), onChange: (e) => setGroupEdges(e.target.value === 'true'), children: [_jsx("option", { value: "true", children: "group (subject\u2192object)" }), _jsx("option", { value: "false", children: "no grouping" })] })] }), _jsxs("label", { children: ["view", _jsxs("select", { value: String(showStructural), onChange: (e) => setShowStructural(e.target.value === 'true'), children: [_jsx("option", { value: "true", children: "all assertions" }), _jsx("option", { value: "false", children: "hide rdf:type / labels" })] })] }), _jsxs("label", { children: ["path mode", _jsxs("select", { value: String(directedPath), onChange: (e) => setDirectedPath(e.target.value === 'true'), children: [_jsx("option", { value: "false", children: "undirected" }), _jsx("option", { value: "true", children: "directed" })] })] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "layout" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["layout", _jsxs("select", { value: layoutKind, onChange: (e) => setLayoutKind(normalizeLayoutKind(e.target.value, layoutKind)), children: [_jsx("option", { value: "grid", children: "grid (deterministic)" }), _jsx("option", { value: "radial", children: "radial (bfs)" }), _jsx("option", { value: "circle", children: "circle" }), _jsx("option", { value: "force", children: "force (simulation)" })] })] }), _jsxs("label", { children: ["seed", _jsx("input", { type: "number", step: "1", value: layoutSeed, onChange: (e) => setLayoutSeed(Math.trunc(Number(e.target.value || 0) || 0)) })] })] }), _jsxs("div", { className: "amx-actions", style: { marginTop: 10 }, children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => applyLayoutNow({ kind: layoutKind, seed: layoutSeed }), disabled: !nodeIds.length, children: "Apply layout" }), layoutKind === 'force' ? (_jsx("button", { type: "button", className: "amx-btn", onClick: toggleSimulation, disabled: !nodeIds.length, children: layoutPlaying ? 'Pause simulation' : 'Play simulation' })) : null, _jsx("button", { type: "button", className: "amx-btn", onClick: saveLayoutNow, disabled: !nodeIds.length, children: "Save layout" }), hasSavedLayout ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "amx-btn", onClick: loadSavedLayoutNow, children: "Load saved" }), _jsx("button", { type: "button", className: "amx-btn", onClick: clearSavedLayoutNow, children: "Clear saved" })] })) : null] }), _jsxs("div", { className: "amx-small", style: { marginTop: 10, opacity: 0.9 }, children: ["Drag nodes to adjust manually; use ", _jsx("span", { className: "amx-mono", children: "Save layout" }), " for a stable, replayable view.", hasSavedLayout ? (_jsxs("span", { children: [' ', "(saved", savedLayoutAt ? `: ${savedLayoutAt}` : '', ")"] })) : (_jsx("span", { children: " (no saved layout)" }))] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "path" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["path start", _jsxs("select", { value: pathStart, onChange: (e) => setPathStart(e.target.value), children: [_jsx("option", { value: "", children: "(none)" }), nodeIds.map((id) => (_jsx("option", { value: id, children: (() => {
+                                                                                    const label = nodeLabelById.get(id) || id;
+                                                                                    return label === id ? label : `${label} (${id})`;
+                                                                                })() }, id)))] })] }), _jsxs("label", { children: ["path end", _jsxs("select", { value: pathEnd, onChange: (e) => setPathEnd(e.target.value), children: [_jsx("option", { value: "", children: "(none)" }), nodeIds.map((id) => (_jsx("option", { value: id, children: (() => {
+                                                                                    const label = nodeLabelById.get(id) || id;
+                                                                                    return label === id ? label : `${label} (${id})`;
+                                                                                })() }, id)))] })] })] }), path ? (_jsx("div", { className: "amx-small", style: { marginTop: 10 }, children: pathSegments.map((seg, idx) => {
+                                                            const fromLabel = nodeLabelById.get(seg.from) || seg.from;
+                                                            const toLabel = nodeLabelById.get(seg.to) || seg.to;
+                                                            const arrow = seg.dir === 'reverse' ? ' ← ' : ' → ';
+                                                            const pred = seg.predicate ? ` (${seg.predicate})` : '';
+                                                            return (_jsxs("div", { children: [idx === 0 ? _jsx("span", { children: fromLabel }) : null, arrow, _jsxs("span", { children: [toLabel, pred] })] }, `${seg.edgeId}:${idx}`));
+                                                        }) })) : pathStart && pathEnd ? (_jsxs("div", { className: "amx-small", style: { marginTop: 10, opacity: 0.9 }, children: ["No path found in the current subgraph (", noPathDiagnostics?.assertions ?? itemCount, " assertions \u00B7 ", noPathDiagnostics?.nodes ?? graph.nodes.length, " nodes \u00B7", ' ', noPathDiagnostics?.edges ?? graph.edges.length, " edges). Start reaches ", noPathDiagnostics?.reachableFromStart ?? 0, " nodes.", onQuery ? (_jsx("div", { style: { marginTop: 10 }, children: _jsx("button", { type: "button", className: "amx-btn", onClick: () => void expandNeighborhoodForPath(), disabled: expandLoading, children: expandLoading ? 'Expanding…' : 'Expand neighborhood' }) })) : null] })) : (_jsx("div", { className: "amx-small", style: { marginTop: 10 }, children: "(no path)" }))] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "query" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["query_text (semantic)", _jsx("input", { value: queryText, onChange: (e) => setQueryText(e.target.value), placeholder: "e.g. emotion chip" })] }), _jsxs("label", { children: ["subject (exact)", _jsx("input", { value: subject, onChange: (e) => setSubject(e.target.value), placeholder: "e.g. ex:person-data" })] }), _jsxs("label", { children: ["predicate (exact)", _jsx("input", { value: predicate, onChange: (e) => setPredicate(e.target.value), placeholder: "e.g. schema:about" })] }), _jsxs("label", { children: ["object (exact)", _jsx("input", { value: object, onChange: (e) => setObject(e.target.value), placeholder: "e.g. ex:concept-emotion-chip" })] }), _jsxs("label", { children: ["min_score", _jsx("input", { type: "number", step: "any", value: minScore, onChange: (e) => setMinScore(e.target.value), placeholder: "(auto)" })] }), _jsxs("label", { children: ["limit", _jsx("input", { type: "number", min: "-1", step: "1", value: limit, onChange: (e) => setLimit(e.target.value), placeholder: "0/-1 = unlimited (if supported)" })] })] })] }), _jsxs("details", { className: "amx-details", children: [_jsx("summary", { children: "advanced" }), _jsxs("div", { className: "amx-toolbar-grid", style: { marginTop: 10 }, children: [_jsxs("label", { children: ["scope", _jsxs("select", { value: scope, onChange: (e) => setScope(normalizeScope(e.target.value, scope)), children: [_jsx("option", { value: "run", children: "run" }), _jsx("option", { value: "session", children: "session" }), _jsx("option", { value: "global", children: "global" }), _jsx("option", { value: "all", children: "all" })] })] }), _jsxs("label", { children: ["recall level", _jsxs("select", { value: recallLevel, onChange: (e) => setRecallLevel(e.target.value || 'standard'), children: [_jsx("option", { value: "urgent", children: "urgent" }), _jsx("option", { value: "standard", children: "standard" }), _jsx("option", { value: "deep", children: "deep" })] })] }), _jsxs("label", { children: ["max_input_tokens", _jsx("input", { type: "number", min: "0", step: "1", value: maxInputTokens, onChange: (e) => setMaxInputTokens(e.target.value), placeholder: "(auto)" })] }), _jsxs("label", { children: ["model (budgeting)", _jsx("input", { value: model, onChange: (e) => setModel(e.target.value), placeholder: "qwen/qwen3-next-80b" })] })] })] }), _jsxs("div", { className: "amx-actions", children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => void runQuery(), disabled: !onQuery || queryLoading, children: queryLoading ? 'Querying…' : 'Query store' }), _jsx("button", { type: "button", className: "amx-btn", onClick: resetToStep, disabled: !override && !queryError && !queryLoading, children: "Reset to step output" }), override ? (_jsxs("span", { className: "amx-small", children: ["showing: ", overrideKind || 'live query'] })) : (_jsx("span", { className: "amx-small", children: "showing: step output" })), queryError ? _jsx("span", { className: "amx-small", style: { color: 'rgba(255, 80, 80, 0.95)' }, children: queryError }) : null, expandError ? _jsx("span", { className: "amx-small", style: { color: 'rgba(255, 80, 80, 0.95)' }, children: expandError }) : null] })] })] })] })] }), _jsxs("div", { className: "amx-right", children: [_jsxs("div", { className: "amx-panel", children: [_jsx("h3", { children: "Details" }), _jsx("div", { className: "amx-small", style: { marginBottom: 8 }, children: "Derived from `memory_kg_query` packetization (max_input_tokens); safe to inject into an LLM system prompt." }), (() => {
                                 const s = formatEffort(displayEffort);
                                 if (!s)
                                     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstractframework/monitor-active-memory",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "Shared KG + Active Memory explorer UI components for AbstractFramework clients (AbstractFlow, AbstractObserver, AbstractCode).",
   "type": "module",
   "author": "Laurent-Philippe Albou",
@@ -45,6 +45,9 @@
     "reactflow": "^11.0.0"
   },
   "devDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "reactflow": "^11.0.0",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "typescript": "^5.3.3"

package/src/styles.css

@@ -97,11 +97,53 @@
 .amx-graph {
   flex: 1 1 auto;
   min-height: 420px;
+  position: relative;
   border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.08));
   border-radius: 10px;
   overflow: hidden;
 }
 
+.amx-graphbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.08));
+  border-radius: 10px;
+  background: var(--ui-surface-2, rgba(255, 255, 255, 0.02));
+}
+
+.amx-graphbar-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.amx-graphbar-title {
+  font-size: var(--font-size-sm, 12px);
+  opacity: 0.9;
+}
+
+.amx-graphbar select {
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.10));
+  background: var(--ui-surface-3, rgba(0, 0, 0, 0.2));
+  color: inherit;
+}
+
+.amx-graphbar-spread {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.amx-graphbar-spread input[type='range'] {
+  width: 140px;
+}
+
 .amx-right {
   flex: 0 0 380px;
   width: 380px;
@@ -292,9 +334,24 @@
   border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
   border-radius: 10px;
   box-shadow: var(--ui-shadow-1, 0 14px 38px rgba(0, 0, 0, 0.45));
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
+.amx-graph .react-flow__controls .amx-control-legend {
+  order: 4;
+}
+
+.amx-graph .react-flow__controls .amx-control-legend-active {
+  background: var(--accent-subtle, rgba(233, 69, 96, 0.25));
+  color: var(--text-primary, rgba(255, 255, 255, 0.96));
+}
+
+.amx-graph .react-flow__controls .react-flow__controls-interactive {
+  order: 5;
+}
+
 .amx-graph .react-flow__controls button {
   background: transparent;
   border: none;
@@ -309,7 +366,7 @@
   color: var(--text-primary, rgba(255, 255, 255, 0.96));
 }
 
-.amx-graph .react-flow__controls button:last-child {
+.amx-graph .react-flow__controls .react-flow__controls-interactive {
   border-bottom: none;
 }
 
@@ -347,6 +404,23 @@
   align-items: flex-end;
 }
 
+.amx-legend-panel {
+  background: var(--ui-code-block-bg, rgba(12, 18, 34, 0.78));
+  border: 1px solid var(--ui-border-1, rgba(255, 255, 255, 0.12));
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: var(--ui-shadow-1, 0 14px 38px rgba(0, 0, 0, 0.45));
+  backdrop-filter: blur(10px);
+  margin-left: 52px;
+  margin-bottom: 56px;
+}
+
+.amx-legend-title {
+  font-size: var(--font-size-sm, 12px);
+  opacity: 0.9;
+  margin-bottom: 8px;
+}
+
 .amx-graph .react-flow__minimap {
   border-radius: 10px;
   overflow: hidden;