@nexus-ai-fs/tui 0.9.18

package/src/shared/components/help-overlay.tsx

@@ -0,0 +1,99 @@
+/**
+ * Full-screen keybinding reference overlay.
+ *
+ * Activated with `?` key. Shows all keybindings for the current panel
+ * plus global bindings. Press any key to dismiss.
+ *
+ * @see Issue #3066, Phase E9
+ */
+
+import React from "react";
+import { useKeyboard } from "../hooks/use-keyboard.js";
+import { statusColor } from "../theme.js";
+import { textStyle } from "../text-style.js";
+import type { PanelId } from "../../stores/global-store.js";
+import {
+  type KeyBinding,
+  GLOBAL_BINDINGS,
+  NAV_BINDINGS,
+  PANEL_BINDINGS,
+} from "../action-registry.js";
+
+interface HelpOverlayProps {
+  readonly visible: boolean;
+  readonly panel: PanelId;
+  readonly onDismiss: () => void;
+}
+
+export function HelpOverlay({
+  visible,
+  panel,
+  onDismiss,
+}: HelpOverlayProps): React.ReactNode {
+  useKeyboard(
+    visible
+      ? {
+          escape: onDismiss,
+          "?": onDismiss,
+          // Dismiss on any other key via onUnhandled
+        }
+      : {},
+    visible ? () => onDismiss() : undefined,
+  );
+
+  if (!visible) return null;
+
+  const panelBindings = PANEL_BINDINGS[panel] ?? [];
+
+  return (
+    <box
+      height="100%"
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box
+        flexDirection="column"
+        borderStyle="double"
+        width={60}
+        padding={1}
+      >
+        <text style={textStyle({ bold: true })}>Keybinding Reference</text>
+        <text>{""}</text>
+
+        <text style={textStyle({ fg: statusColor.info, bold: true })}>{"─── Global ───"}</text>
+        {GLOBAL_BINDINGS.map((b) => (
+          <text key={b.key}>
+            <span style={textStyle({ fg: statusColor.info })}>{`  ${b.key.padEnd(12)}`}</span>
+            <span>{b.action}</span>
+          </text>
+        ))}
+
+        <text>{""}</text>
+        <text style={textStyle({ fg: statusColor.info, bold: true })}>{"─── Navigation ───"}</text>
+        {NAV_BINDINGS.map((b) => (
+          <text key={b.key}>
+            <span style={textStyle({ fg: statusColor.info })}>{`  ${b.key.padEnd(12)}`}</span>
+            <span>{b.action}</span>
+          </text>
+        ))}
+
+        {panelBindings.length > 0 && (
+          <>
+            <text>{""}</text>
+            <text style={textStyle({ fg: statusColor.info, bold: true })}>{`─── ${panel} ───`}</text>
+            {panelBindings.map((b) => (
+              <text key={b.key}>
+                <span style={textStyle({ fg: statusColor.info })}>{`  ${b.key.padEnd(12)}`}</span>
+                <span>{b.action}</span>
+              </text>
+            ))}
+          </>
+        )}
+
+        <text>{""}</text>
+        <text style={textStyle({ dim: true })}>Press any key to dismiss</text>
+      </box>
+    </box>
+  );
+}

package/src/shared/components/identity-switcher.tsx

