salvetron 0.1.0

package/src/modules/native-logs/ui/containers/native-logs-container/native-logs-container.tsx

@@ -0,0 +1,80 @@
+import { Box } from 'ink'
+import { useCallback, useEffect, useRef } from 'react'
+import { useTerminalSize } from '../../../../../shared/hooks/use-terminal-size.js'
+import { useListNavigation } from '../../../../../shared/hooks/use-list-navigation.js'
+import { useDetailPanel } from '../../../../../shared/hooks/use-detail-panel.js'
+import { useNativeLogs } from '../../../store/native-logs.store.js'
+import { NativeLogList } from '../../components/native-log-list/index.js'
+import { NativeLogDetail } from '../../components/native-log-detail/index.js'
+import { formatBody, formatPlainBody } from '../../../../../shared/utils/format-body.js'
+import type { NativeLogEvent } from '@salve-software/salvetron-types'
+
+const OVERHEAD_ROWS = 6
+const DETAIL_FIXED_ROWS = 3
+const MIN_LIST_ROWS = 4
+
+export function NativeLogsContainer() {
+  const [cols, rows] = useTerminalSize()
+  const logs = useNativeLogs()
+
+  const availableRows = rows - OVERHEAD_ROWS
+  const detailHeight = Math.max(DETAIL_FIXED_ROWS + 2, availableRows - MIN_LIST_ROWS)
+  const metaVisibleRows = detailHeight - DETAIL_FIXED_ROWS
+
+  const metaLinesRef = useRef<string[]>([])
+  const selectedLogRef = useRef<NativeLogEvent | null>(null)
+
+  const onCopyBody = useCallback(() => {
+    const log = selectedLogRef.current
+    if (!log) return ''
+    const meta = log.metadata ? formatPlainBody(JSON.stringify(log.metadata)) : ''
+    return meta ? `${log.message}\n\n${meta}` : log.message
+  }, [])
+
+  const { detailOpen, detailScrollOffset, resetDetailScroll, copyFeedback } = useDetailPanel({
+    linesRef: metaLinesRef,
+    visibleRows: metaVisibleRows,
+    scrollStep: 5,
+    onCopyBody,
+  })
+
+  const listRows = detailOpen
+    ? Math.max(MIN_LIST_ROWS, availableRows - detailHeight)
+    : availableRows
+
+  const { selectedIndex, scrollOffset } = useListNavigation({ count: logs.length, visibleRows: listRows })
+
+  const selectedLog = logs[selectedIndex] ?? null
+  const metaLines = selectedLog?.metadata ? formatBody(JSON.stringify(selectedLog.metadata)) : []
+  metaLinesRef.current = metaLines
+  selectedLogRef.current = selectedLog
+
+  useEffect(() => {
+    resetDetailScroll()
+  }, [selectedIndex, resetDetailScroll])
+
+  return (
+    <Box flexDirection="column">
+      <Box flexGrow={1}>
+        <NativeLogList
+          logs={logs}
+          visibleRows={listRows}
+          selectedIndex={selectedIndex}
+          scrollOffset={scrollOffset}
+        />
+      </Box>
+      {detailOpen && selectedLog
+        ?
+        <NativeLogDetail
+          log={selectedLog}
+          width={cols}
+          metaLines={metaLines}
+          metaScrollOffset={detailScrollOffset}
+          metaVisibleRows={metaVisibleRows}
+          copyFeedback={copyFeedback}
+        />
+        : null
+      }
+    </Box>
+  )
+}

package/src/modules/network/library/constants.ts

@@ -0,0 +1,15 @@
+export const METHOD_COLOR: Record<string, string> = {
+  GET: 'green',
+  POST: 'cyan',
+  PUT: 'yellow',
+  PATCH: 'yellow',
+  DELETE: 'red',
+  HEAD: 'gray',
+}
+
+export function getStatusColor(statusCode: number | null): string {
+  if (!statusCode) return 'gray'
+  if (statusCode >= 500) return 'red'
+  if (statusCode >= 400) return 'yellow'
+  return 'green'
+}

package/src/modules/network/store/network.store.ts

