@thoth-agents/pi-thoth-theme 0.1.0 → 0.2.0

package/src/input-box/state.ts

@@ -1,90 +0,0 @@
-import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
-import type { IconMode } from '../shared/config.ts';
-import { formatDuration } from '../shared/duration.ts';
-import { frames, icon } from '../shared/icons.ts';
-import {
-  type BreathingFrame,
-  createBreathingFrame,
-  renderWorkingIndicator,
-} from './gradient.ts';
-
-export function createWorkingState(requestRender: () => void) {
-  let startedAt: number | undefined;
-  let ticker: ReturnType<typeof setInterval> | undefined;
-  let disposed = false;
-
-  function stop() {
-    if (ticker !== undefined) clearInterval(ticker);
-    ticker = undefined;
-    startedAt = undefined;
-  }
-
-  return {
-    get isWorking() {
-      return startedAt !== undefined;
-    },
-    start() {
-      if (disposed) return;
-      stop();
-      startedAt = Date.now();
-      ticker = setInterval(requestRender, 50);
-      ticker.unref?.();
-      requestRender();
-    },
-    end() {
-      if (disposed) return;
-      stop();
-      requestRender();
-    },
-    status(
-      indicator: unknown,
-      width: number,
-      styleMuted: (text: string) => string = (text) => text,
-      frame?: BreathingFrame,
-      mode: IconMode = 'nerd',
-    ): string {
-      const ready = `${icon('ready', mode)} ready`;
-      const separator = icon('separator', mode);
-      if (
-        !indicator ||
-        typeof indicator !== 'object' ||
-        !('renderInBorder' in indicator) ||
-        typeof indicator.renderInBorder !== 'function'
-      ) {
-        return styleMuted(truncateToWidth(ready, width, ''));
-      }
-      const working = 'kind' in indicator && indicator.kind === 'working';
-      const now = frame?.now ?? Date.now();
-      const elapsed =
-        working && startedAt !== undefined
-          ? ` ${separator} ${formatDuration(Math.floor((now - startedAt) / 1000) * 1000)}`
-          : '';
-      const nativeWidth = Math.max(1, width - visibleWidth(elapsed));
-      const native = indicator.renderInBorder(nativeWidth);
-      if (typeof native !== 'string' || visibleWidth(native) === 0) {
-        return styleMuted(truncateToWidth(ready, width, ''));
-      }
-      const fitted = truncateToWidth(native, nativeWidth, '');
-      const label =
-        working && startedAt !== undefined
-          ? renderWorkingIndicator(
-              fitted,
-              frame ?? createBreathingFrame(now),
-              styleMuted,
-              frames('workingFrames', mode),
-            )
-          : fitted;
-      return truncateToWidth(
-        `${label}${elapsed ? styleMuted(elapsed) : ''}`,
-        width,
-        '',
-      );
-    },
-    dispose() {
-      disposed = true;
-      stop();
-    },
-  };
-}
-
-export type WorkingState = ReturnType<typeof createWorkingState>;

package/src/render-kit/index.ts

