@nexus-ai-fs/tui 0.9.18

package/src/panels/events/connector-detail.tsx

@@ -0,0 +1,49 @@
+/**
+ * Connector capabilities detail view.
+ *
+ * Shown when Enter is pressed on a selected connector.
+ * Fetches and displays capabilities from GET /api/v2/connectors/{name}/capabilities.
+ */
+
+import React from "react";
+import { Spinner } from "../../shared/components/spinner.js";
+
+export interface ConnectorDetailProps {
+  readonly connectorName: string;
+  readonly capabilities: unknown | null;
+  readonly loading: boolean;
+}
+
+export function ConnectorDetail({
+  connectorName,
+  capabilities,
+  loading,
+}: ConnectorDetailProps): React.ReactNode {
+  if (loading) {
+    return <Spinner label={`Loading capabilities for ${connectorName}...`} />;
+  }
+
+  if (capabilities === null || capabilities === undefined) {
+    return <text>{`No capabilities data for ${connectorName}`}</text>;
+  }
+
+  // Render capabilities as formatted JSON lines (truncated to prevent huge renders)
+  const json = JSON.stringify(capabilities, null, 2);
+  const display = json.length > 5000 ? json.slice(0, 5000) + "\n... (truncated)" : json;
+  const lines = display.split("\n");
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      <box height={1} width="100%">
+        <text>{`Capabilities: ${connectorName}`}</text>
+      </box>
+      <scrollbox flexGrow={1} width="100%">
+        {lines.map((line, i) => (
+          <box key={i} height={1} width="100%">
+            <text>{`  ${line}`}</text>
+          </box>
+        ))}
+      </scrollbox>
+    </box>
+  );
+}

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

@@ -0,0 +1,73 @@
+/**
+ * Connector list view: shows registered connectors with status and capabilities.
+ */
+
+import React, { useCallback } from "react";
+import type { Connector } from "../../stores/infra-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { VirtualList } from "../../shared/components/virtual-list.js";
+
+const VIEWPORT_HEIGHT = 20;
+
+const STATUS_ICON: Record<string, string> = {
+  active: "●",
+  inactive: "○",
+  error: "✗",
+};
+
+export function ConnectorList({
+  connectors,
+  selectedIndex,
+  loading,
+}: {
+  readonly connectors: readonly Connector[];
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}): React.ReactNode {
+  if (loading) {
+    return <Spinner label="Loading connectors..." />;
+  }
+
+  if (connectors.length === 0) {
+    return (
+      <EmptyState
+        message="No connectors registered."
+        hint="Register a connector via the API: POST /api/v2/connectors"
+      />
+    );
+  }
+
+  const renderConnector = useCallback(
+    (conn: Connector, i: number) => {
+      const prefix = i === selectedIndex ? "> " : "  ";
+      const icon = STATUS_ICON[conn.status] ?? "?";
+      const name = conn.name.padEnd(20).slice(0, 20);
+      const type = conn.type.padEnd(13).slice(0, 13);
+      const caps = conn.capabilities.join(", ");
+
+      return (
+        <box key={conn.connector_id} height={1} width="100%">
+          <text>{`${prefix}${icon}  ${name} ${type} ${caps}`}</text>
+        </box>
+      );
+    },
+    [selectedIndex],
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  St  Name                 Type          Capabilities"}</text>
+      </box>
+
+      <VirtualList
+        items={connectors}
+        renderItem={renderConnector}
+        viewportHeight={VIEWPORT_HEIGHT}
+        selectedIndex={selectedIndex}
+      />
+    </box>
+  );
+}

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

