reasonix 0.12.8 → 0.12.14

package/dashboard/app.js

@@ -1136,9 +1136,103 @@ function EditReviewModal({ modal, onResolve }) {
   `;
 }
 
+function WorkspaceModal({ modal, onResolve }) {
+  return html`
+    <${ModalCard}
+      accent="#fbbf24"
+      icon="◇"
+      title="model wants to switch workspace"
+      subtitle="every subsequent file / shell / memory tool resolves against the new root"
+    >
+      <div class="modal-cmd"><span class="modal-cmd-prompt">→</span> <code>${modal.path}</code></div>
+      <div class="modal-actions">
+        <button class="primary" onClick=${() => onResolve("workspace", "switch")}>Switch (Enter)</button>
+        <button class="danger" onClick=${() => onResolve("workspace", "deny")}>Deny (Esc)</button>
+      </div>
+    <//>
+  `;
+}
+
+function CheckpointModal({ modal, onResolve }) {
+  const [reviseText, setReviseText] = useState("");
+  const [staged, setStaged] = useState(false);
+  const label = modal.title ? `${modal.stepId} · ${modal.title}` : modal.stepId;
+  const counter = modal.total > 0 ? ` (${modal.completed}/${modal.total})` : "";
+  return html`
+    <${ModalCard}
+      accent="#a5f3fc"
+      icon="✓"
+      title=${`step complete${counter}`}
+      subtitle=${label}
+    >
+      ${
+        staged
+          ? html`
+          <textarea
+            placeholder="What needs to change before the next step? Leave blank to just continue."
+            rows="3"
+            value=${reviseText}
+            onInput=${(e) => setReviseText(e.target.value)}
+          ></textarea>
+          <div class="modal-actions">
+            <button class="primary" onClick=${() => onResolve("checkpoint", "revise", reviseText)}>Send revision</button>
+            <button onClick=${() => {
+              setStaged(false);
+              setReviseText("");
+            }}>Back</button>
+          </div>
+        `
+          : html`
+          <div class="modal-actions">
+            <button class="primary" onClick=${() => onResolve("checkpoint", "continue")}>Continue</button>
+            <button onClick=${() => setStaged(true)}>Revise…</button>
+            <button class="danger" onClick=${() => onResolve("checkpoint", "stop")}>Stop</button>
+          </div>
+        `
+      }
+    <//>
+  `;
+}
+
+function RevisionModal({ modal, onResolve }) {
+  const riskColor = (r) =>
+    r === "high" ? "#f87171" : r === "med" ? "#fbbf24" : r === "low" ? "#86efac" : "#9ca3af";
+  return html`
+    <${ModalCard}
+      accent="#c4b5fd"
+      icon="✎"
+      title="model proposed a plan revision"
+      subtitle=${modal.summary || modal.reason}
+    >
+      <div class="modal-revise-reason">${modal.reason}</div>
+      <ol class="modal-revise-steps">
+        ${modal.remainingSteps.map(
+          (s) => html`
+            <li key=${s.id}>
+              <span class="modal-revise-dot" style=${`background:${riskColor(s.risk)}`}></span>
+              <span class="modal-revise-id">${s.id}</span>
+              <span class="modal-revise-title">${s.title}</span>
+              <span class="modal-revise-action">${s.action}</span>
+            </li>
+          `,
+        )}
+      </ol>
+      <div class="modal-actions">
+        <button class="primary" onClick=${() => onResolve("revision", "accept")}>Accept</button>
+        <button class="danger" onClick=${() => onResolve("revision", "reject")}>Reject</button>
+      </div>
+    <//>
+  `;
+}
+
 function ChatPanel() {
   const [messages, setMessages] = useState([]);
   const [streaming, setStreaming] = useState(null); // { id, text, reasoning }
+  // Tool currently dispatched but not yet returning. Set on `tool_start`,
+  // cleared on `tool` / `error`. Drives the in-flight row so the user
+  // sees what's running (path, command, char counts) instead of a
+  // generic "waiting" — file writes especially feel hung otherwise.
+  const [activeTool, setActiveTool] = useState(null); // { id, toolName, args }
   const [busy, setBusy] = useState(false);
   const [input, setInput] = useState("");
   const [error, setError] = useState(null);
@@ -1164,11 +1258,54 @@ function ChatPanel() {
   // the input area.
   const [stats, setStats] = useState(null);
   const [overviewModel, setOverviewModel] = useState(null);
+  // Whether the project has a built semantic index. Null = unknown
+  // (poll hasn't landed) or non-attached. False = no index → show the
+  // dismissible banner. True = index built → hide it.
+  const [semanticIndex, setSemanticIndex] = useState(null);
+  const [semanticBannerDismissed, setSemanticBannerDismissed] = useState(() => {
+    try {
+      return localStorage.getItem("rx.semanticBannerDismissed") === "1";
+    } catch {
+      return false;
+    }
+  });
+  useEffect(() => {
+    try {
+      localStorage.setItem("rx.semanticBannerDismissed", semanticBannerDismissed ? "1" : "0");
+    } catch {
+      /* ignore */
+    }
+  }, [semanticBannerDismissed]);
+  // Wall-clock timestamp the current turn started at — populated when
+  // busy flips true, cleared when it flips false. Drives the "elapsed
+  // Ns" readout in the in-flight indicator. Refreshed once per second
+  // by `nowTick` so the seconds counter ticks visibly even between
+  // SSE deltas.
+  const [turnStartedAt, setTurnStartedAt] = useState(null);
+  const [nowTick, setNowTick] = useState(0);
+  useEffect(() => {
+    if (!busy) return;
+    const id = setInterval(() => setNowTick((n) => n + 1), 500);
+    return () => clearInterval(id);
+  }, [busy]);
+  useEffect(() => {
+    if (busy) {
+      if (!turnStartedAt) setTurnStartedAt(Date.now());
+    } else {
+      setTurnStartedAt(null);
+    }
+  }, [busy, turnStartedAt]);
   // Sticks to bottom only while the user is already near the bottom.
   // Once they scroll up to read older content the streaming deltas no
   // longer yank the view back. Re-armed when they scroll back to the
   // bottom on their own. 80px threshold absorbs sub-pixel rounding.
   const shouldAutoScroll = useRef(true);
+  // Ref to the scrollable feed container so we don't have to rely on
+  // a global querySelector (which would race the conditional render
+  // — `.chat-feed` only mounts when at least one message is present).
+  // The feed is now always rendered, so `feedRef.current` is set on
+  // first paint and the scroll listener attaches once.
+  const feedRef = useRef(null);
 
   // Initial snapshot — messages + busy + any modal already up.
   useEffect(() => {
@@ -1235,17 +1372,16 @@ function ChatPanel() {
         return;
       }
       if (dash.kind === "tool_start") {
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `start-${dash.id}`,
-            role: "info",
-            text: `▸ ${dash.toolName} starting…`,
-          },
-        ]);
+        // Surface the dispatched tool + its args in the in-flight row.
+        // No info-row placeholder: the InFlightRow now renders the
+        // detail (path / command / char count) and the result card
+        // appears when the `tool` event lands. Two rows for one tool
+        // call was redundant noise.
+        setActiveTool({ id: dash.id, toolName: dash.toolName, args: dash.args });
         return;
       }
       if (dash.kind === "tool") {
+        setActiveTool((cur) => (cur && cur.id === dash.id ? null : cur));
         setMessages((prev) => [
           ...prev,
           {
@@ -1259,6 +1395,9 @@ function ChatPanel() {
         return;
       }
       if (dash.kind === "warning" || dash.kind === "error" || dash.kind === "info") {
+        if (dash.kind === "error") {
+          setActiveTool(null);
+        }
         setMessages((prev) => [...prev, { id: dash.id, role: dash.kind, text: dash.text }]);
         return;
       }
@@ -1325,6 +1464,7 @@ function ChatPanel() {
       await api("/submit", { method: "POST", body: { prompt: "/new" } });
       setMessages([]);
       setStreaming(null);
+      setActiveTool(null);
       showToast("new conversation", "info");
       // Refetch to reconcile in case the slash queued an info row.
       setTimeout(async () => {
@@ -1345,6 +1485,7 @@ function ChatPanel() {
       await api("/submit", { method: "POST", body: { prompt: "/clear" } });
       setMessages([]);
       setStreaming(null);
+      setActiveTool(null);
       showToast("scrollback cleared", "info");
       setTimeout(async () => {
         try {
@@ -1379,10 +1520,22 @@ function ChatPanel() {
   // immediately. The threshold is generous enough that overshoot
   // (smooth-scroll rebound, sub-pixel rounding) doesn't accidentally
   // re-arm tracking when the user is barely above bottom.
+  //
+  // We also distinguish *user* scroll events from auto-scroll's own
+  // programmatic `scrollTop = scrollHeight` writes. Without that gate
+  // the auto-scroll effect would briefly snap to bottom, fire its
+  // own scroll event, re-set shouldAutoScroll = true, then wonder
+  // why the user complained that they couldn't scroll up — because
+  // every wheel-up was racing against the next delta's auto-snap.
+  // We mark the ref as `auto-scrolling` for one tick around the
+  // programmatic write; the listener ignores events it sees during
+  // that window.
+  const autoScrollInFlight = useRef(false);
   useEffect(() => {
-    const el = document.querySelector(".chat-feed");
+    const el = feedRef.current;
     if (!el) return;
     const onScroll = () => {
+      if (autoScrollInFlight.current) return;
       const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
       shouldAutoScroll.current = distFromBottom < 80;
     };
@@ -1394,8 +1547,16 @@ function ChatPanel() {
   // deltas no longer yank the view back; manual wheel/drag wins.
   useEffect(() => {
     if (!shouldAutoScroll.current) return;
-    const el = document.querySelector(".chat-feed");
-    if (el) el.scrollTop = el.scrollHeight;
+    const el = feedRef.current;
+    if (!el) return;
+    autoScrollInFlight.current = true;
+    el.scrollTop = el.scrollHeight;
+    // Clear the gate after the browser has had a chance to fire the
+    // resulting scroll event (microtask-ish — rAF is overkill, a 0ms
+    // setTimeout is enough to land after the synchronous handler).
+    setTimeout(() => {
+      autoScrollInFlight.current = false;
+    }, 0);
   }, [messages, streaming]);
 
   const allMessages = streaming
@@ -1440,6 +1601,7 @@ function ChatPanel() {
         setEffortLocal(o.reasoningEffort ?? null);
         setStats(o.stats ?? null);
         setOverviewModel(o.model ?? null);
+        setSemanticIndex(o.semanticIndexExists);
       } catch {
         /* swallow */
       }
@@ -1574,11 +1736,31 @@ function ChatPanel() {
       </div>
 
       ${
-        busy
-          ? html`<div class="chat-status"><span class="spinner"></span> turn in flight · <button onClick=${abort}>Abort (Esc)</button>${statusLine ? html` · <span class="muted">${statusLine}</span>` : null}</div>`
-          : statusLine
-            ? html`<div class="chat-status"><span class="muted">${statusLine}</span></div>`
-            : null
+        !busy && statusLine
+          ? html`<div class="chat-status"><span class="muted">${statusLine}</span></div>`
+          : null
+      }
+      ${
+        semanticIndex === false && !semanticBannerDismissed
+          ? html`<div class="chat-banner">
+              <span class="chat-banner-icon">≈</span>
+              <span class="chat-banner-text">
+                <strong>Semantic search isn't enabled for this project.</strong>
+                <span class="muted">
+                  Build the index once and the model can find code by meaning ("where do we handle auth failures?") instead of grep on exact strings.
+                </span>
+              </span>
+              <button
+                class="primary"
+                onClick=${() => appBus.dispatchEvent(new CustomEvent("navigate-tab", { detail: { tabId: "semantic" } }))}
+              >Build it →</button>
+              <button
+                class="chat-banner-close"
+                onClick=${() => setSemanticBannerDismissed(true)}
+                title="dismiss (don't show again)"
+              >×</button>
+            </div>`
+          : null
       }
       ${error ? html`<div class="notice err">${error}</div>` : null}
 
@@ -1592,27 +1774,33 @@ function ChatPanel() {
                 ? html`<${PlanModal} modal=${modal} onResolve=${resolveModal} />`
                 : modal.kind === "edit-review"
                   ? html`<${EditReviewModal} modal=${modal} onResolve=${resolveModal} />`
-                  : null
+                  : modal.kind === "workspace"
+                    ? html`<${WorkspaceModal} modal=${modal} onResolve=${resolveModal} />`
+                    : modal.kind === "checkpoint"
+                      ? html`<${CheckpointModal} modal=${modal} onResolve=${resolveModal} />`
+                      : modal.kind === "revision"
+                        ? html`<${RevisionModal} modal=${modal} onResolve=${resolveModal} />`
+                        : null
           : null
       }
 
-      ${
-        allMessages.length === 0
-          ? html`<div class="chat-empty">No conversation yet. Send a prompt below to begin.</div>`
-          : html`
-          <div class="chat-feed">
-            ${allMessages.map(
-              (m) => html`
-              <${ChatMessage}
-                key=${m.id}
-                msg=${m}
-                streaming=${streaming && streaming.id === m.id}
-              />
-            `,
-            )}
-          </div>
-        `
-      }
+      <div class="chat-feed" ref=${feedRef}>
+        ${
+          allMessages.length === 0
+            ? html`<div class="chat-empty">
+                No conversation yet. Send a prompt below to begin.
+              </div>`
+            : allMessages.map(
+                (m) => html`
+                  <${ChatMessage}
+                    key=${m.id}
+                    msg=${m}
+                    streaming=${streaming && streaming.id === m.id}
+                  />
+                `,
+              )
+        }
+      </div>
 
       <div class="chat-input-area">
         <textarea
@@ -1636,11 +1824,111 @@ function ChatPanel() {
         </div>
       </div>
 
+      ${
+        busy
+          ? html`<${InFlightRow}
+              streaming=${streaming}
+              activeTool=${activeTool}
+              startedAt=${turnStartedAt}
+              statusLine=${statusLine}
+              onAbort=${abort}
+              tick=${nowTick}
+            />`
+          : null
+      }
       <${ChatStatusBar} stats=${stats} model=${overviewModel} />
     </div>
   `;
 }
 