@@ -1,305 +0,0 @@
-import {
-  stripTerminalSequences,
-  truncateToWidth,
-  wrapTextWithAnsi,
-} from '@earendil-works/pi-tui';
-import type {
-  RenderCardOptions,
-  RenderIndicatorContext,
-  RenderKitTheme,
-  RenderRows,
-  RenderStatus,
-  RenderToolFooterOptions,
-  ThothRenderKit,
-} from '@thoth-agents/pi-core';
-import { getToolElapsedMs } from '@thoth-agents/pi-core';
-import { cachedComponent } from '../shared/cache.ts';
-import type { IconMode } from '../shared/config.ts';
-import { formatDuration } from '../shared/duration.ts';
-import { frames, icon, statusIcon } from '../shared/icons.ts';
-import { getBorderTone } from '../tools/border.ts';
-import { renderBox } from '../tools/box.ts';
-import {
-  renderFrameBottom,
-  renderFrameDivider,
-  renderFrameRow,
-  renderFrameTop,
-} from '../tools/frame.ts';
-import { syncElapsedTicker } from '../tools/ticker.ts';
-import { runningFooter, workingFrame } from './working.ts';
-
-const STATUS_ROLE = {
-  pending: 'dim',
-  queued: 'dim',
-  in_progress: 'accent',
-  running: 'accent',
-  completed: 'success',
-  failed: 'error',
-  cancelled: 'muted',
-  interrupted: 'warning',
-  stopping: 'warning',
-  deleted: 'muted',
-  blocked: 'warning',
-  unknown: 'dim',
-} as const satisfies Record<RenderStatus, string>;
-
-/** Terminal statuses whose footer shows the completed or failed icon. */
-const TOOL_FOOTER_STATUS: Partial<
-  Record<RenderStatus, 'completed' | 'failed'>
-> = {
-  completed: 'completed',
-  deleted: 'completed',
-  failed: 'failed',
-  cancelled: 'failed',
-  interrupted: 'failed',
-  blocked: 'failed',
-};
-
-function startsWithFooterGlyph(footer: string, mode: IconMode): boolean {
-  const plain = stripTerminalSequences(footer);
-  return (['completed', 'failed'] as const).some((status) => {
-    const glyph = statusIcon(status, mode);
-    return (
-      plain.startsWith(glyph) &&
-      (plain.length === glyph.length || /^\s/u.test(plain.slice(glyph.length)))
-    );
-  });
-}
-
-function isRunning(status: RenderStatus): boolean {
-  return status === 'running' || status === 'in_progress';
-}
-
-function statusGlyph(
-  theme: RenderKitTheme,
-  status: RenderStatus,
-  mode: IconMode,
-): string {
-  return theme.fg(STATUS_ROLE[status], statusIcon(status, mode));
-}
-
-function indicatorStatus(context: RenderIndicatorContext): RenderStatus {
-  if (context.executionStarted && context.isPartial) return 'running';
-  if (context.isError) return 'failed';
-  return context.executionStarted ? 'completed' : 'pending';
-}
-
-function indicatorLabel(status: RenderStatus): string {
-  if (status === 'completed') return 'Done';
-  if (status === 'failed') return 'Error';
-  return status;
-}
-
-function card(
-  theme: RenderKitTheme,
-  options: RenderCardOptions,
-  width: number,
-  toolFooter: NonNullable<ThothRenderKit['toolFooter']>,
-  mode: IconMode,
-): string[] {
-  const safeWidth = Math.max(0, Math.floor(width));
-  if (safeWidth <= 0) return [];
-  const bodyWidth = safeWidth <= 4 ? safeWidth : Math.max(1, safeWidth - 4);
-  const rows = (source?: RenderRows): string[] => {
-    const resolved = typeof source === 'function' ? source(bodyWidth) : source;
-    return (resolved ?? []).flatMap((row) =>
-      options.wrap ? wrapTextWithAnsi(row, bodyWidth) : [row],
-    );
-  };
-  let footer = options.footer ?? '';
-  if (options.footer === undefined && options.status) {
-    footer = options.context
-      ? toolFooter(theme, {
-          status: options.status,
-          context: options.context,
-          summary: options.summary,
-        })
-      : statusGlyph(theme, options.status, mode);
-  } else if (
-    options.status &&
-    !isRunning(options.status) &&
-    !(TOOL_FOOTER_STATUS[options.status] && startsWithFooterGlyph(footer, mode))
-  ) {
-    footer = [statusGlyph(theme, options.status, mode), footer]
-      .filter(Boolean)
-      .join(' ');
-  }
-  const body = rows(options.body);
-  const borderState = {
-    isError: options.isError,
-    isSuccess: options.isSuccess === true,
-  };
-  if (!options.sections?.length && (!options.part || options.part === 'full')) {
-    return renderBox(theme, body, safeWidth, {
-      ...options,
-      ...borderState,
-      footer,
-    });
-  }
-  const borderTone = getBorderTone(borderState);
-  return [
-    ...(options.part === 'end'
-      ? []
-      : options.title
-        ? renderFrameTop(theme, options.title, safeWidth, borderTone)
-        : renderBox(theme, [], safeWidth, borderState).slice(0, 1)),
-    ...body.flatMap((row) => renderFrameRow(theme, row, safeWidth, borderTone)),
-    ...(options.sections ?? []).flatMap((section) => [
-      ...renderFrameDivider(theme, section.title ?? '', safeWidth, borderTone),
-      ...rows(section.rows).flatMap((row) =>
-        renderFrameRow(theme, row, safeWidth, borderTone),
-      ),
-    ]),
-    ...(options.part === 'start'
-      ? []
-      : renderFrameBottom(theme, footer, safeWidth, borderTone)),
-  ];
-}
-
-/** Shared standard footer for kit producers and theme built-ins. */
-export function toolFooter(
-  theme: RenderKitTheme,
-  options: RenderToolFooterOptions,
-  mode: IconMode,
-  owner?: object,
-): string {
-  syncElapsedTicker(options.context ?? {}, owner, options.status);
-  const elapsedMs = getToolElapsedMs(options);
-  if (isRunning(options.status)) return runningFooter(theme, elapsedMs, mode);
-  const footerStatus = TOOL_FOOTER_STATUS[options.status];
-  const glyph = footerStatus ? statusIcon(footerStatus, mode) : undefined;
-  const summary =
-    typeof options.summary === 'string'
-      ? [options.summary]
-      : (options.summary ?? []);
-  const parts = [
-    theme.fg(STATUS_ROLE[options.status], glyph ?? options.status),
-  ];
-  if (elapsedMs !== undefined) {
-    parts.push(
-      theme.fg('dim', formatDuration(Math.floor(elapsedMs / 1000) * 1000)),
-    );
-  }
-  if (glyph) {
-    parts.push(...summary.filter(Boolean).map((part) => theme.fg('dim', part)));
-  }
-  return parts.join(theme.fg('dim', ` ${icon('separator', mode)} `));
-}
-
-/** Theme primitives exposed structurally; producers never import this package. */
-export function createRenderKit(
-  owner: object,
-  resolveToolRenderers?: ThothRenderKit['resolveToolRenderers'],
-  mode: IconMode = 'nerd',
-): ThothRenderKit {
-  const separator = icon('separator', mode);
-  const ellipsis = icon('ellipsis', mode);
-  const ownedToolFooter: NonNullable<ThothRenderKit['toolFooter']> = (
-    theme,
-    options,
-  ) => toolFooter(theme, options, mode, owner);
-
-  return {
-    version: 1,
-    ...(resolveToolRenderers ? { resolveToolRenderers } : {}),
-    toolFooter: ownedToolFooter,
-    card(theme, options, width) {
-      if (options.footer !== undefined && options.context && options.status) {
-        syncElapsedTicker(options.context, owner, options.status);
-      }
-      return card(theme, options, width, ownedToolFooter, mode);
-    },
-    collapse(theme, rows, options = {}) {
-      const budget = Math.max(0, Math.floor(options.budget ?? 8));
-      if (options.expanded || rows.length <= budget) return [...rows];
-      return [
-        ...rows.slice(0, budget),
-        theme.fg(
-          'dim',
-          `${ellipsis} ${rows.length - budget} more lines ${separator} ${options.expandHint ?? 'ctrl+o to expand'}`,
-        ),
-      ];
-    },
-    cachedComponent,
-    indicator(theme, context = {}, options = {}) {
-      const status = options.status ?? indicatorStatus(context);
-      syncElapsedTicker(context, owner, status);
-      const running = isRunning(status);
-      const elapsedMs = getToolElapsedMs({ ...options, status, context });
-      const elapsed =
-        elapsedMs === undefined
-          ? ''
-          : formatDuration(
-              running ? Math.floor(elapsedMs / 1000) * 1000 : elapsedMs,
-            );
-      const frame = options.frame;
-      const spinner = frames('spinnerFrames', mode);
-      const workingGlyph =
-        frame !== undefined && Number.isFinite(frame)
-          ? spinner[
-              ((Math.floor(frame) % spinner.length) + spinner.length) %
-                spinner.length
-            ]
-          : workingFrame(elapsedMs, mode);
-      const glyph = running
-        ? theme.fg('accent', workingGlyph)
-        : statusGlyph(theme, status, mode);
-      const label = options.label ?? indicatorLabel(status);
-      const role = STATUS_ROLE[status];
-      return {
-        glyph,
-        elapsedMs,
-        elapsed,
-        text: running
-          ? ownedToolFooter(theme, { status, elapsedMs })
-          : [theme.fg(role, label), elapsed ? theme.fg('dim', elapsed) : '']
-              .filter(Boolean)
-              .join(theme.fg('dim', ` ${separator} `)),
-      };
-    },
-    icon(name) {
-      return name === 'spinnerFrames' || name === 'workingFrames'
-        ? frames(name, mode)
-        : icon(name, mode);
-    },
-    statusGlyph: (theme, status) => statusGlyph(theme, status, mode),
-    widgetHeading(theme, options, width) {
-      const title = theme.fg('toolTitle', options.title);
-      return truncateToWidth(
-        [
-          options.status
-            ? statusGlyph(theme, options.status, mode)
-            : theme.fg('accent', icon('ready', mode)),
-          theme.bold ? theme.bold(title) : title,
-          options.counts
-            ? theme.fg(
-                'dim',
-                `${options.counts.completed}/${options.counts.total}`,
-              )
-            : '',
-          options.suffix ? theme.fg('dim', options.suffix) : '',
-        ]
-          .filter(Boolean)
-          .join(' '),
-        Math.max(0, Math.floor(width)),
-        ellipsis,
-      );
-    },
-    treeRow(theme, options, width) {
-      const rail = `${'  '.repeat(Math.max(0, Math.floor(options.depth ?? 0)))}${options.last ? '└─' : '├─'} `;
-      return truncateToWidth(
-        [
-          theme.fg(
-            options.selected ? 'accent' : 'dim',
-            `${options.selected ? `${icon('selection', mode)} ` : '  '}${rail}`,
-          ),
-          options.status ? `${statusGlyph(theme, options.status, mode)} ` : '',
-          options.text,
-        ].join(''),
-        Math.max(0, Math.floor(width)),
-        ellipsis,
-      );
-    },
-    fg: (theme, role, text) => theme.fg(role, text),
-  };
-}

