@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/driver/coverage.ts

@@ -23,17 +23,9 @@ export interface CoverageTracker {
   isTracking(): boolean;
 }
 
-const KNOWN_VIEWS = [
-  'Dashboard',
-  'Providers',
-  'Trends',
-  'Projects',
-  'Settings',
-];
-
-export function createCoverageTracker(
-  knownViews: string[] = KNOWN_VIEWS
-): CoverageTracker {
+const KNOWN_VIEWS = ["Dashboard", "Providers", "Trends", "Projects", "Settings"];
+
+export function createCoverageTracker(knownViews: string[] = KNOWN_VIEWS): CoverageTracker {
   let tracking = false;
   let sessionStart = 0;
   let currentView: string | null = null;
@@ -45,9 +37,7 @@ export function createCoverageTracker(
     const uniqueViews = [...new Set(viewsVisited.map((v) => v.view))];
     const coveragePercentage =
       knownViews.length > 0
-        ? (uniqueViews.filter((v) => knownViews.includes(v)).length /
-            knownViews.length) *
-          100
+        ? (uniqueViews.filter((v) => knownViews.includes(v)).length / knownViews.length) * 100
         : undefined;
 
     return {
@@ -68,7 +58,9 @@ export function createCoverageTracker(
       currentView = null;
       currentViewStart = 0;
       viewsVisited.length = 0;
-      Object.keys(viewCounts).forEach((k) => delete viewCounts[k]);
+      for (const k of Object.keys(viewCounts)) {
+        delete viewCounts[k];
+      }
     },
 
     stop() {
@@ -116,26 +108,23 @@ export function createCoverageTracker(
 }
 
 export function detectViewFromFrame(frame: string): string | null {
-  const lines = frame.split('\n').slice(0, 5);
-  const headerArea = lines.join('\n');
+  const lines = frame.split("\n").slice(0, 5);
+  const headerArea = lines.join("\n");
 
-  if (headerArea.includes('[1] Dashboard') && headerArea.includes('│')) {
+  if (headerArea.includes("[1] Dashboard") && headerArea.includes("│")) {
     const match = headerArea.match(/\[(\d)\] (\w+)/g);
     if (match) {
       for (const m of match) {
-        if (!m.includes('[')) continue;
+        if (!m.includes("[")) continue;
         const viewMatch = m.match(/\[(\d)\] (\w+)/);
         if (viewMatch) {
           const num = viewMatch[1];
           const name = viewMatch[2];
           if (
             headerArea.includes(`[${num}]`) &&
-            frame.toLowerCase().includes(name?.toLowerCase() ?? '')
+            frame.toLowerCase().includes(name?.toLowerCase() ?? "")
           ) {
-            if (
-              headerArea.includes(`[${num}] ${name}`) &&
-              !headerArea.includes(`│ ${name}`)
-            ) {
+            if (headerArea.includes(`[${num}] ${name}`) && !headerArea.includes(`│ ${name}`)) {
               return name ?? null;
             }
           }
@@ -163,42 +152,36 @@ export function detectViewFromFrame(frame: string): string | null {
 
 export function formatCoverageReport(report: CoverageReport): string {
   const lines: string[] = [
-    '╔══════════════════════════════════════════════════════════════════╗',
-    '║ COVERAGE REPORT                                                  ║',
-    '╠══════════════════════════════════════════════════════════════════╣',
+    "╔══════════════════════════════════════════════════════════════════╗",
+    "║ COVERAGE REPORT                                                  ║",
+    "╠══════════════════════════════════════════════════════════════════╣",
   ];
 
   const duration = (report.sessionEnd ?? Date.now()) - report.sessionStart;
   const durationSec = (duration / 1000).toFixed(1);
 
-  lines.push(
-    `║ Session Duration: ${durationSec}s`.padEnd(67) + '║'
-  );
+  lines.push(`║ Session Duration: ${durationSec}s`.padEnd(67) + "║");
   lines.push(
     `║ Views Visited: ${report.uniqueViews.length} unique, ${report.totalViewChanges} total`.padEnd(
-      67
-    ) + '║'
+      67,
+    ) + "║",
   );
 
   if (report.coveragePercentage !== undefined) {
-    lines.push(
-      `║ Coverage: ${report.coveragePercentage.toFixed(0)}%`.padEnd(67) + '║'
-    );
+    lines.push(`║ Coverage: ${report.coveragePercentage.toFixed(0)}%`.padEnd(67) + "║");
   }
 
-  lines.push('╠══════════════════════════════════════════════════════════════════╣');
-  lines.push('║ View Breakdown:                                                  ║');
+  lines.push("╠══════════════════════════════════════════════════════════════════╣");
+  lines.push("║ View Breakdown:                                                  ║");
 
-  for (const [view, count] of Object.entries(report.viewCounts).sort(
-    (a, b) => b[1] - a[1]
-  )) {
+  for (const [view, count] of Object.entries(report.viewCounts).sort((a, b) => b[1] - a[1])) {
     const visits = report.viewsVisited.filter((v) => v.view === view);
     const totalTime = visits.reduce((sum, v) => sum + (v.duration ?? 0), 0);
-    const timeStr = totalTime > 0 ? ` (${(totalTime / 1000).toFixed(1)}s)` : '';
-    lines.push(`║   ${view}: ${count}x${timeStr}`.padEnd(67) + '║');
+    const timeStr = totalTime > 0 ? ` (${(totalTime / 1000).toFixed(1)}s)` : "";
+    lines.push(`║   ${view}: ${count}x${timeStr}`.padEnd(67) + "║");
   }
 
-  lines.push('╚══════════════════════════════════════════════════════════════════╝');
+  lines.push("╚══════════════════════════════════════════════════════════════════╝");
 
-  return lines.join('\n');
+  return lines.join("\n");
 }

package/src/tui/driver/demo-snapshot.ts

@@ -1,66 +1,66 @@
 #!/usr/bin/env bun
-import { createDriver } from './driver.ts';
-import * as fs from 'fs/promises';
-import * as path from 'path';
+import * as fs from "fs/promises";
+import * as path from "path";
+import { createDriver } from "./driver.ts";
 
-const SNAPSHOTS_DIR = './snapshots';
+const SNAPSHOTS_DIR = "./snapshots";
 
 async function saveSnapshot(frame: string, name: string): Promise<string> {
   await fs.mkdir(SNAPSHOTS_DIR, { recursive: true });
   const filePath = path.join(SNAPSHOTS_DIR, `${name}.txt`);
-  await fs.writeFile(filePath, frame, 'utf-8');
+  await fs.writeFile(filePath, frame, "utf-8");
   return path.resolve(filePath);
 }
 
 async function main() {
-  console.log('Creating driver...');
+  console.log("Creating driver...");
   const driver = await createDriver({ width: 100, height: 30 });
-  
-  console.log('Launching app...');
+
+  console.log("Launching app...");
   await driver.launch();
   await driver.waitForStable();
-  
-  console.log('Capturing dashboard...');
+
+  console.log("Capturing dashboard...");
   const dashboardFrame = await driver.capture();
-  const dashboardPath = await saveSnapshot(dashboardFrame, '01-dashboard');
+  const dashboardPath = await saveSnapshot(dashboardFrame, "01-dashboard");
   console.log(`Saved: ${dashboardPath}`);
-  
-  console.log('Switching to Providers view...');
-  await driver.pressKey('2');
+
+  console.log("Switching to Providers view...");
+  await driver.pressKey("2");
   await driver.waitForStable();
   const providersFrame = await driver.capture();
-  const providersPath = await saveSnapshot(providersFrame, '02-providers');
+  const providersPath = await saveSnapshot(providersFrame, "02-providers");
   console.log(`Saved: ${providersPath}`);
-  
-  console.log('Switching to Trends view...');
-  await driver.pressKey('3');
+
+  console.log("Switching to Trends view...");
+  await driver.pressKey("3");
   await driver.waitForStable();
   const trendsFrame = await driver.capture();
-  const trendsPath = await saveSnapshot(trendsFrame, '03-trends');
+  const trendsPath = await saveSnapshot(trendsFrame, "03-trends");
   console.log(`Saved: ${trendsPath}`);
-  
-  console.log('Switching to Projects view...');
-  await driver.pressKey('4');
+
+  console.log("Switching to Projects view...");
+  await driver.pressKey("4");
   await driver.waitForStable();
   const projectsFrame = await driver.capture();
-  const projectsPath = await saveSnapshot(projectsFrame, '04-projects');
+  const projectsPath = await saveSnapshot(projectsFrame, "04-projects");
   console.log(`Saved: ${projectsPath}`);
-  
-  console.log('Switching to Settings view...');
-  await driver.pressKey('5');
+
+  console.log("Switching to Settings view...");
+  await driver.pressKey("5");
   await driver.waitForStable();
   const settingsFrame = await driver.capture();
-  const settingsPath = await saveSnapshot(settingsFrame, '05-settings');
+  const settingsPath = await saveSnapshot(settingsFrame, "05-settings");
   console.log(`Saved: ${settingsPath}`);
-  
-  console.log('Closing driver...');
+
+  console.log("Closing driver...");
   await driver.close();
-  
-  console.log('\n✓ All snapshots saved to ./snapshots/');
-  console.log('  You can view them with: cat snapshots/01-dashboard.txt');
+
+  console.log("\n✓ All snapshots saved to ./snapshots/");
+  console.log("  You can view them with: cat snapshots/01-dashboard.txt");
 }
 
 main().catch((err) => {
-  console.error('Demo failed:', err);
+  console.error("Demo failed:", err);
   process.exit(1);
 });

package/src/tui/driver/diff.ts

@@ -23,15 +23,14 @@ export interface DiffOptions {
 export function diffFrames(
   expected: string,
   actual: string,
-  options: DiffOptions = {}
+  options: DiffOptions = {},
 ): DiffResult {
   const { ignoreWhitespace = false, contextLines = 2 } = options;
 
-  const normalize = (s: string) =>
-    ignoreWhitespace ? s.replace(/\s+/g, ' ').trim() : s;
+  const normalize = (s: string) => (ignoreWhitespace ? s.replace(/\s+/g, " ").trim() : s);
 
-  const expectedLines = expected.split('\n');
-  const actualLines = actual.split('\n');
+  const expectedLines = expected.split("\n");
+  const actualLines = actual.split("\n");
 
   const additions: LineChange[] = [];
   const deletions: LineChange[] = [];
@@ -42,8 +41,8 @@ export function diffFrames(
   const changedLineNumbers = new Set<number>();
 
   for (let i = 0; i < maxLines; i++) {
-    const expLine = expectedLines[i] ?? '';
-    const actLine = actualLines[i] ?? '';
+    const expLine = expectedLines[i] ?? "";
+    const actLine = actualLines[i] ?? "";
     const expNorm = normalize(expLine);
     const actNorm = normalize(actLine);
 
@@ -65,11 +64,11 @@ export function diffFrames(
   }
 
   for (let i = 0; i < maxLines; i++) {
-    const expLine = expectedLines[i] ?? '';
-    const actLine = actualLines[i] ?? '';
+    const expLine = expectedLines[i] ?? "";
+    const actLine = actualLines[i] ?? "";
 
     const isInContext = Array.from(changedLineNumbers).some(
-      (changed) => Math.abs(changed - i) <= contextLines
+      (changed) => Math.abs(changed - i) <= contextLines,
     );
 
     if (changedLineNumbers.has(i)) {
@@ -89,8 +88,7 @@ export function diffFrames(
   const identical = changedLineNumbers.size === 0;
   const changedLines = changedLineNumbers.size;
   const totalLines = maxLines;
-  const changePercentage =
-    totalLines > 0 ? (changedLines / totalLines) * 100 : 0;
+  const changePercentage = totalLines > 0 ? (changedLines / totalLines) * 100 : 0;
 
   return {
     identical,
@@ -100,57 +98,53 @@ export function diffFrames(
     additions,
     deletions,
     modifications,
-    visualDiff: diffLines.join('\n'),
+    visualDiff: diffLines.join("\n"),
   };
 }
 
-export function highlightDiff(
-  expected: string,
-  actual: string,
-  options: DiffOptions = {}
-): string {
+export function highlightDiff(expected: string, actual: string, options: DiffOptions = {}): string {
   const result = diffFrames(expected, actual, options);
 
   if (result.identical) {
-    return '✓ Frames are identical';
+    return "✓ Frames are identical";
   }
 
   const lines: string[] = [
     `╔══════════════════════════════════════════════════════════════════╗`,
     `║ FRAME DIFF                                                       ║`,
-    `║ Changed: ${result.changedLines}/${result.totalLines} lines (${result.changePercentage.toFixed(1)}%)${' '.repeat(Math.max(0, 24 - result.changePercentage.toFixed(1).length))}║`,
+    `║ Changed: ${result.changedLines}/${result.totalLines} lines (${result.changePercentage.toFixed(1)}%)${" ".repeat(Math.max(0, 24 - result.changePercentage.toFixed(1).length))}║`,
     `╠══════════════════════════════════════════════════════════════════╣`,
     `║ - = removed   + = added                                          ║`,
     `╚══════════════════════════════════════════════════════════════════╝`,
-    '',
+    "",
     result.visualDiff,
   ];
 
-  return lines.join('\n');
+  return lines.join("\n");
 }
 
 export function createCharDiff(expected: string, actual: string): string {
-  const expectedLines = expected.split('\n');
-  const actualLines = actual.split('\n');
+  const expectedLines = expected.split("\n");
+  const actualLines = actual.split("\n");
   const maxLines = Math.max(expectedLines.length, actualLines.length);
 
   const diffLines: string[] = [];
 
   for (let i = 0; i < maxLines; i++) {
-    const expLine = expectedLines[i] ?? '';
-    const actLine = actualLines[i] ?? '';
+    const expLine = expectedLines[i] ?? "";
+    const actLine = actualLines[i] ?? "";
 
     if (expLine === actLine) {
       continue;
     }
 
     const maxLen = Math.max(expLine.length, actLine.length);
-    let markers = '';
+    let markers = "";
 
     for (let j = 0; j < maxLen; j++) {
-      const expChar = expLine[j] ?? ' ';
-      const actChar = actLine[j] ?? ' ';
-      markers += expChar === actChar ? ' ' : '^';
+      const expChar = expLine[j] ?? " ";
+      const actChar = actLine[j] ?? " ";
+      markers += expChar === actChar ? " " : "^";
     }
 
     if (markers.trim()) {
@@ -158,9 +152,9 @@ export function createCharDiff(expected: string, actual: string): string {
       diffLines.push(`  exp: ${expLine}`);
       diffLines.push(`  act: ${actLine}`);
       diffLines.push(`       ${markers}`);
-      diffLines.push('');
+      diffLines.push("");
     }
   }
 
-  return diffLines.join('\n');
+  return diffLines.join("\n");
 }

package/src/tui/driver/driver.ts

@@ -1,9 +1,8 @@
-import { createTestRenderer } from '@opentui/core/testing';
-import { AppContext, createRoot } from '@opentui/react';
-import React from 'react';
-import { act } from 'react';
-import { createAppElement, type CreateAppOptions } from '../createApp.tsx';
-import { TestModeContext } from '../hooks/useSafeRenderer.ts';
+import { createTestRenderer } from "@opentui/core/testing";
+import { AppContext, createRoot } from "@opentui/react";
+import React, { act } from "react";
+import { type CreateAppOptions, createAppElement } from "../createApp.tsx";
+import { TestModeContext } from "../hooks/useSafeRenderer.ts";
 
 export interface DriverOptions {
   width?: number;
@@ -44,22 +43,22 @@ export interface Driver {
   launch(): Promise<void>;
   close(): Promise<void>;
   isRunning(): boolean;
-  
+
   sendKeys(keys: string): Promise<void>;
   pressKey(key: string, modifiers?: KeyModifiers): Promise<void>;
   typeText(text: string, delay?: number): Promise<void>;
   pressEnter(): Promise<void>;
   pressEscape(): Promise<void>;
   pressTab(): Promise<void>;
-  pressArrow(direction: 'up' | 'down' | 'left' | 'right'): Promise<void>;
-  
+  pressArrow(direction: "up" | "down" | "left" | "right"): Promise<void>;
+
   capture(): Promise<string>;
   captureWithMeta(): Promise<CaptureResult>;
-  
+
   waitForText(text: string, options?: WaitOptions): Promise<boolean>;
   waitForStable(options?: StableOptions): Promise<void>;
   settle(): Promise<void>;
-  
+
   resize(cols: number, rows: number): Promise<void>;
   getSize(): { width: number; height: number };
 }
@@ -67,19 +66,19 @@ export interface Driver {
 export async function createDriver(options: DriverOptions = {}): Promise<Driver> {
   const width = options.width ?? 100;
   const height = options.height ?? 30;
-  const appOptions = { 
-    ...options.appOptions, 
+  const appOptions = {
+    ...options.appOptions,
     debug: options.appOptions?.debug ?? false,
     testMode: true,
   };
-  
+
   let testSetup: TestSetup | null = null;
   let currentWidth = width;
   let currentHeight = height;
 
   const assertRunning = (): TestSetup => {
     if (!testSetup) {
-      throw new Error('Driver not launched. Call launch() first.');
+      throw new Error("Driver not launched. Call launch() first.");
     }
     return testSetup;
   };
@@ -87,39 +86,35 @@ export async function createDriver(options: DriverOptions = {}): Promise<Driver>
   const driver: Driver = {
     async launch() {
       if (testSetup) {
-        throw new Error('Driver already launched. Call close() first.');
+        throw new Error("Driver already launched. Call close() first.");
       }
-      
+
       (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
-      
-      const coreTestSetup = await createTestRenderer({ 
-        width: currentWidth, 
+
+      const coreTestSetup = await createTestRenderer({
+        width: currentWidth,
         height: currentHeight,
       });
-      
+
       const root = createRoot(coreTestSetup.renderer);
-      
+
       const appElement = createAppElement(appOptions);
-      
+
       const wrappedApp = React.createElement(
         AppContext.Provider,
-        { 
-          value: { 
-            keyHandler: coreTestSetup.renderer.keyInput, 
-            renderer: coreTestSetup.renderer 
-          } 
+        {
+          value: {
+            keyHandler: coreTestSetup.renderer.keyInput,
+            renderer: coreTestSetup.renderer,
+          },
         },
-        React.createElement(
-          TestModeContext.Provider,
-          { value: true },
-          appElement
-        )
+        React.createElement(TestModeContext.Provider, { value: true }, appElement),
       );
-      
+
       act(() => {
         root.render(wrappedApp);
       });
-      
+
       testSetup = { ...coreTestSetup, root };
       await testSetup.renderOnce();
     },
@@ -143,21 +138,21 @@ export async function createDriver(options: DriverOptions = {}): Promise<Driver>
 
     async sendKeys(keys: string) {
       const setup = assertRunning();
-      
+
       for (const char of keys) {
-        if (char === '\r' || char === '\n') {
+        if (char === "\r" || char === "\n") {
           setup.mockInput.pressEnter();
-        } else if (char === '\t') {
+        } else if (char === "\t") {
           setup.mockInput.pressTab();
-        } else if (char === '\x1b') {
+        } else if (char === "\x1b") {
           setup.mockInput.pressEscape();
-        } else if (char === '\x7f') {
+        } else if (char === "\x7f") {
           setup.mockInput.pressBackspace();
         } else {
           setup.mockInput.pressKey(char);
         }
       }
-      
+
       await this.settle();
     },
 
@@ -191,7 +186,7 @@ export async function createDriver(options: DriverOptions = {}): Promise<Driver>
       await this.settle();
     },
 
-    async pressArrow(direction: 'up' | 'down' | 'left' | 'right') {
+    async pressArrow(direction: "up" | "down" | "left" | "right") {
       const setup = assertRunning();
       setup.mockInput.pressArrow(direction);
       await this.settle();
@@ -216,23 +211,23 @@ export async function createDriver(options: DriverOptions = {}): Promise<Driver>
     async waitForText(text: string, options: WaitOptions = {}): Promise<boolean> {
       const { timeout = 5000, interval = 50 } = options;
       const start = Date.now();
-      
+
       while (Date.now() - start < timeout) {
         const frame = await this.capture();
         if (frame.includes(text)) {
           return true;
         }
-        await new Promise(resolve => setTimeout(resolve, interval));
+        await new Promise((resolve) => setTimeout(resolve, interval));
       }
-      
+
       return false;
     },
 
     async waitForStable(options: StableOptions = {}): Promise<void> {
       const { maxIterations = 10, intervalMs = 50, stableFrames = 2 } = options;
-      let lastFrame = '';
+      let lastFrame = "";
       let stableCount = 0;
-      
+
       for (let i = 0; i < maxIterations; i++) {
         const frame = await this.capture();
         if (frame === lastFrame) {
@@ -244,7 +239,7 @@ export async function createDriver(options: DriverOptions = {}): Promise<Driver>
           stableCount = 0;
         }
         lastFrame = frame;
-        await new Promise(resolve => setTimeout(resolve, intervalMs));
+        await new Promise((resolve) => setTimeout(resolve, intervalMs));
       }
     },
 

package/src/tui/driver/index.ts

@@ -1,53 +1,49 @@
 export {
-  createDriver,
-  type Driver,
-  type DriverOptions,
-  type CaptureResult,
-  type WaitOptions,
-  type StableOptions,
-  type KeyModifiers,
-} from './driver.ts';
-
+  type AssertOptions,
+  type AssertResult,
+  assertSnapshot,
+  deleteGoldenFile,
+  type GoldenFile,
+  type GoldenFileInfo,
+  getGoldenFile,
+  listGoldenFiles,
+} from "./assertions.ts";
+export {
+  type CoverageReport,
+  type CoverageTracker,
+  createCoverageTracker,
+  detectViewFromFrame,
+  formatCoverageReport,
+  type ViewVisit,
+} from "./coverage.ts";
 export {
-  diffFrames,
-  highlightDiff,
   createCharDiff,
+  type DiffOptions,
   type DiffResult,
+  diffFrames,
+  highlightDiff,
   type LineChange,
-  type DiffOptions,
-} from './diff.ts';
-
+} from "./diff.ts";
 export {
-  assertSnapshot,
-  listGoldenFiles,
-  deleteGoldenFile,
-  getGoldenFile,
-  type AssertResult,
-  type AssertOptions,
-  type GoldenFile,
-  type GoldenFileInfo,
-} from './assertions.ts';
-
+  type CaptureResult,
+  createDriver,
+  type Driver,
+  type DriverOptions,
+  type KeyModifiers,
+  type StableOptions,
+  type WaitOptions,
+} from "./driver.ts";
 export {
   createRecorder,
-  replayRecording,
-  saveRecording,
-  loadRecording,
-  listRecordings,
   deleteRecording,
-  type Recorder,
-  type Recording,
+  listRecordings,
+  loadRecording,
   type RecordedCommand,
+  type Recorder,
   type RecorderOptions,
+  type Recording,
   type ReplayOptions,
   type ReplayResult,
-} from './recorder.ts';
-
-export {
-  createCoverageTracker,
-  detectViewFromFrame,
-  formatCoverageReport,
-  type CoverageTracker,
-  type CoverageReport,
-  type ViewVisit,
-} from './coverage.ts';
+  replayRecording,
+  saveRecording,
+} from "./recorder.ts";