@leo-alvarenga/pi-todo-list 0.5.3 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leo-alvarenga/pi-todo-list",
-  "version": "0.5.3",
+  "version": "0.6.3",
   "description": "Session-aware todo list overlay for Pi: todo tool, /todos command, and a live TUI panel",
   "license": "MIT",
   "repository": "github.com/leo-alvarenga/pi-mono",
@@ -15,10 +15,10 @@
   ],
   "files": [
     "src",
+    "!src/test",
     "skills",
     "README.md",
-    "LICENSE",
-    "!src/*.test.ts"
+    "LICENSE"
   ],
   "peerDependencies": {
     "@earendil-works/pi-ai": "*",
@@ -27,7 +27,7 @@
     "typebox": "*"
   },
   "dependencies": {
-    "@leo-alvarenga/pi-ext-core": "^0.3.2"
+    "@leo-alvarenga/pi-ext-core": "^0.4.3"
   },
   "pi": {
     "extensions": [
@@ -36,11 +36,12 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "tsx": "^4.19.0",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "tsc --noEmit",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/src/command.ts

@@ -4,8 +4,8 @@ import { Text } from "@earendil-works/pi-tui";
 import { applyAction } from "./core";
 import { groupByStatus } from "./query";
 import { REPORT_ENTRY } from "./constants";
-import type { TodoStore } from "./state";
-import type { Todo } from "./types";
+import type { SessionRecordStore } from "@leo-alvarenga/pi-ext-core";
+import type { Todo, TodoState } from "./types";
 import { getStyledTodo } from "./utils";
 
 const renderList = (todos: Todo[], theme: Theme): string => {
@@ -30,7 +30,10 @@ const renderList = (todos: Todo[], theme: Theme): string => {
   return lines.join("\n");
 };
 
-export function registerTodosCommand(pi: ExtensionAPI, store: TodoStore): void {
+export function registerTodosCommand(
+  pi: ExtensionAPI,
+  store: SessionRecordStore<TodoState>,
+): void {
   pi.registerCommand("todos", {
     description: "Show all todos grouped by status",
     handler: async (_args, ctx) => {

package/src/constants.ts

@@ -1,10 +1,12 @@
 import type { KeyId } from "@earendil-works/pi-tui";
-import { TodoStatus, TodoStatusUi } from "./types";
+import type { StatusUi } from "@leo-alvarenga/pi-ext-core";
+
+import type { TodoStatus } from "./types";
 
 /** Task statuses, in lifecycle order. All limits are hardcoded — no config files. */
 export const STATUSES = ["pending", "in-progress", "completed"] as const;
 
-export const STATUS_STYLES: Record<TodoStatus, TodoStatusUi> = {
+export const STATUS_STYLES: Record<TodoStatus, StatusUi> = {
   pending: { icon: " ", fg: "text", color: "text" },
   "in-progress": { icon: "󱥸 ", fg: "accent", color: "accent", bold: true },
   completed: { icon: " ", fg: "dim", color: "success", strikethrough: true },
@@ -27,8 +29,3 @@ export const REPORT_ENTRY = "todos.report";
 
 /** Chord that toggles the panel. Chosen in setup: free in pi's default keybindings. */
 export const PANEL_TOGGLE_CHORD: KeyId = "alt+t";
-
-export const PANEL_STATE_ICON = {
-  collapsed: "󰅂",
-  expanded: "󰅀",
-};

package/src/index.ts

@@ -2,14 +2,13 @@ import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 
 import { registerTodosCommand } from "./command";
 import { STATE_ENTRY, WIDGET_KEY } from "./constants";
-import { TodoStore } from "./state";
+import { createTodoStore } from "./state";
 import { registerTodoTool, registerTodoCompleteAllTool } from "./tool";
 import { registerTodoWidget } from "./widget";
 
 export default function (pi: ExtensionAPI): void {
-  const store = new TodoStore(
-    (snapshot) => pi.appendEntry(STATE_ENTRY, snapshot),
-    undefined,
+  const store = createTodoStore((snapshot) =>
+    pi.appendEntry(STATE_ENTRY, snapshot),
   );
 
   const panelControls = registerTodoWidget(pi, store);

package/src/state.ts

@@ -1,45 +1,25 @@
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 
-import { createSessionStore, SessionRecordStore } from "@leo-alvarenga/pi-ext-core";
+import {
+  createSessionStore,
+  type SessionRecordStore,
+} from "@leo-alvarenga/pi-ext-core";
 
 import { STATE_ENTRY } from "./constants";
-import type { TodoDetails, TodoState } from "./types";
-
-export class TodoStore {
-  private store: SessionRecordStore<TodoState>;
-
-  constructor(
-    private readonly persist: (snapshot: TodoState) => void,
-    private readonly onRefresh?: (ctx: ExtensionContext) => void,
-  ) {
-    this.store = createSessionStore<TodoState>({
-      empty: () => ({ todos: [], nextId: 1 }),
-      entryType: STATE_ENTRY,
-      snapshotOf: (entry) => {
-        if (entry.type === "custom" && entry.customType === STATE_ENTRY) {
-          return entry.data as TodoState | undefined;
-        }
-      },
-      onChange: (state, ctx) => {
-        this.persist(state);
-        this.onRefresh?.(ctx);
-      },
-    });
-  }
-
-  getState(ctx: ExtensionContext): TodoState {
-    return this.store.getState(ctx);
-  }
-
-  commit(ctx: ExtensionContext, state: TodoState): void {
-    this.store.commit(ctx, state);
-  }
-
-  replay(ctx: ExtensionContext): void {
-    this.store.replay(ctx);
-  }
-
-  persistSnapshot(ctx: ExtensionContext): void {
-    this.store.persistSnapshot(ctx);
-  }
+import type { TodoState } from "./types";
+
+/** Session-scoped todo state, committed to the `todos.state` custom entry. */
+export function createTodoStore(
+  persist: (snapshot: TodoState) => void,
+  onRefresh?: (ctx: ExtensionContext) => void,
+): SessionRecordStore<TodoState> {
+  return createSessionStore<TodoState>({
+    empty: () => ({ todos: [], nextId: 1 }),
+    entryType: STATE_ENTRY,
+    snapshotOf: (entry) => entry.data as TodoState | undefined,
+    onChange: (state, ctx) => {
+      persist(state);
+      onRefresh?.(ctx);
+    },
+  });
 }

package/src/tool.ts

@@ -5,7 +5,7 @@ import { Type } from "typebox";
 
 import { STATUSES } from "./constants";
 import { applyAction } from "./core";
-import type { TodoStore } from "./state";
+import type { SessionRecordStore } from "@leo-alvarenga/pi-ext-core";
 import type { TodoDetails, TodoState } from "./types";
 
 const TodoParams = Type.Object({
@@ -38,7 +38,10 @@ const TodoParams = Type.Object({
   ),
 });
 
-export function registerTodoTool(pi: ExtensionAPI, store: TodoStore): void {
+export function registerTodoTool(
+  pi: ExtensionAPI,
+  store: SessionRecordStore<TodoState>,
+): void {
   pi.registerTool({
     name: "todo",
     label: "Todo",
@@ -106,7 +109,7 @@ export function registerTodoTool(pi: ExtensionAPI, store: TodoStore): void {
 
 export function registerTodoCompleteAllTool(
   pi: ExtensionAPI,
-  store: TodoStore,
+  store: SessionRecordStore<TodoState>,
 ): void {
   pi.registerTool({
     name: "todo_complete_all",

package/src/types.ts

@@ -1,16 +1,7 @@
-import { ThemeColor } from "@earendil-works/pi-coding-agent";
 import { STATUSES } from "./constants";
 
 export type TodoStatus = (typeof STATUSES)[number];
 
-export type TodoStatusUi = {
-  icon: string;
-  fg: ThemeColor;
-  bold?: boolean;
-  color: ThemeColor;
-  strikethrough?: boolean;
-};
-
 export interface Todo {
   id: number;
   text: string;

package/src/utils.ts

@@ -1,63 +1,14 @@
 import { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth } from "@earendil-works/pi-tui";
+import { PANEL_STATE_ICON } from "@leo-alvarenga/pi-ext-core";
 
-import { Todo, TodoStatus } from "./types";
-import { MAX_PANEL_ROWS, PANEL_STATE_ICON, STATUS_STYLES } from "./constants";
+import type { Todo, TodoStatus } from "./types";
+import { MAX_PANEL_ROWS, STATUS_STYLES } from "./constants";
 
-export function getStyledTodoList(
+/** Panel header: collapsed/expanded icon plus per-status counts. */
+export function getHeader(
   todos: Todo[],
   th: Theme,
-  width: number,
-  isCollapsed?: boolean,
-): string[] {
-  const indent = (str: string, level = 1) => "  ".repeat(Math.abs(level)) + str;
-
-  const lines: string[] = [
-    truncateToWidth(
-      indent(getStyledTodoListHeader(todos, th, isCollapsed)),
-      width,
-    ),
-  ];
-
-  if (!isCollapsed) {
-    lines.push("");
-
-    if (todos.length === 0) {
-      lines.push(
-        truncateToWidth(
-          indent(th.fg("dim", "No todos yet. Ask the agent to add some!"), 2),
-          width,
-        ),
-      );
-    } else {
-      const visible = todos.slice(0, MAX_PANEL_ROWS);
-
-      for (const t of visible) {
-        lines.push(
-          truncateToWidth(indent(getStyledTodo(t, todos, th), 2), width),
-        );
-      }
-
-      if (todos.length > visible.length) {
-        lines.push(
-          truncateToWidth(
-            indent(th.fg("dim", `… +${todos.length - visible.length} more`), 3),
-            width,
-          ),
-        );
-      }
-    }
-  }
-
-  lines.push("");
-
-  return lines;
-}
-
-export function getStyledTodoListHeader(
-  todos: Todo[],
-  th: Theme,
-  isCollapsed?: boolean,
+  isCollapsed: boolean,
 ): string {
   const count = todos.reduce<Record<TodoStatus, number>>(
     (acc, t) => {
@@ -67,27 +18,50 @@ export function getStyledTodoListHeader(
     { pending: 0, "in-progress": 0, completed: 0 },
   );
 
-  const collapseState = isCollapsed ? "collapsed" : "expanded";
-
-  const statuses: TodoStatus[] = ["pending", "in-progress", "completed"];
-
-  const counter = statuses
+  const counter = (["pending", "in-progress", "completed"] as TodoStatus[])
     .map((s) => {
-      const { icon, color } = STATUS_STYLES[s] ?? STATUS_STYLES.pending;
+      const { icon, color = "text" } =
+        STATUS_STYLES[s] ?? STATUS_STYLES.pending;
 
       return th.fg(color, `${icon}${count[s] ?? 0}`);
     })
     .join(th.fg("dim", " / "));
 
-  return th.fg(
-    "accent",
-    `${PANEL_STATE_ICON[collapseState]}  Todos - ${counter}`,
-  );
+  const state = isCollapsed ? "collapsed" : "expanded";
+
+  return th.fg("accent", `${PANEL_STATE_ICON[state]} 󰄲 Todos - ${counter}`);
+}
+
+export function getSortedTodos(todos: Todo[]): Todo[] {
+  if (todos.length <= MAX_PANEL_ROWS) return todos;
+
+  const weights: Record<TodoStatus, number> = {
+    pending: 0,
+    completed: 2,
+    "in-progress": 1,
+  };
+
+  const sorted = todos.sort((a, b) => {
+    const wa = weights[a.status];
+    const wb = weights[b.status];
+
+    if (wa === wb) return a.id - b.id;
+
+    return wa - wb;
+  });
+
+  return sorted;
 }
 
+/** One panel/report row for a todo. */
 export function getStyledTodo(t: Todo, todos: Todo[], th: Theme): string {
-  const { icon, fg, bold, strikethrough, color } =
-    STATUS_STYLES[t.status] ?? STATUS_STYLES.pending;
+  const {
+    fg,
+    bold,
+    icon,
+    strikethrough,
+    color = "text",
+  } = STATUS_STYLES[t.status] ?? STATUS_STYLES.pending;
 
   const check = th.fg(color, icon);
   const id = th.fg("accent", `#${t.id}`);

package/src/widget.ts

@@ -1,28 +1,36 @@
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import {
+  createPanelWidget,
+  type PanelWidgetSpec,
+  type SessionRecordStore,
+} from "@leo-alvarenga/pi-ext-core";
 
-import { createPanelWidget, PanelWidgetSpec } from "@leo-alvarenga/pi-ext-core";
-
-import { PANEL_TOGGLE_CHORD, WIDGET_KEY } from "./constants";
-import type { TodoStore } from "./state";
+import { MAX_PANEL_ROWS, PANEL_TOGGLE_CHORD, WIDGET_KEY } from "./constants";
 import type { TodoState } from "./types";
-import { getStyledTodoList } from "./utils";
+import { getHeader, getSortedTodos, getStyledTodo } from "./utils";
 
-export function registerTodoWidget(pi: ExtensionAPI, store: TodoStore) {
+export function registerTodoWidget(
+  pi: ExtensionAPI,
+  store: SessionRecordStore<TodoState>,
+) {
   const spec: PanelWidgetSpec<TodoState> = {
+    store,
     widgetKey: WIDGET_KEY,
-    maxRows: 20,
-    emptyText: "No todos",
+    maxRows: MAX_PANEL_ROWS,
     toggleChord: PANEL_TOGGLE_CHORD,
-    isEmpty: (s) => s.todos.length === 0,
-    store,
-    moreLabel: (n) => `…and ${n} more`,
-    header: (s, theme, isCollapsed) =>
-      theme.fg("muted", isCollapsed ? "▶ Todos" : "▼ Todos"),
-    rows: (s, theme) => getStyledTodoList(s.todos, theme, 80, false),
+    moreLabel: (n) => `… +${n} more`,
+    emptyText: "No todos yet. Ask the agent to add some!",
+    header: (s, theme, isCollapsed) => getHeader(s.todos, theme, isCollapsed),
+
+    rows: (s, theme) =>
+      getSortedTodos(s.todos).map((t) => getStyledTodo(t, s.todos, theme)),
+
+    isEmpty: (s) =>
+      s.todos.length === 0 || s.todos.every((t) => t.status === "completed"),
   };
 
   const controls = createPanelWidget(pi, spec);
   controls.register();
+
   return controls;
 }
-