@@ -0,0 +1,168 @@
+/**
+ * Overlay dialog for switching the active runtime identity.
+ *
+ * Activated via Ctrl+I from the main app. Provides three editable fields
+ * (Agent ID, Subject, Zone ID) pre-filled from the current config.
+ * Tab cycles fields, Enter confirms, Escape cancels.
+ *
+ * On confirm, calls setIdentity() then testConnection() to verify the
+ * new credentials against the server.
+ */
+
+import React, { useState, useCallback } from "react";
+import { useGlobalStore } from "../../stores/global-store.js";
+import { useKeyboard } from "../hooks/use-keyboard.js";
+
+interface IdentitySwitcherProps {
+  readonly visible: boolean;
+  readonly onClose: () => void;
+}
+
+type FieldName = "agentId" | "subject" | "zoneId";
+
+const FIELD_ORDER: readonly FieldName[] = ["agentId", "subject", "zoneId"];
+
+const FIELD_LABELS: Readonly<Record<FieldName, string>> = {
+  agentId: "Agent ID",
+  subject: "Subject",
+  zoneId: "Zone ID",
+};
+
+export function IdentitySwitcher({
+  visible,
+  onClose,
+}: IdentitySwitcherProps): React.ReactNode {
+  const config = useGlobalStore((s) => s.config);
+
+  const [activeField, setActiveField] = useState<FieldName>("agentId");
+  const [fields, setFields] = useState<Readonly<Record<FieldName, string>>>({
+    agentId: config.agentId ?? "",
+    subject: config.subject ?? "",
+    zoneId: config.zoneId ?? "",
+  });
+
+  // Reset fields to current config values when the dialog opens
+  const resetFields = useCallback(() => {
+    const currentConfig = useGlobalStore.getState().config;
+    setFields({
+      agentId: currentConfig.agentId ?? "",
+      subject: currentConfig.subject ?? "",
+      zoneId: currentConfig.zoneId ?? "",
+    });
+    setActiveField("agentId");
+  }, []);
+
+  const handleConfirm = useCallback(() => {
+    const store = useGlobalStore.getState();
+    // Pass all fields explicitly — empty string becomes undefined to clear the header
+    store.setIdentity({
+      agentId: fields.agentId.trim() || undefined,
+      subject: fields.subject.trim() || undefined,
+      zoneId: fields.zoneId.trim() || undefined,
+    });
+    store.testConnection();
+    onClose();
+  }, [fields, onClose]);
+
+  const handleCancel = useCallback(() => {
+    resetFields();
+    onClose();
+  }, [resetFields, onClose]);
+
+  const handleTab = useCallback(() => {
+    const currentIdx = FIELD_ORDER.indexOf(activeField);
+    const nextIdx = (currentIdx + 1) % FIELD_ORDER.length;
+    const nextField = FIELD_ORDER[nextIdx];
+    if (nextField) {
+      setActiveField(nextField);
+    }
+  }, [activeField]);
+
+  const handleBackspace = useCallback(() => {
+    setFields((prev) => ({
+      ...prev,
+      [activeField]: prev[activeField].slice(0, -1),
+    }));
+  }, [activeField]);
+
+  const handleUnhandledKey = useCallback(
+    (keyName: string) => {
+      if (!visible) return;
+      // Single printable character
+      if (keyName.length === 1) {
+        setFields((prev) => ({
+          ...prev,
+          [activeField]: prev[activeField] + keyName,
+        }));
+      } else if (keyName === "space") {
+        setFields((prev) => ({
+          ...prev,
+          [activeField]: prev[activeField] + " ",
+        }));
+      }
+    },
+    [visible, activeField],
+  );
+
+  useKeyboard(
+    visible
+      ? {
+          return: handleConfirm,
+          escape: handleCancel,
+          tab: handleTab,
+          backspace: handleBackspace,
+        }
+      : {},
+    visible ? handleUnhandledKey : undefined,
+  );
+
+  if (!visible) return null;
+
+  return (
+    <box
+      height="100%"
+      width="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box
+        flexDirection="column"
+        borderStyle="double"
+        width={60}
+        height={11}
+        padding={1}
+      >
+        <text>{"Switch Identity (Tab:next  Enter:confirm  Esc:cancel)"}</text>
+        <text>{""}</text>
+
+        {FIELD_ORDER.map((field) => {
+          const isActive = field === activeField;
+          const label = FIELD_LABELS[field];
+          const value = fields[field];
+          const cursor = isActive ? "\u2588" : "";
+          const prefix = isActive ? "\u25b8 " : "  ";
+          return (
+            <box key={field} height={1} width="100%">
+              <text>{`${prefix}${label}: ${value}${cursor}`}</text>
+            </box>
+          );
+        })}
+
+        <text>{""}</text>
+        <text>{"Current: " + formatCurrentIdentity(config)}</text>
+      </box>
+    </box>
+  );
+}
+
+function formatCurrentIdentity(config: {
+  readonly agentId?: string;
+  readonly subject?: string;
+  readonly zoneId?: string;
+}): string {
+  const parts: string[] = [];
+  if (config.agentId) parts.push(`agent:${config.agentId}`);
+  if (config.subject) parts.push(`sub:${config.subject}`);
+  if (config.zoneId) parts.push(`zone:${config.zoneId}`);
+  return parts.length > 0 ? parts.join(" | ") : "(none)";
+}

