@hoox-sh/hoox-tui 0.3.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoox-sh/hoox-tui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Hoox algorithmic trading terminal operations center — OpenTUI dashboard",
   "type": "module",
   "main": "./dist/main.js",
@@ -32,7 +32,7 @@
     "prepublishOnly": "bun run typecheck && bun run build"
   },
   "dependencies": {
-    "@hoox-sh/hoox-shared": "^1.3.0",
+    "@hoox-sh/hoox-shared": "^1.6.0",
     "@opentui/core": "0.5.1",
     "@opentui/react": "0.5.1",
     "immer": "^11.1.8",
@@ -41,7 +41,7 @@
     "zustand": "^5.0.0"
   },
   "devDependencies": {
-    "@cloudflare/workers-types": "^5.20260708.1",
+    "@cloudflare/workers-types": "^5.20261001.1",
     "@hoox/test-utils": "^0.0.1",
     "@types/bun": "latest",
     "typescript": "^6.0.3"

package/src/app.tsx

@@ -20,7 +20,12 @@
  */
 import { useState, useEffect, useCallback } from "react";
 import { useKeyboard } from "@opentui/react";
-import { useServiceStore, useUIStore, Colors } from "@hoox-sh/hoox-shared";
+import {
+  useServiceStore,
+  useUIStore,
+  useConfigStore,
+  Colors,
+} from "@hoox-sh/hoox-shared";
 import { restoreSession, saveSession } from "@hoox-sh/hoox-shared";
 import type { ViewId } from "@hoox-sh/hoox-shared";
 
@@ -41,11 +46,7 @@ import {
   toastReconnectedMode,
 } from "./components/ui/connection-toasts";
 import { getRendererRef } from "./hooks";
-import {
-  DialogProvider,
-  useDialog,
-  type DialogHandle,
-} from "./components/ui/dialog";
+import { DialogProvider, useDialog } from "./components/ui/dialog";
 import {
   getViewFactory,
   getViewShortcutMap,
@@ -132,11 +133,15 @@ function AppRootInner({ safeMode = false }: { safeMode?: boolean }) {
   // Shared restoreSession validates all 16 ViewIds (unknown → dashboard).
   useEffect(() => {
     let cancelled = false;
-    (async () => {
+    void (async () => {
       const session = await restoreSession();
       if (cancelled) return;
 
-      const view: ViewId = session.activeView;
+      const preferred = useConfigStore.getState().defaultView;
+      const view: ViewId =
+        !session.fromDisk && isRegisteredViewId(preferred)
+          ? preferred
+          : session.activeView;
       const expanded = session.sidebarExpanded;
 
       if (isRegisteredViewId(view)) {
@@ -170,7 +175,7 @@ function AppRootInner({ safeMode = false }: { safeMode?: boolean }) {
     }
     let cancelled = false;
 
-    (async () => {
+    void (async () => {
       const store = useServiceStore.getState();
       const conn = resolveTuiConnectionEnv();
       await tuiDevLog.info("connection", "startup data load begin", {
@@ -228,8 +233,7 @@ function AppRootInner({ safeMode = false }: { safeMode?: boolean }) {
           if (result.success && result.data) {
             const raw = result.data as Record<string, unknown>;
             const rawWorkers = (raw.workers ?? raw.status ?? raw) as
-              | unknown[]
-              | Record<string, unknown>;
+              unknown[] | Record<string, unknown>;
             const parsed = Array.isArray(rawWorkers)
               ? rawWorkers
               : typeof rawWorkers === "object" && rawWorkers !== null

package/src/components/shared/shared.test.tsx

@@ -395,13 +395,13 @@ describe("Shared Components", () => {
       it("filters to matching commands", () => {
         const result = filterCommands(SAMPLE_COMMANDS, "dash");
         expect(result.length).toBe(1);
-        expect(result[0].name).toBe("Dashboard");
+        expect(result[0]?.name).toBe("Dashboard");
       });
 
       it("sorts by score (best match first)", () => {
         const result = filterCommands(SAMPLE_COMMANDS, "theme");
         expect(result.length).toBe(2);
-        expect(result[0].name).toBe("Dark Theme"); // or Light Theme
+        expect(result[0]?.name).toBe("Dark Theme"); // or Light Theme
       });
 
       it("deduplicates by id", () => {

package/src/components/ui/connection-toasts.ts

@@ -17,16 +17,19 @@ import { remoteAuthMissingHint } from "../../services/tui-connection";
 
 // ─── Pure message builders (testable without toast side effects) ─────────────
 
+/** Status-bar toast copy for a successful LOCAL/REMOTE connect. */
 export function messageConnected(mode: TuiMode, host: string): string {
   const label = mode === "remote" ? "REMOTE" : "LOCAL";
   return `Connected · ${label} · ${host}`;
 }
 
+/** Status-bar toast copy when the LOCAL/REMOTE session drops. */
 export function messageConnectionLost(mode: TuiMode, host: string): string {
   const label = mode === "remote" ? "REMOTE" : "LOCAL";
   return `Connection lost · ${label} · ${host}`;
 }
 
+/** Status-bar toast copy after a reconnect, including downtime. */
 export function messageReconnected(
   mode: TuiMode,
   host: string,
@@ -38,15 +41,18 @@ export function messageReconnected(
   return `Reconnected · ${label} · ${host} · ${duration} downtime`;
 }
 
+/** Status-bar toast copy when auth is rejected. */
 export function messageAuthRequired(mode: TuiMode, host: string): string {
   const label = mode === "remote" ? "REMOTE" : "LOCAL";
   return `Auth failed · ${label} · ${host}`;
 }
 
+/** Status-bar toast copy when remote mode has no API credentials. */
 export function messageAuthMissing(host: string): string {
   return `No API credentials · REMOTE · ${host}`;
 }
 
+/** Status-bar toast copy when the TUI starts without a live connection. */
 export function messageOfflineStartup(
   mode: TuiMode,
   host: string,

package/src/components/ui/dialog-state.ts

@@ -6,10 +6,12 @@
 /** Module-level open count for DialogProvider (avoids React store cycles). */
 let openDialogCount = 0;
 
+/** Record how many Hoox dialogs are currently open (shell overlay gate). */
 export function setOpenDialogCount(n: number): void {
   openDialogCount = Math.max(0, n);
 }
 
+/** True when any in-house dialog owns the keyboard. */
 export function isHooxDialogOpen(): boolean {
   return openDialogCount > 0;
 }

package/src/components/ui/dialog.tsx

@@ -541,16 +541,3 @@ export function showLoading(dialog: DialogHandle, message: string): () => void {
   const id = dialog.show({ message });
   return () => dialog.close(id);
 }
-
-// Re-export for select.tsx / tests that referenced dialog keyboard helpers
-export type DialogId = string | number;
-
-/** @deprecated No-op; local keyboard is handled inside overlays. */
-export function useDialogKeyboard(
-  _handler: (key: { name?: string }) => void,
-  _dialogId?: DialogId
-): void {
-  // Overlays own their own useKeyboard; this stub avoids @opentui-ui/dialog.
-  void _handler;
-  void _dialogId;
-}

package/src/components/views/ai-chat.tsx

@@ -229,7 +229,12 @@ export function AiChatView() {
   const [historyReady, setHistoryReady] = useState(false);
   const [inputText, setInputText] = useState("");
   const [selectedModel, setSelectedModel] = useState<AiModelOption>(
-    AI_MODEL_OPTIONS[0]
+    () =>
+      AI_MODEL_OPTIONS[0] ?? {
+        id: "workers-ai",
+        label: "Workers AI (Llama 3.1)",
+        provider: "cloudflare",
+      }
   );
   const [streamingContent, setStreamingContent] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);

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

@@ -159,7 +159,7 @@ export function tokenizeTomlLine(line: string): TokenSpan[] {
 // ─── Syntax Highlighting — JSON ───────────────────────────────────────────────
 
 /** Color map for JSON token types. */
-const JSON_COLORS: Record<string, { fg: string; bold: boolean }> = {
+const JSON_COLORS = {
   brace: { fg: Colors.foreground, bold: false },
   key: { fg: Colors.accent, bold: false },
   colon: { fg: Colors.foreground, bold: false },
@@ -171,7 +171,7 @@ const JSON_COLORS: Record<string, { fg: string; bold: boolean }> = {
   whitespace: { fg: Colors.foreground, bold: false },
   error: { fg: Colors.error, bold: true },
   comment: { fg: Colors.muted, bold: false },
-};
+} as const;
 
 /**
  * Tokenize a single line of JSON text into colored spans.
@@ -202,8 +202,9 @@ export function tokenizeJsonLine(line: string): TokenSpan[] {
   }
 
   // Braces/brackets at start
-  if ("{]}[".includes(trimmed[0])) {
-    spans.push({ text: trimmed[0], color: JSON_COLORS.brace.fg, bold: true });
+  const firstChar = trimmed[0];
+  if (firstChar !== undefined && "{]}[".includes(firstChar)) {
+    spans.push({ text: firstChar, color: JSON_COLORS.brace.fg, bold: true });
     const rest = tokenizeJsonLine(trimmed.slice(1));
     spans.push(...rest);
     return spans;
@@ -218,6 +219,7 @@ export function tokenizeJsonLine(line: string): TokenSpan[] {
     trimmed.endsWith("]")
   ) {
     const last = trimmed[trimmed.length - 1];
+    if (last === undefined) return spans;
     const prefix = trimmed.slice(0, -1);
     const prefixSpans = tokenizeJsonLine(prefix);
     spans.push(...prefixSpans);
@@ -400,8 +402,8 @@ export function validateSyntax(
       const colMatch =
         msg.match(/column\s+(\d+)/i) ?? msg.match(/position\s+(\d+)/i);
       errors.push({
-        line: lineMatch ? parseInt(lineMatch[1]) : 1,
-        column: colMatch ? parseInt(colMatch[1]) : 0,
+        line: lineMatch?.[1] !== undefined ? parseInt(lineMatch[1], 10) : 1,
+        column: colMatch?.[1] !== undefined ? parseInt(colMatch[1], 10) : 0,
         message: msg,
       });
     }

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

@@ -101,22 +101,25 @@ describe("ConfigEditor", () => {
   describe("CONFIG_TREE_BLUEPRINT", () => {
     it("has config directory as root", async () => {
       expect(CONFIG_TREE_BLUEPRINT.length).toBeGreaterThan(0);
-      expect(CONFIG_TREE_BLUEPRINT[0].name).toBe("config");
-      expect(CONFIG_TREE_BLUEPRINT[0].type).toBe("directory");
+      expect(CONFIG_TREE_BLUEPRINT[0]?.name).toBe("config");
+      expect(CONFIG_TREE_BLUEPRINT[0]?.type).toBe("directory");
     });
 
     it("contains config files without secret-like .env entries", async () => {
-      const children = CONFIG_TREE_BLUEPRINT[0].children!;
+      const root = CONFIG_TREE_BLUEPRINT[0];
+      expect(root?.children).toBeDefined();
+      const children = root!.children!;
       // 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 () => {
-      const strategies = CONFIG_TREE_BLUEPRINT[0].children!.find(
-        (c) => c.name === "strategies"
-      );
+      const root = CONFIG_TREE_BLUEPRINT[0];
+      expect(root?.children).toBeDefined();
+      const strategies = root!.children!.find((c) => c.name === "strategies");
       expect(strategies).toBeDefined();
+      expect(strategies!.children).toBeDefined();
       expect(strategies!.children!.length).toBe(3);
       const names = strategies!.children!.map((c) => c.name);
       expect(names).toContain("grid.config.json");
@@ -139,10 +142,10 @@ describe("ConfigEditor", () => {
       ];
       const flat = flattenTree(nodes);
       expect(flat.length).toBe(2); // directory + file
-      expect(flat[0].node.name).toBe("dir");
-      expect(flat[0].level).toBe(0);
-      expect(flat[1].node.name).toBe("file.txt");
-      expect(flat[1].level).toBe(1);
+      expect(flat[0]?.node.name).toBe("dir");
+      expect(flat[0]?.level).toBe(0);
+      expect(flat[1]?.node.name).toBe("file.txt");
+      expect(flat[1]?.level).toBe(1);
     });
 
     it("returns empty array for empty input", async () => {
@@ -180,8 +183,8 @@ describe("ConfigEditor", () => {
     it("highlights full-line comments as muted", async () => {
       const tokens = tokenizeTomlLine("# this is a comment");
       expect(tokens.length).toBeGreaterThan(0);
-      expect(tokens[0].text).toContain("#");
-      expect(tokens[0].color).toBe(Colors.muted);
+      expect(tokens[0]?.text).toContain("#");
+      expect(tokens[0]?.color).toBe(Colors.muted);
     });
 
     it("highlights section headers as accent bold", async () => {
@@ -389,8 +392,8 @@ describe("ConfigEditor", () => {
       // line 3 (unclosed string); the parser may point to the same
       // line or to the first line where it becomes unrecoverable.
       // Either way, the error must NOT be on a known-valid line.
-      expect(errors[0].line).toBeGreaterThanOrEqual(3);
-      expect(errors[0].line).toBeLessThanOrEqual(4);
+      expect(errors[0]?.line).toBeGreaterThanOrEqual(3);
+      expect(errors[0]?.line).toBeLessThanOrEqual(4);
     });
 
     it("reports 1-based column for invalid TOML", async () => {
@@ -398,16 +401,16 @@ describe("ConfigEditor", () => {
       const errors = validateSyntax(toml, "toml");
       expect(errors.length).toBeGreaterThan(0);
       // Column must be at least 1 (1-based) for a useful error marker.
-      expect(errors[0].column).toBeGreaterThanOrEqual(1);
+      expect(errors[0]?.column).toBeGreaterThanOrEqual(1);
     });
 
     it("includes the parser's error message verbatim", async () => {
       const toml = 'key = = "invalid"\n';
       const errors = validateSyntax(toml, "toml");
       expect(errors.length).toBeGreaterThan(0);
-      expect(errors[0].message.length).toBeGreaterThan(0);
+      expect(errors[0]?.message.length).toBeGreaterThan(0);
       // Must not be the old generic "Unbalanced brackets" message.
-      expect(errors[0].message).not.toMatch(/unbalanced/i);
+      expect(errors[0]?.message).not.toMatch(/unbalanced/i);
     });
 
     it("returns empty errors for empty TOML", async () => {

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

@@ -544,20 +544,22 @@ export function ConfigEditor() {
   const handleUndo = useCallback(() => {
     if (undoStack.length === 0 || !selectedFile) return;
     const prev = undoStack[undoStack.length - 1];
+    if (prev === undefined) return;
     setUndoStack((s) => s.slice(0, -1));
     setRedoStack((s) => [...s, currentContent]);
-    setFileContents((contents) => new Map(contents).set(selectedFile!, prev));
-    setUnsavedPaths((paths) => new Set(paths).add(selectedFile!));
+    setFileContents((contents) => new Map(contents).set(selectedFile, prev));
+    setUnsavedPaths((paths) => new Set(paths).add(selectedFile));
     setStatusMessage("Undo");
   }, [undoStack, currentContent, selectedFile]);
 
   const handleRedo = useCallback(() => {
     if (redoStack.length === 0 || !selectedFile) return;
     const next = redoStack[redoStack.length - 1];
+    if (next === undefined) return;
     setRedoStack((s) => s.slice(0, -1));
     setUndoStack((s) => [...s, currentContent]);
-    setFileContents((prev) => new Map(prev).set(selectedFile!, next));
-    setUnsavedPaths((paths) => new Set(paths).add(selectedFile!));
+    setFileContents((prev) => new Map(prev).set(selectedFile, next));
+    setUnsavedPaths((paths) => new Set(paths).add(selectedFile));
     setStatusMessage("Redo");
   }, [redoStack, currentContent, selectedFile]);
 
@@ -624,7 +626,7 @@ export function ConfigEditor() {
           setFocusedTreeIdx((i) => Math.min(flatFiles.length - 1, i + 1));
           break;
         case "enter":
-          if (focusedFilePath) selectFile(focusedFilePath);
+          if (focusedFilePath) void selectFile(focusedFilePath);
           break;
       }
     }
@@ -641,7 +643,7 @@ export function ConfigEditor() {
     }
 
     if (key.ctrl && key.name === "s" && selectedFile) {
-      handleSave();
+      void handleSave();
     }
   });
 

package/src/components/views/dashboard/model-health-section.tsx

@@ -4,14 +4,12 @@
  */
 
 /** @jsxImportSource @opentui/react */
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { Colors, WorkerStatusColor } from "@hoox-sh/hoox-shared";
 import { StatusDot } from "../../shared/status-dot";
 import { cliBridge } from "../../../services/cli-bridge";
 import type { ModelHealth } from "../../../services/cli-bridge";
-
-/** Polling interval for AI model health checks (30 seconds). */
-const MODEL_HEALTH_POLL_MS = 30_000;
+import { usePolling } from "../../../hooks/use-polling";
 
 /**
  * Map model status to a StatusDot-compatible status string.
@@ -116,7 +114,7 @@ function ModelHealthRow({
 /**
  * ModelHealthSection — displays health status of all configured AI providers.
  *
- * Auto-refreshes every 30 seconds when the dashboard is active.
+ * Auto-refreshes on the Settings interval when the dashboard is active.
  * Supports multiple providers: Workers AI, OpenAI, Anthropic, Google, Azure.
  * Click on a provider to expand detailed stats (latency, daily usage, error).
  * Cancels in-flight probes on unmount; race-safe via generation counter.
@@ -127,51 +125,45 @@ function ModelHealthSection() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [lastRefresh, setLastRefresh] = useState<number | null>(null);
+  const genRef = useRef(0);
+  const inFlightRef = useRef(false);
 
-  // Initial fetch + 30s polling with cancel + race safety
-  useEffect(() => {
-    let cancelled = false;
-    let generation = 0;
-    let inFlight = false;
-
-    const fetchHealth = async () => {
-      if (cancelled || inFlight) return;
-      inFlight = true;
-      const gen = ++generation;
-      try {
-        const result = await cliBridge.agentHealthCheck();
-        if (cancelled || gen !== generation) return;
-        if (result.success && result.data) {
-          setProviders(result.data.providers ?? []);
-          setError(null);
-          setLastRefresh(Date.now());
-        } else {
-          // Keep prior providers if any; surface probe failure distinctly
-          setError(
-            result.stderr ||
-              result.stdout ||
-              "AI health probe failed (CLI offline?)"
-          );
-        }
-      } catch (err) {
-        if (cancelled || gen !== generation) return;
-        setError(err instanceof Error ? err.message : String(err));
-      } finally {
-        inFlight = false;
-        if (!cancelled && gen === generation) setLoading(false);
+  const fetchHealth = useCallback(async () => {
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+    const gen = ++genRef.current;
+    try {
+      const result = await cliBridge.agentHealthCheck();
+      if (gen !== genRef.current) return;
+      if (result.success && result.data) {
+        setProviders(result.data.providers ?? []);
+        setError(null);
+        setLastRefresh(Date.now());
+      } else {
+        // Keep prior providers if any; surface probe failure distinctly
+        setError(
+          result.stderr ||
+            result.stdout ||
+            "AI health probe failed (CLI offline?)"
+        );
       }
-    };
-
-    void fetchHealth();
-    const interval = setInterval(() => {
-      void fetchHealth();
-    }, MODEL_HEALTH_POLL_MS);
-    return () => {
-      cancelled = true;
-      clearInterval(interval);
-    };
+    } catch (err) {
+      if (gen !== genRef.current) return;
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      inFlightRef.current = false;
+      if (gen === genRef.current) setLoading(false);
+    }
   }, []);
 
+  useEffect(
+    () => () => {
+      genRef.current += 1;
+    },
+    []
+  );
+  usePolling({ callback: fetchHealth, immediate: true });
+
   const toggleExpand = useCallback((index: number) => {
     setExpandedIndex((prev) => (prev === index ? null : index));
   }, []);

package/src/components/views/dashboard/pyne-health-section.tsx

@@ -4,13 +4,12 @@
  */
 
 /** @jsxImportSource @opentui/react */
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { Colors, WorkerStatusColor } from "@hoox-sh/hoox-shared";
 import { StatusDot } from "../../shared/status-dot";
 import { cliBridge } from "../../../services/cli-bridge";
 import type { PyneHealthResult } from "../../../services/cli-bridge";
-
-const POLL_MS = 30_000;
+import { usePolling } from "../../../hooks/use-polling";
 
 function statusToDot(
   status: PyneHealthResult["status"]
@@ -27,54 +26,50 @@ function statusToDot(
 export function PyneHealthSection() {
   const [result, setResult] = useState<PyneHealthResult | null>(null);
   const [loading, setLoading] = useState(true);
+  const genRef = useRef(0);
+  const inFlightRef = useRef(false);
 
-  // Poll with cancel-on-unmount and skip overlapping probes
-  useEffect(() => {
-    let cancelled = false;
-    let generation = 0;
-    let inFlight = false;
-
-    const refresh = async () => {
-      if (cancelled || inFlight) return;
-      inFlight = true;
-      const gen = ++generation;
-      try {
-        const res = await cliBridge.pyneHealthCheck();
-        if (cancelled || gen !== generation) return;
-        if (res.data) {
-          setResult(res.data);
-        } else {
-          setResult({
-            worker: "pyne-worker",
-            url: "",
-            status: "down",
-            error: res.stderr || "probe failed",
-            timestamp: new Date().toISOString(),
-          });
-        }
-      } catch (err) {
-        if (cancelled || gen !== generation) return;
+  const refresh = useCallback(async () => {
+    if (inFlightRef.current) return;
+    inFlightRef.current = true;
+    const gen = ++genRef.current;
+    try {
+      const res = await cliBridge.pyneHealthCheck();
+      if (gen !== genRef.current) return;
+      if (res.data) {
+        setResult(res.data);
+      } else {
         setResult({
           worker: "pyne-worker",
           url: "",
           status: "down",
-          error: err instanceof Error ? err.message : "probe failed",
+          error: res.stderr || "probe failed",
           timestamp: new Date().toISOString(),
         });
-      } finally {
-        inFlight = false;
-        if (!cancelled && gen === generation) setLoading(false);
       }
-    };
-
-    void refresh();
-    const id = setInterval(() => void refresh(), POLL_MS);
-    return () => {
-      cancelled = true;
-      clearInterval(id);
-    };
+    } catch (err) {
+      if (gen !== genRef.current) return;
+      setResult({
+        worker: "pyne-worker",
+        url: "",
+        status: "down",
+        error: err instanceof Error ? err.message : "probe failed",
+        timestamp: new Date().toISOString(),
+      });
+    } finally {
+      inFlightRef.current = false;
+      if (gen === genRef.current) setLoading(false);
+    }
   }, []);
 
+  useEffect(
+    () => () => {
+      genRef.current += 1;
+    },
+    []
+  );
+  usePolling({ callback: refresh, immediate: true });
+
   const status = result?.status ?? "down";
   const dot = statusToDot(status);
   const color = WorkerStatusColor[dot];