@hoox-sh/hoox-tui 0.2.0 → 0.3.1

package/src/components/views/dashboard.tsx

@@ -18,7 +18,7 @@
  * Colors from design tokens via @hoox-sh/hoox-shared. No CSS, no DOM.
  */
 import { useEffect, useMemo, useState, useCallback, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import { Colors, useServiceStore } from "@hoox-sh/hoox-shared";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { StatusDot } from "../shared/status-dot";
@@ -36,6 +36,7 @@ import { ModelHealthSection } from "./dashboard/model-health-section";
 import { PyneHealthSection } from "./dashboard/pyne-health-section";
 import { AlertsPanel } from "./dashboard/alerts-panel";
 import { useUIStore } from "@hoox-sh/hoox-shared";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // ─── Props ────────────────────────────────────────────────────────────────────
 
@@ -73,11 +74,13 @@ function formatStatNumber(value: number, isPnl = false): string {
  * header. Auto-refreshes on mount and shows the engaged/released state with a
  * color-coded status dot. Errors degrade gracefully (badge just shows UNKNOWN).
  */
+/** How often the dashboard kill-switch badge re-probes (ms). */
+const KILL_SWITCH_POLL_MS = 15_000;
+
 function KillSwitchStatusBadge() {
   const [state, setState] = useState<"engaged" | "released" | "unknown">(
     "unknown"
   );
-
   useEffect(() => {
     let cancelled = false;
     const refresh = async () => {
@@ -94,8 +97,13 @@ function KillSwitchStatusBadge() {
       }
     };
     void refresh();
+    // Re-probe periodically so engage/release in Service Manager is visible here
+    const timer = setInterval(() => {
+      void refresh();
+    }, KILL_SWITCH_POLL_MS);
     return () => {
       cancelled = true;
+      clearInterval(timer);
     };
   }, []);
 
@@ -200,10 +208,18 @@ function DashboardHeader({
  * ServiceHealthGrid — displays all workers as a grid of status cards.
  * Each card shows: [█ ▌ ░] WORKER_NAME
  * Limited to first 10 workers (fits the dashboard layout).
+ *
+ * Keyboard (dashboard active, when not handling alerts):
+ *   ←→↑↓ / hjkl — move focus among worker cards
+ *   Enter       — open worker detail
+ * Mouse: click card → detail
  */
 function ServiceHealthGrid() {
   const workers = useServiceStore((s) => s.workers);
   const connectionStatus = useServiceStore((s) => s.connectionStatus);
+  const activeView = useUIStore((s) => s.activeView);
+  const isActive = activeView === "dashboard";
+  const [focusIndex, setFocusIndex] = useState(0);
 
   // Show first 10 workers (dashboard is an overview)
   const visibleWorkers = useMemo(() => workers.slice(0, 10), [workers]);
@@ -215,6 +231,51 @@ function ServiceHealthGrid() {
     [visibleWorkers.length]
   );
 
+  useEffect(() => {
+    setFocusIndex((i) =>
+      visibleWorkers.length === 0 ? 0 : Math.min(i, visibleWorkers.length - 1)
+    );
+  }, [visibleWorkers.length]);
+
+  const openWorker = useCallback((workerId: string) => {
+    useServiceStore.getState().selectWorker(workerId);
+    useUIStore.getState().setView("worker-detail");
+  }, []);
+
+  // 5-column grid navigation
+  const COLS = 5;
+  useViewKeyboard((key) => {
+    if (!isActive || visibleWorkers.length === 0) return;
+    const name = String(key.name ?? "").toLowerCase();
+    const n = visibleWorkers.length;
+    if (name === "left" || name === "h") {
+      setFocusIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (name === "right" || name === "l") {
+      setFocusIndex((i) => Math.min(n - 1, i + 1));
+      return;
+    }
+    if (name === "up" || name === "k") {
+      // Prefer alerts panel owning ↑↓ when alerts exist — grid uses only
+      // left/right by default; vertical jumps by COLS when pressed with Alt.
+      if (key.alt) {
+        setFocusIndex((i) => Math.max(0, i - COLS));
+      }
+      return;
+    }
+    if (name === "down" || name === "j") {
+      if (key.alt) {
+        setFocusIndex((i) => Math.min(n - 1, i + COLS));
+      }
+      return;
+    }
+    if (name === "return" || name === "enter") {
+      const w = visibleWorkers[focusIndex];
+      if (w) openWorker(w.id);
+    }
+  });
+
   if (workers.length === 0) {
     const offline =
       connectionStatus === "offline" || connectionStatus === "reconnecting";
@@ -238,10 +299,16 @@ function ServiceHealthGrid() {
 
   return (
     <box flexDirection="column" gap={0}>
-      {/* Section label */}
-      <text fg={Colors.foreground} bold dim>
-        SERVICE HEALTH
-      </text>
+      {/* Section label + compact keyboard affordance (avoid extra footer row —
+          OpenTUI flexWrap was overlapping a sibling hint into later cards). */}
+      <box flexDirection="row" gap={2}>
+        <text fg={Colors.foreground} bold dim>
+          SERVICE HEALTH
+        </text>
+        <text fg={Colors.dim} dim>
+          ←→ Enter
+        </text>
+      </box>
 
       {/* 2 rows × 5 columns grid */}
       <box
@@ -251,43 +318,51 @@ function ServiceHealthGrid() {
         paddingTop={1}
         paddingBottom={1}
       >
-        {visibleWorkers.map((worker) => (
+        {visibleWorkers.map((worker, i) => {
+          const focused = i === focusIndex;
+          return (
+            <box
+              key={worker.id}
+              flexDirection="row"
+              width={28}
+              gap={1}
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={focused ? Colors.card : undefined}
+              onMouseUp={() => {
+                setFocusIndex(i);
+                openWorker(worker.id);
+              }}
+            >
+              <StatusDot status={worker.status} />
+              <text
+                fg={focused ? Colors.accent : Colors.foreground}
+                bold={focused}
+              >
+                {worker.name}
+              </text>
+            </box>
+          );
+        })}
+        {/* Fill empty slots in the same wrap container */}
+        {emptySlots.map((i) => (
           <box
-            key={worker.id}
+            key={`empty-${i}`}
             flexDirection="row"
             width={28}
             gap={1}
             paddingLeft={1}
             paddingRight={1}
           >
-            <StatusDot status={worker.status} />
-            <text fg={Colors.foreground}>{worker.name}</text>
+            <text fg={Colors.dim} dim>
+              -
+            </text>
+            <text fg={Colors.dim} dim>
+              -
+            </text>
           </box>
         ))}
       </box>
-
-      {/* Fill empty slots in grid to maintain 10-card layout */}
-      {emptySlots.length > 0 && (
-        <box flexDirection="row" flexWrap="wrap" gap={1}>
-          {emptySlots.map((i) => (
-            <box
-              key={`empty-${i}`}
-              flexDirection="row"
-              width={28}
-              gap={1}
-              paddingLeft={1}
-              paddingRight={1}
-            >
-              <text fg={Colors.dim} dim>
-                —
-              </text>
-              <text fg={Colors.dim} dim>
-                —
-              </text>
-            </box>
-          ))}
-        </box>
-      )}
     </box>
   );
 }
@@ -301,11 +376,14 @@ function MetricCard({
   value,
   color,
   isPnl = false,
+  loading = false,
 }: {
   label: string;
   value: number;
   color: string;
   isPnl?: boolean;
+  /** When true, show placeholder instead of inventing zeros. */
+  loading?: boolean;
 }) {
   return (
     <box
@@ -325,10 +403,10 @@ function MetricCard({
         </text>
       </box>
 
-      {/* Value (large, colored) */}
+      {/* Value (large, colored) — never invent zeros while loading */}
       <box>
-        <text fg={color} bold>
-          {formatStatNumber(value, isPnl)}
+        <text fg={loading ? Colors.dim : color} bold={!loading}>
+          {loading ? "..." : formatStatNumber(value, isPnl)}
         </text>
       </box>
     </box>
@@ -341,8 +419,8 @@ function MetricCard({
  */
 function QuickStatsRow() {
   const metrics = useServiceStore((s) => s.metrics);
+  const loading = metrics === null;
 
-  // Default values when metrics is null/unavailable
   const totalPnl = metrics?.totalPnl ?? 0;
   const activeStrategies = metrics?.activeStrategies ?? 0;
   const dailyTrades = metrics?.dailyTrades ?? 0;
@@ -360,22 +438,29 @@ function QuickStatsRow() {
           value={totalPnl}
           color={totalPnl >= 0 ? Colors.success : Colors.error}
           isPnl
+          loading={loading}
         />
         <MetricCard
           label="ACTIVE STRATEGIES"
           value={activeStrategies}
           color={Colors.accent}
+          loading={loading}
         />
         <MetricCard
           label="DAILY TRADES"
           value={dailyTrades}
           color={Colors.info}
+          loading={loading}
+        />
+        <MetricCard
+          label="AI CALLS"
+          value={aiCalls}
+          color={Colors.accent}
+          loading={loading}
         />
-        <MetricCard label="AI CALLS" value={aiCalls} color={Colors.accent} />
       </box>
 
-      {/* Empty state when metrics unavailable */}
-      {metrics === null && (
+      {loading && (
         <box paddingTop={1} alignItems="center">
           <Spinner label="Waiting for metrics data..." />
         </box>
@@ -554,7 +639,7 @@ export function DashboardView({ dialog }: DashboardViewProps = {}) {
   }, [handleRunAutoRepair]);
 
   // Dismiss repair panel on ESC key when visible
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (repairState.kind !== "idle" && key.name === "escape") {
       dismissRepairPanel();
     }

package/src/components/views/db-query.test.tsx

@@ -45,18 +45,25 @@ describe("DbQueryView", () => {
     expect(formatCell(null, 20)).toBe("NULL");
     expect(formatCell(undefined, 20)).toBe("NULL");
     expect(formatCell(42, 20)).toBe("42");
+    expect(formatCell(true, 20)).toBe("true");
+    expect(formatCell(false, 20)).toBe("false");
+    expect(formatCell(Number.POSITIVE_INFINITY, 20)).toBe("Infinity");
   });
 
   it("sanitizes cell text and collapses newlines", () => {
     expect(sanitizeCellText("a\x1bb")).toBe("ab");
     expect(formatCell("line1\nline2", 40)).toBe("line1 line2");
+    expect(formatCell("x".repeat(30), 10)).toBe("xxxxxxxxx…");
   });
 
   it("sorts nulls last and numbers numerically", () => {
     expect(compareCells(null, 1, "asc")).toBe(1);
     expect(compareCells(1, null, "asc")).toBe(-1);
+    expect(compareCells(null, null, "asc")).toBe(0);
     expect(compareCells(2, 10, "asc")).toBeLessThan(0);
     expect(compareCells(2, 10, "desc")).toBeGreaterThan(0);
+    expect(compareCells("b", "a", "asc")).toBeGreaterThan(0);
+    expect(compareCells("b", "a", "desc")).toBeLessThan(0);
   });
 
   it("rejects write SQL before any CLI call (defence in depth)", () => {

package/src/components/views/db-query.tsx

@@ -37,7 +37,7 @@
  *   - Renders an explicit empty/error state instead of throwing
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import { Colors, useUIStore } from "@hoox-sh/hoox-shared";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { Spinner, EmptyState } from "../shared/spinner";
@@ -53,6 +53,7 @@ import {
   TuiStateFiles,
   writeJsonState,
 } from "../../services/tui-storage";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -270,7 +271,7 @@ interface HistoryOverlayProps {
 
 function HistoryOverlay({ history, onSelect, onClose }: HistoryOverlayProps) {
   // Keyboard: Escape closes, Up/Down navigate, Enter selects
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (key.name === "escape") {
       onClose();
       return;
@@ -369,7 +370,7 @@ function SqlInputRow({
   onChange,
 }: SqlInputRowProps) {
   // Capture keyboard when active.
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!inputActive) return;
     if (key.name === "escape") {
       onDeactivate();
@@ -587,7 +588,7 @@ export function DbQueryView() {
   }, [historyIdx, history]);
 
   // ── Global keyboard shortcuts (active view only) ───────────────────────────
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (showHistory) return; // History overlay handles its own keys
 

package/src/components/views/edge-topology.tsx

@@ -11,12 +11,13 @@ import {
   resolveHooxRuntimeRoot,
   useUIStore,
 } from "@hoox-sh/hoox-shared";
-import { useKeyboard } from "@opentui/react";
+
 import * as fs from "fs";
 import * as path from "path";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { ViewHeader } from "../shared/view-header";
 import { EmptyState } from "../shared/spinner";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 /** Cap default flow list so huge graphs stay responsive. */
 export const MAX_FLOWS_PREVIEW = 15;
@@ -201,7 +202,7 @@ function EdgeTopologyInner() {
     );
   }, [selectableItems.length]);
 
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (key.name === "escape") {
       setSelectedNode(null);

package/src/components/views/kv-viewer.test.tsx

@@ -151,6 +151,34 @@ describe("KvViewer", () => {
 
   it("sanitizes revealed KV values (no ESC injection)", () => {
     expect(sanitizeKvValue("secret\x1b[0mvalue")).toBe("secret[0mvalue");
+    expect(sanitizeKvValue("a\u0000b\u0007c")).toBe("abc");
+    const long = "x".repeat(5000);
+    expect(sanitizeKvValue(long).length).toBeLessThanOrEqual(4001);
+    expect(
+      sanitizeKvValue(long).endsWith("…") ||
+        sanitizeKvValue(long).endsWith("\u2026")
+    ).toBe(true);
+  });
+
+  it("filterKvKeys is case-insensitive and trims", () => {
+    const keys = [
+      {
+        name: "Alpha",
+        valueSize: 1,
+        lastModified: null,
+        isSecret: false,
+        manifestType: null as null,
+      },
+      {
+        name: "beta",
+        valueSize: 1,
+        lastModified: null,
+        isSecret: false,
+        manifestType: null as null,
+      },
+    ];
+    expect(filterKvKeys(keys, "ALP")).toHaveLength(1);
+    expect(filterKvKeys(keys, "\t")).toHaveLength(2);
   });
 
   it("caps visible key rows", () => {

package/src/components/views/kv-viewer.tsx

@@ -48,13 +48,14 @@
  *     while the table shows the filtered count.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import { Colors, useUIStore } from "@hoox-sh/hoox-shared";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { Spinner, EmptyState } from "../shared/spinner";
 import { ViewHeader } from "../shared/view-header";
 import { cliBridge } from "../../services/cli-bridge";
 import type { KvKey, KvKeySnapshot } from "../../services/cli-bridge";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 /** Auto-refresh interval in milliseconds. */
 export const REFRESH_INTERVAL_MS = 5_000;
@@ -307,7 +308,7 @@ function SearchBox({
   onActivate,
   onDeactivate,
 }: SearchBoxProps) {
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!active) return;
     if (key.name === "escape") {
       onDeactivate();
@@ -494,7 +495,7 @@ export function KvViewer() {
   }, []);
 
   // ── Global keyboard handling (active only when this view is on top) ──
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (searchActive) return; // SearchBox handles its own keys.
     if (key.name === "slash" || (key.ctrl && key.name === "f")) {

package/src/components/views/logs-viewer.tsx

@@ -13,7 +13,7 @@
  * Color-coded by level using Hoox design tokens. Wrapped in ErrorBoundary.
  */
 import { useState, useMemo, useCallback, useEffect, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import {
   Colors,
   LogLevelColor,
@@ -25,6 +25,7 @@ import { ErrorBoundary } from "../shared/error-boundary";
 import { cliBridge } from "../../services/cli-bridge";
 import { ViewHeader } from "../shared/view-header";
 import { Panel } from "../shared/panel";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // ─── Color Tokens ────────────────────────────────────────────────────────────
 
@@ -283,6 +284,8 @@ interface ActionBarProps {
   onTogglePause: () => void;
   onExport: () => void;
   onClear: () => void;
+  /** True when user must confirm clear a second time. */
+  clearArmed?: boolean;
   sseConnected: boolean;
   onFetch?: () => void;
 }
@@ -292,6 +295,7 @@ function ActionBar({
   onTogglePause,
   onExport,
   onClear,
+  clearArmed = false,
   sseConnected,
   onFetch,
 }: ActionBarProps) {
@@ -315,8 +319,12 @@ function ActionBar({
         <text fg={Colors.foreground} onMouseUp={onExport}>
           [Export]
         </text>
-        <text fg={Colors.foreground} onMouseUp={onClear}>
-          [Clear]
+        <text
+          fg={clearArmed ? Colors.warning : Colors.foreground}
+          bold={clearArmed}
+          onMouseUp={onClear}
+        >
+          {clearArmed ? "[Confirm Clear]" : "[Clear]"}
         </text>
         {!sseConnected && onFetch ? (
           <text fg={Colors.accent} onMouseUp={onFetch}>
@@ -325,7 +333,7 @@ function ActionBar({
         ) : null}
       </box>
       <text dim fg={Colors.muted}>
-        Space:pause /:search Tab:switch
+        Space:pause /:search
       </text>
     </box>
   );
@@ -439,23 +447,41 @@ export function LogsViewer() {
     }
   }, []);
 
+  const [clearArmed, setClearArmed] = useState(false);
+  const clearArmTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const handleClear = useCallback(() => {
-    // Soft confirm via status alert path — clearing is local buffer only.
-    // (No dialog prop on this view; keep non-destructive.)
+    // Two-step confirm (local buffer only — no dialog on this view).
+    if (!clearArmed) {
+      setClearArmed(true);
+      if (clearArmTimer.current) clearTimeout(clearArmTimer.current);
+      clearArmTimer.current = setTimeout(() => setClearArmed(false), 3000);
+      useServiceStore.getState().addAlert({
+        id: `clear-confirm-${Date.now()}`,
+        type: "info",
+        severity: "warning",
+        message: "Press CLEAR again within 3s to wipe the log buffer",
+        timestamp: Date.now(),
+        acknowledged: false,
+      });
+      return;
+    }
+    setClearArmed(false);
+    if (clearArmTimer.current) {
+      clearTimeout(clearArmTimer.current);
+      clearArmTimer.current = null;
+    }
     const ts = Date.now();
-    useServiceStore.setState((state) => {
-      state.logs = [];
-    });
-    const alert: Alert = {
+    useServiceStore.getState().clearLogs();
+    useServiceStore.getState().addAlert({
       id: `clear-${ts}`,
       type: "info",
       severity: "info",
       message: "Log buffer cleared",
       timestamp: ts,
       acknowledged: false,
-    };
-    useServiceStore.getState().addAlert(alert);
-  }, []);
+    });
+  }, [clearArmed]);
 
   const handleFetch = useCallback(async () => {
     const ts = Date.now();
@@ -526,16 +552,17 @@ export function LogsViewer() {
   }, [paused, frozen, displayed]);
 
   // ── Keyboard (active view only) ─────────────────────────────────────────
-  useKeyboard((key: { name: string; sequence?: string; ctrl?: boolean }) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
+    const name = String(key.name ?? "");
 
     // Search mode: type to filter, Esc / Enter to leave
     if (searchActive) {
-      if (key.name === "escape" || key.name === "return") {
+      if (name === "escape" || name === "return") {
         setSearchActive(false);
         return;
       }
-      if (key.name === "backspace" || key.name === "delete") {
+      if (name === "backspace" || name === "delete") {
         setSearchText((t) => t.slice(0, -1));
         return;
       }
@@ -545,13 +572,12 @@ export function LogsViewer() {
       return;
     }
 
-    if (key.name === "space") {
+    if (name === "space") {
       setPaused((p) => !p);
       return;
     }
-    if (key.name === "slash" || key.name === "/") {
+    if (name === "slash" || name === "/") {
       setSearchActive(true);
-      return;
     }
   });
 
@@ -607,6 +633,7 @@ export function LogsViewer() {
           onTogglePause={() => setPaused((p) => !p)}
           onExport={handleExport}
           onClear={handleClear}
+          clearArmed={clearArmed}
           sseConnected={sseConnected}
           onFetch={handleFetch}
         />

package/src/components/views/queue-depth.test.tsx

@@ -172,6 +172,45 @@ describe("QueueDepthView", () => {
     ]);
   });
 
+  it("sortQueuesByPressure ties break by name and handles unknown status", () => {
+    const ts = new Date().toISOString();
+    const queues = [
+      {
+        queueName: "b",
+        depth: 0,
+        max: 1000,
+        status: "healthy" as const,
+        producers: 0,
+        consumers: 0,
+        paused: false,
+        timestamp: ts,
+      },
+      {
+        queueName: "a",
+        depth: 0,
+        max: 1000,
+        status: "healthy" as const,
+        producers: 0,
+        consumers: 0,
+        paused: false,
+        timestamp: ts,
+      },
+      {
+        queueName: "z-unknown",
+        depth: 0,
+        max: 1000,
+        status: "unknown" as const,
+        producers: 0,
+        consumers: 0,
+        paused: false,
+        timestamp: ts,
+      },
+    ];
+    // unknown ranks above healthy (3 < 4), ties break by name
+    const sorted = sortQueuesByPressure(queues);
+    expect(sorted.map((q) => q.queueName)).toEqual(["z-unknown", "a", "b"]);
+  });
+
   // ── Pattern contract for subsequent views ──────────────────────────────
   // Document the architectural pattern this view establishes so the
   // views added in subtasks 04, 05, 06, 08 can be audited against it.

package/src/components/views/queue-depth.tsx

@@ -35,7 +35,7 @@
  *   - unknown   → Colors.muted    (gray)
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import { Colors, useUIStore } from "@hoox-sh/hoox-shared";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { Spinner, EmptyState } from "../shared/spinner";
@@ -43,6 +43,7 @@ import { ViewHeader } from "../shared/view-header";
 import { Panel } from "../shared/panel";
 import { cliBridge } from "../../services/cli-bridge";
 import type { QueueDepth, QueueDepthStatus } from "../../services/cli-bridge";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 /** Auto-refresh interval in milliseconds. */
 export const REFRESH_INTERVAL_MS = 5_000;
@@ -265,7 +266,7 @@ export function QueueDepthView() {
   }, [isActive, refresh]);
 
   // Keyboard: r / F5 manual refresh while active
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (key.name === "r" || key.name === "f5") {
       void refresh({ soft: false });