@a-t-h-i/bot-lobby 0.6.58 → 0.6.59

package/THIRD_PARTY_NOTICES.md

@@ -4,12 +4,13 @@
 
 The web UI's look (colours, radii, shadows, control and dialog styles, the
 sidebar rail, the chat rows, the work log, the composer (its surface, footer controls and send button), the select
-fields and drop-down lists, the loading and status animations and the
-built-in colour themes), and the third-party harness support (the model
+fields and drop-down lists, the loading and status animations, the code
+viewer with its diff mode and the built-in colour themes), and the third-party harness support (the model
 manifest, CLI flags, prompt injection and ACP handling behind Settings >
 Harnesses), is adapted from T3 Code,
 https://github.com/pingdotgg/t3code. No T3 Code package is a
-dependency; the styles and markup below were ported into this repository and
+dependency (the code viewer uses the same diff and highlighting library T3
+Code does, `@pierre/diffs`, as an ordinary npm dependency); the styles and markup below were ported into this repository and
 rewired to bot-lobby's own data layer. Each adapted file starts with a comment
 naming the file it came from.
 
@@ -38,6 +39,9 @@ naming the file it came from.
 | `webui/src/app/Composer.tsx` | `apps/web/src/components/chat/ComposerSurface.tsx`, `ChatComposer.tsx`, `ComposerPrimaryActions.tsx`, `ComposerControl.tsx` |
 | `webui/src/app/composer/ComposerCommandMenu.tsx` | `apps/web/src/components/chat/ComposerCommandMenu.tsx`, `ComposerBanner.tsx` (the attached drawer surface), `composer-logic.ts` (the `/` and `@` trigger) |
 | `webui/src/app/TerminalDrawer.tsx` | `apps/web/src/components/ThreadTerminalDrawer.tsx` (the drawer, its floating toolbar and terminal list) |
+| `webui/src/app/code/CodeViewer.tsx` | `apps/web/src/components/DiffPanel.tsx`, `DiffPanelShell.tsx` (diff layout and wrap toggles), `components/diffs/DiffFileTree.tsx` (changed files list), `components/files/FilePreviewPanel.tsx` (file header) |
+| `webui/src/app/code/CodeSurface.tsx` | `apps/web/src/components/files/FilePreviewPanel.tsx` (`EditableFileSurface`), `components/files/ReadOnlySourcePreview.tsx`, `components/DiffPanel.tsx` |
+| `webui/src/app/code/codeRendering.ts` | `apps/web/src/lib/diffRendering.ts` (`DIFF_SURFACE_THEME_UNSAFE_CSS`, `resolveDiffThemeName`), `lib/syntaxHighlighting.ts` (`PREFERRED_HIGHLIGHTER`), `components/diffs/StyledDiffCodeView.tsx`, `components/files/fileSurfaceChrome.tsx` |
 | `webui/src/tabs/lobby/InlineActivity.tsx` | `apps/web/src/components/chat/WorkLog.tsx` |
 | `src/webui/palette-core.ts` (the built-in themes) | `packages/shared/src/themePalettes.ts` (Blossom is their T3 Chat theme, renamed) |
 | `src/harness/model-manifest.json` (copied as is) | `apps/server/src/provider/model-manifest.json` |
@@ -88,3 +92,12 @@ Jakarta Sans Project Authors), Figtree (The Figtree Project Authors), Outfit
 Grotesk (The Space Grotesk Project Authors), Source Sans 3 and Source Code Pro
 (Adobe), Fira Code (The Fira Code Project Authors) and Roboto Mono (The Roboto
 Mono Project Authors).
