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

package/src/tools/write.ts

@@ -0,0 +1,188 @@
+import type {
+  AgentToolResult,
+  Theme,
+  ToolRenderResultOptions,
+} from '@earendil-works/pi-coding-agent';
+import { toolFooter } from '../render-kit/index.ts';
+import type { ThemeConfig } from '../shared/config.ts';
+import { icon as semanticIcon, statusIcon } from '../shared/icons.ts';
+import { getToolBorderTone } from './border.ts';
+import { createComponent, getResultText } from './box.ts';
+import { getFileIcon, getToolIcon } from './file-icons.ts';
+import {
+  formatDisplayPath,
+  hasToolResult,
+  renderFrameBottom,
+  renderFrameRow,
+  renderFrameTop,
+} from './frame.ts';
+import { type ElapsedRenderContext, syncElapsedTicker } from './ticker.ts';
+
+const COLLAPSED_WRITE_LINES = 6;
+
+interface WriteArgs {
+  path?: string;
+  file_path?: string;
+  content?: string;
+}
+
+interface WriteContext extends ElapsedRenderContext {
+  args?: unknown;
+  cwd?: string;
+  lastComponent?: { invalidate?: () => void };
+  state?: {
+    hasResult?: boolean;
+    callComponent?: { invalidate?: () => void };
+    [key: string]: unknown;
+  };
+}
+
+export function createCustomWriteTool(cwd: string, config: ThemeConfig) {
+  return {
+    renderShell: 'self' as const,
+    renderCall(rawArgs: unknown, theme: Theme, context: WriteContext) {
+      syncElapsedTicker(context);
+      const args = (rawArgs ?? {}) as WriteArgs;
+      const rawPath = String(args.path ?? args.file_path ?? '');
+      const filePath = formatDisplayPath(rawPath, context?.cwd ?? cwd);
+      const icon = getFileIcon(filePath, config.icons);
+      const writeIcon = getToolIcon('write', config.icons);
+      const borderTone = getToolBorderTone(context);
+
+      const comp = createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const footer =
+          context?.executionStarted && context.isPartial
+            ? toolFooter(theme, { status: 'running', context }, config.icons)
+            : undefined;
+        const title = `${theme.fg('accent', writeIcon)} ${theme.bold ? theme.bold(theme.fg('toolTitle', 'Write')) : theme.fg('toolTitle', 'Write')} ${theme.fg('accent', icon)} ${theme.fg('text', filePath)}`;
+
+        if (hasToolResult(context)) {
+          return renderFrameTop(theme, title, safeWidth, borderTone);
+        }
+
+        return [
+          ...renderFrameTop(theme, title, safeWidth, borderTone),
+          ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+        ];
+      });
+
+      if (context?.state) {
+        context.state.callComponent = comp;
+      }
+      return comp;
+    },
+
+    renderResult(
+      result: AgentToolResult<unknown>,
+      options: ToolRenderResultOptions,
+      theme: Theme,
+      context: WriteContext,
+    ) {
+      if (context?.state) {
+        context.state.hasResult = true;
+        if (
+          context.state.callComponent &&
+          typeof context.state.callComponent.invalidate === 'function'
+        ) {
+          context.state.callComponent.invalidate();
+        }
+      }
+      if (
+        context?.lastComponent &&
+        typeof context.lastComponent.invalidate === 'function'
+      ) {
+        context.lastComponent.invalidate();
+      }
+
+      const isErr = Boolean(context?.isError);
+      const status = options?.isPartial
+        ? 'running'
+        : isErr
+          ? 'failed'
+          : 'completed';
+      const footerOptions = {
+        status,
+        context: { ...context, isPartial: options?.isPartial },
+      } as const;
+      syncElapsedTicker(footerOptions.context);
+      const borderTone = getToolBorderTone({
+        isError: isErr,
+        isPartial: options?.isPartial,
+      });
+      const textOutput = getResultText(result);
+
+      if (isErr) {
+        return createComponent((width: number) => {
+          const safeWidth = Math.max(0, width);
+          const errText = `${theme.fg('error', `${statusIcon('warning', config.icons)} `)}${theme.fg('error', textOutput || 'Write failed')}`;
+          return [
+            ...renderFrameRow(theme, errText, safeWidth, borderTone),
+            ...renderFrameBottom(
+              theme,
+              toolFooter(theme, footerOptions, config.icons),
+              safeWidth,
+              borderTone,
+            ),
+          ];
+        });
+      }
+
+      // Check content lines from context args or result
+      const writeArgs = context?.args as WriteArgs | undefined;
+      const content = String(writeArgs?.content ?? '');
+      const contentLines = content ? content.split('\n') : [];
+      const lineCount = contentLines.length || 1;
+
+      return createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const addedStr = theme.fg('toolDiffAdded', `+${lineCount} lines`);
+        const footer = toolFooter(
+          theme,
+          {
+            ...footerOptions,
+            summary: [addedStr, '1 file'],
+          },
+          config.icons,
+        );
+
+        if (contentLines.length === 0) {
+          const defaultMsg = textOutput || 'File written';
+          return [
+            ...renderFrameRow(
+              theme,
+              theme.fg('toolOutput', defaultMsg),
+              safeWidth,
+              borderTone,
+            ),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        }
+
+        const visibleLines = options?.expanded
+          ? contentLines
+          : contentLines.slice(0, COLLAPSED_WRITE_LINES);
+        const bodyLines: string[] = visibleLines.map((l) =>
+          theme.fg('toolOutput', l),
+        );
+
+        if (!options?.expanded && contentLines.length > COLLAPSED_WRITE_LINES) {
+          const remaining = contentLines.length - COLLAPSED_WRITE_LINES;
+          bodyLines.push(
+            theme.fg(
+              'dim',
+              `${semanticIcon('ellipsis', config.icons)} ${remaining} more lines ${semanticIcon('separator', config.icons)} ctrl+o to expand`,
+            ),
+          );
+        }
+
+        return [
+          ...bodyLines.flatMap((l) =>
+            renderFrameRow(theme, l, safeWidth, borderTone),
+          ),
+          ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+        ];
+      });
+    },
+  };
+}

