From 9ad99129181738e7962287d60cc84172c7da5cfb Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:05:30 +0200
Subject: [PATCH 01/10] feat(chat): derive a tested row model for every
 work-log entry

Four pure modules behind the work log, with no visual change yet: type-aware
elision that keeps a basename and a command head, a per-agent row model that
reads the caller's own `description` instead of the raw payload, an output
summary sized to the output, and the fold/window/commentary/count layout.

`deriveToolActivityPresentation` and its private helpers are replaced by
`deriveActivityRow`, whose two existing cases are ported first so the swap is
provably not a regression.
---
 .../components/ToolCallContentView.tsx        |  16 +-
 .../chat/chat-bubble/lib/activityRow.test.ts  | 172 ++++++++++
 src/pages/chat/chat-bubble/lib/activityRow.ts | 302 ++++++++++++++++++
 src/pages/chat/chat-bubble/lib/elide.test.ts  |  58 ++++
 src/pages/chat/chat-bubble/lib/elide.ts       |  44 +++
 .../chat-bubble/lib/outputSummary.test.ts     |  72 +++++
 .../chat/chat-bubble/lib/outputSummary.ts     |  56 ++++
 .../chat/chat-bubble/lib/workLog.test.ts      |  26 --
 src/pages/chat/chat-bubble/lib/workLog.ts     | 163 ----------
 .../chat-bubble/lib/workLogLayout.test.ts     | 159 +++++++++
 .../chat/chat-bubble/lib/workLogLayout.ts     | 178 +++++++++++
 11 files changed, 1048 insertions(+), 198 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/lib/activityRow.test.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/activityRow.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/elide.test.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/elide.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/outputSummary.test.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/outputSummary.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/workLogLayout.ts

diff --git a/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx b/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
index 5106c5c..a30030d 100644
--- a/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
+++ b/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
@@ -1,10 +1,10 @@
+import { type ActivityKind, deriveActivityRow } from "../lib/activityRow";
 import {
 	formatPartValue,
 	getToolCallContentParts,
 	type ToolCallPart,
 } from "../lib/messageParts";
 import { getRenderPartKey } from "../lib/utils";
-import { deriveToolActivityPresentation } from "../lib/workLog";
 import ChatDisclosure from "./ChatDisclosure";
 import MessagePartView from "./MessagePartView";
 import Status from "./Status";
