feat(widget): focus overflowing task lists

Author: xz-dev

README.md

@@ -55,16 +55,20 @@ The extension renders a persistent widget above the editor:
 
 ### Widget display settings
 
-How tasks are sorted and how many are shown can be configured via `/tasks` → Settings (saved as project overrides in `.pi/tasks-config.json`). All defaults preserve the original behaviour.
+How tasks are sorted and how many are shown can be configured via `/tasks` → Settings (saved as project overrides in `.pi/tasks-config.json`).
 
 | Setting | Values | Default | Behaviour |
 |---------|--------|---------|-----------|
 | `sortOrder` | `id` / `status` / `recent` / `oldest` | `id` | `id` = creation order; `status` groups completed → in-progress → pending; `recent`/`oldest` = by last-updated time |
-| `maxVisible` | `5`–`100` | `10` | Caps how many task lines the widget shows (ignored when `showAll` is on) |
-| `showAll` | `true` / `false` | `false` | When `true`, every task is shown regardless of `maxVisible` |
-| `hiddenAt` | `bottom` / `top` | `bottom` | When the list overflows `maxVisible`, where the `… and N more` collapse happens. `top` pairs well with `sortOrder: status` to keep active work visible and fold completed tasks away |
+| `maxVisible` | `5`–`100` | `10` | Window size when the global tool view is collapsed and `showAll` is off |
+| `showAll` | `true` / `false` | `false` | When `true`, every task is always shown regardless of `maxVisible` |
+| `hiddenAt` | `bottom` / `top` | `bottom` | Legacy compatibility setting retained in config; the focused task window now uses separate earlier/later markers |
 
-> Note: the widget's `status` order is completed-first (so finished work collapses at the top with `hiddenAt: top`), which is the reverse of the `TaskList` tool's pending-first order.
+When a collapsed list exceeds `maxVisible`, the widget starts at the first unfinished task in the configured sort order and displays up to `maxVisible` tasks. Separate `… N earlier` and `… N later` lines show hidden work on either side. If every task is complete, the final window is shown. Lists that fit within the limit remain fully visible.
+
+The task widget follows Pi's global tool expansion state (Ctrl-O by default): expand to show every task, then collapse to restore the focused window. The extension does not register or override that keybinding.
+
+> Note: the widget's `status` order is completed-first, which is the reverse of the `TaskList` tool's pending-first order.
 
 ## Tools
 

src/ui/settings-menu.ts

@@ -53,17 +53,17 @@ export async function openSettingsMenu(
         id: "showAll",
         label: "Show all tasks in widget",
         description:
-          "When ON, every task is shown regardless of the visible limit. " +
-          "When OFF, the list is capped by 'Max visible tasks'.",
+          "When ON, every task is always shown. " +
+          "When OFF, the widget uses a focused window unless Pi's global tool view is expanded.",
         currentValue: (cfg.showAll ?? false) ? "on" : "off",
         values: ["on", "off"],
       },
       {
         id: "maxVisible",
         label: "Max visible tasks in widget",
         description:
-          "Only applies when 'Show all tasks' is OFF. " +
-          "Caps how many task lines the widget shows.",
+          "Only applies when 'Show all tasks' is OFF and Pi's global tool view is collapsed. " +
+          "Sets the focused window size starting at the first unfinished task.",
         currentValue: String(cfg.maxVisible ?? 10),
         values: ["5", "10", "15", "20", "30", "50", "100"],
       },
@@ -80,8 +80,8 @@ export async function openSettingsMenu(
         id: "hiddenAt",
         label: "Hidden tasks position",
         description:
-          '"bottom" hides tasks from the end of the list. ' +
-          '"top" hides tasks from the start (useful with status sort to collapse completed tasks).',
+          "Legacy compatibility setting. The focused window now shows separate earlier/later markers " +
+          "and follows Pi's global tool expansion state.",
         currentValue: cfg.hiddenAt ?? "bottom",
         values: ["bottom", "top"],
       },

src/ui/task-widget.ts

@@ -12,20 +12,6 @@ import { truncateToWidth } from "@earendil-works/pi-tui";
 import type { TaskStore } from "../task-store.js";
 import type { TasksConfig } from "../tasks-config.js";
 
-// ---- Truncation ----
-
-import type { Task } from "../types.js";
-
-function truncateFromTop(tasks: Task[], limit: number): Task[] {
-  return tasks.slice(-limit);
-}
-
-function truncateFromBottom(tasks: Task[], limit: number): Task[] {
-  return tasks.slice(0, limit);
-}
-
-const TRUNCATE_FNS = { top: truncateFromTop, bottom: truncateFromBottom };
-
 // ---- Types ----
 
 export type Theme = {
@@ -34,13 +20,20 @@ export type Theme = {
   strikethrough(text: string): string;
 };
 
+export type WidgetComponent = {
+  render(): string[];
+  invalidate(): void;
+  setExpanded?(expanded: boolean): void;
+};
+
 export type UICtx = {
   setStatus(key: string, text: string | undefined): void;
   setWidget(
     key: string,
-    content: undefined | ((tui: any, theme: Theme) => { render(): string[]; invalidate(): void }),
+    content: undefined | ((tui: any, theme: Theme) => WidgetComponent),
     options?: { placement?: "aboveEditor" | "belowEditor" },
   ): void;
+  getToolsExpanded?(): boolean;
 };
 
 /** Firework frames for the animated active task indicator (matches Claude Code). */
@@ -111,6 +104,10 @@ export class TaskWidget {
   }
 
   setUICtx(ctx: UICtx) {
+    if (this.uiCtx !== ctx) {
+      this.widgetRegistered = false;
+      this.tui = undefined;
+    }
     this.uiCtx = ctx;
   }
 
@@ -154,19 +151,8 @@ export class TaskWidget {
     }
   }
 
