@nexus-ai-fs/tui 0.9.18

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

@@ -0,0 +1,179 @@
+/**
+ * Mounted tab: lists mounted connectors with sync control.
+ *
+ * Supports: mount list navigation, sync trigger, unmount, sync status display.
+ */
+
+import React, { useEffect, useCallback } from "react";
+import type { FetchClient } from "@nexus-ai-fs/api-client";
+import { useConnectorsStore } from "../../stores/connectors-store.js";
+import { useConfirmStore } from "../../shared/hooks/use-confirm.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { statusColor } from "../../shared/theme.js";
+
+interface MountedTabProps {
+  readonly client: FetchClient;
+  readonly overlayActive: boolean;
+}
+
+export function MountedTab({ client, overlayActive }: MountedTabProps): React.ReactNode {
+  const mounts = useConnectorsStore((s) => s.mounts);
+  const loading = useConnectorsStore((s) => s.mountsLoading);
+  const selectedIndex = useConnectorsStore((s) => s.selectedMountIndex);
+  const syncingMounts = useConnectorsStore((s) => s.syncingMounts);
+  const lastSyncResult = useConnectorsStore((s) => s.lastSyncResult);
+
+  const setSelectedIndex = useConnectorsStore((s) => s.setSelectedMountIndex);
+  const fetchMounts = useConnectorsStore((s) => s.fetchMounts);
+  const triggerSync = useConnectorsStore((s) => s.triggerSync);
+  const unmountConnector = useConnectorsStore((s) => s.unmountConnector);
+  const clearSyncResult = useConnectorsStore((s) => s.clearSyncResult);
+
+  const confirm = useConfirmStore((s) => s.confirm);
+
+  // Auto-fetch on mount
+  useEffect(() => {
+    if (mounts.length === 0) {
+      fetchMounts(client);
+    }
+  }, [client, mounts.length, fetchMounts]);
+
+  const handleSync = useCallback(() => {
+    const selected = mounts[selectedIndex];
+    if (selected) {
+      triggerSync(selected.mount_point, client);
+    }
+  }, [mounts, selectedIndex, triggerSync, client]);
+
+  const handleUnmount = useCallback(async () => {
+    const selected = mounts[selectedIndex];
+    if (!selected) return;
+    const ok = await confirm(
+      "Unmount connector?",
+      `Unmount ${selected.mount_point}. Synced data will remain in the VFS.`,
+    );
+    if (!ok) return;
+    unmountConnector(selected.mount_point, client);
+  }, [mounts, selectedIndex, unmountConnector, client, confirm]);
+
+  const listNav = listNavigationBindings({
+    getIndex: () => selectedIndex,
+    setIndex: setSelectedIndex,
+    getLength: () => mounts.length,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : {
+          ...listNav,
+          s: handleSync,
+          u: handleUnmount,
+          r: () => fetchMounts(client),
+        },
+  );
+
+  if (loading && mounts.length === 0) {
+    return <LoadingIndicator message="Loading mounts..." />;
+  }
+
+  const selectedMount = mounts[selectedIndex];
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      {/* Sync result banner */}
+      {lastSyncResult && (
+        <box height={2} width="100%" borderStyle="single" marginBottom={1}>
+          {lastSyncResult.error ? (
+            <text foregroundColor={statusColor.error}>{`Sync error: ${lastSyncResult.error}`}</text>
+          ) : (
+            <text foregroundColor={statusColor.healthy}>
+              {`Synced ${lastSyncResult.files_synced} files`}
+              {lastSyncResult.is_delta ? ` (delta: +${lastSyncResult.delta_added} -${lastSyncResult.delta_deleted})` : ""}
+            </text>
+          )}
+        </box>
+      )}
+
+      {/* Mount list */}
+      <box flexGrow={1} flexDirection="column">
+        {mounts.length === 0 ? (
+          <box height={1} width="100%">
+            <text foregroundColor={statusColor.dim}>No connectors mounted. Go to Available tab to mount one.</text>
+          </box>
+        ) : (
+          mounts.map((m, i) => {
+            const isSyncing = syncingMounts.has(m.mount_point);
+            const selected = i === selectedIndex;
+            const prefix = selected ? "▶ " : "  ";
+
+            return (
+              <box key={m.mount_point} height={1} width="100%">
+                <text>
+                  <span foregroundColor={selected ? statusColor.info : undefined}>{prefix}</span>
+                  <span bold={selected} foregroundColor={statusColor.reference}>{m.mount_point}</span>
+                  <span foregroundColor={statusColor.dim}>{m.readonly ? " (ro)" : ""}</span>
+                  {m.skill_name && (
+                    <span foregroundColor={statusColor.dim}>{`  skill:${m.skill_name}`}</span>
+                  )}
+                  {m.operations.length > 0 && (
+                    <span foregroundColor={statusColor.dim}>{`  ops:${m.operations.length}`}</span>
+                  )}
+                  {isSyncing && (
+                    <span foregroundColor={statusColor.warning}>{`  [syncing…]`}</span>
+                  )}
+                  {m.sync_status && !isSyncing && (
+                    <span foregroundColor={m.sync_status === "error" ? statusColor.error : statusColor.healthy}>
+                      {`  [${m.sync_status}]`}
+                    </span>
+                  )}
+                  {m.last_sync && (
+                    <span foregroundColor={statusColor.dim}>{`  last:${m.last_sync}`}</span>
+                  )}
+                </text>
+              </box>
+            );
+          })
+        )}
+      </box>
+
+      {/* Details for selected mount */}
+      {selectedMount && (
+        <box height={3} width="100%" borderStyle="single" marginTop={1}>
+          <box flexDirection="column" width="100%">
+            <box height={1} width="100%">
+              <text>
+                <span bold>{selectedMount.mount_point}</span>
+                <span foregroundColor={statusColor.dim}>
+                  {selectedMount.readonly ? "  read-only" : "  read-write"}
+                </span>
+              </text>
+            </box>
+            {selectedMount.operations.length > 0 && (
+              <box height={1} width="100%">
+                <text foregroundColor={statusColor.dim}>
+                  {`Operations: ${selectedMount.operations.join(", ")}`}
+                </text>
+              </box>
+            )}
+          </box>
+        </box>
+      )}
+
+      {/* Help bar */}
+      <box height={1} width="100%">
+        {loading ? (
+          <text foregroundColor={statusColor.warning}>⠋ Refreshing...</text>
+        ) : syncingMounts.size > 0 ? (
+          <text foregroundColor={statusColor.warning}>{`⠋ Syncing ${syncingMounts.size} mount(s)...`}</text>
+        ) : (
+          <text foregroundColor={statusColor.dim}>
+            j/k:navigate  s:sync  u:unmount  r:refresh
+          </text>
+        )}
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,235 @@
+/**
+ * Skills tab: view SKILL.md docs and browse operation schemas (read-only).
+ *
+ * Two view modes: "doc" shows SKILL.md content, "schema" shows annotated schema.
+ * Select a mount first, then browse its skill docs and schemas.
+ */
+
+import React, { useEffect, useCallback } from "react";
+import type { FetchClient } from "@nexus-ai-fs/api-client";
+import { useConnectorsStore } from "../../stores/connectors-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { useCopy } from "../../shared/hooks/use-copy.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { LoadingIndicator } from "../../shared/components/loading-indicator.js";
+import { statusColor } from "../../shared/theme.js";
+
+interface SkillsTabProps {
+  readonly client: FetchClient;
+  readonly overlayActive: boolean;
+}
+
+export function SkillsTab({ client, overlayActive }: SkillsTabProps): React.ReactNode {
+  const mounts = useConnectorsStore((s) => s.mounts);
+  const selectedMountIndex = useConnectorsStore((s) => s.selectedSkillMountIndex);
+  const skillDoc = useConnectorsStore((s) => s.skillDoc);
+  const skillDocLoading = useConnectorsStore((s) => s.skillDocLoading);
+  const selectedSchemaIndex = useConnectorsStore((s) => s.selectedSchemaIndex);
+  const schemaDoc = useConnectorsStore((s) => s.schemaDoc);
+  const schemaDocLoading = useConnectorsStore((s) => s.schemaDocLoading);
+  const viewMode = useConnectorsStore((s) => s.skillViewMode);
+
+  const setSelectedMountIndex = useConnectorsStore((s) => s.setSelectedSkillMountIndex);
+  const setSelectedSchemaIndex = useConnectorsStore((s) => s.setSelectedSchemaIndex);
+  const setSkillViewMode = useConnectorsStore((s) => s.setSkillViewMode);
+  const fetchSkillDoc = useConnectorsStore((s) => s.fetchSkillDoc);
+  const fetchSchema = useConnectorsStore((s) => s.fetchSchema);
+  const fetchMounts = useConnectorsStore((s) => s.fetchMounts);
+
+  const { copy, copied } = useCopy();
+
+  const selectedMount = mounts[selectedMountIndex];
+
+  // Auto-fetch mounts if empty
+  useEffect(() => {
+    if (mounts.length === 0) {
+      fetchMounts(client);
+    }
+  }, [client, mounts.length, fetchMounts]);
+
+  // Auto-fetch skill doc when mount selection changes
+  useEffect(() => {
+    if (selectedMount && viewMode === "doc") {
+      fetchSkillDoc(selectedMount.mount_point, client);
+    }
+  }, [selectedMount?.mount_point, viewMode, client, fetchSkillDoc]);
+
+  // Fetch schema when schema selection changes
+  const handleSchemaSelect = useCallback(
+    (index: number) => {
+      if (!selectedMount || !skillDoc) return;
+      const operation = skillDoc.schemas[index];
+      if (operation) {
+        setSelectedSchemaIndex(index);
+        fetchSchema(selectedMount.mount_point, operation, client);
+      }
+    },
+    [selectedMount, skillDoc, setSelectedSchemaIndex, fetchSchema, client],
+  );
+
+  // Build navigation bindings based on view mode
+  const mountNav = listNavigationBindings({
+    getIndex: () => selectedMountIndex,
+    setIndex: (i) => {
+      setSelectedMountIndex(i);
+      setSelectedSchemaIndex(0);
+    },
+    getLength: () => mounts.length,
+  });
+
+  const schemaNav = listNavigationBindings({
+    getIndex: () => selectedSchemaIndex,
+    setIndex: setSelectedSchemaIndex,
+    getLength: () => (skillDoc?.schemas.length ?? 0),
+    onSelect: handleSchemaSelect,
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : viewMode === "doc"
+        ? {
+            ...mountNav,
+            s: () => setSkillViewMode("schema"),
+            r: () => {
+              if (selectedMount) fetchSkillDoc(selectedMount.mount_point, client);
+            },
+            y: () => {
+              if (skillDoc?.content) copy(skillDoc.content);
+            },
+          }
+        : {
+            ...schemaNav,
+            d: () => setSkillViewMode("doc"),
+            r: () => {
+              if (selectedMount && skillDoc) {
+                const op = skillDoc.schemas[selectedSchemaIndex];
+                if (op) fetchSchema(selectedMount.mount_point, op, client);
+              }
+            },
+            y: () => {
+              if (schemaDoc?.content) copy(schemaDoc.content);
+            },
+            escape: () => setSkillViewMode("doc"),
+          },
+  );
+
+  return (
+    <box flexDirection="column" height="100%" width="100%">
+      {/* Mount selector (top row) */}
+      <box height={1} width="100%">
+        <text>
+          <span foregroundColor={statusColor.dim}>Mount: </span>
+          {mounts.length === 0 ? (
+            <span foregroundColor={statusColor.dim}>No mounts</span>
+          ) : (
+            mounts.map((m, i) => (
+              <span
+                key={m.mount_point}
+                foregroundColor={i === selectedMountIndex ? statusColor.info : statusColor.dim}
+                bold={i === selectedMountIndex}
+              >
+                {i === selectedMountIndex ? `[${m.mount_point}]` : ` ${m.mount_point} `}
+              </span>
+            ))
+          )}
+          <span foregroundColor={statusColor.dim}>{"  "}</span>
+          <span foregroundColor={viewMode === "doc" ? statusColor.info : statusColor.dim}>
+            {viewMode === "doc" ? "[Doc]" : " Doc "}
+          </span>
+          <span foregroundColor={viewMode === "schema" ? statusColor.info : statusColor.dim}>
+            {viewMode === "schema" ? "[Schema]" : " Schema "}
+          </span>
+        </text>
+      </box>
+
+      {/* Content area */}
+      <box flexGrow={1} borderStyle="single" marginTop={1} flexDirection="column">
+        {viewMode === "doc" ? (
+          // SKILL.md viewer
+          skillDocLoading ? (
+            <LoadingIndicator message="Loading skill doc..." />
+          ) : skillDoc?.content ? (
+            <box flexDirection="column" width="100%">
+              {skillDoc.content.split("\n").slice(0, 30).map((line, i) => (
+                <box key={i} height={1} width="100%">
+                  <text>{line}</text>
+                </box>
+              ))}
+              {skillDoc.content.split("\n").length > 30 && (
+                <box height={1} width="100%">
+                  <text foregroundColor={statusColor.dim}>... (truncated, press y to copy full doc)</text>
+                </box>
+              )}
+            </box>
+          ) : (
+            <box height={1} width="100%">
+              <text foregroundColor={statusColor.dim}>No skill doc available. Mount a connector with skill support.</text>
+            </box>
+          )
+        ) : (
+          // Schema browser
+          <box flexDirection="row" height="100%" width="100%">
+            {/* Schema list (left) */}
+            <box width="30%" flexDirection="column" borderStyle="single">
+              <box height={1} width="100%">
+                <text bold foregroundColor={statusColor.info}>Operations</text>
+              </box>
+              {skillDoc?.schemas.map((op, i) => (
+                <box key={op} height={1} width="100%">
+                  <text>
+                    <span foregroundColor={i === selectedSchemaIndex ? statusColor.info : undefined}>
+                      {i === selectedSchemaIndex ? `▶ ${op}` : `  ${op}`}
+                    </span>
+                  </text>
+                </box>
+              ))}
+              {(!skillDoc || skillDoc.schemas.length === 0) && (
+                <box height={1} width="100%">
+                  <text foregroundColor={statusColor.dim}>No schemas</text>
+                </box>
+              )}
+            </box>
+
+            {/* Schema content (right) */}
+            <box width="70%" flexDirection="column" paddingLeft={1}>
+              {schemaDocLoading ? (
+                <LoadingIndicator message="Loading schema..." />
+              ) : schemaDoc?.content ? (
+                <box flexDirection="column" width="100%">
+                  <box height={1} width="100%">
+                    <text bold>{schemaDoc.operation}</text>
+                  </box>
+                  {schemaDoc.content.split("\n").slice(0, 25).map((line, i) => (
+                    <box key={i} height={1} width="100%">
+                      <text foregroundColor={statusColor.dim}>{line}</text>
+                    </box>
+                  ))}
+                </box>
+              ) : (
+                <box height={1} width="100%">
+                  <text foregroundColor={statusColor.dim}>Select an operation to view its schema.</text>
+                </box>
+              )}
+            </box>
+          </box>
+        )}
+      </box>
+
+      {/* Help bar */}
+      <box height={1} width="100%">
+        {copied ? (
+          <text foregroundColor={statusColor.healthy}>Copied!</text>
+        ) : viewMode === "doc" ? (
+          <text foregroundColor={statusColor.dim}>
+            j/k:select mount  s:schemas  y:copy  r:refresh
+          </text>
+        ) : (
+          <text foregroundColor={statusColor.dim}>
+            j/k:select operation  Enter:view  d:doc view  y:copy  Esc:back  r:refresh
+          </text>
+        )}
+      </box>
+    </box>
+  );
+}

package/src/panels/connectors/template-generator.ts

@@ -0,0 +1,211 @@
+/**
+ * Schema-to-YAML template generator.
+ *
+ * Pure function that converts an annotated schema (YAML string from the API)
+ * into a pre-filled YAML template for the Write tab.
+ *
+ * The schema format is annotated YAML with comments like:
+ *   field_name:           # (required) Description — type: string
+ *   optional_field:       # (optional) Description — type: integer, default: 0
+ */
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface SchemaField {
+  readonly name: string;
+  readonly type: string;
+  readonly required: boolean;
+  readonly description: string;
+  readonly default_value: string | null;
+  readonly enum_values: readonly string[];
+  readonly is_nested: boolean;
+  readonly children: readonly SchemaField[];
+}
+
+// =============================================================================
+// Parser: extract fields from annotated schema YAML
+// =============================================================================
+
+/**
+ * Parse an annotated schema string into structured fields.
+ *
+ * Handles formats like:
+ *   field_name:           # (required) Description — type: string
+ *   field_name: value     # (optional) Description — type: integer
+ *   field_name:           # (required) One of: val1, val2, val3
+ */
+export function parseSchemaFields(schemaContent: string): readonly SchemaField[] {
+  const lines = schemaContent.split("\n");
+  const fields: SchemaField[] = [];
+  let currentIndent = -1;
+
+  for (const line of lines) {
+    // Skip empty lines and pure comment lines (not field comments)
+    const trimmed = line.trim();
+    if (!trimmed || (trimmed.startsWith("#") && !trimmed.includes(":"))) continue;
+
+    // Match field pattern: name: [value] # comment
+    const fieldMatch = trimmed.match(
+      /^(\w[\w.]*)\s*:\s*(.*?)(?:\s*#\s*(.*))?$/,
+    );
+    if (!fieldMatch) continue;
+
+    const [, name, rawValue, comment] = fieldMatch;
+    if (!name) continue;
+
+    // Parse required/optional from comment
+    const isRequired = comment ? /\(required\)/i.test(comment) : false;
+
+    // Parse type from comment
+    const typeMatch = comment?.match(/type:\s*(\w+)/i);
+    const type = typeMatch?.[1] ?? "string";
+
+    // Parse description — everything before "type:" or "One of:" or "default:"
+    let description = comment ?? "";
+    description = description
+      .replace(/\(required\)/i, "")
+      .replace(/\(optional\)/i, "")
+      .replace(/type:\s*\w+/i, "")
+      .replace(/default:\s*\S+/i, "")
+      .replace(/One of:.*$/i, "")
+      .replace(/[—–-]\s*$/, "")
+      .trim();
+
+    // Parse default value
+    const defaultMatch = comment?.match(/default:\s*(\S+)/i);
+    const defaultValue = defaultMatch?.[1] ?? null;
+
+    // Parse enum values — strip trailing "default: X" from the match
+    const enumMatch = comment?.match(/One of:\s*(.+)$/i);
+    const enumValues: string[] = enumMatch
+      ? enumMatch[1]
+          .replace(/,?\s*default:\s*\S+/i, "")
+          .split(",")
+          .map((v) => v.trim())
+          .filter(Boolean)
+      : [];
+
+    // Determine nesting from indent
+    const indent = line.search(/\S/);
+    const valueStr = rawValue.trim();
+    const isNested = valueStr === "" && !comment?.includes("type:");
+
+    fields.push({
+      name,
+      type,
+      required: isRequired,
+      description,
+      default_value: defaultValue,
+      enum_values: enumValues,
+      is_nested: isNested,
+      children: [],
+    });
+  }
+
+  return fields;
+}
+
+// =============================================================================
+// Template generator
+// =============================================================================
+
+/**
+ * Generate a YAML template from a schema string.
+ *
+ * Required fields are shown with placeholder values.
+ * Optional fields are commented out with their defaults.
+ * Enum fields show valid values as comments.
+ */
+export function generateTemplate(
+  schemaContent: string,
+  operationName: string,
+): string {
+  const fields = parseSchemaFields(schemaContent);
+
+  if (fields.length === 0) {
+    // If we can't parse structured fields, return the schema as-is
+    // with a header comment — the user can edit it directly
+    return `# ${operationName}\n# Edit the fields below:\n\n${schemaContent}`;
+  }
+
+  const lines: string[] = [];
+  lines.push(`# ${operationName}`);
+  lines.push(`# Required fields are pre-filled. Optional fields are commented out.`);
+  lines.push("");
+
+  for (const field of fields) {
+    if (field.is_nested) {
+      // Section header
+      if (field.required) {
+        lines.push(`${field.name}:`);
+      } else {
+        lines.push(`# ${field.name}:`);
+      }
+      continue;
+    }
+
+    const enumComment = field.enum_values.length > 0
+      ? `  # One of: ${field.enum_values.join(", ")}`
+      : "";
+
+    const descComment = field.description
+      ? `  # ${field.description}`
+      : "";
+
+    const placeholder = getPlaceholder(field);
+
+    if (field.required) {
+      lines.push(`${field.name}: ${placeholder}${enumComment || descComment}`);
+    } else {
+      // Optional fields are commented out
+      const value = field.default_value ?? placeholder;
+      lines.push(`# ${field.name}: ${value}${enumComment || descComment}`);
+    }
+  }
+
+  return lines.join("\n") + "\n";
+}
+
+/**
+ * Get a sensible placeholder for a field based on its type.
+ */
+function getPlaceholder(field: SchemaField): string {
+  if (field.default_value) return field.default_value;
+  if (field.enum_values.length > 0) return field.enum_values[0];
+
+  switch (field.type.toLowerCase()) {
+    case "string":
+      return `"<${field.name}>"`;
+    case "integer":
+    case "int":
+      return "0";
+    case "number":
+    case "float":
+      return "0.0";
+    case "boolean":
+    case "bool":
+      return "false";
+    case "array":
+    case "list":
+      return "[]";
+    case "object":
+    case "dict":
+      return "{}";
+    default:
+      return `"<${field.name}>"`;
+  }
+}
+
+/**
+ * Generate a template directly from an operation name and raw schema content.
+ *
+ * Convenience wrapper used by the Write tab.
+ */
+export function generateWriteTemplate(
+  operationName: string,
+  schemaContent: string,
+): string {
+  return generateTemplate(schemaContent, operationName);
+}