salvetron 0.1.0

package/src/shared/components/panel/panel.tsx

@@ -0,0 +1,28 @@
+import { Box, Text } from 'ink'
+import type { ReactNode } from 'react'
+
+interface PanelProps {
+  title: string
+  focused?: boolean
+  flexGrow?: number
+  height?: number | string
+  children: ReactNode
+}
+
+export function Panel({ title, focused = false, flexGrow, height, children }: PanelProps) {
+  const color = focused ? 'cyan' : 'gray'
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="single"
+      borderColor={color}
+      paddingX={1}
+      flexGrow={flexGrow}
+      height={height}
+    >
+      <Text bold color={color}>{title}</Text>
+      {children}
+    </Box>
+  )
+}

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

@@ -0,0 +1 @@
+export { Sparkline } from './sparkline'

package/src/shared/components/sparkline/sparkline.tsx

@@ -0,0 +1,26 @@
+import { Text } from 'ink'
+
+const BLOCKS = ' ▁▂▃▄▅▆▇█'
+
+interface SparklineProps {
+  values: number[]
+  max: number
+  width?: number
+  color?: string
+}
+
+export function Sparkline({ values, max, width = 20, color = 'green' }: SparklineProps) {
+  const padded = [
+    ...Array(Math.max(0, width - values.length)).fill(0),
+    ...values,
+  ].slice(-width)
+
+  const chars = padded
+    .map((v) => {
+      const ratio = Math.min(1, Math.max(0, v / max))
+      return BLOCKS[Math.round(ratio * (BLOCKS.length - 1))]
+    })
+    .join('')
+
+  return <Text color={color}>{chars}</Text>
+}

package/src/shared/components/status-bar/index.ts

@@ -0,0 +1 @@
+export { StatusBar } from './status-bar'

package/src/shared/components/status-bar/status-bar.tsx

@@ -0,0 +1,32 @@
+import { Box, Text } from 'ink'
+import { useDevice, useConnectionStatus } from '../../store/device.store.js'
+
+export function StatusBar() {
+  const device = useDevice()
+  const connected = useConnectionStatus()
+
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="gray"
+      borderTop={true}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingX={1}
+    >
+      {connected && device
+        ?
+        <>
+          <Text color="green">● </Text>
+          <Text>{device.deviceName} ({device.platform})  ·  port {process.env.SALVETRON_PORT ?? '8765'}</Text>
+        </>
+        :
+        <>
+          <Text color="gray">○ </Text>
+          <Text color="gray">Waiting for connection on :{process.env.SALVETRON_PORT ?? '8765'}</Text>
+        </>
+      }
+    </Box>
+  )
+}

package/src/shared/components/tab-bar/index.ts

@@ -0,0 +1 @@
+export { TabBar } from './tab-bar'

package/src/shared/components/tab-bar/tab-bar.tsx

@@ -0,0 +1,36 @@
+import { Box, Text } from 'ink'
+import type { Tab } from '../../../app.js'
+
+const LABELS: Record<Tab, string> = {
+  dashboard: '1 Dashboard',
+  'js-logs': '2 JS Logs',
+  network: '3 Network',
+  native: '4 Native',
+}
+
+interface TabBarProps {
+  active: Tab
+}
+
+export function TabBar({ active }: TabBarProps) {
+  return (
+    <Box
+      borderStyle="single"
+      borderBottom={true}
+      marginTop={1}
+      borderColor="gray"
+      borderTop={false}
+      borderLeft={false}
+      borderRight={false}
+      gap={2}
+      paddingX={1}
+    >
+      {(Object.keys(LABELS) as Tab[]).map((tab) =>
+        <Text key={tab} bold={tab === active} color={tab === active ? 'cyan' : 'gray'}>
+          {LABELS[tab]}
+        </Text>
+      )}
+      <Text color="gray" dimColor>  Tab to switch</Text>
+    </Box>
+  )
+}

package/src/shared/hooks/use-detail-panel.ts