@@ -0,0 +1,92 @@
+/**
+ * Connectors tab: list view with detail expansion.
+ *
+ * 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 { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { ConnectorList } from "./connector-list.js";
+import { ConnectorDetail } from "./connector-detail.js";
+
+const HELP_LIST = "j/k:navigate  Enter:capabilities  r:refresh  Tab:switch tab";
+const HELP_DETAIL = "Escape:back  r:refresh  Tab:switch tab";
+
+interface ConnectorsTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function ConnectorsTab({ tabBindings, overlayActive }: ConnectorsTabProps): React.ReactNode {
+  const client = useApi();
+  const [detailView, setDetailView] = useState(false);
+
+  const connectors = useInfraStore((s) => s.connectors);
+  const connectorsLoading = useInfraStore((s) => s.connectorsLoading);
+  const selectedConnectorIndex = useInfraStore((s) => s.selectedConnectorIndex);
+  const setSelectedConnectorIndex = useInfraStore((s) => s.setSelectedConnectorIndex);
+  const connectorCapabilities = useInfraStore((s) => s.connectorCapabilities);
+  const capabilitiesLoading = useInfraStore((s) => s.capabilitiesLoading);
+  const fetchConnectors = useInfraStore((s) => s.fetchConnectors);
+  const fetchConnectorCapabilities = useInfraStore((s) => s.fetchConnectorCapabilities);
+
+  useEffect(() => {
+    if (client) { fetchConnectors(client); setDetailView(false); }
+  }, [client, fetchConnectors]);
+
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedConnectorIndex,
+    setIndex: (i) => setSelectedConnectorIndex(i),
+    getLength: () => connectors.length,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : {
+          ...listNav,
+          ...tabBindings,
+          return: () => {
+            if (client) {
+              const conn = connectors[selectedConnectorIndex];
+              if (conn) {
+                void fetchConnectorCapabilities(conn.name, client);
+                setDetailView(true);
+              }
+            }
+          },
+          escape: () => {
+            if (detailView) setDetailView(false);
+          },
+          r: () => {
+            if (client) { fetchConnectors(client); setDetailView(false); }
+          },
+        },
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box flexGrow={1} width="100%" borderStyle="single">
+        {detailView && connectors[selectedConnectorIndex] ? (
+          <ConnectorDetail
+            connectorName={connectors[selectedConnectorIndex]!.name}
+            capabilities={connectorCapabilities}
+            loading={capabilitiesLoading}
+          />
+        ) : (
+          <ConnectorList
+            connectors={connectors}
+            selectedIndex={selectedConnectorIndex}
+            loading={connectorsLoading}
+          />
+        )}
+      </box>
+      <box height={1} width="100%">
+        <text>{detailView ? HELP_DETAIL : HELP_LIST}</text>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,80 @@
+/**
+ * Historical event replay sub-view.
+ *
+ * Shows events from GET /api/v2/events/replay with filtering by
+ * event type, path pattern, agent ID, and since timestamp.
+ */
+
+import React from "react";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import type { EventReplayEntry } from "../../stores/knowledge-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { textStyle } from "../../shared/text-style.js";
+import { formatTimestamp } from "../../shared/utils/format-time.js";
+
+export interface EventReplayProps {
+  /** Optional event type filter (substring match, client-side). */
+  readonly typeFilter?: string;
+}
+
+export function EventReplay({ typeFilter }: EventReplayProps): React.ReactNode {
+  const entries = useKnowledgeStore((s) => s.eventReplayEntries);
+  const loading = useKnowledgeStore((s) => s.eventReplayLoading);
+  const hasMore = useKnowledgeStore((s) => s.eventReplayHasMore);
+  const error = useKnowledgeStore((s) => s.error);
+
+  const needle = (typeFilter ?? "").toLowerCase();
+  const filtered: readonly EventReplayEntry[] = needle
+    ? entries.filter((e) => e.event_type.toLowerCase().includes(needle))
+    : entries;
+
+  if (loading && entries.length === 0) {
+    return <Spinner label="Loading event replay..." />;
+  }
+
+  if (error) {
+    return <text>{`Error: ${error}`}</text>;
+  }
+
+  if (entries.length === 0) {
+    return (
+      <EmptyState
+        message="No historical events found."
+        hint="Adjust filters or wait for events to be recorded."
+      />
+    );
+  }
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      {/* Summary */}
+      <box height={1} width="100%">
+        <text style={textStyle({ dim: true })}>
+          {`  ${filtered.length} event${filtered.length !== 1 ? "s" : ""}${needle ? ` matching "${typeFilter}"` : ""}`}
+        </text>
+      </box>
+
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{"  Event Type         Agent            Path                          Time"}</text>
+      </box>
+
+      {/* Rows */}
+      <scrollbox flexGrow={1} width="100%">
+        {filtered.slice(0, 200).map((e) => {
+          const eventType = e.event_type.padEnd(20).slice(0, 20);
+          const agent = (e.agent_id ?? "—").padEnd(16).slice(0, 16);
+          const path = (e.path ?? "—").padEnd(30).slice(0, 30);
+          const time = formatTimestamp(e.timestamp);
+          return (
+            <box key={e.event_id} height={1} width="100%">
+              <text>{`  ${eventType} ${agent} ${path} ${time}`}</text>
+            </box>
+          );
+        })}
+        {hasMore && <text style={textStyle({ dim: true })}>{"  ... more events available"}</text>}
+      </scrollbox>
+    </box>
+  );
+}