ltcai 3.6.0 → 4.0.1

package/static/v3/js/views/activity.0d271ef9.js

@@ -0,0 +1,67 @@
+import { t } from "../core/i18n.880e1fec.js";
+
+export async function render(ctx) {
+  const { h, api, c } = ctx;
+  const feedHost = h("div", c.loading({ lines: 4 }));
+  const presenceHost = h("div", c.loading({ lines: 2 }));
+  const timelineHost = h("div", c.loading({ lines: 4 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({ eyebrow: t("activity.eyebrow"), title: t("activity.title"), sub: t("activity.sub") }),
+    c.panel({ title: t("activity.feed"), children: feedHost }),
+    c.panel({ title: t("activity.presence"), children: presenceHost }),
+    c.panel({ title: t("activity.timeMachine"), children: timelineHost }),
+  );
+
+  await load();
+  wireLiveFeed();
+  return root;
+
+  async function load() {
+    const [feed, presence, timeline] = await Promise.all([api.realtimeFeed(80), api.presence(), api.timeMachine(80)]);
+    feedHost.replaceChildren(listEvents(ctx, feed.data?.events || [], feed.source));
+    presenceHost.replaceChildren(listPresence(ctx, presence.data?.presence || [], presence.source));
+    timelineHost.replaceChildren(listEvents(ctx, timeline.data?.events || [], timeline.source));
+  }
+
+  function wireLiveFeed() {
+    if (!window.EventSource) return;
+    try {
+      const stream = new EventSource("/realtime/stream");
+      stream.onmessage = () => load();
+      setTimeout(() => stream.close(), 120000);
+    } catch {}
+  }
+}
+
+function listEvents(ctx, events, source) {
+  const { h, c } = ctx;
+  return h("div.lt3-stack-3",
+    h("div.lt3-row-2", c.sourceBadge(source)),
+    events.length ? c.table([
+      { key: "event", label: t("common.status"), render: (e) => h("div", h("b", e.event_type || e.type || e.area || "event"), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, e.payload?.run_id || e.payload?.workflow_id || e.id || "")) },
+      { key: "area", label: t("common.type"), width: "1%", render: (e) => c.pill(e.area || e.kind || "system") },
+      { key: "when", label: t("common.created"), width: "1%", render: (e) => h("span.lt3-faint", { style: { "white-space": "nowrap" } }, fmt(e.timestamp || e.created_at || e.at)) },
+    ], events.slice(0, 50)) : c.emptyState({ icon: "activity", title: t("activity.feed"), body: t("common.none") }),
+  );
+}
+
+function listPresence(ctx, rows, source) {
+  const { h, c } = ctx;
+  return h("div.lt3-stack-3",
+    h("div.lt3-row-2", c.sourceBadge(source)),
+    rows.length ? c.table([
+      { key: "user", label: t("account.email"), render: (p) => p.user || p.email || p.client_id || "local" },
+      { key: "workspace", label: "workspace_id", render: (p) => h("span.lt3-mono", p.workspace_id || "personal") },
+      { key: "when", label: t("common.updated"), width: "1%", render: (p) => fmt(p.last_seen || p.joined_at) },
+    ], rows) : c.emptyState({ icon: "users", title: t("activity.presence"), body: t("common.none") }),
+  );
+}
+
+function fmt(ts) {
+  if (!ts) return "—";
+  try {
+    const d = typeof ts === "number" ? new Date(ts * 1000) : new Date(ts);
+    return Number.isNaN(d.getTime()) ? String(ts) : d.toLocaleString();
+  } catch { return String(ts); }
+}

package/static/v3/js/views/activity.js

@@ -0,0 +1,67 @@
+import { t } from "../core/i18n.js";
+
+export async function render(ctx) {
+  const { h, api, c } = ctx;
+  const feedHost = h("div", c.loading({ lines: 4 }));
+  const presenceHost = h("div", c.loading({ lines: 2 }));
+  const timelineHost = h("div", c.loading({ lines: 4 }));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({ eyebrow: t("activity.eyebrow"), title: t("activity.title"), sub: t("activity.sub") }),
+    c.panel({ title: t("activity.feed"), children: feedHost }),
+    c.panel({ title: t("activity.presence"), children: presenceHost }),
+    c.panel({ title: t("activity.timeMachine"), children: timelineHost }),
+  );
+
+  await load();
+  wireLiveFeed();
+  return root;
+
+  async function load() {
+    const [feed, presence, timeline] = await Promise.all([api.realtimeFeed(80), api.presence(), api.timeMachine(80)]);
+    feedHost.replaceChildren(listEvents(ctx, feed.data?.events || [], feed.source));
+    presenceHost.replaceChildren(listPresence(ctx, presence.data?.presence || [], presence.source));
+    timelineHost.replaceChildren(listEvents(ctx, timeline.data?.events || [], timeline.source));
+  }
+
+  function wireLiveFeed() {
+    if (!window.EventSource) return;
+    try {
+      const stream = new EventSource("/realtime/stream");
+      stream.onmessage = () => load();
+      setTimeout(() => stream.close(), 120000);
+    } catch {}
+  }
+}
+
+function listEvents(ctx, events, source) {
+  const { h, c } = ctx;
+  return h("div.lt3-stack-3",
+    h("div.lt3-row-2", c.sourceBadge(source)),
+    events.length ? c.table([
+      { key: "event", label: t("common.status"), render: (e) => h("div", h("b", e.event_type || e.type || e.area || "event"), h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, e.payload?.run_id || e.payload?.workflow_id || e.id || "")) },
+      { key: "area", label: t("common.type"), width: "1%", render: (e) => c.pill(e.area || e.kind || "system") },
+      { key: "when", label: t("common.created"), width: "1%", render: (e) => h("span.lt3-faint", { style: { "white-space": "nowrap" } }, fmt(e.timestamp || e.created_at || e.at)) },
+    ], events.slice(0, 50)) : c.emptyState({ icon: "activity", title: t("activity.feed"), body: t("common.none") }),
+  );
+}
+
+function listPresence(ctx, rows, source) {
+  const { h, c } = ctx;
+  return h("div.lt3-stack-3",
+    h("div.lt3-row-2", c.sourceBadge(source)),
+    rows.length ? c.table([
+      { key: "user", label: t("account.email"), render: (p) => p.user || p.email || p.client_id || "local" },
+      { key: "workspace", label: "workspace_id", render: (p) => h("span.lt3-mono", p.workspace_id || "personal") },
+      { key: "when", label: t("common.updated"), width: "1%", render: (p) => fmt(p.last_seen || p.joined_at) },
+    ], rows) : c.emptyState({ icon: "users", title: t("activity.presence"), body: t("common.none") }),
+  );
+}
+
+function fmt(ts) {
+  if (!ts) return "—";
+  try {
+    const d = typeof ts === "number" ? new Date(ts * 1000) : new Date(ts);
+    return Number.isNaN(d.getTime()) ? String(ts) : d.toLocaleString();
+  } catch { return String(ts); }
+}

