pi-todo 1.0.0 → 1.1.0

package/README.md

@@ -96,18 +96,30 @@ Tasks are stored in `.pi/todo.json` in the project root:
 
 ## Widget
 
-The live widget appears above the editor and shows:
+The live widget appears above the editor with a green border and shows:
 
 ```
-📋 TODO · 3 tasks
-  2 pending · 1 active
-  ⚪ T-001 [HIGH] Build StorefrontController · Ultron
-  ⚪ T-002 [MED]  Port landing.html · Maya
-  🔵 T-003 [LOW]  Verify storefront routes · Quinn
+┌──────────────────────────────────────────────────┐
+│ 📋 TODO · 3 tasks                                 │
+│   2 pending · 1 active                            │
+│   ⚪ T-001 [HIGH] Build StorefrontController · Ultron │
+│   ⚪ T-002 [MED]  Port landing.html · Maya        │
+│   🔵 T-003 [LOW]  Verify storefront routes · Quinn │
+└──────────────────────────────────────────────────┘
 ```
 
 Status icons: ⚪ pending, 🔵 in-progress, ✅ done, 🔴 blocked
 
+## Changelog
+
+### v1.1.0
+
+- **Bordered widget** — The live widget now renders inside a green Unicode box border (uses `theme.fg("success")`) for better visual separation from the chat area.
+
+### v1.0.0
+
+- Initial release: todo tool, live widget, slash commands, per-project persistence.
+
 ## Design Decisions
 
 - **Per-project, not global** — Each project has its own todo list

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-todo",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Persistent per-project todo tracker with live TUI widget for Pi",
   "author": "mrg2400xx",
   "license": "MIT",

package/src/render.ts

@@ -8,6 +8,78 @@ import type { TodoItem, TodoStatus, TodoPriority } from "./store.ts";
 
 type Theme = ExtensionContext["ui"]["theme"];
 
+/**
+ * BorderedBox — a container that draws a Unicode box border around its children.
+ * The border color is controlled by the `colorFn` argument (e.g. theme.fg("success", ...)).
+ */
+class BorderedBox implements Component {
+	private children: Component[] = [];
+	private colorFn: (text: string) => string;
+	private cachedLines: string[] | null = null;
+	private cachedWidth: number | null = null;
+
+	constructor(colorFn: (text: string) => string) {
+		this.colorFn = colorFn;
+	}
+
+	addChild(component: Component): void {
+		this.children.push(component);
+		this.invalidate();
+	}
+
+	invalidate(): void {
+		this.cachedLines = null;
+		this.cachedWidth = null;
+		for (const child of this.children) {
+			child.invalidate?.();
+		}
+	}
+
+	render(width: number): string[] {
+		// Cache hit
+		if (this.cachedLines && this.cachedWidth === width) {
+			return this.cachedLines;
+		}
+
+		// Inner width: total - 2 (left/right border chars)
+		const innerWidth = Math.max(0, width - 2);
+
+		// Render all children into flat line array
+		const innerLines: string[] = [];
+		for (const child of this.children) {
+			const rendered = child.render(innerWidth);
+			for (const line of rendered) {
+				innerLines.push(line);
+			}
+		}
+
+		const c = this.colorFn;
+		const topLeft = c("┌");
+		const topRight = c("┐");
+		const bottomLeft = c("└");
+		const bottomRight = c("┘");
+		const horizontal = c("─");
+		const vertical = c("│");
+
+		const lines: string[] = [];
+
+		// Top border
+		lines.push(`${topLeft}${horizontal.repeat(innerWidth)}${topRight}`);
+
+		// Middle rows
+		for (const inner of innerLines) {
+			lines.push(`${vertical}${inner}${vertical}`);
+		}
+
+		// Bottom border
+		lines.push(`${bottomLeft}${horizontal.repeat(innerWidth)}${bottomRight}`);
+
+		this.cachedLines = lines;
+		this.cachedWidth = width;
+		return lines;
+	}
+}
+
 const STATUS_ICON: Record<TodoStatus, string> = {
 	pending: "⚪",
 	"in-progress": "🔵",
@@ -83,11 +155,11 @@ export function createWidgetComponent(items: TodoItem[]): (tui: unknown, theme:
 	return (_tui: unknown, theme: Theme) => {
 		const width = process.stdout.columns || 120;
 		const lines = buildWidgetLines(items, theme, width);
-		const container = new Container();
+		const box = new BorderedBox((text: string) => theme.fg("success", text));
 		for (const line of lines) {
-			container.addChild(new Text(line, 1, 0));
+			box.addChild(new Text(line, 1, 0));
 		}
-		return container;
+		return box;
 	};
 }