pi-sidebar-tui 1.2.0

package/panels/mcp.ts

@@ -0,0 +1,31 @@
+import type { SidebarContext } from "../types.ts";
+import { dim, fg, COLORS, panelHeader } from "../colors.ts";
+
+export function renderMcpPanel(ctx: SidebarContext, width: number): string[] {
+  const servers = ctx.mcpServers;
+  if (!servers || servers.length === 0) return [];
+
+  const lines: string[] = [...panelHeader("MCP Servers", width)];
+
+  for (const srv of servers) {
+    const dot = srv.connected
+      ? (srv.directCount === srv.totalCount && srv.totalCount > 0
+          ? fg(COLORS.success, "●")
+          : fg(COLORS.warning, "◐"))
+      : dim("○");
+
+    const countStr = srv.totalCount > 0 ? `${srv.directCount}/${srv.totalCount}` : "";
+    const tokenStr = srv.directCount > 0 ? `  ~${srv.tokenEstimate.toLocaleString()}` : "";
+    const suffix = dim(`  ${countStr}${tokenStr}`);
+    const suffixVisibleLen = 2 + countStr.length + (srv.directCount > 0 ? 2 + String(srv.tokenEstimate.toLocaleString()).length + 1 : 0);
+
+    const nameMax = Math.max(0, width - 4 - suffixVisibleLen);
+    const name = srv.name.length > nameMax
+      ? srv.name.slice(0, nameMax - 1) + "…"
+      : srv.name;
+
+    lines.push(dim("  ") + dot + " " + fg(COLORS.accent, name) + suffix);
+  }
+
+  return lines;
+}

package/panels/session.ts

