@gonrocca/zero-pi 0.1.67 → 0.1.69

package/README.md

@@ -116,6 +116,7 @@ into `/forge` for you.
 | **ZERO HUD** | OMP-inspired segmented footer for SDD work: phase, model, tokens, cache, cost, diff, context %, and branch. Switch presets with `/zero-hud compact\|minimal\|full\|ascii\|off` or `ZERO_HUD_PRESET`. |
 | **Pretty input box** | OMP-style prompt chrome with rounded corners, side borders, ZERO chips, and compact keyboard hints. |
 | **Pretty code fences** | Markdown code blocks render as bordered panels with language badges instead of raw ```txt / ```json fence lines. |
+| **Live activity panel** | Shows `/forge` phase progress and recent tool cards above the prompt while work is running. |
 | **Working-phrase ticker** | Swaps pi's static `Working...` / `Procesando...` for a large pool of context-aware Spanish/ZERO/SDD phrases + spinner. |
 | **Conversation resume** | Writes `.pi/zero-resume.md` on exit — the restore command + a conversation tail. |
 | **Windows tree-kill** | Aborting a turn kills the whole process tree — no orphaned `claude`. |
@@ -144,6 +145,69 @@ into `/forge` for you.
 | `/zero-diff <slug>` | Preview the logical spec-store merge without writing files. |
 | `/zero-resume` | Write the session handoff note now. |
 
+## 🎛️ Visual chrome: HUD, activity panel, prompt box
+
+zero-pi ships several visual extensions. They are related, but each one owns a different part of pi's TUI:
+
+| Surface | File | Where it appears | Purpose |
+| ------- | ---- | ---------------- | ------- |
+| **ZERO HUD** | `extensions/zero-hud.ts` | Footer/status line at the bottom | Persistent model/tokens/cost/diff/context/branch telemetry. |
+| **Activity panel** | `extensions/zero-activity-panel.ts` | Widget above the prompt while work is running | Live `/forge` phase progress plus recent tool cards. |
+| **Prompt box** | `extensions/zero-pretty-input-box.ts` | The input/editor box | OMP-like rounded box with ZERO chips and key hints. |
+| **Code fences** | `extensions/zero-pretty-code-fences.ts` | Markdown code blocks in chat | Bordered panels with language badges instead of raw ```txt / ```json lines. |
+| **Working phrases** | `extensions/working-phrases.ts` | Tiny loading row (`Procesando… (esc)`) | Rotating ZERO/SDD/Star Wars/DBZ phrases and themed spinner. |
+
+### ZERO HUD presets
+
+The HUD is the **bottom footer**. It is not the activity panel. Control it with:
+
+```txt
+/zero-hud preview
+/zero-hud compact
+/zero-hud minimal
+/zero-hud full
+/zero-hud ascii
+/zero-hud off
+/zero-hud on
+```
+
+Example compact HUD:
+
+```txt
+ZERO ▸ gpt-5.5 ▸ tok ↑1.1M ↓42K ▸ cost $16.22 ▸ diff +0/-0 ▸ ctx 11%
+```
+
+Startup preset can be set with:
+
+```bash
+ZERO_HUD_PRESET=full pi
+```
+
+Supported presets: `compact` (default), `minimal`, `full`, `ascii`, `off`.
+
+### Activity panel vs HUD
+
+During `/forge`, the activity panel appears **above the prompt** and summarizes the live run:
+
+```txt
+╭─ ZERO activity ───────────────────────────────────────────────────────╮
+│ SDD   ✓ clarify › ✓ explore › ⠋ plan › · analyze › · build › · veredicto
+│ Tools ⠋ subagent · ✓ read zero-hud.ts · ✓ bash npm test
+╰────────────────────────────────────────────────────────────────────────╯
+```
+
+The activity panel is transient: it clears after the agent finishes. The HUD stays in the footer across normal work.
+
+### Applying visual changes after install
+
+After `pi install npm:@gonrocca/zero-pi@<version>`, reload the active session:
+
+```txt
+/reload
+```
+
+If a visual monkeypatch was already loaded in the current process, restarting pi is the safest way to force all visual extensions to reinitialize.
+
 ### Git / PR / Issues
 
 Recommended flow: `/zero-branch <slug>` → `/zero-issue <slug>` → `/forge <slug>` (the orchestrator validates plan artifacts and can create `/zero-checkpoint` before build) → `/zero-git-validate <slug> --for=pr` → `/zero-pr <slug>` → `/zero-archive <slug>`.

