@rmrdeveloper/sideroom-pi 8.2.0 → 8.3.0

package/README.md

@@ -70,8 +70,10 @@ wall of tool calls, it:
 - **Works in the open.** A compact board sits above the editor:
   `pending → in_progress → completed`. Exactly one step is active at a
   time; the agent completes the current step and starts the next one in the
-  same move, so skipped steps become structurally hard. The board survives
-  reload, tree navigation, and compaction.
+  same move, so skipped steps become structurally hard. The widget shows at
+  most five rows, keeps the active step visible, and `F9` opens the full
+  read-only board. The board survives reload, tree navigation, and
+  compaction.
 - **Shows its traces.** Below the board, the last edited files appear as
   clickable `file://` links. `F8` opens the full session history; `R` clears
   it. Only successful Pi `write`/`edit` calls are tracked — no guesses from
@@ -114,6 +116,10 @@ chat. It never creates a repository task file or a `/todos` command.
 - `update` patches `{ id, status?, content? }` items and works everywhere,
   including headless modes.
 - Invariant: while anything is pending, exactly one item is `in_progress`.
+- Widget: at most five rows — open items before resolved ones, the
+  `in_progress` row always visible — plus a `…+N more · F9: view all` hint.
+  `F9` opens the full board as a read-only overlay, so the widget stays small
+  without hiding work from you; the agent still gets every item in its prompt.
 
 ### Edited files — proof, not promises
 
@@ -213,6 +219,13 @@ Items have stable string ids, short content, and one of `pending`,
 start the next one in the same `update` call. Snapshots live in the active
 session branch and are rebuilt after navigation and compaction.
 
+- Widget: max five rows. Open items win the cap over resolved ones, the
+  `in_progress` row is always shown, and a `…+N more · F9: view all` line
+  appears when rows are hidden.
+- Extended view: `F9` toggles a read-only overlay. `↑`/`↓` and `PgUp`/`PgDn`
+  scroll; `Esc` or `F9` closes. It never mutates the board.
+- The cap is display-only: every item still reaches the system prompt.
+
 A forked session inherits the board visible at its fork point. Later board
 updates are reconstructed from each session's active branch, so the fork and
 the original session evolve independently.

package/extensions/todo/index.ts

@@ -18,6 +18,7 @@ import {
   TODO_WIDGET_REFRESH_EVENT,
   type TodoStore,
 } from './session.ts';
+import { createTodoBoardOverlayController } from './ui.ts';
 
 export const TODO_DESCRIPTION =
   'Maintain a live, user-visible work board. propose replaces the full board; update patches existing items by id.';
@@ -32,9 +33,12 @@ export const TODO_PROMPT_GUIDELINES = [
   'propose is interactive-TUI-only; update also works in print, JSON, and RPC modes.',
 ];
 