@@ -0,0 +1,58 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import type { NetworkEvent, NetworkLog } from '@salve-software/salvetron-types'
+import { normalizeHttpMethod } from '@salve-software/salvetron-types'
+
+interface NetworkStore {
+  logsArray: NetworkLog[]
+  addOrUpdateLog: (event: NetworkEvent) => void
+  clear: () => void
+}
+
+const MAX = 100
+
+export const useNetworkStore = create<NetworkStore>((set) => ({
+  logsArray: [],
+  addOrUpdateLog: (event) =>
+    set((s) => {
+      if (event.stage === 'request') {
+        const entry: NetworkLog = {
+          requestId: event.requestId,
+          deviceId: event.deviceId ?? 'unknown',
+          projectId: event.projectId,
+          method: normalizeHttpMethod(event.method),
+          url: event.url,
+          requestHeaders: event.headers ?? {},
+          requestBody: event.body ?? null,
+          requestTimestamp: event.timestamp,
+          statusCode: null,
+          responseHeaders: null,
+          responseBody: null,
+          responseTimestamp: null,
+          duration: null,
+          state: 'pending',
+        }
+        return { logsArray: [...s.logsArray, entry].slice(-MAX) }
+      }
+
+      const idx = s.logsArray.findIndex((l) => l.requestId === event.requestId)
+      if (idx === -1) return s
+
+      const updated = [...s.logsArray]
+      updated[idx] = {
+        ...updated[idx],
+        statusCode: event.statusCode,
+        responseHeaders: event.headers ?? null,
+        responseBody: event.body ?? null,
+        responseTimestamp: event.timestamp,
+        duration: event.duration,
+        state: 'completed',
+      }
+      return { logsArray: updated }
+    }),
+  clear: () => set({ logsArray: [] }),
+}))
+
+export const useNetworkLogs = () => useNetworkStore(useShallow((s) => s.logsArray))
+export const useRecentNetworkLogs = (n: number) =>
+  useNetworkStore(useShallow((s) => s.logsArray.slice(-n)))

package/src/modules/network/ui/components/network-detail/index.ts

@@ -0,0 +1 @@
+export { NetworkDetail } from './network-detail'

package/src/modules/network/ui/components/network-detail/network-detail.tsx

@@ -0,0 +1,82 @@
+import { Box, Text } from 'ink'
+import type { NetworkLog } from '@salve-software/salvetron-types'
+import { METHOD_COLOR, getStatusColor } from '../../../library/constants.js'
+import type { CopyFeedback } from '../../../../../shared/hooks/use-detail-panel.js'
+
+interface NetworkDetailProps {
+  log: NetworkLog
+  width: number
+  bodyLines: string[]
+  bodyScrollOffset: number
+  bodyVisibleRows: number
+  copyFeedback?: CopyFeedback | null
+}
+
+export function NetworkDetail({ log, width, bodyLines, bodyScrollOffset, bodyVisibleRows, copyFeedback }: NetworkDetailProps) {
+  const time = new Date(log.requestTimestamp).toLocaleTimeString('en', { hour12: false })
+  const reqHeaders = Object.entries(log.requestHeaders ?? {})
+  const resHeaders = Object.entries(log.responseHeaders ?? {})
+  const visibleLines = bodyLines.slice(bodyScrollOffset, bodyScrollOffset + bodyVisibleRows)
+  const canScroll = bodyLines.length > bodyVisibleRows
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="gray"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box gap={2}>
+        <Text color={METHOD_COLOR[log.method] ?? 'white'} bold>{log.method}</Text>
+        <Text color={getStatusColor(log.statusCode)} bold>
+          {log.statusCode ?? 'pending'}
+        </Text>
+        {log.duration ? <Text color="gray">{log.duration}ms</Text> : null}
+        <Text color="gray" dimColor>{time}</Text>
+        {copyFeedback
+          ?
+          <Text color={copyFeedback.success ? 'green' : 'red'}>
+            {copyFeedback.success
+              ? (copyFeedback.kind === 'extra' ? '✓ curl copied' : '✓ Copied')
+              : '✗ Copy failed'}
+          </Text>
+          : null
+        }
+      </Box>
+      <Text color="whiteBright">{log.url.slice(0, width - 2)}</Text>
+      {reqHeaders.length > 0
+        ?
+        <Text color="whiteBright" dimColor>
+          req: {reqHeaders.slice(0, 3).map(([k, v]) => `${k}: ${v}`).join('  ')}
+        </Text>
+        : null
+      }
+      {resHeaders.length > 0
+        ?
+        <Text color="whiteBright" dimColor>
+          res: {resHeaders.slice(0, 3).map(([k, v]) => `${k}: ${v}`).join('  ')}
+        </Text>
+        : null
+      }
+      {bodyLines.length > 0
+        ?
+        <Box flexDirection="column">
+          <Text color="whiteBright" dimColor>
+            {'── body'}
+            {canScroll ? `  [ = scroll up   ] = scroll down  ·  line ${bodyScrollOffset + 1} of ${bodyLines.length}` : ''}
+            {'  ·  c copy · u curl'}
+            {' ──'}
+          </Text>
+          {visibleLines.map((line, i) => (
+            <Text key={i}>{line}</Text>
+          ))}
+        </Box>
+        : null
+      }
+    </Box>
+  )
+}

