@hoox-sh/hoox-tui 0.2.0 → 0.3.0

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 });

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

@@ -28,12 +28,12 @@ describe("SecretsViewer", () => {
   });
 
   it("documents keyboard search (/) and list navigation (↑↓)", async () => {
-    // Contract: SecretsViewer wires useKeyboard for / and ↑↓ (parity with KV Viewer).
+    // Contract: SecretsViewer wires useViewKeyboard for / and ↑↓ (parity with KV Viewer).
     // Regression guard against the previous dead SearchBox (onChange discarded).
     const src = await Bun.file(
       new URL("./secrets-viewer.tsx", import.meta.url)
     ).text();
-    expect(src).toContain("useKeyboard");
+    expect(src).toContain("useViewKeyboard");
     expect(src).toContain('key.name === "slash"');
     expect(src).toContain("setSearchActive(true)");
     expect(src).toContain("filteredSecrets");

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

@@ -42,7 +42,7 @@
  *   - No ability to reveal or copy secret values
  */
 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";
@@ -52,6 +52,7 @@ import type {
   SecretMetadata,
   SecretsSnapshot,
 } from "../../services/cli-bridge";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 /** Auto-refresh interval in milliseconds. */
 export const REFRESH_INTERVAL_MS = 5_000;
@@ -144,7 +145,7 @@ function SearchBox({
   onDeactivate,
 }: SearchBoxProps) {
   // When active, capture printable keys for filtering (same pattern as KV Viewer).
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!active) return;
     if (key.name === "escape") {
       onDeactivate();
@@ -291,7 +292,7 @@ export function SecretsViewer() {
   }, [allSecrets, selectedSecretName]);
 
   // ── Keyboard: list nav + open search (inactive while search is active) ───
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (searchActive) return; // SearchBox owns keys while active
     if (key.name === "slash" || (key.ctrl && key.name === "f")) {

package/src/components/views/service-manager.tsx

@@ -26,7 +26,11 @@
  */
 import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { useServiceStore } from "@hoox-sh/hoox-shared/stores/service-store";
-import { Colors, ConnectionStatusColor } from "@hoox-sh/hoox-shared";
+import {
+  Colors,
+  ConnectionStatusColor,
+  useUIStore,
+} from "@hoox-sh/hoox-shared";
 import { StatusDot } from "../shared/status-dot";
 import { ErrorBoundary } from "../shared/error-boundary";
 import { EmptyState } from "../shared/spinner";
@@ -39,6 +43,7 @@ import { cliBridge } from "../../services/cli-bridge";
 import type { KillSwitchStatus } from "../../services/cli-bridge";
 import type { CliResult } from "../../types";
 import { redactSecretsInText } from "../../services/dev-log";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // ─── Types ──────────────────────────────────────────────────────────────────
 
@@ -262,6 +267,9 @@ interface WorkerControlListProps {
   onDeploy: (worker: WorkerInfo) => void;
   onRestart: (worker: WorkerInfo) => void;
   deployingWorker?: string | null;
+  /** Controlled selection (keyboard nav from parent). */
+  selectedIndex: number;
+  onSelect: (index: number) => void;
 }
 
 function WorkerControlList({
@@ -269,9 +277,9 @@ function WorkerControlList({
   onDeploy,
   onRestart,
   deployingWorker,
+  selectedIndex,
+  onSelect,
 }: WorkerControlListProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       {/* List header */}
@@ -317,7 +325,7 @@ function WorkerControlList({
               worker={worker}
               index={i}
               selectedIndex={selectedIndex}
-              onSelect={setSelectedIndex}
+              onSelect={onSelect}
               onDeploy={onDeploy}
               onRestart={onRestart}
               deployingWorker={deployingWorker}
@@ -325,6 +333,11 @@ function WorkerControlList({
           ))
         )}
       </scrollbox>
+      <box paddingLeft={1}>
+        <text fg={Colors.dim} dim>
+          ↑↓ · d/r deploy/restart · D/R all · Enter detail · k/e/u kill-switch
+        </text>
+      </box>
     </box>
   );
 }
@@ -427,6 +440,8 @@ function KillSwitchSection({ dialog, onAlert }: KillSwitchSectionProps) {
   const [error, setError] = useState<string | null>(null);
   const mountedRef = useRef(true);
   const loadingRef = useRef(false);
+  const activeView = useUIStore((s) => s.activeView);
+  const isActive = activeView === "service-manager";
 
   useEffect(() => {
     mountedRef.current = true;
@@ -555,64 +570,90 @@ function KillSwitchSection({ dialog, onAlert }: KillSwitchSectionProps) {
   const engageDisabled = loading || engaged;
   const releaseDisabled = loading || !engaged;
 
+  // Keyboard: k refresh · e engage · u release (confirm still required)
+  useViewKeyboard((key) => {
+    if (!isActive) return;
+    const name = String(key.name ?? "").toLowerCase();
+    if (name === "k") {
+      void refresh();
+      return;
+    }
+    if (name === "e" && !engageDisabled) {
+      void setEngaged(true);
+      return;
+    }
+    if (name === "u" && !releaseDisabled) {
+      void setEngaged(false);
+    }
+  });
+
   return (
     <Panel
       elevated={false}
       compact
       borderColor={engaged ? Colors.error : undefined}
     >
-      <box
-        flexDirection="row"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        {/* Status side — label, dot, state, timestamp */}
-        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={Colors.accent} bold>
-            KILL SWITCH
-          </text>
-          <StatusDot status={dotStatus} pulse={!engaged} />
-          <text fg={stateColor} bold>
-            {stateLabel}
-          </text>
-          {status && (
-            <text fg={Colors.muted} dim>
-              @ {formatKillSwitchTime(status.timestamp)}
+      <box flexDirection="column" gap={0}>
+        <box
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          {/* Status side — label, dot, state, timestamp */}
+          <box flexDirection="row" gap={1} alignItems="center">
+            <text fg={Colors.accent} bold>
+              KILL SWITCH
             </text>
-          )}
-          {error && (
-            <text fg={Colors.error} dim>
-              ! {error.length > 40 ? error.slice(0, 37) + "…" : error}
+            <StatusDot status={dotStatus} pulse={!engaged} />
+            <text fg={stateColor} bold>
+              {stateLabel}
             </text>
-          )}
-        </box>
+            {status && (
+              <text fg={Colors.muted} dim>
+                @ {formatKillSwitchTime(status.timestamp)}
+              </text>
+            )}
+            {error && (
+              <text fg={Colors.error} dim>
+                ! {error.length > 40 ? error.slice(0, 37) + "…" : error}
+              </text>
+            )}
+          </box>
 
-        {/* Action side — engage / release buttons + refresh */}
-        <box flexDirection="row" gap={2}>
-          <text
-            fg={Colors.muted}
-            bg={Colors.card}
-            onMouseUp={loading ? undefined : () => void refresh()}
-          >
-            {loading ? " ..." : " [REFRESH] "}
-          </text>
-          <text
-            fg={engageDisabled ? Colors.muted : Colors.error}
-            bg={engageDisabled ? undefined : Colors.card}
-            dim={engageDisabled}
-            onMouseUp={engageDisabled ? undefined : () => void setEngaged(true)}
-          >
-            {"  ENGAGE  "}
-          </text>
-          <text
-            fg={releaseDisabled ? Colors.muted : Colors.success}
-            bg={releaseDisabled ? undefined : Colors.card}
-            dim={releaseDisabled}
-            onMouseUp={
-              releaseDisabled ? undefined : () => void setEngaged(false)
-            }
-          >
-            {"  RELEASE  "}
+          {/* Action side — engage / release buttons + refresh */}
+          <box flexDirection="row" gap={2}>
+            <text
+              fg={Colors.muted}
+              bg={Colors.card}
+              onMouseUp={loading ? undefined : () => void refresh()}
+            >
+              {loading ? " ..." : " [REFRESH] "}
+            </text>
+            <text
+              fg={engageDisabled ? Colors.muted : Colors.error}
+              bg={engageDisabled ? undefined : Colors.card}
+              dim={engageDisabled}
+              onMouseUp={
+                engageDisabled ? undefined : () => void setEngaged(true)
+              }
+            >
+              {"  ENGAGE  "}
+            </text>
+            <text
+              fg={releaseDisabled ? Colors.muted : Colors.success}
+              bg={releaseDisabled ? undefined : Colors.card}
+              dim={releaseDisabled}
+              onMouseUp={
+                releaseDisabled ? undefined : () => void setEngaged(false)
+              }
+            >
+              {"  RELEASE  "}
+            </text>
+          </box>
+        </box>
+        <box paddingLeft={1}>
+          <text fg={Colors.dim} dim>
+            k refresh · e engage · u release
           </text>
         </box>
       </box>
@@ -626,10 +667,13 @@ export function ServiceManager({ dialog }: ServiceManagerProps) {
   // Subscribe to workers from the service store
   const workers = useServiceStore((s) => s.workers);
   const connectionStatus = useServiceStore((s) => s.connectionStatus);
+  const activeView = useUIStore((s) => s.activeView);
+  const isActive = activeView === "service-manager";
 
   // Deploy/restart tracking state
   const [deployingWorker, setDeployingWorker] = useState<string | null>(null);
   const [deployProgress, setDeployProgress] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const mountedRef = useRef(true);
   const deployingRef = useRef(false);
 
@@ -640,6 +684,13 @@ export function ServiceManager({ dialog }: ServiceManagerProps) {
     };
   }, []);
 
+  // Keep selection in range when worker list changes
+  useEffect(() => {
+    setSelectedIndex((i) =>
+      workers.length === 0 ? 0 : Math.min(i, workers.length - 1)
+    );
+  }, [workers.length]);
+
   // Edge count from worker telemetry only — never invent a marketing "275+".
   const totalEdgeCount = useMemo(
     () => workers.reduce((sum, w) => sum + (w.edgeCount ?? 0), 0),
@@ -866,6 +917,47 @@ export function ServiceManager({ dialog }: ServiceManagerProps) {
     }
   }, [dialog, workers.length, onProgress, addResultAlert, blockWithoutDialog]);
 
+  // ── Keyboard: list nav + deploy/restart (overlay-safe) ─────────────────
+  useViewKeyboard((key) => {
+    if (!isActive) return;
+    const name = String(key.name ?? "").toLowerCase();
+    const selected = workers[selectedIndex];
+
+    if (name === "up") {
+      setSelectedIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (name === "down") {
+      setSelectedIndex((i) => Math.min(Math.max(0, workers.length - 1), i + 1));
+      return;
+    }
+    // Enter → worker detail
+    if (name === "return" || name === "enter") {
+      if (selected) {
+        useServiceStore.getState().selectWorker(selected.id);
+        useUIStore.getState().setView("worker-detail");
+      }
+      return;
+    }
+    // d → deploy selected · r → restart selected (lowercase)
+    if (name === "d" && !key.shift) {
+      if (selected) void handleDeploy(selected);
+      return;
+    }
+    if (name === "r" && !key.shift) {
+      if (selected) void handleRestart(selected);
+      return;
+    }
+    // Shift+D / Shift+R → bulk (OpenTUI may report name "d" with shift)
+    if (name === "d" && key.shift) {
+      void handleDeployAll();
+      return;
+    }
+    if (name === "r" && key.shift) {
+      void handleRestartAll();
+    }
+  });
+
   // ── Render ──────────────────────────────────────────────────────────────
   return (
     <ErrorBoundary viewName="Service Manager">
@@ -909,6 +1001,8 @@ export function ServiceManager({ dialog }: ServiceManagerProps) {
               onDeploy={handleDeploy}
               onRestart={handleRestart}
               deployingWorker={deployingWorker}
+              selectedIndex={selectedIndex}
+              onSelect={setSelectedIndex}
             />
           </Panel>