@@ -0,0 +1,125 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext } from "../types.ts";
+import { dim, fg, COLORS, panelHeader } from "../colors.ts";
+
+const NA = "—";
+
+export function renderSessionPanel(ctx: SidebarContext, width: number): string[] {
+  const lines: string[] = [...panelHeader("Session", width)];
+
+  const title = ctx.sessionTitle;
+  if (!title) {
+    lines.push(dim("  (waiting for first message…)"));
+  } else {
+    const truncated = truncateToWidth(title, Math.max(0, width - 2), "…");
+    lines.push(dim(`  ${truncated}`));
+  }
+  if (ctx.sessionId) {
+    lines.push(dim(`  ${ctx.sessionId}`));
+  }
+
+  lines.push("");
+
+  // Active tool (live only)
+  if (ctx.activeTool) {
+    const toolElapsed = Date.now() - ctx.activeTool.startedAt;
+    const toolName = truncateToWidth(ctx.activeTool.name, Math.max(0, width - 14), "…");
+    lines.push(dim("  tool  ") + fg(COLORS.accent, toolName) + dim(` (${formatDuration(toolElapsed)})`));
+    lines.push("");
+  }
+
+  // Model
+  const thinkLabel = ctx.model
+    ? (ctx.thinkingLevel && ctx.thinkingLevel !== "off" ? ` - ${ctx.thinkingLevel}` : " - think off")
+    : "";
+  const modelDisplay = ctx.model
+    ? truncateToWidth(ctx.model, Math.max(0, width - 10 - thinkLabel.length), "…")
+    : NA;
+  lines.push(
+    dim("  model ") +
+    fg(ctx.model ? COLORS.accent : COLORS.muted, modelDisplay) +
+    (thinkLabel ? dim(thinkLabel) : "")
+  );
+
+  // Context
+  if (ctx.contextPercent !== null) {
+    const pct = ctx.contextPercent;
+    const tokens = ctx.contextTokens !== null ? formatK(ctx.contextTokens) : "?";
+    const win = ctx.contextWindow !== null ? formatK(ctx.contextWindow) : "?";
+    const ctxColor = pct > 90 ? COLORS.warning : pct > 70 ? COLORS.accent : COLORS.header;
+    lines.push(dim("  ctx   ") + fg(ctxColor, `${tokens} / ${win}`) + dim(` (${pct.toFixed(1)}%)`));
+    if (ctx.autoCompactEnabled !== null) {
+      const compactColor = pct > 70 ? COLORS.warning : COLORS.muted;
+      lines.push(dim("  ") + fg(compactColor, ctx.autoCompactEnabled ? "auto-compact on" : "auto-compact off"));
+    }
+  } else {
+    lines.push(dim("  ctx   ") + fg(COLORS.muted, NA));
+  }
+
+  lines.push("");
+
+  // Two-column stats
+  // Col1: time, last, speed, cost, turns
+  // Col2: in, out, total, cache
+  const elapsed = Date.now() - ctx.sessionStartMs;
+  const avgTps = ctx.liveTps ?? ctx.lastTps;
+  const tokenTotal = ctx.tokensIn + ctx.tokensOut + ctx.cacheRead + ctx.cacheWrite;
+  const totalIn = ctx.tokensIn + ctx.cacheRead;
+  const cacheHitPct = totalIn > 0 ? Math.round((ctx.cacheRead / totalIn) * 100) : null;
+
+  const col1: [string, string][] = [
+    ["time", elapsed >= 1000 ? formatDuration(elapsed) : NA],
+    ["last", ctx.lastTurnMs !== null ? formatDuration(ctx.lastTurnMs) : NA],
+    ["speed", avgTps !== null ? `${avgTps} tok/s` : NA],
+    ["turns", ctx.turnCount > 0 ? String(ctx.turnCount) : NA],
+    ["cost", ctx.sessionCost > 0 ? `$${ctx.sessionCost.toFixed(3)}` : NA],
+  ];
+
+  const col2: [string, string][] = [
+    ["in", ctx.tokensIn > 0 ? formatK(ctx.tokensIn) : NA],
+    ["out", ctx.tokensOut > 0 ? formatK(ctx.tokensOut) : NA],
+    ["total", tokenTotal > 0 ? formatK(tokenTotal) : NA],
+    ["cache", cacheHitPct !== null && cacheHitPct > 0 ? `${cacheHitPct}%` : NA],
+  ];
+
+  const usable = Math.max(0, width - 2);
+  const c1W = Math.floor(usable / 2);
+  const c2W = usable - c1W;
+  const v1W = Math.max(0, c1W - 6); // 5 label + 1 space
+  const v2W = Math.max(0, c2W - 6);
+
+  // Column sub-headers with separator
+  const h1 = "Stats".padEnd(c1W);
+  const h2 = "Tokens";
+  lines.push(dim("  " + h1 + h2));
+  lines.push(dim("  " + "─".repeat(Math.max(0, usable - 1))));
+
+  const rowCount = Math.max(col1.length, col2.length);
+  for (let i = 0; i < rowCount; i++) {
+    const [l1, v1] = col1[i] ?? ["", ""];
+    const [l2, v2] = col2[i] ?? ["", ""];
+    const v1s = v1.slice(0, v1W).padEnd(v1W);
+    const v2s = v2.slice(0, v2W);
+    lines.push(
+      dim("  " + l1.padEnd(5) + " ") + fg(COLORS.muted, v1s) +
+      dim(l2.padEnd(5) + " ") + fg(COLORS.muted, v2s)
+    );
+  }
+
+  return lines;
+}
+
+function formatK(n: number): string {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M";
+  if (n >= 1000) return Math.round(n / 1000) + "k";
+  return String(n);
+}
+
+function formatDuration(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  const h = Math.floor(m / 60);
+  if (h > 0) return `${h}h${m % 60}m`;
+  if (m > 0) return `${m}m${s % 60}s`;
+  return `${s}s`;
+}

package/panels/subagents.ts