package/static/v3/js/views/{admin-users.03bac88c.js → admin-users.f7ac7b43.js}

@@ -8,10 +8,8 @@
 
 import { timeAgo } from "../core/dom.a2773eb0.js";
 
-const UNAVAILABLE = "not available from this read-only users view.";
-
 export async function render(ctx) {
-  const { h, icon, api, c, toast } = ctx;
+  const { h, icon, api, c, toast, navigate } = ctx;
 
   const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
   const tableHost = h("div", c.loading({ lines: 4 }));
@@ -24,7 +22,7 @@ export async function render(ctx) {
       sub: "Workspace members and access.",
       actions: [
         h("button.lt3-btn.lt3-btn--primary",
-          { on: { click: () => toast("Invite user is " + UNAVAILABLE, "info") } },
+          { on: { click: () => navigate("workspace-admin") } },
           icon("user-plus"), "Invite user"),
       ],
     }),
@@ -67,7 +65,7 @@ export async function render(ctx) {
         title: "No members yet",
         body: "Invite teammates to give them access to this workspace.",
         action: h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm",
-          { on: { click: () => toast("Invite user is " + UNAVAILABLE, "info") } },
+          { on: { click: () => navigate("workspace-admin") } },
           icon("user-plus"), "Invite user"),
       }));
       return;
@@ -105,7 +103,7 @@ export async function render(ctx) {
         render: (r) => h("button.lt3-iconbtn.lt3-iconbtn--sm",
           {
             "aria-label": `Manage ${r.nickname || r.email}`,
-            on: { click: () => toast(`Manage ${r.nickname || r.email} is ` + UNAVAILABLE, "info") },
+            on: { click: () => toast(`Manage ${r.nickname || r.email} in Workspaces`, "info") },
           },
           icon("dots-vertical")),
       },

package/static/v3/js/views/admin-users.js

@@ -8,10 +8,8 @@
 
 import { timeAgo } from "../core/dom.js";
 
