@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/contexts/TimeWindowContext.tsx

@@ -1,58 +1,58 @@
-import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from "react";
 
-export type TimeWindow = '5m' | '15m' | '1h' | '24h' | '7d' | '30d' | 'all';
+export type TimeWindow = "5m" | "15m" | "1h" | "24h" | "7d" | "30d" | "all";
 
-export const TIME_WINDOW_OPTIONS: TimeWindow[] = ['5m', '15m', '1h', '24h', '7d', '30d', 'all'];
+export const TIME_WINDOW_OPTIONS: TimeWindow[] = ["5m", "15m", "1h", "24h", "7d", "30d", "all"];
 
 export const TIME_WINDOW_LABELS: Record<TimeWindow, string> = {
-  '5m': '5 min',
-  '15m': '15 min',
-  '1h': '1 hour',
-  '24h': '24 hours',
-  '7d': '7 days',
-  '30d': '30 days',
-  'all': 'All time',
+  "5m": "5 min",
+  "15m": "15 min",
+  "1h": "1 hour",
+  "24h": "24 hours",
+  "7d": "7 days",
+  "30d": "30 days",
+  all: "All time",
 };
 
 export const TIME_WINDOW_MS: Record<TimeWindow, number | null> = {
-  '5m': 5 * 60 * 1000,
-  '15m': 15 * 60 * 1000,
-  '1h': 60 * 60 * 1000,
-  '24h': 24 * 60 * 60 * 1000,
-  '7d': 7 * 24 * 60 * 60 * 1000,
-  '30d': 30 * 24 * 60 * 60 * 1000,
-  'all': null,
+  "5m": 5 * 60 * 1000,
+  "15m": 15 * 60 * 1000,
+  "1h": 60 * 60 * 1000,
+  "24h": 24 * 60 * 60 * 1000,
+  "7d": 7 * 24 * 60 * 60 * 1000,
+  "30d": 30 * 24 * 60 * 60 * 1000,
+  all: null,
 };
 
-export type BudgetType = 'daily' | 'weekly' | 'monthly' | 'none';
+export type BudgetType = "daily" | "weekly" | "monthly" | "none";
 
 export const TIME_WINDOW_BUDGET_TYPE: Record<TimeWindow, BudgetType> = {
-  '5m': 'daily',
-  '15m': 'daily',
-  '1h': 'daily',
-  '24h': 'daily',
-  '7d': 'weekly',
-  '30d': 'monthly',
-  'all': 'none',
+  "5m": "daily",
+  "15m": "daily",
+  "1h": "daily",
+  "24h": "daily",
+  "7d": "weekly",
+  "30d": "monthly",
+  all: "none",
 };
 
 export const BUDGET_TYPE_LABELS: Record<BudgetType, string> = {
-  daily: 'Daily',
-  weekly: 'Weekly',
-  monthly: 'Monthly',
-  none: 'Total',
+  daily: "Daily",
+  weekly: "Weekly",
+  monthly: "Monthly",
+  none: "Total",
 };
 
-export type BudgetLock = BudgetType | 'sync';
+export type BudgetLock = BudgetType | "sync";
 
