@hacky.software/opencode-todo-supervisor 0.3.6 → 0.3.8

package/README.md

@@ -23,7 +23,7 @@ Tested against OpenCode `2.0.24`.
 ## Install
 
 ```sh
-opencode plugin add @hacky.software/opencode-todo-supervisor@0.3.6
+opencode plugin add @hacky.software/opencode-todo-supervisor@0.3.8
 ```
 
 This also loads the bundled TUI entry. To pass options, use the object form:
@@ -174,12 +174,14 @@ effective set is `config.markdownFiles ∪ stored files − removed` per session
 
 - **Composer strip** (`session.composer.top`): `📋 ███░░░░░ 8/17 open` (plus `⏸`
   while paused), hidden when there is neither a list nor a subscription.
-- **Popover** (`/todos`, palette "Todo: open todos"): a centered overlay dialog.
-  Its body and width scale with the terminal (up to 48 rows / a share of the
-  window), so the key legend stays visible on a short terminal and a tall one
+- **Popover** (`/todos`, palette "Todo: open todos"): a centered overlay dialog,
+  opened at the widest preset. The body scales with the terminal height (up to
+  48 rows) so the key legend stays visible on a short terminal and a tall one
   shows more rows; the header shows `open/total` and the selected `row n/m`. `f`
-  cycles the dialog size — medium (70%), large (90%), xlarge (98% of the
-  terminal width, capped at 200 cells) — and `esc` closes it.
+  cycles the host dialog width — medium (60), large (88), xlarge (116 cells) —
+  and `esc` closes it. Rows are laid out to the card width exactly (and render
+  with wrapping off), so content never wraps and the card cannot grow past the
+  bottom of the screen.
   - header: progress bar, `open/total`, and a supervision chip (`idle · quiet
     12s · nudges 2`, `working: 1 tool · 1 shell · quiet 4s`, `paused
     (no-progress)`, `not supervised`);
@@ -195,7 +197,10 @@ effective set is `config.markdownFiles ∪ stored files − removed` per session
   - it re-reads every 3 s while open, so edits made outside OpenCode show up
     without waiting for an event.
 - **Side panel** (palette "Todo: open side panel"): the same list docked to
-  `session.panel` (`todo.todos`), with `f` for fullscreen.
+  `session.panel` (`todo.todos`), with `f` for fullscreen. Its keys are live only
+  while the panel is focused *and* no overlay is up (dialog, menu, completion
+  list), so a docked panel never steals the arrow keys from the model picker,
+  command palette or the prompt's completions.
 - `/todos add <path>` and `/todos remove <path>` manage subscriptions from the
   prompt.
 - **Toasts** on `nudged` (idle vs stalled wording) and on the all-done transition.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hacky.software/opencode-todo-supervisor",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "OpenCode V2 plugin that gives every session a todo list (todo_write/todo_read), supervises idle sessions until the list is done, and can drive checklists in markdown files from a TUI panel.",
   "type": "module",
   "license": "MIT",

package/src/panel.test.ts

