@nexus-ai-fs/tui 0.9.18

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

@@ -0,0 +1,90 @@
+/**
+ * Scrollable transaction list with status badges and selection highlight.
+ */
+
+import React from "react";
+import type { Transaction } from "../../stores/versions-store.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { textStyle } from "../../shared/text-style.js";
+import { transactionStatusColor } from "../../shared/theme.js";
+import { ScrollIndicator } from "../../shared/components/scroll-indicator.js";
+
+// =============================================================================
+// Status badges
+// =============================================================================
+
+const STATUS_BADGE: Readonly<Record<Transaction["status"], string>> = {
+  active: "\u25CF",       // filled circle
+  committed: "\u2713",    // check mark
+  rolled_back: "\u2717",  // ballot x
+  expired: "\u25CB",      // empty circle
+};
+
+function statusBadge(status: Transaction["status"]): string {
+  return STATUS_BADGE[status];
+}
+
+function truncateId(id: string): string {
+  return id.length > 8 ? id.slice(0, 8) : id;
+}
+
+function formatTime(iso: string): string {
+  try {
+    const date = new Date(iso);
+    return date.toLocaleTimeString(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return iso;
+  }
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+interface TransactionListProps {
+  readonly transactions: readonly Transaction[];
+  readonly selectedIndex: number;
+}
+
+export function TransactionList({
+  transactions,
+  selectedIndex,
+}: TransactionListProps): React.ReactNode {
+  if (transactions.length === 0) {
+    return (
+      <EmptyState
+        message="No transactions yet."
+        hint="Press n to begin one, or write a file to create an auto-transaction."
+      />
+    );
+  }
+
+  return (
+    <ScrollIndicator selectedIndex={selectedIndex} totalItems={transactions.length} visibleItems={20}>
+      <scrollbox flexGrow={1} width="100%">
+        {transactions.map((txn, index) => {
+          const selected = index === selectedIndex;
+          const prefix = selected ? "\u25B8 " : "  ";
+          const badge = statusBadge(txn.status);
+          const desc = txn.description ?? "";
+          const id = truncateId(txn.transaction_id);
+          const time = formatTime(txn.created_at);
+          const entries = `${txn.entry_count} entries`;
+
+          return (
+            <box key={txn.transaction_id} height={1} width="100%">
+              <text>{prefix}</text>
+              <text style={textStyle({ fg: transactionStatusColor[txn.status] })}>{badge}</text>
+              <text>
+                {` ${id}  ${desc ? desc + "  " : ""}${entries}  ${time}`}
+              </text>
+            </box>
+          );
+        })}
+      </scrollbox>
+    </ScrollIndicator>
+  );
+}

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

@@ -0,0 +1,276 @@
+/**
+ * Versions & Snapshots panel.
+ *
+ * Left pane: transaction list with status badges.
+ * Right pane: entry detail for the selected transaction.
+ * Bottom: keyboard shortcut hints.
+ */
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useVersionsStore,
+  nextStatusFilter,
+} from "../../stores/versions-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useCopy } from "../../shared/hooks/use-copy.js";
+import { jumpToStart, jumpToEnd } from "../../shared/hooks/use-list-navigation.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { BrickGate } from "../../shared/components/brick-gate.js";
+import { TransactionList } from "./transaction-list.js";
+import { EntryDetail } from "./entry-detail.js";
+import { ConflictsView } from "./conflicts-tab.js";
+import { useUiStore } from "../../stores/ui-store.js";
+import { focusColor } from "../../shared/theme.js";
+import { textStyle } from "../../shared/text-style.js";
+import { formatActionHints, getVersionsFooterBindings } from "../../shared/action-registry.js";
+
+export default function VersionsPanel(): React.ReactNode {
+  const client = useApi();
+
+  const transactions = useVersionsStore((s) => s.transactions);
+  const selectedIndex = useVersionsStore((s) => s.selectedIndex);
+  const statusFilter = useVersionsStore((s) => s.statusFilter);
+  const isLoading = useVersionsStore((s) => s.isLoading);
+  const error = useVersionsStore((s) => s.error);
+  const entries = useVersionsStore((s) => s.entries);
+  const entriesLoading = useVersionsStore((s) => s.entriesLoading);
+
+  const conflicts = useVersionsStore((s) => s.conflicts);
+  const conflictsLoading = useVersionsStore((s) => s.conflictsLoading);
+  const showConflicts = useVersionsStore((s) => s.showConflicts);
+
+  const transactionDetail = useVersionsStore((s) => s.transactionDetail);
+  const transactionDetailLoading = useVersionsStore((s) => s.transactionDetailLoading);
+  const diffContent = useVersionsStore((s) => s.diffContent);
+  const diffLoading = useVersionsStore((s) => s.diffLoading);
+  const fetchTransactionDetail = useVersionsStore((s) => s.fetchTransactionDetail);
+
+  const fetchTransactions = useVersionsStore((s) => s.fetchTransactions);
+  const setSelectedIndex = useVersionsStore((s) => s.setSelectedIndex);
+  const setStatusFilter = useVersionsStore((s) => s.setStatusFilter);
+  const fetchEntries = useVersionsStore((s) => s.fetchEntries);
+  const fetchDiff = useVersionsStore((s) => s.fetchDiff);
+  const beginTransaction = useVersionsStore((s) => s.beginTransaction);
+  const commitTransaction = useVersionsStore((s) => s.commitTransaction);
+  const rollbackTransaction = useVersionsStore((s) => s.rollbackTransaction);
+  const fetchConflicts = useVersionsStore((s) => s.fetchConflicts);
+  const toggleConflicts = useVersionsStore((s) => s.toggleConflicts);
+
+  // Clipboard copy
+  const { copy, copied } = useCopy();
+
+  // Focus pane (ui-store)
+  const uiFocusPane = useUiStore((s) => s.getFocusPane("versions"));
+  const toggleFocus = useUiStore((s) => s.toggleFocusPane);
+  const overlayActive = useUiStore((s) => s.overlayActive);
+
+  // Transaction search/filter
+  const [txnFilterMode, setTxnFilterMode] = useState(false);
+  const [txnFilter, setTxnFilter] = useState("");
+
+  const filteredTransactions = useMemo(() => {
+    if (!txnFilter) return transactions;
+    const lower = txnFilter.toLowerCase();
+    return transactions.filter(
+      (t) =>
+        t.transaction_id.toLowerCase().includes(lower) ||
+        (t.description ?? "").toLowerCase().includes(lower),
+    );
+  }, [transactions, txnFilter]);
+
+  // Derive selectedTransaction from filtered list so the index always maps correctly
+  const selectedTransaction = filteredTransactions[selectedIndex] ?? null;
+
+  const handleFilterKey = useCallback(
+    (keyName: string) => {
+      if (!txnFilterMode) return;
+      if (keyName.length === 1) {
+        setTxnFilter((b) => b + keyName);
+      } else if (keyName === "space") {
+        setTxnFilter((b) => b + " ");
+      }
+    },
+    [txnFilterMode],
+  );
+
+  // Fetch transactions on mount and when filter changes
+  useEffect(() => {
+    if (client) {
+      fetchTransactions(client);
+    }
+  }, [client, statusFilter, fetchTransactions]);
+
+  // Fetch entries and transaction detail when selection changes
+  useEffect(() => {
+    if (client && selectedTransaction) {
+      fetchEntries(selectedTransaction.transaction_id, client);
+      fetchTransactionDetail(selectedTransaction.transaction_id, client);
+    }
+  }, [client, selectedTransaction, fetchEntries, fetchTransactionDetail]);
+
+  // Keyboard navigation
+  useKeyboard(
+    overlayActive
+      ? {}
+      : txnFilterMode
+        ? {
+            return: () => {
+              setTxnFilterMode(false);
+              setSelectedIndex(0);
+            },
+            escape: () => {
+              setTxnFilterMode(false);
+              setTxnFilter("");
+              setSelectedIndex(0);
+            },
+            backspace: () => {
+              setTxnFilter((b) => b.slice(0, -1));
+            },
+          }
+        : {
+            "j": () => {
+              if (filteredTransactions.length === 0) return;
+              setSelectedIndex(Math.max(0, Math.min(selectedIndex + 1, filteredTransactions.length - 1)));
+            },
+            "down": () => {
+              if (filteredTransactions.length === 0) return;
+              setSelectedIndex(Math.max(0, Math.min(selectedIndex + 1, filteredTransactions.length - 1)));
+            },
+            "k": () => setSelectedIndex(Math.max(selectedIndex - 1, 0)),
+            "up": () => setSelectedIndex(Math.max(selectedIndex - 1, 0)),
+            "return": () => {
+              if (selectedTransaction?.status === "active" && client) {
+                commitTransaction(selectedTransaction.transaction_id, client);
+              }
+            },
+            "backspace": () => {
+              if (selectedTransaction?.status === "active" && client) {
+                rollbackTransaction(selectedTransaction.transaction_id, client);
+              }
+            },
+            "n": () => {
+              if (client) {
+                beginTransaction(client);
+              }
+            },
+            "f": () => {
+              const next = nextStatusFilter(statusFilter);
+              setStatusFilter(next);
+            },
+            "/": () => {
+              setTxnFilterMode(true);
+              setTxnFilter("");
+            },
+            "v": () => {
+              // View diff for the first entry of the selected transaction
+              if (!client || !selectedTransaction || entries.length === 0) return;
+              const entry = entries[0];
+              if (entry && entry.original_hash && entry.new_hash) {
+                fetchDiff(entry.path, entry.original_hash, entry.new_hash, client);
+              }
+            },
+            "c": () => {
+              // Toggle conflicts view; fetch on first open
+              toggleConflicts();
+              if (!showConflicts && client) {
+                fetchConflicts(client);
+              }
+            },
+            "tab": () => toggleFocus("versions"),
+            "g": () => setSelectedIndex(jumpToStart()),
+            "shift+g": () => setSelectedIndex(jumpToEnd(filteredTransactions.length)),
+            "y": () => {
+              if (selectedTransaction) {
+                copy(selectedTransaction.transaction_id);
+              }
+            },
+          },
+    txnFilterMode ? handleFilterKey : undefined,
+  );
+
+  const filterLabel = statusFilter ? ` [${statusFilter}]` : " [all]";
+
+  return (
+    <BrickGate brick="versioning">
+      <box height="100%" width="100%" flexDirection="column">
+        {/* Title bar */}
+        <box height={1} width="100%">
+          <text>
+            {isLoading
+              ? `Versions & Snapshots${filterLabel} -- loading...`
+              : error
+                ? `Versions & Snapshots${filterLabel} -- error: ${error}`
+                : `Versions & Snapshots${filterLabel} -- ${filteredTransactions.length} transactions${txnFilter ? ` (filtered)` : ""}`}
+          </text>
+        </box>
+
+        {/* Filter bar */}
+        {txnFilterMode && (
+          <box height={1} width="100%">
+            <text>{`Search: ${txnFilter}\u2588`}</text>
+          </box>
+        )}
+        {!txnFilterMode && txnFilter && (
+          <box height={1} width="100%">
+            <text>{`Filter: "${txnFilter}" (/ to change, Esc in filter to clear)`}</text>
+          </box>
+        )}
+
+        {/* Main content: transaction list + entry detail */}
+        <box flexGrow={1} flexDirection="row">
+          {/* Left pane: transaction list (40%) */}
+          <box width="40%" height="100%" borderStyle="single" borderColor={uiFocusPane === "left" ? focusColor.activeBorder : focusColor.inactiveBorder}>
+            <TransactionList
+              transactions={filteredTransactions}
+              selectedIndex={selectedIndex}
+            />
+          </box>
+
+          {/* Right pane: entry detail (60%) */}
+          <box width="60%" height="100%" borderStyle="single" borderColor={uiFocusPane === "right" ? focusColor.activeBorder : focusColor.inactiveBorder}>
+            <EntryDetail
+              transaction={selectedTransaction}
+              entries={entries}
+              isLoading={entriesLoading}
+            />
+          </box>
+        </box>
+
+        {/* Transaction detail (below entry detail) */}
+        {transactionDetail && !transactionDetailLoading && (
+          <box height={3} width="100%">
+            <text>
+              {`Detail: zone=${transactionDetail.zone_id} agent=${transactionDetail.agent_id ?? "n/a"} entries=${transactionDetail.entry_count} created=${transactionDetail.created_at} expires=${transactionDetail.expires_at}`}
+            </text>
+          </box>
+        )}
+
+        {/* Diff viewer */}
+        {diffContent && !diffLoading && (
+          <box height={8} width="100%" borderStyle="single" flexDirection="column">
+            <box height={1} width="100%"><text>--- Old ---</text></box>
+            <scrollbox flexGrow={1} width="100%"><text>{diffContent.old}</text></scrollbox>
+            <box height={1} width="100%"><text>--- New ---</text></box>
+            <scrollbox flexGrow={1} width="100%"><text>{diffContent.new}</text></scrollbox>
+          </box>
+        )}
+
+        {/* Conflicts pane (toggleable) */}
+        <ConflictsView
+          conflicts={conflicts}
+          loading={conflictsLoading}
+          visible={showConflicts}
+        />
+
+        {/* Help bar */}
+        <box height={1} width="100%">
+          {copied
+            ? <text style={textStyle({ fg: "green" })}>Copied!</text>
+            : <text>
+            {formatActionHints(getVersionsFooterBindings({ txnFilterMode }))}
+          </text>}
+        </box>
+      </box>
+    </BrickGate>
+  );
+}

package/src/panels/workflows/execution-list.tsx

@@ -0,0 +1,102 @@
+/**
+ * Execution list view: execution_id, trigger_type, status, started_at,
+ * completed_at, actions progress, error_message.
+ */
+
+import React, { useCallback } from "react";
+import type { ExecutionSummary } from "../../stores/workflows-store.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { VirtualList } from "../../shared/components/virtual-list.js";
+
+const VIEWPORT_HEIGHT = 20;
+
+interface ExecutionListProps {
+  readonly executions: readonly ExecutionSummary[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function formatTimestamp(ts: string | null): string {
+  if (!ts) return "---";
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+function shortId(id: string): string {
+  if (id.length <= 10) return id;
+  return `${id.slice(0, 8)}..`;
+}
+
+function truncate(text: string, maxLen: number): string {
+  if (text.length <= maxLen) return text;
+  return `${text.slice(0, maxLen - 3)}...`;
+}
+
+export function ExecutionList({
+  executions,
+  selectedIndex,
+  loading,
+}: ExecutionListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading executions...</text>
+      </box>
+    );
+  }
+
+  if (executions.length === 0) {
+    return (
+      <EmptyState
+        message="No executions found."
+        hint="Select a workflow and press e to execute it."
+      />
+    );
+  }
+
+  const renderExecution = useCallback(
+    (ex: ExecutionSummary, i: number) => {
+      const isSelected = i === selectedIndex;
+      const id = shortId(ex.execution_id);
+      const status = truncate(ex.status, 9);
+      const trigger = truncate(ex.trigger_type, 12);
+      const progress = `${ex.actions_completed}/${ex.actions_total}`;
+      const errorText = ex.error_message
+        ? truncate(ex.error_message, 20)
+        : "";
+      const prefix = isSelected ? "> " : "  ";
+
+      return (
+        <box key={ex.execution_id} height={1} width="100%">
+          <text>
+            {`${prefix}${id.padEnd(10)}  ${status.padEnd(9)}  ${trigger.padEnd(12)}  ${progress.padEnd(8)}  ${formatTimestamp(ex.started_at).padEnd(19)}  ${errorText}`}
+          </text>
+        </box>
+      );
+    },
+    [selectedIndex],
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  ID          STATUS     TRIGGER       PROGRESS  STARTED              ERROR"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ----------  ---------  ------------  --------  -------------------  -----"}</text>
+      </box>
+
+      {/* Rows */}
+      <VirtualList
+        items={executions}
+        renderItem={renderExecution}
+        viewportHeight={VIEWPORT_HEIGHT}
+        selectedIndex={selectedIndex}
+      />
+    </box>
+  );
+}

package/src/panels/workflows/scheduler-view.tsx

@@ -0,0 +1,135 @@
+/**
+ * Scheduler metrics dashboard: queued, running, completed, failed, throughput.
+ */
+
+import React from "react";
+import type { SchedulerMetrics } from "../../stores/workflows-store.js";
+
+interface SchedulerViewProps {
+  readonly metrics: SchedulerMetrics | null;
+  readonly loading: boolean;
+}
+
+function formatMs(ms: number): string {
+  if (ms < 1000) return `${ms.toFixed(0)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+export function SchedulerView({ metrics, loading }: SchedulerViewProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading scheduler metrics...</text>
+      </box>
+    );
+  }
+
+  if (!metrics) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No scheduler metrics available</text>
+      </box>
+    );
+  }
+
+  const total = metrics.queued_tasks + metrics.running_tasks + metrics.completed_tasks + metrics.failed_tasks;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Scheduler type */}
+      <box height={1} width="100%">
+        <text>{`--- Astraea Scheduler (${metrics.use_hrrn ? "HRRN" : "FIFO"}) ---`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{""}</text>
+      </box>
+
+      {/* Task counts */}
+      <box height={1} width="100%">
+        <text>{"  Task Counts:"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`    Queued:     ${metrics.queued_tasks}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`    Running:    ${metrics.running_tasks}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`    Completed:  ${metrics.completed_tasks}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`    Failed:     ${metrics.failed_tasks}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{`    Total:      ${total}`}</text>
+      </box>
+
+      {/* Queue by priority class */}
+      {metrics.queue_by_class && metrics.queue_by_class.length > 0 && (
+        <>
+          <box height={1} width="100%">
+            <text>{""}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{"  Queue by Priority:"}</text>
+          </box>
+          {metrics.queue_by_class.map((c, i) => (
+            <box key={i} height={1} width="100%">
+              <text>{`    ${(c.priority_class ?? "unknown").padEnd(12)} ${c.count} tasks`}</text>
+            </box>
+          ))}
+        </>
+      )}
+
+      {/* Fair share */}
+      {metrics.fair_share && Object.keys(metrics.fair_share).length > 0 && (
+        <>
+          <box height={1} width="100%">
+            <text>{""}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{"  Fair Share Allocation:"}</text>
+          </box>
+          {Object.entries(metrics.fair_share).map(([agent, share], i) => (
+            <box key={i} height={1} width="100%">
+              <text>{`    ${agent.padEnd(20)} ${JSON.stringify(share)}`}</text>
+            </box>
+          ))}
+        </>
+      )}
+
+      {/* Performance */}
+      {(metrics.avg_wait_ms > 0 || metrics.throughput_per_minute > 0) && (
+        <>
+          <box height={1} width="100%">
+            <text>{""}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{"  Performance:"}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{`    Avg wait:       ${formatMs(metrics.avg_wait_ms)}`}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{`    Avg duration:   ${formatMs(metrics.avg_duration_ms)}`}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{`    Throughput:     ${metrics.throughput_per_minute.toFixed(1)}/min`}</text>
+          </box>
+        </>
+      )}
+
+      {/* Success rate */}
+      {total > 0 && (
+        <>
+          <box height={1} width="100%">
+            <text>{""}</text>
+          </box>
+          <box height={1} width="100%">
+            <text>{`  Success: ${((metrics.completed_tasks / total) * 100).toFixed(1)}%  |  Failed: ${((metrics.failed_tasks / total) * 100).toFixed(1)}%`}</text>
+          </box>
+        </>
+      )}
+    </scrollbox>
+  );
+}

package/src/panels/workflows/workflow-list.tsx

@@ -0,0 +1,88 @@
+/**
+ * Workflow list view: name, version, enabled, triggers count, actions count, description.
+ */
+
+import React, { useCallback } from "react";
+import type { WorkflowSummary } from "../../stores/workflows-store.js";
+import { textStyle } from "../../shared/text-style.js";
+import { statusColor } from "../../shared/theme.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { VirtualList } from "../../shared/components/virtual-list.js";
+
+const VIEWPORT_HEIGHT = 20;
+
+interface WorkflowListProps {
+  readonly workflows: readonly WorkflowSummary[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function truncate(text: string, maxLen: number): string {
+  if (text.length <= maxLen) return text;
+  return `${text.slice(0, maxLen - 3)}...`;
+}
+
+export function WorkflowList({
+  workflows,
+  selectedIndex,
+  loading,
+}: WorkflowListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading workflows...</text>
+      </box>
+    );
+  }
+
+  if (workflows.length === 0) {
+    return (
+      <EmptyState
+        message="No workflows defined."
+        hint="Create one via the API: POST /api/v2/workflows"
+      />
+    );
+  }
+
+  const renderWorkflow = useCallback(
+    (w: WorkflowSummary, i: number) => {
+      const isSelected = i === selectedIndex;
+      const enabledBadge = w.enabled ? "[ON]" : "[--]";
+      const name = truncate(w.name, 19);
+      const version = truncate(w.version, 8);
+      const desc = w.description ? truncate(w.description, 30) : "";
+      const prefix = isSelected ? "> " : "  ";
+
+      return (
+        <box key={w.name} height={1} width="100%">
+          <text>
+            <span>{prefix}</span>
+            <span style={textStyle({ fg: w.enabled ? statusColor.healthy : statusColor.dim })}>{enabledBadge.padEnd(5)}</span>
+            <span>{`${name.padEnd(19)}  ${version.padEnd(8)}  ${String(w.triggers).padEnd(4)}  ${String(w.actions).padEnd(3)}  ${desc}`}</span>
+          </text>
+        </box>
+      );
+    },
+    [selectedIndex],
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  EN   NAME                 VERSION   TRIG  ACT  DESCRIPTION"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ---  -------------------  --------  ----  ---  -----------"}</text>
+      </box>
+
+      {/* Rows */}
+      <VirtualList
+        items={workflows}
+        renderItem={renderWorkflow}
+        viewportHeight={VIEWPORT_HEIGHT}
+        selectedIndex={selectedIndex}
+      />
+    </box>
+  );
+}