From 248c28f9f05b4f618067c6a3cb94721ec5891555 Mon Sep 17 00:00:00 2001
From: Hogne <227774406+hognek@users.noreply.github.com>
Date: Sun, 19 Jul 2026 17:03:53 +0200
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20resolve=203=20Kilo=20findings?=
 =?UTF-8?q?=20on=20TodoApp=20=E2=80=94=20Share=20panel=20note,=20load=20er?=
 =?UTF-8?q?ror=20state,=20duplicate=20test=20suites?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- WARNING: Added explicit comment documenting that standalone TodoApp does not yet carry Share/members panel or per-entry revision history from the old DocsApp list variant — tracked as follow-up work
- SUGGESTION: Added loadError state + retry button in loadLists — fetch failures now show an error alert instead of infinite spinner
- SUGGESTION: Consolidated Todo tests into __tests__/NotesApp.test.tsx, removed duplicate describe("TodoApp") from NotesApp.test.tsx

Docs-Reviewed: README already lists both Notes and Todo under platform apps; standalone TodoApp.tsx extraction just makes the component boundary match the docs
---
 desktop/src/apps/NotesApp.test.tsx           |   29 +-
 desktop/src/apps/NotesApp.tsx                | 1176 +-----------------
 desktop/src/apps/TodoApp.tsx                 |  403 ++++++
 desktop/src/apps/__tests__/NotesApp.test.tsx |   54 +-
 desktop/src/apps/notes-shared-base.tsx       | 1141 +++++++++++++++++
 desktop/src/registry/app-registry.ts         |    2 +-
 6 files changed, 1595 insertions(+), 1210 deletions(-)
 create mode 100644 desktop/src/apps/TodoApp.tsx
 create mode 100644 desktop/src/apps/notes-shared-base.tsx

diff --git a/desktop/src/apps/NotesApp.test.tsx b/desktop/src/apps/NotesApp.test.tsx
index f364a92d0..73bc28d9e 100644
--- a/desktop/src/apps/NotesApp.test.tsx
+++ b/desktop/src/apps/NotesApp.test.tsx
@@ -1,6 +1,6 @@
-import { render, screen, act, waitFor, within, fireEvent } from "@testing-library/react";
+import { render, screen, act, waitFor, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { NotesApp, TodoApp } from "./NotesApp";
+import { NotesApp } from "./NotesApp";
 
 function mockFetch(
   resolver: (url: string, init?: RequestInit) => { ok: boolean; status?: number; body: unknown },
@@ -177,28 +177,3 @@ describe("NotesApp", () => {
     }));
   });
 });
