@nexus-ai-fs/tui 0.9.18

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

@@ -0,0 +1,82 @@
+/**
+ * Subscriptions tab: event subscription list with delete/test 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 { useConfirmStore } from "../../shared/hooks/use-confirm.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { SubscriptionList } from "./subscription-list.js";
+
+interface SubscriptionsTabProps {
+  readonly tabBindings: Readonly<Record<string, () => void>>;
+  readonly overlayActive: boolean;
+}
+
+export function SubscriptionsTab({ tabBindings, overlayActive }: SubscriptionsTabProps): React.ReactNode {
+  const client = useApi();
+  const confirm = useConfirmStore((s) => s.confirm);
+
+  const subscriptions = useInfraStore((s) => s.subscriptions);
+  const subscriptionsLoading = useInfraStore((s) => s.subscriptionsLoading);
+  const selectedSubscriptionIndex = useInfraStore((s) => s.selectedSubscriptionIndex);
+  const setSelectedSubscriptionIndex = useInfraStore((s) => s.setSelectedSubscriptionIndex);
+  const fetchSubscriptions = useInfraStore((s) => s.fetchSubscriptions);
+  const deleteSubscription = useInfraStore((s) => s.deleteSubscription);
+  const testSubscription = useInfraStore((s) => s.testSubscription);
+
+  useEffect(() => {
+    if (client) fetchSubscriptions(client);
+  }, [client, fetchSubscriptions]);
+
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedSubscriptionIndex,
+    setIndex: (i) => setSelectedSubscriptionIndex(i),
+    getLength: () => subscriptions.length,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : {
+          ...listNav,
+          ...tabBindings,
+          d: async () => {
+            if (client) {
+              const sub = subscriptions[selectedSubscriptionIndex];
+              if (sub) {
+                const ok = await confirm("Delete subscription?", "Delete this event subscription.");
+                if (!ok) return;
+                deleteSubscription(sub.subscription_id, client);
+              }
+            }
+          },
+          t: () => {
+            if (client) {
+              const sub = subscriptions[selectedSubscriptionIndex];
+              if (sub) testSubscription(sub.subscription_id, client);
+            }
+          },
+          r: () => { if (client) fetchSubscriptions(client); },
+        },
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <box flexGrow={1} width="100%" borderStyle="single">
+        <SubscriptionList
+          subscriptions={subscriptions}
+          selectedIndex={selectedSubscriptionIndex}
+          loading={subscriptionsLoading}
+        />
+      </box>
+      <box height={1} width="100%">
+        <text>{"j/k:navigate  d:delete  t:test  r:refresh  Tab:switch tab"}</text>
+      </box>
+    </box>
+  );
+}

package/src/panels/files/file-aspects.tsx

@@ -0,0 +1,93 @@
+/**
+ * Aspects sub-view for the Files panel.
+ * Shows all aspects attached to the selected file, lazy-loaded from API.
+ * Issue #2930.
+ */
+
+import React, { useEffect } from "react";
+import crypto from "node:crypto";
+import type { FileItem } from "../../stores/files-store.js";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+
+interface FileAspectsProps {
+  readonly item: FileItem | null;
+}
+
+function computeUrn(item: FileItem): string | null {
+  if (!item.path) return null;
+  // Use "default" zone when zone isolation is not configured
+  const zone = item.zoneId || "default";
+  const pathHash = crypto
+    .createHash("sha256")
+    .update(item.path)
+    .digest("hex")
+    .slice(0, 32);
+  return `urn:nexus:file:${zone}:${pathHash}`;
+}
+
+export function FileAspects({ item }: FileAspectsProps): React.ReactNode {
+  const client = useApi();
+  const aspectsCache = useKnowledgeStore((s) => s.aspectsCache);
+  const aspectDetailCache = useKnowledgeStore((s) => s.aspectDetailCache);
+  const loading = useKnowledgeStore((s) => s.aspectsLoading);
+  const fetchAspects = useKnowledgeStore((s) => s.fetchAspects);
+  const fetchAspectDetail = useKnowledgeStore((s) => s.fetchAspectDetail);
+
+  const urn = item ? computeUrn(item) : null;
+
+  useEffect(() => {
+    if (client && urn) {
+      fetchAspects(urn, client);
+    }
+  }, [client, urn, fetchAspects]);
+
+  // Fetch detail for each aspect once names are loaded
+  const aspectNames = urn ? (aspectsCache.get(urn) ?? []) : [];
+  useEffect(() => {
+    if (client && urn && aspectNames.length > 0) {
+      for (const name of aspectNames) {
+        fetchAspectDetail(urn, name, client);
+      }
+    }
+  }, [client, urn, aspectNames.length, fetchAspectDetail]);
+
+  if (!item) {
+    return <text>No file selected</text>;
+  }
+
+  if (!urn) {
+    return <text>{"Cannot compute URN (missing zone)"}</text>;
+  }
+
+  if (loading) {
+    return <text>Loading aspects...</text>;
+  }
+
+  if (aspectNames.length === 0) {
+    return (
+      <box flexDirection="column" height="100%" width="100%">
+        <text>{"─── Aspects ───"}</text>
+        <text>{"No aspects attached"}</text>
+      </box>
+    );
+  }
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      <text>{`─── Aspects (${aspectNames.length}) ───`}</text>
+      {aspectNames.map((name) => {
+        const key = `${urn}::${name}`;
+        const detail = aspectDetailCache.get(key);
+        return (
+          <box key={name} flexDirection="column">
+            <text>{`  * ${name}`}</text>
+            {detail ? (
+              <text>{`    v${detail.version} by ${detail.createdBy}`}</text>
+            ) : null}
+          </box>
+        );
+      })}
+    </box>
+  );
+}