package/src/welcome/age.ts

@@ -0,0 +1,11 @@
+export function formatAge(fromMs: number, nowMs: number = Date.now()): string {
+  const seconds = Math.max(0, Math.round((nowMs - fromMs) / 1000));
+  if (seconds < 60) return 'just now';
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return `${Math.round(days / 30)}mo ago`;
+}

package/src/welcome/index.ts

@@ -0,0 +1,132 @@
+import type {
+  ExtensionAPI,
+  ExtensionContext,
+  Theme,
+} from '@earendil-works/pi-coding-agent';
+import { VERSION as PI_VERSION } from '@earendil-works/pi-coding-agent';
+import type { Component, TUI } from '@earendil-works/pi-tui';
+import { cachedComponent } from '../shared/cache.ts';
+import type { ThemeConfig } from '../shared/config.ts';
+import { type ActiveThemeLike, renderWelcomeHeader } from './render.ts';
+import {
+  collectStartupResources,
+  type StartupResourceOptions,
+  type WelcomeData,
+} from './resources.ts';
+
+export { formatAge } from './age.ts';
+export { getThothLogoLines, THOTH_WORDMARK } from './logo.ts';
+export { type ActiveThemeLike, renderWelcomeHeader } from './render.ts';
+export {
+  collectStartupResources,
+  fetchRecentSessions,
+  type StartupResourceOptions,
+  type WelcomeData,
+  type WelcomeProvider,
+  type WelcomeResourceCounts,
+  type WelcomeSession,
+} from './resources.ts';
+
+export class WelcomeComponent implements Component {
+  private data: WelcomeData;
+  private readonly renderCache: Component;
+  private _disposed = false;
+
+  constructor(
+    theme: ActiveThemeLike,
+    config: ThemeConfig,
+    initialData: WelcomeData,
+  ) {
+    this.data = initialData;
+    this.renderCache = cachedComponent((width) =>
+      renderWelcomeHeader(theme, this.data, width, config.icons),
+    );
+  }
+
+  get isDisposed(): boolean {
+    return this._disposed;
+  }
+
+  updateData(newData: WelcomeData): void {
+    if (this._disposed) return;
+    this.data = newData;
+    this.invalidate();
+  }
+
+  invalidate(): void {
+    this.renderCache.invalidate();
+  }
+
+  dispose(): void {
+    this._disposed = true;
+  }
+
+  render(width: number): string[] {
+    return this.renderCache.render(width);
+  }
+}
+
+export function registerWelcome(
+  pi: ExtensionAPI,
+  ctx: ExtensionContext,
+  config: ThemeConfig,
+  options?: StartupResourceOptions,
+): void {
+  if (!ctx.hasUI || !ctx.ui?.setHeader) return;
+
+  const initialData: WelcomeData = {
+    version: PI_VERSION,
+    model: ctx.model?.name || ctx.model?.id,
+    provider: ctx.model?.provider,
+    resources: {
+      tools:
+        typeof pi.getAllTools === 'function'
+          ? (pi.getAllTools()?.length ?? 0)
+          : typeof pi.getActiveTools === 'function'
+            ? (pi.getActiveTools()?.length ?? 0)
+            : undefined,
+      skills:
+        typeof pi.getCommands === 'function'
+          ? (pi
+              .getCommands()
+              ?.filter(
+                (c) =>
+                  c?.source === 'skill' ||
+                  (typeof c?.name === 'string' && c.name.startsWith('skill:')),
+              )?.length ?? undefined)
+          : undefined,
+      extensions: undefined,
+    },
+    providers: [],
+    sessions: [],
+  };
+
+  let activeComponent: WelcomeComponent | undefined;
+
+  ctx.ui.setHeader((tui: TUI, theme: Theme) => {
+    if (activeComponent && !activeComponent.isDisposed) {
+      activeComponent.dispose();
+    }
+
+    const activeTheme = theme as unknown as ActiveThemeLike;
+    const component = new WelcomeComponent(activeTheme, config, initialData);
+    activeComponent = component;
+
+    // Asynchronously populate full resource details and recent sessions
+    void collectStartupResources(pi, ctx, {
+      ...options,
+      iconMode: options?.iconMode ?? config.icons,
+    })
+      .then((fullData) => {
+        if (!component.isDisposed && activeComponent === component) {
+          component.updateData(fullData);
+          tui?.requestRender?.();
+        }
+      })
+      .catch(() => {
+        // Resource collection is best-effort and must never break startup
+      });
+
+    return component;
+  });
+}