package/src/shared/components/loading-indicator.tsx

@@ -0,0 +1,40 @@
+/**
+ * Shared loading indicator with context message.
+ *
+ * Replaces all inline "loading..." text across panels with a consistent
+ * component that includes the existing Spinner animation.
+ *
+ * @see Issue #3066, Phase E5
+ */
+
+import React from "react";
+import { Spinner } from "./spinner.js";
+
+interface LoadingIndicatorProps {
+  /** Context message shown next to the spinner. Default: "Loading..." */
+  readonly message?: string;
+  /** Whether to center within parent. Default: true */
+  readonly centered?: boolean;
+}
+
+export function LoadingIndicator({
+  message = "Loading...",
+  centered = true,
+}: LoadingIndicatorProps): React.ReactNode {
+  const content = <Spinner label={message} />;
+
+  if (centered) {
+    return (
+      <box
+        height="100%"
+        width="100%"
+        justifyContent="center"
+        alignItems="center"
+      >
+        {content}
+      </box>
+    );
+  }
+
+  return content;
+}

package/src/shared/components/pagination-bar.tsx

@@ -0,0 +1,68 @@
+/**
+ * Shared pagination bar for lists with cursor-based or offset-based pagination.
+ *
+ * Shows current page position and provides prev/next hints.
+ *
+ * @see Issue #3066, Phase E4
+ */
+
+import React from "react";
+import { statusColor } from "../theme.js";
+import { textStyle } from "../text-style.js";
+
+interface PaginationBarProps {
+  /** Whether there are more items to load (next page available) */
+  readonly hasMore: boolean;
+  /** Whether there's a previous page */
+  readonly hasPrev: boolean;
+  /** Current page number (1-based) */
+  readonly currentPage: number;
+  /** Total pages if known, undefined for cursor-based pagination */
+  readonly totalPages?: number;
+  /** Key hint for next page. Default: "]" */
+  readonly nextKey?: string;
+  /** Key hint for previous page. Default: "[" */
+  readonly prevKey?: string;
+  /** Whether a page is currently loading */
+  readonly loading?: boolean;
+}
+
+/** Pure function for page display text — exported for testing. */
+export function formatPageDisplay(currentPage: number, hasMore: boolean, totalPages?: number): string {
+  return totalPages
+    ? `Page ${currentPage} of ${totalPages}`
+    : `Page ${currentPage}${hasMore ? "+" : ""}`;
+}
+
+export function PaginationBar({
+  hasMore,
+  hasPrev,
+  currentPage,
+  totalPages,
+  nextKey = "]",
+  prevKey = "[",
+  loading = false,
+}: PaginationBarProps): React.ReactNode {
+  const pageDisplay = formatPageDisplay(currentPage, hasMore, totalPages);
+
+  return (
+    <box height={1} width="100%" flexDirection="row">
+      <text style={textStyle({ dim: true })}>
+        {hasPrev && (
+          <span>
+            <span style={textStyle({ fg: statusColor.info })}>{prevKey}</span>
+            <span>{":prev "}</span>
+          </span>
+        )}
+        <span>{loading ? "Loading..." : pageDisplay}</span>
+        {hasMore && (
+          <span>
+            <span>{" "}</span>
+            <span style={textStyle({ fg: statusColor.info })}>{nextKey}</span>
+            <span>{":next"}</span>
+          </span>
+        )}
+      </text>
+    </box>
+  );
+}