diff --git a/apps/contract/src/contract.ts b/apps/contract/src/contract.ts
index c9fa6edf..d399b791 100644
--- a/apps/contract/src/contract.ts
+++ b/apps/contract/src/contract.ts
@@ -346,17 +346,20 @@ export const SyncTracking = Schema.Union([
 ]);
 export type SyncTracking = typeof SyncTracking.Type;
 
-/** What the dashboard splits an organization's threads by. */
-export const DashboardBy = Schema.Literals(["status", "priority", "grouping"]);
-export type DashboardBy = typeof DashboardBy.Type;
+/** What All Threads splits an organization's threads by. */
+export const ThreadsBy = Schema.Literals(["status", "priority", "grouping"]);
+export type ThreadsBy = typeof ThreadsBy.Type;
 
-/** A thread as the dashboard lists it, with its desktop columns. */
-export const DashboardThread = Schema.Struct({
+/** A thread as All Threads lists it, with its machine and desktop columns. */
+export const ListedThread = Schema.Struct({
 	id: Schema.String,
 	sessionId: Schema.String,
 	originKind: Schema.Literals(["main", "fork"]),
+	/** The thread a fork was cut from (a fork's, for a fork of a fork); null for a main thread. */
+	originThreadId: Schema.NullOr(Schema.String),
 	/** Its own title, else its nearest titled ancestor's, else what an untitled one is called. */
 	title: Schema.String,
+	machine: Schema.Struct({ id: Schema.String, name: Schema.String }),
 	project: Schema.Struct({ id: Schema.String, name: Schema.String }),
 	runState: RunState,
 	status: ThreadStatus,
@@ -368,29 +371,29 @@ export const DashboardThread = Schema.Struct({
 	/** Last activity, epoch milliseconds. */
 	updatedAt: Schema.Number,
 });
-export type DashboardThread = typeof DashboardThread.Type;
+export type ListedThread = typeof ListedThread.Type;
 
-/** One list of the dashboard: the threads with one status, one priority, or in one group (`null` is ungrouped), in `ordering`. */
-export const DashboardList = Schema.Union([
-	Schema.TaggedStruct("Status", { status: ThreadStatus, threads: Schema.Array(DashboardThread) }),
-	Schema.TaggedStruct("Priority", { priority: Priority, threads: Schema.Array(DashboardThread) }),
+/** One list of All Threads: the threads with one status, one priority, or in one group (`null` is ungrouped), in `ordering`. */
+export const ThreadList = Schema.Union([
+	Schema.TaggedStruct("Status", { status: ThreadStatus, threads: Schema.Array(ListedThread) }),
+	Schema.TaggedStruct("Priority", { priority: Priority, threads: Schema.Array(ListedThread) }),
 	Schema.TaggedStruct("Grouping", {
 		groupingId: Schema.NullOr(Schema.String),
-		threads: Schema.Array(DashboardThread),
+		threads: Schema.Array(ListedThread),
 	}),
 ]);
-export type DashboardList = typeof DashboardList.Type;
+export type ThreadList = typeof ThreadList.Type;
 
 /**
  * An organization's threads split into lists, each present even when empty: by status, by priority
  * (urgent first, none last), or by group (groups in their `ordering`, ungrouped last). The
  * organization's groups come with it, in their `ordering`, whatever the split.
  */
-export const Dashboard = Schema.Struct({
-	lists: Schema.Array(DashboardList),
+export const AllThreads = Schema.Struct({
+	lists: Schema.Array(ThreadList),
 	groups: Schema.Array(Grouping),
 });
-export type Dashboard = typeof Dashboard.Type;
+export type AllThreads = typeof AllThreads.Type;
 
 /**
  * The topics a client follows to keep each read current; it reads again when one fires.
@@ -399,12 +402,12 @@ export type Dashboard = typeof Dashboard.Type;
  * - `threads.line`: `sync/changed` whose `threadId` is the thread (its entries and inbox) or that
  *   names a thread (the thread itself, or the ancestor an untitled fork takes its title from);
  *   `sync/delta/<thread>` streams its draft between checkpoints.
- * - `dashboard.list`: `sync/changed` naming a thread or a removed session; every `sync/status` and
+ * - `threads.list`: `sync/changed` naming a thread or a removed session; every `sync/status` and
  *   `sync/tracking`.
  */
 export const readTopics = {
 	sidebar: [syncTopics.changed, syncTopics.tracking],
-	dashboard: [syncTopics.changed, syncTopics.status, syncTopics.tracking],
+	threads: [syncTopics.changed, syncTopics.status, syncTopics.tracking],
 	line: (threadId: string) => [syncTopics.changed, syncTopics.delta(threadId)],
 };
 
@@ -432,9 +435,9 @@ export const Api = RpcGroup.make(
 		error: SyncError,
 	}),
 	/** An organization's threads that are not deleted, subagents left out, split by `by` into lists in `ordering`. Read from app.db alone. */
-	Rpc.make("dashboard.list", {
-		payload: { organizationId: Schema.String, by: DashboardBy },
-		success: Dashboard,
+	Rpc.make("threads.list", {
+		payload: { organizationId: Schema.String, by: ThreadsBy },
+		success: AllThreads,
 	}),
 	/** The models a new session can use; `hostDir` is its folder, whose project settings apply. */
 	Rpc.make("models.list", {
diff --git a/apps/server/src/handlers.ts b/apps/server/src/handlers.ts
index 886425bd..70108f90 100644
--- a/apps/server/src/handlers.ts
+++ b/apps/server/src/handlers.ts
@@ -45,7 +45,7 @@ export const layer = Contract.Api.toLayer(
 			...tracking,
 
 			"sidebar.list": (input) => Reads.sidebar(input).pipe(Effect.provideService(SqlClient.SqlClient, sql)),
-			"dashboard.list": (input) => Reads.dashboard(input).pipe(Effect.provideService(SqlClient.SqlClient, sql)),
+			"threads.list": (input) => Reads.threads(input).pipe(Effect.provideService(SqlClient.SqlClient, sql)),
 			"threads.line": (input) => Reads.line(input).pipe(Effect.provideService(SqlClient.SqlClient, sql)),
 
 			"host.info": Effect.fn("host.info")(function* () {
diff --git a/apps/server/src/reads.ts b/apps/server/src/reads.ts
index 104f5875..977ee4ad 100644
--- a/apps/server/src/reads.ts
+++ b/apps/server/src/reads.ts
@@ -1,10 +1,10 @@
 import { Effect, Schema } from "effect";
 import { SqlClient } from "effect/sql";
 import {
-	type Dashboard,
-	type DashboardBy,
-	type DashboardList,
-	type DashboardThread,
+	type AllThreads,
+	type ListedThread,
+	type ThreadList,
+	type ThreadsBy,
 	type Grouping,
 	type LineRequest,
 	LineThread,
@@ -120,7 +120,7 @@ export const sidebar = Effect.fn("Reads.sidebar")(function* ({
 	return listed.toSorted((a, b) => activity(b) - activity(a));
 }, Effect.orDie);
 
-/** The status lists in the order the dashboard shows them: what needs the user first. */
+/** The status lists in the order All Threads shows them: what needs the user first. */
 const STATUSES: ReadonlyArray<ThreadStatus> = ["working", "attention", "settled", "cancelled"];
 /** Urgent first and none last, as Linear. */
 const PRIORITIES: ReadonlyArray<Priority> = [1, 2, 3, 4, 0];
@@ -130,25 +130,27 @@ const SPLIT = {
 	status: "thread.status, thread.ordering",
 	priority: "thread.priority, thread.ordering",
 	grouping: "thread.grouping_id, thread.ordering",
-} satisfies Record<DashboardBy, string>;
+} satisfies Record<ThreadsBy, string>;
 
-export const dashboard = Effect.fn("Reads.dashboard")(function* ({
+export const threads = Effect.fn("Reads.threads")(function* ({
 	organizationId,
 	by,
 }: {
 	readonly organizationId: string;
-	readonly by: DashboardBy;
+	readonly by: ThreadsBy;
 }) {
 	const sql = yield* SqlClient.SqlClient;
 	const rows = yield* sql<{
 		id: string;
 		sessionId: string;
-		originKind: DashboardThread["originKind"];
+		originKind: ListedThread["originKind"];
 		originThreadId: string | null;
 		title: string | null;
+		machineId: string;
+		machineName: string;
 		projectId: string;
 		projectName: string;
-		runState: DashboardThread["runState"];
+		runState: ListedThread["runState"];
 		status: ThreadStatus;
 		priority: Priority;
 		groupingId: string | null;
@@ -157,12 +159,13 @@ export const dashboard = Effect.fn("Reads.dashboard")(function* ({
 		updatedAt: number;
 	}>`
 		SELECT thread.id, thread.session_id, thread.origin_kind, thread.origin_thread_id, thread.title,
-			project.id AS project_id, project.name AS project_name, thread.run_state, thread.status, thread.priority,
+			machine.id AS machine_id, machine.name AS machine_name, project.id AS project_id, project.name AS project_name, thread.run_state, thread.status, thread.priority,
 			thread.grouping_id, thread.ordering, COALESCE(thread.color, session.color) AS color, thread.updated_at
 		FROM thread
 		JOIN session ON session.id = thread.session_id
 		JOIN space ON space.machine_id = session.machine_id AND space.id = session.space_id
 		JOIN project ON project.machine_id = space.machine_id AND project.id = space.project_id
+		JOIN machine ON machine.id = session.machine_id
 		WHERE thread.organization_id = ${organizationId} AND thread.deleted_at IS NULL AND thread.origin_kind <> 'subagent'
 		ORDER BY ${sql.literal(SPLIT[by])}
 	`;
@@ -181,11 +184,13 @@ export const dashboard = Effect.fn("Reads.dashboard")(function* ({
 		}
 		return UNTITLED;
 	};
-	const threads = rows.map((row): DashboardThread => ({
+	const listed = rows.map((row): ListedThread => ({
 		id: row.id,
 		sessionId: row.sessionId,
 		originKind: row.originKind,
+		originThreadId: row.originThreadId,
 		title: titleOf(row),
+		machine: { id: row.machineId, name: row.machineName },
 		project: { id: row.projectId, name: row.projectName },
 		runState: row.runState,
 		status: row.status,
@@ -195,25 +200,25 @@ export const dashboard = Effect.fn("Reads.dashboard")(function* ({
 		color: row.color,
 		updatedAt: row.updatedAt,
 	}));
-	const lists: Array<DashboardList> =
+	const lists: Array<ThreadList> =
 		by === "status"
 			? STATUSES.map((status) => ({
 					_tag: "Status",
 					status,
-					threads: threads.filter((thread) => thread.status === status),
+					threads: listed.filter((thread) => thread.status === status),
 				}))
 			: by === "priority"
 				? PRIORITIES.map((priority) => ({
 						_tag: "Priority",
 						priority,
-						threads: threads.filter((thread) => thread.priority === priority),
+						threads: listed.filter((thread) => thread.priority === priority),
 					}))
 				: [...groups.map((group) => group.id), null].map((groupingId) => ({
 						_tag: "Grouping",
 						groupingId,
-						threads: threads.filter((thread) => thread.groupingId === groupingId),
+						threads: listed.filter((thread) => thread.groupingId === groupingId),
 					}));
-	return { lists, groups } satisfies Dashboard;
+	return { lists, groups } satisfies AllThreads;
 }, Effect.orDie);
 
 /**
diff --git a/apps/server/test/__artifacts__/dashboard.grouping.json b/apps/server/test/__artifacts__/threads.grouping.json
similarity index 81%
rename from apps/server/test/__artifacts__/dashboard.grouping.json
rename to apps/server/test/__artifacts__/threads.grouping.json
index 10ce4aef..095ef4f5 100644
--- a/apps/server/test/__artifacts__/dashboard.grouping.json
+++ b/apps/server/test/__artifacts__/threads.grouping.json
@@ -8,7 +8,12 @@
 					"id": "<thread B>",
 					"sessionId": "<session B>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread B",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -31,7 +36,12 @@
 					"id": "<thread C>",
 					"sessionId": "<session C>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread C",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -48,7 +58,12 @@
 					"id": "<thread A>",
 					"sessionId": "<session A>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -71,7 +86,12 @@
 					"id": "<thread A fork>",
 					"sessionId": "<session A>",
 					"originKind": "fork",
+					"originThreadId": "<thread A>",
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -88,7 +108,12 @@
 					"id": "<thread D>",
 					"sessionId": "<session D>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread D",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
diff --git a/apps/server/test/__artifacts__/dashboard.priority.json b/apps/server/test/__artifacts__/threads.priority.json
similarity index 80%
rename from apps/server/test/__artifacts__/dashboard.priority.json
rename to apps/server/test/__artifacts__/threads.priority.json
index 74824b59..57bb27de 100644
--- a/apps/server/test/__artifacts__/dashboard.priority.json
+++ b/apps/server/test/__artifacts__/threads.priority.json
@@ -8,7 +8,12 @@
 					"id": "<thread C>",
 					"sessionId": "<session C>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread C",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -25,7 +30,12 @@
 					"id": "<thread B>",
 					"sessionId": "<session B>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread B",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -53,7 +63,12 @@
 					"id": "<thread D>",
 					"sessionId": "<session D>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread D",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -76,7 +91,12 @@
 					"id": "<thread A>",
 					"sessionId": "<session A>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -99,7 +119,12 @@
 					"id": "<thread A fork>",
 					"sessionId": "<session A>",
 					"originKind": "fork",
+					"originThreadId": "<thread A>",
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
diff --git a/apps/server/test/__artifacts__/dashboard.status.json b/apps/server/test/__artifacts__/threads.status.json
similarity index 80%
rename from apps/server/test/__artifacts__/dashboard.status.json
rename to apps/server/test/__artifacts__/threads.status.json
index 4e8fbb0f..a93b7966 100644
--- a/apps/server/test/__artifacts__/dashboard.status.json
+++ b/apps/server/test/__artifacts__/threads.status.json
@@ -8,7 +8,12 @@
 					"id": "<thread A fork>",
 					"sessionId": "<session A>",
 					"originKind": "fork",
+					"originThreadId": "<thread A>",
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -31,7 +36,12 @@
 					"id": "<thread A>",
 					"sessionId": "<session A>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -48,7 +58,12 @@
 					"id": "<thread D>",
 					"sessionId": "<session D>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread D",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -71,7 +86,12 @@
 					"id": "<thread B>",
 					"sessionId": "<session B>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread B",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -94,7 +114,12 @@
 					"id": "<thread C>",
 					"sessionId": "<session C>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread C",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
diff --git a/apps/server/test/__artifacts__/dashboard.subagent.json b/apps/server/test/__artifacts__/threads.subagent.json
similarity index 79%
rename from apps/server/test/__artifacts__/dashboard.subagent.json
rename to apps/server/test/__artifacts__/threads.subagent.json
index c5dd71a5..4ece71ed 100644
--- a/apps/server/test/__artifacts__/dashboard.subagent.json
+++ b/apps/server/test/__artifacts__/threads.subagent.json
@@ -18,7 +18,12 @@
 					"id": "<thread A fork>",
 					"sessionId": "<session A>",
 					"originKind": "fork",
+					"originThreadId": "<thread A>",
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -35,7 +40,12 @@
 					"id": "<thread D>",
 					"sessionId": "<session D>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread D",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -52,7 +62,12 @@
 					"id": "<thread C>",
 					"sessionId": "<session C>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread C",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -69,7 +84,12 @@
 					"id": "<thread B>",
 					"sessionId": "<session B>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread B",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
@@ -86,7 +106,12 @@
 					"id": "<thread A>",
 					"sessionId": "<session A>",
 					"originKind": "main",
+					"originThreadId": null,
 					"title": "Thread A",
+					"machine": {
+						"id": "<machine>",
+						"name": "Scripted"
+					},
 					"project": {
 						"id": "<id 1>",
 						"name": "Board"
diff --git a/apps/server/test/__artifacts__/dashboard.topics.json b/apps/server/test/__artifacts__/threads.topics.json
similarity index 100%
rename from apps/server/test/__artifacts__/dashboard.topics.json
rename to apps/server/test/__artifacts__/threads.topics.json
diff --git a/apps/server/test/dashboard.test.ts b/apps/server/test/threads.test.ts
similarity index 83%
rename from apps/server/test/dashboard.test.ts
rename to apps/server/test/threads.test.ts
index 0248c83b..9fc2054a 100644
--- a/apps/server/test/dashboard.test.ts
+++ b/apps/server/test/threads.test.ts
@@ -1,6 +1,6 @@
 import { Effect, Stream } from "effect";
 import { afterEach, expect, it } from "vite-plus/test";
-import { Contract, type Dashboard, type DashboardBy } from "@codeworksh/contract";
+import { type AllThreads, Contract, type ThreadsBy } from "@codeworksh/contract";
 import {
 	addMachine,
 	app,
@@ -20,22 +20,22 @@ import {
 
 afterEach(cleanup);
 
-const snapshot = (name: string, artifact: unknown) => match(`dashboard.${name}`, artifact);
+const snapshot = (name: string, artifact: unknown) => match(`threads.${name}`, artifact);
 
-const read = (rpc: AppRpc, by: DashboardBy) =>
-	rpc["dashboard.list"]({ organizationId: Contract.PERSONAL_ORGANIZATION, by });
+const read = (rpc: AppRpc, by: ThreadsBy) =>
+	rpc["threads.list"]({ organizationId: Contract.PERSONAL_ORGANIZATION, by });
 
-/** Each list as its key and its threads' names, in the order read: what the dashboard draws. */
-const names = (dashboard: Dashboard, label: (id: string) => string) =>
-	dashboard.lists.map((list) => ({
+/** Each list as its key and its threads' names, in the order read: what All Threads draws. */
+const names = (all: AllThreads, label: (id: string) => string) =>
+	all.lists.map((list) => ({
 		list: list._tag === "Status" ? list.status : list._tag === "Priority" ? list.priority : list.groupingId,
 		names: list.threads.map((thread) => label(thread.id)),
 	}));
 
 /** Times as `<time>`: the shared normalizer only knows snake_case ones. */
-const elide = (dashboard: Dashboard) => ({
-	...dashboard,
-	lists: dashboard.lists.map((list) => ({
+const elide = (all: AllThreads) => ({
+	...all,
+	lists: all.lists.map((list) => ({
 		...list,
 		threads: list.threads.map((thread) => ({ ...thread, updatedAt: "<time>" })),
 	})),
@@ -79,6 +79,7 @@ const setup = async (name: string) => {
 	const label = (id: string) => labels.get(id) ?? id;
 	const fixed: Array<readonly [string, string]> = [
 		[storeId, "<store>"],
+		[machineId, "<machine>"],
 		...[...threads].map(([name, id]) => [id, `<thread ${name}>`] as const),
 		...[...sessions].map(([name, id]) => [id, `<session ${name}>`] as const),
 	];
@@ -99,17 +100,17 @@ it("by status: every status list in its order, each list's threads in ordering",
 			yield* rpc["threads.move"]({ threadId: id("D"), to: "last" });
 		}),
 	);
-	const dashboard = await desk.run((rpc) => read(rpc, "status"));
-	expect(names(dashboard, label)).toEqual([
+	const all = await desk.run((rpc) => read(rpc, "status"));
+	expect(names(all, label)).toEqual([
 		{ list: "working", names: ["A fork"] },
 		{ list: "attention", names: ["A", "D"] },
 		{ list: "settled", names: ["B"] },
 		{ list: "cancelled", names: ["C"] },
 	]);
 	// The fork has no title of its own yet: its source's.
-	const fork = dashboard.lists[0]!.threads[0]!;
+	const fork = all.lists[0]!.threads[0]!;
 	expect([fork.title, fork.originKind]).toEqual(["Thread A", "fork"]);
-	await snapshot("status", normalizer([cwHome, appHome], fixed)(elide(dashboard)));
+	await snapshot("status", normalizer([cwHome, appHome], fixed)(elide(all)));
 }, 90_000);
 
 it("by priority: urgent first and none last, each list in ordering", async () => {
@@ -123,15 +124,15 @@ it("by priority: urgent first and none last, each list in ordering", async () =>
 			yield* rpc["threads.setPriority"]({ threadId: id("D"), priority: 3 });
 		}),
 	);
-	const dashboard = await desk.run((rpc) => read(rpc, "priority"));
-	expect(names(dashboard, label)).toEqual([
+	const all = await desk.run((rpc) => read(rpc, "priority"));
+	expect(names(all, label)).toEqual([
 		{ list: 1, names: ["C", "B"] },
 		{ list: 2, names: [] },
 		{ list: 3, names: ["D"] },
 		{ list: 4, names: ["A"] },
 		{ list: 0, names: ["A fork"] },
 	]);
-	await snapshot("priority", normalizer([cwHome, appHome], fixed)(elide(dashboard)));
+	await snapshot("priority", normalizer([cwHome, appHome], fixed)(elide(all)));
 }, 90_000);
 
 it("by grouping: groups in their ordering, ungrouped last, and a thread's color falls back to its session's", async () => {
@@ -152,33 +153,30 @@ it("by grouping: groups in their ordering, ungrouped last, and a thread's color
 			return { first, second };
 		}),
 	);
-	const dashboard = await desk.run((rpc) => read(rpc, "grouping"));
+	const all = await desk.run((rpc) => read(rpc, "grouping"));
 	const groupLabels = new Map([
 		[first.id, "First"],
 		[second.id, "Second"],
 	]);
 	expect(
-		names(dashboard, label).map(({ list, names }) => ({ list: groupLabels.get(list as string) ?? list, names })),
+		names(all, label).map(({ list, names }) => ({ list: groupLabels.get(list as string) ?? list, names })),
 	).toEqual([
 		{ list: "Second", names: ["B"] },
 		{ list: "First", names: ["C", "A"] },
 		{ list: null, names: ["A fork", "D"] },
 	]);
 	const colors = Object.fromEntries(
-		dashboard.lists.flatMap((list) => list.threads.map((thread) => [label(thread.id), thread.color])),
+		all.lists.flatMap((list) => list.threads.map((thread) => [label(thread.id), thread.color])),
 	);
 	// A takes its session's, B its own over its session's, A's fork its session's (A's), the rest none.
 	expect(colors).toEqual({ A: "#aa0000", B: "#0000cc", C: null, D: null, "A fork": "#aa0000" });
 	await snapshot(
 		"grouping",
-		normalizer(
-			[cwHome, appHome],
-			[...fixed, [first.id, "<group First>"], [second.id, "<group Second>"]],
-		)(elide(dashboard)),
+		normalizer([cwHome, appHome], [...fixed, [first.id, "<group First>"], [second.id, "<group Second>"]])(elide(all)),
 	);
 }, 90_000);
 
-it("subagent threads stay off the dashboard", async () => {
+it("subagent threads stay off All Threads", async () => {
 	const { cwHome, appHome, desk, threads, label, fixed } = await setup("subagent");
 	// CodeWork does not start subagents yet, so the row is written as the sync would copy one: A's
 	// fork turned into a subagent of A's main thread, first in the whole order.
@@ -198,23 +196,23 @@ it("subagent threads stay off the dashboard", async () => {
 	expect(query(appHome, "SELECT origin_kind FROM thread WHERE id = 'thr_subagent'")).toEqual([
 		{ origin_kind: "subagent" },
 	]);
-	const dashboard = await desk.run((rpc) => read(rpc, "status"));
-	expect(names(dashboard, label)).toEqual([
+	const all = await desk.run((rpc) => read(rpc, "status"));
+	expect(names(all, label)).toEqual([
 		{ list: "working", names: [] },
 		{ list: "attention", names: [] },
 		{ list: "settled", names: ["A fork", "D", "C", "B", "A"] },
 		{ list: "cancelled", names: [] },
 	]);
-	await snapshot("subagent", normalizer([cwHome, appHome], fixed)(elide(dashboard)));
+	await snapshot("subagent", normalizer([cwHome, appHome], fixed)(elide(all)));
 }, 90_000);
 
-it("the dashboard's topics fire after a move, a status set and a group change, and the read after shows each", async () => {
+it("All Threads' topics fire after a move, a status set and a group change, and the read after shows each", async () => {
 	const { cwHome, appHome, desk, threads, label, fixed } = await setup("topics");
 	const id = (name: string) => threads.get(name)!;
 	const events: Array<{ topic: string; payload: Row }> = [];
 	let subscribed = false;
 	const window = desk.background((rpc) =>
-		rpc["event.subscribe"]({ topics: Contract.readTopics.dashboard }).pipe(
+		rpc["event.subscribe"]({ topics: Contract.readTopics.threads }).pipe(
 			Stream.runForEach((item) =>
 				Effect.sync(() => {
 					if ("_tag" in item) subscribed = true;
@@ -223,11 +221,11 @@ it("the dashboard's topics fire after a move, a status set and a group change, a
 			),
 		),
 	);
-	await waitFor(() => (subscribed ? true : undefined), "the dashboard's subscription");
+	await waitFor(() => (subscribed ? true : undefined), "All Threads' subscription");
 
 	const steps: Array<Row> = [];
-	/** Runs one change, waits for the event it fires, then reads the dashboard as a client would. */
-	const change = async (step: string, by: DashboardBy, call: Parameters<typeof desk.run>[0]) => {
+	/** Runs one change, waits for the event it fires, then reads All Threads as a client would. */
+	const change = async (step: string, by: ThreadsBy, call: Parameters<typeof desk.run>[0]) => {
 		const seen = events.length;
 		await desk.run(call);
 		const fired = await waitFor(() => events[seen], `the event of ${step}`);
diff --git a/apps/web/package.json b/apps/web/package.json
index ff9fe2d3..696d7a46 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,6 +46,7 @@
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
 		"@vitejs/plugin-react": "^6.0.0",
+		"oxc-transform-react": "~0.152.0",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "catalog:",
diff --git a/apps/web/src/components/banner.tsx b/apps/web/src/components/banner.tsx
index abe73ffc..5c1235e0 100644
--- a/apps/web/src/components/banner.tsx
+++ b/apps/web/src/components/banner.tsx
@@ -1,5 +1,5 @@
 import { CircleAlert, Clock, Download, type LucideIcon, TriangleAlert, X } from "lucide-react";
-import { useRef } from "react";
+import { useLast } from "@/hooks/last";
 
 /**
  * Something the reader should know before writing more: a short title, and a line only when it adds
@@ -106,9 +106,7 @@ export function ComposerNotice({
  * anything. It eases in, and fades out quicker on the last notice it showed.
  */
 export function NoticeSlot({ notice }: { readonly notice: Notice | undefined }) {
-	const last = useRef(notice);
-	if (notice !== undefined) last.current = notice;
-	const shown = notice ?? last.current;
+	const shown = useLast(notice);
 	if (shown === undefined) return null;
 	return (
 		<div
diff --git a/apps/web/src/components/loader.tsx b/apps/web/src/components/loader.tsx
index 8d0e4480..2fdb5207 100644
--- a/apps/web/src/components/loader.tsx
+++ b/apps/web/src/components/loader.tsx
@@ -1,3 +1,5 @@
+import { observeVisibleAnimation } from "@/lib/visible";
+
 const pixels = [
 	[0, 0],
 	[6, 0],
@@ -11,7 +13,14 @@ const pixels = [
 
 export function PixelLoader() {
 	return (
-		<svg viewBox="0 0 16 16" className="size-3" fill="currentColor" shapeRendering="crispEdges" aria-hidden>
+		<svg
+			ref={observeVisibleAnimation}
+			viewBox="0 0 16 16"
+			className="size-3"
+			fill="currentColor"
+			shapeRendering="crispEdges"
+			aria-hidden
+		>
 			{pixels.map(([x, y], index) => (
 				<rect
 					key={`${x},${y}`}
diff --git a/apps/web/src/components/model.tsx b/apps/web/src/components/model.tsx
index 729cda4b..051a1ae7 100644
--- a/apps/web/src/components/model.tsx
+++ b/apps/web/src/components/model.tsx
@@ -4,7 +4,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Cause, Option, Schema } from "effect";
 import { AsyncResult, Atom } from "effect/reactivity";
 import { Check, ChevronDown, FileSearch, Gauge, Search } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import {
 	DropdownMenu,
@@ -142,22 +142,20 @@ function Models({ hostDir, value, onChange }: ModelPickerProps) {
 	const list = AsyncResult.isSuccess(result) ? result.value : undefined;
 	// The providers this server can call, plus the settings default's when it cannot: that one stays
 	// in view, unavailable, so the model a session gets by default never silently drops out of sight.
-	const providers = useMemo((): ReadonlyArray<ModelProvider & { readonly available: boolean }> => {
-		// With nothing to call, there is no model to keep in view either.
-		if (list === undefined || list.providers.length === 0) return [];
-		const usable = list.providers.map((provider) => ({ ...provider, available: true }));
-		const fallback = list.default;
-		if (lookup(usable, fallback) !== undefined) return usable;
-		return [
-			...usable.filter((provider) => provider.id !== fallback.provider),
-			{
-				id: fallback.provider,
-				name: fallback.providerName ?? fallback.provider,
-				models: [{ id: fallback.id, name: fallback.name ?? fallback.id, thinkingLevels: [] }],
-				available: false,
-			},
-		];
-	}, [list]);
+	const usable = list?.providers.map((provider) => ({ ...provider, available: true })) ?? [];
+	// With nothing to call, there is no model to keep in view either.
+	const providers: ReadonlyArray<ModelProvider & { readonly available: boolean }> =
+		list === undefined || usable.length === 0 || lookup(usable, list.default) !== undefined
+			? usable
+			: [
+					...usable.filter((provider) => provider.id !== list.default.provider),
+					{
+						id: list.default.provider,
+						name: list.default.providerName ?? list.default.provider,
+						models: [{ id: list.default.id, name: list.default.name ?? list.default.id, thinkingLevels: [] }],
+						available: false,
+					},
+				];
 	const current = value ?? list?.default;
 	const found = current === undefined ? undefined : lookup(providers, current);
 	// The rail opens on the current model's provider, or the first one when that has no credentials.
@@ -166,18 +164,14 @@ function Models({ hostDir, value, onChange }: ModelPickerProps) {
 
 	// Searching looks across every provider; otherwise the list is the rail's provider.
 	const needle = query.trim().toLowerCase();
-	const rows = useMemo(
-		() =>
-			providers
-				.filter((provider) => needle !== "" || provider.id === shown)
-				.flatMap((provider) => provider.models.map((model) => ({ provider, model })))
-				// Every word must appear somewhere in the model's name, its id or its provider's name.
-				.filter(({ provider, model }) => {
-					const text = `${model.name} ${model.id} ${provider.name}`.toLowerCase();
-					return needle.split(/\s+/).every((word) => text.includes(word));
-				}),
-		[providers, needle, shown],
-	);
+	const rows = providers
+		.filter((provider) => needle !== "" || provider.id === shown)
+		.flatMap((provider) => provider.models.map((model) => ({ provider, model })))
+		// Every word must appear somewhere in the model's name, its id or its provider's name.
+		.filter(({ provider, model }) => {
+			const text = `${model.name} ${model.id} ${provider.name}`.toLowerCase();
+			return needle.split(/\s+/).every((word) => text.includes(word));
+		});
 
 	// The settings default can name a provider this server cannot call; it reads muted, not chosen.
 	const none = list !== undefined && providers.length === 0;
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
new file mode 100644
index 00000000..628bfa7c
--- /dev/null
+++ b/apps/web/src/components/ui/select.tsx
@@ -0,0 +1,159 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+	return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+	return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+	return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+	className,
+	size = "default",
+	children,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SelectPrimitive.Trigger
+			data-slot="select-trigger"
+			data-size={size}
+			className={cn(
+				"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<SelectPrimitive.Icon asChild>
+				<ChevronDownIcon className="size-4 opacity-50" />
+			</SelectPrimitive.Icon>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+function SelectContent({
+	className,
+	children,
+	position = "item-aligned",
+	align = "center",
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+	return (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				data-slot="select-content"
+				className={cn(
+					"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					position === "popper" &&
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+					className,
+				)}
+				position={position}
+				align={align}
+				{...props}
+			>
+				<SelectScrollUpButton />
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				<SelectScrollDownButton />
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+	return (
+		<SelectPrimitive.Label
+			data-slot="select-label"
+			className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+	return (
+		<SelectPrimitive.Item
+			data-slot="select-item"
+			className={cn(
+				"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				className,
+			)}
+			{...props}
+		>
+			<span data-slot="select-item-indicator" className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</SelectPrimitive.ItemIndicator>
+			</span>
+			<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+	return (
+		<SelectPrimitive.Separator
+			data-slot="select-separator"
+			className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+			{...props}
+		/>
+	);
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	return (
+		<SelectPrimitive.ScrollUpButton
+			data-slot="select-scroll-up-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronUpIcon className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	return (
+		<SelectPrimitive.ScrollDownButton
+			data-slot="select-scroll-down-button"
+			className={cn("flex cursor-default items-center justify-center py-1", className)}
+			{...props}
+		>
+			<ChevronDownIcon className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
new file mode 100644
index 00000000..21ea5794
--- /dev/null
+++ b/apps/web/src/components/ui/switch.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Switch as SwitchPrimitive } from "radix-ui";
+
+function Switch({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+	size?: "sm" | "default";
+}) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
+			data-size={size}
+			className={cn(
+				"peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+				className,
+			)}
+			{...props}
+		>
+			<SwitchPrimitive.Thumb
+				data-slot="switch-thumb"
+				className={cn(
+					"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };
diff --git a/apps/web/src/hooks/last.ts b/apps/web/src/hooks/last.ts
new file mode 100644
index 00000000..e06a2a5e
--- /dev/null
+++ b/apps/web/src/hooks/last.ts
@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+/** `value`, or while it is undefined, the last value it had. */
+export function useLast<T>(value: T | undefined): T | undefined {
+	const [last, setLast] = useState(value);
+	if (value !== undefined && value !== last) setLast(value);
+	return value ?? last;
+}
diff --git a/apps/web/src/hooks/now.ts b/apps/web/src/hooks/now.ts
new file mode 100644
index 00000000..1e97d8a3
--- /dev/null
+++ b/apps/web/src/hooks/now.ts
@@ -0,0 +1,11 @@
+import { useSyncExternalStore } from "react";
+
+import { type Clock, minuteTick, secondTick } from "@/kernel/clock";
+
+const useClock = (clock: Clock) => useSyncExternalStore(clock.subscribe, clock.getSnapshot, clock.getSnapshot);
+
+/** Epoch ms floored to the minute, re-rendering once a minute. */
+export const useNowMinute = () => useClock(minuteTick);
+
+/** Epoch ms floored to the second, re-rendering once a second. */
+export const useNowSecond = () => useClock(secondTick);
diff --git a/apps/web/src/hooks/stable.ts b/apps/web/src/hooks/stable.ts
new file mode 100644
index 00000000..494b36f0
--- /dev/null
+++ b/apps/web/src/hooks/stable.ts
@@ -0,0 +1,21 @@
+import { useInsertionEffect, useRef, useState } from "react";
+
+/**
+ * `fn` behind one identity for the component's life, so passing it never renders a memoized child
+ * again. Call it from handlers and effects only: render would see the previous commit's `fn`.
+ */
+export function useStableCallback<Args extends ReadonlyArray<unknown>, Result>(
+	fn: (...args: Args) => Result,
+): (...args: Args) => Result {
+	const latest = useRef(fn);
+	// Before every layout effect of the commit, so a child's layout effect already calls this render's `fn`.
+	useInsertionEffect(() => {
+		latest.current = fn;
+	});
+	const [stable] = useState(
+		() =>
+			(...args: Args) =>
+				latest.current(...args),
+	);
+	return stable;
+}
diff --git a/apps/web/src/kernel/clock.ts b/apps/web/src/kernel/clock.ts
new file mode 100644
index 00000000..c48034b5
--- /dev/null
+++ b/apps/web/src/kernel/clock.ts
@@ -0,0 +1,50 @@
+/** A `useSyncExternalStore` clock: one timer for every subscriber, its snapshot cached between ticks. */
+export interface Clock {
+	readonly subscribe: (listener: () => void) => () => void;
+	readonly getSnapshot: () => number;
+}
+
+/** Epoch ms floored to `periodMs`, advancing on each wall-clock boundary so every subscriber updates in the same frame. */
+function tick(periodMs: number): Clock {
+	const read = () => Math.floor(Date.now() / periodMs) * periodMs;
+	let value = read();
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	const listeners = new Set<() => void>();
+	const schedule = () => {
+		timer = setTimeout(
+			() => {
+				timer = undefined;
+				const next = read();
+				if (next !== value) {
+					value = next;
+					for (const listener of listeners) listener();
+				}
+				// A listener may unsubscribe (stopping the clock) or resubscribe (arming a new timer) while notified.
+				if (listeners.size > 0 && timer === undefined) schedule();
+			},
+			periodMs - (Date.now() % periodMs),
+		);
+	};
+	return {
+		subscribe: (listener) => {
+			if (listeners.size === 0) {
+				value = read();
+				schedule();
+			}
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size > 0) return;
+				clearTimeout(timer);
+				timer = undefined;
+			};
+		},
+		getSnapshot: () => {
+			if (timer === undefined) value = read();
+			return value;
+		},
+	};
+}
+
+export const secondTick = tick(1000);
+export const minuteTick = tick(60_000);
diff --git a/apps/web/src/kernel/keep.ts b/apps/web/src/kernel/keep.ts
new file mode 100644
index 00000000..58a9769f
--- /dev/null
+++ b/apps/web/src/kernel/keep.ts
@@ -0,0 +1,12 @@
+/**
+ * Keeps `previous`'s object for each item of a new read that `same` finds unchanged, matched by `key`.
+ * A read decodes every item anew; kept objects let a memoized view skip the items that did not change.
+ */
+export const keeper = <T>(previous: Iterable<T>, key: (item: T) => string, same: (a: T, b: T) => boolean) => {
+	const byKey = new Map<string, T>();
+	for (const item of previous) byKey.set(key(item), item);
+	return (item: T): T => {
+		const before = byKey.get(key(item));
+		return before !== undefined && same(before, item) ? before : item;
+	};
+};
diff --git a/apps/web/src/landing/arcade.tsx b/apps/web/src/landing/arcade.tsx
index 446f821b..7002a062 100644
--- a/apps/web/src/landing/arcade.tsx
+++ b/apps/web/src/landing/arcade.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import {
 	ARCADE_MODES,
@@ -216,8 +216,10 @@ export function Arcade({ onPlayingChange }: { onPlayingChange: (playing: boolean
 	const [hovered, setHovered] = useState(false);
 	const [focused, setFocused] = useState(false);
 
-	indexRef.current = slide.index;
-	playingRef.current = playing;
+	useLayoutEffect(() => {
+		indexRef.current = slide.index;
+		playingRef.current = playing;
+	});
 
 	const game = GRID_GAMES[slide.index] ?? GRID_GAMES[0]!;
 
@@ -455,7 +457,7 @@ export function Arcade({ onPlayingChange }: { onPlayingChange: (playing: boolean
 		};
 	}, []);
 
-	const takeControl = useCallback(() => {
+	const takeControl = () => {
 		const board = boardsRef.current?.[indexRef.current];
 		board?.arcade.setMode(mode);
 		board?.arcade.takeControl();
@@ -470,14 +472,14 @@ export function Arcade({ onPlayingChange }: { onPlayingChange: (playing: boolean
 		returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		setPlaying(true);
 		onPlayingChange(true);
-	}, [mode, onPlayingChange]);
+	};
 
-	const pickMode = useCallback((next: ArcadeMode) => {
+	const pickMode = (next: ArcadeMode) => {
 		boardsRef.current?.[indexRef.current]?.arcade.setMode(next);
 		setMode(next);
-	}, []);
+	};
 
-	const releaseControl = useCallback(() => {
+	const releaseControl = () => {
 		boardsRef.current?.[indexRef.current]?.arcade.releaseControl();
 		scoreRef.current = 0;
 		gameOverRef.current = false;
@@ -485,7 +487,7 @@ export function Arcade({ onPlayingChange }: { onPlayingChange: (playing: boolean
 		setGameOver(false);
 		setPlaying(false);
 		onPlayingChange(false);
-	}, [onPlayingChange]);
+	};
 
 	useEffect(() => {
 		slideAtRef.current = performance.now();
@@ -496,13 +498,13 @@ export function Arcade({ onPlayingChange }: { onPlayingChange: (playing: boolean
 		wakeRef.current();
 	}, [playing]);
 
-	const showGame = useCallback((next: number) => {
+	const showGame = (next: number) => {
 		if (next === indexRef.current) return;
 		setSlide({
 			index: next,
 			dir: next > indexRef.current ? 1 : -1,
 		});
-	}, []);
+	};
 
 	useEffect(() => {
 		if (playing || hovered || focused || GRID_GAMES.length < 2) return;
diff --git a/apps/web/src/landing/landing.tsx b/apps/web/src/landing/landing.tsx
index 3d2600b2..67d4e211 100644
--- a/apps/web/src/landing/landing.tsx
+++ b/apps/web/src/landing/landing.tsx
@@ -1,7 +1,7 @@
 import { RegistryContext, useAtomValue } from "@effect/atom-react";
 import { Option, Schema } from "effect";
 import { Folder } from "lucide-react";
-import { useContext, useMemo, useState } from "react";
+import { useContext, useState } from "react";
 
 import { NoticeSlot } from "@/components/banner";
 import { Composer, ComposerSubmit } from "@/components/composer";
@@ -27,7 +27,7 @@ const decodeCreated = Schema.decodeUnknownOption(Json.Created);
 export function Landing() {
 	const registry = useContext(RegistryContext);
 	// The start page asks the Session backend as the "landing" source, outside any widget frame.
-	const bus = useMemo(() => makeHost({ registry, package: "codework", instanceId: "landing" }).bus, [registry]);
+	const bus = makeHost({ registry, package: "codework", instanceId: "landing" }).bus;
 	const openElsewhere = useOpenElsewhere();
 	const inFlight = useSent();
 	const [query, setQuery] = useState("");
diff --git a/apps/web/src/landing/sidebar.tsx b/apps/web/src/landing/sidebar.tsx
index a744a941..2e8729e1 100644
--- a/apps/web/src/landing/sidebar.tsx
+++ b/apps/web/src/landing/sidebar.tsx
@@ -1,10 +1,10 @@
 import { useAtom, useAtomValue } from "@effect/atom-react";
-import { PlusSignIcon, Search01Icon, Settings02Icon, SquarePenIcon } from "@hugeicons/core-free-icons";
+import { ListViewIcon, PlusSignIcon, Search01Icon, Settings02Icon, SquarePenIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { Link, useNavigate, useParams } from "@tanstack/react-router";
 import { AsyncResult } from "effect/reactivity";
-import type { SidebarProject } from "@codeworksh/contract";
-import { type MouseEvent, memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { SidebarSession } from "@codeworksh/contract";
+import { type MouseEvent, memo, useCallback, useLayoutEffect, useRef, useState } from "react";
 
 import {
 	Sidebar,
@@ -20,7 +20,7 @@ import { projectsAtom } from "../widgets/session/projects";
 import { focusedAtom } from "../wm/chrome";
 import { deskAtom } from "../wm/instances";
 import { useOpenElsewhere } from "../wm/open";
-import { ago } from "../widgets/time";
+import { Ago } from "../widgets/time";
 import { Monogram } from "@/components/monogram";
 import { OpenProviderSettings } from "@/components/offline";
 import { ProviderIcon } from "@/components/provider";
@@ -35,6 +35,10 @@ import { RunMark } from "../widgets/session/run";
  * Recent sessions across every project, newest first, beside every page. With none yet it invites
  * adding a project: the folder the start page's composer then works in.
  */
+/** A sidebar action: New, All Threads, Settings. */
+const NAV_ROW =
+	"flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-ui font-medium text-ink-muted outline-none hover:bg-selection-subtle hover:text-ink focus-visible:ring-2 focus-visible:ring-ring press";
+
 export function SessionsSidebar() {
 	const result = useAtomValue(projectsAtom);
 	const problem = useAtomValue(problemAtom);
@@ -64,27 +68,27 @@ export function SessionsSidebar() {
 	useLayoutEffect(() => {
 		opener.current = openElsewhere;
 	});
-	const open = useCallback((session: Listed, event: MouseEvent) => {
+	const open = useCallback((sessionId: string, projectName: string, event: MouseEvent) => {
 		if (event.button > 1) return;
 		const placement = event.shiftKey ? "workspace" : openMode(event);
-		void opener.current(sessionAddress(session.id), session.project.name, placement);
+		void opener.current(sessionAddress(sessionId), projectName, placement);
 	}, []);
 
 	const needle = query.trim().toLowerCase();
-	const sessions = useMemo(
-		() =>
-			AsyncResult.isSuccess(result)
-				? result.value
-						.flatMap((project) => project.sessions.map((session) => ({ ...session, project })))
-						.filter(({ title, project }) => `${title} ${project.name}`.toLowerCase().includes(needle))
-						.sort((a, b) => b.updated - a.updated)
-				: [],
-		[result, needle],
-	);
+	const sessions = AsyncResult.isSuccess(result)
+		? result.value
+				.flatMap((project) => project.sessions.map((session) => ({ session, project })))
+				.filter(({ session, project }) => `${session.title} ${project.name}`.toLowerCase().includes(needle))
+				.sort((a, b) => b.session.updated - a.session.updated)
+		: [];
 
 	return (
 		<Sidebar collapsible="offcanvas" className="shell-sidebar select-none">
-			<SidebarHeader className="gap-1 px-2 pt-2 pb-2">
+			<SidebarHeader className="gap-0.5 px-2 pt-2 pb-3">
+				<button type="button" onClick={startNew} className={NAV_ROW}>
+					<HugeiconsIcon icon={SquarePenIcon} size={16} className="shrink-0 opacity-70" aria-hidden />
+					New
+				</button>
 				<div className="relative">
 					<HugeiconsIcon
 						icon={Search01Icon}
@@ -98,17 +102,16 @@ export function SessionsSidebar() {
 						aria-label="Search threads"
 						value={query}
 						onChange={(event) => setQuery(event.target.value)}
-						className="h-8 rounded-md border-edge bg-transparent pr-2 pl-8 text-ui shadow-sm placeholder:text-ink-muted focus-visible:border-edge-focus focus-visible:bg-selection-subtle focus-visible:ring-0"
+						className="h-8 rounded-md border-transparent bg-transparent pr-2 pl-8 text-ui font-medium shadow-none dark:bg-transparent placeholder:text-ink-muted hover:bg-selection-subtle focus-visible:border-edge-focus focus-visible:bg-selection-subtle focus-visible:ring-0"
 					/>
 				</div>
-				<button
-					type="button"
-					onClick={startNew}
-					className="flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-ui font-medium text-ink-muted outline-none hover:bg-selection-subtle hover:text-ink focus-visible:ring-2 focus-visible:ring-ring press"
+				<Link
+					to="/threads"
+					className={`${NAV_ROW} aria-[current=page]:bg-selection-current aria-[current=page]:text-ink`}
 				>
-					<HugeiconsIcon icon={SquarePenIcon} size={16} className="shrink-0 opacity-70" aria-hidden />
-					New
-				</button>
+					<HugeiconsIcon icon={ListViewIcon} size={16} className="shrink-0 opacity-70" aria-hidden />
+					All Threads
+				</Link>
 			</SidebarHeader>
 			<SidebarContent className="gap-0 px-2 pb-2">
 				{problem !== undefined ? (
@@ -148,10 +151,13 @@ export function SessionsSidebar() {
 					)
 				) : (
 					<ul aria-label="Threads" className="flex flex-col gap-0.5">
-						{sessions.map((session) => (
+						{sessions.map(({ session, project }) => (
 							<SessionRow
 								key={session.id}
 								session={session}
+								projectId={project.id}
+								projectName={project.name}
+								machineName={project.machine.name}
 								current={sessionAddress(session.id) === current}
 								onOpen={open}
 							/>
@@ -160,10 +166,7 @@ export function SessionsSidebar() {
 				)}
 			</SidebarContent>
 			<SidebarFooter className="p-2">
-				<Link
-					to="/settings/workspaces"
-					className="flex h-8 items-center gap-2 rounded-md px-2 text-ui font-medium text-ink-muted outline-none hover:bg-selection-subtle hover:text-ink focus-visible:ring-2 focus-visible:ring-ring press"
-				>
+				<Link to="/settings/workspaces" className={NAV_ROW}>
 					<HugeiconsIcon icon={Settings02Icon} size={16} className="shrink-0 opacity-70" aria-hidden />
 					Settings
 				</Link>
@@ -173,17 +176,22 @@ export function SessionsSidebar() {
 	);
 }
 
-type Listed = SidebarProject["sessions"][number] & { readonly project: SidebarProject };
-
 /** Off-screen rows skip layout and paint until scrolled near; memoized so a loader or focus change repaints one row. */
 const SessionRow = memo(function SessionRow({
 	session,
+	projectId,
+	projectName,
+	machineName,
 	current,
 	onOpen,
 }: {
-	readonly session: Listed;
+	/** Kept across reads while it does not change, with the project's parts as plain values, so the row renders only for its own changes. */
+	readonly session: SidebarSession;
+	readonly projectId: string;
+	readonly projectName: string;
+	readonly machineName: string;
 	readonly current: boolean;
-	readonly onOpen: (session: Listed, event: MouseEvent) => void;
+	readonly onOpen: (sessionId: string, projectName: string, event: MouseEvent) => void;
 }) {
 	// The main thread's key is its session's id.
 	const display = useRunDisplay([{ key: session.id, runState: session.runState }]);
@@ -191,27 +199,25 @@ const SessionRow = memo(function SessionRow({
 		<li className="[contain-intrinsic-size:auto_50px] [content-visibility:auto]">
 			<button
 				type="button"
-				title={`${session.path} on ${session.project.machine.name}\n${isMac ? "⌘" : "Ctrl"}-click opens it in a new frame\n⇧-click opens it in a new workspace`}
+				title={`${session.path} on ${machineName}\n${isMac ? "⌘" : "Ctrl"}-click opens it in a new frame\n⇧-click opens it in a new workspace`}
 				aria-current={current ? "true" : undefined}
 				className="group/row relative flex w-full flex-col rounded-md px-2 py-1.5 text-left text-ink/80 outline-none hover:bg-selection-subtle hover:text-ink focus-visible:ring-2 focus-visible:ring-ring aria-current:bg-selection-current aria-current:text-ink"
-				onClick={(event) => onOpen(session, event)}
-				onAuxClick={(event) => onOpen(session, event)}
+				onClick={(event) => onOpen(session.id, projectName, event)}
+				onAuxClick={(event) => onOpen(session.id, projectName, event)}
 			>
 				<span className="flex min-w-0 items-center gap-1.5">
 					<span className="flex shrink-0 text-ink-muted empty:hidden">
 						<RunMark display={display} />
 					</span>
-					<span className="min-w-0 flex-1 truncate text-body font-semibold leading-snug text-ink">
-						{session.title}
-					</span>
+					<span className="min-w-0 flex-1 truncate text-body leading-snug">{session.title}</span>
 					<span className="ml-auto shrink-0 pl-2 text-2xs tabular-nums text-ink-muted">
-						{ago(session.updated)}
+						<Ago time={session.updated} />
 					</span>
 				</span>
 				<span className="mt-1 flex min-w-0 items-center gap-2 text-2xs text-ink-muted">
 					<span className="flex min-w-0 flex-1 items-center gap-1.5">
-						<Monogram id={session.project.id} name={session.project.name} />
-						<span className="min-w-0 truncate">{session.project.name}</span>
+						<Monogram id={projectId} name={projectName} />
+						<span className="min-w-0 truncate">{projectName}</span>
 					</span>
 					{session.model !== undefined && (
 						<span className="flex shrink-0 items-center text-2xs text-ink-muted">
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index d303b777..156a828b 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -1,5 +1,8 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// The theme's own type sizes (style.css), so `text-ui` replaces a component's `text-sm`.
+const twMerge = extendTailwindMerge({ extend: { theme: { text: ["4xs", "3xs", "2xs", "ui", "body", "code"] } } });
 
 /** Joins class names; later Tailwind utilities win over conflicting earlier ones. */
 export function cn(...inputs: ClassValue[]) {
diff --git a/apps/web/src/lib/visible.ts b/apps/web/src/lib/visible.ts
new file mode 100644
index 00000000..811d5c2a
--- /dev/null
+++ b/apps/web/src/lib/visible.ts
@@ -0,0 +1,40 @@
+const intersecting = new Map<Element, boolean>();
+let observer: IntersectionObserver | null = null;
+
+function update(element: Element, visible: boolean) {
+	const running = visible && document.visibilityState === "visible";
+	(element as HTMLElement | SVGElement).style.setProperty("--visible-animation-state", running ? "running" : "paused");
+}
+
+function updateAll() {
+	for (const [element, visible] of intersecting) update(element, visible);
+}
+
+/**
+ * A ref callback that runs an element's animation only while it is on screen and its tab is shown, through
+ * `--visible-animation-state`. Every observed element shares one IntersectionObserver.
+ */
+export function observeVisibleAnimation(element: HTMLElement | SVGElement | null) {
+	if (element === null) return;
+	update(element, false);
+	if (observer === null) {
+		document.addEventListener("visibilitychange", updateAll);
+		observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) {
+				if (!intersecting.has(entry.target)) continue;
+				intersecting.set(entry.target, entry.isIntersecting);
+				update(entry.target, entry.isIntersecting);
+			}
+		});
+	}
+	intersecting.set(element, false);
+	observer.observe(element);
+	return () => {
+		intersecting.delete(element);
+		observer?.unobserve(element);
+		if (intersecting.size > 0) return;
+		observer?.disconnect();
+		observer = null;
+		document.removeEventListener("visibilitychange", updateAll);
+	};
+}
diff --git a/apps/web/src/projects/page.tsx b/apps/web/src/projects/page.tsx
new file mode 100644
index 00000000..6e317b15
--- /dev/null
+++ b/apps/web/src/projects/page.tsx
@@ -0,0 +1,13 @@
+import { FolderTree } from "lucide-react";
+
+import { Page } from "../shell/page";
+import { Projects } from "./projects";
+
+/** Projects, their sessions and forks as a tree, on a page of its own. */
+export function ProjectsPage() {
+	return (
+		<Page instanceId="projects" title="Projects" icon={FolderTree}>
+			<Projects />
+		</Page>
+	);
+}
diff --git a/apps/web/src/projects/projects.tsx b/apps/web/src/projects/projects.tsx
new file mode 100644
index 00000000..20ef2c6a
--- /dev/null
+++ b/apps/web/src/projects/projects.tsx
@@ -0,0 +1,258 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { ListedThread, SidebarProject } from "@codeworksh/contract";
+import { openMode, useShell } from "@codeworksh/widget/view";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+import { AsyncResult } from "effect/reactivity";
+import { type CSSProperties, type KeyboardEvent, type MouseEvent, useEffect, useLayoutEffect, useRef } from "react";
+
+import { useNowMinute } from "../hooks/now";
+import { threadAddress } from "../widgets/session/address";
+import { projectsAtom } from "../widgets/session/projects";
+import type { ThreadRef } from "../widgets/session/schema";
+import { threadsAtom } from "../widgets/threads/data";
+import { ago } from "../widgets/time";
+
+/** What a tree path stands for: a project (it only folds) or a thread that opens. */
+type Entry =
+	| { readonly kind: "project"; readonly path: string; readonly sessions: number }
+	| {
+			readonly kind: "thread";
+			readonly ref: ThreadRef;
+			readonly fork: boolean;
+			readonly updated: number;
+			readonly running: boolean;
+	  };
+
+/** The tree's colors and type from the app's theme tokens, so it follows light and dark. */
+const TREE_STYLE = {
+	height: "100%",
+	// The page's own surface: sticky project bands are drawn over the rows on it and need it opaque.
+	"--trees-bg-override": "var(--color-frame)",
+	"--trees-fg-override": "var(--color-ink-secondary)",
+	"--trees-fg-muted-override": "var(--color-ink-muted)",
+	"--trees-bg-muted-override": "var(--color-selection-subtle)",
+	"--trees-selected-bg-override": "var(--color-selection-current)",
+	"--trees-selected-fg-override": "var(--color-ink)",
+	"--trees-accent-override": "var(--color-brand)",
+	"--trees-focus-ring-color-override": "var(--color-ring)",
+	"--trees-font-family-override": "inherit",
+	"--trees-font-size-override": "13px",
+	// Bands run edge to edge, as All Threads' sections do; rows keep a small inset.
+	"--trees-padding-inline-override": "0px",
+	"--trees-item-margin-x-override": "6px",
+} as CSSProperties;
+
+/** A project's row as All Threads draws a section: a full-width band, its count quiet on the right. */
+const SECTION_CSS = `
+[data-type="item"][aria-level="1"] {
+	margin-inline: 0;
+	border-radius: 0;
+	background: color-mix(in oklab, var(--color-frame), var(--color-ink) 4%);
+	box-shadow: inset 0 -1px color-mix(in oklab, var(--color-edge) 50%, transparent);
+	color: var(--color-ink);
+}
+[data-type="item"][aria-level="1"]:hover {
+	background: color-mix(in oklab, var(--color-frame), var(--color-ink) 7%);
+}
+[data-type="item"][aria-level="1"] [data-item-section="decoration"] {
+	color: var(--color-ink-muted);
+	font-weight: 400;
+}
+`;
+
+/** A thread is a conversation, not a file: a chat bubble in the file slot. */
+const SPRITE = `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="codework-thread" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></symbol></svg>`;
+const ICONS = { set: "none", spriteSheet: SPRITE, remap: { "file-tree-icon-file": "codework-thread" } } as const;
+
+/**
+ * Each project with its sessions' main threads, and under a main thread its forks, as tree paths
+ * in the sidebar's order. A path segment is the name shown, so a slash in a title is swapped for
+ * a look-alike and a name its siblings already use gets an invisible suffix.
+ */
+function layout(projects: ReadonlyArray<SidebarProject>, threads: ReadonlyArray<ListedThread>) {
+	// Forks by the thread they were cut from; one whose source is not listed (a subagent) hangs off
+	// its session's main thread.
+	const listed = new Set(threads.map((thread) => thread.id));
+	const mainOf = new Map(
+		threads.flatMap((thread) => (thread.originKind === "main" ? [[thread.sessionId, thread.id]] : [])),
+	);
+	const forks = new Map<string, Array<ListedThread>>();
+	for (const thread of threads) {
+		if (thread.originKind !== "fork") continue;
+		const source =
+			thread.originThreadId !== null && listed.has(thread.originThreadId)
+				? thread.originThreadId
+				: (mainOf.get(thread.sessionId) ?? thread.sessionId);
+		forks.set(source, [...(forks.get(source) ?? []), thread]);
+	}
+	const forksOf = (threadId: string) => (forks.get(threadId) ?? []).toSorted((a, b) => b.updatedAt - a.updatedAt);
+	const entries = new Map<string, Entry>();
+	const paths: Array<string> = [];
+	const taken = new Map<string, Set<string>>();
+	const segment = (parent: string, name: string) => {
+		const used = taken.get(parent) ?? new Set<string>();
+		taken.set(parent, used);
+		let next = name.replaceAll("/", "∕").trim() || "Untitled";
+		while (used.has(next)) next += "​";
+		used.add(next);
+		return next;
+	};
+	const machines = new Set(projects.map((project) => project.machine.id)).size;
+	for (const project of projects) {
+		const projectPath = `${segment("", machines > 1 ? `${project.name} · ${project.machine.name}` : project.name)}/`;
+		paths.push(projectPath);
+		entries.set(projectPath, { kind: "project", path: project.path, sessions: project.sessions.length });
+		/** A fork and, under it, the forks cut from it, at any depth. */
+		const addFork = (parentPath: string, fork: ListedThread, seen: ReadonlySet<string>) => {
+			const below = seen.has(fork.id) ? [] : forksOf(fork.id);
+			const name = segment(parentPath, fork.title);
+			const forkPath = below.length === 0 ? `${parentPath}${name}` : `${parentPath}${name}/`;
+			paths.push(forkPath);
+			entries.set(forkPath, {
+				kind: "thread",
+				ref: { sessionId: fork.sessionId, threadId: fork.id },
+				fork: true,
+				updated: fork.updatedAt,
+				running: fork.runState !== "idle",
+			});
+			const next = new Set([...seen, fork.id]);
+			for (const child of below) addFork(forkPath, child, next);
+		};
+		for (const session of project.sessions) {
+			const own = forksOf(session.threadId);
+			const name = segment(projectPath, session.title);
+			const sessionPath = own.length === 0 ? `${projectPath}${name}` : `${projectPath}${name}/`;
+			paths.push(sessionPath);
+			entries.set(sessionPath, {
+				kind: "thread",
+				ref: { sessionId: session.id },
+				fork: false,
+				updated: session.updated,
+				running: session.runState !== "idle",
+			});
+			for (const fork of own) addFork(sessionPath, fork, new Set([session.threadId]));
+		}
+	}
+	return { paths, entries };
+}
+
+const EMPTY: ReadonlyArray<ListedThread> = [];
+
+/**
+ * A folder as a band shows it: the user's home folder as `~`, and past three folders only the last
+ * two, so the project's name keeps the room. The full path is the band's title.
+ */
+const homeShort = (path: string) => {
+	const short = path.replace(/^\/(?:Users|home)\/[^/]+(?=\/|$)/, "~");
+	const [root = "", ...rest] = short.split("/");
+	return rest.length > 3 ? `${root}/…/${rest.slice(-2).join("/")}` : short;
+};
+
+/** Projects, their sessions and the sessions' forks as a tree; a main thread or a fork opens its session. */
+export function Projects() {
+	const shell = useShell();
+	const projects = useAtomValue(projectsAtom);
+	const listed = useAtomValue(threadsAtom("status"));
+	const threads = AsyncResult.isSuccess(listed) ? listed.value.lists.flatMap((list) => list.threads) : EMPTY;
+	const tree = AsyncResult.isSuccess(projects) ? layout(projects.value, threads) : undefined;
+	// The tree's model is made once; its row decorations read the latest entries from here.
+	const entries = useRef(new Map<string, Entry>());
+	const rank = useRef(new Map<string, number>());
+	const minute = useNowMinute();
+	const now = useRef(minute);
+	useLayoutEffect(() => {
+		if (tree === undefined) return;
+		entries.current = tree.entries;
+		rank.current = new Map(tree.paths.map((path, index) => [path, index]));
+	});
+	const { model } = useFileTree({
+		paths: [],
+		// The sidebar's order (newest first), not the tree's alphabetical one.
+		sort: (a, b) => (rank.current.get(a.path) ?? 0) - (rank.current.get(b.path) ?? 0),
+		itemHeight: 32,
+		// A project's row stays at the top while its sessions scroll under it, as All Threads' sections do.
+		stickyFolders: true,
+		icons: ICONS,
+		unsafeCSS: SECTION_CSS,
+		renderRowDecoration: ({ row }) => {
+			const entry = entries.current.get(row.path);
+			if (entry === undefined) return null;
+			if (entry.kind === "project") {
+				const path = homeShort(entry.path);
+				const count = String(entry.sessions);
+				return {
+					text: `${path} · ${count}`,
+					title: entry.path,
+					parts: [
+						{ text: path, color: "color-mix(in oklab, var(--color-ink-muted) 75%, transparent)" },
+						{ text: `\u00a0· ${count}` },
+					],
+				};
+			}
+			const when = entry.running ? "Working" : ago(entry.updated, now.current);
+			// A fork often carries its source's title; the mark tells it apart.
+			if (!entry.fork) return { text: when };
+			return {
+				text: `fork · ${when}`,
+				parts: [
+					{ text: "fork", color: "color-mix(in oklab, var(--color-ink-muted) 75%, transparent)" },
+					{ text: `\u00a0· ${when}` },
+				],
+			};
+		},
+	});
+
+	// The tree draws decorations itself, outside React; a root render redraws them for each minute tick.
+	useEffect(() => {
+		now.current = minute;
+		model.setComposition(model.getComposition());
+	}, [model, minute]);
+
+	// Each read replaces the paths, keeping open what was open; projects start open, sessions closed.
+	const seen = useRef(new Set<string>());
+	useEffect(() => {
+		if (tree === undefined) return;
+		const expanded = tree.paths.filter((path) => {
+			if (!path.endsWith("/")) return false;
+			const item = model.getItem(path);
+			if (item !== null && "isExpanded" in item && seen.current.has(path)) return item.isExpanded();
+			return tree.entries.get(path)?.kind === "project";
+		});
+		seen.current = new Set(tree.paths);
+		model.resetPaths(tree.paths, { initialExpandedPaths: expanded });
+	}, [model, tree]);
+
+	const open = (path: string | null, mode: "new" | "replace") => {
+		const entry = path === null ? undefined : entries.current.get(path);
+		if (entry?.kind === "thread") shell.open(threadAddress(entry.ref), { mode });
+	};
+	// The clicked row's path, from inside the tree's shadow root.
+	const pathOf = (event: MouseEvent) => {
+		for (const target of event.nativeEvent.composedPath())
+			if (target instanceof HTMLElement && target.dataset.itemPath !== undefined) return target.dataset.itemPath;
+		return null;
+	};
+
+	if (AsyncResult.isFailure(projects)) return <p className="p-3 text-ink-muted">Could not load projects.</p>;
+	const count = AsyncResult.isSuccess(projects) ? projects.value.length : 0;
+	return (
+		<div className="flex h-full flex-col">
+			<div className="flex h-10 shrink-0 items-center border-b border-edge px-3">
+				<span className="text-xs text-ink-muted tabular-nums">
+					{count} {count === 1 ? "project" : "projects"}
+				</span>
+			</div>
+			<FileTree
+				model={model}
+				style={TREE_STYLE}
+				className="min-h-0 flex-1 pb-2"
+				onClick={(event) => open(pathOf(event), openMode(event))}
+				onAuxClick={(event) => event.button === 1 && open(pathOf(event), "new")}
+				onKeyDown={(event: KeyboardEvent) => {
+					if (event.key === "Enter")
+						open(model.getFocusedPath(), event.metaKey || event.ctrlKey ? "new" : "replace");
+				}}
+			/>
+		</div>
+	);
+}
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index d370e460..61aa57c9 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -11,7 +11,9 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ShellRouteImport } from './routes/_shell'
+import { Route as ShellProjectsRouteImport } from './routes/_shell.projects'
 import { Route as ShellSettingsRouteImport } from './routes/_shell.settings'
+import { Route as ShellThreadsRouteImport } from './routes/_shell.threads'
 import { Route as ShellSettingsIndexRouteImport } from './routes/_shell.settings.index'
 import { Route as ShellSettingsServersRouteImport } from './routes/_shell.settings.servers'
 import { Route as ShellSettingsThemesRouteImport } from './routes/_shell.settings.themes'
@@ -27,11 +29,21 @@ const ShellRoute = ShellRouteImport.update({
   id: '/_shell',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ShellProjectsRoute = ShellProjectsRouteImport.update({
+  id: '/projects',
+  path: '/projects',
+  getParentRoute: () => ShellRoute,
+} as any)
 const ShellSettingsRoute = ShellSettingsRouteImport.update({
   id: '/settings',
   path: '/settings',
   getParentRoute: () => ShellRoute,
 } as any)
+const ShellThreadsRoute = ShellThreadsRouteImport.update({
+  id: '/threads',
+  path: '/threads',
+  getParentRoute: () => ShellRoute,
+} as any)
 const ShellSettingsIndexRoute = ShellSettingsIndexRouteImport.update({
   id: '/',
   path: '/',
@@ -61,7 +73,9 @@ const ShellWorkspacesWorkspaceIdRoute =
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
+  '/projects': typeof ShellProjectsRoute
   '/settings': typeof ShellSettingsRouteWithChildren
+  '/threads': typeof ShellThreadsRoute
   '/settings/servers': typeof ShellSettingsServersRoute
   '/settings/themes': typeof ShellSettingsThemesRoute
   '/settings/workspaces': typeof ShellSettingsWorkspacesRoute
@@ -70,6 +84,8 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
+  '/projects': typeof ShellProjectsRoute
+  '/threads': typeof ShellThreadsRoute
   '/settings/servers': typeof ShellSettingsServersRoute
   '/settings/themes': typeof ShellSettingsThemesRoute
   '/settings/workspaces': typeof ShellSettingsWorkspacesRoute
@@ -80,7 +96,9 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/_shell': typeof ShellRouteWithChildren
+  '/_shell/projects': typeof ShellProjectsRoute
   '/_shell/settings': typeof ShellSettingsRouteWithChildren
+  '/_shell/threads': typeof ShellThreadsRoute
   '/_shell/settings/servers': typeof ShellSettingsServersRoute
   '/_shell/settings/themes': typeof ShellSettingsThemesRoute
   '/_shell/settings/workspaces': typeof ShellSettingsWorkspacesRoute
@@ -91,7 +109,9 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/projects'
     | '/settings'
+    | '/threads'
     | '/settings/servers'
     | '/settings/themes'
     | '/settings/workspaces'
@@ -100,6 +120,8 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
+    | '/projects'
+    | '/threads'
     | '/settings/servers'
     | '/settings/themes'
     | '/settings/workspaces'
@@ -109,7 +131,9 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/_shell'
+    | '/_shell/projects'
     | '/_shell/settings'
+    | '/_shell/threads'
     | '/_shell/settings/servers'
     | '/_shell/settings/themes'
     | '/_shell/settings/workspaces'
@@ -138,6 +162,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShellRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_shell/projects': {
+      id: '/_shell/projects'
+      path: '/projects'
+      fullPath: '/projects'
+      preLoaderRoute: typeof ShellProjectsRouteImport
+      parentRoute: typeof ShellRoute
+    }
     '/_shell/settings': {
       id: '/_shell/settings'
       path: '/settings'
@@ -145,6 +176,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ShellSettingsRouteImport
       parentRoute: typeof ShellRoute
     }
+    '/_shell/threads': {
+      id: '/_shell/threads'
+      path: '/threads'
+      fullPath: '/threads'
+      preLoaderRoute: typeof ShellThreadsRouteImport
+      parentRoute: typeof ShellRoute
+    }
     '/_shell/settings/': {
       id: '/_shell/settings/'
       path: '/'
@@ -202,12 +240,16 @@ const ShellSettingsRouteWithChildren = ShellSettingsRoute._addFileChildren(
 )
 
 interface ShellRouteChildren {
+  ShellProjectsRoute: typeof ShellProjectsRoute
   ShellSettingsRoute: typeof ShellSettingsRouteWithChildren
+  ShellThreadsRoute: typeof ShellThreadsRoute
   ShellWorkspacesWorkspaceIdRoute: typeof ShellWorkspacesWorkspaceIdRoute
 }
 
 const ShellRouteChildren: ShellRouteChildren = {
+  ShellProjectsRoute: ShellProjectsRoute,
   ShellSettingsRoute: ShellSettingsRouteWithChildren,
+  ShellThreadsRoute: ShellThreadsRoute,
   ShellWorkspacesWorkspaceIdRoute: ShellWorkspacesWorkspaceIdRoute,
 }
 
diff --git a/apps/web/src/routes/_shell.projects.tsx b/apps/web/src/routes/_shell.projects.tsx
new file mode 100644
index 00000000..aff182ae
--- /dev/null
+++ b/apps/web/src/routes/_shell.projects.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ProjectsPage } from "../projects/page";
+
+export const Route = createFileRoute("/_shell/projects")({ component: ProjectsPage });
diff --git a/apps/web/src/routes/_shell.threads.tsx b/apps/web/src/routes/_shell.threads.tsx
new file mode 100644
index 00000000..8c390745
--- /dev/null
+++ b/apps/web/src/routes/_shell.threads.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { ThreadsPage } from "../widgets/threads/page";
+
+export const Route = createFileRoute("/_shell/threads")({ component: ThreadsPage });
diff --git a/apps/web/src/shell/page.tsx b/apps/web/src/shell/page.tsx
new file mode 100644
index 00000000..58b6ba95
--- /dev/null
+++ b/apps/web/src/shell/page.tsx
@@ -0,0 +1,54 @@
+import { RegistryContext } from "@effect/atom-react";
+import { HostContext, type Shell, ShellContext } from "@codeworksh/widget/view";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode, useContext, useLayoutEffect, useMemo, useRef } from "react";
+
+import { makeHost } from "../kernel/host";
+import { useOpenElsewhere } from "../wm/open";
+
+/**
+ * A page of its own, outside any workspace, with a widget's host so a widget's view can run on it:
+ * `instanceId` keeps its saved state apart from any frame's, and what it opens goes to a workspace
+ * as the sidebar opens sessions.
+ */
+export function Page({
+	instanceId,
+	title,
+	icon: Icon,
+	children,
+}: {
+	readonly instanceId: string;
+	readonly title: string;
+	readonly icon: LucideIcon;
+	readonly children: ReactNode;
+}) {
+	const registry = useContext(RegistryContext);
+	const host = makeHost({ registry, package: "codework", instanceId });
+	const openElsewhere = useOpenElsewhere();
+	// Read through a ref, so the shell stays stable while the desk changes.
+	const opener = useRef(openElsewhere);
+	useLayoutEffect(() => {
+		opener.current = openElsewhere;
+	});
+	const shell = useMemo<Shell>(
+		() => ({
+			open: (address, options) => void opener.current(address, title, options?.mode ?? "replace"),
+			focus: () => {},
+			close: () => {},
+		}),
+		[title],
+	);
+	return (
+		<ShellContext value={shell}>
+			<HostContext value={host}>
+				<div className="flex h-full min-h-0 flex-col">
+					<header className="flex h-11 shrink-0 items-center gap-2 border-b border-edge px-4">
+						<Icon className="size-4 text-ink-muted" strokeWidth={1.75} aria-hidden />
+						<h1 className="text-ui font-medium text-ink">{title}</h1>
+					</header>
+					<div className="min-h-0 flex-1">{children}</div>
+				</div>
+			</HostContext>
+		</ShellContext>
+	);
+}
diff --git a/apps/web/src/shell/palette.tsx b/apps/web/src/shell/palette.tsx
index 52866f19..76ae6fa7 100644
--- a/apps/web/src/shell/palette.tsx
+++ b/apps/web/src/shell/palette.tsx
@@ -1,8 +1,8 @@
-import { useAtom, useAtomSet, useAtomValue } from "@effect/atom-react";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { useAtom, useAtomSet } from "@effect/atom-react";
+import { useNavigate } from "@tanstack/react-router";
 import { Atom } from "effect/reactivity";
-import { Check, ChevronRight, FolderKanban, FolderPlus, KanbanSquare, Settings } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { Check, ChevronRight, FolderPlus, FolderTree, ListTodo, Settings } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import {
 	CommandDialog,
@@ -13,19 +13,12 @@ import {
 	CommandList,
 } from "@/components/ui/command";
 import { isTheme, previewTheme, THEMES, themeAtom } from "../theme";
-import { dashboard, dashboardAddress } from "../widgets/dashboard";
-import { projects, projectsAddress } from "../widgets/projects";
-import { deskAtom } from "../wm/instances";
-import { lastWorkspaceAtom, openInWorkspaceRoute, useWorkspaces, workspaceTag } from "../wm/workspaces";
 import { AddProject, PALETTE_LIST, type View } from "./sources";
 import { paletteShortcut } from "./switcher";
 import { Swatch } from "./swatch";
 
-/** How long the highlight rests on a theme before it previews, so scrolling through doesn't strobe. */
-const PREVIEW_DELAY = 200;
-
-const OPEN_PROJECTS = "widgets:projects";
-const OPEN_DASHBOARD = "widgets:dashboard";
+const GO_PROJECTS = "navigation:projects";
+const GO_THREADS = "navigation:threads";
 const ADD_PROJECT = "projects:add";
 const THEME_SETTINGS = "settings:themes";
 
@@ -42,7 +35,7 @@ export function useAddProject() {
 }
 
 /**
- * The Cmd+K command palette. Moving through the theme list with the keyboard previews each theme;
+ * The Cmd+K command palette. Highlighting a theme with the keyboard previews it;
  * Enter keeps the highlighted one and closing without choosing restores the saved one. The pointer
  * only picks: hovering neither moves the highlight nor previews.
  */
@@ -52,27 +45,11 @@ export function Palette() {
 	const step = stack.at(-1);
 	const [saved, setTheme] = useAtom(themeAtom);
 	// The highlighted item, controlled so each opening starts at the top.
-	const [value, setValue] = useState(OPEN_PROJECTS);
-	const pending = useRef<ReturnType<typeof setTimeout>>(undefined);
-	const workspaces = useWorkspaces();
-	const { instances } = useAtomValue(deskAtom);
-	const lastId = useAtomValue(lastWorkspaceAtom);
-	const { workspaceId } = useParams({ strict: false });
-
-	// Where the widget already is, so the desktop reveals it there; else the workspace on screen, else the last used.
-	const openWidget = (kind: string, address: string) => {
-		const open = instances.find((instance) => instance.kind === kind);
-		const target =
-			(open && workspaces.find((workspace) => (open.tags & workspaceTag(workspace)) !== 0)) ??
-			workspaces.find((workspace) => workspace.id === (workspaceId ?? lastId)) ??
-			workspaces[0];
-		if (target !== undefined) void navigate(openInWorkspaceRoute(target, address, "replace"));
-	};
+	const [value, setValue] = useState(GO_THREADS);
 
 	const show = (next: boolean) => {
-		clearTimeout(pending.current);
 		if (next) {
-			setValue(OPEN_PROJECTS);
+			setValue(GO_THREADS);
 		} else {
 			previewTheme(saved);
 		}
@@ -104,10 +81,10 @@ export function Palette() {
 		return () => window.removeEventListener("keydown", onKeyDown);
 	});
 
+	// Closes without putting the saved theme back: the action may have just chosen another.
 	const run = (action: () => void) => {
-		clearTimeout(pending.current);
+		setPalette({ open: false, stack: [] });
 		action();
-		close();
 	};
 
 	return (
@@ -125,10 +102,8 @@ export function Palette() {
 				shouldFilter: step === undefined || step.view.kind === "sources",
 				onValueChange: (next) => {
 					setValue(next);
-					clearTimeout(pending.current);
-					// Leaving the theme list restores the saved theme.
-					const shown = isTheme(next) ? next : saved;
-					pending.current = setTimeout(() => previewTheme(shown), PREVIEW_DELAY);
+					// A theme previews as soon as it is highlighted; leaving the list restores the saved one.
+					previewTheme(isTheme(next) ? next : saved);
 				},
 			}}
 		>
@@ -139,6 +114,24 @@ export function Palette() {
 					<CommandInput placeholder="Type a command or search…" />
 					<CommandList className={PALETTE_LIST}>
 						<CommandEmpty>No results.</CommandEmpty>
+						<CommandGroup heading="Navigation">
+							<CommandItem
+								value={GO_THREADS}
+								keywords={["all threads", "go", "issues", "list", "status", "priority", "groups"]}
+								onSelect={() => run(() => void navigate({ to: "/threads" }))}
+							>
+								<ListTodo strokeWidth={1.75} />
+								All Threads
+							</CommandItem>
+							<CommandItem
+								value={GO_PROJECTS}
+								keywords={["projects", "go", "sessions", "forks", "tree"]}
+								onSelect={() => run(() => void navigate({ to: "/projects" }))}
+							>
+								<FolderTree strokeWidth={1.75} />
+								Projects
+							</CommandItem>
+						</CommandGroup>
 						<CommandGroup heading="Projects">
 							<CommandItem
 								value={ADD_PROJECT}
@@ -158,24 +151,6 @@ export function Palette() {
 								Add Project…
 							</CommandItem>
 						</CommandGroup>
-						<CommandGroup heading="Widgets">
-							<CommandItem
-								value={OPEN_PROJECTS}
-								keywords={["open projects", "sessions"]}
-								onSelect={() => run(() => openWidget(projects.kind, projectsAddress))}
-							>
-								<FolderKanban strokeWidth={1.75} />
-								Open Projects
-							</CommandItem>
-							<CommandItem
-								value={OPEN_DASHBOARD}
-								keywords={["open dashboard", "board", "threads", "status", "priority", "groups"]}
-								onSelect={() => run(() => openWidget(dashboard.kind, dashboardAddress))}
-							>
-								<KanbanSquare strokeWidth={1.75} />
-								Open Dashboard
-							</CommandItem>
-						</CommandGroup>
 						<CommandGroup heading="Settings">
 							<CommandItem
 								value={THEME_SETTINGS}
diff --git a/apps/web/src/shell/shell.tsx b/apps/web/src/shell/shell.tsx
index ac903c55..ef7dcab8 100644
--- a/apps/web/src/shell/shell.tsx
+++ b/apps/web/src/shell/shell.tsx
@@ -11,7 +11,7 @@ import { settingsShortcut, workspaceShortcut } from "./switcher";
 /**
  * Lives in the pathless `_shell` layout so switching workspaces (a URL change) never remounts
  * the desktop: widget order, pins, and per-workspace layout survive navigation.
- * Settings opens over the desktop, which stays mounted underneath.
+ * Settings, All Threads and Projects open over the desktop, which stays mounted underneath.
  */
 export function Shell() {
 	const { workspaceId } = useParams({ strict: false });
@@ -20,11 +20,17 @@ export function Shell() {
 	// From the location, which changes before route params do: a match-based check lags a
 	// render behind, in which the first workspace would pass for the one settings returns to.
 	const inSettings = useLocation({ select: (location) => location.pathname.startsWith("/settings") });
+	const overDesktop = useLocation({
+		select: (location) =>
+			location.pathname.startsWith("/settings") ||
+			location.pathname === "/threads" ||
+			location.pathname === "/projects",
+	});
 	// An id that no longer exists (a deleted workspace) shows the first one.
 	const shown = workspaces.find((workspace) => workspace.id === workspaceId) ?? workspaces[0];
 	// The workspace settings returns to; the one on screen when it opened.
 	const [lastId, setLastId] = useState<string>();
-	if (!inSettings && shown !== undefined && shown.id !== lastId) setLastId(shown.id);
+	if (!overDesktop && shown !== undefined && shown.id !== lastId) setLastId(shown.id);
 	const back = workspaces.find((workspace) => workspace.id === lastId) ?? workspaces[0];
 
 	// With every workspace deleted there is nothing to show here; the start page needs none. Only once
@@ -35,14 +41,14 @@ export function Shell() {
 	const desk = useAtomValue(deskQueryAtom);
 	const ready = AsyncResult.isSuccess(listed) && AsyncResult.isSuccess(desk);
 	useEffect(() => {
-		if (loaded && workspaces.length === 0 && !inSettings) void navigate({ to: "/", replace: true });
-	}, [loaded, workspaces.length, inSettings, navigate]);
+		if (loaded && workspaces.length === 0 && !overDesktop) void navigate({ to: "/", replace: true });
+	}, [loaded, workspaces.length, overDesktop, navigate]);
 
 	// Remembered past this route, so the start page opens things where the user last was.
 	const setLastWorkspace = useAtomSet(lastWorkspaceAtom);
 	useEffect(() => {
-		if (!inSettings && shown !== undefined) setLastWorkspace(shown.id);
-	}, [inSettings, shown, setLastWorkspace]);
+		if (!overDesktop && shown !== undefined) setLastWorkspace(shown.id);
+	}, [overDesktop, shown, setLastWorkspace]);
 
 	useEffect(() => {
 		const onKeyDown = (event: KeyboardEvent) => {
@@ -67,12 +73,12 @@ export function Shell() {
 			<div className="relative min-h-0 flex-1">
 				{ready &&
 					shown !== undefined && (
-						// Hidden, not unmounted, so widgets keep their state behind settings.
-						<div className={`h-full ${inSettings ? "paused-animations invisible" : ""}`} inert={inSettings}>
+						// Hidden, not unmounted, so widgets keep their state behind settings and All Threads.
+						<div className={`h-full ${overDesktop ? "paused-animations invisible" : ""}`} inert={overDesktop}>
 							<Desktop workspace={shown} />
 						</div>
 					)}
-				{inSettings && (
+				{overDesktop && (
 					<div className="absolute inset-0">
 						<Outlet />
 					</div>
diff --git a/apps/web/src/shell/sources.tsx b/apps/web/src/shell/sources.tsx
index 886cd8a5..d9717697 100644
--- a/apps/web/src/shell/sources.tsx
+++ b/apps/web/src/shell/sources.tsx
@@ -18,6 +18,7 @@ import {
 import { type KeyboardEvent, type ReactNode, useContext, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import { useLast } from "@/hooks/last";
 import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
 import { messageOf } from "@/lib/utils";
 import { isMac } from "@codeworksh/widget/view";
@@ -227,10 +228,9 @@ function useFolders(query: string, pinned?: string) {
 	const result = useAtomValue(listing(browsing ? directory : BROWSE_START));
 	const listed = AsyncResult.isSuccess(result) ? result.value : undefined;
 	// The last folder's rows stay until the next folder's arrive, so the list never blinks empty.
-	const last = useRef(listed);
-	if (listed !== undefined) last.current = listed;
+	const last = useLast(listed);
 	const loading = browsing && result._tag === "Initial";
-	const entries = listed?.entries ?? (loading ? (last.current?.entries ?? []) : []);
+	const entries = listed?.entries ?? (loading ? (last?.entries ?? []) : []);
 	// A pinned clone name stays as the leaf while every sibling folder shows.
 	const { visible } = filterFolders(entries, pinned !== undefined && leaf === pinned ? "" : leaf);
 	const exact = leaf === "" ? undefined : listed?.entries.find((entry) => entry.name === leaf);
diff --git a/apps/web/src/shell/switcher.tsx b/apps/web/src/shell/switcher.tsx
index 428a294c..51c3f679 100644
--- a/apps/web/src/shell/switcher.tsx
+++ b/apps/web/src/shell/switcher.tsx
@@ -33,6 +33,8 @@ interface SwitcherProps {
  * A frame's title is saved with its workspace, so after a restart a workspace not opened yet still names what it shows.
  */
 export function Switcher({ workspaces, active }: SwitcherProps) {
+	// `shown` is written while rendering the tabs and read back by later renders, which the compiler cannot memoize.
+	"use no memo";
 	const { instances, order } = useAtomValue(deskAtom);
 	const chrome = useAtomValue(chromeAtom);
 	const focusedOn = useAtomValue(focusedAtom);
@@ -97,6 +99,7 @@ export function Switcher({ workspaces, active }: SwitcherProps) {
 	// so the list refetch it triggers does not send it again.
 	const save = useAtomSet(updateWorkspace);
 	const sent = useRef(new Map<string, string>());
+	// oxlint-disable-next-line react/refs -- see "use no memo" above.
 	const changed = workspaces.flatMap((workspace) => {
 		const { text, live } = tabOf(workspace);
 		return live && text !== workspace.tab ? [[workspace.id, text] as const] : [];
@@ -111,6 +114,7 @@ export function Switcher({ workspaces, active }: SwitcherProps) {
 
 	return (
 		<nav aria-label="Workspaces" className="flex min-w-0 items-center gap-1 [-webkit-app-region:no-drag]">
+			{/* oxlint-disable-next-line react/refs -- see "use no memo" above. */}
 			{workspaces.map((workspace, index) => {
 				const current = workspace.id === active?.id;
 				const tab = showing(workspace);
diff --git a/apps/web/src/shell/toasts.tsx b/apps/web/src/shell/toasts.tsx
index 63de9cc4..ebefa9f1 100644
--- a/apps/web/src/shell/toasts.tsx
+++ b/apps/web/src/shell/toasts.tsx
@@ -110,10 +110,10 @@ function CloneToasts() {
 			}
 		}
 		// A clone gone from the list takes its toast, except a done one, which times out on its own.
-		for (const [path, { phase }] of shown) {
+		for (const [path, entry] of shown) {
 			if (clones.some((clone) => clone.path === path)) continue;
 			shown.delete(path);
-			if (phase !== "done") toast.dismiss(`project-clone:${path}`);
+			if (entry.phase !== "done") toast.dismiss(`project-clone:${path}`);
 		}
 	}, [clones, onStart, place]);
 
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 97b4c84c..761b1c3c 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -508,6 +508,7 @@
 @media (prefers-reduced-motion: no-preference) {
 	.pixel-loader-cell {
 		animation: pixel-loader 960ms steps(1, end) infinite;
+		animation-play-state: var(--visible-animation-state, paused);
 	}
 }
 
diff --git a/apps/web/src/widgets/dashboard/dashboard.tsx b/apps/web/src/widgets/dashboard/dashboard.tsx
deleted file mode 100644
index e8d2ec51..00000000
--- a/apps/web/src/widgets/dashboard/dashboard.tsx
+++ /dev/null
@@ -1,633 +0,0 @@
-import { useAtomSet, useAtomValue } from "@effect/atom-react";
-import {
-	type Dashboard as Board,
-	type DashboardBy,
-	type DashboardList,
-	type DashboardThread,
-	type Grouping,
-	PERSONAL_ORGANIZATION,
-	type Priority,
-	type ThreadStatus,
-} from "@codeworksh/contract";
-import { isMac, openMode, useKv, useShell, type WidgetProps } from "@codeworksh/widget/view";
-import { AsyncResult } from "effect/reactivity";
-import {
-	CircleAlert,
-	CircleCheck,
-	CircleDot,
-	CircleX,
-	GripVertical,
-	type LucideIcon,
-	Minus,
-	MoreHorizontal,
-	Plus,
-	SignalHigh,
-	SignalLow,
-	SignalMedium,
-	TriangleAlert,
-} from "lucide-react";
-import { type DragEvent, type MouseEvent, type ReactNode, useEffect, useState } from "react";
-import { toast } from "sonner";
-
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { threadAddress } from "../session/address";
-import { useRunDisplay } from "../session/display";
-import { RunMark } from "../session/run";
-import { type ThreadRef, threadKey } from "../session/schema";
-import { ago } from "../time";
-import {
-	createGroup,
-	dashboardAtom,
-	deleteGroup,
-	groupPosition,
-	listKey,
-	moveGroup,
-	moveThread,
-	setGroup,
-	setPriority,
-	setStatus,
-	threadPosition,
-	updateGroup,
-} from "./data";
-
-const STATUS: Record<ThreadStatus, { readonly label: string; readonly icon: LucideIcon }> = {
-	working: { label: "Working", icon: CircleDot },
-	attention: { label: "Needs attention", icon: CircleAlert },
-	settled: { label: "Settled", icon: CircleCheck },
-	cancelled: { label: "Cancelled", icon: CircleX },
-};
-const STATUSES = Object.keys(STATUS) as ReadonlyArray<ThreadStatus>;
-
-const PRIORITY: Record<Priority, { readonly label: string; readonly icon: LucideIcon }> = {
-	1: { label: "Urgent", icon: TriangleAlert },
-	2: { label: "High", icon: SignalHigh },
-	3: { label: "Medium", icon: SignalMedium },
-	4: { label: "Low", icon: SignalLow },
-	0: { label: "No priority", icon: Minus },
-};
-const PRIORITIES: ReadonlyArray<Priority> = [1, 2, 3, 4, 0];
-
-/** The colors a group can take, Linear's label hues. */
-const COLORS = ["#e5484d", "#f76b15", "#ffc53d", "#46a758", "#12a594", "#0090ff", "#8e4ec6", "#d6409f", "#8b8d98"];
-
-const SPLITS: ReadonlyArray<{ readonly by: DashboardBy; readonly label: string }> = [
-	{ by: "status", label: "Status" },
-	{ by: "priority", label: "Priority" },
-	{ by: "grouping", label: "Group" },
-];
-
-const byKey = (instanceId: string) => `widget/${instanceId}/by`;
-const isBy = (value: unknown): value is DashboardBy => SPLITS.some((split) => split.by === value);
-
-const failed = (error: unknown) =>
-	toast.error("Not saved", {
-		description:
-			typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
-				? error.message
-				: undefined,
-	});
-
-/**
- * The organization's threads as a Linear-like board: lists by status, priority or group, each in the
- * one manual order. Dragging a thread moves it in that order, and into the list it is dropped on.
- */
-export function Dashboard({ instanceId }: WidgetProps<unknown>) {
-	const kv = useKv();
-	const [by, setBy] = useState<DashboardBy>("status");
-	useEffect(() => {
-		let active = true;
-		void kv.get(byKey(instanceId)).then((saved) => {
-			if (active && isBy(saved)) setBy(saved);
-		});
-		return () => {
-			active = false;
-		};
-	}, [kv, instanceId]);
-	const choose = (next: DashboardBy) => {
-		setBy(next);
-		void kv.set(byKey(instanceId), next);
-	};
-	const result = useAtomValue(dashboardAtom(by));
-	const create = useAtomSet(createGroup, { mode: "promise" });
-	const [renaming, setRenaming] = useState<string>();
-	const newGroup = () =>
-		create({ payload: { organizationId: PERSONAL_ORGANIZATION, name: "New group" } }).then(
-			(group) => setRenaming(group.id),
-			failed,
-		);
-
-	return (
-		<div className="flex h-full flex-col">
-			<div className="flex shrink-0 items-center gap-2 border-b border-edge px-3 py-1.5">
-				<div role="radiogroup" aria-label="Group by" className="flex rounded-md bg-ink/5 p-0.5">
-					{SPLITS.map((split) => (
-						<button
-							key={split.by}
-							type="button"
-							role="radio"
-							aria-checked={split.by === by}
-							onClick={() => choose(split.by)}
-							className="rounded-[5px] px-2 py-0.5 text-xs text-ink-muted aria-checked:bg-frame aria-checked:text-ink aria-checked:shadow-sm"
-						>
-							{split.label}
-						</button>
-					))}
-				</div>
-				{by === "grouping" && (
-					<button
-						type="button"
-						onClick={() => void newGroup()}
-						className="ml-auto flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-ink-muted hover:bg-ink/5 hover:text-ink"
-					>
-						<Plus className="size-3.5" strokeWidth={1.75} aria-hidden />
-						New group
-					</button>
-				)}
-			</div>
-			{AsyncResult.match(result, {
-				onInitial: () => null,
-				onFailure: () => <p className="p-3 text-ink-muted">Could not load the dashboard.</p>,
-				onSuccess: ({ value }) => (
-					<Lists
-						board={value}
-						renaming={renaming}
-						onRenamed={() => setRenaming(undefined)}
-						onRename={setRenaming}
-					/>
-				),
-			})}
-		</div>
-	);
-}
-
-type Drag = { readonly kind: "thread" | "group"; readonly id: string };
-type Drop = { readonly list: string; readonly index: number };
-
-/** `list` with `thread` taken out of wherever it was and put at `index` of the list keyed `to`, as it will be. */
-const moved = (lists: ReadonlyArray<DashboardList>, thread: DashboardThread, to: string, index: number) =>
-	lists.map((list): DashboardList => {
-		const threads = list.threads.filter((candidate) => candidate.id !== thread.id);
-		if (listKey(list) !== to) return { ...list, threads };
-		const placed =
-			list._tag === "Status"
-				? { ...thread, status: list.status }
-				: list._tag === "Priority"
-					? { ...thread, priority: list.priority }
-					: { ...thread, groupingId: list.groupingId };
-		return { ...list, threads: threads.toSpliced(index, 0, placed) };
-	});
-
-/** The thread as the session view names it: its session alone for the main thread. */
-const refOf = (thread: DashboardThread): ThreadRef =>
-	thread.originKind === "main"
-		? { sessionId: thread.sessionId }
-		: { sessionId: thread.sessionId, threadId: thread.id };
-
-function Lists({
-	board,
-	renaming,
-	onRename,
-	onRenamed,
-}: {
-	readonly board: Board;
-	readonly renaming: string | undefined;
-	readonly onRename: (groupingId: string) => void;
-	readonly onRenamed: () => void;
-}) {
-	const shell = useShell();
-	const status = useAtomSet(setStatus, { mode: "promise" });
-	const priority = useAtomSet(setPriority, { mode: "promise" });
-	const group = useAtomSet(setGroup, { mode: "promise" });
-	const move = useAtomSet(moveThread, { mode: "promise" });
-	const reorder = useAtomSet(moveGroup, { mode: "promise" });
-	// Drawn at once while the writes go out, until the read after them arrives.
-	const [optimistic, setOptimistic] = useState<{
-		readonly base: Board;
-		readonly lists: ReadonlyArray<DashboardList>;
-	}>();
-	const lists = optimistic?.base === board ? optimistic.lists : board.lists;
-	const [drag, setDrag] = useState<Drag>();
-	const [drop, setDrop] = useState<Drop>();
-	const groups = new Map(board.groups.map((candidate) => [candidate.id, candidate]));
-	const all = lists.flatMap((list) => list.threads).toSorted((a, b) => a.ordering - b.ordering);
-
-	const open = (thread: DashboardThread, event: MouseEvent) => {
-		if (event.button <= 1) shell.open(threadAddress(refOf(thread)), { mode: openMode(event) });
-	};
-
-	/** Puts the thread in the list keyed `to`: the setter of the column the board splits by. */
-	const assign = (thread: DashboardThread, list: DashboardList) =>
-		list._tag === "Status"
-			? status({ payload: { threadId: thread.id, status: list.status } })
-			: list._tag === "Priority"
-				? priority({ payload: { threadId: thread.id, priority: list.priority } })
-				: group({ payload: { threadId: thread.id, groupingId: list.groupingId } });
-
-	const dropThread = async (target: DashboardList, index: number) => {
-		const thread = all.find((candidate) => candidate.id === drag?.id);
-		if (thread === undefined) return;
-		const source = lists.find((list) => list.threads.some((candidate) => candidate.id === thread.id));
-		const same = source !== undefined && listKey(source) === listKey(target);
-		if (same && source.threads.findIndex((candidate) => candidate.id === thread.id) === index) return;
-		setOptimistic({ base: board, lists: moved(lists, thread, listKey(target), index) });
-		const to = threadPosition(
-			all.filter((candidate) => candidate.id !== thread.id),
-			target.threads.filter((candidate) => candidate.id !== thread.id),
-			index,
-		);
-		try {
-			if (!same) await assign(thread, target);
-			if (to !== undefined) await move({ payload: { threadId: thread.id, to } });
-		} catch (error) {
-			setOptimistic(undefined);
-			failed(error);
-		}
-	};
-
-	/** Drops the dragged group above or below the group whose header is under the pointer. */
-	const dropGroup = (event: DragEvent, onto: string) => {
-		const dragged = drag?.id;
-		const others = board.groups.filter((candidate) => candidate.id !== dragged);
-		const rect = event.currentTarget.getBoundingClientRect();
-		const index =
-			others.findIndex((candidate) => candidate.id === onto) + (event.clientY > rect.top + rect.height / 2 ? 1 : 0);
-		if (
-			dragged === undefined ||
-			dragged === onto ||
-			board.groups.findIndex((candidate) => candidate.id === dragged) === index
-		)
-			return;
-		void reorder({ payload: { groupingId: dragged, to: groupPosition(others, index) } }).catch(failed);
-	};
-
-	/** Where a drag over a row of `list` at `at` lands, as an index of the list without the dragged thread. */
-	const over = (event: DragEvent, list: DashboardList, at: number) => {
-		if (drag?.kind !== "thread") return;
-		event.preventDefault();
-		event.stopPropagation();
-		const rect = event.currentTarget.getBoundingClientRect();
-		const below = event.clientY > rect.top + rect.height / 2;
-		const from = list.threads.findIndex((candidate) => candidate.id === drag.id);
-		const index = at + (below ? 1 : 0);
-		const next = { list: listKey(list), index: from !== -1 && from < index ? index - 1 : index };
-		if (drop?.list !== next.list || drop.index !== next.index) setDrop(next);
-	};
-
-	const end = () => {
-		setDrag(undefined);
-		setDrop(undefined);
-	};
-
-	return (
-		<div className="min-h-0 flex-1 overflow-auto pb-3" onDragEnd={end}>
-			{lists.map((list) => {
-				const key = listKey(list);
-				// A group's own list: its header drags to reorder the groups.
-				const groupId = list._tag === "Grouping" ? list.groupingId : null;
-				const without = list.threads.filter((candidate) => candidate.id !== drag?.id);
-				return (
-					<section
-						key={key}
-						aria-label={heading(list, groups).name}
-						onDragOver={(event) => {
-							if (drag?.kind !== "thread") return;
-							event.preventDefault();
-							if (drop?.list !== key) setDrop({ list: key, index: without.length });
-						}}
-						onDrop={(event) => {
-							event.preventDefault();
-							if (drag?.kind === "thread" && drop?.list === key) void dropThread(list, drop.index);
-							end();
-						}}
-					>
-						<ListHeader
-							list={list}
-							groups={groups}
-							renaming={renaming}
-							onRename={onRename}
-							onRenamed={onRenamed}
-							draggable={groupId !== null}
-							onDragStart={() => groupId !== null && setDrag({ kind: "group", id: groupId })}
-							onDragOver={(event) => {
-								// A thread over the header lands at the top of the list; its drop is the section's.
-								if (drag?.kind === "thread") {
-									event.preventDefault();
-									event.stopPropagation();
-									if (drop?.list !== key || drop.index !== 0) setDrop({ list: key, index: 0 });
-									return;
-								}
-								if (drag?.kind !== "group" || groupId === null) return;
-								event.preventDefault();
-								event.stopPropagation();
-							}}
-							onDrop={(event) => {
-								if (drag?.kind !== "group" || groupId === null) return;
-								event.preventDefault();
-								event.stopPropagation();
-								dropGroup(event, groupId);
-								end();
-							}}
-						/>
-						<ul className="min-h-2">
-							{list.threads.map((thread, at) => {
-								const index = without.findIndex((candidate) => candidate.id === thread.id);
-								return (
-									<Row
-										key={thread.id}
-										thread={thread}
-										groups={board.groups}
-										dragging={drag?.id === thread.id}
-										above={drop?.list === key && index !== -1 && drop.index === index}
-										onOpen={open}
-										onDragStart={() => setDrag({ kind: "thread", id: thread.id })}
-										onDragOver={(event) => over(event, list, at)}
-									/>
-								);
-							})}
-							{drop?.list === key && drop.index === without.length && (
-								<li aria-hidden className="mx-3 h-0.5 rounded bg-ring" />
-							)}
-						</ul>
-					</section>
-				);
-			})}
-		</div>
-	);
-}
-
-/** What a list is called and how it is marked. */
-const heading = (list: DashboardList, groups: ReadonlyMap<string, Grouping>): { name: string; mark: ReactNode } => {
-	if (list._tag === "Status") {
-		const { label, icon: Icon } = STATUS[list.status];
-		return { name: label, mark: <Icon className="size-3.5 text-ink-muted" strokeWidth={1.75} aria-hidden /> };
-	}
-	if (list._tag === "Priority") {
-		const { label, icon: Icon } = PRIORITY[list.priority];
-		return { name: label, mark: <Icon className="size-3.5 text-ink-muted" strokeWidth={1.75} aria-hidden /> };
-	}
-	const group = list.groupingId === null ? undefined : groups.get(list.groupingId);
-	return { name: group?.name ?? "No group", mark: <Dot color={group?.color ?? null} /> };
-};
-
-function Dot({ color }: { readonly color: string | null }) {
-	return (
-		<span
-			aria-hidden
-			className="size-2.5 shrink-0 rounded-full border border-ink/15"
-			style={color === null ? undefined : { backgroundColor: color, borderColor: color }}
-		/>
-	);
-}
-
-function ListHeader({
-	list,
-	groups,
-	renaming,
-	onRename,
-	onRenamed,
-	draggable,
-	onDragStart,
-	onDragOver,
-	onDrop,
-}: {
-	readonly list: DashboardList;
-	readonly groups: ReadonlyMap<string, Grouping>;
-	readonly renaming: string | undefined;
-	readonly onRename: (groupingId: string) => void;
-	readonly onRenamed: () => void;
-	readonly draggable: boolean;
-	readonly onDragStart: () => void;
-	readonly onDragOver: (event: DragEvent) => void;
-	readonly onDrop: (event: DragEvent) => void;
-}) {
-	const update = useAtomSet(updateGroup, { mode: "promise" });
-	const remove = useAtomSet(deleteGroup, { mode: "promise" });
-	const { name, mark } = heading(list, groups);
-	const group = list._tag === "Grouping" && list.groupingId !== null ? groups.get(list.groupingId) : undefined;
-	const rename = (value: string) => {
-		onRenamed();
-		if (group !== undefined && value.trim() !== "" && value.trim() !== group.name)
-			void update({ payload: { groupingId: group.id, name: value } }).catch(failed);
-	};
-	return (
-		<div
-			draggable={draggable && renaming !== group?.id}
-			onDragStart={(event) => {
-				event.dataTransfer.effectAllowed = "move";
-				onDragStart();
-			}}
-			onDragOver={onDragOver}
-			onDrop={onDrop}
-			className="group/header sticky top-0 z-10 flex items-center gap-2 bg-frame px-3 pt-3 pb-1 text-xs font-medium"
-		>
-			{draggable && (
-				<GripVertical
-					className="-ml-2 size-3 cursor-grab text-ink-muted opacity-0 group-hover/header:opacity-100"
-					aria-hidden
-				/>
-			)}
-			{mark}
-			{group !== undefined && renaming === group.id ? (
-				<input
-					// oxlint-disable-next-line jsx-a11y/no-autofocus -- a new or renamed group is named at once.
-					autoFocus
-					defaultValue={group.name}
-					aria-label="Group name"
-					onFocus={(event) => event.currentTarget.select()}
-					onBlur={(event) => rename(event.currentTarget.value)}
-					onKeyDown={(event) => {
-						if (event.key === "Enter") event.currentTarget.blur();
-						if (event.key === "Escape") onRenamed();
-					}}
-					className="min-w-0 rounded-sm bg-ink/5 px-1 outline-none focus-visible:ring-1 focus-visible:ring-ring"
-				/>
-			) : (
-				<span className="truncate">{name}</span>
-			)}
-			<span className="text-ink-muted tabular-nums">{list.threads.length}</span>
-			{group !== undefined && (
-				<DropdownMenu>
-					<DropdownMenuTrigger
-						aria-label={`${group.name} actions`}
-						className="ml-auto grid size-5 place-items-center rounded-md text-ink-muted opacity-0 group-hover/header:opacity-100 hover:bg-ink/8 focus-visible:opacity-100 data-[state=open]:opacity-100"
-					>
-						<MoreHorizontal className="size-3.5" aria-hidden />
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						<DropdownMenuItem onSelect={() => onRename(group.id)}>Rename</DropdownMenuItem>
-						<DropdownMenuSeparator />
-						<div className="flex flex-wrap gap-1 px-2 py-1" role="group" aria-label="Color">
-							{[...COLORS, null].map((color) => (
-								<DropdownMenuItem
-									key={color ?? "none"}
-									aria-label={color ?? "No color"}
-									onSelect={() => void update({ payload: { groupingId: group.id, color } }).catch(failed)}
-									className="grid size-6 min-h-0 place-items-center p-0"
-								>
-									<Dot color={color} />
-								</DropdownMenuItem>
-							))}
-						</div>
-						<DropdownMenuSeparator />
-						<DropdownMenuItem
-							variant="destructive"
-							onSelect={() => void remove({ payload: { groupingId: group.id } }).catch(failed)}
-						>
-							Delete group
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			)}
-		</div>
-	);
-}
-
-function Row({
-	thread,
-	groups,
-	dragging,
-	above,
-	onOpen,
-	onDragStart,
-	onDragOver,
-}: {
-	readonly thread: DashboardThread;
-	readonly groups: ReadonlyArray<Grouping>;
-	readonly dragging: boolean;
-	/** The drop would land just above it. */
-	readonly above: boolean;
-	readonly onOpen: (thread: DashboardThread, event: MouseEvent) => void;
-	readonly onDragStart: () => void;
-	readonly onDragOver: (event: DragEvent) => void;
-}) {
-	const status = useAtomSet(setStatus, { mode: "promise" });
-	const priority = useAtomSet(setPriority, { mode: "promise" });
-	const group = useAtomSet(setGroup, { mode: "promise" });
-	const display = useRunDisplay([{ key: threadKey(refOf(thread)), runState: thread.runState }]);
-	const grouping = groups.find((candidate) => candidate.id === thread.groupingId);
-	const PriorityIcon = PRIORITY[thread.priority].icon;
-	const StatusIcon = STATUS[thread.status].icon;
-	return (
-		<li
-			draggable
-			onDragStart={(event) => {
-				event.dataTransfer.effectAllowed = "move";
-				event.dataTransfer.setData("text/plain", thread.title);
-				onDragStart();
-			}}
-			onDragOver={onDragOver}
-			data-thread={thread.id}
-			className={`relative ${dragging ? "opacity-40" : ""}`}
-		>
-			{above && <span aria-hidden className="absolute inset-x-3 -top-px h-0.5 rounded bg-ring" />}
-			<div className="group/row mx-1.5 flex h-8 items-center gap-2 rounded-md px-1.5 hover:bg-ink/5">
-				<span
-					aria-hidden
-					className="h-4 w-0.5 shrink-0 rounded-full"
-					style={{ backgroundColor: thread.color ?? "transparent" }}
-				/>
-				<Pick
-					label={`Priority: ${PRIORITY[thread.priority].label}`}
-					icon={<PriorityIcon className="size-3.5" strokeWidth={1.75} aria-hidden />}
-					value={String(thread.priority)}
-					options={PRIORITIES.map((value) => ({ value: String(value), label: PRIORITY[value].label }))}
-					onPick={(value) =>
-						void priority({ payload: { threadId: thread.id, priority: Number(value) } }).catch(failed)
-					}
-				/>
-				<button
-					type="button"
-					title={`Open thread (${isMac ? "⌘" : "Ctrl"}-click or middle-click opens a new one)`}
-					onClick={(event) => onOpen(thread, event)}
-					onAuxClick={(event) => onOpen(thread, event)}
-					className="flex min-w-0 flex-1 items-center gap-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring"
-				>
-					<span className="min-w-0 truncate text-body text-ink">{thread.title}</span>
-					{thread.originKind !== "main" && (
-						<span className="shrink-0 text-2xs text-ink-muted">{thread.originKind}</span>
-					)}
-					<span className="min-w-0 shrink truncate text-2xs text-ink-muted">{thread.project.name}</span>
-				</button>
-				<span className="text-ink-muted">
-					<RunMark display={display} />
-				</span>
-				<Pick
-					label={`Group: ${grouping?.name ?? "No group"}`}
-					icon={
-						<span className="flex max-w-28 items-center gap-1 text-2xs">
-							<Dot color={grouping?.color ?? null} />
-							{grouping !== undefined && <span className="truncate">{grouping.name}</span>}
-						</span>
-					}
-					value={thread.groupingId ?? "none"}
-					options={[
-						...groups.map((candidate) => ({ value: candidate.id, label: candidate.name })),
-						{ value: "none", label: "No group" },
-					]}
-					onPick={(value) =>
-						void group({ payload: { threadId: thread.id, groupingId: value === "none" ? null : value } }).catch(
-							failed,
-						)
-					}
-				/>
-				<Pick
-					label={`Status: ${STATUS[thread.status].label}`}
-					icon={<StatusIcon className="size-3.5" strokeWidth={1.75} aria-hidden />}
-					value={thread.status}
-					options={STATUSES.map((value) => ({ value, label: STATUS[value].label }))}
-					onPick={(value) => {
-						const next = STATUSES.find((candidate) => candidate === value);
-						if (next !== undefined) void status({ payload: { threadId: thread.id, status: next } }).catch(failed);
-					}}
-				/>
-				<span className="w-8 shrink-0 text-right text-2xs tabular-nums text-ink-muted">
-					{ago(thread.updatedAt)}
-				</span>
-			</div>
-		</li>
-	);
-}
-
-/** A small menu button that picks one of `options`. */
-function Pick({
-	label,
-	icon,
-	value,
-	options,
-	onPick,
-}: {
-	readonly label: string;
-	readonly icon: ReactNode;
-	readonly value: string;
-	readonly options: ReadonlyArray<{ readonly value: string; readonly label: string }>;
-	readonly onPick: (value: string) => void;
-}) {
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger
-				aria-label={label}
-				title={label}
-				className="flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md px-1 text-ink-muted hover:bg-ink/8 hover:text-ink"
-			>
-				{icon}
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end">
-				<DropdownMenuRadioGroup value={value} onValueChange={(next) => next !== value && onPick(next)}>
-					{options.map((option) => (
-						<DropdownMenuRadioItem key={option.value} value={option.value}>
-							{option.label}
-						</DropdownMenuRadioItem>
-					))}
-				</DropdownMenuRadioGroup>
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-}
diff --git a/apps/web/src/widgets/dashboard/data.ts b/apps/web/src/widgets/dashboard/data.ts
deleted file mode 100644
index 392ce254..00000000
--- a/apps/web/src/widgets/dashboard/data.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import {
-	type DashboardBy,
-	type DashboardList,
-	type DashboardThread,
-	type Grouping,
-	PERSONAL_ORGANIZATION,
-	type Position,
-	readTopics,
-	SyncChanged,
-	syncTopics,
-} from "@codeworksh/contract";
-import type { Event } from "@codeworksh/widget/event";
-import { Effect, Option, Schedule, Schema, Stream } from "effect";
-import { Atom } from "effect/reactivity";
-
-import { Server } from "../../kernel/rpc";
-
-const decodeChanged = Schema.decodeUnknownOption(SyncChanged);
-
-/** Whether an event changes what the dashboard shows: a thread, its project, a removed session, or any desktop edit. */
-const touches = (event: Event) =>
-	event.topic !== syncTopics.changed ||
-	Option.exists(
-		decodeChanged(event.payload),
-		(notice) => notice.thread.length + notice.project.length + notice.removed.length > 0,
-	);
-
-/** The organization's threads split by `by`: read when subscribed, and again after each change to them. */
-export const dashboardAtom = Atom.family((by: DashboardBy) =>
-	Server.runtime.atom(
-		Stream.unwrap(
-			Server.use((client) =>
-				Effect.succeed(
-					client("event.subscribe", { topics: readTopics.dashboard }).pipe(
-						// `Synced` first, once subscribed: the first read can miss no change.
-						Stream.filter((item) => "_tag" in item || touches(item)),
-						Stream.debounce("50 millis"),
-						Stream.mapEffect(() => client("dashboard.list", { organizationId: PERSONAL_ORGANIZATION, by })),
-					),
-				),
-			),
-		).pipe(Stream.retry(Schedule.spaced("1 second"))),
-	),
-);
-
-export const setStatus = Server.mutation("threads.setStatus");
-export const setPriority = Server.mutation("threads.setPriority");
-export const setGroup = Server.mutation("threads.setGroup");
-export const moveThread = Server.mutation("threads.move");
-export const createGroup = Server.mutation("groups.create");
-export const updateGroup = Server.mutation("groups.update");
-export const moveGroup = Server.mutation("groups.move");
-export const deleteGroup = Server.mutation("groups.delete");
-
-/** What names a list, for drag and drop: its status, priority or group (`none` is ungrouped). */
-export const listKey = (list: DashboardList) =>
-	list._tag === "Status"
-		? list.status
-		: list._tag === "Priority"
-			? String(list.priority)
-			: (list.groupingId ?? "none");
-
-/**
- * Where a thread goes to land at `index` of `list`, both without it. Every view splits one order, so
- * at a list's edge the neighbour beyond is the next thread in the whole order (`all`, in `ordering`,
- * without it too). An empty list needs no move.
- */
-export const threadPosition = (
-	all: ReadonlyArray<DashboardThread>,
-	list: ReadonlyArray<DashboardThread>,
-	index: number,
-): Position | undefined => {
-	const after = list[index - 1];
-	const before = list[index];
-	if (after !== undefined && before !== undefined) return { after: after.id, before: before.id };
-	if (before !== undefined) {
-		const beyond = all[all.findIndex((thread) => thread.id === before.id) - 1];
-		return beyond === undefined ? "first" : { after: beyond.id, before: before.id };
-	}
-	if (after !== undefined) {
-		const beyond = all[all.findIndex((thread) => thread.id === after.id) + 1];
-		return beyond === undefined ? "last" : { after: after.id, before: beyond.id };
-	}
-	return undefined;
-};
-
-/** Where a group goes to land at `index` of `groups`, without it. */
-export const groupPosition = (groups: ReadonlyArray<Grouping>, index: number): Position => {
-	const after = groups[index - 1];
-	const before = groups[index];
-	if (after !== undefined && before !== undefined) return { after: after.id, before: before.id };
-	return before !== undefined ? "first" : "last";
-};
diff --git a/apps/web/src/widgets/dashboard/index.ts b/apps/web/src/widgets/dashboard/index.ts
deleted file mode 100644
index 0261f3a3..00000000
--- a/apps/web/src/widgets/dashboard/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { KanbanSquare } from "lucide-react";
-import { Schema } from "effect";
-
-import { defineWidget } from "@codeworksh/widget/view";
-import { Dashboard } from "./dashboard";
-
-/** What opens the Dashboard widget, from the command palette. */
-export const dashboardAddress = "codework://dashboard";
-
-/** Every thread by status, priority or group, in its manual order; picking one opens it beside the board. */
-export const dashboard = defineWidget({
-	kind: "codework:dashboard",
-	title: "Dashboard",
-	icon: KanbanSquare,
-	minWidth: 320,
-	minHeight: 200,
-	cardinality: "one",
-	priority: "builtin",
-	opens: [dashboardAddress],
-	props: Schema.Struct({}),
-	component: Dashboard,
-});
diff --git a/apps/web/src/widgets/index.ts b/apps/web/src/widgets/index.ts
index b78bd28b..e0a3f937 100644
--- a/apps/web/src/widgets/index.ts
+++ b/apps/web/src/widgets/index.ts
@@ -1,9 +1,8 @@
 import type { Widget } from "@codeworksh/widget/view";
-import { dashboard } from "./dashboard";
-import { projects } from "./projects";
 import { session } from "./session";
+import { threads } from "./threads";
 
 /** Widgets that ship with the app. Registry-installed widgets join these by kind. */
-export const builtins: readonly Widget[] = [projects, dashboard, session];
+export const builtins: readonly Widget[] = [threads, session];
 
 export const registry: ReadonlyMap<string, Widget> = new Map(builtins.map((widget) => [widget.kind, widget]));
diff --git a/apps/web/src/widgets/projects/index.ts b/apps/web/src/widgets/projects/index.ts
deleted file mode 100644
index 8286a83a..00000000
--- a/apps/web/src/widgets/projects/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FolderKanban } from "lucide-react";
-import { Schema } from "effect";
-
-import { defineWidget } from "@codeworksh/widget/view";
-import { Projects } from "./projects";
-
-/** What opens the Projects widget, from the command palette. */
-export const projectsAddress = "codework://projects";
-
-/** Every project with its sessions; picking a session opens it beside the list. */
-export const projects = defineWidget({
-	kind: "codework:projects",
-	title: "Projects",
-	icon: FolderKanban,
-	minWidth: 240,
-	minHeight: 200,
-	cardinality: "one",
-	priority: "builtin",
-	opens: [projectsAddress],
-	props: Schema.Struct({}),
-	component: Projects,
-});
diff --git a/apps/web/src/widgets/projects/projects.tsx b/apps/web/src/widgets/projects/projects.tsx
deleted file mode 100644
index 517e8488..00000000
--- a/apps/web/src/widgets/projects/projects.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useAtomValue } from "@effect/atom-react";
-import { AsyncResult } from "effect/reactivity";
-import { Folder } from "lucide-react";
-import type { MouseEvent } from "react";
-
-import { isMac, openMode, useShell } from "@codeworksh/widget/view";
-
-import { sessionAddress } from "../session/address";
-import { projectsAtom } from "../session/projects";
-import { ago } from "../time";
-
-export function Projects() {
-	const shell = useShell();
-	const result = useAtomValue(projectsAtom);
-	// Primary and middle clicks open; a right click is left to the context menu.
-	const open = (id: string, event: MouseEvent) => {
-		if (event.button <= 1) shell.open(sessionAddress(id), { mode: openMode(event) });
-	};
-
-	return AsyncResult.match(result, {
-		onInitial: () => null,
-		onFailure: () => <p className="p-3 text-ink-muted">Could not load projects.</p>,
-		onSuccess: ({ value: projects }) => (
-			<ul className="h-full overflow-auto px-1.5 pb-2">
-				{projects.map((project) => (
-					<li key={`${project.machine.id}/${project.id}`} className="mb-2">
-						<div className="flex items-center gap-1.5 px-1.5 py-1" title={project.path}>
-							<Folder className="size-3.5 shrink-0 text-ink-muted" strokeWidth={1.75} aria-hidden />
-							<span className="truncate font-medium">{project.name}</span>
-						</div>
-						<ul>
-							{project.sessions.map((session) => (
-								<li key={session.id}>
-									<button
-										type="button"
-										data-session={session.id}
-										title={`Open session (${isMac ? "⌘" : "Ctrl"}-click or middle-click opens a new one)`}
-										className="flex w-full items-baseline gap-2 rounded-md py-1 pr-1.5 pl-6.5 text-left hover:bg-ink/5"
-										onClick={(event) => open(session.id, event)}
-										onAuxClick={(event) => open(session.id, event)}
-									>
-										<span className="min-w-0 flex-1 truncate">{session.title}</span>
-										<span className="shrink-0 text-ink-muted tabular-nums">{ago(session.updated)}</span>
-									</button>
-								</li>
-							))}
-						</ul>
-					</li>
-				))}
-			</ul>
-		),
-	});
-}
diff --git a/apps/web/src/widgets/session/display.ts b/apps/web/src/widgets/session/display.ts
index 22b4dea2..43c9c9ca 100644
--- a/apps/web/src/widgets/session/display.ts
+++ b/apps/web/src/widgets/session/display.ts
@@ -1,7 +1,8 @@
-import { useAtomValue, useAtomSet } from "@effect/atom-react";
-import type { RunState } from "@codeworksh/widget/codework";
+import { RegistryContext, useAtomValue } from "@effect/atom-react";
+import { RunState } from "@codeworksh/widget/codework";
+import { Schema } from "effect";
 import { Atom } from "effect/reactivity";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 
 /*
  * What the UI shows for a thread's run: the harness's `run_state`, joined by two states only this
@@ -21,47 +22,39 @@ interface Sent {
 
 const NONE: Sent = { prompts: new Set(), stopping: false };
 
-/** By thread key (`threadKey`); a thread with nothing in flight has no entry. */
-const sentAtom = Atom.make<ReadonlyMap<string, Sent>>(new Map()).pipe(Atom.keepAlive);
-
-const update = (map: ReadonlyMap<string, Sent>, key: string, change: (sent: Sent) => Sent) => {
-	const before = map.get(key) ?? NONE;
-	const after = change(before);
-	if (after === before) return map;
-	const next = new Map(map);
-	if (after.prompts.size === 0 && !after.stopping) next.delete(key);
-	else next.set(key, after);
-	return next;
-};
+/**
+ * By thread key (`threadKey`), one atom each, so a send, a landing or a stop touches only its own
+ * thread's readers. Kept alive: what was sent outlives the views showing it.
+ */
+const sentOf = Atom.family((_key: string) => Atom.make<Sent>(NONE).pipe(Atom.keepAlive));
+
+/** These keys' sent state, joined by newlines in `keys`: recomputed only when one of them changes. */
+const sentAll = Atom.family((keys: string) =>
+	Atom.make((get) => (keys === "" ? [] : keys.split("\n").map((key) => [key, get(sentOf(key))] as const))),
+);
 
 /** The commands that move a thread's client state: a prompt sent or landed, a stop sent or settled. */
 export function useSent() {
-	const set = useAtomSet(sentAtom);
-	return useMemo(() => {
-		const change = (key: string, fn: (sent: Sent) => Sent) => set((map) => update(map, key, fn));
-		return {
-			prompt: (key: string, id: string) =>
-				change(key, (sent) => ({ ...sent, prompts: new Set([...sent.prompts, id]) })),
-			/** Prompts that are in app.db now, or were refused. */
-			landed: (key: string, ids: Iterable<string>) =>
-				change(key, (sent) => {
-					const prompts = new Set(sent.prompts);
-					for (const id of ids) prompts.delete(id);
-					return prompts.size === sent.prompts.size ? sent : { ...sent, prompts };
-				}),
-			stop: (key: string) => change(key, (sent) => (sent.stopping ? sent : { ...sent, stopping: true })),
-			unstop: (key: string) => change(key, (sent) => (sent.stopping ? { ...sent, stopping: false } : sent)),
-			forget: (key: string) => change(key, () => NONE),
-		};
-	}, [set]);
+	const registry = useContext(RegistryContext);
+	const change = (key: string, fn: (sent: Sent) => Sent) => registry.update(sentOf(key), fn);
+	return {
+		prompt: (key: string, id: string) =>
+			change(key, (sent) => ({ ...sent, prompts: new Set([...sent.prompts, id]) })),
+		/** Prompts that are in app.db now, or were refused. */
+		landed: (key: string, ids: Iterable<string>) =>
+			change(key, (sent) => {
+				const prompts = new Set(sent.prompts);
+				for (const id of ids) prompts.delete(id);
+				return prompts.size === sent.prompts.size ? sent : { ...sent, prompts };
+			}),
+		stop: (key: string) => change(key, (sent) => (sent.stopping ? sent : { ...sent, stopping: true })),
+		unstop: (key: string) => change(key, (sent) => (sent.stopping ? { ...sent, stopping: false } : sent)),
+		forget: (key: string) => change(key, () => NONE),
+	};
 }
 
 /** Prompt ids this window sent the thread that have not landed yet. */
-export const usePendingPrompts = (key: string) =>
-	useAtomValue(
-		sentAtom,
-		useCallback((map: ReadonlyMap<string, Sent>) => map.get(key)?.prompts ?? NONE.prompts, [key]),
-	);
+export const usePendingPrompts = (key: string) => useAtomValue(sentOf(key)).prompts;
 
 /** A stop shows until the run is idle, then a prompt still in flight, then the run as stored. */
 const displayOf = (sent: Sent | undefined, runState: RunState): Display =>
@@ -103,24 +96,40 @@ function useDrawn(display: Display): Display {
 /**
  * Whether each mounted display reads a thread idle, by thread key. Displays read different copies
  * of `run_state` (the view its thread's updates, a tab and the sidebar the sidebar list, the
- * dashboard its own list), each refreshed on its own; a stop clears once all of them read idle, so
+ * All Threads its own list), each refreshed on its own; a stop clears once all of them read idle, so
  * no display whose copy still says running draws the run again for the moment between.
  */
 const idleBy = new Map<string, Map<symbol, boolean>>();
 
+const isRunState = Schema.is(RunState);
+
+const runStatesOf = (reads: string) => {
+	const runStates = new Map<string, RunState>();
+	for (const line of reads.split("\n")) {
+		const [key = "", runState] = line.split("\t");
+		if (key !== "" && isRunState(runState)) runStates.set(key, runState);
+	}
+	return runStates;
+};
+
 /** What to draw for these threads' runs, by key and stored run state: the one that says most. */
 export function useRunDisplay(threads: ReadonlyArray<{ readonly key: string; readonly runState: RunState }>) {
-	const sent = useAtomValue(sentAtom);
 	const { unstop } = useSent();
 	const [self] = useState(() => Symbol("display"));
 	const reads = threads.map(({ key, runState }) => `${key}\t${runState}`).join("\n");
-	const stopping = [...sent].flatMap(([key, { stopping }]) => (stopping ? [key] : [])).join("\n");
+	// Built from `reads`, so callers passing a new array every render keep the same map.
+	const runStates = runStatesOf(reads);
+	// Only these threads' sent state: a send to any other thread renders nothing here.
+	const sent = useAtomValue(sentAll([...runStates.keys()].join("\n")));
+	let display: Display = "idle";
+	for (const [key, entry] of sent) {
+		const next = displayOf(entry, runStates.get(key) ?? "idle");
+		if (WEIGHT[next] > WEIGHT[display]) display = next;
+	}
+	const stopping = sent.flatMap(([key, entry]) => (entry.stopping ? [key] : [])).join("\n");
 	useEffect(() => {
-		const keys = new Set<string>();
-		for (const line of reads.split("\n")) {
-			if (line === "") continue;
-			const [key = "", runState] = line.split("\t");
-			keys.add(key);
+		const keys = new Set(runStates.keys());
+		for (const [key, runState] of runStates) {
 			const readers = idleBy.get(key) ?? new Map<symbol, boolean>();
 			readers.set(self, runState === "idle");
 			idleBy.set(key, readers);
@@ -134,11 +143,7 @@ export function useRunDisplay(threads: ReadonlyArray<{ readonly key: string; rea
 				if (readers?.size === 0) idleBy.delete(key);
 			}
 		};
-	}, [reads, stopping, self, unstop]);
-	const display = threads.reduce<Display>((most, { key, runState }) => {
-		const next = displayOf(sent.get(key), runState);
-		return WEIGHT[next] > WEIGHT[most] ? next : most;
-	}, "idle");
+	}, [runStates, stopping, self, unstop]);
 	return useDrawn(display);
 }
 
diff --git a/apps/web/src/widgets/session/follow.ts b/apps/web/src/widgets/session/follow.ts
index 5f7c20c1..3b210369 100644
--- a/apps/web/src/widgets/session/follow.ts
+++ b/apps/web/src/widgets/session/follow.ts
@@ -1,5 +1,5 @@
 import type { AnchoredEndSpaceConfig, LegendListRef, MaintainScrollAtEndOptions } from "@legendapp/list/react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 
 /** The anchored prompt's distance from the top of the viewport. */
 const ANCHOR_OFFSET = 20;
@@ -253,64 +253,58 @@ export function useFollow({
 	};
 
 	const index = anchor === null ? -1 : anchorIndex(anchor);
-	const anchoredEndSpace: AnchoredEndSpaceConfig | undefined =
-		anchor === null || index === -1
-			? undefined
-			: {
-					anchorIndex: index,
-					anchorOffset: ANCHOR_OFFSET,
-					onReady: ({ anchorIndex: ready, size }) => {
-						anchorSize.current = size;
-						if (ready === undefined || positioned.current === anchor) return;
-						positioned.current = anchor;
-						// Its reply already reaches the composer: the end follows it instead.
-						if (following && size <= inset) {
-							releaseAnchor();
-							requestAnimationFrame(() => landed(anchor));
-							return;
-						}
-						const release = viewport.current?.hold() ?? (() => {});
-						void list.current
-							?.scrollToIndex({ index: ready, viewPosition: 0, viewOffset: ANCHOR_OFFSET, animated: false })
-							.then(() => {
-								release();
-								landed(anchor);
-							});
-					},
-					onSizeChanged: (size) => {
-						anchorSize.current = size;
-						if (positioned.current === anchor && store.read().mode === "following" && size <= inset)
-							releaseAnchor();
-					},
-				};
-
-	const navigate = useCallback(
-		(navigation: Navigation) => {
-			const el = viewport.current?.el;
-			if (el === undefined || !releases(navigation, el)) return;
-			if (store.dispatch("navigated").before.mode !== "following") return;
-			// A new imperative scroll cancels the list's queued ones; a missing item cancels without moving.
-			void list.current?.scrollToItem({ item: CANCEL, animated: false });
-			// A smooth scroll already under way keeps running in the browser; writing its position halts it.
-			const top = el.scrollTop;
-			el.scrollTop = top;
-		},
-		[store],
-	);
-	const ref = useCallback(
-		(instance: LegendListRef | null) => {
-			list.current = instance;
-			if (instance === null) return;
-			const attached = attachViewport(instance.getScrollableNode(), navigate);
-			viewport.current = attached;
-			return () => {
-				attached.dispose();
-				if (viewport.current === attached) viewport.current = undefined;
-				list.current = null;
+	// Read in render instead of the config, whose callbacks write refs, so the compiler keeps the hook.
+	const anchoring = anchor !== null && index !== -1;
+	const anchoredEndSpace: AnchoredEndSpaceConfig | undefined = !anchoring
+		? undefined
+		: {
+				anchorIndex: index,
+				anchorOffset: ANCHOR_OFFSET,
+				onReady: ({ anchorIndex: ready, size }) => {
+					anchorSize.current = size;
+					if (ready === undefined || positioned.current === anchor) return;
+					positioned.current = anchor;
+					// Its reply already reaches the composer: the end follows it instead.
+					if (following && size <= inset) {
+						releaseAnchor();
+						requestAnimationFrame(() => landed(anchor));
+						return;
+					}
+					const release = viewport.current?.hold() ?? (() => {});
+					void list.current
+						?.scrollToIndex({ index: ready, viewPosition: 0, viewOffset: ANCHOR_OFFSET, animated: false })
+						.then(() => {
+							release();
+							landed(anchor);
+						});
+				},
+				onSizeChanged: (size) => {
+					anchorSize.current = size;
+					if (positioned.current === anchor && store.read().mode === "following" && size <= inset) releaseAnchor();
+				},
 			};
-		},
-		[navigate],
-	);
+
+	const navigate = (navigation: Navigation) => {
+		const el = viewport.current?.el;
+		if (el === undefined || !releases(navigation, el)) return;
+		if (store.dispatch("navigated").before.mode !== "following") return;
+		// A new imperative scroll cancels the list's queued ones; a missing item cancels without moving.
+		void list.current?.scrollToItem({ item: CANCEL, animated: false });
+		// A smooth scroll already under way keeps running in the browser; writing its position halts it.
+		const top = el.scrollTop;
+		el.scrollTop = top;
+	};
+	const ref = (instance: LegendListRef | null) => {
+		list.current = instance;
+		if (instance === null) return;
+		const attached = attachViewport(instance.getScrollableNode(), navigate);
+		viewport.current = attached;
+		return () => {
+			attached.dispose();
+			if (viewport.current === attached) viewport.current = undefined;
+			list.current = null;
+		};
+	};
 
 	const onScroll = () => {
 		const el = viewport.current?.el;
@@ -339,8 +333,10 @@ export function useFollow({
 		ref,
 		onScroll,
 		onLoad: () => setSettled(true),
+		/** Laid out and scrolled into place: before this the list is measuring and may still move. */
+		settled,
 		anchoredEndSpace,
-		maintainScrollAtEnd: anchoredEndSpace !== undefined || !following ? false : smooth ? END_SMOOTH : END,
+		maintainScrollAtEnd: anchoring || !following ? false : smooth ? END_SMOOTH : END,
 		/** The prompt hidden until it rises into its anchor. */
 		pending: anchor !== null && rising === anchor ? rising : undefined,
 	};
diff --git a/apps/web/src/widgets/session/highlight.tsx b/apps/web/src/widgets/session/highlight.tsx
index 73b8da32..52654487 100644
--- a/apps/web/src/widgets/session/highlight.tsx
+++ b/apps/web/src/widgets/session/highlight.tsx
@@ -1,5 +1,5 @@
 import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { useEffect, useMemo, useReducer } from "react";
+import { useEffect, useReducer } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import type { BundledLanguage, BundledTheme, Highlighter } from "shiki";
 
@@ -77,10 +77,7 @@ export function useHighlight(code: string, lang: BundledLanguage | undefined, th
 	}, []);
 	const shikiTheme = SHIKI_THEMES[theme];
 	const available = lang !== undefined && ready(lang, shikiTheme);
-	return useMemo(
-		() => (available && lang !== undefined ? highlighter?.codeToHast(code, { lang, theme: shikiTheme }) : undefined),
-		[available, code, lang, shikiTheme],
-	);
+	return available && lang !== undefined ? highlighter?.codeToHast(code, { lang, theme: shikiTheme }) : undefined;
 }
 
 const runtime = { Fragment, jsx, jsxs };
diff --git a/apps/web/src/widgets/session/markdown.tsx b/apps/web/src/widgets/session/markdown.tsx
index 7a28ebb7..a02a5b3b 100644
--- a/apps/web/src/widgets/session/markdown.tsx
+++ b/apps/web/src/widgets/session/markdown.tsx
@@ -8,7 +8,6 @@ import {
 	memo,
 	type ReactNode,
 	useEffect,
-	useMemo,
 	useState,
 } from "react";
 import type { Components, ExtraProps, Options } from "react-markdown";
@@ -146,10 +145,10 @@ export const Markdown = memo(function Markdown({
 	readonly streaming?: boolean;
 	readonly className?: string;
 }) {
-	const incremental = useMemo(() => incrementalMarkdown(), []);
+	const [incremental] = useState(incrementalMarkdown);
 	const blocks = streaming ? splitMarkdownBlocks(text) : null;
 	const fenced = streaming && /(?:^|\n) {0,3}(?:`{3}|~{3})/.test(text);
-	const remarkPlugins = useMemo(() => (fenced ? [remarkGfm, incremental] : plugins), [fenced, incremental]);
+	const remarkPlugins = fenced ? [remarkGfm, incremental] : plugins;
 	return (
 		<div className={`agent-markdown min-w-0 ${className ?? ""}`}>
 			{/* react-markdown renders a Fragment, so the blocks' elements sit in this div as one document's would.
diff --git a/apps/web/src/widgets/session/projects.ts b/apps/web/src/widgets/session/projects.ts
index dfa05b97..34ba67b2 100644
--- a/apps/web/src/widgets/session/projects.ts
+++ b/apps/web/src/widgets/session/projects.ts
@@ -1,10 +1,19 @@
 import { useAtomValue } from "@effect/atom-react";
-import { PERSONAL_ORGANIZATION, readTopics, SyncChanged, SyncTracking, syncTopics } from "@codeworksh/contract";
+import {
+	PERSONAL_ORGANIZATION,
+	readTopics,
+	type SidebarProject,
+	type SidebarSession,
+	SyncChanged,
+	SyncTracking,
+	syncTopics,
+} from "@codeworksh/contract";
 import type { RunState } from "@codeworksh/widget/codework";
 import type { Event } from "@codeworksh/widget/event";
 import { Effect, Option, Schedule, Schema, Stream } from "effect";
 import { AsyncResult, Atom } from "effect/reactivity";
 
+import { keeper } from "../../kernel/keep";
 import { Server } from "../../kernel/rpc";
 
 const decodeChanged = Schema.decodeUnknownOption(SyncChanged);
@@ -25,6 +34,28 @@ const touches = (event: Event) =>
 			)
 		: Option.exists(decodeTracking(event.payload), (edit) => edit._tag === "Session");
 
+const sameSession = (a: SidebarSession, b: SidebarSession) =>
+	a.title === b.title &&
+	a.runState === b.runState &&
+	a.updated === b.updated &&
+	a.color === b.color &&
+	a.path === b.path &&
+	a.threadId === b.threadId &&
+	a.spaceKind === b.spaceKind &&
+	a.model?.provider === b.model?.provider &&
+	a.model?.id === b.model?.id;
+
+/** `next` with every session that did not change kept as the object `previous` had, so its sidebar row skips rendering. */
+const reuse = (previous: ReadonlyArray<SidebarProject> | undefined, next: ReadonlyArray<SidebarProject>) => {
+	if (previous === undefined) return next;
+	const session = keeper(
+		previous.flatMap((project) => project.sessions),
+		(item) => item.id,
+		sameSession,
+	);
+	return next.map((project) => ({ ...project, sessions: project.sessions.map(session) }));
+};
+
 /**
  * Every active project with its sessions, on every machine, as the sidebar lists them: read from the
  * app's synced copy when subscribed, and again after each change to it.
@@ -41,6 +72,13 @@ export const projectsAtom = Server.runtime
 						Stream.mapEffect(() =>
 							client("sidebar.list", { organizationId: PERSONAL_ORGANIZATION, machines: "all" }),
 						),
+						Stream.mapAccum(
+							(): ReadonlyArray<SidebarProject> | undefined => undefined,
+							(previous, next) => {
+								const kept = reuse(previous, next);
+								return [kept, [kept]] as const;
+							},
+						),
 					),
 				),
 			),
@@ -107,13 +145,26 @@ export const runStatesAtom = Atom.family((keys: string) =>
 	}),
 );
 
+interface Listed {
+	readonly title: string;
+	readonly project: { readonly id: string; readonly name: string };
+}
+
+const sameListed = (a: Listed, b: Listed) =>
+	a.title === b.title && a.project.id === b.project.id && a.project.name === b.project.name;
+
 const listedAtom = Atom.family((id: string) =>
-	Atom.make((get) => {
+	Atom.make((get): Listed | undefined => {
 		const result = get(projectsAtom);
 		if (!AsyncResult.isSuccess(result)) return undefined;
 		for (const project of result.value) {
 			const session = project.sessions.find((candidate) => candidate.id === id);
-			if (session !== undefined) return { title: session.title, project: { id: project.id, name: project.name } };
+			if (session === undefined) continue;
+			const next = { title: session.title, project: { id: project.id, name: project.name } };
+			// The sidebar reads again on any session's change; an unchanged answer keeps its object, so the
+			// session view reading it renders only for its own session's title or project.
+			const previous = Option.getOrUndefined(get.self<Listed | undefined>());
+			return previous !== undefined && sameListed(previous, next) ? previous : next;
 		}
 		return undefined;
 	}),
diff --git a/apps/web/src/widgets/session/queue.tsx b/apps/web/src/widgets/session/queue.tsx
index 9e05fb3b..d1562150 100644
--- a/apps/web/src/widgets/session/queue.tsx
+++ b/apps/web/src/widgets/session/queue.tsx
@@ -53,17 +53,12 @@ export const Queue = memo(function Queue({
 	const act = async (id: string, request: () => Promise<void>) => {
 		onError(undefined);
 		setBusy((current) => new Set(current).add(id));
-		try {
-			await request();
-		} catch {
-			onError(unreachable);
-		} finally {
-			setBusy((current) => {
-				const next = new Set(current);
-				next.delete(id);
-				return next;
-			});
-		}
+		await request().catch(() => onError(unreachable));
+		setBusy((current) => {
+			const next = new Set(current);
+			next.delete(id);
+			return next;
+		});
 	};
 
 	const change = (prompt: QueuedPrompt, patch: { readonly delivery?: Delivery; readonly text?: string }) =>
diff --git a/apps/web/src/widgets/session/view.tsx b/apps/web/src/widgets/session/view.tsx
index 4aaf5ed9..6a7d2757 100644
--- a/apps/web/src/widgets/session/view.tsx
+++ b/apps/web/src/widgets/session/view.tsx
@@ -5,7 +5,7 @@ import { Option, Schema } from "effect";
 import { Atom } from "effect/reactivity";
 import { LegendList, type LegendListRenderItemProps } from "@legendapp/list/react";
 import { ChevronRight, CircleDashed, X } from "lucide-react";
-import { createContext, memo, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, memo, use, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 import { Logo } from "@/components/logo";
 import { ComposerNotice, type Notice } from "@/components/banner";
@@ -19,7 +19,10 @@ import { Message } from "./message";
 import { Queue } from "./queue";
 import { type Handoff, handoffs } from "./handoff";
 import { type Display, displayLabel, usePendingPrompts, useRunDisplay, useSent } from "./display";
+import { useNowSecond } from "../../hooks/now";
+import { useStableCallback } from "../../hooks/stable";
 import { useListedSession } from "./projects";
+import { RunMark } from "./run";
 import { type Info, Json, type ThreadRef, threadKey, topics, type Update } from "./schema";
 
 const decodeReply = Schema.decodeUnknownOption(Json.Reply);
@@ -29,6 +32,9 @@ const decodeWindow = Schema.decodeUnknownOption(Json.Window);
 const decodeUpdate = Schema.decodeUnknownOption(Json.Update);
 const samePart = Schema.toEquivalence(Part);
 
+/** The composer overlay's height as last measured, by any conversation. */
+let lastInset = 0;
+
 /** Messages per page: the newest on open, then older ones as the reader scrolls up. */
 const PAGE = 60;
 
@@ -36,7 +42,7 @@ const PAGE = 60;
 const contentWidth = "mx-auto w-full max-w-conversation";
 
 export function Session({ address, instanceId }: WidgetProps<unknown>) {
-	const thread = useMemo(() => threadRef(address), [address]);
+	const thread = threadRef(address);
 	const key = thread === undefined ? (address ?? "") : threadKey(thread);
 	// The thread this frame showed before, so a switch can keep it in view while the next one loads.
 	const [shown, setShown] = useState<{ readonly key: string; readonly previous?: string }>({ key });
@@ -259,8 +265,11 @@ function conversationStore(initial: State) {
 	return { live, quiet, message };
 }
 
-/** Forks the conversation at an entry, for an entry it can be forked at: committed, and not a stand-in. */
-const ForkContext = createContext<(entry: HistoryEntry | undefined) => (() => void) | undefined>(() => undefined);
+/** Forks the conversation at an entry; one identity for the conversation's life, so no turn renders for it. */
+const ForkContext = createContext<(entry: HistoryEntry) => void>(() => {});
+
+/** An entry a fork can start at: committed, so its place in the line is final. */
+const forkable = (entry: HistoryEntry | undefined): entry is HistoryEntry => entry?.state === "committed";
 
 const noMessage = Atom.make<HistoryEntry | undefined>(undefined);
 const StreamedContext = createContext<(id: string) => Atom.Atom<HistoryEntry | undefined>>(() => noMessage);
@@ -278,10 +287,7 @@ function textOf(reply: HistoryEntry, at?: number) {
  */
 function useStreamed(reply: HistoryEntry, at?: number) {
 	const message = use(StreamedContext);
-	const select = useCallback(
-		(entry: HistoryEntry | undefined) => (entry === undefined ? undefined : textOf(entry, at)),
-		[at],
-	);
+	const select = (entry: HistoryEntry | undefined) => (entry === undefined ? undefined : textOf(entry, at));
 	return useAtomValue(reply.state === "draft" ? message(reply.id) : noMessage, select) ?? textOf(reply, at);
 }
 
@@ -307,20 +313,17 @@ function useConversation(thread: ThreadRef) {
 		[registry, store, thread],
 	);
 
-	const page = useCallback(
-		async (before: number | undefined) => {
-			const reply = decodeWindow(
-				(
-					await bus.request({
-						topic: topics.page,
-						payload: { ...thread, limit: PAGE, ...(before === undefined ? {} : { before }) },
-					})
-				).payload,
-			);
-			return Option.getOrUndefined(reply);
-		},
-		[bus, thread],
-	);
+	const page = async (before: number | undefined) => {
+		const reply = decodeWindow(
+			(
+				await bus.request({
+					topic: topics.page,
+					payload: { ...thread, limit: PAGE, ...(before === undefined ? {} : { before }) },
+				})
+			).payload,
+		);
+		return Option.getOrUndefined(reply);
+	};
 
 	useEffect(() => {
 		let active = true;
@@ -369,7 +372,7 @@ function useConversation(thread: ThreadRef) {
 	});
 
 	const oldest = state.status === "ready" && state.more ? state.messages[0]?.seq : undefined;
-	const loadOlder = useCallback(() => {
+	const loadOlder = () => {
 		if (oldest === undefined || paging.current) return;
 		paging.current = true;
 		void page(oldest)
@@ -385,7 +388,7 @@ function useConversation(thread: ThreadRef) {
 			.finally(() => {
 				paging.current = false;
 			});
-	}, [oldest, page]);
+	};
 
 	return { state, loadOlder, message: store.message };
 }
@@ -438,21 +441,18 @@ function Conversation({
 		setSeenOutcome(outcome);
 		if (sent.length > 0 && (run?.info.runState === "idle" || failure !== undefined)) setSent([]);
 	}
-	const state = useMemo<State>(() => {
-		if (loaded.status !== "ready" || sent.length === 0) return loaded;
+	let state: State = loaded;
+	if (loaded.status === "ready" && sent.length > 0) {
 		const ids = new Set(sent.map((message) => message.id));
-		return {
+		state = {
 			...loaded,
 			messages: [...loaded.messages, ...sent],
 			queued: loaded.queued.some((prompt) => ids.has(prompt.id))
 				? loaded.queued.filter((prompt) => !ids.has(prompt.id))
 				: loaded.queued,
 		};
-	}, [loaded, sent]);
-	const sending = useCallback(
-		(prompt: Handoff) => setSent((current) => [...current, standIn(thread, prompt)]),
-		[thread],
-	);
+	}
+	const sending = (prompt: Handoff) => setSent((current) => [...current, standIn(thread, prompt)]);
 	// A prompt this window sent is pending until it lands in app.db, as a message or a queued prompt.
 	const key = threadKey(thread);
 	const inFlight = usePendingPrompts(key);
@@ -468,32 +468,25 @@ function Conversation({
 	// Only this view hears the thread's rows land, so what it sent goes with it.
 	useEffect(() => () => forget(key), [key, forget]);
 	const phase = useRunDisplay([{ key, runState: loaded.status === "ready" ? loaded.info.runState : "idle" }]);
-	const unsent = useCallback((id: string) => setSent((current) => current.filter((message) => message.id !== id)), []);
+	const unsent = (id: string) => setSent((current) => current.filter((message) => message.id !== id));
 	// A fork opens in a frame of its own once the backend answers, by then in app.db.
 	const bus = useBus();
 	const shell = useShell();
 	const [forkError, setForkError] = useState<string>();
-	const forkAt = useCallback(
-		(entry: HistoryEntry | undefined) => {
-			if (entry === undefined || entry.state !== "committed" || sent.some((message) => message.id === entry.id))
-				return undefined;
-			return () => {
-				setForkError(undefined);
-				void bus
-					.request({ topic: topics.fork, payload: encodeFork({ ...thread, entryId: entry.id }) })
-					.then((reply) => Option.getOrUndefined(decodeForked(reply.payload)))
-					.catch(() => undefined)
-					.then((forked) => {
-						if (forked?._tag === "Forked")
-							shell.open(threadAddress({ sessionId: thread.sessionId, threadId: forked.threadId }), {
-								mode: "new",
-							});
-						else setForkError(forked?.message ?? "The CodeWork server is not reachable.");
-					});
-			};
-		},
-		[bus, shell, thread, sent],
-	);
+	const forkAt = useStableCallback((entry: HistoryEntry) => {
+		// A prompt this window sent and app.db holds only as a stand-in has no place to fork at yet.
+		if (sent.some((message) => message.id === entry.id)) return;
+		setForkError(undefined);
+		void bus
+			.request({ topic: topics.fork, payload: encodeFork({ ...thread, entryId: entry.id }) })
+			.then((reply) => Option.getOrUndefined(decodeForked(reply.payload)))
+			.catch(() => undefined)
+			.then((forked) => {
+				if (forked?._tag === "Forked")
+					shell.open(threadAddress({ sessionId: thread.sessionId, threadId: forked.threadId }), { mode: "new" });
+				else setForkError(forked?.message ?? "The CodeWork server is not reachable.");
+			});
+	});
 	// Named from the sessions list at once, so the frame never shows its default title while loading.
 	const listed = useListedSession(thread.sessionId);
 	const title = state.status === "ready" ? state.info.title : listed?.title;
@@ -505,11 +498,14 @@ function Conversation({
 		if (title === undefined) return;
 		// The project leads, so sessions from different projects tell apart at a glance.
 		setTitle(title, projectName);
-		// The project's badge, as in the sessions sidebar.
-		if (projectId !== undefined && projectName !== undefined) setIcon(<Monogram id={projectId} name={projectName} />);
+		// While its run goes, the run's mark as the sidebar draws it, so a working frame tells apart at a
+		// glance; else the project's badge, as in the sessions sidebar.
+		if (phase !== "idle") setIcon(<RunMark display={phase} />);
+		else if (projectId !== undefined && projectName !== undefined)
+			setIcon(<Monogram id={projectId} name={projectName} />);
 		// While focused, the workspace's tab reads as this session: its project, then its title.
 		setTab(projectName === undefined ? title : `${projectName} / ${title}`);
-	}, [title, projectId, projectName, setTitle, setIcon, setTab]);
+	}, [title, projectId, projectName, phase, setTitle, setIcon, setTab]);
 
 	// Models that can't be listed first: a state that clears itself, so it can't be dismissed. Then a
 	// refused send, else why the last run failed; dismissing hides that one notice only.
@@ -517,10 +513,7 @@ function Conversation({
 	const [sendError, setSendError] = useState<string>();
 	// A queued prompt taken back to edit; the composer puts its text above the draft.
 	const [restored, setRestored] = useState<{ readonly text: string; readonly key: number }>();
-	const restore = useCallback(
-		(text: string) => setRestored((current) => ({ text, key: (current?.key ?? 0) + 1 })),
-		[],
-	);
+	const restore = (text: string) => setRestored((current) => ({ text, key: (current?.key ?? 0) + 1 }));
 	const [dismissed, setDismissed] = useState<Notice>();
 	const notice: Notice | undefined =
 		sendError !== undefined
@@ -535,7 +528,9 @@ function Conversation({
 
 	const surface = useRef<HTMLDivElement>(null);
 	const composer = useRef<HTMLDivElement>(null);
-	const [inset, setInset] = useState(0);
+	// The last composer's height, so a conversation opens at its end with the composer already
+	// counted and the list does not scroll again once it is measured.
+	const [inset, setInset] = useState(lastInset);
 	// Before paint, so the first frame is laid out with the composer's height.
 	useLayoutEffect(() => {
 		const root = surface.current;
@@ -544,7 +539,8 @@ function Conversation({
 		const sync = () => {
 			const height = element.getBoundingClientRect().height;
 			root.style.setProperty("--composer-height", `${height}px`);
-			setInset(Math.ceil(height));
+			lastInset = Math.ceil(height);
+			setInset(lastInset);
 		};
 		sync();
 		const observer = new ResizeObserver(sync);
@@ -676,8 +672,9 @@ function Transcript({
 	const modelName = useModelName(state.info.hostDir, state.info.model);
 	const turns = useTurns(state.messages);
 	const lastUser = turns.at(-1)?.user;
+	// oxlint-disable-next-line react/purity -- useFollow reads what this decides on mount only.
 	const sentAgo = lastUser === undefined ? Infinity : Date.now() - lastUser.createdAt;
-	const follow = useFollow({
+	const { ref, onLoad, onScroll, anchoredEndSpace, maintainScrollAtEnd, pending, settled } = useFollow({
 		lastUserId: lastUser?.id,
 		anchored: running || sentAgo < PROMPT_RECENT_MS,
 		// The start page's first prompt, handed over with the new session.
@@ -686,8 +683,7 @@ function Transcript({
 		inset,
 		anchorIndex: (promptId) => turns.findLastIndex((turn) => turn.user?.id === promptId),
 	});
-	const { pending } = follow;
-	const extraData = useMemo(() => ({ phase, modelName, pending }), [phase, modelName, pending]);
+	const extraData = { phase, modelName, pending };
 
 	if (turns.length === 0)
 		return (
@@ -705,7 +701,7 @@ function Transcript({
 	);
 	return (
 		<LegendList<Turn>
-			ref={follow.ref}
+			ref={ref}
 			data={turns}
 			extraData={extraData}
 			keyExtractor={turnKey}
@@ -714,24 +710,23 @@ function Transcript({
 			estimatedItemSize={90}
 			recycleItems={false}
 			initialScrollAtEnd
-			onLoad={follow.onLoad}
-			{...(follow.anchoredEndSpace === undefined ? {} : { anchoredEndSpace: follow.anchoredEndSpace })}
-			contentInsetEndAdjustment={follow.anchoredEndSpace === undefined ? 0 : inset}
-			maintainScrollAtEnd={follow.maintainScrollAtEnd}
+			onLoad={onLoad}
+			{...(anchoredEndSpace === undefined ? {} : { anchoredEndSpace })}
+			contentInsetEndAdjustment={anchoredEndSpace === undefined ? 0 : inset}
+			maintainScrollAtEnd={maintainScrollAtEnd}
 			maintainScrollAtEndThreshold={1}
 			maintainVisibleContentPosition={MAINTAIN_VISIBLE_CONTENT_POSITION}
 			onStartReached={state.more ? loadOlder : undefined}
 			onScroll={(event) => {
-				follow.onScroll();
+				onScroll();
 				setScrolled(event.nativeEvent.contentOffset.y > 1);
 			}}
 			tabIndex={0}
 			aria-label="Conversation"
-			className={`session-transcript min-h-0 flex-1 overflow-x-hidden overscroll-y-contain [overflow-anchor:none] ${scrolled ? "session-transcript-scrolled" : ""}`}
+			data-settled={settled}
+			className={`session-transcript min-h-0 flex-1 overflow-x-hidden overscroll-y-contain [overflow-anchor:none] ${scrolled ? "session-transcript-scrolled" : ""} ${settled ? "" : "invisible"}`}
 			ListHeaderComponent={TRANSCRIPT_HEADER}
-			ListFooterComponent={
-				<div aria-hidden style={{ height: (follow.anchoredEndSpace === undefined ? inset : 0) + 24 }} />
-			}
+			ListFooterComponent={<div aria-hidden style={{ height: (anchoredEndSpace === undefined ? inset : 0) + 24 }} />}
 		/>
 	);
 }
@@ -816,6 +811,7 @@ const TurnView = memo(function TurnView({ turn, phase, pending, modelName }: Tur
 	const working = active && (last?.state !== "draft" || !answer || toolRunning);
 	const started = turn.user?.createdAt ?? turn.replies[0]?.createdAt;
 	const forkAt = use(ForkContext);
+	const user = turn.user;
 	const ended = active ? undefined : endOf(turn.replies);
 
 	return (
@@ -823,14 +819,14 @@ const TurnView = memo(function TurnView({ turn, phase, pending, modelName }: Tur
 			data-prompt-pending={pending || undefined}
 			className={`transcript-turn ${contentWidth} flex flex-col pt-2 pb-2 text-body`}
 		>
-			{turn.user !== undefined && <UserMessage entry={turn.user} onFork={forkAt(turn.user)} />}
+			{user !== undefined && <UserMessage entry={user} onFork={forkable(user) ? () => forkAt(user) : undefined} />}
 			{(work.length > 0 || working || answer || interrupted || failed) && (
 				<Message
 					role="assistant"
 					at={turn.replies[0]?.createdAt}
 					ended={ended}
 					copyText={last === undefined ? "" : textOf(last)}
-					onFork={forkAt(last)}
+					onFork={forkable(last) ? () => forkAt(last) : undefined}
 				>
 					<WorkLog
 						steps={work}
@@ -938,18 +934,6 @@ function formatWorkingDuration(elapsedMs: number | undefined, modelName: string
 	return who ? `${who} ${verb} for ${elapsed}` : `${verb} for ${elapsed}`;
 }
 
-function useElapsedFrom(startedAt: number | undefined, active: boolean): number | undefined {
-	const [now, setNow] = useState(() => Date.now());
-	useEffect(() => {
-		if (!active || startedAt === undefined) return;
-		setNow(Date.now());
-		const id = window.setInterval(() => setNow(Date.now()), 1000);
-		return () => window.clearInterval(id);
-	}, [startedAt, active]);
-	return active && startedAt !== undefined ? Math.max(0, now - startedAt) : undefined;
-}
-
-// A leaf of its own, so the live tick re-renders only the label's text.
 function WorkLabel({
 	started,
 	ended,
@@ -961,12 +945,26 @@ function WorkLabel({
 	readonly phase: Display;
 	readonly modelName: string | undefined;
 }) {
-	const live = ended === undefined;
-	const liveElapsed = useElapsedFrom(started, live);
-	const elapsedMs = live ? liveElapsed : started !== undefined && ended >= started ? ended - started : undefined;
 	// Before the run takes the prompt in, and while a stop reaches it, the state says more than the time.
 	if (phase === "pending" || phase === "starting" || phase === "stopping") return `${displayLabel[phase]}…`;
-	return formatWorkingDuration(elapsedMs, modelName, !live);
+	if (ended === undefined) return <LiveWorkLabel started={started} modelName={modelName} />;
+	return formatWorkingDuration(
+		started !== undefined && ended >= started ? ended - started : undefined,
+		modelName,
+		true,
+	);
+}
+
+// A leaf of its own, so the second tick re-renders only the label's text.
+function LiveWorkLabel({
+	started,
+	modelName,
+}: {
+	readonly started: number | undefined;
+	readonly modelName: string | undefined;
+}) {
+	const now = useNowSecond();
+	return formatWorkingDuration(started === undefined ? undefined : Math.max(0, now - started), modelName, false);
 }
 
 /** Flags the edges with more to scroll to, so only those fade. */
@@ -995,7 +993,7 @@ function useLivePhaseScroll(el: HTMLDivElement | null, enabled: boolean, steps:
 	const lastScrollTop = useRef(0);
 	const wasEnabled = useRef(false);
 
-	const pin = useCallback(() => {
+	const pin = () => {
 		if (el === null) return;
 		const nearBottom = el.scrollHeight - el.clientHeight - el.scrollTop <= 16;
 		if (el.scrollTop < lastScrollTop.current - 1 && !nearBottom) {
@@ -1003,10 +1001,10 @@ function useLivePhaseScroll(el: HTMLDivElement | null, enabled: boolean, steps:
 		} else if (nearBottom) {
 			stickToBottom.current = true;
 		}
-		if (stickToBottom.current) el.scrollTop = el.scrollHeight;
+		if (stickToBottom.current) el.scrollTo({ top: el.scrollHeight });
 		lastScrollTop.current = el.scrollTop;
 		markScrollEdges(el);
-	}, [el]);
+	};
 
 	useLayoutEffect(() => {
 		if (!enabled) {
@@ -1204,7 +1202,7 @@ function ThinkingWorkRow({
 }) {
 	const text = useStreamed(reply, at);
 	const [open, setOpen] = useState(false);
-	const summary = useMemo(() => proseSummary(text) || "Thinking", [text]);
+	const summary = proseSummary(text) || "Thinking";
 	return (
 		<div className="flex min-w-0 flex-col">
 			<button
@@ -1232,7 +1230,7 @@ function ThinkingWorkRow({
 
 function NoteWorkRow({ text }: { readonly text: string }) {
 	const [open, setOpen] = useState(false);
-	const summary = useMemo(() => proseSummary(text), [text]);
+	const summary = proseSummary(text);
 	return (
 		<div className="flex min-w-0 flex-col">
 			<button
diff --git a/apps/web/src/widgets/threads/common.ts b/apps/web/src/widgets/threads/common.ts
new file mode 100644
index 00000000..8b93981e
--- /dev/null
+++ b/apps/web/src/widgets/threads/common.ts
@@ -0,0 +1,18 @@
+import type { ListedThread } from "@codeworksh/contract";
+import { toast } from "sonner";
+
+import type { ThreadRef } from "../session/schema";
+
+export const failed = (error: unknown) =>
+	toast.error("Not saved", {
+		description:
+			typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
+				? error.message
+				: undefined,
+	});
+
+/** The thread as the session view names it: its session alone for the main thread. */
+export const refOf = (thread: ListedThread): ThreadRef =>
+	thread.originKind === "main"
+		? { sessionId: thread.sessionId }
+		: { sessionId: thread.sessionId, threadId: thread.id };
diff --git a/apps/web/src/widgets/threads/data.ts b/apps/web/src/widgets/threads/data.ts
new file mode 100644
index 00000000..656d933f
--- /dev/null
+++ b/apps/web/src/widgets/threads/data.ts
@@ -0,0 +1,171 @@
+import {
+	type AllThreads,
+	type Grouping,
+	type ListedThread,
+	PERSONAL_ORGANIZATION,
+	type Position,
+	readTopics,
+	SyncChanged,
+	syncTopics,
+	type ThreadList,
+	type ThreadsBy,
+} from "@codeworksh/contract";
+import type { Event } from "@codeworksh/widget/event";
+import { Effect, Option, Schedule, Schema, Stream } from "effect";
+import { Atom } from "effect/reactivity";
+
+import { keeper } from "../../kernel/keep";
+import { Server } from "../../kernel/rpc";
+
+const decodeChanged = Schema.decodeUnknownOption(SyncChanged);
+
+/** Whether an event changes what the list shows: a thread, its project, a removed session, or any desktop edit. */
+const touches = (event: Event) =>
+	event.topic !== syncTopics.changed ||
+	Option.exists(
+		decodeChanged(event.payload),
+		(notice) => notice.thread.length + notice.project.length + notice.removed.length > 0,
+	);
+
+/** The organization's threads split by `by`: read when subscribed, and again after each change to them. */
+export const threadsAtom = Atom.family((by: ThreadsBy) =>
+	Server.runtime.atom(
+		Stream.unwrap(
+			Server.use((client) =>
+				Effect.succeed(
+					client("event.subscribe", { topics: readTopics.threads }).pipe(
+						// `Synced` first, once subscribed: the first read can miss no change.
+						Stream.filter((item) => "_tag" in item || touches(item)),
+						Stream.debounce("50 millis"),
+						Stream.mapEffect(() => client("threads.list", { organizationId: PERSONAL_ORGANIZATION, by })),
+						Stream.mapAccum(
+							(): AllThreads | undefined => undefined,
+							(previous, next) => {
+								const kept = reuse(previous, next);
+								return [kept, [kept]] as const;
+							},
+						),
+					),
+				),
+			),
+		).pipe(Stream.retry(Schedule.spaced("1 second"))),
+	),
+);
+
+const sameThread = (a: ListedThread, b: ListedThread) =>
+	a.title === b.title &&
+	a.runState === b.runState &&
+	a.status === b.status &&
+	a.priority === b.priority &&
+	a.groupingId === b.groupingId &&
+	a.ordering === b.ordering &&
+	a.color === b.color &&
+	a.updatedAt === b.updatedAt &&
+	a.sessionId === b.sessionId &&
+	a.originKind === b.originKind &&
+	a.machine.id === b.machine.id &&
+	a.machine.name === b.machine.name &&
+	a.project.id === b.project.id &&
+	a.project.name === b.project.name;
+
+const sameGroup = (a: Grouping, b: Grouping) =>
+	a.name === b.name && a.color === b.color && a.ordering === b.ordering && a.organizationId === b.organizationId;
+
+/**
+ * `next` with every thread and group that did not change kept as the object `previous` had, so the
+ * rows drawing them skip rendering after a read: each read decodes all of them anew.
+ */
+const reuse = (previous: AllThreads | undefined, next: AllThreads): AllThreads => {
+	if (previous === undefined) return next;
+	const thread = keeper(
+		previous.lists.flatMap((list) => list.threads),
+		(item) => item.id,
+		sameThread,
+	);
+	const group = keeper(previous.groups, (item) => item.id, sameGroup);
+	return {
+		lists: next.lists.map((list) => ({ ...list, threads: list.threads.map(thread) })),
+		groups: next.groups.map(group),
+	};
+};
+
+export const setStatus = Server.mutation("threads.setStatus");
+export const setPriority = Server.mutation("threads.setPriority");
+export const setGroup = Server.mutation("threads.setGroup");
+export const setColor = Server.mutation("threads.setColor");
+export const moveThread = Server.mutation("threads.move");
+export const createGroup = Server.mutation("groups.create");
+export const updateGroup = Server.mutation("groups.update");
+export const moveGroup = Server.mutation("groups.move");
+export const deleteGroup = Server.mutation("groups.delete");
+
+/** What names a list: its status, priority or group (`none` is ungrouped). */
+export const listKey = (list: ThreadList) =>
+	list._tag === "Status"
+		? list.status
+		: list._tag === "Priority"
+			? String(list.priority)
+			: (list.groupingId ?? "none");
+
+/** Whether `thread` belongs in `list`, by the column the list splits by. */
+const holds = (list: ThreadList, thread: ListedThread) =>
+	list._tag === "Status"
+		? list.status === thread.status
+		: list._tag === "Priority"
+			? list.priority === thread.priority
+			: list.groupingId === thread.groupingId;
+
+/** `all` with one thread changed, each list re-split and in `ordering`: drawn while the writes go out. */
+export const patched = (all: AllThreads, threadId: string, patch: Partial<ListedThread>): AllThreads => {
+	const thread = all.lists.flatMap((list) => list.threads).find((candidate) => candidate.id === threadId);
+	if (thread === undefined) return all;
+	const next = { ...thread, ...patch };
+	return {
+		...all,
+		lists: all.lists.map((list) => {
+			const threads = list.threads.filter((candidate) => candidate.id !== threadId);
+			if (!holds(list, next)) return { ...list, threads };
+			return { ...list, threads: [...threads, next].toSorted((a, b) => a.ordering - b.ordering) };
+		}),
+	};
+};
+
+/** Where `to` puts a thread in the whole order, as the server computes it. */
+export const orderingAt = (all: ReadonlyArray<ListedThread>, to: Position) => {
+	if (to === "first") return (all[0]?.ordering ?? 0) - 1;
+	if (to === "last") return (all.at(-1)?.ordering ?? 0) + 1;
+	const of = (id: string) => all.find((thread) => thread.id === id)?.ordering ?? 0;
+	return (of(to.after) + of(to.before)) / 2;
+};
+
+/**
+ * Where a thread goes to land at `index` of `list`, both without it. Every view splits one order, so
+ * at a list's edge the neighbour beyond is the next thread in the whole order (`all`, in `ordering`,
+ * without it too). An empty list needs no move.
+ */
+export const threadPosition = (
+	all: ReadonlyArray<ListedThread>,
+	list: ReadonlyArray<ListedThread>,
+	index: number,
+): Position | undefined => {
+	const after = list[index - 1];
+	const before = list[index];
+	if (after !== undefined && before !== undefined) return { after: after.id, before: before.id };
+	if (before !== undefined) {
+		const beyond = all[all.findIndex((thread) => thread.id === before.id) - 1];
+		return beyond === undefined ? "first" : { after: beyond.id, before: before.id };
+	}
+	if (after !== undefined) {
+		const beyond = all[all.findIndex((thread) => thread.id === after.id) + 1];
+		return beyond === undefined ? "last" : { after: after.id, before: beyond.id };
+	}
+	return undefined;
+};
+
+/** Where a group goes to land at `index` of `groups`, without it. */
+export const groupPosition = (groups: ReadonlyArray<Grouping>, index: number): Position => {
+	const after = groups[index - 1];
+	const before = groups[index];
+	if (after !== undefined && before !== undefined) return { after: after.id, before: before.id };
+	return before !== undefined ? "first" : "last";
+};
diff --git a/apps/web/src/widgets/threads/header.tsx b/apps/web/src/widgets/threads/header.tsx
new file mode 100644
index 00000000..4d845324
--- /dev/null
+++ b/apps/web/src/widgets/threads/header.tsx
@@ -0,0 +1,162 @@
+import { useAtomSet } from "@effect/atom-react";
+import type { Grouping } from "@codeworksh/contract";
+import { ChevronRight, GripVertical, MoreHorizontal } from "lucide-react";
+import type { DragEvent, ReactNode } from "react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { failed } from "./common";
+import { deleteGroup, updateGroup } from "./data";
+import { COLORS, colorName, Dot, PRIORITY, PriorityIcon, STATUS, StatusIcon } from "./marks";
+import type { Section } from "./options";
+
+/** What a section is called and how it is marked. */
+export const heading = (section: Section, groups: ReadonlyMap<string, Grouping>): { name: string; mark: ReactNode } => {
+	const list = section.list;
+	if (list === undefined) return { name: "All Threads", mark: null };
+	if (list._tag === "Status") return { name: STATUS[list.status].label, mark: <StatusIcon status={list.status} /> };
+	if (list._tag === "Priority")
+		return { name: PRIORITY[list.priority].label, mark: <PriorityIcon priority={list.priority} /> };
+	const group = list.groupingId === null ? undefined : groups.get(list.groupingId);
+	return { name: group?.name ?? "No Group", mark: <Dot color={group?.color ?? null} /> };
+};
+
+export function SectionHeader({
+	section,
+	groups,
+	collapsed,
+	onCollapse,
+	renaming,
+	onRename,
+	onRenamed,
+	onDragStart,
+	onDragOver,
+	onDrop,
+}: {
+	readonly section: Section;
+	readonly groups: ReadonlyMap<string, Grouping>;
+	readonly collapsed: boolean;
+	readonly onCollapse: () => void;
+	readonly renaming: string | undefined;
+	readonly onRename: (groupingId: string) => void;
+	readonly onRenamed: () => void;
+	readonly onDragStart: () => void;
+	readonly onDragOver: (event: DragEvent) => void;
+	readonly onDrop: (event: DragEvent) => void;
+}) {
+	const update = useAtomSet(updateGroup, { mode: "promise" });
+	const remove = useAtomSet(deleteGroup, { mode: "promise" });
+	const { name, mark } = heading(section, groups);
+	const list = section.list;
+	const group = list?._tag === "Grouping" && list.groupingId !== null ? groups.get(list.groupingId) : undefined;
+	const rename = (value: string) => {
+		onRenamed();
+		if (group !== undefined && value.trim() !== "" && value.trim() !== group.name)
+			void update({ payload: { groupingId: group.id, name: value } }).catch(failed);
+	};
+	return (
+		<div
+			draggable={group !== undefined && renaming !== group.id}
+			onDragStart={(event) => {
+				event.dataTransfer.effectAllowed = "move";
+				onDragStart();
+			}}
+			onDragOver={onDragOver}
+			onDrop={onDrop}
+			className="group/header sticky top-0 z-20 flex h-9 items-center gap-2 border-b border-edge/50 bg-[color-mix(in_oklab,var(--color-frame),var(--color-ink)_4%)] pr-2 pl-1 text-xs font-medium"
+		>
+			<button
+				type="button"
+				tabIndex={-1}
+				aria-label={collapsed ? `Expand ${name}` : `Collapse ${name}`}
+				aria-expanded={!collapsed}
+				onClick={onCollapse}
+				className="grid size-5 place-items-center rounded-md text-ink-muted hover:bg-ink/8"
+			>
+				<ChevronRight
+					className={`size-3.5 transition-transform motion-reduce:transition-none ${collapsed ? "" : "rotate-90"}`}
+					aria-hidden
+				/>
+			</button>
+			{mark}
+			{group !== undefined && renaming === group.id ? (
+				<input
+					// A new or renamed group is named at once. Focused a frame after mount: picked from its menu,
+					// the field appears while the closing menu still holds focus.
+					ref={(input) => {
+						if (input !== null)
+							requestAnimationFrame(() => {
+								input.focus();
+								input.select();
+							});
+					}}
+					defaultValue={group.name}
+					aria-label="Group name"
+					onBlur={(event) => rename(event.currentTarget.value)}
+					onKeyDown={(event) => {
+						event.stopPropagation();
+						if (event.key === "Enter") event.currentTarget.blur();
+						if (event.key === "Escape") onRenamed();
+					}}
+					className="min-w-0 rounded-sm bg-ink/5 px-1 outline-none focus-visible:ring-1 focus-visible:ring-ring"
+				/>
+			) : (
+				<span className="truncate" onDoubleClick={() => group !== undefined && onRename(group.id)}>
+					{name}
+				</span>
+			)}
+			<span className="text-ink-muted tabular-nums">{section.threads.length}</span>
+			{group !== undefined && (
+				<>
+					<GripVertical
+						className="ml-auto size-3.5 cursor-grab text-ink-muted opacity-0 group-hover/header:opacity-100"
+						aria-hidden
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger
+							aria-label={`${group.name} actions`}
+							className="grid size-5 place-items-center rounded-md text-ink-muted opacity-0 group-hover/header:opacity-100 hover:bg-ink/8 focus-visible:opacity-100 data-[state=open]:opacity-100"
+						>
+							<MoreHorizontal className="size-3.5" aria-hidden />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent
+							align="end"
+							// Rename opens a field that takes focus; the menu must not take it back as it closes.
+							onCloseAutoFocus={(event) => event.preventDefault()}
+						>
+							<DropdownMenuItem className="text-xs" onSelect={() => onRename(group.id)}>
+								Rename
+							</DropdownMenuItem>
+							<DropdownMenuSeparator />
+							<div className="flex flex-wrap gap-1 px-2 py-1" role="group" aria-label="Color">
+								{[...COLORS.map((color) => color.hex), null].map((color) => (
+									<DropdownMenuItem
+										key={color ?? "none"}
+										aria-label={color === null ? "No Color" : colorName(color)}
+										onSelect={() => void update({ payload: { groupingId: group.id, color } }).catch(failed)}
+										className="grid size-6 min-h-0 place-items-center p-0"
+									>
+										<Dot color={color} />
+									</DropdownMenuItem>
+								))}
+							</div>
+							<DropdownMenuSeparator />
+							<DropdownMenuItem
+								variant="destructive"
+								className="text-xs"
+								onSelect={() => void remove({ payload: { groupingId: group.id } }).catch(failed)}
+							>
+								Delete group
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</>
+			)}
+		</div>
+	);
+}
diff --git a/apps/web/src/widgets/threads/index.ts b/apps/web/src/widgets/threads/index.ts
new file mode 100644
index 00000000..6fcba8b7
--- /dev/null
+++ b/apps/web/src/widgets/threads/index.ts
@@ -0,0 +1,22 @@
+import { ListTodo } from "lucide-react";
+import { Schema } from "effect";
+
+import { defineWidget } from "@codeworksh/widget/view";
+import { AllThreads } from "./threads";
+
+/** What opens All Threads, from the command palette. */
+const threadsAddress = "codework://threads";
+
+/** Every thread of the organization as a Linear-like list; picking one opens it beside the list. */
+export const threads = defineWidget({
+	kind: "codework:threads",
+	title: "All Threads",
+	icon: ListTodo,
+	minWidth: 360,
+	minHeight: 200,
+	cardinality: "one",
+	priority: "builtin",
+	opens: [threadsAddress],
+	props: Schema.Struct({}),
+	component: AllThreads,
+});
diff --git a/apps/web/src/widgets/threads/marks.tsx b/apps/web/src/widgets/threads/marks.tsx
new file mode 100644
index 00000000..636a2099
--- /dev/null
+++ b/apps/web/src/widgets/threads/marks.tsx
@@ -0,0 +1,152 @@
+import type { Priority, ThreadStatus } from "@codeworksh/contract";
+
+export const STATUS: Record<ThreadStatus, { readonly label: string; readonly color: string }> = {
+	working: { label: "Working", color: "#f0bf00" },
+	attention: { label: "Needs Attention", color: "#f2994a" },
+	settled: { label: "Settled", color: "#5e6ad2" },
+	cancelled: { label: "Cancelled", color: "#95a2b3" },
+};
+/** In the order the server lists them: what needs the user first. */
+export const STATUSES: ReadonlyArray<ThreadStatus> = ["working", "attention", "settled", "cancelled"];
+
+export const PRIORITY: Record<Priority, { readonly label: string }> = {
+	1: { label: "Urgent" },
+	2: { label: "High" },
+	3: { label: "Medium" },
+	4: { label: "Low" },
+	0: { label: "No Priority" },
+};
+export const PRIORITIES: ReadonlyArray<Priority> = [1, 2, 3, 4, 0];
+
+/** The colors a group or thread can take, Linear's label hues. */
+export const COLORS: ReadonlyArray<{ readonly name: string; readonly hex: string }> = [
+	{ name: "Red", hex: "#e5484d" },
+	{ name: "Orange", hex: "#f76b15" },
+	{ name: "Yellow", hex: "#ffc53d" },
+	{ name: "Green", hex: "#46a758" },
+	{ name: "Teal", hex: "#12a594" },
+	{ name: "Blue", hex: "#0090ff" },
+	{ name: "Purple", hex: "#8e4ec6" },
+	{ name: "Pink", hex: "#d6409f" },
+	{ name: "Gray", hex: "#8b8d98" },
+];
+
+/** A color's name, or the hex of one not in `COLORS`. */
+export const colorName = (hex: string) => COLORS.find((color) => color.hex === hex)?.name ?? hex;
+
+/** A status as Linear draws one: a ring, half full while working, filled with a mark once done. */
+export function StatusIcon({ status }: { readonly status: ThreadStatus }) {
+	const { color } = STATUS[status];
+	return (
+		<svg viewBox="0 0 14 14" className="size-3.5 shrink-0" aria-hidden>
+			{status === "working" && (
+				<>
+					<circle cx="7" cy="7" r="6" fill="none" stroke={color} strokeWidth="1.5" />
+					<path d="M7 3.5a3.5 3.5 0 0 1 0 7z" fill={color} />
+				</>
+			)}
+			{status === "attention" && (
+				<>
+					<circle cx="7" cy="7" r="6" fill="none" stroke={color} strokeWidth="1.5" />
+					<path d="M7 4v3.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
+					<circle cx="7" cy="9.75" r="0.85" fill={color} />
+				</>
+			)}
+			{status === "settled" && (
+				<>
+					<circle cx="7" cy="7" r="6.5" fill={color} />
+					<path
+						d="M4.5 7.2l1.7 1.7 3.4-3.6"
+						fill="none"
+						stroke="var(--color-frame)"
+						strokeWidth="1.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</>
+			)}
+			{status === "cancelled" && (
+				<>
+					<circle cx="7" cy="7" r="6.5" fill={color} />
+					<path d="M5 5l4 4M9 5l-4 4" stroke="var(--color-frame)" strokeWidth="1.5" strokeLinecap="round" />
+				</>
+			)}
+		</svg>
+	);
+}
+
+/** A priority as Linear draws one: three dots for none, a filled box for urgent, else bars. */
+export function PriorityIcon({ priority }: { readonly priority: Priority }) {
+	if (priority === 0)
+		return (
+			<svg viewBox="0 0 14 14" className="size-3.5 shrink-0 text-ink-muted" aria-hidden>
+				{[3, 7, 11].map((x) => (
+					<circle key={x} cx={x} cy="7" r="1" fill="currentColor" />
+				))}
+			</svg>
+		);
+	if (priority === 1)
+		return (
+			<svg viewBox="0 0 14 14" className="size-3.5 shrink-0" aria-hidden>
+				<rect x="1" y="1" width="12" height="12" rx="3" fill="var(--color-warning)" />
+				<path d="M7 3.75v4" stroke="var(--color-frame)" strokeWidth="1.6" strokeLinecap="round" />
+				<circle cx="7" cy="10" r="0.9" fill="var(--color-frame)" />
+			</svg>
+		);
+	const filled = 5 - priority;
+	return (
+		<svg viewBox="0 0 14 14" className="size-3.5 shrink-0 text-ink-secondary" aria-hidden>
+			{[0, 1, 2].map((bar) => (
+				<rect
+					key={bar}
+					x={1.5 + bar * 4}
+					y={8 - bar * 3}
+					width="3"
+					height={5 + bar * 3}
+					rx="1"
+					fill="currentColor"
+					opacity={bar < filled ? 1 : 0.3}
+				/>
+			))}
+		</svg>
+	);
+}
+
+export function Dot({ color }: { readonly color: string | null }) {
+	return (
+		<span
+			aria-hidden
+			className="size-2.5 shrink-0 rounded-full border border-ink/20"
+			style={color === null ? undefined : { backgroundColor: color, borderColor: color }}
+		/>
+	);
+}
+
+/** A machine as an assignee-like avatar: its initial on a hue of its id. */
+export function MachineAvatar({ name, id }: { readonly name: string; readonly id: string }) {
+	let hash = 0;
+	for (const char of id) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+	return (
+		<span
+			role="img"
+			aria-label={`Machine: ${name}`}
+			title={name}
+			className="grid size-4.5 shrink-0 place-items-center rounded-full text-[9px] font-semibold text-white uppercase"
+			style={{ backgroundColor: `oklch(0.6 0.12 ${Math.abs(hash) % 360})` }}
+		>
+			{name.slice(0, 1)}
+		</span>
+	);
+}
+
+// Built once: formatting through `toLocale*String` builds a formatter per call, per row.
+const thisYear = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" });
+const otherYear = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", year: "numeric" });
+const full = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+
+/** Linear's short date: "Nov 5", with the year once it is not this one. */
+export const shortDate = (time: number) =>
+	(new Date(time).getFullYear() === new Date().getFullYear() ? thisYear : otherYear).format(time);
+
+/** The date and time in full, for a title. */
+export const fullDate = (time: number) => full.format(time);
diff --git a/apps/web/src/widgets/threads/options.ts b/apps/web/src/widgets/threads/options.ts
new file mode 100644
index 00000000..5625b7a6
--- /dev/null
+++ b/apps/web/src/widgets/threads/options.ts
@@ -0,0 +1,103 @@
+import {
+	type AllThreads,
+	type ListedThread,
+	Priority,
+	type ThreadList,
+	type ThreadsBy,
+	ThreadStatus,
+} from "@codeworksh/contract";
+import { useKv } from "@codeworksh/widget/view";
+import { Schema } from "effect";
+import { useEffect, useRef, useState } from "react";
+
+/** How the view is drawn, per instance: its sections, their order, and what it filters to. */
+export const Options = Schema.Struct({
+	group: Schema.Literals(["status", "priority", "grouping", "none"]),
+	order: Schema.Literals(["manual", "updated", "priority"]),
+	/** Status and priority sections with no thread show too; group sections always do. */
+	empty: Schema.Boolean,
+	status: Schema.Array(ThreadStatus),
+	priority: Schema.Array(Priority),
+	machine: Schema.Array(Schema.String),
+});
+export type Options = typeof Options.Type;
+
+const DEFAULTS: Options = {
+	group: "status",
+	order: "manual",
+	empty: false,
+	status: [],
+	priority: [],
+	machine: [],
+};
+
+const decode = Schema.decodeUnknownOption(Options);
+const optionsKey = (instanceId: string) => `widget/${instanceId}/display`;
+
+/** The instance's options, read from kv once and written back shortly after each change. */
+export function useOptions(instanceId: string) {
+	const kv = useKv();
+	const [options, setOptions] = useState<Options>(DEFAULTS);
+	const loaded = useRef(false);
+	useEffect(() => {
+		let active = true;
+		void kv.get(optionsKey(instanceId)).then((saved) => {
+			if (!active) return;
+			const value = decode(saved);
+			if (value._tag === "Some") setOptions(value.value);
+			loaded.current = true;
+		});
+		return () => {
+			active = false;
+		};
+	}, [kv, instanceId]);
+	useEffect(() => {
+		if (!loaded.current) return;
+		const timer = setTimeout(() => void kv.set(optionsKey(instanceId), Schema.encodeSync(Options)(options)), 300);
+		return () => clearTimeout(timer);
+	}, [kv, instanceId, options]);
+	const change = (patch: Partial<Options>) => setOptions((current) => ({ ...current, ...patch }));
+	return [options, change] as const;
+}
+
+/** What the server splits by for these options: ungrouped reads any split and joins it. */
+export const byOf = (options: Options): ThreadsBy => (options.group === "none" ? "status" : options.group);
+
+/** Whether any filter narrows the list. */
+export const filtering = (options: Options) =>
+	options.status.length + options.priority.length + options.machine.length > 0;
+
+/** One section as drawn: a list of the split, or the whole list ungrouped. */
+export interface Section {
+	readonly key: string;
+	readonly list: ThreadList | undefined;
+	readonly threads: ReadonlyArray<ListedThread>;
+}
+
+/** Urgent first, none last, as Linear. */
+const priorityRank = (priority: Priority) => (priority === 0 ? 5 : priority);
+
+const compare: Record<Options["order"], (a: ListedThread, b: ListedThread) => number> = {
+	manual: (a, b) => a.ordering - b.ordering,
+	updated: (a, b) => b.updatedAt - a.updatedAt,
+	priority: (a, b) => priorityRank(a.priority) - priorityRank(b.priority) || a.ordering - b.ordering,
+};
+
+/** `all` as the view draws it: filtered, split into sections, each in the chosen order. */
+export const sections = (all: AllThreads, options: Options, keyOf: (list: ThreadList) => string): Section[] => {
+	const keep = (thread: ListedThread) =>
+		(options.status.length === 0 || options.status.includes(thread.status)) &&
+		(options.priority.length === 0 || options.priority.includes(thread.priority)) &&
+		(options.machine.length === 0 || options.machine.includes(thread.machine.id));
+	const shape = (threads: ReadonlyArray<ListedThread>) => threads.filter(keep).toSorted(compare[options.order]);
+	if (options.group === "none")
+		return [{ key: "all", list: undefined, threads: shape(all.lists.flatMap((list) => list.threads)) }];
+	return all.lists
+		.map((list) => ({ key: keyOf(list), list, threads: shape(list.threads) }))
+		.filter(
+			(section) =>
+				options.empty ||
+				section.threads.length > 0 ||
+				(section.list._tag === "Grouping" && section.list.groupingId !== null),
+		);
+};
diff --git a/apps/web/src/widgets/threads/page.tsx b/apps/web/src/widgets/threads/page.tsx
new file mode 100644
index 00000000..88c21c2a
--- /dev/null
+++ b/apps/web/src/widgets/threads/page.tsx
@@ -0,0 +1,13 @@
+import { ListTodo } from "lucide-react";
+
+import { Page } from "../../shell/page";
+import { AllThreads } from "./threads";
+
+/** All Threads as a page of its own; its display options are kept under the page's own instance. */
+export function ThreadsPage() {
+	return (
+		<Page instanceId="page" title="All Threads" icon={ListTodo}>
+			<AllThreads instanceId="page" props={{}} address={undefined} params={{}} />
+		</Page>
+	);
+}
diff --git a/apps/web/src/widgets/threads/picker.tsx b/apps/web/src/widgets/threads/picker.tsx
new file mode 100644
index 00000000..ebe13e10
--- /dev/null
+++ b/apps/web/src/widgets/threads/picker.tsx
@@ -0,0 +1,130 @@
+import { Check, Plus } from "lucide-react";
+import { type ReactNode, useState } from "react";
+
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandShortcut,
+} from "@/components/ui/command";
+import { Popover, PopoverAnchor, PopoverContent } from "@/components/ui/popover";
+
+export interface Option {
+	readonly value: string;
+	readonly label: string;
+	readonly mark: ReactNode;
+}
+
+/**
+ * The list's one picker, as Linear's: a search field, then the options, the current one checked.
+ * It opens at `anchor`, the row button it belongs to, so no row mounts a popover of its own. With
+ * `digits`, 1-9 pick while the field is empty; with `onCreate`, a name no option has offers to
+ * create it.
+ */
+export function Picker({
+	anchor,
+	placeholder,
+	value,
+	options,
+	heading,
+	onPick,
+	onCreate,
+	digits = false,
+	onClose,
+}: {
+	readonly anchor: HTMLElement;
+	readonly placeholder: string;
+	readonly value: string;
+	readonly options: ReadonlyArray<Option>;
+	readonly heading?: string | undefined;
+	readonly onPick: (value: string) => void;
+	readonly onCreate?: { readonly noun: string; readonly create: (name: string) => void } | undefined;
+	readonly digits?: boolean;
+	readonly onClose: () => void;
+}) {
+	const [search, setSearch] = useState("");
+	const name = search.trim();
+	const creatable =
+		onCreate !== undefined &&
+		name !== "" &&
+		!options.some((option) => option.label.toLowerCase() === name.toLowerCase());
+	const create = () => {
+		onCreate?.create(name);
+		onClose();
+	};
+	const pick = (option: Option) => {
+		if (option.value !== value) onPick(option.value);
+		onClose();
+	};
+	return (
+		<Popover open onOpenChange={(open) => !open && onClose()}>
+			<PopoverAnchor virtualRef={{ current: anchor }} />
+			<PopoverContent
+				align="start"
+				// Opened from a key, many times a day: shown at once, without the popover's zoom.
+				className="w-52 p-0 data-[state=closed]:animate-none data-[state=open]:animate-none"
+				// The list takes focus back, so the keyboard stays on it.
+				onCloseAutoFocus={(event) => event.preventDefault()}
+				// A click on its own button closes it there, rather than here and open again.
+				onInteractOutside={(event) => {
+					if (event.target instanceof Node && anchor.contains(event.target)) event.preventDefault();
+				}}
+				onMouseDown={(event) => event.stopPropagation()}
+			>
+				<Command loop>
+					<CommandInput
+						value={search}
+						onValueChange={setSearch}
+						placeholder={placeholder}
+						aria-label={placeholder}
+						onKeyDown={(event) => {
+							const option =
+								digits && search === "" && /^[1-9]$/.test(event.key)
+									? options[Number(event.key) - 1]
+									: undefined;
+							if (option === undefined) return;
+							event.preventDefault();
+							pick(option);
+						}}
+						className="h-9 text-xs"
+					/>
+					<CommandList>
+						<CommandEmpty className="py-4 text-center text-xs text-ink-muted">No results.</CommandEmpty>
+						<CommandGroup heading={heading} className="[&_[cmdk-group-heading]]:text-2xs">
+							{options.map((option, index) => (
+								<CommandItem
+									key={option.value}
+									value={`${option.label}\u0000${option.value}`}
+									onSelect={() => pick(option)}
+									className="text-xs"
+								>
+									{option.mark}
+									<span className="truncate">{option.label}</span>
+									{option.value === value && <Check className="ml-auto size-3.5" aria-label="Current" />}
+									{digits && index < 9 && (
+										<CommandShortcut className={option.value === value ? "ml-1.5" : undefined}>
+											{index + 1}
+										</CommandShortcut>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+						{creatable && (
+							<CommandGroup forceMount>
+								<CommandItem forceMount value={`\u0000create ${name}`} onSelect={create} className="text-xs">
+									<Plus aria-hidden />
+									<span className="truncate">
+										Create {onCreate.noun} <span className="text-ink-muted">“{name}”</span>
+									</span>
+								</CommandItem>
+							</CommandGroup>
+						)}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
diff --git a/apps/web/src/widgets/threads/row.tsx b/apps/web/src/widgets/threads/row.tsx
new file mode 100644
index 00000000..a04af05d
--- /dev/null
+++ b/apps/web/src/widgets/threads/row.tsx
@@ -0,0 +1,171 @@
+import type { Grouping, ListedThread } from "@codeworksh/contract";
+import { isMac } from "@codeworksh/widget/view";
+import { Box, Tag } from "lucide-react";
+import { type DragEvent, memo, type MouseEvent, type ReactNode } from "react";
+
+import { useRunDisplay } from "../session/display";
+import { RunMark } from "../session/run";
+import { threadKey } from "../session/schema";
+import { refOf } from "./common";
+import {
+	colorName,
+	Dot,
+	fullDate,
+	MachineAvatar,
+	PRIORITY,
+	PriorityIcon,
+	STATUS,
+	StatusIcon,
+	shortDate,
+} from "./marks";
+
+/** The pickers a row has, each opened by its key from the keyboard. */
+export type Picker = "status" | "priority" | "group" | "color";
+export const PICKER_KEYS: Record<string, Picker> = { s: "status", p: "priority", l: "group", c: "color" };
+
+/** What a row asks of its list; one object for every row, so a memoized row keeps it across renders. */
+export interface RowActions {
+	readonly select: (threadId: string) => void;
+	readonly open: (thread: ListedThread, event: MouseEvent) => void;
+	readonly menu: (threadId: string, kind: Picker) => void;
+	readonly dragStart: (threadId: string) => void;
+	readonly over: (event: DragEvent, sectionKey: string, at: number) => void;
+}
+
+/**
+ * One thread. Memoized and given only values and the shared `actions`, so a key press, a drag over
+ * another row or a read that left this thread alone renders nothing here.
+ */
+export const Row = memo(function Row({
+	thread,
+	grouping,
+	showMachine,
+	selected,
+	dragging,
+	above,
+	sectionKey,
+	at,
+	actions,
+}: {
+	readonly thread: ListedThread;
+	readonly grouping: Grouping | undefined;
+	readonly showMachine: boolean;
+	readonly selected: boolean;
+	readonly dragging: boolean;
+	/** The drop would land just above it. */
+	readonly above: boolean;
+	readonly sectionKey: string;
+	readonly at: number;
+	readonly actions: RowActions;
+}) {
+	const pick = (kind: Picker, label: string, shortcut: string, icon: ReactNode, narrow = false) => (
+		<button
+			type="button"
+			tabIndex={-1}
+			data-picker={kind}
+			aria-label={label}
+			title={`${label} (${shortcut})`}
+			onClick={() => actions.menu(thread.id, kind)}
+			className={`flex h-6 shrink-0 items-center justify-center rounded-md text-ink-muted outline-none hover:bg-ink/8 hover:text-ink ${
+				narrow ? "w-3" : "min-w-6 px-1"
+			}`}
+		>
+			{icon}
+		</button>
+	);
+	return (
+		<li
+			draggable
+			onDragStart={(event) => {
+				event.dataTransfer.effectAllowed = "move";
+				event.dataTransfer.setData("text/plain", thread.title);
+				actions.dragStart(thread.id);
+			}}
+			onDragOver={(event) => actions.over(event, sectionKey, at)}
+			onMouseDown={() => actions.select(thread.id)}
+			id={`thread-${thread.id}`}
+			role="option"
+			data-thread={thread.id}
+			aria-selected={selected}
+			// Off-screen rows skip layout and paint (it clips, so the drop line sits inside), so a long list needs no virtualizer.
+			className={`relative [content-visibility:auto] [contain-intrinsic-size:auto_--spacing(9)] ${dragging ? "opacity-40" : ""}`}
+		>
+			{above && <span aria-hidden className="absolute inset-x-3 top-0 z-10 h-0.5 rounded bg-ring" />}
+			<div
+				className={`group/row flex h-9 items-center gap-2 border-b border-edge/50 pr-3 pl-2 ${
+					selected ? "bg-ink/7" : "hover:bg-ink/4"
+				}`}
+			>
+				{pick(
+					"color",
+					`Color: ${thread.color === null ? "Session Color" : colorName(thread.color)}`,
+					"C",
+					<span
+						aria-hidden
+						className={`h-4 w-1 rounded-full ${thread.color === null ? "bg-ink/20 opacity-0 group-hover/row:opacity-100" : ""}`}
+						style={thread.color === null ? undefined : { backgroundColor: thread.color }}
+					/>,
+					true,
+				)}
+				{pick(
+					"priority",
+					`Priority: ${PRIORITY[thread.priority].label}`,
+					"P",
+					<PriorityIcon priority={thread.priority} />,
+				)}
+				{pick("status", `Status: ${STATUS[thread.status].label}`, "S", <StatusIcon status={thread.status} />)}
+				<button
+					type="button"
+					tabIndex={-1}
+					title={`Open thread (${isMac ? "⌘" : "Ctrl"}-click or middle-click opens a new one)`}
+					onClick={(event) => actions.open(thread, event)}
+					onAuxClick={(event) => actions.open(thread, event)}
+					className="flex min-w-0 flex-1 items-center gap-2 text-left outline-none"
+				>
+					<span className="min-w-0 truncate text-body text-ink">{thread.title}</span>
+					{thread.originKind !== "main" && (
+						<span className="shrink-0 rounded-sm bg-ink/6 px-1 text-2xs text-ink-muted">{thread.originKind}</span>
+					)}
+					<Run thread={thread} />
+				</button>
+				{pick(
+					"group",
+					`Group: ${grouping?.name ?? "No Group"}`,
+					"L",
+					grouping === undefined ? (
+						<Tag className="size-3.5 opacity-0 group-hover/row:opacity-100" strokeWidth={1.75} aria-hidden />
+					) : (
+						<span className="flex max-w-32 items-center gap-1.5 rounded-full border border-edge px-2 py-0.5 text-2xs text-ink-secondary">
+							<Dot color={grouping.color} />
+							<span className="truncate">{grouping.name}</span>
+						</span>
+					),
+				)}
+				<span
+					title={thread.project.name}
+					className="hidden max-w-36 shrink-0 items-center gap-1.5 rounded-full border border-edge px-2 py-0.5 text-2xs text-ink-secondary @2xl:flex"
+				>
+					<Box className="size-3 shrink-0" strokeWidth={1.75} aria-hidden />
+					<span className="truncate">{thread.project.name}</span>
+				</span>
+				{showMachine && <MachineAvatar id={thread.machine.id} name={thread.machine.name} />}
+				<span
+					title={fullDate(thread.updatedAt)}
+					className="w-12 shrink-0 text-right text-2xs text-ink-muted tabular-nums"
+				>
+					{shortDate(thread.updatedAt)}
+				</span>
+			</div>
+		</li>
+	);
+});
+
+/** The run's mark on its own, so the run's client state renders this alone, not the row. */
+function Run({ thread }: { readonly thread: ListedThread }) {
+	const display = useRunDisplay([{ key: threadKey(refOf(thread)), runState: thread.runState }]);
+	return (
+		<span className="text-ink-muted">
+			<RunMark display={display} />
+		</span>
+	);
+}
diff --git a/apps/web/src/widgets/threads/threads.tsx b/apps/web/src/widgets/threads/threads.tsx
new file mode 100644
index 00000000..28596576
--- /dev/null
+++ b/apps/web/src/widgets/threads/threads.tsx
@@ -0,0 +1,524 @@
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import {
+	type AllThreads as Board,
+	type ListedThread,
+	PERSONAL_ORGANIZATION,
+	type Priority,
+} from "@codeworksh/contract";
+import { isMac, openMode, useShell, type WidgetProps } from "@codeworksh/widget/view";
+import { AsyncResult } from "effect/reactivity";
+import { type DragEvent, type KeyboardEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import { threadAddress } from "../session/address";
+import { failed, refOf } from "./common";
+import {
+	createGroup,
+	groupPosition,
+	listKey,
+	moveGroup,
+	moveThread,
+	orderingAt,
+	patched,
+	setColor,
+	setGroup,
+	setPriority,
+	setStatus,
+	threadPosition,
+	threadsAtom,
+} from "./data";
+import { heading, SectionHeader } from "./header";
+import { byOf, filtering, type Options, type Section, sections, useOptions } from "./options";
+import { COLORS, Dot, PRIORITIES, PRIORITY, PriorityIcon, STATUS, STATUSES, StatusIcon } from "./marks";
+import { Picker } from "./picker";
+import { PICKER_KEYS, type Picker as Kind, Row, type RowActions } from "./row";
+import { Toolbar } from "./toolbar";
+
+/**
+ * The organization's threads as a Linear-like list: sections by status, priority or group, each in
+ * the chosen order. Dragging a thread moves it in the one manual order, and into the section it is
+ * dropped on.
+ */
+export function AllThreads({ instanceId }: WidgetProps<unknown>) {
+	const [options, change] = useOptions(instanceId);
+	const result = useAtomValue(threadsAtom(byOf(options)));
+	const create = useAtomSet(createGroup, { mode: "promise" });
+	const [renaming, setRenaming] = useState<string>();
+	// Drawn at once while the writes go out, until the read after them arrives.
+	const [optimistic, setOptimistic] = useState<{ readonly base: Board; readonly value: Board }>();
+	const board = AsyncResult.isSuccess(result) ? result.value : undefined;
+	const shown = board !== undefined && optimistic?.base === board ? optimistic.value : board;
+	const drawn = shown === undefined ? [] : sections(shown, options, listKey);
+	const machines = [
+		...new Map(
+			shown?.lists.flatMap((list) => list.threads.map((thread) => [thread.machine.id, thread.machine])),
+		).values(),
+	];
+	const newGroup = () =>
+		create({ payload: { organizationId: PERSONAL_ORGANIZATION, name: "New Group" } }).then(
+			(group) => setRenaming(group.id),
+			failed,
+		);
+
+	return (
+		<div className="@container flex h-full flex-col">
+			<Toolbar
+				options={options}
+				onChange={change}
+				machines={machines}
+				count={drawn.reduce((sum, section) => sum + section.threads.length, 0)}
+				onNewGroup={() => void newGroup()}
+			/>
+			{AsyncResult.isFailure(result) && board === undefined ? (
+				<p className="p-3 text-ink-muted">Could not load the threads.</p>
+			) : shown === undefined ? null : (
+				<List
+					board={shown}
+					sections={drawn}
+					options={options}
+					showMachine={machines.length > 1}
+					onOptimistic={(value) => board !== undefined && setOptimistic(value && { base: board, value })}
+					renaming={renaming}
+					onRename={setRenaming}
+					onRenamed={() => setRenaming(undefined)}
+				/>
+			)}
+		</div>
+	);
+}
+
+type Drag = { readonly kind: "thread" | "group"; readonly id: string };
+/** Where a dragged thread lands: a section, and an index in it (without the thread) when the order is manual. */
+type Drop = { readonly key: string; readonly index: number };
+
+function List({
+	board,
+	sections,
+	options,
+	showMachine,
+	onOptimistic,
+	renaming,
+	onRename,
+	onRenamed,
+}: {
+	readonly board: Board;
+	readonly sections: ReadonlyArray<Section>;
+	readonly options: Options;
+	readonly showMachine: boolean;
+	readonly onOptimistic: (value: Board | undefined) => void;
+	readonly renaming: string | undefined;
+	readonly onRename: (groupingId: string) => void;
+	readonly onRenamed: () => void;
+}) {
+	const shell = useShell();
+	const status = useAtomSet(setStatus, { mode: "promise" });
+	const priority = useAtomSet(setPriority, { mode: "promise" });
+	const group = useAtomSet(setGroup, { mode: "promise" });
+	const move = useAtomSet(moveThread, { mode: "promise" });
+	const reorder = useAtomSet(moveGroup, { mode: "promise" });
+	const [drag, setDrag] = useState<Drag>();
+	const [drop, setDrop] = useState<Drop>();
+	const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+	const [selected, setSelected] = useState<string>();
+	const [menu, setMenu] = useState<{ readonly id: string; readonly kind: Kind; readonly anchor: HTMLElement }>();
+	const body = useRef<HTMLDivElement>(null);
+	const manual = options.order === "manual";
+	const groups = new Map(board.groups.map((candidate) => [candidate.id, candidate]));
+	const visible = sections.flatMap((section) => (collapsed.has(section.key) ? [] : section.threads));
+	/** Every thread in the one manual order, sorted only when a drop needs it. */
+	const ordered = () => board.lists.flatMap((list) => list.threads).toSorted((a, b) => a.ordering - b.ordering);
+
+	/** Opens `kind` at its button in the thread's row, or closes it when it is the one open. */
+	const openMenu = (id: string, kind: Kind) => {
+		setSelected(id);
+		if (menu?.id === id && menu.kind === kind) return setMenu(undefined);
+		const anchor = body.current?.querySelector<HTMLElement>(
+			`[data-thread="${CSS.escape(id)}"] [data-picker="${kind}"]`,
+		);
+		if (anchor !== null && anchor !== undefined) setMenu({ id, kind, anchor });
+	};
+
+	// A row that moved to another section while its picker is open is a new button: follow it, or
+	// close when it is gone (filtered out, collapsed).
+	useLayoutEffect(() => {
+		if (menu === undefined || menu.anchor.isConnected) return;
+		const anchor = body.current?.querySelector<HTMLElement>(
+			`[data-thread="${CSS.escape(menu.id)}"] [data-picker="${menu.kind}"]`,
+		);
+		setMenu(anchor === null || anchor === undefined ? undefined : { ...menu, anchor });
+	});
+
+	// Every drag ends here, inside the list or out (Escape, a drop elsewhere).
+	useEffect(() => {
+		const clear = () => {
+			setDrag(undefined);
+			setDrop(undefined);
+		};
+		window.addEventListener("dragend", clear);
+		return () => window.removeEventListener("dragend", clear);
+	}, []);
+
+	// A closed picker hands the keyboard back to the list.
+	const hadMenu = useRef(false);
+	useEffect(() => {
+		if (menu === undefined && hadMenu.current) body.current?.focus();
+		hadMenu.current = menu !== undefined;
+	}, [menu]);
+	useEffect(() => {
+		if (selected === undefined) return;
+		body.current?.querySelector(`[data-thread="${CSS.escape(selected)}"]`)?.scrollIntoView({ block: "nearest" });
+	}, [selected]);
+
+	const open = (thread: ListedThread, mode: "new" | "replace") => shell.open(threadAddress(refOf(thread)), { mode });
+
+	const keyDown = (event: KeyboardEvent) => {
+		if (event.target instanceof HTMLInputElement || event.altKey) return;
+		const at = visible.findIndex((thread) => thread.id === selected);
+		const step = (by: number) => {
+			event.preventDefault();
+			const next =
+				visible[at === -1 ? (by > 0 ? 0 : visible.length - 1) : Math.max(0, Math.min(visible.length - 1, at + by))];
+			if (next !== undefined) setSelected(next.id);
+		};
+		if (event.key === "ArrowDown" || event.key === "j") return step(1);
+		if (event.key === "ArrowUp" || event.key === "k") return step(-1);
+		const thread = visible[at];
+		if (thread === undefined) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			return open(thread, (isMac ? event.metaKey : event.ctrlKey) ? "new" : "replace");
+		}
+		if (event.key === "Escape") return setSelected(undefined);
+		const kind = event.metaKey || event.ctrlKey ? undefined : PICKER_KEYS[event.key.toLowerCase()];
+		if (kind !== undefined) {
+			event.preventDefault();
+			openMenu(thread.id, kind);
+		}
+	};
+
+	/** Puts the thread in `section`: the setter of the column the view splits by. */
+	const assign = (thread: ListedThread, section: Section) => {
+		const list = section.list;
+		if (list === undefined) return Promise.resolve();
+		return list._tag === "Status"
+			? status({ payload: { threadId: thread.id, status: list.status } })
+			: list._tag === "Priority"
+				? priority({ payload: { threadId: thread.id, priority: list.priority } })
+				: group({ payload: { threadId: thread.id, groupingId: list.groupingId } });
+	};
+
+	const dropThread = async (target: Section, index: number) => {
+		const all = ordered();
+		const thread = all.find((candidate) => candidate.id === drag?.id);
+		if (thread === undefined) return;
+		const source = sections.find((section) => section.threads.some((candidate) => candidate.id === thread.id));
+		const same = source?.key === target.key;
+		if (same && (!manual || source.threads.findIndex((candidate) => candidate.id === thread.id) === index)) return;
+		const others = all.filter((candidate) => candidate.id !== thread.id);
+		const to = manual
+			? threadPosition(
+					others,
+					target.threads.filter((candidate) => candidate.id !== thread.id),
+					index,
+				)
+			: undefined;
+		const list = target.list;
+		onOptimistic(
+			patched(board, thread.id, {
+				...(same || list === undefined
+					? {}
+					: list._tag === "Status"
+						? { status: list.status }
+						: list._tag === "Priority"
+							? { priority: list.priority }
+							: { groupingId: list.groupingId }),
+				...(to === undefined ? {} : { ordering: orderingAt(others, to) }),
+			}),
+		);
+		try {
+			if (!same) await assign(thread, target);
+			if (to !== undefined) await move({ payload: { threadId: thread.id, to } });
+		} catch (error) {
+			onOptimistic(undefined);
+			failed(error);
+		}
+	};
+
+	/** Drops the dragged group above or below the group whose header is under the pointer. */
+	const dropGroup = (event: DragEvent, onto: string) => {
+		const dragged = drag?.id;
+		const others = board.groups.filter((candidate) => candidate.id !== dragged);
+		const rect = event.currentTarget.getBoundingClientRect();
+		const index =
+			others.findIndex((candidate) => candidate.id === onto) + (event.clientY > rect.top + rect.height / 2 ? 1 : 0);
+		if (
+			dragged === undefined ||
+			dragged === onto ||
+			board.groups.findIndex((candidate) => candidate.id === dragged) === index
+		)
+			return;
+		void reorder({ payload: { groupingId: dragged, to: groupPosition(others, index) } }).catch(failed);
+	};
+
+	/** Where a drag over a row of `section` at `at` lands, as an index of the section without the dragged thread. */
+	const over = (event: DragEvent, sectionKey: string, at: number) => {
+		const section = sections.find((candidate) => candidate.key === sectionKey);
+		if (drag?.kind !== "thread" || section === undefined) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const rect = event.currentTarget.getBoundingClientRect();
+		const from = section.threads.findIndex((candidate) => candidate.id === drag.id);
+		const index = at + (event.clientY > rect.top + rect.height / 2 ? 1 : 0);
+		const next = { key: section.key, index: from !== -1 && from < index ? index - 1 : index };
+		if (drop?.key !== next.key || drop.index !== next.index) setDrop(next);
+	};
+
+	const end = () => {
+		setDrag(undefined);
+		setDrop(undefined);
+	};
+
+	// Rows get one actions object for good; it calls this render's handlers, so a memoized row never
+	// renders again just for a new closure.
+	const latest = useRef({ openMenu, over, open });
+	useLayoutEffect(() => {
+		latest.current = { openMenu, over, open };
+	});
+	const actions = useMemo<RowActions>(
+		() => ({
+			select: (id) => setSelected(id),
+			open: (thread, event) => {
+				if (event.button <= 1) latest.current.open(thread, openMode(event));
+			},
+			menu: (id, kind) => latest.current.openMenu(id, kind),
+			dragStart: (id) => setDrag({ kind: "thread", id }),
+			over: (event, sectionKey, at) => latest.current.over(event, sectionKey, at),
+		}),
+		[],
+	);
+
+	if (
+		sections.every((section) => section.threads.length === 0) &&
+		!sections.some((section) => section.list?._tag === "Grouping")
+	)
+		return (
+			<p className="p-6 text-center text-xs text-ink-muted">
+				{filtering(options) ? "No threads match the filters." : "No threads yet."}
+			</p>
+		);
+
+	return (
+		<div
+			ref={body}
+			// oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- the list takes the keyboard, as Linear's does.
+			tabIndex={0}
+			role="listbox"
+			aria-label="All Threads"
+			aria-activedescendant={selected === undefined ? undefined : `thread-${selected}`}
+			onKeyDown={keyDown}
+			className="min-h-0 flex-1 overflow-auto pb-3 outline-none"
+		>
+			{sections.map((section) => {
+				const key = section.key;
+				const groupId = section.list?._tag === "Grouping" ? section.list.groupingId : null;
+				// The dragged thread's index here, found once: each row's place without it follows from it.
+				const from =
+					drag?.kind === "thread" ? section.threads.findIndex((candidate) => candidate.id === drag.id) : -1;
+				const length = from === -1 ? section.threads.length : section.threads.length - 1;
+				const isCollapsed = collapsed.has(key);
+				const target = drag?.kind === "thread" && drop?.key === key;
+				const source = from !== -1;
+				// Outside the manual order a drop only moves a thread between sections: the section shows it.
+				const highlight = target && !manual && !source;
+				return (
+					<section
+						key={key}
+						aria-label={heading(section, groups).name}
+						className={highlight ? "bg-ring/10" : undefined}
+						onDragOver={(event) => {
+							if (drag?.kind !== "thread") return;
+							event.preventDefault();
+							if (drop?.key !== key) setDrop({ key, index: length });
+						}}
+						onDrop={(event) => {
+							event.preventDefault();
+							if (drag?.kind === "thread" && drop?.key === key) void dropThread(section, drop.index);
+							end();
+						}}
+					>
+						<SectionHeader
+							section={section}
+							groups={groups}
+							collapsed={isCollapsed}
+							onCollapse={() =>
+								setCollapsed((current) => {
+									const next = new Set(current);
+									if (!next.delete(key)) next.add(key);
+									return next;
+								})
+							}
+							renaming={renaming}
+							onRename={onRename}
+							onRenamed={onRenamed}
+							onDragStart={() => groupId !== null && setDrag({ kind: "group", id: groupId })}
+							onDragOver={(event) => {
+								// A thread over the header lands at the top of the section; its drop is the section's.
+								if (drag?.kind === "thread") {
+									event.preventDefault();
+									event.stopPropagation();
+									if (drop?.key !== key || drop.index !== 0) setDrop({ key, index: 0 });
+									return;
+								}
+								if (drag?.kind !== "group" || groupId === null) return;
+								event.preventDefault();
+								event.stopPropagation();
+							}}
+							onDrop={(event) => {
+								if (drag?.kind !== "group" || groupId === null) return;
+								event.preventDefault();
+								event.stopPropagation();
+								dropGroup(event, groupId);
+								end();
+							}}
+						/>
+						{!isCollapsed && (
+							<ul>
+								{section.threads.map((thread, at) => {
+									const index = from === -1 || at < from ? at : at === from ? -1 : at - 1;
+									return (
+										<Row
+											key={thread.id}
+											thread={thread}
+											grouping={thread.groupingId === null ? undefined : groups.get(thread.groupingId)}
+											showMachine={showMachine}
+											selected={selected === thread.id}
+											dragging={drag?.id === thread.id}
+											above={manual && target && index !== -1 && drop.index === index}
+											sectionKey={key}
+											at={at}
+											actions={actions}
+										/>
+									);
+								})}
+								{manual && target && drop.index === length && (
+									<li aria-hidden className="mx-3 h-0.5 rounded bg-ring" />
+								)}
+							</ul>
+						)}
+					</section>
+				);
+			})}
+			{menu !== undefined && (
+				<ThreadPicker
+					key={`${menu.id}:${menu.kind}`}
+					thread={board.lists.flatMap((list) => list.threads).find((candidate) => candidate.id === menu.id)}
+					kind={menu.kind}
+					anchor={menu.anchor}
+					groups={board.groups}
+					onClose={() => setMenu(undefined)}
+				/>
+			)}
+		</div>
+	);
+}
+
+/** The open picker's options and writes, built for its one thread only when it opens. */
+function ThreadPicker({
+	thread,
+	kind,
+	anchor,
+	groups,
+	onClose,
+}: {
+	readonly thread: ListedThread | undefined;
+	readonly kind: Kind;
+	readonly anchor: HTMLElement;
+	readonly groups: Board["groups"];
+	readonly onClose: () => void;
+}) {
+	const set = {
+		status: useAtomSet(setStatus, { mode: "promise" }),
+		priority: useAtomSet(setPriority, { mode: "promise" }),
+		group: useAtomSet(setGroup, { mode: "promise" }),
+		color: useAtomSet(setColor, { mode: "promise" }),
+		create: useAtomSet(createGroup, { mode: "promise" }),
+	};
+	if (thread === undefined) return null;
+	const threadId = thread.id;
+	const common = { anchor, onClose };
+	if (kind === "status")
+		return (
+			<Picker
+				{...common}
+				placeholder="Change status…"
+				digits
+				value={thread.status}
+				options={STATUSES.map((value) => ({
+					value,
+					label: STATUS[value].label,
+					mark: <StatusIcon status={value} />,
+				}))}
+				onPick={(value) => {
+					const next = STATUSES.find((candidate) => candidate === value);
+					if (next !== undefined) void set.status({ payload: { threadId, status: next } }).catch(failed);
+				}}
+			/>
+		);
+	if (kind === "priority")
+		return (
+			<Picker
+				{...common}
+				placeholder="Change priority…"
+				digits
+				value={String(thread.priority)}
+				options={PRIORITIES.map((value: Priority) => ({
+					value: String(value),
+					label: PRIORITY[value].label,
+					mark: <PriorityIcon priority={value} />,
+				}))}
+				onPick={(value) => void set.priority({ payload: { threadId, priority: Number(value) } }).catch(failed)}
+			/>
+		);
+	if (kind === "color")
+		return (
+			<Picker
+				{...common}
+				placeholder="Change color…"
+				digits
+				value={thread.color ?? "none"}
+				options={[
+					...COLORS.map(({ name, hex }) => ({ value: hex, label: name, mark: <Dot color={hex} /> })),
+					{ value: "none", label: "Session Color", mark: <Dot color={null} /> },
+				]}
+				onPick={(value) =>
+					void set.color({ payload: { threadId, color: value === "none" ? null : value } }).catch(failed)
+				}
+			/>
+		);
+	return (
+		<Picker
+			{...common}
+			placeholder="Change or add group…"
+			heading={groups.length > 0 ? "Groups" : undefined}
+			value={thread.groupingId ?? "none"}
+			options={[
+				...groups.map((candidate) => ({
+					value: candidate.id,
+					label: candidate.name,
+					mark: <Dot color={candidate.color} />,
+				})),
+				{ value: "none", label: "No Group", mark: <Dot color={null} /> },
+			]}
+			onPick={(value) =>
+				void set.group({ payload: { threadId, groupingId: value === "none" ? null : value } }).catch(failed)
+			}
+			onCreate={{
+				noun: "group",
+				create: (name) =>
+					void set
+						.create({ payload: { organizationId: PERSONAL_ORGANIZATION, name } })
+						.then((created) => set.group({ payload: { threadId, groupingId: created.id } }))
+						.catch(failed),
+			}}
+		/>
+	);
+}
diff --git a/apps/web/src/widgets/threads/toolbar.tsx b/apps/web/src/widgets/threads/toolbar.tsx
new file mode 100644
index 00000000..f1a699b9
--- /dev/null
+++ b/apps/web/src/widgets/threads/toolbar.tsx
@@ -0,0 +1,276 @@
+import type { Priority, ThreadStatus } from "@codeworksh/contract";
+import { Check, ListFilter, Plus, SlidersHorizontal, X } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { MachineAvatar, PRIORITIES, PRIORITY, PriorityIcon, STATUS, STATUSES, StatusIcon } from "./marks";
+import type { Options } from "./options";
+
+const GROUPS: ReadonlyArray<{ readonly value: Options["group"]; readonly label: string }> = [
+	{ value: "status", label: "Status" },
+	{ value: "priority", label: "Priority" },
+	{ value: "grouping", label: "Group" },
+	{ value: "none", label: "No Grouping" },
+];
+const ORDERS: ReadonlyArray<{ readonly value: Options["order"]; readonly label: string }> = [
+	{ value: "manual", label: "Manual" },
+	{ value: "updated", label: "Last Updated" },
+	{ value: "priority", label: "Priority" },
+];
+
+const toggled = <A,>(values: ReadonlyArray<A>, value: A) =>
+	values.includes(value) ? values.filter((candidate) => candidate !== value) : [...values, value];
+
+export function Toolbar({
+	options,
+	onChange,
+	machines,
+	count,
+	onNewGroup,
+}: {
+	readonly options: Options;
+	readonly onChange: (patch: Partial<Options>) => void;
+	readonly machines: ReadonlyArray<{ readonly id: string; readonly name: string }>;
+	readonly count: number;
+	readonly onNewGroup: () => void;
+}) {
+	return (
+		<div className="flex shrink-0 flex-col border-b border-edge">
+			<div className="flex h-10 items-center gap-1.5 px-3">
+				<span className="mr-auto text-xs text-ink-muted tabular-nums">
+					{count} {count === 1 ? "thread" : "threads"}
+				</span>
+				{options.group === "grouping" && (
+					<Button variant="ghost" size="xs" onClick={onNewGroup}>
+						<Plus aria-hidden />
+						New Group
+					</Button>
+				)}
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon-xs" aria-label="Filter" title="Filter">
+							<ListFilter aria-hidden />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-44">
+						<DropdownMenuSub>
+							<DropdownMenuSubTrigger className="text-xs">Status</DropdownMenuSubTrigger>
+							<DropdownMenuSubContent className="min-w-44">
+								{STATUSES.map((status) => (
+									<FilterItem
+										key={status}
+										checked={options.status.includes(status)}
+										onToggle={() => onChange({ status: toggled(options.status, status) })}
+										mark={<StatusIcon status={status} />}
+										label={STATUS[status].label}
+									/>
+								))}
+							</DropdownMenuSubContent>
+						</DropdownMenuSub>
+						<DropdownMenuSub>
+							<DropdownMenuSubTrigger className="text-xs">Priority</DropdownMenuSubTrigger>
+							<DropdownMenuSubContent className="min-w-44">
+								{PRIORITIES.map((priority) => (
+									<FilterItem
+										key={priority}
+										checked={options.priority.includes(priority)}
+										onToggle={() => onChange({ priority: toggled(options.priority, priority) })}
+										mark={<PriorityIcon priority={priority} />}
+										label={PRIORITY[priority].label}
+									/>
+								))}
+							</DropdownMenuSubContent>
+						</DropdownMenuSub>
+						<DropdownMenuSub>
+							<DropdownMenuSubTrigger className="text-xs">Machine</DropdownMenuSubTrigger>
+							<DropdownMenuSubContent className="min-w-44">
+								{machines.map((machine) => (
+									<FilterItem
+										key={machine.id}
+										checked={options.machine.includes(machine.id)}
+										onToggle={() => onChange({ machine: toggled(options.machine, machine.id) })}
+										mark={<MachineAvatar id={machine.id} name={machine.name} />}
+										label={machine.name}
+									/>
+								))}
+							</DropdownMenuSubContent>
+						</DropdownMenuSub>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							className="text-xs"
+							onSelect={() => onChange({ status: [], priority: [], machine: [] })}
+						>
+							Clear Filters
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+				<Popover>
+					<PopoverTrigger asChild>
+						<Button variant="ghost" size="icon-xs" aria-label="Display Options" title="Display Options">
+							<SlidersHorizontal aria-hidden />
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent align="end" className="grid w-60 gap-1.5 p-3">
+						<Field label="Grouping">
+							<Select
+								value={options.group}
+								onValueChange={(group) => {
+									const next = GROUPS.find((candidate) => candidate.value === group);
+									if (next !== undefined) onChange({ group: next.value });
+								}}
+							>
+								<SelectTrigger
+									size="sm"
+									aria-label="Grouping"
+									className="w-32 gap-1 border-transparent bg-ink/5 px-2 text-xs shadow-none hover:bg-ink/8 data-[size=sm]:h-7 dark:bg-ink/5 dark:hover:bg-ink/8 [&_svg:not([class*='size-'])]:size-3.5"
+								>
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{GROUPS.map((group) => (
+										<SelectItem key={group.value} value={group.value} className="text-xs">
+											{group.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</Field>
+						<Field label="Ordering">
+							<Select
+								value={options.order}
+								onValueChange={(order) => {
+									const next = ORDERS.find((candidate) => candidate.value === order);
+									if (next !== undefined) onChange({ order: next.value });
+								}}
+							>
+								<SelectTrigger
+									size="sm"
+									aria-label="Ordering"
+									className="w-32 gap-1 border-transparent bg-ink/5 px-2 text-xs shadow-none hover:bg-ink/8 data-[size=sm]:h-7 dark:bg-ink/5 dark:hover:bg-ink/8 [&_svg:not([class*='size-'])]:size-3.5"
+								>
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{ORDERS.map((order) => (
+										<SelectItem key={order.value} value={order.value} className="text-xs">
+											{order.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</Field>
+						<Field label="Show Empty Groups">
+							<Switch
+								size="sm"
+								aria-label="Show Empty Groups"
+								checked={options.empty}
+								onCheckedChange={(empty) => onChange({ empty })}
+							/>
+						</Field>
+					</PopoverContent>
+				</Popover>
+			</div>
+			<Chips options={options} onChange={onChange} machines={machines} />
+		</div>
+	);
+}
+
+function Field({ label, children }: { readonly label: string; readonly children: ReactNode }) {
+	return (
+		<div className="flex min-h-7 items-center justify-between gap-2">
+			<span className="text-xs text-ink-secondary">{label}</span>
+			{children}
+		</div>
+	);
+}
+
+/** A filter value: its mark and name, checked while it narrows the list; picking it keeps the menu open. */
+function FilterItem({
+	checked,
+	onToggle,
+	mark,
+	label,
+}: {
+	readonly checked: boolean;
+	readonly onToggle: () => void;
+	readonly mark: ReactNode;
+	readonly label: string;
+}) {
+	return (
+		<DropdownMenuItem
+			onSelect={(event) => {
+				event.preventDefault();
+				onToggle();
+			}}
+			aria-checked={checked}
+			role="menuitemcheckbox"
+			className="text-xs"
+		>
+			{mark}
+			<span className="truncate">{label}</span>
+			{checked && <Check className="ml-auto size-3.5" aria-hidden />}
+		</DropdownMenuItem>
+	);
+}
+
+/** The active filters, one chip per kind, each cleared on its own. */
+function Chips({
+	options,
+	onChange,
+	machines,
+}: {
+	readonly options: Options;
+	readonly onChange: (patch: Partial<Options>) => void;
+	readonly machines: ReadonlyArray<{ readonly id: string; readonly name: string }>;
+}) {
+	const chips: Array<{ key: string; label: string; values: string; clear: Partial<Options> }> = [];
+	const named = (values: ReadonlyArray<ThreadStatus>) => values.map((status) => STATUS[status].label).join(", ");
+	const ranked = (values: ReadonlyArray<Priority>) => values.map((priority) => PRIORITY[priority].label).join(", ");
+	if (options.status.length > 0)
+		chips.push({ key: "status", label: "Status", values: named(options.status), clear: { status: [] } });
+	if (options.priority.length > 0)
+		chips.push({ key: "priority", label: "Priority", values: ranked(options.priority), clear: { priority: [] } });
+	if (options.machine.length > 0)
+		chips.push({
+			key: "machine",
+			label: "Machine",
+			values: options.machine.map((id) => machines.find((machine) => machine.id === id)?.name ?? id).join(", "),
+			clear: { machine: [] },
+		});
+	if (chips.length === 0) return null;
+	return (
+		<div className="flex flex-wrap gap-1.5 px-3 pb-2">
+			{chips.map((chip) => (
+				<span
+					key={chip.key}
+					className="flex h-6 items-center gap-1 rounded-md border border-edge pl-2 text-2xs text-ink-secondary"
+				>
+					<span className="text-ink-muted">{chip.label} is</span>
+					<span className="max-w-48 truncate">{chip.values}</span>
+					<Button
+						variant="ghost"
+						size="icon-xs"
+						aria-label={`Clear ${chip.label} filter`}
+						onClick={() => onChange(chip.clear)}
+						className="size-5"
+					>
+						<X aria-hidden />
+					</Button>
+				</span>
+			))}
+		</div>
+	);
+}
diff --git a/apps/web/src/widgets/time.ts b/apps/web/src/widgets/time.tsx
similarity index 53%
rename from apps/web/src/widgets/time.ts
rename to apps/web/src/widgets/time.tsx
index b1141839..758d09bd 100644
--- a/apps/web/src/widgets/time.ts
+++ b/apps/web/src/widgets/time.tsx
@@ -1,3 +1,5 @@
+import { useNowMinute } from "@/hooks/now";
+
 const units = [
 	{ unit: "d", ms: 24 * 60 * 60 * 1000 },
 	{ unit: "h", ms: 60 * 60 * 1000 },
@@ -5,8 +7,13 @@ const units = [
 ] as const;
 
 /** Compact relative time: "5h", "3d", "now". */
-export function ago(time: number) {
-	const elapsed = Date.now() - time;
+export function ago(time: number, now = Date.now()) {
+	const elapsed = now - time;
 	const match = units.find(({ ms }) => elapsed >= ms);
 	return match === undefined ? "now" : `${Math.floor(elapsed / match.ms)}${match.unit}`;
 }
+
+/** `ago(time)`, kept current by the shared minute tick. */
+export function Ago({ time }: { readonly time: number }) {
+	return ago(time, useNowMinute());
+}
diff --git a/apps/web/src/wm/desktop.tsx b/apps/web/src/wm/desktop.tsx
index 6283bf71..2f39c00f 100644
--- a/apps/web/src/wm/desktop.tsx
+++ b/apps/web/src/wm/desktop.tsx
@@ -1,6 +1,6 @@
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { RegistryContext, useAtom, useAtomSet } from "@effect/atom-react";
-import { type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { memo, type ReactNode, useContext, useEffect, useRef, useState } from "react";
 import {
 	focus,
 	hasMasterStack,
@@ -22,6 +22,7 @@ import { builtins, registry } from "../widgets";
 import { type Chrome, chromeAtom, chromeOf, focusedAtom, tabOwnerAtom } from "./chrome";
 import { Divider } from "./divider";
 import { Frame, FRAME_HEADER_HEIGHT } from "./frame";
+import { useStableCallback } from "../hooks/stable";
 import { Overflow } from "./overflow";
 import { add, type Desk, deskAtom, type Instance, remove, retarget, focus as raise, update } from "./instances";
 import { resolve } from "./resolver";
@@ -40,51 +41,77 @@ import {
 
 const nmaster = 1;
 
+const unchanged = (desk: Desk) => desk;
+
+/**
+ * Whether `value` differs from the last render's. It compares against a ref in render, which the
+ * compiler cannot memoize, so this hook stays out of it rather than the whole desktop.
+ */
+function useChanged<T>(value: T) {
+	"use no memo";
+	const last = useRef(value);
+	// oxlint-disable-next-line react/refs -- the comparison is the point; the hook opts out of the compiler.
+	const changed = last.current !== value;
+	useEffect(() => {
+		last.current = value;
+	}, [value]);
+	return changed;
+}
+
 /** The opener of what the shell itself opens (an `open` request in the URL), not a widget. */
 const SHELL = "shell";
 
-/** Frame title, icon, and body for one instance, resolved through the widget registry. */
-function describe(instance: Instance, chrome: Chrome | undefined) {
-	const definition = registry.get(instance.kind);
-	return {
-		...chromeOf(instance, chrome),
-		body:
-			definition === undefined ? (
-				<p className="p-3 text-ink-muted">Missing widget: {instance.kind}</p>
-			) : (
-				definition.render({
-					instanceId: instance.id,
-					props: instance.props,
-					address: instance.address,
-					params: instance.params ?? {},
-				})
-			),
-	};
-}
+const NO_PARAMS: NonNullable<Instance["params"]> = {};
+
+/**
+ * One instance's widget, resolved through the registry. Memoized on the instance's own values, so a
+ * drag, a focus change or another frame's title renders the desktop's frames but not their widgets.
+ */
+const WidgetBody = memo(function WidgetBody({
+	instanceId,
+	kind,
+	props,
+	address,
+	params,
+}: {
+	readonly instanceId: string;
+	readonly kind: string;
+	readonly props: Instance["props"];
+	readonly address: Instance["address"];
+	readonly params: NonNullable<Instance["params"]>;
+}) {
+	const definition = registry.get(kind);
+	if (definition === undefined) return <p className="p-3 text-ink-muted">Missing widget: {kind}</p>;
+	return definition.render({ instanceId, props, address, params });
+});
 
 interface HostProps {
 	readonly instanceId: string;
 	/** The widget kind, "<package>:<name>"; its package scopes the widget's topics and kv. */
 	readonly kind: string;
-	readonly shell: Shell;
+	/** The desktop's shell as `caller` sees it; one identity for the desktop's life. */
+	readonly shellFor: (caller: string) => Shell;
 	readonly decorate: (instanceId: string, chrome: Chrome) => void;
 	readonly children: ReactNode;
 }
 
 /** Gives a widget its shell, frame and host; these stay stable so widgets can use them in effects. */
-function Host({ instanceId, kind, shell, decorate, children }: HostProps) {
+function Host({ instanceId, kind, shellFor, decorate, children }: HostProps) {
 	const atoms = useContext(RegistryContext);
+	// Built once per instance and calling the desktop's latest shell, so `useShell` never renders a widget.
+	const shell: Shell = {
+		open: (address, options) => shellFor(instanceId).open(address, options),
+		focus: (id) => shellFor(instanceId).focus(id),
+		close: (id) => shellFor(instanceId).close(id),
+	};
 	const pkg = kind.split(":")[0] ?? kind;
-	const host = useMemo(() => makeHost({ registry: atoms, package: pkg, instanceId }), [atoms, pkg, instanceId]);
-	const frame = useMemo<FrameApi>(
-		() => ({
-			instanceId,
-			setTitle: (title, lead) => decorate(instanceId, { title, lead }),
-			setIcon: (icon) => decorate(instanceId, { icon }),
-			setTab: (tab) => decorate(instanceId, { tab }),
-		}),
-		[instanceId, decorate],
-	);
+	const host = makeHost({ registry: atoms, package: pkg, instanceId });
+	const frame: FrameApi = {
+		instanceId,
+		setTitle: (title, lead) => decorate(instanceId, { title, lead }),
+		setIcon: (icon) => decorate(instanceId, { icon }),
+		setTab: (tab) => decorate(instanceId, { tab }),
+	};
 	return (
 		<ShellContext value={shell}>
 			<FrameContext value={frame}>
@@ -128,24 +155,16 @@ export function Desktop({ workspace }: DesktopProps) {
 	const [resizing, setResizing] = useState(false);
 	const [ref, size] = useElementSize<HTMLDivElement>();
 	// A window resize must not tween: frames would trail the window edge by the transition's length.
-	const lastSize = useRef(size);
-	const resized = lastSize.current !== size;
-	useEffect(() => {
-		lastSize.current = size;
-	}, [size]);
+	const resized = useChanged(size);
 	const surfaceRef = useRef<HTMLDivElement>(null);
 	const activeTags = workspaceTag(workspace);
 	const { instances, order } = desk;
 	// webwm only needs identity, tags, and minimum sizes; those come from the
 	// widget's definition so the layout respects what each widget can shrink to.
-	const widgets: Widget[] = useMemo(
-		() =>
-			instances.map(({ id, kind, tags }) => {
-				const definition = registry.get(kind);
-				return { id, tags, minWidth: definition?.minWidth ?? 220, minHeight: definition?.minHeight ?? 140 };
-			}),
-		[instances],
-	);
+	const widgets: Widget[] = instances.map(({ id, kind, tags }) => {
+		const definition = registry.get(kind);
+		return { id, tags, minWidth: definition?.minWidth ?? 220, minHeight: definition?.minHeight ?? 140 };
+	});
 	const byId = new Map(instances.map((instance) => [instance.id, instance]));
 	const saved: View = { layout: workspace.layout, mfact: workspace.mfact };
 	const view = views.get(workspace.id) ?? saved;
@@ -222,22 +241,19 @@ export function Desktop({ workspace }: DesktopProps) {
 		if (home !== undefined) void navigate(workspaceRoute(home));
 	};
 
-	const decorate = useCallback(
-		(instanceId: string, patch: Chrome) =>
-			setChrome((current) => {
-				const previous = current.get(instanceId) ?? {};
-				const next = { ...previous, ...patch };
-				if (
-					next.title === previous.title &&
-					next.lead === previous.lead &&
-					next.icon === previous.icon &&
-					next.tab === previous.tab
-				)
-					return current;
-				return new Map(current).set(instanceId, next);
-			}),
-		[],
-	);
+	const decorate = (instanceId: string, patch: Chrome) =>
+		setChrome((current) => {
+			const previous = current.get(instanceId) ?? {};
+			const next = { ...previous, ...patch };
+			if (
+				next.title === previous.title &&
+				next.lead === previous.lead &&
+				next.icon === previous.icon &&
+				next.tab === previous.tab
+			)
+				return current;
+			return new Map(current).set(instanceId, next);
+		});
 
 	// A frame showing something else, or gone, starts from the widget's defaults again.
 	const undecorate = (instanceId: string) =>
@@ -256,7 +272,7 @@ export function Desktop({ workspace }: DesktopProps) {
 		instanceId: string,
 		change: (desk: Desk) => Desk,
 		to: { readonly to: "/" } | ReturnType<typeof workspaceRoute>,
-		bridge: (desk: Desk) => Desk = (current) => current,
+		bridge: (desk: Desk) => Desk = unchanged,
 	) => {
 		const leaver = byId.get(instanceId);
 		const emptied =
@@ -362,6 +378,8 @@ export function Desktop({ workspace }: DesktopProps) {
 		},
 	});
 
+	const stableShellFor = useStableCallback(shellFor);
+
 	// Carries out an `open` request from the URL once, then drops it so Back and reloads don't repeat it.
 	// The ref outlives StrictMode's second run; it resets once the URL no longer asks.
 	const handled = useRef<string | undefined>(undefined);
@@ -414,7 +432,7 @@ export function Desktop({ workspace }: DesktopProps) {
 				].map(({ widget, rect, collapsed, hidden }) => {
 					const instance = byId.get(widget.id);
 					if (instance === undefined) return null;
-					const { title, lead, icon, body } = describe(instance, chrome.get(widget.id));
+					const { title, lead, icon } = chromeOf(instance, chrome.get(widget.id));
 					return (
 						<Frame
 							key={widget.id}
@@ -457,8 +475,14 @@ export function Desktop({ workspace }: DesktopProps) {
 							onDragCancel={() => setDrag(null)}
 						>
 							{/* Kept across a retarget: a widget whose state belongs to its address keys that state itself. */}
-							<Host instanceId={widget.id} kind={instance.kind} shell={shellFor(widget.id)} decorate={decorate}>
-								{body}
+							<Host instanceId={widget.id} kind={instance.kind} shellFor={stableShellFor} decorate={decorate}>
+								<WidgetBody
+									instanceId={instance.id}
+									kind={instance.kind}
+									props={instance.props}
+									address={instance.address}
+									params={instance.params ?? NO_PARAMS}
+								/>
 							</Host>
 						</Frame>
 					);
diff --git a/apps/web/src/wm/save.ts b/apps/web/src/wm/save.ts
index 593302e9..0f93dbbd 100644
--- a/apps/web/src/wm/save.ts
+++ b/apps/web/src/wm/save.ts
@@ -1,5 +1,5 @@
 import { RegistryContext, useAtomSet, useAtomValue } from "@effect/atom-react";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 
 import { type Desk, deskAtom, loadedDeskAtom, saveDesk, toSaved } from "./instances";
 
@@ -19,7 +19,7 @@ export function useSaveDesk(paused: boolean) {
 	const queue = useRef(Promise.resolve());
 
 	// Read from the registry, not a render: a desk just set, or set after unmounting, has not rendered.
-	const flush = useCallback(() => {
+	const flush = () => {
 		const next = registry.get(deskAtom);
 		const loaded = registry.get(loadedDeskAtom);
 		if (loaded === undefined || next === loaded || next === sent.current) return queue.current;
@@ -31,7 +31,7 @@ export function useSaveDesk(paused: boolean) {
 			),
 		);
 		return queue.current;
-	}, [registry, save]);
+	};
 
 	useEffect(() => {
 		if (paused) return;
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 857a8eb0..b4d877a8 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
 		// Route components load as split chunks so feature code stays out of the
 		// cold-start payload; the router prefetches them on navigation intent.
 		tanstackRouter({ autoCodeSplitting: true }),
-		react(),
+		react({ compiler: true }),
 		tailwindcss(),
 	],
 	// shadcn components import through "@/"; tsconfig.json declares the same alias.
diff --git a/knip.jsonc b/knip.jsonc
index a35732cb..bfd4cb69 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -6,6 +6,8 @@
 	"ignoreBinaries": ["plutil", "bumpp"],
 	// The Effect language service is loaded by tsconfig plugins and patched in by @effect/tsgo.
 	"ignoreDependencies": ["@effect/language-service"],
+	// CI installs every workspace but the site, so knip cannot trace its Astro entries there.
+	"ignoreWorkspaces": ["sites/www"],
 	"workspaces": {
 		".": {
 			// Keep vendored and archived repositories outside the root project.
@@ -28,8 +30,10 @@
 				// Topic payloads named for their topic, though several share one shape.
 				"src/widgets/session/schema.ts": ["duplicates"],
 			},
-			// Installed ahead of the file explorer that will use it.
-			"ignoreDependencies": ["@pierre/trees"],
+		},
+		"apps/server": {
+			// The machine simulation runs it on each OrbStack machine by path.
+			"entry": ["test/machines/drive.ts"],
 		},
 		"packages/codework": {
 			// bundle.mjs builds the SEA binary from it by path.
@@ -46,6 +50,5 @@
 			"entry": ["*.ts"],
 		},
 		"infra/*": { "entry": ["alchemy.run.ts!"] },
-		"sites/www": { "entry": ["alchemy.run.ts!"] },
 	},
 }
diff --git a/package.json b/package.json
index c26a486e..a23780ee 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
 		"dev:desktop": "vp run --filter @codeworksh/desktop dev",
 		"dev:www": "vp run --filter @codeworksh/www dev",
 		"knip": "knip",
-		"knip:check": "knip --no-config-hints --workspace apps/web --workspace apps/desktop --workspace apps/contract --workspace apps/widget",
+		"knip:check": "vp run knip:check:all",
+		"knip:check:exports": "knip --exports --no-config-hints --workspace apps/web --workspace apps/desktop --workspace apps/contract --workspace apps/widget",
+		"knip:check:files": "knip --include files,dependencies --no-config-hints",
 		"lint": "vp lint",
 		"prepare": "node scripts/clean-tsgo-backups.mjs && effect-tsgo patch --typescript --oxlint",
 		"test": "vp test",
diff --git a/packages/harness/package.json b/packages/harness/package.json
index d40b255b..38eb298a 100644
--- a/packages/harness/package.json
+++ b/packages/harness/package.json
@@ -94,7 +94,6 @@
 		"npm-package-arg": "^14.0.0",
 		"pacote": "^22.0.0",
 		"proper-lockfile": "4.1.2",
-		"run": "2.1.8",
 		"uuidv7": "^1.2.1",
 		"yaml": "2.9.1"
 	},
diff --git a/packages/harness/src/fsutil/fsutil.ts b/packages/harness/src/fsutil/fsutil.ts
deleted file mode 100644
index 09d50e23..00000000
--- a/packages/harness/src/fsutil/fsutil.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { NodeFileSystem } from "@effect/platform-node";
-import { Context, Effect, Layer, FileSystem as PlatformFileSystem, Schema } from "effect";
-import { posix } from "../util/posix.ts";
-
-/**
- * Host-side filesystem helpers over `@effect/platform`, for the machine the
- * harness itself runs on — config, caches, and anything else outside a
- * workspace.
- *
- * This is **not** the runtime filesystem. Anything touching a project's files
- * goes through `SandboxFileSystem`, which may be local or remote; reaching for
- * this service instead would silently pin that work to the harness's own disk.
- */
-
-export class FileSystemError extends Schema.TaggedError<FileSystemError>()("FileSystemError", {
-	method: Schema.String,
-	cause: Schema.optional(Schema.Defect()),
-}) {}
-
-export interface Interface {
-	readonly exists: (path: string) => Effect.Effect<boolean>;
-	readonly readFileString: (path: string, encoding?: string) => Effect.Effect<string, FileSystemError>;
-	readonly writeFileString: (path: string, data: string) => Effect.Effect<void, FileSystemError>;
-	readonly isDir: (path: string) => Effect.Effect<boolean>;
-}
-
-export class Service extends Context.Service<Service, Interface>()("@codeworksh/harness/fsutil/fsutil/Service") {}
-
-export const layer = Layer.effect(
-	Service,
-	Effect.gen(function* () {
-		const fs = yield* PlatformFileSystem.FileSystem;
-
-		const exists = Effect.fn("FSUtil.exists")(function* (path: string) {
-			return yield* fs.exists(path).pipe(Effect.orElseSucceed(() => false));
-		});
-
-		const readFileString = Effect.fn("FSUtil.readFileString")(function* (path: string, encoding = "utf8") {
-			return yield* fs
-				.readFileString(path, encoding)
-				.pipe(Effect.mapError((cause) => new FileSystemError({ method: "readFileString", cause })));
-		});
-
-		const writeFileString = Effect.fn("FSUtil.writeFileString")(function* (path: string, data: string) {
-			return yield* fs.writeFileString(path, data).pipe(
-				Effect.catch(() =>
-					fs
-						.makeDirectory(posix.dirname(path), { recursive: true })
-						.pipe(Effect.flatMap(() => fs.writeFileString(path, data))),
-				),
-				Effect.mapError((cause) => new FileSystemError({ method: "writeFileString", cause })),
-			);
-		});
-
-		const isDir = Effect.fn("FSUtil.isDir")(function* (path: string) {
-			return yield* fs.stat(path).pipe(
-				Effect.map((stat) => stat.type === "Directory"),
-				Effect.orElseSucceed(() => false),
-			);
-		});
-
-		return Service.of({
-			exists,
-			readFileString,
-			writeFileString,
-			isDir,
-		});
-	}),
-);
-
-export const defaultLayer = layer.pipe(Layer.provide(NodeFileSystem.layer));
-
-export * as FSUtil from "./fsutil.ts";
diff --git a/packages/harness/src/sandbox/index.ts b/packages/harness/src/sandbox/index.ts
deleted file mode 100644
index 0cd92ab0..00000000
--- a/packages/harness/src/sandbox/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * The sandbox mount and driver contract, re-exported from `@codeworksh/plugin`.
- *
- * It lives there so a plugin's tools, and a third-party sandbox driver package, compile against
- * the same tags and codecs the harness mounts — not a structurally identical copy.
- */
-export * from "@codeworksh/plugin/sandbox";
diff --git a/packages/harness/src/tool/index.ts b/packages/harness/src/tool/index.ts
deleted file mode 100644
index 4f8fd820..00000000
--- a/packages/harness/src/tool/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Public surface of the tool layer
- *
- * Framework: `Tool` (define / make / implement / wire view),
- * `Executor` (decode → run → encode pipeline),
- * `Truncate` (output truncation utilities).
- * Capabilities:
- * `ToolShell` (cancellable exec),
- * `ToolProgress` (progress side-channel).
- */
-
-export * as Executor from "./executor.ts";
-export * as Registry from "./registry.ts";
-export * as Tool from "./tool.ts";
-export * as Truncate from "./truncate.ts";
-
-export { ToolExecutionError } from "./error.ts";
-
-export {
-	fromSandboxShell,
-	ToolShell,
-	ToolShellError,
-	ToolShellTimeout,
-	type IToolShell,
-	type ToolShellExecOptions,
-	type ToolShellResult,
-} from "./shell.ts";
-
-export {
-	make as makeToolProgress,
-	ToolProgress,
-	noop as toolProgressNoop,
-	type IToolProgress,
-	type ToolProgressPartial,
-} from "./progress.ts";
-
-export { Accumulator, type OutputAccumulatorOptions, type OutputSnapshot } from "./accumulator.ts";
diff --git a/packages/harness/src/workspace/workspace.ts b/packages/harness/src/workspace/workspace.ts
deleted file mode 100644
index 9702c243..00000000
--- a/packages/harness/src/workspace/workspace.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Schema } from "effect";
-import { uuidv7 } from "uuidv7";
-import { withStatics } from "../schema.ts";
-
-export const ID = Schema.String.check(Schema.isStartingWith("wrk")).pipe(
-	Schema.brand("Workspace.ID"),
-	withStatics((schema) => ({
-		ascending: (id?: string) => {
-			if (!id) return schema.make("wrk_" + uuidv7());
-			if (!id.startsWith("wrk")) throw new Error(`ID ${id} does not start with wrk`);
-			return schema.make(id);
-		},
-		create: () => schema.make("wrk_" + uuidv7()),
-	})),
-);
-export type ID = typeof ID.Type;
-
-export * as Workspace from "./workspace.ts";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9276b2ea..344e2c1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -387,7 +387,10 @@ importers:
         version: 19.3.0(@types/react@19.3.0)
       '@vitejs/plugin-react':
         specifier: ^6.0.0
-        version: 6.1.2(@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))
+        version: 6.1.2(@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(oxc-transform-react@0.152.0)
+      oxc-transform-react:
+        specifier: ~0.152.0
+        version: 0.152.0
       tailwindcss:
         specifier: ^4.3.3
         version: 4.3.3
@@ -659,9 +662,6 @@ importers:
       proper-lockfile:
         specifier: 4.1.2
         version: 4.1.2
-      run:
-        specifier: 2.1.8
-        version: 2.1.8(typescript@5.9.3)
       uuidv7:
         specifier: ^1.2.1
         version: 1.2.1
@@ -3036,6 +3036,128 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-transform-react/binding-android-arm-eabi@0.152.0':
+    resolution: {integrity: sha512-HrGZlhhyJUxz5tDWnsBliNrlhSVxM9lLF468EKab1uBBUMbMzfwHdO4aOHbI8x4EbI/gIzpMXqJbtWRwBLdwZw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-transform-react/binding-android-arm64@0.152.0':
+    resolution: {integrity: sha512-h+LtkA/nSQsfZdCe6c3F28236gIZhpl3Bu9MjwEI7X0J+CGpEEShmZuXw5b7lwqXQnhr5l1ZIIZ4NA5tU5FW+Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-transform-react/binding-darwin-arm64@0.152.0':
+    resolution: {integrity: sha512-EycvN1vJ5gjer1+AD4Czi/Z0gpD4ud/oRbiwDV3BDOiuN5PVrR5Dz0oqkoKtE+/eKK6QqygEtZrZzc8ARJkLLA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-transform-react/binding-darwin-x64@0.152.0':
+    resolution: {integrity: sha512-5YUXuvxXi+7GmZPho95qteMlG8WgIhCbpYOug8MhyuTZzYtrr8CDBsdMzheBgiRNj9lPkFvduhQ4MK+QVQ06CQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-transform-react/binding-freebsd-x64@0.152.0':
+    resolution: {integrity: sha512-HZrLNspvHfOo1umeCkeskU7UBEXWjuQSoBGidHwjUQVOhsbDNp9k3oihXenEBFgShPycLEC11wAZSD3DtiIkXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-transform-react/binding-linux-arm-gnueabihf@0.152.0':
+    resolution: {integrity: sha512-qfPsGd0sbaUeLtQDojSf+reHYMBHWX+4mdq1lsARkRzGjoHCvstnTr+nKb7sTtGsdPYhbSgbPINI+h1V+KSF5A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform-react/binding-linux-arm-musleabihf@0.152.0':
+    resolution: {integrity: sha512-lYpuYevetblWvNsylYb3BxKbXd2t+BhUqwIoa3/98zmWeLbB+VBfxV8APdZV9gbw2W04HknXKU386pt/5duvfw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform-react/binding-linux-arm64-gnu@0.152.0':
+    resolution: {integrity: sha512-8eIPBuC+1WpE3Z7AiieAVhbkt6PLEbT4Rnm4SeVOMvIUKTml+s2PSzMu2qAUtFdIB4SFVshTj9SliturT3GHCg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform-react/binding-linux-arm64-musl@0.152.0':
+    resolution: {integrity: sha512-rv4dvLnqhgen1tqb7eoB/fNfD5fq+Bf3RTH9YuJ+8SNdqOk2TjAXFUdve0XtjD9Wost0fQ605bVXVrStVY/IEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform-react/binding-linux-ppc64-gnu@0.152.0':
+    resolution: {integrity: sha512-zP9xCGiJFyHkP6B7UtVQ99nfYXe8e7eqLqZv0C+Zr2jlhNuLMBsB77QuRczlhtRQqncRWzBI8BkQzy/Lo7GyaQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform-react/binding-linux-riscv64-gnu@0.152.0':
+    resolution: {integrity: sha512-INC57B7OIgMEoUe4NquHvg77tlYL4E6aMglhKs3FY5k5oB9/+hd2y0Xg1DVco5uDtkgilnSQRM5P0Ptz7CxXPg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform-react/binding-linux-riscv64-musl@0.152.0':
+    resolution: {integrity: sha512-4oPU+QTufHexk7GOGe/JapxAfYlU5EXUsN5J0IsBC9s3SsGUTTjpmXQYiDe4dkX5/BGerE+9mYDG94jNwuk99A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform-react/binding-linux-s390x-gnu@0.152.0':
+    resolution: {integrity: sha512-xt4qy3y+9s32F/pz7ymaf1VfDRI+cKwDnW2poFID2r51dC/gln3QGGDaqv2XLaZGQT5o4uGwIry+9CQY5AHNeA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform-react/binding-linux-x64-gnu@0.152.0':
+    resolution: {integrity: sha512-6va4CIMFzejx2i8KhLAYuunai7b85vRpZSLvuBR4bK2ywuTb6V0kJDFJwiKjWHQRNzEvRjbl887+jqa1rKl8QQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-transform-react/binding-linux-x64-musl@0.152.0':
+    resolution: {integrity: sha512-l1QfEbsREILsAWIcmpEsEu9PKjmN6BKmE1Oe97QJDUjeJ3z5lBn5g2feC3nof3JJc5SsG8BiY4F+cm1yHRhmeQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-transform-react/binding-openharmony-arm64@0.152.0':
+    resolution: {integrity: sha512-UmdDypmnG1WSZxzQXd8GfhbZQq//XsvMu5/mm+I1uCW3v+9UwpD1J7H+jg91W4xtRY1c0qAhUoMsZi+6vB7Qug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-transform-react/binding-win32-arm64-msvc@0.152.0':
+    resolution: {integrity: sha512-JgETFwNiqqB0BfTKMamnVF1zBMnburMoeqnyBgWwKj+JdEqgFqO/0G/O+eWUfNW4xPryjh6HGuq9eNHZLRYrjg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-transform-react/binding-win32-ia32-msvc@0.152.0':
+    resolution: {integrity: sha512-j2oFkpEG89D38wVY43OtU1s9QUmq0C1+Dpp62PB+SDDTAMsUwU2HofnhK3h9iYTAs7wH/6YqzWOM4XjQ6g/Nmw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-transform-react/binding-win32-x64-msvc@0.152.0':
+    resolution: {integrity: sha512-iFxYqUqkN/8D0migw/RVZoEvVcJhZ1NzJuRBal0Fgt7V1yJed0QQIHd719kL4OrVmX5f5u2tNZxJB1UJiQ0D/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxfmt/binding-android-arm-eabi@0.66.0':
     resolution: {integrity: sha512-2Me9eoptv6ERdEuI2P8AOlYdHHraXebJaM6SC0kc2Dfb+mLrep2db+fedBPKaYn673h/vBgvP4tkOdAbaudX6w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -7784,6 +7906,10 @@ packages:
   oxc-resolver@11.24.2:
     resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
 
+  oxc-transform-react@0.152.0:
+    resolution: {integrity: sha512-CAx+SKDU4uSOmQnyn7daMj/v/h8tF3fnaUMi4yImKAARPnXV0BieHe/qw1LTcK4KlnIuAhpfUJfSfNKIBh8HqQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   oxfmt@0.66.0:
     resolution: {integrity: sha512-FfvqR8RFtV6JJpRrpkfqyVCQ7HDvZ/VriWFx7veftCgL1B5ZO9qNr+1rvPieycMQnNfVG0PWyJQiy7p0hq1I5w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -11835,6 +11961,63 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     optional: true
 
+  '@oxc-transform-react/binding-android-arm-eabi@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-android-arm64@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-darwin-arm64@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-darwin-x64@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-freebsd-x64@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-arm-gnueabihf@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-arm-musleabihf@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-arm64-gnu@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-arm64-musl@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-ppc64-gnu@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-riscv64-gnu@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-riscv64-musl@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-s390x-gnu@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-x64-gnu@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-linux-x64-musl@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-openharmony-arm64@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-win32-arm64-msvc@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-win32-ia32-msvc@0.152.0':
+    optional: true
+
+  '@oxc-transform-react/binding-win32-x64-msvc@0.152.0':
+    optional: true
+
   '@oxfmt/binding-android-arm-eabi@0.66.0':
     optional: true
 
@@ -13606,10 +13789,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@6.1.2(@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))':
+  '@vitejs/plugin-react@6.1.2(@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(oxc-transform-react@0.152.0)':
     dependencies:
       '@rolldown/pluginutils': 1.0.1
       vite: '@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)'
+    optionalDependencies:
+      oxc-transform-react: 0.152.0
 
   '@vitest/browser-preview@4.1.11(@voidzero-dev/vite-plus-core@0.3.1(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1))(vitest@4.1.11)':
     dependencies:
@@ -16793,6 +16978,28 @@ snapshots:
       '@oxc-resolver/binding-win32-arm64-msvc': 11.24.2
       '@oxc-resolver/binding-win32-x64-msvc': 11.24.2
 
+  oxc-transform-react@0.152.0:
+    optionalDependencies:
+      '@oxc-transform-react/binding-android-arm-eabi': 0.152.0
+      '@oxc-transform-react/binding-android-arm64': 0.152.0
+      '@oxc-transform-react/binding-darwin-arm64': 0.152.0
+      '@oxc-transform-react/binding-darwin-x64': 0.152.0
+      '@oxc-transform-react/binding-freebsd-x64': 0.152.0
+      '@oxc-transform-react/binding-linux-arm-gnueabihf': 0.152.0
+      '@oxc-transform-react/binding-linux-arm-musleabihf': 0.152.0
+      '@oxc-transform-react/binding-linux-arm64-gnu': 0.152.0
+      '@oxc-transform-react/binding-linux-arm64-musl': 0.152.0
+      '@oxc-transform-react/binding-linux-ppc64-gnu': 0.152.0
+      '@oxc-transform-react/binding-linux-riscv64-gnu': 0.152.0
+      '@oxc-transform-react/binding-linux-riscv64-musl': 0.152.0
+      '@oxc-transform-react/binding-linux-s390x-gnu': 0.152.0
+      '@oxc-transform-react/binding-linux-x64-gnu': 0.152.0
+      '@oxc-transform-react/binding-linux-x64-musl': 0.152.0
+      '@oxc-transform-react/binding-openharmony-arm64': 0.152.0
+      '@oxc-transform-react/binding-win32-arm64-msvc': 0.152.0
+      '@oxc-transform-react/binding-win32-ia32-msvc': 0.152.0
+      '@oxc-transform-react/binding-win32-x64-msvc': 0.152.0
+
   oxfmt@0.66.0(vite-plus@0.3.1(@opentelemetry/api@1.9.1)(@types/node@26.6.5)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(typescript@7.0.2)(yaml@2.9.1)):
     dependencies:
       tinypool: 2.1.0
diff --git a/vite.config.ts b/vite.config.ts
index 2d7941cd..c381e795 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -70,6 +70,22 @@ const effectRules = {
 	"effecttsgo/lazy-effect": "off",
 } as const;
 
+const reactCompilerRules: DummyRuleMap = {
+	"react/globals": "error",
+	"react/hooks": "error",
+	"react/immutability": "error",
+	"react/memo-dependencies": "error",
+	"react/preserve-manual-memoization": "error",
+	"react/purity": "error",
+	"react/refs": "error",
+	"react/set-state-in-render": "error",
+	"react/static-components": "error",
+	"react/unsupported-syntax": "error",
+	// Not compiler bailouts; effects stay as they are until they are reviewed on their own.
+	"react/set-state-in-effect": "off",
+	"react-hooks/exhaustive-deps": "off",
+};
+
 // Tailwind rules for the web app, from @shadcn/lint and eslint-plugin-better-tailwindcss. shadcn's
 // components/ui stays as the generator wrote it. The checked rules are clean and gate `vp check`;
 // `vp run lint:tailwind` adds the rest until each is clean enough to join them.
@@ -113,12 +129,18 @@ export default defineConfig({
 			release: { command: "node scripts/release.mjs", cache: false },
 			// CI's check gate. Type-aware lint, like each package's typecheck, resolves aikit through
 			// its generated declarations, so they are built first.
+			// Dead files and dependencies everywhere, dead exports in the workspaces kept clean so far.
+			// Both read the same files and write nothing, so they run side by side.
+			"knip:check:all": {
+				command: 'node -e ""',
+				dependsOn: ["knip:check:files", "knip:check:exports"],
+				cache: false,
+			},
 			"lint:tailwind": { command: "CODEWORK_LINT_TAILWIND=1 vp lint apps/web/src", cache: false },
 			verify: {
 				command: [
 					"vp check packages scripts .github infra",
 					"vp run --filter './packages/*' --concurrency-limit 2 typecheck",
-					// Dead files, dependencies and exports, in the workspaces kept clean so far.
 					"vp run knip:check",
 				],
 				dependsOn: ["@codeworksh/aikit#build"],
@@ -148,6 +170,13 @@ export default defineConfig({
 				...(recommended.plugins && { plugins: recommended.plugins }),
 				rules: effectRules,
 			},
+			{
+				// The React Compiler memoizes apps/web; these are the rules its bailouts map to.
+				files: ["apps/web/src/**/*.{ts,tsx}"],
+				excludeFiles: ["apps/web/src/components/ui/**"],
+				plugins: ["react"],
+				rules: reactCompilerRules,
+			},
 			{
 				files: ["apps/web/src/**/*.tsx"],
 				excludeFiles: ["apps/web/src/components/ui/**"],