+const BOARD_SHORTCUT = 'f9';
+
 // Pi loads extensions/*/index.ts through export default.
 export default function registerTodo(pi: ExtensionAPI): void {
   const store = createTodoStore();
+  const overlay = createTodoBoardOverlayController(() => store.items);
   const restore: BoardLifecycle = (ctx) => {
     restoreBoard(store, ctx);
   };
@@ -50,6 +54,10 @@ export default function registerTodo(pi: ExtensionAPI): void {
   registerGuardEvents(pi, store, restore);
   registerBoardContext(pi, store, restoreAndRefresh);
   registerTodoTool(pi, store, notifyWidgetRefresh);
+  pi.registerShortcut(BOARD_SHORTCUT, {
+    description: 'Toggle the work board',
+    handler: (ctx) => overlay.toggle(ctx),
+  });
 }
 
 function registerTodoTool(

package/extensions/todo/ui.ts

@@ -1,5 +1,48 @@
-import type { Theme } from '@earendil-works/pi-coding-agent';
-import { formatBoardBlock, TODO_STATUS, type TodoItem } from './model.ts';
+import type { ExtensionContext, Theme } from '@earendil-works/pi-coding-agent';
+import {
+  type Component,
+  Key,
+  matchesKey,
+  type TUI,
+  truncateToWidth,
+} from '@earendil-works/pi-tui';
+import {
+  formatBoardBlock,
+  TODO_STATUS,
+  type TodoItem,
+  type TodoStatus,
+} from './model.ts';
+
+const COMPACT_ROW_LIMIT = 5;
+const EXTENDED_ROW_LIMIT = 12;
+
+const SELECTION_RANK = {
+  inProgress: 0,
+  pending: 1,
+  resolved: 2,
+} as const;
+
+export interface VisibleBoardRows {
+  readonly indexes: readonly number[];
+  readonly hiddenCount: number;
+}
+
+export function selectVisibleBoardRows(
+  items: readonly TodoItem[],
+  limit: number,
+): VisibleBoardRows {
+  if (items.length <= limit) {
+    return { indexes: items.map((_item, index) => index), hiddenCount: 0 };
+  }
+
+  const indexes = items
+    .map((item, index) => ({ index, rank: selectionRank(item) }))
+    .sort((left, right) => left.rank - right.rank || left.index - right.index)
+    .slice(0, limit)
+    .map((row) => row.index)
+    .sort((left, right) => left - right);
+  return { indexes, hiddenCount: items.length - indexes.length };
+}
 
 export function renderTodoWidget(
   items: readonly TodoItem[],
@@ -9,33 +52,199 @@ export function renderTodoWidget(
     return undefined;
   }
 
+  const rows = boardRowLines(items);
+  const visible = selectVisibleBoardRows(items, COMPACT_ROW_LIMIT);
+  const renderedRows = visible.indexes.flatMap((index) => {
+    const item = items[index];
+    const row = rows[index];
+    if (item === undefined || row === undefined) {
+      return [];
+    }
+    return [colorizeBoardRow(row, item.status, theme)];
+  });
+  const lines = [
+    theme.fg('accent', theme.bold(boardHeader(items))),
+    ...renderedRows,
+  ];
+  if (visible.hiddenCount > 0) {
+    lines.push(theme.fg('dim', hiddenRowsHint(visible.hiddenCount)));
+  }
+  return lines;
+}
+
+export interface TodoBoardOverlayController {
+  toggle(ctx: ExtensionContext): void;
+}
+
+export function createTodoBoardOverlayController(
+  items: () => readonly TodoItem[],
+): TodoBoardOverlayController {
+  let close: (() => void) | undefined;
+  let opening = false;
+
+  return {
+    toggle(ctx) {
+      if (close !== undefined) {
+        close();
+        return;
+      }
+      if (opening || ctx.mode !== 'tui') {
+        return;
+      }
+
+      opening = true;
+      void ctx.ui
+        .custom<void>(
+          (tui, theme, _keybindings, done) => {
+            close = done;
+            return new TodoBoardOverlay(tui, items, theme, done);
+          },
+          {
+            overlay: true,
+            overlayOptions: {
+              anchor: 'center',
+              width: '70%',
+              minWidth: 40,
+              maxHeight: '80%',
+              visible: (terminalWidth) => terminalWidth >= 60,
+            },
+          },
+        )
+        .finally(() => {
+          close = undefined;
+          opening = false;
+        });
+    },
+  };
+}
+
+export class TodoBoardOverlay implements Component {
+  private offset = 0;
+  private readonly tui: TUI;
+  private readonly items: () => readonly TodoItem[];
+  private readonly theme: Theme;
+  private readonly close: () => void;
+
+  constructor(
+    tui: TUI,
+    items: () => readonly TodoItem[],
+    theme: Theme,
+    close: () => void,
+  ) {
+    this.tui = tui;
+    this.items = items;
+    this.theme = theme;
+    this.close = close;
+  }
+
+  handleInput(data: string): void {
+    const maxOffset = Math.max(0, this.items().length - EXTENDED_ROW_LIMIT);
+    if (matchesKey(data, Key.escape) || matchesKey(data, Key.f9)) {
+      this.close();
+      return;
+    }
+    if (matchesKey(data, Key.up)) {
+      this.offset = Math.max(0, this.offset - 1);
+      this.tui.requestRender();
+      return;
+    }
+    if (matchesKey(data, Key.down)) {
+      this.offset = Math.min(maxOffset, this.offset + 1);
+      this.tui.requestRender();
+      return;
+    }
+    if (matchesKey(data, Key.pageUp)) {
+      this.offset = Math.max(0, this.offset - EXTENDED_ROW_LIMIT);
+      this.tui.requestRender();
+      return;
+    }
+    if (matchesKey(data, Key.pageDown)) {
+      this.offset = Math.min(maxOffset, this.offset + EXTENDED_ROW_LIMIT);
+      this.tui.requestRender();
+    }
+  }
+
+  render(width: number): string[] {
+    const innerWidth = Math.max(1, width - 2);
+    const items = this.items();
+    const rows = boardRowLines(items);
+    const visibleRows = items
+      .map((item, index) => ({ item, row: rows[index] }))
+      .slice(this.offset, this.offset + EXTENDED_ROW_LIMIT);
+    const border = (text: string) => this.theme.fg('border', text);
+    const line = (text: string) => truncateToWidth(text, innerWidth, '…', true);
+    const title = line(` Work board (${String(items.length)}) `);
+    const lines = [
+      border(`╭${'─'.repeat(innerWidth)}╮`),
+      `${border('│')}${line(this.theme.fg('accent', this.theme.bold(title)))}${border('│')}`,
+      `${border('├')}${border('─'.repeat(innerWidth))}${border('┤')}`,
+    ];
+
+    for (const entry of visibleRows) {
+      const row =
+        entry.row === undefined
+          ? ''
+          : colorizeBoardRow(entry.row, entry.item.status, this.theme);
+      lines.push(`${border('│')}${line(row)}${border('│')}`);
+    }
+    if (items.length === 0) {
+      lines.push(
+        `${border('│')}${line(this.theme.fg('muted', ' No items on the board.'))}${border('│')}`,
+      );
+    }
+
+    const scrollHint = items.length > EXTENDED_ROW_LIMIT ? ' ↑↓ scroll ·' : '';
+    lines.push(`${border('├')}${border('─'.repeat(innerWidth))}${border('┤')}`);
+    lines.push(
+      `${border('│')}${line(this.theme.fg('dim', `${scrollHint} F9 or Esc close`))}${border('│')}`,
+    );
+    lines.push(border(`╰${'─'.repeat(innerWidth)}╯`));
+    return lines;
+  }
+
+  invalidate(): void {}
+}
+
+function selectionRank(item: TodoItem): number {
+  if (item.status === TODO_STATUS.inProgress) {
+    return SELECTION_RANK.inProgress;
+  }
+  if (item.status === TODO_STATUS.pending) {
+    return SELECTION_RANK.pending;
+  }
+  return SELECTION_RANK.resolved;
+}
+
+function boardHeader(items: readonly TodoItem[]): string {
   const active = items.filter(
     (item) => item.status === TODO_STATUS.inProgress,
   ).length;
   const queued = items.filter(
     (item) => item.status === TODO_STATUS.pending,
   ).length;
-  const blockLines = formatBoardBlock(items).split('\n');
-  const rows = blockLines.slice(1, 1 + items.length);
-  const header = theme.fg(
-    'accent',
-    theme.bold(
-      `Sideroom board (${String(active)} active, ${String(queued)} queued)`,
-    ),
-  );
-  const renderedRows = rows.map((row, index) => {
-    const item = items[index];
-    if (item === undefined) {
-      return row;
-    }
-    if (item.status === TODO_STATUS.inProgress) {
-      return theme.fg('success', row);
-    }
-    if (item.status === TODO_STATUS.pending) {
-      return theme.fg('text', row);
-    }
-    return theme.fg('muted', row);
-  });
+  return `Sideroom board (${String(active)} active, ${String(queued)} queued)`;
+}
+
+function boardRowLines(items: readonly TodoItem[]): string[] {
+  return formatBoardBlock(items)
+    .split('\n')
+    .slice(1, 1 + items.length);
+}
+
+function colorizeBoardRow(
+  row: string,
+  status: TodoStatus,
+  theme: Theme,
+): string {
+  if (status === TODO_STATUS.inProgress) {
+    return theme.fg('success', row);
+  }
+  if (status === TODO_STATUS.pending) {
+    return theme.fg('text', row);
+  }
+  return theme.fg('muted', row);
+}
 
-  return [header, ...renderedRows];
+function hiddenRowsHint(hiddenCount: number): string {
+  return `…+${String(hiddenCount)} more · F9: view all`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmrdeveloper/sideroom-pi",
-  "version": "8.2.0",
+  "version": "8.3.0",
   "description": "Pi coding-agent package that asks clarifying questions, shows a live todo board, enforces coding guidelines, and will not call it done while your checks are red.",
   "type": "module",
   "files": [
@@ -16,7 +16,7 @@
     "version-packages": "changeset version",
     "commitlint": "commitlint",
     "types": "tsc --noEmit",
-    "test": "node --test 'extensions/**/*.test.ts'",
+    "test": "node --test 'extensions/**/*.test.ts' 'scripts/**/*.test.mjs'",
     "lint": "biome lint extensions scripts commitlint.config.mjs",
     "lint:fix": "biome lint --write extensions scripts commitlint.config.mjs",
     "format": "biome format --write extensions scripts package.json biome.json commitlint.config.mjs .changeset/config.json",