-const UNAVAILABLE = "not available from this read-only users view.";
-
 export async function render(ctx) {
-  const { h, icon, api, c, toast } = ctx;
+  const { h, icon, api, c, toast, navigate } = ctx;
 
   const statHost = h("div.lt3-statrow", c.loading({ lines: 1 }));
   const tableHost = h("div", c.loading({ lines: 4 }));
@@ -24,7 +22,7 @@ export async function render(ctx) {
       sub: "Workspace members and access.",
       actions: [
         h("button.lt3-btn.lt3-btn--primary",
-          { on: { click: () => toast("Invite user is " + UNAVAILABLE, "info") } },
+          { on: { click: () => navigate("workspace-admin") } },
           icon("user-plus"), "Invite user"),
       ],
     }),
@@ -67,7 +65,7 @@ export async function render(ctx) {
         title: "No members yet",
         body: "Invite teammates to give them access to this workspace.",
         action: h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm",
-          { on: { click: () => toast("Invite user is " + UNAVAILABLE, "info") } },
+          { on: { click: () => navigate("workspace-admin") } },
           icon("user-plus"), "Invite user"),
       }));
       return;
@@ -105,7 +103,7 @@ export async function render(ctx) {
         render: (r) => h("button.lt3-iconbtn.lt3-iconbtn--sm",
           {
             "aria-label": `Manage ${r.nickname || r.email}`,
-            on: { click: () => toast(`Manage ${r.nickname || r.email} is ` + UNAVAILABLE, "info") },
+            on: { click: () => toast(`Manage ${r.nickname || r.email} in Workspaces`, "info") },
           },
           icon("dots-vertical")),
       },

package/static/v3/js/views/{agents.014d0b74.js → agents.17c5288d.js}

@@ -4,7 +4,7 @@
  * role roster enriched with real run counts, the live recent-runs ledger, and
  * runtime health. Reports unavailable state when the runtime is unreachable.
  * Also drives runs directly: a goal + role selection → POST /agents/api/run →
- * a real timeline (logs), final status/output, queue/status, and stop.
+ * a durable async run, live logs, final status/output, queue/status, and stop.
  * ========================================================================== */
 
 import { timeAgo } from "../core/dom.a2773eb0.js";
@@ -37,7 +37,7 @@ export async function render(ctx) {
         h("div",
           h("div.lt3-eyebrow", "Run"),
           h("h3.lt3-panel__title", "Run agents"),
-          h("p.lt3-panel__sub", "Give the pipeline a goal. Planner → executor → reviewer run synchronously and locally — no model required."),
+          h("p.lt3-panel__sub", "Give the pipeline a goal. Planner → executor → reviewer run locally with durable progress and cooperative cancellation."),
         ),
         runSrc,
       ),
@@ -134,7 +134,7 @@ function makeRunConsole(ctx, hosts) {
     if (!roles.length) { ctx.toast("Select at least one role", "info"); return; }
 
     runBtn.disabled = true;
-    runBtn.replaceChildren(c.icon("loader-2"), "Running…");
+    runBtn.replaceChildren(c.icon("loader-2"), "Starting…");
     runSrc.replaceChildren(c.sourceBadge("pending"));
     logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.loading({ lines: 4 })));
 
@@ -157,18 +157,40 @@ function makeRunConsole(ctx, hosts) {
     const run = data.run || {};
     const result = data.result || {};
     logsHost.replaceChildren(renderRunResult(run, result));
-    ctx.toast(`Run ${mapStatus(result.status) === "failed" ? "completed with failure" : "complete"}`, mapStatus(result.status) === "failed" ? "warn" : "ok");
+    if (data.accepted && (run.id || run.run_id)) {
+      ctx.toast("Run queued", "ok");
+      pollRun(run.id || run.run_id);
+    } else {
+      ctx.toast(`Run ${mapStatus(result.status) === "failed" ? "completed with failure" : "complete"}`, mapStatus(result.status) === "failed" ? "warn" : "ok");
+    }
 
     // Refresh runtime so queue/total/recent-runs reflect this run.
     hydrate();
   }
 
