@hoox-sh/hoox-tui 0.2.0

package/src/cli-bridge-test-double.ts

@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2026 HOOX · HOOX · jango-blockchained (hoox-sh)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Shared CLI bridge test double.
+ *
+ * Installed once from `test-setup.ts` via `mock.module` so every TUI test
+ * file gets a full no-op surface without each suite re-mocking the module
+ * (and accidentally stripping methods other suites need).
+ *
+ * Override per-test with:
+ *   cliBridgeDouble.checkSetup.mockResolvedValueOnce({ ... })
+ * or reassign mockImplementation, then call `resetCliBridgeDouble()` in
+ * afterEach / beforeEach so defaults return for the next case.
+ */
+import { mock } from "bun:test";
+import type { CliResult } from "./types";
+
+/** Standard successful CliResult shell. */
+export function okCliResult<T = null>(
+  data: T | null = null,
+  overrides: Partial<CliResult<T>> = {}
+): Promise<CliResult<T>> {
+  return Promise.resolve({
+    success: true,
+    exitCode: 0,
+    stdout: "",
+    stderr: "",
+    data: data as T,
+    duration: 0,
+    command: "hoox (test double)",
+    errorType: null,
+    ...overrides,
+  });
+}
+
+/** Standard failed CliResult shell. */
+export function failCliResult(
+  stderr = "test failure",
+  overrides: Partial<CliResult<null>> = {}
+): Promise<CliResult<null>> {
+  return Promise.resolve({
+    success: false,
+    exitCode: 1,
+    stdout: "",
+    stderr,
+    data: null,
+    duration: 0,
+    command: "hoox (test double)",
+    errorType: "non-zero-exit",
+    ...overrides,
+  });
+}
+
+function applyDefaults(): void {
+  cliBridgeDouble.resolveBinary.mockImplementation(
+    async () => "/usr/local/bin/hoox"
+  );
+  cliBridgeDouble.invalidateCache.mockImplementation(() => {});
+  cliBridgeDouble.onError.mockImplementation(() => () => {});
+  cliBridgeDouble.abort.mockImplementation(() => {});
+  cliBridgeDouble.dispose.mockImplementation(() => {});
+
+  const ok = () => okCliResult();
+  cliBridgeDouble.deployAll.mockImplementation(ok);
+  cliBridgeDouble.deployWorker.mockImplementation(ok);
+  cliBridgeDouble.checkHealth.mockImplementation(ok);
+  cliBridgeDouble.checkHealthFix.mockImplementation(ok);
+  cliBridgeDouble.checkFix.mockImplementation(ok);
+  cliBridgeDouble.workerLogs.mockImplementation(ok);
+  cliBridgeDouble.configShow.mockImplementation(ok);
+  cliBridgeDouble.configValidate.mockImplementation(ok);
+  cliBridgeDouble.monitorStatus.mockImplementation(ok);
+  cliBridgeDouble.rebuild.mockImplementation(ok);
+  cliBridgeDouble.repairWorker.mockImplementation(ok);
+  cliBridgeDouble.checkSetup.mockImplementation(ok);
+  cliBridgeDouble.monitorKillSwitch.mockImplementation(() =>
+    okCliResult({ engaged: false })
+  );
+  cliBridgeDouble.monitorQueueDepth.mockImplementation(() => okCliResult([]));
+  cliBridgeDouble.dbQuery.mockImplementation(() =>
+    okCliResult({
+      columns: [],
+      rows: [],
+      rowCount: 0,
+      executionTimeMs: null,
+      meta: null,
+    })
+  );
+  cliBridgeDouble.configKvList.mockImplementation(() =>
+    okCliResult({
+      keys: [],
+      timestamp: new Date().toISOString(),
+      namespaceId: null,
+    })
+  );
+  cliBridgeDouble.configKvGet.mockImplementation(() => okCliResult(null));
+  cliBridgeDouble.configKvSet.mockImplementation(() => okCliResult(null));
+  cliBridgeDouble.configSecretsList.mockImplementation(() =>
+    okCliResult({ secrets: [], timestamp: new Date().toISOString() })
+  );
+  cliBridgeDouble.agentHealthCheck.mockImplementation(() =>
+    okCliResult({ providers: [], timestamp: new Date().toISOString() })
+  );
+  cliBridgeDouble.pyneHealthCheck.mockImplementation(() =>
+    okCliResult({
+      worker: "pyne-worker",
+      url: "https://pyne-worker.example/health",
+      status: "healthy" as const,
+      httpStatus: 200,
+      latencyMs: 12,
+      timestamp: new Date().toISOString(),
+    })
+  );
+}
+
+/**
+ * Mutable double — methods are bun `mock()` fns so tests can
+ * `mockResolvedValue` / `mockImplementation` per case.
+ */
+export const cliBridgeDouble = {
+  resolveBinary: mock(async () => "/usr/local/bin/hoox"),
+  invalidateCache: mock(() => {}),
+  onError: mock(() => () => {}),
+  abort: mock(() => {}),
+  dispose: mock(() => {}),
+  deployAll: mock(() => okCliResult()),
+  deployWorker: mock(() => okCliResult()),
+  checkHealth: mock(() => okCliResult()),
+  checkHealthFix: mock(() => okCliResult()),
+  checkFix: mock(() => okCliResult()),
+  workerLogs: mock(() => okCliResult()),
+  configShow: mock(() => okCliResult()),
+  configValidate: mock(() => okCliResult()),
+  monitorStatus: mock(() => okCliResult()),
+  rebuild: mock(() => okCliResult()),
+  repairWorker: mock(() => okCliResult()),
+  checkSetup: mock(() => okCliResult()),
+  monitorKillSwitch: mock(() => okCliResult({ engaged: false })),
+  monitorQueueDepth: mock(() => okCliResult([])),
+  dbQuery: mock(() =>
+    okCliResult({
+      columns: [],
+      rows: [],
+      rowCount: 0,
+      executionTimeMs: null,
+      meta: null,
+    })
+  ),
+  configKvList: mock(() =>
+    okCliResult({
+      keys: [],
+      timestamp: new Date().toISOString(),
+      namespaceId: null,
+    })
+  ),
+  configKvGet: mock(() => okCliResult(null)),
+  configKvSet: mock(() => okCliResult(null)),
+  configSecretsList: mock(() =>
+    okCliResult({ secrets: [], timestamp: new Date().toISOString() })
+  ),
+  agentHealthCheck: mock(() =>
+    okCliResult({ providers: [], timestamp: new Date().toISOString() })
+  ),
+  pyneHealthCheck: mock(() =>
+    okCliResult({
+      worker: "pyne-worker",
+      url: "https://pyne-worker.example/health",
+      status: "healthy" as const,
+      httpStatus: 200,
+      latencyMs: 12,
+      timestamp: new Date().toISOString(),
+    })
+  ),
+};
+
+applyDefaults();
+
+/** Clear call history and restore default implementations. */
+export function resetCliBridgeDouble(): void {
+  for (const value of Object.values(cliBridgeDouble)) {
+    if (value && typeof value === "function" && "mockClear" in value) {
+      (value as ReturnType<typeof mock>).mockClear();
+    }
+  }
+  applyDefaults();
+}
+
+/** Factory for mock.module — re-exports real standalone + index helpers. */
+export async function createCliBridgeModuleMock(): Promise<
+  Record<string, unknown>
+> {
+  // Load real module exports *before* mock.module is installed so tests that
+  // import tryParseJsonLoose / sanitizeCliArgsForLog still get the real fns.
+  const realBridge = await import("./services/cli-bridge/index");
+  const standalone = await import("./services/cli-bridge/standalone");
+  const types = await import("./services/cli-bridge/types");
+  return {
+    cliBridge: cliBridgeDouble,
+    validateReadOnlySql: standalone.validateReadOnlySql,
+    agentChatStream: standalone.agentChatStream,
+    AI_MODEL_OPTIONS: standalone.AI_MODEL_OPTIONS,
+    tryParseJsonLoose: realBridge.tryParseJsonLoose,
+    sanitizeCliArgsForLog: realBridge.sanitizeCliArgsForLog,
+    // Type re-exports are erased at runtime; keep values if any exist
+    ...Object.fromEntries(
+      Object.entries(types).filter(([, v]) => typeof v !== "undefined")
+    ),
+  };
+}