+// Summarize the dispatched tool in one line — what the user wants to
+// know is "is this hung or really doing X". Per-tool projection so a
+// write_file says "→ /path/foo (12,345 ch)" instead of just "tool is
+// running". Returns null for tools we don't have a custom shape for;
+// the row falls back to the bare tool name.
+function summarizeActiveTool(activeTool) {
+  if (!activeTool) return null;
+  const name = activeTool.toolName ?? "tool";
+  const args = parseToolArgs(activeTool.args);
+  const path = args?.path ?? args?.file_path ?? args?.filename;
+  if (name === "write_file" && path) {
+    const len = typeof args?.content === "string" ? args.content.length : null;
+    return `${name} → ${path}${len != null ? ` (${len.toLocaleString()} ch)` : ""}`;
+  }
+  if ((name === "edit_file" || name.endsWith("_edit_file")) && path) {
+    return `${name} → ${path}`;
+  }
+  if ((name === "run_command" || name === "run_background") && typeof args?.command === "string") {
+    const c = args.command;
+    return `${name} → $ ${c.length > 80 ? `${c.slice(0, 80)}…` : c}`;
+  }
+  if ((name === "read_file" || name === "list_files" || name === "search_files") && path) {
+    return `${name} → ${path}`;
+  }
+  if (path) return `${name} → ${path}`;
+  return name;
+}
+
+// Live "what's the model doing right now" strip. Lives just above the
+// ChatStatusBar so the user's eyes don't have to leave the input area
+// to see whether the turn is alive — ticks every 500ms via the parent's
+// nowTick so the seconds counter shows visible motion even when the
+// SSE stream is silent (model thinking, waiting on a tool, etc).
+function InFlightRow({ streaming, activeTool, startedAt, statusLine, onAbort, tick: _tick }) {
+  const elapsedMs = startedAt ? Date.now() - startedAt : 0;
+  const elapsed = (elapsedMs / 1000).toFixed(1);
+  const reasoningLen = streaming?.reasoning?.length ?? 0;
+  const textLen = streaming?.text?.length ?? 0;
+  // Tool-running phase wins over text/reasoning since the model is
+  // blocked on the tool — even if assistant_delta has fired we want
+  // to show the active dispatch.
+  const toolSummary = summarizeActiveTool(activeTool);
+  const phase = toolSummary
+    ? "running"
+    : reasoningLen > 0 && textLen === 0
+      ? "thinking"
+      : textLen > 0
+        ? "streaming"
+        : "waiting";
+  return html`
+    <div class="chat-inflight">
+      <span class="spinner"></span>
+      <span class="chat-inflight-phase">${phase}</span>
+      <span class="chat-inflight-sep">·</span>
+      <span class="muted">${elapsed}s</span>
+      ${
+        toolSummary
+          ? html`
+            <span class="chat-inflight-sep">·</span>
+            <span class="chat-inflight-tool" title=${toolSummary}>${toolSummary}</span>
+          `
+          : null
+      }
+      ${
+        !toolSummary && (textLen > 0 || reasoningLen > 0)
+          ? html`
+            <span class="chat-inflight-sep">·</span>
+            <span class="muted">
+              ${reasoningLen > 0 ? html`reasoning ${reasoningLen.toLocaleString()} ch` : null}
+              ${reasoningLen > 0 && textLen > 0 ? html`<span> · </span>` : null}
+              ${textLen > 0 ? html`out ${textLen.toLocaleString()} ch` : null}
+            </span>
+          `
+          : null
+      }
+      ${
+        statusLine
+          ? html`
+            <span class="chat-inflight-sep">·</span>
+            <span class="muted">${statusLine}</span>
+          `
+          : null
+      }
+      <button class="chat-inflight-abort" onClick=${onAbort}>Abort (Esc)</button>
+    </div>
+  `;
+}
+
 // ---------- Chat status bar ----------
 //
 // Mirrors the TUI's StatsPanel — turn / session cost, cache hit %,