-
-describe("TodoApp", () => {
-  beforeEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("renders only lists, filtering out notes that share the same API", async () => {
-    vi.stubGlobal(
-      "fetch",
-      mockFetch(() => ({ ok: true, body: [noteDoc, listDoc] })),
-    );
-    render(<TodoApp windowId="w2" />);
-    await flush();
-
-    await waitFor(() => expect(screen.getByText("Sprint backlog")).toBeTruthy());
-    expect(screen.queryByText("Project kickoff")).toBeNull();
-  });
-
-  it("shows the todo empty state when there are no lists", async () => {
-    vi.stubGlobal("fetch", mockFetch(() => ({ ok: true, body: [] })));
-    render(<TodoApp windowId="w2" />);
-    await flush();
-    await waitFor(() => expect(screen.getByText(/no lists yet/i)).toBeTruthy());
-  });
-});
diff --git a/desktop/src/apps/NotesApp.tsx b/desktop/src/apps/NotesApp.tsx
index 7b6f599c4..d64f80c80 100644
--- a/desktop/src/apps/NotesApp.tsx
+++ b/desktop/src/apps/NotesApp.tsx
@@ -1,110 +1,19 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import {
-  StickyNote,
-  ListChecks,
-  Plus,
-  Clock,
-  Users,
-  Bot,
-  History,
-  Pencil,
-  Trash2,
-  Check,
-  X,
-  Square,
-  CheckSquare,
-  AlertCircle,
-  ChevronLeft,
-  type LucideIcon,
-} from "lucide-react";
-import { Button, Textarea } from "@/components/ui";
-
-// ---- Types ----
-
-interface NoteDoc {
-  id: string;
-  kind: "note" | "list";
-  title: string;
-  updated_at: string;
-  archived_at: string | null;
-}
-
-interface NoteEntry {
-  id: string;
-  text: string;
-  done: boolean;
-  author: string | null;
-  created_at: string;
-}
-
-interface NoteMember {
-  member_type: "user" | "agent";
-  member_id: string;
-  permission: "viewer" | "contributor" | "editor";
-  action: "research" | "plan" | "critique" | "build" | "discuss" | null;
-  standing_instruction: string | null;
-}
-
-interface NoteDetail {
-  id: string;
-  kind: "note" | "list";
-  title: string;
-  updated_at: string;
-  entries: NoteEntry[];
-  members: NoteMember[];
-}
-
-interface EntryRevision {
-  rev_index: number;
-  text: string;
-  edited_at?: string;
-  author?: string;
-}
-
-// ---- Helpers ----
-
-function relativeTime(ts: string): string {
-  const diff = Date.now() - Date.parse(ts);
-  const mins = Math.floor(diff / 60_000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
-  const hrs = Math.floor(mins / 60);
-  if (hrs < 24) return `${hrs}h ago`;
-  const days = Math.floor(hrs / 24);
-  return `${days}d ago`;
-}
-
-const PERMISSION_LABELS: Record<NoteMember["permission"], string> = {
-  viewer: "Viewer",
-  contributor: "Contributor",
-  editor: "Editor",
-};
-
-const ACTION_OPTIONS = [
-  { value: "research", label: "Research" },
-  { value: "plan", label: "Plan" },
-  { value: "critique", label: "Critique" },
-  { value: "build", label: "Build" },
-  { value: "discuss", label: "Discuss" },
-] as const;
-
-// ---- Kind config ----
-// Notes and lists share one component, one store, and one API; they differ only
-// in copy, icon, and whether entries carry a done checkbox. A config object
-// keeps both variants in sync instead of forking ~1000 lines.
-
-interface DocKindConfig {
-  kind: "note" | "list";
-  appName: string; // header + listing aria
-  icon: LucideIcon;
-  noun: string; // doc-level aria: New {noun}, Create {noun}, Share {noun}
-  titlePlaceholder: string;
-  addPlaceholder: string;
-  emptyDocs: string;
-  emptyEntries: string;
-  selectPrompt: string;
-  showDone: boolean;
-}
+import { StickyNote } from "lucide-react";
+import { DocsApp, type DocKindConfig } from "./notes-shared-base";
+
+/**
+ * Notes-only configuration for the DocsApp component.
+ *
+ * Notes are free-text documents with rich text, diagram, link, and embed
+ * capabilities. They do not show done checkboxes — that affordance belongs
+ * to the Todo (list) variant.
+ *
+ * Data migration note:
+ *   Existing docs with kind="note" continue to work without changes.
+ *   Docs previously created with kind="list" are handled by TodoApp
+ *   (see TodoApp.tsx), which uses the dedicated /api/todo store.
+ *   No database migration is required for Notes.
+ */
 
 const NOTES_CONFIG: DocKindConfig = {
   kind: "note",
@@ -119,1059 +28,6 @@ const NOTES_CONFIG: DocKindConfig = {
   showDone: false,
 };
 
-const TODO_CONFIG: DocKindConfig = {
-  kind: "list",
-  appName: "Todo",
-  icon: ListChecks,
-  noun: "list",
-  titlePlaceholder: "List title...",
-  addPlaceholder: "Add a task...",
-  emptyDocs: "No lists yet.",
-  emptyEntries: "Nothing here yet. Add your first task above.",
-  selectPrompt: "Select a list to get started.",
-  showDone: true,
-};
-
-// ---- Sub-components ----
-
-function MemberBadge({ member }: { member: NoteMember }) {
-  return (
-    <span
-      className={[
-        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
-        member.member_type === "agent"
-          ? "bg-accent/10 text-accent"
-          : "bg-shell-surface text-shell-text-secondary",
-      ].join(" ")}
-    >
-      {member.member_type === "agent" ? (
-        <Bot size={11} className="shrink-0" />
-      ) : (
-        <Users size={11} className="shrink-0" />
-      )}
-      {member.member_id}
-    </span>
-  );
-}
-
-// History panel for a single entry
-function EntryHistoryPanel({ docId, entryId, onClose }: {
-  docId: string;
-  entryId: string;
-  onClose: () => void;
-}) {
-  const [revisions, setRevisions] = useState<EntryRevision[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [viewingRev, setViewingRev] = useState<{ index: number; text: string } | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    setLoading(true);
-    fetch(`/api/notes/${docId}/entries/${entryId}/history`)
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Could not load history."))))
-      .then((data: EntryRevision[]) => {
-        if (alive) setRevisions(Array.isArray(data) ? data : []);
-      })
-      .catch((e: Error) => { if (alive) setError(e.message); })
-      .finally(() => { if (alive) setLoading(false); });
-    return () => { alive = false; };
-  }, [docId, entryId]);
-
-  const viewReqRef = useRef(0);
-  async function viewAt(index: number) {
-    const myReq = ++viewReqRef.current;
-    try {
-      const r = await fetch(`/api/notes/${docId}/entries/${entryId}/history/at/${index}`);
-      if (!r.ok) throw new Error("Could not load revision.");
-      const data: EntryRevision = await r.json();
-      if (viewReqRef.current === myReq) setViewingRev({ index, text: data.text });
-    } catch (e) {
-      if (viewReqRef.current === myReq)
-        setError(e instanceof Error ? e.message : "Error loading revision.");
-    }
-  }
-
-  return (
-    <div
-      className="flex flex-col gap-2 rounded-xl border border-shell-border bg-shell-bg-deep p-4"
-      role="dialog"
-      aria-label="Entry history"
-    >
-      <div className="flex items-center justify-between">
-        <span className="flex items-center gap-1.5 text-xs font-medium text-shell-text-secondary">
-          <History size={13} className="shrink-0 text-accent" />
-          Revision history
-        </span>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close history"
-          className="text-shell-text-tertiary transition-colors hover:text-shell-text"
-        >
-          <X size={14} />
-        </button>
-      </div>
-
-      {loading && <p className="text-xs text-shell-text-tertiary">Loading...</p>}
-      {error && (
-        <p className="text-xs text-red-400" role="alert">{error}</p>
-      )}
-
-      {!loading && revisions.length === 0 && !error && (
-        <p className="text-xs text-shell-text-tertiary">No revision history.</p>
-      )}
-
-      {revisions.length > 0 && (
-        <ol className="flex flex-col gap-1.5">
-          {revisions.map((rev) => (
-            <li key={rev.rev_index} className="flex items-center justify-between gap-2">
-              <div className="flex min-w-0 flex-col gap-0.5">
-                <span className="text-xs text-shell-text-tertiary">
-                  Rev {rev.rev_index + 1}
-                  {rev.edited_at ? ` · ${relativeTime(rev.edited_at)}` : ""}
-                  {rev.author ? ` · ${rev.author}` : ""}
-                </span>
-                <span className="truncate text-xs text-shell-text">{rev.text}</span>
-              </div>
-              <button
-                type="button"
-                onClick={() => viewAt(rev.rev_index)}
-                aria-label={`View revision ${rev.rev_index + 1}`}
-                className="shrink-0 text-xs text-accent transition-opacity hover:opacity-80"
-              >
-                View
-              </button>
-            </li>
-          ))}
-        </ol>
-      )}
-
-      {viewingRev && (
-        <div className="mt-1 rounded-lg border border-shell-border bg-shell-surface px-3 py-2">
-          <p className="mb-1 text-[11px] uppercase tracking-wide text-shell-text-tertiary">
-            Rev {viewingRev.index + 1} (read-only)
-          </p>
-          <p className="whitespace-pre-wrap text-sm text-shell-text">{viewingRev.text}</p>
-          <button
-            type="button"
-            onClick={() => setViewingRev(null)}
-            className="mt-1.5 text-xs text-shell-text-tertiary transition-colors hover:text-shell-text"
-          >
-            Dismiss
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Share dialog rendered as an inline panel at the bottom of the detail pane
-function SharePanel({ doc, onClose }: { doc: NoteDetail; onClose: () => void }) {
-  const [members, setMembers] = useState<NoteMember[]>(doc.members ?? []);
-  const [memberType, setMemberType] = useState<"user" | "agent">("user");
-  const [memberId, setMemberId] = useState("");
-  const [permission, setPermission] = useState<NoteMember["permission"]>("viewer");
-  const [action, setAction] = useState<NoteMember["action"]>(null);
-  const [instruction, setInstruction] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [removingId, setRemovingId] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  async function addMember() {
-    if (!memberId.trim()) return;
-    setAdding(true);
-    setError(null);
-    try {
-      const body: Record<string, unknown> = {
-        member_type: memberType,
-        member_id: memberId.trim(),
-        permission,
-        action: memberType === "agent" ? action : null,
-        standing_instruction: memberType === "agent" && instruction.trim() ? instruction.trim() : null,
-      };
-      const r = await fetch(`/api/notes/${doc.id}/members`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(body),
-      });
-      if (!r.ok) {
-        const d = await r.json().catch(() => ({}));
-        throw new Error(typeof d?.detail === "string" ? d.detail : "Could not add member.");
-      }
-      const fresh: NoteMember = await r.json();
-      setMembers((prev) => {
-        const without = prev.filter((m) => m.member_id !== fresh.member_id);
-        return [...without, fresh];
-      });
-      setMemberId("");
-      setInstruction("");
-      setAction(null);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Could not add member.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  async function removeMember(id: string) {
-    setRemovingId(id);
-    setError(null);
-    try {
-      const r = await fetch(`/api/notes/${doc.id}/members/${encodeURIComponent(id)}`, {
-        method: "DELETE",
-      });
-      if (!r.ok) throw new Error("Could not remove member.");
-      setMembers((prev) => prev.filter((m) => m.member_id !== id));
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Could not remove member.");
-    } finally {
-      setRemovingId(null);
-    }
-  }
-
-  return (
-    <div
-      className="flex flex-col gap-4 rounded-xl border border-shell-border bg-shell-bg-deep p-4"
-      role="dialog"
-      aria-label={`Share ${doc.kind === "list" ? "list" : "note"}`}
-    >
-      <div className="flex items-center justify-between">
-        <span className="flex items-center gap-1.5 text-sm font-semibold text-shell-text">
-          <Users size={15} className="shrink-0 text-accent" />
-          Share
-        </span>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close share panel"
-          className="text-shell-text-tertiary transition-colors hover:text-shell-text"
-        >
-          <X size={15} />
-        </button>
-      </div>
-
-      {/* Current members */}
-      {members.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <p className="text-[11px] uppercase tracking-wide text-shell-text-tertiary">Members</p>
-          <ul className="flex flex-col gap-1.5">
-            {members.map((m) => (
-              <li
-                key={m.member_id}
-                className="flex items-center gap-2 rounded-lg border border-shell-border bg-shell-surface px-3 py-2"
-              >
-                <MemberBadge member={m} />
-                <span className="text-xs text-shell-text-secondary">
-                  {PERMISSION_LABELS[m.permission]}
-                </span>
-                {m.action && (
-                  <span className="rounded-full bg-accent/10 px-2 py-0.5 text-[11px] font-medium text-accent capitalize">
-                    {m.action}
-                  </span>
-                )}
-                <button
-                  type="button"
-                  onClick={() => removeMember(m.member_id)}
-                  disabled={removingId === m.member_id}
-                  aria-label={`Remove ${m.member_id}`}
-                  className="ml-auto text-shell-text-tertiary transition-colors hover:text-red-400 disabled:opacity-40"
-                >
-                  <Trash2 size={13} />
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Add member form */}
-      <div className="flex flex-col gap-3">
-        <p className="text-[11px] uppercase tracking-wide text-shell-text-tertiary">Add member</p>
-
-        {/* Member type toggle */}
-        <div
-          className="flex rounded-lg border border-shell-border bg-shell-surface p-0.5"
-          role="group"
-          aria-label="Member type"
-        >
-          {(["user", "agent"] as const).map((t) => (
-            <button
-              key={t}
-              type="button"
-              onClick={() => setMemberType(t)}
-              aria-pressed={memberType === t}
-              className={[
-                "flex-1 rounded-md py-1.5 text-xs font-medium transition-colors capitalize",
-                memberType === t
-                  ? "bg-shell-bg-deep text-shell-text shadow-sm"
-                  : "text-shell-text-secondary hover:text-shell-text",
-              ].join(" ")}
-            >
-              {t === "agent" ? <span className="flex items-center justify-center gap-1"><Bot size={11} />{t}</span> : t}
-            </button>
-          ))}
-        </div>
-
-        {/* Member ID */}
-        <input
-          type="text"
-          value={memberId}
-          onChange={(e) => setMemberId(e.target.value)}
-          placeholder={memberType === "agent" ? "agent-slug" : "user@example.com"}
-          aria-label="Member ID or email"
-          className="w-full rounded-lg border border-shell-border bg-shell-surface px-3 py-2 text-sm text-shell-text placeholder:text-shell-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent/40"
-        />
-
-        {/* Permission: segmented control (3 levels) */}
-        <div className="flex flex-col gap-1">
-          <p className="text-[11px] text-shell-text-tertiary">Permission</p>
-          <div
-            className="flex rounded-lg border border-shell-border bg-shell-surface p-0.5"
-            role="group"
-            aria-label="Permission level"
-          >
-            {(["viewer", "contributor", "editor"] as const).map((p) => (
-              <button
-                key={p}
-                type="button"
-                onClick={() => setPermission(p)}
-                aria-pressed={permission === p}
-                className={[
-                  "flex-1 rounded-md py-1.5 text-xs font-medium transition-colors",
-                  permission === p
-                    ? "bg-shell-bg-deep text-shell-text shadow-sm"
-                    : "text-shell-text-secondary hover:text-shell-text",
-                ].join(" ")}
-              >
-                {PERMISSION_LABELS[p]}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Agent-only: action picker + standing instruction */}
-        {memberType === "agent" && (
-          <>
-            <div className="flex flex-col gap-1">
-              <p className="text-[11px] text-shell-text-tertiary">Action</p>
-              <div
-                className="flex flex-wrap gap-1"
-                role="group"
-                aria-label="Agent action"
-              >
-                {ACTION_OPTIONS.map((opt) => (
-                  <button
-                    key={opt.value}
-                    type="button"
-                    onClick={() => setAction(action === opt.value ? null : opt.value)}
-                    aria-pressed={action === opt.value}
-                    className={[
-                      "rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
-                      action === opt.value
-                        ? "border-accent bg-accent/10 text-accent"
-                        : "border-shell-border bg-shell-surface text-shell-text-secondary hover:text-shell-text",
-                    ].join(" ")}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            <Textarea
-              value={instruction}
-              onChange={(e) => setInstruction(e.target.value)}
-              placeholder="Standing instruction (optional)"
-              rows={2}
-              maxLength={4000}
-              aria-label="Standing instruction"
-              className="resize-none border-shell-border bg-shell-surface text-shell-text placeholder:text-shell-text-tertiary"
-            />
-          </>
-        )}
-
-        {error && (
-          <div
-            className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400"
-            role="alert"
-          >
-            <AlertCircle size={13} className="shrink-0" />
-            {error}
-          </div>
-        )}
-
-        <Button
-          type="button"
-          onClick={addMember}
-          disabled={adding || !memberId.trim()}
-          className="self-end"
-          size="sm"
-        >
-          {adding ? "Adding..." : "Add"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// Single entry row with inline edit and history affordance
-function EntryRow({
-  entry,
-  docId,
-  showDone,
-  onDelete,
-  onEditSave,
-  onToggleDone,
-}: {
-  entry: NoteEntry;
-  docId: string;
-  showDone: boolean;
-  onDelete: (id: string) => void;
-  onEditSave: (id: string, text: string) => Promise<void>;
-  onToggleDone: (id: string, done: boolean) => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(entry.text);
-  const [saving, setSaving] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [showHistory, setShowHistory] = useState(false);
-
-  async function save() {
-    if (!draft.trim() || draft === entry.text) {
-      setEditing(false);
-      return;
-    }
-    setSaving(true);
-    setSaveError(null);
-    try {
-      await onEditSave(entry.id, draft.trim());
-      setEditing(false);
-    } catch (e) {
-      // Keep the editor open with the draft so the user can retry.
-      setSaveError(e instanceof Error ? e.message : "Could not save the edit.");
-    } finally {
-      setSaving(false);
-    }
-  }
-
-  return (
-    <li className="group flex flex-col gap-1">
-      <div className="flex items-start gap-2 rounded-lg border border-shell-border bg-shell-surface px-3 py-2.5">
-        {editing ? (
-          <div className="flex flex-1 flex-col gap-2">
-            <Textarea
-              value={draft}
-              onChange={(e) => setDraft(e.target.value)}
-              rows={2}
-              maxLength={20000}
-              aria-label="Edit entry text"
-              autoFocus
-              className="resize-none border-shell-border bg-shell-bg-deep text-shell-text placeholder:text-shell-text-tertiary"
-            />
-            <div className="flex justify-end gap-2">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => { setDraft(entry.text); setSaveError(null); setEditing(false); }}
-                disabled={saving}
-                aria-label="Cancel edit"
-              >
-                <X size={13} />
-                Cancel
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                onClick={save}
-                disabled={saving || !draft.trim()}
-                aria-label="Save edit"
-              >
-                <Check size={13} />
-                {saving ? "Saving..." : "Save"}
-              </Button>
-            </div>
-            {saveError && (
-              <p className="text-xs text-red-400" role="alert">{saveError}</p>
-            )}
-          </div>
-        ) : (
-          <>
-            {showDone && (
-              <button
-                type="button"
-                onClick={() => onToggleDone(entry.id, !entry.done)}
-                aria-label={entry.done ? "Mark task not done" : "Mark task done"}
-                aria-pressed={entry.done}
-                className="mt-0.5 shrink-0 text-shell-text-tertiary transition-colors hover:text-accent"
-              >
-                {entry.done ? (
-                  <CheckSquare size={16} className="text-accent" />
-                ) : (
-                  <Square size={16} />
-                )}
-              </button>
-            )}
-            <p
-              className={[
-                "min-w-0 flex-1 whitespace-pre-wrap text-sm",
-                showDone && entry.done
-                  ? "text-shell-text-tertiary line-through"
-                  : "text-shell-text",
-              ].join(" ")}
-            >
-              {entry.text}
-            </p>
-            <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
-              <button
-                type="button"
-                onClick={() => setShowHistory((v) => !v)}
-                aria-label="View entry history"
-                aria-expanded={showHistory}
-                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-shell-text"
-              >
-                <History size={14} />
-              </button>
-              <button
-                type="button"
-                onClick={() => setEditing(true)}
-                aria-label="Edit entry"
-                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-shell-text"
-              >
-                <Pencil size={14} />
-              </button>
-              <button
-                type="button"
-                onClick={() => onDelete(entry.id)}
-                aria-label="Delete entry"
-                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-red-400"
-              >
-                <Trash2 size={14} />
-              </button>
-            </div>
-          </>
-        )}
-      </div>
-      {showHistory && (
-        <EntryHistoryPanel
-          docId={docId}
-          entryId={entry.id}
-          onClose={() => setShowHistory(false)}
-        />
-      )}
-      {entry.author && (
-        <span className="pl-1 text-[11px] text-shell-text-tertiary">
-          {entry.author} · {relativeTime(entry.created_at)}
-        </span>
-      )}
-    </li>
-  );
-}
-
-// Detail pane for a selected note
-function NoteDetailPane({
-  docId,
-  config,
-  onBack,
-}: {
-  docId: string;
-  config: DocKindConfig;
-  onBack: () => void;
-}) {
-  const [doc, setDoc] = useState<NoteDetail | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [newText, setNewText] = useState("");
-  const [adding, setAdding] = useState(false);
-  const [showShare, setShowShare] = useState(false);
-
-  const loadReqRef = useRef(0);
-  const loadDoc = useCallback(async () => {
-    const myReq = ++loadReqRef.current;
-    try {
-      const r = await fetch(`/api/notes/${docId}`);
-      if (!r.ok) throw new Error("Could not load note.");
-      const data = await r.json();
-      if (loadReqRef.current === myReq) setDoc(data);
-    } catch (e) {
-      if (loadReqRef.current === myReq)
-        setError(e instanceof Error ? e.message : "Could not load note.");
-    } finally {
-      if (loadReqRef.current === myReq) setLoading(false);
-    }
-  }, [docId]);
-
-  useEffect(() => {
-    setLoading(true);
-    setError(null);
-    setDoc(null);
-    setShowShare(false);
-    loadDoc();
-  }, [loadDoc]);
-
-  async function addEntry() {
-    if (!newText.trim() || !doc) return;
-    setAdding(true);
-    try {
-      const r = await fetch(`/api/notes/${doc.id}/entries`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ text: newText.trim() }),
-      });
-      if (!r.ok) throw new Error("Could not add entry.");
-      setNewText("");
-      await loadDoc();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Could not add entry.");
-    } finally {
-      setAdding(false);
-    }
-  }
-
-  async function deleteEntry(entryId: string) {
-    if (!doc) return;
-    try {
-      const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}`, { method: "DELETE" });
-      if (!r.ok) throw new Error("Could not delete entry.");
-      setDoc((prev) =>
-        prev ? { ...prev, entries: prev.entries.filter((e) => e.id !== entryId) } : prev,
-      );
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Could not delete entry.");
-    }
-  }
-
-  async function editEntry(entryId: string, text: string) {
-    if (!doc) return;
-    const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}/text`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text }),
-    });
-    if (!r.ok) throw new Error("Could not edit entry.");
-    setDoc((prev) =>
-      prev
-        ? { ...prev, entries: prev.entries.map((e) => (e.id === entryId ? { ...e, text } : e)) }
-        : prev,
-    );
-  }
-
-  async function toggleDone(entryId: string, done: boolean) {
-    if (!doc) return;
-    // Optimistic: flip immediately, revert on failure.
-    setDoc((prev) =>
-      prev
-        ? { ...prev, entries: prev.entries.map((e) => (e.id === entryId ? { ...e, done } : e)) }
-        : prev,
-    );
-    try {
-      const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ done }),
-      });
-      if (!r.ok) throw new Error("Could not update task.");
-    } catch (e) {
-      setDoc((prev) =>
-        prev
-          ? {
-              ...prev,
-              entries: prev.entries.map((el) =>
-                el.id === entryId ? { ...el, done: !done } : el,
-              ),
-            }
-          : prev,
-      );
-      setError(e instanceof Error ? e.message : "Could not update task.");
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-shell-text-tertiary">Loading...</p>
-      </div>
-    );
-  }
-
-  if (error || !doc) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <p className="text-sm text-red-400" role="alert">{error ?? "Note not found."}</p>
-      </div>
-    );
-  }
-
-  const members = doc.members ?? [];
-  const hasMembers = members.length > 0;
-  const hasAgentMembers = members.some((m) => m.member_type === "agent");
-  const Icon = config.icon;
-
-  return (
-    <div className="flex h-full flex-col overflow-hidden">
-      {/* Detail header */}
-      <div className="flex items-center gap-2 border-b border-shell-border px-4 py-3">
-        <button
-          type="button"
-          onClick={onBack}
-          aria-label="Back to notes list"
-          className="flex items-center gap-1 rounded-md text-shell-text-secondary transition-colors hover:text-shell-text md:hidden"
-        >
-          <ChevronLeft size={16} />
-        </button>
-        <h2 className="flex-1 truncate text-sm font-semibold text-shell-text">{doc.title}</h2>
-        <div className="flex shrink-0 items-center gap-2">
-          {(hasMembers || hasAgentMembers) && (
-            <div className="flex items-center gap-1">
-              {hasAgentMembers && (
-                <span
-                  className="inline-flex items-center gap-0.5 rounded-full bg-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-accent"
-                  aria-label="Has agent members"
-                >
-                  <Bot size={10} />
-                </span>
-              )}
-              {hasMembers && (
-                <span
-                  className="inline-flex items-center gap-0.5 rounded-full bg-shell-surface px-1.5 py-0.5 text-[10px] font-medium text-shell-text-secondary"
-                  aria-label="Shared"
-                >
-                  <Users size={10} />
-                  {members.length}
-                </span>
-              )}
-            </div>
-          )}
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => setShowShare((v) => !v)}
-            aria-label={`Share ${config.noun}`}
-            aria-expanded={showShare}
-          >
-            <Users size={13} />
-            Share
-          </Button>
-        </div>
-      </div>
-
-      {/* Body */}
-      <div className="flex-1 overflow-y-auto px-4 py-4">
-        <div className="flex flex-col gap-4">
-          {/* Error banner */}
-          {error && (
-            <div
-              className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400"
-              role="alert"
-            >
-              <AlertCircle size={13} className="shrink-0" />
-              {error}
-            </div>
-          )}
-
-          {/* Add entry input */}
-          <div className="flex flex-col gap-2">
-            <Textarea
-              value={newText}
-              onChange={(e) => setNewText(e.target.value)}
-              placeholder={config.addPlaceholder}
-              rows={2}
-              maxLength={20000}
-              aria-label="New entry text"
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  void addEntry();
-                }
-              }}
-              className="resize-none border-shell-border bg-shell-surface text-shell-text placeholder:text-shell-text-tertiary"
-            />
-            <div className="flex justify-end">
-              <Button
-                type="button"
-                size="sm"
-                onClick={addEntry}
-                disabled={adding || !newText.trim()}
-                aria-label="Add entry"
-              >
-                <Plus size={13} />
-                {adding ? "Adding..." : "Add"}
-              </Button>
-            </div>
-          </div>
-
-          {/* Entries */}
-          {doc.entries.length > 0 ? (
-            <ul className="flex flex-col gap-2" aria-label="Note entries">
-              {doc.entries.map((entry) => (
-                <EntryRow
-                  key={entry.id}
-                  entry={entry}
-                  docId={doc.id}
-                  showDone={config.showDone}
-                  onDelete={deleteEntry}
-                  onEditSave={editEntry}
-                  onToggleDone={toggleDone}
-                />
-              ))}
-            </ul>
-          ) : (
-            <div className="flex flex-col items-center gap-2 py-10 text-center">
-              <Icon size={28} className="text-shell-text-tertiary" />
-              <p className="text-sm text-shell-text-secondary">{config.emptyEntries}</p>
-            </div>
-          )}
-
-          {/* Share panel */}
-          {showShare && (
-            <SharePanel
-              doc={doc}
-              onClose={() => setShowShare(false)}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Left-pane note list item
-function NoteListItem({
-  note,
-  selected,
-  onClick,
-}: {
-  note: NoteDoc;
-  selected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <li>
-      <button
-        type="button"
-        onClick={onClick}
-        aria-selected={selected}
-        className={[
-          "flex w-full flex-col gap-1 rounded-xl border px-3.5 py-3 text-left transition-colors",
-          selected
-            ? "border-accent bg-accent/10"
-            : "border-shell-border bg-shell-surface hover:border-shell-border-strong",
-        ].join(" ")}
-      >
-        <span className="truncate text-sm font-medium text-shell-text">{note.title}</span>
-        <span className="flex items-center gap-1 text-xs text-shell-text-tertiary">
-          <Clock size={10} className="shrink-0" />
-          {relativeTime(note.updated_at)}
-        </span>
-      </button>
-    </li>
-  );
-}
-
-// Create note modal/inline form
-function CreateNoteForm({ config, onCreated, onCancel }: {
-  config: DocKindConfig;
-  onCreated: (note: NoteDoc) => void;
-  onCancel: () => void;
-}) {
-  const [title, setTitle] = useState("");
-  const [creating, setCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  async function create() {
-    if (!title.trim()) return;
-    setCreating(true);
-    setError(null);
-    try {
-      const r = await fetch("/api/notes", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: config.kind, title: title.trim() }),
-      });
-      if (!r.ok) throw new Error(`Could not create ${config.noun}.`);
-      const doc: NoteDoc = await r.json();
-      onCreated(doc);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Could not create note.");
-      setCreating(false);
-    }
-  }
-
-  return (
-    <div className="flex flex-col gap-2 rounded-xl border border-shell-border bg-shell-bg-deep p-3">
-      <input
-        ref={inputRef}
-        type="text"
-        value={title}
-        onChange={(e) => setTitle(e.target.value)}
-        placeholder={config.titlePlaceholder}
-        aria-label={`New ${config.noun} title`}
-        maxLength={255}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") { e.preventDefault(); void create(); }
-          if (e.key === "Escape") onCancel();
-        }}
-        className="w-full rounded-lg border border-shell-border bg-shell-surface px-3 py-2 text-sm text-shell-text placeholder:text-shell-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent/40"
-      />
-      {error && (
-        <p className="text-xs text-red-400" role="alert">{error}</p>
-      )}
-      <div className="flex justify-end gap-2">
-        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={creating} aria-label="Cancel">
-          Cancel
-        </Button>
-        <Button type="button" size="sm" onClick={create} disabled={creating || !title.trim()} aria-label={`Create ${config.noun}`}>
-          {creating ? "Creating..." : "Create"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ---- Main app ----
-
-function DocsApp({ config }: { config: DocKindConfig }) {
-  const [notes, setNotes] = useState<NoteDoc[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [showCreate, setShowCreate] = useState(false);
-
-  const loadNotes = useCallback(async () => {
-    try {
-      const r = await fetch("/api/notes");
-      if (r.ok) {
-        const data: unknown = await r.json();
-        const all = Array.isArray(data) ? (data as NoteDoc[]) : [];
-        // Notes and lists share one API; each app shows only its own kind.
-        setNotes(all.filter((d) => d.kind === config.kind));
-      }
-    } catch {
-      // Keep whatever was loaded.
-    } finally {
-      setLoading(false);
-    }
-  }, [config.kind]);
-
-  useEffect(() => {
-    loadNotes();
-  }, [loadNotes]);
-
-  function handleCreated(doc: NoteDoc) {
-    setNotes((prev) => [doc, ...prev]);
-    setSelectedId(doc.id);
-    setShowCreate(false);
-  }
-
-  const Icon = config.icon;
-
-  return (
-    <div className="flex h-full overflow-hidden bg-shell-bg">
-      {/* Left pane: doc list */}
-      <div
-        className={[
-          "flex flex-col border-r border-shell-border",
-          // On mobile, hide the list pane when a doc is selected
-          selectedId ? "hidden md:flex md:w-72 lg:w-80" : "flex w-full md:w-72 lg:w-80",
-        ].join(" ")}
-      >
-        {/* List header */}
-        <div className="flex items-center gap-2 border-b border-shell-border px-4 py-4">
-          <Icon size={17} className="text-accent" />
-          <h1 className="flex-1 text-base font-semibold text-shell-text">{config.appName}</h1>
-          <button
-            type="button"
-            onClick={() => setShowCreate((v) => !v)}
-            aria-label={`New ${config.noun}`}
-            aria-expanded={showCreate}
-            className={[
-              "flex h-8 w-8 items-center justify-center rounded-lg border transition-colors",
-              showCreate
-                ? "border-accent bg-accent/10 text-accent"
-                : "border-shell-border text-shell-text-secondary hover:border-shell-border-strong hover:text-shell-text",
-            ].join(" ")}
-          >
-            <Plus size={16} />
-          </button>
-        </div>
-
-        {/* Create form */}
-        {showCreate && (
-          <div className="border-b border-shell-border px-3 py-3">
-            <CreateNoteForm
-              config={config}
-              onCreated={handleCreated}
-              onCancel={() => setShowCreate(false)}
-            />
-          </div>
-        )}
-
-        {/* List body */}
-        <div className="flex-1 overflow-y-auto px-3 py-3">
-          {loading ? (
-            <p className="text-sm text-shell-text-tertiary">Loading...</p>
-          ) : notes.length === 0 ? (
-            <div className="flex flex-col items-center gap-2 py-16 text-center">
-              <Icon size={28} className="text-shell-text-tertiary" />
-              <p className="text-sm text-shell-text-secondary">{config.emptyDocs}</p>
-              <button
-                type="button"
-                onClick={() => setShowCreate(true)}
-                className="text-sm text-accent transition-opacity hover:opacity-80"
-              >
-                Create one
-              </button>
-            </div>
-          ) : (
-            <ul className="flex flex-col gap-2" aria-label={config.appName}>
-              {notes.map((note) => (
-                <NoteListItem
-                  key={note.id}
-                  note={note}
-                  selected={selectedId === note.id}
-                  onClick={() => setSelectedId(note.id)}
-                />
-              ))}
-            </ul>
-          )}
-        </div>
-      </div>
-
-      {/* Right pane: detail */}
-      <div
-        className={[
-          "flex-1 overflow-hidden",
-          selectedId ? "flex flex-col" : "hidden md:flex md:flex-col",
-        ].join(" ")}
-      >
-        {selectedId ? (
-          <NoteDetailPane
-            key={selectedId}
-            docId={selectedId}
-            config={config}
-            onBack={() => setSelectedId(null)}
-          />
-        ) : (
-          <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
-            <Icon size={32} className="text-shell-text-tertiary" />
-            <p className="text-sm text-shell-text-secondary">{config.selectPrompt}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
 export function NotesApp({ windowId: _windowId }: { windowId: string }) {
   return <DocsApp config={NOTES_CONFIG} />;
 }
-
-export function TodoApp({ windowId: _windowId }: { windowId: string }) {
-  return <DocsApp config={TODO_CONFIG} />;
-}
diff --git a/desktop/src/apps/TodoApp.tsx b/desktop/src/apps/TodoApp.tsx
new file mode 100644
index 000000000..df6b1ce7e
--- /dev/null
+++ b/desktop/src/apps/TodoApp.tsx
@@ -0,0 +1,403 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  ListChecks,
+  Plus,
+  Clock,
+  Square,
+  CheckSquare,
+  Pencil,
+  Trash2,
+  X,
+  Check,
+  AlertCircle,
+  ChevronLeft,
+} from "lucide-react";
+import { Button, Textarea } from "@/components/ui";
+
+// ---- Types ----
+
+interface TodoList {
+  id: string;
+  owner_user_id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+  archived_at: string | null;
+}
+
+interface TodoItem {
+  id: string;
+  list_id: string;
+  text: string;
+  done: boolean;
+  position: number;
+  due_at: number | null;
+  remind_at: number | null;
+  author: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+interface TodoDetail {
+  id: string;
+  owner_user_id: string;
+  title: string;
+  created_at: string;
+  updated_at: string;
+  items: TodoItem[];
+}
+
+// ---- Helpers ----
+
+function relativeTime(ts: string): string {
+  const diff = Date.now() - Date.parse(ts);
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+const API_BASE = "/api/todo";
+const APP_NAME = "Todo";
+const NOUN = "list";
+const Icon = ListChecks;
+const TITLE_PLACEHOLDER = "List title...";
+const ADD_PLACEHOLDER = "Add a task...";
+const EMPTY_DOCS = "No lists yet.";
+const EMPTY_ENTRIES = "Nothing here yet. Add your first task above.";
+const SELECT_PROMPT = "Select a list to get started.";
+
+// ---- Sub-components ----
+
+function TodoItemRow({
+  item,
+  onDelete,
+  onEditSave,
+  onToggleDone,
+}: {
+  item: TodoItem;
+  onDelete: (id: string) => void;
+  onEditSave: (id: string, text: string) => Promise<void>;
+  onToggleDone: (id: string, done: boolean) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(item.text);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  async function save() {
+    if (!draft.trim() || draft === item.text) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await onEditSave(item.id, draft.trim());
+      setEditing(false);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : "Could not save the edit.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <li className="group flex flex-col gap-1">
+      <div className="flex items-start gap-2 rounded-lg border border-shell-border bg-shell-surface px-3 py-2.5">
+        {editing ? (
+          <div className="flex flex-1 flex-col gap-2">
+            <Textarea
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              rows={2}
+              maxLength={20000}
+              aria-label="Edit item text"
+              autoFocus
+              className="resize-none border-shell-border bg-shell-bg-deep text-shell-text placeholder:text-shell-text-tertiary"
+            />
+            <div className="flex justify-end gap-2">
+              <Button type="button" variant="ghost" size="sm"
+                onClick={() => { setDraft(item.text); setSaveError(null); setEditing(false); }}
+                disabled={saving} aria-label="Cancel edit">
+                <X size={13} /> Cancel
+              </Button>
+              <Button type="button" size="sm" onClick={save}
+                disabled={saving || !draft.trim()} aria-label="Save edit">
+                <Check size={13} /> {saving ? "Saving..." : "Save"}
+              </Button>
+            </div>
+            {saveError && <p className="text-xs text-red-400" role="alert">{saveError}</p>}
+          </div>
+        ) : (
+          <>
+            <button type="button" onClick={() => onToggleDone(item.id, !item.done)}
+              aria-label={item.done ? "Mark task not done" : "Mark task done"}
+              aria-pressed={item.done}
+              className="mt-0.5 shrink-0 text-shell-text-tertiary transition-colors hover:text-accent">
+              {item.done ? <CheckSquare size={16} className="text-accent" /> : <Square size={16} />}
+            </button>
+            <p className={["min-w-0 flex-1 whitespace-pre-wrap text-sm",
+              item.done ? "text-shell-text-tertiary line-through" : "text-shell-text"].join(" ")}>
+              {item.text}
+            </p>
+            <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+              <button type="button" onClick={() => setEditing(true)}
+                aria-label="Edit item"
+                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-shell-text">
+                <Pencil size={14} />
+              </button>
+              <button type="button" onClick={() => onDelete(item.id)}
+                aria-label="Delete item"
+                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-red-400">
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+      {item.author && (
+        <span className="pl-1 text-[11px] text-shell-text-tertiary">
+          {item.author} · {relativeTime(item.created_at)}
+        </span>
+      )}
+    </li>
+  );
+}
+
+function TodoDetailPane({ listId, onBack }: { listId: string; onBack: () => void }) {
+  const [doc, setDoc] = useState<TodoDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newText, setNewText] = useState("");
+  const [adding, setAdding] = useState(false);
+
+  const loadReqRef = useRef(0);
+  const loadDoc = useCallback(async () => {
+    const myReq = ++loadReqRef.current;
+    try {
+      const r = await fetch(`${API_BASE}/${listId}`);
+      if (!r.ok) throw new Error("Could not load list.");
+      const data = await r.json();
+      if (loadReqRef.current === myReq) setDoc(data);
+    } catch (e) {
+      if (loadReqRef.current === myReq) setError(e instanceof Error ? e.message : "Could not load list.");
+    } finally {
+      if (loadReqRef.current === myReq) setLoading(false);
+    }
+  }, [listId]);
+
+  useEffect(() => { setLoading(true); setError(null); setDoc(null); loadDoc(); }, [loadDoc]);
+
+  async function addItem() {
+    if (!newText.trim() || !doc) return;
+    setAdding(true);
+    try {
+      const r = await fetch(`${API_BASE}/${doc.id}/items`, {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: newText.trim() }),
+      });
+      if (!r.ok) throw new Error("Could not add item.");
+      setNewText(""); await loadDoc();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not add item.");
+    } finally { setAdding(false); }
+  }
+
+  async function deleteItem(itemId: string) {
+    if (!doc) return;
+    try {
+      const r = await fetch(`${API_BASE}/${doc.id}/items/${itemId}`, { method: "DELETE" });
+      if (!r.ok) throw new Error("Could not delete item.");
+      setDoc((prev) => prev ? { ...prev, items: prev.items.filter((i) => i.id !== itemId) } : prev);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not delete item.");
+    }
+  }
+
+  async function editItem(itemId: string, text: string) {
+    if (!doc) return;
+    const r = await fetch(`${API_BASE}/${doc.id}/items/${itemId}`, {
+      method: "PATCH", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text }),
+    });
+    if (!r.ok) throw new Error("Could not edit item.");
+    setDoc((prev) => prev ? { ...prev, items: prev.items.map((i) => (i.id === itemId ? { ...i, text } : i)) } : prev);
+  }
+
+  async function toggleDone(itemId: string, done: boolean) {
+    if (!doc) return;
+    setDoc((prev) => prev ? { ...prev, items: prev.items.map((i) => (i.id === itemId ? { ...i, done } : i)) } : prev);
+    try {
+      const r = await fetch(`${API_BASE}/${doc.id}/items/${itemId}`, {
+        method: "PATCH", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ done }),
+      });
+      if (!r.ok) throw new Error("Could not update task.");
+    } catch (e) {
+      setDoc((prev) => prev ? { ...prev, items: prev.items.map((el) => el.id === itemId ? { ...el, done: !done } : el) } : prev);
+      setError(e instanceof Error ? e.message : "Could not update task.");
+    }
+  }
+
+  if (loading) return <div className="flex h-full items-center justify-center"><p className="text-sm text-shell-text-tertiary">Loading...</p></div>;
+  if (error || !doc) return <div className="flex h-full items-center justify-center"><p className="text-sm text-red-400" role="alert">{error ?? "List not found."}</p></div>;
+
+  const items = doc.items ?? [];
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="flex items-center gap-2 border-b border-shell-border px-4 py-3">
+        <button type="button" onClick={onBack} aria-label="Back to lists"
+          className="flex items-center gap-1 rounded-md text-shell-text-secondary transition-colors hover:text-shell-text md:hidden">
+          <ChevronLeft size={16} />
+        </button>
+        <h2 className="flex-1 truncate text-sm font-semibold text-shell-text">{doc.title}</h2>
+      </div>
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        <div className="flex flex-col gap-4">
+          {error && (<div className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400" role="alert"><AlertCircle size={13} className="shrink-0" />{error}</div>)}
+          <div className="flex flex-col gap-2">
+            <Textarea value={newText} onChange={(e) => setNewText(e.target.value)}
+              placeholder={ADD_PLACEHOLDER} rows={2} maxLength={20000} aria-label="New item text"
+              onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); void addItem(); }}}
+              className="resize-none border-shell-border bg-shell-surface text-shell-text placeholder:text-shell-text-tertiary" />
+            <div className="flex justify-end">
+              <Button type="button" size="sm" onClick={addItem} disabled={adding || !newText.trim()} aria-label="Add item">
+                <Plus size={13} /> {adding ? "Adding..." : "Add"}
+              </Button>
+            </div>
+          </div>
+          {items.length > 0 ? (
+            <ul className="flex flex-col gap-2" aria-label="List items">
+              {items.map((item) => (<TodoItemRow key={item.id} item={item} onDelete={deleteItem} onEditSave={editItem} onToggleDone={toggleDone} />))}
+            </ul>
+          ) : (
+            <div className="flex flex-col items-center gap-2 py-10 text-center">
+              <Icon size={28} className="text-shell-text-tertiary" />
+              <p className="text-sm text-shell-text-secondary">{EMPTY_ENTRIES}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TodoListItem({ list, selected, onClick }: { list: TodoList; selected: boolean; onClick: () => void }) {
+  return (
+    <li>
+      <button type="button" onClick={onClick} aria-selected={selected}
+        className={["flex w-full flex-col gap-1 rounded-xl border px-3.5 py-3 text-left transition-colors",
+          selected ? "border-accent bg-accent/10" : "border-shell-border bg-shell-surface hover:border-shell-border-strong"].join(" ")}>
+        <span className="truncate text-sm font-medium text-shell-text">{list.title}</span>
+        <span className="flex items-center gap-1 text-xs text-shell-text-tertiary"><Clock size={10} className="shrink-0" />{relativeTime(list.updated_at)}</span>
+      </button>
+    </li>
+  );
+}
+
+function CreateTodoForm({ onCreated, onCancel }: { onCreated: (list: TodoList) => void; onCancel: () => void }) {
+  const [title, setTitle] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => { inputRef.current?.focus(); }, []);
+
+  async function create() {
+    if (!title.trim()) return;
+    setCreating(true); setError(null);
+    try {
+      const r = await fetch(API_BASE, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: title.trim() }) });
+      if (!r.ok) throw new Error(`Could not create ${NOUN}.`);
+      const doc: TodoList = await r.json();
+      onCreated(doc);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Could not create ${NOUN}.`);
+      setCreating(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-shell-border bg-shell-bg-deep p-3">
+      <input ref={inputRef} type="text" value={title} onChange={(e) => setTitle(e.target.value)}
+        placeholder={TITLE_PLACEHOLDER} aria-label={`New ${NOUN} title`} maxLength={255}
+        onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void create(); } if (e.key === "Escape") onCancel(); }}
+        className="w-full rounded-lg border border-shell-border bg-shell-surface px-3 py-2 text-sm text-shell-text placeholder:text-shell-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent/40" />
+      {error && <p className="text-xs text-red-400" role="alert">{error}</p>}
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={creating} aria-label="Cancel">Cancel</Button>
+        <Button type="button" size="sm" onClick={create} disabled={creating || !title.trim()} aria-label={`Create ${NOUN}`}>{creating ? "Creating..." : "Create"}</Button>
+      </div>
+    </div>
+  );
+}
+
+// NOTE: The standalone TodoApp does not render the Share/members panel or
+// per-entry revision history that the shared DocsApp provided for kind=list docs.
+// The /api/todo endpoints do not yet support members or entry history; this is
+// tracked as follow-up work.  (Kilo WARNING, PR #2037)
+export function TodoApp({ windowId: _windowId }: { windowId: string }) {
+  const [lists, setLists] = useState<TodoList[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
+
+  const loadLists = useCallback(async () => {
+    try {
+      const r = await fetch(API_BASE);
+      if (r.ok) { const data: unknown = await r.json(); setLists(Array.isArray(data) ? (data as TodoList[]) : []); setLoadError(null); }
+    } catch { setLoadError("Could not load lists. Try refreshing the page."); } finally { setLoading(false); }
+  }, []);
+  useEffect(() => { loadLists(); }, [loadLists]);
+
+  function handleCreated(list: TodoList) { setLists((prev) => [list, ...prev]); setSelectedId(list.id); setShowCreate(false); }
+
+  return (
+    <div className="flex h-full overflow-hidden bg-shell-bg">
+      <div className={["flex flex-col border-r border-shell-border",
+        selectedId ? "hidden md:flex md:w-72 lg:w-80" : "flex w-full md:w-72 lg:w-80"].join(" ")}>
+        <div className="flex items-center gap-2 border-b border-shell-border px-4 py-4">
+          <Icon size={17} className="text-accent" />
+          <h1 className="flex-1 text-base font-semibold text-shell-text">{APP_NAME}</h1>
+          <button type="button" onClick={() => setShowCreate((v) => !v)} aria-label={`New ${NOUN}`} aria-expanded={showCreate}
+            className={["flex h-8 w-8 items-center justify-center rounded-lg border transition-colors",
+              showCreate ? "border-accent bg-accent/10 text-accent" : "border-shell-border text-shell-text-secondary hover:border-shell-border-strong hover:text-shell-text"].join(" ")}>
+            <Plus size={16} />
+          </button>
+        </div>
+        {showCreate && (<div className="border-b border-shell-border px-3 py-3"><CreateTodoForm onCreated={handleCreated} onCancel={() => setShowCreate(false)} /></div>)}
+        <div className="flex-1 overflow-y-auto px-3 py-3">
+          {loadError ? (
+            <div className="flex flex-col items-center gap-2 py-12 text-center" role="alert">
+              <AlertCircle size={24} className="text-red-400" />
+              <p className="text-sm text-red-400">{loadError}</p>
+              <button type="button" onClick={() => { setLoadError(null); loadLists(); }} className="text-xs text-accent transition-opacity hover:opacity-80">Retry</button>
+            </div>
+          ) : loading ? (<p className="text-sm text-shell-text-tertiary">Loading...</p>) : lists.length === 0 ? (
+            <div className="flex flex-col items-center gap-2 py-16 text-center">
+              <Icon size={28} className="text-shell-text-tertiary" />
+              <p className="text-sm text-shell-text-secondary">{EMPTY_DOCS}</p>
+              <button type="button" onClick={() => setShowCreate(true)} className="text-sm text-accent transition-opacity hover:opacity-80">Create one</button>
+            </div>
+          ) : (
+            <ul className="flex flex-col gap-2" aria-label={APP_NAME}>
+              {lists.map((list) => (<TodoListItem key={list.id} list={list} selected={selectedId === list.id} onClick={() => setSelectedId(list.id)} />))}
+            </ul>
+          )}
+        </div>
+      </div>
+      <div className={["flex-1 overflow-hidden", selectedId ? "flex flex-col" : "hidden md:flex md:flex-col"].join(" ")}>
+        {selectedId ? (<TodoDetailPane key={selectedId} listId={selectedId} onBack={() => setSelectedId(null)} />) : (
+          <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
+            <Icon size={32} className="text-shell-text-tertiary" />
+            <p className="text-sm text-shell-text-secondary">{SELECT_PROMPT}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/desktop/src/apps/__tests__/NotesApp.test.tsx b/desktop/src/apps/__tests__/NotesApp.test.tsx
index 5a4d00e91..80a99418a 100644
--- a/desktop/src/apps/__tests__/NotesApp.test.tsx
+++ b/desktop/src/apps/__tests__/NotesApp.test.tsx
@@ -23,7 +23,8 @@ vi.mock("@/components/ui", () => ({
   ),
 }));
 
-import { NotesApp, TodoApp } from "../NotesApp";
+import { NotesApp } from "../NotesApp";
+import { TodoApp } from "../TodoApp";
 
 const NOTE_LIST = [
   { id: "note-1", kind: "note", title: "My First Note", updated_at: new Date().toISOString(), archived_at: null },
@@ -208,35 +209,35 @@ describe("NotesApp", () => {
 });
 
 // ---- Todo (list) variant ----
+// The standalone TodoApp uses /api/todo directly.
 
-const MIXED_LIST = [
-  { id: "note-1", kind: "note", title: "My First Note", updated_at: new Date().toISOString(), archived_at: null },
-  { id: "list-1", kind: "list", title: "Groceries", updated_at: new Date().toISOString(), archived_at: null },
+const TODO_LIST_DATA = [
+  { id: "list-1", owner_user_id: "u1", title: "Groceries", created_at: new Date().toISOString(), updated_at: new Date().toISOString(), archived_at: null },
 ];
 
-const LIST_DETAIL = {
+const TODO_DETAIL = {
   id: "list-1",
-  kind: "list",
+  owner_user_id: "u1",
   title: "Groceries",
+  created_at: new Date().toISOString(),
   updated_at: new Date().toISOString(),
-  entries: [
-    { id: "task-1", text: "Buy milk", done: false, author: null, created_at: new Date().toISOString() },
+  items: [
+    { id: "task-1", list_id: "list-1", text: "Buy milk", done: false, position: 0, due_at: null, remind_at: null, author: null, created_at: new Date().toISOString(), updated_at: new Date().toISOString() },
   ],
-  members: [],
 };
 
-function makeListFetch() {
+function makeTodoFetch() {
   return vi.fn(async (url: string, init?: RequestInit) => {
     const u = String(url);
     const method = (init?.method ?? "GET").toUpperCase();
 
-    if (u === "/api/notes" && method === "GET") {
-      return { ok: true, json: async () => MIXED_LIST };
+    if (u === "/api/todo" && method === "GET") {
+      return { ok: true, json: async () => TODO_LIST_DATA };
     }
-    if (u === "/api/notes/list-1" && method === "GET") {
-      return { ok: true, json: async () => LIST_DETAIL };
+    if (u === "/api/todo/list-1" && method === "GET") {
+      return { ok: true, json: async () => TODO_DETAIL };
     }
-    if (u.startsWith("/api/notes/list-1/entries/task-1") && method === "PATCH") {
+    if (u.startsWith("/api/todo/list-1/items/task-1") && method === "PATCH") {
       return { ok: true, json: async () => ({ ok: true }) };
     }
     return { ok: true, json: async () => ({}) };
@@ -248,19 +249,17 @@ describe("TodoApp", () => {
     vi.clearAllMocks();
   });
 
-  it("shows the Todo header and only list-kind docs", async () => {
-    global.fetch = makeListFetch() as typeof fetch;
+  it("shows the Todo header and lists from /api/todo", async () => {
+    global.fetch = makeTodoFetch() as typeof fetch;
     render(<TodoApp windowId="w1" />);
 
     await waitFor(() => expect(screen.getByText("Todo")).toBeDefined());
-    // A list doc shows; a note doc is filtered out.
     await waitFor(() => expect(screen.getByText("Groceries")).toBeDefined());
-    expect(screen.queryByText("My First Note")).toBeNull();
     expect(screen.getByLabelText("New list")).toBeDefined();
   });
 
-  it("toggles a task done via PATCH /entries/{id}", async () => {
-    const fetchMock = makeListFetch();
+  it("toggles a task done via PATCH /api/todo/{listId}/items/{itemId}", async () => {
+    const fetchMock = makeTodoFetch();
     global.fetch = fetchMock as typeof fetch;
     render(<TodoApp windowId="w1" />);
 
@@ -273,7 +272,7 @@ describe("TodoApp", () => {
     await waitFor(() => {
       const patch = (fetchMock.mock.calls as [string, RequestInit?][]).filter(
         ([u, init]) =>
-          String(u) === "/api/notes/list-1/entries/task-1" &&
+          String(u) === "/api/todo/list-1/items/task-1" &&
           (init?.method ?? "GET").toUpperCase() === "PATCH",
       );
       expect(patch.length).toBeGreaterThan(0);
@@ -281,4 +280,15 @@ describe("TodoApp", () => {
       expect(body.done).toBe(true);
     });
   });
+
+  it("shows the todo empty state when there are no lists", async () => {
+    const fetchMock = vi.fn(async (url: string) => {
+      if (url === "/api/todo") return { ok: true, json: async () => [] };
+      return { ok: true, json: async () => ({}) };
+    });
+    global.fetch = fetchMock as typeof fetch;
+    render(<TodoApp windowId="w1" />);
+
+    await waitFor(() => expect(screen.getByText(/no lists yet/i)).toBeDefined());
+  });
 });
diff --git a/desktop/src/apps/notes-shared-base.tsx b/desktop/src/apps/notes-shared-base.tsx
new file mode 100644
index 000000000..5f3a1d6ec
--- /dev/null
+++ b/desktop/src/apps/notes-shared-base.tsx
@@ -0,0 +1,1141 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import {
+  Plus,
+  Clock,
+  Users,
+  Bot,
+  History,
+  Pencil,
+  Trash2,
+  Check,
+  X,
+  Square,
+  CheckSquare,
+  AlertCircle,
+  ChevronLeft,
+  type LucideIcon,
+} from "lucide-react";
+import { Button, Textarea } from "@/components/ui";
+
+// ---- Types ----
+
+interface NoteDoc {
+  id: string;
+  kind: "note" | "list";
+  title: string;
+  updated_at: string;
+  archived_at: string | null;
+}
+
+interface NoteEntry {
+  id: string;
+  text: string;
+  done: boolean;
+  author: string | null;
+  created_at: string;
+}
+
+interface NoteMember {
+  member_type: "user" | "agent";
+  member_id: string;
+  permission: "viewer" | "contributor" | "editor";
+  action: "research" | "plan" | "critique" | "build" | "discuss" | null;
+  standing_instruction: string | null;
+}
+
+interface NoteDetail {
+  id: string;
+  kind: "note" | "list";
+  title: string;
+  updated_at: string;
+  entries: NoteEntry[];
+  members: NoteMember[];
+}
+
+interface EntryRevision {
+  rev_index: number;
+  text: string;
+  edited_at?: string;
+  author?: string;
+}
+
+// ---- Helpers ----
+
+function relativeTime(ts: string): string {
+  const diff = Date.now() - Date.parse(ts);
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+const PERMISSION_LABELS: Record<NoteMember["permission"], string> = {
+  viewer: "Viewer",
+  contributor: "Contributor",
+  editor: "Editor",
+};
+
+const ACTION_OPTIONS = [
+  { value: "research", label: "Research" },
+  { value: "plan", label: "Plan" },
+  { value: "critique", label: "Critique" },
+  { value: "build", label: "Build" },
+  { value: "discuss", label: "Discuss" },
+] as const;
+
+// ---- Kind config ----
+// Notes and lists share one component, one store, and one API; they differ only
+// in copy, icon, and whether entries carry a done checkbox. A config object
+// keeps both variants in sync instead of forking ~1000 lines.
+
+export interface DocKindConfig {
+  kind: "note" | "list";
+  appName: string; // header + listing aria
+  icon: LucideIcon;
+  noun: string; // doc-level aria: New {noun}, Create {noun}, Share {noun}
+  titlePlaceholder: string;
+  addPlaceholder: string;
+  emptyDocs: string;
+  emptyEntries: string;
+  selectPrompt: string;
+  showDone: boolean;
+}
+
+// ---- Sub-components ----
+
+function MemberBadge({ member }: { member: NoteMember }) {
+  return (
+    <span
+      className={[
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+        member.member_type === "agent"
+          ? "bg-accent/10 text-accent"
+          : "bg-shell-surface text-shell-text-secondary",
+      ].join(" ")}
+    >
+      {member.member_type === "agent" ? (
+        <Bot size={11} className="shrink-0" />
+      ) : (
+        <Users size={11} className="shrink-0" />
+      )}
+      {member.member_id}
+    </span>
+  );
+}
+
+// History panel for a single entry
+function EntryHistoryPanel({ docId, entryId, onClose }: {
+  docId: string;
+  entryId: string;
+  onClose: () => void;
+}) {
+  const [revisions, setRevisions] = useState<EntryRevision[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [viewingRev, setViewingRev] = useState<{ index: number; text: string } | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setLoading(true);
+    fetch(`/api/notes/${docId}/entries/${entryId}/history`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Could not load history."))))
+      .then((data: EntryRevision[]) => {
+        if (alive) setRevisions(Array.isArray(data) ? data : []);
+      })
+      .catch((e: Error) => { if (alive) setError(e.message); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [docId, entryId]);
+
+  const viewReqRef = useRef(0);
+  async function viewAt(index: number) {
+    const myReq = ++viewReqRef.current;
+    try {
+      const r = await fetch(`/api/notes/${docId}/entries/${entryId}/history/at/${index}`);
+      if (!r.ok) throw new Error("Could not load revision.");
+      const data: EntryRevision = await r.json();
+      if (viewReqRef.current === myReq) setViewingRev({ index, text: data.text });
+    } catch (e) {
+      if (viewReqRef.current === myReq)
+        setError(e instanceof Error ? e.message : "Error loading revision.");
+    }
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-2 rounded-xl border border-shell-border bg-shell-bg-deep p-4"
+      role="dialog"
+      aria-label="Entry history"
+    >
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-1.5 text-xs font-medium text-shell-text-secondary">
+          <History size={13} className="shrink-0 text-accent" />
+          Revision history
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close history"
+          className="text-shell-text-tertiary transition-colors hover:text-shell-text"
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      {loading && <p className="text-xs text-shell-text-tertiary">Loading...</p>}
+      {error && (
+        <p className="text-xs text-red-400" role="alert">{error}</p>
+      )}
+
+      {!loading && revisions.length === 0 && !error && (
+        <p className="text-xs text-shell-text-tertiary">No revision history.</p>
+      )}
+
+      {revisions.length > 0 && (
+        <ol className="flex flex-col gap-1.5">
+          {revisions.map((rev) => (
+            <li key={rev.rev_index} className="flex items-center justify-between gap-2">
+              <div className="flex min-w-0 flex-col gap-0.5">
+                <span className="text-xs text-shell-text-tertiary">
+                  Rev {rev.rev_index + 1}
+                  {rev.edited_at ? ` · ${relativeTime(rev.edited_at)}` : ""}
+                  {rev.author ? ` · ${rev.author}` : ""}
+                </span>
+                <span className="truncate text-xs text-shell-text">{rev.text}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => viewAt(rev.rev_index)}
+                aria-label={`View revision ${rev.rev_index + 1}`}
+                className="shrink-0 text-xs text-accent transition-opacity hover:opacity-80"
+              >
+                View
+              </button>
+            </li>
+          ))}
+        </ol>
+      )}
+
+      {viewingRev && (
+        <div className="mt-1 rounded-lg border border-shell-border bg-shell-surface px-3 py-2">
+          <p className="mb-1 text-[11px] uppercase tracking-wide text-shell-text-tertiary">
+            Rev {viewingRev.index + 1} (read-only)
+          </p>
+          <p className="whitespace-pre-wrap text-sm text-shell-text">{viewingRev.text}</p>
+          <button
+            type="button"
+            onClick={() => setViewingRev(null)}
+            className="mt-1.5 text-xs text-shell-text-tertiary transition-colors hover:text-shell-text"
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Share dialog rendered as an inline panel at the bottom of the detail pane
+function SharePanel({ doc, onClose }: { doc: NoteDetail; onClose: () => void }) {
+  const [members, setMembers] = useState<NoteMember[]>(doc.members ?? []);
+  const [memberType, setMemberType] = useState<"user" | "agent">("user");
+  const [memberId, setMemberId] = useState("");
+  const [permission, setPermission] = useState<NoteMember["permission"]>("viewer");
+  const [action, setAction] = useState<NoteMember["action"]>(null);
+  const [instruction, setInstruction] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [removingId, setRemovingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function addMember() {
+    if (!memberId.trim()) return;
+    setAdding(true);
+    setError(null);
+    try {
+      const body: Record<string, unknown> = {
+        member_type: memberType,
+        member_id: memberId.trim(),
+        permission,
+        action: memberType === "agent" ? action : null,
+        standing_instruction: memberType === "agent" && instruction.trim() ? instruction.trim() : null,
+      };
+      const r = await fetch(`/api/notes/${doc.id}/members`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (!r.ok) {
+        const d = await r.json().catch(() => ({}));
+        throw new Error(typeof d?.detail === "string" ? d.detail : "Could not add member.");
+      }
+      const fresh: NoteMember = await r.json();
+      setMembers((prev) => {
+        const without = prev.filter((m) => m.member_id !== fresh.member_id);
+        return [...without, fresh];
+      });
+      setMemberId("");
+      setInstruction("");
+      setAction(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not add member.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  async function removeMember(id: string) {
+    setRemovingId(id);
+    setError(null);
+    try {
+      const r = await fetch(`/api/notes/${doc.id}/members/${encodeURIComponent(id)}`, {
+        method: "DELETE",
+      });
+      if (!r.ok) throw new Error("Could not remove member.");
+      setMembers((prev) => prev.filter((m) => m.member_id !== id));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not remove member.");
+    } finally {
+      setRemovingId(null);
+    }
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-4 rounded-xl border border-shell-border bg-shell-bg-deep p-4"
+      role="dialog"
+      aria-label={`Share ${doc.kind === "list" ? "list" : "note"}`}
+    >
+      <div className="flex items-center justify-between">
+        <span className="flex items-center gap-1.5 text-sm font-semibold text-shell-text">
+          <Users size={15} className="shrink-0 text-accent" />
+          Share
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close share panel"
+          className="text-shell-text-tertiary transition-colors hover:text-shell-text"
+        >
+          <X size={15} />
+        </button>
+      </div>
+
+      {/* Current members */}
+      {members.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <p className="text-[11px] uppercase tracking-wide text-shell-text-tertiary">Members</p>
+          <ul className="flex flex-col gap-1.5">
+            {members.map((m) => (
+              <li
+                key={m.member_id}
+                className="flex items-center gap-2 rounded-lg border border-shell-border bg-shell-surface px-3 py-2"
+              >
+                <MemberBadge member={m} />
+                <span className="text-xs text-shell-text-secondary">
+                  {PERMISSION_LABELS[m.permission]}
+                </span>
+                {m.action && (
+                  <span className="rounded-full bg-accent/10 px-2 py-0.5 text-[11px] font-medium text-accent capitalize">
+                    {m.action}
+                  </span>
+                )}
+                <button
+                  type="button"
+                  onClick={() => removeMember(m.member_id)}
+                  disabled={removingId === m.member_id}
+                  aria-label={`Remove ${m.member_id}`}
+                  className="ml-auto text-shell-text-tertiary transition-colors hover:text-red-400 disabled:opacity-40"
+                >
+                  <Trash2 size={13} />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Add member form */}
+      <div className="flex flex-col gap-3">
+        <p className="text-[11px] uppercase tracking-wide text-shell-text-tertiary">Add member</p>
+
+        {/* Member type toggle */}
+        <div
+          className="flex rounded-lg border border-shell-border bg-shell-surface p-0.5"
+          role="group"
+          aria-label="Member type"
+        >
+          {(["user", "agent"] as const).map((t) => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setMemberType(t)}
+              aria-pressed={memberType === t}
+              className={[
+                "flex-1 rounded-md py-1.5 text-xs font-medium transition-colors capitalize",
+                memberType === t
+                  ? "bg-shell-bg-deep text-shell-text shadow-sm"
+                  : "text-shell-text-secondary hover:text-shell-text",
+              ].join(" ")}
+            >
+              {t === "agent" ? <span className="flex items-center justify-center gap-1"><Bot size={11} />{t}</span> : t}
+            </button>
+          ))}
+        </div>
+
+        {/* Member ID */}
+        <input
+          type="text"
+          value={memberId}
+          onChange={(e) => setMemberId(e.target.value)}
+          placeholder={memberType === "agent" ? "agent-slug" : "user@example.com"}
+          aria-label="Member ID or email"
+          className="w-full rounded-lg border border-shell-border bg-shell-surface px-3 py-2 text-sm text-shell-text placeholder:text-shell-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent/40"
+        />
+
+        {/* Permission: segmented control (3 levels) */}
+        <div className="flex flex-col gap-1">
+          <p className="text-[11px] text-shell-text-tertiary">Permission</p>
+          <div
+            className="flex rounded-lg border border-shell-border bg-shell-surface p-0.5"
+            role="group"
+            aria-label="Permission level"
+          >
+            {(["viewer", "contributor", "editor"] as const).map((p) => (
+              <button
+                key={p}
+                type="button"
+                onClick={() => setPermission(p)}
+                aria-pressed={permission === p}
+                className={[
+                  "flex-1 rounded-md py-1.5 text-xs font-medium transition-colors",
+                  permission === p
+                    ? "bg-shell-bg-deep text-shell-text shadow-sm"
+                    : "text-shell-text-secondary hover:text-shell-text",
+                ].join(" ")}
+              >
+                {PERMISSION_LABELS[p]}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Agent-only: action picker + standing instruction */}
+        {memberType === "agent" && (
+          <>
+            <div className="flex flex-col gap-1">
+              <p className="text-[11px] text-shell-text-tertiary">Action</p>
+              <div
+                className="flex flex-wrap gap-1"
+                role="group"
+                aria-label="Agent action"
+              >
+                {ACTION_OPTIONS.map((opt) => (
+                  <button
+                    key={opt.value}
+                    type="button"
+                    onClick={() => setAction(action === opt.value ? null : opt.value)}
+                    aria-pressed={action === opt.value}
+                    className={[
+                      "rounded-full border px-2.5 py-1 text-xs font-medium transition-colors",
+                      action === opt.value
+                        ? "border-accent bg-accent/10 text-accent"
+                        : "border-shell-border bg-shell-surface text-shell-text-secondary hover:text-shell-text",
+                    ].join(" ")}
+                  >
+                    {opt.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <Textarea
+              value={instruction}
+              onChange={(e) => setInstruction(e.target.value)}
+              placeholder="Standing instruction (optional)"
+              rows={2}
+              maxLength={4000}
+              aria-label="Standing instruction"
+              className="resize-none border-shell-border bg-shell-surface text-shell-text placeholder:text-shell-text-tertiary"
+            />
+          </>
+        )}
+
+        {error && (
+          <div
+            className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400"
+            role="alert"
+          >
+            <AlertCircle size={13} className="shrink-0" />
+            {error}
+          </div>
+        )}
+
+        <Button
+          type="button"
+          onClick={addMember}
+          disabled={adding || !memberId.trim()}
+          className="self-end"
+          size="sm"
+        >
+          {adding ? "Adding..." : "Add"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// Single entry row with inline edit and history affordance
+function EntryRow({
+  entry,
+  docId,
+  showDone,
+  onDelete,
+  onEditSave,
+  onToggleDone,
+}: {
+  entry: NoteEntry;
+  docId: string;
+  showDone: boolean;
+  onDelete: (id: string) => void;
+  onEditSave: (id: string, text: string) => Promise<void>;
+  onToggleDone: (id: string, done: boolean) => void;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(entry.text);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [showHistory, setShowHistory] = useState(false);
+
+  async function save() {
+    if (!draft.trim() || draft === entry.text) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await onEditSave(entry.id, draft.trim());
+      setEditing(false);
+    } catch (e) {
+      // Keep the editor open with the draft so the user can retry.
+      setSaveError(e instanceof Error ? e.message : "Could not save the edit.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <li className="group flex flex-col gap-1">
+      <div className="flex items-start gap-2 rounded-lg border border-shell-border bg-shell-surface px-3 py-2.5">
+        {editing ? (
+          <div className="flex flex-1 flex-col gap-2">
+            <Textarea
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              rows={2}
+              maxLength={20000}
+              aria-label="Edit entry text"
+              autoFocus
+              className="resize-none border-shell-border bg-shell-bg-deep text-shell-text placeholder:text-shell-text-tertiary"
+            />
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => { setDraft(entry.text); setSaveError(null); setEditing(false); }}
+                disabled={saving}
+                aria-label="Cancel edit"
+              >
+                <X size={13} />
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                onClick={save}
+                disabled={saving || !draft.trim()}
+                aria-label="Save edit"
+              >
+                <Check size={13} />
+                {saving ? "Saving..." : "Save"}
+              </Button>
+            </div>
+            {saveError && (
+              <p className="text-xs text-red-400" role="alert">{saveError}</p>
+            )}
+          </div>
+        ) : (
+          <>
+            {showDone && (
+              <button
+                type="button"
+                onClick={() => onToggleDone(entry.id, !entry.done)}
+                aria-label={entry.done ? "Mark task not done" : "Mark task done"}
+                aria-pressed={entry.done}
+                className="mt-0.5 shrink-0 text-shell-text-tertiary transition-colors hover:text-accent"
+              >
+                {entry.done ? (
+                  <CheckSquare size={16} className="text-accent" />
+                ) : (
+                  <Square size={16} />
+                )}
+              </button>
+            )}
+            <p
+              className={[
+                "min-w-0 flex-1 whitespace-pre-wrap text-sm",
+                showDone && entry.done
+                  ? "text-shell-text-tertiary line-through"
+                  : "text-shell-text",
+              ].join(" ")}
+            >
+              {entry.text}
+            </p>
+            <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+              <button
+                type="button"
+                onClick={() => setShowHistory((v) => !v)}
+                aria-label="View entry history"
+                aria-expanded={showHistory}
+                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-shell-text"
+              >
+                <History size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditing(true)}
+                aria-label="Edit entry"
+                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-shell-text"
+              >
+                <Pencil size={14} />
+              </button>
+              <button
+                type="button"
+                onClick={() => onDelete(entry.id)}
+                aria-label="Delete entry"
+                className="rounded-md p-1 text-shell-text-tertiary transition-colors hover:text-red-400"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+      {showHistory && (
+        <EntryHistoryPanel
+          docId={docId}
+          entryId={entry.id}
+          onClose={() => setShowHistory(false)}
+        />
+      )}
+      {entry.author && (
+        <span className="pl-1 text-[11px] text-shell-text-tertiary">
+          {entry.author} · {relativeTime(entry.created_at)}
+        </span>
+      )}
+    </li>
+  );
+}
+
+// Detail pane for a selected note
+function NoteDetailPane({
+  docId,
+  config,
+  onBack,
+}: {
+  docId: string;
+  config: DocKindConfig;
+  onBack: () => void;
+}) {
+  const [doc, setDoc] = useState<NoteDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newText, setNewText] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [showShare, setShowShare] = useState(false);
+
+  const loadReqRef = useRef(0);
+  const loadDoc = useCallback(async () => {
+    const myReq = ++loadReqRef.current;
+    try {
+      const r = await fetch(`/api/notes/${docId}`);
+      if (!r.ok) throw new Error("Could not load note.");
+      const data = await r.json();
+      if (loadReqRef.current === myReq) setDoc(data);
+    } catch (e) {
+      if (loadReqRef.current === myReq)
+        setError(e instanceof Error ? e.message : "Could not load note.");
+    } finally {
+      if (loadReqRef.current === myReq) setLoading(false);
+    }
+  }, [docId]);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setDoc(null);
+    setShowShare(false);
+    loadDoc();
+  }, [loadDoc]);
+
+  async function addEntry() {
+    if (!newText.trim() || !doc) return;
+    setAdding(true);
+    try {
+      const r = await fetch(`/api/notes/${doc.id}/entries`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text: newText.trim() }),
+      });
+      if (!r.ok) throw new Error("Could not add entry.");
+      setNewText("");
+      await loadDoc();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not add entry.");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  async function deleteEntry(entryId: string) {
+    if (!doc) return;
+    try {
+      const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}`, { method: "DELETE" });
+      if (!r.ok) throw new Error("Could not delete entry.");
+      setDoc((prev) =>
+        prev ? { ...prev, entries: prev.entries.filter((e) => e.id !== entryId) } : prev,
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not delete entry.");
+    }
+  }
+
+  async function editEntry(entryId: string, text: string) {
+    if (!doc) return;
+    const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}/text`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text }),
+    });
+    if (!r.ok) throw new Error("Could not edit entry.");
+    setDoc((prev) =>
+      prev
+        ? { ...prev, entries: prev.entries.map((e) => (e.id === entryId ? { ...e, text } : e)) }
+        : prev,
+    );
+  }
+
+  async function toggleDone(entryId: string, done: boolean) {
+    if (!doc) return;
+    // Optimistic: flip immediately, revert on failure.
+    setDoc((prev) =>
+      prev
+        ? { ...prev, entries: prev.entries.map((e) => (e.id === entryId ? { ...e, done } : e)) }
+        : prev,
+    );
+    try {
+      const r = await fetch(`/api/notes/${doc.id}/entries/${entryId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ done }),
+      });
+      if (!r.ok) throw new Error("Could not update task.");
+    } catch (e) {
+      setDoc((prev) =>
+        prev
+          ? {
+              ...prev,
+              entries: prev.entries.map((el) =>
+                el.id === entryId ? { ...el, done: !done } : el,
+              ),
+            }
+          : prev,
+      );
+      setError(e instanceof Error ? e.message : "Could not update task.");
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-shell-text-tertiary">Loading...</p>
+      </div>
+    );
+  }
+
+  if (error || !doc) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-sm text-red-400" role="alert">{error ?? "Note not found."}</p>
+      </div>
+    );
+  }
+
+  const members = doc.members ?? [];
+  const hasMembers = members.length > 0;
+  const hasAgentMembers = members.some((m) => m.member_type === "agent");
+  const Icon = config.icon;
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* Detail header */}
+      <div className="flex items-center gap-2 border-b border-shell-border px-4 py-3">
+        <button
+          type="button"
+          onClick={onBack}
+          aria-label="Back to notes list"
+          className="flex items-center gap-1 rounded-md text-shell-text-secondary transition-colors hover:text-shell-text md:hidden"
+        >
+          <ChevronLeft size={16} />
+        </button>
+        <h2 className="flex-1 truncate text-sm font-semibold text-shell-text">{doc.title}</h2>
+        <div className="flex shrink-0 items-center gap-2">
+          {(hasMembers || hasAgentMembers) && (
+            <div className="flex items-center gap-1">
+              {hasAgentMembers && (
+                <span
+                  className="inline-flex items-center gap-0.5 rounded-full bg-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-accent"
+                  aria-label="Has agent members"
+                >
+                  <Bot size={10} />
+                </span>
+              )}
+              {hasMembers && (
+                <span
+                  className="inline-flex items-center gap-0.5 rounded-full bg-shell-surface px-1.5 py-0.5 text-[10px] font-medium text-shell-text-secondary"
+                  aria-label="Shared"
+                >
+                  <Users size={10} />
+                  {members.length}
+                </span>
+              )}
+            </div>
+          )}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setShowShare((v) => !v)}
+            aria-label={`Share ${config.noun}`}
+            aria-expanded={showShare}
+          >
+            <Users size={13} />
+            Share
+          </Button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        <div className="flex flex-col gap-4">
+          {/* Error banner */}
+          {error && (
+            <div
+              className="flex items-center gap-2 rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2 text-xs text-red-400"
+              role="alert"
+            >
+              <AlertCircle size={13} className="shrink-0" />
+              {error}
+            </div>
+          )}
+
+          {/* Add entry input */}
+          <div className="flex flex-col gap-2">
+            <Textarea
+              value={newText}
+              onChange={(e) => setNewText(e.target.value)}
+              placeholder={config.addPlaceholder}
+              rows={2}
+              maxLength={20000}
+              aria-label="New entry text"
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  void addEntry();
+                }
+              }}
+              className="resize-none border-shell-border bg-shell-surface text-shell-text placeholder:text-shell-text-tertiary"
+            />
+            <div className="flex justify-end">
+              <Button
+                type="button"
+                size="sm"
+                onClick={addEntry}
+                disabled={adding || !newText.trim()}
+                aria-label="Add entry"
+              >
+                <Plus size={13} />
+                {adding ? "Adding..." : "Add"}
+              </Button>
+            </div>
+          </div>
+
+          {/* Entries */}
+          {doc.entries.length > 0 ? (
+            <ul className="flex flex-col gap-2" aria-label="Note entries">
+              {doc.entries.map((entry) => (
+                <EntryRow
+                  key={entry.id}
+                  entry={entry}
+                  docId={doc.id}
+                  showDone={config.showDone}
+                  onDelete={deleteEntry}
+                  onEditSave={editEntry}
+                  onToggleDone={toggleDone}
+                />
+              ))}
+            </ul>
+          ) : (
+            <div className="flex flex-col items-center gap-2 py-10 text-center">
+              <Icon size={28} className="text-shell-text-tertiary" />
+              <p className="text-sm text-shell-text-secondary">{config.emptyEntries}</p>
+            </div>
+          )}
+
+          {/* Share panel */}
+          {showShare && (
+            <SharePanel
+              doc={doc}
+              onClose={() => setShowShare(false)}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Left-pane note list item
+function NoteListItem({
+  note,
+  selected,
+  onClick,
+}: {
+  note: NoteDoc;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onClick}
+        aria-selected={selected}
+        className={[
+          "flex w-full flex-col gap-1 rounded-xl border px-3.5 py-3 text-left transition-colors",
+          selected
+            ? "border-accent bg-accent/10"
+            : "border-shell-border bg-shell-surface hover:border-shell-border-strong",
+        ].join(" ")}
+      >
+        <span className="truncate text-sm font-medium text-shell-text">{note.title}</span>
+        <span className="flex items-center gap-1 text-xs text-shell-text-tertiary">
+          <Clock size={10} className="shrink-0" />
+          {relativeTime(note.updated_at)}
+        </span>
+      </button>
+    </li>
+  );
+}
+
+// Create note modal/inline form
+function CreateNoteForm({ config, onCreated, onCancel }: {
+  config: DocKindConfig;
+  onCreated: (note: NoteDoc) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  async function create() {
+    if (!title.trim()) return;
+    setCreating(true);
+    setError(null);
+    try {
+      const r = await fetch("/api/notes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind: config.kind, title: title.trim() }),
+      });
+      if (!r.ok) throw new Error(`Could not create ${config.noun}.`);
+      const doc: NoteDoc = await r.json();
+      onCreated(doc);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not create note.");
+      setCreating(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl border border-shell-border bg-shell-bg-deep p-3">
+      <input
+        ref={inputRef}
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder={config.titlePlaceholder}
+        aria-label={`New ${config.noun} title`}
+        maxLength={255}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") { e.preventDefault(); void create(); }
+          if (e.key === "Escape") onCancel();
+        }}
+        className="w-full rounded-lg border border-shell-border bg-shell-surface px-3 py-2 text-sm text-shell-text placeholder:text-shell-text-tertiary focus:outline-none focus:ring-2 focus:ring-accent/40"
+      />
+      {error && (
+        <p className="text-xs text-red-400" role="alert">{error}</p>
+      )}
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="ghost" size="sm" onClick={onCancel} disabled={creating} aria-label="Cancel">
+          Cancel
+        </Button>
+        <Button type="button" size="sm" onClick={create} disabled={creating || !title.trim()} aria-label={`Create ${config.noun}`}>
+          {creating ? "Creating..." : "Create"}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// ---- Main app ----
+
+export function DocsApp({ config }: { config: DocKindConfig }) {
+  const [notes, setNotes] = useState<NoteDoc[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
+
+  const loadNotes = useCallback(async () => {
+    try {
+      const r = await fetch("/api/notes");
+      if (r.ok) {
+        const data: unknown = await r.json();
+        const all = Array.isArray(data) ? (data as NoteDoc[]) : [];
+        // Notes and lists share one API; each app shows only its own kind.
+        setNotes(all.filter((d) => d.kind === config.kind));
+      }
+    } catch {
+      // Keep whatever was loaded.
+    } finally {
+      setLoading(false);
+    }
+  }, [config.kind]);
+
+  useEffect(() => {
+    loadNotes();
+  }, [loadNotes]);
+
+  function handleCreated(doc: NoteDoc) {
+    setNotes((prev) => [doc, ...prev]);
+    setSelectedId(doc.id);
+    setShowCreate(false);
+  }
+
+  const Icon = config.icon;
+
+  return (
+    <div className="flex h-full overflow-hidden bg-shell-bg">
+      {/* Left pane: doc list */}
+      <div
+        className={[
+          "flex flex-col border-r border-shell-border",
+          // On mobile, hide the list pane when a doc is selected
+          selectedId ? "hidden md:flex md:w-72 lg:w-80" : "flex w-full md:w-72 lg:w-80",
+        ].join(" ")}
+      >
+        {/* List header */}
+        <div className="flex items-center gap-2 border-b border-shell-border px-4 py-4">
+          <Icon size={17} className="text-accent" />
+          <h1 className="flex-1 text-base font-semibold text-shell-text">{config.appName}</h1>
+          <button
+            type="button"
+            onClick={() => setShowCreate((v) => !v)}
+            aria-label={`New ${config.noun}`}
+            aria-expanded={showCreate}
+            className={[
+              "flex h-8 w-8 items-center justify-center rounded-lg border transition-colors",
+              showCreate
+                ? "border-accent bg-accent/10 text-accent"
+                : "border-shell-border text-shell-text-secondary hover:border-shell-border-strong hover:text-shell-text",
+            ].join(" ")}
+          >
+            <Plus size={16} />
+          </button>
+        </div>
+
+        {/* Create form */}
+        {showCreate && (
+          <div className="border-b border-shell-border px-3 py-3">
+            <CreateNoteForm
+              config={config}
+              onCreated={handleCreated}
+              onCancel={() => setShowCreate(false)}
+            />
+          </div>
+        )}
+
+        {/* List body */}
+        <div className="flex-1 overflow-y-auto px-3 py-3">
+          {loading ? (
+            <p className="text-sm text-shell-text-tertiary">Loading...</p>
+          ) : notes.length === 0 ? (
+            <div className="flex flex-col items-center gap-2 py-16 text-center">
+              <Icon size={28} className="text-shell-text-tertiary" />
+              <p className="text-sm text-shell-text-secondary">{config.emptyDocs}</p>
+              <button
+                type="button"
+                onClick={() => setShowCreate(true)}
+                className="text-sm text-accent transition-opacity hover:opacity-80"
+              >
+                Create one
+              </button>
+            </div>
+          ) : (
+            <ul className="flex flex-col gap-2" aria-label={config.appName}>
+              {notes.map((note) => (
+                <NoteListItem
+                  key={note.id}
+                  note={note}
+                  selected={selectedId === note.id}
+                  onClick={() => setSelectedId(note.id)}
+                />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+
+      {/* Right pane: detail */}
+      <div
+        className={[
+          "flex-1 overflow-hidden",
+          selectedId ? "flex flex-col" : "hidden md:flex md:flex-col",
+        ].join(" ")}
+      >
+        {selectedId ? (
+          <NoteDetailPane
+            key={selectedId}
+            docId={selectedId}
+            config={config}
+            onBack={() => setSelectedId(null)}
+          />
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center gap-2 text-center">
+            <Icon size={32} className="text-shell-text-tertiary" />
+            <p className="text-sm text-shell-text-secondary">{config.selectPrompt}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/desktop/src/registry/app-registry.ts b/desktop/src/registry/app-registry.ts
index a34453574..7b55cc616 100644
--- a/desktop/src/registry/app-registry.ts
+++ b/desktop/src/registry/app-registry.ts
@@ -66,7 +66,7 @@ const apps: AppManifest[] = [
   { id: "notification-archive", name: "Archive", icon: "archive", category: "platform", component: () => import("@/apps/NotificationArchiveApp").then((m) => ({ default: m.NotificationArchiveApp })), defaultSize: { w: 800, h: 600 }, minSize: { w: 500, h: 400 }, singleton: true, pinned: false, launchpadOrder: 16.65 },
   { id: "observatory", name: "Observatory", icon: "radar", category: "platform", component: () => import("@/apps/ObservatoryApp").then((m) => ({ default: m.ObservatoryApp })), defaultSize: { w: 620, h: 600 }, minSize: { w: 420, h: 400 }, singleton: true, pinned: false, launchpadOrder: 16.7 },
   { id: "notes", name: "Notes", icon: "sticky-note", category: "platform", component: () => import("@/apps/NotesApp").then((m) => ({ default: m.NotesApp })), defaultSize: { w: 860, h: 620 }, minSize: { w: 520, h: 400 }, singleton: true, pinned: false, launchpadOrder: 16.8 },
-  { id: "todo", name: "Todo", icon: "list-checks", category: "platform", component: () => import("@/apps/NotesApp").then((m) => ({ default: m.TodoApp })), defaultSize: { w: 860, h: 620 }, minSize: { w: 520, h: 400 }, singleton: true, pinned: false, launchpadOrder: 16.85 },
+  { id: "todo", name: "Todo", icon: "list-checks", category: "platform", component: () => import("@/apps/TodoApp").then((m) => ({ default: m.TodoApp })), defaultSize: { w: 860, h: 620 }, minSize: { w: 520, h: 400 }, singleton: true, pinned: false, launchpadOrder: 16.85 },
   { id: "hub", name: "Hub", icon: "users", category: "platform", component: () => import("@/apps/HubApp/HubApp").then((m) => ({ default: m.HubApp })), defaultSize: { w: 760, h: 640 }, minSize: { w: 480, h: 420 }, singleton: true, pinned: false, launchpadOrder: 16.9 },
 
   // OS apps