salvetron 0.1.0

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

@@ -0,0 +1,290 @@
+import { Box, Text, useInput } from "ink";
+import { useCallback, useEffect, useMemo, useRef, useState } 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 { Panel } from "../../../../../shared/components/panel/index.js";
+import { formatBody, formatPlainBody } from "../../../../../shared/utils/format-body.js";
+import { buildCurlCommand } from "../../../../../shared/utils/build-curl-command.js";
+import {
+  useDashboardSnapshots,
+  useLatestSnapshot,
+} from "../../../store/dashboard.store.js";
+import { PerformancePanel } from "../../components/performance-panel/index.js";
+import { useJsLogs } from "../../../../js-logs/store/js-logs.store.js";
+import { LogList } from "../../../../js-logs/ui/components/log-list/index.js";
+import { LogDetail } from "../../../../js-logs/ui/components/log-detail/index.js";
+import { useNetworkLogs } from "../../../../network/store/network.store.js";
+import { NetworkTableHeader } from "../../../../network/ui/components/network-table-header/index.js";
+import { NetworkRow } from "../../../../network/ui/components/network-row/index.js";
+import { NetworkDetail } from "../../../../network/ui/components/network-detail/index.js";
+import { useNativeLogs } from "../../../../native-logs/store/native-logs.store.js";
+import { NativeLogList } from "../../../../native-logs/ui/components/native-log-list/index.js";
+import { NativeLogDetail } from "../../../../native-logs/ui/components/native-log-detail/index.js";
+import type { LogEvent, NativeLogEvent, NetworkLog } from "@salve-software/salvetron-types";
+
+type FocusPanel = "logs" | "network" | "native";
+const PANELS: FocusPanel[] = ["logs", "network", "native"];
+
+// Chrome rendered by App around DashboardContainer's content area:
+// AsciiLogo (6) + TabBar (marginTop 2 + content 1 + borderBottom 1 = 4) +
+// content wrapper paddingTop (1) = 11 above; StatusBar (borderTop 1 +
+// content 1 = 2) + content wrapper paddingBottom (1) = 3 below.
+const APP_OVERHEAD_ROWS = 14;
+const FOOTER_ROWS = 1;
+const PERF_PANEL_ROWS = 7;
+const PANEL_CHROME_ROWS = 3; // title (1) + border (2) per list Panel
+const NETWORK_HEADER_ROWS = 1;
+// NetworkDetail's leading content (border + header + url + req headers + res
+// headers + body header) can take up to 6 rows, plus the wrapper Box's own
+// top/bottom border (2 rows) — use that as the shared budget for all 3 detail
+// types so content never exceeds maxHeight (overflow="hidden" + an
+// over-budget frame corrupts Ink's redraw).
+const DETAIL_FIXED_ROWS = 8;
+
+export function DashboardContainer() {
+  const [cols, rows] = useTerminalSize();
+  const [focused, setFocused] = useState<FocusPanel>("logs");
+
+  const snapshots = useDashboardSnapshots();
+  const latest = useLatestSnapshot();
+  const jsLogs = useJsLogs();
+  const networkLogs = useNetworkLogs();
+  const nativeLogs = useNativeLogs();
+
+  const panelInner = Math.max(10, Math.floor(cols / 3) - 4);
+  const sparkWidth = Math.max(4, panelInner - 27);
+  const urlMaxWidth = Math.max(6, panelInner - 28);
+  const logsMsgWidth = Math.max(8, panelInner - 14);
+  const nativeMsgWidth = Math.max(8, panelInner - 26);
+
+  // Row budget derived only from the terminal's real row count — never from
+  // measured/rendered content, which would feed back into itself and loop.
+  const availableRows = rows - APP_OVERHEAD_ROWS - FOOTER_ROWS;
+  const logsPanelRows = Math.max(
+    1,
+    Math.floor((availableRows - PERF_PANEL_ROWS) / 3) - PANEL_CHROME_ROWS,
+  );
+  const nativePanelRows = logsPanelRows;
+  const networkPanelRows = Math.max(1, logsPanelRows - NETWORK_HEADER_ROWS);
+
+  const detailRows = availableRows;
+  const detailBodyVisibleRows = Math.max(1, detailRows - DETAIL_FIXED_ROWS);
+
+  const logsLinesRef = useRef<string[]>([]);
+  const netLinesRef = useRef<string[]>([]);
+  const nativeLinesRef = useRef<string[]>([]);
+
+  const selLogRef = useRef<LogEvent | null>(null);
+  const selNetRef = useRef<NetworkLog | null>(null);
+  const selNativeRef = useRef<NativeLogEvent | null>(null);
+
+  const onCopyLogBody = useCallback(() => {
+    const log = selLogRef.current;
+    if (!log) return "";
+    const meta = log.metadata ? formatPlainBody(JSON.stringify(log.metadata)) : "";
+    return meta ? `${log.message}\n\n${meta}` : log.message;
+  }, []);
+  const onCopyNativeBody = useCallback(() => {
+    const log = selNativeRef.current;
+    if (!log) return "";
+    const meta = log.metadata ? formatPlainBody(JSON.stringify(log.metadata)) : "";
+    return meta ? `${log.message}\n\n${meta}` : log.message;
+  }, []);
+  const onCopyNetBody = useCallback(() => {
+    const log = selNetRef.current;
+    return log ? formatPlainBody(log.responseBody) : "";
+  }, []);
+  const onCopyNetExtra = useCallback(() => {
+    const log = selNetRef.current;
+    return log ? buildCurlCommand(log) : "";
+  }, []);
+
+  const logsDetail = useDetailPanel({
+    linesRef: logsLinesRef,
+    visibleRows: detailBodyVisibleRows,
+    scrollStep: 5,
+    isActive: focused === "logs",
+    onCopyBody: onCopyLogBody,
+  });
+  const netDetail = useDetailPanel({
+    linesRef: netLinesRef,
+    visibleRows: detailBodyVisibleRows,
+    scrollStep: 5,
+    isActive: focused === "network",
+    onCopyBody: onCopyNetBody,
+    onCopyExtra: onCopyNetExtra,
+  });
+  const nativeDetail = useDetailPanel({
+    linesRef: nativeLinesRef,
+    visibleRows: detailBodyVisibleRows,
+    scrollStep: 5,
+    isActive: focused === "native",
+    onCopyBody: onCopyNativeBody,
+  });
+
+  const focusedDetailOpen =
+    (focused === "logs" && logsDetail.detailOpen) ||
+    (focused === "network" && netDetail.detailOpen) ||
+    (focused === "native" && nativeDetail.detailOpen);
+
+  const logsNav = useListNavigation({
+    count: jsLogs.length,
+    visibleRows: logsPanelRows,
+    isActive: focused === "logs",
+  });
+  const netNav = useListNavigation({
+    count: networkLogs.length,
+    visibleRows: networkPanelRows,
+    isActive: focused === "network",
+  });
+  const nativeNav = useListNavigation({
+    count: nativeLogs.length,
+    visibleRows: nativePanelRows,
+    isActive: focused === "native",
+  });
+
+  const selLog = jsLogs[logsNav.selectedIndex] ?? null;
+  const selNet = networkLogs[netNav.selectedIndex] ?? null;
+  const selNative = nativeLogs[nativeNav.selectedIndex] ?? null;
+
+  const logMeta = useMemo(
+    () => (selLog?.metadata ? formatBody(JSON.stringify(selLog.metadata)) : []),
+    [selLog],
+  );
+  const netBody = useMemo(() => formatBody(selNet?.responseBody), [selNet]);
+  const nativeMeta = useMemo(
+    () => (selNative?.metadata ? formatBody(JSON.stringify(selNative.metadata)) : []),
+    [selNative],
+  );
+  logsLinesRef.current = logMeta;
+  netLinesRef.current = netBody;
+  nativeLinesRef.current = nativeMeta;
+  selLogRef.current = selLog;
+  selNetRef.current = selNet;
+  selNativeRef.current = selNative;
+
+  useEffect(() => {
+    logsDetail.resetDetailScroll();
+  }, [logsNav.selectedIndex, logsDetail.resetDetailScroll]);
+  useEffect(() => {
+    netDetail.resetDetailScroll();
+  }, [netNav.selectedIndex, netDetail.resetDetailScroll]);
+  useEffect(() => {
+    nativeDetail.resetDetailScroll();
+  }, [nativeNav.selectedIndex, nativeDetail.resetDetailScroll]);
+
+  useInput((_input, key) => {
+    if (key.leftArrow) {
+      const i = PANELS.indexOf(focused);
+      setFocused(PANELS[(i - 1 + PANELS.length) % PANELS.length]);
+    }
+    if (key.rightArrow) {
+      const i = PANELS.indexOf(focused);
+      setFocused(PANELS[(i + 1) % PANELS.length]);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" flexGrow={1}>
+      <Box flexDirection="row" flexGrow={1}>
+        <Box flexDirection="column">
+          <PerformancePanel
+            latest={latest}
+            snapshots={snapshots}
+            sparkWidth={sparkWidth}
+            height={PERF_PANEL_ROWS}
+          />
+
+          <Panel title="Logs" focused={focused === "logs"} flexGrow={1}>
+            <LogList
+              logs={jsLogs}
+              visibleRows={logsPanelRows}
+              selectedIndex={logsNav.selectedIndex}
+              scrollOffset={logsNav.scrollOffset}
+              showHeader={false}
+              maxMessageWidth={logsMsgWidth}
+            />
+          </Panel>
+
+          <Panel title="Network" focused={focused === "network"} flexGrow={1}>
+            <NetworkTableHeader />
+            {networkLogs
+              .slice(
+                netNav.scrollOffset,
+                netNav.scrollOffset + networkPanelRows,
+              )
+              .map((log, i) => {
+                const absoluteIndex = netNav.scrollOffset + i;
+                return (
+                  <NetworkRow
+                    key={log.requestId}
+                    log={log}
+                    urlMaxWidth={urlMaxWidth}
+                    isSelected={absoluteIndex === netNav.selectedIndex}
+                  />
+                );
+              })}
+          </Panel>
+
+          <Panel title="Native" focused={focused === "native"} flexGrow={1}>
+            <NativeLogList
+              logs={nativeLogs}
+              visibleRows={nativePanelRows}
+              selectedIndex={nativeNav.selectedIndex}
+              scrollOffset={nativeNav.scrollOffset}
+              showHeader={false}
+              maxMessageWidth={nativeMsgWidth}
+            />
+          </Panel>
+        </Box>
+        <Box
+          flexDirection="column"
+          height={focusedDetailOpen ? undefined : 0}
+          maxHeight={focusedDetailOpen ? detailRows : 0}
+          overflow="hidden"
+          flexGrow={1}
+          borderStyle="single"
+          borderColor="gray"
+          paddingX={2}
+        >
+          {focused === "logs" && logsDetail.detailOpen && selLog ? (
+            <LogDetail
+              log={selLog}
+              width={cols}
+              metaLines={logMeta}
+              metaScrollOffset={logsDetail.detailScrollOffset}
+              metaVisibleRows={detailBodyVisibleRows}
+              copyFeedback={logsDetail.copyFeedback}
+            />
+          ) : null}
+          {focused === "network" && netDetail.detailOpen && selNet ? (
+            <NetworkDetail
+              log={selNet}
+              width={cols}
+              bodyLines={netBody}
+              bodyScrollOffset={netDetail.detailScrollOffset}
+              bodyVisibleRows={detailBodyVisibleRows}
+              copyFeedback={netDetail.copyFeedback}
+            />
+          ) : null}
+          {focused === "native" && nativeDetail.detailOpen && selNative ? (
+            <NativeLogDetail
+              log={selNative}
+              width={cols}
+              metaLines={nativeMeta}
+              metaScrollOffset={nativeDetail.detailScrollOffset}
+              metaVisibleRows={detailBodyVisibleRows}
+              copyFeedback={nativeDetail.copyFeedback}
+            />
+          ) : null}
+        </Box>
+      </Box>
+      <Box>
+        <Text color="whiteBright" dimColor>
+          ←→ panel · ↑↓ navigate · ↵ open · esc close · [ ] scroll detail · c copy{focused === "network" ? " · u curl" : ""}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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

@@ -0,0 +1 @@
+export { DashboardContainer } from './dashboard-container'

package/src/modules/js-logs/store/js-logs.store.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import type { LogEvent } from '@salve-software/salvetron-types'
+
+interface JsLogsStore {
+  logs: LogEvent[]
+  addLog: (log: LogEvent) => void
+  clear: () => void
+}
+
+const MAX = 500
+
+export const useJsLogsStore = create<JsLogsStore>((set) => ({
+  logs: [],
+  addLog: (log) => set((s) => ({ logs: [...s.logs, log].slice(-MAX) })),
+  clear: () => set({ logs: [] }),
+}))
+
+export const useJsLogs = () => useJsLogsStore(useShallow((s) => s.logs))
+export const useRecentJsLogs = (n: number) =>
+  useJsLogsStore(useShallow((s) => s.logs.slice(-n)))

package/src/modules/js-logs/ui/components/log-detail/index.ts

@@ -0,0 +1 @@
+export { LogDetail } from './log-detail'

package/src/modules/js-logs/ui/components/log-detail/log-detail.tsx

@@ -0,0 +1,62 @@
+import { Box, Text } from 'ink'
+import type { LogEvent } from '@salve-software/salvetron-types'
+import type { CopyFeedback } from '../../../../../shared/hooks/use-detail-panel.js'
+
+const LEVEL_COLOR: Record<string, string> = {
+  error: 'red', warn: 'yellow', info: 'cyan', debug: 'gray', log: 'white',
+}
+
+interface LogDetailProps {
+  log: LogEvent
+  width: number
+  metaLines: string[]
+  metaScrollOffset: number
+  metaVisibleRows: number
+  copyFeedback?: CopyFeedback | null
+}
+
+export function LogDetail({ log, width, metaLines, metaScrollOffset, metaVisibleRows, copyFeedback }: LogDetailProps) {
+  const color = LEVEL_COLOR[log.level] ?? 'white'
+  const time = new Date(log.timestamp).toLocaleTimeString('en', { hour12: false })
+  const visibleLines = metaLines.slice(metaScrollOffset, metaScrollOffset + metaVisibleRows)
+  const canScroll = metaLines.length > metaVisibleRows
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="gray"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box gap={2}>
+        <Text color={color} bold>[{log.level.toUpperCase()}]</Text>
+        <Text color="gray">{time}</Text>
+        <Text color="gray" dimColor>src: {log.source}</Text>
+        {copyFeedback
+          ? <Text color={copyFeedback.success ? 'green' : 'red'}>{copyFeedback.success ? '✓ Copied' : '✗ Copy failed'}</Text>
+          : null
+        }
+      </Box>
+      <Text wrap="wrap">{log.message.slice(0, width * 3)}</Text>
+      {metaLines.length > 0
+        ?
+        <Box flexDirection="column">
+          <Text color="whiteBright" dimColor>
+            {'── metadata'}
+            {canScroll ? `  [ = up   ] = down  ·  line ${metaScrollOffset + 1} of ${metaLines.length}` : ''}
+            {'  ·  c copy'}
+            {' ──'}
+          </Text>
+          {visibleLines.map((line, i) => (
+            <Text key={i}>{line}</Text>
+          ))}
+        </Box>
+        : null
+      }
+    </Box>
+  )
+}

package/src/modules/js-logs/ui/components/log-list/index.ts

@@ -0,0 +1 @@
+export { LogList } from './log-list'

package/src/modules/js-logs/ui/components/log-list/log-list.tsx

@@ -0,0 +1,32 @@
+import { Box, Text } from 'ink'
+import type { LogEvent } from '@salve-software/salvetron-types'
+import { LogRow } from '../../../../../shared/components/log-row/index.js'
+
+interface LogListProps {
+  logs: LogEvent[]
+  visibleRows: number
+  selectedIndex: number
+  scrollOffset: number
+  showHeader?: boolean
+  maxMessageWidth?: number
+}
+
+export function LogList({ logs, visibleRows, selectedIndex, scrollOffset, showHeader = true, maxMessageWidth }: LogListProps) {
+  const visible = logs.slice(scrollOffset, scrollOffset + visibleRows)
+
+  return (
+    <Box flexDirection="column">
+      {showHeader ? <Text color="gray" dimColor>{logs.length} logs · ↑↓ navigate</Text> : null}
+      {visible.map((log, i) => {
+        const absoluteIndex = scrollOffset + i
+        const isSelected = absoluteIndex === selectedIndex
+        return (
+          <Box key={i} gap={1}>
+            <Text color="cyan">{isSelected ? '▶' : ' '}</Text>
+            <LogRow log={log} maxMessageWidth={maxMessageWidth} />
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/modules/js-logs/ui/containers/js-logs-container/index.ts

@@ -0,0 +1 @@
+export { JsLogsContainer } from './js-logs-container'

package/src/modules/js-logs/ui/containers/js-logs-container/js-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 { useJsLogs } from '../../../store/js-logs.store.js'
+import { LogList } from '../../components/log-list/index.js'
+import { LogDetail } from '../../components/log-detail/index.js'
+import { formatBody, formatPlainBody } from '../../../../../shared/utils/format-body.js'
+import type { LogEvent } from '@salve-software/salvetron-types'
+
+const OVERHEAD_ROWS = 6
+const DETAIL_FIXED_ROWS = 3
+const MIN_LIST_ROWS = 10
+
+export function JsLogsContainer() {
+  const [cols, rows] = useTerminalSize()
+  const logs = useJsLogs()
+
+  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<LogEvent | 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}>
+        <LogList
+          logs={logs}
+          visibleRows={listRows}
+          selectedIndex={selectedIndex}
+          scrollOffset={scrollOffset}
+        />
+      </Box>
+      {detailOpen && selectedLog
+        ?
+        <LogDetail
+          log={selectedLog}
+          width={cols}
+          metaLines={metaLines}
+          metaScrollOffset={detailScrollOffset}
+          metaVisibleRows={metaVisibleRows}
+          copyFeedback={copyFeedback}
+        />
+        : null
+      }
+    </Box>
+  )
+}

package/src/modules/native-logs/store/native-logs.store.ts

@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { useShallow } from 'zustand/react/shallow'
+import type { NativeLogEvent } from '@salve-software/salvetron-types'
+
+interface NativeLogsStore {
+  logs: NativeLogEvent[]
+  addLog: (log: NativeLogEvent) => void
+  clear: () => void
+}
+
+const MAX = 500
+
+export const useNativeLogsStore = create<NativeLogsStore>((set) => ({
+  logs: [],
+  addLog: (log) => set((s) => ({ logs: [...s.logs, log].slice(-MAX) })),
+  clear: () => set({ logs: [] }),
+}))
+
+export const useNativeLogs = () => useNativeLogsStore(useShallow((s) => s.logs))
+export const useRecentNativeLogs = (n: number) =>
+  useNativeLogsStore(useShallow((s) => s.logs.slice(-n)))

package/src/modules/native-logs/ui/components/native-log-detail/index.ts

@@ -0,0 +1 @@
+export { NativeLogDetail } from './native-log-detail'

package/src/modules/native-logs/ui/components/native-log-detail/native-log-detail.tsx

@@ -0,0 +1,63 @@
+import { Box, Text } from 'ink'
+import type { NativeLogEvent } from '@salve-software/salvetron-types'
+import type { CopyFeedback } from '../../../../../shared/hooks/use-detail-panel.js'
+
+const LEVEL_COLOR: Record<string, string> = {
+  error: 'red', warn: 'yellow', info: 'cyan', debug: 'gray', log: 'white',
+}
+
+interface NativeLogDetailProps {
+  log: NativeLogEvent
+  width: number
+  metaLines: string[]
+  metaScrollOffset: number
+  metaVisibleRows: number
+  copyFeedback?: CopyFeedback | null
+}
+
+export function NativeLogDetail({ log, width, metaLines, metaScrollOffset, metaVisibleRows, copyFeedback }: NativeLogDetailProps) {
+  const color = LEVEL_COLOR[log.level] ?? 'white'
+  const time = new Date(log.timestamp).toLocaleTimeString('en', { hour12: false })
+  const visibleLines = metaLines.slice(metaScrollOffset, metaScrollOffset + metaVisibleRows)
+  const canScroll = metaLines.length > metaVisibleRows
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor="gray"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      <Box gap={2}>
+        <Text color={color} bold>[{log.level.toUpperCase()}]</Text>
+        <Text color="whiteBright">{time}</Text>
+        <Text color="whiteBright" dimColor>[{log.source}]</Text>
+        {log.tag ? <Text color="whiteBright" dimColor>tag: {log.tag}</Text> : null}
+        {copyFeedback
+          ? <Text color={copyFeedback.success ? 'green' : 'red'}>{copyFeedback.success ? '✓ Copied' : '✗ Copy failed'}</Text>
+          : null
+        }
+      </Box>
+      <Text wrap="wrap">{log.message.slice(0, width * 3)}</Text>
+      {metaLines.length > 0
+        ?
+        <Box flexDirection="column">
+          <Text color="whiteBright" dimColor>
+            {'── metadata'}
+            {canScroll ? `  [ = up   ] = down  ·  line ${metaScrollOffset + 1} of ${metaLines.length}` : ''}
+            {'  ·  c copy'}
+            {' ──'}
+          </Text>
+          {visibleLines.map((line, i) => (
+            <Text key={i}>{line}</Text>
+          ))}
+        </Box>
+        : null
+      }
+    </Box>
+  )
+}

package/src/modules/native-logs/ui/components/native-log-list/index.ts

@@ -0,0 +1 @@
+export { NativeLogList } from './native-log-list'

package/src/modules/native-logs/ui/components/native-log-list/native-log-list.tsx

@@ -0,0 +1,33 @@
+import { Box, Text } from 'ink'
+import type { NativeLogEvent } from '@salve-software/salvetron-types'
+import { LogRow } from '../../../../../shared/components/log-row/index.js'
+
+interface NativeLogListProps {
+  logs: NativeLogEvent[]
+  visibleRows: number
+  selectedIndex: number
+  scrollOffset: number
+  showHeader?: boolean
+  maxMessageWidth?: number
+}
+
+export function NativeLogList({ logs, visibleRows, selectedIndex, scrollOffset, showHeader = true, maxMessageWidth }: NativeLogListProps) {
+  const visible = logs.slice(scrollOffset, scrollOffset + visibleRows)
+
+  return (
+    <Box flexDirection="column">
+      {showHeader ? <Text color="gray" dimColor>{logs.length} native logs · ↑↓ navigate</Text> : null}
+      {visible.map((log, i) => {
+        const absoluteIndex = scrollOffset + i
+        const isSelected = absoluteIndex === selectedIndex
+        return (
+          <Box key={i} gap={1}>
+            <Text color="cyan">{isSelected ? '▶' : ' '}</Text>
+            <Text color="gray" dimColor>[{log.source}]</Text>
+            <LogRow log={log} maxMessageWidth={maxMessageWidth} />
+          </Box>
+        )
+      })}
+    </Box>
+  )
+}

package/src/modules/native-logs/ui/containers/native-logs-container/index.ts

@@ -0,0 +1 @@
+export { NativeLogsContainer } from './native-logs-container'