@nexus-ai-fs/tui 0.9.18

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

@@ -0,0 +1,103 @@
+/**
+ * Transaction list: displays audit transaction records with status, flow,
+ * pagination controls, and integrity verification result.
+ */
+
+import React from "react";
+import type { TransactionRecord, IntegrityResult } from "../../stores/payments-store.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+
+interface TransactionListProps {
+  readonly transactions: readonly TransactionRecord[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+  readonly hasMore: boolean;
+  readonly hasPrev: boolean;
+  readonly currentPage: number;
+  readonly integrityResult: IntegrityResult | null;
+}
+
+function shortId(id: string): string {
+  if (id.length <= 12) return id;
+  return `${id.slice(0, 8)}..`;
+}
+
+function formatTimestamp(ts: string): string {
+  try {
+    return new Date(ts).toLocaleString();
+  } catch {
+    return ts;
+  }
+}
+
+function formatAmount(amount: string, currency: string): string {
+  return `${amount} ${currency}`;
+}
+
+export function TransactionList({
+  transactions,
+  selectedIndex,
+  loading,
+  hasMore,
+  hasPrev,
+  currentPage,
+  integrityResult,
+}: TransactionListProps): React.ReactNode {
+  if (loading) {
+    return <LoadingIndicator message="Loading transactions..." />;
+  }
+
+  if (transactions.length === 0) {
+    return <EmptyState message="No transactions yet." hint="Press t to create a transfer." />;
+  }
+
+  const selectedTx = transactions[selectedIndex];
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  ID          DATE                 AMOUNT          STATUS     FLOW"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ----------  -------------------  --------------  ---------  --------------------"}</text>
+      </box>
+
+      {/* Rows */}
+      <scrollbox flexGrow={1} width="100%">
+        {transactions.map((tx, i) => {
+          const isSelected = i === selectedIndex;
+          const prefix = isSelected ? "> " : "  ";
+          const flow = `${shortId(tx.buyer_agent_id)}->${shortId(tx.seller_agent_id)}`;
+
+          return (
+            <box key={tx.id} height={1} width="100%">
+              <text>
+                {`${prefix}${shortId(tx.id).padEnd(10)}  ${formatTimestamp(tx.created_at).padEnd(19)}  ${formatAmount(tx.amount, tx.currency).padEnd(14)}  ${tx.status.padEnd(9)}  ${flow}`}
+              </text>
+            </box>
+          );
+        })}
+      </scrollbox>
+
+      {/* Integrity verification result */}
+      {integrityResult && selectedTx && integrityResult.record_id === selectedTx.id && (
+        <box height={1} width="100%">
+          <text>
+            {integrityResult.is_valid
+              ? `Integrity OK: ${shortId(integrityResult.record_hash)} (valid)`
+              : `INTEGRITY FAIL: ${shortId(integrityResult.record_hash)} (TAMPERED)`}
+          </text>
+        </box>
+      )}
+
+      {/* Pagination status */}
+      <box height={1} width="100%">
+        <text>
+          {`  Page ${currentPage}${hasMore ? "+" : ""}  ${hasPrev ? "[p:prev]" : ""}  ${hasMore ? "[n:next]" : "(end)"}  ${transactions.length} shown`}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/payments/transfer-form.tsx

@@ -0,0 +1,109 @@
+/**
+ * Transfer form overlay: three-field form (to, amount, memo) for credit transfers.
+ *
+ * Tab cycles between fields, Enter submits, Escape cancels.
+ * Uses the same input-mode pattern as search-panel.tsx.
+ */
+
+import React, { useState, useCallback } from "react";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+
+type TransferField = "to" | "amount" | "memo";
+
+const FIELD_ORDER: readonly TransferField[] = ["to", "amount", "memo"];
+const FIELD_LABELS: Readonly<Record<TransferField, string>> = {
+  to: "To",
+  amount: "Amount",
+  memo: "Memo",
+};
+
+interface TransferFormProps {
+  readonly onSubmit: (to: string, amount: string, memo: string) => void;
+  readonly onCancel: () => void;
+}
+
+export function TransferForm({
+  onSubmit,
+  onCancel,
+}: TransferFormProps): React.ReactNode {
+  const [activeField, setActiveField] = useState<TransferField>("to");
+  const [fields, setFields] = useState<Readonly<Record<TransferField, string>>>({
+    to: "",
+    amount: "",
+    memo: "",
+  });
+
+  const handleUnhandledKey = useCallback(
+    (keyName: string) => {
+      if (keyName.length === 1) {
+        setFields((prev) => ({ ...prev, [activeField]: prev[activeField] + keyName }));
+      } else if (keyName === "space") {
+        setFields((prev) => ({ ...prev, [activeField]: prev[activeField] + " " }));
+      }
+    },
+    [activeField],
+  );
+
+  useKeyboard(
+    {
+      tab: () => {
+        const currentIdx = FIELD_ORDER.indexOf(activeField);
+        const nextIdx = (currentIdx + 1) % FIELD_ORDER.length;
+        const nextField = FIELD_ORDER[nextIdx];
+        if (nextField) {
+          setActiveField(nextField);
+        }
+      },
+      backspace: () => {
+        setFields((prev) => ({
+          ...prev,
+          [activeField]: prev[activeField].slice(0, -1),
+        }));
+      },
+      return: () => {
+        const to = fields.to.trim();
+        const amount = fields.amount.trim();
+        const memo = fields.memo.trim();
+        if (to && amount) {
+          onSubmit(to, amount, memo);
+        }
+      },
+      escape: () => {
+        onCancel();
+      },
+    },
+    handleUnhandledKey,
+  );
+
+  return (
+    <box
+      height="100%"
+      width="100%"
+      flexDirection="column"
+      borderStyle="single"
+    >
+      <box height={1} width="100%">
+        <text>{"--- Transfer Credits ---"}</text>
+      </box>
+
+      {FIELD_ORDER.map((field) => {
+        const isActive = field === activeField;
+        const label = FIELD_LABELS[field];
+        const value = fields[field];
+        const cursor = isActive ? "\u2588" : "";
+        const prefix = isActive ? "> " : "  ";
+        return (
+          <box key={field} height={1} width="100%">
+            <text>{`${prefix}${label}: ${value}${cursor}`}</text>
+          </box>
+        );
+      })}
+
+      <box height={1} width="100%" marginTop={1}>
+        <text>
+          {"Tab:next field  Enter:submit  Escape:cancel  Backspace:delete"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/search/column-search.tsx

@@ -0,0 +1,79 @@
+/**
+ * Column search results sub-view.
+ * Displays datasets matching a column name query via the knowledge store.
+ * Issue #2930.
+ */
+
+import React from "react";
+
+interface ColumnResult {
+  readonly entityUrn: string;
+  readonly columnName: string;
+  readonly columnType: string;
+  readonly path?: string | null;
+  readonly schema?: {
+    readonly columns?: readonly { name: string; type: string }[];
+    readonly format?: string;
+    readonly row_count?: number;
+  };
+}
+
+interface ColumnSearchProps {
+  readonly results: readonly ColumnResult[];
+  readonly loading: boolean;
+}
+
+function formatUrn(urn: string): string {
+  // urn:nexus:file:zone:hash → show shortened hash
+  const parts = urn.split(":");
+  const hash = parts[parts.length - 1] ?? urn;
+  const zone = parts.length >= 4 ? parts[3] : "";
+  return zone ? `${zone}:${hash.slice(0, 8)}…` : hash.slice(0, 12) + "…";
+}
+
+export function ColumnSearch({
+  results,
+  loading,
+}: ColumnSearchProps): React.ReactNode {
+  if (loading) {
+    return <text>Searching columns...</text>;
+  }
+
+  if (results.length === 0) {
+    return (
+      <text>
+        No column matches. Press / and type a column name to search.
+      </text>
+    );
+  }
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      <text>
+        {"  COLUMN              TYPE         FILE                                    FORMAT  ROWS  OTHER COLUMNS"}
+      </text>
+      <text>
+        {"  ──────────────────  ───────────  ──────────────────────────────────────  ──────  ────  ─────────────────────────"}
+      </text>
+      {results.slice(0, 30).map((r, i) => {
+        const format = r.schema?.format ?? "?";
+        const rows = r.schema?.row_count != null ? String(r.schema.row_count) : "?";
+        const filePath = r.path ?? "(unknown)";
+        const otherCols = (r.schema?.columns ?? [])
+          .filter((c) => c.name !== r.columnName)
+          .map((c) => c.name)
+          .join(", ");
+        return (
+          <text key={i}>
+            {`  ${r.columnName.padEnd(20)} ${r.columnType.padEnd(12)} ${filePath.padEnd(40)} ${format.padEnd(7)} ${rows.padEnd(5)} ${otherCols}`}
+          </text>
+        );
+      })}
+      {results.length > 30 && (
+        <text>
+          {`  ... and ${results.length - 30} more results`}
+        </text>
+      )}
+    </box>
+  );
+}

package/src/panels/search/knowledge-view.tsx

@@ -0,0 +1,100 @@
+/**
+ * Knowledge graph view: entity detail (as dict) and neighbors list with depth info.
+ */
+
+import React from "react";
+import type { KnowledgeEntity, NeighborEntry } from "../../stores/search-store.js";
+
+interface KnowledgeViewProps {
+  readonly entity: KnowledgeEntity | null;
+  readonly neighbors: readonly NeighborEntry[];
+  readonly knowledgeSearchResult: KnowledgeEntity | null;
+  readonly loading: boolean;
+}
+
+function formatEntityDict(entity: KnowledgeEntity): string {
+  const entries = Object.entries(entity);
+  if (entries.length === 0) return "{}";
+  return entries
+    .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+    .join(", ");
+}
+
+function truncateValue(value: unknown, maxLen: number): string {
+  const str = JSON.stringify(value);
+  if (str.length <= maxLen) return str;
+  return `${str.slice(0, maxLen - 3)}...`;
+}
+
+export function KnowledgeView({
+  entity,
+  neighbors,
+  knowledgeSearchResult,
+  loading,
+}: KnowledgeViewProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading knowledge graph...</text>
+      </box>
+    );
+  }
+
+  if (!entity && !knowledgeSearchResult) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Search or select a result to explore the knowledge graph</text>
+      </box>
+    );
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Entity detail */}
+      {entity && (
+        <>
+          <box height={1} width="100%">
+            <text>--- Entity Detail ---</text>
+          </box>
+          {Object.entries(entity).map(([key, value]) => (
+            <box key={key} height={1} width="100%">
+              <text>{`  ${key}: ${truncateValue(value, 60)}`}</text>
+            </box>
+          ))}
+        </>
+      )}
+
+      {/* Neighbors */}
+      {neighbors.length > 0 && (
+        <>
+          <box height={1} width="100%" marginTop={1}>
+            <text>{`--- Neighbors (${neighbors.length}) ---`}</text>
+          </box>
+          {neighbors.map((n, i) => {
+            const entitySummary = formatEntityDict(n.entity);
+            const pathStr = n.path.join(" -> ");
+            return (
+              <box key={i} height={1} width="100%">
+                <text>{`  [depth=${n.depth}] ${truncateValue(entitySummary, 50)}  path: ${pathStr}`}</text>
+              </box>
+            );
+          })}
+        </>
+      )}
+
+      {/* Knowledge search result (single entity) */}
+      {!entity && knowledgeSearchResult && (
+        <>
+          <box height={1} width="100%">
+            <text>--- Graph Search Result ---</text>
+          </box>
+          {Object.entries(knowledgeSearchResult).map(([key, value]) => (
+            <box key={key} height={1} width="100%">
+              <text>{`  ${key}: ${truncateValue(value, 60)}`}</text>
+            </box>
+          ))}
+        </>
+      )}
+    </scrollbox>
+  );
+}