+  async function pollRun(runId) {
+    for (let i = 0; i < 80; i += 1) {
+      await sleep(i < 10 ? 400 : 1200);
+      const res = await ctx.api.agentRunDetail(runId);
+      const data = (res && res.data) || {};
+      if (!res || !res.ok) return;
+      const run = data.run || {};
+      logsHost.replaceChildren(renderRunResult(run, run));
+      hydrate();
+      if (!isActiveStatus(run.status)) {
+        const mapped = mapStatus(run.status);
+        ctx.toast(`Run ${mapped === "failed" ? "completed with failure" : "finished"}`, mapped === "failed" ? "warn" : "ok");
+        return;
+      }
+    }
+  }
+
   /* ── Render a run's result as logs + summary ───────────────────────────── */
   function renderRunResult(run, result) {
     const runId = run.id || run.run_id || result.run_id || result.id;
     const status = mapStatus(result.status || run.status);
-    const timeline = Array.isArray(result.timeline) ? result.timeline : [];
-    const output = result.output != null ? String(result.output) : "";
+    const timeline = Array.isArray(result.timeline) ? result.timeline : (Array.isArray(run.timeline) ? run.timeline : []);
+    const output = result.output != null ? String(result.output) : String(run.output_preview || "");
     const retries = Number(result.retries) || 0;
     const active = isActiveStatus(result.status || run.status);
 
@@ -183,9 +205,6 @@ function makeRunConsole(ctx, hosts) {
         ),
         runId
           ? h("button.lt3-btn.lt3-btn--danger.lt3-btn--sm", {
-              // The synchronous runtime finishes inline; Stop is offered but
-              // reports honestly (stopped:false + reason) when there's nothing
-              // left to interrupt.
               title: active ? "Stop this run" : "This run has already finished",
               on: { click: (e) => stopRun(runId, e.currentTarget) },
             }, c.icon("player-stop"), "Stop")
@@ -242,7 +261,6 @@ function makeRunConsole(ctx, hosts) {
       return;
     }
     if (data.stopped === false || data.stopped == null) {
-      // The synchronous runtime cannot interrupt an already-finished run.
       ctx.toast(String(data.reason || "Run already finished — nothing to stop"), "warn");
     } else {
       ctx.toast("Run stopped", "ok");
@@ -510,16 +528,21 @@ function mapStatus(status) {
   const s = String(status || "").toLowerCase();
   if (s === "ok" || s === "retried_ok") return "ready";
   if (s === "failed" || s === "rejected") return "failed";
-  if (s === "running" || s === "in_progress") return "active";
+  if (s === "running" || s === "in_progress" || s === "queued" || s === "cancelling") return "active";
+  if (s === "cancelled" || s === "interrupted") return "warn";
   return s || "idle";
 }
 
 // An active run is one that could (in principle) still be stopped.
-const ACTIVE_STATES = new Set(["running", "in_progress", "queued", "pending", "active"]);
+const ACTIVE_STATES = new Set(["running", "in_progress", "queued", "pending", "active", "cancelling"]);
 function isActiveStatus(status) {
   return ACTIVE_STATES.has(String(status || "").toLowerCase());
 }
 
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 function runNote(r) {
   const out = String(r.output || r.input || "").trim();
   if (out) return out.length > 96 ? out.slice(0, 96) + "…" : out;

package/static/v3/js/views/agents.js

@@ -4,7 +4,7 @@
  * role roster enriched with real run counts, the live recent-runs ledger, and
  * runtime health. Reports unavailable state when the runtime is unreachable.
  * Also drives runs directly: a goal + role selection → POST /agents/api/run →
- * a real timeline (logs), final status/output, queue/status, and stop.
+ * a durable async run, live logs, final status/output, queue/status, and stop.
  * ========================================================================== */
 
 import { timeAgo } from "../core/dom.js";
@@ -37,7 +37,7 @@ export async function render(ctx) {
         h("div",
           h("div.lt3-eyebrow", "Run"),
           h("h3.lt3-panel__title", "Run agents"),
-          h("p.lt3-panel__sub", "Give the pipeline a goal. Planner → executor → reviewer run synchronously and locally — no model required."),
+          h("p.lt3-panel__sub", "Give the pipeline a goal. Planner → executor → reviewer run locally with durable progress and cooperative cancellation."),
         ),
         runSrc,
       ),
@@ -134,7 +134,7 @@ function makeRunConsole(ctx, hosts) {
     if (!roles.length) { ctx.toast("Select at least one role", "info"); return; }
 
     runBtn.disabled = true;
-    runBtn.replaceChildren(c.icon("loader-2"), "Running…");
+    runBtn.replaceChildren(c.icon("loader-2"), "Starting…");
     runSrc.replaceChildren(c.sourceBadge("pending"));
     logsHost.replaceChildren(h("div", { style: { "margin-top": "var(--lt3-space-3)" } }, c.loading({ lines: 4 })));
 
@@ -157,18 +157,40 @@ function makeRunConsole(ctx, hosts) {
     const run = data.run || {};
     const result = data.result || {};
     logsHost.replaceChildren(renderRunResult(run, result));
-    ctx.toast(`Run ${mapStatus(result.status) === "failed" ? "completed with failure" : "complete"}`, mapStatus(result.status) === "failed" ? "warn" : "ok");
+    if (data.accepted && (run.id || run.run_id)) {
+      ctx.toast("Run queued", "ok");
+      pollRun(run.id || run.run_id);
+    } else {
+      ctx.toast(`Run ${mapStatus(result.status) === "failed" ? "completed with failure" : "complete"}`, mapStatus(result.status) === "failed" ? "warn" : "ok");
+    }
 
     // Refresh runtime so queue/total/recent-runs reflect this run.
     hydrate();
   }
 
+  async function pollRun(runId) {
+    for (let i = 0; i < 80; i += 1) {
+      await sleep(i < 10 ? 400 : 1200);
+      const res = await ctx.api.agentRunDetail(runId);
+      const data = (res && res.data) || {};
+      if (!res || !res.ok) return;
+      const run = data.run || {};
+      logsHost.replaceChildren(renderRunResult(run, run));
+      hydrate();
+      if (!isActiveStatus(run.status)) {
+        const mapped = mapStatus(run.status);
+        ctx.toast(`Run ${mapped === "failed" ? "completed with failure" : "finished"}`, mapped === "failed" ? "warn" : "ok");
+        return;
+      }
+    }
+  }
+
   /* ── Render a run's result as logs + summary ───────────────────────────── */
   function renderRunResult(run, result) {
     const runId = run.id || run.run_id || result.run_id || result.id;
     const status = mapStatus(result.status || run.status);
-    const timeline = Array.isArray(result.timeline) ? result.timeline : [];
-    const output = result.output != null ? String(result.output) : "";
+    const timeline = Array.isArray(result.timeline) ? result.timeline : (Array.isArray(run.timeline) ? run.timeline : []);
+    const output = result.output != null ? String(result.output) : String(run.output_preview || "");
     const retries = Number(result.retries) || 0;
     const active = isActiveStatus(result.status || run.status);
 
@@ -183,9 +205,6 @@ function makeRunConsole(ctx, hosts) {
         ),
         runId
           ? h("button.lt3-btn.lt3-btn--danger.lt3-btn--sm", {
-              // The synchronous runtime finishes inline; Stop is offered but
-              // reports honestly (stopped:false + reason) when there's nothing
-              // left to interrupt.
               title: active ? "Stop this run" : "This run has already finished",
               on: { click: (e) => stopRun(runId, e.currentTarget) },
             }, c.icon("player-stop"), "Stop")
@@ -242,7 +261,6 @@ function makeRunConsole(ctx, hosts) {
       return;
     }
     if (data.stopped === false || data.stopped == null) {
-      // The synchronous runtime cannot interrupt an already-finished run.
       ctx.toast(String(data.reason || "Run already finished — nothing to stop"), "warn");
     } else {
       ctx.toast("Run stopped", "ok");
@@ -510,16 +528,21 @@ function mapStatus(status) {
   const s = String(status || "").toLowerCase();
   if (s === "ok" || s === "retried_ok") return "ready";
   if (s === "failed" || s === "rejected") return "failed";
-  if (s === "running" || s === "in_progress") return "active";
+  if (s === "running" || s === "in_progress" || s === "queued" || s === "cancelling") return "active";
+  if (s === "cancelled" || s === "interrupted") return "warn";
   return s || "idle";
 }
 
 // An active run is one that could (in principle) still be stopped.
-const ACTIVE_STATES = new Set(["running", "in_progress", "queued", "pending", "active"]);
+const ACTIVE_STATES = new Set(["running", "in_progress", "queued", "pending", "active", "cancelling"]);
 function isActiveStatus(status) {
   return ACTIVE_STATES.has(String(status || "").toLowerCase());
 }
 
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 function runNote(r) {
   const out = String(r.output || r.input || "").trim();
   if (out) return out.length > 96 ? out.slice(0, 96) + "…" : out;

package/static/v3/js/views/{chat.e6dd7dd0.js → chat.e250e2cc.js}

@@ -12,6 +12,7 @@
  * ========================================================================== */
 
 import { timeAgo } from "../core/dom.a2773eb0.js";
+import { t } from "../core/i18n.880e1fec.js";
 
 export const layout = "flush";
 
@@ -520,10 +521,32 @@ export async function render(ctx) {
           ? fileRefs.slice(0, 6).map((p) => ctxItem("var(--faint)", p, null))
           : [ctxEmpty("No file references yet")]),
 
+      ctxSection(t("chat.whyContext"), "route",
+        traceItems(state.lastTrace, q)),
+
       h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm.lt3-btn--block", { on: { click: () => navigate("hybrid-search", q ? { q } : undefined) } }, icon("arrows-join"), "Open Hybrid Search"),
     );
   }
 
+  function traceItems(trace, query) {
+    if (!trace) return [ctxEmpty(t("chat.traceUnavailable"))];
+    const items = [];
+    const meta = trace.retrieval_metadata || {};
+    items.push(ctxItem("var(--lt3-pillar-hybrid)", t("chat.traceQuestion"), trace.question || query || "—"));
+    if (trace.confidence != null) items.push(ctxItem("var(--lt3-pillar-vector)", t("chat.traceConfidence"), Number(trace.confidence).toFixed(2)));
+    if (meta.mode || meta.strategy) items.push(ctxItem("var(--lt3-pillar-hybrid)", "retrieval", meta.mode || meta.strategy));
+    if (Array.isArray(trace.graph_nodes) && trace.graph_nodes.length) {
+      items.push(ctxItem("var(--lt3-pillar-graph)", t("chat.traceReasons"), `${trace.graph_nodes.length} graph node(s)`));
+    }
+    if (Array.isArray(trace.vector_matches) && trace.vector_matches.length) {
+      items.push(ctxItem("var(--lt3-pillar-vector)", "vector", `${trace.vector_matches.length} match(es)`));
+    }
+    if (Array.isArray(trace.source_files) && trace.source_files.length) {
+      items.push(ctxItem("var(--faint)", "files", `${trace.source_files.length} source file(s)`));
+    }
+    return items.length ? items : [ctxEmpty(t("chat.traceUnavailable"))];
+  }
+
   function ctxSection(title, icn, children) {
     return h("section",
       h("div.lt3-ctx-sec__title", icon(icn), title),

package/static/v3/js/views/chat.js

@@ -12,6 +12,7 @@
  * ========================================================================== */
 
 import { timeAgo } from "../core/dom.js";
+import { t } from "../core/i18n.js";
 
 export const layout = "flush";
 
@@ -520,10 +521,32 @@ export async function render(ctx) {
           ? fileRefs.slice(0, 6).map((p) => ctxItem("var(--faint)", p, null))
           : [ctxEmpty("No file references yet")]),
 
+      ctxSection(t("chat.whyContext"), "route",
+        traceItems(state.lastTrace, q)),
+
       h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm.lt3-btn--block", { on: { click: () => navigate("hybrid-search", q ? { q } : undefined) } }, icon("arrows-join"), "Open Hybrid Search"),
     );
   }
 
+  function traceItems(trace, query) {
+    if (!trace) return [ctxEmpty(t("chat.traceUnavailable"))];
+    const items = [];
+    const meta = trace.retrieval_metadata || {};
+    items.push(ctxItem("var(--lt3-pillar-hybrid)", t("chat.traceQuestion"), trace.question || query || "—"));
+    if (trace.confidence != null) items.push(ctxItem("var(--lt3-pillar-vector)", t("chat.traceConfidence"), Number(trace.confidence).toFixed(2)));
+    if (meta.mode || meta.strategy) items.push(ctxItem("var(--lt3-pillar-hybrid)", "retrieval", meta.mode || meta.strategy));
+    if (Array.isArray(trace.graph_nodes) && trace.graph_nodes.length) {
+      items.push(ctxItem("var(--lt3-pillar-graph)", t("chat.traceReasons"), `${trace.graph_nodes.length} graph node(s)`));
+    }
+    if (Array.isArray(trace.vector_matches) && trace.vector_matches.length) {
+      items.push(ctxItem("var(--lt3-pillar-vector)", "vector", `${trace.vector_matches.length} match(es)`));
+    }
+    if (Array.isArray(trace.source_files) && trace.source_files.length) {
+      items.push(ctxItem("var(--faint)", "files", `${trace.source_files.length} source file(s)`));
+    }
+    return items.length ? items : [ctxEmpty(t("chat.traceUnavailable"))];
+  }
+
   function ctxSection(title, icn, children) {
     return h("section",
       h("div.lt3-ctx-sec__title", icon(icn), title),