@pellux/goodvibes-tui 0.29.0 → 1.1.0

package/src/runtime/bootstrap-command-context.ts

@@ -114,6 +114,7 @@ export type CreateBootstrapCommandContextOptions = {
   sessionLineageTracker?: import('@pellux/goodvibes-sdk/platform/core').SessionLineageTracker;
   wrfcController?: import('@pellux/goodvibes-sdk/platform/agents').WrfcController;
   componentHealthMonitor: import('@/runtime/index.ts').ComponentHealthMonitor;
+  hydrateSessionUsage?: () => void;
 };
 
 export function createBootstrapCommandContext(
@@ -167,6 +168,7 @@ export function createBootstrapCommandContext(
     sessionLineageTracker,
     wrfcController,
     changeTracker,
+    hydrateSessionUsage,
     planManager,
     adaptivePlanner,
     sessionOrchestration,
@@ -223,6 +225,7 @@ export function createBootstrapCommandContext(
     sessionLineageTracker,
     wrfcController,
     changeTracker,
+    hydrateSessionUsage,
   });
   const provider = createBootstrapCommandProviderSection({
     providerRegistry,

package/src/runtime/bootstrap-command-parts.ts

@@ -109,6 +109,7 @@ export interface BootstrapCommandSectionOptions {
   readonly sessionLineageTracker?: import('@pellux/goodvibes-sdk/platform/core').SessionLineageTracker;
   readonly wrfcController?: import('@pellux/goodvibes-sdk/platform/agents').WrfcController;
   readonly changeTracker?: import('@pellux/goodvibes-sdk/platform/sessions').SessionChangeTracker;
+  readonly hydrateSessionUsage?: () => void;
   readonly agentManager?: ShellAgentManagerService;
   readonly modeManager?: ShellModeManagerService;
   readonly automationManager?: ShellAutomationManagerRuntimeService;
@@ -300,7 +301,7 @@ export function createBootstrapCommandActions(
 export function createBootstrapCommandSessionSection(
   options: Pick<
     BootstrapCommandSectionOptions,
-    'conversation' | 'runtime' | 'sessionManager' | 'sessionMemoryStore' | 'sessionLineageTracker' | 'wrfcController' | 'changeTracker'
+    'conversation' | 'runtime' | 'sessionManager' | 'sessionMemoryStore' | 'sessionLineageTracker' | 'wrfcController' | 'changeTracker' | 'hydrateSessionUsage'
   >,
 ): BootstrapCommandSessionSection {
   return {
@@ -311,6 +312,7 @@ export function createBootstrapCommandSessionSection(
     sessionLineageTracker: options.sessionLineageTracker,
     wrfcController: options.wrfcController,
     changeTracker: options.changeTracker,
+    hydrateSessionUsage: options.hydrateSessionUsage,
   };
 }
 

package/src/runtime/bootstrap-core.ts

@@ -28,6 +28,7 @@ import { loadBootstrapSystemPrompt, syncConfiguredServices } from '@/runtime/ind
 import { registerBootstrapHookBridge } from '@/runtime/index.ts';
 import { registerBootstrapRuntimeEvents } from '@/runtime/index.ts';
 import { createRuntimeServices, type RuntimeServices } from './services.ts';
+import { setPricingSource } from '../export/cost-utils.ts';
 import { createUiRuntimeServices, type UiRuntimeServices } from './ui-services.ts';
 import { join } from 'node:path';
 import { installWrfcAgentToolGuard } from '../tools/wrfc-agent-guard.ts';
@@ -255,6 +256,10 @@ export async function initializeBootstrapCore(
   providerRegistry.initModelLimits();
   services.benchmarkStore.initBenchmarks();
   providerRegistry.initCatalog();
+  // Wire cost-utils to the live catalog so cost displays distinguish real
+  // pricing from unpriced (WO-315) instead of silently reading zero for any
+  // model the small static fallback table doesn't cover.
+  setPricingSource(() => providerRegistry.getRawCatalogModels());
   services.keybindingsManager.loadFromDisk();
   domainDispatch.syncControlPlaneState({
     enabled: Boolean(configManager.get('controlPlane.enabled')),

package/src/runtime/bootstrap-hook-bridge.ts

@@ -29,6 +29,8 @@ export interface ResumeSessionOptions {
   readonly configManager: Pick<ConfigManager, 'get' | 'getCategory'>;
   readonly providerRegistry: Pick<ProviderRegistry, 'get' | 'getCurrentModel' | 'getForModel' | 'require'>;
   readonly homeDirectory: string;
+  /** See CommandSessionServices.hydrateSessionUsage (command-registry.ts). */
+  readonly hydrateSessionUsage?: () => void;
 }
 
 export function createResumeSessionHandler(options: ResumeSessionOptions): (sessionId: string) => void {
@@ -65,6 +67,9 @@ export function createResumeSessionHandler(options: ResumeSessionOptions): (sess
           });
         },
       });
+      // Hydrate the footer's token counters from the resumed history now that
+      // fromJSON()/journal replay are both applied — before requestRender() below.
+      options.hydrateSessionUsage?.();
       options.onSessionIdChanged?.(sessionId);
       if (meta?.model) options.runtime.model = meta.model;
       if (meta?.provider) options.runtime.provider = meta.provider;

package/src/runtime/bootstrap-shell.ts

@@ -1,5 +1,5 @@
 import { join } from 'node:path';
-import type { ConversationManager } from '../core/conversation';
+import { sumConversationUsage, type ConversationManager } from '../core/conversation';
 import type { Orchestrator } from '../core/orchestrator';
 import type { ConfigManager } from '@pellux/goodvibes-sdk/platform/config';
 import type { RuntimeEventBus } from '@/runtime/index.ts';
@@ -93,6 +93,15 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
   } = options;
 
   const systemMessagesPanel = new SystemMessagesPanel(configManager, services.componentHealthMonitor);
+  // W0.9: after any resume seam replays historical messages into `conversation`,
+  // the freshly-constructed `orchestrator` still has its zeroed default usage
+  // (SDK gap — Orchestrator.usage is never persisted/reseeded). Recompute it
+  // from the replayed history so the footer doesn't show Input: 0 post-resume.
+  const hydrateSessionUsage = (): void => {
+    const { usage, lastInputTokens } = sumConversationUsage(conversation.getMessageSnapshot());
+    orchestrator.usage = usage;
+    orchestrator.lastInputTokens = lastInputTokens;
+  };
   const resumeSession = createResumeSessionHandler({
     runtimeBus,
     runtime,
@@ -107,6 +116,7 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     configManager,
     providerRegistry: services.providerRegistry,
     homeDirectory: services.homeDirectory,
+    hydrateSessionUsage,
   });
 
   const foundationClients = createRuntimeFoundationClients({
@@ -282,6 +292,7 @@ export function createBootstrapShell(options: BootstrapShellOptions): BootstrapS
     },
     completeModelSelectionSideEffect,
     componentHealthMonitor: services.componentHealthMonitor,
+    hydrateSessionUsage,
   });
   commandContextRef = commandContext;
 

package/src/runtime/render-scheduler.ts

@@ -0,0 +1,80 @@
+/**
+ * render-scheduler.ts — same-tick render coalescing for the TUI shell (WO-208).
+ *
+ * main.ts fans out its own direct render() calls across turn/stream/input wiring
+ * (~14 direct invocation contexts). Each one previously ran a full synchronous
+ * Compositor.composite() the instant it was called. When several fire within a
+ * single event-loop tick — a streaming burst is the canonical case — only the
+ * LAST frame is ever visible; the earlier composites are immediately overwritten.
+ * This scheduler collapses every schedule() call made within one tick into a
+ * single composite flushed on the microtask queue, so the tick produces exactly
+ * one frame. That frame is byte-identical to what the last synchronous render()
+ * would have produced, because the coalesced flush runs after all of the tick's
+ * synchronous state mutations, reading the same final state the last direct
+ * render() would have read.
+ *
+ * This is deliberately SEPARATE from bootstrap-core's requestRender(), which is a
+ * cross-tick, 16ms-throttled (~60fps) coalescer for the panel/input/runtime
+ * fan-out — that one caps repaint RATE across ticks. This one collapses the
+ * WITHIN-tick burst with no added latency: a microtask flushes at the tail of the
+ * current tick, before the event loop yields to I/O, so the frame still lands in
+ * the same turn it was requested in.
+ *
+ * flushNow() preserves a synchronous immediate path for callers that genuinely
+ * need the frame composited before they return. Terminal resize is the known
+ * case: the resize handler resets the compositor diff and must repaint against
+ * the new dimensions synchronously rather than waiting for the microtask.
+ * flushNow() also clears any pending coalesced flush, so a resize (or any
+ * immediate paint) followed by an already-queued microtask never double-composites.
+ */
+
+export interface RenderScheduler {
+  /**
+   * Coalesced request: schedule a composite for the current tick. N calls within
+   * one tick collapse into exactly one composite, flushed on the microtask queue.
+   */
+  readonly schedule: () => void;
+  /**
+   * Immediate request: run the composite synchronously right now, and cancel any
+   * pending coalesced flush so the tick still composites only once. Use only where
+   * a caller genuinely requires synchronous output (terminal resize).
+   */
+  readonly flushNow: () => void;
+}
+
+/**
+ * Build a render scheduler around `renderNow` (the synchronous composite closure).
+ *
+ * `scheduleFlush` is the deferral primitive; it defaults to `queueMicrotask` so
+ * bursts coalesce within the current tick. Tests and benchmarks inject a manual
+ * queue to flush deterministically.
+ */
+export function createRenderScheduler(
+  renderNow: () => void,
+  scheduleFlush: (flush: () => void) => void = queueMicrotask,
+): RenderScheduler {
+  let scheduled = false;
+
+  const flush = (): void => {
+    // A synchronous flushNow() (or a superseding immediate paint) before this
+    // microtask ran clears `scheduled`, turning this into a no-op so a single
+    // tick never composites twice.
+    if (!scheduled) return;
+    scheduled = false;
+    renderNow();
+  };
+
+  const schedule = (): void => {
+    if (scheduled) return;
+    scheduled = true;
+    scheduleFlush(flush);
+  };
+
+  const flushNow = (): void => {
+    // Satisfy any pending coalesced flush, then composite synchronously.
+    scheduled = false;
+    renderNow();
+  };
+
+  return { schedule, flushNow };
+}

package/src/utils/splash-lines.ts

@@ -20,7 +20,8 @@ const SEPARATOR = '━'.repeat(ART_W);
  */
 const TAGLINE = '[ ｇｏｏｄ ｖｉｂｅｓ ・ Ａ Ｉ ・ いい雰囲気 ]';
 
-const VERSION_LINE = `　✦　v${VERSION}　█　terminal AI assistant　█　自動ｺｰﾄﾞ 　✦`;
+const versionLine = (version: string) =>
+  `　✦　v${version}　█　terminal AI assistant　█　自動ｺｰﾄﾞ 　✦`;
 
 /** Fixed hint line — the three primary shell entry points. */
 const HINT_LINE = 'Ctrl+P panels  /  ? help  /  F2 processes';
@@ -35,6 +36,13 @@ export interface SplashOptions {
    * When present, the splash advertises a resume affordance.
    */
   lastSessionId?: string;
+  /**
+   * Version string rendered on the splash's version line. Defaults to the
+   * build VERSION; injectable so the golden-frame tests can pin a fixture —
+   * the version's display width shifts the line's centering, so goldens tied
+   * to the live VERSION break on every release bump (v1.0.0 release failure).
+   */
+  version?: string;
 }
 
 /** Collapse a $HOME-prefixed working directory to a leading `~`. */
@@ -54,7 +62,7 @@ export function getSplashLines(columns: number, opts: SplashOptions = {}): strin
     ...ART_LINES.map((line) => center(line, columns)),
     center(SEPARATOR, columns),
     center(TAGLINE, columns),
-    center(VERSION_LINE, columns),
+    center(versionLine(opts.version ?? VERSION), columns),
     '',
   ];
 

package/src/version.ts

@@ -6,7 +6,7 @@ import { join } from 'node:path';
 // The prebuild script updates the fallback value before compilation.
 // Uses import.meta.dir (Bun) to locate package.json relative to this file,
 // which is correct regardless of the process working directory.
-let _version = '0.29.0';
+let _version = '1.1.0';
 try {
   const pkg = JSON.parse(readFileSync(join(import.meta.dir, '..', 'package.json'), 'utf-8'));
   _version = pkg.version ?? _version;

package/src/renderer/file-tree.ts

@@ -1,153 +0,0 @@
-import { type Line, createStyledCell } from '../types/grid.ts';
-import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
-
-/** Color by file extension category. */
-function getFileColor(name: string): string {
-  if (name.endsWith('/')) return '#00ffff'; // directory
-  const ext = name.split('.').pop()?.toLowerCase() ?? '';
-  if (['ts', 'tsx', 'js', 'jsx', 'mjs'].includes(ext)) return '#dcdcaa';
-  if (['json', 'yaml', 'yml', 'toml'].includes(ext)) return '#ce9178';
-  if (['md', 'txt', 'rst'].includes(ext)) return '252';
-  if (['sh', 'bash', 'zsh'].includes(ext)) return '#22c55e';
-  if (['css', 'scss', 'less'].includes(ext)) return '#569cd6';
-  if (['html', 'htm', 'xml', 'svg'].includes(ext)) return '#f97316';
-  if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'ico'].includes(ext)) return '#a855f7';
-  if (['lock', 'env', 'gitignore'].includes(name)) return '238';
-  return '252';
-}
-
-export interface FileTreeEntry {
-  name: string;
-  isDir: boolean;
-  size?: number;
-  depth: number;
-  isLast: boolean;
-  isLastAtDepth: boolean[]; // tracks if each ancestor was last child
-}
-
-/**
- * renderFileTree - Render a directory listing as a tree with colored file types.
- * Returns Line[] for the cell-based pipeline.
- */
-export function renderFileTree(
-  entries: FileTreeEntry[],
-  width: number,
-  title?: string
-): Line[] {
-  const lines: Line[] = [];
-
-  // Optional header
-  if (title) {
-    lines.push(UIFactory.stringToLine(` [dir] ${title}`, width, { fg: '#00ffff', bold: true }));
-    lines.push(UIFactory.stringToLine(' ' + '-'.repeat(width - 2), width, { fg: '240' }));
-  }
-
-  for (const entry of entries) {
-    const { name, isDir, size, depth, isLast, isLastAtDepth } = entry;
-
-    // Build tree prefix
-    let prefix = '';
-    for (let d = 0; d < depth; d++) {
-      if (d < depth - 1) {
-        prefix += isLastAtDepth[d] ? '   ' : '|  ';
-      }
-    }
-    if (depth > 0) {
-      prefix += isLast ? '`-- ' : '|-- ';
-    } else {
-      prefix += '';
-    }
-
-    const displayName = isDir ? name + '/' : name;
-    const fg = getFileColor(isDir ? displayName : name);
-
-    // Size info (dimmed)
-    let sizeStr = '';
-    if (size !== undefined && !isDir) {
-      if (size < 1024) sizeStr = ` ${size}B`;
-      else if (size < 1024 * 1024) sizeStr = ` ${(size / 1024).toFixed(1)}K`;
-      else sizeStr = ` ${(size / (1024 * 1024)).toFixed(1)}M`;
-    }
-
-    const fullText = prefix + displayName;
-    const sizeW = getDisplayWidth(sizeStr);
-    const nameW = getDisplayWidth(fullText);
-    const maxNameW = width - sizeW - 1;
-
-    const truncated = nameW > maxNameW ? fullText.slice(0, Math.max(0, maxNameW - 3)) + '...' : fullText;
-
-    // Compose: name + padding + size
-    const paddingW = Math.max(0, width - getDisplayWidth(truncated) - sizeW);
-    const fullLine = truncated + ' '.repeat(paddingW);
-
-    // Build the line with per-character styles
-    const line = UIFactory.stringToLine(fullLine, width, { fg });
-
-    // Dim the size info
-    if (sizeStr && sizeW > 0) {
-      const sizeStartX = width - sizeW;
-      let cx = sizeStartX;
-      for (const ch of sizeStr) {
-        if (cx >= width) break;
-        const cw = getDisplayWidth(ch);
-        line[cx] = createStyledCell(ch, { fg: '240', dim: true });
-        if (cw === 2 && cx + 1 < width) line[cx + 1] = { ...line[cx], char: '' };
-        cx += cw;
-      }
-    }
-
-    lines.push(line);
-  }
-
-  return lines;
-}
-
-/**
- * parseListDirOutput - Convert a simple list directory output string to FileTreeEntry[].
- * Expects one path per line, relative paths with '/' for directories.
- */
-export function parseListDirOutput(output: string, rootDir: string): FileTreeEntry[] {
-  const rawLines = output.trim().split('\n').filter(Boolean);
-  const entries: FileTreeEntry[] = [];
-
-  for (const line of rawLines) {
-    const trimmed = line.trim();
-    if (!trimmed) continue;
-    const isDir = trimmed.endsWith('/');
-    const name = isDir ? trimmed.slice(0, -1).split('/').pop() + '/' : trimmed.split('/').pop() ?? trimmed;
-    const depth = (trimmed.match(/\//g) ?? []).length - (isDir ? 1 : 0);
-
-    entries.push({
-      name: name || trimmed,
-      isDir,
-      depth: Math.max(0, depth),
-      isLast: false,
-      isLastAtDepth: [],
-    });
-  }
-
-  // Mark isLast for each entry (last sibling at same depth under same parent)
-  for (let i = 0; i < entries.length; i++) {
-    const nextSameOrLower = entries.slice(i + 1).findIndex(
-      e => e.depth <= entries[i].depth
-    );
-    entries[i].isLast = nextSameOrLower === 0 || nextSameOrLower === -1;
-
-    // Build isLastAtDepth[d] = true if the ancestor at depth d was the last child
-    // of its parent. This governs whether to draw '|  ' or '   ' vertical bars.
-    const isLastAtDepth: boolean[] = new Array(entries[i].depth).fill(false);
-    for (let d = 0; d < entries[i].depth; d++) {
-      // Walk backwards to find the most recent ancestor at depth d
-      for (let j = i - 1; j >= 0; j--) {
-        if (entries[j].depth === d) {
-          isLastAtDepth[d] = entries[j].isLast;
-          break;
-        }
-      }
-    }
-    entries[i].isLastAtDepth = isLastAtDepth;
-  }
-
-  return entries;
-}

package/src/renderer/progress.ts

@@ -1,100 +0,0 @@
-import { type Line } from '../types/grid.ts';
-import { UIFactory } from './ui-factory.ts';
-import { getDisplayWidth, padDisplayEnd } from '../utils/terminal-width.ts';
-import { abbreviateCount } from '../utils/format-number.ts';
-import { SPINNER_FRAMES } from './ui-primitives.ts';
-
-// Rich spinner frames (used by progress indicators) — single source in ui-primitives.ts.
-export { SPINNER_FRAMES };
-// Braille thinking spinner frames (used by the orchestrator thinking animation) — same frame set.
-export const THINKING_SPINNER_FRAMES = SPINNER_FRAMES;
-
-/**
- * renderSpinner - Render a spinner with label as a single Line.
- */
-export function renderSpinner(
-  frame: string,
-  label: string,
-  width: number,
-  fg: string = '135'
-): Line {
-  const text = ` ${frame} ${label}`;
-  return UIFactory.stringToLine(padDisplayEnd(text, width), width, { fg, bold: true });
-}
-
-/**
- * renderToolProgress - Render tool execution progress.
- * E.g. "[2/5] Editing src/config.ts..."
- */
-export function renderToolProgress(
-  current: number,
-  total: number,
-  label: string,
-  width: number
-): Line[] {
-  const counter = `[${current}/${total}]`;
-  const text = ` ${counter} ${label}`;
-  return [
-    UIFactory.stringToLine(padDisplayEnd(text, width), width, { fg: '#ffcc00', bold: true }),
-  ];
-}
-
-/**
- * renderTokenBar - Render a token usage bar for the footer.
- * Shows used/max tokens as a visual bar + numbers.
- */
-export function renderTokenBar(
-  used: number,
-  max: number,
-  width: number,
-  model: string,
-  toolCount: number
-): Line[] {
-  const lines: Line[] = [];
-
-  // Stats row
-  const usedK = abbreviateCount(used, { noM: true });
-  const maxK = abbreviateCount(max, { noM: true });
-  const pct = max > 0 ? Math.min(100, Math.round((used / max) * 100)) : 0;
-  const toolStr = toolCount > 0 ? `  tools:${toolCount}` : '';
-  const statsText = ` ${model}  in:${usedK}/${maxK} (${pct}%)${toolStr}`;
-
-  // Progress bar
-  const barLabel = ' ctx ';
-  const barLabelW = getDisplayWidth(barLabel);
-  const barW = Math.max(10, Math.floor(width * 0.3));
-  const filled = Math.round((pct / 100) * barW);
-  const empty = barW - filled;
-
-  // Color based on usage
-  const barFg = pct > 85 ? '#ef4444' : pct > 60 ? '#ffcc00' : '#22c55e';
-
-  const bar = '#'.repeat(filled) + '-'.repeat(empty);
-  const barText = barLabel + bar;
-
-  const statsW = getDisplayWidth(statsText);
-  const barTextW = getDisplayWidth(barText);
-  const spacingW = Math.max(1, width - statsW - barTextW - 2);
-
-  // Build with mixed colors
-  const line = UIFactory.stringToLine(statsText + ' '.repeat(spacingW), width, { fg: '244', dim: true });
-
-  // Overlay the bar with color
-  let barStartX = getDisplayWidth(statsText) + spacingW;
-  for (const ch of barLabel) {
-    if (barStartX >= width) break;
-    const cw = getDisplayWidth(ch);
-    line[barStartX] = { char: ch, fg: '244', bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false };
-    if (cw === 2 && barStartX + 1 < width) line[barStartX + 1] = { ...line[barStartX], char: '' };
-    barStartX += cw;
-  }
-  for (let i = 0; i < filled && barStartX + i < width; i++) {
-    line[barStartX + i] = { char: '#', fg: barFg, bg: '', bold: false, dim: false, underline: false, italic: false, strikethrough: false };
-  }
-  for (let i = 0; i < empty && barStartX + filled + i < width; i++) {
-    line[barStartX + filled + i] = { char: '-', fg: '238', bg: '', bold: false, dim: true, underline: false, italic: false, strikethrough: false };
-  }
-
-  lines.push(line);
-  return lines;
-}

package/src/renderer/status-token.ts

@@ -1,67 +0,0 @@
-// ---------------------------------------------------------------------------
-// buildStatusToken — always glyph + color, never color-only.
-//
-// Maps a semantic state to a Unicode glyph AND a palette color so that
-// colorblind users and screen readers can distinguish states without color.
-//
-// Glyphs:
-//   good  ✓  (CHECK MARK)
-//   warn  ⚠  (WARNING SIGN)
-//   bad   ✕  (MULTIPLICATION X)
-//   info  ○  (WHITE CIRCLE)
-// ---------------------------------------------------------------------------
-
-import type { Cell } from '../types/grid.ts';
-import { DEFAULT_PANEL_PALETTE } from '../panels/polish.ts';
-import { type StatusState, STATE_GLYPHS } from './status-glyphs.ts';
-
-// Re-export for downstream consumers that import from this module.
-export type { StatusState } from './status-glyphs.ts';
-export { STATE_GLYPHS } from './status-glyphs.ts';
-
-const STATE_COLORS: Record<StatusState, string> = {
-  good: DEFAULT_PANEL_PALETTE.good,
-  warn: DEFAULT_PANEL_PALETTE.warn,
-  bad:  DEFAULT_PANEL_PALETTE.bad,
-  info: DEFAULT_PANEL_PALETTE.info,
-};
-
-export interface StatusTokenOpts {
-  /** Append a numeric count after the label, e.g. "label (3)". */
-  count?: number;
-  /** Override the default glyph for this state. */
-  glyph?: string;
-}
-
-/**
- * Build a small sequence of styled cells: [glyph, space, label, optional count]
- *
- * Always prepends the glyph so colorblind users can parse the state.
- * The color is applied to both glyph and label as a redundant cue.
- *
- * @param state   Semantic state — controls default glyph and color.
- * @param label   Human-readable label string.
- * @param opts    Optional count suffix or glyph override.
- * @returns       Array of Cell objects ready to embed in a Line.
- */
-export function buildStatusToken(
-  state: StatusState,
-  label: string,
-  opts?: StatusTokenOpts,
-): Cell[] {
-  const glyph = opts?.glyph ?? STATE_GLYPHS[state];
-  const color = STATE_COLORS[state];
-  const suffix = opts?.count !== undefined ? ` (${opts.count})` : '';
-  const text = `${glyph} ${label}${suffix}`;
-
-  return text.split('').map((char): Cell => ({
-    char,
-    fg: color,
-    bg: '',
-    bold: false,
-    dim: false,
-    underline: false,
-    italic: false,
-    strikethrough: false,
-  }));
-}