@@ -0,0 +1,78 @@
+import { useInput } from 'ink'
+import { useState, useCallback, useEffect, useRef } from 'react'
+import type { RefObject } from 'react'
+import { copyToClipboard } from '../utils/clipboard.js'
+
+export interface CopyFeedback {
+  kind: 'body' | 'extra'
+  success: boolean
+}
+
+interface UseDetailPanelParams {
+  linesRef: RefObject<string[]>
+  visibleRows: number
+  scrollStep?: number
+  isActive?: boolean
+  onCopyBody?: () => string
+  onCopyExtra?: () => string
+}
+
+const FEEDBACK_TIMEOUT_MS = 1500
+
+export function useDetailPanel({
+  linesRef,
+  visibleRows,
+  scrollStep = 1,
+  isActive = true,
+  onCopyBody,
+  onCopyExtra,
+}: UseDetailPanelParams) {
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [detailScrollOffset, setDetailScrollOffset] = useState(0)
+  const [copyFeedback, setCopyFeedback] = useState<CopyFeedback | null>(null)
+
+  const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const resetDetailScroll = useCallback(() => setDetailScrollOffset(0), [])
+
+  const showFeedback = useCallback((kind: CopyFeedback['kind'], success: boolean) => {
+    if (feedbackTimeoutRef.current) clearTimeout(feedbackTimeoutRef.current)
+    setCopyFeedback({ kind, success })
+    feedbackTimeoutRef.current = setTimeout(() => {
+      setCopyFeedback(null)
+      feedbackTimeoutRef.current = null
+    }, FEEDBACK_TIMEOUT_MS)
+  }, [])
+
+  useEffect(() => {
+    if (!detailOpen && copyFeedback) {
+      if (feedbackTimeoutRef.current) clearTimeout(feedbackTimeoutRef.current)
+      feedbackTimeoutRef.current = null
+      setCopyFeedback(null)
+    }
+  }, [detailOpen, copyFeedback])
+
+  useEffect(() => () => {
+    if (feedbackTimeoutRef.current) clearTimeout(feedbackTimeoutRef.current)
+  }, [])
+
+  useInput((input, key) => {
+    if (key.return) { setDetailOpen(o => !o); setDetailScrollOffset(0) }
+    if (key.escape) { setDetailOpen(false) }
+    if (input === '[') { setDetailScrollOffset(o => Math.max(0, o - scrollStep)) }
+    if (input === ']') {
+      const maxOffset = Math.max(0, linesRef.current.length - visibleRows)
+      setDetailScrollOffset(o => Math.min(maxOffset, o + scrollStep))
+    }
+    if (input === 'c' && detailOpen && onCopyBody) {
+      const text = onCopyBody()
+      if (text.length > 0) showFeedback('body', copyToClipboard(text))
+    }
+    if (input === 'u' && detailOpen && onCopyExtra) {
+      const text = onCopyExtra()
+      if (text.length > 0) showFeedback('extra', copyToClipboard(text))
+    }
+  }, { isActive })
+
+  return { detailOpen, detailScrollOffset, resetDetailScroll, copyFeedback }
+}

package/src/shared/hooks/use-list-navigation.ts

@@ -0,0 +1,44 @@
+import { useInput } from 'ink'
+import { useState, useEffect, useRef } from 'react'
+
+interface UseListNavigationParams {
+  count: number
+  visibleRows: number
+  isActive?: boolean
+}
+
+export function useListNavigation({ count, visibleRows, isActive = true }: UseListNavigationParams) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [scrollOffset, setScrollOffset] = useState(0)
+  const pinnedToLatestRef = useRef(true)
+
+  // Follow the newest item as it arrives, unless the user scrolled away
+  // from the bottom — then stay put until they navigate back down to it.
+  useEffect(() => {
+    if (count === 0) return
+    if (pinnedToLatestRef.current) {
+      const last = count - 1
+      setSelectedIndex(last)
+      setScrollOffset(Math.max(0, last - visibleRows + 1))
+    } else if (selectedIndex > count - 1) {
+      setSelectedIndex(Math.max(0, count - 1))
+    }
+  }, [count, visibleRows])
+
+  useInput((_input, key) => {
+    if (key.upArrow) {
+      const next = Math.max(0, selectedIndex - 1)
+      pinnedToLatestRef.current = false
+      setSelectedIndex(next)
+      if (next < scrollOffset) setScrollOffset(next)
+    }
+    if (key.downArrow) {
+      const next = Math.min(count - 1, selectedIndex + 1)
+      pinnedToLatestRef.current = next >= count - 1
+      setSelectedIndex(next)
+      if (next >= scrollOffset + visibleRows) setScrollOffset(next - visibleRows + 1)
+    }
+  }, { isActive })
+
+  return { selectedIndex, scrollOffset }
+}

package/src/shared/hooks/use-terminal-size.ts

