reasonix 0.12.8 → 0.12.13

package/dashboard/app.js

@@ -1164,11 +1164,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(() => {
@@ -1379,10 +1422,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 +1449,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 +1503,7 @@ function ChatPanel() {
         setEffortLocal(o.reasoningEffort ?? null);
         setStats(o.stats ?? null);
         setOverviewModel(o.model ?? null);
+        setSemanticIndex(o.semanticIndexExists);
       } catch {
         /* swallow */
       }
@@ -1574,11 +1638,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}
 
@@ -1596,23 +1680,23 @@ function ChatPanel() {
           : 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 +1720,65 @@ function ChatPanel() {
         </div>
       </div>
 
+      ${
+        busy
+          ? html`<${InFlightRow}
+              streaming=${streaming}
+              startedAt=${turnStartedAt}
+              statusLine=${statusLine}
+              onAbort=${abort}
+              tick=${nowTick}
+            />`
+          : null
+      }
       <${ChatStatusBar} stats=${stats} model=${overviewModel} />
     </div>
   `;
 }
 
+// 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, 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;
+  const phase =
+    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>
+      ${
+        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 +2860,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 +3971,14 @@ const TABS = [
     ready: true,
     badge: null,
   },
+  {
+    id: "semantic",
+    name: "Semantic",
+    glyph: "≈",
+    panel: () => html`<${SemanticPanel} />`,
+    ready: true,
+    badge: null,
+  },
   {
     id: "mcp",
     name: "MCP",