@hoox-sh/hoox-tui 0.2.0 → 0.3.1

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>
 

package/src/components/views/settings.tsx

@@ -20,7 +20,7 @@
  * Follows Pattern 1 (View Composition) and Pattern 2 (Store Subscription).
  */
 import { useMemo, useState, useCallback, useEffect } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import {
   Colors,
   useServiceStore,
@@ -38,6 +38,7 @@ import { getSettingsConnectionSnapshot } from "../../services/tui-connection";
 import * as path from "path";
 import * as os from "os";
 import type { ViewId, NotificationPreferences } from "@hoox-sh/hoox-shared";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 /**
  * Prefer the process-wide CLI bridge test double when test-setup installed it
@@ -234,14 +235,16 @@ interface ShortcutEntry {
 }
 
 const SYSTEM_SHORTCUTS: ShortcutEntry[] = [
-  { key: "Ctrl+1..9", action: "Switch to view 1-9" },
-  { key: "Ctrl+0", action: "Switch to view 10" },
   // Keep action labels short — Keyboard panel is ~34 cols; long text
   // overflows into adjacent panels and corrupts the character frame.
-  { key: "Ctrl+Alt+W", action: "Worker Settings" },
+  // Order matters: first rows stay visible in the 4-column layout.
+  { key: "Ctrl+1..9", action: "Switch to view 1-9" },
+  { key: "Ctrl+0", action: "Switch to view 10" },
   { key: "Ctrl+P", action: "Command Palette" },
   { key: "Ctrl+B", action: "Toggle Sidebar" },
   { key: "Ctrl+Q", action: "Quit" },
+  // Compact summary of Ctrl+Alt chords (sidebar shows per-view keys)
+  { key: "Ctrl+Alt+*", action: "KV/Secrets/DB/AI/…" },
   { key: "Esc", action: "Back / Close" },
   { key: "Tab", action: "Next panel / field" },
   { key: "/", action: "Focus search" },
@@ -975,6 +978,31 @@ export function SettingsView({ dialog }: SettingsViewProps = {}) {
 
   const handleImportConfirm = useCallback(async () => {
     if (!importPath.trim()) return;
+
+    // Fail-closed: require confirm before clobbering local prefs
+    if (!dialog) {
+      useServiceStore.getState().addAlert({
+        id: `import-noconfirm-${Date.now()}`,
+        type: "config",
+        severity: "warning",
+        message: "Import blocked: confirmation dialog unavailable",
+        timestamp: Date.now(),
+        acknowledged: false,
+      });
+      setImporting(false);
+      return;
+    }
+    const confirmed = await showConfirm(dialog, {
+      title: "Import preferences?",
+      message: `Apply settings from ${importPath.trim()}? This overwrites local TUI preferences (not operator secrets).`,
+      confirmLabel: "Import",
+      cancelLabel: "Cancel",
+    });
+    if (!confirmed) {
+      setImporting(false);
+      return;
+    }
+
     try {
       const f = Bun.file(importPath.trim());
       const exists = await f.exists();
@@ -1006,18 +1034,30 @@ export function SettingsView({ dialog }: SettingsViewProps = {}) {
       if (typeof config.refreshIntervalMs === "number")
         updateConfig({ refreshIntervalMs: config.refreshIntervalMs });
       if (typeof config.defaultView === "string")
-        updateConfig({ defaultView: config.defaultView });
+        updateConfig({ defaultView: config.defaultView as ViewId });
       if (typeof config.soundEnabled === "boolean")
         updateConfig({ soundEnabled: config.soundEnabled });
+      // Absolute set — never toggleNotification (would invert vs current state)
       if (
         typeof config.notifications === "object" &&
         config.notifications !== null
       ) {
-        for (const key of Object.keys(config.notifications)) {
-          if (typeof config.notifications[key] === "boolean") {
-            toggleNotification(key as keyof NotificationPreferences);
+        const current = useConfigStore.getState().notifications;
+        const next: NotificationPreferences = { ...current };
+        for (const key of Object.keys(
+          config.notifications
+        ) as (keyof NotificationPreferences)[]) {
+          if (
+            key in next &&
+            typeof (config.notifications as Record<string, unknown>)[key] ===
+              "boolean"
+          ) {
+            next[key] = Boolean(
+              (config.notifications as Record<string, unknown>)[key]
+            );
           }
         }
+        updateConfig({ notifications: next });
       }
       if (config.activeExchanges)
         updateConfig({ activeExchanges: config.activeExchanges });
@@ -1042,7 +1082,7 @@ export function SettingsView({ dialog }: SettingsViewProps = {}) {
     }
     setImporting(false);
     setImportPath("");
-  }, [importPath, updateConfig, toggleNotification]);
+  }, [importPath, updateConfig, dialog]);
 
   const handleCheckSetup = useCallback(async () => {
     setSetupCheck({ kind: "running" });
@@ -1248,7 +1288,7 @@ export function SettingsView({ dialog }: SettingsViewProps = {}) {
 
   // ── Keyboard handling (only when Settings is the active view) ───────────────
 
-  useKeyboard((key) => {
+  useViewKeyboard((key) => {
     if (!isActive) return;
     // Import mode overrides
     if (importing) {

package/src/components/views/setup-wizard.test.tsx

@@ -181,6 +181,19 @@ describe("Validation helpers", () => {
     it("rejects non-URL strings", () => {
       expect(validateUrl("not-a-url")).toBe(false);
       expect(validateUrl("")).toBe(false);
+      expect(validateUrl("ftp://x.com")).toBe(false);
+    });
+  });
+
+  describe("maskSecret edge cases", () => {
+    it("masks short secrets entirely", () => {
+      expect(maskSecret("")).toBe("••••");
+      expect(maskSecret("ab")).toBe("••");
+      expect(maskSecret("abcdefg")).toBe("•••••••");
+    });
+
+    it("shows first/last 4 for longer secrets", () => {
+      expect(maskSecret("abcdefghij")).toBe("abcd••••ghij");
     });
   });
 });

package/src/components/views/setup-wizard.tsx

@@ -14,7 +14,7 @@
  * status indicators matching the landing page's HUD-style status display.
  */
 import { useState, useEffect, useCallback, useRef } from "react";
-import { useKeyboard } from "@opentui/react";
+
 import { Colors, useServiceStore } from "@hoox-sh/hoox-shared";
 import { useConfigStore } from "@hoox-sh/hoox-shared";
 import { useUIStore } from "@hoox-sh/hoox-shared";
@@ -24,6 +24,7 @@ import { showConfirm } from "../ui/dialog";
 import type { DialogHandle } from "../ui/dialog";
 import { cliBridge } from "../../services/cli-bridge";
 import { resolveTuiStatePath } from "../../services/hoox-path-service";
+import { useViewKeyboard } from "../../hooks/shell-overlay";
 
 // ─── Prerequisite Check Types ───────────────────────────────────────────────
 
@@ -660,7 +661,10 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
     }
   };
 
