decorated-pi 0.5.4 → 0.6.0

package/ui/model-picker.ts

@@ -0,0 +1,162 @@
+/**
+ * Model Picker — used by /dp-model command.
+ * Tab between Image and Compact model selection.
+ */
+
+import { DynamicBorder, keyHint, rawKeyHint, type Theme } from "@earendil-works/pi-coding-agent";
+import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, type TUI } from "@earendil-works/pi-tui";
+import type { Model } from "@earendil-works/pi-ai";
+import { getImageModelKey, getCompactModelKey, setImageModelKey, setCompactModelKey, formatModelKey, parseModelKey } from "../settings.js";
+
+const TAB_IMAGE = 0;
+const TAB_COMPACT = 1;
+
+export class ModelPickerComponent extends Container {
+  private searchInput: Input;
+  private tui: TUI;
+  private theme: Theme;
+  private registry: any;
+  private onDone: () => void;
+  private activeTab = TAB_IMAGE;
+  private imageKey: string | null;
+  private compactKey: string | null;
+  private allItems: { label: string; desc: string; model: Model<any> | null; modelName?: string }[] = [];
+  private filtered: typeof this.allItems = [];
+  private selectedIndex = 0;
+  private tabTitle = new Text("", 1, 0);
+  private subtitleText: Text;
+  private listContainer: Container;
+
+  constructor(tui: TUI, theme: unknown, registry: any, onDone: () => void) {
+    super();
+    this.tui = tui;
+    this.theme = theme as Theme;
+    this.registry = registry;
+    this.onDone = onDone;
+    this.imageKey = getImageModelKey();
+    this.compactKey = getCompactModelKey();
+
+    this.addChild(new DynamicBorder());
+    this.addChild(new Spacer(1));
+    this.addChild(this.tabTitle);
+    this.subtitleText = new Text("", 1, 0);
+    this.addChild(this.subtitleText);
+    this.addChild(new Spacer(1));
+
+    this.searchInput = new Input();
+    this.searchInput.onSubmit = () => { const s = this.filtered[this.selectedIndex]; if (s) this.selectModel(s.model); };
+    this.addChild(this.searchInput);
+    this.addChild(new Spacer(1));
+
+    this.listContainer = new Container();
+    this.addChild(this.listContainer);
+    this.addChild(new Spacer(1));
+
+    this.addChild(new Text(
+      rawKeyHint("↑↓", "navigate") + "  " + keyHint("tui.input.tab", "switch") + "  " +
+      keyHint("tui.select.confirm", "select") + "  " + keyHint("tui.select.cancel", "cancel"), 1, 0));
+    this.addChild(new Spacer(1));
+    this.addChild(new DynamicBorder());
+
+    this.loadModels().then(() => { this.switchTab(TAB_IMAGE); this.tui.requestRender(); });
+  }
+
+  private async loadModels() {
+    this.registry.refresh();
+    const available = this.registry.getAvailable() as Model<any>[];
+    this.allItems = [{ label: "clear", desc: "(unset)", model: null }];
+    for (const m of available) {
+      this.allItems.push({ label: m.id, desc: `[${m.provider}]`, model: m as Model<any>, modelName: m.name });
+    }
+  }
+
+  private currentKey() { return this.activeTab === TAB_IMAGE ? this.imageKey : this.compactKey; }
+  private currentKind() { return this.activeTab === TAB_IMAGE ? "image" : "compact"; }
+
+  private switchTab(tab: number) {
+    this.activeTab = tab;
+    const key = this.currentKey();
+    const [clearItem, ...rest] = this.allItems;
+    const items = rest.map(it => {
+      const isCurrent = it.model && formatModelKey(it.model) === key;
+      return { ...it, desc: `${it.desc}${isCurrent ? " ✓" : ""}` };
+    });
+    items.sort((a, b) => {
+      const aCur = a.model && formatModelKey(a.model) === key;
+      const bCur = b.model && formatModelKey(b.model) === key;
+      if (aCur && !bCur) return -1; if (!aCur && bCur) return 1; return 0;
+    });
+    this.filtered = [clearItem, ...items];
+    this.selectedIndex = 0;
+    if (key) { const ix = this.filtered.findIndex(m => m.model && formatModelKey(m.model) === key); if (ix >= 0) this.selectedIndex = ix; }
+    this.searchInput.setValue("");
+    this.updateHeader();
+    this.updateList();
+  }
+
+  private updateHeader() {
+    const t = this.theme;
+    const im = this.activeTab === TAB_IMAGE ? t.fg("accent", "●") : "○";
+    const cm = this.activeTab === TAB_COMPACT ? t.fg("accent", "●") : "○";
+    const il = this.activeTab === TAB_IMAGE ? t.bold("Image") : t.fg("dim", "Image");
+    const cl = this.activeTab === TAB_COMPACT ? t.bold("Compact") : t.fg("dim", "Compact");
+    this.tabTitle.setText(`${im} ${il}  |  ${cm} ${cl}`);
+    const key = this.currentKey();
+    this.subtitleText.setText(key ? t.fg("warning", `Current ${this.currentKind()} model: ${key}`) : t.fg("warning", `No ${this.currentKind()} model set`));
+  }
+
+  handleInput(keyData: string) {
+    const kb = getKeybindings();
+    if (kb.matches(keyData, "tui.input.tab")) {
+      const next = this.activeTab === TAB_IMAGE ? TAB_COMPACT : TAB_IMAGE;
+      this.switchTab(next); this.tui.requestRender(); return;
+    }
+    if (kb.matches(keyData, "tui.select.up")) { this.selectedIndex = this.selectedIndex === 0 ? this.filtered.length - 1 : this.selectedIndex - 1; this.updateList(); return; }
+    if (kb.matches(keyData, "tui.select.down")) { this.selectedIndex = this.selectedIndex === this.filtered.length - 1 ? 0 : this.selectedIndex + 1; this.updateList(); return; }
+    if (kb.matches(keyData, "tui.select.confirm")) { const s = this.filtered[this.selectedIndex]; if (s) this.selectModel(s.model); return; }
+    if (kb.matches(keyData, "tui.select.cancel")) { this.onDone(); return; }
+    this.searchInput.handleInput(keyData); this.applyFilter();
+  }
+
+  private applyFilter() {
+    const raw = this.searchInput.getValue();
+    if (!raw) { this.switchTab(this.activeTab); return; }
+    const [clearItem, ...rest] = this.filtered;
+    this.filtered = [clearItem, ...fuzzyFilter(rest, raw, ({ label, desc }) => `${label} ${desc}`)];
+    this.selectedIndex = 0; this.updateList();
+  }
+
+  private selectModel(model: Model<any> | null) {
+    const kind = this.currentKind();
+    if (model) {
+      if (kind === "image") setImageModelKey(formatModelKey(model));
+      else setCompactModelKey(formatModelKey(model));
+    } else {
+      if (kind === "image") setImageModelKey(null);
+      else setCompactModelKey(null);
+    }
+    if (kind === "image") this.imageKey = model ? formatModelKey(model) : null;
+    else this.compactKey = model ? formatModelKey(model) : null;
+    this.switchTab(this.activeTab); this.tui.requestRender();
+  }
+
+  private updateList() {
+    this.listContainer.clear();
+    const t = this.theme;
+    const mv = 10;
+    const start = Math.max(0, Math.min(this.selectedIndex - Math.floor(mv / 2), Math.max(0, this.filtered.length - mv)));
+    const end = Math.min(start + mv, this.filtered.length);
+    for (let i = start; i < end; i++) {
+      const item = this.filtered[i]; if (!item) continue;
+      const isClear = item.model === null;
+      const isSel = i === this.selectedIndex;
+      const line = isClear
+        ? (isSel ? t.fg("accent", "→ ") + t.fg("error", "clear") + t.fg("muted", "  (unset)") : "  " + t.fg("muted", "clear  (unset)"))
+        : (isSel ? t.fg("accent", "→ ") + t.fg("accent", item.label) + " " + t.fg("muted", item.desc) : "  " + item.label + " " + t.fg("muted", item.desc));
+      this.listContainer.addChild(new Text(line, 0, 0));
+    }
+    if (start > 0 || end < this.filtered.length) this.listContainer.addChild(new Text(t.fg("muted", `  (${this.selectedIndex + 1}/${this.filtered.length})`), 0, 0));
+    const sel = this.filtered[this.selectedIndex];
+    if (sel?.modelName) { this.listContainer.addChild(new Spacer(1)); this.listContainer.addChild(new Text(t.fg("muted", `  Name: ${sel.modelName}`), 0, 0)); }
+  }
+}

