@nexus-ai-fs/tui 0.9.18

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

@@ -0,0 +1,474 @@
+/**
+ * Stack panel: Docker container status, nexus.yaml config, .state.json runtime,
+ * and server health — all in one place for debugging.
+ *
+ * Tabs: Containers | Config | State
+ * Keybindings: Tab to switch, r to refresh, j/k to scroll.
+ */
+
+import React, { useEffect, useState } from "react";
+import { useStackStore, type StackTab, type ContainerInfo, type StackPaths } from "../../stores/stack-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useUiStore } from "../../stores/ui-store.js";
+import { useGlobalStore } from "../../stores/global-store.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { statusColor } from "../../shared/theme.js";
+
+// =============================================================================
+// Tab definitions
+// =============================================================================
+
+const TAB_ORDER: readonly StackTab[] = ["containers", "config", "state"];
+
+const TAB_LABELS: Readonly<Record<StackTab, string>> = {
+  containers: "Containers",
+  config: "Config",
+  state: "State",
+};
+
+// =============================================================================
+// Container status colors
+// =============================================================================
+
+const CONTAINER_STATE_COLOR: Record<string, string> = {
+  running: statusColor.healthy,
+  exited: statusColor.error,
+  paused: statusColor.warning,
+  restarting: statusColor.warning,
+  dead: statusColor.error,
+  created: statusColor.dim,
+};
+
+const HEALTH_COLOR: Record<string, string> = {
+  healthy: statusColor.healthy,
+  unhealthy: statusColor.error,
+  starting: statusColor.warning,
+};
+
+// =============================================================================
+// Sub-components
+// =============================================================================
+
+function ContainerList({
+  containers,
+  loading,
+  selectedIndex,
+}: {
+  containers: readonly ContainerInfo[];
+  loading: boolean;
+  selectedIndex: number;
+}): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Querying Docker..." />;
+  }
+
+  if (containers.length === 0) {
+    return <EmptyState message="No containers found." hint="Start the stack with: nexus up" />;
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  CONTAINER NAME                      SERVICE       STATE       HEALTH      PORTS                    IMAGE"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ------------------------------------  -----------  ----------  ----------  -----------------------  -------------------------"}</text>
+      </box>
+
+      {/* Rows */}
+      {containers.map((c, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const stateColor = CONTAINER_STATE_COLOR[c.state] ?? statusColor.dim;
+        const hColor = HEALTH_COLOR[c.health] ?? statusColor.dim;
+        const name = c.name.length > 36 ? c.name.slice(0, 33) + "..." : c.name;
+        const image = c.image.length > 25 ? c.image.slice(0, 22) + "..." : c.image;
+        const ports = c.ports.length > 23 ? c.ports.slice(0, 20) + "..." : c.ports;
+
+        return (
+          <box key={c.name} height={1} width="100%">
+            <text>
+              {`${prefix}${name.padEnd(36)}  ${c.service.padEnd(11)}  `}
+              <span foregroundColor={stateColor}>{c.state.padEnd(10)}</span>
+              {"  "}
+              <span foregroundColor={hColor}>{(c.health || "-").padEnd(10)}</span>
+              {`  ${ports.padEnd(23)}  ${image}`}
+            </text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}
+
+function ConfigView({
+  yaml,
+  loading,
+  scrollOffset,
+}: {
+  yaml: string;
+  loading: boolean;
+  scrollOffset: number;
+}): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Reading nexus.yaml..." />;
+  }
+
+  if (!yaml) {
+    return <EmptyState message="No nexus.yaml found." hint="Run: nexus init --preset shared" />;
+  }
+
+  const lines = yaml.split("\n");
+
+  return (
+    <scrollbox height="100%" width="100%">
+      <box height={1} width="100%">
+        <text foregroundColor={statusColor.info}>{"  nexus.yaml"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text dimColor>{"  " + "─".repeat(60)}</text>
+      </box>
+      {lines.slice(scrollOffset).map((line, i) => (
+        <box key={i} height={1} width="100%">
+          <text>
+            <span dimColor>{`  ${String(scrollOffset + i + 1).padStart(3)}  `}</span>
+            {line}
+          </text>
+        </box>
+      ))}
+    </scrollbox>
+  );
+}
+
+function StateView({
+  stateJson,
+  loading,
+  projectName,
+  scrollOffset,
+}: {
+  stateJson: Record<string, unknown> | null;
+  loading: boolean;
+  projectName: string | null;
+  scrollOffset: number;
+}): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Reading .state.json..." />;
+  }
+
+  if (!stateJson) {
+    return <EmptyState message="No .state.json found." hint="Start the stack first." />;
+  }
+
+  // Render key-value pairs with nested object support
+  const lines: { key: string; value: string; indent: number }[] = [];
+
+  function flatten(obj: Record<string, unknown>, indent: number): void {
+    for (const [key, val] of Object.entries(obj)) {
+      if (val && typeof val === "object" && !Array.isArray(val)) {
+        lines.push({ key, value: "", indent });
+        flatten(val as Record<string, unknown>, indent + 1);
+      } else {
+        lines.push({ key, value: String(val), indent });
+      }
+    }
+  }
+  flatten(stateJson, 0);
+
+  return (
+    <scrollbox height="100%" width="100%">
+      <box height={1} width="100%">
+        <text foregroundColor={statusColor.info}>{"  .state.json (runtime)"}</text>
+      </box>
+      {projectName && (
+        <box height={1} width="100%">
+          <text>
+            {"  project_name: "}
+            <span foregroundColor={statusColor.identity}>{projectName}</span>
+          </text>
+        </box>
+      )}
+      <box height={1} width="100%">
+        <text dimColor>{"  " + "─".repeat(60)}</text>
+      </box>
+      {lines.slice(scrollOffset).map((line, i) => {
+        const pad = "  ".repeat(line.indent);
+        return (
+          <box key={i} height={1} width="100%">
+            <text>
+              {"  "}{pad}
+              <span foregroundColor={statusColor.info}>{line.key}</span>
+              {line.value ? ": " : ""}
+              {line.value}
+            </text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}
+
+function PathsBar({ paths }: { paths: StackPaths | null }): React.ReactNode {
+  if (!paths) return null;
+
+  return (
+    <box height={4} width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text dimColor>{"  Paths:"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {"    nexus.yaml   "}
+          <span foregroundColor={statusColor.reference}>{paths.nexusYaml}</span>
+        </text>
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {"    state.json   "}
+          <span foregroundColor={statusColor.reference}>{paths.stateJson}</span>
+        </text>
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {"    compose      "}
+          <span foregroundColor={statusColor.reference}>{paths.composeFile}</span>
+          <span dimColor>{"  │  data: "}</span>
+          <span foregroundColor={statusColor.reference}>{paths.dataDir}</span>
+        </text>
+      </box>
+    </box>
+  );
+}
+
+function HealthSummary({
+  healthDetails,
+  uptime,
+  serverVersion,
+}: {
+  healthDetails: { status: string; components: Record<string, { status: string; detail?: string }> } | null;
+  uptime: number | null;
+  serverVersion: string | null;
+}): React.ReactNode {
+  if (!healthDetails) return null;
+
+  const color = healthDetails.status === "healthy"
+    ? statusColor.healthy
+    : healthDetails.status === "degraded"
+    ? statusColor.warning
+    : statusColor.error;
+
+  const uptimeStr = uptime != null
+    ? `${Math.floor(uptime / 3600)}h ${Math.floor((uptime % 3600) / 60)}m`
+    : "-";
+
+  const componentEntries = Object.entries(healthDetails.components);
+
+  return (
+    <box height={componentEntries.length > 0 ? componentEntries.length + 3 : 2} width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>
+          {"  Server: "}
+          <span foregroundColor={color}>{healthDetails.status}</span>
+          {"  │  uptime: "}{uptimeStr}
+          {serverVersion ? `  │  v${serverVersion}` : ""}
+        </text>
+      </box>
+      {componentEntries.length > 0 && (
+        <>
+          <box height={1} width="100%">
+            <text dimColor>{"  Components:"}</text>
+          </box>
+          {componentEntries.map(([name, comp]) => {
+            const cColor = comp.status === "healthy" || comp.status === "ok"
+              ? statusColor.healthy
+              : comp.status === "degraded"
+              ? statusColor.warning
+              : statusColor.error;
+            return (
+              <box key={name} height={1} width="100%">
+                <text>
+                  {"    "}
+                  <span foregroundColor={cColor}>{"●"}</span>
+                  {` ${name.padEnd(24)} `}
+                  <span foregroundColor={cColor}>{comp.status}</span>
+                  {comp.detail ? `  ${comp.detail}` : ""}
+                </text>
+              </box>
+            );
+          })}
+        </>
+      )}
+    </box>
+  );
+}
+
+// =============================================================================
+// Main panel
+// =============================================================================
+
+export default function StackPanel(): React.ReactNode {
+  const client = useApi();
+  const overlayActive = useUiStore((s) => s.overlayActive);
+  const serverVersion = useGlobalStore((s) => s.serverVersion);
+  const uptime = useGlobalStore((s) => s.uptime);
+
+  const activeTab = useStackStore((s) => s.activeTab);
+  const setActiveTab = useStackStore((s) => s.setActiveTab);
+  const containers = useStackStore((s) => s.containers);
+  const containersLoading = useStackStore((s) => s.containersLoading);
+  const configYaml = useStackStore((s) => s.configYaml);
+  const configLoading = useStackStore((s) => s.configLoading);
+  const stateJson = useStackStore((s) => s.stateJson);
+  const stateLoading = useStackStore((s) => s.stateLoading);
+  const healthDetails = useStackStore((s) => s.healthDetails);
+  const paths = useStackStore((s) => s.paths);
+  const error = useStackStore((s) => s.error);
+  const refreshAll = useStackStore((s) => s.refreshAll);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  // Derive project name from state.json
+  const projectName = stateJson?.project_name as string | null ?? null;
+
+  // Initial fetch
+  useEffect(() => {
+    refreshAll(client);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [client]);
+
+  // Reset selection/scroll on tab change
+  useEffect(() => {
+    setSelectedIndex(0);
+    setScrollOffset(0);
+  }, [activeTab]);
+
+  // List length for current tab
+  const listLength = activeTab === "containers"
+    ? containers.length
+    : activeTab === "config"
+    ? configYaml.split("\n").length
+    : stateJson
+    ? Object.keys(stateJson).length * 3 // approximate
+    : 0;
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : {
+          tab: () => {
+            const idx = TAB_ORDER.indexOf(activeTab);
+            const next = TAB_ORDER[(idx + 1) % TAB_ORDER.length]!;
+            setActiveTab(next);
+          },
+          j: () => {
+            if (activeTab === "containers") {
+              setSelectedIndex((i) => Math.min(i + 1, containers.length - 1));
+            } else {
+              setScrollOffset((o) => Math.min(o + 1, Math.max(listLength - 5, 0)));
+            }
+          },
+          down: () => {
+            if (activeTab === "containers") {
+              setSelectedIndex((i) => Math.min(i + 1, containers.length - 1));
+            } else {
+              setScrollOffset((o) => Math.min(o + 1, Math.max(listLength - 5, 0)));
+            }
+          },
+          k: () => {
+            if (activeTab === "containers") {
+              setSelectedIndex((i) => Math.max(i - 1, 0));
+            } else {
+              setScrollOffset((o) => Math.max(o - 1, 0));
+            }
+          },
+          up: () => {
+            if (activeTab === "containers") {
+              setSelectedIndex((i) => Math.max(i - 1, 0));
+            } else {
+              setScrollOffset((o) => Math.max(o - 1, 0));
+            }
+          },
+          r: () => {
+            refreshAll(client);
+          },
+          g: () => {
+            setSelectedIndex(0);
+            setScrollOffset(0);
+          },
+          "shift+g": () => {
+            if (activeTab === "containers") {
+              setSelectedIndex(Math.max(containers.length - 1, 0));
+            } else {
+              setScrollOffset(Math.max(listLength - 5, 0));
+            }
+          },
+        },
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* 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 foregroundColor={statusColor.error}>{`  Error: ${error}`}</text>
+        </box>
+      )}
+
+      {/* Health summary (always visible) */}
+      <HealthSummary
+        healthDetails={healthDetails}
+        uptime={uptime}
+        serverVersion={serverVersion}
+      />
+
+      {/* File paths */}
+      <PathsBar paths={paths} />
+
+      {/* Main content */}
+      <box flexGrow={1} borderStyle="single">
+        {activeTab === "containers" && (
+          <ContainerList
+            containers={containers}
+            loading={containersLoading}
+            selectedIndex={selectedIndex}
+          />
+        )}
+        {activeTab === "config" && (
+          <ConfigView
+            yaml={configYaml}
+            loading={configLoading}
+            scrollOffset={scrollOffset}
+          />
+        )}
+        {activeTab === "state" && (
+          <StateView
+            stateJson={stateJson}
+            loading={stateLoading}
+            projectName={projectName}
+            scrollOffset={scrollOffset}
+          />
+        )}
+      </box>
+
+      {/* Help bar */}
+      <box height={1} width="100%">
+        <text dimColor>
+          {"  j/k:navigate  Tab:switch tab  r:refresh  g/G:top/bottom  q:quit"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/versions/conflicts-tab.tsx

@@ -0,0 +1,59 @@
+/**
+ * Conflicts view for the Versions & Snapshots panel.
+ * Displayed as a toggleable bottom pane (press 'c' to show/hide).
+ */
+
+import React from "react";
+import type { ConflictItem } from "../../stores/versions-store.js";
+
+interface ConflictsViewProps {
+  readonly conflicts: readonly ConflictItem[];
+  readonly loading: boolean;
+  readonly visible: boolean;
+}
+
+export function ConflictsView({
+  conflicts,
+  loading,
+  visible,
+}: ConflictsViewProps): React.ReactNode {
+  if (!visible) return null;
+
+  if (loading) {
+    return (
+      <box height={6} width="100%" borderStyle="single" flexDirection="column">
+        <text>{"--- Conflicts ---"}</text>
+        <text>Loading conflicts...</text>
+      </box>
+    );
+  }
+
+  if (conflicts.length === 0) {
+    return (
+      <box height={4} width="100%" borderStyle="single" flexDirection="column">
+        <text>{"--- Conflicts ---"}</text>
+        <text>No conflicts detected.</text>
+      </box>
+    );
+  }
+
+  return (
+    <box
+      height={Math.min(conflicts.length + 3, 12)}
+      width="100%"
+      borderStyle="single"
+      flexDirection="column"
+    >
+      <text>{"--- Conflicts ---"}</text>
+      <scrollbox height="100%" width="100%">
+        {conflicts.map((conflict, i) => (
+          <box key={`${conflict.path}-${i}`} height={1} width="100%">
+            <text>
+              {`  ${conflict.path}  ${conflict.reason}  expected:${conflict.expected_hash ?? "n/a"}  current:${conflict.current_hash ?? "n/a"}  txn:${conflict.transaction_id ?? "n/a"}`}
+            </text>
+          </box>
+        ))}
+      </scrollbox>
+    </box>
+  );
+}

package/src/panels/versions/entry-detail.tsx

@@ -0,0 +1,89 @@
+/**
+ * Snapshot entry detail view for the selected transaction.
+ *
+ * Shows each entry's operation, path, and hash changes.
+ */
+
+import React from "react";
+import type { SnapshotEntry, Transaction } from "../../stores/versions-store.js";
+
+// =============================================================================
+// Operation badges
+// =============================================================================
+
+const OPERATION_BADGE: Readonly<Record<SnapshotEntry["operation"], string>> = {
+  write: "W",
+  delete: "D",
+  rename: "R",
+};
+
+function truncateHash(hash: string | null): string {
+  if (!hash) return "-";
+  return hash.length > 8 ? hash.slice(0, 8) : hash;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+interface EntryDetailProps {
+  readonly transaction: Transaction | null;
+  readonly entries: readonly SnapshotEntry[];
+  readonly isLoading: boolean;
+}
+
+export function EntryDetail({
+  transaction,
+  entries,
+  isLoading,
+}: EntryDetailProps): React.ReactNode {
+  if (!transaction) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Select a transaction to view entries</text>
+      </box>
+    );
+  }
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={2} width="100%" flexDirection="column">
+        <text>{`Transaction: ${transaction.transaction_id}`}</text>
+        <text>{`Status: ${transaction.status}  Entries: ${transaction.entry_count}`}</text>
+      </box>
+
+      {/* Entry list */}
+      {isLoading ? (
+        <box flexGrow={1} justifyContent="center" alignItems="center">
+          <text>Loading entries...</text>
+        </box>
+      ) : entries.length === 0 ? (
+        <box flexGrow={1} justifyContent="center" alignItems="center">
+          <text>No entries in this transaction</text>
+        </box>
+      ) : (
+        <scrollbox flexGrow={1} width="100%">
+          {/* Column headers */}
+          <box height={1} width="100%">
+            <text>{"  OP  PATH                             OLD_HASH    NEW_HASH"}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{"  --  -------------------------------  ----------  ----------"}</text>
+          </box>
+          {entries.map((entry) => {
+            const badge = OPERATION_BADGE[entry.operation];
+            const original = truncateHash(entry.original_hash);
+            const next = truncateHash(entry.new_hash);
+
+            return (
+              <box key={entry.entry_id} height={1} width="100%">
+                <text>{`  [${badge}] ${entry.path}  ${original}  ${next}`}</text>
+              </box>
+            );
+          })}
+        </scrollbox>
+      )}
+    </box>
+  );
+}

package/src/panels/versions/transaction-actions.tsx

@@ -0,0 +1,34 @@
+/**
+ * Action hints for the selected transaction.
+ *
+ * Shows available keyboard shortcuts based on transaction status.
+ */
+
+import React from "react";
+import type { Transaction } from "../../stores/versions-store.js";
+
+interface TransactionActionsProps {
+  readonly transaction: Transaction | null;
+}
+
+export function TransactionActions({
+  transaction,
+}: TransactionActionsProps): React.ReactNode {
+  if (!transaction) {
+    return <text>{"n:new transaction  f:filter  q:quit"}</text>;
+  }
+
+  if (transaction.status === "active") {
+    return (
+      <text>
+        {"Enter:commit  Backspace:rollback  n:new transaction  f:filter  q:quit"}
+      </text>
+    );
+  }
+
+  return (
+    <text>
+      {"(read-only)  n:new transaction  f:filter  q:quit"}
+    </text>
+  );
+}