package/src/modules/network/ui/components/network-row/index.ts

@@ -0,0 +1 @@
+export { NetworkRow } from './network-row'

package/src/modules/network/ui/components/network-row/network-row.tsx

@@ -0,0 +1,23 @@
+import { Box, Text } from 'ink'
+import type { NetworkLog } from '@salve-software/salvetron-types'
+import { METHOD_COLOR, getStatusColor } from '../../../library/constants.js'
+
+interface NetworkRowProps {
+  log: NetworkLog
+  urlMaxWidth: number
+  isSelected?: boolean
+}
+
+export function NetworkRow({ log, urlMaxWidth, isSelected = false }: NetworkRowProps) {
+  const dur = log.duration ? `${log.duration}ms` : '...'
+
+  return (
+    <Box gap={1}>
+      <Text color="cyan">{isSelected ? '▶' : ' '}</Text>
+      <Text color={METHOD_COLOR[log.method] ?? 'white'}>{log.method.padEnd(8)}</Text>
+      <Text color={getStatusColor(log.statusCode)}>{String(log.statusCode ?? '---').padEnd(7)}</Text>
+      <Text color="gray">{dur.padEnd(8)}</Text>
+      <Text>{log.url.slice(0, urlMaxWidth)}</Text>
+    </Box>
+  )
+}

package/src/modules/network/ui/components/network-table-header/index.ts

@@ -0,0 +1 @@
+export { NetworkTableHeader } from './network-table-header'

package/src/modules/network/ui/components/network-table-header/network-table-header.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from 'ink'
+
+export function NetworkTableHeader() {
+  return (
+    <Box gap={1}>
+      <Text bold color="gray">{'METHOD'.padEnd(8)}</Text>
+      <Text bold color="gray">{'STATUS'.padEnd(7)}</Text>
+      <Text bold color="gray">{'DUR'.padEnd(8)}</Text>
+      <Text bold color="gray">URL</Text>
+    </Box>
+  )
+}

package/src/modules/network/ui/containers/network-container/index.ts

@@ -0,0 +1 @@
+export { NetworkContainer } from './network-container'

package/src/modules/network/ui/containers/network-container/network-container.tsx

