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

package/src/status-line/layout.ts

@@ -0,0 +1,272 @@
+import { isAbsolute, relative, resolve, sep } from 'node:path';
+import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
+import type { IconMode } from '../shared/config.ts';
+import { icon } from '../shared/icons.ts';
+import type { SessionTokenTotals } from './tokens.ts';
+
+export interface ContextUsageInfo {
+  percent?: number | null;
+  tokens?: number | null;
+  contextWindow?: number;
+}
+
+export interface StatusData {
+  modelName?: string;
+  modelId?: string;
+  thinkingLevel?: string;
+  gitBranch?: string | null;
+  /** Working directory formatted for display, including home abbreviation. */
+  cwd?: string;
+  contextTokens?: number | null;
+  contextWindow?: number;
+  contextPercent?: number | null;
+  /** Parent session cost; subagent cost is accounted for separately. */
+  cost?: number;
+  subagentCost?: number;
+  isSubscription?: boolean;
+}
+
+export interface ActiveThemeLike {
+  fg?: (token: string, text: string) => string;
+}
+
+export interface RenderStatusLineOptions {
+  width: number;
+  mode: IconMode;
+  theme?: ActiveThemeLike;
+}
+
+function themeFg(
+  theme: ActiveThemeLike | undefined,
+  token: string,
+  text: string,
+): string {
+  return theme?.fg ? theme.fg(token, text) : text;
+}
+
+export function formatCwd(cwd: string, home?: string): string {
+  if (!home) return cwd;
+  const relativeToHome = relative(resolve(home), resolve(cwd));
+  if (
+    relativeToHome === '..' ||
+    relativeToHome.startsWith(`..${sep}`) ||
+    isAbsolute(relativeToHome)
+  ) {
+    return cwd;
+  }
+  return relativeToHome === '' ? '~' : `~${sep}${relativeToHome}`;
+}
+
+export function formatTokens(count: number): string {
+  if (count < 1000) return count.toString();
+  if (count < 1000000) {
+    const k = (count / 1000).toFixed(1).replace(/\.0$/, '');
+    return `${k}K`;
+  }
+  const m = (count / 1000000).toFixed(1).replace(/\.0$/, '');
+  return `${m}M`;
+}
+
+function thinkingToken(level: string): string {
+  const cap = level.charAt(0).toUpperCase() + level.slice(1);
+  return `thinking${cap}`;
+}
+
+export interface SegmentOptions {
+  mode?: IconMode;
+  theme?: ActiveThemeLike;
+}
+
+/** Git branch piece for the input-box border; empty when no branch. */
+export function formatBranchSegment(
+  data: StatusData,
+  { mode = 'nerd', theme }: SegmentOptions = {},
+): string {
+  if (!data.gitBranch) return '';
+  return `${themeFg(theme, 'dim', icon('separator', mode))} ${themeFg(
+    theme,
+    'success',
+    `${icon('branch', mode)} ${data.gitBranch}`,
+  )}`;
+}
+
+/** Model then optional effort pieces; each piece starts a droppable region. */
+export function formatModelSegments(
+  data: StatusData,
+  { mode = 'nerd', theme }: SegmentOptions = {},
+): string[] {
+  const pieces: string[] = [];
+  const model = data.modelName || data.modelId;
+  if (model) {
+    pieces.push(themeFg(theme, 'mdLink', `${icon('model', mode)} ${model}`));
+  }
+  const level = data.thinkingLevel;
+  if (level && level !== 'off') {
+    const label =
+      level === 'minimal' ? 'min' : level === 'medium' ? 'med' : level;
+    const effort = themeFg(
+      theme,
+      thinkingToken(level),
+      `${icon('effort', mode)} ${label}`,
+    );
+    pieces.push(
+      model
+        ? `${themeFg(theme, 'dim', icon('separator', mode))} ${effort}`
+        : effort,
+    );
+  }
+  return pieces;
+}
+
+/** Working directory with folder icon, richest first: full path then `…/leaf`. */
+export function formatCwdSegments(
+  data: StatusData,
+  { mode = 'nerd', theme }: SegmentOptions = {},
+): string[] {
+  const cwd = data.cwd;
+  if (!cwd) return [];
+  const folder = icon('folder', mode);
+  const variants = [`${folder} ${cwd}`];
+  const leaf = cwd.split(/[/\\]/).filter(Boolean).pop();
+  const separator = cwd.includes('\\') && !cwd.includes('/') ? '\\' : '/';
+  const isDriveRoot = leaf !== undefined && /^[A-Za-z]:$/.test(leaf);
+  if (leaf && leaf !== cwd && leaf !== '~' && !isDriveRoot) {
+    variants.push(`${folder} ${icon('ellipsis', mode)}${separator}${leaf}`);
+  }
+  return variants.map((text) => themeFg(theme, 'muted', text));
+}
+
+function contextBar(
+  percent: number,
+  isAscii: boolean,
+  theme: ActiveThemeLike | undefined,
+): { bar: string; pct: string } {
+  let token = 'success';
+  if (percent >= 90) token = 'error';
+  else if (percent >= 70) token = 'warning';
+  const filled = Math.min(10, Math.max(0, Math.round((percent / 100) * 10)));
+  const fillChar = isAscii ? '#' : '█';
+  const emptyChar = isAscii ? '-' : '░';
+  const dim = (text: string) => themeFg(theme, 'dim', text);
+  return {
+    bar: `${dim('[')}${themeFg(theme, token, fillChar.repeat(filled))}${dim(
+      emptyChar.repeat(10 - filled),
+    )}${dim(']')}`,
+    pct: themeFg(theme, token, `${Math.round(percent)}%`),
+  };
+}
+
+/**
+ * Context usage, richest first: bar + percent + tokens, percent + tokens,
+ * tokens. Unavailable usage collapses to a dash.
+ */
+export function formatContextSegments(
+  data: StatusData,
+  { mode = 'nerd', theme }: SegmentOptions = {},
+): string[] {
+  const contextIcon = themeFg(theme, 'muted', icon('context', mode));
+  const windowText = data.contextWindow
+    ? `/${formatTokens(data.contextWindow)}`
+    : '';
+  const hasTokens =
+    data.contextTokens !== null && data.contextTokens !== undefined;
+  const hasPercent =
+    data.contextPercent !== null && data.contextPercent !== undefined;
+  const tokens = themeFg(
+    theme,
+    'muted',
+    `${hasTokens ? formatTokens(data.contextTokens as number) : '—'}${windowText}`,
+  );
+  if (!hasPercent) {
+    const hasAny =
+      hasTokens ||
+      windowText !== '' ||
+      data.contextPercent !== undefined ||
+      data.contextTokens !== undefined;
+    return hasAny
+      ? [`${contextIcon} ${tokens}`]
+      : [themeFg(theme, 'muted', '—')];
+  }
+  const { bar, pct } = contextBar(
+    data.contextPercent as number,
+    mode === 'ascii',
+    theme,
+  );
+  return [
+    `${contextIcon} ${bar} ${pct} ${tokens}`,
+    `${contextIcon} ${pct} ${tokens}`,
+    `${contextIcon} ${tokens}`,
+  ];
+}
+
+export interface FooterData extends StatusData {
+  tokenTotals?: SessionTokenTotals;
+  /** `null` means not yet measured; `undefined` hides the segment. */
+  tokensPerSecond?: number | null;
+}
+
+function formatRate(rate: number | null): string {
+  if (rate === null || !Number.isFinite(rate)) return '—';
+  return rate < 10 ? rate.toFixed(1) : Math.round(rate).toString();
+}
+
+/**
+ * One-row footer below the editor: cost, total input/output, cache hit %, tok/s.
+ * Lowest priority drops first: tok/s, cache, tokens; cost truncates last.
+ */
+export function renderStatusLine(
+  data: FooterData,
+  options: RenderStatusLineOptions,
+): string {
+  const { width, mode, theme } = options;
+  if (width <= 0) return '';
+
+  const sep = ` ${themeFg(theme, 'border', icon('separator', mode))} `;
+  const segments: string[] = [];
+
+  if (data.cost !== undefined) {
+    const total = data.cost + (data.subagentCost ?? 0);
+    segments.push(
+      themeFg(
+        theme,
+        'accent',
+        `${icon('cost', mode)}${mode === 'ascii' ? '' : ' '}${total.toFixed(3)}${data.isSubscription ? ' (sub)' : ''}`,
+      ),
+    );
+  }
+  const totals = data.tokenTotals;
+  if (totals) {
+    const totalInput = totals.input + totals.cacheRead + totals.cacheWrite;
+    const cacheHitRatio =
+      totalInput === 0
+        ? '—'
+        : `${Math.round((totals.cacheRead / totalInput) * 100)}%`;
+    const up = icon('tokensIn', mode);
+    const down = icon('tokensOut', mode);
+    segments.push(
+      themeFg(
+        theme,
+        'muted',
+        `${up}${formatTokens(totalInput)} ${down}${formatTokens(totals.output)}`,
+      ),
+      themeFg(theme, 'muted', `${icon('cache', mode)} ${cacheHitRatio}`),
+    );
+  }
+  if (data.tokensPerSecond !== undefined) {
+    segments.push(
+      themeFg(
+        theme,
+        'muted',
+        mode === 'ascii'
+          ? `${formatRate(data.tokensPerSecond)} ${icon('throughput', mode)}`
+          : `${icon('throughput', mode)} ${formatRate(data.tokensPerSecond)} tok/s`,
+      ),
+    );
+  }
+
+  for (let count = segments.length; count >= 1; count--) {
+    const line = segments.slice(0, count).join(sep);
+    if (visibleWidth(line) <= width) return line;
+  }
+  return segments.length ? truncateToWidth(segments[0], width, '') : '';
+}

