@nguyenquangthai/pi-todo 0.2.6 → 0.2.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.7 (2026-07-15)
+
+- Progress bar: use ANSI background-color (reverse video) instead of Unicode chars — zero alignment issues.
+- Progress bar colors: filled uses theme `accent`, empty uses theme `muted` for full theme compatibility.
+- Progress format: `[bg-bar] done/total` with single-width spaces.
+- Clean up heading: remove all Unicode block characters, simple and reliable.
+
 ## 0.2.6 (2026-07-15)
 
 - Restore Unicode block chars (`█`/`░`) for progress bar — looks cleaner.

package/README.md

@@ -58,11 +58,11 @@ Shown above the editor while any **open** todo remains (`pending` / `in_progress
 
 Hidden when the list is empty or every item is `completed` / `cancelled`.
 
-Heading shows open + running counts + progress bar, e.g. `# Todos (3 open, 1 running) ██░░ 25%`:
+Heading shows open + running counts + background-color progress bar, e.g. `# Todos (3 open, 1 running) ▓▓▓▓░░░░ 1/4`:
 
 - **open** = `pending` + `in_progress`
 - **running** = `in_progress` only (0 or 1 after a valid write)
-- **progress bar** = Unicode block chars, width adapted to terminal
+- **progress bar** = ANSI background color via reverse video, using theme `accent` (filled) and `muted` (empty)
 
 Items within each status group are sorted by priority (high → medium → low).
 When space is tight, completed/cancelled items collapse into `+N done`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nguyenquangthai/pi-todo",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "OpenCode-like session todo checklist for the pi coding agent — todowrite/todoread with a live TUI overlay",
   "type": "module",
   "author": "QuangThai",

package/src/format.ts

@@ -139,7 +139,7 @@ export interface RenderOverlayOptions {
  * - open    = pending + in_progress
  * - running = in_progress only (0 or 1 after a valid todo_write)
  * Overlay is hidden when open === 0, so "(0 open, 0 running)" is never shown.
- * Includes a visual progress bar: completed / total.
+ * Includes a background-color progress bar using theme colors.
  */
 export function renderOverlayLines(
   todos: readonly TodoItem[],
@@ -153,19 +153,22 @@ export function renderOverlayLines(
   const truncate = (line: string) => truncateToWidth(line, width, "…");
   const open = countOpenTodos(todos);
   const running = countRunningTodos(todos);
+
+  // Background-color progress bar via reverse video — uses theme accent/dim
   const total = todos.length;
   const done = total - open;
-  const pct = total > 0 ? Math.round((done / total) * 100) : 0;
-  const barWidth = Math.max(2, Math.min(6, Math.floor(width / 16)));
+  const barWidth = Math.max(4, Math.min(10, Math.floor(width / 8)));
   const filled = Math.round((barWidth * done) / total);
-  const bar =
-    "█".repeat(filled) + "░".repeat(Math.max(0, barWidth - filled));
-  const pctPad = pct.toString().padStart(3);
+  const REV = "\x1b[7m";
+  const filledBar = REV + theme.fg("accent", " ".repeat(filled));
+  const emptyBar =
+    filled < barWidth ? REV + theme.fg("muted", " ".repeat(barWidth - filled)) : "";
+  const bar = filledBar + emptyBar + "\x1b[0m";
 
   const heading = truncate(
     theme.fg("accent", theme.bold(`# Todos`)) +
       theme.fg("dim", ` (${open} open, ${running} running)`) +
-      theme.fg("muted", ` ${bar} ${pctPad}%`),
+      ` ${bar}` + theme.fg("dim", ` ${done}/${total}`),
   );
 
   // Small gap between heading and first row — budget -1 to account for the blank line