@nexus-ai-fs/tui 0.9.18

package/src/panels/workflows/workflows-panel.tsx

@@ -0,0 +1,295 @@
+/**
+ * Workflows & Automation panel: tabbed layout with workflows, executions,
+ * and scheduler metrics views.
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import { useWorkflowsStore } from "../../stores/workflows-store.js";
+import type { WorkflowTab } from "../../stores/workflows-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useUiStore } from "../../stores/ui-store.js";
+import { useVisibleTabs } from "../../shared/hooks/use-visible-tabs.js";
+import { SubTabBar } from "../../shared/components/sub-tab-bar.js";
+import { subTabCycleBindings } from "../../shared/components/sub-tab-bar-utils.js";
+import { useTabFallback } from "../../shared/hooks/use-tab-fallback.js";
+import { BrickGate } from "../../shared/components/brick-gate.js";
+import { ConfirmDialog } from "../../shared/components/confirm-dialog.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { WorkflowList } from "./workflow-list.js";
+import { ExecutionList } from "./execution-list.js";
+import { SchedulerView } from "./scheduler-view.js";
+import { Tooltip } from "../../shared/components/tooltip.js";
+import { textStyle } from "../../shared/text-style.js";
+
+const HELP_TEXT: Readonly<Record<string, string>> = {
+  workflows: "j/k:navigate  Tab:switch tab  e:execute  d:delete  p:enable/disable  r:refresh  Enter:detail  q:quit",
+  executions: "j/k:navigate  Tab:switch tab  Enter:detail  Esc:close  r:refresh  q:quit",
+  scheduler: "Tab:switch tab  r:refresh  q:quit",
+};
+
+export default function WorkflowsPanel(): React.ReactNode {
+  const client = useApi();
+
+  const workflows = useWorkflowsStore((s) => s.workflows);
+  const selectedWorkflowIndex = useWorkflowsStore((s) => s.selectedWorkflowIndex);
+  const workflowsLoading = useWorkflowsStore((s) => s.workflowsLoading);
+  const selectedWorkflow = useWorkflowsStore((s) => s.selectedWorkflow);
+  const detailLoading = useWorkflowsStore((s) => s.detailLoading);
+  const executions = useWorkflowsStore((s) => s.executions);
+  const selectedExecutionIndex = useWorkflowsStore((s) => s.selectedExecutionIndex);
+  const executionsLoading = useWorkflowsStore((s) => s.executionsLoading);
+  const selectedExecution = useWorkflowsStore((s) => s.selectedExecution);
+  const executionDetailLoading = useWorkflowsStore((s) => s.executionDetailLoading);
+  const schedulerMetrics = useWorkflowsStore((s) => s.schedulerMetrics);
+  const schedulerLoading = useWorkflowsStore((s) => s.schedulerLoading);
+  const activeTab = useWorkflowsStore((s) => s.activeTab);
+  const error = useWorkflowsStore((s) => s.error);
+
+  const fetchWorkflows = useWorkflowsStore((s) => s.fetchWorkflows);
+  const fetchWorkflowDetail = useWorkflowsStore((s) => s.fetchWorkflowDetail);
+  const executeWorkflow = useWorkflowsStore((s) => s.executeWorkflow);
+  const fetchExecutions = useWorkflowsStore((s) => s.fetchExecutions);
+  const fetchSchedulerMetrics = useWorkflowsStore((s) => s.fetchSchedulerMetrics);
+  const deleteWorkflow = useWorkflowsStore((s) => s.deleteWorkflow);
+  const enableWorkflow = useWorkflowsStore((s) => s.enableWorkflow);
+  const disableWorkflow = useWorkflowsStore((s) => s.disableWorkflow);
+  const fetchExecutionDetail = useWorkflowsStore((s) => s.fetchExecutionDetail);
+  const clearExecutionDetail = useWorkflowsStore((s) => s.clearExecutionDetail);
+  const setActiveTab = useWorkflowsStore((s) => s.setActiveTab);
+  const setSelectedWorkflowIndex = useWorkflowsStore((s) => s.setSelectedWorkflowIndex);
+  const setSelectedExecutionIndex = useWorkflowsStore((s) => s.setSelectedExecutionIndex);
+
+  const overlayActive = useUiStore((s) => s.overlayActive);
+
+  // Track in-flight workflow execution
+  const [executing, setExecuting] = useState(false);
+
+  // Confirmation dialog state for destructive delete action
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const handleConfirmDelete = useCallback(() => {
+    if (!client) return;
+    const wf = workflows[selectedWorkflowIndex];
+    if (wf) {
+      deleteWorkflow(wf.name, client);
+    }
+    setConfirmDelete(false);
+  }, [client, workflows, selectedWorkflowIndex, deleteWorkflow]);
+
+  const handleCancelDelete = useCallback(() => {
+    setConfirmDelete(false);
+  }, []);
+
+  // Refresh current view based on active tab
+  const refreshCurrentView = (): void => {
+    if (!client) return;
+
+    if (activeTab === "workflows") {
+      fetchWorkflows(client);
+    } else if (activeTab === "executions") {
+      const wf = workflows[selectedWorkflowIndex];
+      if (wf) {
+        fetchExecutions(wf.name, client);
+      }
+    } else if (activeTab === "scheduler") {
+      fetchSchedulerMetrics(client);
+    }
+  };
+
+  // Auto-fetch when tab changes
+  useEffect(() => {
+    refreshCurrentView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeTab, client]);
+
+  // Resolve the list length for current tab navigation
+  const currentListLength = (): number => {
+    if (activeTab === "workflows") return workflows.length;
+    if (activeTab === "executions") return executions.length;
+    return 0;
+  };
+
+  const currentIndex = (): number => {
+    if (activeTab === "workflows") return selectedWorkflowIndex;
+    if (activeTab === "executions") return selectedExecutionIndex;
+    return 0;
+  };
+
+  const setCurrentIndex = (index: number): void => {
+    if (activeTab === "workflows") {
+      setSelectedWorkflowIndex(index);
+    } else if (activeTab === "executions") {
+      setSelectedExecutionIndex(index);
+    }
+  };
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : confirmDelete
+      ? {} // ConfirmDialog handles its own keys when visible
+      : {
+          ...listNavigationBindings({
+            getIndex: currentIndex,
+            setIndex: setCurrentIndex,
+            getLength: currentListLength,
+          }),
+          ...subTabCycleBindings(visibleTabs, activeTab, setActiveTab),
+          r: () => refreshCurrentView(),
+          e: () => {
+            if (activeTab !== "workflows" || !client) return;
+            const wf = workflows[selectedWorkflowIndex];
+            if (wf && wf.enabled) {
+              setExecuting(true);
+              executeWorkflow(wf.name, client).finally(() => setExecuting(false));
+            }
+          },
+          d: () => {
+            if (activeTab !== "workflows") return;
+            const wf = workflows[selectedWorkflowIndex];
+            if (wf) setConfirmDelete(true);
+          },
+          p: () => {
+            if (activeTab !== "workflows" || !client) return;
+            const wf = workflows[selectedWorkflowIndex];
+            if (wf) {
+              if (wf.enabled) disableWorkflow(wf.name, client);
+              else enableWorkflow(wf.name, client);
+            }
+          },
+          return: () => {
+            if (!client) return;
+
+            if (activeTab === "workflows") {
+              const wf = workflows[selectedWorkflowIndex];
+              if (wf) {
+                fetchWorkflowDetail(wf.name, client);
+              }
+            } else if (activeTab === "executions") {
+              const ex = executions[selectedExecutionIndex];
+              if (ex) {
+                // Toggle: if detail is shown for this execution, clear it
+                if (selectedExecution?.execution_id === ex.execution_id) {
+                  clearExecutionDetail();
+                } else {
+                  fetchExecutionDetail(ex.execution_id, client);
+                }
+              }
+            }
+          },
+          escape: () => {
+            // Clear expanded detail views
+            if (activeTab === "executions" && selectedExecution) {
+              clearExecutionDetail();
+            }
+          },
+        },
+  );
+
+  return (
+    <BrickGate brick={["workflows", "scheduler"]}>
+      <box height="100%" width="100%" flexDirection="column">
+        <Tooltip tooltipKey="workflows-panel" message="Tip: Press ? for keybinding help" />
+        {/* Tab bar */}
+        <box height={1} width="100%">
+          <text>
+            {TAB_ORDER.map((tab) => {
+              const label = TAB_LABELS[tab];
+              return tab === activeTab ? `[${label}]` : ` ${label} `;
+            }).join(" ")}
+          </text>
+        </box>
+
+        {/* Error display */}
+        {error && (
+          <box height={1} width="100%">
+            <text>{`Error: ${error}`}</text>
+          </box>
+        )}
+
+        {/* Execution in-flight indicator */}
+        {executing && (
+          <box height={1} width="100%">
+            <LoadingIndicator message="Executing workflow..." centered={false} />
+          </box>
+        )}
+
+        {/* Detail content */}
+        <box flexGrow={1} borderStyle="single">
+          {activeTab === "workflows" && (
+            <WorkflowList
+              workflows={workflows}
+              selectedIndex={selectedWorkflowIndex}
+              loading={workflowsLoading}
+            />
+          )}
+          {activeTab === "executions" && (
+            <ExecutionList
+              executions={executions}
+              selectedIndex={selectedExecutionIndex}
+              loading={executionsLoading}
+            />
+          )}
+          {activeTab === "scheduler" && (
+            <SchedulerView
+              metrics={schedulerMetrics}
+              loading={schedulerLoading}
+            />
+          )}
+        </box>
+
+        {/* Execution detail overlay when loaded */}
+        {activeTab === "executions" && executionDetailLoading && (
+          <box height={1} width="100%">
+            <LoadingIndicator message="Loading execution detail..." centered={false} />
+          </box>
+        )}
+        {activeTab === "executions" && selectedExecution && !executionDetailLoading && (
+          <box height={Math.min((selectedExecution.steps?.length ?? 0) + 3, 12)} width="100%" borderStyle="single" flexDirection="column">
+            <text>
+              {`Execution: ${selectedExecution.execution_id} | ${selectedExecution.status} | ${selectedExecution.actions_completed}/${selectedExecution.actions_total} actions`}
+            </text>
+            {(selectedExecution.steps ?? []).length > 0 ? (
+              <scrollbox flexGrow={1} width="100%">
+                {(selectedExecution.steps ?? []).map((step, i) => (
+                  <box key={i} height={1} width="100%">
+                    <text>
+                      {`  ${String(step.step_index).padEnd(3)} ${(step.action_name ?? "").padEnd(20)} ${step.status.padEnd(10)} ${step.error_message ? `ERR: ${step.error_message}` : ""}`}
+                    </text>
+                  </box>
+                ))}
+              </scrollbox>
+            ) : (
+              <text style={textStyle({ dim: true })}>  No steps recorded</text>
+            )}
+          </box>
+        )}
+
+        {/* Workflow detail overlay when loaded */}
+        {selectedWorkflow && activeTab === "workflows" && !detailLoading && (
+          <box height={3} width="100%">
+            <text>
+              {`Detail: ${selectedWorkflow.name} | v${selectedWorkflow.version} | ${selectedWorkflow.enabled ? "enabled" : "disabled"} | ${selectedWorkflow.triggers.length} triggers | ${selectedWorkflow.actions.length} actions`}
+            </text>
+          </box>
+        )}
+
+        {/* Help bar */}
+        <box height={1} width="100%">
+          <text>{HELP_TEXT[activeTab] ?? ""}</text>
+        </box>
+
+        {/* Delete confirmation dialog */}
+        <ConfirmDialog
+          visible={confirmDelete}
+          title="Delete Workflow"
+          message={`Permanently delete "${workflows[selectedWorkflowIndex]?.name ?? ""}"? This cannot be undone.`}
+          onConfirm={handleConfirmDelete}
+          onCancel={handleCancelDelete}
+        />
+      </box>
+    </BrickGate>
+  );
+}

