@oharness/server 0.9.2 → 0.10.0

package/dist/page/client/events.js

@@ -7,6 +7,51 @@
 export const EVENTS = String.raw `
 // --- events ---------------------------------------------------------------
 
+/**
+ * Streamed text, revealed at a steady pace rather than as it arrives.
+ *
+ * Models send text in pieces of very different sizes: measured through the
+ * official plan, GPT-5.6 Sol came as ~5 characters a piece, many to the same
+ * millisecond, and Claude Opus 5.5 as four pieces of ~260 characters some
+ * 280ms apart. Drawn as received, a reply lurched a sentence at a time. Each
+ * frame now shows a share of what is still waiting — a tenth of it, at least
+ * two characters — so a large piece unrolls over a few hundred milliseconds
+ * and a trickle is shown as it comes. Nothing is held back for long: the
+ * backlog is never more than a fraction of a second behind.
+ *
+ * A stream the pane has finished with (P.streaming cleared) still runs to the
+ * end of its text here; it only ever shows what it was sent.
+ */
+const streamsRevealing = new Set();
+let streamFrame = 0;
+
+function revealStream(stream) {
+  streamsRevealing.add(stream);
+  if (!streamFrame) streamFrame = requestAnimationFrame(revealStreams);
+}
+
+function revealStreams() {
+  streamFrame = 0;
+  for (const stream of streamsRevealing) {
+    const waiting = stream.text.length - stream.shown;
+    if (waiting <= 0) {
+      streamsRevealing.delete(stream);
+      continue;
+    }
+    let next = Math.min(stream.text.length, stream.shown + Math.max(2, Math.ceil(waiting / 10)));
+    // Never between the halves of a surrogate pair: an emoji cut in two draws
+    // as a box for a frame.
+    const code = stream.text.charCodeAt(next - 1);
+    if (code >= 0xd800 && code <= 0xdbff && next < stream.text.length) next++;
+    stream.shown = next;
+    // The whole block again: markdown is not incremental, and a half fence
+    // rendered as literal text then rewritten looks worse than this.
+    stream.node.replaceChildren(renderMarkdown(stream.text.slice(0, next)));
+  }
+  follow();
+  if (streamsRevealing.size) streamFrame = requestAnimationFrame(revealStreams);
+}
+
 const events = new EventSource(q("/events"));
 events.onerror = () => { ctxText.textContent = "offline"; };
 events.onmessage = (message) => {
@@ -44,15 +89,27 @@ events.onmessage = (message) => {
       break;
     }
 
+    // Background tasks ended and their results were just read in. When that
+    // is what started the turn — nobody typed anything — this is also the
+    // only sign the conversation is working again.
+    // A background task started, moved on or ended.
+    case "tasks": tasksChanged(event.session, event.tasks); break;
+    case "task_notification":
+      P.turn = null;
+      taskCard(event.tasks || []);
+      if (!P.busy) {
+        startWorking(t("work.thinking"));
+        setBusy(true);
+      }
+      break;
+
     case "text_delta":
       sealThinking();
       stopWorking();
-      if (!P.streaming) { P.streaming = { text: "", node: el("div") }; assistantTurn().appendChild(P.streaming.node); }
+      if (!P.streaming) { P.streaming = { text: "", shown: 0, node: el("div") }; assistantTurn().appendChild(P.streaming.node); }
       P.streaming.text += event.text;
-      // Re-render the whole block: markdown is not incremental, and a half
-      // fence rendered as literal text then rewritten looks worse than this.
-      P.streaming.node.replaceChildren(renderMarkdown(P.streaming.text));
-      follow();
+      // Not drawn here: revealed at a steady pace by revealStreams.
+      revealStream(P.streaming);
       break;
 
     case "thinking_delta": {
@@ -88,6 +145,12 @@ events.onmessage = (message) => {
       break;
 
     case "assistant_message": P.streaming = null; break;
+    // After the turn ended: under its last reply, not a new turn of its own.
+    case "turn_shots": {
+      const replies = P.node.querySelectorAll(":scope > .turn.assistant");
+      turnShots(replies[replies.length - 1], event.shots);
+      break;
+    }
     case "turn_start": dropPendingTools(); break;
     // A session named from its first prompt, or renamed: the tab and the
     // sidebar row both carry the name.
@@ -162,6 +225,8 @@ events.onmessage = (message) => {
     }
 
     case "permission_request": showAsk(event); break;
+    case "remote_pair_request": showPairing(event); break;
+    case "remote_pair_closed": closePairing(event.id); break;
     case "question_request": questionCard(event); break;
     case "question_result": settleQuestion(event); break;
     // Sent once per (re)connect, after the replay: a card this page still
@@ -177,7 +242,10 @@ events.onmessage = (message) => {
       closeQuestion(event.id);
       break;
     case "permission_result":
-      if (!event.allowed) addNotice("denied: " + (event.reason || ""), "err");
+      // Plan mode holding a step back is the mode working, not something
+      // going wrong: said plainly, and not in the colour of an error.
+      if (!event.allowed && event.plan) addNotice(t("plan.held"), "notice");
+      else if (!event.allowed) addNotice("denied: " + (event.reason || ""), "err");
       else if (event.remembered) addNotice("remembered: " + event.remembered);
       break;
 
@@ -200,6 +268,18 @@ events.onmessage = (message) => {
       void loadSessions();
       if (shownPanel === "nav-routines") void showRoutines();
       break;
+    // A worktree came or went: which session directories nest under which
+    // project is part of the project list.
+    case "projects":
+      void loadProjects();
+      break;
+    // A routine run started or ended, here or from the clock.
+    case "routines":
+      if (shownPanel === "nav-routines") void showRoutines();
+      break;
+    case "routine_activity":
+      if (shownPanel === "nav-routines") paintRoutineActivity(event);
+      break;
     case "error":
       P.streaming = null;
       // A 402 is not an error to print, it is a screen to open. What the
@@ -242,10 +322,17 @@ events.onmessage = (message) => {
     }
     case "idle":
       applyState(event.state);
-      renderChanges(event.changes);
+      // The bar above the transcript is the tab on screen's; a turn ending in
+      // a background tab (a worktree session, a second conversation) must not
+      // put its files there.
+      if (!event.session || event.session === activeId) renderChanges(event.changes);
       void loadSessions();
       break;
     case "state": applyState(event.state); break;
+    // What a conversation is doing on the computer, for the live view.
+    case "computer": computerEvent(event.session, event.event); break;
+    // The project's starters, written in the background after the fixed three.
+    case "starters": startersArrived(event); break;
     case "connectors_changed":
       if (authorizing === event.connector) authorizing = null;
       offer = { connectors: event.connectors, plugins: event.plugins || [], skills: event.skills || [] };

package/dist/page/client/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/page/client/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwR/B,CAAC"}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/page/client/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+W/B,CAAC"}

package/dist/page/client/files.js

@@ -15,6 +15,7 @@ const explorer = document.getElementById("explorer");
 const explorerTitle = document.getElementById("explorer-title");
 const explorerTree = document.getElementById("explorer-tree");
 const explorerView = document.getElementById("explorer-view");
+const explorerQuery = document.getElementById("explorer-q");
 
 /** The project folder on show, absolute; null while the pane has never opened. */
 let explorerCwd = null;
@@ -65,6 +66,8 @@ async function openExplorer(cwd, force) {
     explorerChildren = new Map();
     explorerSelected = null;
     explorerSource = false;
+    explorerQuery.value = "";
+    explorerHits = null;
   }
   explorerTitle.textContent = projectName(cwd);
   explorerTitle.title = cwd;
@@ -96,6 +99,7 @@ async function explorerLoad() {
     else explorerChildren.set(dir, body.entries || []);
   });
   paintExplorerTree();
+  if (explorerQuery.value.trim()) void explorerSearch();
   if (explorerSelected) await explorerShow(explorerSelected);
   else explorerView.replaceChildren(el("p", "muted explorer-hint", t("files.pick")));
 }
@@ -125,6 +129,7 @@ async function explorerToggleDir(dir) {
 }
 
 function paintExplorerTree() {
+  if (explorerHits) return paintExplorerHits();
   const scroll = explorerTree.scrollTop;
   explorerTree.replaceChildren();
   const root = explorerChildren.get("") || [];
@@ -285,6 +290,86 @@ function tabProjectButtons(id, cwd) {
   return [files, term];
 }
 
+// --- searching the tree ------------------------------------------------------
+// A name typed here is looked for through the whole project, not only the
+// folders unfolded; while there is one, the matches stand in for the tree and
+// clearing it brings the tree back exactly as it was.
+
+/** The matches on show, or null while the tree is. */
+let explorerHits = null;
+let explorerSearchTimer = 0;
+let explorerSearchSeq = 0;
+
+async function explorerSearch() {
+  const query = explorerQuery.value.trim();
+  const seq = ++explorerSearchSeq;
+  if (!query) {
+    explorerHits = null;
+    return paintExplorerTree();
+  }
+  const cwd = explorerCwd;
+  const body = await getJson("/files/search?cwd=" + encodeURIComponent(cwd) + "&q=" + encodeURIComponent(query));
+  if (seq !== explorerSearchSeq || cwd !== explorerCwd) return;
+  explorerHits = body.error ? [] : (body.entries || []);
+  explorerTree.scrollTop = 0;
+  paintExplorerTree();
+}
+
+function paintExplorerHits() {
+  explorerTree.replaceChildren();
+  if (!explorerHits.length) return void explorerTree.appendChild(el("p", "muted explorer-hint", t("files.noMatch")));
+  for (const entry of explorerHits) {
+    const row = el("button", "explorer-row" + (entry.path === explorerSelected ? " on" : ""));
+    row.type = "button";
+    row.setAttribute("role", "treeitem");
+    row.title = entry.path;
+    row.appendChild(svgIcon(entry.dir ? "folder" : "file"));
+    row.appendChild(el("span", "explorer-name", entry.name));
+    const parent = entry.path.slice(0, Math.max(0, entry.path.length - entry.name.length - 1));
+    if (parent) row.appendChild(el("span", "explorer-dir", parent));
+    row.addEventListener("click", () => void (entry.dir ? explorerReveal(entry.path) : explorerShow(entry.path)));
+    explorerTree.appendChild(row);
+  }
+}
+
+/** A folder picked from the matches: back to the tree, unfolded down to it. */
+async function explorerReveal(dir) {
+  const parts = dir.split("/");
+  const dirs = explorerDirs();
+  for (let i = 1; i <= parts.length; i++) {
+    const at = parts.slice(0, i).join("/");
+    dirs.add(at);
+    if (!explorerChildren.has(at)) {
+      const body = await explorerFetch(at);
+      if (body.error) { dirs.delete(at); break; }
+      explorerChildren.set(at, body.entries || []);
+    }
+  }
+  explorerQuery.value = "";
+  explorerHits = null;
+  explorerSearchSeq++;
+  paintExplorerTree();
+  const row = [...explorerTree.children].find((node) => node.title === dir);
+  if (row) row.scrollIntoView({ block: "nearest" });
+}
+
+explorerQuery.addEventListener("input", () => {
+  clearTimeout(explorerSearchTimer);
+  explorerSearchTimer = setTimeout(() => void explorerSearch(), 120);
+});
+explorerQuery.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && explorerQuery.value) {
+    event.preventDefault();
+    event.stopPropagation();
+    explorerQuery.value = "";
+    void explorerSearch();
+  } else if (event.key === "Enter" && explorerHits && explorerHits.length) {
+    event.preventDefault();
+    const first = explorerHits[0];
+    void (first.dir ? explorerReveal(first.path) : explorerShow(first.path));
+  }
+});
+
 document.getElementById("explorer-close").addEventListener("click", closeExplorer);
 document.getElementById("explorer-refresh").addEventListener("click", () => void explorerLoad());
 document.getElementById("explorer-terminal").addEventListener("click", () => void openTerminalIn(explorerCwd, true));
@@ -398,7 +483,7 @@ let explorerTreeDragged;
 dragHandle(explorerSplit, {
   get axis() { return isPhone() ? "y" : "x"; },
   start: () => {
-    const rect = explorerTree.getBoundingClientRect();
+    const rect = document.getElementById("explorer-side").getBoundingClientRect();
     return isPhone() ? rect.height : rect.width;
   },
   move: (dx, dy, start) => { explorerTreeDragged = explorerSetTree(start + (isPhone() ? dy : dx)); },

package/dist/page/client/files.js.map

@@ -1 +1 @@
-{"version":3,"file":"files.js","sourceRoot":"","sources":["../../../src/page/client/files.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoZ9B,CAAC"}
+{"version":3,"file":"files.js","sourceRoot":"","sources":["../../../src/page/client/files.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAye9B,CAAC"}

package/dist/page/client/index.js

@@ -5,12 +5,14 @@ import { STATE } from "./state.js";
 import { EVENTS } from "./events.js";
 import { DIALOGS } from "./dialogs.js";
 import { COMPOSER } from "./composer.js";
+import { TASKS } from "./tasks.js";
 import { ARTIFACTS } from "./artifacts.js";
 import { ACCOUNT } from "./account.js";
 import { ROUTINES } from "./routines.js";
 import { USAGE } from "./usage.js";
 import { PANELS } from "./panels.js";
 import { BROWSER } from "./browser.js";
+import { COMPUTER } from "./computer.js";
 import { FILES } from "./files.js";
 import { TERMINAL } from "./terminal.js";
 import { SHELL } from "./shell.js";
@@ -37,6 +39,7 @@ export const APP_SCRIPT = [
     EVENTS,
     DIALOGS,
     COMPOSER,
+    TASKS,
     ARTIFACTS,
     ACCOUNT,
     ROUTINES,
@@ -45,6 +48,7 @@ export const APP_SCRIPT = [
     FILES,
     TERMINAL,
     BROWSER,
+    COMPUTER,
     SHELL,
 ].join("") + "\n";
 //# sourceMappingURL=index.js.map

package/dist/page/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/page/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB;IACA,IAAI;IACJ,OAAO;IACP,UAAU;IACV,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,SAAS;IACT,OAAO;IACP,QAAQ;IACR,KAAK;IACL,MAAM;IACN,KAAK;IACL,QAAQ;IACR,OAAO;IACP,KAAK;CACJ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/page/client/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB;IACA,IAAI;IACJ,OAAO;IACP,UAAU;IACV,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,KAAK;IACL,SAAS;IACT,OAAO;IACP,QAAQ;IACR,KAAK;IACL,MAAM;IACN,KAAK;IACL,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,KAAK;CACJ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC"}

package/dist/page/client/panels.js

@@ -168,7 +168,7 @@ async function refreshRoutineCount() {
 }
 
 /** Sidebar entries that open a view of their own rather than a conversation. */
-const PANEL_NAV = new Set(["nav-artifacts", "nav-sessions", "nav-models", "nav-routines", "nav-settings"]);
+const PANEL_NAV = new Set(["nav-artifacts", "nav-sessions", "nav-usage", "nav-models", "nav-routines", "nav-settings"]);
 const pluginPages = new Map();
 async function refreshPluginPages() {
   const session = activeId;
@@ -599,12 +599,12 @@ async function showMemoryPage(id) {
  * Panels reached from a row inside another panel rather than from the sidebar.
  *
  * A full page, drawn where Models and Routines are drawn, but without a
- * permanent destination in the sidebar: usage is looked at now and then, and a
- * row in the sidebar for it would be a standing invitation to a page most
- * sessions have no reason to open. It keeps the row it came from lit, so the
- * sidebar still says where in the app this is.
+ * permanent destination in the sidebar. It keeps the row it came from lit, so
+ * the sidebar still says where in the app this is. Usage is the exception that
+ * has a row of its own on the rail as well as Settings', and lights that one
+ * whichever way it was reached.
  */
-const SUB_PANELS = { usage: "nav-settings", audit: "nav-settings", permissions: "nav-settings" };
+const SUB_PANELS = { usage: "nav-usage", audit: "nav-settings", permissions: "nav-settings" };
 
 /** Which panel the panel view is currently showing, sub-panels included. */
 let shownPanel = null;
@@ -629,6 +629,8 @@ function setNav(active) {
   document.body.classList.toggle("panelled", showing);
   log.hidden = showing;
   panelView.hidden = !showing;
+  if (showing) pageTab = lit;
+  paintTabs();
   if (showing) {
     // The diff pane belongs to the conversation, not to a settings page.
     review.classList.remove("open");
@@ -650,6 +652,10 @@ document.getElementById("nav-sessions").addEventListener("click", () => {
   setNav("nav-sessions");
   void showUsageSessions();
 });
+document.getElementById("nav-usage").addEventListener("click", () => {
+  setNav("usage");
+  void showUsage();
+});
 document.getElementById("nav-routines").addEventListener("click", () => {
   setNav("nav-routines");
   void showRoutines();

package/dist/page/client/panels.js.map

@@ -1 +1 @@
-{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../../src/page/client/panels.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+oB/B,CAAC"}
+{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../../src/page/client/panels.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqpB/B,CAAC"}