package/src/components/layout/layout.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2026 HOOX · HOOX · jango-blockchained (hoox-sh)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Layout Component Tests — Sidebar + StatusBar structure aligned with
+ * view-registry (single source of truth for nav items).
+ */
+import { describe, it, expect, beforeEach } from "bun:test";
+import { useUIStore } from "@hoox-sh/hoox-shared/stores/ui-store";
+import { useServiceStore } from "@hoox-sh/hoox-shared/stores/service-store";
+import type { ViewId } from "@hoox-sh/hoox-shared";
+import {
+  SIDEBAR_ITEMS,
+  getViewShortcutMap,
+  getCtrlAltViewMap,
+  REGISTERED_VIEW_IDS,
+} from "../../view-registry";
+import { SIDEBAR_WIDTH } from "./sidebar";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function resetStores() {
+  useUIStore.setState({
+    activeView: "dashboard",
+    sidebarExpanded: true,
+    modal: null,
+    commandPaletteOpen: false,
+    previousView: null,
+  });
+  useServiceStore.setState({
+    workers: [],
+    connectionStatus: "offline",
+    lastUpdated: 0,
+    lastError: null,
+    retryCount: 0,
+    reconnectDelay: 0,
+    disconnectedAt: null,
+  });
+}
+
+// ─── Test Suite ───────────────────────────────────────────────────────────────
+
+describe("Layout", () => {
+  beforeEach(() => {
+    resetStores();
+  });
+
+  // ── Sidebar ──────────────────────────────────────────────────────────────
+
+  describe("Sidebar", () => {
+    it("lists every registered view", () => {
+      expect(SIDEBAR_ITEMS).toHaveLength(REGISTERED_VIEW_IDS.length);
+      expect(SIDEBAR_ITEMS.map((i) => i.id)).toEqual(REGISTERED_VIEW_IDS);
+    });
+
+    it("all items have unique view IDs", () => {
+      const ids = SIDEBAR_ITEMS.map((i) => i.id);
+      expect(new Set(ids).size).toBe(SIDEBAR_ITEMS.length);
+    });
+
+    it("first item is DASHBOARD with shortcut 1", () => {
+      expect(SIDEBAR_ITEMS[0]?.label).toBe("DASHBOARD");
+      expect(SIDEBAR_ITEMS[0]?.id).toBe("dashboard");
+      expect(SIDEBAR_ITEMS[0]?.shortcut).toBe("1");
+    });
+
+    it("includes Ctrl+0 queues and Ctrl+Alt letter views", () => {
+      const byId = Object.fromEntries(SIDEBAR_ITEMS.map((i) => [i.id, i]));
+      expect(byId["queue-depth"]?.shortcut).toBe("0");
+      expect(byId["kv-viewer"]?.shortcut).toBe("^K");
+      expect(byId["secrets-viewer"]?.shortcut).toBe("^S");
+    });
+
+    it("sidebar shows all items when expanded", () => {
+      expect(useUIStore.getState().sidebarExpanded).toBe(true);
+    });
+
+    it("sidebar collapses via store", () => {
+      useUIStore.getState().toggleSidebar();
+      expect(useUIStore.getState().sidebarExpanded).toBe(false);
+    });
+
+    it("setView updates activeView correctly for each sidebar item", () => {
+      for (const item of SIDEBAR_ITEMS) {
+        useUIStore.getState().setView(item.id);
+        expect(useUIStore.getState().activeView).toBe(item.id);
+      }
+    });
+
+    it("active view is highlighted via accent color indicator", () => {
+      expect(useUIStore.getState().activeView).toBe("dashboard");
+      useUIStore.getState().setView("trade-monitor");
+      expect(useUIStore.getState().activeView).toBe("trade-monitor");
+    });
+
+    it("sidebar toggle preserves active view", () => {
+      useUIStore.getState().setView("workers");
+      useUIStore.getState().toggleSidebar();
+      expect(useUIStore.getState().activeView).toBe("workers");
+      expect(useUIStore.getState().sidebarExpanded).toBe(false);
+    });
+
+    it("uses fixed width of 24 columns", () => {
+      expect(SIDEBAR_WIDTH).toBe(24);
+    });
+  });
+
+  // ── StatusBar ────────────────────────────────────────────────────────────
+
+  describe("StatusBar", () => {
+    it("shows CONNECTED when connection is healthy", () => {
+      useServiceStore.setState({ connectionStatus: "connected" });
+      expect(useServiceStore.getState().connectionStatus).toBe("connected");
+    });
+
+    it("shows POLLING when in polling state", () => {
+      useServiceStore.setState({ connectionStatus: "polling" });
+      expect(useServiceStore.getState().connectionStatus).toBe("polling");
+    });
+
+    it("shows RECONNECTING when retrying", () => {
+      useServiceStore.setState({ connectionStatus: "reconnecting" });
+      expect(useServiceStore.getState().connectionStatus).toBe("reconnecting");
+    });
+
+    it("shows OFFLINE when disconnected", () => {
+      useServiceStore.setState({ connectionStatus: "offline" });
+      expect(useServiceStore.getState().connectionStatus).toBe("offline");
+    });
+
+    it("shows retry count during reconnecting", () => {
+      useServiceStore.setState({
+        connectionStatus: "reconnecting",
+        retryCount: 3,
+        reconnectDelay: 4000,
+      });
+      expect(useServiceStore.getState().retryCount).toBe(3);
+      expect(useServiceStore.getState().reconnectDelay).toBe(4000);
+    });
+
+    it("shows last updated timestamp when data is available", () => {
+      useServiceStore.setState({ lastUpdated: Date.now() });
+      expect(useServiceStore.getState().lastUpdated).toBeGreaterThan(0);
+    });
+
+    it("shows error message when connection is lost", () => {
+      useServiceStore.setState({
+        connectionStatus: "reconnecting",
+        lastError: "DNS resolution failed",
+      });
+      expect(useServiceStore.getState().lastError).toContain(
+        "DNS resolution failed"
+      );
+    });
+
+    it("shows keyboard hints in status bar", () => {
+      const hints = ["Ctrl+P", "Ctrl+B", "Ctrl+Q"];
+      expect(hints).toHaveLength(3);
+    });
+  });
+
+  // ── View Switching ───────────────────────────────────────────────────────
+
+  describe("view switching", () => {
+    it("Ctrl digit map covers dashboard…queue-depth", () => {
+      const map = getViewShortcutMap();
+      expect(map["1"]).toBe("dashboard");
+      expect(map["2"]).toBe("workers");
+      expect(map["0"]).toBe("queue-depth");
+      for (const view of Object.values(map)) {
+        useUIStore.getState().setView(view);
+        expect(useUIStore.getState().activeView).toBe(view);
+      }
+    });
+
+    it("Ctrl+Alt map covers letter-chord views", () => {
+      const map = getCtrlAltViewMap();
+      for (const view of Object.values(map) as ViewId[]) {
+        useUIStore.getState().setView(view);
+        expect(useUIStore.getState().activeView).toBe(view);
+      }
+    });
+
+    it("view switching closes command palette", () => {
+      useUIStore.getState().openPalette();
+      useUIStore.getState().setView("settings");
+      expect(useUIStore.getState().commandPaletteOpen).toBe(false);
+    });
+  });
+
+  // ── Layout Structure ─────────────────────────────────────────────────────
+
+  describe("layout structure", () => {
+    it("status bar is always 1 row tall (summary line)", () => {
+      const STATUSBAR_HEIGHT = 1;
+      expect(STATUSBAR_HEIGHT).toBe(1);
+    });
+
+    it("brand header is HOOX", () => {
+      expect("HOOX").toBe("HOOX");
+    });
+  });
+});

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2026 HOOX · HOOX · jango-blockchained (hoox-sh)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/** @jsxImportSource @opentui/react */
+
+import { Colors, useUIStore } from "@hoox-sh/hoox-shared";
+import { SIDEBAR_ITEMS } from "../../view-registry";
+import { CoolBrackets, CoolGlyph } from "../shared/cool-brackets";
+
+/** Fixed sidebar width (columns). */
+export const SIDEBAR_WIDTH = 24;
+
+/**
+ * Sidebar — left navigation panel with view links.
+ * Items and shortcut hints come from the view registry (single source of truth).
+ */
+export function Sidebar() {
+  const activeView = useUIStore((s) => s.activeView);
+  const sidebarExpanded = useUIStore((s) => s.sidebarExpanded);
+  const setView = useUIStore((s) => s.setView);
+
+  if (!sidebarExpanded) return null;
+
+  return (
+    <box
+      flexDirection="column"
+      width={SIDEBAR_WIDTH}
+      padding={1}
+      gap={0}
+      border={true}
+      borderStyle="single"
+      borderColor={Colors.border}
+      backgroundColor={Colors.card}
+    >
+      {/* Brand header — static accent brackets */}
+      <CoolBrackets open="┌" close="┐" gap={1}>
+        <text fg={Colors.foreground} bold>
+          HOOX
+        </text>
+      </CoolBrackets>
+      <text fg={Colors.dim}>─────────────────</text>
+
+      {/* Navigation items (registry order) */}
+      {SIDEBAR_ITEMS.map((item) => {
+        const isActive = item.id === activeView;
+        return (
+          <box flexDirection="row" gap={1} key={item.id}>
+            {isActive ? <CoolGlyph char="▸" /> : <text fg={Colors.dim}> </text>}
+            <text
+              fg={isActive ? Colors.accent : Colors.muted}
+              bold={isActive}
+              onMouseUp={() => setView(item.id)}
+            >
+              {item.label}
+            </text>
+          </box>
+        );
+      })}
+
+      {/* Shortcut hints — digits are Ctrl; letter chords are Ctrl+Alt */}
+      <box flexGrow={1} />
+      <text fg={Colors.dim} dim>
+        Ctrl+0-9 · Ctrl+Alt+…
+      </text>
+    </box>
+  );
+}