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/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 ++++++++++++++++++++ 4 files changed, 217 insertions(+) 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 (limited to 'src/features') 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