@@ -13,19 +13,19 @@ import ToolOutputView from "./ToolOutputView";
 export default function ToolCallContentView({ part }: { part: ToolCallPart }) {
 	const parts = getToolCallContentParts(part);
 	const locations = readToolLocations(part);
-	const presentation = deriveToolActivityPresentation(part);
+	const row = deriveActivityRow(part);
 	const hasDetails = Boolean(
 		part.output || part.arguments || parts.length || locations.length,
 	);
 	const summary = (
 		<>
 			<span
-				className={`${activityIcon(presentation.kind)} chat-work-row-icon`}
+				className={`${activityIcon(row.kind)} chat-work-row-icon`}
 				aria-hidden="true"
 			/>
 			<span className="chat-work-row-label">
-				<strong>{presentation.label}</strong>
-				{presentation.detail ? <span> · {presentation.detail}</span> : null}
+				{row.verb ? <strong>{row.verb}</strong> : null}
+				{row.object ? <span> {row.object}</span> : null}
 			</span>
 			<span className="chat-work-row-status">
 				<Status status={part.status} />
@@ -51,7 +51,7 @@ export default function ToolCallContentView({ part }: { part: ToolCallPart }) {
 			<ToolLocations locations={locations} />
 			{part.output ? (
 				<ToolOutputView
-					title={part.title || presentation.label}
+					title={part.title || row.verb || "Output"}
 					output={part.output}
 					toolArguments={part.arguments}
 				/>
@@ -71,9 +71,7 @@ export default function ToolCallContentView({ part }: { part: ToolCallPart }) {
 	);
 }
 
-function activityIcon(
-	kind: ReturnType<typeof deriveToolActivityPresentation>["kind"],
-) {
+function activityIcon(kind: ActivityKind) {
 	switch (kind) {
 		case "execute":
 			return "icon-terminal";
diff --git a/src/pages/chat/chat-bubble/lib/activityRow.test.ts b/src/pages/chat/chat-bubble/lib/activityRow.test.ts
new file mode 100644
index 0000000..8e099c8
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/activityRow.test.ts
@@ -0,0 +1,172 @@
+import { describe, expect, it } from "vitest";
+import { deriveActivityRow } from "./activityRow";
+import type { ToolCallPart } from "./messageParts";
+
+function tool(part: Partial<ToolCallPart>): ToolCallPart {
+	return { type: "tool_call", name: "tool", ...part } as ToolCallPart;
+}
+
+describe("deriveActivityRow", () => {
+	it("prefers the input description over the raw command", () => {
+		const row = deriveActivityRow(
+			tool({
+				name: "execute",
+				title: 'cd "/home/jk/devowl-wp" && git log --oneline -3',
+				arguments: JSON.stringify({
+					command: 'cd "/home/jk/devowl-wp" && git log --oneline -3',
+					description: "Check branch state",
+				}),
+				status: "completed",
+			}),
+		);
+		expect(row).toMatchObject({
+			kind: "execute",
+			verb: "Ran",
+			object: "Check branch state",
+			objectIsMono: false,
+		});
+	});
+
+	it("falls back to the first line of the command when there is no description", () => {
+		const row = deriveActivityRow(
+			tool({
+				name: "execute",
+				arguments: JSON.stringify({ command: "pnpm test\npnpm typecheck" }),
+				status: "completed",
+			}),
+		);
+		expect(row.object).toBe("pnpm test");
+		expect(row.objectIsMono).toBe(true);
+	});
+
+	it("keeps the basename for a read", () => {
+		const row = deriveActivityRow(
+			tool({
+				name: "read",
+				locations: [
+					{ path: "backends/real-commerce/.ai/concepts/adrs/04-tax-basis.md" },
+				],
+				status: "completed",
+			}),
+		);
+		expect(row.verb).toBe("Read");
+		expect(row.object).toContain("04-tax-basis.md");
+		expect(row.objectIsMono).toBe(true);
+	});
+
+	it("reads the path from the arguments when locations are absent", () => {
+		// Measured: locations is set on only 16 of 182 calls.
+		const row = deriveActivityRow(
+			tool({
+				name: "read",
+				arguments: JSON.stringify({ file_path: "src/state/acp.ts" }),
+				status: "completed",
+			}),
+		);
+		expect(row.object).toBe("src/state/acp.ts");
+	});
+
+	it("lets the title lead for the other kind and names the MCP server", () => {
+		const row = deriveActivityRow(
+			tool({
+				name: "other",
+				title: "mcp__owly__playwright__browser_take_screenshot",
+				status: "completed",
+			}),
+		);
+		expect(row.verb).toBe("Owly");
+		expect(row.object).toBe("[playwright__browser_take_screenshot]");
+	});
+
+	it("handles an MCP tool with no nested prefix", () => {
+		const row = deriveActivityRow(
+			tool({ name: "other", title: "mcp__clickup__get_task" }),
+		);
+		expect(row.verb).toBe("Clickup");
+		expect(row.object).toBe("[get_task]");
+	});
+
+	it("prefers the Claude Code description, and does not assume it elsewhere", () => {
+		const args = JSON.stringify({
+			description: "Check branch state",
+			command: "git status",
+		});
+		expect(
+			deriveActivityRow(
+				tool({ name: "execute", arguments: args }),
+				"claude-code",
+			).object,
+		).toBe("Check branch state");
+		// An agent we know nothing about must not inherit another agent's convention.
+		expect(
+			deriveActivityRow(tool({ name: "execute", arguments: args }), "gemini")
+				.object,
+		).toBe("git status");
+	});
+
+	it("leaves a non-MCP other title alone", () => {
+		const row = deriveActivityRow(
+			tool({ name: "other", title: "Load skill: superpowers:writing-plans" }),
+		);
+		expect(row.object).toBe("Load skill: superpowers:writing-plans");
+	});
+
+	it("uses the present tense while the call is running", () => {
+		const row = deriveActivityRow(
+			tool({ name: "read", status: "in_progress" }),
+		);
+		expect(row.verb).toBe("Reading");
+		expect(row.running).toBe(true);
+	});
+
+	it("flags a failure", () => {
+		const row = deriveActivityRow(tool({ name: "execute", status: "failed" }));
+		expect(row.failed).toBe(true);
+		expect(row.verb).toBe("Ran");
+	});
+
+	it("keeps the unelided value for the accessible name", () => {
+		const path =
+			"backends/real-commerce/.ai/concepts/2026-07-04 Contract-Price/adrs/04.md";
+		const row = deriveActivityRow(
+			tool({ name: "read", locations: [{ path }], status: "completed" }),
+		);
+		expect(row.objectFull).toBe(path);
+		expect(row.object).not.toBe(path);
+	});
+
+	it("never exposes raw argument JSON as the object", () => {
+		const row = deriveActivityRow(
+			tool({ name: "execute", title: '{"command":"pnpm test"}' }),
+		);
+		expect(row.object ?? "").not.toContain("{");
+	});
+
+	// Ported from the deriveToolActivityPresentation cases this replaces, so the
+	// swap is provably not a regression.
+	it("extracts a command instead of exposing raw argument JSON", () => {
+		const row = deriveActivityRow(
+			tool({
+				name: "exec_command",
+				title: '{"command":"pnpm test"}',
+				arguments: JSON.stringify({ command: "pnpm test" }),
+			}),
+		);
+		expect(row).toMatchObject({
+			kind: "execute",
+			verb: "Ran",
+			object: "pnpm test",
+		});
+	});
+
+	it("prefers the ACP location for file activity", () => {
+		const row = deriveActivityRow(
+			tool({ name: "read", locations: [{ path: "src/chat.tsx", line: 12 }] }),
+		);
+		expect(row).toMatchObject({
+			kind: "read",
+			verb: "Read",
+			object: "src/chat.tsx",
+		});
+	});
+});
diff --git a/src/pages/chat/chat-bubble/lib/activityRow.ts b/src/pages/chat/chat-bubble/lib/activityRow.ts
new file mode 100644
index 0000000..c910b2a
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/activityRow.ts
@@ -0,0 +1,302 @@
+import type { AiBackend } from "@shellular/protocol";
+import { elideCommand, elidePath } from "./elide";
+import type { ToolCallPart } from "./messageParts";
+
+export type ActivityKind =
+	| "execute"
+	| "read"
+	| "change"
+	| "search"
+	| "fetch"
+	| "think"
+	| "switch_mode"
+	| "other";
+
+export interface ActivityRowModel {
+	kind: ActivityKind;
+	/** Empty for `other`, where the title alone already carries the meaning. */
+	verb: string;
+	object?: string;
+	/**
+	 * The unelided value, for `aria-label`. Elision happens before render, so
+	 * without this a screen reader hears the shortened string too.
+	 */
+	objectFull?: string;
+	/** Render the object as monospace payload rather than as a sentence. */
+	objectIsMono: boolean;
+	running: boolean;
+	failed: boolean;
+}
+
+const VERBS: Record<ActivityKind, readonly [settled: string, running: string]> =
+	{
+		execute: ["Ran", "Running"],
+		read: ["Read", "Reading"],
+		change: ["Changed", "Changing"],
+		search: ["Searched", "Searching"],
+		fetch: ["Fetched", "Fetching"],
+		think: ["Thought", "Thinking"],
+		switch_mode: ["Switched mode", "Switching mode"],
+		other: ["", ""],
+	};
+
+/**
+ * Which argument keys name a call, per agent. `description` is Claude Code's
+ * own convention rather than an ACP field, so a *named* agent we know nothing
+ * about gets the conservative chain instead of inheriting it. A caller that
+ * names no backend at all is a different case: every call site in the app has
+ * one, and the app's primary agent is Claude Code, so that resolves here.
+ */
+const OBJECT_KEYS: Record<
+	string,
+	Partial<Record<ActivityKind, readonly string[]>>
+> = {
+	"claude-code": {
+		execute: ["description", "command", "cmd", "script"],
+		read: ["file_path", "filename", "path"],
+		change: ["file_path", "filename", "path"],
+		search: ["pattern", "query"],
+		fetch: ["url"],
+	},
+};
+
+const FALLBACK_KEYS: Partial<Record<ActivityKind, readonly string[]>> = {
+	execute: ["command", "cmd", "script"],
+	read: ["path", "file_path", "filename", "target"],
+	change: ["path", "file_path", "filename", "target"],
+	search: ["query", "pattern", "search", "needle"],
+	fetch: ["url", "uri", "href"],
+};
+
+const DEFAULT_BACKEND = "claude-code";
+
+function objectKeysFor(
+	kind: ActivityKind,
+	backend: AiBackend | undefined,
+): readonly string[] {
+	return (
+		OBJECT_KEYS[backend ?? DEFAULT_BACKEND]?.[kind] ?? FALLBACK_KEYS[kind] ?? []
+	);
+}
+
+/**
+ * One row of the work log. The object is deliberately per-kind: a command is
+ * identified by the description its caller wrote, a file by its basename, and
+ * a search by its query. Falling back to `title` for everything is what makes
+ * five consecutive reads render as five identical strings.
+ */
+export function deriveActivityRow(
+	part: ToolCallPart,
+	backend?: AiBackend,
+): ActivityRowModel {
+	const status = part.status?.toLowerCase();
+	const running = status === "pending" || status === "in_progress";
+	const failed = status === "failed" || status === "fail";
+	const kind = classifyActivityKind(part);
+	const args = parseArguments(part.arguments);
+	const [settledVerb, runningVerb] = VERBS[kind];
+	const base = {
+		kind,
+		verb: running ? runningVerb : settledVerb,
+		running,
+		failed,
+	};
+
+	switch (kind) {
+		case "execute": {
+			// The description is what the caller meant; the command is only how.
+			const match = findEntry(args, objectKeysFor(kind, backend));
+			if (match?.key === "description") {
+				return { ...base, object: match.value, objectIsMono: false };
+			}
+			const command = match?.value;
+			return {
+				...base,
+				object: command ? elideCommand(command) : safeTitle(part.title),
+				objectFull: command,
+				objectIsMono: true,
+			};
+		}
+		case "read":
+		case "change": {
+			const path =
+				readLocationPath(part) ??
+				findEntry(args, objectKeysFor(kind, backend))?.value;
+			return {
+				...base,
+				object: path ? elidePath(path) : safeTitle(part.title),
+				objectFull: path,
+				objectIsMono: true,
+			};
+		}
+		case "search": {
+			const query = findEntry(args, objectKeysFor(kind, backend))?.value;
+			return {
+				...base,
+				object: query ?? safeTitle(part.title),
+				objectFull: query,
+				objectIsMono: true,
+			};
+		}
+		case "fetch": {
+			const url = findEntry(args, objectKeysFor(kind, backend))?.value;
+			return {
+				...base,
+				object: readHost(url) ?? safeTitle(part.title),
+				objectFull: url,
+				objectIsMono: true,
+			};
+		}
+		case "think":
+			return { ...base, object: safeTitle(part.title), objectIsMono: false };
+		case "switch_mode":
+			return {
+				...base,
+				object: findEntry(args, ["mode"])?.value ?? safeTitle(part.title),
+				objectIsMono: false,
+			};
+		case "other": {
+			const mcp = readMcpTitle(part.title);
+			if (mcp) {
+				return {
+					...base,
+					verb: mcp.server,
+					object: `[${mcp.tool}]`,
+					objectIsMono: false,
+				};
+			}
+			return {
+				...base,
+				object: safeTitle(part.title) ?? humanizeToolName(part.name),
+				objectIsMono: false,
+			};
+		}
+	}
+	return assertNever(kind);
+}
+
+/** A new `ActivityKind` must fail `pnpm typecheck`, not fall through silently. */
+function assertNever(kind: never): never {
+	throw new Error(`Unhandled activity kind: ${String(kind)}`);
+}
+
+const CANONICAL_KINDS = new Set<string>(Object.keys(VERBS));
+
+/**
+ * The host writes the ACP kind into `name` (`name: t.kind ?? "tool"`), so a
+ * canonical name is already the answer and the title must not be consulted.
+ * That order matters: `mcp__owly__playwright__browser_take_screenshot` contains
+ * "browser", and scanning it would file an MCP call under `fetch`. The regex
+ * fallbacks stay for agents that send a real tool name instead of a kind.
+ */
+function classifyActivityKind(part: ToolCallPart): ActivityKind {
+	const name = part.name?.toLowerCase().trim();
+	if (name && CANONICAL_KINDS.has(name)) return name as ActivityKind;
+	const value = `${part.name ?? ""} ${part.title ?? ""}`.toLowerCase();
+	if (/switch.?mode|change.?mode/.test(value)) return "switch_mode";
+	if (/exec|bash|shell|terminal|command|powershell/.test(value))
+		return "execute";
+	if (/search|grep|ripgrep|glob|find.?file/.test(value)) return "search";
+	if (/edit|write|patch|delete|remove|move|rename|create.?file/.test(value)) {
+		return "change";
+	}
+	if (/read|open.?file|view.?file|load.?file/.test(value)) return "read";
+	if (/fetch|http|web|browser|url/.test(value)) return "fetch";
+	if (/think|reason/.test(value)) return "think";
+	return "other";
+}
+
+/**
+ * `mcp__owly__playwright__browser_take_screenshot` becomes the server as the
+ * verb and the tool verbatim in brackets: `Owly [playwright__browser_take_screenshot]`.
+ * The tool name is not prettified. It is the string a maintainer greps for, and
+ * the VS Code extension uses the same `<Server> [<tool>]` shape.
+ */
+function readMcpTitle(
+	title: string | undefined,
+): { server: string; tool: string } | null {
+	if (!title?.startsWith("mcp__")) return null;
+	const segments = title.slice("mcp__".length).split("__").filter(Boolean);
+	const server = segments.shift();
+	if (!server || segments.length === 0) return null;
+	return {
+		server: server.charAt(0).toUpperCase() + server.slice(1),
+		tool: segments.join("__"),
+	};
+}
+
+function parseArguments(value: string | undefined): unknown {
+	if (!value) return undefined;
+	try {
+		return JSON.parse(value);
+	} catch {
+		return value;
+	}
+}
+
+/**
+ * The matched key travels with the value because the caller's next decision
+ * depends on it: a `description` is a sentence, everything else is payload.
+ */
+function findEntry(
+	value: unknown,
+	keys: readonly string[],
+): { key: string; value: string } | undefined {
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		return trimmed ? { key: "", value: trimmed } : undefined;
+	}
+	if (!value || typeof value !== "object") return undefined;
+	const record = value as Record<string, unknown>;
+	for (const key of keys) {
+		const candidate = readString(record[key]);
+		if (candidate) return { key, value: candidate };
+	}
+	for (const candidate of Object.values(record)) {
+		if (candidate && typeof candidate === "object") {
+			const nested = findEntry(candidate, keys);
+			if (nested) return nested;
+		}
+	}
+	return undefined;
+}
+
+function readString(value: unknown): string | undefined {
+	return typeof value === "string" && value.trim() ? value.trim() : undefined;
+}
+
+/** A title that is serialised arguments is worse than no title at all. */
+function safeTitle(value: string | undefined): string | undefined {
+	const title = value?.trim();
+	if (!title || title.startsWith("{") || title.startsWith("["))
+		return undefined;
+	return title.split(/\r?\n/, 1)[0]?.trim() || undefined;
+}
+
+function humanizeToolName(value: string | undefined): string {
+	if (!value) return "Used tool";
+	const segments = value.split(/[.:/]/);
+	const leaf = segments[segments.length - 1] ?? value;
+	const words = leaf.replace(/[_-]+/g, " ").trim();
+	return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "Used tool";
+}
+
+function readLocationPath(part: ToolCallPart): string | undefined {
+	const locations = (part as { locations?: unknown }).locations;
+	if (!Array.isArray(locations)) return undefined;
+	for (const location of locations) {
+		if (!location || typeof location !== "object") continue;
+		const path = (location as Record<string, unknown>).path;
+		if (typeof path === "string" && path) return path;
+	}
+	return undefined;
+}
+
+function readHost(url: string | undefined): string | undefined {
+	if (!url) return undefined;
+	try {
+		return new URL(url).host || url;
+	} catch {
+		return url;
+	}
+}
diff --git a/src/pages/chat/chat-bubble/lib/elide.test.ts b/src/pages/chat/chat-bubble/lib/elide.test.ts
new file mode 100644
index 0000000..a9c4fcc
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/elide.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { elideCommand, elidePath } from "./elide";
+
+const LONG_PATH =
+	"backends/real-commerce/.ai/concepts/2026-07-04 Contract-Price/adrs/04-tax-basis.md";
+
+describe("elidePath", () => {
+	it("returns a path that already fits unchanged", () => {
+		expect(elidePath("src/lib/store.ts", 44)).toBe("src/lib/store.ts");
+	});
+
+	it("keeps the basename intact and drops the middle", () => {
+		const result = elidePath(LONG_PATH, 44);
+		expect(result).toContain("04-tax-basis.md");
+		expect(result.startsWith("…/")).toBe(true);
+		expect(result.length).toBeLessThanOrEqual(44);
+	});
+
+	it("keeps the closest directory when it still fits", () => {
+		expect(elidePath(LONG_PATH, 44)).toContain("adrs/");
+	});
+
+	it("keeps the tail when the basename alone exceeds the budget", () => {
+		const result = elidePath(`a/${"x".repeat(60)}.md`, 20);
+		expect(result.startsWith("…")).toBe(true);
+		expect(result.length).toBe(20);
+		expect(result.endsWith(".md")).toBe(true);
+	});
+
+	it("ignores a trailing slash", () => {
+		expect(elidePath("src/lib/", 44)).toBe("src/lib");
+	});
+
+	it("does not elide when the ellipsis would save fewer than three characters", () => {
+		// Carbon: an ellipsis "should represent three or more truncated characters".
+		expect(elidePath("src/lib/abcd.ts", 14)).toBe("src/lib/abcd.ts");
+	});
+
+	it("never leaves fewer than four untruncated characters", () => {
+		// Carbon and PatternFly both set this floor.
+		expect(
+			elidePath(`a/${"x".repeat(60)}.md`, 4).length,
+		).toBeGreaterThanOrEqual(5);
+	});
+});
+
+describe("elideCommand", () => {
+	it("keeps only the first line", () => {
+		expect(elideCommand("git status\ngit log", 48)).toBe("git status");
+	});
+
+	it("keeps the head and marks the cut", () => {
+		const result = elideCommand(`git log ${"-".repeat(80)}`, 20);
+		expect(result.startsWith("git log")).toBe(true);
+		expect(result.length).toBe(20);
+		expect(result.endsWith("…")).toBe(true);
+	});
+});
diff --git a/src/pages/chat/chat-bubble/lib/elide.ts b/src/pages/chat/chat-bubble/lib/elide.ts
new file mode 100644
index 0000000..353b041
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/elide.ts
@@ -0,0 +1,44 @@
+const ELLIPSIS = "…";
+
+/**
+ * Shorten a path so the basename survives. The basename is the only part that
+ * distinguishes one row from its neighbours, so the middle of the directory
+ * goes first and the tail is never cut. The VS Code extension does the same
+ * thing more bluntly, rendering only `file_path.split("/").pop()`.
+ *
+ * Callers must pass the original string as `aria-label`: this shortens before
+ * render, so the full value leaves the DOM and a screen reader would otherwise
+ * hear the shortened path too.
+ */
+export function elidePath(path: string, maxChars = 44): string {
+	const clean = path.replace(/\/+$/, "");
+	if (clean.length <= maxChars) return clean;
+	// Carbon: an ellipsis should stand for three or more characters, otherwise
+	// it costs more attention than it saves.
+	if (clean.length - maxChars < 3) return clean;
+
+	const segments = clean.split("/");
+	const base = segments.pop() ?? clean;
+	if (base.length + 2 > maxChars) {
+		// Carbon and PatternFly: never leave fewer than four real characters.
+		const keep = Math.max(4, maxChars - 1);
+		return `${ELLIPSIS}${base.slice(base.length - keep)}`;
+	}
+
+	// Grow back from the tail: the directories nearest the file carry the most
+	// context, and the repository root is the least useful thing on a phone.
+	let tail = base;
+	for (let index = segments.length - 1; index >= 0; index -= 1) {
+		const candidate = `${segments[index]}/${tail}`;
+		if (candidate.length + 2 > maxChars) break;
+		tail = candidate;
+	}
+	return `${ELLIPSIS}/${tail}`;
+}
+
+/** Keep the head of a command: the binary and its first arguments identify it. */
+export function elideCommand(command: string, maxChars = 48): string {
+	const line = command.split(/\r?\n/, 1)[0]?.trim() ?? "";
+	if (line.length <= maxChars) return line;
+	return `${line.slice(0, maxChars - 1)}${ELLIPSIS}`;
+}
diff --git a/src/pages/chat/chat-bubble/lib/outputSummary.test.ts b/src/pages/chat/chat-bubble/lib/outputSummary.test.ts
new file mode 100644
index 0000000..0c3fbeb
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/outputSummary.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { summarizeToolOutput } from "./outputSummary";
+
+describe("summarizeToolOutput", () => {
+	it("returns null for empty output", () => {
+		expect(summarizeToolOutput(undefined)).toBeNull();
+		expect(summarizeToolOutput("   \n  ")).toBeNull();
+	});
+
+	it("renders one line inline", () => {
+		expect(summarizeToolOutput("7 entries")).toEqual({
+			mode: "inline",
+			lines: ["7 entries"],
+			lineCount: 1,
+			needsFullView: false,
+		});
+	});
+
+	it("renders two lines inline", () => {
+		const summary = summarizeToolOutput("first\nsecond");
+		expect(summary?.mode).toBe("inline");
+		expect(summary?.lines).toEqual(["first", "second"]);
+	});
+
+	it("switches to a peek at three lines and caps it", () => {
+		const summary = summarizeToolOutput("a\nb\nc\nd\ne");
+		expect(summary?.mode).toBe("peek");
+		expect(summary?.lines).toEqual(["a", "b", "c"]);
+		expect(summary?.lineCount).toBe(5);
+	});
+
+	it("always uses a peek for a failure, even for one line", () => {
+		expect(summarizeToolOutput("boom", { failed: true })?.mode).toBe("peek");
+	});
+
+	it("keeps the LAST lines while running, because the newest output is the point", () => {
+		// Cursor CLI: "Long shell output truncates from the top. You see the
+		// latest output of a streaming command, not the oldest."
+		const summary = summarizeToolOutput("a\nb\nc\nd\ne", { running: true });
+		expect(summary?.lines).toEqual(["c", "d", "e"]);
+		expect(summary?.clipped).toBe("top");
+	});
+
+	it("keeps the LAST lines on failure, because the error is at the end", () => {
+		expect(summarizeToolOutput("a\nb\nc\nd", { failed: true })?.lines).toEqual([
+			"b",
+			"c",
+			"d",
+		]);
+	});
+
+	it("keeps the FIRST lines for a completed call", () => {
+		const summary = summarizeToolOutput("a\nb\nc\nd\ne");
+		expect(summary?.lines).toEqual(["a", "b", "c"]);
+		expect(summary?.clipped).toBe("bottom");
+	});
+
+	it("flags output over 250 characters for a full view", () => {
+		expect(summarizeToolOutput("x".repeat(251))?.needsFullView).toBe(true);
+		expect(summarizeToolOutput("x".repeat(120))?.needsFullView).toBe(false);
+	});
+
+	it("strips ANSI before counting", () => {
+		const summary = summarizeToolOutput("\u001b[32mok\u001b[0m");
+		expect(summary?.lines).toEqual(["ok"]);
+		expect(summary?.mode).toBe("inline");
+	});
+
+	it("ignores leading and trailing blank lines", () => {
+		expect(summarizeToolOutput("\n\nonly\n\n\n")?.lineCount).toBe(1);
+	});
+});
diff --git a/src/pages/chat/chat-bubble/lib/outputSummary.ts b/src/pages/chat/chat-bubble/lib/outputSummary.ts
new file mode 100644
index 0000000..cb8858d
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/outputSummary.ts
@@ -0,0 +1,56 @@
+import { stripAnsi } from "./utils";
+
+export interface OutputSummary {
+	/** `inline` is a plain second line on the row; `peek` is the faded block. */
+	mode: "inline" | "peek";
+	lines: string[];
+	lineCount: number;
+	/** Too large to expand in place; the control should push a page instead. */
+	needsFullView: boolean;
+	/**
+	 * Which end was cut, so the fade mask sits over the cut and not over data.
+	 * Absent when nothing was cut, which is every inline summary.
+	 */
+	clipped?: "top" | "bottom";
+}
+
+const INLINE_MAX_LINES = 2;
+const PEEK_LINES = 3;
+/** Borrowed from the VS Code extension, which uses exactly 250. */
+const FULL_VIEW_CHARS = 250;
+
+/**
+ * Half of all tool calls return a single line, so a boxed preview is the wrong
+ * default: it spends a card's worth of vertical space on one word. Short output
+ * becomes the row's own second line, and only longer output earns the block.
+ * A failure always gets the block, because its output is the reason to look.
+ */
+export function summarizeToolOutput(
+	output: string | undefined,
+	options: { failed?: boolean; running?: boolean } = {},
+): OutputSummary | null {
+	if (!output) return null;
+	const stripped = stripAnsi(output);
+	const lines = stripped.split(/\r?\n/).map((line) => line.trimEnd());
+	while (lines.length > 0 && !lines[lines.length - 1].trim()) lines.pop();
+	while (lines.length > 0 && !lines[0].trim()) lines.shift();
+	if (lines.length === 0) return null;
+
+	const needsFullView = stripped.trim().length > FULL_VIEW_CHARS;
+	if (!options.failed && lines.length <= INLINE_MAX_LINES) {
+		return { mode: "inline", lines, lineCount: lines.length, needsFullView };
+	}
+
+	// Which end to keep depends on the state, and getting this backwards is the
+	// difference between watching a build and watching its first three lines
+	// forever. A running command's newest output is the point; a failure's error
+	// is at the end; a finished call is identified by the shape of its head.
+	const fromTail = Boolean(options.running || options.failed);
+	return {
+		mode: "peek",
+		lines: fromTail ? lines.slice(-PEEK_LINES) : lines.slice(0, PEEK_LINES),
+		lineCount: lines.length,
+		needsFullView,
+		clipped: fromTail ? "top" : "bottom",
+	};
+}
diff --git a/src/pages/chat/chat-bubble/lib/workLog.test.ts b/src/pages/chat/chat-bubble/lib/workLog.test.ts
index efbc70e..f9c79dd 100644
--- a/src/pages/chat/chat-bubble/lib/workLog.test.ts
+++ b/src/pages/chat/chat-bubble/lib/workLog.test.ts
@@ -3,7 +3,6 @@ import { describe, expect, it } from "vitest";
 import type { ToolCallPart } from "./messageParts";
 import {
 	coalesceToolCalls,
-	deriveToolActivityPresentation,
 	formatWorkDuration,
 	getElapsedDurationMs,
 	groupWorkLogParts,
@@ -108,31 +107,6 @@ describe("groupWorkLogParts", () => {
 	});
 });
 
-describe("deriveToolActivityPresentation", () => {
-	it("extracts a command instead of exposing raw argument JSON", () => {
-		expect(
-			deriveToolActivityPresentation(
-				tool({
-					name: "exec_command",
-					title: '{"command":"pnpm test"}',
-					arguments: JSON.stringify({ command: "pnpm test" }),
-				}),
-			),
-		).toEqual({ kind: "execute", label: "Ran command", detail: "pnpm test" });
-	});
-
-	it("prefers the ACP location for file activity", () => {
-		expect(
-			deriveToolActivityPresentation(
-				tool({
-					name: "read",
-					locations: [{ path: "src/chat.tsx", line: 12 }],
-				}),
-			),
-		).toEqual({ kind: "read", label: "Read file", detail: "src/chat.tsx" });
-	});
-});
-
 describe("formatWorkDuration", () => {
 	it("formats short and minute-scale turns", () => {
 		expect(formatWorkDuration(8_250)).toBe("8.3s");
diff --git a/src/pages/chat/chat-bubble/lib/workLog.ts b/src/pages/chat/chat-bubble/lib/workLog.ts
index 8468a5d..0dedfbd 100644
--- a/src/pages/chat/chat-bubble/lib/workLog.ts
+++ b/src/pages/chat/chat-bubble/lib/workLog.ts
@@ -1,22 +1,6 @@
 import type { AcpMessage, AcpMessagePart } from "@shellular/protocol";
 import type { ToolCallPart } from "./messageParts";
 
-export type ToolActivityKind =
-	| "execute"
-	| "read"
-	| "change"
-	| "search"
-	| "fetch"
-	| "think"
-	| "switch_mode"
-	| "other";
-
-export interface ToolActivityPresentation {
-	kind: ToolActivityKind;
-	label: string;
-	detail?: string;
-}
-
 export interface AssistantTurnProjection {
 	/** The terminal assistant response that remains in the transcript. */
 	answerParts: AcpMessagePart[];
@@ -163,76 +147,6 @@ function mergeToolCallParts(
 	} as ToolCallPart;
 }
 
-/** A stable, human-facing label and one-line detail for a tool activity row. */
-export function deriveToolActivityPresentation(
-	part: ToolCallPart,
-): ToolActivityPresentation {
-	const args = parseArguments(part.arguments);
-	const rawKind = readString((part as { kind?: unknown }).kind) ?? part.name;
-	const kind = classifyToolKind(rawKind, part.title);
-	const location = readLocations(part)[0]?.path ?? readContentPath(part);
-	const argumentPath = findString(args, [
-		"path",
-		"file_path",
-		"filePath",
-		"filename",
-		"target",
-	]);
-	const path = location ?? argumentPath;
-
-	switch (kind) {
-		case "execute":
-			return {
-				kind,
-				label: "Ran command",
-				detail:
-					firstLine(findString(args, ["command", "cmd", "script", "input"])) ??
-					safeTitle(part.title),
-			};
-		case "read":
-			return {
-				kind,
-				label: "Read file",
-				detail: path ?? safeTitle(part.title),
-			};
-		case "change":
-			return {
-				kind,
-				label: "Changed files",
-				detail: path ?? safeTitle(part.title),
-			};
-		case "search":
-			return {
-				kind,
-				label: "Searched files",
-				detail:
-					findString(args, ["query", "pattern", "search", "needle"]) ??
-					safeTitle(part.title),
-			};
-		case "fetch":
-			return {
-				kind,
-				label: "Fetched resource",
-				detail:
-					findString(args, ["url", "uri", "href"]) ?? safeTitle(part.title),
-			};
-		case "think":
-			return { kind, label: "Reasoned", detail: safeTitle(part.title) };
-		case "switch_mode":
-			return {
-				kind,
-				label: "Switched mode",
-				detail: findString(args, ["mode"]) ?? safeTitle(part.title),
-			};
-		default:
-			return {
-				kind: "other",
-				label: humanizeToolName(part.name) || "Used tool",
-				detail: safeTitle(part.title),
-			};
-	}
-}
-
 export function getAssistantTurnDurationMs(
 	messages: readonly AcpMessage[],
 	previousMessage?: AcpMessage,
@@ -274,76 +188,6 @@ export function formatWorkDuration(durationMs: number): string {
 	return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
 }
 
-function classifyToolKind(
-	name: string | undefined,
-	title: string | undefined,
-): ToolActivityKind {
-	const value = `${name ?? ""} ${title ?? ""}`.toLowerCase();
-	if (/switch.?mode|change.?mode/.test(value)) return "switch_mode";
-	if (/exec|bash|shell|terminal|command|powershell/.test(value))
-		return "execute";
-	if (/search|grep|ripgrep|glob|find.?file/.test(value)) return "search";
-	if (/edit|write|patch|delete|remove|move|rename|create.?file/.test(value)) {
-		return "change";
-	}
-	if (/read|open.?file|view.?file|load.?file/.test(value)) return "read";
-	if (/fetch|http|web|browser|url/.test(value)) return "fetch";
-	if (/think|reason/.test(value)) return "think";
-	return "other";
-}
-
-function parseArguments(value: string | undefined): unknown {
-	if (!value) return undefined;
-	try {
-		return JSON.parse(value);
-	} catch {
-		return value;
-	}
-}
-
-function findString(
-	value: unknown,
-	keys: readonly string[],
-): string | undefined {
-	if (typeof value === "string") return value.trim() || undefined;
-	if (!value || typeof value !== "object") return undefined;
-	const record = value as Record<string, unknown>;
-	for (const key of keys) {
-		const candidate = readString(record[key]);
-		if (candidate) return candidate;
-	}
-	for (const candidate of Object.values(record)) {
-		if (candidate && typeof candidate === "object") {
-			const nested = findString(candidate, keys);
-			if (nested) return nested;
-		}
-	}
-	return undefined;
-}
-
-function readString(value: unknown): string | undefined {
-	return typeof value === "string" && value.trim() ? value.trim() : undefined;
-}
-
-function safeTitle(value: string | undefined): string | undefined {
-	const title = value?.trim();
-	if (!title || title.startsWith("{") || title.startsWith("["))
-		return undefined;
-	return firstLine(title);
-}
-
-function firstLine(value: string | undefined): string | undefined {
-	return value?.split(/\r?\n/, 1)[0]?.trim() || undefined;
-}
-
-function humanizeToolName(value: string | undefined): string {
-	if (!value) return "";
-	const segments = value.split(/[.:/]/);
-	const leaf = segments[segments.length - 1] ?? value;
-	const words = leaf.replace(/[_-]+/g, " ").trim();
-	return words ? `${words[0].toUpperCase()}${words.slice(1)}` : "";
-}
-
 function readLocations(part: ToolCallPart) {
 	const locations = (part as { locations?: unknown }).locations;
 	if (!Array.isArray(locations)) return [];
@@ -366,13 +210,6 @@ function readContentParts(part: ToolCallPart): AcpMessagePart[] {
 		: [];
 }
 
-function readContentPath(part: ToolCallPart): string | undefined {
-	for (const content of readContentParts(part)) {
-		if (content.type === "file_change") return content.path;
-	}
-	return undefined;
-}
-
 function timestampMs(value: number | undefined): number | undefined {
 	if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
 	return value < 10_000_000_000 ? value * 1_000 : value;
diff --git a/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts b/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
new file mode 100644
index 0000000..2698a82
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
@@ -0,0 +1,159 @@
+import type { AcpMessagePart } from "@shellular/protocol";
+import { describe, expect, it } from "vitest";
+import type { ToolCallPart } from "./messageParts";
+import {
+	countByKind,
+	foldPathRuns,
+	mergeSameFileRuns,
+	splitCommentary,
+	windowRows,
+} from "./workLogLayout";
+
+function read(path: string): ToolCallPart {
+	return {
+		type: "tool_call",
+		name: "read",
+		status: "completed",
+		locations: [{ path }],
+	} as ToolCallPart;
+}
+
+function run(description: string, status = "completed"): ToolCallPart {
+	return {
+		type: "tool_call",
+		name: "execute",
+		status,
+		arguments: JSON.stringify({ command: "true", description }),
+	} as ToolCallPart;
+}
+
+describe("mergeSameFileRuns", () => {
+	it("collapses consecutive edits to the same file into the last one", () => {
+		// Devin ships exactly this rule: "Consecutive file edits to the same file
+		// are now merged into a single entry". Ten `Changed foo.ts` rows carry no
+		// distinguishing information at all, unlike a run of commands.
+		const first = {
+			...read("a/one.md"),
+			name: "edit",
+			id: "e1",
+		} as ToolCallPart;
+		const second = {
+			...read("a/one.md"),
+			name: "edit",
+			id: "e2",
+		} as ToolCallPart;
+		const merged = mergeSameFileRuns([first, second]);
+		expect(merged).toHaveLength(1);
+		expect((merged[0] as ToolCallPart).id).toBe("e2");
+	});
+
+	it("leaves edits to different files alone", () => {
+		const a = { ...read("a/one.md"), name: "edit", id: "e1" } as ToolCallPart;
+		const b = { ...read("a/two.md"), name: "edit", id: "e2" } as ToolCallPart;
+		expect(mergeSameFileRuns([a, b])).toHaveLength(2);
+	});
+
+	it("does not merge across an interleaved part", () => {
+		const a = { ...read("a/one.md"), name: "edit", id: "e1" } as ToolCallPart;
+		const b = { ...read("a/one.md"), name: "edit", id: "e2" } as ToolCallPart;
+		const text: AcpMessagePart = { type: "text", text: "Checking." };
+		expect(mergeSameFileRuns([a, text, b])).toHaveLength(3);
+	});
+});
+
+describe("foldPathRuns", () => {
+	it("folds three or more consecutive reads", () => {
+		const rows = foldPathRuns([
+			read("a/b/one.md"),
+			read("a/b/two.md"),
+			read("a/b/three.md"),
+		]);
+		expect(rows).toHaveLength(1);
+		expect(rows[0]).toMatchObject({ kind: "folded", verb: "Read 3 files" });
+	});
+
+	it("leaves a run of two alone", () => {
+		const rows = foldPathRuns([read("a/one.md"), read("a/two.md")]);
+		expect(rows.every((row) => row.kind === "part")).toBe(true);
+	});
+
+	it("never folds command runs, because each carries its own sentence", () => {
+		const rows = foldPathRuns([
+			run("Check branch state"),
+			run("List ADRs"),
+			run("Read README"),
+		]);
+		expect(rows).toHaveLength(3);
+		expect(rows.every((row) => row.kind === "part")).toBe(true);
+	});
+
+	it("drops the shared directory when the paths do not share one", () => {
+		const rows = foldPathRuns([
+			read("a/one.md"),
+			read("b/two.md"),
+			read("c/three.md"),
+		]);
+		expect(rows[0]).toMatchObject({ kind: "folded", directory: undefined });
+	});
+});
+
+describe("windowRows", () => {
+	it("keeps everything when the run fits", () => {
+		const rows = [read("a.md"), read("b.md")].map(
+			(part) => ({ kind: "part", part }) as const,
+		);
+		expect(windowRows(rows, 6)).toEqual({ hidden: 0, rows });
+	});
+
+	it("keeps the newest rows and reports how many are hidden", () => {
+		const rows = Array.from(
+			{ length: 10 },
+			(_, index) => ({ kind: "part", part: read(`${index}.md`) }) as const,
+		);
+		const layout = windowRows(rows, 6);
+		expect(layout.hidden).toBe(4);
+		expect(layout.rows).toHaveLength(6);
+		expect(layout.rows[0]).toBe(rows[4]);
+	});
+});
+
+describe("splitCommentary", () => {
+	it("promotes the last text part and leaves the earlier ones in place", () => {
+		const parts: AcpMessagePart[] = [
+			{ type: "text", text: "First thought." },
+			read("a.md"),
+			{ type: "text", text: "Second thought." },
+		];
+		const split = splitCommentary(parts);
+		expect(split.commentary).toBe("Second thought.");
+		expect(split.rest).toHaveLength(2);
+		expect(split.rest[0]).toEqual({ type: "text", text: "First thought." });
+	});
+
+	it("prefers reasoning over commentary when an agent sends it", () => {
+		const parts: AcpMessagePart[] = [
+			{ type: "text", text: "Commentary." },
+			{ type: "reasoning", content: "Because the fixture seeds a price." },
+		];
+		expect(splitCommentary(parts).commentary).toBe(
+			"Because the fixture seeds a price.",
+		);
+	});
+
+	it("returns no commentary when there is no text part", () => {
+		expect(splitCommentary([read("a.md")]).commentary).toBeUndefined();
+	});
+});
+
+describe("countByKind", () => {
+	it("counts work parts by the kind the rows use", () => {
+		expect(countByKind([read("a.md"), read("b.md"), run("x")]).counts).toEqual([
+			{ kind: "read", count: 2 },
+			{ kind: "execute", count: 1 },
+		]);
+	});
+
+	it("counts failures separately, because that is what changes the next move", () => {
+		expect(countByKind([run("x"), run("y", "failed")]).failed).toBe(1);
+	});
+});
diff --git a/src/pages/chat/chat-bubble/lib/workLogLayout.ts b/src/pages/chat/chat-bubble/lib/workLogLayout.ts
new file mode 100644
index 0000000..8568c35
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/workLogLayout.ts
@@ -0,0 +1,178 @@
+import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
+import { type ActivityKind, deriveActivityRow } from "./activityRow";
+import type { ToolCallPart } from "./messageParts";
+
+export type WorkLogRow =
+	| { kind: "part"; part: AcpMessagePart }
+	| { kind: "folded"; verb: string; directory?: string; parts: ToolCallPart[] };
+
+export interface WorkLogLayout {
+	/** Rows collapsed behind the "N earlier steps" control at the top. */
+	hidden: number;
+	rows: WorkLogRow[];
+}
+
+const FOLD_THRESHOLD = 3;
+const FOLDABLE_KINDS = new Set<ActivityKind>(["read", "change"]);
+export const WINDOW_SIZE = 6;
+
+/**
+ * Consecutive touches of the same file collapse to the last one, at any count.
+ * This is not the same decision as folding a run: those rows differ only in a
+ * basename, these differ in nothing at all. Devin ships the identical rule.
+ *
+ * Note the adjacency caveat: an interleaved unrelated part breaks the run. That
+ * is deliberate here, because merging across an interruption would reorder the
+ * timeline, but it is a known failure mode of adjacency-based coalescing and
+ * Claude Code shipped a fix for the identical bug in v2.1.235.
+ */
+export function mergeSameFileRuns(
+	parts: readonly AcpMessagePart[],
+	backend?: AiBackend,
+): AcpMessagePart[] {
+	const output: AcpMessagePart[] = [];
+	for (const part of parts) {
+		const previous = output[output.length - 1];
+		if (
+			part.type === "tool_call" &&
+			previous?.type === "tool_call" &&
+			isSameFileTouch(previous, part, backend)
+		) {
+			output[output.length - 1] = part;
+			continue;
+		}
+		output.push(part);
+	}
+	return output;
+}
+
+function isSameFileTouch(
+	previous: ToolCallPart,
+	current: ToolCallPart,
+	backend?: AiBackend,
+): boolean {
+	const a = deriveActivityRow(previous, backend);
+	const b = deriveActivityRow(current, backend);
+	if (a.kind !== b.kind || !FOLDABLE_KINDS.has(a.kind)) return false;
+	return Boolean(a.objectFull) && a.objectFull === b.objectFull;
+}
+
+/**
+ * Folding is only honest when the folded rows would otherwise be redundant.
+ * The longest measured run is 25 commands with 25 distinct descriptions, so
+ * folding those would trade 25 sentences for one number. File runs differ only
+ * in a basename, which the chips keep.
+ */
+export function foldPathRuns(
+	parts: readonly AcpMessagePart[],
+	backend?: AiBackend,
+): WorkLogRow[] {
+	const rows: WorkLogRow[] = [];
+	let batch: ToolCallPart[] = [];
+	let batchKind: ActivityKind | undefined;
+
+	const flush = () => {
+		if (batch.length >= FOLD_THRESHOLD && batchKind) {
+			rows.push({
+				kind: "folded",
+				verb: `${batchKind === "read" ? "Read" : "Changed"} ${batch.length} files`,
+				directory: sharedDirectory(batch, backend),
+				parts: batch,
+			});
+		} else {
+			for (const part of batch) rows.push({ kind: "part", part });
+		}
+		batch = [];
+		batchKind = undefined;
+	};
+
+	for (const part of parts) {
+		const kind =
+			part.type === "tool_call"
+				? deriveActivityRow(part, backend).kind
+				: undefined;
+		if (kind && FOLDABLE_KINDS.has(kind)) {
+			if (batchKind && kind !== batchKind) flush();
+			batchKind = kind;
+			batch.push(part as ToolCallPart);
+			continue;
+		}
+		flush();
+		rows.push({ kind: "part", part });
+	}
+	flush();
+	return rows;
+}
+
+/** Windowing hides rows behind a control; folding replaces them with a summary. */
+export function windowRows(
+	rows: readonly WorkLogRow[],
+	size: number = WINDOW_SIZE,
+): WorkLogLayout {
+	if (rows.length <= size) return { hidden: 0, rows: [...rows] };
+	return { hidden: rows.length - size, rows: rows.slice(rows.length - size) };
+}
+
+/**
+ * The latest commentary is promoted to the turn header, so the reader sees
+ * where the agent is going without scrolling to the end of the rail. Earlier
+ * commentary stays in place: it belongs to the step it followed.
+ */
+export function splitCommentary(parts: readonly AcpMessagePart[]): {
+	commentary?: string;
+	rest: AcpMessagePart[];
+} {
+	let index = -1;
+	for (let cursor = parts.length - 1; cursor >= 0; cursor -= 1) {
+		const part = parts[cursor];
+		if (part.type === "reasoning" && part.content?.trim()) {
+			index = cursor;
+			break;
+		}
+		if (part.type === "text" && part.text?.trim() && index < 0) index = cursor;
+	}
+	if (index < 0) return { rest: [...parts] };
+	const part = parts[index];
+	const commentary =
+		part.type === "reasoning"
+			? part.content.trim()
+			: (part as { text: string }).text.trim();
+	return { commentary, rest: parts.filter((_, cursor) => cursor !== index) };
+}
+
+/** Counts for the settled fold header, using the same classifier as the rows. */
+export function countByKind(
+	parts: readonly AcpMessagePart[],
+	backend?: AiBackend,
+): {
+	counts: Array<{ kind: ActivityKind; count: number }>;
+	failed: number;
+} {
+	const counts = new Map<ActivityKind, number>();
+	let failed = 0;
+	for (const part of parts) {
+		if (part.type !== "tool_call") continue;
+		const row = deriveActivityRow(part, backend);
+		counts.set(row.kind, (counts.get(row.kind) ?? 0) + 1);
+		if (row.failed) failed += 1;
+	}
+	return {
+		counts: Array.from(counts, ([kind, count]) => ({ kind, count })),
+		failed,
+	};
+}
+
+function sharedDirectory(
+	parts: readonly ToolCallPart[],
+	backend?: AiBackend,
+): string | undefined {
+	const directories = parts.map((part) => {
+		const object = deriveActivityRow(part, backend).object ?? "";
+		const cut = object.lastIndexOf("/");
+		return cut > 0 ? object.slice(0, cut) : "";
+	});
+	const first = directories[0];
+	return first && directories.every((value) => value === first)
+		? first
+		: undefined;
+}

From b66eff2c50a454fa8342d8ecce8a3c384019fb7a Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:19:36 +0200
Subject: [PATCH 02/10] feat(chat): render every work event as one row with its
 result

The row grammar on screen: a glyph, a verb, the object, a status, and the
step's own outcome under it. Short output is the row's second line, longer
output a faded peek, and a failed row opens with the whole thing.

The work log now shows the full trail with a window control instead of the
latest call only, folds runs of file reads into one row with basename chips,
and merges consecutive touches of the same file. Command runs are never
folded: each carries its own sentence. The old latest-only view survives as
a window of one, behind a new Agent Work Log setting.
---
 src/lib/settings.ts                           |  30 +++
 .../chat-bubble/components/ActivityRow.scss   | 224 ++++++++++++++++++
 .../components/ActivityRow.test.tsx           | 154 ++++++++++++
 .../chat-bubble/components/ActivityRow.tsx    | 180 ++++++++++++++
 .../components/ToolCallContentView.tsx        | 147 +++---------
 .../chat-bubble/components/WorkLogView.scss   | 112 +--------
 .../components/WorkLogView.test.tsx           | 155 ++++++++----
 .../chat-bubble/components/WorkLogView.tsx    | 149 +++++++++---
 .../components/useWorkLogWindowSize.ts        |  33 +++
 src/pages/chat/chat-bubble/index.tsx          |   9 +-
 .../chat-bubble/lib/workLogLayout.test.ts     |  15 ++
 .../chat/chat-bubble/lib/workLogLayout.ts     |  12 +-
 src/pages/chat/index.tsx                      |   1 +
 src/pages/settings/index.tsx                  |  22 ++
 14 files changed, 933 insertions(+), 310 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/components/ActivityRow.scss
 create mode 100644 src/pages/chat/chat-bubble/components/ActivityRow.test.tsx
 create mode 100644 src/pages/chat/chat-bubble/components/ActivityRow.tsx
 create mode 100644 src/pages/chat/chat-bubble/components/useWorkLogWindowSize.ts

diff --git a/src/lib/settings.ts b/src/lib/settings.ts
index 49a8566..06c73c4 100644
--- a/src/lib/settings.ts
+++ b/src/lib/settings.ts
@@ -28,11 +28,20 @@ export type TerminalSettings = {
 	letterSpacing: number;
 };
 
+export type ChatSettings = {
+	/**
+	 * Show the whole work trail of a turn, windowed, rather than only the
+	 * latest action. The old latest-only view is a window of one.
+	 */
+	showEveryStep: boolean;
+};
+
 export type AppSettings = {
 	theme: string;
 	server: ServerSettings;
 	editor: EditorSettings;
 	terminal: TerminalSettings;
+	chat: ChatSettings;
 	showHiddenFiles: boolean;
 	hapticFeedback: boolean;
 };
@@ -103,11 +112,16 @@ export const DEFAULT_TERMINAL_SETTINGS: TerminalSettings = {
 	letterSpacing: 1,
 };
 
+export const DEFAULT_CHAT_SETTINGS: ChatSettings = {
+	showEveryStep: true,
+};
+
 const DEFAULT_SETTINGS: AppSettings = {
 	theme: "dark",
 	server: DEFAULT_SERVER_SETTINGS,
 	editor: DEFAULT_EDITOR_SETTINGS,
 	terminal: DEFAULT_TERMINAL_SETTINGS,
+	chat: DEFAULT_CHAT_SETTINGS,
 	showHiddenFiles: false,
 	hapticFeedback: true,
 };
@@ -209,6 +223,17 @@ function normalizeTerminalSettings(
 	};
 }
 
+function normalizeChatSettings(
+	settings?: Partial<ChatSettings> | null,
+): ChatSettings {
+	return {
+		showEveryStep:
+			typeof settings?.showEveryStep === "boolean"
+				? settings.showEveryStep
+				: DEFAULT_CHAT_SETTINGS.showEveryStep,
+	};
+}
+
 function normalizeSettings(
 	settings: Partial<AppSettings> | null | undefined,
 ): AppSettings {
@@ -217,6 +242,7 @@ function normalizeSettings(
 		server: normalizeServerSettings(settings?.server),
 		editor: normalizeEditorSettings(settings?.editor),
 		terminal: normalizeTerminalSettings(settings?.terminal),
+		chat: normalizeChatSettings(settings?.chat),
 		showHiddenFiles:
 			typeof settings?.showHiddenFiles === "boolean"
 				? settings.showHiddenFiles
@@ -264,6 +290,10 @@ export async function saveSettings(
 			...current.terminal,
 			...settings.terminal,
 		},
+		chat: {
+			...current.chat,
+			...settings.chat,
+		},
 	});
 	await file.write(SETTINGS_PATH, JSON.stringify(next));
 	window.dispatchEvent(
diff --git a/src/pages/chat/chat-bubble/components/ActivityRow.scss b/src/pages/chat/chat-bubble/components/ActivityRow.scss
new file mode 100644
index 0000000..4e07686
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ActivityRow.scss
@@ -0,0 +1,224 @@
+.activity-row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  color: var(--secondary-text);
+
+  .chat-part-card-title {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+    width: 100%;
+    min-width: 0;
+    // 48px, not the 31px used elsewhere: below that the row is not a reliable
+    // touch target on a phone. Set as min-height, never height, so a
+    // user-forced line height (WCAG SC 1.4.12) cannot clip it.
+    min-height: 48px;
+    padding: 6px 2px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    >em {
+      margin-left: 2px;
+      font-style: normal;
+      font-size: 10px;
+      opacity: 0.5;
+      flex-shrink: 0;
+    }
+  }
+
+  >.chat-disclosure-root {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .chat-disclosure-panel {
+    width: 100%;
+    min-width: 0;
+
+    >.chat-disclosure-panel-inner {
+      margin: 1px 0 5px 22px;
+      border-radius: 7px;
+      background: var(--surface-soft);
+    }
+  }
+
+  &--failed {
+    color: var(--error);
+
+    // The container colour alone does not reach the verb, which sets its own.
+    // The glyph already carries the state as a shape, per WCAG SC 1.4.1; this
+    // is so a failed row is findable while scrolling past twenty-five of them.
+    .activity-row-label strong {
+      color: var(--error);
+    }
+  }
+
+  &--running .activity-row-icon {
+    color: var(--accent);
+  }
+}
+
+.activity-row-icon {
+  width: 15px;
+  margin-top: 2px;
+  color: var(--secondary-text);
+  font-size: 13px;
+  text-align: center;
+  opacity: 0.72;
+  flex-shrink: 0;
+}
+
+.activity-row-label {
+  display: flex;
+  align-items: baseline;
+  // The object drops to its own full-width line when the verb, glyph and
+  // status leave it too little room. At 390px the shared line offers roughly
+  // 25 to 30 characters, so this is the normal case, not the exception.
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+
+  strong {
+    color: var(--primary-text);
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+}
+
+.activity-row-object {
+  min-width: 0;
+  color: var(--secondary-text);
+  // A description is a sentence and carries meaning at both ends, so it wraps
+  // rather than being cut. Measured: median 28 characters, p90 41.
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  &--mono {
+    font-family: 'JetBrainsMono Nerd Font', ui-monospace, Menlo, monospace;
+    font-size: 12px;
+    white-space: nowrap;
+    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
+  }
+}
+
+// The unshortened value, kept in the accessibility tree only. Clipped rather
+// than `display: none`, which would remove it from that tree as well.
+.activity-row-object-full {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.activity-row-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 13px;
+  margin-top: 2px;
+  font-size: 12px;
+  flex-shrink: 0;
+
+  .icon-check {
+    opacity: 0.7;
+  }
+}
+
+.activity-row-detail {
+  // Pulled up under the row it belongs to: the tappable head is 48px tall for
+  // the touch target, which otherwise leaves the result floating midway
+  // between its own row and the next one.
+  margin: -9px 0 5px 22px;
+  color: var(--secondary-text);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.7;
+
+  &--mono {
+    font-family: 'JetBrainsMono Nerd Font', ui-monospace, Menlo, monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.activity-row-peek {
+  position: relative;
+  margin: -7px 0 3px 22px;
+  padding: 8px 9px 10px;
+  max-height: 66px;
+  overflow: hidden;
+  border-radius: 7px;
+  background: var(--surface-soft);
+  color: var(--secondary-text);
+  font-family: 'JetBrainsMono Nerd Font', ui-monospace, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre;
+  // Mask the overflow instead of adding a scroll region, which would be a
+  // touch trap inside a scrolling list. The mask sits over the cut end, so a
+  // block clipped at the top fades upward instead.
+  mask-image: linear-gradient(to bottom, #000 46px, transparent 66px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 46px, transparent 66px);
+
+  &--clipped-top {
+    mask-image: linear-gradient(to top, #000 46px, transparent 66px);
+    -webkit-mask-image: linear-gradient(to top, #000 46px, transparent 66px);
+  }
+
+  &--failed {
+    background: color-mix(in srgb, var(--error) 9%, transparent);
+    color: var(--error);
+  }
+}
+
+.activity-row-more {
+  margin: 2px 0 6px 22px;
+  color: var(--secondary-text);
+  font-size: 11px;
+  opacity: 0.6;
+}
+
+.activity-row-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin: -7px 0 7px 22px;
+}
+
+.activity-row-chip {
+  max-width: 100%;
+  padding: 2px 6px;
+  border: 1px solid var(--card-border);
+  border-radius: 6px;
+  color: var(--secondary-text);
+  font-family: 'JetBrainsMono Nerd Font', ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &--more {
+    border-style: dashed;
+    opacity: 0.7;
+  }
+}
diff --git a/src/pages/chat/chat-bubble/components/ActivityRow.test.tsx b/src/pages/chat/chat-bubble/components/ActivityRow.test.tsx
new file mode 100644
index 0000000..7e9858a
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ActivityRow.test.tsx
@@ -0,0 +1,154 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { ActivityRowModel } from "../lib/activityRow";
+import ActivityRow from "./ActivityRow";
+
+afterEach(cleanup);
+
+const RAN: ActivityRowModel = {
+	kind: "execute",
+	verb: "Ran",
+	object: "Check branch state",
+	objectIsMono: false,
+	running: false,
+	failed: false,
+};
+
+describe("ActivityRow", () => {
+	it("renders the verb and the object", () => {
+		render(<ActivityRow row={RAN} />);
+		expect(screen.getByText("Ran")).toBeInTheDocument();
+		expect(screen.getByText("Check branch state")).toBeInTheDocument();
+	});
+
+	it("renders one line of output inline, without a peek block", () => {
+		const { container } = render(
+			<ActivityRow
+				row={RAN}
+				output={{
+					mode: "inline",
+					lines: ["7 entries"],
+					lineCount: 1,
+					needsFullView: false,
+				}}
+			/>,
+		);
+		expect(screen.getByText("7 entries")).toBeInTheDocument();
+		expect(container.querySelector(".activity-row-peek")).toBeNull();
+	});
+
+	it("renders a peek block with the line count for longer output", () => {
+		const { container } = render(
+			<ActivityRow
+				row={RAN}
+				output={{
+					mode: "peek",
+					lines: ["a", "b", "c"],
+					lineCount: 12,
+					needsFullView: true,
+					clipped: "bottom",
+				}}
+			/>,
+		);
+		expect(container.querySelector(".activity-row-peek")).not.toBeNull();
+		expect(screen.getByText("12 lines")).toBeInTheDocument();
+	});
+
+	it("keeps the result visible without expanding the row", () => {
+		// The whole point of the detail line: an outcome the reader does not have
+		// to tap for. It must not land inside the disclosure panel.
+		render(
+			<ActivityRow
+				row={RAN}
+				output={{
+					mode: "inline",
+					lines: ["7 entries"],
+					lineCount: 1,
+					needsFullView: false,
+				}}
+				stateKey="visible"
+			>
+				<div>details</div>
+			</ActivityRow>,
+		);
+		expect(screen.getByRole("button")).toHaveAttribute(
+			"aria-expanded",
+			"false",
+		);
+		expect(screen.getByText("7 entries")).toBeInTheDocument();
+	});
+
+	it("omits the verb for the other kind", () => {
+		render(
+			<ActivityRow
+				row={{
+					...RAN,
+					kind: "other",
+					verb: "",
+					object: "Load skill: superpowers:writing-plans",
+				}}
+			/>,
+		);
+		expect(screen.queryByText("Ran")).toBeNull();
+		expect(
+			screen.getByText("Load skill: superpowers:writing-plans"),
+		).toBeInTheDocument();
+	});
+
+	it("marks a failed row", () => {
+		const { container } = render(
+			<ActivityRow row={{ ...RAN, failed: true }} />,
+		);
+		expect(container.querySelector(".activity-row--failed")).not.toBeNull();
+	});
+
+	it("renders chips and the overflow count", () => {
+		render(
+			<ActivityRow row={RAN} chips={["one.md", "two.md"]} extraChips={3} />,
+		);
+		expect(screen.getByText("one.md")).toBeInTheDocument();
+		expect(screen.getByText("+3")).toBeInTheDocument();
+	});
+
+	it("exposes an expandable row as a button with its state", () => {
+		render(
+			<ActivityRow row={RAN} stateKey="k">
+				<div>details</div>
+			</ActivityRow>,
+		);
+		expect(screen.getByRole("button")).toHaveAttribute(
+			"aria-expanded",
+			"false",
+		);
+	});
+
+	it("opens a failed row by default so its output is visible", () => {
+		render(
+			<ActivityRow row={{ ...RAN, failed: true }} stateKey="k2">
+				<div>details</div>
+			</ActivityRow>,
+		);
+		expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+	});
+
+	it("keeps the unelided path in the accessibility tree", () => {
+		render(
+			<ActivityRow
+				row={{
+					...RAN,
+					kind: "read",
+					verb: "Read",
+					object: "…/adrs/04-tax-basis.md",
+					objectFull: "a/very/long/path/adrs/04-tax-basis.md",
+					objectIsMono: true,
+				}}
+			/>,
+		);
+		// The shortened form is hidden from assistive technology and the full
+		// path is rendered beside it, because a bare span has no role that
+		// supports `aria-label`.
+		expect(
+			screen.getByText("a/very/long/path/adrs/04-tax-basis.md"),
+		).toBeInTheDocument();
+	});
+});
diff --git a/src/pages/chat/chat-bubble/components/ActivityRow.tsx b/src/pages/chat/chat-bubble/components/ActivityRow.tsx
new file mode 100644
index 0000000..5db7d60
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ActivityRow.tsx
@@ -0,0 +1,180 @@
+import "./ActivityRow.scss";
+import type { ActivityKind, ActivityRowModel } from "../lib/activityRow";
+import type { OutputSummary } from "../lib/outputSummary";
+import ChatDisclosure from "./ChatDisclosure";
+import Status from "./Status";
+
+interface Props {
+	row: ActivityRowModel;
+	output?: OutputSummary | null;
+	/** Pre-formatted `+84 −12`, from a file_change diff. */
+	diffStat?: React.ReactNode;
+	chips?: string[];
+	extraChips?: number;
+	stateKey?: string;
+	/** When present the row expands; without it the row is static. */
+	children?: React.ReactNode;
+}
+
+export default function ActivityRow({
+	row,
+	output,
+	diffStat,
+	chips,
+	extraChips = 0,
+	stateKey,
+	children,
+}: Props) {
+	const className = `activity-row${row.failed ? " activity-row--failed" : ""}${
+		row.running ? " activity-row--running" : ""
+	}`;
+	// A failure's output is the reason to look at it, so the row starts open —
+	// and then the peek would only repeat what is expanded right underneath it.
+	const startsOpen = Boolean(children) && row.failed;
+
+	const summary = (
+		<>
+			<span
+				className={`${activityIcon(row.kind)} activity-row-icon`}
+				aria-hidden="true"
+			/>
+			<span className="activity-row-label">
+				{row.verb ? <strong>{row.verb}</strong> : null}
+				{row.object ? (
+					<span
+						className={
+							row.objectIsMono
+								? "activity-row-object activity-row-object--mono"
+								: "activity-row-object"
+						}
+					>
+						{isElided(row.object, row.objectFull) ? (
+							<>
+								{/* The value was shortened in JS, so the full string has left
+								    the DOM and a screen reader would otherwise hear the short
+								    form too. `aria-label` is not an option here: a bare span
+								    has no role that supports a name, so the full text is
+								    rendered and hidden visually instead. A wrapped
+								    description needs neither: its text is all still there,
+								    only clamped by CSS. */}
+								<span aria-hidden="true">{row.object}</span>
+								<span className="activity-row-object-full">
+									{row.objectFull}
+								</span>
+							</>
+						) : (
+							row.object
+						)}
+					</span>
+				) : null}
+			</span>
+			<span className="activity-row-status">
+				<Status
+					status={
+						row.running ? "in_progress" : row.failed ? "failed" : "completed"
+					}
+				/>
+			</span>
+		</>
+	);
+
+	// The result sits beside the row, never inside the disclosure panel: an
+	// outcome the reader has to tap for is an outcome they will not see.
+	const body = (
+		<>
+			{diffStat ? <div className="activity-row-detail">{diffStat}</div> : null}
+			{!startsOpen && output?.mode === "inline"
+				? output.lines.map((line, index) => (
+						<div
+							className="activity-row-detail activity-row-detail--mono"
+							// biome-ignore lint/suspicious/noArrayIndexKey: the summary is recomputed wholesale from one output string, so a line's position is its identity and nothing ever reorders
+							key={`${index}-${line}`}
+						>
+							{line}
+						</div>
+					))
+				: null}
+			{!startsOpen && output?.mode === "peek" ? (
+				<>
+					<pre
+						className={`activity-row-peek${
+							row.failed ? " activity-row-peek--failed" : ""
+						}${output.clipped === "top" ? " activity-row-peek--clipped-top" : ""}`}
+					>
+						{output.lines.join("\n")}
+					</pre>
+					<div className="activity-row-more">{`${output.lineCount} lines`}</div>
+				</>
+			) : null}
+			{/* Chips are display-only. Making them tappable would add a third
+			    disclosure level (Nielsen caps it at two) and create a sub-target
+			    below the 24 CSS px of WCAG SC 2.5.8. */}
+			{chips?.length ? (
+				<div className="activity-row-chips">
+					{chips.map((chip, index) => (
+						<span
+							// biome-ignore lint/suspicious/noArrayIndexKey: chips come from one folded run and are positional; two files can share a basename, so the value alone is not a key
+							key={`${index}-${chip}`}
+							className="activity-row-chip"
+						>
+							{chip}
+						</span>
+					))}
+					{extraChips > 0 ? (
+						<span className="activity-row-chip activity-row-chip--more">{`+${extraChips}`}</span>
+					) : null}
+				</div>
+			) : null}
+		</>
+	);
+
+	if (!children) {
+		return (
+			<div className={className}>
+				<div className="chat-part-card-title">{summary}</div>
+				{body}
+			</div>
+		);
+	}
+
+	// A failure's output is the reason to look at it, so it starts open.
+	return (
+		<div className={className}>
+			<ChatDisclosure
+				card={false}
+				stateKey={stateKey}
+				defaultOpen={startsOpen}
+				summary={summary}
+			>
+				{children}
+			</ChatDisclosure>
+			{body}
+		</div>
+	);
+}
+
+/** Whether the visible object lost characters the reader would still need. */
+function isElided(object: string, full: string | undefined): boolean {
+	return Boolean(full) && full !== object;
+}
+
+function activityIcon(kind: ActivityKind) {
+	switch (kind) {
+		case "execute":
+			return "icon-terminal";
+		case "read":
+			return "icon-eye";
+		case "change":
+			return "icon-edit";
+		case "search":
+			return "icon-search";
+		case "fetch":
+			return "icon-globe";
+		case "think":
+			return "icon-cpu";
+		case "switch_mode":
+			return "icon-settings";
+		default:
+			return "icon-tool";
+	}
+}
diff --git a/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx b/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
index a30030d..6dfb8b2 100644
--- a/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
+++ b/src/pages/chat/chat-bubble/components/ToolCallContentView.tsx
@@ -1,54 +1,46 @@
-import { type ActivityKind, deriveActivityRow } from "../lib/activityRow";
+import type { AiBackend } from "@shellular/protocol";
+import { deriveActivityRow } from "../lib/activityRow";
 import {
 	formatPartValue,
 	getToolCallContentParts,
 	type ToolCallPart,
 } from "../lib/messageParts";
+import { summarizeToolOutput } from "../lib/outputSummary";
 import { getRenderPartKey } from "../lib/utils";
-import ChatDisclosure from "./ChatDisclosure";
+import ActivityRow from "./ActivityRow";
 import MessagePartView from "./MessagePartView";
-import Status from "./Status";
 import ToolOutputView from "./ToolOutputView";
 
-export default function ToolCallContentView({ part }: { part: ToolCallPart }) {
+/**
+ * A thin adapter: derive the row, summarise the output, hand both to
+ * `ActivityRow`. Every decision about what the row says lives in `lib/`, so
+ * this component only decides whether to render.
+ */
+export default function ToolCallContentView({
+	part,
+	backend,
+}: {
+	part: ToolCallPart;
+	backend?: AiBackend;
+}) {
+	const row = deriveActivityRow(part, backend);
 	const parts = getToolCallContentParts(part);
-	const locations = readToolLocations(part);
-	const row = deriveActivityRow(part);
-	const hasDetails = Boolean(
-		part.output || part.arguments || parts.length || locations.length,
-	);
-	const summary = (
-		<>
-			<span
-				className={`${activityIcon(row.kind)} chat-work-row-icon`}
-				aria-hidden="true"
-			/>
-			<span className="chat-work-row-label">
-				{row.verb ? <strong>{row.verb}</strong> : null}
-				{row.object ? <span> {row.object}</span> : null}
-			</span>
-			<span className="chat-work-row-status">
-				<Status status={part.status} />
-			</span>
-		</>
-	);
+	const output = summarizeToolOutput(part.output, {
+		failed: row.failed,
+		running: row.running,
+	});
+	const hasDetails = Boolean(part.output || part.arguments || parts.length);
+
 	if (!hasDetails) {
-		return (
-			<div className={`chat-work-row ${statusModifier(part.status) ?? ""}`}>
-				<div className="chat-part-card-title">{summary}</div>
-			</div>
-		);
+		return <ActivityRow row={row} output={output} />;
 	}
+
 	const contentParts = part.output
 		? parts.filter(({ type }) => type === "file_change")
 		: parts;
+
 	return (
-		<ChatDisclosure
-			className={`chat-work-row ${statusModifier(part.status) ?? ""}`}
-			card={false}
-			summary={summary}
-		>
-			<ToolLocations locations={locations} />
+		<ActivityRow row={row} output={output} stateKey={part.id}>
 			{part.output ? (
 				<ToolOutputView
 					title={part.title || row.verb || "Output"}
@@ -67,89 +59,6 @@ export default function ToolCallContentView({ part }: { part: ToolCallPart }) {
 					part={contentPart}
 				/>
 			))}
-		</ChatDisclosure>
-	);
-}
-
-function activityIcon(kind: ActivityKind) {
-	switch (kind) {
-		case "execute":
-			return "icon-terminal";
-		case "read":
-			return "icon-eye";
-		case "change":
-			return "icon-edit";
-		case "search":
-			return "icon-search";
-		case "fetch":
-			return "icon-globe";
-		case "think":
-			return "icon-cpu";
-		case "switch_mode":
-			return "icon-settings";
-		default:
-			return "icon-tool";
-	}
-}
-
-/**
- * Terminal-state accent for a tool card. Only failures and in-flight calls get
- * a tint — marking every success green would make a normal run look like a
- * christmas tree.
- */
-function statusModifier(status?: string): string | undefined {
-	if (status === "failed" || status === "fail") {
-		return "chat-part-card--failed";
-	}
-	if (status === "in_progress" || status === "pending") {
-		return "chat-part-card--running";
-	}
-	return undefined;
-}
-
-interface ToolLocation {
-	path: string;
-	line?: number | null;
-}
-
-/**
- * ACP tool-call "follow-along" locations: the files a tool is touching.
- * Rendered as compact path chips under the tool card.
- */
-function ToolLocations({ locations }: { locations: ToolLocation[] }) {
-	if (locations.length === 0) return null;
-	return (
-		<div className="flex flex-wrap gap-1 px-1 py-0.5">
-			{locations.map((location) => {
-				const name = location.path.split("/").pop() || location.path;
-				const label =
-					typeof location.line === "number" ? `${name}:${location.line}` : name;
-				return (
-					<span
-						key={`${location.path}:${location.line ?? ""}`}
-						title={location.path}
-						className="rounded-md border border-(--card-border) px-1.5 py-0.5 font-mono text-xs text-(--secondary-text)"
-					>
-						{label}
-					</span>
-				);
-			})}
-		</div>
+		</ActivityRow>
 	);
 }
-
-function readToolLocations(part: ToolCallPart): ToolLocation[] {
-	const raw = (part as { locations?: unknown }).locations;
-	if (!Array.isArray(raw)) return [];
-	return raw.flatMap((item) => {
-		if (!item || typeof item !== "object") return [];
-		const record = item as Record<string, unknown>;
-		if (typeof record.path !== "string" || !record.path) return [];
-		return [
-			{
-				path: record.path,
-				line: typeof record.line === "number" ? record.line : undefined,
-			},
-		];
-	});
-}
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.scss b/src/pages/chat/chat-bubble/components/WorkLogView.scss
index f21b478..2670381 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.scss
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.scss
@@ -87,110 +87,6 @@
   min-width: 0;
 }
 
-.chat-work-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  overflow: visible !important;
-  color: var(--secondary-text);
-
-  >.chat-part-card-title {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    width: 100%;
-    min-width: 0;
-    min-height: 31px;
-    padding: 5px 2px;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    font-size: 12px;
-    text-align: left;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-
-    >em {
-      margin-left: 1px;
-      color: var(--secondary-text);
-      font-style: normal;
-      font-size: 10px;
-      opacity: 0.52;
-      flex-shrink: 0;
-    }
-  }
-
-  >.chat-disclosure-panel {
-    flex: 0 0 calc(100% - 21px);
-    width: calc(100% - 21px);
-    min-width: 0;
-    margin-left: 21px;
-
-    >.chat-disclosure-panel-inner {
-      margin: 1px 0 5px;
-      border-radius: 7px;
-      background: var(--surface-soft);
-    }
-  }
-
-  &.chat-part-card--failed {
-    color: var(--error);
-  }
-
-  &.chat-part-card--running .chat-work-row-icon {
-    color: var(--accent);
-  }
-
-  .icon-check {
-    color: currentColor !important;
-    opacity: 0.62;
-  }
-}
-
-.chat-work-row-icon {
-  width: 15px;
-  color: var(--secondary-text);
-  font-size: 13px;
-  text-align: center;
-  opacity: 0.72;
-  flex-shrink: 0;
-}
-
-.chat-work-row-label {
-  display: flex;
-  align-items: baseline;
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  white-space: nowrap;
-
-  strong {
-    color: var(--primary-text);
-    font-weight: 600;
-    flex-shrink: 0;
-  }
-
-  >span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    opacity: 0.72;
-  }
-}
-
-.chat-work-row-status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 13px;
-  flex-shrink: 0;
-}
-
 .chat-work-row-arguments {
   margin: 0;
   padding: 8px 10px;
@@ -215,13 +111,15 @@
   }
 }
 
-.chat-work-log-previous {
+.chat-work-log-earlier {
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
   gap: 8px;
-  min-height: 31px;
-  margin: 1px 0 1px 2px;
+  // 48px is the highest of the three platform touch-target floors, so one
+  // number satisfies WCAG SC 2.5.8, Apple and Material at once.
+  min-height: 48px;
+  margin: 0 0 2px 2px;
   padding: 4px 5px 4px 1px;
   border: 0;
   border-radius: 6px;
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
index 766127b..ce7039e 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
@@ -38,18 +38,29 @@ function tool(
 	} as ToolCallPart;
 }
 
+function command(
+	id: string,
+	description: string,
+	status = "completed",
+): Extract<AcpMessagePart, { type: "tool_call" }> {
+	return {
+		type: "tool_call",
+		id,
+		name: "execute",
+		status,
+		title: description,
+		arguments: JSON.stringify({ command: "true", description }),
+	} as ToolCallPart;
+}
+
 describe("WorkLogView", () => {
-	it("groups only consecutive live tool calls into independent bursts", () => {
+	it("shows every step of a burst, not only the latest one", () => {
 		render(
 			<WorkLogView
 				parts={[
-					{ type: "text", text: "I’ll inspect the message pipeline." },
-					tool("one", "read", "src/one.ts"),
-					tool("two", "read", "src/two.ts"),
-					tool("three", "read", "src/three.ts"),
-					{ type: "text", text: "I found the renderer." },
-					tool("four", "read", "src/four.ts"),
-					tool("five", "read", "src/five.ts"),
+					command("one", "Check branch state"),
+					command("two", "List the ADRs"),
+					command("three", "Read the README"),
 				]}
 				streaming
 				stateKey="live-turn"
@@ -57,53 +68,103 @@ describe("WorkLogView", () => {
 			/>,
 		);
 
+		expect(screen.getByText("Check branch state")).toBeTruthy();
+		expect(screen.getByText("List the ADRs")).toBeTruthy();
+		expect(screen.getByText("Read the README")).toBeTruthy();
+		expect(screen.queryByText(/previous tool call/)).toBeNull();
+	});
+
+	it("keeps consecutive actions in independent bursts around commentary", () => {
+		render(
+			<WorkLogView
+				parts={[
+					{ type: "text", text: "I’ll inspect the message pipeline." },
+					command("one", "Check branch state"),
+					{ type: "text", text: "I found the renderer." },
+					command("two", "Read the README"),
+				]}
+				streaming
+				stateKey="bursts"
+			/>,
+		);
+
 		expect(screen.getByText("I’ll inspect the message pipeline.")).toBeTruthy();
-		expect(screen.getByText(/src\/three\.ts/)).toBeTruthy();
 		expect(screen.getByText("I found the renderer.")).toBeTruthy();
-		expect(screen.getByText(/src\/five\.ts/)).toBeTruthy();
-		expect(screen.queryByText(/src\/one\.ts/)).toBeNull();
-		expect(screen.queryByText(/src\/four\.ts/)).toBeNull();
-		const firstBurst = screen.getByRole("button", {
-			name: "+2 previous tool calls",
-		});
-		expect(
-			screen.getByRole("button", { name: "+1 previous tool call" }),
-		).toBeTruthy();
-		fireEvent.click(firstBurst);
-		const oldestTool = screen.getByText(/src\/one\.ts/);
-		const showFewer = screen.getByRole("button", {
-			name: "Show fewer tool calls",
-		});
-		expect(
-			oldestTool.compareDocumentPosition(showFewer) &
-				Node.DOCUMENT_POSITION_FOLLOWING,
-		).toBeTruthy();
-		expect(
-			screen.queryByRole("button", { name: "Hide previous tool calls" }),
-		).toBeNull();
-		// Revealing one burst must not flatten or reveal the later burst.
-		expect(screen.queryByText(/src\/four\.ts/)).toBeNull();
+		expect(screen.getByText("Check branch state")).toBeTruthy();
+		expect(screen.getByText("Read the README")).toBeTruthy();
 	});
+});
 
-	it("preserves per-burst grouping inside the settled duration fold", () => {
+describe("work log windowing", () => {
+	it("shows the newest rows and hides the rest behind one control", () => {
+		const parts = Array.from({ length: 10 }, (_, index) =>
+			command(`t-${index}`, `Step ${index}`),
+		);
+		render(<WorkLogView parts={parts} streaming stateKey="w" />);
+		expect(screen.getByText("4 earlier steps")).toBeInTheDocument();
+		expect(screen.getByText("Step 9")).toBeInTheDocument();
+		expect(screen.queryByText("Step 0")).toBeNull();
+		expect(screen.queryByText(/previous tool calls/)).toBeNull();
+	});
+
+	it("expands the hidden rows when the control is pressed", () => {
+		const parts = Array.from({ length: 10 }, (_, index) =>
+			command(`t-${index}`, `Step ${index}`),
+		);
+		render(<WorkLogView parts={parts} streaming stateKey="w" />);
+		fireEvent.click(screen.getByText("4 earlier steps"));
+		expect(screen.queryByText("4 earlier steps")).toBeNull();
+		expect(screen.getByText("Step 0")).toBeInTheDocument();
+	});
+});
+
+describe("work log folding", () => {
+	it("folds a run of file reads into one row with basename chips", () => {
 		render(
 			<WorkLogView
 				parts={[
-					tool("one", "read", "src/one.ts"),
-					tool("two", "read", "src/two.ts"),
-					{ type: "text", text: "Now I’ll verify it." },
-					tool("three", "read", "src/three.ts"),
-					tool("four", "read", "src/four.ts"),
+					tool("one", "read", "src/lib/one.ts"),
+					tool("two", "read", "src/lib/two.ts"),
+					tool("three", "read", "src/lib/three.ts"),
 				]}
+				streaming
+				stateKey="fold"
+			/>,
+		);
+		expect(screen.getByText("Read 3 files")).toBeInTheDocument();
+		expect(screen.getByText("one.ts")).toBeInTheDocument();
+		expect(screen.getByText("three.ts")).toBeInTheDocument();
+	});
+
+	it("never folds a run of commands, because each carries its own sentence", () => {
+		render(
+			<WorkLogView
+				parts={[
+					command("one", "Check branch state"),
+					command("two", "List the ADRs"),
+					command("three", "Read the README"),
+				]}
+				streaming
+				stateKey="no-fold"
+			/>,
+		);
+		expect(screen.queryByText(/Ran 3/)).toBeNull();
+		expect(screen.getByText("Check branch state")).toBeInTheDocument();
+	});
+});
+
+describe("settled work log", () => {
+	it("folds a settled turn behind its duration", () => {
+		render(
+			<WorkLogView
+				parts={[command("one", "Check branch state")]}
 				streaming={false}
 				stateKey="settled-turn"
 				durationMs={8_250}
 			/>,
 		);
 
-		const summary = screen.getByRole("button", {
-			name: /Worked for 8\.3s/,
-		});
+		const summary = screen.getByRole("button", { name: /Worked for 8\.3s/ });
 		expect(summary.getAttribute("aria-expanded")).toBe("false");
 		const panel = summary.parentElement?.querySelector(
 			".chat-disclosure-panel",
@@ -111,17 +172,7 @@ describe("WorkLogView", () => {
 		expect(panel?.getAttribute("aria-hidden")).toBe("true");
 		fireEvent.click(summary);
 		expect(panel?.getAttribute("aria-hidden")).toBe("false");
-		expect(screen.getByText(/src\/two\.ts/)).toBeTruthy();
-		expect(screen.getByText(/src\/four\.ts/)).toBeTruthy();
-		expect(screen.queryByText(/src\/one\.ts/)).toBeNull();
-		const burstToggles = screen.getAllByRole("button", {
-			name: "+1 previous tool call",
-		});
-		expect(burstToggles).toHaveLength(2);
-		fireEvent.click(burstToggles[0]);
-		expect(screen.getByText(/src\/one\.ts/)).toBeTruthy();
-		expect(screen.queryByText(/src\/three\.ts/)).toBeNull();
-		expect(summary.textContent).not.toContain("tool call");
+		expect(screen.getByText("Check branch state")).toBeTruthy();
 	});
 
 	it("keeps file-change activities available in the expanded work log", () => {
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
index b14d6b5..8a9cd45 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
@@ -1,6 +1,7 @@
 import "./WorkLogView.scss";
-import type { AcpMessagePart } from "@shellular/protocol";
+import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { deriveActivityRow } from "../lib/activityRow";
 import { messagePartsToMarkdown, type ToolCallPart } from "../lib/messageParts";
 import { getRenderPartKey } from "../lib/utils";
 import {
@@ -8,10 +9,18 @@ import {
 	groupWorkLogParts,
 	type WorkLogGroup,
 } from "../lib/workLog";
+import {
+	foldPathRuns,
+	mergeSameFileRuns,
+	type WorkLogRow,
+	windowRows,
+} from "../lib/workLogLayout";
+import ActivityRow from "./ActivityRow";
 import ChatDisclosure from "./ChatDisclosure";
 import MarkdownPart from "./MarkdownPart";
 import MessagePartView from "./MessagePartView";
 import ToolCallContentView from "./ToolCallContentView";
+import { useWorkLogWindowSize } from "./useWorkLogWindowSize";
 
 interface WorkLogViewProps {
 	parts: AcpMessagePart[];
@@ -19,6 +28,8 @@ interface WorkLogViewProps {
 	stateKey: string;
 	startedAt?: number;
 	durationMs?: number;
+	/** Which agent produced these parts; the row objects resolve per agent. */
+	backend?: AiBackend;
 }
 
 const WorkLogView = memo(function WorkLogView({
@@ -27,7 +38,9 @@ const WorkLogView = memo(function WorkLogView({
 	stateKey,
 	startedAt,
 	durationMs,
+	backend,
 }: WorkLogViewProps) {
+	const windowSize = useWorkLogWindowSize();
 	const visibleParts = useMemo(
 		() => parts.filter((part) => shouldRenderWorkPart(part, streaming)),
 		[parts, streaming],
@@ -42,7 +55,12 @@ const WorkLogView = memo(function WorkLogView({
 				className="chat-work-log chat-work-log--live"
 				aria-label="Work log"
 			>
-				<WorkLogGroups groups={groups} keyPrefix={`${stateKey}-live`} />
+				<WorkLogGroups
+					groups={groups}
+					keyPrefix={`${stateKey}-live`}
+					windowSize={windowSize}
+					backend={backend}
+				/>
 				<WorkingTimer startedAt={startedAt} />
 			</section>
 		);
@@ -70,7 +88,12 @@ const WorkLogView = memo(function WorkLogView({
 			}
 		>
 			<div className="chat-work-log-list">
-				<WorkLogGroups groups={groups} keyPrefix={`${stateKey}-settled`} />
+				<WorkLogGroups
+					groups={groups}
+					keyPrefix={`${stateKey}-settled`}
+					windowSize={windowSize}
+					backend={backend}
+				/>
 			</div>
 		</ChatDisclosure>
 	);
@@ -81,9 +104,13 @@ export default WorkLogView;
 function WorkLogGroups({
 	groups,
 	keyPrefix,
+	windowSize,
+	backend,
 }: {
 	groups: WorkLogGroup[];
 	keyPrefix: string;
+	windowSize: number;
+	backend?: AiBackend;
 }) {
 	return groups.map((group, index) => {
 		const firstPart = group.kind === "actions" ? group.parts[0] : group.part;
@@ -94,65 +121,130 @@ function WorkLogGroups({
 					key={groupKey}
 					parts={group.parts}
 					stateKey={groupKey}
+					windowSize={windowSize}
+					backend={backend}
 				/>
 			);
 		}
 		return (
-			<WorkPartList key={groupKey} parts={[group.part]} keyPrefix={groupKey} />
+			<WorkPartList
+				key={groupKey}
+				parts={[group.part]}
+				keyPrefix={groupKey}
+				backend={backend}
+			/>
 		);
 	});
 }
 
+/**
+ * The full trail, newest-last, with anything past the window behind one control
+ * at the top. Showing only the latest action while eight have run is the
+ * behaviour users report as confusing; the window replaces it, and the
+ * latest-only view survives as a `windowSize` of 1 rather than a second path.
+ */
 function WorkActionGroup({
 	parts,
 	stateKey,
+	windowSize,
+	backend,
 }: {
 	parts: AcpMessagePart[];
 	stateKey: string;
+	windowSize: number;
+	backend?: AiBackend;
 }) {
-	const [showPrevious, setShowPrevious] = useState(false);
-	const previousCount = Math.max(0, parts.length - 1);
-	const latestPart = parts[parts.length - 1];
-	const previousParts = showPrevious ? parts.slice(0, -1).reverse() : [];
-	if (!latestPart) return null;
+	const [expanded, setExpanded] = useState(false);
+	const rows = useMemo(
+		() => foldPathRuns(mergeSameFileRuns(parts, backend), backend),
+		[parts, backend],
+	);
+	const layout = useMemo(
+		() => (expanded ? { hidden: 0, rows } : windowRows(rows, windowSize)),
+		[rows, expanded, windowSize],
+	);
 
 	return (
 		<div className="chat-work-action-group">
-			<WorkPartList parts={[latestPart]} keyPrefix={`${stateKey}-latest`} />
-			{previousParts.length > 0 ? (
-				<WorkPartList
-					parts={previousParts}
-					keyPrefix={`${stateKey}-previous`}
-				/>
-			) : null}
-			{previousCount > 0 ? (
+			{layout.hidden > 0 ? (
 				<button
 					type="button"
-					className="chat-work-log-previous"
-					aria-expanded={showPrevious}
-					onClick={() => setShowPrevious((value) => !value)}
+					className="chat-work-log-earlier"
+					aria-expanded={false}
+					onClick={() => setExpanded(true)}
 				>
-					<span
-						className={`icon-chevron-${showPrevious ? "up" : "down"}`}
-						aria-hidden="true"
-					/>
+					<span className="icon-chevron-down" aria-hidden="true" />
 					<span>
-						{showPrevious
-							? "Show fewer tool calls"
-							: `+${previousCount} previous tool ${previousCount === 1 ? "call" : "calls"}`}
+						{`${layout.hidden} earlier ${layout.hidden === 1 ? "step" : "steps"}`}
 					</span>
 				</button>
 			) : null}
+			{layout.rows.map((row, index) => (
+				<WorkLogRowView
+					// biome-ignore lint/suspicious/noArrayIndexKey: the window is recomputed wholesale from the parts array, so a row's position is its identity and a folded row has no id of its own
+					key={`${stateKey}-${index}-${rowKey(row, index)}`}
+					row={row}
+					stateKey={`${stateKey}-${index}`}
+					backend={backend}
+				/>
+			))}
 		</div>
 	);
 }
 
+function rowKey(row: WorkLogRow, index: number): string {
+	return row.kind === "part"
+		? getRenderPartKey(row.part, index)
+		: `folded-${row.parts.length}`;
+}
+
+function WorkLogRowView({
+	row,
+	stateKey,
+	backend,
+}: {
+	row: WorkLogRow;
+	stateKey: string;
+	backend?: AiBackend;
+}) {
+	if (row.kind === "part") {
+		return (
+			<WorkPartList parts={[row.part]} keyPrefix={stateKey} backend={backend} />
+		);
+	}
+	const chips = row.parts
+		.map((part) => {
+			const object = deriveActivityRow(part, backend).object ?? "";
+			return object.slice(object.lastIndexOf("/") + 1);
+		})
+		.filter(Boolean);
+	return (
+		<ActivityRow
+			row={{
+				kind:
+					row.parts.length > 0
+						? deriveActivityRow(row.parts[0], backend).kind
+						: "other",
+				verb: row.verb,
+				object: row.directory,
+				objectIsMono: true,
+				running: false,
+				failed: false,
+			}}
+			chips={chips.slice(0, 3)}
+			extraChips={Math.max(0, chips.length - 3)}
+		/>
+	);
+}
+
 function WorkPartList({
 	parts,
 	keyPrefix,
+	backend,
 }: {
 	parts: AcpMessagePart[];
 	keyPrefix: string;
+	backend?: AiBackend;
 }) {
 	return parts.map((part, index) => {
 		if (part.type === "text") {
@@ -170,6 +262,7 @@ function WorkPartList({
 				<ToolCallContentView
 					key={`${keyPrefix}-${getRenderPartKey(part, index)}`}
 					part={part}
+					backend={backend}
 				/>
 			);
 		}
@@ -177,6 +270,7 @@ function WorkPartList({
 			return (
 				<ToolCallContentView
 					key={`${keyPrefix}-${getRenderPartKey(part, index)}`}
+					backend={backend}
 					part={
 						{
 							type: "tool_call",
@@ -197,6 +291,7 @@ function WorkPartList({
 			return (
 				<ToolCallContentView
 					key={`${keyPrefix}-${getRenderPartKey(part, index)}`}
+					backend={backend}
 					part={
 						{
 							type: "tool_call",
diff --git a/src/pages/chat/chat-bubble/components/useWorkLogWindowSize.ts b/src/pages/chat/chat-bubble/components/useWorkLogWindowSize.ts
new file mode 100644
index 0000000..b84216f
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/useWorkLogWindowSize.ts
@@ -0,0 +1,33 @@
+import { loadSettings, SETTINGS_CHANGED_EVENT } from "lib/settings";
+import { useEffect, useState } from "react";
+import { WINDOW_SIZE } from "../lib/workLogLayout";
+
+/**
+ * How many work rows stay on screen before the rest go behind the "N earlier
+ * steps" control. The old latest-only view survives as a value of one rather
+ * than as a second rendering path, so there is nothing extra to keep in sync.
+ */
+export function useWorkLogWindowSize(): number {
+	const [size, setSize] = useState(WINDOW_SIZE);
+
+	useEffect(() => {
+		let mounted = true;
+		const apply = (showEveryStep: boolean) => {
+			if (mounted) setSize(showEveryStep ? WINDOW_SIZE : 1);
+		};
+		void loadSettings()
+			.then((settings) => apply(settings.chat.showEveryStep))
+			.catch(() => {});
+		const onSettingsChanged = (event: Event) => {
+			const settings = (event as CustomEvent).detail;
+			if (settings?.chat) apply(Boolean(settings.chat.showEveryStep));
+		};
+		window.addEventListener(SETTINGS_CHANGED_EVENT, onSettingsChanged);
+		return () => {
+			mounted = false;
+			window.removeEventListener(SETTINGS_CHANGED_EVENT, onSettingsChanged);
+		};
+	}, []);
+
+	return size;
+}
diff --git a/src/pages/chat/chat-bubble/index.tsx b/src/pages/chat/chat-bubble/index.tsx
index 2f85a3d..e22d24f 100644
--- a/src/pages/chat/chat-bubble/index.tsx
+++ b/src/pages/chat/chat-bubble/index.tsx
@@ -1,5 +1,5 @@
 import "./style.scss";
-import type { AcpMessagePart } from "@shellular/protocol";
+import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
 import Mascot from "components/Mascot";
 import CopyButton from "./components/CopyButton";
 import MessagePartView from "./components/MessagePartView";
@@ -36,6 +36,11 @@ interface ChatBubbleProps {
 	statusLabel?: string;
 	/** Turn-level work projected out of the terminal assistant answer. */
 	workParts?: AcpMessagePart[];
+	/**
+	 * Which agent produced this turn. Row objects resolve per agent, because
+	 * the argument key that names a call is the agent's own convention.
+	 */
+	backend?: AiBackend;
 	workStartedAt?: number;
 	workDurationMs?: number;
 }
@@ -54,6 +59,7 @@ export default function ChatBubble({
 	workParts = [],
 	workStartedAt,
 	workDurationMs,
+	backend,
 }: ChatBubbleProps) {
 	// Just the answer: reasoning and tool calls are folded away on screen and
 	// carry their own copy buttons, so including them here would bury the reply
@@ -76,6 +82,7 @@ export default function ChatBubble({
 					stateKey={`${messageKey}-work`}
 					startedAt={workStartedAt}
 					durationMs={workDurationMs}
+					backend={backend}
 				/>
 			) : null}
 			{parts.length > 0 ? (
diff --git a/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts b/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
index 2698a82..a10eb58 100644
--- a/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
+++ b/src/pages/chat/chat-bubble/lib/workLogLayout.test.ts
@@ -87,6 +87,21 @@ describe("foldPathRuns", () => {
 		expect(rows.every((row) => row.kind === "part")).toBe(true);
 	});
 
+	it("finds the shared directory even when eliding trims the paths differently", () => {
+		// The elided form keeps as much of the tail as fits, so a longer basename
+		// buys a shorter prefix. Comparing the display strings finds no shared
+		// directory at all; comparing the real paths does.
+		const directory = "backends/real-commerce/.ai/concepts/2026-07-04/adrs";
+		const rows = foldPathRuns([
+			read(`${directory}/01-scope.md`),
+			read(`${directory}/02-model.md`),
+			read(`${directory}/04-tax-basis.md`),
+		]);
+		expect((rows[0] as { directory?: string }).directory).toContain(
+			"2026-07-04/adrs",
+		);
+	});
+
 	it("drops the shared directory when the paths do not share one", () => {
 		const rows = foldPathRuns([
 			read("a/one.md"),
diff --git a/src/pages/chat/chat-bubble/lib/workLogLayout.ts b/src/pages/chat/chat-bubble/lib/workLogLayout.ts
index 8568c35..4aeb558 100644
--- a/src/pages/chat/chat-bubble/lib/workLogLayout.ts
+++ b/src/pages/chat/chat-bubble/lib/workLogLayout.ts
@@ -1,5 +1,6 @@
 import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
 import { type ActivityKind, deriveActivityRow } from "./activityRow";
+import { elidePath } from "./elide";
 import type { ToolCallPart } from "./messageParts";
 
 export type WorkLogRow =
@@ -166,13 +167,16 @@ function sharedDirectory(
 	parts: readonly ToolCallPart[],
 	backend?: AiBackend,
 ): string | undefined {
+	// Compare the real paths, not the elided ones: eliding keeps as much of the
+	// tail as fits, so two files in the same directory whose basenames differ in
+	// length end up with different visible prefixes and would never match.
 	const directories = parts.map((part) => {
-		const object = deriveActivityRow(part, backend).object ?? "";
-		const cut = object.lastIndexOf("/");
-		return cut > 0 ? object.slice(0, cut) : "";
+		const full = deriveActivityRow(part, backend).objectFull ?? "";
+		const cut = full.lastIndexOf("/");
+		return cut > 0 ? full.slice(0, cut) : "";
 	});
 	const first = directories[0];
 	return first && directories.every((value) => value === first)
-		? first
+		? elidePath(first)
 		: undefined;
 }
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index fd0bf02..fd92302 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -1748,6 +1748,7 @@ export default function ChatConversationPage({
 								workParts={workParts}
 								workStartedAt={workStartedAt}
 								workDurationMs={workDurationMs}
+								backend={agentId}
 								statusLabel={streamingStatusLabel}
 								streaming={
 									chatIsStreaming &&
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index c0606d7..77c1b89 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -294,6 +294,7 @@ export default function SettingsPage() {
 	);
 
 	const [hapticFeedback, setHapticFeedback] = useState(true);
+	const [showEveryStep, setShowEveryStep] = useState(true);
 	const [isSavingServer, setIsSavingServer] = useState(false);
 	const [testOnboarding, setTestOnboarding] = useState(false);
 
@@ -327,6 +328,7 @@ export default function SettingsPage() {
 			setTerminalScrollback(s.terminal.scrollback);
 			setTerminalLetterSpacing(s.terminal.letterSpacing);
 			setHapticFeedback(s.hapticFeedback);
+			setShowEveryStep(s.chat.showEveryStep);
 		});
 	}, []);
 
@@ -406,6 +408,11 @@ export default function SettingsPage() {
 		await persistSettings({ hapticFeedback: value });
 	}
 
+	async function handleShowEveryStepChange(value: boolean) {
+		setShowEveryStep(value);
+		await persistSettings({ chat: { showEveryStep: value } });
+	}
+
 	async function handleTestOnboardingChange(value: boolean) {
 		setTestOnboarding(value);
 		if (value) {
@@ -454,6 +461,10 @@ export default function SettingsPage() {
 			title: "Haptic Feedback",
 			description: "Vibrates on touch interactions.",
 		},
+		{
+			title: "Agent Work Log",
+			description: "Controls how many steps of a running turn stay visible.",
+		},
 	]);
 	const showEditorSettings = matchesSettingsSearch(searchQuery, [
 		{ title: "Font Size", description: "Controls the font size in pixels." },
@@ -605,6 +616,17 @@ export default function SettingsPage() {
 											/>
 										}
 									/>
+									<SettingsItem
+										title="Agent Work Log"
+										description="Show every step of a running turn. Off shows only the latest one."
+										control={
+											<Switch
+												label="Show every step"
+												checked={showEveryStep}
+												onChange={handleShowEveryStepChange}
+											/>
+										}
+									/>
 								</SettingsGroup>
 							</div>
 						)}

From 70aff44f7f6aac333f77bfa65490595e5b9db1b4 Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:22:35 +0200
Subject: [PATCH 03/10] fix(chat): replace the raw-command status line with a
 turn header

The live turn now names what the agent is doing, for how long, and where it
is going: a state word, the elapsed time, and the turn's latest commentary
promoted out of the rail. Four states, so waiting for a permission reads
differently from waiting for an answer.

This retires `streamingStatusLabel`, which pasted a tool title straight into
a sentence, and which had become unreachable anyway: it was non-empty only
when a tool call existed, and the line it fed rendered only when none did.

The timer moves here from the work log and gains its WCAG SC 2.2.2 branch:
under prefers-reduced-motion it refreshes once a minute with a coarse label
instead of ticking once a second.
---
 .../chat-bubble/components/TurnHeader.scss    |  89 +++++++++++++
 .../components/TurnHeader.test.tsx            | 117 ++++++++++++++++
 .../chat-bubble/components/TurnHeader.tsx     | 125 ++++++++++++++++++
 .../chat-bubble/components/WorkLogView.scss   |  53 --------
 .../components/WorkLogView.test.tsx           |   1 -
 .../chat-bubble/components/WorkLogView.tsx    |  40 +-----
 src/pages/chat/chat-bubble/index.test.tsx     |  81 ++++++++++++
 src/pages/chat/chat-bubble/index.tsx          |  40 +++---
 src/pages/chat/chat-bubble/style.scss         |  34 -----
 src/pages/chat/index.tsx                      |  44 +++---
 10 files changed, 455 insertions(+), 169 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/components/TurnHeader.scss
 create mode 100644 src/pages/chat/chat-bubble/components/TurnHeader.test.tsx
 create mode 100644 src/pages/chat/chat-bubble/components/TurnHeader.tsx
 create mode 100644 src/pages/chat/chat-bubble/index.test.tsx

diff --git a/src/pages/chat/chat-bubble/components/TurnHeader.scss b/src/pages/chat/chat-bubble/components/TurnHeader.scss
new file mode 100644
index 0000000..d420378
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/TurnHeader.scss
@@ -0,0 +1,89 @@
+.turn-header {
+  margin: 2px 0 10px;
+  padding-left: 11px;
+  border-left: 2px solid var(--accent);
+
+  &--failed {
+    border-left-color: var(--error);
+  }
+}
+
+.turn-header-state {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 24px;
+  color: var(--primary-text);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+.turn-header-icon {
+  color: var(--accent);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.turn-header--failed .turn-header-icon {
+  color: var(--error);
+}
+
+.turn-header-timer {
+  color: var(--secondary-text);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.7;
+}
+
+.turn-header-commentary {
+  display: flex;
+  gap: 8px;
+  padding: 4px 0 1px;
+  color: var(--secondary-text);
+  font-size: 12.5px;
+  line-height: 1.5;
+
+  >span:last-child {
+    min-width: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+.turn-header-quote {
+  margin-top: 3px;
+  color: var(--info);
+  font-size: 13px;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+// WCAG SC 2.2.2 (Level A): blinking that outlives five seconds needs a pause,
+// stop or hide mechanism, and an agent run always outlives five seconds. The
+// pulse is opacity-only, which SC 2.3.3 excludes from motion animation, and it
+// goes static when the user has asked for reduced motion. This block replaces
+// the one deleted from WorkLogView.scss; do not drop it.
+.turn-header--working .turn-header-icon {
+  animation: turn-header-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes turn-header-pulse {
+
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .turn-header--working .turn-header-icon {
+    animation: none;
+    opacity: 0.8;
+  }
+}
diff --git a/src/pages/chat/chat-bubble/components/TurnHeader.test.tsx b/src/pages/chat/chat-bubble/components/TurnHeader.test.tsx
new file mode 100644
index 0000000..423c59e
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/TurnHeader.test.tsx
@@ -0,0 +1,117 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import TurnHeader from "./TurnHeader";
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+	vi.restoreAllMocks();
+});
+
+describe("TurnHeader", () => {
+	it("names the agent and its state", () => {
+		render(<TurnHeader assistantName="Claude Code" state="working" />);
+		expect(screen.getByText("Claude Code is working")).toBeInTheDocument();
+	});
+
+	it("distinguishes a permission from a question", () => {
+		const { rerender } = render(
+			<TurnHeader assistantName="Claude Code" state="waiting-permission" />,
+		);
+		expect(
+			screen.getByText("Claude Code is waiting for permission"),
+		).toBeInTheDocument();
+		rerender(<TurnHeader assistantName="Claude Code" state="waiting-answer" />);
+		expect(
+			screen.getByText("Claude Code is waiting for your answer"),
+		).toBeInTheDocument();
+	});
+
+	it("names a failure without naming the agent", () => {
+		render(<TurnHeader assistantName="Claude Code" state="failed" />);
+		expect(screen.getByText("A command failed")).toBeInTheDocument();
+	});
+
+	it("renders the commentary line when there is one", () => {
+		render(
+			<TurnHeader
+				assistantName="Claude Code"
+				state="working"
+				commentary="The backfill already ran in production."
+			/>,
+		);
+		expect(
+			screen.getByText("The backfill already ran in production."),
+		).toBeInTheDocument();
+	});
+
+	it("omits the commentary line when there is none", () => {
+		const { container } = render(
+			<TurnHeader assistantName="Claude Code" state="working" />,
+		);
+		expect(container.querySelector(".turn-header-commentary")).toBeNull();
+	});
+
+	it("marks the timer as a timer, which is silent to assistive technology", () => {
+		// WAI-ARIA: role="timer" defaults to aria-live="off" while its siblings
+		// status and log default to polite. That default is the whole point.
+		const { container } = render(
+			<TurnHeader assistantName="Claude Code" state="working" />,
+		);
+		const timer = container.querySelector('[role="timer"]');
+		expect(timer).not.toBeNull();
+		expect(timer).toHaveAttribute("aria-live", "off");
+	});
+
+	it("marks the state word as a status region", () => {
+		const { container } = render(
+			<TurnHeader assistantName="Claude Code" state="working" />,
+		);
+		expect(container.querySelector('[role="status"]')).not.toBeNull();
+	});
+
+	it("stops ticking per second when the user asked for reduced motion", () => {
+		// WCAG SC 2.2.2 (Level A) covers auto-updating content and has no
+		// five-second exception. Honouring the existing reduced-motion signal is
+		// the "control the frequency of the update" branch of the criterion.
+		const matchMedia = vi.fn().mockImplementation((query: string) => ({
+			matches: query.includes("prefers-reduced-motion"),
+			media: query,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+		}));
+		vi.stubGlobal("matchMedia", matchMedia);
+		const setInterval = vi.spyOn(window, "setInterval");
+		render(
+			<TurnHeader
+				assistantName="Claude Code"
+				state="working"
+				startedAt={Date.now()}
+			/>,
+		);
+		// A once-a-minute refresh, not a once-a-second tick.
+		expect(setInterval).toHaveBeenCalledWith(expect.any(Function), 60_000);
+	});
+
+	it("ticks once a second when reduced motion was not asked for", () => {
+		vi.stubGlobal(
+			"matchMedia",
+			vi.fn().mockImplementation((query: string) => ({
+				matches: false,
+				media: query,
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+			})),
+		);
+		const setInterval = vi.spyOn(window, "setInterval");
+		render(
+			<TurnHeader
+				assistantName="Claude Code"
+				state="working"
+				startedAt={Date.now() - 72_000}
+			/>,
+		);
+		expect(setInterval).toHaveBeenCalledWith(expect.any(Function), 1_000);
+		expect(screen.getByRole("timer").textContent).toBe("1m 12s");
+	});
+});
diff --git a/src/pages/chat/chat-bubble/components/TurnHeader.tsx b/src/pages/chat/chat-bubble/components/TurnHeader.tsx
new file mode 100644
index 0000000..865a123
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/TurnHeader.tsx
@@ -0,0 +1,125 @@
+import "./TurnHeader.scss";
+import { useEffect, useRef } from "react";
+
+export type TurnState =
+	| "working"
+	| "waiting-permission"
+	| "waiting-answer"
+	| "failed";
+
+interface Props {
+	assistantName: string;
+	state: TurnState;
+	startedAt?: number;
+	commentary?: string;
+}
+
+const STATE_ICON: Record<TurnState, string> = {
+	working: "icon-tool",
+	"waiting-permission": "icon-alert-triangle",
+	"waiting-answer": "icon-message-circle",
+	failed: "icon-alert-triangle",
+};
+
+/**
+ * What the agent is doing, for how long, and where it is going. The running
+ * row underneath states what it is doing it *with*; pasting that tool title
+ * into a sentence here is what produced `Claude Code is cd "/home/jk/… &&
+ * for f in *.md; do echo …`.
+ */
+export default function TurnHeader({
+	assistantName,
+	state,
+	startedAt,
+	commentary,
+}: Props) {
+	return (
+		<section className={`turn-header turn-header--${state}`}>
+			<div className="turn-header-state">
+				<span
+					className={`${STATE_ICON[state]} turn-header-icon`}
+					aria-hidden="true"
+				/>
+				<span role="status">{stateLabel(assistantName, state)}</span>
+				<WorkingTimer startedAt={startedAt} />
+			</div>
+			{commentary ? (
+				<div className="turn-header-commentary">
+					<span
+						className="icon-message-circle turn-header-quote"
+						aria-hidden="true"
+					/>
+					<span>{commentary}</span>
+				</div>
+			) : null}
+		</section>
+	);
+}
+
+function stateLabel(assistantName: string, state: TurnState): string {
+	switch (state) {
+		case "waiting-permission":
+			return `${assistantName} is waiting for permission`;
+		case "waiting-answer":
+			return `${assistantName} is waiting for your answer`;
+		case "failed":
+			return "A command failed";
+		default:
+			return `${assistantName} is working`;
+	}
+}
+
+/**
+ * Isolated self-ticking label: the transcript does not re-render each second.
+ *
+ * `role="timer"` is deliberate. Its implicit `aria-live` is `off`, unlike its
+ * siblings `status` and `log`, so the counter can be marked up semantically
+ * without a screen reader reading it aloud every second.
+ *
+ * The reduced-motion branch is a WCAG SC 2.2.2 (Level A) requirement, not a
+ * nicety: a per-second counter is auto-updating content presented in parallel
+ * with other content, and the criterion has no five-second exception. Dropping
+ * to a once-a-minute coarse label is the "control the frequency" branch.
+ */
+function WorkingTimer({ startedAt }: { startedAt?: number }) {
+	const labelRef = useRef<HTMLSpanElement>(null);
+	useEffect(() => {
+		const reduced =
+			window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+		const normalizedStart = normalizeTimestamp(startedAt) ?? Date.now();
+		const update = () => {
+			if (!labelRef.current) return;
+			const seconds = Math.max(
+				0,
+				Math.floor((Date.now() - normalizedStart) / 1_000),
+			);
+			if (reduced) {
+				const minutes = Math.floor(seconds / 60);
+				labelRef.current.textContent =
+					minutes < 1 ? "running" : `running, over ${minutes}m`;
+				return;
+			}
+			labelRef.current.textContent =
+				seconds < 60
+					? `${seconds}s`
+					: `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+		};
+		update();
+		const timer = window.setInterval(update, reduced ? 60_000 : 1_000);
+		return () => window.clearInterval(timer);
+	}, [startedAt]);
+
+	return (
+		<span
+			className="turn-header-timer"
+			role="timer"
+			aria-live="off"
+			ref={labelRef}
+		/>
+	);
+}
+
+function normalizeTimestamp(value: number | undefined): number | undefined {
+	if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+	return value < 10_000_000_000 ? value * 1_000 : value;
+}
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.scss b/src/pages/chat/chat-bubble/components/WorkLogView.scss
index 2670381..4fd9908 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.scss
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.scss
@@ -142,56 +142,3 @@
     background: var(--surface-soft);
   }
 }
-
-.chat-work-timer {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 30px;
-  padding: 3px 2px;
-  color: var(--secondary-text);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  opacity: 0.66;
-}
-
-.chat-work-timer-dots {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-
-  i {
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: currentColor;
-    animation: chat-work-dot 1.35s ease-in-out infinite;
-
-    &:nth-child(2) {
-      animation-delay: 150ms;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 300ms;
-    }
-  }
-}
-
-@keyframes chat-work-dot {
-  0%,
-  60%,
-  100% {
-    opacity: 0.25;
-  }
-
-  30% {
-    opacity: 0.85;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chat-work-timer-dots i {
-    animation: none;
-    opacity: 0.45;
-  }
-}
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
index ce7039e..463277a 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
@@ -64,7 +64,6 @@ describe("WorkLogView", () => {
 				]}
 				streaming
 				stateKey="live-turn"
-				startedAt={Date.now() - 13_000}
 			/>,
 		);
 
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
index 8a9cd45..614c07d 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
@@ -1,6 +1,6 @@
 import "./WorkLogView.scss";
 import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { deriveActivityRow } from "../lib/activityRow";
 import { messagePartsToMarkdown, type ToolCallPart } from "../lib/messageParts";
 import { getRenderPartKey } from "../lib/utils";
@@ -26,7 +26,6 @@ interface WorkLogViewProps {
 	parts: AcpMessagePart[];
 	streaming: boolean;
 	stateKey: string;
-	startedAt?: number;
 	durationMs?: number;
 	/** Which agent produced these parts; the row objects resolve per agent. */
 	backend?: AiBackend;
@@ -36,7 +35,6 @@ const WorkLogView = memo(function WorkLogView({
 	parts,
 	streaming,
 	stateKey,
-	startedAt,
 	durationMs,
 	backend,
 }: WorkLogViewProps) {
@@ -61,7 +59,6 @@ const WorkLogView = memo(function WorkLogView({
 					windowSize={windowSize}
 					backend={backend}
 				/>
-				<WorkingTimer startedAt={startedAt} />
 			</section>
 		);
 	}
@@ -330,38 +327,3 @@ function shouldRenderWorkPart(
 			(part as unknown as { locations: unknown[] }).locations.length > 0);
 	return hasContent;
 }
-
-/** Isolated self-ticking label: the transcript does not re-render each second. */
-function WorkingTimer({ startedAt }: { startedAt?: number }) {
-	const labelRef = useRef<HTMLSpanElement>(null);
-	useEffect(() => {
-		const normalizedStart = normalizeTimestamp(startedAt) ?? Date.now();
-		const update = () => {
-			if (!labelRef.current) return;
-			const seconds = Math.max(
-				0,
-				Math.floor((Date.now() - normalizedStart) / 1_000),
-			);
-			labelRef.current.textContent = `Working for ${seconds}s`;
-		};
-		update();
-		const timer = window.setInterval(update, 1_000);
-		return () => window.clearInterval(timer);
-	}, [startedAt]);
-
-	return (
-		<div className="chat-work-timer" aria-live="off">
-			<span className="chat-work-timer-dots" aria-hidden="true">
-				<i />
-				<i />
-				<i />
-			</span>
-			<span ref={labelRef}>Working</span>
-		</div>
-	);
-}
-
-function normalizeTimestamp(value: number | undefined): number | undefined {
-	if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
-	return value < 10_000_000_000 ? value * 1_000 : value;
-}
diff --git a/src/pages/chat/chat-bubble/index.test.tsx b/src/pages/chat/chat-bubble/index.test.tsx
new file mode 100644
index 0000000..94e4069
--- /dev/null
+++ b/src/pages/chat/chat-bubble/index.test.tsx
@@ -0,0 +1,81 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import ChatBubble from "./index";
+
+vi.mock("./components/WorkLogView", () => ({
+	default: () => <div>work log</div>,
+}));
+vi.mock("./components/MessagePartView", () => ({
+	default: () => <div>part</div>,
+}));
+
+afterEach(cleanup);
+
+describe("ChatBubble", () => {
+	it("promotes the latest commentary into the turn header while streaming", () => {
+		render(
+			<ChatBubble
+				messageKey="m1"
+				messageRole="assistant"
+				assistantName="Claude Code"
+				parts={[]}
+				workParts={[
+					{ type: "text", text: "Loading the plan." },
+					{ type: "text", text: "Checking the branch." },
+				]}
+				streaming
+			/>,
+		);
+		expect(screen.getByText("Claude Code is working")).toBeInTheDocument();
+		expect(screen.getByText("Checking the branch.")).toBeInTheDocument();
+	});
+
+	it("shows the turn header before the first tool call arrives", () => {
+		// The old typing line was the only thing here, and it is the line that
+		// pasted a raw shell command into a sentence.
+		render(
+			<ChatBubble
+				messageKey="m2"
+				messageRole="assistant"
+				assistantName="Claude Code"
+				parts={[]}
+				workParts={[]}
+				streaming
+			/>,
+		);
+		expect(screen.getByText("Claude Code is working")).toBeInTheDocument();
+		expect(screen.queryByText(/is cd "/)).toBeNull();
+		expect(screen.queryByText(/is thinking/)).toBeNull();
+	});
+
+	it("names the state it is blocked on", () => {
+		render(
+			<ChatBubble
+				messageKey="m3"
+				messageRole="assistant"
+				assistantName="Claude Code"
+				parts={[]}
+				workParts={[]}
+				turnState="waiting-permission"
+				streaming
+			/>,
+		);
+		expect(
+			screen.getByText("Claude Code is waiting for permission"),
+		).toBeInTheDocument();
+	});
+
+	it("renders no turn header once the turn has settled", () => {
+		const { container } = render(
+			<ChatBubble
+				messageKey="m4"
+				messageRole="assistant"
+				assistantName="Claude Code"
+				parts={[{ type: "text", text: "Done." }]}
+				workParts={[]}
+				streaming={false}
+			/>,
+		);
+		expect(container.querySelector(".turn-header")).toBeNull();
+	});
+});
diff --git a/src/pages/chat/chat-bubble/index.tsx b/src/pages/chat/chat-bubble/index.tsx
index e22d24f..92102d9 100644
--- a/src/pages/chat/chat-bubble/index.tsx
+++ b/src/pages/chat/chat-bubble/index.tsx
@@ -1,9 +1,9 @@
 import "./style.scss";
 import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
-import Mascot from "components/Mascot";
 import CopyButton from "./components/CopyButton";
 import MessagePartView from "./components/MessagePartView";
 import ToolCallGroupView from "./components/ToolCallGroupView";
+import TurnHeader, { type TurnState } from "./components/TurnHeader";
 import WorkLogView from "./components/WorkLogView";
 import {
 	getAnswerParts,
@@ -13,6 +13,7 @@ import {
 	type ToolCallPart,
 } from "./lib/messageParts";
 import { getRenderPartKey } from "./lib/utils";
+import { splitCommentary } from "./lib/workLogLayout";
 
 interface ChatBubbleProps {
 	parts: AcpMessagePart[];
@@ -29,11 +30,10 @@ interface ChatBubbleProps {
 	/** Parts to copy — the whole group's, not just this bubble's. */
 	copyParts?: AcpMessagePart[];
 	/**
-	 * What the agent is currently doing, derived from the live parts (e.g.
-	 * "running Bash"). Keeps the streaming indicator honest instead of always
-	 * claiming the agent is "thinking".
+	 * What the turn is blocked on, if anything. The header states it; the
+	 * running row states what the agent is doing it with.
 	 */
-	statusLabel?: string;
+	turnState?: TurnState;
 	/** Turn-level work projected out of the terminal assistant answer. */
 	workParts?: AcpMessagePart[];
 	/**
@@ -55,7 +55,7 @@ export default function ChatBubble({
 	streaming = false,
 	showActions = true,
 	copyParts,
-	statusLabel,
+	turnState,
 	workParts = [],
 	workStartedAt,
 	workDurationMs,
@@ -67,6 +67,11 @@ export default function ChatBubble({
 	const answerParts = getAnswerParts(copyParts ?? parts);
 	const canCopy =
 		!streaming && showActions && answerParts.some(isCopyableMessagePart);
+	// While the turn runs, its latest commentary answers "where is this going"
+	// and belongs in the header rather than at the end of the rail.
+	const { commentary, rest: railParts } = streaming
+		? splitCommentary(workParts)
+		: { commentary: undefined, rest: workParts };
 
 	return (
 		<div
@@ -75,12 +80,19 @@ export default function ChatBubble({
 			<div className="chat-bubble-role">
 				{messageRole === "user" ? "You" : assistantName}
 			</div>
-			{workParts.length > 0 ? (
+			{streaming ? (
+				<TurnHeader
+					assistantName={assistantName}
+					state={turnState ?? "working"}
+					startedAt={workStartedAt}
+					commentary={commentary}
+				/>
+			) : null}
+			{railParts.length > 0 ? (
 				<WorkLogView
-					parts={workParts}
+					parts={railParts}
 					streaming={streaming}
 					stateKey={`${messageKey}-work`}
-					startedAt={workStartedAt}
 					durationMs={workDurationMs}
 					backend={backend}
 				/>
@@ -101,16 +113,6 @@ export default function ChatBubble({
 					/>
 				</div>
 			)}
-			{streaming && workParts.length === 0 && (
-				<div className="chat-typing">
-					<Mascot state="thinking" size={34} tone="inline" />
-					<span className="chat-typing-label">
-						{statusLabel
-							? `${assistantName} is ${statusLabel}…`
-							: `${assistantName} is thinking…`}
-					</span>
-				</div>
-			)}
 		</div>
 	);
 }
diff --git a/src/pages/chat/chat-bubble/style.scss b/src/pages/chat/chat-bubble/style.scss
index d559c2d..6beed19 100644
--- a/src/pages/chat/chat-bubble/style.scss
+++ b/src/pages/chat/chat-bubble/style.scss
@@ -133,28 +133,6 @@
     }
   }
 
-  .chat-typing {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 2px;
-    color: var(--secondary-text);
-    font-size: 12px;
-    opacity: 0.72;
-
-    // Breathing label: signals liveness without a distracting spinner next to
-    // the mascot, which already animates.
-    .chat-typing-label {
-      animation: chat-typing-pulse 1.8s ease-in-out infinite;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .chat-typing-label {
-        animation: none;
-      }
-    }
-  }
-
   // Streaming caret: marks the live end of the text as it arrives.
   &--streaming .chat-bubble-text--md > :last-child::after {
     content: "";
@@ -653,18 +631,6 @@
   }
 }
 
-@keyframes chat-typing-pulse {
-
-  0%,
-  100% {
-    opacity: 0.6;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
 @keyframes chat-caret-blink {
 
   0%,
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index fd92302..da5deaa 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -99,6 +99,7 @@ import ChatSidebar from "./ChatSidebar";
 import ChatBubble from "./chat-bubble";
 import ElicitationCard from "./chat-bubble/components/ElicitationCard";
 import PermissionRequestCard from "./chat-bubble/components/PermissionRequestCard";
+import type { TurnState } from "./chat-bubble/components/TurnHeader";
 import {
 	formatStopReason,
 	getMessageKey,
@@ -476,30 +477,26 @@ export default function ChatConversationPage({
 	}, [chatIsStreaming, turnDurationByUserId, visibleMessages]);
 	const lastVisibleMessage = visibleMessages[visibleMessages.length - 1];
 
-	// What the agent is doing right now, read off the newest unfinished tool
-	// call in the streaming message. Falls back to "thinking" when it's just
-	// generating text.
-	const streamingStatusLabel = useMemo(() => {
-		if (!chatIsStreaming || lastVisibleMessage?.role !== "assistant") {
-			return undefined;
-		}
-		for (let index = lastVisibleMessage.parts.length - 1; index >= 0; index--) {
-			const part = lastVisibleMessage.parts[index];
+	// The turn header states what the agent is doing; the running row states what
+	// with. Pasting the tool title into a sentence is what produced
+	// `Claude Code is cd "/home/jk/… && for f in *.md; do echo …`.
+	const turnState = useMemo<TurnState>(() => {
+		if (pendingPermissions.length > 0) return "waiting-permission";
+		if (pendingElicitations.length > 0) return "waiting-answer";
+		const parts = lastVisibleMessage?.parts ?? [];
+		for (let index = parts.length - 1; index >= 0; index -= 1) {
+			const part = parts[index];
 			if (part.type !== "tool_call") continue;
-			const status = (part as { status?: unknown }).status;
-			if (status === "completed" || status === "failed" || status === "fail") {
-				continue;
-			}
-			const title = (part as { title?: unknown }).title;
-			if (typeof title === "string" && title.trim()) return title.trim();
-			const name = (part as { name?: unknown }).name;
-			if (typeof name === "string" && name.trim()) {
-				return `running ${name.trim()}`;
-			}
-			return undefined;
+			const status = part.status?.toLowerCase();
+			if (status === "pending" || status === "in_progress") return "working";
+			return status === "failed" || status === "fail" ? "failed" : "working";
 		}
-		return undefined;
-	}, [chatIsStreaming, lastVisibleMessage]);
+		return "working";
+	}, [
+		pendingPermissions.length,
+		pendingElicitations.length,
+		lastVisibleMessage,
+	]);
 
 	useEffect(() => {
 		allMessagesLengthRef.current = allMessages.length;
@@ -1749,7 +1746,7 @@ export default function ChatConversationPage({
 								workStartedAt={workStartedAt}
 								workDurationMs={workDurationMs}
 								backend={agentId}
-								statusLabel={streamingStatusLabel}
+								turnState={turnState}
 								streaming={
 									chatIsStreaming &&
 									msg.role === "assistant" &&
@@ -1766,6 +1763,7 @@ export default function ChatConversationPage({
 						parts={[]}
 						messageRole="assistant"
 						assistantName={assistantName}
+						turnState={turnState}
 						streaming
 					/>
 				)}

From 88de02c3b615b3be094bfac071b2fcbc9c892bde Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:29:39 +0200
Subject: [PATCH 04/10] feat(chat): say what a settled turn did and which files
 it changed

The fold header gains counts by kind and, when there are failures, their
count: `Worked 1m 12s . 2 ran . 3 read . 1 failed`. A duration alone says
how long a turn took and nothing about what it was.

Under the answer, a changed-files block lists the files the turn touched
with a `+n -m` badge. Nothing in it is new data: these are the same
file_change parts the work log already carries, lifted out because "which
files did it touch" is the question a phone reader asks first and the
transcript answered last.
---
 .../components/ChangedFilesBlock.scss         |  80 +++++++++++++
 .../components/ChangedFilesBlock.test.tsx     |  65 ++++++++++
 .../components/ChangedFilesBlock.tsx          | 112 ++++++++++++++++++
 .../components/FileChangePartView.tsx         |   5 +
 .../chat-bubble/components/WorkLogView.scss   |  15 +++
 .../components/WorkLogView.test.tsx           |  34 +++++-
 .../chat-bubble/components/WorkLogView.tsx    |  31 ++++-
 src/pages/chat/chat-bubble/index.tsx          |   4 +
 8 files changed, 342 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
 create mode 100644 src/pages/chat/chat-bubble/components/ChangedFilesBlock.test.tsx
 create mode 100644 src/pages/chat/chat-bubble/components/ChangedFilesBlock.tsx

diff --git a/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
new file mode 100644
index 0000000..69272a1
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
@@ -0,0 +1,80 @@
+.changed-files {
+  // The bubble is a column that shrink-wraps its children, so without this the
+  // block is only as wide as its widest filename.
+  align-self: stretch;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 4px 0 10px;
+
+  // The shared card is only full width inside the answer body, and this block
+  // sits beside it. A row that stops halfway reads as a chip, not as a file.
+  .chat-part-card {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 2px;
+    border-radius: 8px;
+    background: var(--surface-soft);
+    overflow: hidden;
+  }
+
+  .chat-part-card-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    // The row opens a diff page, so it is a real target, not a label.
+    min-height: 44px;
+    padding: 6px 10px;
+    border: 0;
+    background: transparent;
+    color: var(--primary-text);
+    font: inherit;
+    font-size: 12.5px;
+    text-align: left;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    >em {
+      font-style: normal;
+      font-size: 10px;
+      opacity: 0.5;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.changed-files-head {
+  margin-bottom: 5px;
+  color: var(--secondary-text);
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+
+.changed-files-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  padding-left: 8px;
+  font-family: 'JetBrainsMono Nerd Font', ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.changed-files-stat-added {
+  color: var(--success);
+}
+
+.changed-files-stat-removed {
+  color: var(--error);
+}
+
+.changed-files-stat-new {
+  color: var(--secondary-text);
+  opacity: 0.75;
+}
diff --git a/src/pages/chat/chat-bubble/components/ChangedFilesBlock.test.tsx b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.test.tsx
new file mode 100644
index 0000000..b542ae1
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.test.tsx
@@ -0,0 +1,65 @@
+import type { AcpMessagePart } from "@shellular/protocol";
+import { describe, expect, it } from "vitest";
+import { collectFileChanges } from "./ChangedFilesBlock";
+
+function change(path: string, old: string, next: string): AcpMessagePart {
+	return {
+		type: "file_change",
+		path,
+		kind: "edit",
+		diff: { old, new: next },
+	} as AcpMessagePart;
+}
+
+describe("collectFileChanges", () => {
+	it("counts added and removed lines from the diff", () => {
+		const [entry] = collectFileChanges([
+			change("a.php", "one\ntwo", "one\ntwo\nthree"),
+		]);
+		expect(entry).toEqual({
+			path: "a.php",
+			added: 1,
+			removed: 0,
+			isNew: false,
+		});
+	});
+
+	it("marks a file with no old side as new", () => {
+		const [entry] = collectFileChanges([change("b.php", "", "one\ntwo")]);
+		expect(entry.isNew).toBe(true);
+		expect(entry.added).toBe(2);
+	});
+
+	it("counts a removal", () => {
+		const [entry] = collectFileChanges([
+			change("c.php", "one\ntwo\nthree", "one"),
+		]);
+		expect(entry).toEqual({
+			path: "c.php",
+			added: 0,
+			removed: 2,
+			isNew: false,
+		});
+	});
+
+	it("keeps the last state when the same file changes twice", () => {
+		const entries = collectFileChanges([
+			change("a.php", "one", "one\ntwo"),
+			change("a.php", "one", "one\ntwo\nthree"),
+		]);
+		expect(entries).toHaveLength(1);
+		expect(entries[0].added).toBe(2);
+	});
+
+	it("ignores parts without a diff", () => {
+		expect(
+			collectFileChanges([
+				{ type: "file_change", path: "c.php", kind: "edit" } as AcpMessagePart,
+			]),
+		).toEqual([]);
+	});
+
+	it("ignores everything that is not a file change", () => {
+		expect(collectFileChanges([{ type: "text", text: "hello" }])).toEqual([]);
+	});
+});
diff --git a/src/pages/chat/chat-bubble/components/ChangedFilesBlock.tsx b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.tsx
new file mode 100644
index 0000000..6ec9676
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.tsx
@@ -0,0 +1,112 @@
+import "./ChangedFilesBlock.scss";
+import type { AcpMessagePart } from "@shellular/protocol";
+import FileChangePartView from "./FileChangePartView";
+
+export interface FileChangeEntry {
+	path: string;
+	added: number;
+	removed: number;
+	isNew: boolean;
+}
+
+type FileChangePart = Extract<AcpMessagePart, { type: "file_change" }>;
+
+/**
+ * The turn's file changes, summarised under the answer. Nothing here is new
+ * data: these are the same `file_change` parts the work log already carries,
+ * lifted out because "which files did it touch" is the question a phone reader
+ * asks first and the transcript answers last.
+ */
+export default function ChangedFilesBlock({
+	parts,
+}: {
+	parts: AcpMessagePart[];
+}) {
+	const entries = collectFileChanges(parts);
+	if (entries.length === 0) return null;
+
+	// One row per file, not per part: a file edited four times is one changed
+	// file. The last part carries the diff the row opens.
+	const lastByPath = new Map<string, FileChangePart>();
+	for (const part of parts) {
+		if (part.type === "file_change") lastByPath.set(part.path, part);
+	}
+
+	return (
+		<section className="changed-files" aria-label="Changed files">
+			<div className="changed-files-head">Changed files</div>
+			{entries.map((entry) => {
+				const part = lastByPath.get(entry.path);
+				if (!part) return null;
+				return (
+					<FileChangePartView
+						key={entry.path}
+						part={part}
+						stat={<DiffStat entry={entry} />}
+					/>
+				);
+			})}
+		</section>
+	);
+}
+
+function DiffStat({ entry }: { entry: FileChangeEntry }) {
+	if (entry.isNew) {
+		return (
+			<span className="changed-files-stat">
+				<span className="changed-files-stat-new">new</span>
+				<span className="changed-files-stat-added">{`+${entry.added}`}</span>
+			</span>
+		);
+	}
+	return (
+		<span className="changed-files-stat">
+			{entry.added > 0 ? (
+				<span className="changed-files-stat-added">{`+${entry.added}`}</span>
+			) : null}
+			{entry.removed > 0 ? (
+				<span className="changed-files-stat-removed">{`−${entry.removed}`}</span>
+			) : null}
+		</span>
+	);
+}
+
+export function collectFileChanges(
+	parts: readonly AcpMessagePart[],
+): FileChangeEntry[] {
+	const byPath = new Map<string, FileChangeEntry>();
+	for (const part of parts) {
+		if (part.type !== "file_change") continue;
+		const diff = "diff" in part ? part.diff : undefined;
+		if (!diff) continue;
+		const oldLines = diff.old ? diff.old.split(/\r?\n/) : [];
+		const newLines = diff.new ? diff.new.split(/\r?\n/) : [];
+		const common = countCommonLines(oldLines, newLines);
+		byPath.set(part.path, {
+			path: part.path,
+			added: newLines.length - common,
+			removed: oldLines.length - common,
+			isNew: oldLines.length === 0,
+		});
+	}
+	return Array.from(byPath.values());
+}
+
+/** A line-level count, not a real diff: enough for a `+n −m` badge. */
+function countCommonLines(
+	oldLines: readonly string[],
+	newLines: readonly string[],
+): number {
+	const remaining = new Map<string, number>();
+	for (const line of oldLines)
+		remaining.set(line, (remaining.get(line) ?? 0) + 1);
+	let common = 0;
+	for (const line of newLines) {
+		const count = remaining.get(line) ?? 0;
+		if (count > 0) {
+			remaining.set(line, count - 1);
+			common += 1;
+		}
+	}
+	return common;
+}
diff --git a/src/pages/chat/chat-bubble/components/FileChangePartView.tsx b/src/pages/chat/chat-bubble/components/FileChangePartView.tsx
index 9c77430..c9d6b6a 100644
--- a/src/pages/chat/chat-bubble/components/FileChangePartView.tsx
+++ b/src/pages/chat/chat-bubble/components/FileChangePartView.tsx
@@ -6,8 +6,11 @@ import AgentDiffView from "./AgentDiffView";
 
 export default function FileChangePartView({
 	part,
+	stat,
 }: {
 	part: Extract<AcpMessagePart, { type: "file_change" }>;
+	/** Optional `+84 −12` badge, rendered before the chevron. */
+	stat?: React.ReactNode;
 }) {
 	return (
 		<div className="chat-part-card" data-open="false">
@@ -38,6 +41,7 @@ export default function FileChangePartView({
 						>
 							<span className="icon-edit" aria-hidden="true" />
 							<span>{title}</span>
+							{stat}
 							<em>
 								<span className="icon-chevron-right" />
 							</em>
@@ -55,6 +59,7 @@ export default function FileChangePartView({
 						<span className="file-change-status">
 							{part.path.split("/").pop()}
 						</span>
+						{stat}
 					</span>
 				);
 			})()}
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.scss b/src/pages/chat/chat-bubble/components/WorkLogView.scss
index 4fd9908..3eaa134 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.scss
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.scss
@@ -72,6 +72,21 @@
   font-weight: 500;
 }
 
+.chat-work-log-counts {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--secondary-text);
+  opacity: 0.7;
+  font-variant-numeric: tabular-nums;
+
+  &--failed {
+    color: var(--error);
+    opacity: 0.9;
+  }
+}
+
 .chat-work-log-list {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
index 463277a..7969e2e 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.test.tsx
@@ -163,7 +163,7 @@ describe("settled work log", () => {
 			/>,
 		);
 
-		const summary = screen.getByRole("button", { name: /Worked for 8\.3s/ });
+		const summary = screen.getByRole("button", { name: /Worked 8\.3s/ });
 		expect(summary.getAttribute("aria-expanded")).toBe("false");
 		const panel = summary.parentElement?.querySelector(
 			".chat-disclosure-panel",
@@ -174,6 +174,36 @@ describe("settled work log", () => {
 		expect(screen.getByText("Check branch state")).toBeTruthy();
 	});
 
+	it("summarises a settled turn by kind, not by duration alone", () => {
+		render(
+			<WorkLogView
+				parts={[
+					tool("r1", "read", "a.md"),
+					tool("r2", "read", "b.md"),
+					command("e1", "Run it"),
+				]}
+				streaming={false}
+				stateKey="settled"
+				durationMs={72_000}
+			/>,
+		);
+		expect(screen.getByText(/Worked 1m 12s/)).toBeInTheDocument();
+		expect(screen.getByText(/2 read/)).toBeInTheDocument();
+		expect(screen.getByText(/1 ran/)).toBeInTheDocument();
+	});
+
+	it("surfaces the failure count in the collapsed header", () => {
+		render(
+			<WorkLogView
+				parts={[command("f1", "Run the tests", "failed")]}
+				streaming={false}
+				stateKey="failed"
+				durationMs={1_000}
+			/>,
+		);
+		expect(screen.getByText(/1 failed/)).toBeInTheDocument();
+	});
+
 	it("keeps file-change activities available in the expanded work log", () => {
 		render(
 			<WorkLogView
@@ -193,7 +223,7 @@ describe("settled work log", () => {
 			/>,
 		);
 
-		fireEvent.click(screen.getByRole("button", { name: /Worked for 2\.0s/ }));
+		fireEvent.click(screen.getByRole("button", { name: /Worked 2\.0s/ }));
 		expect(screen.getByText("src/chat.tsx")).toBeTruthy();
 	});
 });
diff --git a/src/pages/chat/chat-bubble/components/WorkLogView.tsx b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
index 614c07d..a947366 100644
--- a/src/pages/chat/chat-bubble/components/WorkLogView.tsx
+++ b/src/pages/chat/chat-bubble/components/WorkLogView.tsx
@@ -1,7 +1,7 @@
 import "./WorkLogView.scss";
 import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
 import { memo, useMemo, useState } from "react";
-import { deriveActivityRow } from "../lib/activityRow";
+import { type ActivityKind, deriveActivityRow } from "../lib/activityRow";
 import { messagePartsToMarkdown, type ToolCallPart } from "../lib/messageParts";
 import { getRenderPartKey } from "../lib/utils";
 import {
@@ -10,6 +10,7 @@ import {
 	type WorkLogGroup,
 } from "../lib/workLog";
 import {
+	countByKind,
 	foldPathRuns,
 	mergeSameFileRuns,
 	type WorkLogRow,
@@ -22,6 +23,17 @@ import MessagePartView from "./MessagePartView";
 import ToolCallContentView from "./ToolCallContentView";
 import { useWorkLogWindowSize } from "./useWorkLogWindowSize";
 
+const KIND_NOUNS: Record<ActivityKind, string> = {
+	execute: "ran",
+	read: "read",
+	change: "changed",
+	search: "searched",
+	fetch: "fetched",
+	think: "thought",
+	switch_mode: "mode",
+	other: "other",
+};
+
 interface WorkLogViewProps {
 	parts: AcpMessagePart[];
 	streaming: boolean;
@@ -63,10 +75,18 @@ const WorkLogView = memo(function WorkLogView({
 		);
 	}
 
+	// A duration alone says how long, never what. The counts come from the same
+	// classifier the rows use, and the failure count is never folded away:
+	// it is the number that changes what the reader does next.
+	const { counts, failed } = countByKind(visibleParts, backend);
 	const durationLabel =
 		durationMs === undefined
 			? "Worked"
-			: `Worked for ${formatWorkDuration(durationMs)}`;
+			: `Worked ${formatWorkDuration(durationMs)}`;
+	const countLabel = [
+		...counts.map(({ kind, count }) => `${count} ${KIND_NOUNS[kind]}`),
+		...(failed > 0 ? [`${failed} failed`] : []),
+	].join(" · ");
 	return (
 		<ChatDisclosure
 			className="chat-work-log chat-work-log--settled"
@@ -81,6 +101,13 @@ const WorkLogView = memo(function WorkLogView({
 						aria-hidden="true"
 					/>
 					<span className="chat-work-log-title">{durationLabel}</span>
+					{countLabel ? (
+						<span
+							className={`chat-work-log-counts${failed > 0 ? " chat-work-log-counts--failed" : ""}`}
+						>
+							{` · ${countLabel}`}
+						</span>
+					) : null}
 				</>
 			}
 		>
diff --git a/src/pages/chat/chat-bubble/index.tsx b/src/pages/chat/chat-bubble/index.tsx
index 92102d9..8a6165c 100644
--- a/src/pages/chat/chat-bubble/index.tsx
+++ b/src/pages/chat/chat-bubble/index.tsx
@@ -1,5 +1,6 @@
 import "./style.scss";
 import type { AcpMessagePart, AiBackend } from "@shellular/protocol";
+import ChangedFilesBlock from "./components/ChangedFilesBlock";
 import CopyButton from "./components/CopyButton";
 import MessagePartView from "./components/MessagePartView";
 import ToolCallGroupView from "./components/ToolCallGroupView";
@@ -104,6 +105,9 @@ export default function ChatBubble({
 					</div>
 				</div>
 			) : null}
+			{!streaming && workParts.length > 0 ? (
+				<ChangedFilesBlock parts={workParts} />
+			) : null}
 			{canCopy && (
 				<div className="chat-bubble-actions">
 					<CopyButton

From 6096c7548b5e49661015b720395eb5e535399099 Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:31:29 +0200
Subject: [PATCH 05/10] fix(chat): never truncate a command you are about to
 approve

A permission card now renders the command it is asking about directly, in a
block that wraps in full with no height cap: truncating a string that a tap
will execute is a safety defect, not a layout choice. When the agent gave no
reason, the command is no longer printed twice.

Status gains the waiting glyph the set was missing, so a call blocked on a
permission stops claiming the machine is busy, and an unrecognised terminal
status resolves to failure rather than to a neutral glyph that reads as
"fine". Every state carries a shape and an accessible name, not only a
colour, and the transcript gets its log role.
---
 .../components/PermissionRequestCard.test.tsx | 63 +++++++++++++++++++
 .../components/PermissionRequestCard.tsx      | 18 ++++--
 .../chat-bubble/components/Status.test.tsx    | 49 +++++++++++++++
 .../chat/chat-bubble/components/Status.tsx    | 38 ++++++++++-
 src/pages/chat/index.tsx                      |  7 ++-
 5 files changed, 167 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/components/PermissionRequestCard.test.tsx
 create mode 100644 src/pages/chat/chat-bubble/components/Status.test.tsx

diff --git a/src/pages/chat/chat-bubble/components/PermissionRequestCard.test.tsx b/src/pages/chat/chat-bubble/components/PermissionRequestCard.test.tsx
new file mode 100644
index 0000000..c1ccdcf
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/PermissionRequestCard.test.tsx
@@ -0,0 +1,63 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import PermissionRequestCard from "./PermissionRequestCard";
+
+afterEach(cleanup);
+
+const LONG_COMMAND =
+	"php artisan migrate --path=database/migrations/2026_08_19_tax_basis.php --force --no-interaction";
+
+function permission(overrides: Record<string, unknown> = {}) {
+	return {
+		id: "p1",
+		sessionId: "s1",
+		kind: "execute",
+		title: LONG_COMMAND,
+		options: [{ optionId: "allow", name: "Allow once", kind: "allow_once" }],
+		...overrides,
+	} as never;
+}
+
+describe("PermissionRequestCard", () => {
+	it("shows the whole command it is asking about, never shortened", () => {
+		// Truncating a string that a tap will execute is a safety defect, not a
+		// layout choice.
+		render(
+			<PermissionRequestCard permission={permission()} onReply={() => {}} />,
+		);
+		const node = screen.getByText(LONG_COMMAND);
+		expect(node.textContent).toBe(LONG_COMMAND);
+		expect(node.textContent).not.toContain("…");
+	});
+
+	it("shows the command exactly once when it is also the heading", () => {
+		render(
+			<PermissionRequestCard permission={permission()} onReply={() => {}} />,
+		);
+		expect(screen.getAllByText(LONG_COMMAND)).toHaveLength(1);
+	});
+
+	it("keeps the reason as the heading and the command underneath it", () => {
+		render(
+			<PermissionRequestCard
+				permission={permission({
+					metadata: {
+						toolCall: { rawInput: { reason: "Backfill the tax basis" } },
+					},
+				})}
+				onReply={() => {}}
+			/>,
+		);
+		expect(screen.getByText("Backfill the tax basis")).toBeInTheDocument();
+		expect(screen.getByText(LONG_COMMAND)).toBeInTheDocument();
+	});
+
+	it("still offers every reply option", () => {
+		render(
+			<PermissionRequestCard permission={permission()} onReply={() => {}} />,
+		);
+		expect(
+			screen.getByRole("button", { name: "Allow once" }),
+		).toBeInTheDocument();
+	});
+});
diff --git a/src/pages/chat/chat-bubble/components/PermissionRequestCard.tsx b/src/pages/chat/chat-bubble/components/PermissionRequestCard.tsx
index 0cd3496..be9a5e8 100644
--- a/src/pages/chat/chat-bubble/components/PermissionRequestCard.tsx
+++ b/src/pages/chat/chat-bubble/components/PermissionRequestCard.tsx
@@ -8,7 +8,6 @@ import {
 	permissionTitleClass,
 } from "./permissionClasses";
 import ToolCallContentView from "./ToolCallContentView";
-import ToolOutputView from "./ToolOutputView";
 
 export default function PermissionRequestCard({
 	permission,
@@ -19,7 +18,11 @@ export default function PermissionRequestCard({
 }) {
 	const options = readPermissionOptions(permission);
 	const title = getTitle(permission);
-	const content = getContent(permission, title);
+	const content = getContent(permission);
+	// When the agent gave no reason, the heading *is* the command, and the
+	// subject block below already shows it in full. Printing it twice buries
+	// the reply buttons under a repeat.
+	const showTitle = title !== permission.title;
 	return (
 		<div className={permissionCardClass}>
 			<div className={permissionTitleClass}>
@@ -34,7 +37,7 @@ export default function PermissionRequestCard({
 					className="ml-auto shrink-0"
 				/>
 			</div>
-			<span className={permissionTitleClass}>{title}</span>
+			{showTitle ? <span className={permissionTitleClass}>{title}</span> : null}
 			{content}
 			<div className={permissionActionsClass}>
 				{options.map((option) => (
@@ -73,10 +76,15 @@ function readPermissionOptions(permission: AcpPermissionRequest) {
 	});
 }
 
-function getContent(permission: AcpPermissionRequest, title: string) {
+function getContent(permission: AcpPermissionRequest) {
 	const { metadata } = permission;
+	// Rendered directly, wrapping, with no height cap and no scroll region: this
+	// is the string a tap is about to execute, so every character of it has to
+	// be readable before the reader decides.
 	const defaultView = (
-		<ToolOutputView output={permission.title} title={title} />
+		<pre className="m-0 mb-2.5 box-border max-w-full overflow-hidden whitespace-pre-wrap rounded-lg border border-(--card-border) px-2.5 py-2 font-['JetBrainsMono_Nerd_Font',ui-monospace,Menlo,monospace] text-[11px] leading-[1.5] text-(--primary-text) [overflow-wrap:anywhere] [word-break:break-word]">
+			{permission.title}
+		</pre>
 	);
 	if (!metadata || typeof metadata !== "object" || !("toolCall" in metadata)) {
 		return defaultView;
diff --git a/src/pages/chat/chat-bubble/components/Status.test.tsx b/src/pages/chat/chat-bubble/components/Status.test.tsx
new file mode 100644
index 0000000..10889c1
--- /dev/null
+++ b/src/pages/chat/chat-bubble/components/Status.test.tsx
@@ -0,0 +1,49 @@
+import { cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import Status from "./Status";
+
+afterEach(cleanup);
+
+describe("Status", () => {
+	it("renders nothing without a status", () => {
+		const { container } = render(<Status />);
+		expect(container.firstChild).toBeNull();
+	});
+
+	it("marks an unrecognised terminal status as a failure, not as unknown", () => {
+		const { container } = render(<Status status="cancelled" />);
+		expect(container.querySelector(".icon-alert-triangle")).not.toBeNull();
+		expect(container.querySelector(".icon-help-center")).toBeNull();
+	});
+
+	it("keeps the spinner for a running call", () => {
+		const { container } = render(<Status status="in_progress" />);
+		expect(container.querySelector(".chat-status-spinner")).not.toBeNull();
+	});
+
+	it("distinguishes waiting from running", () => {
+		// A call blocked on a permission is not busy, it is blocked. Kiro ships
+		// this as its third glyph; Codex calls it "Needs input".
+		const { container } = render(<Status status="awaiting" />);
+		expect(container.querySelector(".chat-status-spinner")).toBeNull();
+		expect(container.querySelector(".icon-clock")).not.toBeNull();
+	});
+
+	it("gives every state its own shape, not only its own colour", () => {
+		// WCAG SC 1.4.1 (Level A): "if content relies on accurately perceiving a
+		// particular color, an additional visual indicator is required
+		// regardless of contrast ratio".
+		const shapes = ["completed", "failed", "awaiting"].map((status) => {
+			const { container, unmount } = render(<Status status={status} />);
+			const className = container.firstElementChild?.className ?? "";
+			unmount();
+			return className;
+		});
+		expect(new Set(shapes).size).toBe(3);
+	});
+
+	it("names each state for assistive technology", () => {
+		const { getByLabelText } = render(<Status status="failed" />);
+		expect(getByLabelText("Failed")).toBeInTheDocument();
+	});
+});
diff --git a/src/pages/chat/chat-bubble/components/Status.tsx b/src/pages/chat/chat-bubble/components/Status.tsx
index 954d5b1..fad99cb 100644
--- a/src/pages/chat/chat-bubble/components/Status.tsx
+++ b/src/pages/chat/chat-bubble/components/Status.tsx
@@ -2,6 +2,9 @@
  * Tool-call status glyph. ACP statuses are pending | in_progress | completed
  * | failed; "fail" is kept for tolerance of non-conforming agents. Running
  * tools get a real spinner, terminal states get semantic color.
+ *
+ * Every state has its own shape as well as its own colour, per WCAG SC 1.4.1
+ * (Level A): colour alone may not be the only thing carrying the meaning.
  */
 export default function Status({ status }: { status?: string }) {
 	if (!status) {
@@ -11,7 +14,12 @@ export default function Status({ status }: { status?: string }) {
 	switch (status) {
 		case "completed":
 			return (
-				<span className="icon-check" style={{ color: "var(--success)" }} />
+				<span
+					className="icon-check"
+					style={{ color: "var(--success)" }}
+					role="img"
+					aria-label="Done"
+				/>
 			);
 		case "failed":
 		case "fail":
@@ -19,6 +27,8 @@ export default function Status({ status }: { status?: string }) {
 				<span
 					className="icon-alert-triangle"
 					style={{ color: "var(--error)" }}
+					role="img"
+					aria-label="Failed"
 				/>
 			);
 		case "in_progress":
@@ -26,7 +36,31 @@ export default function Status({ status }: { status?: string }) {
 			return (
 				<span className="chat-status-spinner" role="img" aria-label="Running" />
 			);
+		case "awaiting":
+			// Blocked on a permission: not busy, waiting for the reader. A spinner
+			// here says the machine is working when in fact it is the human who is
+			// holding things up, which is the single most misleading state a row
+			// can show.
+			return (
+				<span
+					className="icon-clock"
+					style={{ color: "var(--accent)" }}
+					role="img"
+					aria-label="Waiting for you"
+				/>
+			);
 		default:
-			return <span className="icon-help-center" />;
+			// An unrecognised terminal status means the call ended without telling
+			// us it succeeded. The VS Code extension resolves the same case to
+			// failure; a neutral glyph here reads as "fine" and is the more
+			// expensive mistake.
+			return (
+				<span
+					className="icon-alert-triangle"
+					style={{ color: "var(--error)" }}
+					role="img"
+					aria-label="Ended without a result"
+				/>
+			);
 	}
 }
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index da5deaa..6c206df 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -1714,7 +1714,12 @@ export default function ChatConversationPage({
 				pendingPermissions.length === 0 && (
 					<EmptyState message="No messages yet" mascot="greeting" />
 				)}
-			<div ref={historyContentRef} className="chat-history-content">
+			<div
+				ref={historyContentRef}
+				className="chat-history-content"
+				role="log"
+				aria-label="Conversation"
+			>
 				{syncing && allMessages.length === 0 && <ChatHistorySkeleton />}
 				{hasMore && historyScrollReady && (
 					<div ref={sentinelRef} className="chat-sentinel">

From 7b28be1ea1ef6f36e1d653ca2fe7abf44758cd12 Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:36:35 +0200
Subject: [PATCH 06/10] feat(chat): keep the reader's place when a turn runs on
 without them

An appending, auto-scrolling transcript is auto-updating content under WCAG
SC 2.2.2 at Level A, which asks for a mechanism to pause it. Scrolling up is
that mechanism, so this adds the way back: a labelled Jump to latest pill,
44px tall, that appears only while a turn streams and the view is scrolled
away from the end.

Beside it, a rule marks where reading stopped when a turn advanced while the
app was backgrounded. The marker is a stored timestamp per chat, advanced
only on leaving the chat, never on scroll position: scrolling past twenty
dense rows is scanning, not reading.

The rule carries its count as real text rather than through role="separator"
plus aria-label. That role makes every descendant presentational, which
would drop the one thing the rule is there to say.
---
 .../chat/chat-bubble/lib/awayMarker.test.ts   |  52 +++++++++
 src/pages/chat/chat-bubble/lib/awayMarker.ts  |  34 ++++++
 src/pages/chat/index.tsx                      | 107 ++++++++++++++----
 src/pages/chat/style.scss                     |  63 +++++++++++
 4 files changed, 237 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/chat/chat-bubble/lib/awayMarker.test.ts
 create mode 100644 src/pages/chat/chat-bubble/lib/awayMarker.ts

diff --git a/src/pages/chat/chat-bubble/lib/awayMarker.test.ts b/src/pages/chat/chat-bubble/lib/awayMarker.test.ts
new file mode 100644
index 0000000..bd90907
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/awayMarker.test.ts
@@ -0,0 +1,52 @@
+import type { AcpMessagePart } from "@shellular/protocol";
+import { describe, expect, it } from "vitest";
+import { countStepsSince, shouldShowAwayMarker } from "./awayMarker";
+
+const at = (timestamp: number) =>
+	({
+		type: "tool_call",
+		name: "execute",
+		id: `t${timestamp}`,
+		timestamp,
+	}) as unknown as AcpMessagePart;
+
+describe("countStepsSince", () => {
+	it("counts nothing when the marker was never set", () => {
+		expect(countStepsSince([at(1), at(2)], undefined)).toBe(0);
+	});
+
+	it("counts only parts newer than the marker", () => {
+		expect(countStepsSince([at(1), at(2), at(3)], 1)).toBe(2);
+	});
+
+	it("normalises protocol seconds against millisecond markers", () => {
+		// Without the normalisation a seconds stamp is always smaller than a
+		// millisecond marker, so nothing would ever count as new.
+		const marker = 1_700_000_001_000;
+		expect(countStepsSince([at(1_700_000_000)], marker)).toBe(0);
+		expect(countStepsSince([at(1_700_000_002)], marker)).toBe(1);
+	});
+
+	it("ignores parts that carry no timestamp", () => {
+		expect(
+			countStepsSince(
+				[{ type: "text", text: "no stamp" } as AcpMessagePart, at(9_000)],
+				1_000,
+			),
+		).toBe(1);
+	});
+});
+
+describe("shouldShowAwayMarker", () => {
+	it("stays hidden while the reader is pinned to the bottom", () => {
+		expect(shouldShowAwayMarker(12, true)).toBe(false);
+	});
+
+	it("shows once there is something missed and the view is scrolled up", () => {
+		expect(shouldShowAwayMarker(12, false)).toBe(true);
+	});
+
+	it("stays hidden for a single step, which is not worth a rule", () => {
+		expect(shouldShowAwayMarker(1, false)).toBe(false);
+	});
+});
diff --git a/src/pages/chat/chat-bubble/lib/awayMarker.ts b/src/pages/chat/chat-bubble/lib/awayMarker.ts
new file mode 100644
index 0000000..a796a8f
--- /dev/null
+++ b/src/pages/chat/chat-bubble/lib/awayMarker.ts
@@ -0,0 +1,34 @@
+import type { AcpMessagePart } from "@shellular/protocol";
+
+/** Below this the rule costs more attention than the information is worth. */
+const MIN_STEPS = 2;
+
+/** The protocol mixes seconds and milliseconds; `workLog.ts` normalises the same way. */
+function timestampMs(value: unknown): number | undefined {
+	if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
+	return value < 10_000_000_000 ? value * 1_000 : value;
+}
+
+export function countStepsSince(
+	parts: readonly AcpMessagePart[],
+	lastSeenAt: number | undefined,
+): number {
+	const marker = timestampMs(lastSeenAt);
+	if (marker === undefined) return 0;
+	return parts.filter((part) => {
+		const stamp = timestampMs((part as { timestamp?: unknown }).timestamp);
+		return stamp !== undefined && stamp > marker;
+	}).length;
+}
+
+/**
+ * The marker is anchored to a stored `lastSeenAt`, never to the scroll
+ * position: scrolling past 25 dense rows is scanning, not reading. Zulip ships
+ * this distinction as a setting for the same reason.
+ */
+export function shouldShowAwayMarker(
+	count: number,
+	isAtBottom: boolean,
+): boolean {
+	return !isAtBottom && count >= MIN_STEPS;
+}
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index 6c206df..c5c45eb 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -19,6 +19,7 @@ import { getAgentIcon } from "lib/agents";
 import { registerShellularDiffThemes } from "lib/diffsTheme";
 import keyboard from "lib/keyboard";
 import { normalizeRemoteWorkspacePath } from "lib/remotePath";
+import * as store from "lib/store";
 import EditorPage from "pages/editor";
 import {
 	formatGitReviewPrompt,
@@ -26,6 +27,7 @@ import {
 } from "pages/git-client/reviewComments";
 import type React from "react";
 import {
+	Fragment,
 	useCallback,
 	useEffect,
 	useLayoutEffect,
@@ -100,6 +102,10 @@ import ChatBubble from "./chat-bubble";
 import ElicitationCard from "./chat-bubble/components/ElicitationCard";
 import PermissionRequestCard from "./chat-bubble/components/PermissionRequestCard";
 import type { TurnState } from "./chat-bubble/components/TurnHeader";
+import {
+	countStepsSince,
+	shouldShowAwayMarker,
+} from "./chat-bubble/lib/awayMarker";
 import {
 	formatStopReason,
 	getMessageKey,
@@ -289,6 +295,10 @@ export default function ChatConversationPage({
 		connectionStatusRef.current = connectionStatus;
 	}, [connectionStatus]);
 	const stickToBottomRef = useRef(true);
+	// Reactive counterpart of stickToBottomRef: the jump pill and the away rule
+	// have to re-render, and a ref cannot do that.
+	const [isAtBottom, setIsAtBottom] = useState(true);
+	const [lastSeenAt, setLastSeenAt] = useState<number | undefined>(undefined);
 	const prevScrollHeightRef = useRef(0);
 	const autoScrollFrameRef = useRef(0);
 	const autoScrollSuppressedRef = useRef(false);
@@ -502,6 +512,30 @@ export default function ChatConversationPage({
 		allMessagesLengthRef.current = allMessages.length;
 	}, [allMessages.length]);
 
+	// Where reading stopped, so a turn that ran on while the app was backgrounded
+	// can say so. Anchored to a stored timestamp, never to the scroll position:
+	// scrolling past twenty-five dense rows is scanning, not reading.
+	const seenKey = `shellular:chat-last-seen:${agentId}:${activeSessionId || sessionId || "new"}`;
+	useEffect(() => {
+		let mounted = true;
+		void store
+			.get<number>(seenKey)
+			.then((value) => {
+				if (mounted) setLastSeenAt(value ?? undefined);
+			})
+			.catch(() => {});
+		// The marker advances on a deliberate boundary only: leaving the chat.
+		return () => {
+			mounted = false;
+			void store.set(seenKey, Date.now()).catch(() => {});
+		};
+	}, [seenKey]);
+
+	const awayCount = useMemo(
+		() => countStepsSince(lastVisibleMessage?.parts ?? [], lastSeenAt),
+		[lastVisibleMessage, lastSeenAt],
+	);
+
 	const hasMore = allMessages.length > visibleCount || hasMoreRemote;
 	const promptSuggestions = useMemo(
 		() =>
@@ -1310,6 +1344,9 @@ export default function ChatConversationPage({
 			if (selectionActiveRef.current) return;
 			const distanceFromBottom = getDistanceFromBottom();
 			stickToBottomRef.current = distanceFromBottom < 100;
+			// Deliberately tighter than the stick-to-bottom threshold: the pill
+			// should not appear while the view is still effectively at the end.
+			setIsAtBottom(distanceFromBottom < 80);
 		};
 		const handleUserScrollIntent = () => {
 			const distanceFromBottom = getDistanceFromBottom();
@@ -1738,26 +1775,45 @@ export default function ChatConversationPage({
 						workStartedAt,
 						workDurationMs,
 					}) => {
+						const marksAway =
+							msg === lastVisibleMessage &&
+							shouldShowAwayMarker(awayCount, isAtBottom);
 						return (
-							<ChatBubble
-								key={renderKey}
-								messageKey={messageKey}
-								parts={parts}
-								messageRole={msg.role}
-								assistantName={assistantName}
-								showActions={groupEnd}
-								copyParts={groupParts}
-								workParts={workParts}
-								workStartedAt={workStartedAt}
-								workDurationMs={workDurationMs}
-								backend={agentId}
-								turnState={turnState}
-								streaming={
-									chatIsStreaming &&
-									msg.role === "assistant" &&
-									msg === lastVisibleMessage
-								}
-							/>
+							<Fragment key={renderKey}>
+								{marksAway && (
+									// Deliberately not role="separator": every descendant of that
+									// role is automatically presentational, so the label would have
+									// to be duplicated into aria-label and the visible text dropped
+									// from the accessibility tree. This rule carries information
+									// rather than structure, so the text stays real text and the
+									// rules beside it are decorative pseudo-elements.
+									//
+									// It sits above the whole turn rather than between two of its
+									// rows: the away steps live inside one assistant bubble, and
+									// splitting a bubble would mean rendering its work log twice.
+									<div className="chat-away">
+										{`${awayCount} steps while you were away`}
+									</div>
+								)}
+								<ChatBubble
+									messageKey={messageKey}
+									parts={parts}
+									messageRole={msg.role}
+									assistantName={assistantName}
+									showActions={groupEnd}
+									copyParts={groupParts}
+									workParts={workParts}
+									workStartedAt={workStartedAt}
+									workDurationMs={workDurationMs}
+									backend={agentId}
+									turnState={turnState}
+									streaming={
+										chatIsStreaming &&
+										msg.role === "assistant" &&
+										msg === lastVisibleMessage
+									}
+								/>
+							</Fragment>
 						);
 					},
 				)}
@@ -1799,6 +1855,19 @@ export default function ChatConversationPage({
 				)}
 				<div className="chat-bottom-anchor" />
 			</div>
+			{chatIsStreaming && !isAtBottom && (
+				<button
+					type="button"
+					className="chat-jump haptic-trigger"
+					onClick={() => {
+						stickToBottomRef.current = true;
+						scrollToBottomNow(true);
+					}}
+				>
+					<span className="icon-chevron-down" aria-hidden="true" />
+					Jump to latest
+				</button>
+			)}
 			<ChatComposer
 				inputBarRef={inputBarRef}
 				inputRef={promptInputRef}
diff --git a/src/pages/chat/style.scss b/src/pages/chat/style.scss
index 5973a45..55dd0b8 100644
--- a/src/pages/chat/style.scss
+++ b/src/pages/chat/style.scss
@@ -670,3 +670,66 @@ img.project-chat-agent-avatar-img {
 .project-chat-session-main .badge {
   flex-shrink: 0;
 }
+
+// Where reading stopped, when a turn ran on while the app was backgrounded.
+// The rule is drawn at 55% of the accent, not 45%: at 45% it computes to
+// 3.05:1 against the dark canvas and clears WCAG SC 1.4.11 only because the
+// threshold is not rounded. At 55% it is 4.05:1. The label carries the
+// meaning, so the colour is not the only signal (SC 1.4.1, Level A).
+.chat-away {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 14px 0 10px;
+  font-size: 12px;
+  font-weight: 620;
+  color: var(--accent);
+
+  &::before,
+  &::after {
+    content: "";
+    height: 1px;
+    background: color-mix(in srgb, var(--accent) 55%, transparent);
+  }
+
+  &::before {
+    flex: 0 0 14px;
+  }
+
+  &::after {
+    flex: 1;
+  }
+}
+
+// Scrolling up locks the view; this is the way back. The lock is the pause
+// mechanism WCAG SC 2.2.2 (Level A) requires for auto-updating content, so
+// the pill is conformance rather than decoration. Labelled rather than an
+// icon alone, and 44px tall rather than the 24 CSS px SC 2.5.8 permits.
+.chat-jump {
+  position: absolute;
+  right: 14px;
+  // --chat-input-offset is the composer's own height plus 50px of slack, set on
+  // .page-content by updateInputOffset and inherited here. Anchoring to it is
+  // what keeps the pill above the composer instead of behind it.
+  bottom: calc(var(--chat-input-offset, 180px) - 34px + var(--keyboard-height, 0px));
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 44px;
+  padding: 0 15px;
+  border: 0;
+  border-radius: 22px;
+  background: var(--accent);
+  color: var(--button-text);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 650;
+  cursor: pointer;
+  box-shadow: 0 8px 20px -6px var(--shadow-color);
+  -webkit-tap-highlight-color: transparent;
+
+  >[class^="icon-"] {
+    font-size: 11px;
+  }
+}

From bc8948fed61a26c0a31bfbc77789f7cc20b055ab Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:42:58 +0200
Subject: [PATCH 07/10] fix(chat): make the composer settings readable and the
 bar lighter

At 390px the three session settings collapsed to single letters, because a
max-width squeezed them while four controls shared one row. The context
meter becomes a 21px ring, which costs one slot instead of a bar plus a
figure, and each setting carries the category glyph the app already ships:
a glyph for the kind, the text for the value, which is the transcript's own
rule one surface down. Three bare words told apart only by colour is what
WCAG SC 1.4.1 forbids everywhere else here.

Tapping the ring drops the figure onto its own line, and tapping the figure
opens the context sheet, so nothing is lost, it just does not spend width
until it is asked for.

The bar loses its filled boxes: the controls are 40px of ink with the hit
area extended to 44px by an inset pseudo-element, so the row can be lighter
without being harder to hit. Send and stop keep their fill; they are the
primary action in that slot.
---
 src/pages/chat/ChatComposer.tsx               | 27 +++++-
 .../chat/composer/ContextWindowMeter.tsx      | 85 ++++++++++++++-----
 src/pages/chat/index.tsx                      | 38 ++++-----
 3 files changed, 107 insertions(+), 43 deletions(-)

diff --git a/src/pages/chat/ChatComposer.tsx b/src/pages/chat/ChatComposer.tsx
index a6f989b..fd23ce7 100644
--- a/src/pages/chat/ChatComposer.tsx
+++ b/src/pages/chat/ChatComposer.tsx
@@ -80,6 +80,25 @@ type ChatComposerProps = {
 	onStop: () => void;
 };
 
+// Four filled squares in a row read as a toolbar, which is the wrong weight
+// for a surface that sits under the transcript on every screen. The controls
+// are 40px of ink; the `after` pseudo-element extends the hit area to 44px
+// without changing the layout, so the row can be lighter without being harder
+// to hit.
+const COMPOSER_CONTROL =
+	"haptic-trigger relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-[10px] border-0 bg-transparent p-0 text-[1.15rem] text-secondary-text transition-[background,opacity] duration-150 after:absolute after:-inset-0.5 after:content-[''] active:bg-surface-soft disabled:cursor-default disabled:opacity-35 [-webkit-tap-highlight-color:transparent]";
+
+/**
+ * Send keeps its fill: it is the primary action on the surface. Stop takes the
+ * same slot while a turn runs and keeps the same weight, tinted rather than
+ * filled solid — a saturated block of red vibrates against a dark canvas.
+ */
+const COMPOSER_STOP =
+	"haptic-trigger relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[color-mix(in_srgb,var(--danger)_20%,transparent)] p-0 text-[1.15rem] text-danger transition-opacity duration-150 after:absolute after:-inset-0.5 after:content-[''] [-webkit-tap-highlight-color:transparent]";
+
+const COMPOSER_SEND =
+	"haptic-trigger relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-button-background p-0 text-[1.05rem] text-button-text transition-opacity duration-150 after:absolute after:-inset-0.5 after:content-[''] disabled:opacity-35 [-webkit-tap-highlight-color:transparent]";
+
 export function ChatComposer({
 	inputBarRef,
 	inputRef,
@@ -256,7 +275,7 @@ export function ChatComposer({
 					aria-disabled={!agentAvailable || !isConnected}
 				/>
 			</Combobox>
-			<div className="flex min-w-0 items-center gap-2 ios:px-3 ios-kbd:p-0">
+			<div className="flex min-w-0 flex-wrap items-center gap-2 ios:px-3 ios-kbd:p-0">
 				<input
 					ref={fileInputRef}
 					type="file"
@@ -270,7 +289,7 @@ export function ChatComposer({
 				<div className="flex min-w-0 flex-1 items-center gap-0.5">
 					<button
 						type="button"
-						className="haptic-trigger flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-[9px] border-0 bg-transparent p-0 text-[1.15rem] text-secondary-text transition-[background,opacity] duration-150 active:bg-surface-soft disabled:cursor-default disabled:opacity-35 [-webkit-tap-highlight-color:transparent]"
+						className={COMPOSER_CONTROL}
 						onClick={() => fileInputRef.current?.click()}
 						disabled={!agentAvailable || !isConnected}
 						aria-label="Attach image"
@@ -285,7 +304,7 @@ export function ChatComposer({
 				{isEditingQueuedPrompt ? null : isStreaming && !canSendPrompt ? (
 					<button
 						type="button"
-						className="haptic-trigger flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-[9px] border-0 bg-transparent p-0 text-[1.15rem] text-danger transition-opacity duration-150 [-webkit-tap-highlight-color:transparent]"
+						className={COMPOSER_STOP}
 						onClick={onStop}
 						aria-label="Stop generation"
 					>
@@ -298,7 +317,7 @@ export function ChatComposer({
 						// *why* (e.g. an image is still uploading) via a toast instead of
 						// silently doing nothing. The dimmed look is a class, not the
 						// native `disabled` attribute, which would swallow the tap.
-						className={`haptic-trigger flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-[9px] border-0 bg-transparent p-0 text-[1.15rem] text-[var(--active-text-color)] transition-opacity duration-150 disabled:opacity-35 [-webkit-tap-highlight-color:transparent] ${canSendPrompt && isConnected && agentAvailable ? "" : "opacity-35"}`}
+						className={`${COMPOSER_SEND} ${canSendPrompt && isConnected && agentAvailable ? "" : "opacity-35"}`}
 						onClick={() => {
 							if (canSendPrompt && isConnected && agentAvailable) {
 								onSend();
diff --git a/src/pages/chat/composer/ContextWindowMeter.tsx b/src/pages/chat/composer/ContextWindowMeter.tsx
index 3edd36d..99735c9 100644
--- a/src/pages/chat/composer/ContextWindowMeter.tsx
+++ b/src/pages/chat/composer/ContextWindowMeter.tsx
@@ -1,4 +1,4 @@
-import type React from "react";
+import { useState } from "react";
 import {
 	type ContextWindowUsage,
 	formatTokenCount,
@@ -6,34 +6,81 @@ import {
 	getContextWindowState,
 } from "./contextWindowUsage";
 
+const RADIUS = 8;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+/**
+ * A ring rather than a bar plus a figure: it is the shape Claude Code already
+ * uses for the same number, so it reads as a gauge, and it costs one slot in a
+ * row that has none to spare. The figure is not lost, it just does not spend
+ * width until it is asked for — tapping the ring drops it onto its own line,
+ * and tapping the figure opens the full breakdown.
+ */
 export default function ContextWindowMeter({
 	usedTokens,
 	maxTokens,
 	onClick,
 }: ContextWindowUsage & { onClick?: () => void }) {
+	const [showFigure, setShowFigure] = useState(false);
 	const percentage = getContextWindowPercentage(usedTokens, maxTokens);
 	if (percentage === null) return null;
 	const clampedPercentage = Math.max(0, Math.min(100, percentage));
 	const remainingTokens = Math.max(0, maxTokens - usedTokens);
-	const title = `${Math.round(percentage)}% used, ${formatTokenCount(remainingTokens)} left`;
+	const rounded = Math.round(clampedPercentage);
 	const state = getContextWindowState(clampedPercentage);
+	// The arc is accent at rest and only changes tone when the number starts to
+	// matter, so it reads as a gauge rather than as a permanent warning.
+	const tone =
+		state === "warning"
+			? "text-warning"
+			: state === "danger"
+				? "text-error"
+				: "text-accent";
+
 	return (
-		<button
-			type="button"
-			className={`haptic-trigger inline-flex h-[34px] w-[34px] min-w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-[9px] border-0 bg-transparent p-0 text-secondary-text transition-[background] duration-150 active:bg-surface-soft [-webkit-tap-highlight-color:transparent] ${state === "warning" ? "text-warning" : state === "danger" ? "text-error" : ""}`}
-			onClick={onClick}
-			title={`Context window: ${formatTokenCount(usedTokens)} / ${formatTokenCount(maxTokens)} tokens (${title})`}
-			aria-label={`Context window ${title}`}
-		>
-			<span
-				className="h-[18px] w-[18px] rounded-full shadow-[0_0_0_1px_var(--line-soft)_inset] [background:radial-gradient(circle_at_center,var(--secondary)_58%,transparent_60%),conic-gradient(currentColor_var(--context-used,0%),var(--surface-soft)_0)]"
-				style={
-					{
-						"--context-used": `${clampedPercentage}%`,
-					} as React.CSSProperties
-				}
-				aria-hidden="true"
-			/>
-		</button>
+		<>
+			<button
+				type="button"
+				className={`haptic-trigger relative grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-[10px] border-0 bg-transparent p-0 transition-[background] duration-150 after:absolute after:-inset-0.5 after:content-[''] active:bg-surface-soft [-webkit-tap-highlight-color:transparent] ${tone}`}
+				onClick={() => setShowFigure((value) => !value)}
+				aria-expanded={showFigure}
+				aria-label={`${rounded}% of the context window used`}
+			>
+				{/* Decorative: the button above carries the accessible name, and the
+				    figure below duplicates it visually once tapped. */}
+				<svg width="21" height="21" viewBox="0 0 20 20" aria-hidden="true">
+					<title>Context window usage</title>
+					<circle
+						cx="10"
+						cy="10"
+						r={RADIUS}
+						fill="none"
+						strokeWidth="2.6"
+						stroke="color-mix(in srgb, var(--primary-text) 9%, transparent)"
+					/>
+					<circle
+						cx="10"
+						cy="10"
+						r={RADIUS}
+						fill="none"
+						strokeWidth="2.6"
+						strokeLinecap="round"
+						stroke="currentColor"
+						strokeDasharray={CIRCUMFERENCE}
+						strokeDashoffset={CIRCUMFERENCE * (1 - clampedPercentage / 100)}
+						transform="rotate(-90 10 10)"
+					/>
+				</svg>
+			</button>
+			{showFigure && (
+				<button
+					type="button"
+					className={`haptic-trigger order-last basis-full cursor-pointer border-0 bg-transparent px-1 pb-0.5 text-right text-[11px] font-medium [-webkit-tap-highlight-color:transparent] ${tone}`}
+					onClick={onClick}
+				>
+					{`${rounded}% of context used · ${formatTokenCount(remainingTokens)} left`}
+				</button>
+			)}
+		</>
 	);
 }
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index c5c45eb..95e6eae 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -1908,37 +1908,35 @@ export default function ChatConversationPage({
 				configControls={
 					<button
 						type="button"
-						className="inline-flex h-[34px] min-w-0 max-w-full cursor-pointer items-center gap-[5px] overflow-hidden rounded-[9px] border-0 bg-transparent px-2 text-[12px] font-medium leading-none text-secondary-text transition-[background] duration-150 active:bg-surface-soft [-webkit-tap-highlight-color:transparent]"
+						className="haptic-trigger relative inline-flex min-h-10 min-w-0 max-w-full cursor-pointer items-center gap-2 overflow-hidden rounded-[10px] border-0 bg-transparent px-1 text-[12px] font-medium leading-none text-secondary-text transition-[background] duration-150 active:bg-surface-soft [-webkit-tap-highlight-color:transparent]"
 						onClick={() => setShowConfigSheet(true)}
+						aria-label="Session configuration"
 					>
-						<span
-							className="icon-settings shrink-0 text-[1.15rem]"
-							aria-hidden="true"
-						/>
-						{getProminentConfigOptions(configOptions).flatMap((option, i) => {
+						{getProminentConfigOptions(configOptions).map((option) => {
 							const options = flattenConfigValues(option);
 							const current = options.find(
 								(o) => String(o.value) === String(option.currentValue),
 							);
-							const tag = (
+							return (
 								<span
 									key={`${option.id}-value`}
-									className={`min-w-[3ch] max-w-[90px] shrink overflow-hidden text-ellipsis whitespace-nowrap ${option.category === "mode" ? "text-accent" : option.category === "model" ? "text-warning" : option.category === "thought_level" ? "text-[#818cf8]" : ""}`}
+									className="inline-flex min-w-0 shrink items-center gap-[3px]"
 								>
-									{current?.name ?? String(option.currentValue)}
+									{/* The glyph carries the category and the text carries the
+									    value, which is the transcript's own rule one surface
+									    down. Three bare words distinguished only by colour is
+									    what WCAG SC 1.4.1 forbids everywhere else here. */}
+									<span
+										className={`${getConfigIcon(option)} shrink-0 text-[0.95rem] opacity-70`}
+										aria-hidden="true"
+									/>
+									<span
+										className={`min-w-[3ch] shrink overflow-hidden text-ellipsis whitespace-nowrap ${option.category === "mode" ? "text-accent" : option.category === "model" ? "text-warning" : option.category === "thought_level" ? "text-[#818cf8]" : ""}`}
+									>
+										{current?.name ?? String(option.currentValue)}
+									</span>
 								</span>
 							);
-							return i === 0
-								? [tag]
-								: [
-										<span
-											key={`${option.id}-sep`}
-											className="mx-[3px] shrink-0 opacity-50"
-										>
-											·
-										</span>,
-										tag,
-									];
 						})}
 					</button>
 				}

From 6d6041ce4bb3a77d11c6a1a42b7ea89ff8eaa70c Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Wed, 19 Aug 2026 23:46:04 +0200
Subject: [PATCH 08/10] fix(chat): fit the path budget to the column it
 actually renders in

A path elided to 44 characters is 317px of mono, and the narrowest column it
renders in, the settled fold's rail at 390px, is 281px. CSS then truncated it
a second time at the tail, which is exactly where the basename is, so a row
lost the one part that tells it apart from its neighbours. Measured on the
real components rather than assumed.
---
 src/pages/chat/chat-bubble/lib/elide.test.ts |  8 ++++++++
 src/pages/chat/chat-bubble/lib/elide.ts      | 16 ++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/pages/chat/chat-bubble/lib/elide.test.ts b/src/pages/chat/chat-bubble/lib/elide.test.ts
index a9c4fcc..19aab70 100644
--- a/src/pages/chat/chat-bubble/lib/elide.test.ts
+++ b/src/pages/chat/chat-bubble/lib/elide.test.ts
@@ -42,6 +42,14 @@ describe("elidePath", () => {
 			elidePath(`a/${"x".repeat(60)}.md`, 4).length,
 		).toBeGreaterThanOrEqual(5);
 	});
+
+	it("defaults to a budget that fits the narrowest column it renders in", () => {
+		// The settled rail is 281 CSS px at 390px, and the mono face advances
+		// 7.2px per character. A longer default is clipped again by CSS, at the
+		// tail, which is where the basename is.
+		expect(elidePath(LONG_PATH).length).toBeLessThanOrEqual(36);
+		expect(elidePath(LONG_PATH)).toContain("04-tax-basis.md");
+	});
 });
 
 describe("elideCommand", () => {
diff --git a/src/pages/chat/chat-bubble/lib/elide.ts b/src/pages/chat/chat-bubble/lib/elide.ts
index 353b041..dedd493 100644
--- a/src/pages/chat/chat-bubble/lib/elide.ts
+++ b/src/pages/chat/chat-bubble/lib/elide.ts
@@ -1,5 +1,14 @@
 const ELLIPSIS = "…";
 
+/**
+ * Measured, not guessed: the narrowest column a path row gets is the settled
+ * fold's rail at 390px, 281 CSS px wide, and the mono face advances 7.2px per
+ * character there. Anything longer is clipped again by `text-overflow`, at the
+ * tail, which throws away the basename this whole helper exists to keep.
+ */
+const PATH_MAX_CHARS = 36;
+const COMMAND_MAX_CHARS = 38;
+
 /**
  * Shorten a path so the basename survives. The basename is the only part that
  * distinguishes one row from its neighbours, so the middle of the directory
@@ -10,7 +19,7 @@ const ELLIPSIS = "…";
  * render, so the full value leaves the DOM and a screen reader would otherwise
  * hear the shortened path too.
  */
-export function elidePath(path: string, maxChars = 44): string {
+export function elidePath(path: string, maxChars = PATH_MAX_CHARS): string {
 	const clean = path.replace(/\/+$/, "");
 	if (clean.length <= maxChars) return clean;
 	// Carbon: an ellipsis should stand for three or more characters, otherwise
@@ -37,7 +46,10 @@ export function elidePath(path: string, maxChars = 44): string {
 }
 
 /** Keep the head of a command: the binary and its first arguments identify it. */
-export function elideCommand(command: string, maxChars = 48): string {
+export function elideCommand(
+	command: string,
+	maxChars = COMMAND_MAX_CHARS,
+): string {
 	const line = command.split(/\r?\n/, 1)[0]?.trim() ?? "";
 	if (line.length <= maxChars) return line;
 	return `${line.slice(0, maxChars - 1)}${ELLIPSIS}`;

From 864e6a8c0cd63673acdac46a3d548829d1e4934e Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Thu, 20 Aug 2026 08:13:51 +0200
Subject: [PATCH 09/10] fix(chat): put the jump control on the rule and stop
 the composer jumping

Four corrections from a design review of the screenshots.

The away rule and the jump pill were two controls fighting for one corner,
which is the collision Discord shipped twice in two months. They are now one:
the rule that says what is new is also the way back to it, centred on the
line. The floating pill survives only for the case with no rule, and is
smaller, so the two can never appear together.

The changed-files counts drifted into the middle of the row, because the
shared card gives its chevron `margin-left: auto` and the stat claimed it
too, so the free space was split between them. Only the stat pushes now, and
`+41` and `-12` line up in one right-hand column.

The three session settings lose their per-category colours. With a glyph
carrying the category the colour told nothing apart, it only made the row
loud.

The context figure becomes a popover instead of a line under the row. A line
grew the composer by 20px and pushed every control up from under the thumb
that had just tapped one; measured, the popover leaves it at 132px in both
states. A readout must not move what it was read from.
---
 src/pages/chat/ChatComposer.tsx               |  2 +-
 .../components/ChangedFilesBlock.scss         | 14 ++++
 .../chat/composer/ContextWindowMeter.tsx      | 31 ++++++---
 src/pages/chat/index.tsx                      | 43 ++++++++----
 src/pages/chat/style.scss                     | 68 +++++++++++++------
 5 files changed, 113 insertions(+), 45 deletions(-)

diff --git a/src/pages/chat/ChatComposer.tsx b/src/pages/chat/ChatComposer.tsx
index fd23ce7..6b0451a 100644
--- a/src/pages/chat/ChatComposer.tsx
+++ b/src/pages/chat/ChatComposer.tsx
@@ -275,7 +275,7 @@ export function ChatComposer({
 					aria-disabled={!agentAvailable || !isConnected}
 				/>
 			</Combobox>
-			<div className="flex min-w-0 flex-wrap items-center gap-2 ios:px-3 ios-kbd:p-0">
+			<div className="flex min-w-0 items-center gap-2 ios:px-3 ios-kbd:p-0">
 				<input
 					ref={fileInputRef}
 					type="file"
diff --git a/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
index 69272a1..01e45da 100644
--- a/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
+++ b/src/pages/chat/chat-bubble/components/ChangedFilesBlock.scss
@@ -35,12 +35,25 @@
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
+    // The shared card gives the chevron `margin-left: auto`, and with the stat
+    // claiming it too the free space is split between them and the numbers
+    // drift into the middle of the row. Only the stat pushes.
     >em {
+      margin-left: 0;
       font-style: normal;
       font-size: 10px;
       opacity: 0.5;
       flex-shrink: 0;
     }
+
+    // The filename takes the slack so the counts stay flush right.
+    >span:not([class]) {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 
@@ -57,6 +70,7 @@
 .changed-files-stat {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 6px;
   margin-left: auto;
   padding-left: 8px;
diff --git a/src/pages/chat/composer/ContextWindowMeter.tsx b/src/pages/chat/composer/ContextWindowMeter.tsx
index 99735c9..020bd22 100644
--- a/src/pages/chat/composer/ContextWindowMeter.tsx
+++ b/src/pages/chat/composer/ContextWindowMeter.tsx
@@ -13,8 +13,11 @@ const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
  * A ring rather than a bar plus a figure: it is the shape Claude Code already
  * uses for the same number, so it reads as a gauge, and it costs one slot in a
  * row that has none to spare. The figure is not lost, it just does not spend
- * width until it is asked for — tapping the ring drops it onto its own line,
- * and tapping the figure opens the full breakdown.
+ * width until it is asked for.
+ *
+ * Asking for it opens a popover rather than adding a line, because a line under
+ * the row grows the composer and pushes every control up from under the thumb
+ * that just tapped one. A readout must not move what it was read from.
  */
 export default function ContextWindowMeter({
 	usedTokens,
@@ -38,7 +41,7 @@ export default function ContextWindowMeter({
 				: "text-accent";
 
 	return (
-		<>
+		<div className="relative shrink-0">
 			<button
 				type="button"
 				className={`haptic-trigger relative grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-[10px] border-0 bg-transparent p-0 transition-[background] duration-150 after:absolute after:-inset-0.5 after:content-[''] active:bg-surface-soft [-webkit-tap-highlight-color:transparent] ${tone}`}
@@ -46,8 +49,8 @@ export default function ContextWindowMeter({
 				aria-expanded={showFigure}
 				aria-label={`${rounded}% of the context window used`}
 			>
-				{/* Decorative: the button above carries the accessible name, and the
-				    figure below duplicates it visually once tapped. */}
+				{/* Decorative: the button carries the accessible name, and the popover
+				    duplicates it visually once tapped. */}
 				<svg width="21" height="21" viewBox="0 0 20 20" aria-hidden="true">
 					<title>Context window usage</title>
 					<circle
@@ -75,12 +78,22 @@ export default function ContextWindowMeter({
 			{showFigure && (
 				<button
 					type="button"
-					className={`haptic-trigger order-last basis-full cursor-pointer border-0 bg-transparent px-1 pb-0.5 text-right text-[11px] font-medium [-webkit-tap-highlight-color:transparent] ${tone}`}
-					onClick={onClick}
+					className="haptic-trigger absolute bottom-[calc(100%+8px)] right-0 z-10 flex cursor-pointer items-baseline gap-1.5 whitespace-nowrap rounded-[10px] border border-(--card-border) bg-(--popup-background) px-3 py-2 text-[11px] font-medium shadow-[0_8px_24px_-8px_var(--shadow-color)] [-webkit-tap-highlight-color:transparent]"
+					onClick={() => {
+						setShowFigure(false);
+						onClick?.();
+					}}
 				>
-					{`${rounded}% of context used · ${formatTokenCount(remainingTokens)} left`}
+					<span className={`font-semibold ${tone}`}>{`${rounded}% used`}</span>
+					<span className="text-secondary-text">
+						{`${formatTokenCount(remainingTokens)} left`}
+					</span>
+					<span
+						className="icon-chevron-right text-[9px] text-secondary-text opacity-60"
+						aria-hidden="true"
+					/>
 				</button>
 			)}
-		</>
+		</div>
 	);
 }
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index 95e6eae..41053c3 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -535,6 +535,7 @@ export default function ChatConversationPage({
 		() => countStepsSince(lastVisibleMessage?.parts ?? [], lastSeenAt),
 		[lastVisibleMessage, lastSeenAt],
 	);
+	const showAwayDivider = shouldShowAwayMarker(awayCount, isAtBottom);
 
 	const hasMore = allMessages.length > visibleCount || hasMoreRemote;
 	const promptSuggestions = useMemo(
@@ -1775,25 +1776,36 @@ export default function ChatConversationPage({
 						workStartedAt,
 						workDurationMs,
 					}) => {
-						const marksAway =
-							msg === lastVisibleMessage &&
-							shouldShowAwayMarker(awayCount, isAtBottom);
+						const marksAway = msg === lastVisibleMessage && showAwayDivider;
 						return (
 							<Fragment key={renderKey}>
 								{marksAway && (
+									// The rule that says what is new *is* the way back to it, so
+									// the control sits centred on the line rather than floating
+									// above it. Two elements competing for the same corner is the
+									// collision Discord shipped twice in two months; one element
+									// cannot collide with itself.
+									//
 									// Deliberately not role="separator": every descendant of that
-									// role is automatically presentational, so the label would have
-									// to be duplicated into aria-label and the visible text dropped
-									// from the accessibility tree. This rule carries information
-									// rather than structure, so the text stays real text and the
-									// rules beside it are decorative pseudo-elements.
+									// role is presentational, which would drop the count from the
+									// accessibility tree. The count is content, not structure.
 									//
 									// It sits above the whole turn rather than between two of its
 									// rows: the away steps live inside one assistant bubble, and
 									// splitting a bubble would mean rendering its work log twice.
-									<div className="chat-away">
-										{`${awayCount} steps while you were away`}
-									</div>
+									<button
+										type="button"
+										className="chat-away haptic-trigger"
+										onClick={() => {
+											stickToBottomRef.current = true;
+											scrollToBottomNow(true);
+										}}
+									>
+										<span className="chat-away-label">
+											{`${awayCount} steps while you were away`}
+											<span className="icon-chevron-down" aria-hidden="true" />
+										</span>
+									</button>
 								)}
 								<ChatBubble
 									messageKey={messageKey}
@@ -1855,7 +1867,7 @@ export default function ChatConversationPage({
 				)}
 				<div className="chat-bottom-anchor" />
 			</div>
-			{chatIsStreaming && !isAtBottom && (
+			{chatIsStreaming && !isAtBottom && !showAwayDivider && (
 				<button
 					type="button"
 					className="chat-jump haptic-trigger"
@@ -1930,9 +1942,10 @@ export default function ChatConversationPage({
 										className={`${getConfigIcon(option)} shrink-0 text-[0.95rem] opacity-70`}
 										aria-hidden="true"
 									/>
-									<span
-										className={`min-w-[3ch] shrink overflow-hidden text-ellipsis whitespace-nowrap ${option.category === "mode" ? "text-accent" : option.category === "model" ? "text-warning" : option.category === "thought_level" ? "text-[#818cf8]" : ""}`}
-									>
+									{/* One colour for all three values: with a glyph per
+									    category the colour no longer tells them apart, it just
+									    makes the row loud. */}
+									<span className="min-w-[3ch] shrink overflow-hidden text-ellipsis whitespace-nowrap text-accent">
 										{current?.name ?? String(option.currentValue)}
 									</span>
 								</span>
diff --git a/src/pages/chat/style.scss b/src/pages/chat/style.scss
index 55dd0b8..0ae61ac 100644
--- a/src/pages/chat/style.scss
+++ b/src/pages/chat/style.scss
@@ -672,39 +672,67 @@ img.project-chat-agent-avatar-img {
 }
 
 // Where reading stopped, when a turn ran on while the app was backgrounded.
-// The rule is drawn at 55% of the accent, not 45%: at 45% it computes to
-// 3.05:1 against the dark canvas and clears WCAG SC 1.4.11 only because the
-// threshold is not rounded. At 55% it is 4.05:1. The label carries the
-// meaning, so the colour is not the only signal (SC 1.4.1, Level A).
+// The rule *is* the control: tapping it returns to the newest work, so there is
+// no floating pill hovering over the line it would otherwise obscure.
+//
+// The rule is drawn at 55% of the accent, not 45%: at 45% it computes to 3.05:1
+// against the dark canvas and clears WCAG SC 1.4.11 only because the threshold
+// is not rounded. At 55% it is 4.05:1. The label carries the meaning, so the
+// colour is not the only signal (SC 1.4.1, Level A).
 .chat-away {
   display: flex;
   align-items: center;
-  gap: 9px;
-  margin: 14px 0 10px;
+  gap: 10px;
+  width: 100%;
+  // 44px so the rule is a real target, not a hairline to aim at.
+  min-height: 44px;
+  margin: 10px 0 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  font: inherit;
   font-size: 12px;
   font-weight: 620;
-  color: var(--accent);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 
   &::before,
   &::after {
     content: "";
+    flex: 1;
     height: 1px;
     background: color-mix(in srgb, var(--accent) 55%, transparent);
   }
 
-  &::before {
-    flex: 0 0 14px;
+  &:active .chat-away-label {
+    background: color-mix(in srgb, var(--accent) 22%, transparent);
   }
+}
 
-  &::after {
-    flex: 1;
+.chat-away-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 5px 11px;
+  border-radius: 20px;
+  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  white-space: nowrap;
+
+  > [class^="icon-"] {
+    font-size: 10px;
+    opacity: 0.8;
   }
 }
 
-// Scrolling up locks the view; this is the way back. The lock is the pause
-// mechanism WCAG SC 2.2.2 (Level A) requires for auto-updating content, so
-// the pill is conformance rather than decoration. Labelled rather than an
-// icon alone, and 44px tall rather than the 24 CSS px SC 2.5.8 permits.
+// Scrolling up locks the view; this is the way back when there is no away rule
+// to carry it. The lock is the pause mechanism WCAG SC 2.2.2 (Level A) requires
+// for auto-updating content, so the pill is conformance rather than decoration.
+// Labelled rather than an icon alone. 38px is above the 24 CSS px SC 2.5.8 asks
+// for and below Apple's 44pt recommendation, which is the trade for a control
+// that floats over the transcript rather than sitting in it.
 .chat-jump {
   position: absolute;
   right: 14px;
@@ -716,15 +744,15 @@ img.project-chat-agent-avatar-img {
   display: inline-flex;
   align-items: center;
   gap: 7px;
-  min-height: 44px;
-  padding: 0 15px;
+  min-height: 38px;
+  padding: 0 13px;
   border: 0;
-  border-radius: 22px;
+  border-radius: 19px;
   background: var(--accent);
   color: var(--button-text);
   font: inherit;
-  font-size: 12.5px;
-  font-weight: 650;
+  font-size: 12px;
+  font-weight: 640;
   cursor: pointer;
   box-shadow: 0 8px 20px -6px var(--shadow-color);
   -webkit-tap-highlight-color: transparent;

From a176d3e558f93c98f487c9eb2c4de638f12cbb2a Mon Sep 17 00:00:00 2001
From: Jan Karres <jan.karres@devowl.io>
Date: Thu, 20 Aug 2026 08:54:32 +0200
Subject: [PATCH 10/10] fix(chat): revive the away rule, and centre the send
 glyph optically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three corrections from a second design review.

**The away rule could never appear.** It compared a stored timestamp against
`part.timestamp`, and the wire carries no timestamp per part — only
`AcpMessage` has one, and a turn already running when you left keeps its
original stamp however many steps it adds while you are away. The count was
therefore always zero and the rule was dead code. The marker now stores which
turn was on screen and how many work steps it had, and the count is what that
turn gained since; a different turn means all of it is new. That is the only
measurement the available data supports, and it is the one the reader means.

**The send glyph read as low and left.** Its bounding box is a centred square,
but the paper plane's mass sits toward the upper right: traced on a canvas,
the ink centroid is 7.3% right and 8.1% above the box centre. It is nudged by
that amount, in em, and the circle drops from 40px to 36px inside the same
44px target.

**`role="log"` gets an explicit `aria-live="off"`.** The role is for
structure; its implicit politeness would read a twenty-five-row work log
aloud a row at a time. The turn header is a status region and announces the
state change once, which is the part worth hearing.
---
 src/pages/chat/ChatComposer.tsx               | 20 ++++++-
 .../chat/chat-bubble/lib/awayMarker.test.ts   | 55 +++++++++++--------
 src/pages/chat/chat-bubble/lib/awayMarker.ts  | 47 +++++++++++-----
 src/pages/chat/index.tsx                      | 42 ++++++++++----
 4 files changed, 112 insertions(+), 52 deletions(-)

diff --git a/src/pages/chat/ChatComposer.tsx b/src/pages/chat/ChatComposer.tsx
index 6b0451a..d4ce881 100644
--- a/src/pages/chat/ChatComposer.tsx
+++ b/src/pages/chat/ChatComposer.tsx
@@ -92,12 +92,16 @@ const COMPOSER_CONTROL =
  * Send keeps its fill: it is the primary action on the surface. Stop takes the
  * same slot while a turn runs and keeps the same weight, tinted rather than
  * filled solid — a saturated block of red vibrates against a dark canvas.
+ *
+ * Both are 36px of fill inside a 44px target, which the `after` pseudo-element
+ * supplies without changing the layout.
  */
 const COMPOSER_STOP =
-	"haptic-trigger relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[color-mix(in_srgb,var(--danger)_20%,transparent)] p-0 text-[1.15rem] text-danger transition-opacity duration-150 after:absolute after:-inset-0.5 after:content-[''] [-webkit-tap-highlight-color:transparent]";
+	"haptic-trigger relative flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[color-mix(in_srgb,var(--danger)_20%,transparent)] p-0 text-[1.05rem] text-danger transition-opacity duration-150 after:absolute after:-inset-1 after:content-[''] [-webkit-tap-highlight-color:transparent]";
 
+/** The glyph inside carries an optical nudge; see the render site. */
 const COMPOSER_SEND =
-	"haptic-trigger relative flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-button-background p-0 text-[1.05rem] text-button-text transition-opacity duration-150 after:absolute after:-inset-0.5 after:content-[''] disabled:opacity-35 [-webkit-tap-highlight-color:transparent]";
+	"haptic-trigger relative flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-button-background p-0 text-[1.05rem] text-button-text transition-opacity duration-150 after:absolute after:-inset-1 after:content-[''] disabled:opacity-35 [-webkit-tap-highlight-color:transparent]";
 
 export function ChatComposer({
 	inputBarRef,
@@ -328,7 +332,17 @@ export function ChatComposer({
 						aria-disabled={!canSendPrompt || !isConnected || !agentAvailable}
 						aria-label={isStreaming ? "Queue prompt" : "Send"}
 					>
-						<span className="icon-send" aria-hidden="true" />
+						<span
+							className="icon-send"
+							// An optical nudge, not a geometric one. The glyph's bounding box
+							// is a centred square, but the paper plane's mass sits toward the
+							// upper right: traced on a canvas, the ink centroid is 7.3% right
+							// and 8.1% above the box centre, which is why a geometrically
+							// centred glyph reads as low and left. This puts the centroid on
+							// the centre, in em so it follows the font size.
+							style={{ transform: "translate(-0.073em, 0.081em)" }}
+							aria-hidden="true"
+						/>
 					</button>
 				)}
 			</div>
diff --git a/src/pages/chat/chat-bubble/lib/awayMarker.test.ts b/src/pages/chat/chat-bubble/lib/awayMarker.test.ts
index bd90907..c06aa73 100644
--- a/src/pages/chat/chat-bubble/lib/awayMarker.test.ts
+++ b/src/pages/chat/chat-bubble/lib/awayMarker.test.ts
@@ -1,39 +1,46 @@
 import type { AcpMessagePart } from "@shellular/protocol";
 import { describe, expect, it } from "vitest";
-import { countStepsSince, shouldShowAwayMarker } from "./awayMarker";
+import {
+	countStepsSince,
+	countWorkSteps,
+	shouldShowAwayMarker,
+} from "./awayMarker";
 
-const at = (timestamp: number) =>
-	({
-		type: "tool_call",
-		name: "execute",
-		id: `t${timestamp}`,
-		timestamp,
-	}) as unknown as AcpMessagePart;
+const step = (id: string) =>
+	({ type: "tool_call", name: "execute", id }) as AcpMessagePart;
+
+describe("countWorkSteps", () => {
+	it("counts the work parts and ignores commentary", () => {
+		expect(
+			countWorkSteps([
+				step("a"),
+				{ type: "text", text: "Checking." },
+				step("b"),
+			]),
+		).toBe(2);
+	});
+});
 
 describe("countStepsSince", () => {
 	it("counts nothing when the marker was never set", () => {
-		expect(countStepsSince([at(1), at(2)], undefined)).toBe(0);
+		expect(countStepsSince("m1", 7, undefined)).toBe(0);
 	});
 
-	it("counts only parts newer than the marker", () => {
-		expect(countStepsSince([at(1), at(2), at(3)], 1)).toBe(2);
+	it("counts what the turn gained since the marker", () => {
+		expect(countStepsSince("m1", 9, { messageKey: "m1", steps: 4 })).toBe(5);
 	});
 
-	it("normalises protocol seconds against millisecond markers", () => {
-		// Without the normalisation a seconds stamp is always smaller than a
-		// millisecond marker, so nothing would ever count as new.
-		const marker = 1_700_000_001_000;
-		expect(countStepsSince([at(1_700_000_000)], marker)).toBe(0);
-		expect(countStepsSince([at(1_700_000_002)], marker)).toBe(1);
+	it("counts a whole new turn as new", () => {
+		// The turn on screen when you left is finished; this one arrived after.
+		expect(countStepsSince("m2", 6, { messageKey: "m1", steps: 4 })).toBe(6);
 	});
 
-	it("ignores parts that carry no timestamp", () => {
-		expect(
-			countStepsSince(
-				[{ type: "text", text: "no stamp" } as AcpMessagePart, at(9_000)],
-				1_000,
-			),
-		).toBe(1);
+	it("never goes negative when the turn shrank", () => {
+		expect(countStepsSince("m1", 2, { messageKey: "m1", steps: 4 })).toBe(0);
+	});
+
+	it("counts nothing while the turn has not moved", () => {
+		expect(countStepsSince("m1", 4, { messageKey: "m1", steps: 4 })).toBe(0);
 	});
 });
 
diff --git a/src/pages/chat/chat-bubble/lib/awayMarker.ts b/src/pages/chat/chat-bubble/lib/awayMarker.ts
index a796a8f..2628525 100644
--- a/src/pages/chat/chat-bubble/lib/awayMarker.ts
+++ b/src/pages/chat/chat-bubble/lib/awayMarker.ts
@@ -1,30 +1,47 @@
 import type { AcpMessagePart } from "@shellular/protocol";
+import { isWorkActionPart } from "./workLog";
 
 /** Below this the rule costs more attention than the information is worth. */
 const MIN_STEPS = 2;
 
-/** The protocol mixes seconds and milliseconds; `workLog.ts` normalises the same way. */
-function timestampMs(value: unknown): number | undefined {
-	if (typeof value !== "number" || !Number.isFinite(value)) return undefined;
-	return value < 10_000_000_000 ? value * 1_000 : value;
+/**
+ * Where reading stopped, stored per chat.
+ *
+ * It counts steps rather than storing a timestamp, because **the wire carries
+ * no timestamp per part** — only `AcpMessage` has one, and a turn that was
+ * already running when you left keeps its original stamp however many steps it
+ * adds while you are away. Comparing stamps would therefore have reported
+ * nothing, every time. Counting what was on screen when you left is the only
+ * measurement the available data supports, and it is the one the reader
+ * actually means.
+ */
+export interface AwayMarker {
+	/** Which turn was on screen, so a new turn is not mistaken for growth. */
+	messageKey: string;
+	/** How many work steps that turn had at the time. */
+	steps: number;
+}
+
+/** How many work steps a turn has, which is what the reader counts as "steps". */
+export function countWorkSteps(parts: readonly AcpMessagePart[]): number {
+	return parts.filter(isWorkActionPart).length;
 }
 
 export function countStepsSince(
-	parts: readonly AcpMessagePart[],
-	lastSeenAt: number | undefined,
+	currentKey: string | undefined,
+	currentSteps: number,
+	marker: AwayMarker | undefined,
 ): number {
-	const marker = timestampMs(lastSeenAt);
-	if (marker === undefined) return 0;
-	return parts.filter((part) => {
-		const stamp = timestampMs((part as { timestamp?: unknown }).timestamp);
-		return stamp !== undefined && stamp > marker;
-	}).length;
+	if (!marker || !currentKey) return 0;
+	// A different turn means everything on screen arrived after you left.
+	if (marker.messageKey !== currentKey) return currentSteps;
+	return Math.max(0, currentSteps - marker.steps);
 }
 
 /**
- * The marker is anchored to a stored `lastSeenAt`, never to the scroll
- * position: scrolling past 25 dense rows is scanning, not reading. Zulip ships
- * this distinction as a setting for the same reason.
+ * The marker is anchored to what was on screen when you left, never to the
+ * scroll position: scrolling past twenty-five dense rows is scanning, not
+ * reading. Zulip ships this distinction as a setting for the same reason.
  */
 export function shouldShowAwayMarker(
 	count: number,
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx
index 41053c3..f87b909 100644
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -103,7 +103,9 @@ import ElicitationCard from "./chat-bubble/components/ElicitationCard";
 import PermissionRequestCard from "./chat-bubble/components/PermissionRequestCard";
 import type { TurnState } from "./chat-bubble/components/TurnHeader";
 import {
+	type AwayMarker,
 	countStepsSince,
+	countWorkSteps,
 	shouldShowAwayMarker,
 } from "./chat-bubble/lib/awayMarker";
 import {
@@ -298,7 +300,9 @@ export default function ChatConversationPage({
 	// Reactive counterpart of stickToBottomRef: the jump pill and the away rule
 	// have to re-render, and a ref cannot do that.
 	const [isAtBottom, setIsAtBottom] = useState(true);
-	const [lastSeenAt, setLastSeenAt] = useState<number | undefined>(undefined);
+	const [awayMarker, setAwayMarker] = useState<AwayMarker | undefined>(
+		undefined,
+	);
 	const prevScrollHeightRef = useRef(0);
 	const autoScrollFrameRef = useRef(0);
 	const autoScrollSuppressedRef = useRef(false);
@@ -513,27 +517,39 @@ export default function ChatConversationPage({
 	}, [allMessages.length]);
 
 	// Where reading stopped, so a turn that ran on while the app was backgrounded
-	// can say so. Anchored to a stored timestamp, never to the scroll position:
-	// scrolling past twenty-five dense rows is scanning, not reading.
+	// can say so. Anchored to what was on screen when you left, never to the
+	// scroll position: scrolling past twenty-five dense rows is scanning, not
+	// reading.
 	const seenKey = `shellular:chat-last-seen:${agentId}:${activeSessionId || sessionId || "new"}`;
+	const currentTurnKey = lastVisibleMessage
+		? getMessageKey(lastVisibleMessage)
+		: undefined;
+	const currentTurnSteps = countWorkSteps(lastVisibleMessage?.parts ?? []);
+	// Read in an effect, written in its cleanup: the marker advances on a
+	// deliberate boundary only, which is leaving the chat.
+	const turnRef = useRef({ key: currentTurnKey, steps: currentTurnSteps });
+	turnRef.current = { key: currentTurnKey, steps: currentTurnSteps };
 	useEffect(() => {
 		let mounted = true;
 		void store
-			.get<number>(seenKey)
+			.get<AwayMarker>(seenKey)
 			.then((value) => {
-				if (mounted) setLastSeenAt(value ?? undefined);
+				if (mounted) setAwayMarker(value ?? undefined);
 			})
 			.catch(() => {});
-		// The marker advances on a deliberate boundary only: leaving the chat.
 		return () => {
 			mounted = false;
-			void store.set(seenKey, Date.now()).catch(() => {});
+			const { key, steps } = turnRef.current;
+			if (key) {
+				void store.set(seenKey, { messageKey: key, steps }).catch(() => {});
+			}
 		};
 	}, [seenKey]);
 
-	const awayCount = useMemo(
-		() => countStepsSince(lastVisibleMessage?.parts ?? [], lastSeenAt),
-		[lastVisibleMessage, lastSeenAt],
+	const awayCount = countStepsSince(
+		currentTurnKey,
+		currentTurnSteps,
+		awayMarker,
 	);
 	const showAwayDivider = shouldShowAwayMarker(awayCount, isAtBottom);
 
@@ -1757,6 +1773,12 @@ export default function ChatConversationPage({
 				className="chat-history-content"
 				role="log"
 				aria-label="Conversation"
+				// The role is for structure, not for narration. Its implicit politeness
+				// is "polite", and a turn appends up to twenty-five rows, so leaving it
+				// on reads the whole work log aloud a row at a time. The turn header is
+				// a status region and announces the state change once, which is the part
+				// worth hearing; the rows stay navigable.
+				aria-live="off"
 			>
 				{syncing && allMessages.length === 0 && <ChatHistorySkeleton />}
 				{hasMore && historyScrollReady && (