@@ -0,0 +1,75 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext, SubagentEntry } from "../types.ts";
+import {
+  dim, fg, COLORS, panelHeader,
+  formatDuration, formatRelativeTime, formatTokens, spinnerFrame,
+} from "../colors.ts";
+
+function renderSubagentBlock(agent: SubagentEntry, width: number): string[] {
+  const lines: string[] = [];
+
+  const now = Date.now();
+  const elapsed = now - agent.startedAt;
+
+  let statusGlyph: string;
+  let agentNameColor: string;
+  if (agent.status === "completed") {
+    statusGlyph = fg(COLORS.success, "✓");
+    agentNameColor = COLORS.success;
+  } else if (agent.status === "failed") {
+    statusGlyph = fg(COLORS.warning, "✗");
+    agentNameColor = COLORS.warning;
+  } else {
+    statusGlyph = fg(COLORS.accent, spinnerFrame());
+    agentNameColor = COLORS.accent;
+  }
+
+  const nameMax = Math.max(0, width - 2);
+  const truncName = truncateToWidth(agent.name, nameMax, "…");
+  lines.push(`${statusGlyph} ${fg(agentNameColor, truncName)}`);
+
+  if (agent.status === "completed" && agent.completedAt !== undefined) {
+    const duration = agent.completedAt - agent.startedAt;
+    const ago = now - agent.completedAt;
+    lines.push(dim(`  complete (${formatRelativeTime(ago)})`));
+    const meta = `${agent.turns} turns · ${agent.toolCount} tools · ${formatTokens(agent.tokens)} tokens · ${formatDuration(duration)}`;
+    lines.push(dim(`  ${truncateToWidth(meta, Math.max(0, width - 2), "…")}`));
+  } else if (agent.status === "failed") {
+    lines.push(dim(`  failed (${formatRelativeTime(elapsed)})`));
+    const meta = `${agent.turns} turns · ${agent.toolCount} tools · ${formatTokens(agent.tokens)} tokens`;
+    lines.push(dim(`  ${truncateToWidth(meta, Math.max(0, width - 2), "…")}`));
+  } else {
+    lines.push(dim(`  running (${formatDuration(elapsed)})`));
+    const meta = `${agent.turns} turns · ${agent.toolCount} tools · ${formatTokens(agent.tokens)} tokens`;
+    lines.push(dim(`  ${truncateToWidth(meta, Math.max(0, width - 2), "…")}`));
+  }
+
+  const recentLog = agent.toolLog.slice(-3);
+  for (const entry of recentLog) {
+    lines.push(dim(`  ${truncateToWidth(entry, Math.max(0, width - 2), "…")}`));
+  }
+
+  return lines;
+}
+
+export function renderSubagentsPanel(ctx: SidebarContext, width: number): string[] {
+  const { subagents } = ctx;
+  const running = subagents.filter(a => a.status === "running").length;
+  const completed = subagents.filter(a => a.status === "completed").length;
+
+  const parallelSuffix = running > 1 ? " · parallel" : "";
+  const title = `Async Subagents (${completed}/${subagents.length})${parallelSuffix}`;
+  const lines: string[] = [...panelHeader(title, width)];
+
+  if (subagents.length === 0) {
+    lines.push(dim("  (no subagents)"));
+    return lines;
+  }
+
+  for (let i = 0; i < subagents.length; i++) {
+    if (i > 0) lines.push("");
+    lines.push(...renderSubagentBlock(subagents[i], width));
+  }
+
+  return lines;
+}

package/panels/todos.ts

@@ -0,0 +1,55 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext, TodoItem, TodoStatus } from "../types.ts";
+import { dim, fg, COLORS, panelHeader } from "../colors.ts";
+
+const GLYPHS: Record<TodoStatus, string> = {
+  completed: "✓",
+  in_progress: "●",
+  pending: "○",
+};
+
+const GLYPH_COLORS: Record<TodoStatus, string> = {
+  completed: COLORS.success,
+  in_progress: COLORS.accent,
+  pending: COLORS.muted,
+};
+
+function renderTodoLine(todo: TodoItem, width: number): string {
+  const glyph = fg(GLYPH_COLORS[todo.status], GLYPHS[todo.status]);
+  const glyphWidth = 1; // all glyphs are 1 visible char
+  const spaceAfterGlyph = 1;
+  const indent = glyphWidth + spaceAfterGlyph;
+
+  if (todo.status === "in_progress" && todo.subAction) {
+    const subText = ` (${todo.subAction})`;
+    const contentMax = Math.max(0, width - indent);
+    const fullText = todo.content + subText;
+    if (visibleWidth(fullText) <= contentMax) {
+      return `${glyph} ${todo.content}${dim(subText)}`;
+    }
+    const contentTruncated = truncateToWidth(todo.content, Math.max(0, contentMax - 4), "…");
+    return `${glyph} ${contentTruncated}`;
+  }
+
+  const contentMax = Math.max(0, width - indent);
+  const content = truncateToWidth(todo.content, contentMax, "…");
+  return `${glyph} ${content}`;
+}
+
+export function renderTodosPanel(ctx: SidebarContext, width: number): string[] {
+  const { todos } = ctx;
+  const done = todos.filter(t => t.status === "completed").length;
+  const title = `Todos (${done}/${todos.length})`;
+  const lines: string[] = [...panelHeader(title, width)];
+
+  if (todos.length === 0) {
+    lines.push(dim("  (no todos)"));
+    return lines;
+  }
+
+  for (const todo of todos) {
+    lines.push(renderTodoLine(todo, width));
+  }
+
+  return lines;
+}