package/src/welcome/logo.ts

@@ -0,0 +1,35 @@
+import type { IconMode } from '../shared/config.ts';
+
+export const THOTH_WORDMARK = 'T H O T H';
+
+export const THOTH_WORDMARK_BOX = [
+  '╔╦╗╦ ╦╔═╗╔╦╗╦ ╦',
+  ' ║ ╠═╣║ ║ ║ ╠═╣',
+  ' ╩ ╩ ╩╚═╝ ╩ ╩ ╩',
+] as const;
+
+export const THOTH_LOGO_NERD = [
+  '     ▄▄██████▄▄     ',
+  '   ▄██▀▀    ▀▀██▄   ',
+  '  ███  ▄████▄  ███  ',
+  ' ▐██▌ ▐██████▌ ▐██▌ ',
+  '  ███  ▀████▀  ███  ',
+  '   ▀██▄▄ ▀▀ ▄▄██▀   ',
+  '     ▀▀██████▀▀     ',
+  '         ██ ▀▄      ',
+  '         ██   ▀▄    ',
+] as const;
+
+export const THOTH_LOGO_ASCII = [
+  '      .-------.     ',
+  '     /  .---.  \\    ',
+  "   ,-' ( (o) )  `-. ",
+  "  <____ `---'  ____>",
+  "       `-------'    ",
+  '           | \\      ',
+  '           |  \\     ',
+] as const;
+
+export function getThothLogoLines(mode: IconMode): readonly string[] {
+  return mode === 'ascii' ? THOTH_LOGO_ASCII : THOTH_LOGO_NERD;
+}

package/src/welcome/render.ts