package/src/panels/search/memory-list.tsx

@@ -0,0 +1,197 @@
+/**
+ * Memory list: displays memory dicts from search results.
+ *
+ * When a memory has version history loaded, an expanded section
+ * appears below that memory row showing each version.
+ */
+
+import React from "react";
+import type { Memory, MemoryHistory, MemoryDiff } from "../../stores/search-store.js";
+import { truncateText } from "../../shared/utils/format-text.js";
+
+interface MemoryListProps {
+  readonly memories: readonly Memory[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+  readonly memoryHistory: MemoryHistory | null;
+  readonly memoryHistoryLoading: boolean;
+  readonly memoryDiff: MemoryDiff | null;
+  readonly memoryDiffLoading: boolean;
+}
+
+function shortId(id: unknown): string {
+  const str = String(id ?? "");
+  if (str.length <= 12) return str;
+  return `${str.slice(0, 8)}..`;
+}
+
+function getMemoryField(memory: Memory, field: string): unknown {
+  return (memory as Record<string, unknown>)[field];
+}
+
+function formatTimestamp(ts: string): string {
+  if (!ts) return "";
+  // Show date and time, truncated for terminal width
+  return ts.slice(0, 19).replace("T", " ");
+}
+
+function VersionHistorySection({
+  history,
+  historyLoading,
+}: {
+  readonly history: MemoryHistory | null;
+  readonly historyLoading: boolean;
+}): React.ReactNode {
+  if (historyLoading) {
+    return (
+      <box height={1} width="100%" marginLeft={4}>
+        <text>{"Loading version history..."}</text>
+      </box>
+    );
+  }
+
+  if (!history) return null;
+
+  return (
+    <box width="100%" flexDirection="column" marginLeft={4}>
+      <box height={1} width="100%">
+        <text>{`Version History (current: v${history.current_version})`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"    VER  STATUS      CREATED AT"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"    ---  ----------  -------------------"}</text>
+      </box>
+      {history.versions.map((v) => {
+        const isCurrent = v.version === history.current_version;
+        const marker = isCurrent ? " *" : "  ";
+        const ver = String(v.version).padStart(3);
+        const status = v.status.padEnd(10);
+        const created = formatTimestamp(v.created_at);
+
+        return (
+          <box key={v.version} height={1} width="100%">
+            <text>{`  ${marker}${ver}  ${status}  ${created}`}</text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}
+
+function DiffSection({
+  diff,
+  diffLoading,
+}: {
+  readonly diff: MemoryDiff | null;
+  readonly diffLoading: boolean;
+}): React.ReactNode {
+  if (diffLoading) {
+    return (
+      <box height={1} width="100%" marginLeft={4}>
+        <text>{"Loading diff..."}</text>
+      </box>
+    );
+  }
+
+  if (!diff) return null;
+
+  const lines = diff.diff.split("\n");
+
+  return (
+    <box width="100%" flexDirection="column" marginLeft={4}>
+      <box height={1} width="100%">
+        <text>{`Diff v${diff.v1} -> v${diff.v2} (${diff.mode})`}</text>
+      </box>
+      {lines.map((line, i) => (
+        <box key={i} height={1} width="100%">
+          <text>{`    ${line}`}</text>
+        </box>
+      ))}
+    </box>
+  );
+}
+
+export function MemoryList({
+  memories,
+  selectedIndex,
+  loading,
+  memoryHistory,
+  memoryHistoryLoading,
+  memoryDiff,
+  memoryDiffLoading,
+}: MemoryListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading memories...</text>
+      </box>
+    );
+  }
+
+  if (memories.length === 0) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No memories found</text>
+      </box>
+    );
+  }
+
+  // Determine which memory has history expanded (matches memoryHistory.memory_id)
+  const expandedMemoryId = memoryHistory?.memory_id ?? null;
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{`Memories: ${memories.length}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ID            TYPE       CONTENT"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ------------  ---------  ------------------------------------------------"}</text>
+      </box>
+
+      {/* Rows */}
+      <scrollbox flexGrow={1} width="100%">
+        {memories.map((m, i) => {
+          const isSelected = i === selectedIndex;
+          const memId = String(getMemoryField(m, "memory_id") ?? "");
+          const hasHistory = memId === expandedMemoryId;
+          const historyIndicator = hasHistory ? " [H]" : "";
+          const prefix = isSelected ? "> " : "  ";
+          const memoryIdDisplay = shortId(getMemoryField(m, "memory_id")).padEnd(12);
+          const memType = String(getMemoryField(m, "type") ?? "unknown").padEnd(9);
+          const content = truncateText(
+            String(getMemoryField(m, "content") ?? JSON.stringify(m)),
+            44,
+          );
+
+          return (
+            <React.Fragment key={i}>
+              <box height={1} width="100%">
+                <text>
+                  {`${prefix}${memoryIdDisplay}  ${memType}  ${content}${historyIndicator}`}
+                </text>
+              </box>
+              {isSelected && (hasHistory || memoryHistoryLoading) && (
+                <VersionHistorySection
+                  history={memoryHistory}
+                  historyLoading={memoryHistoryLoading}
+                />
+              )}
+              {isSelected && (memoryDiff !== null || memoryDiffLoading) && (
+                <DiffSection
+                  diff={memoryDiff}
+                  diffLoading={memoryDiffLoading}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </scrollbox>
+    </box>
+  );
+}

package/src/panels/search/playbook-list.tsx

@@ -0,0 +1,77 @@
+/**
+ * Playbook list: displays playbook records with name, scope, tags, usage, and success rate.
+ */
+
+import React from "react";
+import type { PlaybookRecord } from "../../stores/search-store.js";
+import { truncateText } from "../../shared/utils/format-text.js";
+
+interface PlaybookListProps {
+  readonly playbooks: readonly PlaybookRecord[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function formatRate(rate: number | null): string {
+  if (rate === null || rate === undefined) return "-";
+  return `${(rate * 100).toFixed(0)}%`;
+}
+
+export function PlaybookList({
+  playbooks,
+  selectedIndex,
+  loading,
+}: PlaybookListProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Loading playbooks...</text>
+      </box>
+    );
+  }
+
+  if (playbooks.length === 0) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>No playbooks found</text>
+      </box>
+    );
+  }
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{`Playbooks: ${playbooks.length}`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  NAME                          SCOPE      VIS     VER  USED  RATE"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  ----------------------------  ---------  ------  ---  ----  ----"}</text>
+      </box>
+
+      {/* Rows */}
+      <scrollbox flexGrow={1} width="100%">
+        {playbooks.map((p, i) => {
+          const isSelected = i === selectedIndex;
+          const prefix = isSelected ? "> " : "  ";
+          const name = truncateText(p.name, 28).padEnd(28);
+          const scope = truncateText(p.scope, 9).padEnd(9);
+          const vis = truncateText(p.visibility, 6).padEnd(6);
+          const ver = String(p.version).padEnd(3);
+          const used = String(p.usage_count).padEnd(4);
+          const rate = formatRate(p.success_rate);
+
+          return (
+            <box key={p.playbook_id} height={1} width="100%">
+              <text>
+                {`${prefix}${name}  ${scope}  ${vis}  ${ver}  ${used}  ${rate}`}
+              </text>
+            </box>
+          );
+        })}
+      </scrollbox>
+    </box>
+  );
+}