From 1b09eea04911d73cdf3f979d4f19dcf5dc20c461 Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Sun, 21 Jun 2026 14:21:53 +0900 Subject: feat(surfaces): todo task list sidebar view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/app/App.svelte | 30 ++++++++- src/features/surface-host/logic/todo.test.ts | 86 +++++++++++++++++++++++++ src/features/surface-host/logic/todo.ts | 58 +++++++++++++++++ src/features/surface-host/ui/SurfaceView.svelte | 3 + src/features/surface-host/ui/TodoList.svelte | 70 ++++++++++++++++++++ 5 files changed, 244 insertions(+), 3 deletions(-) create mode 100644 src/features/surface-host/logic/todo.test.ts create mode 100644 src/features/surface-host/logic/todo.ts create mode 100644 src/features/surface-host/ui/TodoList.svelte 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 @@

Surfaces

- {#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)} {/each}
@@ -401,6 +416,15 @@ {warmNow} /> {/key} + {:else if kind === "tasks"} + + {#key store.activeConversationId} + {#if todoData !== null && todoData.todos.length > 0} + + {:else} +

No tasks yet.

+ {/if} + {/key} {:else if kind === "settings"} 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(["pending", "in_progress", "completed", "cancelled"]); +const PRIORITIES = new Set(["high", "medium", "low"]); + +function isTodoItem(v: unknown): v is TodoItem { + if (typeof v !== "object" || v === null) return false; + const o = v as Record; + 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; + 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 @@ {:else if group.field.rendererId === "message-queue"} + {:else if group.field.rendererId === "todo"} + {/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 @@ + + +{#if data !== null && data.todos.length > 0} +
    + {#each data.todos as todo, i (i)} +
  • + + + {#if todo.status === "in_progress"} + + {:else if todo.status === "completed"} + + + + {:else if todo.status === "cancelled"} + + + + + {:else} + + + {/if} + + + + + {todo.content} + + + + +
    • + {/each} +
+{/if} -- cgit v1.2.3