@thoth-agents/pi-thoth-theme 0.0.0-stage → 0.1.0

package/src/input-box/frame.ts

@@ -0,0 +1,182 @@
+import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
+import type { IconMode } from '../shared/config.ts';
+import { icon } from '../shared/icons.ts';
+import type { ActiveThemeLike } from '../status-line/layout.ts';
+import { type BreathingFrame, colorBreathingBorder } from './gradient.ts';
+
+function muted(theme: ActiveThemeLike, text: string): string {
+  return theme.fg?.('muted', text) ?? text;
+}
+
+function colorBorder(
+  theme: ActiveThemeLike,
+  text: string,
+  frame?: BreathingFrame,
+): string {
+  return frame ? colorBreathingBorder(text, frame) : muted(theme, text);
+}
+
+/** Editor scroll indicator, `↑/↓ N more` or `^/v N more` by icon mode. */
+export function scrollLabel(
+  direction: 'up' | 'down',
+  hiddenLineCount: number,
+  mode: IconMode = 'nerd',
+): string {
+  const arrow = icon(direction === 'up' ? 'scrollUp' : 'scrollDown', mode);
+  return `${arrow} ${hiddenLineCount} more`;
+}
+
+export function inputLabelWidth(
+  width: number,
+  hiddenLineCount = 0,
+  mode: IconMode = 'nerd',
+): number {
+  const overflowWidth =
+    hiddenLineCount > 0
+      ? visibleWidth(scrollLabel('up', hiddenLineCount, mode)) + 3
+      : 0;
+  return Math.max(0, Math.floor(width) - 6 - overflowWidth);
+}
+
+/** Left pieces keep priority first; right variants run richest to most compact. */
+export interface BorderRegions {
+  left?: readonly string[];
+  right?: readonly string[];
+}
+
+// `╭─ ` + left + ` ─…─ ` + right + ` ─╮`: the rule keeps at least one cell.
+const LEFT_ONLY_OVERHEAD = 6;
+const LEFT_RIGHT_OVERHEAD = 9;
+const RIGHT_ONLY_OVERHEAD = 6;
+
+function renderBorder(
+  width: number,
+  theme: ActiveThemeLike,
+  regions: BorderRegions,
+  overflow: string,
+  capLeft: string,
+  capRight: string,
+  frame?: BreathingFrame,
+): string {
+  width = Math.max(0, Math.floor(width));
+  const border = (text: string) => colorBorder(theme, text, frame);
+  const pieces = (regions.left ?? []).filter((piece) => visibleWidth(piece));
+  const rights = (regions.right ?? []).filter((piece) => visibleWidth(piece));
+  const plain = () =>
+    truncateToWidth(
+      border(`${capLeft}${'─'.repeat(Math.max(0, width - 2))}${capRight}`),
+      width,
+      '',
+    );
+  if (width <= 5 || (!pieces.length && !overflow && !rights.length))
+    return plain();
+
+  const withOverflow = (text: string) =>
+    !overflow
+      ? text
+      : !text
+        ? muted(theme, overflow)
+        : frame
+          ? `${text}${border(' ─ ')}${muted(theme, overflow)}`
+          : `${text}${muted(theme, ` ─ ${overflow}`)}`;
+  const leftWith = (count: number) =>
+    withOverflow(pieces.slice(0, count).join(' '));
+
+  // Degrade right first (compact, then drop), then left secondaries.
+  const full = leftWith(pieces.length);
+  const fullWidth = visibleWidth(full);
+  for (const right of rights) {
+    const rightWidth = visibleWidth(right);
+    if (!full) {
+      if (rightWidth > width - RIGHT_ONLY_OVERHEAD) continue;
+      const dashes = width - 5 - rightWidth;
+      return `${border(`${capLeft}${'─'.repeat(dashes)} `)}${right}${border(` ─${capRight}`)}`;
+    }
+    if (fullWidth + rightWidth > width - LEFT_RIGHT_OVERHEAD) continue;
+    const dashes = width - 8 - fullWidth - rightWidth;
+    return `${border(`${capLeft}─ `)}${full}${border(` ${'─'.repeat(dashes)} `)}${right}${border(` ─${capRight}`)}`;
+  }
+  if (!full) return plain();
+
+  const labelWidth = width - LEFT_ONLY_OVERHEAD;
+  let label: string | undefined;
+  for (let count = pieces.length; count >= 1; count--) {
+    const candidate = leftWith(count);
+    if (visibleWidth(candidate) <= labelWidth) {
+      label = candidate;
+      break;
+    }
+  }
+  if (label === undefined) {
+    if (overflow) {
+      const statusWidth = labelWidth - visibleWidth(overflow) - 3;
+      const status =
+        statusWidth > 0 && pieces.length
+          ? truncateToWidth(pieces[0], statusWidth, '')
+          : '';
+      label = withOverflow(visibleWidth(status) ? status : '');
+    } else {
+      label = truncateToWidth(pieces[0], labelWidth, '');
+    }
+  }
+  const fitted = truncateToWidth(label, labelWidth, '');
+  const dashes = width - visibleWidth(fitted) - 5;
+  return `${border(`${capLeft}─ `)}${fitted}${border(` ${'─'.repeat(dashes)}${capRight}`)}`;
+}
+
+export function renderInputTop(
+  width: number,
+  theme: ActiveThemeLike,
+  regions: BorderRegions,
+  hiddenLineCount = 0,
+  frame?: BreathingFrame,
+  mode: IconMode = 'nerd',
+): string {
+  const overflow =
+    hiddenLineCount > 0 ? scrollLabel('up', hiddenLineCount, mode) : '';
+  return renderBorder(width, theme, regions, overflow, '╭', '╮', frame);
+}
+
+export function renderInputBottom(
+  width: number,
+  theme: ActiveThemeLike,
+  regions: BorderRegions,
+  hiddenLineCount = 0,
+  frame?: BreathingFrame,
+  mode: IconMode = 'nerd',
+): string {
+  const overflow =
+    hiddenLineCount > 0 ? scrollLabel('down', hiddenLineCount, mode) : '';
+  return renderBorder(width, theme, regions, overflow, '╰', '╯', frame);
+}
+
+export function wrapContentRow(
+  line: string,
+  width: number,
+  theme: ActiveThemeLike,
+  frame?: BreathingFrame,
+): string {
+  width = Math.max(0, Math.floor(width));
+  if (width < 2)
+    return truncateToWidth(colorBorder(theme, '││', frame), width, '');
+  const content = truncateToWidth(line, width - 2, '', true);
+  const side = colorBorder(theme, '│', frame);
+  return `${side}${content}${side}`;
+}
+
+export function renderPlaceholder(
+  line: string,
+  width: number,
+  theme: ActiveThemeLike,
+  text: string,
+): string {
+  if (text !== '') return line;
+  const cursor = '\x1b[7m \x1b[0m';
+  const cursorStart = line.indexOf(cursor);
+  if (cursorStart < 0) return line;
+  const prefix = line.slice(0, cursorStart + cursor.length);
+  const available = Math.max(0, width - visibleWidth(prefix));
+  const placeholder = truncateToWidth('type or / for commands', available, '');
+  const padding = ' '.repeat(available - visibleWidth(placeholder));
+  return prefix + (theme.fg?.('dim', placeholder) ?? placeholder) + padding;
+}

