@vaultgradient/pipequery-cli 0.3.2

package/src/tui/components/Panel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface PanelProps {
+  title: string;
+  focused?: boolean;
+  loading?: boolean;
+  error?: string;
+  children: React.ReactNode;
+}
+
+export function Panel({ title, focused = false, loading = false, error, children }: PanelProps) {
+  const borderColor = focused ? 'cyan' : 'gray';
+
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      borderStyle="round"
+      borderColor={borderColor}
+      paddingX={1}
+      overflow="hidden"
+    >
+      <Box>
+        <Text bold color={focused ? 'cyan' : undefined}>{title}</Text>
+        {loading && <Text dimColor> ↻</Text>}
+      </Box>
+      {error ? (
+        <Text color="red">{error}</Text>
+      ) : (
+        children
+      )}
+    </Box>
+  );
+}

package/src/tui/components/Sparkline.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface SparklineProps {
+  data: Record<string, unknown>[];
+  maxPoints?: number;
+}
+
+// Braille-based sparkline characters (8 levels)
+const TICKS = ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█'];
+
+export function Sparkline({ data, maxPoints = 60 }: SparklineProps) {
+  if (!data.length) return <Text dimColor>(empty)</Text>;
+
+  const keys = Object.keys(data[0]);
+  const labelKey = keys[0];
+  const valueKey = keys.find((k) => typeof data[0][k] === 'number') ?? keys[1];
+
+  if (!valueKey) return <Text dimColor>(no numeric column)</Text>;
+
+  const points = data.slice(-maxPoints);
+  const values = points.map((row) => Number(row[valueKey]) || 0);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+
+  const spark = values.map((v) => {
+    const level = Math.round(((v - min) / range) * (TICKS.length - 1));
+    return TICKS[Math.max(0, Math.min(TICKS.length - 1, level))];
+  }).join('');
+
+  const lastLabel = points.length > 0 ? String(points[points.length - 1][labelKey] ?? '') : '';
+  const lastValue = values[values.length - 1];
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="cyan">{spark}</Text>
+      </Box>
+      <Box gap={2}>
+        <Text dimColor>min: {formatNum(min)}</Text>
+        <Text dimColor>max: {formatNum(max)}</Text>
+        <Text dimColor>last: {formatNum(lastValue)}</Text>
+        {lastLabel && <Text dimColor>({lastLabel})</Text>}
+      </Box>
+    </Box>
+  );
+}
+
+function formatNum(n: number): string {
+  if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return Number.isInteger(n) ? String(n) : n.toFixed(2);
+}

package/src/tui/components/StatBox.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+
+interface StatBoxProps {
+  data: unknown;
+}
+
+export function StatBox({ data }: StatBoxProps) {
+  let value: string;
+
+  if (Array.isArray(data) && data.length === 1 && typeof data[0] === 'object' && data[0] !== null) {
+    const obj = data[0] as Record<string, unknown>;
+    const firstVal = Object.values(obj)[0];
+    value = formatStat(firstVal);
+  } else if (typeof data === 'number' || typeof data === 'string') {
+    value = formatStat(data);
+  } else {
+    value = String(data);
+  }
+
+  return (
+    <Box justifyContent="center" alignItems="center">
+      <Text bold color="green">{value}</Text>
+    </Box>
+  );
+}
+
+function formatStat(val: unknown): string {
+  if (typeof val === 'number') {
+    if (val >= 1e12) return (val / 1e12).toFixed(2) + 'T';
+    if (val >= 1e9) return (val / 1e9).toFixed(2) + 'B';
+    if (val >= 1e6) return (val / 1e6).toFixed(2) + 'M';
+    if (val >= 1e3) return (val / 1e3).toFixed(2) + 'K';
+    return Number.isInteger(val) ? String(val) : val.toFixed(2);
+  }
+  return String(val ?? '');
+}

