dsh-trivium 0.4.21 → 0.5.0

package/lib/client.js

@@ -73,6 +73,77 @@ window.__ModuleLoader__.load({
         embedKeyHint: "已保存则留空不改。也可设环境变量 DSH_TRIVIUM_EMBED_KEY。",
         embedBackfill: "回填已有节点向量",
         list: "记忆条目",
+        tabList: "记忆条目",
+        tabRecall: "召回检查",
+        nodeTabContent: "内容",
+        nodeTabSource: "来源",
+        nodeTabHistory: "决策历史",
+        estimate: "估算",
+        recallRun: "运行只读检查",
+        recallQueryPh: "输入一个问题，看这一轮会注入什么",
+        recallSemanticOff: "语义通道未运行：只读检查不请求 embedding。",
+        recallBudget: "本轮预算",
+        recallBudgetHint: "估算 token，不是模型计费。芯片、更正与召回共用这 300。",
+        recallWillSend: "将发送给模型的文本",
+        recallEmptyText: "本轮没有可注入的内容。",
+        recallReasons: "入选与过滤原因",
+        recallRecent: "最近召回诊断",
+        recallNoTrace: "还没有召回记录。打开自动召回或芯片后，发一条消息再看。",
+        recallExpired: "诊断已过期或不存在。",
+        recallCandidates: "候选",
+        recallSelected: "入选",
+        recallDropped: "未入选",
+        recallDeferred: "留待下一轮生效",
+        recallSemantic: "语义",
+        recallMode: "通道",
+        reasonBudget: "预算不足",
+        reasonStale: "已过期",
+        reasonArchived: "已归档",
+        reasonHygiene: "卫生检查",
+        reasonDuplicate: "重复",
+        reasonRevision: "版本",
+        reasonInvalid: "无效",
+        sourceMissing: "此条目没有可定位的来源。",
+        sourceUnavailable: "会话已不可用，保留现有摘录。",
+        sourceNoJump: "宿主没有提供会话跳转接口，因此不提供跳转。",
+        sourceQuote: "摘录",
+        sourceKind: "来源类型",
+        sourceSession: "会话",
+        sourceCaptured: "记录时间",
+        sourceImport: "导入路径",
+        sourceOpen: "查看来源",
+        historyNone: "没有版本历史，这条就是当前版本。",
+        historyCurrent: "当前版本",
+        historySuperseded: "已被替代",
+        historyOlder: "旧版本",
+        historyUnresolved: "版本链无法解析",
+        historyReason: "说明",
+        historyViewCurrent: "查看当前版本",
+        expired: "已过期",
+        noDeadline: "无期限",
+        detailLoading: "加载中…",
+        detailFailed: "读取失败",
+        showSuperseded: "显示已替代",
+        supersede: "替代…",
+        supersedeTitle: "确认替代关系",
+        supersedeHint: "选一条已有决策来替代这条。旧版本的正文与期限都保留，不会被归档。",
+        supersedePick: "选择替代它的决策",
+        supersedeReason: "说明（可选，最多 240 字）",
+        supersedeConfirm: "确认替代关系",
+        supersedeCancel: "取消",
+        supersedeOld: "将被替代",
+        supersedeNew: "新决策",
+        supersedeSaving: "正在保存…",
+        supersedeConflict: "内容已在别处变更（409）。你的选择已保留，刷新后可以重试。",
+        supersedeRefresh: "刷新并重试",
+        supersedeFailed: "替代失败",
+        supersedeOk: "已建立替代关系",
+        revoke: "撤销替代",
+        revokeHint: "只删除这一条替代关系，其它边保留。",
+        revokeOk: "已撤销替代关系",
+        revokeFailed: "撤销失败",
+        noSuccessor: "没有可选的决策。先新建一条决策，再回来建立替代关系。",
+        revisionLinkedBlocked: "这条决策在替代链上，请先处理替代关系。",
         filter: "类型",
         search: "搜索",
         all: "全部",
@@ -229,6 +300,77 @@ window.__ModuleLoader__.load({
         embedKeyHint: "Leave blank to keep the saved key. Or set DSH_TRIVIUM_EMBED_KEY.",
         embedBackfill: "Backfill vectors",
         list: "Memory entries",
+        tabList: "Memory entries",
+        tabRecall: "Recall check",
+        nodeTabContent: "Content",
+        nodeTabSource: "Source",
+        nodeTabHistory: "Decision history",
+        estimate: "estimated",
+        recallRun: "Run read-only check",
+        recallQueryPh: "Type a question to see what this turn would inject",
+        recallSemanticOff: "Semantic channel did not run: the read-only check never requests an embedding.",
+        recallBudget: "Turn budget",
+        recallBudgetHint: "Estimated tokens, not model billing. Chips, corrections and recall share this 300.",
+        recallWillSend: "Text that would be sent to the model",
+        recallEmptyText: "Nothing would be injected this turn.",
+        recallReasons: "Selected and filtered reasons",
+        recallRecent: "Recent recall diagnostics",
+        recallNoTrace: "No recall recorded yet. Turn on auto recall or chips, send a message, then look again.",
+        recallExpired: "This diagnostic expired or does not exist.",
+        recallCandidates: "Candidates",
+        recallSelected: "Selected",
+        recallDropped: "Not selected",
+        recallDeferred: "Deferred to the next turn",
+        recallSemantic: "Semantic",
+        recallMode: "Channel",
+        reasonBudget: "over budget",
+        reasonStale: "expired",
+        reasonArchived: "archived",
+        reasonHygiene: "write hygiene",
+        reasonDuplicate: "duplicate",
+        reasonRevision: "revision",
+        reasonInvalid: "invalid",
+        sourceMissing: "This entry has no locatable source.",
+        sourceUnavailable: "The session is gone; the stored excerpt is kept.",
+        sourceNoJump: "The host exposes no session locator, so no jump is offered.",
+        sourceQuote: "Excerpt",
+        sourceKind: "Source kind",
+        sourceSession: "Session",
+        sourceCaptured: "Captured at",
+        sourceImport: "Import path",
+        sourceOpen: "View source",
+        historyNone: "No version history; this is the current version.",
+        historyCurrent: "Current version",
+        historySuperseded: "Superseded",
+        historyOlder: "Older version",
+        historyUnresolved: "Version chain could not be resolved",
+        historyReason: "Reason",
+        historyViewCurrent: "View current version",
+        expired: "Expired",
+        noDeadline: "No deadline",
+        detailLoading: "Loading…",
+        detailFailed: "Could not load",
+        showSuperseded: "Show replaced",
+        supersede: "Replace…",
+        supersedeTitle: "Confirm replacement",
+        supersedeHint: "Pick an existing decision that replaces this one. The old body and deadline are kept, and nothing is archived.",
+        supersedePick: "Decision that replaces this one",
+        supersedeReason: "Reason (optional, up to 240 characters)",
+        supersedeConfirm: "Confirm replacement",
+        supersedeCancel: "Cancel",
+        supersedeOld: "Will be replaced",
+        supersedeNew: "New decision",
+        supersedeSaving: "Saving…",
+        supersedeConflict: "Content changed elsewhere (409). Your selection is kept; refresh and try again.",
+        supersedeRefresh: "Refresh and retry",
+        supersedeFailed: "Replacement failed",
+        supersedeOk: "Replacement recorded",
+        revoke: "Undo replacement",
+        revokeHint: "Removes only this replacement relation; other edges stay.",
+        revokeOk: "Replacement undone",
+        revokeFailed: "Undo failed",
+        noSuccessor: "No candidate decision. Create one first, then come back.",
+        revisionLinkedBlocked: "This decision is in a replacement chain; handle the relation first.",
         filter: "Type",
         search: "Search",
         all: "All",
@@ -409,7 +551,18 @@ window.__ModuleLoader__.load({
     const TYPES = ["", "entity", "preference", "decision", "experience", "workspace"];
 
     const ui = {
-      page: { display: "flex", flexDirection: "column", gap: 14, padding: "4px 0 16px", maxWidth: 760 },
+      page: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 14,
+        padding: "4px 0 16px",
+        maxWidth: 760,
+        // The host modal keeps its own nav column; without these the card is
+        // squeezed to a one-character-wide column instead of shrinking evenly.
+        width: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+      },
       header: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 },
       title: { margin: 0, fontSize: 20, lineHeight: "32px", fontWeight: 650 },
       actions: { display: "flex", alignItems: "center", gap: 8, flexShrink: 0 },
@@ -441,6 +594,46 @@ window.__ModuleLoader__.load({
       toolbar: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 10 },
       error: { color: "#c44", fontSize: 13 },
       saved: { fontSize: 12, opacity: 0.75 },
+      /*
+       * Everything below uses currentColor / inherited surfaces only: the panel
+       * has to work in the host light theme and dark theme without a second
+       * palette, and the prototype's fixed colours stay in the prototype.
+       */
+      tabRow: { display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" },
+      tab: {
+        appearance: "none",
+        border: "1px solid rgba(127,127,127,0.35)",
+        background: "transparent",
+        color: "inherit",
+        borderRadius: 999,
+        padding: "3px 12px",
+        fontSize: 12,
+        lineHeight: "20px",
+        cursor: "pointer",
+      },
+      tabActive: {
+        borderColor: "currentColor",
+        fontWeight: 650,
+        background: "rgba(127,127,127,0.16)",
+      },
+      bar: { height: 6, borderRadius: 3, background: "rgba(127,127,127,0.22)", overflow: "hidden" },
+      barFill: { height: "100%", background: "currentColor", opacity: 0.55 },
+      tag: {
+        fontSize: 11,
+        padding: "0 6px",
+        borderRadius: 4,
+        border: "1px solid rgba(127,127,127,0.35)",
+        whiteSpace: "nowrap",
+      },
+      mono: {
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        fontSize: 11,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+      },
+      stack: { display: "flex", flexDirection: "column", gap: 6 },
+      muted: { fontSize: 12, opacity: 0.7, lineHeight: 1.4 },
+      focusable: { outlineOffset: 2 },
     };
 
     const chipUi = { ctx: null, sessions: null, dispose: null };
@@ -545,6 +738,673 @@ window.__ModuleLoader__.load({
       const [updateBusy, setUpdateBusy] = react.useState(false);
       const persistSeq = react.useRef(0);
       const loadSeq = react.useRef(0);
+      const [tab, setTab] = react.useState("list");
+      const [nodeTab, setNodeTab] = react.useState("content");
+      const [detail, setDetail] = react.useState({});
+      const [sourceInfo, setSourceInfo] = react.useState({});
+      const [historyInfo, setHistoryInfo] = react.useState({});
+      const [preview, setPreview] = react.useState(null);
+      const [previewQuery, setPreviewQuery] = react.useState("");
+      const [previewBusy, setPreviewBusy] = react.useState(false);
+      const [traces, setTraces] = react.useState([]);
+      const [traceError, setTraceError] = react.useState("");
+      const [showSuperseded, setShowSuperseded] = react.useState(false);
+      const [revisionDialog, setRevisionDialog] = react.useState(null);
+      const [revisionBusy, setRevisionBusy] = react.useState(false);
+      const [revisionNote, setRevisionNote] = react.useState("");
+      const dialogRef = react.useRef(null);
+
+      /*
+       * Everything below is read-on-demand. Opening the source, history or
+       * recall pane issues at most one HTTP GET for the node in front of the
+       * user — it never asks for an embedding, a model call, or an injection.
+       */
+      const cwdQuery = () => (status && status.cwd ? "cwd=" + encodeURIComponent(status.cwd) : "");
+
+      /**
+       * Like api(), but keeps the status and the server's `code` so the panel can
+       * tell a 409 conflict apart from a generic failure.
+       */
+      const apiRaw = async (path, opts) => {
+        const resp = await fetch(path, opts);
+        let data = null;
+        try {
+          data = await resp.json();
+        } catch {
+          data = null;
+        }
+        return { ok: resp.ok && !(data && data.ok === false), status: resp.status, data };
+      };
+
+      const newOperationId = () =>
+        (globalThis.crypto && typeof globalThis.crypto.randomUUID === "function"
+          ? globalThis.crypto.randomUUID()
+          : "op-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10));
+
+      const openSupersede = (oldId) => {
+        setRevisionNote("");
+        setRevisionDialog({ oldId: Number(oldId), successorId: "", reason: "", error: "", conflict: false, operationId: newOperationId() });
+      };
+
+      const closeSupersede = () => {
+        if (revisionBusy) return;
+        setRevisionDialog(null);
+      };
+
+      const submitSupersede = async (refreshOnly = false) => {
+        const dialog = revisionDialog;
+        if (!dialog || revisionBusy || !dialog.successorId) return;
+        setRevisionBusy(true);
+        setRevisionDialog({ ...dialog, error: "", conflict: false });
+        try {
+          const q = cwdQuery();
+          const suffix = q ? "?" + q : "";
+          // ETags are re-read on every attempt, including a retry after 409.
+          const [oldDetail, newDetail] = await Promise.all([
+            apiRaw("/api/dsh-trivium/nodes/" + dialog.oldId + "/detail" + suffix),
+            apiRaw("/api/dsh-trivium/nodes/" + dialog.successorId + "/detail" + suffix),
+          ]);
+          if (!oldDetail.ok || !newDetail.ok) throw new Error(t("detailFailed"));
+          if (refreshOnly) {
+            setRevisionDialog((prev) => (prev ? { ...prev, error: "", conflict: false } : prev));
+            setDetail((prev) => ({ ...prev, [dialog.oldId]: oldDetail.data, [dialog.successorId]: newDetail.data }));
+            setRevisionBusy(false);
+            return;
+          }
+          const result = await apiRaw("/api/dsh-trivium/nodes/" + dialog.oldId + "/supersede" + suffix, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              successorId: Number(dialog.successorId),
+              reason: dialog.reason,
+              // The same operationId is reused on retry, so a lost response
+              // cannot create a second edge.
+              operationId: dialog.operationId,
+              expectedEtags: { old: oldDetail.data.etag, new: newDetail.data.etag },
+            }),
+          });
+          if (!result.ok) {
+            const conflict = result.status === 409;
+            const code = (result.data && result.data.code) || "";
+            setRevisionDialog((prev) =>
+              prev
+                ? {
+                    ...prev,
+                    // The friendly conflict line already says "changed elsewhere,
+                    // refresh"; keep the server's own wording only when it adds a
+                    // different reason (a cycle, a linear-chain limit, ...).
+                    errorCode: code,
+                    error: (result.data && (result.data.detail || result.data.message)) || t("supersedeFailed"),
+                    conflict,
+                  }
+                : prev,
+            );
+            setRevisionBusy(false);
+            return;
+          }
+          setRevisionNote(t("supersedeOk"));
+          setRevisionDialog(null);
+          setRevisionBusy(false);
+          await load({ keepFlags: true });
+        } catch (err) {
+          setRevisionDialog((prev) => (prev ? { ...prev, error: String(err.message || err), conflict: false } : prev));
+          setRevisionBusy(false);
+        }
+      };
+
+      const revokeSupersession = async (oldId, successorId) => {
+        setRevisionBusy(true);
+        setRevisionNote("");
+        try {
+          const q = cwdQuery();
+          const suffix = q ? "?" + q : "";
+          const [oldDetail, newDetail] = await Promise.all([
+            apiRaw("/api/dsh-trivium/nodes/" + oldId + "/detail" + suffix),
+            apiRaw("/api/dsh-trivium/nodes/" + successorId + "/detail" + suffix),
+          ]);
+          const result = await apiRaw("/api/dsh-trivium/nodes/" + oldId + "/supersession/revoke" + suffix, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({
+              successorId: Number(successorId),
+              operationId: newOperationId(),
+              expectedEtags: {
+                old: oldDetail.data ? oldDetail.data.etag : undefined,
+                new: newDetail.data ? newDetail.data.etag : undefined,
+              },
+            }),
+          });
+          setRevisionNote(
+            result.ok
+              ? t("revokeOk")
+              : (result.data && (result.data.detail || result.data.message)) || t("revokeFailed"),
+          );
+          if (result.ok) {
+            setHistoryInfo((prev) => {
+              const next = { ...prev };
+              delete next[oldId];
+              delete next[successorId];
+              return next;
+            });
+            await load({ keepFlags: true });
+          }
+        } catch (err) {
+          setRevisionNote(t("revokeFailed") + ": " + String(err.message || err));
+        } finally {
+          setRevisionBusy(false);
+        }
+      };
+
+      const loadNodeInfo = react.useCallback(
+        async (id, which) => {
+          const q = cwdQuery();
+          const base = "/api/dsh-trivium/nodes/" + id;
+          const settle = (setter, row) => setter((prev) => ({ ...prev, [id]: row }));
+          const setter = which === "detail" ? setDetail : which === "source" ? setSourceInfo : setHistoryInfo;
+          try {
+            if (which === "detail") settle(setter, await api(base + "/detail" + (q ? "?" + q : "")));
+            else if (which === "source") settle(setter, await api(base + "/provenance" + (q ? "?" + q : "")));
+            else if (which === "history") settle(setter, await api(base + "/history?" + (q ? q + "&" : "") + "limit=20"));
+          } catch (err) {
+            settle(setter, { error: String(err.message || err), status: 0 });
+          }
+        },
+        [status],
+      );
+
+      const pickNodeTab = (id, next) => {
+        setNodeTab(next);
+        if (next === "source" && !sourceInfo[id]) loadNodeInfo(id, "source");
+        if (next === "history" && !historyInfo[id]) loadNodeInfo(id, "history");
+      };
+
+      const loadTraces = react.useCallback(async () => {
+        setTraceError("");
+        try {
+          const q = cwdQuery();
+          const data = await api("/api/dsh-trivium/recall-traces" + (q ? "?" + q : ""));
+          setTraces((data && data.traces) || []);
+        } catch (err) {
+          setTraceError(String(err.message || err));
+          setTraces([]);
+        }
+      }, [status]);
+
+      const runPreview = async () => {
+        setPreviewBusy(true);
+        setTraceError("");
+        try {
+          const q = cwdQuery();
+          const sessionId = traces.length ? traces[0].sessionId || "" : "";
+          const data = await api("/api/dsh-trivium/recall-preview" + (q ? "?" + q : ""), {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ query: previewQuery, sessionId, mode: status ? status.recallMode : "auto" }),
+          });
+          setPreview(data);
+          loadTraces();
+        } catch (err) {
+          setTraceError(String(err.message || err));
+        } finally {
+          setPreviewBusy(false);
+        }
+      };
+
+      react.useEffect(() => {
+        if (tab === "recall") loadTraces();
+      }, [tab, loadTraces]);
+
+      /*
+       * Dialog accessibility: focus moves into the panel, Escape closes it, and
+       * focus goes back to whatever opened it. The cleanup runs on unmount too,
+       * so a relayout cannot strand focus inside a removed node.
+       */
+      const dialogOpen = Boolean(revisionDialog);
+      react.useEffect(() => {
+        if (!dialogOpen) return undefined;
+        const previous = typeof document !== "undefined" ? document.activeElement : null;
+        const node = dialogRef.current;
+        if (node && typeof node.focus === "function") node.focus();
+        const onKey = (event) => {
+          if (event.key === "Escape") closeSupersede();
+        };
+        if (typeof document !== "undefined") document.addEventListener("keydown", onKey);
+        return () => {
+          if (typeof document !== "undefined") document.removeEventListener("keydown", onKey);
+          if (previous && typeof previous.focus === "function") previous.focus();
+        };
+      }, [dialogOpen]);
+
+      const reasonLabel = (code) => {
+        const map = {
+          budget: t("reasonBudget"),
+          "over-budget": t("reasonBudget"),
+          stale: t("reasonStale"),
+          archived: t("reasonArchived"),
+          hygiene: t("reasonHygiene"),
+          dirty: t("reasonHygiene"),
+          duplicate: t("reasonDuplicate"),
+          "duplicate-node": t("reasonDuplicate"),
+          "duplicate-in-turn": t("reasonDuplicate"),
+          "already-in-map": t("reasonDuplicate"),
+          revision: t("reasonRevision"),
+          "no-current": t("reasonRevision"),
+          invalid: t("reasonInvalid"),
+          empty: t("reasonHygiene"),
+        };
+        return map[code] || code;
+      };
+
+      const tabButton = (key, label, active, onPick) =>
+        jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": active ? "true" : "false",
+            style: active ? { ...ui.tab, ...ui.tabActive } : ui.tab,
+            onClick: onPick,
+            children: label,
+          },
+          key,
+        );
+
+      const tabBar = (active, onPick, items) =>
+        jsx("div", {
+          style: ui.tabRow,
+          role: "tablist",
+          children: items.map((item) => tabButton(item.key, item.label, active === item.key, () => onPick(item.key))),
+        });
+
+      const budgetBar = (tokens, budget) => {
+        const cap = Math.max(1, Number(budget) || 300);
+        const pct = Math.min(100, Math.round((Number(tokens) || 0) / cap * 100));
+        return jsxs("div", {
+          style: ui.stack,
+          children: [
+            jsxs("div", {
+              style: { ...ui.muted, display: "flex", justifyContent: "space-between", gap: 8 },
+              children: [
+                jsx("span", { children: L.recallBudget }),
+                jsx("span", {
+                  children:
+                    (Number(tokens) || 0) + " / " + cap + " " + t("estimate"),
+                }),
+              ],
+            }),
+            jsx("div", {
+              style: ui.bar,
+              role: "progressbar",
+              "aria-valuenow": pct,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              children: jsx("div", { style: { ...ui.barFill, width: pct + "%" } }),
+            }),
+          ],
+        });
+      };
+
+      const sourceSection = (n) => {
+        const info = sourceInfo[n.id];
+        if (!info) return jsx("div", { style: ui.muted, children: L.detailLoading });
+        if (info.error) return jsx("div", { style: ui.error, children: L.detailFailed + ": " + info.error });
+        if (info.status === "missing") {
+          return jsx("div", {
+            style: ui.stack,
+            children: [
+              jsx("div", { style: ui.muted, children: L.sourceMissing }),
+              jsx("div", { style: ui.muted, children: L.sourceNoJump }),
+            ],
+          });
+        }
+        const src = info.source || {};
+        const rows = [
+          [L.sourceKind, src.kind || src.via || ""],
+          [L.sourceSession, src.sessionId || ""],
+          [L.sourceCaptured, src.capturedAt || ""],
+          [L.sourceImport, src.importPath || ""],
+        ].filter((row) => row[1]);
+        return jsxs("div", {
+          style: ui.stack,
+          children: [
+            info.status === "unavailable"
+              ? jsx("div", { style: ui.tag, children: L.sourceUnavailable })
+              : null,
+            ...rows.map((row) =>
+              jsxs(
+                "div",
+                {
+                  style: { ...ui.muted, display: "flex", gap: 8, flexWrap: "wrap" },
+                  children: [
+                    jsx("span", { style: { opacity: 0.8 }, children: row[0] }),
+                    jsx("span", { children: row[1] }),
+                  ],
+                },
+                "src-" + row[0],
+              ),
+            ),
+            src.quote
+              ? jsxs("div", {
+                  style: ui.stack,
+                  children: [
+                    jsx("div", { style: ui.fieldLabel, children: L.sourceQuote }),
+                    // Plain text node: stored markup is shown, never executed.
+                    jsx("div", { style: { ...ui.muted, whiteSpace: "pre-wrap" }, children: src.quote }),
+                  ],
+                })
+              : null,
+            jsx("div", { style: ui.muted, children: info.jump ? "" : L.sourceNoJump }),
+          ],
+        });
+      };
+
+      const historySection = (n) => {
+        const info = historyInfo[n.id];
+        if (!info) return jsx("div", { style: ui.muted, children: L.detailLoading });
+        if (info.error) return jsx("div", { style: ui.error, children: L.detailFailed + ": " + info.error });
+        if (!info.nodes || !info.nodes.length) return jsx("div", { style: ui.muted, children: L.historyNone });
+        return jsxs("div", {
+          style: ui.stack,
+          children: [
+            jsx("div", { style: ui.muted, children: L.historyNone }),
+            ...info.nodes.map((row) =>
+              jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                    paddingBottom: 6,
+                    borderBottom: "1px solid rgba(127,127,127,0.2)",
+                  },
+                  children: [
+                    jsxs("div", {
+                      style: { display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center", fontSize: 12 },
+                      children: [
+                        jsx("span", { style: ui.tag, children: row.isCurrent ? L.historyCurrent : L.historyOlder }),
+                        jsx("strong", { children: "#" + row.id + " " + row.type }),
+                        row.expiryState === "expired" ? jsx("span", { style: ui.tag, children: L.expired }) : null,
+                        row.relation && row.relation.reason
+                          ? jsx("span", { style: ui.muted, children: L.historyReason + ": " + row.relation.reason })
+                          : null,
+                      ],
+                    }),
+                    jsx("div", { style: ui.muted, children: row.l0 }),
+                  ],
+                },
+                "hist-" + row.id,
+              ),
+            ),
+          ],
+        });
+      };
+
+      const supersedeDialog = () => {
+        const dialog = revisionDialog;
+        if (!dialog) return null;
+        const oldNode = nodes.find((x) => x.id === dialog.oldId) || {};
+        const candidates = nodes.filter(
+          (x) => x.type === "decision" && x.id !== dialog.oldId && (x.revision || "current") === "current",
+        );
+        const chosen = candidates.find((x) => String(x.id) === String(dialog.successorId));
+        return jsx("div", {
+          style: {
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.42)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: 16,
+            zIndex: 60,
+          },
+          onClick: (event) => {
+            if (event.target === event.currentTarget) closeSupersede();
+          },
+          children: jsxs("div", {
+            ref: dialogRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": L.supersedeTitle,
+            tabIndex: -1,
+            style: {
+              background: "Canvas",
+              color: "inherit",
+              border: "1px solid rgba(127,127,127,0.35)",
+              borderRadius: 12,
+              padding: 16,
+              width: "100%",
+              maxWidth: "min(560px, 100%)",
+              boxSizing: "border-box",
+              maxHeight: "86vh",
+              overflow: "auto",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+            },
+            children: [
+              jsx("div", { style: { fontSize: 15, fontWeight: 650 }, children: L.supersedeTitle }),
+              jsx("div", { style: ui.hint, children: L.supersedeHint }),
+              !candidates.length
+                ? jsx("div", { style: ui.muted, children: L.noSuccessor })
+                : labeledInput(
+                    L.supersedePick,
+                    jsx("select", {
+                      value: dialog.successorId,
+                      onChange: (event) =>
+                        setRevisionDialog((prev) => (prev ? { ...prev, successorId: event.target.value, error: "", conflict: false } : prev)),
+                      disabled: revisionBusy,
+                      style: ui.input,
+                      children: [
+                        jsx("option", { value: "", children: L.supersedePick }, "none"),
+                        ...candidates.map((row) =>
+                          jsx(
+                            "option",
+                            { value: String(row.id), children: "#" + row.id + " " + (row.name || row.text || "").slice(0, 48) },
+                            String(row.id),
+                          ),
+                        ),
+                      ],
+                    }),
+                  ),
+              // The two existing decisions, side by side, never a generated one.
+              jsxs("div", {
+                style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 },
+                children: [
+                  jsxs("div", {
+                    style: { ...ui.stack, border: "1px solid rgba(127,127,127,0.28)", borderRadius: 8, padding: 10 },
+                    children: [
+                      jsx("div", { style: ui.fieldLabel, children: L.supersedeOld }),
+                      jsx("div", { style: { fontSize: 13 }, children: "#" + oldNode.id + " " + (oldNode.name || "") }),
+                      jsx("div", { style: ui.muted, children: oldNode.text || "" }),
+                    ],
+                  }),
+                  jsxs("div", {
+                    style: { ...ui.stack, border: "1px solid rgba(127,127,127,0.28)", borderRadius: 8, padding: 10 },
+                    children: [
+                      jsx("div", { style: ui.fieldLabel, children: L.supersedeNew }),
+                      jsx("div", { style: { fontSize: 13 }, children: chosen ? "#" + chosen.id + " " + (chosen.name || "") : "—" }),
+                      jsx("div", { style: ui.muted, children: chosen ? chosen.text || "" : "" }),
+                    ],
+                  }),
+                ],
+              }),
+              labeledInput(
+                L.supersedeReason,
+                jsx("textarea", {
+                  value: dialog.reason,
+                  maxLength: 240,
+                  rows: 2,
+                  disabled: revisionBusy,
+                  onChange: (event) => setRevisionDialog((prev) => (prev ? { ...prev, reason: event.target.value } : prev)),
+                  style: { ...ui.input, minHeight: 56, resize: "vertical" },
+                }),
+              ),
+              dialog.error
+                ? jsx("div", {
+                    style: ui.error,
+                    role: "alert",
+                    children: dialog.conflict
+                      ? dialog.errorCode === "etag" || dialog.errorCode === ""
+                        ? L.supersedeConflict
+                        : L.supersedeConflict + " " + dialog.error
+                      : L.supersedeFailed + " " + dialog.error,
+                  })
+                : null,
+              jsxs("div", {
+                style: { display: "flex", justifyContent: "flex-end", gap: 8, flexWrap: "wrap" },
+                children: [
+                  dialog.conflict
+                    ? jsx(Button, {
+                        variant: "outline",
+                        size: "sm",
+                        disabled: revisionBusy,
+                        onClick: () => submitSupersede(true),
+                        children: L.supersedeRefresh,
+                      })
+                    : null,
+                  jsx(Button, { variant: "outline", size: "sm", disabled: revisionBusy, onClick: closeSupersede, children: L.supersedeCancel }),
+                  jsx(Button, {
+                    variant: "primary",
+                    size: "sm",
+                    // Submitting twice would be two confirmations of one intent.
+                    disabled: revisionBusy || !dialog.successorId,
+                    onClick: () => submitSupersede(false),
+                    children: revisionBusy ? L.supersedeSaving : L.supersedeConfirm,
+                  }),
+                ],
+              }),
+            ],
+          }),
+        });
+      };
+
+      const recallPanel = () => {
+        const plan = status && status.lastContextPlan;
+        return jsxs("div", {
+          style: ui.card,
+          children: [
+            jsx("div", { style: ui.cardTitle, children: L.tabRecall }),
+            jsx("div", { style: ui.hint, children: L.recallBudgetHint }),
+            budgetBar(plan ? plan.tokens : 0, plan ? plan.budget : status ? status.turnTokenBudget : 300),
+            jsxs("div", {
+              style: ui.toolbar,
+              children: [
+                jsx("input", {
+                  value: previewQuery,
+                  onChange: (e) => setPreviewQuery(e.target.value),
+                  placeholder: L.recallQueryPh,
+                  style: { ...ui.input, flex: "1 1 180px", minWidth: 0 },
+                  maxLength: 500,
+                }),
+                jsx(Button, {
+                  variant: "outline",
+                  size: "sm",
+                  disabled: previewBusy,
+                  onClick: runPreview,
+                  children: previewBusy ? L.loading : L.recallRun,
+                }),
+              ],
+            }),
+            jsx("div", { style: ui.muted, children: L.recallSemanticOff }),
+            traceError ? jsx("div", { style: ui.error, children: traceError }) : null,
+            !plan
+              ? jsx("div", { style: ui.muted, children: L.recallNoTrace })
+              : jsxs("div", {
+                  style: ui.stack,
+                  children: [
+                    jsx("div", { style: ui.fieldLabel, children: L.recallSelected }),
+                    jsxs("div", {
+                      style: { display: "flex", flexWrap: "wrap", gap: 6 },
+                      children: plan.records.length
+                        ? plan.records.map((row) =>
+                            jsx(
+                              "span",
+                              {
+                                style: ui.tag,
+                                children:
+                                  "#" + row.id + " " + row.type + " · " + (row.channels || [row.channel]).join("+"),
+                              },
+                              "plan-" + row.id,
+                            ),
+                          )
+                        : jsx("span", { style: ui.muted, children: L.recallEmptyText }),
+                    }),
+                    plan.deferred && plan.deferred.length
+                      ? jsx("div", { style: ui.muted, children: L.recallDeferred + ": #" + plan.deferred.map((d) => d.id).join(", #") })
+                      : null,
+                  ],
+                }),
+            preview
+              ? jsxs("div", {
+                  style: ui.stack,
+                  children: [
+                    budgetBar(preview.tokens, preview.budget),
+                    jsx("div", { style: ui.fieldLabel, children: L.recallSelected }),
+                    jsxs("div", {
+                      style: { display: "flex", flexWrap: "wrap", gap: 6 },
+                      children: preview.records.length
+                        ? preview.records.map((row) =>
+                            jsx(
+                              "span",
+                              { style: ui.tag, children: "#" + row.id + " " + row.type + " · " + row.channel },
+                              "pv-" + row.id,
+                            ),
+                          )
+                        : jsx("span", { style: ui.muted, children: L.recallEmptyText }),
+                    }),
+                    preview.dropped.length
+                      ? jsxs("div", {
+                          style: ui.stack,
+                          children: [
+                            jsx("div", { style: ui.fieldLabel, children: L.recallDropped }),
+                            jsxs("div", {
+                              style: { display: "flex", flexWrap: "wrap", gap: 6 },
+                              children: preview.dropped.map((row, i) =>
+                                jsx(
+                                  "span",
+                                  { style: ui.tag, children: "#" + (row.id ?? "?") + " " + reasonLabel(row.reason) },
+                                  "drop-" + i,
+                                ),
+                              ),
+                            }),
+                          ],
+                        })
+                      : null,
+                    jsx("div", { style: ui.fieldLabel, children: L.recallWillSend }),
+                    jsx("pre", {
+                      style: { ...ui.mono, margin: 0, padding: 8, border: "1px solid rgba(127,127,127,0.28)", borderRadius: 6, maxHeight: 220, overflow: "auto" },
+                      children: (preview.text.pins + "\n" + preview.text.recall).trim() || L.recallEmptyText,
+                    }),
+                  ],
+                })
+              : null,
+            jsx("div", { style: ui.fieldLabel, children: L.recallRecent }),
+            !traces.length
+              ? jsx("div", { style: ui.muted, children: L.recallNoTrace })
+              : jsxs("div", {
+                  style: ui.stack,
+                  children: traces.map((row) =>
+                    jsxs(
+                      "div",
+                      {
+                        style: { ...ui.muted, display: "flex", gap: 8, flexWrap: "wrap" },
+                        children: [
+                          jsx("span", { style: ui.tag, children: row.semantic === "ran" ? "semantic" : "semantic: off" }),
+                          jsx("span", { children: row.query || "(empty)" }),
+                          jsx("span", { children: (row.stages || []).map((s) => s.stage).join(" → ") || "—" }),
+                          jsx("span", { children: row.tokens + " / " + row.budget + " " + t("estimate") }),
+                        ],
+                      },
+                      row.traceId,
+                    ),
+                  ),
+                }),
+          ],
+        });
+      };
+
 
       const load = react.useCallback(async (opts = {}) => {
         const seq = ++loadSeq.current;
@@ -571,6 +1431,9 @@ window.__ModuleLoader__.load({
           if (type) params.set("type", type);
           if (q.trim()) params.set("q", q.trim());
           if (showStale) params.set("stale", "1");
+          // Independent switch: revealing replaced versions is not the same
+          // question as revealing expired ones.
+          if (showSuperseded) params.set("superseded", "1");
           if (aboutId) params.set("about", String(aboutId));
           const qs = params.toString();
           const list = await api("/api/dsh-trivium/nodes" + (qs ? "?" + qs : ""));
@@ -580,7 +1443,7 @@ window.__ModuleLoader__.load({
         } catch (err) {
           setError(String(err.message || err));
         }
-      }, [type, q, showStale, aboutId]);
+      }, [type, q, showStale, showSuperseded, aboutId]);
 
       react.useEffect(() => {
         load();
@@ -1246,7 +2109,7 @@ window.__ModuleLoader__.load({
                 }),
               ),
               jsxs("div", {
-                style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 },
+                style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 },
                 children: [
                   labeledInput(
                     L.embedModel,
@@ -1277,7 +2140,13 @@ window.__ModuleLoader__.load({
                 : null,
             ],
           }),
-          jsxs("div", {
+          tabBar(tab, setTab, [
+            { key: "list", label: L.tabList },
+            { key: "recall", label: L.tabRecall },
+          ]),
+          tab === "recall"
+            ? recallPanel()
+            : jsxs("div", {
             style: ui.card,
             children: [
               jsx("div", { style: ui.cardTitle, children: L.list }),
@@ -1291,7 +2160,7 @@ window.__ModuleLoader__.load({
                       jsx("select", {
                         value: type,
                         onChange: (e) => setType(e.target.value),
-                        style: { ...ui.input, width: "auto", minWidth: 120 },
+                        style: { ...ui.input, width: "auto", minWidth: 0, maxWidth: 160 },
                         children: TYPES.map((t) =>
                           jsx("option", { value: t, children: t || L.all }, t || "all"),
                         ),
@@ -1302,7 +2171,7 @@ window.__ModuleLoader__.load({
                     value: q,
                     onChange: (e) => setQ(e.target.value),
                     placeholder: L.search + "  " + L.searchPh,
-                    style: { ...ui.input, flex: 1, minWidth: 160 },
+                    style: { ...ui.input, flex: "1 1 160px", minWidth: 0 },
                   }),
                   jsxs("label", {
                     style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, whiteSpace: "nowrap" },
@@ -1315,6 +2184,17 @@ window.__ModuleLoader__.load({
                       jsx("span", { children: L.showStale }),
                     ],
                   }),
+                  jsxs("label", {
+                    style: { display: "flex", alignItems: "center", gap: 6, fontSize: 13, whiteSpace: "nowrap" },
+                    children: [
+                      jsx("input", {
+                        type: "checkbox",
+                        checked: showSuperseded,
+                        onChange: (e) => setShowSuperseded(e.target.checked),
+                      }),
+                      jsx("span", { children: L.showSuperseded }),
+                    ],
+                  }),
                 ],
               }),
               aboutId
@@ -1332,6 +2212,7 @@ window.__ModuleLoader__.load({
                   })
                 : null,
               jsx("div", { style: ui.hint, children: L.archiveHint }),
+              revisionNote ? jsx("div", { style: ui.saved, role: "status", children: revisionNote }) : null,
               !nodes.length
                 ? jsx("div", {
                     style: { opacity: 0.7, fontSize: 13 },
@@ -1359,16 +2240,29 @@ window.__ModuleLoader__.load({
                             display: "flex",
                             flexDirection: "column",
                             gap: 8,
+                            minWidth: 0,
+                            overflowWrap: "anywhere",
                           },
                           children: [
                             jsxs("div", {
                               style: { fontWeight: 600, cursor: "pointer", fontSize: 13 },
-                              onClick: () => setExpanded(open ? null : n.id),
+                              onClick: () => {
+                                setExpanded(open ? null : n.id);
+                                // Detail is a small header: one request on expand,
+                                // never on list load.
+                                if (!open && !detail[n.id]) loadNodeInfo(n.id, "detail");
+                              },
                               children: [
                                 "#" + n.id + " " + n.type,
                                 n.name ? " · " + n.name : "",
                                 n.until ? " · " + L.until + " " + n.until : "",
-                                n.stale ? " · " + L.stale : "",
+                                n.stale ? " · " + L.expired : "",
+                                // Superseded is a different axis from expired and
+                                // gets its own label, never the expired one.
+                                n.revision === "superseded" ? " · " + L.historySuperseded : "",
+                                detail[n.id] && detail[n.id].revisionState === "unresolved"
+                                  ? " · " + L.historyUnresolved
+                                  : "",
                                 n.dirty ? " · " + L.dirty : "",
                               ],
                             }),
@@ -1383,6 +2277,17 @@ window.__ModuleLoader__.load({
                               ? jsxs("div", {
                                   style: { display: "flex", flexDirection: "column", gap: 8 },
                                   children: [
+                                    tabBar(
+                                      nodeTab,
+                                      (next) => pickNodeTab(n.id, next),
+                                      [
+                                        { key: "content", label: L.nodeTabContent },
+                                        { key: "source", label: L.nodeTabSource },
+                                        { key: "history", label: L.nodeTabHistory },
+                                      ],
+                                    ),
+                                    ...(nodeTab === "content"
+                                      ? [
                                     labeledInput(
                                       L.name,
                                       jsx("input", {
@@ -1454,7 +2359,7 @@ window.__ModuleLoader__.load({
                                                   value: mergeFrom[n.id] || "",
                                                   onChange: (ev) =>
                                                     setMergeFrom((prev) => ({ ...prev, [n.id]: ev.target.value })),
-                                                  style: { ...ui.input, width: "auto", minWidth: 160, flex: 1 },
+                                                  style: { ...ui.input, width: "auto", minWidth: 0, flex: "1 1 140px" },
                                                   children: [
                                                     jsx("option", { value: "", children: L.mergePick }, "none"),
                                                     ...peers.map((p) =>
@@ -1482,6 +2387,10 @@ window.__ModuleLoader__.load({
                                           : null,
                                       ],
                                     }),
+                                      ]
+                                      : []),
+                                    ...(nodeTab === "source" ? [sourceSection(n)] : []),
+                                    ...(nodeTab === "history" ? [historySection(n)] : []),
                                   ],
                                 })
                               : null,
@@ -1527,6 +2436,35 @@ window.__ModuleLoader__.load({
                               : jsxs("div", {
                                   style: { display: "flex", gap: 8, flexWrap: "wrap" },
                                   children: [
+                                    n.type === "decision"
+                                      ? jsx(Button, {
+                                          variant: "outline",
+                                          size: "sm",
+                                          onClick: () => openSupersede(n.id),
+                                          children: L.supersede,
+                                        })
+                                      : null,
+                                    n.type === "decision" && n.replacesId
+                                      ? jsx(Button, {
+                                          variant: "outline",
+                                          size: "sm",
+                                          disabled: revisionBusy,
+                                          onClick: () => revokeSupersession(n.replacesId, n.id),
+                                          children: L.revoke,
+                                        })
+                                      : null,
+                                    n.supersededBy
+                                      ? jsx(Button, {
+                                          variant: "outline",
+                                          size: "sm",
+                                          onClick: () => {
+                                            setExpanded(n.supersededBy);
+                                            setNodeTab("content");
+                                            loadNodeInfo(n.supersededBy, "detail");
+                                          },
+                                          children: L.historyViewCurrent,
+                                        })
+                                      : null,
                                     n.type === "entity"
                                       ? jsx(Button, {
                                           variant: "outline",
@@ -1557,6 +2495,7 @@ window.__ModuleLoader__.load({
                   }),
             ],
           }),
+          revisionDialog ? supersedeDialog() : null,
         ],
       });
     }