feat(surfaces): todo task list sidebar view

Add a dedicated "Tasks" sidebar view for the per-conversation todo surface
(model-maintained via todo_write tool; read-only, conversation-scoped).

- parseTodoPayload: pure parser for the rendererId: "todo" custom field
  (TodoItem { content, status, priority } — types defined FE-side, not in wire)
- TodoList.svelte: renders the task list with status indicators (spinner for
  in_progress, checkmark for completed, X for cancelled, empty circle for
  pending) + priority dots (red/yellow/gray)
- SurfaceView dispatches rendererId: "todo" to TodoList
- App.svelte: "Tasks" view kind (always visible; "No tasks yet" empty state),
  todo surface pulled out of the generic Extensions list, re-mounts per
  conversation via {#key}

681 tests green.

5 files changed, 244 insertions, 3 deletions

diff --git a/src/app/App.svelte b/src/app/App.svelte
index ee72ca5..2b3b250 100644
--- a/src/app/App.svelte
+++ b/src/app/App.svelte
@@ -30,6 +30,8 @@
 	} from "../features/smart-scroll";
 	import { manifest as surfaceHostManifest, SurfaceView } from "../features/surface-host";
 	import { parseMessageQueuePayload } from "../features/surface-host/logic/message-queue";
+	import { parseTodoPayload } from "../features/surface-host/logic/todo";
+	import TodoList from "../features/surface-host/ui/TodoList.svelte";
 	import { manifest as tabsManifest, TabBar } from "../features/tabs";
 	import { manifest as viewsManifest, ViewSidebar } from "../features/views";
 	import {
@@ -52,6 +54,8 @@
 	// out of the generic Extensions list and rendered as a compact panel above the
 	// composer — pending steering messages are tied to the chat, not the sidebar.
 	const MESSAGE_QUEUE_ID = "message-queue";
+	// The `todo` extension's per-conversation task list surface (model-maintained).
+	const TODO_ID = "todo";
 
 	// The view kinds offered in the sidebar's dropdown. Generic data — the
 	// `viewContent` snippet below maps each kind id to its renderer.
@@ -60,11 +64,12 @@
 		{ id: "lsp", label: "Language Servers" },
 		{ id: "extensions", label: "Extensions" },
 		{ id: "cache-warming", label: "Cache Warming" },
+		{ id: "tasks", label: "Tasks" },
 		{ id: "settings", label: "Settings" },
 	] as const;
 
-	// Default sidebar layout: Model, Language Servers, Extensions, Cache Warming, Settings.
-	const initialViews = ["model", "lsp", "extensions", "cache-warming", "settings"] as const;
+	// Default sidebar layout: Model, Language Servers, Extensions, Cache Warming, Tasks, Settings.
+	const initialViews = ["model", "lsp", "extensions", "cache-warming", "tasks", "settings"] as const;
 
 	// Frontend module list for the "Loaded Modules" view, AGGREGATED from each
 	// feature's public `manifest` export so it can't drift from what's actually
@@ -144,6 +149,16 @@
 		return data !== null && data.messages.length > 0;
 	});
 
