@abstractframework/monitor-active-memory 0.1.0

package/dist/KgActiveMemoryExplorer.js

@@ -0,0 +1,1398 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ReactFlow, { Background, 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()
+        .toLowerCase();
+    if (s === 'run' || s === 'session' || s === 'global' || s === 'all')
+        return s;
+    return fallback;
+}
+function isCompactViewport() {
+    if (typeof window === 'undefined')
+        return false;
+    if (typeof window.matchMedia !== 'function')
+        return false;
+    try {
+        return window.matchMedia('(pointer: coarse)').matches || window.matchMedia('(max-width: 720px)').matches;
+    }
+    catch {
+        return false;
+    }
+}
+const AMX_LAYOUT_STORAGE_KEY = 'abstractuic_amx_saved_layouts_v1';
+const AMX_VIEWPORT_MIN_ZOOM = 0.025;
+const AMX_VIEWPORT_MAX_ZOOM = 6;
+const AMX_VIEWPORT_MAX_ABS_TRANSLATE = 1000000;
+function safeLocalStorage() {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+function normalizeLayoutKind(value, fallback = 'grid') {
+    const v = String(value ?? '')
+        .trim()
+        .toLowerCase();
+    if (v === 'grid' || v === 'circle' || v === 'radial' || v === 'force')
+        return v;
+    return fallback;
+}
+function coerceXY(value) {
+    const obj = value && typeof value === 'object' && !Array.isArray(value) ? value : null;
+    if (!obj)
+        return null;
+    const x = typeof obj.x === 'number' && Number.isFinite(obj.x) ? obj.x : null;
+    const y = typeof obj.y === 'number' && Number.isFinite(obj.y) ? obj.y : null;
+    if (x === null || y === null)
+        return null;
+    return { x, y };
+}
+function loadSavedLayout(layoutKey) {
+    const storage = safeLocalStorage();
+    if (!storage)
+        return null;
+    const k = String(layoutKey ?? '').trim();
+    if (!k)
+        return null;
+    try {
+        const raw = storage.getItem(AMX_LAYOUT_STORAGE_KEY);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        const map = parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
+        if (!map)
+            return null;
+        const entry = map[k];
+        const obj = entry && typeof entry === 'object' && !Array.isArray(entry) ? entry : null;
+        if (!obj)
+            return null;
+        const version = obj.version === 1 ? 1 : null;
+        if (version === null)
+            return null;
+        const kind = normalizeLayoutKind(obj.kind, 'grid');
+        const seed = typeof obj.seed === 'number' && Number.isFinite(obj.seed) ? Math.trunc(obj.seed) : hashStringToSeed(k);
+        const positionsRaw = obj.positions && typeof obj.positions === 'object' && !Array.isArray(obj.positions) ? obj.positions : null;
+        const positions = {};
+        if (positionsRaw) {
+            for (const [id, p] of Object.entries(positionsRaw)) {
+                const xy = coerceXY(p);
+                if (xy)
+                    positions[String(id)] = xy;
+            }
+        }
+        const viewport = sanitizeViewport(obj.viewport, {
+            minZoom: AMX_VIEWPORT_MIN_ZOOM,
+            maxZoom: AMX_VIEWPORT_MAX_ZOOM,
+            maxAbsTranslate: AMX_VIEWPORT_MAX_ABS_TRANSLATE,
+        }) ?? undefined;
+        const saved_at = typeof obj.saved_at === 'string' && obj.saved_at.trim() ? obj.saved_at.trim() : '';
+        return { version, kind, seed, positions, viewport, saved_at };
+    }
+    catch {
+        return null;
+    }
+}
+function saveLayout(layoutKey, layout) {
+    const storage = safeLocalStorage();
+    if (!storage)
+        return;
+    const k = String(layoutKey ?? '').trim();
+    if (!k)
+        return;
+    try {
+        const raw = storage.getItem(AMX_LAYOUT_STORAGE_KEY);
+        const parsed = raw ? JSON.parse(raw) : null;
+        const map = parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? { ...parsed } : {};
+        map[k] = layout;
+        storage.setItem(AMX_LAYOUT_STORAGE_KEY, JSON.stringify(map));
+    }
+    catch {
+        // ignore
+    }
+}
+function deleteLayout(layoutKey) {
+    const storage = safeLocalStorage();
+    if (!storage)
+        return;
+    const k = String(layoutKey ?? '').trim();
+    if (!k)
+        return;
+    try {
+        const raw = storage.getItem(AMX_LAYOUT_STORAGE_KEY);
+        if (!raw)
+            return;
+        const parsed = JSON.parse(raw);
+        const map = parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? { ...parsed } : null;
+        if (!map || !(k in map))
+            return;
+        delete map[k];
+        storage.setItem(AMX_LAYOUT_STORAGE_KEY, JSON.stringify(map));
+    }
+    catch {
+        // ignore
+    }
+}
+function parseOptionalFloat(text) {
+    const raw = String(text ?? '').trim();
+    if (!raw)
+        return undefined;
+    const n = Number(raw);
+    if (!Number.isFinite(n))
+        return undefined;
+    return n;
+}
+function parseOptionalInt(text, opts) {
+    const allowZero = Boolean(opts?.allowZero);
+    const allowNegativeOne = Boolean(opts?.allowNegativeOne);
+    const raw = String(text ?? '').trim();
+    if (!raw)
+        return undefined;
+    const n = Number(raw);
+    if (!Number.isFinite(n))
+        return undefined;
+    const i = Math.trunc(n);
+    if (allowNegativeOne && i === -1)
+        return -1;
+    if (!allowZero && i <= 0)
+        return undefined;
+    if (allowZero && i < 0)
+        return undefined;
+    return i;
+}
+function formatEffort(effort) {
+    if (!effort || typeof effort !== 'object' || Array.isArray(effort))
+        return null;
+    const obj = effort;
+    const recallLevel = typeof obj.recall_level === 'string' ? obj.recall_level : '';
+    const applied = obj.applied && typeof obj.applied === 'object' && !Array.isArray(obj.applied) ? obj.applied : null;
+    const parts = [];
+    if (recallLevel)
+        parts.push(`recall_level=${recallLevel}`);
+    if (applied) {
+        if (typeof applied.limit === 'number')
+            parts.push(`limit=${applied.limit}`);
+        if (typeof applied.min_score === 'number')
+            parts.push(`min_score=${applied.min_score}`);
+        if (typeof applied.max_input_tokens === 'number')
+            parts.push(`max_input_tokens=${applied.max_input_tokens}`);
+    }
+    return parts.length ? parts.join(' · ') : null;
+}
+function formatAssertionMeta(a) {
+    if (!a || typeof a !== 'object')
+        return null;
+    const parts = [];
+    const scope = typeof a.scope === 'string' ? a.scope.trim() : '';
+    const owner = typeof a.owner_id === 'string' ? a.owner_id.trim() : '';
+    if (scope)
+        parts.push(`scope=${scope}`);
+    if (owner)
+        parts.push(`owner_id=${owner}`);
+    const conf = typeof a.confidence === 'number' && Number.isFinite(a.confidence) ? a.confidence : null;
+    if (conf !== null)
+        parts.push(`confidence=${conf.toFixed(3)}`);
+    const prov = a.provenance && typeof a.provenance === 'object' && !Array.isArray(a.provenance) ? a.provenance : null;
+    if (prov) {
+        const wr = typeof prov.writer_run_id === 'string' ? prov.writer_run_id.trim() : '';
+        const wf = typeof prov.writer_workflow_id === 'string' ? prov.writer_workflow_id.trim() : '';
+        if (wr)
+            parts.push(`writer_run_id=${wr}`);
+        if (wf)
+            parts.push(`writer_workflow_id=${wf}`);
+    }
+    const attrs = a.attributes && typeof a.attributes === 'object' && !Array.isArray(a.attributes) ? a.attributes : null;
+    const ret = attrs && attrs._retrieval && typeof attrs._retrieval === 'object' && !Array.isArray(attrs._retrieval) ? attrs._retrieval : null;
+    const score = ret && typeof ret.score === 'number' && Number.isFinite(ret.score) ? ret.score : null;
+    if (score !== null)
+        parts.push(`score=${score.toFixed(3)}`);
+    return parts.length ? parts.join(' · ') : null;
+}
+function renderHighlight(text, needle) {
+    const hay = String(text ?? '');
+    const q = String(needle ?? '').trim();
+    if (!q)
+        return hay;
+    const idx = hay.toLowerCase().indexOf(q.toLowerCase());
+    if (idx < 0)
+        return hay;
+    const before = hay.slice(0, idx);
+    const match = hay.slice(idx, idx + q.length);
+    const after = hay.slice(idx + q.length);
+    return (_jsxs(_Fragment, { children: [before, _jsx("span", { className: "amx-hl", children: match }), after] }));
+}
+function kindColor(kind) {
+    const k = String(kind ?? '').trim().toLowerCase();
+    if (k === 'person')
+        return { stroke: 'rgba(96, 165, 250, 0.82)', bg: 'rgba(96, 165, 250, 0.10)', minimap: 'rgba(96, 165, 250, 0.85)' };
+    if (k === 'org')
+        return { stroke: 'rgba(34, 197, 94, 0.78)', bg: 'rgba(34, 197, 94, 0.10)', minimap: 'rgba(34, 197, 94, 0.82)' };
+    if (k === 'concept')
+        return { stroke: 'rgba(168, 85, 247, 0.78)', bg: 'rgba(168, 85, 247, 0.10)', minimap: 'rgba(168, 85, 247, 0.82)' };
+    if (k === 'claim')
+        return { stroke: 'rgba(251, 191, 36, 0.78)', bg: 'rgba(251, 191, 36, 0.10)', minimap: 'rgba(251, 191, 36, 0.82)' };
+    if (k === 'event')
+        return { stroke: 'rgba(239, 68, 68, 0.74)', bg: 'rgba(239, 68, 68, 0.10)', minimap: 'rgba(239, 68, 68, 0.80)' };
+    if (k === 'doc')
+        return { stroke: 'rgba(14, 165, 233, 0.74)', bg: 'rgba(14, 165, 233, 0.10)', minimap: 'rgba(14, 165, 233, 0.80)' };
+    if (k === 'vocab')
+        return { stroke: 'rgba(148, 163, 184, 0.55)', bg: 'rgba(148, 163, 184, 0.06)', minimap: 'rgba(148, 163, 184, 0.70)' };
+    if (k === 'thing')
+        return { stroke: 'rgba(255, 255, 255, 0.20)', bg: 'rgba(255, 255, 255, 0.04)', minimap: 'rgba(255, 255, 255, 0.30)' };
+    return { stroke: 'rgba(255, 255, 255, 0.14)', bg: 'rgba(0, 0, 0, 0.18)', minimap: 'rgba(255, 255, 255, 0.24)' };
+}
+function parseIsoMs(ts) {
+    const raw = typeof ts === 'string' ? ts.trim() : '';
+    if (!raw)
+        return null;
+    // Trim microseconds to milliseconds for Date.parse compatibility.
+    const normalized = raw.replace(/(\.\d{3})\d+/, '$1');
+    const ms = Date.parse(normalized);
+    return Number.isFinite(ms) ? ms : null;
+}
+function formatUtcMinute(ts) {
+    const ms = parseIsoMs(ts);
+    if (ms === null)
+        return '';
+    const d = new Date(ms);
+    const yyyy = d.getUTCFullYear();
+    const mm = String(d.getUTCMonth() + 1).padStart(2, '0');
+    const dd = String(d.getUTCDate()).padStart(2, '0');
+    const hh = String(d.getUTCHours()).padStart(2, '0');
+    const mi = String(d.getUTCMinutes()).padStart(2, '0');
+    return `${yyyy}/${mm}/${dd} ${hh}:${mi}`;
+}
+function shortTerm(term) {
+    const s = String(term ?? '').trim();
+    if (!s)
+        return '';
+    const idx = s.indexOf(':');
+    if (idx !== -1 && idx < s.length - 1)
+        return s.slice(idx + 1);
+    return s;
+}
+function isStructuralPredicate(predicate, structural) {
+    const p = String(predicate ?? '')
+        .trim()
+        .toLowerCase();
+    return Boolean(p && structural.has(p));
+}
+function predicateSummary(assertions, opts = {}) {
+    const max = Math.max(1, opts.maxPredicates ?? 3);
+    const predCounts = new Map();
+    for (const a of assertions) {
+        const p = String(a?.predicate || '').trim();
+        if (!p)
+            continue;
+        predCounts.set(p, (predCounts.get(p) || 0) + 1);
+    }
+    const preds = Array.from(predCounts.entries());
+    preds.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+    const top = preds.slice(0, max);
+    const label = top
+        .map(([p, c]) => {
+        const term = shortTerm(p);
+        return c > 1 ? `${term}×${c}` : term;
+    })
+        .join(' | ');
+    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, }) {
+    const flowRef = useRef(null);
+    const stepSig = useMemo(() => {
+        const first = items?.[0];
+        const last = items?.[items.length - 1];
+        const f = first ? `${first.subject}|${first.predicate}|${first.object}` : '';
+        const l = last ? `${last.subject}|${last.predicate}|${last.object}` : '';
+        return `${items?.length || 0}:${f}:${l}`;
+    }, [items]);
+    const resetSig = String(resetKey ?? stepSig);
+    const queryMode2 = queryMode === 'replace' ? 'replace' : 'override';
+    const [override, setOverride] = useState(null);
+    const [overrideKind, setOverrideKind] = useState(null);
+    const [queryLoading, setQueryLoading] = useState(false);
+    const [queryError, setQueryError] = useState('');
+    const [expandLoading, setExpandLoading] = useState(false);
+    const [expandError, setExpandError] = useState('');
+    useEffect(() => {
+        setOverride(null);
+        setOverrideKind(null);
+        setQueryError('');
+        setQueryLoading(false);
+        setExpandError('');
+        setExpandLoading(false);
+    }, [resetSig]);
+    const [search, setSearch] = useState('');
+    const [groupEdges, setGroupEdges] = useState(true);
+    // Users typically want “connectivity between ideas”, so default to undirected.
+    const [directedPath, setDirectedPath] = useState(false);
+    const [showStructural, setShowStructural] = useState(true);
+    const [miniMapDefaults] = useState(() => {
+        const compact = isCompactViewport();
+        // Default to collapsed across viewports to keep the graph usable (especially on dense maps).
+        return { compact, show: false };
+    });
+    const compactViewport = miniMapDefaults.compact;
+    const [showMiniMap, setShowMiniMap] = useState(miniMapDefaults.show);
+    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 simRef = useRef(null);
+    const pendingViewportRef = useRef(null);
+    const pendingFitViewRef = useRef(false);
+    const [hasSavedLayout, setHasSavedLayout] = useState(false);
+    const [savedLayoutAt, setSavedLayoutAt] = useState('');
+    const [nodePositions, setNodePositions] = useState({});
+    const nodePositionsRef = useRef({});
+    useEffect(() => {
+        nodePositionsRef.current = nodePositions;
+    }, [nodePositions]);
+    const [pathStart, setPathStart] = useState('');
+    const [pathEnd, setPathEnd] = useState('');
+    const inferredScope = useMemo(() => {
+        const s = items?.[0]?.scope;
+        return normalizeScope(s, 'session');
+    }, [items]);
+    const [scope, setScope] = useState(inferredScope);
+    const [recallLevel, setRecallLevel] = useState('standard');
+    const [queryText, setQueryText] = useState('');
+    const [subject, setSubject] = useState('');
+    const [predicate, setPredicate] = useState('');
+    const [object, setObject] = useState('');
+    const [minScore, setMinScore] = useState('');
+    const [limit, setLimit] = useState('');
+    const [maxInputTokens, setMaxInputTokens] = useState('');
+    const [model, setModel] = useState('qwen/qwen3-next-80b');
+    // If the "context" changes (e.g. different step/run), default scope to match.
+    // For streaming use-cases, set `resetKey` so scope doesn't flap as items update.
+    useEffect(() => {
+        setScope(inferredScope);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetSig]);
+    const stepItems = Array.isArray(items) ? items : [];
+    const stepActiveMemoryText = typeof activeMemoryText === 'string' ? activeMemoryText : '';
+    const stepPackets = Array.isArray(packets) ? packets : [];
+    const stepPacketsVersion = typeof packetsVersion === 'number' ? packetsVersion : undefined;
+    const stepPackedCount = typeof packedCount === 'number' ? packedCount : undefined;
+    const stepDropped = typeof dropped === 'number' ? dropped : undefined;
+    const stepEstimatedTokens = typeof estimatedTokens === 'number' ? estimatedTokens : undefined;
+    const stepEffort = effort;
+    const stepWarnings = warnings;
+    const displayItems = queryMode2 === 'override' && override?.items && Array.isArray(override.items) ? override.items : stepItems;
+    const displayActiveMemoryText = typeof override?.active_memory_text === 'string' && override.active_memory_text.trim()
+        ? override.active_memory_text
+        : stepActiveMemoryText;
+    const displayEffort = override?.effort ?? stepEffort;
+    const displayWarnings = override?.warnings ?? stepWarnings;
+    const structuralPredicates = useMemo(() => new Set([
+        'rdf:type',
+        'schema:name',
+        'skos:preflabel',
+        'skos:altlabel',
+        'dcterms:title',
+        'dcterms:identifier',
+    ]), []);
+    const visibleItems = useMemo(() => {
+        if (showStructural)
+            return displayItems;
+        return (displayItems || []).filter((a) => !isStructuralPredicate(a?.predicate, structuralPredicates));
+    }, [displayItems, showStructural, structuralPredicates]);
+    const baseGraph = useMemo(() => buildKgGraph(displayItems, { groupEdges }), [displayItems, groupEdges]);
+    const graph = useMemo(() => {
+        if (showStructural)
+            return baseGraph;
+        const edges = [];
+        for (const e of baseGraph.edges) {
+            const assertionsRaw = e && e.data && Array.isArray(e.data.assertions) ? e.data.assertions : [];
+            const assertions = assertionsRaw.filter((a) => !isStructuralPredicate(a?.predicate, structuralPredicates));
+            if (!assertions.length)
+                continue;
+            const summary = predicateSummary(assertions);
+            edges.push({
+                ...e,
+                label: summary,
+                data: {
+                    ...e.data,
+                    assertions,
+                    predicateSummary: summary,
+                },
+            });
+        }
+        return { nodes: baseGraph.nodes, edges };
+    }, [baseGraph, showStructural, structuralPredicates]);
+    const nodeIds = useMemo(() => graph.nodes.map((n) => n.id), [graph.nodes]);
+    const nodeIdsSig = useMemo(() => {
+        const first = nodeIds[0] || '';
+        const last = nodeIds[nodeIds.length - 1] || '';
+        return `${nodeIds.length}:${first}:${last}`;
+    }, [nodeIds]);
+    const nodeLabelById = useMemo(() => {
+        const m = new Map();
+        for (const n of graph.nodes)
+            m.set(n.id, String(n.data?.label || n.id));
+        return m;
+    }, [graph.nodes]);
+    const nodeKindById = useMemo(() => {
+        const m = new Map();
+        for (const n of graph.nodes)
+            m.set(n.id, String(n.data?.kind || ''));
+        return m;
+    }, [graph.nodes]);
+    const searchKey = search.trim().toLowerCase();
+    const matchedNodeIds = useMemo(() => {
+        if (!searchKey)
+            return new Set();
+        const set = new Set();
+        for (const n of graph.nodes) {
+            const id = String(n.id || '').toLowerCase();
+            const label = String(n.data?.label || '').toLowerCase();
+            if (id.includes(searchKey) || label.includes(searchKey))
+                set.add(n.id);
+        }
+        return set;
+    }, [graph.nodes, searchKey]);
+    const applyPositionsToNodes = useCallback((positions, fallback) => {
+        const next = {};
+        for (const id of nodeIds) {
+            const p = positions[id] || fallback[id];
+            next[id] = p ? { x: p.x, y: p.y } : { x: 0, y: 0 };
+        }
+        return next;
+    }, [nodeIds]);
+    useEffect(() => {
+        // Ensure all current nodes have a position (preserve user-dragged positions).
+        setNodePositions((prev) => {
+            const fallback = buildKgLayout(graph, { kind: layoutKind, seed: layoutSeed });
+            const next = {};
+            for (const id of nodeIds) {
+                const p = prev[id] || fallback[id];
+                next[id] = p ? { x: p.x, y: p.y } : { x: 0, y: 0 };
+            }
+            return next;
+        });
+    }, [graph, layoutKind, layoutSeed, nodeIds, nodeIdsSig]);
+    useEffect(() => {
+        if (!pendingFitViewRef.current)
+            return;
+        const inst = flowRef.current;
+        if (!inst || typeof inst.fitView !== 'function')
+            return;
+        if (!nodeIds.length)
+            return;
+        pendingFitViewRef.current = false;
+        try {
+            inst.fitView({ padding: 0.2, duration: 0 });
+        }
+        catch {
+            try {
+                inst.fitView({ padding: 0.2 });
+            }
+            catch {
+                // ignore
+            }
+        }
+    }, [nodeIds.length, nodeIdsSig, nodePositions]);
+    useEffect(() => {
+        // Load saved layout for this view key (if present). Falls back to a deterministic layout.
+        setLayoutPlaying(false);
+        simRef.current = null;
+        pendingViewportRef.current = null;
+        pendingFitViewRef.current = false;
+        const saved = loadSavedLayout(layoutKey);
+        if (saved && Object.keys(saved.positions || {}).length) {
+            setLayoutKind(saved.kind);
+            setLayoutSeed(saved.seed);
+            setHasSavedLayout(true);
+            setSavedLayoutAt(saved.saved_at || '');
+            if (saved.viewport) {
+                pendingViewportRef.current = saved.viewport;
+                const inst = flowRef.current;
+                if (inst && typeof inst.setViewport === 'function') {
+                    try {
+                        inst.setViewport(saved.viewport, { duration: 0 });
+                    }
+                    catch {
+                        try {
+                            inst.setViewport(saved.viewport);
+                        }
+                        catch {
+                            // ignore
+                        }
+                    }
+                    pendingViewportRef.current = null;
+                }
+            }
+            else {
+                pendingFitViewRef.current = true;
+            }
+            const fallback = buildKgLayout(graph, { kind: saved.kind, seed: saved.seed });
+            setNodePositions(applyPositionsToNodes(saved.positions, fallback));
+            return;
+        }
+        setHasSavedLayout(false);
+        setSavedLayoutAt('');
+        const seed = hashStringToSeed(layoutKey);
+        setLayoutSeed(seed);
+        const fallback = buildKgLayout(graph, { kind: layoutKind, seed });
+        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 });
+            setLayoutPlaying(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutKey]);
+    const path = useMemo(() => {
+        const s = String(pathStart || '').trim();
+        const e = String(pathEnd || '').trim();
+        if (!s || !e)
+            return null;
+        return shortestPath(graph, s, e, { directed: directedPath });
+    }, [graph, pathStart, pathEnd, directedPath]);
+    const isPathFocus = Boolean(path && String(pathStart || '').trim() && String(pathEnd || '').trim());
+    const noPathDiagnostics = useMemo(() => {
+        const s = String(pathStart || '').trim();
+        const e = String(pathEnd || '').trim();
+        if (!s || !e)
+            return null;
+        const directed = directedPath;
+        const adj = new Map();
+        const add = (from, to) => {
+            const cur = adj.get(from);
+            if (cur)
+                cur.push(to);
+            else
+                adj.set(from, [to]);
+        };
+        for (const edge of graph.edges) {
+            add(edge.source, edge.target);
+            if (!directed)
+                add(edge.target, edge.source);
+        }
+        const visited = new Set();
+        const q = [];
+        visited.add(s);
+        q.push(s);
+        while (q.length) {
+            const cur = q.shift();
+            const neigh = adj.get(cur) || [];
+            for (const n of neigh) {
+                if (visited.has(n))
+                    continue;
+                visited.add(n);
+                q.push(n);
+            }
+        }
+        return {
+            reachableFromStart: visited.size,
+            endReachable: visited.has(e),
+            nodes: graph.nodes.length,
+            edges: graph.edges.length,
+            assertions: visibleItems.length,
+        };
+    }, [directedPath, graph.edges, graph.nodes.length, pathEnd, pathStart, visibleItems.length]);
+    const selectedPathNodeSet = useMemo(() => new Set(path?.nodeIds || []), [path]);
+    const selectedPathEdgeSet = useMemo(() => new Set(path?.edgeIds || []), [path]);
+    const [selectedNodeId, setSelectedNodeId] = useState('');
+    const [selectedEdgeId, setSelectedEdgeId] = useState('');
+    const selectionActive = Boolean(String(selectedNodeId || '').trim() || String(selectedEdgeId || '').trim());
+    const selectionNeighborhood = useMemo(() => {
+        const nodes = new Set();
+        const edges = new Set();
+        const nid = String(selectedNodeId || '').trim();
+        const eid = String(selectedEdgeId || '').trim();
+        if (nid) {
+            nodes.add(nid);
+            for (const e of graph.edges) {
+                if (e.source === nid || e.target === nid) {
+                    edges.add(e.id);
+                    nodes.add(e.source);
+                    nodes.add(e.target);
+                }
+            }
+            return { nodes, edges };
+        }
+        if (eid) {
+            const e = graph.edges.find((x) => x.id === eid);
+            if (e) {
+                edges.add(e.id);
+                nodes.add(e.source);
+                nodes.add(e.target);
+            }
+        }
+        return { nodes, edges };
+    }, [graph.edges, selectedEdgeId, selectedNodeId]);
+    useEffect(() => {
+        setSelectedNodeId('');
+        setSelectedEdgeId('');
+        setPathStart('');
+        setPathEnd('');
+    }, [resetSig]);
+    const [showPackets, setShowPackets] = useState(false);
+    useEffect(() => {
+        setShowPackets(false);
+    }, [resetSig]);
+    useEffect(() => {
+        if (!layoutPlaying) {
+            simRef.current = null;
+        }
+    }, [layoutPlaying]);
+    useEffect(() => {
+        if (layoutKind === 'force')
+            return;
+        if (layoutPlaying)
+            setLayoutPlaying(false);
+    }, [layoutKind, layoutPlaying]);
+    useEffect(() => {
+        if (!layoutPlaying)
+            return;
+        if (layoutKind !== 'force')
+            return;
+        if (graph.nodes.length === 0)
+            return;
+        if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function')
+            return;
+        if (!simRef.current) {
+            simRef.current = initForceSimulation(graph, { seed: layoutSeed, positions: nodePositionsRef.current });
+        }
+        let raf = 0;
+        let lastTs = 0;
+        let ticks = 0;
+        const stepsPerFrame = graph.nodes.length <= 140 ? 2 : 1;
+        const maxTicks = 1600;
+        const energyThreshold = 0.08;
+        const loop = (ts) => {
+            raf = window.requestAnimationFrame(loop);
+            if (ts - lastTs < 33)
+                return; // ~30fps cap
+            lastTs = ts;
+            const sim = simRef.current;
+            if (!sim) {
+                setLayoutPlaying(false);
+                return;
+            }
+            stepForceSimulation(sim, stepsPerFrame);
+            ticks += stepsPerFrame;
+            setNodePositions(forceSimulationPositions(sim));
+            const energy = forceSimulationEnergy(sim);
+            if (energy <= energyThreshold || ticks >= maxTicks) {
+                setLayoutPlaying(false);
+            }
+        };
+        raf = window.requestAnimationFrame(loop);
+        return () => {
+            window.cancelAnimationFrame(raf);
+        };
+    }, [graph, layoutKind, layoutPlaying, layoutSeed]);
+    const nodes = useMemo(() => {
+        return graph.nodes.map((n) => {
+            const isPath = selectedPathNodeSet.has(n.id);
+            const isMatch = matchedNodeIds.has(n.id);
+            const isSelected = selectedNodeId === n.id;
+            const isNeighborhood = selectionActive && selectionNeighborhood.nodes.has(n.id);
+            const base = kindColor(n.data?.kind);
+            const matchBorder = 'rgba(34, 211, 238, 0.88)';
+            const matchGlow = isMatch
+                ? '0 0 0 1px rgba(34, 211, 238, 0.34), 0 0 16px rgba(34, 211, 238, 0.26), 0 0 44px rgba(34, 211, 238, 0.14)'
+                : '';
+            const borderColor = isPath ? 'rgba(168, 85, 247, 0.9)' : isMatch ? matchBorder : base.stroke;
+            const baseShadow = isSelected
+                ? '0 0 0 2px rgba(255,255,255,0.20), 0 18px 46px rgba(0,0,0,0.55)'
+                : isNeighborhood
+                    ? '0 0 0 1px rgba(96, 165, 250, 0.28), 0 12px 34px rgba(0,0,0,0.45)'
+                    : undefined;
+            const shadow = matchGlow && baseShadow ? `${matchGlow}, ${baseShadow}` : baseShadow || (matchGlow || undefined);
+            const bg = isPath ? 'rgba(168, 85, 247, 0.10)' : isMatch ? 'rgba(34, 211, 238, 0.08)' : base.bg;
+            const opacity = isPathFocus
+                ? isPath || isSelected
+                    ? 1
+                    : 0.16
+                : selectionActive
+                    ? isNeighborhood || isSelected
+                        ? 1
+                        : 0.10
+                    : 1;
+            return {
+                ...n,
+                position: nodePositions[n.id] ? { x: nodePositions[n.id].x, y: nodePositions[n.id].y } : n.position,
+                style: {
+                    ...(n.style || {}),
+                    border: `1px solid ${borderColor}`,
+                    borderRadius: 10,
+                    background: bg,
+                    color: 'rgba(255,255,255,0.92)',
+                    opacity,
+                    padding: 8,
+                    fontSize: 12,
+                    boxShadow: shadow,
+                    width: 180,
+                    cursor: 'pointer',
+                },
+            };
+        });
+    }, [graph.nodes, isPathFocus, matchedNodeIds, nodePositions, selectedNodeId, selectedPathNodeSet, selectionActive, selectionNeighborhood.nodes]);
+    const edges = useMemo(() => {
+        return graph.edges.map((e) => {
+            const isPath = selectedPathEdgeSet.has(e.id);
+            const isSelected = selectedEdgeId === e.id;
+            const isNeighborhood = selectionActive && selectionNeighborhood.edges.has(e.id);
+            const stroke = isPath
+                ? 'rgba(168, 85, 247, 0.9)'
+                : selectionActive
+                    ? isNeighborhood || isSelected
+                        ? 'rgba(96, 165, 250, 0.55)'
+                        : 'rgba(255,255,255,0.14)'
+                    : 'rgba(255,255,255,0.18)';
+            const width = isPath ? 2.75 : selectionActive ? (isNeighborhood || isSelected ? 2.25 : 1.25) : 1.5;
+            const glow = isSelected ? 'drop-shadow(0 0 10px rgba(168, 85, 247, 0.25))' : undefined;
+            const markerColor = isPath ? 'rgba(168, 85, 247, 0.9)' : isPathFocus ? 'rgba(255,255,255,0.10)' : 'rgba(255,255,255,0.28)';
+            const opacity = isPathFocus
+                ? isPath || isSelected
+                    ? 1
+                    : 0.10
+                : selectionActive
+                    ? isNeighborhood || isSelected
+                        ? 1
+                        : 0.08
+                    : 1;
+            const labelOpacity = isPathFocus ? (isPath || isSelected ? 1 : 0) : selectionActive ? (isNeighborhood || isSelected ? 1 : 0) : 1;
+            const label = isPathFocus ? (isPath || isSelected ? String(e.label || '') : '') : String(e.label || '');
+            return {
+                ...e,
+                label,
+                style: {
+                    ...(e.style || {}),
+                    stroke,
+                    strokeWidth: width,
+                    filter: glow,
+                    opacity,
+                },
+                animated: false,
+                markerEnd: { type: MarkerType.ArrowClosed, color: markerColor, width: 20, height: 20 },
+                labelShowBg: true,
+                labelBgPadding: [6, 3],
+                labelBgBorderRadius: 10,
+                labelBgStyle: {
+                    fill: `rgba(0, 0, 0, ${0.38 * labelOpacity})`,
+                    stroke: `rgba(255, 255, 255, ${0.14 * labelOpacity})`,
+                    strokeWidth: 1,
+                },
+                labelStyle: {
+                    fill: `rgba(255, 255, 255, ${0.92 * labelOpacity})`,
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: 0.2,
+                    textTransform: 'lowercase',
+                },
+            };
+        });
+    }, [graph.edges, isPathFocus, selectedEdgeId, selectedPathEdgeSet, selectionActive, selectionNeighborhood.edges]);
+    const selectedEdgeAssertions = useMemo(() => {
+        if (!selectedEdgeId)
+            return [];
+        const e = graph.edges.find((x) => x.id === selectedEdgeId);
+        const a = e && e.data && Array.isArray(e.data.assertions) ? e.data.assertions : [];
+        return Array.isArray(a) ? a : [];
+    }, [graph.edges, selectedEdgeId]);
+    const selectedEdge = useMemo(() => {
+        if (!selectedEdgeId)
+            return null;
+        return graph.edges.find((x) => x.id === selectedEdgeId) || null;
+    }, [graph.edges, selectedEdgeId]);
+    const selectedNodeAssertions = useMemo(() => {
+        const id = String(selectedNodeId || '').trim();
+        if (!id)
+            return [];
+        return displayItems.filter((a) => {
+            if (!a || typeof a !== 'object')
+                return false;
+            if (!(a.subject === id || a.object === id))
+                return false;
+            if (showStructural)
+                return true;
+            return !isStructuralPredicate(a.predicate, structuralPredicates);
+        });
+    }, [displayItems, selectedNodeId, showStructural, structuralPredicates]);
+    const selectedAssertions = useMemo(() => {
+        return selectedEdgeId ? selectedEdgeAssertions : selectedNodeAssertions;
+    }, [selectedEdgeAssertions, selectedEdgeId, selectedNodeAssertions]);
+    const selectedSources = useMemo(() => {
+        const out = new Map();
+        for (const a of selectedAssertions) {
+            if (!a || typeof a !== 'object')
+                continue;
+            const prov = a.provenance && typeof a.provenance === 'object' && !Array.isArray(a.provenance) ? a.provenance : null;
+            const spanId = prov && typeof prov.span_id === 'string' ? prov.span_id.trim() : '';
+            const writerRunId = prov && typeof prov.writer_run_id === 'string' ? prov.writer_run_id.trim() : '';
+            const ownerId = typeof a.owner_id === 'string' ? a.owner_id.trim() : '';
+            const spanRunId = writerRunId || ownerId;
+            if (!spanRunId || !spanId)
+                continue;
+            const key = `${spanRunId}|${spanId}`;
+            const cur = out.get(key);
+            const obs = typeof a.observed_at === 'string' ? a.observed_at.trim() : '';
+            if (cur) {
+                cur.count += 1;
+                if (obs && (!cur.last_observed_at || obs > cur.last_observed_at)) {
+                    cur.last_observed_at = obs;
+                    cur.last_observed_at_fmt = formatUtcMinute(obs);
+                    cur.assertion = a;
+                }
+            }
+            else {
+                out.set(key, {
+                    span_run_id: spanRunId,
+                    span_id: spanId,
+                    writer_run_id: writerRunId,
+                    count: 1,
+                    last_observed_at: obs,
+                    last_observed_at_fmt: formatUtcMinute(obs),
+                    assertion: a,
+                });
+            }
+        }
+        return Array.from(out.values()).sort((a, b) => String(b.last_observed_at || '').localeCompare(String(a.last_observed_at || '')));
+    }, [selectedAssertions]);
+    const selectedRunTranscripts = useMemo(() => {
+        const out = new Map();
+        for (const a of selectedAssertions) {
+            if (!a || typeof a !== 'object')
+                continue;
+            const prov = a.provenance && typeof a.provenance === 'object' && !Array.isArray(a.provenance) ? a.provenance : null;
+            const spanId = prov && typeof prov.span_id === 'string' ? prov.span_id.trim() : '';
+            const writerRunId = prov && typeof prov.writer_run_id === 'string' ? prov.writer_run_id.trim() : '';
+            if (!writerRunId)
+                continue;
+            if (spanId)
+                continue;
+            const cur = out.get(writerRunId);
+            const obs = typeof a.observed_at === 'string' ? a.observed_at.trim() : '';
+            if (cur) {
+                cur.count += 1;
+                if (obs && (!cur.last_observed_at || obs > cur.last_observed_at)) {
+                    cur.last_observed_at = obs;
+                    cur.last_observed_at_fmt = formatUtcMinute(obs);
+                    cur.assertion = a;
+                }
+            }
+            else {
+                out.set(writerRunId, {
+                    run_id: writerRunId,
+                    count: 1,
+                    last_observed_at: obs,
+                    last_observed_at_fmt: formatUtcMinute(obs),
+                    assertion: a,
+                });
+            }
+        }
+        return Array.from(out.values()).sort((a, b) => String(b.last_observed_at || '').localeCompare(String(a.last_observed_at || '')));
+    }, [selectedAssertions]);
+    const openTranscript = useCallback((args) => {
+        const run_id = String(args.run_id || '').trim();
+        const span_id = typeof args.span_id === 'string' ? String(args.span_id).trim() : '';
+        if (!run_id)
+            return;
+        if (onOpenTranscript) {
+            try {
+                onOpenTranscript({ run_id, span_id: span_id || undefined, assertion: args.assertion });
+            }
+            catch {
+                // Best-effort.
+            }
+            return;
+        }
+        if (onOpenSpan && span_id) {
+            try {
+                onOpenSpan({ run_id, span_id, assertion: args.assertion });
+            }
+            catch {
+                // Best-effort.
+            }
+        }
+    }, [onOpenSpan, onOpenTranscript]);
+    const copyText = useCallback(async (text) => {
+        const s = String(text ?? '');
+        if (!s)
+            return;
+        try {
+            await navigator.clipboard.writeText(s);
+        }
+        catch {
+            // Best-effort.
+        }
+    }, []);
+    const fitSelected = useCallback(() => {
+        const inst = flowRef.current;
+        if (!inst || typeof inst.fitView !== 'function')
+            return;
+        if (selectedNodeId && typeof inst.getNode === 'function') {
+            const n = inst.getNode(selectedNodeId);
+            if (n) {
+                inst.fitView({ nodes: [n], padding: 0.55, duration: 350 });
+                return;
+            }
+        }
+        inst.fitView({ padding: 0.2, duration: 350 });
+    }, [selectedNodeId]);
+    const applyLayoutNow = useCallback((next) => {
+        const kind = next.kind;
+        const seed = Math.trunc(next.seed);
+        setLayoutPlaying(false);
+        simRef.current = null;
+        pendingViewportRef.current = null;
+        setLayoutKind(kind);
+        setLayoutSeed(seed);
+        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 });
+            setLayoutPlaying(true);
+        }
+    }, [graph]);
+    const toggleSimulation = useCallback(() => {
+        if (layoutKind !== 'force')
+            return;
+        if (layoutPlaying) {
+            setLayoutPlaying(false);
+            return;
+        }
+        simRef.current = initForceSimulation(graph, { seed: layoutSeed, positions: nodePositionsRef.current });
+        setLayoutPlaying(true);
+    }, [graph, layoutKind, layoutPlaying, layoutSeed]);
+    const saveLayoutNow = useCallback(() => {
+        const now = new Date().toISOString();
+        const positions = {};
+        for (const id of nodeIds) {
+            const p = nodePositionsRef.current[id];
+            if (p && typeof p.x === 'number' && typeof p.y === 'number')
+                positions[id] = { x: p.x, y: p.y };
+        }
+        const inst = flowRef.current;
+        const vpObj = inst && typeof inst.toObject === 'function' ? inst.toObject() : null;
+        const viewportRaw = vpObj && vpObj.viewport ? vpObj.viewport : inst && typeof inst.getViewport === 'function' ? inst.getViewport() : null;
+        const viewport = sanitizeViewport(viewportRaw, {
+            minZoom: AMX_VIEWPORT_MIN_ZOOM,
+            maxZoom: AMX_VIEWPORT_MAX_ZOOM,
+            maxAbsTranslate: AMX_VIEWPORT_MAX_ABS_TRANSLATE,
+        }) ?? undefined;
+        saveLayout(layoutKey, { version: 1, kind: layoutKind, seed: layoutSeed, positions, viewport, saved_at: now });
+        setHasSavedLayout(true);
+        setSavedLayoutAt(now);
+        setLayoutPlaying(false);
+    }, [layoutKey, layoutKind, layoutSeed, nodeIds]);
+    const loadSavedLayoutNow = useCallback(() => {
+        const saved = loadSavedLayout(layoutKey);
+        if (!saved)
+            return;
+        setLayoutPlaying(false);
+        simRef.current = null;
+        setLayoutKind(saved.kind);
+        setLayoutSeed(saved.seed);
+        setHasSavedLayout(true);
+        setSavedLayoutAt(saved.saved_at || '');
+        pendingViewportRef.current = saved.viewport || null;
+        pendingFitViewRef.current = !saved.viewport;
+        const fallback = buildKgLayout(graph, { kind: saved.kind, seed: saved.seed });
+        setNodePositions(applyPositionsToNodes(saved.positions, fallback));
+        if (saved.viewport) {
+            const inst = flowRef.current;
+            if (inst && typeof inst.setViewport === 'function') {
+                try {
+                    inst.setViewport(saved.viewport, { duration: 0 });
+                }
+                catch {
+                    try {
+                        inst.setViewport(saved.viewport);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+                pendingViewportRef.current = null;
+            }
+        }
+    }, [applyPositionsToNodes, graph, layoutKey]);
+    const clearSavedLayoutNow = useCallback(() => {
+        deleteLayout(layoutKey);
+        setHasSavedLayout(false);
+        setSavedLayoutAt('');
+    }, [layoutKey]);
+    const onNodesChange = useCallback((changes) => {
+        if (!Array.isArray(changes) || changes.length === 0)
+            return;
+        let sawDrag = false;
+        setNodePositions((prev) => {
+            let next = prev;
+            let changed = false;
+            for (const ch of changes) {
+                const id = ch && typeof ch === 'object' && 'id' in ch && typeof ch.id === 'string' ? String(ch.id) : '';
+                const pos = ch?.type === 'position' ? ch?.position : null;
+                if (id && pos && typeof pos.x === 'number' && typeof pos.y === 'number') {
+                    if (!changed) {
+                        next = { ...prev };
+                        changed = true;
+                    }
+                    next[id] = { x: pos.x, y: pos.y };
+                    if (ch?.dragging)
+                        sawDrag = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+        if (sawDrag && layoutPlaying)
+            setLayoutPlaying(false);
+    }, [layoutPlaying]);
+    const edgeById = useMemo(() => {
+        const m = new Map();
+        for (const e of graph.edges)
+            m.set(e.id, e);
+        return m;
+    }, [graph.edges]);
+    const pathSegments = useMemo(() => {
+        if (!path)
+            return [];
+        const nodes2 = path.nodeIds || [];
+        const edges2 = path.edgeIds || [];
+        const segs = [];
+        for (let i = 0; i < Math.min(nodes2.length - 1, edges2.length); i++) {
+            const from = nodes2[i];
+            const to = nodes2[i + 1];
+            const edgeId = edges2[i];
+            const e = edgeById.get(edgeId);
+            const predicate = String(e?.data?.predicateSummary || e?.label || '').trim();
+            const dir = e && e.source === from && e.target === to ? 'forward' : e && e.source === to && e.target === from ? 'reverse' : 'unknown';
+            segs.push({ from, to, edgeId, predicate, dir });
+        }
+        return segs;
+    }, [edgeById, path]);
+    const runQuery = useCallback(async () => {
+        if (!onQuery)
+            return;
+        setQueryError('');
+        setExpandError('');
+        setQueryLoading(true);
+        try {
+            const minScoreValue = parseOptionalFloat(minScore);
+            const limitValue = parseOptionalInt(limit, { allowZero: true, allowNegativeOne: true });
+            const maxInputTokensValue = parseOptionalInt(maxInputTokens, { allowZero: true });
+            const res = await onQuery({
+                scope,
+                owner_id: undefined,
+                recall_level: recallLevel,
+                query_text: queryText || undefined,
+                subject: subject || undefined,
+                predicate: predicate || undefined,
+                object: object || undefined,
+                min_score: minScoreValue,
+                limit: limitValue,
+                max_input_tokens: maxInputTokensValue,
+                model: model || undefined,
+            });
+            setOverride(res);
+            setOverrideKind('live query');
+            if (queryMode2 === 'replace' && onItemsReplace && res && Array.isArray(res.items)) {
+                onItemsReplace(res.items, { kind: 'live query', result: res });
+            }
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setQueryError(msg || 'Query failed');
+        }
+        finally {
+            setQueryLoading(false);
+        }
+    }, [limit, maxInputTokens, minScore, model, object, onItemsReplace, onQuery, predicate, queryMode2, queryText, recallLevel, scope, subject]);
+    const expandNeighborhoodForPath = useCallback(async () => {
+        if (!onQuery)
+            return;
+        const s = String(pathStart || '').trim();
+        const e = String(pathEnd || '').trim();
+        if (!s || !e)
+            return;
+        const fetchLimit = Math.max(200, parseOptionalInt(limit) ?? 80);
+        const maxExpandNodes = 60;
+        setExpandError('');
+        setQueryError('');
+        setExpandLoading(true);
+        try {
+            const merged = [];
+            const seenAssertions = new Set();
+            const addAssertion = (a) => {
+                if (!a || typeof a !== 'object')
+                    return;
+                if (typeof a.subject !== 'string' || typeof a.predicate !== 'string' || typeof a.object !== 'string')
+                    return;
+                const key = `${a.subject}|${a.predicate}|${a.object}|${String(a.observed_at || '')}|${String(a.scope || '')}|${String(a.owner_id || '')}`;
+                if (seenAssertions.has(key))
+                    return;
+                seenAssertions.add(key);
+                merged.push(a);
+            };
+            // Seed with the currently loaded subgraph.
+            for (const a of displayItems)
+                addAssertion(a);
+            // Incremental neighborhood expansion (bounded) until we either find a path or hit caps.
+            const directed = directedPath;
+            const expanded = new Set();
+            const frontier = [s];
+            const discovered = new Set([s]);
+            const expandNode = async (nodeId) => {
+                // Outgoing (subject==node) always.
+                const out = await onQuery({
+                    scope,
+                    recall_level: recallLevel,
+                    min_score: 0,
+                    limit: fetchLimit,
+                    subject: nodeId,
+                    query_text: undefined,
+                    max_input_tokens: 0,
+                    model: undefined,
+                });
+                if (out && Array.isArray(out.items)) {
+                    for (const it of out.items) {
+                        addAssertion(it);
+                        if (typeof it.subject === 'string' && it.subject.trim() === nodeId && typeof it.object === 'string') {
+                            const neigh = it.object.trim();
+                            if (neigh && !discovered.has(neigh)) {
+                                discovered.add(neigh);
+                                frontier.push(neigh);
+                            }
+                        }
+                    }
+                }
+                // In undirected mode, also include incoming (object==node).
+                if (!directed) {
+                    const inc = await onQuery({
+                        scope,
+                        recall_level: recallLevel,
+                        min_score: 0,
+                        limit: fetchLimit,
+                        object: nodeId,
+                        query_text: undefined,
+                        max_input_tokens: 0,
+                        model: undefined,
+                    });
+                    if (inc && Array.isArray(inc.items)) {
+                        for (const it of inc.items) {
+                            addAssertion(it);
+                            if (typeof it.object === 'string' && it.object.trim() === nodeId && typeof it.subject === 'string') {
+                                const neigh = it.subject.trim();
+                                if (neigh && !discovered.has(neigh)) {
+                                    discovered.add(neigh);
+                                    frontier.push(neigh);
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+            while (frontier.length && expanded.size < maxExpandNodes) {
+                if (discovered.has(e))
+                    break;
+                const cur = frontier.shift();
+                if (!cur || expanded.has(cur))
+                    continue;
+                expanded.add(cur);
+                await expandNode(cur);
+            }
+            setOverride({
+                ok: true,
+                count: merged.length,
+                items: merged,
+                active_memory_text: displayActiveMemoryText,
+                raw: { expanded_for_path: true, expanded_nodes: expanded.size, discovered_nodes: discovered.size, merged: merged.length, directed },
+            });
+            setOverrideKind('expanded neighborhood');
+            if (queryMode2 === 'replace' && onItemsReplace) {
+                onItemsReplace(merged, {
+                    kind: 'expanded neighborhood',
+                    result: {
+                        ok: true,
+                        count: merged.length,
+                        items: merged,
+                        active_memory_text: displayActiveMemoryText,
+                        raw: { expanded_for_path: true, expanded_nodes: expanded.size, discovered_nodes: discovered.size, merged: merged.length, directed },
+                    },
+                });
+            }
+        }
+        catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            setExpandError(msg || 'Expand neighborhood failed');
+        }
+        finally {
+            setExpandLoading(false);
+        }
+    }, [directedPath, displayActiveMemoryText, displayItems, limit, onItemsReplace, onQuery, pathEnd, pathStart, queryMode2, recallLevel, scope]);
+    const resetToStep = useCallback(() => {
+        setOverride(null);
+        setOverrideKind(null);
+        setQueryError('');
+        setQueryLoading(false);
+        setExpandError('');
+        setExpandLoading(false);
+        setPathStart('');
+        setPathEnd('');
+        setSelectedNodeId('');
+        setSelectedEdgeId('');
+    }, []);
+    const header = title ? `KG snapshot (${title})` : 'KG snapshot';
+    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 {
+                                            try {
+                                                inst.setViewport(vp);
+                                            }
+                                            catch {
+                                                // ignore
+                                            }
+                                        }
+                                    }
+                                    if (pendingFitViewRef.current && typeof inst.fitView === 'function') {
+                                        try {
+                                            inst.fitView({ padding: 0.2, duration: 0 });
+                                        }
+                                        catch {
+                                            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." }), (() => {
+                                const s = formatEffort(displayEffort);
+                                if (!s)
+                                    return null;
+                                return (_jsx("div", { className: "amx-small", style: { marginBottom: 8, opacity: 0.9 }, children: s }));
+                            })(), (() => {
+                                const w = displayWarnings;
+                                if (!w)
+                                    return null;
+                                const text = typeof w === 'string' ? w : Array.isArray(w) ? w.map((x) => String(x)).join(' · ') : JSON.stringify(w);
+                                if (!text || !text.trim())
+                                    return null;
+                                return (_jsx("div", { className: "amx-small", style: { marginBottom: 8, color: 'rgba(255, 180, 90, 0.95)' }, children: text }));
+                            })(), _jsx("div", { className: "amx-small", style: { marginBottom: 8, opacity: 0.9 }, children: (() => {
+                                    const pv = override?.packets_version ?? stepPacketsVersion;
+                                    const pc = override?.packed_count ?? stepPackedCount;
+                                    const dr = override?.dropped ?? stepDropped;
+                                    const et = override?.estimated_tokens ?? stepEstimatedTokens;
+                                    const parts = [];
+                                    if (typeof pv === 'number')
+                                        parts.push(`packets_v${pv}`);
+                                    if (typeof pc === 'number')
+                                        parts.push(`packed=${pc}`);
+                                    if (typeof dr === 'number')
+                                        parts.push(`dropped=${dr}`);
+                                    if (typeof et === 'number')
+                                        parts.push(`est_tokens=${et}`);
+                                    return parts.length ? parts.join(' · ') : 'No packetization stats (set max_input_tokens > 0).';
+                                })() }), _jsx("div", { className: "amx-active-memory", children: renderHighlight(displayActiveMemoryText || '(empty)', search) }), (() => {
+                                const pkts = (override?.packets && Array.isArray(override.packets) ? override.packets : stepPackets);
+                                if (!Array.isArray(pkts) || pkts.length === 0)
+                                    return null;
+                                return (_jsxs("div", { style: { marginTop: 10 }, children: [_jsxs("button", { type: "button", className: "amx-btn", onClick: () => setShowPackets((v) => !v), children: [showPackets ? 'Hide' : 'Show', " packets (", pkts.length, ")"] }), showPackets ? (_jsx("div", { className: "amx-list", style: { marginTop: 10 }, children: pkts.slice(0, 120).map((p, idx) => {
+                                                const obj = p && typeof p === 'object' && !Array.isArray(p) ? p : null;
+                                                const stmt = obj && typeof obj.statement === 'string' ? obj.statement : typeof p === 'string' ? p : '';
+                                                const score = obj && (typeof obj.retrieval_score === 'number' || typeof obj.retrieval_score === 'string') ? obj.retrieval_score : null;
+                                                const ts = obj && typeof obj.observed_at === 'string' ? obj.observed_at : null;
+                                                return (_jsxs("div", { className: "amx-item", children: [_jsx("div", { className: "amx-mono", children: stmt || '(packet)' }), ts || score !== null ? (_jsxs("div", { className: "amx-small", children: [ts ? `[${ts}]` : null, ts && score !== null ? ' ' : null, score !== null ? `score:${score}` : null] })) : null] }, idx));
+                                            }) })) : null] }));
+                            })(), _jsx("div", { style: { marginTop: 14, marginBottom: 12, borderTop: '1px solid rgba(255,255,255,0.08)' } }), _jsx("div", { className: "amx-small", style: { marginBottom: 8, fontWeight: 700, opacity: 0.9 }, children: "Inspect" }), _jsx("div", { className: "amx-small", style: { marginBottom: 8 }, children: "Click a node or edge to inspect its assertions." }), selectedNodeId ? (_jsxs("div", { className: "amx-item", style: { marginBottom: 10, display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsx("div", { className: "amx-mono", style: { fontSize: 11, opacity: 0.95 }, children: nodeLabelById.get(selectedNodeId) || selectedNodeId }), _jsxs("div", { className: "amx-small", children: ["kind=", nodeKindById.get(selectedNodeId) || 'entity', " \u00B7 id=", selectedNodeId] })] }), _jsxs("div", { className: "amx-actions", children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => void copyText(selectedNodeId), children: "Copy id" }), _jsx("button", { type: "button", className: "amx-btn", onClick: fitSelected, children: "Focus" })] })] })) : selectedEdge && selectedEdge.source && selectedEdge.target ? (_jsxs("div", { className: "amx-item", style: { marginBottom: 10, display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { className: "amx-mono", style: { fontSize: 11, opacity: 0.95 }, children: [selectedEdge.source, " \u2014", String(selectedEdge.label || selectedEdge.data?.predicateSummary || '').trim() || '?', "\u2192 ", selectedEdge.target] }), _jsxs("div", { className: "amx-small", children: ["edge_id=", selectedEdge.id] })] }), _jsxs("div", { className: "amx-actions", children: [_jsx("button", { type: "button", className: "amx-btn", onClick: () => void copyText(selectedEdge.id), children: "Copy id" }), _jsx("button", { type: "button", className: "amx-btn", onClick: fitSelected, children: "Fit" })] })] })) : (_jsx("div", { className: "amx-small", style: { marginBottom: 10, opacity: 0.9 }, children: "(no selection)" })), _jsx("div", { className: "amx-list", children: selectedAssertions.slice(0, 80).map((a, idx) => {
+                                    const s = String(a.subject || '').trim();
+                                    const p = String(a.predicate || '').trim();
+                                    const o = String(a.object || '').trim();
+                                    const sLabel = nodeLabelById.get(s) || s;
+                                    const oLabel = nodeLabelById.get(o) || o;
+                                    const sKind = nodeKindById.get(s) || 'entity';
+                                    const oKind = nodeKindById.get(o) || 'entity';
+                                    const sColor = kindColor(sKind);
+                                    const oColor = kindColor(oKind);
+                                    const t = formatUtcMinute(a.observed_at);
+                                    const meta = formatAssertionMeta(a);
+                                    const prov = a.provenance && typeof a.provenance === 'object' && !Array.isArray(a.provenance) ? a.provenance : null;
+                                    const spanId = prov && typeof prov.span_id === 'string' ? prov.span_id.trim() : '';
+                                    const writerRunId = prov && typeof prov.writer_run_id === 'string' ? prov.writer_run_id.trim() : '';
+                                    const ownerId = typeof a.owner_id === 'string' ? a.owner_id.trim() : '';
+                                    const spanRunId = writerRunId || ownerId;
+                                    const canOpenSpan = Boolean((onOpenTranscript || onOpenSpan) && spanId && spanRunId);
+                                    const canOpenRun = Boolean(onOpenTranscript && writerRunId && !spanId);
+                                    const canOpen = canOpenSpan || canOpenRun;
+                                    return (_jsxs("div", { className: "amx-item amx-triple-card", children: [_jsxs("div", { className: "amx-triple-row", children: [_jsx("button", { type: "button", className: "amx-term", style: { borderColor: sColor.stroke, background: sColor.bg }, title: s, onClick: () => {
+                                                            if (!s)
+                                                                return;
+                                                            setSelectedEdgeId('');
+                                                            setSelectedNodeId(s);
+                                                        }, children: sLabel || s || '(subject)' }), _jsx("span", { className: "amx-arrow", children: "\u2014" }), _jsx("span", { className: "amx-predicate", title: p, children: shortTerm(p) || '(predicate)' }), _jsx("span", { className: "amx-arrow", children: "\u2192" }), _jsx("button", { type: "button", className: "amx-term", style: { borderColor: oColor.stroke, background: oColor.bg }, title: o, onClick: () => {
+                                                            if (!o)
+                                                                return;
+                                                            setSelectedEdgeId('');
+                                                            setSelectedNodeId(o);
+                                                        }, children: oLabel || o || '(object)' })] }), _jsxs("div", { className: "amx-triple-meta", children: [t ? (_jsxs("span", { className: "amx-small", title: String(a.observed_at || ''), children: ["[", t, "]"] })) : null, meta ? _jsx("span", { className: "amx-small", children: meta }) : null] }), spanId || writerRunId ? (_jsxs("div", { className: "amx-triple-actions", children: [spanId ? _jsxs("span", { className: "amx-small", children: ["span:", spanId] }) : null, writerRunId ? _jsxs("span", { className: "amx-small", children: ["run:", writerRunId] }) : null, canOpen ? (_jsx("button", { type: "button", className: "amx-btn", onClick: () => {
+                                                            if (canOpenSpan && spanId && spanRunId) {
+                                                                openTranscript({ run_id: spanRunId, span_id: spanId, assertion: a });
+                                                                return;
+                                                            }
+                                                            if (canOpenRun && writerRunId) {
+                                                                openTranscript({ run_id: writerRunId, assertion: a });
+                                                            }
+                                                        }, children: "Open transcript" })) : null] })) : null] }, idx));
+                                }) })] }), _jsxs("div", { className: "amx-panel", children: [_jsx("h3", { children: "Transcript" }), _jsx("div", { className: "amx-small", style: { marginBottom: 8 }, children: "Pivot from a triple to its provenance transcript (span/note artifact, or run input fallback)." }), selectedSources.length ? (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { className: "amx-small", style: { marginBottom: 6, opacity: 0.85 }, children: "spans" }), _jsx("div", { className: "amx-list", style: { maxHeight: 320 }, children: selectedSources.slice(0, 60).map((src) => (_jsxs("div", { className: "amx-item", style: { display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { className: "amx-mono", style: { fontSize: 11, opacity: 0.95 }, children: ["span:", src.span_id] }), _jsxs("div", { className: "amx-small", children: ["run_id=", src.span_run_id, " \u00B7 assertions=", src.count, src.last_observed_at_fmt ? ` · last=[${src.last_observed_at_fmt}]` : ''] })] }), onOpenSpan || onOpenTranscript ? (_jsx("button", { type: "button", className: "amx-btn", onClick: () => openTranscript({ run_id: src.span_run_id, span_id: src.span_id, assertion: src.assertion }), children: "Open transcript" })) : null] }, `${src.span_run_id}|${src.span_id}`))) })] })) : null, onOpenTranscript && selectedRunTranscripts.length ? (_jsxs("div", { style: { marginBottom: 12 }, children: [_jsx("div", { className: "amx-small", style: { marginBottom: 6, opacity: 0.85 }, children: "runs (fallback)" }), _jsx("div", { className: "amx-list", style: { maxHeight: 240 }, children: selectedRunTranscripts.slice(0, 40).map((src) => (_jsxs("div", { className: "amx-item", style: { display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center' }, children: [_jsxs("div", { style: { minWidth: 0 }, children: [_jsxs("div", { className: "amx-mono", style: { fontSize: 11, opacity: 0.95 }, children: ["run:", src.run_id] }), _jsxs("div", { className: "amx-small", children: ["assertions=", src.count, src.last_observed_at_fmt ? ` · last=[${src.last_observed_at_fmt}]` : ''] })] }), _jsx("button", { type: "button", className: "amx-btn", onClick: () => openTranscript({ run_id: src.run_id, assertion: src.assertion }), children: "Open transcript" })] }, src.run_id))) })] })) : null, !selectedSources.length && !(onOpenTranscript && selectedRunTranscripts.length) ? _jsx("div", { className: "amx-small", children: "(no provenance)" }) : null] })] })] }));
+}