@d3ara1n/pi-editor-shell 0.1.0

package/README.md

@@ -0,0 +1,61 @@
+# pi-editor-shell
+
+Replaces pi's default editor and status bar with a unified rounded-corner shell drawn with box-drawing glyphs (`╭╮││╰╯`), with status info embedded in the border. No Nerd Font required for the frame itself.
+
+## What shows up where
+
+- **Top border** — ` model · thinking-level ` (left) + pinned extension statuses (right, via `pinnedStatus` config)
+- **Bottom border** — ` ctx NN%/NNNk · cache-tokens ` (left) + ` ~current/dir (branch) ` (right, includes git branch when available)
+- **Below shell** — Auto-wrapping extension status line (all `setStatus` entries not pinned to the top)
+- **Border color** follows pi's thinking-level / bash-mode indicator automatically.
+
+All segments are re-read from live session state on every paint, so switching thinking level or burning context updates the frame on the next render with no extra wiring.
+
+## Configuration
+
+In `~/.pi/agent/settings.json` under the `editorShell` key:
+
+```jsonc
+{
+  "editorShell": {
+    // Status keys to pin to the top-right corner of the shell.
+    // Only keys set via ctx.ui.setStatus() are eligible.
+    "pinnedStatus": ["subagent", "access-denied"]
+  }
+}
+```
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `/editor-shell:status` | Show debug info: pinned config, all extension statuses with their keys, cache totals |
+
+## How it works
+
+The default pi editor only draws a horizontal line above and below the input area (no side borders), and a separate footer renders the status bar. This extension replaces both — it wraps the built-in `CustomEditor`, renders it at `width - 2`, wraps every line with left/right glyphs, and embeds the status bar information (extension statuses) below the shell. The total width is unchanged. Border color follows pi's `borderColor` (which encodes thinking level / bash mode), so the shell stays semantically consistent and reacts to theme changes automatically.
+
+## Installation
+
+Add the package directory to the `extensions` array in `~/.pi/agent/settings.json`:
+
+```jsonc
+{
+  "extensions": [
+    "/absolute/path/to/pi-extensions/packages/pi-editor-shell"
+  ]
+}
+```
+
+Then run `/reload` or restart pi.
+
+## Caveats
+
+- **Mutually exclusive** with other editor-replacing extensions (`border-status-editor`, `rainbow-editor`, `modal-editor`, …). Disable those when enabling this one — `setEditorComponent` is last-writer-wins.
+- When the content scrolls, pi's native `↑ N more` / `↓ N more` indicators are replaced by the embedded status text (status takes precedence).
+- Falls back to the default editor below `MIN_WIDTH` (20 columns).
+
+## Dependencies
+
+- [`@earendil-works/pi-coding-agent`](https://www.npmjs.com/package/@earendil-works/pi-coding-agent)
+- [`@earendil-works/pi-tui`](https://www.npmjs.com/package/@earendil-works/pi-tui)

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@d3ara1n/pi-editor-shell",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Replaces pi's default editor and status bar with a unified rounded-corner shell — no Nerd Font required",
+  "keywords": [
+    "pi-package",
+    "pi"
+  ],
+  "main": "src/index.ts",
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  },
+  "pi": {
+    "extensions": [
+      "./src/index.ts"
+    ]
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/d3ara1n/pi-extensions",
+    "directory": "packages/pi-editor-shell"
+  }
+}

package/src/card-editor.ts

