@hoox-sh/hoox-tui 0.2.0 → 0.3.0

package/src/components/views/config-editor.test.tsx

@@ -105,9 +105,11 @@ describe("ConfigEditor", () => {
       expect(CONFIG_TREE_BLUEPRINT[0].type).toBe("directory");
     });
 
-    it("contains all 5 top-level entries in config/", async () => {
+    it("contains config files without secret-like .env entries", async () => {
       const children = CONFIG_TREE_BLUEPRINT[0].children!;
-      expect(children.length).toBe(5); // wrangler.toml, trade.config.json, risk.config.json, strategies, .env
+      // wrangler.toml, trade.config.json, risk.config.json, strategies (no .env)
+      expect(children.length).toBe(4);
+      expect(children.some((c) => c.name === ".env")).toBe(false);
     });
 
     it("strategies directory has 3 config files", async () => {

package/src/components/views/config-editor.tsx

@@ -33,7 +33,7 @@
 import { existsSync } from "node:fs";
 import { isAbsolute, relative, resolve as pathResolve } from "node:path";
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import {
   Colors,
   getHooxRepoPath,
@@ -60,6 +60,7 @@ import {
   formatContent,
 } from "./config-editor/code-editor";
 import { ActionBar } from "./config-editor/action-bar";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // Re-export extracted types and functions for backward compatibility
 export type {
@@ -134,7 +135,8 @@ export const CONFIG_TREE_BLUEPRINT: FileNode[] = [
           },
         ],
       },
-      { name: ".env", path: "config/.env", type: "file" },
+      // .env intentionally omitted — secret material must not be shown in-pane.
+      // Operators edit env files externally (or via `hoox config secrets …`).
     ],
   },
 ];
@@ -272,7 +274,28 @@ export function resolveConfigFilePath(relativePath: string): string {
  * Read a config file from disk.
  * Enforces path safety + max size. Returns empty string if missing.
  */
+/** True for secret-like paths that must never be rendered in the TUI. */
+export function isSecretConfigPath(relativePath: string): boolean {
+  const base = relativePath.replace(/\\/g, "/").split("/").pop() ?? "";
+  const lower = base.toLowerCase();
+  return (
+    lower === ".env" ||
+    lower.startsWith(".env.") ||
+    lower.endsWith(".pem") ||
+    lower.endsWith(".key") ||
+    lower.includes("secret") ||
+    lower.includes("credentials")
+  );
+}
+
 async function loadFileContent(relativePath: string): Promise<string> {
+  if (isSecretConfigPath(relativePath)) {
+    return (
+      `# ${relativePath}\n` +
+      `# BLOCKED: secret-like files are not displayed in the TUI.\n` +
+      `# Edit externally or use: hoox config secrets set <NAME>\n`
+    );
+  }
   let fullPath: string;
   try {
     fullPath = resolveConfigFilePath(relativePath);
@@ -311,6 +334,11 @@ async function saveFileContent(
   relativePath: string,
   content: string
 ): Promise<void> {
+  if (isSecretConfigPath(relativePath)) {
+    throw new Error(
+      `Refuse to write secret-like path from TUI: ${relativePath}`
+    );
+  }
   if (content.length > MAX_CONFIG_FILE_BYTES) {
     throw new Error(
       `Content exceeds max size (${MAX_CONFIG_FILE_BYTES} bytes); refuse to write`
@@ -548,7 +576,7 @@ export function ConfigEditor() {
 
   // ── Keyboard (only when this view is active) ───────────────────────────
 
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     if (key.ctrl && key.name === "z") {
       handleUndo();

package/src/components/views/dashboard/alerts-panel.tsx

@@ -4,13 +4,14 @@
  */
 
 import { useState, useMemo, useEffect } from "react";
-import { useKeyboard } from "@opentui/react";
 import {
   Colors,
   AlertSeverityColor,
   useServiceStore,
+  useUIStore,
 } from "@hoox-sh/hoox-shared";
 import type { AlertSeverity } from "@hoox-sh/hoox-shared";
+import { useViewKeyboard } from "../../../hooks/shell-overlay";
 
 /** Severity label prefix */
 const SEVERITY_LABEL: Record<AlertSeverity, string> = {
@@ -38,10 +39,17 @@ function formatTime(ts: number): string {
 /**
  * AlertsPanel — scrollable list of recent alerts, newest first.
  * Each alert row shows: [SEV] HH:MM:SS — message
- * Color-coded by severity. Scrollable with ↑↓ keys.
+ * Color-coded by severity.
+ *
+ * Keyboard (when Dashboard is active):
+ *   ↑↓     — move selection
+ *   Enter / Space — acknowledge selected
+ *   x / Delete  — dismiss (remove) selected
  */
 function AlertsPanel() {
   const alerts = useServiceStore((s) => s.alerts);
+  const activeView = useUIStore((s) => s.activeView);
+  const isActive = activeView === "dashboard";
   const [scrollOffset, setScrollOffset] = useState(0);
 
   // Newest first, limited
@@ -56,14 +64,33 @@ function AlertsPanel() {
     setScrollOffset((o) => Math.min(o, Math.max(0, sortedAlerts.length - 1)));
   }, [sortedAlerts.length]);
 
-  // Keyboard: scroll through alerts
-  useKeyboard((key) => {
-    if (key.name === "up") {
+  useViewKeyboard((key) => {
+    if (!isActive) return;
+    const name = String(key.name ?? "").toLowerCase();
+
+    if (name === "up") {
       setScrollOffset((o) => Math.max(0, o - 1));
-    } else if (key.name === "down") {
+      return;
+    }
+    if (name === "down") {
       setScrollOffset((o) =>
         Math.min(Math.max(0, sortedAlerts.length - 1), o + 1)
       );
+      return;
+    }
+
+    const selected = sortedAlerts[scrollOffset];
+    if (!selected) return;
+
+    if (name === "return" || name === "enter" || name === "space") {
+      useServiceStore.getState().acknowledgeAlert(selected.id);
+      return;
+    }
+    if (name === "x" || name === "delete" || name === "backspace") {
+      useServiceStore.getState().dismissAlert(selected.id);
+      setScrollOffset((o) =>
+        Math.max(0, o - (o > 0 && o >= sortedAlerts.length - 1 ? 1 : 0))
+      );
     }
   });
 
@@ -139,11 +166,12 @@ function AlertsPanel() {
         </scrollbox>
       )}
 
-      {/* Scroll hint */}
+      {/* Scroll / action hint */}
       {sortedAlerts.length > 0 && (
         <box>
           <text fg={Colors.dim} dim>
-            ↑↓ scroll · {scrollOffset + 1}/{sortedAlerts.length}
+            ↑↓ · Enter:ack · x:dismiss · {scrollOffset + 1}/
+            {sortedAlerts.length}
           </text>
         </box>
       )}

package/src/components/views/dashboard/auto-repair-helpers.test.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2026 HOOX · HOOX · jango-blockchained (hoox-sh)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from "bun:test";
+import { formatRepairTime } from "./auto-repair-panel";
+
+describe("formatRepairTime", () => {
+  it("formats as HH:MM:SS with zero padding", () => {
+    // Use local Date so test is timezone-stable for the chosen components
+    const d = new Date(2026, 0, 1, 9, 5, 7);
+    const out = formatRepairTime(d.getTime());
+    expect(out).toMatch(/^\d{2}:\d{2}:\d{2}$/);
+    expect(out).toBe(
+      [
+        d.getHours().toString().padStart(2, "0"),
+        d.getMinutes().toString().padStart(2, "0"),
+        d.getSeconds().toString().padStart(2, "0"),
+      ].join(":")
+    );
+  });
+});

package/src/components/views/dashboard.test.tsx

@@ -145,7 +145,8 @@ describe("DashboardView", () => {
     });
     const output = await renderDashboard();
     expect(output).toContain("only-worker");
-    const dashCount = (output.match(/—/g) ?? []).length;
+    // Empty slots render single-dash placeholders
+    const dashCount = (output.match(/(?:^|\s)-\s/g) ?? []).length;
     expect(dashCount).toBeGreaterThan(0);
   });
 

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")) {