@@ -10,7 +10,9 @@ import {
   isSelectable,
   itemColumns,
   moveCursor,
+  panelKeys,
   popoverBodyHeight,
+  popoverKeys,
   priorityTag,
   progressBar,
   quietLabel,
@@ -189,16 +191,35 @@ describe("panel cursor", () => {
     expect(popoverBodyHeight(200)).toBe(48)
   })
 
-  test("popover width follows the dialog size and clamps", () => {
-    expect(dialogWidth("medium", 200)).toBe(140)
-    expect(dialogWidth("large", 200)).toBe(180)
-    expect(dialogWidth("xlarge", 200)).toBe(196)
-    expect(dialogWidth("medium", 80)).toBe(56)
-    expect(dialogWidth("large", 80)).toBe(72)
-    expect(dialogWidth("xlarge", 80)).toBe(76)
-    expect(dialogWidth("xlarge", 20)).toBe(36)
-    // xlarge tracks the window instead of a fixed cap.
-    expect(dialogWidth("xlarge", 120)).toBe(116)
+  test("popover width matches the host dialog card and clamps", () => {
+    expect(dialogWidth("medium", 200)).toBe(60)
+    expect(dialogWidth("large", 200)).toBe(88)
+    expect(dialogWidth("xlarge", 200)).toBe(116)
+    expect(dialogWidth("medium", 80)).toBe(60)
+    expect(dialogWidth("large", 80)).toBe(78)
+    expect(dialogWidth("xlarge", 80)).toBe(78)
+    // Never wider than the window (minus the host card's 2-cell inset).
+    expect(dialogWidth("xlarge", 20)).toBe(20)
+  })
+
+  test("the panel layer yields to overlays that own the keyboard", () => {
+    // Normal session view: live while focused.
+    expect(panelKeys(true, "base")).toBe(true)
+    expect(panelKeys(false, "base")).toBe(false)
+    // The model picker, confirmations and other dialogs run in `modal`.
+    expect(panelKeys(true, "modal")).toBe(false)
+    expect(panelKeys(true, "menu")).toBe(false)
+    expect(panelKeys(true, "autocomplete")).toBe(false)
+    // An unknown mode is not treated as an overlay.
+    expect(panelKeys(true, "composer")).toBe(true)
+  })
+
+  test("the popover keeps the keyboard in its own dialog", () => {
+    expect(popoverKeys("modal")).toBe(true)
+    expect(popoverKeys("base")).toBe(true)
+    expect(popoverKeys("composer")).toBe(true)
+    expect(popoverKeys("menu")).toBe(false)
+    expect(popoverKeys("autocomplete")).toBe(false)
   })
 
   test("id and priority tags and their column widths", () => {

package/src/panel.ts

@@ -306,15 +306,45 @@ export function popoverBodyHeight(viewportHeight: number, extraRows = 0): number
 
 export type DialogSizeName = "medium" | "large" | "xlarge"
 
-const DIALOG_FACTOR: Record<DialogSizeName, number> = { medium: 0.7, large: 0.9, xlarge: 0.98 }
-
 /**
- * Content width for the popover dialog, as a fraction of the terminal width so
- * it scales with the window (`medium` 70%, `large` 90%, `xlarge` 98%), clamped
- * for small terminals and capped so it never spans an ultrawide screen.
+ * The host draws a dialog inside a card of a *fixed* width per size preset
+ * (`medium` 60, `large` 88, `xlarge` 116 cells), capped at the render width
+ * minus two columns; the card height hugs its content.
+ *
+ * Content must be laid out to exactly that width. Text passed a wider budget
+ * wraps (`wrapMode` defaults to `"word"`), which grows the content-hugging card
+ * past the bottom of the screen. So we mirror the host preset rather than a
+ * share of the terminal.
  */
+const DIALOG_WIDTH: Record<DialogSizeName, number> = { medium: 60, large: 88, xlarge: 116 }
+
+/** Content width for the popover dialog: the host card width for `size`. */
 export function dialogWidth(size: DialogSizeName, viewportWidth: number): number {
-  const total = Math.max(40, viewportWidth)
-  const target = Math.round(total * DIALOG_FACTOR[size])
-  return Math.max(36, Math.min(target, total - 4, 200))
+  return Math.min(DIALOG_WIDTH[size], Math.max(20, viewportWidth - 2))
+}
+
+/**
+ * Keymap modes that own the keyboard while they are up: `modal` (dialogs, the
+ * model picker, confirmations), `menu` (the command/palette menus) and
+ * `autocomplete` (the prompt's completion list). They all drive themselves with
+ * the arrow keys.
+ */
+const OVERLAY_MODES: ReadonlySet<string> = new Set(["modal", "menu", "autocomplete"])
+
+/**
+ * Whether the side panel's keys should be live. The layer binds the arrows
+ * globally at a high priority, so it must yield the moment an overlay opens —
+ * otherwise a focused docked panel swallows the model picker's up/down.
+ */
+export function panelKeys(focused: boolean, mode: string): boolean {
+  return focused && !OVERLAY_MODES.has(mode)
+}
+
+/**
+ * Whether the popover's keys should be live. The popover *is* a dialog, so
+ * `modal` is ours; only the non-dialog overlays (palette, completion list) take
+ * the keyboard away from it.
+ */
+export function popoverKeys(mode: string): boolean {
+  return mode !== "menu" && mode !== "autocomplete"
 }

package/src/tui.tsx

@@ -26,7 +26,9 @@ import {
   idTag,
   itemColumns,
   moveCursor,
+  panelKeys,
   popoverBodyHeight,
+  popoverKeys,
   priorityTag,
   progressBar,
   rowIndex,
@@ -539,7 +541,7 @@ export default Plugin.define({
           const background = () => (isCurrent() ? selectedBg() : undefined)
           if (row.kind === "section") {
             return (
-              <text fg={muted()}>
+              <text fg={muted()} wrapMode="none">
                 {prefix() + truncate(row.label + (row.detail ? "  ·  " + row.detail : ""), width() - 6)}
               </text>
             )
@@ -549,7 +551,7 @@ export default Plugin.define({
             const detail = `${row.open} open of ${row.total}`
             return (
               <box backgroundColor={background()}>
-                <text fg={isCurrent() ? accent() : base()}>
+                <text fg={isCurrent() ? accent() : base()} wrapMode="none">
                   {prefix() + (row.collapsed ? "▸ " : "▾ ") + truncate(`${label}  ·  ${detail}`, width() - 6)}
                 </text>
               </box>
@@ -562,7 +564,7 @@ export default Plugin.define({
           parts.push(truncate(row.content + (row.line !== undefined ? `  :${row.line}` : ""), contentWidth()))
           return (
             <box backgroundColor={background()}>
-              <text fg={row.status === "completed" ? muted() : isCurrent() ? accent() : base()}>
+              <text fg={row.status === "completed" ? muted() : isCurrent() ? accent() : base()} wrapMode="none">
                 {parts.join("  ")}
               </text>
             </box>
@@ -571,14 +573,23 @@ export default Plugin.define({
 
         return (
           <box flexDirection="column">
-            <text fg={base()}>
-              {"Todos  " + progressBar(totals().total - totals().open, totals().total, barWidth()) + "  "}
-              {`${totals().open}/${totals().total} open` +
-                (position() ? `  ·  row ${position()!.index}/${position()!.total}` : "")}
+            <text fg={base()} wrapMode="none">
+              {truncate(
+                "Todos  " +
+                  progressBar(totals().total - totals().open, totals().total, barWidth()) +
+                  "  " +
+                  `${totals().open}/${totals().total} open` +
+                  (position() ? `  ·  row ${position()!.index}/${position()!.total}` : ""),
+                width() - 2,
+              )}
+            </text>
+            <text fg={muted()} wrapMode="none">
+              {truncate("supervision: " + supervisorChip(snap().supervisor), width() - 2)}
             </text>
-            <text fg={muted()}>{"supervision: " + supervisorChip(snap().supervisor)}</text>
             <Show when={(filter() ?? "") !== ""}>
-              <text fg={muted()}>{`filter: "${filter()}"  (press / to change)`}</text>
+              <text fg={muted()} wrapMode="none">
+                {truncate(`filter: "${filter()}"  (press / to change)`, width() - 2)}
+              </text>
             </Show>
             <scrollbox
               ref={(node: unknown) => (scrollNode = node as typeof scrollNode)}
@@ -593,7 +604,9 @@ export default Plugin.define({
                 )}
               </For>
             </scrollbox>
-            <text fg={muted()}>{truncate(footerHints(width()).join("  ·  "), Math.max(10, width() - 2))}</text>
+            <text fg={muted()} wrapMode="none">
+              {truncate(footerHints(width()).join("  ·  "), Math.max(10, width() - 2))}
+            </text>
           </box>
         )
       }
@@ -601,7 +614,7 @@ export default Plugin.define({
       // ---- popover (an overlay dialog, like the host's own panes) -----------
 
       function TodoPopover(props: { sessionID: string }) {
-        const [size, setSize] = createSignal<DialogSize>("large")
+        const [size, setSize] = createSignal<DialogSize>("xlarge")
         const cycleSize = () => {
           const next = SIZE_ORDER[(SIZE_ORDER.indexOf(size()) + 1) % SIZE_ORDER.length]!
           setSize(next)
@@ -614,7 +627,7 @@ export default Plugin.define({
         return (
           <TodoList
             sessionID={props.sessionID}
-            active={() => true}
+            active={() => popoverKeys(context.keymap.mode.current())}
             width={() => dialogWidth(size(), viewportWidth())}
             height={() => popoverBodyHeight(viewportHeight())}
             close={() => context.ui.dialog.clear()}
@@ -625,7 +638,7 @@ export default Plugin.define({
 
       const openPopover = (sessionID: string): boolean => {
         try {
-          context.ui.dialog.set({ size: "large", centered: true })
+          context.ui.dialog.set({ size: "xlarge", centered: true })
           context.ui.dialog.show(
             () => <TodoPopover sessionID={sessionID} />,
             () => logFile("tui", "popover closed"),
@@ -649,7 +662,7 @@ export default Plugin.define({
           <Show when={panel.name === "todo.todos"}>
             <TodoList
               sessionID={panel.sessionID}
-              active={() => panel.focused}
+              active={() => panelKeys(panel.focused, context.keymap.mode.current())}
               width={() => panel.width}
               close={() => panel.close()}
               cycleSize={() => panel.toggleFullscreen()}