@pellux/goodvibes-tui 0.27.0 → 0.29.0

package/src/panels/cost-tracker-panel.ts

@@ -4,21 +4,27 @@
 
 import type { Line } from '../types/grid.ts';
 import { createStyledCell, createEmptyLine } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import { BasePanel } from './base-panel.ts';
 import type { AgentEvent, TurnEvent } from '@/runtime/index.ts';
 import type { UiEventFeed } from '../runtime/ui-events.ts';
 import type { AgentRecord } from '@pellux/goodvibes-sdk/platform/tools';
 import {
   buildEmptyState,
+  buildKeyboardHints,
+  buildMeterLine,
   buildPanelLine,
   buildStyledPanelLine,
+  buildTable,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   extendPalette,
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
-import { getPricing } from '../export/cost-utils.ts';
+import { calcSessionCost } from '../export/cost-utils.ts';
+import { abbreviateCount } from '../utils/format-number.ts';
+import { isTextBackspace } from '../input/delete-key-policy.ts';
 
 // Pricing lookups are provided by ../export/cost-utils.ts (single source of truth).
 
@@ -30,9 +36,7 @@ function formatCost(usd: number): string {
 }
 
 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);
+  return abbreviateCount(n);
 }
 
 // ---------------------------------------------------------------------------
@@ -100,15 +104,27 @@ export class CostTrackerPanel extends BasePanel {
   // Per-agent tracking (keyed by agent id)
   private agents = new Map<string, AgentEntry>();
 
-  // Budget alert threshold in USD (0 = disabled)
+  // Budget alert threshold in USD (0 = disabled). Mutable at runtime via the
+  // in-panel 'b' numeric entry or the /cost budget <usd> command — both call
+  // setBudgetThreshold() below.
   private budgetThreshold: number;
 
+  // Draft buffer for the in-panel budget-entry mode ('b' key). Non-null while
+  // entry is active; unlike LocalAuthPanel's masked entry, the value is not
+  // secret so it is echoed directly.
+  private budgetEntry: string | null = null;
+
   // Scroll offset for agent list
   private scrollOffset = 0;
 
   // Unsubscribe functions
   private unsubs: Array<() => void> = [];
 
+  // Polls getAgentStatus() for agents still marked 'running' so their token/
+  // cost columns fill in as usage streams, instead of staying pinned at
+  // 'unknown'/$0 until AGENT_COMPLETED fires.
+  private statusPollTimer: ReturnType<typeof setInterval> | null = null;
+
   // Getter for live orchestrator usage
   private readonly getOrchestratorUsage: () => UsageSnapshot & { model?: string };
 
@@ -122,7 +138,7 @@ export class CostTrackerPanel extends BasePanel {
     getOrchestratorUsage: () => UsageSnapshot & { model?: string },
     opts: { budgetThreshold?: number; getAgentStatus?: (agentId: string) => AgentRecord | null } = {},
   ) {
-    super('cost', 'Cost', '$', 'monitoring');
+    super('cost', 'Cost', '$', 'providers');
     this.getOrchestratorUsage = getOrchestratorUsage;
     this.getAgentStatus = opts.getAgentStatus;
     this.budgetThreshold = opts.budgetThreshold ?? 0;
@@ -136,7 +152,14 @@ export class CostTrackerPanel extends BasePanel {
   private attachEvents(turnEvents: UiEventFeed<TurnEvent>, agentEvents: UiEventFeed<AgentEvent>): void {
     // Refresh after every completed turn
     this.unsubs.push(
-      turnEvents.on('TURN_COMPLETED', () => this.onTurnComplete()),
+      turnEvents.on('TURN_COMPLETED', () => this.refreshSessionCost()),
+    );
+
+    // Refresh mid-turn too: a single turn can span many LLM calls (tool
+    // loops), so waiting for TURN_COMPLETED leaves the meter frozen for the
+    // whole turn. LLM_RESPONSE_RECEIVED fires per call — same refresh path.
+    this.unsubs.push(
+      turnEvents.on('LLM_RESPONSE_RECEIVED', () => this.refreshSessionCost()),
     );
 
     // Track agent spawns
@@ -144,7 +167,7 @@ export class CostTrackerPanel extends BasePanel {
       agentEvents.on('AGENT_SPAWNING', (payload) => {
         this.agents.set(payload.agentId, {
           id: payload.agentId.slice(0, 8),
-          task: payload.task.length > 40 ? payload.task.slice(0, 37) + '...' : payload.task,
+          task: truncateDisplay(payload.task, 40),
           model: 'unknown',
           inputTokens: 0,
           outputTokens: 0,
@@ -166,8 +189,7 @@ export class CostTrackerPanel extends BasePanel {
             if (rec?.usage) {
               entry.inputTokens = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
               entry.outputTokens = rec.usage.outputTokens;
-              const pricing = getPricing(rec.model ?? 'unknown');
-              entry.cost = (entry.inputTokens * pricing.input + entry.outputTokens * pricing.output) / 1_000_000;
+              entry.cost = calcSessionCost(rec.usage.inputTokens, rec.usage.outputTokens, rec.usage.cacheReadTokens ?? 0, rec.usage.cacheWriteTokens ?? 0, rec.model ?? 'unknown');
               if (rec.model && rec.model !== 'unknown') entry.model = rec.model;
             }
           }
@@ -188,7 +210,7 @@ export class CostTrackerPanel extends BasePanel {
     );
   }
 
-  private onTurnComplete(): void {
+  private refreshSessionCost(): void {
     const usage = this.getOrchestratorUsage();
     this.sessionUsage = {
       input: usage.input,
@@ -199,9 +221,7 @@ export class CostTrackerPanel extends BasePanel {
     if (usage.model) this.sessionModel = usage.model;
 
     // Record cost delta for sparkline
-    const pricing = getPricing(this.sessionModel);
-    const billableInput = usage.input + usage.cacheRead + usage.cacheWrite;
-    const totalCost = (billableInput * pricing.input + usage.output * pricing.output) / 1_000_000;
+    const totalCost = calcSessionCost(usage.input, usage.output, usage.cacheRead, usage.cacheWrite, this.sessionModel);
     const delta = Math.max(0, totalCost - this.lastSessionCost);
     this.lastSessionCost = totalCost;
     this.costHistory.push(delta);
@@ -226,6 +246,13 @@ export class CostTrackerPanel extends BasePanel {
       cacheWrite: usage.cacheWrite,
     };
     this.needsRender = true;
+    this.startStatusPollTimer();
+  }
+
+  override onDeactivate(): void {
+    // Stop polling while hidden — nothing to catch up on that a fresh
+    // onActivate() poll won't cover.
+    this.stopStatusPollTimer();
   }
 
   override onDestroy(): void {
@@ -233,11 +260,69 @@ export class CostTrackerPanel extends BasePanel {
     this.unsubs = [];
   }
 
+  private startStatusPollTimer(): void {
+    if (this.statusPollTimer !== null || !this.getAgentStatus) return;
+    this.statusPollTimer = this.registerTimer(setInterval(() => this.pollRunningAgents(), 3_000));
+  }
+
+  private stopStatusPollTimer(): void {
+    if (this.statusPollTimer !== null) {
+      this.clearTimer(this.statusPollTimer);
+      this.statusPollTimer = null;
+    }
+  }
+
+  /**
+   * Poll getAgentStatus() for every agent still marked 'running'. Completion
+   * already captures real usage via AGENT_COMPLETED, but a long-running agent
+   * would otherwise show 'unknown' tokens / $0 cost for its entire lifetime —
+   * this fills the row in as usage becomes available mid-flight.
+   */
+  private pollRunningAgents(): void {
+    if (!this.getAgentStatus) return;
+    let changed = false;
+    for (const [agentId, entry] of this.agents) {
+      if (entry.status !== 'running') continue;
+      const rec = this.getAgentStatus(agentId);
+      if (!rec?.usage) continue;
+      const inputTokens = rec.usage.inputTokens + (rec.usage.cacheReadTokens ?? 0) + (rec.usage.cacheWriteTokens ?? 0);
+      const outputTokens = rec.usage.outputTokens;
+      const cost = calcSessionCost(rec.usage.inputTokens, rec.usage.outputTokens, rec.usage.cacheReadTokens ?? 0, rec.usage.cacheWriteTokens ?? 0, rec.model ?? entry.model);
+      if (inputTokens !== entry.inputTokens || outputTokens !== entry.outputTokens || cost !== entry.cost) {
+        entry.inputTokens = inputTokens;
+        entry.outputTokens = outputTokens;
+        entry.cost = cost;
+        changed = true;
+      }
+      if (rec.model && rec.model !== 'unknown' && rec.model !== entry.model) {
+        entry.model = rec.model;
+        changed = true;
+      }
+    }
+    if (changed) this.markDirty();
+  }
+
+  /** Set the budget alert threshold (USD; 0 disables it). Shared by the
+   * in-panel 'b' entry and the /cost budget <usd> command. */
+  public setBudgetThreshold(usd: number): void {
+    if (!Number.isFinite(usd) || usd < 0) return;
+    this.budgetThreshold = usd;
+    this.markDirty();
+  }
+
   // -------------------------------------------------------------------------
   // Input
   // -------------------------------------------------------------------------
 
   handleInput(key: string): boolean {
+    if (this.budgetEntry !== null) return this.handleBudgetEntryInput(key);
+
+    if (key === 'b') {
+      this.budgetEntry = this.budgetThreshold > 0 ? String(this.budgetThreshold) : '';
+      this.markDirty();
+      return true;
+    }
+
     switch (key) {
       case 'up':   return this.scroll(-1);
       case 'down': return this.scroll(1);
@@ -247,9 +332,53 @@ export class CostTrackerPanel extends BasePanel {
     }
   }
 
+  private handleBudgetEntryInput(key: string): boolean {
+    if (key === 'escape') {
+      this.budgetEntry = null;
+      this.markDirty();
+      return true;
+    }
+    if (key === 'enter' || key === 'return') {
+      const raw = this.budgetEntry ?? '';
+      this.budgetEntry = null;
+      const parsed = Number(raw);
+      if (raw.length > 0 && Number.isFinite(parsed) && parsed >= 0) {
+        this.setBudgetThreshold(parsed);
+      } else {
+        this.markDirty();
+      }
+      return true;
+    }
+    if (isTextBackspace(key)) {
+      if (this.budgetEntry && this.budgetEntry.length > 0) {
+        this.budgetEntry = this.budgetEntry.slice(0, -1);
+        this.markDirty();
+      }
+      return true;
+    }
+    // Digits and a single decimal point only — this is a USD amount, not free text.
+    if (key.length === 1 && /[0-9.]/.test(key) && !(key === '.' && this.budgetEntry?.includes('.'))) {
+      this.budgetEntry = (this.budgetEntry ?? '') + key;
+      this.markDirty();
+      return true;
+    }
+    return true; // absorb everything else while entry is active
+  }
+
+  /**
+   * Scroll the agent list. Over-consumption fix: only absorbs the key (and
+   * only advances) when the agent list is actually long enough to scroll —
+   * mirrors the same `> 5` threshold render() uses to decide whether to show
+   * scroll hints (below). Previously this always returned true and grew
+   * scrollOffset unboundedly even with a handful of agents, swallowing
+   * up/down/page keys that had nothing to do.
+   */
   private scroll(delta: number): boolean {
+    const agentCount = this.agents.size;
+    if (agentCount <= 5) return false;
+    const maxOffset = Math.max(0, agentCount - 1);
     const prev = this.scrollOffset;
-    this.scrollOffset = Math.max(0, this.scrollOffset + delta);
+    this.scrollOffset = Math.max(0, Math.min(maxOffset, this.scrollOffset + delta));
     if (this.scrollOffset !== prev) this.markDirty();
     return true;
   }
@@ -260,10 +389,10 @@ export class CostTrackerPanel extends BasePanel {
 
   render(width: number, height: number): Line[] {
     if (height <= 0 || width <= 0) return [];
+    if (this.budgetEntry !== null) return this.renderBudgetEntryPrompt(width, height);
 
-    const pricing = getPricing(this.sessionModel);
     const totalInputTokens = this.sessionUsage.input + this.sessionUsage.cacheRead + this.sessionUsage.cacheWrite;
-    const sessionCost = (totalInputTokens * pricing.input + this.sessionUsage.output * pricing.output) / 1_000_000;
+    const sessionCost = calcSessionCost(this.sessionUsage.input, this.sessionUsage.output, this.sessionUsage.cacheRead, this.sessionUsage.cacheWrite, this.sessionModel);
     const overBudget = this.budgetThreshold > 0 && sessionCost > this.budgetThreshold;
     const sparkline = buildSparkline(this.costHistory);
     const costStr = formatCost(sessionCost);
@@ -275,6 +404,20 @@ export class CostTrackerPanel extends BasePanel {
     const sessionLines: Line[] = [
       this.renderKeyValue(width, ' Total', `${costStr}${budgetStr}${alertStr}`, costFg),
     ];
+    // Budget meter — the single most important glance for this panel: how much
+    // of the configured budget the session has consumed. Only shown when a
+    // budget is set (otherwise the bar would be meaningless).
+    if (this.budgetThreshold > 0) {
+      const ratio = sessionCost / this.budgetThreshold;
+      const BAR_W = 24;
+      const filled = Math.max(0, Math.min(BAR_W, Math.round(ratio * BAR_W)));
+      const meterFg = overBudget ? C.bad : ratio >= 0.8 ? C.warn : C.good;
+      const pctStr = `${Math.round(ratio * 100)}%`;
+      sessionLines.push(buildMeterLine(width, filled, BAR_W,
+        { filled: meterFg, empty: C.separator, label: C.label },
+        { prefix: ' Budget [', suffix: `] ${pctStr}` },
+      ));
+    }
     if (sparkline.length > 0) sessionLines.push(this.renderLabeledLine(width, ' Trend', sparkline, C.good));
     sessionLines.push(this.renderKeyValue(width, ' Input',  formatTokens(this.sessionUsage.input),  C.label));
     sessionLines.push(this.renderKeyValue(width, ' Output', formatTokens(this.sessionUsage.output), C.label));
@@ -293,35 +436,64 @@ export class CostTrackerPanel extends BasePanel {
     ];
 
     const agentList = Array.from(this.agents.values());
+    const scrollableAgents = agentList.length > 5;
+    // Footer hints adapt to whether the agent list is long enough to scroll.
+    const hintRow = scrollableAgents
+      ? buildKeyboardHints(width, [
+          { keys: 'Up/Down', label: 'scroll agents' },
+          { keys: 'PgUp/PgDn', label: 'page' },
+          { keys: 'b', label: 'set budget' },
+        ], DEFAULT_PANEL_PALETTE)
+      : buildKeyboardHints(width, [
+          { keys: 'b', label: 'set budget alert' },
+        ], DEFAULT_PANEL_PALETTE);
     if (agentList.length > 0) {
       const planCost = agentList.reduce((sum, a) => sum + a.cost, 0);
+      const running = agentList.filter((a) => a.status === 'running').length;
+      const failed = agentList.filter((a) => a.status === 'failed').length;
       const agentRows: Line[] = [
-        this.renderKeyValue(width, ' Plan total', formatCost(planCost + sessionCost), C.cost),
-        this.renderDivider(width),
+        buildStyledPanelLine(width, [
+          { text: ' Plan total ', fg: C.label },
+          { text: formatCost(planCost + sessionCost), fg: C.cost, bold: true },
+          { text: `  ${agentList.length} agent${agentList.length === 1 ? '' : 's'}`, fg: C.dim },
+          ...(running > 0 ? [{ text: `  ${running} running`, fg: C.running }] : []),
+          ...(failed > 0 ? [{ text: `  ${failed} failed`, fg: C.bad }] : []),
+        ]),
+        // Per-agent cost ledger as an aligned table — agent, model, tokens, cost
+        // line up in columns instead of wrapping across two ragged rows.
+        ...buildTable(
+          width,
+          [
+            { label: 'Agent', width: 14 },
+            { label: 'Model', width: 18 },
+            { label: 'In', width: 7, align: 'right' },
+            { label: 'Out', width: 7, align: 'right' },
+            { label: 'Cost', align: 'right' },
+          ],
+          agentList.map((agent) => {
+            const statusFg = agent.status === 'running' ? C.running
+              : agent.status === 'failed' ? C.bad
+              : C.good;
+            const statusIcon = agent.status === 'running' ? '…'
+              : agent.status === 'failed' ? '✕'
+              : '✓';
+            return {
+              cells: [
+                { text: `${statusIcon} ${agent.id}`, fg: statusFg },
+                { text: agent.model, fg: C.model },
+                { text: agent.inputTokens > 0 ? formatTokens(agent.inputTokens) : '-', fg: C.dim },
+                { text: agent.outputTokens > 0 ? formatTokens(agent.outputTokens) : '-', fg: C.dim },
+                { text: agent.cost > 0 ? formatCost(agent.cost) : '-', fg: agent.cost > 0 ? C.cost : C.dim },
+              ],
+            };
+          }),
+          DEFAULT_PANEL_PALETTE,
+        ),
       ];
-      for (const agent of agentList) {
-        const statusFg = agent.status === 'running' ? C.running
-          : agent.status === 'failed' ? C.bad
-          : C.good;
-        const statusIcon = agent.status === 'running' ? '…'
-          : agent.status === 'failed' ? '✕'
-          : '✓';
-
-        const agentLabel = `${statusIcon} ${agent.id}`;
-        const taskText = agent.task;
-        agentRows.push(this.renderAgent(width, agentLabel, taskText, statusFg));
-
-        if (agent.inputTokens > 0 || agent.outputTokens > 0) {
-          const tokenInfo = `  in:${formatTokens(agent.inputTokens)} out:${formatTokens(agent.outputTokens)} ${formatCost(agent.cost)}`;
-          agentRows.push(this.renderLabeledLine(width, '', tokenInfo, C.dim));
-        }
-      }
       const sessionSection: PanelWorkspaceSection = sections[0]!;
       const agentsSection = resolveScrollablePanelSection(width, height, {
         intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
-        footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-        ],
+        footerLines: [hintRow],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: [sessionSection],
         section: {
@@ -329,6 +501,7 @@ export class CostTrackerPanel extends BasePanel {
           scrollableLines: agentRows,
           scrollOffset: this.scrollOffset,
           minRows: 4,
+          appendWindowSummary: scrollableAgents ? { dimColor: DEFAULT_PANEL_PALETTE.dim } : undefined,
         },
       });
       this.scrollOffset = agentsSection.scrollOffset;
@@ -340,7 +513,13 @@ export class CostTrackerPanel extends BasePanel {
           width,
           ' No agents spawned this session',
           'Agent-level cost estimates appear here once delegated or background agents start running.',
-          [],
+          // WO-160: 'b' already opens the in-panel budget-entry field (see
+          // handleInput/handleBudgetEntryInput above) and is advertised in
+          // the footer's 'b: set budget' hint, so the printed
+          // '/cost budget <usd>' command was a redundant action substitute.
+          [
+            { command: 'b', summary: 'set a session budget alert to track spend against a cap' },
+          ],
           DEFAULT_PANEL_PALETTE,
         ),
       });
@@ -350,9 +529,7 @@ export class CostTrackerPanel extends BasePanel {
       title: ' Cost Tracker',
       intro: 'Track per-session and per-agent token spend using model pricing and live usage snapshots.',
       sections,
-      footerLines: [
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll agents', DEFAULT_PANEL_PALETTE.dim]]),
-      ],
+      footerLines: [hintRow],
       palette: DEFAULT_PANEL_PALETTE,
     });
   }
@@ -364,7 +541,7 @@ export class CostTrackerPanel extends BasePanel {
   private renderKeyValue(width: number, label: string, value: string, valueFg: string): Line {
     const LABEL_W = 10;
     return buildStyledPanelLine(width, [
-      { text: label.padEnd(LABEL_W).slice(0, LABEL_W), fg: C.label, bg: C.bg },
+      { text: fitDisplay(label, LABEL_W), fg: C.label, bg: C.bg },
       { text: ': ', fg: C.dim, bg: C.bg },
       { text: value, fg: valueFg, bg: C.bg, bold: true },
     ]);
@@ -372,23 +549,32 @@ export class CostTrackerPanel extends BasePanel {
 
   private renderLabeledLine(width: number, label: string, value: string, valueFg: string): Line {
     return buildStyledPanelLine(width, [
-      ...(label.length > 0 ? [{ text: `${label.slice(0, 10).padEnd(10)} `, fg: C.label }] : []),
+      ...(label.length > 0 ? [{ text: `${fitDisplay(label, 10)} `, fg: C.label }] : []),
       { text: value, fg: valueFg },
     ]);
   }
 
-  private renderAgent(width: number, label: string, task: string, fg: string): Line {
-    const LABEL_W = 12;
-    const remaining = width - LABEL_W - 1;
-    const trimmed = task.length > remaining ? task.slice(0, remaining - 3) + '...' : task;
-    return buildStyledPanelLine(width, [
-      { text: `${label.padEnd(LABEL_W).slice(0, LABEL_W)} `, fg, bold: true },
-      { text: trimmed, fg: C.label },
-    ]);
-  }
-
-  private renderDivider(width: number): Line {
-    return buildStyledPanelLine(width, [{ text: '─'.repeat(width), fg: C.separator }]);
+  // Non-masked numeric entry for the 'b' budget-alert key — the value is a
+  // USD amount, not a secret, so (unlike LocalAuthPanel's masked entry) it is
+  // echoed directly rather than dotted out.
+  private renderBudgetEntryPrompt(width: number, height: number): Line[] {
+    const draft = this.budgetEntry ?? '';
+    const display = `$${draft}█`;
+    const promptLines: Line[] = [
+      buildPanelLine(width, [[' Set the session budget alert (USD). 0 disables it.', C.label]]),
+      buildPanelLine(width, [['', C.label]]),
+      buildPanelLine(width, [[' Budget  ', C.label], [display, C.cost]]),
+      buildPanelLine(width, [['', C.label]]),
+      buildPanelLine(width, [[' [Enter] Confirm   [Esc] Cancel   [Backspace] Delete char', C.dim]]),
+    ];
+    const workspace = buildPanelWorkspace(width, height, {
+      title: ' Cost Tracker — Budget',
+      intro: 'Type a USD amount and press Enter to set the budget alert threshold.',
+      sections: [{ lines: promptLines }],
+      palette: DEFAULT_PANEL_PALETTE,
+    });
+    while (workspace.length < height) workspace.push(createEmptyLine(width));
+    return workspace.slice(0, height);
   }
 
 }