@@ -0,0 +1,42 @@
+import { useStdout } from 'ink'
+import { useState, useEffect } from 'react'
+
+// Clears the visible viewport and homes the cursor without touching scrollback.
+// Ink's own log-update tracks previous output height by counting '\n' in the
+// rendered string, not actual wrapped terminal rows, so its line-erase math
+// drifts after a width change and leaves stale frame remnants on screen
+// (https://github.com/vadimdemedes/ink/issues/907). A hard clear right before
+// committing the new size sidesteps that miscount entirely.
+const CLEAR_VIEWPORT = '\x1b[2J\x1b[H'
+
+export function useTerminalSize(): [number, number] {
+  const { stdout } = useStdout()
+  const [size, setSize] = useState<[number, number]>([
+    stdout?.columns ?? 80,
+    stdout?.rows ?? 24,
+  ])
+
+  useEffect(() => {
+    if (!stdout) return
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const handler = () => {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        const cols = stdout.columns
+        const rows = stdout.rows
+        setSize((prev) => {
+          if (prev[0] === cols && prev[1] === rows) return prev
+          stdout.write(CLEAR_VIEWPORT)
+          return [cols, rows]
+        })
+      }, 80)
+    }
+    stdout.on('resize', handler)
+    return () => {
+      clearTimeout(timer)
+      stdout.off('resize', handler)
+    }
+  }, [stdout])
+
+  return size
+}

package/src/shared/store/device.store.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand'
+import type { DeviceInfoEvent, ProjectInfoEvent } from '@salve-software/salvetron-types'
+
+interface DeviceStore {
+  device: DeviceInfoEvent | null
+  project: ProjectInfoEvent | null
+  connected: boolean
+  setInfo: (event: DeviceInfoEvent | ProjectInfoEvent) => void
+  setDisconnected: () => void
+}
+
+export const useDeviceStore = create<DeviceStore>((set) => ({
+  device: null,
+  project: null,
+  connected: false,
+  setInfo: (event) => {
+    if (event.type === 'device_info') set({ device: event, connected: true })
+    if (event.type === 'project_info') set({ project: event })
+  },
+  setDisconnected: () => set({ connected: false, device: null, project: null }),
+}))
+
+export const useDevice = () => useDeviceStore((s) => s.device)
+export const useProject = () => useDeviceStore((s) => s.project)
+export const useConnectionStatus = () => useDeviceStore((s) => s.connected)

package/src/shared/types.ts

@@ -0,0 +1,3 @@
+import type { LogEvent, NativeLogEvent } from '@salve-software/salvetron-types'
+
+export type AnyLog = LogEvent | NativeLogEvent

package/src/shared/utils/build-curl-command.ts

@@ -0,0 +1,19 @@
+import type { NetworkLog } from '@salve-software/salvetron-types'
+
+function shellSingleQuote(value: string): string {
+  return `'${value.replace(/'/g, "'\\''")}'`
+}
+
+export function buildCurlCommand(log: NetworkLog): string {
+  const parts: string[] = [`curl -X ${log.method}`, `  ${shellSingleQuote(log.url)}`]
+
+  for (const [key, value] of Object.entries(log.requestHeaders ?? {})) {
+    parts.push(`  -H ${shellSingleQuote(`${key}: ${value}`)}`)
+  }
+
+  if (log.requestBody != null) {
+    parts.push(`  --data ${shellSingleQuote(log.requestBody)}`)
+  }
+
+  return parts.join(' \\\n')
+}

package/src/shared/utils/clipboard.ts

@@ -0,0 +1,27 @@
+import { spawnSync } from 'node:child_process'
+
+interface ClipTool { cmd: string; args: string[] }
+
+function getClipboardTools(): ClipTool[] {
+  switch (process.platform) {
+    case 'darwin':
+      return [{ cmd: 'pbcopy', args: [] }]
+    case 'win32':
+      return [{ cmd: 'clip', args: [] }]
+    default:
+      return [
+        { cmd: 'xclip', args: ['-selection', 'clipboard'] },
+        { cmd: 'xsel', args: ['--clipboard', '--input'] },
+      ]
+  }
+}
+
+export function copyToClipboard(text: string): boolean {
+  for (const tool of getClipboardTools()) {
+    const result = spawnSync(tool.cmd, tool.args, { input: text, encoding: 'utf8' })
+    if (result.error) continue
+    if (typeof result.status === 'number' && result.status !== 0) continue
+    return true
+  }
+  return false
+}

package/src/shared/utils/format-body.ts

@@ -0,0 +1,21 @@
+import { colorize } from 'json-colorizer'
+
+export function formatBody(body: string | null | undefined): string[] {
+  if (!body) return []
+  try {
+    const parsed = JSON.parse(body)
+    return colorize(JSON.stringify(parsed, null, 2)).split('\n')
+  } catch {
+    return body.split('\n')
+  }
+}
+
+export function formatPlainBody(body: string | null | undefined): string {
+  if (!body) return ''
+  try {
+    const parsed = JSON.parse(body)
+    return JSON.stringify(parsed, null, 2)
+  } catch {
+    return body
+  }
+}