@tokentop/ttop 0.2.2 → 0.4.0

package/src/tui/components/DebugConsole.tsx

@@ -1,8 +1,8 @@
-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';
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { copyToClipboard } from "@/utils/clipboard.ts";
+import { type LogEntry, type LogLevel, useLogs } from "../contexts/LogContext.tsx";
+import { useColors } from "../contexts/ThemeContext.tsx";
 
 interface DebugConsoleProps {
   height?: number;
@@ -17,7 +17,10 @@ export interface DebugConsoleHandle {
 
 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) {
+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);
@@ -51,14 +54,14 @@ export const DebugConsole = forwardRef<DebugConsoleHandle, DebugConsoleProps>(fu
   };
 
   const levelLabels: Record<LogLevel, string> = {
-    debug: 'DBG',
-    info: 'INF',
-    warn: 'WRN',
-    error: 'ERR',
+    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 filtered = minRank === 0 ? logs : logs.filter((e) => LOG_LEVEL_RANK[e.level] >= minRank);
   const visibleLogs = filtered.slice(-50);
 
   return (
@@ -69,14 +72,14 @@ export const DebugConsole = forwardRef<DebugConsoleHandle, DebugConsoleProps>(fu
       borderColor={colors.border}
       backgroundColor={colors.background}
     >
-       <box
-         flexDirection="row"
-         justifyContent="space-between"
-         paddingX={1}
-         backgroundColor={colors.foreground}
-         height={1}
-         flexShrink={0}
-       >
+      <box
+        flexDirection="row"
+        justifyContent="space-between"
+        paddingX={1}
+        backgroundColor={colors.foreground}
+        height={1}
+        flexShrink={0}
+      >
         <text>
           <span fg={colors.primary}>
             <strong>Debug Console</strong>
@@ -107,7 +110,13 @@ export const DebugConsole = forwardRef<DebugConsoleHandle, DebugConsoleProps>(fu
             <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} />
+              <LogLine
+                key={entry.id}
+                entry={entry}
+                levelColors={levelColors}
+                levelLabels={levelLabels}
+                colors={colors}
+              />
             ))
           )}
         </box>
@@ -124,25 +133,22 @@ interface LogLineProps {
 }
 
 function LogLine({ entry, levelColors, levelLabels, colors }: LogLineProps) {
-  const time = new Date(entry.timestamp).toLocaleTimeString('en-US', {
+  const time = new Date(entry.timestamp).toLocaleTimeString("en-US", {
     hour12: false,
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
+    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)}` : '';
+  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>
-      {' '}
+      <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>}
@@ -153,9 +159,9 @@ function LogLine({ entry, levelColors, levelLabels, colors }: LogLineProps) {
 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)}` : '';
+    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'));
+  await copyToClipboard(lines.join("\n"));
 }