@nexus-ai-fs/tui 0.9.18

package/src/panels/events/locks-tab.tsx

@@ -0,0 +1,103 @@
+/**
+ * Locks tab: distributed lock list with acquire/release/extend actions.
+ *
+ * Extracted from events-panel.tsx (Issue 2A).
+ */
+
+import React, { useEffect } from "react";
+import { useInfraStore } from "../../stores/infra-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useConfirmStore } from "../../shared/hooks/use-confirm.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { LockList } from "./lock-list.js";
+
+interface LocksTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function LocksTab({ tabBindings, overlayActive }: LocksTabProps): React.ReactNode {
+  const client = useApi();
+  const confirm = useConfirmStore((s) => s.confirm);
+
+  const locks = useInfraStore((s) => s.locks);
+  const locksLoading = useInfraStore((s) => s.locksLoading);
+  const selectedLockIndex = useInfraStore((s) => s.selectedLockIndex);
+  const setSelectedLockIndex = useInfraStore((s) => s.setSelectedLockIndex);
+  const fetchLocks = useInfraStore((s) => s.fetchLocks);
+  const acquireLock = useInfraStore((s) => s.acquireLock);
+  const releaseLock = useInfraStore((s) => s.releaseLock);
+  const extendLock = useInfraStore((s) => s.extendLock);
+
+  useEffect(() => {
+    if (client) fetchLocks(client);
+  }, [client, fetchLocks]);
+
+  const acquireInput = useTextInput({
+    onSubmit: (val) => {
+      if (val && client) acquireLock(val, "mutex", 60, client);
+    },
+  });
+
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedLockIndex,
+    setIndex: (i) => setSelectedLockIndex(i),
+    getLength: () => locks.length,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : acquireInput.active
+      ? acquireInput.inputBindings
+      : {
+          ...listNav,
+          ...tabBindings,
+          n: () => acquireInput.activate(""),
+          d: async () => {
+            if (client) {
+              const lock = locks[selectedLockIndex];
+              if (lock) {
+                const ok = await confirm("Release lock?", "Release this lock. Other waiters may acquire it.");
+                if (!ok) return;
+                releaseLock(lock.resource, lock.lock_id, client);
+              }
+            }
+          },
+          e: () => {
+            if (client) {
+              const lock = locks[selectedLockIndex];
+              if (lock) extendLock(lock.resource, lock.lock_id, 60, client);
+            }
+          },
+          r: () => { if (client) fetchLocks(client); },
+        },
+    overlayActive ? undefined : acquireInput.active ? acquireInput.onUnhandled : undefined,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {acquireInput.active && (
+        <box height={1} width="100%">
+          <text>{`Acquire lock path: ${acquireInput.buffer}\u2588`}</text>
+        </box>
+      )}
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <LockList
+          locks={locks}
+          selectedIndex={selectedLockIndex}
+          loading={locksLoading}
+        />
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {acquireInput.active
+            ? "Type path, Enter:acquire, Escape:cancel"
+            : "j/k:navigate  n:acquire  d:release  e:extend  r:refresh  Tab:switch tab"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/events/mcl-replay.tsx

@@ -0,0 +1,77 @@
+/**
+ * MCL (Metadata Change Log) replay sub-view.
+ * Shows structured change log entries from the operation log.
+ * Supports client-side filtering by entity URN and aspect name.
+ * Issue #2930.
+ */
+
+import React, { useEffect } from "react";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+
+export interface MclReplayProps {
+  /** Optional URN filter string (substring match). */
+  readonly urnFilter?: string;
+  /** Optional aspect name filter string (substring match). */
+  readonly aspectFilter?: string;
+}
+
+export function MclReplay(props: MclReplayProps): React.ReactNode {
+  const client = useApi();
+  const entries = useKnowledgeStore((s) => s.replayEntries);
+  const loading = useKnowledgeStore((s) => s.replayLoading);
+  const hasMore = useKnowledgeStore((s) => s.replayHasMore);
+  const fetchReplay = useKnowledgeStore((s) => s.fetchReplay);
+  const clearReplay = useKnowledgeStore((s) => s.clearReplay);
+  const error = useKnowledgeStore((s) => s.error);
+
+  const urnFilter = props.urnFilter ?? "";
+  const aspectFilter = props.aspectFilter ?? "";
+
+  // Re-fetch from server when filters change (or on initial mount)
+  useEffect(() => {
+    if (client) {
+      clearReplay();
+      void fetchReplay(client, 0, 200, urnFilter || undefined, aspectFilter || undefined);
+    }
+  }, [client, urnFilter, aspectFilter, fetchReplay, clearReplay]);
+
+  // Apply filters client-side
+  const filtered = entries.filter((e) => {
+    if (urnFilter && !e.entityUrn.includes(urnFilter)) return false;
+    if (aspectFilter && !e.aspectName.includes(aspectFilter)) return false;
+    return true;
+  });
+
+  if (loading && entries.length === 0) {
+    return <text>Loading MCL entries...</text>;
+  }
+
+  if (error) {
+    return <text>{`Error: ${error}`}</text>;
+  }
+
+  if (entries.length === 0) {
+    return <text>No MCL records found</text>;
+  }
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      {/* Filter bar */}
+      <box height={1} width="100%">
+        <text>
+          {`  Filters: URN=${urnFilter || "*"}  Aspect=${aspectFilter || "*"}  (${filtered.length}/${entries.length} shown)`}
+        </text>
+      </box>
+      <text>
+        {"  Seq  Change       Aspect               Entity URN"}
+      </text>
+      {filtered.slice(0, 100).map((e) => (
+        <text key={e.sequenceNumber}>
+          {`  ${String(e.sequenceNumber).padStart(5)}  ${e.changeType.padEnd(12)} ${e.aspectName.padEnd(20)} ${e.entityUrn}`}
+        </text>
+      ))}
+      {hasMore && <text>{"  ... more records available"}</text>}
+    </box>
+  );
+}

package/src/panels/events/mcl-tab.tsx

@@ -0,0 +1,83 @@
+/**
+ * MCL (MetaCatalog Language) replay tab with URN/aspect filtering.
+ *
+ * Extracted from events-panel.tsx (Issue 2A).
+ */
+
+import React, { useState, useEffect } from "react";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import { MclReplay } from "./mcl-replay.js";
+
+interface MclTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function MclTab({ tabBindings, overlayActive }: MclTabProps): React.ReactNode {
+  const client = useApi();
+  const [urnFilter, setUrnFilter] = useState("");
+  const [aspectFilter, setAspectFilter] = useState("");
+
+  const fetchReplay = useKnowledgeStore((s) => s.fetchReplay);
+  const clearReplay = useKnowledgeStore((s) => s.clearReplay);
+
+  useEffect(() => {
+    if (client) void fetchReplay(client, 0, 50);
+  }, [client, fetchReplay]);
+
+  const urnInput = useTextInput({
+    onSubmit: (val) => setUrnFilter(val),
+  });
+  const aspectInput = useTextInput({
+    onSubmit: (val) => setAspectFilter(val),
+  });
+  const anyInputActive = urnInput.active || aspectInput.active;
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : anyInputActive
+      ? (urnInput.active ? urnInput.inputBindings : aspectInput.inputBindings)
+      : {
+          ...tabBindings,
+          u: () => urnInput.activate(urnFilter),
+          n: () => aspectInput.activate(aspectFilter),
+          r: () => {
+            if (client) {
+              clearReplay();
+              void fetchReplay(client, 0, 50);
+            }
+          },
+        },
+    overlayActive ? undefined : anyInputActive
+      ? (urnInput.active ? urnInput.onUnhandled : aspectInput.onUnhandled)
+      : undefined,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>
+          {urnInput.active
+            ? `Filter URN: ${urnInput.buffer}\u2588`
+            : aspectInput.active
+              ? `Filter aspect: ${aspectInput.buffer}\u2588`
+              : `Filter: URN=${urnFilter || "*"} aspect=${aspectFilter || "*"}`}
+        </text>
+      </box>
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <MclReplay urnFilter={urnFilter} aspectFilter={aspectFilter} />
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {anyInputActive
+            ? "Type value, Enter:apply, Escape:cancel"
+            : "u:filter URN  n:filter aspect  r:refresh  Tab:switch tab"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/events/operations-tab-wrapper.tsx

@@ -0,0 +1,62 @@
+/**
+ * Operations tab wrapper: adds keybindings around OperationsTab render.
+ *
+ * Extracted from events-panel.tsx (Issue 2A).
+ */
+
+import React, { useEffect } from "react";
+import { useInfraStore } from "../../stores/infra-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 { OperationsTab } from "./operations-tab.js";
+
+interface OperationsTabWrapperProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function OperationsTabWrapper({ tabBindings, overlayActive }: OperationsTabWrapperProps): React.ReactNode {
+  const client = useApi();
+
+  const operations = useInfraStore((s) => s.operations);
+  const operationsLoading = useInfraStore((s) => s.operationsLoading);
+  const selectedOperationIndex = useInfraStore((s) => s.selectedOperationIndex);
+  const setSelectedOperationIndex = useInfraStore((s) => s.setSelectedOperationIndex);
+  const fetchOperations = useInfraStore((s) => s.fetchOperations);
+
+  useEffect(() => {
+    if (client) fetchOperations(client);
+  }, [client, fetchOperations]);
+
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedOperationIndex,
+    setIndex: (i) => setSelectedOperationIndex(i),
+    getLength: () => operations.length,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : {
+          ...listNav,
+          ...tabBindings,
+          r: () => { if (client) fetchOperations(client); },
+        },
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <OperationsTab
+          operations={operations}
+          selectedIndex={selectedOperationIndex}
+          loading={operationsLoading}
+        />
+      </box>
+      <box height={1} width="100%">
+        <text>{"j/k:navigate  r:refresh  Tab:switch tab"}</text>
+      </box>
+    </box>
+  );
+}

package/src/panels/events/operations-tab.tsx

@@ -0,0 +1,41 @@
+/**
+ * Operations tab: simple list of operations.
+ *
+ * Displays operation_id, agent_id, type, status, and started_at.
+ */
+
+import React from "react";
+import type { OperationItem } from "../../stores/infra-store.js";
+
+interface OperationsTabProps {
+  readonly operations: readonly OperationItem[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+export function OperationsTab({ operations, selectedIndex, loading }: OperationsTabProps): React.ReactNode {
+  if (loading) return <text>Loading operations...</text>;
+  if (operations.length === 0) return <text>No operations found.</text>;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  OPERATION_ID       AGENT_ID         TYPE        STATUS      STARTED"}</text>
+      </box>
+
+      {operations.map((op, i) => {
+        const isSelected = i === selectedIndex;
+        const prefix = isSelected ? "> " : "  ";
+        const opShort = op.operation_id.slice(0, 16) + "...";
+        const agentShort = op.agent_id ? op.agent_id.slice(0, 14) : "n/a";
+        const started = op.started_at ? op.started_at.slice(0, 19) : "n/a";
+        return (
+          <box key={op.operation_id} height={1} width="100%">
+            <text>{`${prefix}${opShort}  ${agentShort.padEnd(16)}  ${op.type.padEnd(10)}  ${op.status.padEnd(10)}  ${started}`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/events/replay-tab.tsx

@@ -0,0 +1,76 @@
+/**
+ * Event replay tab with event type filtering.
+ *
+ * Extracted from events-panel.tsx (Issue 2A).
+ */
+
+import React, { useState, useEffect } from "react";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import { EventReplay } from "./event-replay.js";
+
+interface ReplayTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function ReplayTab({ tabBindings, overlayActive }: ReplayTabProps): React.ReactNode {
+  const client = useApi();
+  const [typeFilter, setTypeFilter] = useState("");
+
+  const fetchEventReplay = useKnowledgeStore((s) => s.fetchEventReplay);
+  const clearEventReplay = useKnowledgeStore((s) => s.clearEventReplay);
+
+  useEffect(() => {
+    if (client) void fetchEventReplay({}, client);
+  }, [client, fetchEventReplay]);
+
+  const filterInput = useTextInput({
+    onSubmit: (val) => {
+      setTypeFilter(val);
+      if (client) void fetchEventReplay({ event_types: val || undefined }, client);
+    },
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : filterInput.active
+      ? filterInput.inputBindings
+      : {
+          ...tabBindings,
+          f: () => filterInput.activate(typeFilter),
+          r: () => {
+            if (client) {
+              clearEventReplay();
+              void fetchEventReplay({ event_types: typeFilter || undefined }, client);
+            }
+          },
+        },
+    overlayActive ? undefined : filterInput.active ? filterInput.onUnhandled : undefined,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>
+          {filterInput.active
+            ? `Filter event type: ${filterInput.buffer}\u2588`
+            : `Filter: event_type=${typeFilter || "*"}`}
+        </text>
+      </box>
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <EventReplay typeFilter={typeFilter} />
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {filterInput.active
+            ? "Type value, Enter:apply, Escape:cancel"
+            : "f:filter event type  r:refresh  Tab:switch tab"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/events/secrets-audit.tsx

@@ -0,0 +1,64 @@
+/**
+ * Secrets audit log view: shows audit trail of secret access and modifications.
+ */
+
+import React from "react";
+import type { SecretAuditEntry } from "../../stores/infra-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+import { textStyle } from "../../shared/text-style.js";
+import { formatTimestamp } from "../../shared/utils/format-time.js";
+
+export function SecretsAudit({
+  entries,
+  loading,
+  filter,
+}: {
+  readonly entries: readonly SecretAuditEntry[];
+  readonly loading: boolean;
+  readonly filter?: string;
+}): React.ReactNode {
+  if (loading) {
+    return <Spinner label="Loading secrets audit..." />;
+  }
+
+  if (entries.length === 0) {
+    return <text>No audit entries</text>;
+  }
+
+  const needle = (filter ?? "").toLowerCase();
+  const filtered = needle
+    ? entries.filter((e) => {
+        const haystack = `${e.event_type} ${e.actor_id} ${e.details ?? ""}`.toLowerCase();
+        return haystack.includes(needle);
+      })
+    : entries;
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Count indicator */}
+      {needle ? (
+        <box height={1} width="100%">
+          <text style={textStyle({ dim: true })}>{`${filtered.length} of ${entries.length} entries`}</text>
+        </box>
+      ) : null}
+
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  Event Type     Actor                Zone                 Time"}</text>
+      </box>
+
+      {filtered.map((entry) => {
+        const eventType = entry.event_type.padEnd(14).slice(0, 14);
+        const actor = entry.actor_id.padEnd(20).slice(0, 20);
+        const zone = entry.zone_id.padEnd(20).slice(0, 20);
+        const time = formatTimestamp(entry.created_at);
+
+        return (
+          <box key={entry.id} height={1} width="100%">
+            <text>{`  ${eventType} ${actor} ${zone} ${time}`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}

package/src/panels/events/secrets-tab.tsx

@@ -0,0 +1,75 @@
+/**
+ * Secrets audit tab: secrets access log with filtering.
+ *
+ * Extracted from events-panel.tsx (Issue 2A).
+ */
+
+import React, { useState, useEffect } from "react";
+import { useInfraStore } from "../../stores/infra-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { SecretsAudit } from "./secrets-audit.js";
+
+interface SecretsTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function SecretsTab({ tabBindings, overlayActive }: SecretsTabProps): React.ReactNode {
+  const client = useApi();
+  const [secretsFilter, setSecretsFilter] = useState("");
+
+  const secretAuditEntries = useInfraStore((s) => s.secretAuditEntries);
+  const secretsLoading = useInfraStore((s) => s.secretsLoading);
+  const fetchSecretAudit = useInfraStore((s) => s.fetchSecretAudit);
+
+  useEffect(() => {
+    if (client) fetchSecretAudit(client);
+  }, [client, fetchSecretAudit]);
+
+  const filterInput = useTextInput({
+    onSubmit: (val) => setSecretsFilter(val),
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : filterInput.active
+      ? filterInput.inputBindings
+      : {
+          ...tabBindings,
+          "/": () => filterInput.activate(secretsFilter),
+          r: () => { if (client) fetchSecretAudit(client); },
+        },
+    overlayActive ? undefined : filterInput.active ? filterInput.onUnhandled : undefined,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box height={1} width="100%">
+        <text>
+          {filterInput.active
+            ? `Filter: ${filterInput.buffer}\u2588`
+            : secretsFilter
+              ? `Filter: ${secretsFilter}`
+              : ""}
+        </text>
+      </box>
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <SecretsAudit
+          entries={secretAuditEntries}
+          loading={secretsLoading}
+          filter={secretsFilter}
+        />
+      </box>
+      <box height={1} width="100%">
+        <text>
+          {filterInput.active
+            ? "Type filter, Enter:apply, Escape:cancel"
+            : "/:filter  r:refresh  Tab:switch tab"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/events/subscription-list.tsx

@@ -0,0 +1,54 @@
+/**
+ * Subscription list view: shows event subscriptions with status and trigger info.
+ */
+
+import React from "react";
+import type { Subscription } from "../../stores/infra-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+
+const STATUS_BADGE: Record<string, string> = {
+  active: "[ON]",
+  paused: "[||]",
+  failed: "[!!]",
+};
+
+export function SubscriptionList({
+  subscriptions,
+  selectedIndex,
+  loading,
+}: {
+  readonly subscriptions: readonly Subscription[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}): React.ReactNode {
+  if (loading) {
+    return <Spinner label="Loading subscriptions..." />;
+  }
+
+  if (subscriptions.length === 0) {
+    return <text>No subscriptions configured</text>;
+  }
+
+  return (
+    <scrollbox height="100%" width="100%">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  Status  Event Type           Endpoint                  Triggers"}</text>
+      </box>
+
+      {subscriptions.map((sub, i) => {
+        const prefix = i === selectedIndex ? "> " : "  ";
+        const badge = STATUS_BADGE[sub.status] ?? "[??]";
+        const eventType = sub.event_type.padEnd(20).slice(0, 20);
+        const endpoint = sub.endpoint.padEnd(25).slice(0, 25);
+        const triggers = String(sub.trigger_count).padStart(8);
+
+        return (
+          <box key={sub.subscription_id} height={1} width="100%">
+            <text>{`${prefix}${badge}  ${eventType} ${endpoint} ${triggers}`}</text>
+          </box>
+        );
+      })}
+    </scrollbox>
+  );
+}