-  /** Deploy: write config, run hoox deploy all, navigate on success */
+  /**
+   * Deploy: persist exchange flags + run `hoox deploy all`.
+   * Secrets/API keys are NOT collected here — operators set them via CLI first.
+   */
   const handleDeploy = async () => {
     try {
       const activeExchanges = Object.entries(data.exchanges)
@@ -684,7 +688,8 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
       }
       const confirmed = await showConfirm(dialog, {
         title: "Deploy Configuration",
-        message: "Save setup and apply configuration to Cloudflare?",
+        message:
+          "Deploy with current exchange flags? Secrets must already be set via CLI (hoox config secrets set …).",
         confirmLabel: "Deploy",
         cancelLabel: "Cancel",
       });
@@ -725,10 +730,14 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
   };
 
   // ── Keyboard navigation (only when Setup Wizard is active) ──────────────
-  useKeyboard((key) => {
+  // Note: Ctrl+P is reserved for the global command palette — do not steal it.
+  useViewKeyboard((key) => {
     if (!isActive) return;
+    if (useUIStore.getState().commandPaletteOpen || useUIStore.getState().modal)
+      return;
     if (key.name === "right" || (key.ctrl && key.name === "n")) handleNext();
-    if (key.name === "left" || (key.ctrl && key.name === "p")) handleBack();
+    // Back: ← only (Ctrl+P opens the palette globally)
+    if (key.name === "left") handleBack();
     if (key.name === "escape") handleBack();
     if (key.name === "tab" && key.shift) handleBack();
     if (key.name === "r" && step === 0) runChecks();
@@ -745,26 +754,35 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
     );
   };
 
-  // ── Masked input for secrets ────────────────────────────────────────────
+  // ── Secret fields — CLI-only (TUI does not collect secrets interactively)
   const SecretField = ({
     label,
     value,
-    path,
+    path: _path,
+    cliHint,
     width,
   }: {
     label: string;
     value: string;
     path: string;
+    /** Shown when empty so operators know how to set the secret. */
+    cliHint?: string;
     width?: number;
   }) => (
-    <box flexDirection="row" gap={1}>
-      <text fg={Colors.muted} width={16}>
-        {label}
-      </text>
-      <text fg={value ? Colors.muted : Colors.dim} width={width ?? 24}>
-        {value ? maskSecret(value) : "(not set)"}
-      </text>
-      <ValidationIcon fieldPath={path} />
+    <box flexDirection="column" gap={0}>
+      <box flexDirection="row" gap={1}>
+        <text fg={Colors.muted} width={16}>
+          {label}
+        </text>
+        <text fg={value ? Colors.muted : Colors.dim} width={width ?? 24}>
+          {value ? maskSecret(value) : "(set via CLI)"}
+        </text>
+      </box>
+      {!value && cliHint ? (
+        <text fg={Colors.dim} dim>
+          {`  → ${cliHint}`}
+        </text>
+      ) : null}
     </box>
   );
 
@@ -891,14 +909,17 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
 
   // ── Step Content Renderers (shifted: old step N is now step N+1) ────────
 
-  /** Step 1: API Keys */
+  /** Step 1: API Keys — CLI-only; TUI never prompts for secret material */
   const StepApiKeys = () => (
     <box flexDirection="column" gap={0}>
       <text bold fg={Colors.accent}>
         Exchange API Keys
       </text>
       <text dim fg={Colors.muted}>
-        Enter your exchange API credentials. Secrets are stored encrypted.
+        Secrets are not entered in the TUI. Set them via CLI, then continue.
+      </text>
+      <text dim fg={Colors.dim}>
+        hoox config secrets set BINANCE_API_KEY · etc.
       </text>
       <box flexDirection="column" gap={1} paddingTop={1}>
         {EXCHANGES.map((name) => {
@@ -912,11 +933,13 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
                 label="  API Key"
                 value={data.apiKeys[e].key}
                 path={`apiKeys.${e}.key`}
+                cliHint={`hoox config secrets set ${name.toUpperCase()}_API_KEY`}
               />
               <SecretField
                 label="  API Secret"
                 value={data.apiKeys[e].secret}
                 path={`apiKeys.${e}.secret`}
+                cliHint={`hoox config secrets set ${name.toUpperCase()}_API_SECRET`}
               />
             </box>
           );
@@ -946,14 +969,17 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
     </box>
   );
 
-  /** Step 3: AI Providers */
+  /** Step 3: AI Providers — URL/key via CLI/env; deploy only applies exchange flags */
   const StepAiProviders = () => (
     <box flexDirection="column" gap={0}>
       <text bold fg={Colors.accent}>
         AI Provider
       </text>
       <text dim fg={Colors.muted}>
-        Configure the AI endpoint for strategy generation.
+        Configure AI credentials via CLI/env (not typed in this wizard).
+      </text>
+      <text dim fg={Colors.dim}>
+        HOOX_API_TOKEN · hoox config secrets set OPENAI_API_KEY
       </text>
       <box flexDirection="column" gap={1} paddingTop={1}>
         <box flexDirection="row" gap={1}>
@@ -961,15 +987,20 @@ export function SetupWizard({ dialog }: SetupWizardProps) {
             Provider URL
           </text>
           <text fg={data.ai.providerUrl ? Colors.foreground : Colors.dim}>
-            {data.ai.providerUrl || "(not set)"}
+            {data.ai.providerUrl || "(set via CLI/env)"}
           </text>
         </box>
-        <SecretField label="API Key" value={data.ai.apiKey} path="ai.apiKey" />
+        <SecretField
+          label="API Key"
+          value={data.ai.apiKey}
+          path="ai.apiKey"
+          cliHint="hoox config secrets set OPENAI_API_KEY"
+        />
         <box flexDirection="row" gap={1}>
           <text fg={Colors.muted} width={12}>
             Model
           </text>
-          <text fg={Colors.foreground}>{data.ai.model}</text>
+          <text fg={Colors.foreground}>{data.ai.model || "default"}</text>
         </box>
       </box>
     </box>