package/extensions/working-phrases.ts

@@ -325,6 +325,13 @@ export default function register(pi?: PiAPI): void {
     installSpinner();
   });
 
+  // Pi can reset extension-owned UI during reload/session rebinds. Reinstall the
+  // spinner at the start of every run so the symbol survives those resets.
+  pi.on("before_agent_start", (_event, ctx) => {
+    capture(ctx);
+    installSpinner();
+  });
+
   pi.on("input", (event, ctx) => {
     capture(ctx);
     const text = (event as { text?: string })?.text ?? "";
@@ -333,6 +340,7 @@ export default function register(pi?: PiAPI): void {
 
   pi.on("agent_start", (_event, ctx) => {
     capture(ctx);
+    installSpinner();
     start();
   });
 

package/extensions/zero-activity-panel.ts

@@ -0,0 +1,266 @@
+// zero-pi — live activity panel for /forge progress and recent tool cards.
+//
+// This extension uses pi's public widget API (ctx.ui.setWidget) to render a
+// compact panel above the input while the agent works. It intentionally avoids
+// replacing pi's built-in tool renderer: the panel is a live dashboard, not a
+// second source of truth.
+
+interface Ctx {
+  ui?: {
+    setWidget?: (key: string, content: string[] | undefined, options?: { placement?: "aboveEditor" | "belowEditor" }) => void;
+  };
+}
+
+interface PiAPI {
+  on(event: string, handler: (event: unknown, ctx: Ctx) => unknown): void;
+}
+
+export const PHASES = ["clarify", "explore", "plan", "analyze", "build", "veredicto"] as const;
+export type Phase = (typeof PHASES)[number];
+export type PhaseState = "pending" | "active" | "done" | "error";
+export type ToolState = "running" | "ok" | "error";
+
+export interface ToolCard {
+  id: string;
+  name: string;
+  label: string;
+  state: ToolState;
+}
+
+export interface ActivityState {
+  sddActive: boolean;
+  phases: Record<Phase, PhaseState>;
+  tools: ToolCard[];
+}
+
+const WIDGET_ID = "zero-activity-panel";
+const MAX_TOOLS = 5;
+
+const PHASE_FROM_AGENT: Record<string, Phase> = {
+  "zero-clarify": "clarify",
+  "zero-explore": "explore",
+  "zero-plan": "plan",
+  "zero-analyze": "analyze",
+  "zero-build": "build",
+  "zero-veredicto": "veredicto",
+};
+
+function esc(code: string, text: string): string {
+  return `\x1b[${code}m${text}\x1b[0m`;
+}
+
+const color = {
+  dim: (s: string) => esc("38;2;112;99;88", s),
+  muted: (s: string) => esc("38;2;184;155;120", s),
+  gold: (s: string) => esc("38;2;246;184;90", s),
+  coral: (s: string) => esc("38;2;255;107;95", s),
+  green: (s: string) => esc("38;2;0;255;138", s),
+  cyan: (s: string) => esc("38;2;0;215;255", s),
+  magenta: (s: string) => esc("38;2;216;107;255", s),
+  red: (s: string) => esc("38;2;255;79;123", s),
+};
+
+export function createActivityState(): ActivityState {
+  return {
+    sddActive: false,
+    phases: Object.fromEntries(PHASES.map((phase) => [phase, "pending"])) as Record<Phase, PhaseState>,
+    tools: [],
+  };
+}
+
+export function isForgeInput(text: string): boolean {
+  return /(?:^|\s)\/forge\b|\bzero[\s-]?sdd\b|\bsdd\b/i.test(text ?? "");
+}
+
+function collectAgents(args: unknown, out = new Set<string>()): Set<string> {
+  if (!args || typeof args !== "object") return out;
+  const a = args as Record<string, unknown>;
+  if (typeof a.agent === "string") out.add(a.agent);
+  for (const key of ["chain", "tasks"] as const) {
+    const list = a[key];
+    if (!Array.isArray(list)) continue;
+    for (const entry of list) {
+      if (!entry || typeof entry !== "object") continue;
+      const e = entry as Record<string, unknown>;
+      if (typeof e.agent === "string") out.add(e.agent);
+      const parallel = e.parallel;
+      if (Array.isArray(parallel)) {
+        for (const p of parallel) collectAgents(p, out);
+      }
+    }
+  }
+  return out;
+}
+
+export function phaseFromSubagentArgs(args: unknown): Phase | undefined {
+  for (const name of collectAgents(args)) {
+    const key = name.toLowerCase().split(".").pop() ?? name.toLowerCase();
+    const phase = PHASE_FROM_AGENT[key];
+    if (phase) return phase;
+  }
+  return undefined;
+}
+
+export function markPhaseActive(state: ActivityState, phase: Phase): void {
+  state.sddActive = true;
+  const activeIndex = PHASES.indexOf(phase);
+  for (const [index, name] of PHASES.entries()) {
+    if (index < activeIndex && state.phases[name] === "pending") state.phases[name] = "done";
+    if (name === phase) state.phases[name] = "active";
+  }
+}
+
+export function finishActivePhase(state: ActivityState, failed: boolean): void {
+  const active = PHASES.find((phase) => state.phases[phase] === "active");
+  if (!active) return;
+  state.phases[active] = failed ? "error" : "done";
+}
+
+export function toolLabel(toolName: string, args?: unknown): string {
+  const name = (toolName || "tool").split(/[._-]/)[0] || toolName || "tool";
+  if (toolName === "bash" && args && typeof args === "object") {
+    const command = String((args as Record<string, unknown>).command ?? "").trim();
+    const first = command.split(/\s+/).slice(0, 2).join(" ");
+    return first ? `bash ${first}` : "bash";
+  }
+  if (/read/i.test(toolName) && args && typeof args === "object") {
+    const path = String((args as Record<string, unknown>).path ?? "");
+    const short = path.split("/").filter(Boolean).pop();
+    return short ? `read ${short}` : "read";
+  }
+  if (/edit|write/i.test(toolName) && args && typeof args === "object") {
+    const path = String((args as Record<string, unknown>).path ?? "");
+    const short = path.split("/").filter(Boolean).pop();
+    return short ? `${name} ${short}` : name;
+  }
+  if (toolName.includes("__")) {
+    const [, server, tool] = toolName.split("__");
+    return `${server ?? "mcp"}:${tool ?? "tool"}`;
+  }
+  return toolName || "tool";
+}
+
+export function upsertTool(state: ActivityState, card: ToolCard): void {
+  const existing = state.tools.findIndex((tool) => tool.id === card.id);
+  if (existing >= 0) state.tools.splice(existing, 1);
+  state.tools.unshift(card);
+  state.tools = state.tools.slice(0, MAX_TOOLS);
+}
+
+function phaseGlyph(state: PhaseState): string {
+  switch (state) {
+    case "active": return color.cyan("⠋");
+    case "done": return color.green("✓");
+    case "error": return color.red("✗");
+    default: return color.dim("·");
+  }
+}
+
+function toolGlyph(state: ToolState): string {
+  switch (state) {
+    case "running": return color.cyan("⠋");
+    case "ok": return color.green("✓");
+    case "error": return color.red("✗");
+  }
+}
+
+export function renderActivityPanel(state: ActivityState): string[] {
+  if (!state.sddActive && state.tools.length === 0) return [];
+  const rule = (n: number) => color.coral("─".repeat(n));
+  const border = rule(72);
+  const header = `${color.coral("╭─")} ${color.gold("ZERO activity")} ${rule(54)}${color.coral("╮")}`;
+  const phaseLine = PHASES
+    .map((phase) => `${phaseGlyph(state.phases[phase])} ${state.phases[phase] === "active" ? color.cyan(phase) : color.muted(phase)}`)
+    .join(color.dim(" › "));
+  const toolLine = state.tools.length === 0
+    ? color.dim("sin tools todavía")
+    : state.tools.map((tool) => `${toolGlyph(tool.state)} ${color.muted(tool.label)}`).join(color.dim(" · "));
+  return [
+    header,
+    `${color.coral("│")} ${color.magenta("SDD ")} ${phaseLine}`,
+    `${color.coral("│")} ${color.magenta("Tools")} ${toolLine}`,
+    `${color.coral("╰")}${border}${color.coral("╯")}`,
+  ];
+}
+
+let registered = false;
+
+export default function register(pi?: PiAPI): void {
+  if (!pi || typeof pi.on !== "function") return;
+  if (registered) return;
+  registered = true;
+
+  const state = createActivityState();
+  let ui: Ctx["ui"] | undefined;
+
+  const capture = (ctx: Ctx): void => {
+    if (ctx?.ui?.setWidget) ui = ctx.ui;
+  };
+
+  const draw = (): void => {
+    try {
+      const lines = renderActivityPanel(state);
+      ui?.setWidget?.(WIDGET_ID, lines.length > 0 ? lines : undefined, { placement: "aboveEditor" });
+    } catch {
+      // Visual sugar must never break the session.
+    }
+  };
+
+  const clear = (): void => {
+    state.sddActive = false;
+    state.tools = [];
+    for (const phase of PHASES) state.phases[phase] = "pending";
+    try { ui?.setWidget?.(WIDGET_ID, undefined); } catch { /* ignore */ }
+  };
+
+  pi.on("session_start", (_event, ctx) => {
+    capture(ctx);
+    draw();
+  });
+
+  pi.on("input", (event, ctx) => {
+    capture(ctx);
+    const text = String((event as { text?: unknown })?.text ?? "");
+    if (isForgeInput(text)) {
+      state.sddActive = true;
+      draw();
+    }
+  });
+
+  pi.on("tool_execution_start", (event, ctx) => {
+    capture(ctx);
+    const e = event as { toolCallId?: string; toolName?: string; args?: unknown };
+    const phase = e.toolName === "subagent" ? phaseFromSubagentArgs(e.args) : undefined;
+    if (phase) markPhaseActive(state, phase);
+    upsertTool(state, {
+      id: e.toolCallId ?? `${Date.now()}`,
+      name: e.toolName ?? "tool",
+      label: toolLabel(e.toolName ?? "tool", e.args),
+      state: "running",
+    });
+    draw();
+  });
+
+  pi.on("tool_execution_end", (event, ctx) => {
+    capture(ctx);
+    const e = event as { toolCallId?: string; toolName?: string; isError?: boolean };
+    const id = e.toolCallId ?? "";
+    const idx = state.tools.findIndex((tool) => tool.id === id);
+    if (idx >= 0) state.tools[idx].state = e.isError ? "error" : "ok";
+    if (e.toolName === "subagent") finishActivePhase(state, Boolean(e.isError));
+    draw();
+  });
+
+  pi.on("agent_end", (_event, ctx) => {
+    capture(ctx);
+    // Leave the completed panel visible briefly in the next render cycle, then clear.
+    setTimeout(clear, 1800).unref?.();
+  });
+
+  for (const lifecycle of ["session_shutdown", "session_before_switch"]) {
+    pi.on(lifecycle, (_event, ctx) => {
+      capture(ctx);
+      clear();
+    });
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gonrocca/zero-pi",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "zero-pi — an installable layer for pi (pi.dev): the zero spec-driven development workflow (clarify → explore → plan → analyze → build → veredicto) with automatic clarify/analyze gates, per-phase model autotune, and token-efficient batched builds. Adds capability to pi without modifying pi.",
   "type": "module",
   "keywords": [
@@ -28,6 +28,7 @@
       "./extensions/zero-hud.ts",
       "./extensions/zero-pretty-code-fences.ts",
       "./extensions/zero-pretty-input-box.ts",
+      "./extensions/zero-activity-panel.ts",
       "./extensions/working-phrases.ts",
       "./extensions/win-tree-kill.ts",
       "./extensions/sdd-agents.ts",
@@ -59,6 +60,7 @@
     "extensions/zero-hud.ts",
     "extensions/zero-pretty-code-fences.ts",
     "extensions/zero-pretty-input-box.ts",
+    "extensions/zero-activity-panel.ts",
     "extensions/zero-statusline.ts",
     "extensions/working-phrases.ts",
     "extensions/win-tree-kill.ts",