@tokentop/ttop 0.2.2

package/src/tui/App.tsx

@@ -0,0 +1,381 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useKeyboard } from '@opentui/react';
+
+import { captureFrameToFile, createBurstRecorder, type BurstRecorder } from './debug/captureFrame.ts';
+import { pluginLifecycle } from '@/plugins/lifecycle.ts';
+import { ThemeProvider, useColors, useTheme, resolveTheme } from './contexts/ThemeContext.tsx';
+import * as builtinThemeExports from '@/plugins/themes/index.ts';
+import type { ThemePlugin } from '@/plugins/types/theme.ts';
+
+const builtinThemeList = Object.values(builtinThemeExports) as ThemePlugin[];
+import { PluginProvider, usePlugins } from './contexts/PluginContext.tsx';
+import { LogProvider, useLogs } from './contexts/LogContext.tsx';
+import { InputProvider, useInputFocus } from './contexts/InputContext.tsx';
+import { AgentSessionProvider, useAgentSessions } from './contexts/AgentSessionContext.tsx';
+import { StorageProvider } from './contexts/StorageContext.tsx';
+import { TimeWindowProvider } from './contexts/TimeWindowContext.tsx';
+import { ConfigProvider, useConfig } from './contexts/ConfigContext.tsx';
+import { DrawerProvider, useDrawer } from './contexts/DrawerContext.tsx';
+import { SessionDetailsDrawer } from './components/SessionDetailsDrawer.tsx';
+import { Header } from './components/Header.tsx';
+import { StatusBar } from './components/StatusBar.tsx';
+import { Toast } from './components/Toast.tsx';
+import { ToastProvider, useToastContext } from './contexts/ToastContext.tsx';
+import { DashboardRuntimeProvider, useDashboardRuntime } from './contexts/DashboardRuntimeContext.tsx';
+import { RealTimeActivityProvider } from './contexts/RealTimeActivityContext.tsx';
+import { RealTimeDashboard } from './views/RealTimeDashboard.tsx';
+import { Dashboard } from './views/Dashboard.tsx';
+import { HistoricalTrendsView } from './views/HistoricalTrendsView.tsx';
+import { ProjectsView } from './views/ProjectsView.tsx';
+import { CommandPalette, type CommandAction } from './components/CommandPalette.tsx';
+import { SettingsModal } from './components/SettingsModal.tsx';
+import { DebugPanel } from './components/DebugPanel.tsx';
+import { copyToClipboard } from '@/utils/clipboard.ts';
+import { useSafeRenderer } from './hooks/useSafeRenderer.ts';
+import type { DemoPreset } from '@/demo/simulator.ts';
+import { DemoModeProvider, useDemoMode } from './contexts/DemoModeContext.tsx';
+
+interface AppProps {
+  debug?: boolean;
+  demoMode?: boolean;
+  demoSeed?: number;
+  demoPreset?: DemoPreset;
+  cliPlugins?: string[];
+}
+
+type View = 'dashboard' | 'providers' | 'trends' | 'projects';
+
+function AppContent() {
+  const renderer = useSafeRenderer();
+  const colors = useColors();
+  const { theme, setTheme } = useTheme();
+  const { refreshAllProviders, isInitialized, themes } = usePlugins();
+  const { info } = useLogs();
+  const { toast, showToast, dismissToast } = useToastContext();
+  const { isInputFocused } = useInputFocus();
+  const { config, updateConfig } = useConfig();
+  const { demoMode } = useDemoMode();
+  const { selectedSession, hideDrawer, isOpen: isDrawerOpen } = useDrawer();
+  const { sessions } = useAgentSessions();
+  const { debugDataRef, activity, sparkData } = useDashboardRuntime();
+  const burstRecorderRef = { current: null as BurstRecorder | null };
+
+  const refreshInterval = config.refresh.pauseAutoRefresh ? 0 : config.refresh.intervalMs;
+
+  const [lastRefresh, setLastRefresh] = useState<number | null>(null);
+  const [activeView, setActiveView] = useState<View>('dashboard');
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showDebugPanel, setShowDebugPanel] = useState(false);
+
+  const isModalOpen = showCommandPalette || showSettings || showDebugPanel || isDrawerOpen;
+
+  const shutdownPromiseRef = { current: null as Promise<void> | null };
+  const gracefulShutdown = useCallback(async () => {
+    if (shutdownPromiseRef.current) return shutdownPromiseRef.current;
+    shutdownPromiseRef.current = (async () => {
+      await pluginLifecycle.stopAll();
+      await pluginLifecycle.destroyAll();
+      renderer?.destroy();
+    })();
+    return shutdownPromiseRef.current;
+  }, [renderer]);
+
+  const inspectorData = useMemo(() => ({
+    sessions: sessions.map(s => ({
+      sessionId: s.sessionId,
+      agentName: s.agentName,
+      status: s.status,
+      totals: s.totals,
+      lastActivityAt: s.lastActivityAt,
+    })),
+    debugData: debugDataRef.current,
+    activity,
+    sparkData,
+  }), [sessions, debugDataRef, activity, sparkData]);
+
+  const handleCaptureFrame = useCallback(async () => {
+    if (!renderer) {
+      showToast('No renderer available', 'error');
+      return;
+    }
+    try {
+      const result = await captureFrameToFile(renderer, 'manual');
+      info(`Frame captured: ${result.framePath}`);
+      if (config.notifications.toastsEnabled) {
+        showToast('Frame captured');
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      info(`Frame capture failed: ${msg}`);
+      if (config.notifications.toastsEnabled) {
+        showToast('Capture failed', 'error');
+      }
+    }
+  }, [renderer, info, showToast, config.notifications.toastsEnabled]);
+
+  const handleBurstRecord = useCallback(async () => {
+    if (!renderer) return;
+    if (burstRecorderRef.current?.recording) {
+      const frames = burstRecorderRef.current.stop();
+      info(`Burst stopped: ${frames.length} frames captured`);
+      if (config.notifications.toastsEnabled) {
+        showToast(`Burst: ${frames.length} frames`);
+      }
+      burstRecorderRef.current = null;
+      return;
+    }
+
+    burstRecorderRef.current = createBurstRecorder(renderer, { frameCount: 10, minInterval: 200 });
+    info('Burst recording started (10 frames)');
+    if (config.notifications.toastsEnabled) {
+      showToast('Recording burst...');
+    }
+
+    const frames = await burstRecorderRef.current.start();
+    info(`Burst complete: ${frames.length} frames in ${frames[0]?.framePath.split('/').slice(0, -1).join('/')}`);
+    if (config.notifications.toastsEnabled) {
+      showToast(`Burst: ${frames.length} frames`);
+    }
+    burstRecorderRef.current = null;
+  }, [renderer, info, showToast, config.notifications.toastsEnabled]);
+
+  const handleMouseUp = useCallback(async () => {
+    if (!renderer) return;
+    const selection = renderer.getSelection();
+    const text = selection?.getSelectedText();
+    if (text && text.length > 0) {
+      try {
+        await copyToClipboard(text);
+        if (config.notifications.toastsEnabled) {
+          showToast('Copied to clipboard');
+        }
+      } catch {
+        if (config.notifications.toastsEnabled) {
+          showToast('Copy failed', 'error');
+        }
+      }
+      renderer.clearSelection();
+    }
+  }, [renderer, showToast, config.notifications.toastsEnabled]);
+
+  const commands: CommandAction[] = useMemo(() => {
+    const base: CommandAction[] = [
+      { id: 'view-dashboard', label: 'Go to Dashboard', shortcut: '1', action: () => setActiveView('dashboard') },
+      { id: 'view-providers', label: 'Go to Providers', shortcut: '2', action: () => setActiveView('providers') },
+      { id: 'view-trends', label: 'Go to Trends', shortcut: '3', action: () => setActiveView('trends') },
+      { id: 'view-projects', label: 'Go to Projects', shortcut: '4', action: () => setActiveView('projects') },
+      { id: 'open-settings', label: 'Open Settings', shortcut: ',', action: () => setShowSettings(true) },
+      { id: 'refresh', label: 'Refresh Data', shortcut: 'r', action: () => {
+        if (isInitialized) {
+          info('Manual refresh triggered');
+          refreshAllProviders().then(() => setLastRefresh(Date.now()));
+        }
+      }},
+      { id: 'toggle-debug', label: 'Toggle Debug Panel', shortcut: '~', action: () => setShowDebugPanel(prev => !prev) },
+      { id: 'capture-frame', label: 'Capture Frame', shortcut: 'Ctrl+P', action: () => handleCaptureFrame() },
+      { id: 'quit', label: 'Quit', shortcut: 'q', action: () => void gracefulShutdown() },
+    ];
+
+    const themeCommands: CommandAction[] = themes.map(t => ({
+      id: `theme-${t.id}`,
+      label: `Theme: ${t.name}`,
+      action: () => updateConfig({ ...config, display: { ...config.display, theme: t.id } }),
+    }));
+
+    return [...base, ...themeCommands];
+  }, [isInitialized, refreshAllProviders, info, handleCaptureFrame, renderer, gracefulShutdown, themes, config, updateConfig]);
+
+  useKeyboard((key) => {
+    if (key.ctrl && key.name === 'p') {
+      handleCaptureFrame();
+      return;
+    }
+    if (key.ctrl && key.shift && key.name === 'p') {
+      handleBurstRecord();
+      return;
+    }
+
+    if (isModalOpen) {
+      return;
+    }
+
+    if (isInputFocused) {
+      return;
+    }
+
+    if (key.name === '1') {
+      setActiveView('dashboard');
+    }
+    if (key.name === '2') {
+      setActiveView('providers');
+    }
+    if (key.name === '3') {
+      setActiveView('trends');
+    }
+    if (key.name === '4') {
+      setActiveView('projects');
+    }
+    if (key.sequence === ',') {
+      setShowSettings(true);
+    }
+
+    if (key.sequence === ':' || (key.shift && key.name === ';')) {
+      setShowCommandPalette(true);
+      return;
+    }
+
+    if (key.name === 'q' || (key.ctrl && key.name === 'c')) {
+      void gracefulShutdown();
+    }
+    if (key.name === 'r' && isInitialized) {
+      info('Manual refresh triggered');
+      refreshAllProviders().then(() => setLastRefresh(Date.now()));
+    }
+    if (key.sequence === '~' || (key.shift && key.name === 'd')) {
+      setShowDebugPanel(true);
+    }
+  });
+
+  useEffect(() => {
+    if (themes.length === 0) return;
+    const resolved = resolveTheme(
+      config.display.theme,
+      config.display.colorScheme,
+      themes,
+      renderer?.themeMode ?? null,
+    );
+    if (resolved.id !== theme.id) {
+      setTheme(resolved);
+    }
+  }, [themes, config.display.theme, config.display.colorScheme, renderer]);
+
+  useEffect(() => {
+    if (isInitialized) {
+      info('Application initialized');
+      refreshAllProviders().then(() => setLastRefresh(Date.now()));
+    }
+  }, [isInitialized]);
+
+  useEffect(() => {
+    if (!isInitialized || refreshInterval <= 0) return;
+
+    const interval = setInterval(() => {
+      info('Auto-refresh triggered');
+      refreshAllProviders().then(() => setLastRefresh(Date.now()));
+    }, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [isInitialized, refreshInterval, refreshAllProviders, info]);
+
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={colors.background}
+      onMouseUp={handleMouseUp}
+      position="relative"
+    >
+      <Header
+        activeView={activeView}
+        demoMode={demoMode}
+      />
+
+      {activeView === 'dashboard' && <RealTimeDashboard />}
+      {activeView === 'providers' && <Dashboard />}
+      {activeView === 'trends' && <HistoricalTrendsView />}
+      {activeView === 'projects' && <ProjectsView />}
+
+      <StatusBar
+        lastRefresh={lastRefresh ?? 0}
+        nextRefresh={lastRefresh ? lastRefresh + refreshInterval : 0}
+        demoMode={demoMode}
+      />
+
+      {toast && config.notifications.toastsEnabled && (
+        <Toast
+          message={toast.message}
+          type={toast.type}
+          onDismiss={dismissToast}
+        />
+      )}
+
+      {showCommandPalette && (
+        <CommandPalette
+          commands={commands}
+          onClose={() => setShowCommandPalette(false)}
+        />
+      )}
+
+      {showSettings && (
+        <SettingsModal onClose={() => setShowSettings(false)} />
+      )}
+
+      {showDebugPanel && (
+        <DebugPanel
+          onClose={() => setShowDebugPanel(false)}
+          inspectorData={inspectorData}
+        />
+      )}
+
+      {isDrawerOpen && selectedSession && (
+        <SessionDetailsDrawer
+          session={selectedSession}
+          onClose={hideDrawer}
+        />
+      )}
+    </box>
+  );
+}
+
+function ConfiguredApp({ cliPlugins }: { cliPlugins?: string[] }) {
+  const { config, isLoading } = useConfig();
+
+  if (isLoading) {
+    return null;
+  }
+
+  const initialTheme = builtinThemeList.find(t => t.id === config.display.theme);
+  const themeProps = initialTheme ? { initialTheme } : {};
+
+  return (
+    <ThemeProvider {...themeProps}>
+      <TimeWindowProvider defaultWindow={config.display.defaultTimeWindow}>
+        <ToastProvider>
+          <PluginProvider {...(cliPlugins ? { cliPlugins } : {})}>
+            <RealTimeActivityProvider>
+              <AgentSessionProvider autoRefresh={true} refreshInterval={1000}>
+                <DashboardRuntimeProvider>
+                <DrawerProvider>
+                  <AppContent />
+                </DrawerProvider>
+                </DashboardRuntimeProvider>
+              </AgentSessionProvider>
+            </RealTimeActivityProvider>
+          </PluginProvider>
+        </ToastProvider>
+      </TimeWindowProvider>
+    </ThemeProvider>
+  );
+}
+
+export function App({ debug = false, demoMode = false, demoSeed, demoPreset, cliPlugins }: AppProps) {
+  const demoProviderProps: { demoMode: boolean; demoSeed?: number; demoPreset?: DemoPreset } = { demoMode };
+  if (demoSeed !== undefined) demoProviderProps.demoSeed = demoSeed;
+  if (demoPreset !== undefined) demoProviderProps.demoPreset = demoPreset;
+
+  return (
+    <DemoModeProvider {...demoProviderProps}>
+      <LogProvider debugEnabled={debug}>
+        <InputProvider>
+          <StorageProvider>
+            <ConfigProvider>
+              <ConfiguredApp {...(cliPlugins ? { cliPlugins } : {})} />
+            </ConfigProvider>
+          </StorageProvider>
+        </InputProvider>
+      </LogProvider>
+    </DemoModeProvider>
+  );
+}

package/src/tui/components/CommandPalette.tsx

@@ -0,0 +1,166 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useKeyboard, useTerminalDimensions } from '@opentui/react';
+import { RGBA } from '@opentui/core';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { useInputFocus } from '../contexts/InputContext.tsx';
+
+const OVERLAY_BG = RGBA.fromValues(0.0, 0.0, 0.0, 0.5);
+
+export interface CommandAction {
+  id: string;
+  label: string;
+  shortcut?: string;
+  action: () => void;
+}
+
+interface CommandPaletteProps {
+  commands: CommandAction[];
+  onClose: () => void;
+}
+
+export function CommandPalette({ commands, onClose }: CommandPaletteProps) {
+  const colors = useColors();
+  const { width: termWidth, height: termHeight } = useTerminalDimensions();
+  const { setInputFocused } = useInputFocus();
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    setInputFocused(true);
+    return () => setInputFocused(false);
+  }, [setInputFocused]);
+
+  const filteredCommands = useMemo(() => {
+    if (!query) return commands;
+    const lowerQuery = query.toLowerCase();
+    return commands.filter(cmd =>
+      cmd.label.toLowerCase().includes(lowerQuery) ||
+      cmd.id.toLowerCase().includes(lowerQuery)
+    );
+  }, [commands, query]);
+
+  const width = Math.max(50, Math.min(termWidth - 4, 80));
+  const maxVisibleItems = 15;
+  const listHeight = Math.min(filteredCommands.length, maxVisibleItems);
+  const height = Math.min(listHeight + 5, termHeight - 4);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  useKeyboard((key) => {
+    if (key.name === 'escape') {
+      onClose();
+      return;
+    }
+
+    if (key.name === 'return') {
+      const selected = filteredCommands[selectedIndex];
+      if (selected) {
+        onClose();
+        selected.action();
+      }
+      return;
+    }
+
+    if (query === '' && !key.ctrl && !key.meta) {
+      const keyStr = key.sequence || '';
+      const matchingCmd = commands.find(cmd => cmd.shortcut === keyStr);
+      if (matchingCmd) {
+        onClose();
+        matchingCmd.action();
+        return;
+      }
+    }
+
+    if (key.name === 'down' || (key.ctrl && key.name === 'n') || (query === '' && key.name === 'j')) {
+      setSelectedIndex(i => Math.min(i + 1, filteredCommands.length - 1));
+      return;
+    }
+
+    if (key.name === 'up' || (key.ctrl && key.name === 'p') || (query === '' && key.name === 'k')) {
+      setSelectedIndex(i => Math.max(i - 1, 0));
+      return;
+    }
+
+    if (key.name === 'backspace') {
+      setQuery(q => q.slice(0, -1));
+      return;
+    }
+
+    if (key.sequence && key.sequence.length === 1 && /^[\w\-_., ~:;!@#$%^&*()]$/.test(key.sequence)) {
+      setQuery(q => q + key.sequence);
+      return;
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      zIndex={100}
+      backgroundColor={OVERLAY_BG}
+    >
+      <box
+        width={width}
+        height={height}
+        border
+        borderStyle="double"
+        borderColor={colors.primary}
+        flexDirection="column"
+        backgroundColor={colors.background}
+        overflow="hidden"
+      >
+        <box padding={1} height={1}>
+          <text height={1}>
+            <span fg={colors.textMuted}>: </span>
+            <span fg={colors.text}>{query}</span>
+            <span fg={colors.primary}>│</span>
+          </text>
+        </box>
+
+        <scrollbox flexGrow={1}>
+          <box flexDirection="column">
+            {filteredCommands.length === 0 ? (
+              <box padding={1} height={1}>
+                <text height={1} fg={colors.textMuted}>No matching commands</text>
+              </box>
+            ) : (
+              filteredCommands.map((cmd, idx) => {
+                const isSelected = idx === selectedIndex;
+                return (
+                   <box
+                     key={cmd.id}
+                     flexDirection="row"
+                     justifyContent="space-between"
+                     paddingX={1}
+                     height={1}
+                     {...(isSelected ? { backgroundColor: colors.primary } : {})}
+                   >
+                    <text height={1} fg={isSelected ? colors.background : colors.text}>
+                      {cmd.label}
+                    </text>
+                    {cmd.shortcut && (
+                      <text height={1} fg={isSelected ? colors.background : colors.textSubtle}>
+                        {cmd.shortcut}
+                      </text>
+                    )}
+                  </box>
+                );
+              })
+            )}
+          </box>
+        </scrollbox>
+
+         <box paddingX={1} height={1}>
+           <text height={1} fg={colors.textSubtle}>↑↓ navigate  Enter select  Esc close</text>
+         </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/DebugConsole.tsx

@@ -0,0 +1,161 @@
+import { useRef, useImperativeHandle, forwardRef, useEffect } from 'react';
+import type { ScrollBoxRenderable } from '@opentui/core';
+import { useColors } from '../contexts/ThemeContext.tsx';
+import { useLogs, type LogEntry, type LogLevel } from '../contexts/LogContext.tsx';
+import { copyToClipboard } from '@/utils/clipboard.ts';
+
+interface DebugConsoleProps {
+  height?: number;
+  follow?: boolean;
+  minLevel?: LogLevel;
+}
+
+export interface DebugConsoleHandle {
+  scrollToTop: () => void;
+  scrollToBottom: () => void;
+}
+
+const LOG_LEVEL_RANK: Record<LogLevel, number> = { debug: 0, info: 1, warn: 2, error: 3 };
+
+export const DebugConsole = forwardRef<DebugConsoleHandle, DebugConsoleProps>(function DebugConsole({ height = 15, follow = true, minLevel = 'info' }, ref) {
+  const colors = useColors();
+  const { logs } = useLogs();
+  const scrollboxRef = useRef<ScrollBoxRenderable>(null);
+
+  useImperativeHandle(ref, () => ({
+    scrollToTop: () => {
+      scrollboxRef.current?.scrollTo(0);
+    },
+    scrollToBottom: () => {
+      const scrollbox = scrollboxRef.current;
+      if (scrollbox) {
+        scrollbox.scrollTo(scrollbox.scrollHeight);
+      }
+    },
+  }));
+
+  useEffect(() => {
+    if (follow) {
+      const scrollbox = scrollboxRef.current;
+      if (scrollbox) {
+        scrollbox.scrollTo(scrollbox.scrollHeight);
+      }
+    }
+  }, [logs.length, follow]);
+
+  const levelColors: Record<LogLevel, string> = {
+    debug: colors.textSubtle,
+    info: colors.info,
+    warn: colors.warning,
+    error: colors.error,
+  };
+
+  const levelLabels: Record<LogLevel, string> = {
+    debug: 'DBG',
+    info: 'INF',
+    warn: 'WRN',
+    error: 'ERR',
+  };
+
+  const minRank = LOG_LEVEL_RANK[minLevel];
+  const filtered = minRank === 0 ? logs : logs.filter(e => LOG_LEVEL_RANK[e.level] >= minRank);
+  const visibleLogs = filtered.slice(-50);
+
+  return (
+    <box
+      flexDirection="column"
+      height={height}
+      borderStyle="single"
+      borderColor={colors.border}
+      backgroundColor={colors.background}
+    >
+       <box
+         flexDirection="row"
+         justifyContent="space-between"
+         paddingX={1}
+         backgroundColor={colors.foreground}
+         height={1}
+         flexShrink={0}
+       >
+        <text>
+          <span fg={colors.primary}>
+            <strong>Debug Console</strong>
+          </span>
+          <span fg={colors.textMuted}> ({logs.length} entries)</span>
+          {follow && <span fg={colors.success}> [FOLLOW]</span>}
+        </text>
+        <text fg={colors.textSubtle}>~:close f:follow c:clear G:bottom gg:top</text>
+      </box>
+
+      <scrollbox
+        ref={scrollboxRef}
+        focused
+        flexGrow={1}
+        style={{
+          rootOptions: { backgroundColor: colors.background },
+          viewportOptions: { backgroundColor: colors.background },
+          scrollbarOptions: {
+            trackOptions: {
+              foregroundColor: colors.textSubtle,
+              backgroundColor: colors.background,
+            },
+          },
+        }}
+      >
+        <box flexDirection="column" padding={1}>
+          {visibleLogs.length === 0 ? (
+            <text fg={colors.textSubtle}>No logs yet. Actions will appear here.</text>
+          ) : (
+            visibleLogs.map((entry) => (
+              <LogLine key={entry.id} entry={entry} levelColors={levelColors} levelLabels={levelLabels} colors={colors} />
+            ))
+          )}
+        </box>
+      </scrollbox>
+    </box>
+  );
+});
+
+interface LogLineProps {
+  entry: LogEntry;
+  levelColors: Record<LogLevel, string>;
+  levelLabels: Record<LogLevel, string>;
+  colors: ReturnType<typeof useColors>;
+}
+
+function LogLine({ entry, levelColors, levelLabels, colors }: LogLineProps) {
+  const time = new Date(entry.timestamp).toLocaleTimeString('en-US', {
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+
+  const levelColor = levelColors[entry.level];
+  const levelLabel = levelLabels[entry.level];
+
+  const source = entry.source ? `[${entry.source}]` : '';
+  const dataStr = entry.data ? ` ${JSON.stringify(entry.data)}` : '';
+
+  return (
+    <text>
+      <span fg={colors.textSubtle}>{time}</span>
+      {' '}
+      <span fg={levelColor}>{levelLabel}</span>
+      {' '}
+      {source && <span fg={colors.textMuted}>{source} </span>}
+      <span fg={colors.text}>{entry.message}</span>
+      {dataStr && <span fg={colors.textSubtle}>{dataStr}</span>}
+    </text>
+  );
+}
+
+export async function copyLogsToClipboard(logs: LogEntry[]): Promise<void> {
+  const lines = logs.map((entry) => {
+    const time = new Date(entry.timestamp).toISOString();
+    const src = entry.source ? `[${entry.source}]` : '';
+    const dataStr = entry.data ? ` ${JSON.stringify(entry.data)}` : '';
+    return `${time} ${entry.level.toUpperCase().padEnd(5)} ${src} ${entry.message}${dataStr}`;
+  });
+  await copyToClipboard(lines.join('\n'));
+}