silvery 0.3.0 → 0.4.1

package/examples/layout/dashboard.tsx

@@ -1,551 +0,0 @@
-/**
- * Dashboard Example
- *
- * A btop-style responsive dashboard demonstrating:
- * - Tab navigation with compound Tabs component
- * - Live-updating metrics with sparklines
- * - Responsive 2-column / 1-column layout via useContentRect()
- * - Semantic theme colors with severity-based color coding
- * - Flex-based progress bars
- */
-
-import React, { useState } from "react"
-import {
-  render,
-  Box,
-  Text,
-  H2,
-  Strong,
-  Small,
-  Muted,
-  Kbd,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanel,
-  ProgressBar,
-  useContentRect,
-  useInput,
-  useApp,
-  useInterval,
-  createTerm,
-  type Key,
-} from "../../src/index.js"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Dashboard",
-  description: "Responsive multi-pane dashboard with live metrics and charts",
-  demo: true,
-  features: ["Box flexGrow", "useContentRect()", "responsive", "live data", "sparklines"],
-}
-
-// ============================================================================
-// Sparkline
-// ============================================================================
-
-const SPARK_CHARS = "▁▂▃▄▅▆▇█"
-
-function sparkline(values: number[], max: number): string {
-  return values.map((v) => SPARK_CHARS[Math.round((v / max) * 7)] ?? SPARK_CHARS[0]).join("")
-}
-
-// ============================================================================
-// Data Helpers
-// ============================================================================
-
-function jitter(base: number, range: number): number {
-  return Math.max(0, Math.min(100, base + (Math.random() - 0.5) * range))
-}
-
-function initHistory(base: number, range: number, len: number): number[] {
-  return Array.from({ length: len }, () => jitter(base, range))
-}
-
-function pushHistory(history: number[], value: number): number[] {
-  const next = [...history]
-  if (next.length >= 20) next.shift()
-  next.push(value)
-  return next
-}
-
-function severityColor(pct: number): string {
-  if (pct > 80) return "$error"
-  if (pct > 60) return "$warning"
-  return "$success"
-}
-
-// ============================================================================
-// State
-// ============================================================================
-
-interface CoreMetrics {
-  usage: number
-  history: number[]
-}
-
-interface MemoryMetrics {
-  used: number
-  cached: number
-  buffers: number
-  free: number
-  swap: number
-  swapTotal: number
-  history: number[]
-}
-
-interface NetworkMetrics {
-  downloadRate: number
-  uploadRate: number
-  downloadHistory: number[]
-  uploadHistory: number[]
-  connections: number
-  packetsIn: number
-  packetsOut: number
-}
-
-interface ProcessInfo {
-  pid: number
-  name: string
-  cpu: number
-  mem: number
-  status: string
-}
-
-function createInitialState() {
-  const cores: CoreMetrics[] = Array.from({ length: 8 }, (_, i) => ({
-    usage: 20 + Math.random() * 60,
-    history: initHistory(30 + i * 5, 20, 20),
-  }))
-
-  const memory: MemoryMetrics = {
-    used: 8.2,
-    cached: 3.1,
-    buffers: 1.4,
-    free: 3.3,
-    swap: 0.8,
-    swapTotal: 4.0,
-    history: initHistory(55, 10, 20),
-  }
-
-  const network: NetworkMetrics = {
-    downloadRate: 42.5,
-    uploadRate: 12.3,
-    downloadHistory: initHistory(40, 30, 20),
-    uploadHistory: initHistory(12, 10, 20),
-    connections: 147,
-    packetsIn: 1842,
-    packetsOut: 923,
-  }
-
-  const processes: ProcessInfo[] = [
-    { pid: 1201, name: "node", cpu: 24.3, mem: 4.2, status: "running" },
-    { pid: 892, name: "chrome", cpu: 18.7, mem: 12.1, status: "running" },
-    { pid: 3456, name: "vscode", cpu: 12.1, mem: 8.4, status: "running" },
-    { pid: 2103, name: "postgres", cpu: 8.9, mem: 3.7, status: "sleeping" },
-    { pid: 4521, name: "docker", cpu: 6.2, mem: 5.1, status: "running" },
-    { pid: 1893, name: "nginx", cpu: 3.4, mem: 1.2, status: "sleeping" },
-    { pid: 7234, name: "redis", cpu: 2.1, mem: 0.8, status: "sleeping" },
-    { pid: 5612, name: "bun", cpu: 1.8, mem: 2.3, status: "running" },
-  ]
-
-  return { cores, memory, network, processes }
-}
-
-function tickState(prev: ReturnType<typeof createInitialState>) {
-  const cores = prev.cores.map((core) => {
-    const usage = jitter(core.usage, 15)
-    return { usage, history: pushHistory(core.history, usage) }
-  })
-
-  const totalMem = prev.memory.used + prev.memory.cached + prev.memory.buffers + prev.memory.free
-  const usedJitter = (jitter((prev.memory.used / totalMem) * 100, 3) / 100) * totalMem
-  const memory: MemoryMetrics = {
-    ...prev.memory,
-    used: Math.max(4, usedJitter),
-    swap: (jitter((prev.memory.swap / prev.memory.swapTotal) * 100, 5) / 100) * prev.memory.swapTotal,
-    history: pushHistory(prev.memory.history, (usedJitter / totalMem) * 100),
-  }
-
-  const downloadRate = jitter(prev.network.downloadRate, 20)
-  const uploadRate = jitter(prev.network.uploadRate, 8)
-  const network: NetworkMetrics = {
-    downloadRate,
-    uploadRate,
-    downloadHistory: pushHistory(prev.network.downloadHistory, downloadRate),
-    uploadHistory: pushHistory(prev.network.uploadHistory, uploadRate),
-    connections: Math.max(50, Math.round(jitter(prev.network.connections, 20))),
-    packetsIn: Math.max(100, Math.round(jitter(prev.network.packetsIn, 200))),
-    packetsOut: Math.max(50, Math.round(jitter(prev.network.packetsOut, 100))),
-  }
-
-  const processes = prev.processes.map((p) => ({
-    ...p,
-    cpu: Math.max(0.1, jitter(p.cpu, 4)),
-    mem: Math.max(0.1, jitter(p.mem, 1)),
-  }))
-
-  return { cores, memory, network, processes }
-}
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function SectionHeader({ children }: { children: React.ReactNode }): JSX.Element {
-  return <H2>{children}</H2>
-}
-
-function LabelValue({ label, value, color }: { label: string; value: string; color?: string }): JSX.Element {
-  return (
-    <Box gap={1}>
-      <Muted>{label}</Muted>
-      <Text color={color}>
-        <Strong>{value}</Strong>
-      </Text>
-    </Box>
-  )
-}
-
-// --- CPU Tab ---
-
-function CpuCore({ index, core }: { index: number; core: CoreMetrics }): JSX.Element {
-  const pct = Math.round(core.usage)
-  const color = severityColor(pct)
-  return (
-    <Box flexDirection="column">
-      <Box justifyContent="space-between">
-        <Text>
-          Core {index}{" "}
-          <Text color={color}>
-            <Strong>{String(pct).padStart(3)}%</Strong>
-          </Text>
-        </Text>
-        <Small>{sparkline(core.history, 100)}</Small>
-      </Box>
-      <ProgressBar value={core.usage / 100} color={color} showPercentage={false} />
-    </Box>
-  )
-}
-
-function CpuPane({ cores }: { cores: CoreMetrics[] }): JSX.Element {
-  const avgCpu = cores.reduce((sum, c) => sum + c.usage, 0) / cores.length
-  const maxCpu = Math.max(...cores.map((c) => c.usage))
-  const load1 = ((avgCpu / 100) * 8 * 0.8 + Math.random() * 0.5).toFixed(2)
-  const load5 = ((avgCpu / 100) * 8 * 0.7 + Math.random() * 0.3).toFixed(2)
-  const load15 = ((avgCpu / 100) * 8 * 0.6 + Math.random() * 0.2).toFixed(2)
-
-  return (
-    <Box flexDirection="column" gap={1} flexGrow={1}>
-      <SectionHeader>CPU</SectionHeader>
-      <Box gap={2}>
-        <LabelValue label="Avg:" value={`${Math.round(avgCpu)}%`} color={severityColor(avgCpu)} />
-        <LabelValue label="Max:" value={`${Math.round(maxCpu)}%`} color={severityColor(maxCpu)} />
-        <LabelValue label="Load:" value={`${load1} ${load5} ${load15}`} />
-      </Box>
-      {cores.map((core, i) => (
-        <CpuCore key={i} index={i} core={core} />
-      ))}
-    </Box>
-  )
-}
-
-// --- Memory Tab ---
-
-function StackedBar({ segments }: { segments: { value: number; color: string; char?: string }[] }): JSX.Element {
-  return (
-    <Box>
-      {segments.map((seg, i) => (
-        <Box key={i} flexGrow={Math.max(1, Math.round(seg.value * 100))}>
-          <Text color={seg.color}>{(seg.char ?? "█").repeat(80)}</Text>
-        </Box>
-      ))}
-    </Box>
-  )
-}
-
-function MemoryPane({ memory }: { memory: MemoryMetrics }): JSX.Element {
-  const total = memory.used + memory.cached + memory.buffers + memory.free
-  const usedPct = (memory.used / total) * 100
-  const swapPct = (memory.swap / memory.swapTotal) * 100
-
-  return (
-    <Box flexDirection="column" gap={1} flexGrow={1}>
-      <SectionHeader>Memory</SectionHeader>
-      <Box gap={2}>
-        <LabelValue label="Total:" value={`${total.toFixed(1)} GB`} />
-        <LabelValue label="Used:" value={`${memory.used.toFixed(1)} GB`} color={severityColor(usedPct)} />
-      </Box>
-      <Box flexDirection="column">
-        <Muted>Memory Breakdown</Muted>
-        <StackedBar
-          segments={[
-            { value: memory.used / total, color: severityColor(usedPct) },
-            { value: memory.cached / total, color: "$info" },
-            { value: memory.buffers / total, color: "$primary" },
-            { value: memory.free / total, color: "$muted", char: "░" },
-          ]}
-        />
-        <Box gap={2}>
-          <Text color={severityColor(usedPct)}>
-            {"█"} Used {memory.used.toFixed(1)}G
-          </Text>
-          <Text color="$info">
-            {"█"} Cache {memory.cached.toFixed(1)}G
-          </Text>
-          <Text color="$primary">
-            {"█"} Buf {memory.buffers.toFixed(1)}G
-          </Text>
-          <Muted>
-            {"░"} Free {memory.free.toFixed(1)}G
-          </Muted>
-        </Box>
-      </Box>
-      <Box flexDirection="column">
-        <Muted>
-          Swap: {memory.swap.toFixed(1)}G / {memory.swapTotal.toFixed(1)}G
-        </Muted>
-        <ProgressBar value={swapPct / 100} color={severityColor(swapPct)} showPercentage />
-      </Box>
-      <Box flexDirection="column">
-        <Muted>Top Consumers</Muted>
-        <Box gap={2}>
-          <Text>
-            chrome <Strong color="$warning">12.1G</Strong>
-          </Text>
-          <Text>
-            vscode <Strong color="$primary">8.4G</Strong>
-          </Text>
-          <Text>
-            docker <Strong color="$primary">5.1G</Strong>
-          </Text>
-        </Box>
-      </Box>
-      <Box flexDirection="column">
-        <Muted>History</Muted>
-        <Text color="$primary">{sparkline(memory.history, 100)}</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// --- Network Tab ---
-
-function NetworkPane({ network }: { network: NetworkMetrics }): JSX.Element {
-  return (
-    <Box flexDirection="column" gap={1} flexGrow={1}>
-      <SectionHeader>Network</SectionHeader>
-      <Box flexDirection="column">
-        <Box justifyContent="space-between">
-          <Text color="$success">
-            {"↓"} Download: <Strong>{network.downloadRate.toFixed(1)} MB/s</Strong>
-          </Text>
-          <Small>{sparkline(network.downloadHistory, 100)}</Small>
-        </Box>
-        <ProgressBar value={network.downloadRate / 100} color="$success" showPercentage={false} />
-      </Box>
-      <Box flexDirection="column">
-        <Box justifyContent="space-between">
-          <Text color="$info">
-            {"↑"} Upload: <Strong>{network.uploadRate.toFixed(1)} MB/s</Strong>
-          </Text>
-          <Small>{sparkline(network.uploadHistory, 40)}</Small>
-        </Box>
-        <ProgressBar value={network.uploadRate / 40} color="$info" showPercentage={false} />
-      </Box>
-      <Box borderStyle="round" borderColor="$border" paddingX={1} flexDirection="column">
-        <Muted>Connection Stats</Muted>
-        <Box gap={2}>
-          <LabelValue label="Connections:" value={String(network.connections)} />
-          <LabelValue label="Packets In:" value={String(network.packetsIn)} />
-          <LabelValue label="Packets Out:" value={String(network.packetsOut)} />
-        </Box>
-        <Box gap={2}>
-          <LabelValue label="Interface:" value="en0" />
-          <LabelValue label="MTU:" value="1500" />
-          <LabelValue label="Duplex:" value="full" />
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// --- Processes Tab ---
-
-function ProcessRow({ proc, isTop }: { proc: ProcessInfo; isTop: boolean }): JSX.Element {
-  const cpuColor = severityColor(proc.cpu)
-  return (
-    <Box gap={1}>
-      <Text color="$muted">{String(proc.pid).padStart(5)}</Text>
-      <Text bold={isTop}>{proc.name.padEnd(12)}</Text>
-      <Text color={cpuColor}>{proc.cpu.toFixed(1).padStart(5)}%</Text>
-      <Text color="$primary">{proc.mem.toFixed(1).padStart(5)}%</Text>
-      <Text color={proc.status === "running" ? "$success" : "$muted"}>{proc.status}</Text>
-    </Box>
-  )
-}
-
-function ProcessPane({ processes }: { processes: ProcessInfo[] }): JSX.Element {
-  const sorted = [...processes].sort((a, b) => b.cpu - a.cpu)
-
-  return (
-    <Box flexDirection="column" gap={1} flexGrow={1}>
-      <SectionHeader>Processes</SectionHeader>
-      <Box gap={1}>
-        <Muted>{"  PID".padStart(5)}</Muted>
-        <Muted>{"Name".padEnd(12)}</Muted>
-        <Muted>{"  CPU".padStart(5)}</Muted>
-        <Muted>{"  MEM".padStart(5)}</Muted>
-        <Muted>Status</Muted>
-      </Box>
-      {sorted.map((proc, i) => (
-        <ProcessRow key={proc.pid} proc={proc} isTop={i === 0} />
-      ))}
-      <Box gap={2} paddingTop={1}>
-        <LabelValue label="Total:" value={`${processes.length} processes`} />
-        <LabelValue
-          label="Running:"
-          value={String(processes.filter((p) => p.status === "running").length)}
-          color="$success"
-        />
-        <LabelValue
-          label="Sleeping:"
-          value={String(processes.filter((p) => p.status === "sleeping").length)}
-          color="$muted"
-        />
-      </Box>
-    </Box>
-  )
-}
-
-// --- Responsive Layout ---
-
-function WideLayout({
-  cores,
-  memory,
-  network,
-  processes,
-}: {
-  cores: CoreMetrics[]
-  memory: MemoryMetrics
-  network: NetworkMetrics
-  processes: ProcessInfo[]
-}): JSX.Element {
-  return (
-    <Box flexDirection="column" flexGrow={1} gap={1}>
-      <Box flexDirection="row" gap={1} flexGrow={1}>
-        <Box flexGrow={1} borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexDirection="column">
-          <CpuPane cores={cores} />
-        </Box>
-        <Box flexGrow={1} borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexDirection="column">
-          <MemoryPane memory={memory} />
-        </Box>
-      </Box>
-      <Box flexDirection="row" gap={1} flexGrow={1}>
-        <Box flexGrow={1} borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexDirection="column">
-          <NetworkPane network={network} />
-        </Box>
-        <Box flexGrow={1} borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexDirection="column">
-          <ProcessPane processes={processes} />
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Dashboard
-// ============================================================================
-
-export function Dashboard(): JSX.Element {
-  const { exit } = useApp()
-  const { width } = useContentRect()
-  const [state, setState] = useState(createInitialState)
-  const [tick, setTick] = useState(0)
-  const isWide = width > 100
-
-  useInterval(() => {
-    setState((prev) => tickState(prev))
-    setTick((t) => t + 1)
-  }, 500)
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) exit()
-  })
-
-  if (isWide) {
-    return (
-      <Box flexDirection="column" flexGrow={1}>
-        <Box justifyContent="space-between" paddingX={1}>
-          <Text>
-            <Strong>System Monitor</Strong> <Small>Tick #{tick}</Small>
-          </Text>
-          <Muted>
-            <Kbd>q</Kbd> quit
-          </Muted>
-        </Box>
-        <WideLayout cores={state.cores} memory={state.memory} network={state.network} processes={state.processes} />
-      </Box>
-    )
-  }
-
-  return (
-    <Box flexDirection="column" flexGrow={1}>
-      <Tabs defaultValue="cpu">
-        <Box justifyContent="space-between" paddingX={1}>
-          <TabList>
-            <Tab value="cpu">CPU</Tab>
-            <Tab value="memory">Memory</Tab>
-            <Tab value="network">Network</Tab>
-            <Tab value="processes">Processes</Tab>
-          </TabList>
-          <Small>Tick #{tick}</Small>
-        </Box>
-
-        <TabPanel value="cpu">
-          <Box borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexGrow={1}>
-            <CpuPane cores={state.cores} />
-          </Box>
-        </TabPanel>
-        <TabPanel value="memory">
-          <Box borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexGrow={1}>
-            <MemoryPane memory={state.memory} />
-          </Box>
-        </TabPanel>
-        <TabPanel value="network">
-          <Box borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexGrow={1}>
-            <NetworkPane network={state.network} />
-          </Box>
-        </TabPanel>
-        <TabPanel value="processes">
-          <Box borderStyle="round" borderColor="$border" paddingX={1} paddingY={1} flexGrow={1}>
-            <ProcessPane processes={state.processes} />
-          </Box>
-        </TabPanel>
-      </Tabs>
-      <Muted>
-        {" "}
-        <Kbd>h/l</Kbd> tabs <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="h/l tabs  Esc/q quit">
-      <Dashboard />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}