pi-sidebar-tui 1.2.0

package/README.md

@@ -0,0 +1,121 @@
+# pi-sidebar-tui
+
+OpenCode-style sidebar TUI extension for [pi coding agent](https://github.com/earendil-works/pi).
+
+Displays a real-time sidebar panel inside the pi terminal UI showing session metrics, todo tracking, subagent monitoring, workspace status, and connected MCP servers — inspired by [OpenCode](https://github.com/atanunny/opencode) sidebar.
+
+## Features
+
+### Session Panel
+- Session title (auto-inferred from first user message with LLM fallback, or manually set)
+- Session elapsed time (updated every 30 seconds)
+- Active tool indicator with live elapsed timer
+- Current model name with thinking level (`think:high`, `think:medium`, etc.)
+- Context window usage: `tokens / max_window (pct%)`
+- Auto-compact status indicator
+- Token input/output totals + session cost
+- Cache hit percentage + turn count
+- Live tokens-per-second (tok/s) via 2-second sliding window
+- Session ID display
+- Theme-aware colors (delegates to pi Theme API when available)
+
+### MCP Servers Panel
+- Connected MCP server status with connection indicators
+- Tool count per server (direct/total)
+- Token estimate per server
+
+### Todos Panel
+- Parses todo items from tool calls (`todo` tool)
+- Status glyphs: `○` pending, `●` in progress, `✓` completed
+- Progress counter: `Todos (2/5)`
+- Sub-action annotations for in-progress items
+
+### Async Subagents Panel
+- Tracks dispatched subagents (task/dispatch/agent tools)
+- Status: running (animated spinner), completed, or failed
+- Per-agent: turns, tool count, token usage, elapsed time
+- Last 3 tool calls logged per agent
+- Parallel subagent indicator
+
+### Workspace Panel
+- Git branch with ahead/untracked counts
+- Dirty file listing with diff stats (+N/-N)
+- Current working directory at bottom of sidebar
+- Auto-refreshes on write operations (write/edit/bash/computer tools)
+
+## Installation
+
+```bash
+# Install as a pi package
+pi install bi0h4z4rd88/pi-sidebar-tui
+
+# Or clone manually into your extensions directory
+git clone https://github.com/bi0h4z4rd88/pi-sidebar-tui.git
+```
+
+Add to your pi extensions config. The extension auto-registers via the `"pi"` field in `package.json`.
+
+## Usage
+
+The sidebar activates automatically when a session starts. Toggle visibility with:
+
+```
+/sidebar-tui on       # Enable sidebar
+/sidebar-tui off      # Disable sidebar
+/sidebar-tui toggle   # Toggle on/off
+/sidebar-tui width 45 # Set sidebar width (10-120)
+```
+
+Set custom session title:
+
+```
+/session-title "My feature implementation"
+```
+
+## Requirements
+
+- [pi coding agent](https://github.com/earendil-works/pi) >= 0.74.0
+- [pi-tui](https://github.com/earendil-works/pi) >= 0.74.0
+
+## Architecture
+
+```
+pi-sidebar-tui/
+├── index.ts              # Extension entry point, event handlers, state management
+├── sidebar.ts            # Main sidebar renderer (composes all panels)
+├── compositor.ts         # Terminal compositor for right-column layout
+├── colors.ts             # ANSI color helpers, formatting utilities
+├── types.ts              # TypeScript type definitions
+├── mcp.ts                # MCP server discovery and status
+├── workspace.ts          # Git workspace state tracking
+├── panels/
+│   ├── session.ts        # Session metrics panel
+│   ├── todos.ts          # Todo tracking panel
+│   ├── subagents.ts      # Async subagent monitoring panel
+│   ├── workspace.ts      # Git workspace status panel
+│   └── mcp.ts            # MCP server status panel
+├── tests/
+│   ├── panels.test.ts    # Panel rendering tests
+│   └── sidebar.test.ts   # Sidebar rendering tests
+└── package.json
+```
+
+## How It Works
+
+The extension hooks into pi's event system (`session_start`, `tool_call`, `message_end`, `turn_end`, etc.) to track state and renders a right-column sidebar using a custom `SidebarCompositor` that:
+
+1. Narrows `terminal.columns` so pi renders main content in the left portion
+2. Paints the sidebar in the rightmost columns after each pi render cycle
+3. Uses synchronized output (`\x1b[?2026h`) to prevent rendering artifacts
+4. Saves/restores cursor position (`DECSC`/`DECRC`) around paint
+
+## Development
+
+```bash
+npm install
+npm test
+```
+
+## License
+
+MIT

package/colors.ts

@@ -0,0 +1,88 @@
+// Selective reset: clears bold/dim/italic/underline/fg but NOT background
+const RESET = "\x1b[22;23;24;39m";
+const BOLD = "\x1b[1m";
+const DIM_CODE = "\x1b[2m";
+
+function hexToAnsi(color: string): string {
+  const h = color.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+// ThemeColor names — matched to pi's Theme.fg() API
+export const COLORS = {
+  accent:  "accent",
+  success: "success",
+  warning: "warning",
+  header:  "text",
+  muted:   "muted",
+} as const;
+
+// Hex fallbacks used when no pi theme is injected (tests, cold start)
+const FALLBACK_HEX: Record<string, string> = {
+  accent:  "#febc38",
+  success: "#5faf5f",
+  warning: "#ff9500",
+  text:    "#00afaf",
+  muted:   "#6c6c6c",
+};
+
+let _piTheme: any = null;
+
+export function setPiTheme(t: any): void {
+  _piTheme = t;
+}
+
+export function bold(text: string): string {
+  if (_piTheme) return _piTheme.bold(text);
+  return `${BOLD}${text}${RESET}`;
+}
+
+export function dim(text: string): string {
+  if (_piTheme) return _piTheme.fg("dim", text);
+  return `${DIM_CODE}${text}${RESET}`;
+}
+
+export function fg(colorName: string, text: string): string {
+  if (_piTheme) return _piTheme.fg(colorName, text);
+  const hex = FALLBACK_HEX[colorName] ?? "#ffffff";
+  return `${hexToAnsi(hex)}${text}${RESET}`;
+}
+
+export function formatDuration(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  if (m > 0) return `${m}m${s % 60}s`;
+  return `${s}s`;
+}
+
+export function formatRelativeTime(ms: number): string {
+  return `${formatDuration(ms)} ago`;
+}
+
+export function formatTokens(n: number): string {
+  if (n < 1000) return n.toString();
+  if (n < 1_000_000) return `${Math.round(n / 1000)}k`;
+  return `${(n / 1_000_000).toFixed(1)}M`;
+}
+
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+export function spinnerFrame(): string {
+  return SPINNER_FRAMES[Math.floor(Date.now() / 80) % SPINNER_FRAMES.length];
+}
+
+export function formatDiffStat(added: number, removed: number): string {
+  if (removed > 0) return `+${added} -${removed}`;
+  return `+${added}`;
+}
+
+export function panelHeader(title: string, width: number): string[] {
+  const separatorLen = Math.max(0, width);
+  return [
+    bold(` ${title}`),
+    dim("─".repeat(separatorLen)),
+  ];
+}

package/compositor.ts

@@ -0,0 +1,131 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext } from "./types.ts";
+import { renderSidebar } from "./sidebar.ts";
+import { dim } from "./colors.ts";
+
+const SIDEBAR_BG = "\x1b[48;2;0;0;0m"; // black — matches terminal bg, hides scroll flash
+const BG_RESET = "\x1b[49m";
+
+function moveCursor(row: number, col: number): string {
+  return `\x1b[${row};${col}H`;
+}
+
+function descriptorFor(obj: object, key: string): PropertyDescriptor | undefined {
+  let target: object | null = obj;
+  while (target) {
+    const d = Object.getOwnPropertyDescriptor(target, key);
+    if (d) return d;
+    target = Object.getPrototypeOf(target);
+  }
+  return undefined;
+}
+
+export class SidebarCompositor {
+  private tui: any;
+  private terminal: any;
+  private getCtx: () => SidebarContext;
+  private originalColumnsDesc: PropertyDescriptor | undefined;
+  private originalDoRender: (() => void) | null = null;
+  private originalWrite: (data: string) => void;
+  private disposed = false;
+
+  private readonly sidebarWidth: number;
+
+  constructor(tui: any, getCtx: () => SidebarContext, sidebarWidth = 40) {
+    this.tui = tui;
+    this.terminal = tui.terminal;
+    this.getCtx = getCtx;
+    this.originalWrite = this.terminal.write.bind(this.terminal);
+    this.sidebarWidth = sidebarWidth;
+  }
+
+  install(): void {
+    // Narrow terminal.columns so pi renders in the left portion only.
+    this.originalColumnsDesc = descriptorFor(this.terminal, "columns");
+    const origDesc = this.originalColumnsDesc;
+    const terminal = this.terminal;
+
+    Object.defineProperty(terminal, "columns", {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const d = origDesc;
+        const raw = d?.get ? (d.get.call(terminal) ?? 80) : (typeof d?.value === "number" ? d.value : 80);
+        return Math.max(1, raw - 40 - 1);
+      },
+    });
+
+    // Paint sidebar after every pi render cycle
+    if (typeof this.tui.doRender === "function") {
+      this.originalDoRender = this.tui.doRender.bind(this.tui);
+      const self = this;
+      this.tui.doRender = function () {
+        if (self.disposed) { self.originalDoRender?.(); return; }
+        self.originalDoRender!();
+        self.paint();
+      };
+    }
+  }
+
+  paint(): void {
+    if (this.disposed) return;
+    const rawRows = this.terminal.rows;
+    const d = this.originalColumnsDesc;
+    const rawCols = d?.get ? (d.get.call(this.terminal) ?? 80) : (typeof d?.value === "number" ? d.value : 80);
+    const sw = this.sidebarWidth;
+    const sepCol = rawCols - sw;
+    const sidebarCol = sepCol + 1;
+    const ctx = this.getCtx();
+    const lines = renderSidebar(ctx, sw);
+
+    let buf = "\x1b[?2026h"; // begin synchronized output
+    buf += "\x1b7";          // save cursor (DECSC)
+    buf += "\x1b[?7l";       // disable auto-wrap
+
+    // Format cwd for bottom row: collapse home dir, truncate from left if needed
+    const cwd = ctx.cwd ?? "";
+    const home = process.env["HOME"] ?? "";
+    const cwdDisplay = home && cwd.startsWith(home) ? "~" + cwd.slice(home.length) : cwd;
+    const cwdTruncated = visibleWidth(cwdDisplay) > sw - 1
+      ? "…" + cwdDisplay.slice(-(sw - 2))
+      : cwdDisplay;
+    const cwdLine = dim(" " + cwdTruncated);
+
+    for (let row = 1; row <= rawRows; row++) {
+      buf += moveCursor(row, sepCol);
+      buf += dim("│");
+      buf += moveCursor(row, sidebarCol);
+      buf += SIDEBAR_BG;
+      if (row === rawRows && cwd) {
+        buf += truncateToWidth(cwdLine, sw, "", true);
+      } else {
+        const line = lines[row - 1];
+        buf += line !== undefined
+          ? truncateToWidth(line, sw, "", true)
+          : " ".repeat(sw);
+      }
+      buf += BG_RESET;
+    }
+
+    buf += "\x1b[?7h";       // enable auto-wrap
+    buf += "\x1b8";          // restore cursor (DECRC)
+    buf += "\x1b[?2026l";    // end synchronized output
+
+    this.originalWrite(buf);
+  }
+
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+
+    if (this.originalColumnsDesc) {
+      Object.defineProperty(this.terminal, "columns", this.originalColumnsDesc);
+    } else {
+      Reflect.deleteProperty(this.terminal, "columns");
+    }
+
+    if (this.originalDoRender !== null) {
+      this.tui.doRender = this.originalDoRender;
+    }
+  }
+}