@@ -0,0 +1,323 @@
+import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
+import type { IconMode } from '../shared/config.ts';
+import { icon } from '../shared/icons.ts';
+import { getThothLogoLines } from './logo.ts';
+import type {
+  WelcomeData,
+  WelcomeProvider,
+  WelcomeSession,
+} from './resources.ts';
+
+export interface ActiveThemeLike {
+  fg?: (color: string, text: string) => string;
+  bold?: (text: string) => string;
+}
+
+function color(
+  theme: ActiveThemeLike | undefined,
+  token: string,
+  text: string,
+): string {
+  if (!text) return '';
+  if (theme?.fg) {
+    try {
+      return theme.fg(token, text);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}
+
+function bold(theme: ActiveThemeLike | undefined, text: string): string {
+  if (!text) return '';
+  if (theme?.bold) {
+    try {
+      return theme.bold(text);
+    } catch {
+      return text;
+    }
+  }
+  return text;
+}
+
+function separator(mode: IconMode): string {
+  const pad = mode === 'ascii' ? ' ' : '  ';
+  return `${pad}${icon('separator', mode)}${pad}`;
+}
+
+function padEnd(text: string, width: number, ellipsis: string): string {
+  const current = visibleWidth(text);
+  if (current > width) return truncateToWidth(text, width, ellipsis);
+  return text + ' '.repeat(Math.max(0, width - current));
+}
+
+function center(text: string, width: number, ellipsis: string): string {
+  const current = visibleWidth(text);
+  if (current > width) return truncateToWidth(text, width, ellipsis);
+  const left = Math.floor((width - current) / 2);
+  const right = width - current - left;
+  return ' '.repeat(left) + text + ' '.repeat(right);
+}
+
+function formatResourceSummary(
+  theme: ActiveThemeLike | undefined,
+  resources: WelcomeData['resources'],
+  sep: string,
+): string {
+  const parts: string[] = [];
+  const cText = (s: string) => color(theme, 'text', s);
+  const cSuccess = (s: string) => color(theme, 'success', s);
+  const cDim = (s: string) => color(theme, 'dim', s);
+
+  if (typeof resources.tools === 'number') {
+    parts.push(cText('tools ') + cSuccess(String(resources.tools)));
+  }
+  if (typeof resources.skills === 'number') {
+    parts.push(cText('skills ') + cSuccess(String(resources.skills)));
+  }
+  if (typeof resources.extensions === 'number') {
+    parts.push(cText('exts ') + cSuccess(String(resources.extensions)));
+  }
+
+  return parts.join(cDim(sep));
+}
+
+function buildTips(
+  theme: ActiveThemeLike | undefined,
+  mode: IconMode,
+): string[] {
+  const bullet = mode === 'ascii' ? '*' : '•';
+  const sep = separator(mode);
+  const cDim = (s: string) => color(theme, 'dim', s);
+  const cMuted = (s: string) => color(theme, 'muted', s);
+  return [
+    ` ${cDim(bullet)} ${cMuted('/ for commands')}${cDim(sep)}${cMuted('! for bash')}`,
+  ];
+}
+
+function buildProviderRows(
+  theme: ActiveThemeLike | undefined,
+  providers: readonly WelcomeProvider[],
+  mode: IconMode,
+  maxWidth: number,
+): string[] {
+  const bullet = mode === 'ascii' ? '*' : '●';
+  const cSuccess = (s: string) => color(theme, 'success', s);
+  const cMuted = (s: string) => color(theme, 'muted', s);
+  const cDim = (s: string) => color(theme, 'dim', s);
+
+  if (providers.length === 0) {
+    return [` ${cDim('No tool providers')}`];
+  }
+
+  return providers.slice(0, 4).map((p) => {
+    const mark = cSuccess(bullet);
+    const name = cMuted(p.name);
+    const prefixWidth = visibleWidth(` ${bullet} ${p.name}: `);
+    const detailWidth = Math.max(1, maxWidth - prefixWidth);
+    const detail = cDim(
+      truncateToWidth(p.detail, detailWidth, icon('ellipsis', mode)),
+    );
+    return ` ${mark} ${name} ${detail}`;
+  });
+}
+
+function buildSessionRows(
+  theme: ActiveThemeLike | undefined,
+  sessions: readonly WelcomeSession[],
+  mode: IconMode,
+  maxWidth: number,
+): string[] {
+  const bullet = mode === 'ascii' ? '*' : '•';
+  const cDim = (s: string) => color(theme, 'dim', s);
+  const cMuted = (s: string) => color(theme, 'muted', s);
+
+  if (sessions.length === 0) {
+    return [` ${cDim('No recent sessions')}`];
+  }
+
+  return sessions.slice(0, 4).map((s) => {
+    const age = ` (${s.timeAgo})`;
+    const ageWidth = visibleWidth(age);
+    const bulletPrefix = ` ${bullet} `;
+    const maxNameWidth = Math.max(
+      1,
+      maxWidth - visibleWidth(bulletPrefix) - ageWidth,
+    );
+    const name = cMuted(
+      truncateToWidth(s.name, maxNameWidth, icon('ellipsis', mode)),
+    );
+    return ` ${cDim(bullet)} ${name}${cDim(age)}`;
+  });
+}
+
+export function renderWelcomeHeader(
+  theme: ActiveThemeLike | undefined,
+  data: WelcomeData,
+  width: number,
+  mode: IconMode = 'nerd',
+): string[] {
+  if (width <= 0) return [];
+
+  const isAscii = mode === 'ascii';
+  const cAccent = (s: string) => color(theme, 'accent', s);
+  const cDim = (s: string) => color(theme, 'dim', s);
+  const cMuted = (s: string) => color(theme, 'muted', s);
+  const cText = (s: string) => color(theme, 'text', s);
+
+  const bTl = isAscii ? '+' : '╭';
+  const bTr = isAscii ? '+' : '╮';
+  const bBl = isAscii ? '+' : '╰';
+  const bBr = isAscii ? '+' : '╯';
+  const bV = isAscii ? '|' : '│';
+  const bH = isAscii ? '-' : '─';
+  const sep = separator(mode);
+  const ellipsis = icon('ellipsis', mode);
+  const mark = isAscii ? '*' : '◆';
+
+  // Wide layout (2 columns)
+  if (width >= 64) {
+    const boxWidth = width;
+    const contentWidth = boxWidth - 3; // left bV, middle bV, right bV
+    const logoLines = getThothLogoLines(mode);
+    const logoWidth = Math.max(...logoLines.map((l) => visibleWidth(l)));
+    const leftColumn = Math.max(logoWidth + 2, 24);
+    const rightColumn = contentWidth - leftColumn;
+
+    if (rightColumn >= 30) {
+      // Build left column
+      const leftRows: string[] = [
+        '',
+        center(bold(theme, cAccent('T H O T H')), leftColumn, ellipsis),
+        '',
+        ...logoLines.map((line) => center(cAccent(line), leftColumn, ellipsis)),
+        '',
+        center(cText(data.model || 'pi-coding-agent'), leftColumn, ellipsis),
+        center(cDim(data.provider || ''), leftColumn, ellipsis),
+      ];
+
+      // Build right column
+      const resourceSummary = formatResourceSummary(theme, data.resources, sep);
+      const rightDivider = ` ${cDim(bH.repeat(Math.max(1, rightColumn - 2)))}`;
+      const resourceHeader = resourceSummary
+        ? ` ${cAccent(mark)} ${bold(theme, cAccent('Resources'))}  ${resourceSummary}`
+        : ` ${cAccent(mark)} ${bold(theme, cAccent('Resources'))}`;
+
+      const rightRows: string[] = [
+        resourceHeader,
+        rightDivider,
+        ` ${cAccent(mark)} ${bold(theme, cAccent('Tool Providers'))}`,
+        ...buildProviderRows(theme, data.providers, mode, rightColumn),
+        rightDivider,
+        ` ${cAccent(mark)} ${bold(theme, cAccent('Recent Sessions'))}`,
+        ...buildSessionRows(theme, data.sessions, mode, rightColumn),
+        rightDivider,
+        ...buildTips(theme, mode),
+      ];
+
+      const maxRows = Math.max(leftRows.length, rightRows.length);
+      while (leftRows.length < maxRows) leftRows.push('');
+      while (rightRows.length < maxRows) rightRows.push('');
+
+      const label = ` v${data.version} `;
+      const lead = bH.repeat(3);
+      const remainingFill = Math.max(
+        0,
+        boxWidth - 2 - visibleWidth(lead) - visibleWidth(label),
+      );
+      const topBorder = `${cDim(bTl)}${cDim(lead)}${cAccent(label)}${cDim(bH.repeat(remainingFill))}${cDim(bTr)}`;
+      const bottomBorder = `${cDim(bBl)}${cDim(bH.repeat(boxWidth - 2))}${cDim(bBr)}`;
+
+      const out: string[] = [topBorder];
+      for (let i = 0; i < maxRows; i++) {
+        const leftCell = padEnd(leftRows[i] ?? '', leftColumn, ellipsis);
+        const rightCell = padEnd(rightRows[i] ?? '', rightColumn, ellipsis);
+        out.push(`${cDim(bV)}${leftCell}${cDim(bV)}${rightCell}${cDim(bV)}`);
+      }
+      out.push(bottomBorder);
+
+      return out.map((line) =>
+        visibleWidth(line) <= width
+          ? line
+          : truncateToWidth(line, width, ellipsis),
+      );
+    }
+  }
+
+  // Medium layout (single column boxed)
+  if (width >= 42) {
+    const boxWidth = width;
+    const innerWidth = boxWidth - 2;
+    const label = ` Thoth v${data.version} `;
+    const lead = bH.repeat(2);
+    const remainingFill = Math.max(
+      0,
+      boxWidth - 2 - visibleWidth(lead) - visibleWidth(label),
+    );
+    const topBorder = `${cDim(bTl)}${cDim(lead)}${cAccent(label)}${cDim(bH.repeat(remainingFill))}${cDim(bTr)}`;
+    const bottomBorder = `${cDim(bBl)}${cDim(bH.repeat(boxWidth - 2))}${cDim(bBr)}`;
+
+    const divider = `${cDim(bV)} ${cDim(bH.repeat(Math.max(1, innerWidth - 2)))} ${cDim(bV)}`;
+
+    const resourceSummary = formatResourceSummary(theme, data.resources, sep);
+
+    const content: string[] = [
+      center(bold(theme, cAccent('T H O T H')), innerWidth, ellipsis),
+      center(cText(data.model || 'pi-coding-agent'), innerWidth, ellipsis),
+      divider,
+      ...(resourceSummary
+        ? [` ${cAccent(mark)} ${resourceSummary}`, divider]
+        : []),
+      ` ${cAccent(mark)} ${bold(theme, cAccent('Recent Sessions'))}`,
+      ...buildSessionRows(theme, data.sessions, mode, innerWidth),
+    ];
+
+    const out: string[] = [topBorder];
+    for (const row of content) {
+      if (row === divider) {
+        out.push(divider);
+      } else {
+        out.push(`${cDim(bV)}${padEnd(row, innerWidth, ellipsis)}${cDim(bV)}`);
+      }
+    }
+    out.push(bottomBorder);
+
+    return out.map((line) =>
+      visibleWidth(line) <= width
+        ? line
+        : truncateToWidth(line, width, ellipsis),
+    );
+  }
+
+  // Narrow layout (minimal text lines without outer box)
+  const lines: string[] = [
+    cAccent(bold(theme, `Thoth v${data.version}`)),
+    cText(truncateToWidth(data.model || 'ready', width, ellipsis)),
+  ];
+
+  const narrowParts: string[] = [];
+  if (typeof data.resources.tools === 'number') {
+    narrowParts.push(`tools:${data.resources.tools}`);
+  }
+  if (typeof data.resources.skills === 'number') {
+    narrowParts.push(`skills:${data.resources.skills}`);
+  }
+  if (typeof data.resources.extensions === 'number') {
+    narrowParts.push(`exts:${data.resources.extensions}`);
+  }
+  if (narrowParts.length > 0) {
+    lines.push(cDim(narrowParts.join(' ')));
+  }
+
+  if (data.sessions.length > 0) {
+    const s = data.sessions[0];
+    if (s) {
+      lines.push(cMuted(truncateToWidth(`* ${s.name}`, width, ellipsis)));
+    }
+  }
+
+  return lines.map((line) =>
+    visibleWidth(line) <= width ? line : truncateToWidth(line, width, ellipsis),
+  );
+}