package/panels/workspace.ts

@@ -0,0 +1,69 @@
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext } from "../types.ts";
+import { bold, dim, fg, COLORS, formatDiffStat } from "../colors.ts";
+import type { WorkspaceFile } from "../types.ts";
+
+function buildGitStatus(branch: string, ahead: number, untracked: number): string {
+  let status = `⎇ ${branch}`;
+  if (ahead > 0) status += ` +${ahead}`;
+  if (untracked > 0) status += ` ?${untracked}`;
+  return status;
+}
+
+function renderWorkspaceHeader(ctx: SidebarContext, width: number): string[] {
+  const left = bold(" Workspace");
+  const leftPlain = " Workspace";
+
+  if (!ctx.branch) {
+    return [left, dim("─".repeat(Math.max(0, width)))];
+  }
+
+  const gitStatus = buildGitStatus(ctx.branch, ctx.aheadCount, ctx.untrackedCount);
+  const leftLen = visibleWidth(leftPlain);
+  let rightLen = visibleWidth(gitStatus);
+  const minPadding = 1;
+
+  // If the right side is too long, truncate it
+  let displayStatus = gitStatus;
+  if (leftLen + minPadding + rightLen > width) {
+    const maxStatusLen = Math.max(0, width - leftLen - minPadding);
+    displayStatus = truncateToWidth(gitStatus, maxStatusLen, "…");
+  }
+
+  rightLen = visibleWidth(displayStatus);
+  const padding = Math.max(1, width - leftLen - rightLen);
+  const headerLine = `${left}${" ".repeat(padding)}${dim(displayStatus)}`;
+
+  return [headerLine, dim("─".repeat(Math.max(0, width)))];
+}
+
+function renderFileLine(file: WorkspaceFile, width: number): string {
+  const stat = formatDiffStat(file.added, file.removed);
+  const statLen = visibleWidth(stat);
+  const pathMax = Math.max(0, width - statLen - 1);
+  const path = truncateToWidth(file.path, pathMax, "…");
+  const pathLen = visibleWidth(path);
+  const padding = Math.max(1, width - pathLen - statLen);
+  return `${path}${" ".repeat(padding)}${fg(COLORS.success, stat)}`;
+}
+
+export function renderWorkspacePanel(ctx: SidebarContext, width: number): string[] {
+  const lines: string[] = [...renderWorkspaceHeader(ctx, width)];
+
+  if (!ctx.branch) {
+    lines.push(dim("  (not a git repo)"));
+    return lines;
+  }
+
+  const files = ctx.workspaceFiles.slice(0, 15);
+  if (files.length === 0) {
+    lines.push(dim("  (clean)"));
+    return lines;
+  }
+
+  for (const file of files) {
+    lines.push(renderFileLine(file, width));
+  }
+
+  return lines;
+}

package/sidebar.ts

@@ -0,0 +1,31 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import type { SidebarContext } from "./types.ts";
+import { renderSessionPanel } from "./panels/session.ts";
+import { renderTodosPanel } from "./panels/todos.ts";
+import { renderSubagentsPanel } from "./panels/subagents.ts";
+import { renderWorkspacePanel } from "./panels/workspace.ts";
+import { renderMcpPanel } from "./panels/mcp.ts";
+
+export function renderSidebar(ctx: SidebarContext, width: number): string[] {
+  const safeWidth = Math.max(1, width);
+
+  const allPanels = [
+    renderSessionPanel(ctx, safeWidth),
+    renderMcpPanel(ctx, safeWidth),
+    renderTodosPanel(ctx, safeWidth),
+    renderSubagentsPanel(ctx, safeWidth),
+    renderWorkspacePanel(ctx, safeWidth),
+  ];
+  // Skip empty panels (MCP panel returns [] when no servers)
+  const panels = allPanels.filter(p => p.length > 0);
+
+  const result: string[] = [];
+  for (let i = 0; i < panels.length; i++) {
+    if (i > 0) result.push("");
+    for (const line of panels[i]) {
+      result.push(truncateToWidth(line, safeWidth, "", true));
+    }
+  }
+
+  return result;
+}

package/types.ts