package/src/tui/components/StatusBar.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+
+interface StatusBarProps {
+  serverUrl: string;
+  refreshMs: number;
+}
+
+export function StatusBar({ serverUrl, refreshMs }: StatusBarProps) {
+  const [status, setStatus] = useState<{ uptime: number; sources: number } | null>(null);
+
+  useEffect(() => {
+    const fetchStatus = async () => {
+      try {
+        const res = await fetch(`${serverUrl}/status`);
+        const data = await res.json() as { uptime: number; sources: Record<string, unknown> };
+        setStatus({ uptime: data.uptime, sources: Object.keys(data.sources).length });
+      } catch {
+        setStatus(null);
+      }
+    };
+    fetchStatus();
+    const timer = setInterval(fetchStatus, refreshMs);
+    return () => clearInterval(timer);
+  }, [serverUrl, refreshMs]);
+
+  const uptimeStr = status ? formatUptime(status.uptime) : '—';
+  const sourcesStr = status ? `${status.sources} source(s)` : 'disconnected';
+  const refreshStr = `${Math.floor(refreshMs / 1000)}s`;
+
+  return (
+    <Box justifyContent="space-between" paddingX={1} borderStyle="single" borderColor="gray" borderTop={false} borderLeft={false} borderRight={false}>
+      <Box gap={2}>
+        <Text dimColor>server: {serverUrl}</Text>
+        <Text dimColor>uptime: {uptimeStr}</Text>
+        <Text dimColor>{sourcesStr}</Text>
+      </Box>
+      <Box gap={2}>
+        <Text dimColor>refresh: {refreshStr}</Text>
+        <Text dimColor>q: quit  tab: focus  ↑↓: scroll  []: resize  r: refresh</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function formatUptime(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
+  return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
+}

package/src/tui/components/Table.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+interface TableProps {
+  data: Record<string, unknown>[];
+  maxRows?: number;
+  focused?: boolean;
+}
+
+function formatValue(val: unknown): string {
+  if (val == null) return '';
+  if (typeof val === 'number') return Number.isInteger(val) ? String(val) : val.toFixed(2);
+  return String(val);
+}
+
+// Scrollbar characters
+const SCROLLBAR_TRACK = '│';
+const SCROLLBAR_THUMB = '█';
+
+function Scrollbar({ totalRows, visibleRows, scrollOffset, height }: {
+  totalRows: number;
+  visibleRows: number;
+  scrollOffset: number;
+  height: number;
+}) {
+  if (totalRows <= visibleRows) return null;
+
+  const thumbSize = Math.max(1, Math.round((visibleRows / totalRows) * height));
+  const maxScroll = totalRows - visibleRows;
+  const thumbPosition = maxScroll > 0
+    ? Math.round((scrollOffset / maxScroll) * (height - thumbSize))
+    : 0;
+
+  const lines: Array<{ char: string; isThumb: boolean }> = [];
+  for (let i = 0; i < height; i++) {
+    const isThumb = i >= thumbPosition && i < thumbPosition + thumbSize;
+    lines.push({ char: isThumb ? SCROLLBAR_THUMB : SCROLLBAR_TRACK, isThumb });
+  }
+
+  return (
+    <Box flexDirection="column" marginLeft={1}>
+      {lines.map((line, i) => (
+        <Text key={i} color={line.isThumb ? '#06b6d4' : '#333333'}>{line.char}</Text>
+      ))}
+    </Box>
+  );
+}
+
+export function Table({ data, maxRows = 20, focused = false }: TableProps) {
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const prevDataLenRef = useRef(data.length);
+
+  // Clamp scroll offset when data length changes, but preserve position
+  useEffect(() => {
+    const maxOffset = Math.max(0, data.length - maxRows);
+    setScrollOffset((prev) => Math.min(prev, maxOffset));
+    prevDataLenRef.current = data.length;
+  }, [data.length, maxRows]);
+
+  useInput((input, key) => {
+    if (!focused) return;
+    const maxOffset = Math.max(0, data.length - maxRows);
+    if (key.upArrow) setScrollOffset((o) => Math.max(0, o - 1));
+    if (key.downArrow) setScrollOffset((o) => Math.min(maxOffset, o + 1));
+    // Page up/down
+    if (key.pageUp || (input === 'u' && key.ctrl)) {
+      setScrollOffset((o) => Math.max(0, o - maxRows));
+    }
+    if (key.pageDown || (input === 'd' && key.ctrl)) {
+      setScrollOffset((o) => Math.min(maxOffset, o + maxRows));
+    }
+  });
+
+  if (!data.length) return <Text dimColor>(empty)</Text>;
+
+  const columns = Object.keys(data[0]);
+  const widths = columns.map((col) => {
+    const maxData = data.reduce((max, row) => Math.max(max, formatValue(row[col]).length), 0);
+    return Math.min(Math.max(col.length, maxData), 30);
+  });
+
+  const visibleRows = data.slice(scrollOffset, scrollOffset + maxRows);
+  const needsScroll = data.length > maxRows;
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Box flexDirection="column" flexGrow={1}>
+          {/* Header */}
+          <Box>
+            {columns.map((col, i) => (
+              <Box key={col} width={widths[i] + 2}>
+                <Text bold>{col.slice(0, widths[i]).padEnd(widths[i])}</Text>
+              </Box>
+            ))}
+          </Box>
+          {/* Separator */}
+          <Box>
+            <Text dimColor>{widths.map((w) => '─'.repeat(w)).join('──')}</Text>
+          </Box>
+          {/* Rows */}
+          {visibleRows.map((row, ri) => (
+            <Box key={ri}>
+              {columns.map((col, i) => (
+                <Box key={col} width={widths[i] + 2}>
+                  <Text color={typeof row[col] === 'number' ? '#f59e0b' : undefined}>
+                    {formatValue(row[col]).slice(0, widths[i]).padEnd(widths[i])}
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          ))}
+        </Box>
+        {/* Scrollbar */}
+        {needsScroll && (
+          <Scrollbar
+            totalRows={data.length}
+            visibleRows={maxRows}
+            scrollOffset={scrollOffset}
+            height={visibleRows.length + 2}
+          />
+        )}
+      </Box>
+      {/* Scroll info */}
+      {needsScroll && (
+        <Text dimColor>
+          {scrollOffset + 1}–{Math.min(scrollOffset + maxRows, data.length)} of {data.length} rows
+          {focused ? ' │ ↑↓ scroll' : ''}
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/hooks/useBatchedData.ts

@@ -0,0 +1,77 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface PanelResult {
+  data: unknown;
+  error?: string;
+}
+
+/**
+ * Fetches all panel queries in a single batch and updates state once.
+ * This prevents multiple re-renders (and thus flicker) that occur when
+ * each panel fetches independently.
+ */
+export function useBatchedData(
+  serverUrl: string,
+  queries: string[],
+  refreshMs: number,
+) {
+  const [results, setResults] = useState<Map<string, PanelResult>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [trigger, setTrigger] = useState(0);
+  const queriesKey = queries.join('|||');
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchAll = async () => {
+      const entries = await Promise.all(
+        queries.map(async (query) => {
+          try {
+            const res = await fetch(`${serverUrl}/api/_control/query`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query }),
+            });
+            const json = (await res.json()) as {
+              ok: boolean;
+              result?: unknown;
+              error?: string;
+            };
+            if (json.ok) {
+              return [query, { data: json.result }] as const;
+            }
+            return [query, { data: null, error: json.error }] as const;
+          } catch (err) {
+            return [
+              query,
+              { data: null, error: err instanceof Error ? err.message : String(err) },
+            ] as const;
+          }
+        }),
+      );
+
+      if (!cancelled) {
+        setResults(new Map(entries));
+        setLoading(false);
+      }
+    };
+
+    fetchAll();
+    const timer = setInterval(fetchAll, refreshMs);
+
+    return () => {
+      cancelled = true;
+      clearInterval(timer);
+    };
+  }, [serverUrl, queriesKey, refreshMs, trigger]);
+
+  // Manual refresh — force sources to re-fetch, then re-run queries
+  const refresh = useCallback(async () => {
+    try {
+      await fetch(`${serverUrl}/api/_control/refresh`, { method: 'POST' });
+    } catch { /* ignore */ }
+    setTrigger((t) => t + 1);
+  }, [serverUrl]);
+
+  return { results, loading, refresh };
+}

package/src/tui/hooks/useKeyboard.ts

@@ -0,0 +1,23 @@
+import { useInput, useApp } from 'ink';
+
+interface KeyboardOptions {
+  panelCount: number;
+  focusedPanel: number;
+  setFocusedPanel: (fn: (i: number) => number) => void;
+  onRefresh?: () => void;
+  onResize?: (direction: 'grow' | 'shrink') => void;
+}
+
+export function useKeyboard({ panelCount, focusedPanel, setFocusedPanel, onRefresh, onResize }: KeyboardOptions) {
+  const { exit } = useApp();
+
+  useInput((input, key) => {
+    if (input === 'q') exit();
+    if (input === 'r') onRefresh?.();
+    if (key.tab && !key.shift) setFocusedPanel((i) => (i + 1) % panelCount);
+    if (key.tab && key.shift) setFocusedPanel((i) => (i - 1 + panelCount) % panelCount);
+    // Resize: [ to shrink, ] to grow focused panel
+    if (input === ']') onResize?.('grow');
+    if (input === '[') onResize?.('shrink');
+  });
+}

package/src/tui/hooks/useLiveData.ts

@@ -0,0 +1,161 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import http from 'node:http';
+
+interface PanelResult {
+  data: unknown;
+  error?: string;
+}
+
+/**
+ * Connects to SSE for real-time push updates from the server.
+ * Falls back to polling if SSE connection fails.
+ */
+export function useLiveData(
+  serverUrl: string,
+  queries: string[],
+  fallbackMs: number,
+) {
+  const [results, setResults] = useState<Map<string, PanelResult>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [connected, setConnected] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const fallbackTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const queriesKey = queries.join('|||');
+
+  // SSE connection
+  useEffect(() => {
+    if (queries.length === 0) return;
+
+    const abort = new AbortController();
+    abortRef.current = abort;
+    let sseConnected = false;
+
+    const connectSSE = () => {
+      if (abort.signal.aborted) return;
+
+      const url = new URL('/api/_control/sse', serverUrl);
+      url.searchParams.set('queries', JSON.stringify(queries));
+
+      const req = http.get(url.toString(), { signal: abort.signal }, (res) => {
+        if (res.statusCode !== 200) {
+          startPolling();
+          return;
+        }
+
+        sseConnected = true;
+        setConnected(true);
+        stopPolling();
+
+        let buffer = '';
+        res.on('data', (chunk: Buffer) => {
+          buffer += chunk.toString();
+          const blocks = buffer.split('\n\n');
+          buffer = blocks.pop() ?? '';
+
+          // Batch all events from this chunk into a single state update
+          const updates: Array<{ index: number; result?: unknown; error?: string }> = [];
+
+          for (const block of blocks) {
+            const dataLine = block.split('\n').find((l) => l.startsWith('data: '));
+            if (!dataLine) continue;
+
+            try {
+              const event = JSON.parse(dataLine.slice(6)) as {
+                panelIndex: number;
+                result?: unknown;
+                error?: string;
+              };
+              updates.push({ index: event.panelIndex, result: event.result, error: event.error });
+            } catch {
+              // ignore heartbeats
+            }
+          }
+
+          if (updates.length > 0) {
+            setResults((prev) => {
+              const next = new Map(prev);
+              for (const u of updates) {
+                const query = queries[u.index];
+                if (query) {
+                  next.set(query, u.error ? { data: null, error: u.error } : { data: u.result });
+                }
+              }
+              return next;
+            });
+            setLoading(false);
+          }
+        });
+
+        res.on('end', () => {
+          sseConnected = false;
+          setConnected(false);
+          if (!abort.signal.aborted) {
+            startPolling();
+            setTimeout(connectSSE, 3000);
+          }
+        });
+      });
+
+      req.on('error', () => {
+        sseConnected = false;
+        setConnected(false);
+        if (!abort.signal.aborted) {
+          startPolling();
+          setTimeout(connectSSE, 3000);
+        }
+      });
+    };
+
+    // Polling fallback
+    const pollAll = async () => {
+      const entries = await Promise.all(
+        queries.map(async (query) => {
+          try {
+            const res = await fetch(`${serverUrl}/api/_control/query`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query }),
+            });
+            const json = (await res.json()) as { ok: boolean; result?: unknown; error?: string };
+            if (json.ok) return [query, { data: json.result }] as const;
+            return [query, { data: null, error: json.error }] as const;
+          } catch (err) {
+            return [query, { data: null, error: err instanceof Error ? err.message : String(err) }] as const;
+          }
+        }),
+      );
+      setResults(new Map(entries));
+      setLoading(false);
+    };
+
+    const startPolling = () => {
+      if (fallbackTimerRef.current || sseConnected) return;
+      pollAll();
+      fallbackTimerRef.current = setInterval(pollAll, fallbackMs);
+    };
+
+    const stopPolling = () => {
+      if (fallbackTimerRef.current) {
+        clearInterval(fallbackTimerRef.current);
+        fallbackTimerRef.current = null;
+      }
+    };
+
+    connectSSE();
+
+    return () => {
+      abort.abort();
+      stopPolling();
+    };
+  }, [serverUrl, queriesKey, fallbackMs]);
+
+  // Manual refresh — force sources to re-fetch
+  const refresh = useCallback(async () => {
+    try {
+      await fetch(`${serverUrl}/api/_control/refresh`, { method: 'POST' });
+    } catch { /* ignore */ }
+    // SSE will automatically push new data after source refresh
+  }, [serverUrl]);
+
+  return { results, loading, connected, refresh };
+}