@@ -0,0 +1,275 @@
+import { CustomEditor } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+// Pull the constructor parameter types straight off CustomEditor so they are
+// structurally identical to what `super(...)` expects. Importing TUI /
+// EditorTheme from "@earendil-works/pi-tui" would resolve to this repo's
+// top-level copy, which is a *different* declaration than the one nested
+// inside @earendil-works/pi-coding-agent — the two are not assignable.
+type CtorArgs = ConstructorParameters<typeof CustomEditor>;
+
+// Box-drawing glyphs (U+2500 block). Supported by virtually every monospace
+// font — no Nerd Font required for the frame itself.
+const GLYPH = {
+  topLeft: "╭",
+  topRight: "╮",
+  bottomLeft: "╰",
+  bottomRight: "╯",
+  vertical: "│",
+  // T-junction caps: used when autocomplete splits the card into two stacked
+  // panes. ctx/cwd live on this divider so they always sit just under the
+  // editor, regardless of whether the popup is open.
+  divLeft: "├",
+  divRight: "┤",
+} as const;
+
+/** Below this terminal width the frame hurts readability — fall back to default. */
+const MIN_WIDTH = 20;
+
+const SPINNER_INTERVAL_MS = 80;
+
+/** Agent phase — each gets its own spinner animation. */
+export type SpinnerPhase = "thinking" | "outputting" | "toolcall" | "exec";
+
+/** Spinner frames keyed by agent phase, chosen for semantic fit:
+ *  thinking  — ●/○ pulse, doubled frames to halve the tempo
+ *  outputting — braille sand-pile (dots accumulate bottom-up, then clear)
+ *  toolcall  — ▓▒░ breathing light (single char, fades in/out)
+ *  exec      — ◜◝◞◟ arc rotation (tool spinning, mechanical) */
+const SPINNERS: Record<SpinnerPhase, readonly string[]> = {
+  thinking: ["●", "●", "○", "○"],
+  outputting: ["⡀", "⣀", "⣄", "⣤", "⣦", "⣶", "⣷", "⣿"],
+  toolcall: ["▓", "▒", "░", "░", "▒"],
+  exec: ["◜", "◝", "◞", "◟"],
+};
+
+const RESET = "\x1b[0m";
+
+/**
+ * Already-themed text segments to embed in the four border positions.
+ * Empty string = no segment; the gap filler expands to fill the space.
+ * The extension (not this class) is responsible for applying colors, so the
+ * editor never has to touch the private `theme` field of the base Editor.
+ */
+export interface FrameSegments {
+  topLeft: string;
+  topRight: string;
+  bottomLeft: string;
+  bottomRight: string;
+}
+
+/** Fresh, already-themed segments. The frame color itself comes from pi's
+ *  editor.borderColor field (same source as the default editor), kept in
+ *  sync by pi on thinking-level / bash-mode changes — so the border
+ *  matches the built-in behavior.
+ *
+ *  (An optional `frame` override exists for experiments; when omitted the
+ *  editor falls back to editor.borderColor.) */
+export interface Frame {
+  segments: FrameSegments;
+  frame?: (s: string) => string;
+}
+
+/** Returns a fresh Frame on each render call. */
+export type FrameProvider = () => Frame;
+
+const EMPTY_FRAME: Frame = {
+  segments: { topLeft: "", topRight: "", bottomLeft: "", bottomRight: "" },
+  frame: (s) => s,
+};
+
+/** Strip ANSI SGR escapes and pi's zero-width cursor marker so a line can
+ *  be inspected by visible content alone. Border rows never carry cursor
+ *  markers or hyperlinks, so this light treatment is sufficient.
+ *
+ *  Control chars are built via String.fromCharCode so the regex source holds
+ *  no literal escape sequences — that keeps linters that ban control
+ *  characters inside regex literals happy while still matching real ESC/BEL. */
+const SGR_RE = new RegExp(`${String.fromCharCode(27)}\\[[0-9;]*m`, "g");
+const CURSOR_MARKER = `${String.fromCharCode(27)}_pi:c${String.fromCharCode(7)}`;
+
+function stripAnsi(s: string): string {
+  return s.replace(SGR_RE, "").replaceAll(CURSOR_MARKER, "");
+}
+
+/** A horizontal border row is all box-drawing `─` (plus whitespace),
+ *  optionally holding a scroll indicator like `↑ 3 more`. Anything else —
+ *  editor content, autocomplete items — contains other visible glyphs. */
+function isBorderRow(line: string): boolean {
+  const core = stripAnsi(line).replace(/[─\s]/g, "");
+  return core === "" || /^[↑↓]\d+more$/.test(core);
+}
+
+/**
+ * Lay out one frame row: `leftCap leftText ──fill── rightText rightCap`,
+ * total visible width == `width`. Caps and the `─` filler take `borderColor`;
+ * the text segments are pre-themed by the caller. Long segments are
+ * truncated (right first, then left) so a minimum gap survives.
+ */
+function fitFrameRow(
+  leftCap: string,
+  rightCap: string,
+  leftText: string,
+  rightText: string,
+  width: number,
+  border: (s: string) => string,
+): string {
+  if (width <= 0) return "";
+  if (width === 1) return border(leftCap);
+  if (width === 2) return `${border(leftCap)}${border(rightCap)}`;
+
+  const inner = width - 2; // two caps
+  const minGap = 3;
+  let l = leftText;
+  let r = rightText;
+
+  while (visibleWidth(l) + visibleWidth(r) + minGap > inner && visibleWidth(r) > 0) {
+    r = truncateToWidth(r, Math.max(0, visibleWidth(r) - 1), "");
+  }
+  while (visibleWidth(l) + visibleWidth(r) + minGap > inner && visibleWidth(l) > 0) {
+    l = truncateToWidth(l, Math.max(0, visibleWidth(l) - 1), "");
+  }
+
+  const gap = Math.max(0, inner - visibleWidth(l) - visibleWidth(r));
+  return `${border(leftCap)}${l}${border("─".repeat(gap))}${r}${border(rightCap)}`;
+}
+
+/**
+ * Editor that wraps the built-in input area in a rounded-corner card frame,
+ * with optional status text embedded in the top/bottom borders.
+ *
+ * The default Editor only draws a horizontal line above and below the content
+ * (no side borders — see Editor.render). To get a closed box we render the
+ * editor at `width - 2` and wrap every line with a left/right glyph, so the
+ * total visible width still equals `width`. Each rendered line is computed
+ * fresh every frame (no cached themed strings), so theme changes and
+ * thinking/bash border-color shifts apply automatically with no invalidate
+ * work needed. Border glyphs use `this.borderColor`, the same function pi
+ * mutates to encode thinking level / bash mode, keeping the frame
+ * semantically consistent.
+ */
+export class CardEditor extends CustomEditor {
+  private readonly frameProvider?: FrameProvider;
+  private spinnerPhase: SpinnerPhase | null = null;
+  private spinnerIdx = 0;
+  private spinnerTimer?: ReturnType<typeof setInterval>;
+
+  constructor(
+    tui: CtorArgs[0],
+    theme: CtorArgs[1],
+    keybindings: CtorArgs[2],
+    frameProvider?: FrameProvider,
+  ) {
+    super(tui, theme, keybindings, { paddingX: 1 });
+    this.frameProvider = frameProvider;
+  }
+
+  /** Set the active spinner phase. `null` stops the spinner.
+   *  Same-phase calls are no-ops so rapid event streams don't reset the
+   *  animation index; phase transitions (thinking→outputting, etc.) do reset. */
+  setSpinner(phase: SpinnerPhase | null): void {
+    if (phase === this.spinnerPhase) return;
+    this.spinnerPhase = phase;
+    if (phase) {
+      this.spinnerIdx = 0;
+      if (!this.spinnerTimer) {
+        this.spinnerTimer = setInterval(() => {
+          const frames = this.spinnerPhase ? SPINNERS[this.spinnerPhase] : null;
+          if (!frames) return;
+          this.spinnerIdx = (this.spinnerIdx + 1) % frames.length;
+          this.tui.requestRender();
+        }, SPINNER_INTERVAL_MS);
+      }
+    } else {
+      if (this.spinnerTimer) clearInterval(this.spinnerTimer);
+      this.spinnerTimer = undefined;
+    }
+    this.tui.requestRender();
+  }
+
+  render(width: number): string[] {
+    // Too narrow — delegate to the default rendering, untouched.
+    if (width < MIN_WIDTH) {
+      return super.render(width);
+    }
+
+    // super.render(width - 2) guarantees every line's visible width == width - 2,
+    // so wrapping each line with one glyph on each side lands exactly on `width`.
+    const inner = super.render(width - 2);
+    if (inner.length === 0) return inner;
+
+    // Border color: prefer the provider's override when given, otherwise
+    // fall back to pi's editor.borderColor (same field the default editor
+    // reads, updated by pi on thinking / bash changes).
+    const frameObj = this.frameProvider?.() ?? EMPTY_FRAME;
+    const border = frameObj.frame ?? this.borderColor;
+    const seg = frameObj.segments;
+    // While the agent is active, the current phase spinner replaces the
+    // model text in the top-left slot — a moving indicator reads as "busy"
+    // more strongly than a static label.
+    const topLeft = this.spinnerPhase
+      ? `${RESET}${border(` ${SPINNERS[this.spinnerPhase][this.spinnerIdx % SPINNERS[this.spinnerPhase].length]} `)}${seg.topLeft.trimStart()}`
+      : seg.topLeft;
+
+    // The default Editor appends autocomplete rows *after* the bottom border.
+    // So the real bottom border is the last row that still looks like one —
+    // not necessarily `inner.length - 1`. Treating an autocomplete item as
+    // the bottom border (the old `i === last` check) fed it through
+    // fitFrameRow, which truncated/filled the item text and rendered the
+    // popup empty.
+    let bottomIdx = inner.length - 1;
+    while (bottomIdx > 0 && !isBorderRow(inner[bottomIdx])) bottomIdx--;
+    // inner[0] is always the top border, so a real bottom border is ≥ 1.
+    // (Editor.render always pushes one; this only guards the degenerate case.)
+    if (bottomIdx === 0) bottomIdx = inner.length - 1;
+
+    // When the popup is open, pi's bottom border sits *between* the editor
+    // content and the popup items. We turn that middle border into a
+    // T-junction divider (carrying ctx/cwd), wrap the popup items with the
+    // same verticals as content, and close everything with a fresh rounded
+    // bottom — one connected card, two panes.
+    const hasPopup = bottomIdx < inner.length - 1;
+
+    const out: string[] = [];
+    for (let i = 0; i < inner.length; i++) {
+      const line = inner[i];
+      if (i === 0) {
+        // Top border: rebuild with embedded status text (status takes
+        // precedence over pi's plain ─ / "↑ N more" scroll indicator).
+        out.push(fitFrameRow(GLYPH.topLeft, GLYPH.topRight, topLeft, seg.topRight, width, border));
+      } else if (i === bottomIdx) {
+        // ctx/cwd always sit just under the editor. With a popup below, this
+        // border becomes a T-junction divider; without one it's the rounded
+        // bottom of the card.
+        out.push(
+          hasPopup
+            ? fitFrameRow(
+                GLYPH.divLeft,
+                GLYPH.divRight,
+                seg.bottomLeft,
+                seg.bottomRight,
+                width,
+                border,
+              )
+            : fitFrameRow(
+                GLYPH.bottomLeft,
+                GLYPH.bottomRight,
+                seg.bottomLeft,
+                seg.bottomRight,
+                width,
+                border,
+              ),
+        );
+      } else {
+        // Content row and popup items alike live inside the card. Reset around
+        // the text so its styling never leaks into the frame and vice versa.
+        out.push(`${border(GLYPH.vertical)}${RESET}${line}${RESET}${border(GLYPH.vertical)}`);
+      }
+    }
+    // The popup extends the card — close it with an empty rounded bottom.
+    if (hasPopup) {
+      out.push(fitFrameRow(GLYPH.bottomLeft, GLYPH.bottomRight, "", "", width, border));
+    }
+    return out;
+  }
+}