@@ -0,0 +1,67 @@
+export type TodoStatus = "pending" | "in_progress" | "completed";
+
+export interface TodoItem {
+  id: string;
+  content: string;
+  status: TodoStatus;
+  subAction?: string;
+}
+
+export type SubagentStatus = "running" | "completed" | "failed";
+
+export interface SubagentEntry {
+  id: string;
+  name: string;
+  status: SubagentStatus;
+  startedAt: number;
+  completedAt?: number;
+  turns: number;
+  toolCount: number;
+  tokens: number;
+  toolLog: string[];
+}
+
+export interface WorkspaceFile {
+  path: string;
+  added: number;
+  removed: number;
+}
+
+export interface McpServerInfo {
+  name: string;
+  directCount: number;
+  totalCount: number;
+  tokenEstimate: number;
+  connected: boolean;
+}
+
+export interface SidebarContext {
+  sessionTitle: string | null;
+  sessionId: string | null;
+  todos: TodoItem[];
+  subagents: SubagentEntry[];
+  branch: string | null;
+  aheadCount: number;
+  untrackedCount: number;
+  workspaceFiles: WorkspaceFile[];
+  cwd: string | undefined;
+  model: string | null;
+  thinkingLevel: string | null;
+  contextTokens: number | null;
+  contextPercent: number | null;
+  contextWindow: number | null;
+  tokensIn: number;
+  tokensOut: number;
+  cacheRead: number;
+  cacheWrite: number;
+  sessionCost: number;
+  turnCount: number;
+  activeTool: { name: string; startedAt: number } | null;
+  autoCompactEnabled: boolean | null;
+  sessionStartMs: number;
+  mcpServers: McpServerInfo[];
+  modelProvider: string | null;
+  liveTps: number | null;
+  lastTps: number | null;
+  lastTurnMs: number | null;
+}

package/workspace.ts

@@ -0,0 +1,84 @@
+import { execSync } from "node:child_process";
+import type { WorkspaceFile } from "./types.ts";
+
+export interface WorkspaceData {
+  branch: string | null;
+  aheadCount: number;
+  untrackedCount: number;
+  files: WorkspaceFile[];
+}
+
+const CACHE_TTL_MS = 2000;
+let cache: { data: WorkspaceData; timestamp: number } | null = null;
+
+function run(cmd: string, cwd: string): string {
+  try {
+    return execSync(cmd, { cwd, encoding: "utf-8", timeout: 2000, stdio: ["ignore", "pipe", "ignore"] }).trim();
+  } catch {
+    return "";
+  }
+}
+
+function parseBranch(cwd: string): string | null {
+  const out = run("git branch --show-current", cwd);
+  return out || null;
+}
+
+function parseAhead(cwd: string): number {
+  const out = run("git rev-list @{u}..HEAD --count", cwd);
+  const n = parseInt(out, 10);
+  return isNaN(n) ? 0 : n;
+}
+
+function parseUntracked(cwd: string): number {
+  const out = run("git status --porcelain", cwd);
+  if (!out) return 0;
+  return out.split("\n").filter(l => l.startsWith("??")).length;
+}
+
+function parseNumstat(cwd: string): WorkspaceFile[] {
+  const out = run("git diff --numstat HEAD", cwd);
+  if (!out) return [];
+
+  return out
+    .split("\n")
+    .map(line => {
+      const parts = line.split("\t");
+      if (parts.length < 3) return null;
+      const added = parseInt(parts[0], 10);
+      const removed = parseInt(parts[1], 10);
+      const path = parts[2].trim();
+      if (isNaN(added) || isNaN(removed) || !path) return null;
+      return { path, added, removed };
+    })
+    .filter((f): f is WorkspaceFile => f !== null)
+    .sort((a, b) => (b.added + b.removed) - (a.added + a.removed))
+    .slice(0, 15);
+}
+
+export function getWorkspaceData(cwd: string | undefined): WorkspaceData {
+  const empty: WorkspaceData = { branch: null, aheadCount: 0, untrackedCount: 0, files: [] };
+  if (!cwd) return empty;
+
+  const now = Date.now();
+  if (cache && now - cache.timestamp < CACHE_TTL_MS) return cache.data;
+
+  const branch = parseBranch(cwd);
+  if (!branch) {
+    cache = { data: empty, timestamp: now };
+    return empty;
+  }
+
+  const data: WorkspaceData = {
+    branch,
+    aheadCount: parseAhead(cwd),
+    untrackedCount: parseUntracked(cwd),
+    files: parseNumstat(cwd),
+  };
+  cache = { data, timestamp: now };
+  return data;
+}
+
+export function invalidateWorkspaceCache(): void {
+  cache = null;
+}