@@ -0,0 +1,93 @@
+import { Box } from 'ink'
+import { useCallback, useEffect, useRef } from 'react'
+import { useTerminalSize } from '../../../../../shared/hooks/use-terminal-size.js'
+import { useListNavigation } from '../../../../../shared/hooks/use-list-navigation.js'
+import { useDetailPanel } from '../../../../../shared/hooks/use-detail-panel.js'
+import { useNetworkLogs } from '../../../store/network.store.js'
+import { NetworkTableHeader } from '../../components/network-table-header/index.js'
+import { NetworkRow } from '../../components/network-row/index.js'
+import { NetworkDetail } from '../../components/network-detail/index.js'
+import { formatBody, formatPlainBody } from '../../../../../shared/utils/format-body.js'
+import { buildCurlCommand } from '../../../../../shared/utils/build-curl-command.js'
+import type { NetworkLog } from '@salve-software/salvetron-types'
+
+const OVERHEAD_ROWS = 6
+const DETAIL_FIXED_ROWS = 5
+const MIN_LIST_ROWS = 4
+
+export function NetworkContainer() {
+  const [cols, rows] = useTerminalSize()
+  const logs = useNetworkLogs()
+
+  const availableRows = rows - OVERHEAD_ROWS
+  const detailHeight = Math.max(DETAIL_FIXED_ROWS + 2, availableRows - MIN_LIST_ROWS)
+  const bodyVisibleRows = detailHeight - DETAIL_FIXED_ROWS
+
+  const bodyLinesRef = useRef<string[]>([])
+  const selectedLogRef = useRef<NetworkLog | null>(null)
+
+  const onCopyBody = useCallback(() => {
+    const log = selectedLogRef.current
+    return log ? formatPlainBody(log.responseBody) : ''
+  }, [])
+  const onCopyExtra = useCallback(() => {
+    const log = selectedLogRef.current
+    return log ? buildCurlCommand(log) : ''
+  }, [])
+
+  const { detailOpen, detailScrollOffset, resetDetailScroll, copyFeedback } = useDetailPanel({
+    linesRef: bodyLinesRef,
+    visibleRows: bodyVisibleRows,
+    scrollStep: 5,
+    onCopyBody,
+    onCopyExtra,
+  })
+
+  const listRows = detailOpen
+    ? Math.max(MIN_LIST_ROWS, availableRows - detailHeight)
+    : availableRows
+
+  const { selectedIndex, scrollOffset } = useListNavigation({ count: logs.length, visibleRows: listRows })
+
+  const selectedLog = logs[selectedIndex] ?? null
+  const bodyLines = formatBody(selectedLog?.responseBody)
+  bodyLinesRef.current = bodyLines
+  selectedLogRef.current = selectedLog
+
+  useEffect(() => {
+    resetDetailScroll()
+  }, [selectedIndex, resetDetailScroll])
+
+  const visible = logs.slice(scrollOffset, scrollOffset + listRows)
+
+  return (
+    <Box flexDirection="column">
+      <Box flexGrow={1} flexDirection="column">
+        <NetworkTableHeader />
+        {visible.map((log, i) => {
+          const absoluteIndex = scrollOffset + i
+          return (
+            <NetworkRow
+              key={log.requestId}
+              log={log}
+              urlMaxWidth={cols - 30}
+              isSelected={absoluteIndex === selectedIndex}
+            />
+          )
+        })}
+      </Box>
+      {detailOpen && selectedLog
+        ?
+        <NetworkDetail
+          log={selectedLog}
+          width={cols}
+          bodyLines={bodyLines}
+          bodyScrollOffset={detailScrollOffset}
+          bodyVisibleRows={bodyVisibleRows}
+          copyFeedback={copyFeedback}
+        />
+        : null
+      }
+    </Box>
+  )
+}

package/src/server/ws-server.ts

@@ -0,0 +1,52 @@
+import { WebSocketServer } from 'ws'
+import type { RnTuiEvent } from '@salve-software/salvetron-types'
+import { useJsLogsStore } from '../modules/js-logs/store/js-logs.store.js'
+import { useNativeLogsStore } from '../modules/native-logs/store/native-logs.store.js'
+import { useNetworkStore } from '../modules/network/store/network.store.js'
+import { useDashboardStore } from '../modules/dashboard/store/dashboard.store.js'
+import { useDeviceStore } from '../shared/store/device.store.js'
+
+export function startWsServer(port: number) {
+  const wss = new WebSocketServer({ port, host: '0.0.0.0' })
+
+  wss.on('error', (err: NodeJS.ErrnoException) => {
+    if (err.code === 'EADDRINUSE') {
+      console.error(`Port ${port} already in use. Set SALVETRON_PORT env var to change port.`)
+      process.exit(1)
+    }
+  })
+
+  wss.on('connection', (socket) => {
+    socket.on('message', (raw) => {
+      try {
+        const event: RnTuiEvent = JSON.parse(raw.toString())
+        dispatch(event)
+      } catch {}
+    })
+
+    socket.on('close', () => {
+      useDeviceStore.getState().setDisconnected()
+    })
+  })
+}
+
+function dispatch(event: RnTuiEvent) {
+  switch (event.type) {
+    case 'device_info':
+    case 'project_info':
+      useDeviceStore.getState().setInfo(event)
+      break
+    case 'log':
+      useJsLogsStore.getState().addLog(event)
+      break
+    case 'native':
+      useNativeLogsStore.getState().addLog(event)
+      break
+    case 'network':
+      useNetworkStore.getState().addOrUpdateLog(event)
+      break
+    case 'performance_metrics':
+      useDashboardStore.getState().addSnapshot(event)
+      break
+  }
+}

