@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/driver/recorder.ts

@@ -1,6 +1,6 @@
-import * as fs from 'fs/promises';
-import * as path from 'path';
-import type { Driver } from './driver.ts';
+import * as fs from "fs/promises";
+import * as path from "path";
+import type { Driver } from "./driver.ts";
 
 export interface RecordedCommand {
   action: string;
@@ -35,7 +35,7 @@ export interface Recorder {
 export function createRecorder(
   width: number,
   height: number,
-  options: RecorderOptions = {}
+  options: RecorderOptions = {},
 ): Recorder {
   const { captureFrames = false, name = `recording-${Date.now()}` } = options;
 
@@ -109,11 +109,7 @@ export function createRecorder(
 export interface ReplayOptions {
   speed?: number;
   stepMode?: boolean;
-  onStep?: (
-    cmd: RecordedCommand,
-    index: number,
-    total: number
-  ) => Promise<void>;
+  onStep?: (cmd: RecordedCommand, index: number, total: number) => Promise<void>;
   onFrame?: (frame: string, cmd: RecordedCommand) => void;
 }
 
@@ -128,7 +124,7 @@ export interface ReplayResult {
 export async function replayRecording(
   driver: Driver,
   recording: Recording,
-  options: ReplayOptions = {}
+  options: ReplayOptions = {},
 ): Promise<ReplayResult> {
   const { speed = 1, stepMode = false, onStep, onFrame } = options;
 
@@ -184,66 +180,61 @@ export async function replayRecording(
   return result;
 }
 
-async function executeCommand(
-  driver: Driver,
-  cmd: RecordedCommand
-): Promise<void> {
+async function executeCommand(driver: Driver, cmd: RecordedCommand): Promise<void> {
   const params = cmd.params ?? {};
 
   switch (cmd.action) {
-    case 'sendKeys':
-      await driver.sendKeys(String(params.keys ?? ''));
+    case "sendKeys":
+      await driver.sendKeys(String(params.keys ?? ""));
       break;
 
-    case 'pressKey':
+    case "pressKey":
       await driver.pressKey(
-        String(params.key ?? ''),
-        params.modifiers as Record<string, boolean> | undefined
+        String(params.key ?? ""),
+        params.modifiers as Record<string, boolean> | undefined,
       );
       break;
 
-    case 'pressTab':
+    case "pressTab":
       await driver.pressTab();
       break;
 
-    case 'pressEnter':
+    case "pressEnter":
       await driver.pressEnter();
       break;
 
-    case 'pressEscape':
+    case "pressEscape":
       await driver.pressEscape();
       break;
 
-    case 'pressArrow':
-      await driver.pressArrow(params.direction as 'up' | 'down' | 'left' | 'right');
+    case "pressArrow":
+      await driver.pressArrow(params.direction as "up" | "down" | "left" | "right");
       break;
 
-    case 'typeText':
+    case "typeText":
       await driver.typeText(
-        String(params.text ?? ''),
-        typeof params.delay === 'number' ? params.delay : 0
+        String(params.text ?? ""),
+        typeof params.delay === "number" ? params.delay : 0,
       );
       break;
 
-    case 'resize':
+    case "resize":
       await driver.resize(
-        typeof params.cols === 'number' ? params.cols : 100,
-        typeof params.rows === 'number' ? params.rows : 30
+        typeof params.cols === "number" ? params.cols : 100,
+        typeof params.rows === "number" ? params.rows : 30,
       );
       break;
 
-    case 'waitForStable':
+    case "waitForStable":
       await driver.waitForStable({
-        maxIterations:
-          typeof params.maxIterations === 'number' ? params.maxIterations : 10,
-        intervalMs:
-          typeof params.intervalMs === 'number' ? params.intervalMs : 50,
+        maxIterations: typeof params.maxIterations === "number" ? params.maxIterations : 10,
+        intervalMs: typeof params.intervalMs === "number" ? params.intervalMs : 50,
       });
       break;
 
-    case 'waitForText':
-      await driver.waitForText(String(params.text ?? ''), {
-        timeout: typeof params.timeout === 'number' ? params.timeout : 5000,
+    case "waitForText":
+      await driver.waitForText(String(params.text ?? ""), {
+        timeout: typeof params.timeout === "number" ? params.timeout : 5000,
       });
       break;
 
@@ -253,37 +244,35 @@ async function executeCommand(
   }
 }
 
-const DEFAULT_RECORDINGS_DIR = './recordings';
+const DEFAULT_RECORDINGS_DIR = "./recordings";
 
 export async function saveRecording(
   recording: Recording,
-  dir: string = DEFAULT_RECORDINGS_DIR
+  dir: string = DEFAULT_RECORDINGS_DIR,
 ): Promise<string> {
   await fs.mkdir(dir, { recursive: true });
   const filePath = path.join(dir, `${recording.name}.json`);
-  await fs.writeFile(filePath, JSON.stringify(recording, null, 2), 'utf-8');
+  await fs.writeFile(filePath, JSON.stringify(recording, null, 2), "utf-8");
   return path.resolve(filePath);
 }
 
 export async function loadRecording(
   name: string,
-  dir: string = DEFAULT_RECORDINGS_DIR
+  dir: string = DEFAULT_RECORDINGS_DIR,
 ): Promise<Recording | null> {
   const filePath = path.join(dir, `${name}.json`);
   try {
-    const content = await fs.readFile(filePath, 'utf-8');
+    const content = await fs.readFile(filePath, "utf-8");
     return JSON.parse(content) as Recording;
   } catch {
     return null;
   }
 }
 
-export async function listRecordings(
-  dir: string = DEFAULT_RECORDINGS_DIR
-): Promise<string[]> {
+export async function listRecordings(dir: string = DEFAULT_RECORDINGS_DIR): Promise<string[]> {
   try {
     const files = await fs.readdir(dir);
-    return files.filter((f) => f.endsWith('.json')).map((f) => f.replace('.json', ''));
+    return files.filter((f) => f.endsWith(".json")).map((f) => f.replace(".json", ""));
   } catch {
     return [];
   }
@@ -291,7 +280,7 @@ export async function listRecordings(
 
 export async function deleteRecording(
   name: string,
-  dir: string = DEFAULT_RECORDINGS_DIR
+  dir: string = DEFAULT_RECORDINGS_DIR,
 ): Promise<boolean> {
   const filePath = path.join(dir, `${name}.json`);
   try {

package/src/tui/driver/test-workflow.ts

@@ -1,115 +1,115 @@
 #!/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() {
   // Use 80x24 to match your terminal
   const driver = await createDriver({ width: 80, height: 24 });
-  
-  console.log('Launching app...');
+
+  console.log("Launching app...");
   await driver.launch();
   await driver.waitForStable();
-  
+
   // Step 1: Navigate to Settings (key 5)
-  console.log('Navigating to Settings...');
-  await driver.pressKey('5');
+  console.log("Navigating to Settings...");
+  await driver.pressKey("5");
   await driver.waitForStable();
-  
+
   // Step 2: Find and capture Alerts settings
   // Settings page likely has tabs/sections - need to find Alerts
-  console.log('Looking for Alerts section...');
+  console.log("Looking for Alerts section...");
   let frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-01-settings');
-  console.log('Saved settings view');
-  
+  await saveSnapshot(frame, "workflow-01-settings");
+  console.log("Saved settings view");
+
   // Try navigating within settings to find Alerts (try arrow keys or tab)
   // First let's see what's on the settings page
-  if (!frame.includes('Alerts') && !frame.includes('alerts')) {
+  if (!frame.includes("Alerts") && !frame.includes("alerts")) {
     // Try pressing tab or arrows to navigate
     await driver.pressTab();
     await driver.waitForStable();
     frame = await driver.capture();
   }
-  
-  await saveSnapshot(frame, 'workflow-02-alerts-settings');
-  console.log('Saved alerts settings');
-  
+
+  await saveSnapshot(frame, "workflow-02-alerts-settings");
+  console.log("Saved alerts settings");
+
   // Step 3: Navigate back to Dashboard (key 1)
-  console.log('Navigating to Dashboard...');
-  await driver.pressKey('1');
+  console.log("Navigating to Dashboard...");
+  await driver.pressKey("1");
   await driver.waitForStable();
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-03-dashboard');
-  console.log('Saved dashboard view');
-  
+  await saveSnapshot(frame, "workflow-03-dashboard");
+  console.log("Saved dashboard view");
+
   // Step 4: Change time scale to 7d
   // Need to find how to change timescale - likely a dropdown or key
-  console.log('Changing time scale to 7d...');
+  console.log("Changing time scale to 7d...");
   // Try common keys for time scale selection
   // Check if there's a visible control for this
-  
+
   // Try 't' for time or look for other controls
-  await driver.pressKey('t');
+  await driver.pressKey("t");
   await driver.waitForStable();
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-04-timescale-menu');
-  
+  await saveSnapshot(frame, "workflow-04-timescale-menu");
+
   // If a menu opened, try to select 7d
-  if (frame.includes('7d') || frame.includes('7 d')) {
+  if (frame.includes("7d") || frame.includes("7 d")) {
     // Navigate to 7d option
-    await driver.pressArrow('down');
+    await driver.pressArrow("down");
     await driver.waitForStable();
-    await driver.pressArrow('down');
+    await driver.pressArrow("down");
     await driver.waitForStable();
     frame = await driver.capture();
-    await saveSnapshot(frame, 'workflow-05-timescale-selecting');
+    await saveSnapshot(frame, "workflow-05-timescale-selecting");
     await driver.pressEnter();
     await driver.waitForStable();
   }
-  
+
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-06-after-timescale');
-  console.log('Saved after timescale change');
-  
+  await saveSnapshot(frame, "workflow-06-after-timescale");
+  console.log("Saved after timescale change");
+
   // Step 5: Filter with "opus"
   console.log('Filtering with "opus"...');
   // Try '/' for search/filter (common pattern)
-  await driver.pressKey('/');
+  await driver.pressKey("/");
   await driver.waitForStable();
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-07-filter-input');
-  
+  await saveSnapshot(frame, "workflow-07-filter-input");
+
   // Type "opus"
-  await driver.typeText('opus');
+  await driver.typeText("opus");
   await driver.waitForStable();
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-08-filter-opus');
-  
+  await saveSnapshot(frame, "workflow-08-filter-opus");
+
   // Press enter to apply filter
   await driver.pressEnter();
   await driver.waitForStable();
-  
+
   // Final result
   frame = await driver.capture();
-  await saveSnapshot(frame, 'workflow-09-final-result');
-  console.log('Saved final filtered result');
-  
+  await saveSnapshot(frame, "workflow-09-final-result");
+  console.log("Saved final filtered result");
+
   await driver.close();
-  
-  console.log('\n✓ Workflow complete! Check ./snapshots/workflow-*.txt');
+
+  console.log("\n✓ Workflow complete! Check ./snapshots/workflow-*.txt");
 }
 
 main().catch((err) => {
-  console.error('Workflow failed:', err);
+  console.error("Workflow failed:", err);
   process.exit(1);
 });

package/src/tui/driver/test.ts

@@ -1,47 +1,47 @@
 #!/usr/bin/env bun
-import { createDriver } from './driver.ts';
+import { createDriver } from "./driver.ts";
 
 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();
-  
-  console.log('Waiting for initial render...');
+
+  console.log("Waiting for initial render...");
   await driver.waitForStable();
-  
-  console.log('Capturing initial frame...');
+
+  console.log("Capturing initial frame...");
   const frame1 = await driver.capture();
-  console.log('=== INITIAL FRAME ===');
+  console.log("=== INITIAL FRAME ===");
   console.log(frame1);
-  console.log('=== END FRAME ===\n');
-  
+  console.log("=== END FRAME ===\n");
+
   console.log('Pressing "2" to switch to Providers view...');
-  await driver.pressKey('2');
+  await driver.pressKey("2");
   await driver.waitForStable();
-  
+
   const frame2 = await driver.capture();
-  console.log('=== PROVIDERS VIEW ===');
+  console.log("=== PROVIDERS VIEW ===");
   console.log(frame2);
-  console.log('=== END FRAME ===\n');
-  
+  console.log("=== END FRAME ===\n");
+
   console.log('Pressing "3" to switch to Trends view...');
-  await driver.pressKey('3');
+  await driver.pressKey("3");
   await driver.waitForStable();
-  
+
   const frame3 = await driver.capture();
-  console.log('=== TRENDS VIEW ===');
+  console.log("=== TRENDS VIEW ===");
   console.log(frame3);
-  console.log('=== END FRAME ===\n');
-  
-  console.log('Closing driver...');
+  console.log("=== END FRAME ===\n");
+
+  console.log("Closing driver...");
   await driver.close();
-  
-  console.log('Done!');
+
+  console.log("Done!");
 }
 
 main().catch((err) => {
-  console.error('Test failed:', err);
+  console.error("Test failed:", err);
   process.exit(1);
 });

package/src/tui/hooks/index.ts

@@ -1,20 +1,24 @@
-export { useEmaActivity } from './useEmaActivity.ts';
-export type { ActivityState, ActivityDebugData, UseActivityRateResult } from './useEmaActivity.ts';
-
-export { useDashboardState } from './useDashboardState.ts';
-export type { DashboardDeltas, UseDashboardStateResult } from './useDashboardState.ts';
-
-export { usePulse, getPulseColor } from './usePulse.ts';
-export type { UsePulseOptions } from './usePulse.ts';
-
-export { useValueFlash, interpolateColor } from './useValueFlash.ts';
-export type { UseValueFlashOptions, UseValueFlashResult } from './useValueFlash.ts';
-
-export { useAnimatedValue, useAnimatedCurrency, useAnimatedTokens, useAnimatedCount, easings } from './useAnimatedValue.ts';
-export type { UseAnimatedValueOptions, EasingFunction } from './useAnimatedValue.ts';
-
-export { useEntranceAnimation, applyEntranceFade } from './useEntranceAnimation.ts';
-export type { UseEntranceAnimationOptions } from './useEntranceAnimation.ts';
-
-export { useExitAnimation } from './useExitAnimation.ts';
-export type { ExitAnimationItem, UseExitAnimationOptions, UseExitAnimationResult } from './useExitAnimation.ts';
+export type { EasingFunction, UseAnimatedValueOptions } from "./useAnimatedValue.ts";
+export {
+  easings,
+  useAnimatedCount,
+  useAnimatedCurrency,
+  useAnimatedTokens,
+  useAnimatedValue,
+} from "./useAnimatedValue.ts";
+export type { DashboardDeltas, UseDashboardStateResult } from "./useDashboardState.ts";
+export { useDashboardState } from "./useDashboardState.ts";
+export type { ActivityDebugData, ActivityState, UseActivityRateResult } from "./useEmaActivity.ts";
+export { useEmaActivity } from "./useEmaActivity.ts";
+export type { UseEntranceAnimationOptions } from "./useEntranceAnimation.ts";
+export { applyEntranceFade, useEntranceAnimation } from "./useEntranceAnimation.ts";
+export type {
+  ExitAnimationItem,
+  UseExitAnimationOptions,
+  UseExitAnimationResult,
+} from "./useExitAnimation.ts";
+export { useExitAnimation } from "./useExitAnimation.ts";
+export type { UsePulseOptions } from "./usePulse.ts";
+export { getPulseColor, usePulse } from "./usePulse.ts";
+export type { UseValueFlashOptions, UseValueFlashResult } from "./useValueFlash.ts";
+export { interpolateColor, useValueFlash } from "./useValueFlash.ts";

package/src/tui/hooks/useAnimatedValue.ts

@@ -1,13 +1,13 @@
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 export type EasingFunction = (t: number) => number;
 
 export const easings = {
   linear: (t: number) => t,
   easeOutQuad: (t: number) => 1 - (1 - t) * (1 - t),
-  easeOutCubic: (t: number) => 1 - Math.pow(1 - t, 3),
-  easeOutExpo: (t: number) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
-  easeInOutQuad: (t: number) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+  easeOutCubic: (t: number) => 1 - (1 - t) ** 3,
+  easeOutExpo: (t: number) => (t === 1 ? 1 : 1 - 2 ** (-10 * t)),
+  easeInOutQuad: (t: number) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2),
 } as const;
 
 export interface UseAnimatedValueOptions {
@@ -19,14 +19,9 @@ export interface UseAnimatedValueOptions {
 
 export function useAnimatedValue(
   targetValue: number,
-  options: UseAnimatedValueOptions = {}
+  options: UseAnimatedValueOptions = {},
 ): number {
-  const { 
-    durationMs = 300, 
-    easing = 'easeOutQuad',
-    precision = 2,
-    frameRate = 60,
-  } = options;
+  const { durationMs = 300, easing = "easeOutQuad", precision = 2, frameRate = 60 } = options;
 
   const [displayValue, setDisplayValue] = useState(targetValue);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -34,7 +29,7 @@ export function useAnimatedValue(
   const startTimeRef = useRef<number>(Date.now());
   const targetRef = useRef(targetValue);
 
-  const easingFn = typeof easing === 'function' ? easing : easings[easing];
+  const easingFn = typeof easing === "function" ? easing : easings[easing];
   const frameInterval = Math.round(1000 / frameRate);
 
   useEffect(() => {
@@ -54,11 +49,11 @@ export function useAnimatedValue(
       const elapsed = Date.now() - startTimeRef.current;
       const progress = Math.min(elapsed / durationMs, 1);
       const easedProgress = easingFn(progress);
-      
+
       const startVal = startValueRef.current;
       const currentValue = startVal + (targetRef.current - startVal) * easedProgress;
       const roundedValue = Number(currentValue.toFixed(precision));
-      
+
       setDisplayValue(roundedValue);
 
       if (progress >= 1) {
@@ -83,7 +78,7 @@ export function useAnimatedValue(
 
 export function useAnimatedCurrency(
   targetValue: number,
-  options: Omit<UseAnimatedValueOptions, 'precision'> = {}
+  options: Omit<UseAnimatedValueOptions, "precision"> = {},
 ): string {
   const animatedValue = useAnimatedValue(targetValue, { ...options, precision: 2 });
   return `$${animatedValue.toFixed(2)}`;
@@ -91,10 +86,10 @@ export function useAnimatedCurrency(
 
 export function useAnimatedTokens(
   targetValue: number,
-  options: Omit<UseAnimatedValueOptions, 'precision'> = {}
+  options: Omit<UseAnimatedValueOptions, "precision"> = {},
 ): string {
   const animatedValue = useAnimatedValue(targetValue, { ...options, precision: 0 });
-  
+
   if (animatedValue >= 1_000_000) {
     return `${(animatedValue / 1_000_000).toFixed(1)}M`;
   }
@@ -106,7 +101,7 @@ export function useAnimatedTokens(
 
 export function useAnimatedCount(
   targetValue: number,
-  options: Omit<UseAnimatedValueOptions, 'precision'> = {}
+  options: Omit<UseAnimatedValueOptions, "precision"> = {},
 ): string {
   const animatedValue = useAnimatedValue(targetValue, { ...options, precision: 0 });
   return Math.round(animatedValue).toLocaleString();