feat(tui): compact todo panel above the prompt

CHANGELOG.md

@@ -33,6 +33,15 @@ file is the human-readable summary of what changed and why.
 
 ### TUI
 
+- **Compact TODO panel above the prompt** — while the sidebar is hidden and the
+  session has unfinished todos, up to 4 items around the active one now render
+  directly above the input, with a summary line such as
+  `2 of 6 finished · ctrl+b to show full TODO` (or
+  `still 6 items in the TODO list · …` before anything is done). The full list
+  stays in the sidebar (`ctrl+b`). The prompt-footer hint now reports only
+  modified files, since the panel covers todos.
+  ([#150](https://github.com/quickbeard/codev-code/pull/150))
+
 - **`ctrl+v` pastes into dialog prompts** — dialog text fields (the API key and
   base URL prompts in `/connect` and the custom-provider and configure flows,
   workspace names, …) previously relied entirely on the terminal performing a

DIVERGENCES.md

@@ -98,7 +98,7 @@ from the squash message first, or use a plain merge.
 | `packages/tui/src/app.tsx` | Terminal title "OpenCode"/"OC \|" → "CoDev Code"/"CC \|"; the configure-gate effect is a stateless forced-setup invariant — while `sync.status === "complete" && !useConnected() && dialog.stack.length === 0` it (re)opens the fork's `DialogConfigure` (component/dialog-configure.tsx, new file), so escaping any gate-launched flow or a credential-only save bounces back to the gate instead of an unconfigured chat (gates on `!useConnected()`, not `provider.length === 0` — hosted Zen free models always register); added the `codev.configure` command (`/configure`) and a `CODEV_CONFIGURE=1` mount hook for `codev configure`; home screen skipped — plain startup seeds the `dummy` session route and auto-opens a new empty session (reusing a leftover default-titled empty one via `openNewSession`/`findEmptySession`), `session.new` and the current-session `session.deleted` handler open a new session instead of navigating home, and the `-c` resolver prefers non-default-titled sessions so it lands on the last real conversation; added the `app.exit.confirm` command + `EXIT_CONFIRM_WINDOW` const (double-press Ctrl+C to quit: first press shows a toast, second within 1.5 s exits) and gathered its `app_exit_confirm` binding alongside `app_exit` | Tab title branding; first-run setup is a forced gate the user can't escape into an unconfigured chat (the invariant reopens it); `codev` starts directly in the session layout instead of the home screen; a stray Ctrl+C no longer quits on the first press. | Keep our strings, the invariant gate effect, dialog swap + command block, route seed, `openNewSession`/`findEmptySession` + call sites, the `-c` default-title filter, and the `app.exit.confirm` command + binding; take upstream's surrounding changes. |
 | `packages/tui/src/routes/session/index.tsx` | Flow transcript: the scrollbox opens with a home-like banner (`Logo` + `home_bottom` tips slot, `placement="start"`) as its first entry for root sessions (subagent sessions keep a plain 1-row pad), its `maxHeight` is clamped to the content height (a `transcriptHeight` signal read off the content's yoga node in the renderer root's `layout-changed` handler, which then re-runs `calculateLayout` so the clamp lands in the same frame — `scrollHeight` is a frame stale there, and painting with a stale clamp flickers during streaming) so the `Prompt` rides directly below the last message, and a trailing flexGrow spacer absorbs the leftover space until content fills the screen (then the prompt is effectively bottom-anchored and the banner scrolls away with history); the session `Prompt` gets home's `placeholder` pool when the session has no messages so the input shows an `Ask anything... "<suggestion>"` placeholder like home | Startup lands in an empty session instead of the home screen; the transcript flows top-down like terminal scrollback — logo top-left, input following the conversation down — instead of a bottom-anchored prompt with a void above it. | Keep our banner block inside the scrollbox, the `transcriptHeight` clamp + `layout-changed` listener, the trailing spacer, and the `placeholders` prop; take upstream's surrounding changes. |
 | `packages/tui/src/routes/session/index.tsx` | Sidebar visibility is session-local: removed upstream's persisted `kv.signal<"auto" \| "hide">("sidebar", "auto")` (and the `sidebar() === "auto" && wide()` branch of `sidebarVisible`); visibility is driven only by the non-persisted `sidebarOpen` signal, which the `session.sidebar.toggle` command flips (supersedes the earlier `"auto"` → `"hide"` default change) | The right sidebar starts hidden in every session regardless of terminal width or what the user did last session; `ctrl+b`/`<leader>b` only affects the current session. A stale `sidebar` key in existing kv.json files is simply never read. | Keep the kv signal removed and `sidebarVisible` reading only `parentID` + `sidebarOpen`; take upstream's surrounding changes. |
-| `packages/tui/src/routes/session/index.tsx` | Sidebar hint in the prompt footer: a `sidebarHint` memo (active-todo count from `sync.data.todo`, modified-file count from `sync.data.session_diff`, only when the sidebar is hidden and the session isn't a subagent; the label text comes from `sidebarHintLabel` in the fork-only `routes/session/sidebar-hint.ts`) plus a `sidebarShortcut` (`useCommandShortcut("session.sidebar.toggle")`), passed as the `Prompt`'s previously unused `hint` prop — e.g. `ctrl+b 3 todos · 5 files` | The sidebar starts hidden in this fork (see the row above), so users would otherwise never learn there are todos/modified files or how to reveal them. | Keep our `sidebarShortcut`/`sidebarHint` memos, the `sidebar-hint` import, and the `hint={…}` prop on `<Prompt>` (all additive); take upstream's surrounding changes. If upstream starts passing its own `hint` to this `<Prompt>`, merge the two under one `Show`. |
+| `packages/tui/src/routes/session/index.tsx` | Hidden-sidebar surfaces: a `sidebarHint` memo (modified-file count from `sync.data.session_diff`, only when the sidebar is hidden and the session isn't a subagent; label from `sidebarHintLabel` in the fork-only `routes/session/sidebar-hint.ts`) plus a `sidebarShortcut` (`useCommandShortcut("session.sidebar.toggle")`), passed as the `Prompt`'s previously unused `hint` prop — e.g. `ctrl+b 5 modified files`; and a compact `<TodoPanel>` (fork-only `routes/session/todo-panel.tsx` + `todo-panel-model.ts`) mounted inside `<Show when={visible()}>` under an extra `<Show when={!sidebarVisible()}>`, directly above the `session_prompt` slot — up to 4 checkbox items windowed around the active todo plus a summary line (`2 of 6 finished · ctrl+b to show full TODO`), shown only while an unfinished todo exists | The sidebar starts hidden in this fork (see the row above), so users would otherwise never see the agent's plan or modified files or how to reveal them. The panel shows the active todos inline, so the footer hint only needs to cover modified files. | Keep our `sidebarShortcut`/`sidebarHint` memos, the `sidebar-hint` and `todo-panel` imports, the `TodoPanel` mount above the `session_prompt` slot, and the `hint={…}` prop on `<Prompt>` (all additive); take upstream's surrounding changes. If upstream starts passing its own `hint` to this `<Prompt>`, merge the two under one `Show`; if upstream adds its own children to the bottom box, keep `TodoPanel` directly above the prompt slot. |
 | `packages/tui/src/routes/session/index.tsx` | Assistant-message trailer dedup: a `suppressed` memo in `AssistantMessage` hides the `▣ Agent · Model` prefix on the last message when it matches the currently selected agent (`local.agent.current()?.name === message.mode`) and model (`local.model.current()` vs the message's `providerID`/`modelID`), since the prompt footer right below already shows that selection; the duration still renders as `Baked for <duration>` (and `interrupted` keeps rendering on aborts), and the trailer box is skipped entirely when suppression leaves nothing to show | The last message's trailer and the prompt footer showed the same agent + model twice, one line apart. | Keep the `suppressed` memo and the `Show` gates around the trailer spans; take upstream's surrounding trailer changes (new suffixes should go inside the existing `<text>` with a `·` separator like `interrupted`). |
 | `packages/plugin/src/tui.ts` | `home_bottom` slot props widened from `{}` to `{ placement?: "center" \| "start" }` | The empty-session banner asks `home_bottom` contributors to left-align; optional prop keeps the home route and third-party plugins (no prop → centered) unchanged. | Keep our `placement` prop; take upstream's other slot-map changes. |
 | `packages/tui/src/feature-plugins/home/tips.tsx` | `home_bottom` slot fn reads the new `placement` prop; with `"start"` the tips box left-aligns (`flex-start`) and drops its `paddingTop` 3 | The top-left session banner needs the tip flush under the logo; the centered home route keeps upstream spacing. | Keep our `placement` threading + conditional alignItems/paddingTop; take upstream's surrounding changes. |

packages/tui/src/routes/session/index.tsx

@@ -56,6 +56,7 @@ import { Logo } from "../../component/logo"
 import { placeholder } from "../home"
 import { Sidebar } from "./sidebar"
 import { sidebarHintLabel } from "./sidebar-hint"
+import { TodoPanel } from "./todo-panel"
 import { SubagentFooter } from "./subagent-footer.tsx"
 import { filetype } from "../../util/filetype"
 import parsers from "../../parsers-config"
@@ -293,10 +294,7 @@ export function Session() {
   const sidebarShortcut = useCommandShortcut("session.sidebar.toggle")
   const sidebarHint = createMemo(() => {
     if (sidebarVisible() || session()?.parentID) return
-    return sidebarHintLabel(
-      (sync.data.todo[route.sessionID] ?? []).filter((item) => item.status !== "completed").length,
-      (sync.data.session_diff[route.sessionID] ?? []).length,
-    )
+    return sidebarHintLabel((sync.data.session_diff[route.sessionID] ?? []).length)
   })
   const providers = createMemo(() => Model.index(sync.data.provider))
 
@@ -1360,6 +1358,13 @@ export function Session() {
                   <SubagentFooter />
                 </Show>
                 <Show when={visible()}>
+                  <Show when={!sidebarVisible()}>
+                    <TodoPanel
+                      todos={sync.data.todo[route.sessionID] ?? []}
+                      shortcut={sidebarShortcut()}
+                      busy={(sync.data.session_status?.[route.sessionID] ?? { type: "idle" }).type !== "idle"}
+                    />
+                  </Show>
                   <pluginRuntime.Slot
                     name="session_prompt"
                     mode="replace"

packages/tui/src/routes/session/sidebar-hint.ts

@@ -1,5 +1,3 @@
-export function sidebarHintLabel(todos: number, files: number) {
-  if (todos && files) return `${todos} todo${todos > 1 ? "s" : ""} · ${files} file${files > 1 ? "s" : ""}`
-  if (todos) return `${todos} todo${todos > 1 ? "s" : ""}`
+export function sidebarHintLabel(files: number) {
   if (files) return `${files} modified file${files > 1 ? "s" : ""}`
 }

packages/tui/src/routes/session/todo-panel-model.ts

@@ -0,0 +1,29 @@
+export interface TodoLike {
+  content: string
+  status: string
+}
+
+export const TODO_PANEL_SIZE = 4
+
+// Active-window selection: show one item of context before the active item,
+// then the active item and what follows, clamped to a full window when
+// enough items exist. Active = first in_progress, else first pending, else
+// the last item.
+export function todoWindow<T extends TodoLike>(todos: T[], size = TODO_PANEL_SIZE): T[] {
+  if (todos.length === 0) return []
+  const inProgress = todos.findIndex((item) => item.status === "in_progress")
+  const pending = todos.findIndex((item) => item.status === "pending")
+  const active = inProgress !== -1 ? inProgress : pending !== -1 ? pending : todos.length - 1
+  const start = Math.min(Math.max(active - 1, 0), Math.max(0, todos.length - size))
+  return todos.slice(start, start + size)
+}
+
+// Cancelled counts as unfinished: only "completed" is done, and the total is
+// the full list, so a visible panel never claims everything is finished. The
+// progress text is returned separately from the shortcut suffix so the view
+// can highlight it once something is finished.
+export function todoSummary(todos: TodoLike[]) {
+  const done = todos.filter((item) => item.status === "completed").length
+  if (done > 0) return { text: `${done} of ${todos.length} finished`, finished: true }
+  return { text: `still ${todos.length} item${todos.length > 1 ? "s" : ""} in the TODO list`, finished: false }
+}

packages/tui/src/routes/session/todo-panel.tsx

@@ -0,0 +1,41 @@
+import { createMemo, For, Show } from "solid-js"
+import type { Todo } from "@opencode-ai/sdk/v2"
+import { TodoItem } from "../../component/todo-item"
+import { useTheme } from "../../context/theme"
+import { useKV } from "../../context/kv"
+import { todoSummary, todoWindow } from "./todo-panel-model"
+
+// "star" from sindresorhus/cli-spinners (MIT)
+const STAR_FRAMES = ["✶", "✸", "✹", "✺", "✹", "✷"]
+// Static frame while the session is idle/interrupted (and when animations
+// are disabled): the most-pointed star of the cycle.
+const STAR_IDLE = "✺"
+
+export function TodoPanel(props: { todos: Todo[]; shortcut: string; busy: boolean }) {
+  const { theme } = useTheme()
+  const kv = useKV()
+  const show = createMemo(() => props.todos.some((item) => item.status !== "completed"))
+  const visible = createMemo(() => todoWindow(props.todos))
+  const summary = createMemo(() => todoSummary(props.todos))
+  const summaryColor = createMemo(() => (summary().finished ? theme.success : theme.textMuted))
+
+  return (
+    <Show when={show()}>
+      <box flexShrink={0} paddingLeft={3} paddingRight={2} paddingBottom={1}>
+        <For each={visible()}>{(item) => <TodoItem status={item.status} content={item.content} />}</For>
+        <box flexDirection="row" gap={1}>
+          <Show
+            when={props.busy && kv.get("animations_enabled", true)}
+            fallback={<text fg={theme.warning}>{STAR_IDLE}</text>}
+          >
+            <spinner frames={STAR_FRAMES} interval={120} color={theme.warning} />
+          </Show>
+          <text fg={theme.textMuted}>
+            <span style={{ fg: summaryColor() }}>{summary().text}</span>
+            {` · ${props.shortcut} to show full TODO`}
+          </text>
+        </box>
+      </box>
+    </Show>
+  )
+}

packages/tui/test/routes/sidebar-hint.test.ts

@@ -3,29 +3,20 @@ import { sidebarHintLabel } from "../../src/routes/session/sidebar-hint"
 import { TuiKeybind } from "../../src/config/keybind"
 
 describe("sidebarHintLabel", () => {
-  test("returns nothing when there are no todos or files", () => {
-    expect(sidebarHintLabel(0, 0)).toBeUndefined()
+  test("returns nothing when there are no files", () => {
+    expect(sidebarHintLabel(0)).toBeUndefined()
   })
 
-  test("pluralizes todo counts", () => {
-    expect(sidebarHintLabel(1, 0)).toBe("1 todo")
-    expect(sidebarHintLabel(2, 0)).toBe("2 todos")
-  })
-
-  test("uses the long form for files alone", () => {
-    expect(sidebarHintLabel(0, 1)).toBe("1 modified file")
-    expect(sidebarHintLabel(0, 5)).toBe("5 modified files")
-  })
-
-  test("combines both counts with the short file form", () => {
-    expect(sidebarHintLabel(1, 1)).toBe("1 todo · 1 file")
-    expect(sidebarHintLabel(3, 5)).toBe("3 todos · 5 files")
+  test("pluralizes file counts", () => {
+    expect(sidebarHintLabel(1)).toBe("1 modified file")
+    expect(sidebarHintLabel(5)).toBe("5 modified files")
   })
 })
 
 describe("sidebar_toggle default", () => {
-  // The prompt-footer hint and the sidebar tip display the FIRST binding
-  // (useCommandShortcut), so ctrl+b must stay ahead of the leader chord.
+  // The prompt-footer hint, the todo panel, and the sidebar tip display the
+  // FIRST binding (useCommandShortcut), so ctrl+b must stay ahead of the
+  // leader chord.
   test("lists ctrl+b before the leader binding", () => {
     expect(TuiKeybind.Definitions.sidebar_toggle.default).toBe("ctrl+b,<leader>b")
   })

packages/tui/test/routes/todo-panel-model.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, test } from "bun:test"
+import { todoSummary, todoWindow } from "../../src/routes/session/todo-panel-model"
+
+const list = (statuses: string[]) => statuses.map((status, index) => ({ content: `task ${index + 1}`, status }))
+const contents = (statuses: string[]) => todoWindow(list(statuses)).map((item) => item.content)
+
+describe("todoWindow", () => {
+  test("returns nothing for an empty list", () => {
+    expect(todoWindow([])).toEqual([])
+  })
+
+  test("returns short lists whole", () => {
+    expect(contents(["completed", "in_progress", "pending"])).toEqual(["task 1", "task 2", "task 3"])
+    expect(contents(["completed", "in_progress", "pending", "pending"])).toEqual([
+      "task 1",
+      "task 2",
+      "task 3",
+      "task 4",
+    ])
+  })
+
+  test("windows one item before the active item", () => {
+    expect(contents(["completed", "completed", "completed", "in_progress", "pending", "pending"])).toEqual([
+      "task 3",
+      "task 4",
+      "task 5",
+      "task 6",
+    ])
+  })
+
+  test("clamps when the active item is first", () => {
+    expect(contents(["in_progress", "pending", "pending", "pending", "pending", "pending"])).toEqual([
+      "task 1",
+      "task 2",
+      "task 3",
+      "task 4",
+    ])
+  })
+
+  test("clamps to a full window when the active item is last", () => {
+    expect(contents(["completed", "completed", "completed", "completed", "completed", "in_progress"])).toEqual([
+      "task 3",
+      "task 4",
+      "task 5",
+      "task 6",
+    ])
+  })
+
+  test("falls back to the first pending item without an in_progress one", () => {
+    expect(contents(["completed", "completed", "completed", "completed", "pending", "pending"])).toEqual([
+      "task 3",
+      "task 4",
+      "task 5",
+      "task 6",
+    ])
+  })
+
+  test("falls back to the last item when nothing is active", () => {
+    expect(contents(["completed", "cancelled", "completed", "completed", "completed", "cancelled"])).toEqual([
+      "task 3",
+      "task 4",
+      "task 5",
+      "task 6",
+    ])
+  })
+
+  test("prefers in_progress over an earlier pending item", () => {
+    expect(contents(["pending", "pending", "pending", "in_progress", "pending", "pending"])).toEqual([
+      "task 3",
+      "task 4",
+      "task 5",
+      "task 6",
+    ])
+  })
+})
+
+describe("todoSummary", () => {
+  test("counts remaining items before anything is finished", () => {
+    expect(todoSummary(list(["pending", "pending", "in_progress"]))).toEqual({
+      text: "still 3 items in the TODO list",
+      finished: false,
+    })
+  })
+
+  test("uses the singular form for one item", () => {
+    expect(todoSummary(list(["pending"]))).toEqual({ text: "still 1 item in the TODO list", finished: false })
+  })
+
+  test("shows progress once something is finished", () => {
+    expect(todoSummary(list(["completed", "in_progress", "pending"]))).toEqual({
+      text: "1 of 3 finished",
+      finished: true,
+    })
+  })
+
+  test("does not count cancelled items as finished", () => {
+    expect(todoSummary(list(["completed", "cancelled", "pending"]))).toEqual({ text: "1 of 3 finished", finished: true })
+    expect(todoSummary(list(["cancelled", "cancelled"]))).toEqual({
+      text: "still 2 items in the TODO list",
+      finished: false,
+    })
+  })
+})