@@ -2722,6 +3010,321 @@ function SkillsPanel() {
 
 // ---------- MCP ----------
 
+// ---------- Semantic index ----------
+
+function SemanticPanel() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState(null);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api("/semantic");
+      setData(r);
+    } catch (err) {
+      setError(err.message);
+    }
+  }, []);
+
+  // Poll fast while a job is running OR while ollama is pulling a
+  // model (the latest-line readout updates every few hundred ms during
+  // a download). Slow when idle so the panel doesn't burn network just
+  // sitting open in a tab.
+  useEffect(() => {
+    load();
+    const phase = data?.job?.phase;
+    const running = phase === "scan" || phase === "embed" || phase === "write";
+    const pulling = data?.pull?.status === "pulling";
+    const ms = running || pulling ? 1200 : 5000;
+    const id = setInterval(load, ms);
+    return () => clearInterval(id);
+  }, [load, data?.job?.phase, data?.pull?.status]);
+
+  const start = useCallback(
+    async (rebuild) => {
+      setBusy(true);
+      setError(null);
+      setInfo(null);
+      try {
+        await api("/semantic/start", { method: "POST", body: { rebuild: !!rebuild } });
+        setInfo(rebuild ? "rebuild started" : "incremental index started");
+        await load();
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [load],
+  );
+
+  const stop = useCallback(async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      await api("/semantic/stop", { method: "POST", body: {} });
+      setInfo("stopping requested — current chunk batch will finish first");
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [load]);
+
+  const startDaemon = useCallback(async () => {
+    setBusy(true);
+    setError(null);
+    setInfo("starting ollama daemon (15s timeout)…");
+    try {
+      const r = await api("/semantic/ollama/start", { method: "POST", body: {} });
+      setInfo(
+        r.ready ? "daemon is up" : "daemon didn't come up in time — check `ollama serve` manually",
+      );
+      await load();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }, [load]);
+
+  const pullModel = useCallback(
+    async (model) => {
+      setBusy(true);
+      setError(null);
+      setInfo(`pulling ${model} — this may take a few minutes on first install`);
+      try {
+        await api("/semantic/ollama/pull", { method: "POST", body: { model } });
+        await load();
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [load],
+  );
+
+  if (!data && !error) return html`<div class="boot">loading semantic status…</div>`;
+  if (error && !data) return html`<div class="notice err">${error}</div>`;
+
+  if (data && !data.attached) {
+    return html`
+      <div>
+        <div class="panel-header">
+          <h2 class="panel-title">Semantic</h2>
+          <span class="panel-subtitle">code-mode required</span>
+        </div>
+        <div class="empty">${data.reason}</div>
+      </div>
+    `;
+  }
+
+  const job = data.job;
+  const phase = job?.phase;
+  const running = phase === "scan" || phase === "embed" || phase === "write";
+  const pull = data.pull;
+  const pulling = pull?.status === "pulling";
+
+  // Tri-state Ollama check. Each level gates the next:
+  //   binary missing → user must install (we won't run a package
+  //                    manager on their behalf).
+  //   daemon down    → one-click start (`ollama serve`).
+  //   model missing  → one-click pull.
+  //   all good       → ready to index.
+  const o = data.ollama ?? {};
+  const binaryFound = o.binaryFound === true;
+  const daemonRunning = o.daemonRunning === true;
+  const modelPulled = o.modelPulled === true;
+  const modelName = o.modelName ?? "nomic-embed-text";
+  const installedModels = o.installedModels ?? [];
+  const ready = binaryFound && daemonRunning && modelPulled;
+
+  return html`
+    <div>
+      <div class="panel-header">
+        <h2 class="panel-title">Semantic</h2>
+        <span class="panel-subtitle">${data.index.exists ? "index built" : "no index yet"}</span>
+      </div>
+      ${info ? html`<div class="notice">${info}</div>` : null}
+      ${error ? html`<div class="notice err">${error}</div>` : null}
+
+      <div class="section-title">Status</div>
+      <div class="kv">
+        <div><span class="kv-key">project</span><code>${data.root}</code></div>
+        <div>
+          <span class="kv-key">ollama</span>
+          ${
+            binaryFound
+              ? daemonRunning
+                ? html`<span class="pill pill-ok">reachable</span><span class="muted" style="margin-left: 8px;">${installedModels.length} model(s)${
+                    installedModels.length > 0
+                      ? ` · ${installedModels.slice(0, 3).join(", ")}${installedModels.length > 3 ? "…" : ""}`
+                      : ""
+                  }</span>`
+                : html`<span class="pill pill-warn">daemon down</span><span class="muted" style="margin-left: 8px;">binary on PATH but not serving</span>`
+              : html`<span class="pill pill-err">not installed</span><span class="muted" style="margin-left: 8px;">${o.error ?? "ollama binary not on PATH"}</span>`
+          }
+        </div>
+        <div>
+          <span class="kv-key">model</span>
+          <code>${modelName}</code>
+          ${
+            modelPulled
+              ? html`<span class="pill pill-ok" style="margin-left: 8px;">pulled</span>`
+              : daemonRunning
+                ? html`<span class="pill pill-warn" style="margin-left: 8px;">not pulled</span>`
+                : html`<span class="pill pill-dim" style="margin-left: 8px;">unknown (daemon down)</span>`
+          }
+        </div>
+        <div>
+          <span class="kv-key">index</span>
+          ${
+            data.index.exists
+              ? html`<span class="muted">present at <code>.reasonix/semantic/</code></span>`
+              : html`<span class="muted">none — run an index to enable <code>semantic_search</code></span>`
+          }
+        </div>
+      </div>
+
+      ${
+        !binaryFound
+          ? html`
+            <div class="section-title">Install Ollama</div>
+            <div class="card" style="font-size: 13px;">
+              Reasonix doesn't run package managers for you. Install Ollama
+              first, then come back to this panel:
+              <ul style="margin: 10px 0 4px 18px; padding: 0;">
+                <li><strong>macOS / Windows:</strong> download from <a href="https://ollama.com/download" target="_blank" rel="noreferrer">ollama.com/download</a></li>
+                <li><strong>Linux:</strong> <code>curl -fsSL https://ollama.com/install.sh | sh</code></li>
+              </ul>
+              <div class="muted" style="margin-top: 8px;">After install, this panel will offer to start the daemon and pull <code>${modelName}</code> for you. Refresh after installing.</div>
+            </div>
+          `
+          : null
+      }
+
+      ${
+        binaryFound && !daemonRunning
+          ? html`
+            <div class="section-title">Daemon</div>
+            <div class="card" style="font-size: 13px;">
+              <code>ollama</code> is on your PATH but the HTTP daemon isn't reachable.
+              <div class="row" style="margin-top: 10px;">
+                <button class="primary" disabled=${busy} onClick=${startDaemon}>Start daemon</button>
+                <span class="muted" style="font-size: 12px; align-self: center;">runs <code>ollama serve</code> detached — survives Reasonix exit</span>
+              </div>
+            </div>
+          `
+          : null
+      }
+
+      ${
+        daemonRunning && !modelPulled
+          ? html`
+            <div class="section-title">Model</div>
+            <div class="card" style="font-size: 13px;">
+              <code>${modelName}</code> isn't installed yet. ${pulling ? "" : "~270 MB download on first pull."}
+              <div class="row" style="margin-top: 10px;">
+                <button
+                  class="primary"
+                  disabled=${busy || pulling}
+                  onClick=${() => pullModel(modelName)}
+                >${pulling ? "pulling…" : `Pull ${modelName}`}</button>
+              </div>
+              ${
+                pull
+                  ? html`
+                    <div class="kv" style="margin-top: 10px;">
+                      <div>
+                        <span class="kv-key">status</span>
+                        <span class=${`pill ${pull.status === "done" ? "pill-ok" : pull.status === "error" ? "pill-err" : "pill-active"}`}>${pull.status}</span>
+                        <span class="muted" style="margin-left: 8px;">${((Date.now() - pull.startedAt) / 1000).toFixed(1)}s</span>
+                      </div>
+                      ${
+                        pull.lastLine
+                          ? html`<div><span class="kv-key">last</span><code style="font-size: 11.5px;">${pull.lastLine}</code></div>`
+                          : null
+                      }
+                    </div>
+                  `
+                  : null
+              }
+            </div>
+          `
+          : null
+      }
+
+      <div class="section-title">Job</div>
+      ${job ? html`<${SemanticJobView} job=${job} running=${running} />` : html`<div class="muted">No job has run in this dashboard yet.</div>`}
+
+      <div class="row" style="margin-top: 14px;">
+        <button class="primary" disabled=${busy || running || !ready} onClick=${() => start(false)}>Index (incremental)</button>
+        <button disabled=${busy || running || !ready} onClick=${() => start(true)}>Rebuild (wipe + full)</button>
+        <button disabled=${busy || !running} onClick=${stop}>Stop</button>
+      </div>
+    </div>
+  `;
+}
+
+function SemanticJobView({ job, running }) {
+  const phaseLabel =
+    {
+      scan: "scanning files",
+      embed: "embedding chunks",
+      write: "writing index",
+      done: "done",
+      error: "error",
+    }[job.phase] ?? job.phase;
+  const total = job.chunksTotal ?? 0;
+  const doneN = job.chunksDone ?? 0;
+  const ratio = total > 0 ? Math.min(1, doneN / total) : 0;
+  const elapsed = ((Date.now() - job.startedAt) / 1000).toFixed(1);
+
+  return html`
+    <div class="kv">
+      <div><span class="kv-key">phase</span>
+        <span class=${`pill ${job.phase === "error" ? "pill-err" : running ? "pill-active" : "pill-dim"}`}>${phaseLabel}</span>
+        ${job.aborted ? html`<span class="pill pill-warn" style="margin-left: 6px;">stopping</span>` : null}
+        <span class="muted" style="margin-left: 8px;">${elapsed}s</span>
+      </div>
+      ${
+        job.filesScanned !== null && job.filesScanned !== undefined
+          ? html`<div><span class="kv-key">files</span>scanned ${job.filesScanned}${
+              job.filesChanged != null ? ` · changed ${job.filesChanged}` : ""
+            }${job.filesSkipped ? ` · skipped ${job.filesSkipped}` : ""}</div>`
+          : null
+      }
+      ${
+        total > 0
+          ? html`
+            <div>
+              <span class="kv-key">chunks</span>${doneN} / ${total} (${(ratio * 100).toFixed(0)}%)
+            </div>
+            <div class="bar" style="margin-top: 4px;">
+              <div class="fill" style=${`width: ${(ratio * 100).toFixed(1)}%; background: var(--primary);`}></div>
+            </div>
+          `
+          : null
+      }
+      ${
+        job.error
+          ? html`<div><span class="kv-key">error</span><span class="err">${job.error}</span></div>`
+          : null
+      }
+      ${
+        job.result
+          ? html`<div><span class="kv-key">result</span>added ${job.result.chunksAdded} · removed ${job.result.chunksRemoved}${
+              job.result.chunksSkipped ? ` · failed ${job.result.chunksSkipped}` : ""
+            } · ${(job.result.durationMs / 1000).toFixed(1)}s</div>`
+          : null
+      }
+    </div>
+  `;
+}
+
 function McpPanel() {
   const [data, setData] = useState(null);
   const [specs, setSpecs] = useState(null);
@@ -3518,6 +4121,14 @@ const TABS = [
     ready: true,
     badge: null,
   },
+  {
+    id: "semantic",
+    name: "Semantic",
+    glyph: "≈",
+    panel: () => html`<${SemanticPanel} />`,
+    ready: true,
+    badge: null,
+  },
   {
     id: "mcp",
     name: "MCP",
@@ -3768,23 +4379,41 @@ function ErrorOverlay() {
 
 // Preact ErrorBoundary — catches render-time exceptions in the App
 // subtree and dispatches them to the error overlay instead of leaving
-// the user with a blank white page. After capturing, render falls
-// back to a minimal "reload" prompt; the overlay handles the rest.
+// the user with a blank white page. Recovers automatically the first
+// few times so transient hiccups don't strand the user; if a panel
+// throws repeatedly we stop the loop and render a manual "Try again"
+// fallback so the page never looks blank-but-ticking.
 class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
-    this.state = { caught: false };
+    this.state = { caught: false, lastErr: null, attempts: 0 };
   }
-  static getDerivedStateFromError() {
-    return { caught: true };
+  static getDerivedStateFromError(error) {
+    return { caught: true, lastErr: error };
   }
   componentDidCatch(error, info) {
     reportAppError(error, "render", info?.componentStack ?? "");
-    // Recover after a tick — overlay handles the user's next move.
-    setTimeout(() => this.setState({ caught: false }), 100);
+    const attempts = (this.state.attempts ?? 0) + 1;
+    if (attempts >= 3) {
+      // Stop the auto-recover loop — the panel is genuinely broken,
+      // surface a "Try again" button instead of flickering.
+      this.setState({ attempts });
+      return;
+    }
+    setTimeout(() => this.setState({ caught: false, attempts }), 100);
   }
   render() {
     if (this.state.caught) {
+      if ((this.state.attempts ?? 0) >= 3) {
+        return html`
+          <div class="boot" style="flex-direction: column; gap: 12px;">
+            <div>this panel keeps crashing — the error overlay has the trace.</div>
+            <button onClick=${() => this.setState({ caught: false, attempts: 0 })}>
+              Try again
+            </button>
+          </div>
+        `;
+      }
       return html`<div class="boot">recovering…</div>`;
     }
     return this.props.children;