package/src/render-kit/working.ts

@@ -1,25 +0,0 @@
-import type { RenderKitTheme } from '@thoth-agents/pi-core';
-import type { IconMode } from '../shared/config.ts';
-import { formatDuration } from '../shared/duration.ts';
-import { frames, icon } from '../shared/icons.ts';
-
-export function workingFrame(elapsedMs = 0, mode: IconMode = 'nerd'): string {
-  const elapsed = Number.isFinite(elapsedMs) ? Math.max(0, elapsedMs) : 0;
-  const working = frames('workingFrames', mode);
-  return working[Math.floor(elapsed / 1000) % working.length];
-}
-
-export function runningFooter(
-  theme: RenderKitTheme,
-  elapsedMs: number | undefined,
-  mode: IconMode,
-): string {
-  return [
-    theme.fg('accent', workingFrame(elapsedMs, mode)),
-    elapsedMs === undefined
-      ? ''
-      : theme.fg('dim', formatDuration(Math.floor(elapsedMs / 1000) * 1000)),
-  ]
-    .filter(Boolean)
-    .join(theme.fg('dim', ` ${icon('separator', mode)} `));
-}

package/src/shared/cache.ts

@@ -1,21 +0,0 @@
-import type { Component } from '@earendil-works/pi-tui';
-
-/** Cache lines per instance and width; invalidate when render inputs change. */
-export function cachedComponent(
-  renderFn: (width: number) => string[],
-): Component {
-  const cache = new Map<number, string[]>();
-  return {
-    render(width: number): string[] {
-      let lines = cache.get(width);
-      if (lines === undefined) {
-        lines = renderFn(width);
-        cache.set(width, lines);
-      }
-      return lines;
-    },
-    invalidate(): void {
-      cache.clear();
-    },
-  };
-}