+	// The todo surface spec + its parsed task list (model-maintained, read-only).
+	const todoSpec = $derived(store.surface(TODO_ID));
+	const todoData = $derived.by(() => {
+		const spec = todoSpec;
+		if (spec === null) return null;
+		const field = spec.fields.find((f) => f.kind === "custom" && f.rendererId === TODO_ID);
+		if (field === undefined || field.kind !== "custom") return null;
+		return parseTodoPayload(field.payload);
+	});
+
 	// Conversation/tab switch → snap to the bottom of the new transcript.
 	$effect(() => {
 		void store.activeConversationId;
@@ -386,7 +401,7 @@
 		</section>
 		<section class="mt-4 flex flex-col gap-3">
 			<h3 class="text-xs font-semibold uppercase opacity-60">Surfaces</h3>
-			{#each store.surfaces.filter((s) => s.id !== CACHE_WARMING_ID && s.id !== MESSAGE_QUEUE_ID) as spec (spec.id)}
+			{#each store.surfaces.filter((s) => s.id !== CACHE_WARMING_ID && s.id !== MESSAGE_QUEUE_ID && s.id !== TODO_ID) as spec (spec.id)}
 				<SurfaceView {spec} onInvoke={handleInvoke} />
 			{/each}
 		</section>
@@ -401,6 +416,15 @@
 				{warmNow}
 			/>
 		{/key}
+	{:else if kind === "tasks"}
+		<!-- Re-mount per conversation so the task list is isolated per conversation. -->
+		{#key store.activeConversationId}
+			{#if todoData !== null && todoData.todos.length > 0}
+				<TodoList payload={todoData} />
+			{:else}
+				<p class="text-xs opacity-60">No tasks yet.</p>
+			{/if}
+		{/key}
 	{:else if kind === "settings"}
 		<!-- FE-local settings. Not conversation-scoped (no {#key}: the chat limit is
 		     global), so the field stays mounted across tab switches. -->
diff --git a/src/features/surface-host/logic/todo.test.ts b/src/features/surface-host/logic/todo.test.ts
new file mode 100644
index 0000000..d310345
--- /dev/null
+++ b/src/features/surface-host/logic/todo.test.ts
@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { parseTodoPayload, type TodoItem } from "./todo";
+
+const item = (
+	content: string,
+	status: TodoItem["status"] = "pending",
+	priority: TodoItem["priority"] = "medium",
+): TodoItem => ({ content, status, priority });
+
+describe("parseTodoPayload", () => {
+	it("parses a well-formed payload with items", () => {
+		const data = parseTodoPayload({
+			todos: [
+				item("Write tests", "in_progress", "high"),
+				item("Ship it", "pending", "medium"),
+				item("Read docs", "completed", "low"),
+			],
+		});
+		expect(data).toEqual({
+			todos: [
+				item("Write tests", "in_progress", "high"),
+				item("Ship it", "pending", "medium"),
+				item("Read docs", "completed", "low"),
+			],
+		});
+	});
+
+	it("parses an empty-todos payload", () => {
+		expect(parseTodoPayload({ todos: [] })).toEqual({ todos: [] });
+	});
+
+	it("preserves item order", () => {
+		const data = parseTodoPayload({
+			todos: [item("a"), item("b"), item("c")],
+		});
+		expect(data?.todos.map((t) => t.content)).toEqual(["a", "b", "c"]);
+	});
+
+	it("accepts all four status values", () => {
+		const data = parseTodoPayload({
+			todos: [
+				item("p", "pending"),
+				item("i", "in_progress"),
+				item("c", "completed"),
+				item("x", "cancelled"),
+			],
+		});
+		expect(data?.todos.map((t) => t.status)).toEqual([
+			"pending",
+			"in_progress",
+			"completed",
+			"cancelled",
+		]);
+	});
+
+	it("accepts all three priority values", () => {
+		const data = parseTodoPayload({
+			todos: [
+				item("h", "pending", "high"),
+				item("m", "pending", "medium"),
+				item("l", "pending", "low"),
+			],
+		});
+		expect(data?.todos.map((t) => t.priority)).toEqual(["high", "medium", "low"]);
+	});
+
+	it.each([
+		["null", null],
+		["a number", 7],
+		["a string", "nope"],
+		["missing todos key", { foo: [] }],
+		["todos not an array", { todos: "x" }],
+		["entry not an object", { todos: ["x"] }],
+		["entry missing content", { todos: [{ status: "pending", priority: "low" }] }],
+		[
+			"entry with non-string content",
+			{ todos: [{ content: 1, status: "pending", priority: "low" }] },
+		],
+		["entry missing status", { todos: [{ content: "x", priority: "low" }] }],
+		["entry with invalid status", { todos: [item("x", "done" as never)] }],
+		["entry missing priority", { todos: [{ content: "x", status: "pending" }] }],
+		["entry with invalid priority", { todos: [item("x", "pending", "urgent" as never)] }],
+	])("returns null for invalid payload: %s", (_label, payload) => {
+		expect(parseTodoPayload(payload)).toBeNull();
+	});
+});
diff --git a/src/features/surface-host/logic/todo.ts b/src/features/surface-host/logic/todo.ts
new file mode 100644
index 0000000..b8e027b
--- /dev/null
+++ b/src/features/surface-host/logic/todo.ts
@@ -0,0 +1,58 @@
+/**
+ * Pure parser for the `rendererId: "todo"` custom-field payload.
+ *
+ * The `todo` backend extension maintains a per-conversation task list (written
+ * by the model via a `todo_write` tool) and exposes it as a read-only
+ * conversation-scoped surface with one `custom` field
+ * (`rendererId: "todo"`, `payload: TodoPayload`). This parser validates the
+ * untyped `payload: unknown` at the network seam so a hostile/partial payload
+ * can never crash the renderer (graceful skip → null).
+ *
+ * The `TodoItem` type is NOT in `@dispatch/wire` — it is defined by the `todo`
+ * extension and carried in the surface payload, so we define it here (the FE's
+ * rendering contract for the shape). Empty `todos` is a valid, parseable state
+ * (the model hasn't created a list / cleared it); the caller hides the panel.
+ */
+export type TodoStatus = "pending" | "in_progress" | "completed" | "cancelled";
+export type TodoPriority = "high" | "medium" | "low";
+
+export interface TodoItem {
+	readonly content: string;
+	readonly status: TodoStatus;
+	readonly priority: TodoPriority;
+}
+
+export interface TodoData {
+	readonly todos: readonly TodoItem[];
+}
+
+const STATUSES = new Set<string>(["pending", "in_progress", "completed", "cancelled"]);
+const PRIORITIES = new Set<string>(["high", "medium", "low"]);
+
+function isTodoItem(v: unknown): v is TodoItem {
+	if (typeof v !== "object" || v === null) return false;
+	const o = v as Record<string, unknown>;
+	return (
+		typeof o.content === "string" &&
+		typeof o.status === "string" &&
+		STATUSES.has(o.status) &&
+		typeof o.priority === "string" &&
+		PRIORITIES.has(o.priority)
+	);
+}
+
+export function parseTodoPayload(payload: unknown): TodoData | null {
+	if (typeof payload !== "object" || payload === null) return null;
+	const obj = payload as Record<string, unknown>;
+	const raw = obj.todos;
+	if (!Array.isArray(raw)) return null;
+	const todos: TodoItem[] = [];
+	for (const entry of raw) {
+		if (!isTodoItem(entry)) return null;
+		todos.push(entry);
+	}
+	return { todos };
+}
+
+/** The `rendererId` the `todo` extension's `custom` surface field uses. */
+export const TODO_RENDERER_ID = "todo";
diff --git a/src/features/surface-host/ui/SurfaceView.svelte b/src/features/surface-host/ui/SurfaceView.svelte
index e5f807a..3f92e3b 100644
--- a/src/features/surface-host/ui/SurfaceView.svelte
+++ b/src/features/surface-host/ui/SurfaceView.svelte
@@ -8,6 +8,7 @@
 	import Selector from "./Selector.svelte";
 	import StatTable from "./StatTable.svelte";
 	import SurfaceTable from "./SurfaceTable.svelte";
+	import TodoList from "./TodoList.svelte";
 	import Toggle from "./Toggle.svelte";
 
 	let {
@@ -43,6 +44,8 @@
 				<SurfaceTable payload={group.field.payload} />
 			{:else if group.field.rendererId === "message-queue"}
 				<MessageQueueList payload={group.field.payload} />
+			{:else if group.field.rendererId === "todo"}
+				<TodoList payload={group.field.payload} />
 			{/if}
 		{/if}
 	{/each}
diff --git a/src/features/surface-host/ui/TodoList.svelte b/src/features/surface-host/ui/TodoList.svelte
new file mode 100644
index 0000000..8dbd995
--- /dev/null
+++ b/src/features/surface-host/ui/TodoList.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { parseTodoPayload, type TodoPriority, type TodoStatus } from "../logic/todo";
+
+	let { payload }: { readonly payload: unknown } = $props();
+
+	const data = $derived(parseTodoPayload(payload));
+
+	const priorityDot: Record<TodoPriority, string> = {
+		high: "bg-error",
+		medium: "bg-warning",
+		low: "bg-base-content/30",
+	};
+</script>
+
+{#if data !== null && data.todos.length > 0}
+	<ul class="flex flex-col gap-1">
+		{#each data.todos as todo, i (i)}
+			<li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm">
+				<!-- Status indicator -->
+				<span class="mt-0.5 shrink-0">
+					{#if todo.status === "in_progress"}
+						<span class="loading loading-spinner loading-xs text-primary"></span>
+					{:else if todo.status === "completed"}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4 text-success"
+						>
+							<polyline points="20 6 9 17 4 12"></polyline>
+						</svg>
+					{:else if todo.status === "cancelled"}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4 text-base-content/40"
+						>
+							<line x1="18" y1="6" x2="6" y2="18"></line>
+							<line x1="6" y1="6" x2="18" y2="18"></line>
+						</svg>
+					{:else}
+						<!-- pending: empty circle -->
+						<span class="block h-4 w-4 rounded-full border-2 border-base-content/30"></span>
+					{/if}
+				</span>
+
+				<!-- Content -->
+				<span
+					class:flex-1={true}
+					class:line-through={todo.status === "completed" || todo.status === "cancelled"}
+					class:opacity-50={todo.status === "completed" || todo.status === "cancelled"}
+				>
+					{todo.content}
+				</span>
+
+				<!-- Priority dot -->
+				<span class="mt-1 h-2 w-2 shrink-0 rounded-full {priorityDot[todo.priority]}"></span>
+			</li>
+		{/each}
+	</ul>
+{/if}