package/ui/module-settings.ts

@@ -0,0 +1,83 @@
+/**
+ * Module Settings UI — used by /dp-settings command.
+ * Lists all modules with on/off toggle.
+ */
+
+import type { ExtensionAPI, ExtensionContext, Theme as PiTheme } from "@earendil-works/pi-coding-agent";
+import { Container, SettingsList, Spacer, Text, type TUI, type SettingsListTheme, type Component } from "@earendil-works/pi-tui";
+import { getAllModuleSettings, setModuleEnabled, type ModuleSettings } from "../settings.js";
+
+const MODULE_LABELS: Record<keyof ModuleSettings, string> = {
+  patch: "patch",
+  safety: "Secret Redaction",
+  lsp: "LSP",
+  "smart-at": "@ overload",
+  mcp: "MCP",
+  wakatime: "WakaTime",
+  "rtk": "RTK",
+  "codegraph": "Codegraph",
+};
+
+const MODULE_DESCS: Record<keyof ModuleSettings, string> = {
+  patch: "Replace edit/write with patch tool (targeted string replacement)",
+  safety: "Redact secrets from read / bash output before they enter model context",
+  lsp: "Language server diagnostics, hover, definition, references, symbols, rename",
+  "smart-at": "Project-aware file search replacing default autocomplete",
+  mcp: "MCP client for context7 and exa (zero-config)",
+  wakatime: "Send coding activity heartbeats to WakaTime",
+  "rtk": "Rewrite bash through system RTK when available",
+  "codegraph": "Codegraph MCP server for code structure queries",
+};
+
+class DynamicBorder implements Component {
+  private colorFn: (str: string) => string;
+  constructor(theme: PiTheme) { this.colorFn = (str: string) => theme.fg("border", str); }
+  invalidate() {}
+  render(width: number): string[] { return [this.colorFn("─".repeat(Math.max(1, width)))]; }
+}
+
+function getSettingsListTheme(theme: PiTheme): SettingsListTheme {
+  return {
+    label: (text: string, selected: boolean) => selected ? theme.fg("accent", text) : text,
+    value: (text: string, selected: boolean) => selected ? theme.fg("accent", text) : theme.fg("muted", text),
+    description: (text: string) => theme.fg("dim", text),
+    cursor: theme.fg("accent", "→ "),
+    hint: (text: string) => theme.fg("dim", text),
+  };
+}
+
+export class ModuleSettingsComponent extends Container {
+  private settingsList: SettingsList;
+
+  constructor(tui: TUI, theme: PiTheme, onDone: () => void) {
+    super();
+    const modules = getAllModuleSettings();
+    const keys = Object.keys(MODULE_LABELS) as (keyof ModuleSettings)[];
+    const items = keys.filter(k => modules[k] !== undefined).map(k => ({
+      id: k,
+      label: MODULE_LABELS[k],
+      description: MODULE_DESCS[k],
+      currentValue: modules[k] ? "on" : "off",
+      values: ["on", "off"],
+    }));
+
+    this.addChild(new DynamicBorder(theme));
+
+    this.settingsList = new SettingsList(
+      items, 10, getSettingsListTheme(theme),
+      (id: string, newValue: string) => {
+        setModuleEnabled(id as keyof ModuleSettings, newValue === "on");
+        tui.requestRender();
+      },
+      () => onDone(),
+      { enableSearch: true },
+    );
+
+    this.addChild(this.settingsList);
+    this.addChild(new DynamicBorder(theme));
+  }
+
+  handleInput(data: string) {
+    this.settingsList.handleInput(data);
+  }
+}