+
+## Code viewer libraries
+
+The code viewer's chunks in `webui/dist/assets` bundle `@pierre/diffs`,
+`@pierre/theming` and `@pierre/theme` (The Pierre Computer Company, Apache
+License 2.0, https://www.apache.org/licenses/LICENSE-2.0), Shiki and its
+grammars (`shiki`, `@shikijs/*`, Pine Wu and Anthony Fu, MIT; each grammar
+keeps its own licence, listed in `@shikijs/langs`) and `diff` (Kevin Decker,
+BSD 3-Clause).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-t-h-i/bot-lobby",
-  "version": "0.6.58",
+  "version": "0.6.59",
   "description": "Structured multi-agent software engineering orchestrator for Pi",
   "type": "module",
   "license": "Apache-2.0",
@@ -73,7 +73,12 @@
     "@fontsource-variable/source-code-pro": "^5.3.1",
     "@fontsource-variable/source-sans-3": "^5.3.1",
     "@fontsource-variable/space-grotesk": "^5.3.0",
+    "@pierre/diffs": "^1.5.2",
     "@playwright/test": "1.62.0",
+    "@shikijs/core": "^4.5.0",
+    "@shikijs/engine-javascript": "^4.5.0",
+    "@shikijs/engine-oniguruma": "^4.5.0",
+    "@shikijs/langs": "^4.5.0",
     "@tailwindcss/vite": "4.3.3",
     "@types/node": "^22.10.0",
     "@types/react": "19.3.0",

package/src/lobby/feed.ts

@@ -133,6 +133,11 @@ export class LobbyFeed {
     if (this.settle(undefined, key, isError ? "error" : undefined)) this.touch();
   }
 
+  /** Settle every step `source` still has open (a turn that ended without closing its tool calls). */
+  endAll(source: string): void {
+    if (this.settle(source, undefined)) this.touch();
+  }
+
   /** The next step of an agent that reports one step at a time: the previous one settles. */
   step(source: string, text: string, key: string, at = Date.now()): void {
     this.settle(undefined, key);
@@ -365,11 +370,16 @@ export function chatText(role: "user" | "assistant", text: string): Array<{ role
     const request = /\nRequest: ([\s\S]*?)(?:\nState: |$)/.exec(body)?.[1]?.trim();
     return [{ role: "note", text: `task started · ${kickoff[2]}` }, ...(request ? [{ role: "you" as const, text: request }] : [])];
   }
+  // Auto mode's nudge to keep going (pi/owner.ts autoNudge) shows as one short line.
+  if (/^Auto mode: \S+ is \S+\. Keep driving it to completion/.test(body)) return [{ role: "note", text: AUTO_NOTE }];
   const comment = /^The user left (?:a comment|\d+ comments) on (the approved plan|the proposal) of (\S+) from the lobby:/.exec(body);
   if (comment) return [{ role: "note", text: `your comment on ${comment[1]} went to the oracle` }];
   return [{ role: "you", text: body }];
 }
 
+/** What the conversation shows where auto mode kept the oracle going. */
+export const AUTO_NOTE = "auto mode";
+
 /** The session entry bot-lobby leaves where the oracle's context starts over (see pi/fresh-context.ts). */
 export const CONTEXT_MARK = "bot-lobby-context";
 

package/src/lobby/keys.ts

@@ -13,6 +13,7 @@ export const LOBBY_ACTIONS = {
   activity: { key: "alt+a", help: "open or fold every step in the Lobby conversation" },
   thinking: { key: "alt+t", help: "show or hide Thinking on the Lobby" },
   terminal: { key: "ctrl+`", help: "show or hide the terminal" },
+  code: { key: "alt+e", help: "open or close the code viewer: changed files, diffs and editing" },
   nextTab: { key: "alt+]", help: "next tab" },
   prevTab: { key: "alt+[", help: "previous tab" },
 } as const;

package/src/lobby/runtime.ts

@@ -195,6 +195,7 @@ export function startLobbyService(pi: ExtensionAPI, ctx: ExtensionContext, confi
     if (event.kind === "comments") lobbyFeed.log("LOBBY", `passed ${event.count} plan comment${event.count === 1 ? "" : "s"} on ${event.taskId} to the oracle`, "info");
     else if (event.kind === "inbox" || event.kind === "messages") lobbyFeed.log("LOBBY", `passed ${event.count} message${event.count === 1 ? "" : "s"} from another session to the oracle`, "info");
     else if (event.kind === "auto") lobbyFeed.log("LOBBY", `auto mode ${event.on ? "on" : "off"} for ${event.taskId}`, event.on ? "success" : "info");
+    else if (event.kind === "held") lobbyFeed.log("LOBBY", `auto mode: you stopped the oracle on ${event.taskId}; it waits for your next message`, "info");
     else if (event.kind === "nudge") lobbyFeed.log("LOBBY", `auto mode: keeping the oracle going on ${event.taskId}`, "info");
     else lobbyFeed.log("LOBBY", `auto mode: no progress on ${event.taskId} — it needs you`, "warning");
   });