package/src/status-line/snapshot.ts

@@ -0,0 +1,11 @@
+import type { StatusData } from './layout.ts';
+import type { SessionTokenTotals } from './tokens.ts';
+
+/** Shared nonvisual data for the footer and in-place editor decoration. */
+export interface StatusSnapshot extends StatusData {
+  readonly tokenTotals: SessionTokenTotals;
+  /** Runtime-measured main-session output tokens per generation second. */
+  readonly tokensPerSecond: number | null;
+}
+
+export type StatusSnapshotProvider = () => Readonly<StatusSnapshot>;

package/src/status-line/throughput.ts

@@ -0,0 +1,61 @@
+export interface GenerationEvent {
+  readonly type: 'message_start' | 'message_end';
+  readonly message: {
+    readonly role: string;
+    readonly id?: string;
+    readonly usage?: { readonly output: number };
+  };
+}
+
+/** Runtime-only main-session assistant generation timing. */
+export function createThroughputTracker() {
+  let pending: { at: number; id?: string } | undefined;
+  let outputTokens = 0;
+  let generationMs = 0;
+  const startedIds = new Set<string>();
+  const endedIds = new Set<string>();
+  let startedMessages = new WeakSet<object>();
+  let endedMessages = new WeakSet<object>();
+
+  return {
+    observe(event: GenerationEvent, observedAt = Date.now()): void {
+      if (event.message.role !== 'assistant') return;
+      const id = event.message.id;
+      if (event.type === 'message_start') {
+        if (startedMessages.has(event.message) || (id && startedIds.has(id)))
+          return;
+        startedMessages.add(event.message);
+        if (id) startedIds.add(id);
+        pending = { at: observedAt, id };
+        return;
+      }
+      if (endedMessages.has(event.message) || (id && endedIds.has(id))) return;
+      const start = pending;
+      if (!start || (start.id && id && start.id !== id)) return;
+      pending = undefined;
+      endedMessages.add(event.message);
+      if (id) endedIds.add(id);
+      const elapsed = observedAt - start.at;
+      if (!Number.isFinite(elapsed) || elapsed <= 0) return;
+      const output = event.message.usage?.output;
+      if (typeof output !== 'number' || !Number.isFinite(output) || output < 0)
+        return;
+      outputTokens += output;
+      generationMs += elapsed;
+    },
+    reset(): void {
+      pending = undefined;
+      outputTokens = 0;
+      generationMs = 0;
+      startedIds.clear();
+      endedIds.clear();
+      startedMessages = new WeakSet<object>();
+      endedMessages = new WeakSet<object>();
+    },
+    get tokensPerSecond(): number | null {
+      if (!Number.isFinite(generationMs) || generationMs <= 0) return null;
+      const speed = (outputTokens * 1000) / generationMs;
+      return Number.isFinite(speed) ? speed : null;
+    },
+  };
+}