package/src/shared/components/ascii-logo/ascii-logo.tsx

@@ -0,0 +1,169 @@
+import { Text, useStdout } from "ink";
+import { useEffect, useMemo, useRef, useState } from "react";
+import figlet from "figlet";
+
+const FALLBACK_TEXT = "RN PANEL";
+const MAX_TEXT_LENGTH = 18;
+
+const DURATION_MS = 4000;
+const TICK_MS = 80;
+const TWO_PI = Math.PI * 2;
+
+// Glyphs are never swapped for block characters anymore — only color
+// brightness is modulated, so the full name stays legible at every frame,
+// including loop edges. The wave crest lightens the base color toward a
+// slightly lighter shade (not pure white) instead of dimming it, for a
+// glow/shine sweep.
+const GLOW_MIX = 0.65;
+const GLOW_LEVELS = 55;
+
+export const LOGO_COLOR_PALETTE = [
+  "#61DAFB", // React cyan (original brand color)
+  "#FF6B6B", // coral red
+  "#4ECDC4", // teal
+  "#FFD93D", // gold
+  "#A78BFA", // violet
+  "#FF8C42", // orange
+  "#52D17C", // emerald green
+  "#F472B6", // pink
+  "#38BDF8", // sky blue
+  "#FACC15", // amber
+] as const;
+
+export function pickRandomColor(): string {
+  return LOGO_COLOR_PALETTE[Math.floor(Math.random() * LOGO_COLOR_PALETTE.length)];
+}
+
+type Rgb = [number, number, number];
+
+function hexToRgb(hex: string): Rgb {
+  const value = hex.replace("#", "");
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return [r, g, b];
+}
+
+function lerp(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t);
+}
+
+const RESET = "";
+
+function ansiColor([r, g, b]: Rgb): string {
+  return `[38;2;${r};${g};${b}m`;
+}
+
+function buildArt(text: string) {
+  // Truncated so longer project names don't blow past typical terminal
+  // width and wrap mid-glyph.
+  const safeText = text.slice(0, MAX_TEXT_LENGTH);
+  const art = figlet
+    .textSync(safeText, { font: "ANSI Shadow" })
+    .split("\n")
+    .filter((line) => line.trim().length > 0);
+
+  // Guard against an empty `art` (e.g. blank input) collapsing Math.max to
+  // -Infinity, which would propagate NaN into the wave frequency below.
+  const maxWidth = Math.max(1, ...art.map((line) => line.length));
+
+  // Several ripples across the full width so the wave never dims everything
+  // at once (a single period close to maxWidth caused a visible gap
+  // mid-animation).
+  const waveFrequency = (TWO_PI * 3) / maxWidth;
+
+  return { art, waveFrequency };
+}
+
+function render(t: number, rgb: Rgb, art: string[], waveFrequency: number): string {
+  const [r, g, b] = rgb;
+  const peak: Rgb = [
+    lerp(r, 255, GLOW_MIX),
+    lerp(g, 255, GLOW_MIX),
+    lerp(b, 255, GLOW_MIX),
+  ];
+
+  const lines: string[] = [];
+  for (let y = 0; y < art.length; y++) {
+    const row = art[y];
+    let line = "";
+    let lastLevel = -1;
+    for (let x = 0; x < row.length; x++) {
+      const ch = row[x];
+      if (ch === " ") {
+        line += " ";
+        continue;
+      }
+      const wave = Math.sin(x * waveFrequency + t) * 0.5 + 0.5;
+      const verticalWave = Math.sin(y * 0.5 + t * 0.8) * 0.5 + 0.5;
+      const glow = wave * 0.6 + verticalWave * 0.4;
+      const level = Math.round(glow * GLOW_LEVELS);
+      if (level !== lastLevel) {
+        const factor = level / GLOW_LEVELS;
+        line += ansiColor([
+          lerp(r, peak[0], factor),
+          lerp(g, peak[1], factor),
+          lerp(b, peak[2], factor),
+        ]);
+        lastLevel = level;
+      }
+      line += ch;
+    }
+    line += RESET;
+    lines.push(line);
+  }
+  return lines.join("\n");
+}
+
+interface AsciiLogoProps {
+  text?: string;
+  color?: string;
+}
+
+export function AsciiLogo({ text = FALLBACK_TEXT, color = "#61DAFB" }: AsciiLogoProps) {
+  const upperText = text.toUpperCase();
+  const { art, waveFrequency } = useMemo(() => buildArt(upperText), [upperText]);
+  const rgb = useMemo(() => hexToRgb(color), [color]);
+  const [frame, setFrame] = useState(() => render(0, rgb, art, waveFrequency));
+  const { stdout } = useStdout();
+  const isResizingRef = useRef(false);
+
+  useEffect(() => {
+    if (!stdout) return;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const handler = () => {
+      isResizingRef.current = true;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        isResizingRef.current = false;
+      }, 150);
+    };
+    stdout.on("resize", handler);
+    return () => {
+      clearTimeout(timer);
+      stdout.off("resize", handler);
+    };
+  }, [stdout]);
+
+  useEffect(() => {
+    const start = Date.now();
+    // Render immediately so a text/color change doesn't leave a stale frame
+    // on screen until the next tick.
+    setFrame(render(0, rgb, art, waveFrequency));
+
+    const id = setInterval(() => {
+      if (isResizingRef.current) return;
+      const pos = (Date.now() - start) % (DURATION_MS * 2);
+      const linear =
+        pos < DURATION_MS
+          ? pos / DURATION_MS
+          : 1 - (pos - DURATION_MS) / DURATION_MS;
+      const eased = linear * linear * (3 - 2 * linear);
+      setFrame(render(eased * TWO_PI, rgb, art, waveFrequency));
+    }, TICK_MS);
+
+    return () => clearInterval(id);
+  }, [art, waveFrequency, rgb]);
+
+  return <Text>{frame}</Text>;
+}