@@ -333,6 +334,9 @@ export function registerLobbyEvents(pi: ExtensionAPI, configDir: string): void {
     const finished = turn;
     turn = undefined;
     lobbyFeed.replyEnd();
+    // A tool call cut off by a stop or a steer never ends on its own; the turn's end closes it.
+    lobbyFeed.endAll("MASTER");
+    lobbyTopics.bump("status");
     const taskId = finished?.taskId ?? currentZenTask()?.id;
     if (!finished || !taskId || !runtime) return;
     appendMetrics(runtime.root, configDir, [{
@@ -352,6 +356,10 @@ export function registerLobbyEvents(pi: ExtensionAPI, configDir: string): void {
       taskId,
     }]);
     lobbyTopics.bump("metrics");
+  });
+  // pi is idle only once the run has settled (after agent_end, retries and continuations): the page's busy flag rereads then.
+  pi.on("agent_settled", () => {
+    lobbyFeed.endAll("MASTER");
     lobbyTopics.bump("status");
   });
 }

package/src/pi/owner.ts

@@ -32,7 +32,8 @@ export type OwnerEvent =
   | { kind: "messages"; count: number }
   | { kind: "auto"; taskId: string; on: boolean }
   | { kind: "nudge"; taskId: string }
-  | { kind: "stalled"; taskId: string };
+  | { kind: "stalled"; taskId: string }
+  | { kind: "held"; taskId: string };
 
 interface Owner {
   pi: ExtensionAPI;
@@ -43,6 +44,8 @@ interface Owner {
   configDir: string;
   timer?: ReturnType<typeof setInterval>;
   auto?: AutoTrack;
+  /** The user stopped the oracle: auto mode waits until they start a turn again or switch it. */
+  held?: boolean;
   /** The session's task as this tick read it: one read serves the whole tick. */
   tick?: { task: Task | undefined };
 }
@@ -177,7 +180,7 @@ export function driveAuto(): boolean {
     state.auto = undefined;
     return false;
   }
-  if (!state.ctx.isIdle()) return false;
+  if (state.held || !state.ctx.isIdle()) return false;
   const step = autoStep(state.auto, taskFingerprint(task));
   state.auto = step.track;
   if (step.stalledNow) {
@@ -199,6 +202,7 @@ export function setAuto(root: string, configDir: string, taskId: string, on: boo
   const task = ownTask(state);
   if (task?.id !== taskId) return;
   state.auto = undefined;
+  state.held = false;
   if (on) driveAuto();
 }
 
@@ -213,6 +217,27 @@ export function toggleOwnAuto(): string {
   return on ? `auto mode on for ${task.id}: the oracle drives it to completion without asking you` : `auto mode off for ${task.id}: the oracle asks you again`;
 }
 
+/** Whether a finished turn was stopped by the user (its last reply was aborted). */
+export function stoppedTurn(messages: readonly unknown[] | undefined): boolean {
+  const last = [...(messages ?? [])].reverse().find((message) => (message as { role?: string })?.role === "assistant") as { stopReason?: string } | undefined;
+  return last?.stopReason === "aborted";
+}
+
+/**
+ * A turn ended. One the user stopped holds auto mode, so the next tick does
+ * not start the task again; any turn that starts after it (the user's next
+ * message) lets auto mode carry on.
+ */
+export function turnEnded(messages: readonly unknown[] | undefined): void {
+  const state = owner;
+  if (!state || !stoppedTurn(messages)) return;
+  const task = ownTask(state);
+  if (state.held || !live(task) || !isAutoMode(state.root, state.configDir, task.id)) return;
+  state.held = true;
+  state.auto = undefined;
+  listener?.({ kind: "held", taskId: task.id });
+}
+
 /** One tick of the owner's clock. */
 export function ownerTick(): void {
   const state = owner;
@@ -260,8 +285,14 @@ export function registerOwner(pi: ExtensionAPI, configDir: string): void {
   };
   pi.on("session_start", (_event, ctx) => startOwner(pi, ctx, configDir));
   pi.on("session_shutdown", () => stop());
-  pi.on("agent_start", (_event, ctx) => track(ctx));
-  pi.on("agent_end", (_event, ctx) => track(ctx));
+  pi.on("agent_start", (_event, ctx) => {
+    track(ctx);
+    if (owner) owner.held = false;
+  });
+  pi.on("agent_end", (event, ctx) => {
+    track(ctx);
+    turnEnded((event as { messages?: readonly unknown[] }).messages);
+  });
   // Auto mode has nobody to answer a question: tell the oracle to decide instead.
   pi.on("tool_call", (event, ctx) => {
     if (event.toolName !== "ask_user_question" || !owner) return undefined;

package/src/webui/api/index.ts

@@ -25,6 +25,7 @@ import { terminalClose, terminalInput, terminalList, terminalOpen, terminalResiz
 import { MAX_INPUT_CHARS } from "../terminal.ts";
 import { themesChoose, themesGet, themesRemove, themesRename, themesSave } from "./themes.ts";
 import { noticeText, pushNotice } from "../notices.ts";
+import { codeChanges, codeRead, codeSave } from "../code.ts";
 
 /** What a handler reads besides the request body. */
 export interface ApiContext {
@@ -360,6 +361,17 @@ function buildRoutes(): Record<string, Route> {
     schema: Type.Object({ text: Type.String({ maxLength: 20_000 }) }, { additionalProperties: false }),
     run: (body, ctx) => issuesCreate(body as { text: string }, ctx),
   };
+  const codeRoot = (ctx: ApiContext) => ctx.service.projectRoot?.() ?? process.cwd();
+  const CodePath = Type.String({ minLength: 1, maxLength: 4096 });
+  routes["code.changes"] = { schema: Empty, run: (_body, ctx) => codeChanges(codeRoot(ctx)) };
+  routes["code.read"] = {
+    schema: Type.Object({ path: CodePath }, { additionalProperties: false }),
+    run: (body, ctx) => codeRead(codeRoot(ctx), (body as { path: string }).path),
+  };
+  routes["code.save"] = {
+    schema: Type.Object({ path: CodePath, contents: Type.String({ maxLength: 900_000 }), mtimeMs: Type.Optional(Type.Number()), force: Type.Optional(Type.Boolean()) }, { additionalProperties: false }),
+    run: (body, ctx) => codeSave(codeRoot(ctx), body as { path: string; contents: string; mtimeMs?: number; force?: boolean }),
+  };
   routes["settings.get"] = { schema: Empty, run: (_body, ctx) => settingsGet(ctx) };
   routes["settings.set"] = {
     // The patch's shape is the normaliser's job (`resolveConfig`); only a plain object is required here.

package/src/webui/code.ts

@@ -0,0 +1,202 @@
+/**
+ * The code viewer's files: what changed in the project's working tree against
+ * its last commit, one file's text with what the last commit held, and saving
+ * an edit. Every path is jailed to the project folder (resolved with
+ * `realpath`, so a symlink cannot reach out), `.git` is never read or
+ * written, and git runs with arguments only, never a shell.
+ */
+import { execFile } from "node:child_process";
+import { lstat, readFile, realpath, stat, writeFile } from "node:fs/promises";
+import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "node:path";
+import { HttpError } from "./api/index.ts";
+import type { CodeChange, CodeChanges, CodeFile, CodeSaved } from "./protocol.ts";
+
+/** Past this many bytes a file is not sent (the page says it is too large). */
+export const CODE_MAX_BYTES = 900_000;
+/** At most this many changed files are listed. */
+const MAX_CHANGES = 500;
+
+function git(root: string, args: string[], maxBuffer = 8_000_000): Promise<string | undefined> {
+  return new Promise((done) => {
+    execFile("git", ["-c", "core.quotepath=off", ...args], { cwd: root, maxBuffer, windowsHide: true, encoding: "utf8" }, (error, stdout) => {
+      done(error ? undefined : stdout);
+    });
+  });
+}
+
+/** Repository-relative with forward slashes, whatever the platform. */
+function slashed(path: string): string {
+  return path.split(sep).join("/");
+}
+
+function insideGitDir(rel: string): boolean {
+  return rel.split("/").includes(".git");
+}
+
+/** A path the page sent, as a project-relative path, or a refusal. Absolute paths must sit inside the project. */
+export function projectPath(root: string, path: string): string {
+  const raw = path.trim().replace(/^file:\/\//, "");
+  if (!raw || raw.includes("\0") || raw.length > 4096) throw new HttpError(400, "bad_request", "name a file in the project");
+  const full = isAbsolute(raw) ? resolve(raw) : resolve(root, raw);
+  const rel = relative(root, full);
+  if (!rel || rel.startsWith("..") || isAbsolute(rel)) throw new HttpError(403, "forbidden", "that file is outside the project");
+  if (insideGitDir(slashed(rel))) throw new HttpError(403, "forbidden", "the .git folder is not shown");
+  return slashed(rel);
+}
+
+/** The file's real path, refused when a link leads it out of the project. */
+async function jailed(root: string, rel: string): Promise<string> {
+  const realRoot = await realpath(root);
+  const target = join(realRoot, rel);
+  let real: string;
+  try {
+    real = await realpath(target);
+  } catch {
+    // A file that does not exist yet: its folder must still be inside.
+    real = join(await realpath(dirname(target)).catch(() => dirname(target)), basename(target));
+  }
+  if (real !== realRoot && !real.startsWith(realRoot + sep)) throw new HttpError(403, "forbidden", "that file is outside the project");
+  if (insideGitDir(slashed(relative(realRoot, real)))) throw new HttpError(403, "forbidden", "the .git folder is not shown");
+  return real;
+}
+
+const STATUS: Record<string, CodeChange["status"]> = { M: "modified", T: "modified", A: "added", D: "deleted", R: "renamed", C: "added", U: "modified" };
+
+/** `git status --porcelain=v1 -z` read into changes (index and working tree folded together). */
+export function parseStatus(out: string): CodeChange[] {
+  const parts = out.split("\0");
+  const changes: CodeChange[] = [];
+  for (let at = 0; at < parts.length; at++) {
+    const entry = parts[at]!;
+    if (entry.length < 4) continue;
+    const code = entry.slice(0, 2);
+    const path = entry.slice(3);
+    if (code === "??") {
+      changes.push({ path, status: "untracked" });
+      continue;
+    }
+    if (code === "!!") continue;
+    const letter = code[1] !== " " ? code[1]! : code[0]!;
+    const renamed = code[0] === "R" || code[0] === "C";
+    const from = renamed ? parts[++at] : undefined;
+    const status = code.includes("D") ? "deleted" : renamed && code[0] === "R" ? "renamed" : STATUS[letter] ?? "modified";
+    changes.push({ path, status, ...(from && status === "renamed" ? { from } : {}) });
+  }
+  return changes;
+}
+
+/** `git diff --numstat -z HEAD` as added and removed lines per path (binary files count none). */
+export function parseNumstat(out: string): Map<string, { additions: number; deletions: number }> {
+  const counts = new Map<string, { additions: number; deletions: number }>();
+  const parts = out.split("\0");
+  for (let at = 0; at < parts.length; at++) {
+    const entry = parts[at]!;
+    const match = /^(-|\d+)\t(-|\d+)\t(.*)$/.exec(entry);
+    if (!match) continue;
+    let path = match[3]!;
+    // A rename names no path on its line; the old and new paths follow.
+    if (!path) {
+      at += 2;
+      path = parts[at] ?? "";
+    }
+    counts.set(path, { additions: Number(match[1]) || 0, deletions: Number(match[2]) || 0 });
+  }
+  return counts;
+}
+
+function lineCount(text: string): number {
+  if (!text) return 0;
+  return text.split("\n").length - (text.endsWith("\n") ? 1 : 0);
+}
+
+/** Every changed file in the working tree against HEAD, with its line counts. */
+export async function codeChanges(root: string): Promise<CodeChanges> {
+  const status = await git(root, ["status", "--porcelain=v1", "-z", "--untracked-files=all"]);
+  if (status === undefined) return { git: false, files: [], truncated: false };
+  const head = await git(root, ["rev-parse", "--verify", "--quiet", "HEAD"]);
+  const numstat = head ? parseNumstat((await git(root, ["diff", "--numstat", "-z", "-M", "HEAD"])) ?? "") : new Map();
+  const all = parseStatus(status).filter((change) => !insideGitDir(change.path));
+  const files = all.slice(0, MAX_CHANGES);
+  for (const file of files) {
+    const counted = numstat.get(file.path);
+    if (counted) Object.assign(file, counted);
+    else if (file.status === "untracked" || file.status === "added") {
+      try {
+        const real = await jailed(root, file.path);
+        const info = await stat(real);
+        if (info.isFile() && info.size <= CODE_MAX_BYTES) {
+          const text = await readFile(real, "utf8");
+          if (!text.includes("\0")) Object.assign(file, { additions: lineCount(text), deletions: 0 });
+        }
+      } catch {
+        // Counts stay off for a file that cannot be read.
+      }
+    }
+  }
+  files.sort((a, b) => a.path.localeCompare(b.path));
+  return { git: true, files, truncated: all.length > files.length };
+}
+
+/** A bare file name (`zen.ts`, as the activity log says it) as the one project file it names, changed files first. */
+async function findByName(root: string, name: string): Promise<string | undefined> {
+  if (name.includes("/") || name.includes("\\")) return undefined;
+  const changed = (await codeChanges(root)).files.filter((file) => file.status !== "deleted" && basename(file.path) === name);
+  if (changed.length > 0) return changed[0]!.path;
+  const listed = await git(root, ["ls-files", "-z", "--cached", "--others", "--exclude-standard"], 32_000_000);
+  if (!listed) return undefined;
+  const matches = listed.split("\0").filter((path) => path && basename(path) === name);
+  return matches.length > 0 ? matches.sort((a, b) => a.split("/").length - b.split("/").length || a.localeCompare(b))[0] : undefined;
+}
+
+function looksBinary(buffer: Buffer): boolean {
+  return buffer.subarray(0, 8000).includes(0);
+}
+
+/** What HEAD holds for the file, or undefined when it holds nothing (a new file, no commits, no git). */
+async function headText(root: string, rel: string, from?: string): Promise<string | undefined> {
+  const out = await git(root, ["show", `HEAD:${from ?? rel}`], CODE_MAX_BYTES * 2);
+  return out === undefined || out.includes("\0") ? undefined : out;
+}
+
+/** One file to show: its text (unless binary or too large), its change, and what the last commit held. */
+export async function codeRead(root: string, path: string): Promise<CodeFile> {
+  let rel = projectPath(root, path);
+  let real = await jailed(root, rel);
+  let info = await lstat(real).then(() => stat(real)).catch(() => undefined);
+  if (!info) {
+    const found = await findByName(root, rel);
+    if (found) {
+      rel = found;
+      real = await jailed(root, rel);
+      info = await stat(real).catch(() => undefined);
+    }
+  }
+  const change = (await codeChanges(root)).files.find((file) => file.path === rel);
+  if (!info && change?.status !== "deleted") throw new HttpError(404, "not_found", `${rel} is not in the project`);
+  if (info && !info.isFile()) throw new HttpError(400, "bad_request", `${rel} is not a file`);
+  const original = change && change.status !== "untracked" && change.status !== "added" ? await headText(root, rel, change.from) : undefined;
+  const base: CodeFile = { path: rel, size: info?.size ?? 0, mtimeMs: info?.mtimeMs ?? 0, exists: Boolean(info), ...(change ? { change } : {}), ...(original !== undefined ? { original } : {}) };
+  if (!info) return { ...base, contents: "" };
+  if (info.size > CODE_MAX_BYTES) return { ...base, tooLarge: true };
+  const buffer = await readFile(real);
+  if (looksBinary(buffer)) return { ...base, binary: true };
+  return { ...base, contents: buffer.toString("utf8") };
+}
+
+/**
+ * Save the file. `mtimeMs` is when the page read it: a file changed on disk
+ * since (an agent edited it) is not overwritten unless `force` says so.
+ */
+export async function codeSave(root: string, body: { path: string; contents: string; mtimeMs?: number; force?: boolean }): Promise<CodeSaved> {
+  const rel = projectPath(root, body.path);
+  const real = await jailed(root, rel);
+  const info = await stat(real).catch(() => undefined);
+  if (!info) throw new HttpError(404, "not_found", `${rel} is no longer in the project`);
+  if (!info.isFile()) throw new HttpError(400, "bad_request", `${rel} is not a file`);
+  if (!body.force && body.mtimeMs !== undefined && Math.abs(info.mtimeMs - body.mtimeMs) > 1) {
+    throw new HttpError(409, "conflict", `${rel} changed on disk since you opened it`);
+  }
+  await writeFile(real, body.contents, "utf8");
+  const after = await stat(real);
+  return { path: rel, mtimeMs: after.mtimeMs, notice: `saved ${rel}` };
+}

package/src/webui/dev/fake-service.ts

@@ -306,6 +306,9 @@ function streamReply(service: object, feed: LobbyFeed, fixture: ScenarioFixture)
   }
 }
 
+/** How long a scripted @ mention reply takes, so the page shows the agent at work first. */
+const ANSWER_MS = 1500;
+
 /** A `LobbyService` answering from the `name` scenario's fixtures. */
 export function createFixtureService(name: string, feed = new LobbyFeed()): LobbyService {
   const fixture = loadScenario(name);
@@ -318,6 +321,8 @@ export function createFixtureService(name: string, feed = new LobbyFeed()): Lobb
   const auto = new Set(fixture.autoTasks ?? []);
   const comments = new Map<string, Array<Record<string, unknown>>>(Object.entries(fixture.taskComments ?? {}));
   const backgrounds = (fixture.backgroundSessions ?? []).map(fakeBackground);
+  // The agent other than the oracle answering an @ mention, for as long as its scripted reply takes.
+  let answering: string | undefined;
   const archivedBackgrounds: BackgroundSession[] = [];
   let sessionName = fixture.status.sessionName;
   let planning = fakePlanner(fixture.mockPlanner ?? defaultPlanner());
@@ -344,7 +349,8 @@ export function createFixtureService(name: string, feed = new LobbyFeed()): Lobb
   const service = {
     sessionId: () => fixture.status.sessionId,
     sessionName: () => sessionName,
-    masterBusy: () => fixture.status.busy,
+    masterBusy: () => fixture.status.busy || answering !== undefined,
+    answering: () => answering,
     config: () => config,
     linters: () => fixture.settings?.linters ?? [{ tool: "ESLint", folder: "", installed: true }, { tool: "Ruff", folder: "services/api", installed: false }],
     saveConfig: (next: BotLobbyConfig) => {
@@ -389,8 +395,16 @@ export function createFixtureService(name: string, feed = new LobbyFeed()): Lobb
       const mention = parseMention(text);
       if (mention && mention.agent !== "master") {
         const source = CHAT_AGENT_SOURCES[mention.agent];
+        answering = source;
         feed.say("you", mention.rest, Date.now(), { to: source });
-        const reply = setTimeout(() => feed.say("oracle", `${source} here: looked into it, and it is done.`, Date.now(), { agent: source }), 400);
+        lobbyTopics.bump("lobby");
+        lobbyTopics.bump("status");
+        const reply = setTimeout(() => {
+          answering = undefined;
+          feed.say("oracle", `${source} here: looked into it, and it is done.`, Date.now(), { agent: source });
+          lobbyTopics.bump("lobby");
+          lobbyTopics.bump("status");
+        }, ANSWER_MS);
         unref(reply);
         return undefined;
       }

package/src/webui/protocol.ts

@@ -20,6 +20,13 @@ import type { HarnessModel } from "../harness/catalog.ts";
 export interface ProjectInfo { id: string; name: string; cwd: string; port: number }
 export interface FolderListing { path: string; parent?: string; folders: Array<{ name: string; path: string }>; truncated: boolean }
 
+/** A file changed in the working tree against HEAD (`code.changes`); counts are lines, absent for binary files. */
+export interface CodeChange { path: string; status: "modified" | "added" | "deleted" | "renamed" | "untracked"; from?: string; additions?: number; deletions?: number }
+export interface CodeChanges { git: boolean; files: CodeChange[]; truncated: boolean }
+/** One file for the code viewer (`code.read`): its text unless binary or too large, its change, and HEAD's text when it had one. */
+export interface CodeFile { path: string; size: number; mtimeMs: number; exists: boolean; contents?: string; binary?: boolean; tooLarge?: boolean; change?: CodeChange; original?: string }
+export interface CodeSaved { path: string; mtimeMs: number; notice: string }
+
 export type { WebPrompt };
 export type { LobbyTopic };
 export type { DialogAnswer, SessionDialog, TaskRow, PlanComment };
@@ -610,6 +617,9 @@ export interface Api {
   "planner.previousDelete": { request: { id: string }; result: { notice: string } };
   "planner.previousOpen": { request: { id: string }; result: { notice: string } };
   "planner.save": { request: Record<string, never>; result: { notice: string } };
+  "code.changes": { request: Record<string, never>; result: CodeChanges };
+  "code.read": { request: { path: string }; result: CodeFile };
+  "code.save": { request: { path: string; contents: string; mtimeMs?: number; force?: boolean }; result: CodeSaved };
   "projects.browse": { request: { path?: string }; result: FolderListing };
   "projects.open": { request: { path: string }; result: { project: ProjectInfo } };
   "knowledge.files": { request: Record<string, never>; result: { files: KnowledgeFileInfo[]; models?: Partial<Record<KnowledgeAgentName, string>> } };

package/src/webui/static.ts

@@ -46,11 +46,14 @@ export function freshNonce(): string {
   return randomBytes(16).toString("base64");
 }
 
-/** The page loads nothing from anywhere else, so model Markdown cannot pull in a tracker or a script. */
+/**
+ * The page loads nothing from anywhere else, so model Markdown cannot pull in a tracker or a script.
+ * `'wasm-unsafe-eval'` lets the code viewer's highlighter compile its own bundled WebAssembly; it allows no `eval` of script.
+ */
 export function cspHeader(nonce: string): string {
   return [
     "default-src 'self'",
-    `script-src 'self' 'nonce-${nonce}'`,
+    `script-src 'self' 'nonce-${nonce}' 'wasm-unsafe-eval'`,
     "style-src 'self' 'unsafe-inline'",
     "img-src 'self' data: blob:",
     "connect-src 'self'",