package/ui/usage.ts

@@ -0,0 +1,396 @@
+/**
+ * UsageReportComponent — tree-style usage report with expand/collapse.
+ *
+ * Renders:
+ *   1. Overall table (4 slices: Today / Week / Month / All Time)
+ *   2. Per-Model tree (collapsed by default, ↑↓ Enter to expand)
+ *
+ * Follows ui/mcp-status.ts visual conventions.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { DynamicBorder } from "@earendil-works/pi-coding-agent";
+import { Container, getKeybindings, Spacer, Text } from "@earendil-works/pi-tui";
+import type {
+  Aggregate,
+  ColumnId,
+  ModelSlice,
+  UsageReport,
+} from "../commands/usage.js";
+import {
+  formatCell,
+  formatCost,
+  pickColumns,
+  pickModelDisplay,
+} from "../commands/usage.js";
+
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+const SLICE_LABELS: Array<{ key: keyof UsageReport & string; label: string }> = [
+  { key: "currentSession", label: "Session" },
+  { key: "today", label: "Today" },
+  { key: "thisWeek", label: "This Week" },
+  { key: "thisMonth", label: "This Month" },
+  { key: "allTime", label: "All Time" },
+];
+
+const COL_HEADERS: Record<ColumnId, string> = {
+  input: "↑Prompt",
+  output: "↓Out",
+  cacheRead: "CacheR",
+  cacheWrite: "CacheW",
+  hitRate: "CacheHit",
+  cost: "Cost",
+};
+
+// ─── Class ─────────────────────────────────────────────────────────────────
+
+export class UsageReportComponent extends Container {
+  private theme: Theme;
+  private report: UsageReport;
+  private expanded = new Set<string>();
+  private selectedIndex = 0;
+  private onRebuild: () => Promise<UsageReport | null>;
+  private refreshing = false;
+  private done: () => void;
+  private requestRender: () => void;
+  private scrollOffset = 0;
+  private readonly MAX_VISIBLE = 6;
+
+  // child components (maintained across renders)
+  private borderTop: DynamicBorder;
+  private borderBottom: DynamicBorder;
+  private linesComponent: Text;
+  private hintComponent: Text;
+
+  constructor(
+    theme: Theme,
+    report: UsageReport,
+    requestRender: () => void,
+    done: () => void,
+    onRebuild?: () => Promise<UsageReport | null>,
+  ) {
+    super();
+
+    this.theme = theme;
+    this.report = report;
+    this.done = done;
+    this.requestRender = requestRender;
+    this.onRebuild = onRebuild ?? (async () => null);
+
+    this.borderTop = new DynamicBorder((s: string) => theme.fg("border", s));
+    this.addChild(this.borderTop);
+    this.addChild(new Spacer(1));
+
+    this.linesComponent = new Text("", 1, 0);
+    this.addChild(this.linesComponent);
+    this.addChild(new Spacer(1));
+
+    this.borderBottom = new DynamicBorder((s: string) => theme.fg("border", s));
+    this.addChild(this.borderBottom);
+
+    this.hintComponent = new Text("", 1, 0);
+    this.addChild(this.hintComponent);
+
+    this.renderView();
+  }
+
+  // ─── Input handling ───────────────────────────────────────────────────
+
+  handleInput(data: string): void {
+    const kb = getKeybindings();
+
+    if (kb.matches(data, "tui.select.cancel") || data === "q") {
+      this.done();
+      return;
+    }
+
+    if (data === "r") {
+      void (async () => {
+        if (this.refreshing) return;
+        this.refreshing = true;
+        // Show rebuilding message
+        this.linesComponent.setText(this.theme.fg("muted", "  Rebuilding stats..."));
+        this.requestRender?.();
+        try {
+          const newReport = await this.onRebuild();
+          if (newReport) {
+            this.report = newReport;
+            this.selectedIndex = 0;
+            this.expanded.clear();
+            this.scrollOffset = 0;
+          }
+        } finally {
+          this.refreshing = false;
+          this.renderView();
+        }
+      })();
+      return;
+    }
+
+    const modelCount = this.report.byModel.length;
+    if (modelCount === 0) return;
+
+    if (kb.matches(data, "tui.select.up")) {
+      if (this.selectedIndex > 0) {
+        this.selectedIndex--;
+        if (this.selectedIndex < this.scrollOffset) {
+          this.scrollOffset = this.selectedIndex;
+        }
+        this.renderView();
+      }
+      return;
+    }
+
+    if (kb.matches(data, "tui.select.down")) {
+      if (this.selectedIndex < modelCount - 1) {
+        this.selectedIndex++;
+        if (this.selectedIndex >= this.scrollOffset + this.MAX_VISIBLE) {
+          this.scrollOffset = this.selectedIndex - this.MAX_VISIBLE + 1;
+        }
+        this.renderView();
+      }
+      return;
+    }
+
+    if (kb.matches(data, "tui.select.confirm") || kb.matches(data, "right" as any)) {
+      const m = this.report.byModel[this.selectedIndex];
+      if (m) {
+        if (this.expanded.has(m.model)) {
+          this.expanded.delete(m.model);
+        } else {
+          this.expanded.add(m.model);
+        }
+        this.renderView();
+      }
+      return;
+    }
+
+    if (kb.matches(data, "left" as any)) {
+      const m = this.report.byModel[this.selectedIndex];
+      if (m && this.expanded.has(m.model)) {
+        this.expanded.delete(m.model);
+        this.renderView();
+      }
+      return;
+    }
+  }
+
+  // ─── Rendering ────────────────────────────────────────────────────────
+
+  private renderView(): void {
+    const lines: string[] = [];
+    const t = this.theme;
+    const modelCount = this.report.byModel.length;
+    const totalMessages =
+      this.report.allTime.turns;
+
+    // Compute max label width (for alignment)
+    const maxLabelLen = Math.max(
+      ...SLICE_LABELS.map((s) => s.label.length),
+      ...this.report.byModel.map((m) => m.model.length),
+    );
+    const labelW = Math.min(maxLabelLen, 30);
+
+    // Title
+    const title = t.fg("accent", t.bold("Usage Statistics"));
+    lines.push(title);
+
+    // Subtitle
+    const subtitleParts: string[] = [];
+    if (modelCount > 0) subtitleParts.push(`${modelCount} model${modelCount !== 1 ? "s" : ""}`);
+    if (totalMessages > 0) subtitleParts.push(`${totalMessages} turn${totalMessages !== 1 ? "s" : ""}`);
+    const subtitle = t.fg("muted", `  ${subtitleParts.join(" · ")}`);
+    lines.push(subtitle);
+
+    // Overall section
+    lines.push("");
+    lines.push(t.fg("accent", "  Overall"));
+
+    // Pick columns based on container width (estimate 80 for now; will be clamped)
+    const cols = this.computeColumns();
+    const colWidths = this.computeColWidths(cols, labelW);
+
+    // Header row
+    const headerParts: string[] = [" ".repeat(labelW)];
+    for (const c of cols) {
+      headerParts.push(COL_HEADERS[c].padStart(colWidths[c] ?? 0));
+    }
+    lines.push("  " + headerParts.join("  "));
+
+    // Divider
+    const divLen = labelW + cols.reduce((s, c) => s + (colWidths[c] ?? 0) + 2, 0);
+    lines.push("  " + "─".repeat(Math.max(divLen, 1)));
+
+    // Slice rows
+    for (const { key, label } of SLICE_LABELS) {
+      const agg = this.report[key as keyof UsageReport] as Aggregate;
+      const row = this.formatDataRow(label, labelW, agg, cols, colWidths);
+      lines.push("  " + row);
+    }
+
+    // Per-Model section
+    if (modelCount > 0) {
+      lines.push("");
+      lines.push(t.fg("accent", "  Per-Model"));
+      lines.push("  " + "─".repeat(Math.max(divLen, 1)));
+
+      // Viewport: only render MAX_VISIBLE models around selectedIndex
+      const total = this.report.byModel.length;
+      const end = Math.min(this.scrollOffset + this.MAX_VISIBLE, total);
+
+      if (this.scrollOffset > 0) {
+        lines.push(t.fg("muted", `  ... ${this.scrollOffset} more above`));
+      }
+
+      for (let i = this.scrollOffset; i < end; i++) {
+        const m = this.report.byModel[i]!;
+        const isSelected = i === this.selectedIndex;
+        const isExpanded = this.expanded.has(m.model);
+
+        const cursorRaw = isSelected ? "→ " : "  ";
+        const markerChar = isExpanded ? "▾" : "▸";
+        const modelDisplay = pickModelDisplay(m.model, labelW);
+        const cost = formatCost(m.allTime.cost);
+
+        // Compute padding from raw (uncolored) lengths
+        const leftRaw = `${cursorRaw}${markerChar} ${modelDisplay}`;
+        const padLen = divLen - leftRaw.length - cost.length + 2;
+        const pad = padLen > 0 ? " ".repeat(padLen) : " ";
+
+        // Apply theme colors
+        const cursorStyled = isSelected ? t.fg("accent", cursorRaw) : cursorRaw;
+        const modelStyled = isSelected
+          ? t.fg("accent", `${markerChar} ${modelDisplay}`)
+          : t.fg("muted", `${markerChar} ${modelDisplay}`);
+
+        lines.push(`  ${cursorStyled}${modelStyled}${pad}${cost}`);
+
+        // Expanded child table
+        if (isExpanded) {
+          // Child header
+          const indent = "    ";
+          const childHeaderParts: string[] = [" ".repeat(labelW)];
+          for (const c of cols) {
+            childHeaderParts.push(COL_HEADERS[c].padStart(colWidths[c] ?? 0));
+          }
+          lines.push(indent + childHeaderParts.join("  "));
+
+          // Child divider
+          lines.push(indent + "─".repeat(Math.max(divLen, 1)));
+
+          // Child rows for this model
+          for (const { key, label } of SLICE_LABELS) {
+            const agg = m[key as keyof ModelSlice] as Aggregate;
+            const row = this.formatDataRow(label, labelW, agg, cols, colWidths);
+            lines.push(indent + row);
+          }
+        }
+      }
+
+      if (end < total) {
+        lines.push(t.fg("muted", `  ... ${total - end} more below`));
+      }
+    } else {
+      lines.push("");
+      lines.push(t.fg("muted", "  No per-model data yet."));
+    }
+
+    // Empty state
+    if (this.report.allTime.turns === 0) {
+      this.linesComponent.setText(
+        [title, "", t.fg("muted", "  No usage data recorded yet."), "", t.fg("dim", "  Start a session to begin tracking.")].join("\n"),
+      );
+    } else {
+      lines.push("");
+      lines.push(t.fg("dim", "  ↑Prompt = all input tokens (user input + context)  ·  CacheR = cached hits  ·  CacheW = created cache"));
+      lines.push(t.fg("dim", "  ↓Out = model output tokens  ·  CacheHit = CacheR / ↑Prompt"));
+
+      this.linesComponent.setText(lines.join("\n"));
+    }
+
+    // Hint
+    const hintParts: string[] = [];
+    if (modelCount > 0) {
+      hintParts.push("↑↓ select");
+      const sel = this.report.byModel[this.selectedIndex];
+      hintParts.push(sel && this.expanded.has(sel.model) ? "Enter collapse" : "Enter expand");
+    }
+    hintParts.push("q close");
+    hintParts.push("r rebuild");
+    this.hintComponent.setText(t.fg("dim", "  " + hintParts.join(" · ")));
+
+    this.requestRender();
+  }
+
+  // ─── Column helpers ───────────────────────────────────────────────────
+
+  private computeColumns(): ColumnId[] {
+    // Estimate container width — we don't get width until render is called
+    // Use a generous default (80) which covers most terminals
+    return pickColumns(80);
+  }
+
+  private computeColWidths(
+    cols: ColumnId[],
+    labelW: number,
+  ): Record<ColumnId, number> {
+    const widths: Record<ColumnId, number> = {
+      input: 6,
+      output: 6,
+      cacheRead: 6,
+      cacheWrite: 6,
+      hitRate: 5,
+      cost: 7,
+    };
+
+    // Expand widths based on data
+    const expandFromSlice = (agg: Aggregate) => {
+      for (const c of cols) {
+        const val = formatCell(c, agg);
+        if (val.length > (widths[c] ?? 0)) widths[c] = val.length;
+      }
+    };
+
+    for (const { key } of SLICE_LABELS) {
+      expandFromSlice(this.report[key as keyof UsageReport] as Aggregate);
+    }
+    for (const m of this.report.byModel) {
+      for (const { key } of SLICE_LABELS) {
+        expandFromSlice(m[key as keyof ModelSlice] as Aggregate);
+      }
+    }
+
+    // Also consider header width
+    for (const c of cols) {
+      const hdr = COL_HEADERS[c];
+      if (hdr && hdr.length > (widths[c] ?? 0)) widths[c] = hdr.length;
+    }
+
+    return widths;
+  }
+
+  private formatDataRow(
+    label: string,
+    labelW: number,
+    agg: Aggregate,
+    cols: ColumnId[],
+    colWidths: Record<ColumnId, number>,
+  ): string {
+    let line = label.padEnd(labelW);
+    for (const c of cols) {
+      line += "  " + formatCell(c, agg).padStart(colWidths[c] ?? 0);
+    }
+    return line;
+  }
+
+  // ─── Lifecycle ────────────────────────────────────────────────────────
+
+  invalidate(): void {
+    // no-op: component is stateless beyond report/model state
+  }
+
+  dispose(): void {
+    // no-op
+  }
+}