package/src/status-line/tokens.ts

@@ -0,0 +1,51 @@
+import type { SessionEntry } from '@earendil-works/pi-coding-agent';
+import type { SessionEntriesSource } from './cost.ts';
+
+export interface SessionTokenTotals {
+  readonly input: number;
+  readonly output: number;
+  readonly cacheRead: number;
+  readonly cacheWrite: number;
+}
+
+/** Main-session totals across the same entry types and history scope as cost. */
+export function calculateSessionTokens(
+  source: readonly SessionEntry[] | SessionEntriesSource | undefined | null,
+): SessionTokenTotals {
+  const entries: readonly SessionEntry[] = Array.isArray(source)
+    ? source
+    : source &&
+        typeof (source as SessionEntriesSource).getEntries === 'function'
+      ? (source as SessionEntriesSource).getEntries()
+      : [];
+  const totals = { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+  for (const entry of entries) {
+    if (!entry) continue;
+    const usage =
+      entry.type === 'message'
+        ? (entry.message?.role === 'assistant' ||
+            entry.message?.role === 'toolResult') &&
+          'usage' in entry.message
+          ? entry.message.usage
+          : undefined
+        : (entry.type === 'branch_summary' ||
+              entry.type === 'compaction' ||
+              entry.type === 'usage') &&
+            'usage' in entry
+          ? entry.usage
+          : undefined;
+    if (!usage) continue;
+    for (const field of [
+      'input',
+      'output',
+      'cacheRead',
+      'cacheWrite',
+    ] as const) {
+      const value = usage[field];
+      if (typeof value === 'number' && Number.isFinite(value) && value >= 0) {
+        totals[field] += value;
+      }
+    }
+  }
+  return totals;
+}

package/src/tools/bash.ts

@@ -0,0 +1,237 @@
+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 } from '../shared/icons.ts';
+import { getToolBorderTone } from './border.ts';
+import { createComponent, escapeOutputRow, getResultText } from './box.ts';
+import { getToolIcon } from './file-icons.ts';
+import {
+  hasToolResult,
+  renderFrameBottom,
+  renderFrameDivider,
+  renderFrameRow,
+  renderFrameTop,
+} from './frame.ts';
+import {
+  type ElapsedRenderContext,
+  type ElapsedRenderState,
+  syncElapsedTicker,
+} from './ticker.ts';
+
+const COLLAPSED_OUTPUT_LINES = 5;
+
+interface ShellArgs {
+  command?: string;
+}
+
+interface ShellContext extends ElapsedRenderContext {
+  lastComponent?: { invalidate?: () => void };
+  state?: ElapsedRenderState & {
+    hasResult?: boolean;
+    callComponent?: { invalidate?: () => void };
+  };
+}
+
+interface ShellResultStructuredContent {
+  exit_code?: number;
+  wall_time_seconds?: number;
+}
+
+interface ShellConfig {
+  toolName: 'bash' | 'powershell';
+  title: string;
+  prompt: string;
+}
+
+const BASH_CONFIG: ShellConfig = {
+  toolName: 'bash',
+  title: 'Bash',
+  prompt: '$ ',
+};
+
+const POWERSHELL_CONFIG: ShellConfig = {
+  toolName: 'powershell',
+  title: 'PowerShell',
+  prompt: 'PS> ',
+};
+
+function extractShellExitCode(
+  result: AgentToolResult<unknown>,
+  textOutput: string,
+  isErr: boolean,
+): number {
+  const structured = (
+    result as { structuredContent?: ShellResultStructuredContent }
+  ).structuredContent;
+  if (typeof structured?.exit_code === 'number') {
+    return structured.exit_code;
+  }
+  // Pi drops structuredContent before rendering, so the SDK status appendix is
+  // the source: on error results only, the last line reads
+  // `Command exited with code N` (bash.js appendStatus). Earlier stdout lines
+  // that look like a status are command output, not the exit status.
+  if (!isErr) return 0;
+  const lastLine = textOutput.trimEnd().split('\n').at(-1) ?? '';
+  const match = /^Command exited with code (\d+)$/.exec(lastLine);
+  return match ? Number.parseInt(match[1], 10) : 1;
+}
+
+function createCustomShellTool(shellConfig: ShellConfig, config: ThemeConfig) {
+  return {
+    renderShell: 'self' as const,
+    renderCall(rawArgs: unknown, theme: Theme, context: ShellContext) {
+      syncElapsedTicker(context);
+
+      const args = (rawArgs ?? {}) as ShellArgs;
+      const command = String(args.command ?? '').trim();
+      const icon = getToolIcon(shellConfig.toolName, config.icons);
+      const borderTone = context?.isPartial
+        ? 'accent'
+        : getToolBorderTone(context);
+
+      const comp = createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+        const cmdLines = command ? command.split('\n') : [''];
+        const footer =
+          context?.executionStarted && context.isPartial
+            ? toolFooter(theme, { status: 'running', context }, config.icons)
+            : undefined;
+        const title = `${theme.fg('accent', icon)} ${theme.bold ? theme.bold(theme.fg('toolTitle', shellConfig.title)) : theme.fg('toolTitle', shellConfig.title)}`;
+        const preview = cmdLines.map(
+          (l) => `${theme.fg('dim', shellConfig.prompt)}${theme.fg('text', l)}`,
+        );
+
+        if (hasToolResult(context)) {
+          return [
+            ...renderFrameTop(theme, title, safeWidth, borderTone),
+            ...preview.flatMap((l) =>
+              renderFrameRow(theme, l, safeWidth, borderTone),
+            ),
+            ...renderFrameDivider(theme, 'Output', safeWidth, borderTone),
+          ];
+        }
+
+        return [
+          ...renderFrameTop(theme, title, safeWidth, borderTone),
+          ...preview.flatMap((l) =>
+            renderFrameRow(theme, l, 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: ShellContext,
+    ) {
+      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 isPartial = Boolean(options?.isPartial);
+      const borderTone = isPartial
+        ? 'accent'
+        : getToolBorderTone({ isError: isErr, isPartial });
+      syncElapsedTicker({ ...context, isPartial });
+      const textOutput = getResultText(result);
+      const allLines = textOutput ? textOutput.split('\n') : [];
+      const lineCount = allLines.length;
+
+      const exitNum = extractShellExitCode(result, textOutput, isErr);
+      const exitStr = `Exit ${exitNum}`;
+
+      const words = textOutput.trim()
+        ? textOutput.trim().split(/\s+/).length
+        : 0;
+      const wordsStr = words > 0 ? `~${words} words` : '';
+
+      return createComponent((width: number) => {
+        const safeWidth = Math.max(0, width);
+
+        const footer = toolFooter(
+          theme,
+          {
+            status: isPartial ? 'running' : isErr ? 'failed' : 'completed',
+            context: { ...context, isPartial },
+            summary: [
+              exitStr,
+              `${lineCount} ${lineCount === 1 ? 'line' : 'lines'}`,
+              wordsStr,
+            ],
+          },
+          config.icons,
+        );
+
+        if (allLines.length === 0) {
+          const emptyBody = [theme.fg('dim', '(no output)')];
+          return [
+            ...emptyBody.flatMap((l) =>
+              renderFrameRow(theme, l, safeWidth, borderTone),
+            ),
+            ...renderFrameBottom(theme, footer, safeWidth, borderTone),
+          ];
+        }
+
+        const visibleLines = options?.expanded
+          ? allLines
+          : allLines.slice(0, COLLAPSED_OUTPUT_LINES);
+        const bodyLines: string[] = visibleLines.map((l) => {
+          const sanitized = escapeOutputRow(l);
+          return isErr
+            ? theme.fg('error', sanitized)
+            : theme.fg('toolOutput', sanitized);
+        });
+
+        if (!options?.expanded && allLines.length > COLLAPSED_OUTPUT_LINES) {
+          const remaining = allLines.length - COLLAPSED_OUTPUT_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),
+        ];
+      });
+    },
+  };
+}
+
+export function createCustomBashTool(_cwd: string, config: ThemeConfig) {
+  return createCustomShellTool(BASH_CONFIG, config);
+}
+
+export function createCustomPowerShellTool(_cwd: string, config: ThemeConfig) {
+  return createCustomShellTool(POWERSHELL_CONFIG, config);
+}

package/src/tools/border.ts

@@ -0,0 +1,21 @@
+export type BorderTone = 'error' | 'success' | 'accent';
+
+export interface BorderState {
+  isError?: boolean;
+  isSuccess?: boolean;
+}
+
+export function getBorderTone(state: BorderState): BorderTone {
+  return state.isError ? 'error' : state.isSuccess ? 'success' : 'accent';
+}
+
+/** Pi supplies the updated lifecycle to both call and result renderers. */
+export function getToolBorderTone(context?: {
+  isError?: boolean;
+  isPartial?: boolean;
+}): BorderTone {
+  return getBorderTone({
+    isError: context?.isError,
+    isSuccess: !context?.isPartial,
+  });
+}