package/src/config.ts

@@ -0,0 +1,71 @@
+/**
+ * Read editor-shell configuration from settings files.
+ *
+ * Global (~/.pi/agent/settings.json) + project (.pi/settings.json),
+ * project overrides global.
+ */
+
+import * as fs from "node:fs";
+import * as os from "node:os";
+import * as path from "node:path";
+
+export interface EditorShellConfig {
+  /**
+   * Status keys to pin to the shell's top-right corner.
+   * Only keys set via ctx.ui.setStatus() are eligible.
+   */
+  pinnedStatus: string[];
+}
+
+export const DEFAULT_CONFIG: EditorShellConfig = {
+  pinnedStatus: [],
+};
+
+function getAgentDir(): string {
+  const envDir = process.env.PI_AGENT_DIR;
+  if (envDir) return envDir;
+  return path.join(os.homedir(), ".pi", "agent");
+}
+
+function readSettingsFile(filePath: string): any {
+  try {
+    if (!fs.existsSync(filePath)) return {};
+    const content = fs.readFileSync(filePath, "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return {};
+  }
+}
+
+function merge(target: any, source: any): any {
+  if (!source || typeof source !== "object") return target;
+  if (!target || typeof target !== "object") return source;
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
+      result[key] = merge(result[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Load editorShell config from merged settings.
+ * @param cwd - Project working directory
+ */
+export function loadEditorShellConfig(cwd?: string): EditorShellConfig {
+  const globalSettings = readSettingsFile(path.join(getAgentDir(), "settings.json"));
+  const projectSettings = cwd ? readSettingsFile(path.join(cwd, ".pi", "settings.json")) : {};
+  const settings = merge(globalSettings, projectSettings);
+
+  const raw = settings?.editorShell;
+  if (!raw) return { ...DEFAULT_CONFIG };
+
+  return {
+    pinnedStatus: Array.isArray(raw.pinnedStatus)
+      ? raw.pinnedStatus.filter((k: any) => typeof k === "string")
+      : DEFAULT_CONFIG.pinnedStatus,
+  };
+}

package/src/index.ts

@@ -0,0 +1,342 @@
+import type { ExtensionAPI, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { spawnSync } from "node:child_process";
+import { CardEditor, type FrameProvider, type SpinnerPhase } from "./card-editor";
+import { loadEditorShellConfig, type EditorShellConfig } from "./config";
+
+/**
+ * pi-editor-shell — Replaces pi's default editor and status bar with a
+ * unified rounded-corner shell, embedding status info in the border:
+ * model · thinking level on top, context % + cwd on the bottom.
+ * Border color follows pi's thinking/bash indicator automatically.
+ *
+ * Caveat: `setEditorComponent` is a *replacement* API — mutually exclusive
+ * with other editor-replacing extensions (border-status-editor,
+ * rainbow-editor, modal-editor, …). Disable those when enabling this one.
+ */
+
+/** Collapse $HOME to `~` for display. */
+function formatCwd(cwd: string): string {
+  const home = process.env.HOME;
+  if (home && cwd.startsWith(home)) return `~${cwd.slice(home.length)}`;
+  return cwd;
+}
+
+/** Thinking level → its dedicated theme token, so the label tints the same
+ *  color pi applies to the border on that level (strongest "linked" feel). */
+const THINKING_TOKEN: Record<string, ThemeColor> = {
+  off: "thinkingOff",
+  minimal: "thinkingMinimal",
+  low: "thinkingLow",
+  medium: "thinkingMedium",
+  high: "thinkingHigh",
+  xhigh: "thinkingXhigh",
+};
+
+/** Context-fill severity by usage ratio — green / amber / red. */
+function contextToken(pct: number | null | undefined): ThemeColor {
+  if (pct === null || pct === undefined) return "muted";
+  if (pct >= 80) return "error";
+  if (pct >= 50) return "warning";
+  return "success";
+}
+
+// ── Nerd Font icons (Octicons + FontAwesome) ──────────────────────────
+const ICON = {
+  model: "\uf4bc", //   oct-cpu
+  thinking: "\uf400", //   oct-light-bulb
+  context: "\uf49b", //   oct-cache
+  cache: "\u26a1", // ⚡  oct-zap
+  folder: "\uf07c", //   fa-folder
+} as const;
+
+/** Sum cache-read tokens across all assistant messages — same source and
+ *  same accumulation as pi's own footer (which renders "R14M").
+ *  Returns null when there is nothing to measure.
+ *  Inline types avoid importing the full pi-ai message union tree. */
+interface MsgSnap {
+  role: string;
+  usage?: { cacheRead?: number };
+}
+interface EntrySnap {
+  type: string;
+  message?: MsgSnap;
+}
+
+/** Sum cache-read tokens across all assistant messages,
+ *  matching pi's own footer filtering (type === "message"). */
+function sumCacheRead(ctx: { sessionManager: { getEntries(): unknown[] } }): number {
+  let total = 0;
+  for (const entry of ctx.sessionManager.getEntries()) {
+    const e = entry as EntrySnap;
+    if (e.type !== "message" || e.message?.role !== "assistant" || !e.message.usage) continue;
+    total += e.message.usage.cacheRead ?? 0;
+  }
+  return total;
+}
+
+/** Format a token count for display: 14000000 → "14.0M", 132000 → "132.0k". */
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(n);
+}
+
+// ── Git dirty state (event-driven, not TTL) ───────────────────────
+// Refreshed at session_start and after every agent turn (turn_end).
+interface GitDirty {
+  staged: number;
+  unstaged: number;
+}
+let _gitDirty: GitDirty | undefined;
+
+/** Run `git status --porcelain` and count staged / unstaged files. */
+function refreshGitDirty(cwd: string): void {
+  try {
+    const r = spawnSync(
+      "git",
+      ["--no-optional-locks", "status", "--porcelain"],
+      { cwd, encoding: "utf8", stdio: ["ignore", "pipe", "ignore"], timeout: 2000 },
+    );
+    if (r.status !== 0 || r.error) { _gitDirty = undefined; return; }
+    const lines = r.stdout.trim();
+    if (!lines) { _gitDirty = { staged: 0, unstaged: 0 }; return; }
+
+    let staged = 0;
+    let unstaged = 0;
+    for (const line of lines.split("\n")) {
+      if (line.length < 2) continue;
+      const x = line[0];
+      const y = line[1];
+      if (x !== " " && x !== "?" && x !== "!") staged++;
+      if (y !== " ") unstaged++;
+    }
+    _gitDirty = { staged, unstaged };
+  } catch {
+    _gitDirty = undefined;
+  }
+}
+
+/** Format dirty state as pi-style "+2 ~1" string, or "" if clean / unknown. */
+function gitDirtyDisplay(): string {
+  if (!_gitDirty) return "";
+  const parts: string[] = [];
+  if (_gitDirty.staged > 0) parts.push(`+${_gitDirty.staged}`);
+  if (_gitDirty.unstaged > 0) parts.push(`~${_gitDirty.unstaged}`);
+  return parts.length ? ` ${parts.join(" ")}` : "";
+}
+
+/** Minimal footer-data shape — just enough to read extension status
+ *  texts and the current git branch. */
+type FooterSnap = {
+  getExtensionStatuses(): ReadonlyMap<string, string>;
+  getGitBranch(): string | null;
+};
+
+export default function (pi: ExtensionAPI) {
+  // The factory may run again when pi rebuilds the editor (model switch,
+  // reload, …), so always drive whichever instance is current.
+  let editor: CardEditor | undefined;
+  let config: EditorShellConfig = { pinnedStatus: [] };
+  // Shared footer-data ref — the provider (running inside CardEditor.render)
+  // reads it to resolve pinned status keys to their current text.
+  let footerSnap: FooterSnap | undefined;
+  // CWD cached from session_start — used by turn_end to refresh git dirty.
+  let _cwd = "";
+
+  // ── Phase-aware spinner ────────────────────────────────────────
+  // Track which sub-phase the agent is in so we can pick the right
+  // spinner animation: thinking (●/○), outputting (sand-pile),
+  // toolcall drafting (arc rotation), tool execution (progress bar).
+  let _phase: SpinnerPhase | null = null;
+
+  pi.on("turn_start", () => {
+    _phase = "thinking";
+    editor?.setSpinner("thinking");
+  });
+  pi.on("message_update", (event) => {
+    const t = event.assistantMessageEvent.type;
+    let next: SpinnerPhase;
+    if (t.startsWith("thinking_")) next = "thinking";
+    else if (t.startsWith("text_")) next = "outputting";
+    else if (t.startsWith("toolcall_")) next = "toolcall";
+    else return;
+    if (next !== _phase) {
+      _phase = next;
+      editor?.setSpinner(next);
+    }
+  });
+  pi.on("tool_execution_start", () => {
+    _phase = "exec";
+    editor?.setSpinner("exec");
+  });
+  pi.on("agent_end", () => {
+    _phase = null;
+    editor?.setSpinner(null);
+  });
+  pi.on("session_shutdown", () => {
+    _phase = null;
+    editor?.setSpinner(null);
+    editor = undefined;
+  });
+
+  // ── Debug command ──────────────────────────────────────────────
+  pi.registerCommand("editor-shell:status", {
+    description: "Show editor-shell debug state: status keys, pinned config, cache totals",
+    handler: async (_args, ctx) => {
+      const lines: string[] = [];
+
+      lines.push("[editor-shell config]");
+      lines.push(`  pinnedStatus: [${config.pinnedStatus.join(", ")}]`);
+
+      lines.push("");
+      lines.push("[extension statuses]");
+      if (footerSnap) {
+        const entries = Array.from(footerSnap.getExtensionStatuses().entries());
+        if (entries.length === 0) {
+          lines.push("  (none)");
+        } else {
+          const pinned = new Set(config.pinnedStatus);
+          for (const [key, text] of entries.sort(([a], [b]) => a.localeCompare(b))) {
+            const mark = pinned.has(key) ? " ← pinned" : "";
+            lines.push(`  ${key}: ${text}${mark}`);
+          }
+        }
+      } else {
+        lines.push("  (footer not initialized)");
+      }
+
+      lines.push("");
+      lines.push("[cache totals]");
+      const tokens = sumCacheRead(ctx);
+      lines.push(`  cacheRead: ${tokens > 0 ? formatTokens(tokens) : "0"}`);
+
+      lines.push("");
+      const cwd = ctx.cwd;
+      lines.push(`[context] cwd: ${cwd}`);
+      const branch = footerSnap?.getGitBranch();
+      lines.push(`  git branch: ${branch ?? "(not in repo)"}`);
+      if (branch) {
+        const ds = _gitDirty
+          ? `+${_gitDirty.staged} ~${_gitDirty.unstaged}`
+          : "(clean)";
+        lines.push(`  git dirty: ${ds}`);
+      }
+      const m = ctx.model;
+      lines.push(`  model: ${m ? `${m.provider}/${m.id}` : "none"}`);
+
+      ctx.ui.notify(lines.join("\n"), "info");
+    },
+  });
+
+  // Refresh git dirty after every agent turn (tools may have changed files).
+  pi.on("turn_end", () => {
+    if (_cwd) refreshGitDirty(_cwd);
+  });
+
+  pi.on("session_start", (_event, ctx) => {
+    if (!ctx.hasUI) return;
+
+    _cwd = ctx.cwd;
+    config = loadEditorShellConfig(ctx.cwd);
+    refreshGitDirty(ctx.cwd);
+
+    // Fresh segments on every render — reads live ctx state, so thinking /
+    // context % updates show up on the next paint without extra wiring.
+    // The border color itself is left to pi (editor.borderColor), matching
+    // the default editor's behavior.
+    const provider: FrameProvider = () => {
+      const theme = ctx.ui.theme;
+      const model = ctx.model ? `${ctx.model.provider}/${ctx.model.id}` : "no model";
+      const thinking = pi.getThinkingLevel();
+      const thinkingColor = THINKING_TOKEN[thinking] ?? "muted";
+
+      const usage = ctx.getContextUsage();
+      const pct = usage?.percent;
+      const ctxWindow = usage?.contextWindow ?? ctx.model?.contextWindow;
+      const ctxText =
+        pct !== null && pct !== undefined && ctxWindow
+          ? `${Math.round(pct)}%/${(ctxWindow / 1000).toFixed(0)}k`
+          : "?/??k";
+
+      // Cache-read token total — same data source pi's own footer uses for "R14M".
+      const cacheTokens = sumCacheRead(ctx);
+      const cachePart =
+        cacheTokens > 0
+          ? `${theme.fg("dim", " · ")}${theme.fg("warning", `${ICON.cache} ${formatTokens(cacheTokens)}`)}`
+          : "";
+
+      // Git branch + dirty state — pi's format: ~/Projects (main).
+      const cwdText = formatCwd(ctx.cwd);
+      const branch = footerSnap?.getGitBranch() ?? null;
+      const dirty = branch ? gitDirtyDisplay() : "";
+      const cwdDisplay =
+        branch && branch !== "detached"
+          ? `${ICON.folder} ${cwdText} (${branch}${dirty})`
+          : `${ICON.folder} ${cwdText}`;
+
+      return {
+        segments: {
+          // Model in accent; thinking label in its level token — same hue the
+          // border takes on, so switching levels visibly retints both together.
+          topLeft: ` ${theme.fg("accent", `${ICON.model} ${model}`)}${theme.fg("dim", " · ")}${theme.fg(thinkingColor, `${ICON.thinking} ${thinking}`)} `,
+          topRight: buildPinned(theme),
+          // Context in severity color; cwd stays muted so it never competes.
+          bottomLeft: ` ${theme.fg(contextToken(pct), `${ICON.context} ${ctxText}`)}${cachePart} `,
+          bottomRight: theme.fg("muted", ` ${cwdDisplay} `),
+        },
+      };
+
+      /** Resolve pinned status keys → already-themed text, " · "-joined. */
+      function buildPinned(theme: typeof ctx.ui.theme): string {
+        const keys = config.pinnedStatus;
+        if (keys.length === 0 || !footerSnap) return "";
+        const all = footerSnap.getExtensionStatuses();
+        const texts = keys
+          .map((k) => all.get(k))
+          .filter((s): s is string => s != null);
+        if (texts.length === 0) return "";
+        return ` ${texts.map((s) => theme.fg("muted", s)).join(theme.fg("dim", " · "))} `;
+      }
+    };
+
+    ctx.ui.setEditorComponent((tui, theme, keybindings) => {
+      editor = new CardEditor(tui, theme, keybindings, provider);
+      return editor;
+    });
+
+    // Replace pi's built-in footer with an auto-wrapping extension-status
+    // line below the shell.  Each status item is atomic — wrapping breaks
+    // between items, never mid-word.
+    ctx.ui.setFooter((_tui, theme, footerData) => {
+      footerSnap = footerData;
+      return {
+        render(width: number): string[] {
+          const pinned = new Set(config.pinnedStatus);
+          const statuses = Array.from(footerData.getExtensionStatuses().entries())
+            .filter(([key]) => !pinned.has(key))
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([, text]) => text);
+          if (statuses.length === 0) return [];
+
+          const sep = theme.fg("dim", " · ");
+          const lines: string[] = [];
+          let current = "";
+          for (const s of statuses) {
+            const candidate = current ? `${current}${sep}${s}` : s;
+            if (visibleWidth(candidate) <= width) {
+              current = candidate;
+            } else {
+              if (current) lines.push(current);
+              current = s;
+            }
+          }
+          if (current) lines.push(current);
+          return lines;
+        },
+        invalidate() {},
+        dispose() {},
+      };
+    });
+  });
+}