package/src/shared/config.ts

@@ -1,86 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { homedir } from 'node:os';
-import { join } from 'node:path';
-
-export type IconMode = 'nerd' | 'ascii';
-
-export const DEFAULT_RESPECT_PACKAGES: readonly string[] = [
-  'thoth-agents',
-  '@thoth-agents/*',
-  'thoth-mem',
-];
-
-export interface ThemeConfig {
-  icons: IconMode;
-  statusLine: {
-    enabled: boolean;
-    subscriptionProviders?: string[];
-  };
-  /** Omission enables the input box, preserving the legacy config shape. */
-  inputBox?: { enabled: boolean };
-  tools: { enabled: boolean; respectPackages?: string[] };
-  welcome: { enabled: boolean };
-}
-
-function asObject(value: unknown): Record<string, unknown> {
-  return value !== null && typeof value === 'object' && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function moduleEnabled(value: unknown): boolean {
-  const enabled = asObject(value).enabled;
-  return typeof enabled === 'boolean' ? enabled : true;
-}
-
-function parseSubscriptionProviders(value: unknown): string[] {
-  const obj = asObject(value);
-  const providers = obj.subscriptionProviders;
-  if (Array.isArray(providers)) {
-    return providers.filter(
-      (item): item is string =>
-        typeof item === 'string' && item.trim().length > 0,
-    );
-  }
-  return ['claude-bridge'];
-}
-
-function parseRespectPackages(value: unknown): string[] {
-  const packages = asObject(value).respectPackages;
-  return Array.isArray(packages) &&
-    packages.every(
-      (item): item is string =>
-        typeof item === 'string' && item.trim().length > 0,
-    )
-    ? packages
-    : [...DEFAULT_RESPECT_PACKAGES];
-}
-
-export function loadConfig(
-  configPath = join(
-    process.env.PI_CODING_AGENT_DIR || join(homedir(), '.pi', 'agent'),
-    'pi-thoth-theme.json',
-  ),
-): ThemeConfig {
-  let config: Record<string, unknown> = {};
-  try {
-    config = asObject(JSON.parse(readFileSync(configPath, 'utf8')));
-  } catch {
-    // Missing or malformed package configuration uses package defaults.
-  }
-  return {
-    icons: config.icons === 'ascii' ? 'ascii' : 'nerd',
-    ...(config.inputBox === undefined
-      ? {}
-      : { inputBox: { enabled: moduleEnabled(config.inputBox) } }),
-    statusLine: {
-      enabled: moduleEnabled(config.statusLine),
-      subscriptionProviders: parseSubscriptionProviders(config.statusLine),
-    },
-    tools: {
-      enabled: moduleEnabled(config.tools),
-      respectPackages: parseRespectPackages(config.tools),
-    },
-    welcome: { enabled: moduleEnabled(config.welcome) },
-  };
-}

package/src/shared/duration.ts

@@ -1 +0,0 @@
-export { formatDuration } from '@thoth-agents/pi-core';

package/src/shared/icons.ts

@@ -1,89 +0,0 @@
-import type {
-  RenderStatus,
-  SemanticFrameName,
-  SemanticGlyphName,
-} from '@thoth-agents/pi-core';
-import type { IconMode } from './config.ts';
-
-type Variants = Record<IconMode, string>;
-
-/** Theme-local tool icon that is not a pi-core semantic name. */
-export type ThemeIconName = SemanticGlyphName | 'powershell';
-export type StatusIconName = RenderStatus | 'warning';
-
-/** The single source of rendered semantic glyphs for the theme. */
-const ICONS: Record<ThemeIconName, Variants> = {
-  branch: { nerd: '\u{e0a0}', ascii: 'git' },
-  folder: { nerd: '\u{f07c}', ascii: 'dir' },
-  model: { nerd: '\u{f06a9}', ascii: '*' },
-  effort: { nerd: '\u{f09d1}', ascii: 'o' },
-  context: { nerd: '\u{f2db}', ascii: 'ctx' },
-  cost: { nerd: '\u{f155}', ascii: '$' },
-  tokensIn: { nerd: '\u{f062}', ascii: '^' },
-  tokensOut: { nerd: '\u{f063}', ascii: 'v' },
-  cache: { nerd: '\u{f01bc}', ascii: 'cache' },
-  throughput: { nerd: '\u{f04c5}', ascii: 'tok/s' },
-  agent: { nerd: '\u{f08c7}', ascii: '@' },
-  file: { nerd: '\u{f0214}', ascii: '[file]' },
-  tool: { nerd: '\u{f0ad}', ascii: '*' },
-  bash: { nerd: '\u{f489}', ascii: '$' },
-  powershell: { nerd: '\u{e70f}', ascii: 'PS' },
-  read: { nerd: '\u{f06e}', ascii: '[read]' },
-  write: { nerd: '\u{f0c7}', ascii: '[write]' },
-  edit: { nerd: '\u{f044}', ascii: '[edit]' },
-  search: { nerd: '\u{f002}', ascii: '?' },
-  separator: { nerd: '·', ascii: '|' },
-  ellipsis: { nerd: '…', ascii: '...' },
-  arrowUp: { nerd: '↑', ascii: '^' },
-  arrowDown: { nerd: '↓', ascii: 'v' },
-  arrowLeft: { nerd: '←', ascii: '<' },
-  arrowRight: { nerd: '→', ascii: '>' },
-  selection: { nerd: '›', ascii: '>' },
-  scrollUp: { nerd: '↑', ascii: '^' },
-  scrollDown: { nerd: '↓', ascii: 'v' },
-  ready: { nerd: '▲', ascii: '^' },
-};
-
-const FRAMES: Record<SemanticFrameName, Record<IconMode, readonly string[]>> = {
-  spinnerFrames: {
-    nerd: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
-    ascii: ['|', '/', '-', '\\'],
-  },
-  workingFrames: {
-    nerd: ['△', '◭', '▲', '◮'],
-    ascii: ['.', 'o', 'O', '0'],
-  },
-};
-
-const BAN: Variants = { nerd: '\uf05e', ascii: '/' };
-
-const STATUS_ICONS: Record<StatusIconName, Variants> = {
-  pending: { nerd: '\u{f10c}', ascii: '-' },
-  queued: { nerd: '\u{f051f}', ascii: '~' },
-  in_progress: { nerd: '◐', ascii: '*' },
-  running: { nerd: '◐', ascii: '*' },
-  completed: { nerd: '\u{f00c}', ascii: '+' },
-  failed: { nerd: '\u{f00d}', ascii: 'x' },
-  cancelled: BAN,
-  interrupted: BAN,
-  stopping: BAN,
-  deleted: BAN,
-  blocked: BAN,
-  warning: { nerd: '\u{f071}', ascii: '!' },
-  unknown: { nerd: '\u{f128}', ascii: '?' },
-};
-
-export function icon(name: ThemeIconName, mode: IconMode): string {
-  return ICONS[name][mode];
-}
-
-export function frames(
-  name: SemanticFrameName,
-  mode: IconMode,
-): readonly string[] {
-  return FRAMES[name][mode];
-}
-
-export function statusIcon(status: StatusIconName, mode: IconMode): string {
-  return STATUS_ICONS[status][mode];
-}

package/src/status-line/cost.ts

@@ -1,56 +0,0 @@
-import type { SessionEntry } from '@earendil-works/pi-coding-agent';
-import type { IconMode } from '../shared/config.ts';
-import { icon } from '../shared/icons.ts';
-
-export interface SessionEntriesSource {
-  getEntries(): readonly SessionEntry[];
-}
-
-/**
- * Aggregates cumulative cost across all session entries.
- * Evaluates assistant messages, tool results, compactions, branch summaries,
- * and usage entries.
- */
-export function calculateSessionCost(
-  source: readonly SessionEntry[] | SessionEntriesSource | undefined | null,
-): number {
-  if (!source) return 0;
-  const entries: readonly SessionEntry[] = Array.isArray(source)
-    ? source
-    : typeof (source as SessionEntriesSource).getEntries === 'function'
-      ? (source as SessionEntriesSource).getEntries()
-      : [];
-
-  let totalCost = 0;
-  for (const entry of entries) {
-    if (!entry) continue;
-    if (entry.type === 'message') {
-      const msg = entry.message;
-      if (
-        (msg?.role === 'assistant' || msg?.role === 'toolResult') &&
-        'usage' in msg &&
-        msg.usage?.cost?.total
-      ) {
-        totalCost += msg.usage.cost.total;
-      }
-    } else if (
-      (entry.type === 'branch_summary' ||
-        entry.type === 'compaction' ||
-        entry.type === 'usage') &&
-      'usage' in entry &&
-      entry.usage?.cost?.total
-    ) {
-      totalCost += entry.usage.cost.total;
-    }
-  }
-
-  return totalCost;
-}
-
-/**
- * Formats a cost number (e.g. 1.234) with 3 decimal places and icon prefix
- * ('$' in ascii mode, nerd dollar icon in nerd mode).
- */
-export function formatCost(cost: number, mode: IconMode): string {
-  return `${icon('cost', mode)}${cost.toFixed(3)}`;
-}