-const BUDGET_LOCK_CYCLE: BudgetLock[] = ['sync', 'daily', 'weekly', 'monthly'];
+const BUDGET_LOCK_CYCLE: BudgetLock[] = ["sync", "daily", "weekly", "monthly"];
 
 export const BUDGET_LOCK_LABELS: Record<BudgetLock, string> = {
-  sync: 'Sync',
-  daily: 'Daily',
-  weekly: 'Weekly',
-  monthly: 'Monthly',
-  none: 'None',
+  sync: "Sync",
+  daily: "Daily",
+  weekly: "Weekly",
+  monthly: "Monthly",
+  none: "None",
 };
 
 interface TimeWindowContextValue {
@@ -90,9 +90,9 @@ function getPrevWindow(current: TimeWindow): TimeWindow {
   return TIME_WINDOW_OPTIONS[prevIdx] as TimeWindow;
 }
 
-export function TimeWindowProvider({ children, defaultWindow = '24h' }: TimeWindowProviderProps) {
+export function TimeWindowProvider({ children, defaultWindow = "24h" }: TimeWindowProviderProps) {
   const [window, setWindowState] = useState<TimeWindow>(defaultWindow);
-  const [budgetLock, setBudgetLock] = useState<BudgetLock>('sync');
+  const [budgetLock, setBudgetLock] = useState<BudgetLock>("sync");
 
   const setWindow = useCallback((w: TimeWindow) => {
     setWindowState(w);
@@ -107,7 +107,7 @@ export function TimeWindowProvider({ children, defaultWindow = '24h' }: TimeWind
   }, []);
 
   const cycleBudgetLock = useCallback(() => {
-    setBudgetLock(current => {
+    setBudgetLock((current) => {
       const idx = BUDGET_LOCK_CYCLE.indexOf(current);
       const nextIdx = (idx + 1) % BUDGET_LOCK_CYCLE.length;
       return BUDGET_LOCK_CYCLE[nextIdx] as BudgetLock;
@@ -116,7 +116,7 @@ export function TimeWindowProvider({ children, defaultWindow = '24h' }: TimeWind
 
   const windowMs = TIME_WINDOW_MS[window];
   const windowLabel = TIME_WINDOW_LABELS[window];
-  const budgetType = budgetLock === 'sync' ? TIME_WINDOW_BUDGET_TYPE[window] : budgetLock;
+  const budgetType = budgetLock === "sync" ? TIME_WINDOW_BUDGET_TYPE[window] : budgetLock;
   const budgetTypeLabel = BUDGET_TYPE_LABELS[budgetType];
   const budgetLockLabel = BUDGET_LOCK_LABELS[budgetLock];
 
@@ -126,33 +126,44 @@ export function TimeWindowProvider({ children, defaultWindow = '24h' }: TimeWind
     return Date.now() - ms;
   }, [window]);
 
-  const value: TimeWindowContextValue = useMemo(() => ({
-    window,
-    setWindow,
-    cycleWindow,
-    cycleWindowBack,
-    windowMs,
-    windowLabel,
-    getWindowStart,
-    budgetType,
-    budgetTypeLabel,
-    budgetLock,
-    setBudgetLock,
-    cycleBudgetLock,
-    budgetLockLabel,
-  }), [window, setWindow, cycleWindow, windowMs, windowLabel, getWindowStart, budgetType, budgetTypeLabel, budgetLock, cycleBudgetLock, budgetLockLabel]);
-
-  return (
-    <TimeWindowContext.Provider value={value}>
-      {children}
-    </TimeWindowContext.Provider>
+  const value: TimeWindowContextValue = useMemo(
+    () => ({
+      window,
+      setWindow,
+      cycleWindow,
+      cycleWindowBack,
+      windowMs,
+      windowLabel,
+      getWindowStart,
+      budgetType,
+      budgetTypeLabel,
+      budgetLock,
+      setBudgetLock,
+      cycleBudgetLock,
+      budgetLockLabel,
+    }),
+    [
+      window,
+      setWindow,
+      cycleWindow,
+      windowMs,
+      windowLabel,
+      getWindowStart,
+      budgetType,
+      budgetTypeLabel,
+      budgetLock,
+      cycleBudgetLock,
+      budgetLockLabel,
+    ],
   );
+
+  return <TimeWindowContext.Provider value={value}>{children}</TimeWindowContext.Provider>;
 }
 
 export function useTimeWindow(): TimeWindowContextValue {
   const context = useContext(TimeWindowContext);
   if (!context) {
-    throw new Error('useTimeWindow must be used within TimeWindowProvider');
+    throw new Error("useTimeWindow must be used within TimeWindowProvider");
   }
   return context;
 }

package/src/tui/contexts/ToastContext.tsx

@@ -1,13 +1,13 @@
-import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useState } from "react";
 
 interface ToastState {
   message: string;
-  type: 'info' | 'success' | 'warning' | 'error';
+  type: "info" | "success" | "warning" | "error";
 }
 
 interface ToastContextValue {
   toast: ToastState | null;
-  showToast: (message: string, type?: 'info' | 'success' | 'warning' | 'error') => void;
+  showToast: (message: string, type?: "info" | "success" | "warning" | "error") => void;
   dismissToast: () => void;
 }
 
@@ -16,9 +16,12 @@ const ToastContext = createContext<ToastContextValue | null>(null);
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toast, setToast] = useState<ToastState | null>(null);
 
-  const showToast = useCallback((message: string, type: 'info' | 'success' | 'warning' | 'error' = 'success') => {
-    setToast({ message, type });
-  }, []);
+  const showToast = useCallback(
+    (message: string, type: "info" | "success" | "warning" | "error" = "success") => {
+      setToast({ message, type });
+    },
+    [],
+  );
 
   const dismissToast = useCallback(() => {
     setToast(null);
@@ -34,7 +37,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 export function useToastContext() {
   const context = useContext(ToastContext);
   if (!context) {
-    throw new Error('useToastContext must be used within a ToastProvider');
+    throw new Error("useToastContext must be used within a ToastProvider");
   }
   return context;
 }

package/src/tui/contexts/index.ts

@@ -1,5 +1,9 @@
-export { ThemeProvider, useTheme, useColors } from './ThemeContext.tsx';
-export { PluginProvider, usePlugins, useProvider, useConfiguredProviders } from './PluginContext.tsx';
-export { LogProvider, useLogs, useLogger, type LogLevel, type LogEntry } from './LogContext.tsx';
-export { InputProvider, useInputFocus } from './InputContext.tsx';
-
+export { InputProvider, useInputFocus } from "./InputContext.tsx";
+export { type LogEntry, type LogLevel, LogProvider, useLogger, useLogs } from "./LogContext.tsx";
+export {
+  PluginProvider,
+  useConfiguredProviders,
+  usePlugins,
+  useProvider,
+} from "./PluginContext.tsx";
+export { ThemeProvider, useColors, useTheme } from "./ThemeContext.tsx";

package/src/tui/createApp.tsx

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
-import type { DemoPreset } from '@/demo/simulator.ts';
-import { TestModeContext } from './hooks/useSafeRenderer.ts';
-import { App } from './App.tsx';
+import type { ReactNode } from "react";
+import type { DemoPreset } from "@/demo/simulator.ts";
+import { App } from "./App.tsx";
+import { TestModeContext } from "./hooks/useSafeRenderer.ts";
 
 export { App };
 
@@ -24,7 +24,7 @@ export const DEFAULT_APP_OPTIONS = {
 
 export function createAppElement(options: CreateAppOptions = {}): ReactNode {
   const isTestMode = options.testMode ?? DEFAULT_APP_OPTIONS.testMode;
-  
+
   const appElement = (
     <App
       debug={options.debug ?? DEFAULT_APP_OPTIONS.debug}
@@ -34,14 +34,10 @@ export function createAppElement(options: CreateAppOptions = {}): ReactNode {
       {...(options.cliPlugins ? { cliPlugins: options.cliPlugins } : {})}
     />
   );
-  
+
   if (isTestMode) {
-    return (
-      <TestModeContext.Provider value={true}>
-        {appElement}
-      </TestModeContext.Provider>
-    );
+    return <TestModeContext.Provider value={true}>{appElement}</TestModeContext.Provider>;
   }
-  
+
   return appElement;
 }

package/src/tui/debug/captureFrame.ts

@@ -1,16 +1,16 @@
 /**
  * Frame Capture Utilities for TUI Debugging
- * 
+ *
  * Provides functions to capture the current terminal render buffer as text,
  * enabling AI-assisted debugging of visual issues.
- * 
+ *
  * @see docs/debugging.md for comprehensive usage guide
  */
 
-import * as fs from 'fs/promises';
-import * as path from 'path';
-import type { CliRenderer } from '@opentui/core';
-import { PATHS } from '@/storage/paths.ts';
+import type { CliRenderer } from "@opentui/core";
+import * as fs from "fs/promises";
+import * as path from "path";
+import { PATHS } from "@/storage/paths.ts";
 
 /** Metadata stored alongside each frame capture */
 export interface FrameMetadata {
@@ -41,13 +41,13 @@ export interface BurstConfig {
  * Get the frames output directory
  */
 export function getFramesDir(): string {
-  return path.join(PATHS.data.logs, 'frames');
+  return path.join(PATHS.data.logs, "frames");
 }
 
 /**
  * Capture the current render buffer as a text string.
  * This captures exactly what is displayed in the terminal.
- * 
+ *
  * @param renderer - The CliRenderer instance
  * @returns The current frame as a text string with line breaks
  */
@@ -60,30 +60,30 @@ export function captureFrameText(renderer: CliRenderer): string {
  * Generate a timestamp-based filename prefix
  */
 function generateTimestamp(): string {
-  return new Date().toISOString().replace(/[:.]/g, '-');
+  return new Date().toISOString().replace(/[:.]/g, "-");
 }
 
 /**
  * Capture the current frame and write to files.
- * 
+ *
  * Creates two files:
  * - frame-{timestamp}-{label}.txt - The raw frame text
  * - frame-{timestamp}-{label}.json - Metadata (dimensions, timestamp, etc.)
- * 
+ *
  * @param renderer - The CliRenderer instance
  * @param label - Optional label for the capture (default: "manual")
  * @returns Information about the captured files
  */
 export async function captureFrameToFile(
   renderer: CliRenderer,
-  label = 'manual'
+  label = "manual",
 ): Promise<CaptureResult> {
   const dir = getFramesDir();
   await fs.mkdir(dir, { recursive: true });
 
   const ts = generateTimestamp();
   const baseName = `frame-${ts}-${label}`;
-  
+
   const frame = captureFrameText(renderer);
   const metadata: FrameMetadata = {
     timestamp: new Date().toISOString(),
@@ -96,8 +96,8 @@ export async function captureFrameToFile(
   const metadataPath = path.join(dir, `${baseName}.json`);
 
   await Promise.all([
-    fs.writeFile(framePath, frame, 'utf-8'),
-    fs.writeFile(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8'),
+    fs.writeFile(framePath, frame, "utf-8"),
+    fs.writeFile(metadataPath, JSON.stringify(metadata, null, 2), "utf-8"),
   ]);
 
   return { framePath, metadataPath, metadata };
@@ -133,7 +133,7 @@ export class BurstRecorder {
    */
   async start(): Promise<CaptureResult[]> {
     if (this.isRecording) {
-      throw new Error('Burst recording already in progress');
+      throw new Error("Burst recording already in progress");
     }
 
     this.isRecording = true;
@@ -150,7 +150,7 @@ export class BurstRecorder {
       }
 
       this.lastCaptureTime = now;
-      
+
       try {
         const result = await this.captureFrame();
         this.capturedFrames.push(result);
@@ -184,7 +184,7 @@ export class BurstRecorder {
     }
 
     this.isRecording = false;
-    
+
     if (this.cleanupFn) {
       this.cleanupFn();
       this.cleanupFn = null;
@@ -219,13 +219,13 @@ export class BurstRecorder {
     const dir = path.join(getFramesDir(), `burst-${this.burstId}`);
     await fs.mkdir(dir, { recursive: true });
 
-    const frameNum = String(this.framesCaptured + 1).padStart(4, '0');
+    const frameNum = String(this.framesCaptured + 1).padStart(4, "0");
     const baseName = `frame-${frameNum}`;
-    
+
     const frame = captureFrameText(this.renderer);
     const metadata: FrameMetadata = {
       timestamp: new Date().toISOString(),
-      label: 'burst',
+      label: "burst",
       width: this.renderer.width,
       height: this.renderer.height,
       frameIndex: this.framesCaptured + 1,
@@ -236,8 +236,8 @@ export class BurstRecorder {
     const metadataPath = path.join(dir, `${baseName}.json`);
 
     await Promise.all([
-      fs.writeFile(framePath, frame, 'utf-8'),
-      fs.writeFile(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8'),
+      fs.writeFile(framePath, frame, "utf-8"),
+      fs.writeFile(metadataPath, JSON.stringify(metadata, null, 2), "utf-8"),
     ]);
 
     return { framePath, metadataPath, metadata };
@@ -246,7 +246,7 @@ export class BurstRecorder {
 
 /**
  * Create a burst recorder for capturing multiple frames.
- * 
+ *
  * @example
  * ```ts
  * const recorder = createBurstRecorder(renderer, { frameCount: 5 });
@@ -254,9 +254,6 @@ export class BurstRecorder {
  * console.log(`Captured ${frames.length} frames`);
  * ```
  */
-export function createBurstRecorder(
-  renderer: CliRenderer,
-  config: BurstConfig
-): BurstRecorder {
+export function createBurstRecorder(renderer: CliRenderer, config: BurstConfig): BurstRecorder {
   return new BurstRecorder(renderer, config);
 }