package/src/shared/components/ascii-logo/index.ts

@@ -0,0 +1 @@
+export { AsciiLogo, pickRandomColor } from './ascii-logo'

package/src/shared/components/gauge/gauge.tsx

@@ -0,0 +1,18 @@
+import { Text } from 'ink'
+
+interface GaugeProps {
+  value: number
+  max: number
+  width?: number
+  warnAt?: number
+  critAt?: number
+}
+
+export function Gauge({ value, max, width = 12, warnAt = 0.7, critAt = 0.9 }: GaugeProps) {
+  const ratio = Math.min(1, Math.max(0, value / max))
+  const filled = Math.round(ratio * width)
+  const bar = ':'.repeat(filled) + '.'.repeat(width - filled)
+  const color = ratio >= critAt ? 'red' : ratio >= warnAt ? 'yellow' : 'green'
+
+  return <Text color={color}>{bar}</Text>
+}

package/src/shared/components/gauge/index.ts

@@ -0,0 +1 @@
+export { Gauge } from './gauge'

package/src/shared/components/log-row/index.ts

@@ -0,0 +1 @@
+export { LogRow } from './log-row'

package/src/shared/components/log-row/log-row.tsx

@@ -0,0 +1,28 @@
+import { Text } from 'ink'
+import type { AnyLog } from '../../types.js'
+
+const LEVEL_COLOR: Record<string, string> = {
+  error: 'red',
+  warn: 'yellow',
+  info: 'cyan',
+  debug: 'gray',
+  log: 'white',
+}
+
+interface LogRowProps {
+  log: AnyLog
+  maxMessageWidth?: number
+}
+
+export function LogRow({ log, maxMessageWidth = 120 }: LogRowProps) {
+  const color = LEVEL_COLOR[log.level] ?? 'white'
+  const time = new Date(log.timestamp).toLocaleTimeString('en', { hour12: false })
+
+  return (
+    <Text>
+      <Text color="gray">{time} </Text>
+      <Text color={color}>[{log.level.toUpperCase().padEnd(5)}] </Text>
+      <Text>{log.message.slice(0, maxMessageWidth)}</Text>
+    </Text>
+  )
+}

package/src/shared/components/panel/index.ts

@@ -0,0 +1 @@
+export { Panel } from './panel'