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

package/src/shared/cache.ts

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

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

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

package/src/shared/icons.ts

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

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

package/src/status-line/index.ts

@@ -0,0 +1,242 @@
+import type {
+  ExtensionAPI,
+  ExtensionContext,
+} from '@earendil-works/pi-coding-agent';
+import {
+  decorateEditor,
+  type EditorDecoration,
+} from '../input-box/decorate.ts';
+import { createWorkingState } from '../input-box/state.ts';
+import type { ThemeConfig } from '../shared/config.ts';
+import { calculateSessionCost } from './cost.ts';
+import { type ActiveThemeLike, formatCwd, renderStatusLine } from './layout.ts';
+import type { StatusSnapshot, StatusSnapshotProvider } from './snapshot.ts';
+import { createThroughputTracker } from './throughput.ts';
+import { calculateSessionTokens } from './tokens.ts';
+
+export { calculateSessionCost, formatCost } from './cost.ts';
+export {
+  type ActiveThemeLike,
+  type ContextUsageInfo,
+  formatCwd,
+  formatTokens,
+  type RenderStatusLineOptions,
+  renderStatusLine,
+  type StatusData,
+} from './layout.ts';
+export type { StatusSnapshot, StatusSnapshotProvider } from './snapshot.ts';
+export { calculateSessionTokens, type SessionTokenTotals } from './tokens.ts';
+
+/**
+ * Renders the cached status row below the input box and discovers editors in place.
+ * Session aggregation is cached until an event or session leaf change; this
+ * extension never registers an editor factory with setEditorComponent.
+ */
+export function registerStatusLine(
+  pi: ExtensionAPI,
+  ctx: ExtensionContext,
+  config: ThemeConfig,
+): void {
+  const subscriptionProviders = config.statusLine.subscriptionProviders ?? [
+    'claude-bridge',
+  ];
+  const inputBoxEnabled = config.inputBox?.enabled !== false;
+  ctx.ui.setFooter((tui, theme, footerData) => {
+    const unsubs: Array<() => void> = [];
+    let disposed = false;
+    const throughput = createThroughputTracker();
+    let sessionLeafId = ctx.sessionManager.getLeafId();
+    let session = readSession();
+    let sessionDirty = false;
+    let subagentCost = 0;
+    let cachedKey = '';
+    let cachedLines: string[] = [];
+    let snapshotKey = '';
+    let snapshot: Readonly<StatusSnapshot>;
+
+    // Cheap live fields are sampled by either consumer, never by footer order.
+    // Checking the leaf is O(1); unchanged frames do not copy/aggregate entries.
+    const getStatusSnapshot: StatusSnapshotProvider = () => {
+      if (!disposed) {
+        const leafId = ctx.sessionManager.getLeafId();
+        if (sessionDirty || leafId !== sessionLeafId) {
+          session = readSession();
+          sessionLeafId = leafId;
+          sessionDirty = false;
+        }
+      }
+      const data: StatusSnapshot = {
+        modelName: ctx.model?.name,
+        modelId: ctx.model?.id,
+        thinkingLevel: ctx.thinkingLevel,
+        gitBranch: footerData?.getGitBranch?.() ?? null,
+        cwd: formatCwd(ctx.cwd, process.env.HOME || process.env.USERPROFILE),
+        ...session,
+        subagentCost,
+        tokensPerSecond: throughput.tokensPerSecond,
+      };
+      const key = JSON.stringify(data);
+      if (key !== snapshotKey) {
+        snapshotKey = key;
+        snapshot = data;
+      }
+      return snapshot;
+    };
+
+    function readSession() {
+      const usage = ctx.getContextUsage?.();
+      const provider = ctx.model?.provider;
+      const entries = ctx.sessionManager.getEntries();
+      return {
+        cost: calculateSessionCost(entries),
+        tokenTotals: calculateSessionTokens(entries),
+        isSubscription:
+          provider !== undefined && subscriptionProviders.includes(provider),
+        contextTokens: usage?.tokens ?? null,
+        contextPercent: usage?.percent ?? null,
+        contextWindow: usage?.contextWindow,
+      };
+    }
+
+    const requestRender = () => {
+      if (!disposed) tui.requestRender?.();
+    };
+    const invalidateRender = () => {
+      if (disposed) return;
+      cachedKey = '';
+      requestRender();
+    };
+    const working = createWorkingState(invalidateRender);
+    const editorDecorations = new Set<EditorDecoration>();
+    const refreshSession = () => {
+      if (disposed) return;
+      // message_end reaches extensions before Pi persists the entry. An early
+      // consumer may read now; the leaf key still detects the later append.
+      sessionDirty = true;
+      invalidateRender();
+    };
+
+    unsubs.push(
+      pi.events.on('thoth:subagent-usage', (data) => {
+        if (disposed || !data || typeof data !== 'object') return;
+        const { parentSessionId, totalCost } = data as {
+          parentSessionId?: unknown;
+          totalCost?: unknown;
+        };
+        if (
+          parentSessionId !== ctx.sessionManager.getSessionId() ||
+          typeof totalCost !== 'number' ||
+          !Number.isFinite(totalCost) ||
+          totalCost < 0
+        )
+          return;
+        // The publisher sends a cumulative snapshot, not a delta.
+        subagentCost = totalCost;
+        requestRender();
+      }),
+    );
+
+    if (footerData?.onBranchChange) {
+      unsubs.push(footerData.onBranchChange(invalidateRender));
+    }
+
+    const requestSubagentUsage = () => {
+      pi.events.emit('thoth:subagent-usage:request', {
+        parentSessionId: ctx.sessionManager.getSessionId(),
+      });
+    };
+
+    if (pi?.on) {
+      unsubs.push(
+        pi.on('session_start', () => {
+          if (disposed) return;
+          subagentCost = 0;
+          throughput.reset();
+          if (inputBoxEnabled) working.end();
+          refreshSession();
+          requestSubagentUsage();
+        }),
+      );
+      if (inputBoxEnabled) {
+        unsubs.push(pi.on('agent_start', working.start));
+        unsubs.push(pi.on('agent_end', working.end));
+      }
+      unsubs.push(
+        pi.on('message_start', (event) => {
+          if (!disposed && event) throughput.observe(event);
+        }),
+      );
+      unsubs.push(
+        pi.on('message_end', (event) => {
+          if (disposed) return;
+          if (event) throughput.observe(event);
+          refreshSession();
+        }),
+      );
+      unsubs.push(pi.on('turn_end', refreshSession));
+      unsubs.push(pi.on('agent_end', refreshSession));
+      unsubs.push(pi.on('session_compact', refreshSession));
+      unsubs.push(pi.on('model_select', refreshSession));
+      unsubs.push(pi.on('thinking_level_select', invalidateRender));
+    }
+
+    // Subscribe first: a request responder can publish synchronously.
+    requestSubagentUsage();
+
+    return {
+      getStatusSnapshot,
+      render(width: number): string[] {
+        if (!disposed && inputBoxEnabled) {
+          // Discovery must precede cached-row returns: focus and editor identity
+          // can change without any status data changing.
+          const focusedTui = tui as typeof tui & {
+            getFocusedComponent?: () => unknown;
+          };
+          const editor = focusedTui.getFocusedComponent?.();
+          const decoration = decorateEditor(editor, {
+            theme: theme as ActiveThemeLike,
+            working,
+            getStatusSnapshot,
+            get iconMode() {
+              return config.icons;
+            },
+          });
+          if (decoration && !editorDecorations.has(decoration)) {
+            editorDecorations.add(decoration);
+            requestRender();
+          }
+        }
+        if (width <= 0) return [];
+        const data = getStatusSnapshot();
+        const key = `${width}\u0000${JSON.stringify(data)}`;
+        if (key === cachedKey) return cachedLines;
+        const line = renderStatusLine(data, {
+          width,
+          mode: config.icons,
+          theme: theme as ActiveThemeLike,
+        });
+        cachedKey = key;
+        // Working ticks invalidate styling, but unchanged footer output keeps
+        // its identity and avoids needless downstream updates.
+        if (line !== cachedLines[0]) cachedLines = line ? [line] : [];
+        return cachedLines;
+      },
+      invalidate: invalidateRender,
+      dispose() {
+        // Pi may have snapshotted lifecycle handlers before replacing the footer.
+        disposed = true;
+        working.dispose();
+        for (const decoration of editorDecorations) decoration.dispose();
+        editorDecorations.clear();
+        for (const unsub of unsubs) {
+          try {
+            unsub();
+          } catch {
+            // ignore disposal errors during cleanup
+          }
+        }
+        unsubs.length = 0;
+      },
+    };
+  });
+}