@ian-pascoe/pi-todo 0.5.0 → 0.6.0

package/README.md

@@ -2,7 +2,7 @@
 
 `@ian-pascoe/pi-todo` gives Pi agents a minimal, session-native **Todo List** without imposing a planning workflow.
 
-Requires Node `>=22.19.0` and Pi `>=0.99.0`.
+Requires Node `>=22.19.0` and Pi `>=1.1.0`.
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ian-pascoe/pi-todo",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Minimal session-native Todo List for Pi agents.",
   "keywords": [
@@ -32,10 +32,13 @@
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "@ian-pascoe/pi-utils": "^0.5.0"
+  },
   "peerDependencies": {
-    "@earendil-works/pi-ai": ">=0.99.0",
-    "@earendil-works/pi-coding-agent": ">=0.99.0",
-    "@earendil-works/pi-tui": ">=0.99.0",
+    "@earendil-works/pi-ai": ">=1.1.0",
+    "@earendil-works/pi-coding-agent": ">=1.1.0",
+    "@earendil-works/pi-tui": ">=1.1.0",
     "typebox": "*"
   },
   "engines": {

package/src/pi-todo-extension.ts

@@ -1,6 +1,7 @@
 import { StringEnum } from "@earendil-works/pi-ai";
 import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
-import { type Component, Text, truncateToWidth } from "@earendil-works/pi-tui";
+import { type Component } from "@earendil-works/pi-tui";
+import { noticeText } from "@ian-pascoe/pi-utils/ui";
 import { Type } from "typebox";
 import { projectTodoContext, todoStateFromEntry } from "./todo-context.js";
 import {
@@ -10,14 +11,13 @@ import {
   TODO_ACTIONS,
   TODO_STATUSES,
   TodoToolOutputSchema,
-  todoStatusMarker,
   type TodoActionInput,
   type TodoStateSnapshot,
-  type TodoStatus,
   type TodoTask,
   TodoOperationError,
   type TodoToolDetails,
 } from "./todo-list.js";
+import { renderTodoCall, renderTodoResult, renderTodoWidget } from "./todo-render.js";
 import { TROUBLESHOOTING_HINT } from "./troubleshooting-skill.js";
 
 const TODO_STATE_ENTRY_TYPE = "pi-todo-state";
@@ -33,8 +33,6 @@ function assertTodoJournalReadable(context: ExtensionContext): void {
   }
 }
 const TODO_WIDGET_ID = "pi-todo";
-const TODO_WIDGET_STATUS_ORDER: readonly TodoStatus[] = ["active", "pending", "completed"];
-const TODO_COLLAPSED_TASK_LIMIT = 5;
 
 const TodoParameters = Type.Object({
   action: StringEnum(TODO_ACTIONS),
@@ -113,19 +111,6 @@ function restoreTodoState(context: ExtensionContext): TodoStateSnapshot {
   return createEmptyTodoState();
 }
 
-function renderTodoTaskLine(task: TodoTask, theme: Theme): string {
-  const markerColor =
-    task.status === "active" ? "accent" : task.status === "completed" ? "success" : "muted";
-  const title =
-    task.status === "active"
-      ? theme.bold(task.title)
-      : task.status === "completed"
-        ? theme.strikethrough(task.title)
-        : task.title;
-  const titleColor = task.status === "completed" ? "dim" : "text";
-  return `${theme.fg(markerColor, todoStatusMarker(task.status))} ${theme.fg("accent", `#${task.id}`)} ${theme.fg(titleColor, title)}`;
-}
-
 class TodoWidget implements Component {
   constructor(
     private readonly tasks: readonly TodoTask[],
@@ -135,25 +120,7 @@ class TodoWidget implements Component {
   invalidate(): void {}
 
   render(width: number): string[] {
-    const active = this.tasks.filter((task) => task.status === "active").length;
-    const pending = this.tasks.filter((task) => task.status === "pending").length;
-    const completed = this.tasks.length - active - pending;
-    const header =
-      this.theme.fg("toolTitle", this.theme.bold("TODO")) +
-      this.theme.fg("muted", `  ${active} active · ${pending} pending · ${completed} completed`);
-    const orderedTasks = this.tasks.toSorted((left, right) => {
-      const statusDifference =
-        TODO_WIDGET_STATUS_ORDER.indexOf(left.status) -
-        TODO_WIDGET_STATUS_ORDER.indexOf(right.status);
-      return statusDifference === 0 ? left.id - right.id : statusDifference;
-    });
-    const lines = [header];
-    for (const task of orderedTasks.slice(0, TODO_COLLAPSED_TASK_LIMIT)) {
-      lines.push(renderTodoTaskLine(task, this.theme));
-    }
-    const remaining = orderedTasks.length - TODO_COLLAPSED_TASK_LIMIT;
-    if (remaining > 0) lines.push(this.theme.fg("dim", `… ${remaining} more`));
-    return lines.map((line) => truncateToWidth(line, width, "…"));
+    return renderTodoWidget(this.tasks, this.theme, width);
   }
 }
 
@@ -240,45 +207,9 @@ export default function piTodoExtension(pi: ExtensionAPI): void {
         structuredContent: structuredClone(result.details),
       };
     },
-    renderCall: (params, theme) => {
-      let text = theme.fg("toolTitle", theme.bold("todo")) + theme.fg("muted", ` ${params.action}`);
-      if (params.id !== undefined) text += theme.fg("accent", ` #${params.id}`);
-      if (params.action === "add" && params.title) text += theme.fg("dim", ` "${params.title}"`);
-      if (params.action === "add" && params.tasks) {
-        const count = params.tasks.length;
-        text += theme.fg("dim", ` ${formatTaskCount(count)}`);
-      }
-      if (params.action === "update" && params.updates) {
-        text += theme.fg("dim", ` ${formatTaskCount(params.updates.length)}`);
-      }
-      return new Text(text, 0, 0);
-    },
-    renderResult: (result, { expanded }, theme) => {
-      const text = result.content.find((item) => item.type === "text");
-      if (!result.details) {
-        return new Text(theme.fg("error", text?.text ?? "Todo operation failed"), 0, 0);
-      }
-      if ("tasks" in result.details) {
-        const { action, tasks } = result.details;
-        if (tasks.length === 0) return new Text(theme.fg("dim", "Todo List is empty"), 0, 0);
-        const visibleTasks = expanded ? tasks : tasks.slice(0, TODO_COLLAPSED_TASK_LIMIT);
-        const verb = action === "add" ? "Added " : action === "update" ? "Updated " : "";
-        const heading = `${verb}${formatTaskCount(tasks.length)}:`;
-        const lines = [theme.fg("muted", heading)];
-        for (const task of visibleTasks) {
-          lines.push(renderTodoTaskLine(task, theme));
-          if (expanded && task.description) {
-            lines.push(
-              ...task.description.split("\n").map((line) => theme.fg("dim", `    ${line}`)),
-            );
-          }
-        }
-        const remaining = tasks.length - visibleTasks.length;
-        if (remaining > 0) lines.push(theme.fg("dim", `… ${remaining} more`));
-        return new Text(lines.join("\n"), 0, 0);
-      }
-      return new Text(theme.fg("success", "✓ ") + theme.fg("muted", text?.text ?? "Done"), 0, 0);
-    },
+    renderCall: (params, theme, context) => renderTodoCall(params, theme, context),
+    renderResult: (result, options, theme, context) =>
+      renderTodoResult(result, options, theme, context),
   });
 
   pi.registerCommand("todo", {
@@ -293,7 +224,7 @@ export default function piTodoExtension(pi: ExtensionAPI): void {
         return;
       }
       if (context.mode !== "tui") {
-        context.ui.notify("/todo clear requires interactive mode", "error");
+        context.ui.notify(noticeText("Todo", "/todo clear requires interactive mode"), "error");
         return;
       }
       await context.waitForIdle();

package/src/todo-render.ts

@@ -0,0 +1,153 @@
+import type { AgentToolResult, ToolRenderResultOptions } from "@earendil-works/pi-coding-agent";
+import { type Component, Container, Spacer, Text, truncateToWidth } from "@earendil-works/pi-tui";
+import {
+  appendDurationFooter,
+  callDurationFooter,
+  COLLAPSED_LINES,
+  type DurationContext,
+  expandHint,
+  previewBody,
+  SEPARATOR,
+  toolHeader,
+  type UiTheme,
+  widgetLines,
+} from "@ian-pascoe/pi-utils/ui";
+import {
+  formatTaskCount,
+  type TodoActionInput,
+  type TodoTask,
+  type TodoToolDetails,
+} from "./todo-list.js";
+
+/** The theme methods the Todo renderers draw with. */
+export type TodoRenderTheme = Pick<UiTheme, "fg" | "bold" | "strikethrough">;
+
+const TODO_WIDGET_STATUS_ORDER: readonly TodoTask["status"][] = ["active", "pending", "completed"];
+
+const CHECKBOX_FILL = { pending: " ", active: ">", completed: "x" } as const;
+const CHECKBOX_COLOR = { pending: "muted", active: "accent", completed: "success" } as const;
+
+/**
+ * One Task row. The `[ ]`/`[>]`/`[x]` checkbox is the documented exception to the no-marks rule
+ * for tool rows: it shows the Task's state, not the tool's outcome.
+ */
+export function renderTodoTaskLine(task: TodoTask, theme: TodoRenderTheme): string {
+  const box =
+    theme.fg("dim", "[") +
+    theme.fg(CHECKBOX_COLOR[task.status], CHECKBOX_FILL[task.status]) +
+    theme.fg("dim", "]");
+  const title =
+    task.status === "active"
+      ? theme.bold(task.title)
+      : task.status === "completed"
+        ? theme.strikethrough(task.title)
+        : task.title;
+  const titleColor = task.status === "completed" ? "dim" : "text";
+  return `${box} ${theme.fg("accent", `#${task.id}`)} ${theme.fg(titleColor, title)}`;
+}
+
+/** The Todo Widget lines: Active Tasks first, then pending, then completed, in at most 10 lines. */
+export function renderTodoWidget(
+  tasks: readonly TodoTask[],
+  theme: TodoRenderTheme,
+  width: number,
+): string[] {
+  const active = tasks.filter((task) => task.status === "active").length;
+  const pending = tasks.filter((task) => task.status === "pending").length;
+  const completed = tasks.length - active - pending;
+  const orderedTasks = tasks.toSorted((left, right) => {
+    const statusDifference =
+      TODO_WIDGET_STATUS_ORDER.indexOf(left.status) -
+      TODO_WIDGET_STATUS_ORDER.indexOf(right.status);
+    return statusDifference === 0 ? left.id - right.id : statusDifference;
+  });
+  return widgetLines(theme, {
+    title: "Todo",
+    counts: [`${active} active`, `${pending} pending`, `${completed} completed`].join(SEPARATOR),
+    rows: orderedTasks.map((task) => renderTodoTaskLine(task, theme)),
+  }).map((line) => truncateToWidth(line, width, "..."));
+}
+
+function callArguments(params: TodoActionInput): string | undefined {
+  const parts: string[] = [];
+  if (params.id !== undefined) parts.push(`#${params.id}`);
+  if (params.action === "add" && params.title) parts.push(`"${params.title}"`);
+  if (params.action === "add" && params.tasks) parts.push(formatTaskCount(params.tasks.length));
+  if (params.action === "update" && params.updates) {
+    parts.push(formatTaskCount(params.updates.length));
+  }
+  return parts.length === 0 ? undefined : parts.join(" ");
+}
+
+/** The `todo` call row: bold `todo`, the action in `accent`, arguments in `muted`, then `Elapsed`. */
+export function renderTodoCall(
+  params: TodoActionInput,
+  theme: TodoRenderTheme,
+  context: DurationContext,
+): Component {
+  const container = new Container();
+  container.addChild(
+    new Text(toolHeader(theme, "todo", params.action, callArguments(params)), 0, 0),
+  );
+  container.addChild(callDurationFooter(theme, context));
+  return container;
+}
+
+function taskListLines(
+  action: "list" | "add" | "update",
+  tasks: readonly TodoTask[],
+  theme: TodoRenderTheme,
+  expanded: boolean,
+): string[] {
+  const verb = action === "add" ? "Added " : action === "update" ? "Updated " : "";
+  const lines = [theme.fg("muted", `${verb}${formatTaskCount(tasks.length)}:`)];
+  if (expanded) {
+    for (const task of tasks) {
+      lines.push(renderTodoTaskLine(task, theme));
+      if (task.description) {
+        lines.push(...task.description.split("\n").map((line) => theme.fg("dim", `    ${line}`)));
+      }
+    }
+    return lines;
+  }
+  lines.push(
+    ...tasks.slice(0, COLLAPSED_LINES.list).map((task) => renderTodoTaskLine(task, theme)),
+  );
+  const hidden = tasks.length - COLLAPSED_LINES.list;
+  if (hidden > 0) lines.push(expandHint(theme, hidden));
+  return lines;
+}
+
+/**
+ * The `todo` result row. A Task list is the Nearest Built-in `ls` (20 rows collapsed, Pi's Expand
+ * Hint beyond that); a failure shows its text in `error`. Every result ends with `Took`.
+ */
+export function renderTodoResult(
+  result: AgentToolResult<TodoToolDetails | undefined>,
+  options: ToolRenderResultOptions,
+  theme: TodoRenderTheme,
+  context: DurationContext,
+): Component {
+  const text = result.content.find((item) => item.type === "text")?.text;
+  let body: string[];
+  if (!result.details) {
+    body = previewBody(theme, (text ?? "Todo operation failed").split("\n"), {
+      limit: COLLAPSED_LINES.fallback,
+      expanded: options.expanded,
+      color: "error",
+    });
+  } else if ("tasks" in result.details && result.details.tasks.length > 0) {
+    body = taskListLines(result.details.action, result.details.tasks, theme, options.expanded);
+  } else {
+    const message = "tasks" in result.details ? "Todo List is empty" : (text ?? "Done");
+    body = previewBody(theme, message.split("\n"), {
+      limit: COLLAPSED_LINES.fallback,
+      expanded: options.expanded,
+    });
+  }
+  const container = new Container();
+  container.addChild(new Spacer(1));
+  container.addChild(new Text(body.join("\n"), 0, 0));
+  appendDurationFooter(container, theme, context, { isPartial: options.isPartial });
+  return container;
+}