package/src/panels/files/file-editor.tsx

@@ -0,0 +1,160 @@
+/**
+ * Full-screen file editor using OpenTUI's <textarea> component.
+ *
+ * Opens when pressing 'e' on a file in the explorer.
+ * - Loads file content from the server
+ * - Multi-line editing with undo/redo, cursor nav, selection
+ * - Ctrl+S or Meta+Enter to save
+ * - Esc to cancel
+ */
+
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import type { TextareaRenderable } from "@opentui/core";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useFilesStore } from "../../stores/files-store.js";
+import { useVersionsStore } from "../../stores/versions-store.js";
+import { Spinner } from "../../shared/components/spinner.js";
+import { textStyle } from "../../shared/text-style.js";
+
+interface FileEditorProps {
+  readonly path: string;
+  readonly onClose: () => void;
+}
+
+export function FileEditor({ path, onClose }: FileEditorProps): React.ReactNode {
+  const client = useApi();
+  const textareaRef = useRef<TextareaRenderable>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const [initialContent, setInitialContent] = useState("");
+  // Must be called at top level (before any conditional returns) to respect Rules of Hooks
+  const activeTxn = useVersionsStore((s) => s.selectedTransaction);
+  const hasTxn = activeTxn?.status === "active";
+
+  // Load file content
+  useEffect(() => {
+    if (!client) return;
+    setLoading(true);
+    setError(null);
+
+    client.get<{ content: string }>(`/api/v2/files/read?path=${encodeURIComponent(path)}&include_metadata=false`)
+      .then((response) => {
+        const content = typeof response === "string" ? response : (response?.content ?? "");
+        setInitialContent(content);
+        if (textareaRef.current) {
+          textareaRef.current.setText(content);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        // New file — start with empty content
+        setInitialContent("");
+        if (textareaRef.current) {
+          textareaRef.current.setText("");
+        }
+        setLoading(false);
+      });
+  }, [client, path]);
+
+  // Set initial content once textarea mounts
+  useEffect(() => {
+    if (!loading && textareaRef.current && initialContent) {
+      textareaRef.current.setText(initialContent);
+    }
+  }, [loading, initialContent]);
+
+  // Save file (with optional transaction tracking)
+  const handleSave = useCallback(async () => {
+    if (!client || saving) return;
+    const content = textareaRef.current?.plainText ?? "";
+    setSaving(true);
+    setError(null);
+    try {
+      // If an active transaction exists, pass its ID so the write is tracked
+      const activeTxn = useVersionsStore.getState().selectedTransaction;
+      const txnParam = activeTxn?.status === "active" ? `?transaction_id=${activeTxn.transaction_id}` : "";
+      await client.post(`/api/v2/files/write${txnParam}`, {
+        path,
+        content,
+      });
+      setDirty(false);
+      // Refresh parent directory in file tree
+      const parentDir = path.split("/").slice(0, -1).join("/") || "/";
+      useFilesStore.getState().invalidate(parentDir);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  }, [client, path, saving, onClose]);
+
+  // Keyboard shortcuts (only when not focused on textarea — textarea handles its own keys)
+  useKeyboard({
+    "escape": () => {
+      onClose();
+    },
+    "ctrl+s": () => {
+      handleSave();
+    },
+  });
+
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <Spinner label={`Loading ${path}...`} />
+      </box>
+    );
+  }
+
+  const fileName = path.split("/").pop() ?? path;
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>
+          <span style={textStyle({ fg: "#00d4ff", bold: true })}>{` ${fileName}`}</span>
+          <span style={textStyle({ fg: "#666666" })}>{` — ${path}`}</span>
+          {dirty ? <span style={textStyle({ fg: "#ffaa00" })}>{" [modified]"}</span> : ""}
+          {saving ? <span style={textStyle({ fg: "#ffaa00" })}>{" saving..."}</span> : ""}
+          {hasTxn ? <span style={textStyle({ fg: "#4dff88" })}>{` [txn:${activeTxn!.transaction_id.slice(0, 8)}]`}</span> : ""}
+        </text>
+      </box>
+
+      {/* Editor */}
+      <box flexGrow={1} borderStyle="single" borderColor={dirty ? "#ffaa00" : "#444444"}>
+        <textarea
+          ref={textareaRef}
+          initialValue={initialContent}
+          placeholder="Start typing..."
+          wrapMode="word"
+          focusedTextColor="#ffffff"
+          focusedBackgroundColor="#1a1a2e"
+          textColor="#cccccc"
+          cursorColor="#00d4ff"
+          selectionBg="#264f78"
+          focused
+          onContentChange={() => setDirty(true)}
+          onSubmit={() => handleSave()}
+        />
+      </box>
+
+      {/* Footer */}
+      <box height={1} width="100%">
+        <text>
+          <span style={textStyle({ fg: "#4dff88", bold: true })}>{"  Ctrl+S"}</span>
+          <span style={textStyle({ fg: "#888888" })}>{":save  "}</span>
+          <span style={textStyle({ fg: "#ff4444", bold: true })}>{"Esc"}</span>
+          <span style={textStyle({ fg: "#888888" })}>{":cancel  "}</span>
+          <span style={textStyle({ fg: "#00d4ff" })}>{"Meta+Enter"}</span>
+          <span style={textStyle({ fg: "#888888" })}>{":save  "}</span>
+          {error ? <span style={textStyle({ fg: "#ff4444" })}>{`  Error: ${error}`}</span> : ""}
+        </text>
+      </box>
+    </box>
+  );
+}