package/src/input-box/gradient.ts

@@ -0,0 +1,92 @@
+import {
+  foregroundAnsi,
+  getTerminalColorMode,
+  mixColors,
+  parseColor,
+  stripTerminalSequences,
+  styleText,
+  type TerminalColorMode,
+} from '@earendil-works/pi-tui';
+import { frames } from '../shared/icons.ts';
+
+const GOLD = parseColor('#D4AF37');
+const BRIGHT_GOLD = parseColor('#F2C94C');
+const DIM = parseColor('#736850');
+const MUTED = parseColor('#A89A78');
+const BREATHING_CYCLE_MS = 2400;
+const SHIMMER_LAP_MS = 2400;
+const SHIMMER_BAND_CELLS = 3;
+
+export interface BreathingFrame {
+  now: number;
+  foreground: string;
+  mode: TerminalColorMode;
+}
+
+export function createBreathingFrame(
+  now: number,
+  mode = getTerminalColorMode(),
+): BreathingFrame {
+  const phase = ((now % BREATHING_CYCLE_MS) / BREATHING_CYCLE_MS) * 2 * Math.PI;
+  const intensity = (1 - Math.cos(phase)) / 2;
+  const color =
+    intensity <= 0.5
+      ? mixColors(DIM, GOLD, intensity * 2, 'srgb')
+      : mixColors(GOLD, BRIGHT_GOLD, (intensity - 0.5) * 2, 'srgb');
+  return { now, foreground: foregroundAnsi(color, mode), mode };
+}
+
+// Only call with generated border segments, never label or editor content.
+export function colorBreathingBorder(
+  text: string,
+  frame: BreathingFrame,
+): string {
+  return `${frame.foreground}${text}\x1b[39m`;
+}
+
+export function renderWorkingIndicator(
+  native: string,
+  frame: BreathingFrame,
+  styleMuted: (text: string) => string,
+  glyphs: readonly string[] = frames('workingFrames', 'nerd'),
+): string {
+  const plain = stripTerminalSequences(native);
+  const glyph = glyphs.find(
+    (candidate) =>
+      plain.startsWith(candidate) &&
+      (plain.length === candidate.length ||
+        /^\s/u.test(plain.slice(candidate.length))),
+  );
+  const spacing =
+    glyph === undefined
+      ? ''
+      : (/^\s*/u.exec(plain.slice(glyph.length))?.[0] ?? '');
+  const prefix =
+    glyph === undefined ? '' : `${frame.foreground}${glyph}${spacing}`;
+  const letters = Array.from(
+    plain.slice(glyph === undefined ? 0 : glyph.length + spacing.length),
+  );
+  const head =
+    ((frame.now % SHIMMER_LAP_MS) / SHIMMER_LAP_MS) *
+      (letters.length + SHIMMER_BAND_CELLS * 2) -
+    SHIMMER_BAND_CELLS;
+  const label = letters
+    .map((letter, index) => {
+      const intensity = Math.max(
+        0,
+        1 - Math.abs(index - head) / SHIMMER_BAND_CELLS,
+      );
+      return intensity === 0
+        ? styleMuted(letter)
+        : styleText(
+            letter,
+            {
+              fg: mixColors(MUTED, BRIGHT_GOLD, intensity, 'srgb'),
+              bold: intensity >= 0.65,
+            },
+            frame.mode,
+          );
+    })
+    .join('');
+  return prefix + label;
+}

package/src/input-box/state.ts

@@ -0,0 +1,90 @@
+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

@@ -0,0 +1,305 @@
+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

@@ -0,0 +1,25 @@
+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)} `));
+}