package/src/panels/zones/brick-detail.tsx

@@ -0,0 +1,136 @@
+/**
+ * Brick detail view: shows individual brick info from GET /api/v2/bricks/{name}.
+ *
+ * Displays: name, state, protocol, error, dependency graph, config (spec),
+ * real FSM transition history, and available actions.
+ */
+
+import React from "react";
+import type { BrickDetailResponse } from "../../stores/zones-store.js";
+import { stateIndicator, allowedActionsForState } from "../../shared/brick-states.js";
+
+interface BrickDetailProps {
+  readonly brick: BrickDetailResponse | null;
+  readonly loading: boolean;
+}
+
+function formatEpoch(epoch: number | null): string {
+  if (epoch === null) return "n/a";
+  try {
+    return new Date(epoch * 1000).toLocaleString();
+  } catch {
+    return String(epoch);
+  }
+}
+
+const ACTION_KEYS: Readonly<Record<string, string>> = {
+  mount: "M (shift)",
+  unmount: "U",
+  unregister: "D",
+  remount: "m",
+  reset: "x",
+};
+
+export function BrickDetail({ brick, loading }: BrickDetailProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading brick detail...</text>
+      </box>
+    );
+  }
+
+  if (!brick) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Select a brick to view details</text>
+      </box>
+    );
+  }
+
+  const allowed = allowedActionsForState(brick.state);
+  const actionHints = Array.from(allowed)
+    .map((action) => {
+      const key = ACTION_KEYS[action] ?? action;
+      return `${key}:${action}`;
+    })
+    .join("  ");
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Identity */}
+      <box height={1} width="100%">
+        <text>{`Name:         ${brick.name}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`State:        ${stateIndicator(brick.state)} ${brick.state}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Protocol:     ${brick.protocol_name}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Error:        ${brick.error ?? "none"}`}</text>
+      </box>
+
+      {/* Config (spec data) */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Configuration ---</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Enabled:      ${brick.enabled ? "yes" : "no"}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Retry count:  ${brick.retry_count}`}</text>
+      </box>
+
+      {/* Dependency graph */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Dependencies ---</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Depends on:   ${brick.depends_on.length > 0 ? brick.depends_on.join(", ") : "(none)"}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Depended by:  ${brick.depended_by.length > 0 ? brick.depended_by.join(", ") : "(none)"}`}</text>
+      </box>
+
+      {/* Timestamps */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Timestamps ---</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Started at:   ${formatEpoch(brick.started_at)}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Stopped at:   ${formatEpoch(brick.stopped_at)}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`Unmounted at: ${formatEpoch(brick.unmounted_at)}`}</text>
+      </box>
+
+      {/* State history (real FSM transitions) */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- State History ---</text>
+      </box>
+      {brick.transitions.length === 0 ? (
+        <box height={1} width="100%">
+          <text>  No transitions recorded</text>
+        </box>
+      ) : (
+        brick.transitions.map((t, i) => (
+          <box key={i} height={1} width="100%">
+            <text>{`  ${formatEpoch(t.timestamp)}  ${t.from_state} → ${t.to_state}  (${t.event})`}</text>
+          </box>
+        ))
+      )}
+
+      {/* Available actions */}
+      <box height={1} width="100%" marginTop={1}>
+        <text>--- Available Actions ---</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{actionHints || "(none — brick is in a transient state)"}</text>
+      </box>
+    </scrollbox>
+  );
+}

package/src/panels/zones/brick-list.tsx

@@ -0,0 +1,56 @@
+/**
+ * Brick list sidebar: state indicator + name + protocol for each brick.
+ */
+
+import React from "react";
+import type { BrickStatusResponse } from "../../stores/zones-store.js";
+import { stateIndicator, stateColor } from "../../shared/brick-states.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { textStyle } from "../../shared/text-style.js";
+
+interface BrickListProps {
+  readonly bricks: readonly BrickStatusResponse[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+export function BrickList({
+  bricks,
+  selectedIndex,
+  loading,
+}: BrickListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading bricks...</text>
+      </box>
+    );
+  }
+
+  if (bricks.length === 0) {
+    return (
+      <EmptyState
+        message="No bricks registered."
+        hint="Run 'nexus brick mount <name>' to add one."
+      />
+    );
+  }
+
+  return (
+    <scrollbox flexGrow={1} width="100%">
+      {bricks.map((brick, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const indicator = stateIndicator(brick.state);
+
+        return (
+          <box key={brick.name} height={1} width="100%">
+            <text>{prefix}</text>
+            <text style={textStyle({ fg: stateColor(brick.state) })}>{indicator}</text>
+            <text>{` ${brick.name} (${brick.protocol_name})`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/zones/cache-tab.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { textStyle } from "../../shared/text-style.js";
+import { formatSize } from "../../shared/utils/format-size.js";
+import { statusColor } from "../../shared/theme.js";
+
+interface CacheStats {
+  readonly total_entries?: number;
+  readonly total_size_bytes?: number;
+  readonly hit_rate?: number;
+  readonly miss_rate?: number;
+  readonly eviction_count?: number;
+  readonly layers?: ReadonlyArray<{
+    readonly name: string;
+    readonly entries: number;
+    readonly size_bytes: number;
+    readonly hit_rate: number;
+  }>;
+}
+
+interface HotFile {
+  readonly path?: string;
+  readonly access_count?: number;
+}
+
+interface CacheTabProps {
+  readonly stats: unknown | null;
+  readonly hotFiles: readonly unknown[];
+  readonly loading: boolean;
+}
+
+function hitRateColor(rate: number): string | undefined {
+  if (rate > 0.8) return statusColor.healthy;
+  if (rate > 0.5) return statusColor.warning;
+  return statusColor.error;
+}
+
+export function CacheTab({ stats, hotFiles, loading }: CacheTabProps): React.ReactNode {
+  if (loading) return <text>Loading cache stats...</text>;
+  if (!stats) return <text>No cache data available.</text>;
+
+  const s = stats as CacheStats;
+  const files = hotFiles as readonly HotFile[];
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%"><text>--- Cache Statistics ---</text></box>
+
+      {/* Summary stats */}
+      {s.total_entries != null && (
+        <box height={1} width="100%">
+          <text>{`  Total entries:   ${s.total_entries.toLocaleString()}`}</text>
+        </box>
+      )}
+      {s.total_size_bytes != null && (
+        <box height={1} width="100%">
+          <text>{`  Total size:      ${formatSize(s.total_size_bytes)}`}</text>
+        </box>
+      )}
+      {s.hit_rate != null && (
+        <box height={1} width="100%">
+          <text>
+            {"  Hit rate:        "}
+            <span style={textStyle({ fg: hitRateColor(s.hit_rate) })}>{`${(s.hit_rate * 100).toFixed(1)}%`}</span>
+          </text>
+        </box>
+      )}
+      {s.miss_rate != null && (
+        <box height={1} width="100%">
+          <text>{`  Miss rate:       ${(s.miss_rate * 100).toFixed(1)}%`}</text>
+        </box>
+      )}
+      {s.eviction_count != null && (
+        <box height={1} width="100%">
+          <text>{`  Evictions:       ${s.eviction_count.toLocaleString()}`}</text>
+        </box>
+      )}
+
+      {/* Layer table */}
+      {s.layers && s.layers.length > 0 && (
+        <>
+          <box height={1} width="100%"><text>{""}</text></box>
+          <box height={1} width="100%"><text>--- Cache Layers ---</text></box>
+          <box height={1} width="100%">
+            <text>{"  NAME                 ENTRIES     SIZE         HIT RATE"}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{"  -------------------  ----------  -----------  --------"}</text>
+          </box>
+          {s.layers.map((layer) => (
+            <box key={layer.name} height={1} width="100%">
+              <text>
+                {`  ${layer.name.padEnd(19)}  ${String(layer.entries).padEnd(10)}  ${formatSize(layer.size_bytes).padEnd(11)}  `}
+                <span style={textStyle({ fg: hitRateColor(layer.hit_rate) })}>{`${(layer.hit_rate * 100).toFixed(1)}%`}</span>
+              </text>
+            </box>
+          ))}
+        </>
+      )}
+
+      {/* Hot files */}
+      {files.length > 0 && (
+        <>
+          <box height={1} width="100%"><text>{""}</text></box>
+          <box height={1} width="100%"><text>--- Hot Files ---</text></box>
+          {files.slice(0, 10).map((file, i) => {
+            const path = file.path ?? "unknown";
+            const count = file.access_count ?? 0;
+            return (
+              <box key={`hf-${i}`} height={1} width="100%">
+                <text>{`  ${path} (${count} hits)`}</text>
+              </box>
+            );
+          })}
+        </>
+      )}
+    </box>
+  );
+}