-  /** Render callback entry point. Guarded so a render error can never escape to
-   *  the TUI timer and crash the whole host process — worst case the widget is
-   *  empty for one frame. */
-  private renderWidget(tui: any, theme: Theme): string[] {
-    try {
-      return this.buildWidgetLines(tui, theme);
-    } catch {
-      return [];
-    }
-  }
-
   /** Build widget lines from current live state. */
-  private buildWidgetLines(tui: any, theme: Theme): string[] {
+  private buildWidgetLines(tui: any, theme: Theme, toolsExpanded = false): string[] {
     const sortOrder = this.config.sortOrder ?? "id";
     const tasks = this.store.list(sortOrder);
     const w = tui.terminal.columns;
@@ -187,18 +173,19 @@ export class TaskWidget {
     const spinnerChar = this.fireworkFrames[this.fireworkFrame];
     const lines: string[] = [truncate(theme.fg("accent", "●") + " " + theme.fg("accent", statusText))];
 
-    const showAll = this.config.showAll ?? false;
+    const showAll = toolsExpanded || (this.config.showAll ?? false);
     const limit = this.config.maxVisible ?? DEFAULT_MAX_VISIBLE_TASKS;
-    const hiddenAt = this.config.hiddenAt ?? "bottom";
-    const visible = showAll ? tasks : TRUNCATE_FNS[hiddenAt](tasks, limit);
-
-    const hiddenCount = tasks.length - visible.length;
-    const overflowLine = hiddenCount > 0
-      ? truncate(theme.fg("dim", `    … and ${hiddenCount} more`))
-      : undefined;
-
-    if (overflowLine && hiddenAt === "top") {
-      lines.push(overflowLine);
+    const firstUnfinished = tasks.findIndex(task => task.status !== "completed");
+    const windowStart = firstUnfinished === -1
+      ? Math.max(0, tasks.length - limit)
+      : firstUnfinished;
+    const shouldWindow = !showAll && tasks.length > limit;
+    const visible = shouldWindow ? tasks.slice(windowStart, windowStart + limit) : tasks;
+    const hiddenBefore = shouldWindow ? windowStart : 0;
+    const hiddenAfter = shouldWindow ? tasks.length - windowStart - visible.length : 0;
+
+    if (hiddenBefore > 0) {
+      lines.push(truncate(theme.fg("dim", `    … ${hiddenBefore} earlier`)));
     }
     for (let i = 0; i < visible.length; i++) {
       const task = visible[i];
@@ -216,8 +203,8 @@ export class TaskWidget {
       }
 
       let suffix = "";
-      if (task.status === "pending" && task.blockedBy.length > 0) {
-        const openBlockers = task.blockedBy.filter(bid => {
+      if (task.status === "pending" && (task.blockedBy?.length ?? 0) > 0) {
+        const openBlockers = (task.blockedBy ?? []).filter(bid => {
           const blocker = this.store.get(bid);
           return blocker && blocker.status !== "completed";
         });
@@ -255,8 +242,8 @@ export class TaskWidget {
       lines.push(truncate(text + suffix));
     }
 
-    if (overflowLine && hiddenAt !== "top") {
-      lines.push(overflowLine);
+    if (hiddenAfter > 0) {
+      lines.push(truncate(theme.fg("dim", `    … ${hiddenAfter} later`)));
     }
 
     return lines;
@@ -298,11 +285,29 @@ export class TaskWidget {
       this.widgetInterval = undefined;
     }
 
-    // Transition: hidden → visible — register widget callback once
+    // Transition: hidden → visible — register one expandable widget component.
     if (!this.widgetRegistered) {
+      const initiallyExpanded = this.uiCtx.getToolsExpanded?.() ?? false;
       this.uiCtx.setWidget("tasks", (tui, theme) => {
         this.tui = tui;
-        return { render: () => this.renderWidget(tui, theme), invalidate: () => {} };
+        let toolsExpanded = initiallyExpanded;
+        return {
+          render: () => {
+            try {
+              // Read Pi's public global state at render time. setExpanded()
+              // remains as a fallback for hosts that propagate it to widgets.
+              const expanded = this.uiCtx?.getToolsExpanded?.() ?? toolsExpanded;
+              return this.buildWidgetLines(tui, theme, expanded);
+            } catch {
+              // A malformed legacy task must never escape into Pi's TUI render loop.
+              return [];
+            }
+          },
+          invalidate: () => {},
+          setExpanded(expanded: boolean) {
+            toolsExpanded = expanded;
+          },
+        };
       }, { placement: "aboveEditor" });
       this.widgetRegistered = true;
     } else if (this.tui) {

test/subagent-integration.test.ts

@@ -947,6 +947,7 @@ describe("Widget agent ID display", () => {
     const ctx: UICtx = {
       setWidget(key, content, options) { state.widgets.set(key, { content, options }); },
       setStatus(key, text) { state.statuses.set(key, text); },
+      getToolsExpanded() { return false; },
     };
     return { ctx, state };
   }