package/src/tui/hooks/useMouse.ts

@@ -0,0 +1,86 @@
+import { useEffect, useRef } from 'react';
+
+interface MouseEvent {
+  x: number;
+  y: number;
+  button: 'left' | 'right' | 'middle' | 'scroll-up' | 'scroll-down';
+  type: 'press' | 'release' | 'move';
+}
+
+type MouseHandler = (event: MouseEvent) => void;
+
+// Regex to detect SGR mouse sequences
+const SGR_MOUSE_RE = /\x1B\[<(\d+);(\d+);(\d+)([Mm])/g;
+
+/**
+ * Enable mouse click tracking in the terminal.
+ * Only captures button press/release — does NOT capture mouse movement
+ * to avoid interfering with normal terminal scrolling.
+ */
+export function useMouse(handler: MouseHandler) {
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  useEffect(() => {
+    // Enable button event tracking only (not movement)
+    // 1000 = basic click tracking, 1006 = SGR extended coordinates
+    process.stdout.write('\x1B[?1000h');
+    process.stdout.write('\x1B[?1006h');
+
+    // Use a keypress listener instead of raw data to avoid blocking Ink
+    const onKeypress = (_ch: string | undefined, key: any) => {
+      // Ink passes raw sequences through; we need to check raw stdin
+    };
+
+    // Intercept raw data, parse mouse events, and re-emit non-mouse data
+    const originalEmit = process.stdin.emit.bind(process.stdin);
+    const wrappedEmit = function (event: string, ...args: any[]): boolean {
+      if (event === 'data' && args[0]) {
+        const buf = args[0] as Buffer;
+        const str = buf.toString();
+
+        // Check if this data contains mouse sequences
+        if (str.includes('\x1B[<')) {
+          let match: RegExpExecArray | null;
+          SGR_MOUSE_RE.lastIndex = 0;
+
+          while ((match = SGR_MOUSE_RE.exec(str)) !== null) {
+            const buttonCode = parseInt(match[1], 10);
+            const x = parseInt(match[2], 10);
+            const y = parseInt(match[3], 10);
+            const isRelease = match[4] === 'm';
+
+            let button: MouseEvent['button'] = 'left';
+            if ((buttonCode & 3) === 1) button = 'middle';
+            else if ((buttonCode & 3) === 2) button = 'right';
+            else if (buttonCode & 64) button = buttonCode & 1 ? 'scroll-down' : 'scroll-up';
+
+            const type: MouseEvent['type'] = isRelease
+              ? 'release'
+              : (buttonCode & 32) ? 'move' : 'press';
+
+            handlerRef.current({ x, y, button, type });
+          }
+
+          // Strip mouse sequences and pass remaining data through
+          const remaining = str.replace(SGR_MOUSE_RE, '');
+          if (remaining.length > 0) {
+            return originalEmit(event, Buffer.from(remaining));
+          }
+          // Consumed entirely by mouse — still return true
+          return true;
+        }
+      }
+
+      return originalEmit(event, ...args);
+    } as typeof process.stdin.emit;
+
+    process.stdin.emit = wrappedEmit;
+
+    return () => {
+      process.stdin.emit = originalEmit;
+      process.stdout.write('\x1B[?1006l');
+      process.stdout.write('\x1B[?1000l');
+    };
+  }, []);
+}