@mindstudio-ai/local-model-tunnel 0.3.4 → 0.4.0

package/dist/{tui-4ZB4JAV4.js → tui-BW6XKMWK.js}

@@ -1,26 +1,34 @@
 import {
   TunnelRunner,
+  deleteLocalInterfacePath,
   detectAllProviderStatuses,
   discoverAllModelsWithParameters,
+  getApiBaseUrl,
   getApiKey,
   getConfigPath,
+  getEditorSessions,
   getEnvironment,
+  getLocalInterfacePath,
+  getLocalInterfacesDir,
   getSyncedModels,
+  getUserId,
   pollDeviceAuth,
   requestDeviceAuth,
   requestEvents,
   setApiKey,
+  setLocalInterfacePath,
+  setUserId,
   syncModels,
   verifyApiKey
-} from "./chunk-PPP2FEIN.js";
+} from "./chunk-44NXQXRB.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
-import { execFileSync, execSync } from "child_process";
+import { execFileSync, execSync as execSync2 } from "child_process";
 
 // src/tui/App.tsx
-import { useEffect as useEffect10, useCallback as useCallback8, useState as useState10, useRef as useRef5 } from "react";
-import { Box as Box7, useApp, useStdout as useStdout6 } from "ink";
+import { useEffect as useEffect15, useCallback as useCallback10, useState as useState15, useRef as useRef9 } from "react";
+import { Box as Box10, useApp, useStdout as useStdout7 } from "ink";
 
 // src/tui/components/Header.tsx
 import os from "os";
@@ -111,8 +119,6 @@ function NavigationMenu({ items, onSelect, title }) {
   const { stdout } = useStdout();
   const compact = (stdout?.rows ?? 24) < 40;
   const getDefaultIndex = () => {
-    const backIdx = items.findIndex((i) => i.id === "back");
-    if (backIdx >= 0) return backIdx;
     const firstIdx = items.findIndex((i) => !i.disabled && !i.isSeparator);
     return firstIdx >= 0 ? firstIdx : 0;
   };
@@ -212,7 +218,8 @@ function useConnection() {
     setStatus("connecting");
     setError(null);
     const apiKey = getApiKey();
-    if (!apiKey) {
+    const userId = getUserId();
+    if (!apiKey || !userId) {
       setStatus("not_authenticated");
       return;
     }
@@ -239,7 +246,7 @@ function useConnection() {
   };
 }
 
-// src/tui/hooks/useSetupProviders.ts
+// src/tui/models/hooks/useSetupProviders.ts
 import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2, useRef } from "react";
 function useSetupProviders() {
   const [providers, setProviders] = useState3([]);
@@ -264,7 +271,7 @@ function useSetupProviders() {
   return { providers, loading, refreshing, refresh };
 }
 
-// src/tui/hooks/useModels.ts
+// src/tui/models/hooks/useModels.ts
 import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef2 } from "react";
 function useModels() {
   const [models, setModels] = useState4([]);
@@ -303,7 +310,7 @@ function useModels() {
   };
 }
 
-// src/tui/hooks/useRequests.ts
+// src/tui/models/hooks/useRequests.ts
 import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef3 } from "react";
 function useRequests(maxHistory = 50) {
   const [requests, setRequests] = useState5([]);
@@ -379,7 +386,7 @@ function useRequests(maxHistory = 50) {
   };
 }
 
-// src/tui/hooks/useRegisteredModels.ts
+// src/tui/models/hooks/useRegisteredModels.ts
 import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
 function useSyncedModels(connectionStatus) {
   const [syncedNames, setSyncedNames] = useState6(
@@ -409,12 +416,12 @@ function useSyncedModels(connectionStatus) {
   };
 }
 
-// src/tui/pages/DashboardPage.tsx
+// src/tui/models/pages/DashboardPage.tsx
 import { useMemo } from "react";
 import { Box as Box4, Text as Text4, useStdout as useStdout3 } from "ink";
 import Spinner2 from "ink-spinner";
 
-// src/tui/components/RequestLog.tsx
+// src/tui/models/components/RequestLog.tsx
 import { Box as Box3, Text as Text3, useStdout as useStdout2 } from "ink";
 import Spinner from "ink-spinner";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -580,7 +587,7 @@ function RequestLog({ requests, maxVisible = 8, hasModels = true }) {
   );
 }
 
-// src/tui/pages/DashboardPage.tsx
+// src/tui/models/pages/DashboardPage.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function getWorkflowCount(model) {
   const param = model.parameters?.find((p) => p.type === "comfyWorkflow");
@@ -624,6 +631,11 @@ function DashboardPage({
   const syncDescription = syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "\u2713 Synced" : "Re-detect providers and sync models to MindStudio";
   const menuItems = useMemo(() => {
     return [
+      {
+        id: "interfaces",
+        label: "Connect to IDE",
+        description: "Connect your local editor to a MindStudio interface or script"
+      },
       {
         id: "refresh",
         label: "Sync Models",
@@ -735,7 +747,7 @@ function DashboardPage({
   ] });
 }
 
-// src/tui/pages/SetupPage.tsx
+// src/tui/models/pages/SetupPage.tsx
 import { useState as useState7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
 import { Box as Box5, Text as Text6, useInput as useInput2, useStdout as useStdout5 } from "ink";
 import Spinner3 from "ink-spinner";
@@ -775,7 +787,7 @@ function renderMarkdown(content, width) {
   return marked.parse(content).trimEnd();
 }
 
-// src/tui/pages/SetupPage.tsx
+// src/tui/models/pages/SetupPage.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ProviderDetailView({
   provider,
@@ -895,10 +907,10 @@ function SetupPage({ onBack }) {
   );
   const totalItems = allProviders.length + 1;
   const backIndex = allProviders.length;
-  const [cursorIndex, setCursorIndex] = useState7(backIndex);
+  const [cursorIndex, setCursorIndex] = useState7(0);
   useEffect7(() => {
-    setCursorIndex(backIndex);
-  }, [backIndex]);
+    setCursorIndex(0);
+  }, [allProviders.length]);
   useInput2((input, key) => {
     if (selectedProvider) return;
     if (input === "q" || key.escape) {
@@ -1075,30 +1087,986 @@ function SetupPage({ onBack }) {
   ] }) });
 }
 
-// src/tui/pages/OnboardingPage.tsx
-import { useEffect as useEffect9, useCallback as useCallback7, useState as useState9, useMemo as useMemo4 } from "react";
+// src/tui/interfaces/pages/InterfacesPage.tsx
+import { useState as useState12, useMemo as useMemo5, useEffect as useEffect12, useRef as useRef7 } from "react";
+import { Box as Box8, Text as Text9, useInput as useInput5 } from "ink";
+import Spinner5 from "ink-spinner";
+
+// src/tui/interfaces/hooks/useEditorSessions.ts
+import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6, useRef as useRef4 } from "react";
+function useEditorSessions() {
+  const [sessions, setSessions] = useState8([]);
+  const [loading, setLoading] = useState8(true);
+  const [error, setError] = useState8(null);
+  const [refreshStatus, setRefreshStatus] = useState8("idle");
+  const initialLoadDone = useRef4(false);
+  const timerRef = useRef4();
+  const refresh = useCallback6(async () => {
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshStatus("refreshing");
+    }
+    setError(null);
+    try {
+      const data = await getEditorSessions();
+      setSessions(data);
+      initialLoadDone.current = true;
+      setRefreshStatus("refreshed");
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setRefreshStatus("idle"), 1500);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch sessions");
+      setRefreshStatus("idle");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect8(() => {
+    refresh();
+  }, [refresh]);
+  useEffect8(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return { sessions, loading, error, refreshStatus, refresh };
+}
+
+// src/tui/interfaces/hooks/useLocalInterface.ts
+import { useState as useState9, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect9 } from "react";
+import { spawn } from "child_process";
+import crypto from "crypto";
+import fs from "fs";
+import path from "path";
+var INTERFACE_SCAFFOLD_REPO = "https://github.com/mindstudio-ai/spa-bundle-scaffold";
+var SCRIPT_SCAFFOLD_REPO = "https://github.com/mindstudio-ai/script-scaffold";
+var MAX_OUTPUT_LINES = 500;
+function useLocalInterface({
+  mode,
+  appId,
+  stepId,
+  workflowId,
+  sessionId
+}) {
+  const key = `${appId}:${stepId}`;
+  const [hasLocalCopy, setHasLocalCopy] = useState9(() => {
+    const existing = getLocalInterfacePath(key);
+    if (!existing) return false;
+    try {
+      return fs.existsSync(existing);
+    } catch {
+      return false;
+    }
+  });
+  const [phase, setPhase] = useState9("idle");
+  const [outputLines, setOutputLines] = useState9([]);
+  const [errorMessage, setErrorMessage] = useState9(null);
+  const processRef = useRef5(null);
+  const mountedRef = useRef5(true);
+  const stoppedRef = useRef5(false);
+  useEffect9(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (processRef.current) {
+        processRef.current.kill("SIGTERM");
+        processRef.current = null;
+      }
+    };
+  }, []);
+  const appendOutput = useCallback7((line) => {
+    if (!mountedRef.current) return;
+    setOutputLines((prev) => {
+      const next = [...prev, line];
+      return next.length > MAX_OUTPUT_LINES ? next.slice(next.length - MAX_OUTPUT_LINES) : next;
+    });
+  }, []);
+  const runCommand = useCallback7(
+    (command, args, options = {}) => {
+      return new Promise((resolve, reject) => {
+        const fullCommand = [command, ...args].join(" ");
+        const proc = spawn(fullCommand, [], {
+          cwd: options.cwd,
+          shell: true,
+          env: { ...process.env, FORCE_COLOR: "1", ...options.env }
+        });
+        processRef.current = proc;
+        const handleData = (data) => {
+          const lines = data.toString().split("\n");
+          for (const line of lines) {
+            if (line.length > 0) {
+              appendOutput(line);
+            }
+          }
+        };
+        proc.stdout?.on("data", handleData);
+        proc.stderr?.on("data", handleData);
+        proc.on("close", (code) => {
+          processRef.current = null;
+          resolve(code ?? 0);
+        });
+        proc.on("error", (err) => {
+          processRef.current = null;
+          reject(err);
+        });
+      });
+    },
+    [appendOutput]
+  );
+  const getScaffoldRepo = () => mode === "script" ? SCRIPT_SCAFFOLD_REPO : INTERFACE_SCAFFOLD_REPO;
+  const getDirPrefix = () => mode === "script" ? "script" : "interface";
+  const getDevLocalArgs = () => {
+    const env = {};
+    if (getEnvironment() === "local") {
+      env.MINDSTUDIO_API_URL = getApiBaseUrl();
+    }
+    if (mode === "script") {
+      env.MINDSTUDIO_API_KEY = getApiKey() ?? "";
+      return {
+        args: ["run", "dev:local", "--", "--app", appId, "--workflow", workflowId, "--step", stepId],
+        env
+      };
+    }
+    return {
+      args: ["run", "dev:local", "--", sessionId ?? ""],
+      env
+    };
+  };
+  const start = useCallback7(() => {
+    setErrorMessage(null);
+    setOutputLines([]);
+    stoppedRef.current = false;
+    const run = async () => {
+      const localPath = getLocalInterfacePath(key);
+      const dirExists = localPath && fs.existsSync(localPath);
+      try {
+        if (!dirExists) {
+          setPhase("cloning");
+          const interfacesDir = getLocalInterfacesDir();
+          fs.mkdirSync(interfacesDir, { recursive: true });
+          const shortId = crypto.randomBytes(4).toString("hex");
+          const dirName = `${getDirPrefix()}-${shortId}`;
+          const targetDir = path.join(interfacesDir, dirName);
+          appendOutput(`Cloning scaffold into ${targetDir}...`);
+          const cloneCode = await runCommand("git", [
+            "clone",
+            "--depth",
+            "1",
+            getScaffoldRepo(),
+            targetDir
+          ]);
+          if (!mountedRef.current) return;
+          if (cloneCode !== 0) {
+            throw new Error(`git clone failed with exit code ${cloneCode}`);
+          }
+          setPhase("installing");
+          appendOutput("Installing dependencies...");
+          const installCode = await runCommand("npm", ["install"], {
+            cwd: targetDir
+          });
+          if (!mountedRef.current) return;
+          if (installCode !== 0) {
+            throw new Error(`npm install failed with exit code ${installCode}`);
+          }
+          setLocalInterfacePath(key, targetDir);
+          setHasLocalCopy(true);
+          setPhase("running");
+          const { args, env } = getDevLocalArgs();
+          appendOutput("Starting local dev server...");
+          await runCommand("npm", args, { cwd: targetDir, env });
+          if (mountedRef.current) {
+            setPhase("idle");
+            setOutputLines([]);
+          }
+        } else {
+          setPhase("running");
+          const { args, env } = getDevLocalArgs();
+          appendOutput("Starting local dev server...");
+          await runCommand("npm", args, { cwd: localPath, env });
+          if (mountedRef.current) {
+            setPhase("idle");
+            setOutputLines([]);
+          }
+        }
+      } catch (err) {
+        if (mountedRef.current) {
+          setPhase("error");
+          setErrorMessage(
+            err instanceof Error ? err.message : "Unknown error"
+          );
+        }
+      }
+    };
+    run();
+  }, [key, mode, appId, stepId, workflowId, sessionId, appendOutput, runCommand]);
+  const stop = useCallback7(() => {
+    stoppedRef.current = true;
+    if (processRef.current) {
+      processRef.current.kill("SIGTERM");
+      const proc = processRef.current;
+      setTimeout(() => {
+        if (proc && !proc.killed) {
+          proc.kill("SIGKILL");
+        }
+      }, 2e3);
+      processRef.current = null;
+    }
+    setPhase("idle");
+  }, []);
+  const deleteLocalCopy = useCallback7(() => {
+    const localPath = getLocalInterfacePath(key);
+    if (!localPath) return;
+    setPhase("deleting");
+    setOutputLines([]);
+    appendOutput(`Deleting ${localPath}...`);
+    try {
+      fs.rmSync(localPath, { recursive: true, force: true });
+      deleteLocalInterfacePath(key);
+      setHasLocalCopy(false);
+      appendOutput("Deleted successfully.");
+    } catch (err) {
+      setErrorMessage(
+        err instanceof Error ? err.message : "Failed to delete"
+      );
+    }
+    setPhase("idle");
+  }, [key, appendOutput]);
+  return {
+    phase,
+    hasLocalCopy,
+    localPath: getLocalInterfacePath(key),
+    outputLines,
+    errorMessage,
+    start,
+    stop,
+    deleteLocalCopy
+  };
+}
+
+// src/tui/interfaces/pages/InterfaceSessionView.tsx
+import { useState as useState10, useEffect as useEffect10 } from "react";
 import { Box as Box6, Text as Text7, useInput as useInput3 } from "ink";
+import os2 from "os";
+import open from "open";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function InterfaceSessionView({
+  item,
+  onStart,
+  onDelete,
+  onBack,
+  hasLocalCopy,
+  localPath
+}) {
+  const menuItems = [
+    { id: "start", label: "Start Locally" }
+  ];
+  if (hasLocalCopy) {
+    menuItems.push({ id: "reveal", label: "Open Folder" });
+    menuItems.push({ id: "delete", label: "Delete Local Copy" });
+  }
+  menuItems.push({ id: "back", label: "Back" });
+  const [cursorIndex, setCursorIndex] = useState10(0);
+  useEffect10(() => {
+    setCursorIndex(0);
+  }, [hasLocalCopy]);
+  useInput3((input, key) => {
+    if (input === "q" || key.escape) {
+      onBack();
+      return;
+    }
+    if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(menuItems.length - 1, prev + 1));
+    } else if (key.return) {
+      const selected = menuItems[cursorIndex];
+      if (!selected) return;
+      switch (selected.id) {
+        case "start":
+          onStart();
+          break;
+        case "reveal":
+          if (localPath) {
+            open(localPath);
+          }
+          break;
+        case "delete":
+          onDelete();
+          break;
+        case "back":
+          onBack();
+          break;
+      }
+    }
+  });
+  const name = `${item.step.workflowName} - ${item.step.displayName}`;
+  const displayPath = localPath?.replace(os2.homedir(), "~");
+  let sessionInfo = null;
+  if (item.kind === "interface") {
+    const hotUpdateDomain = item.step.spaEditorSession?.hotUpdateDomain ?? "";
+    sessionInfo = hotUpdateDomain.replace(/^https?:\/\//, "").split(".")[0] || null;
+  }
+  return /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx7(Text7, { bold: true, color: "white", underline: true, children: name }),
+    /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, flexDirection: "column", children: [
+      sessionInfo && /* @__PURE__ */ jsxs6(Text7, { color: "gray", children: [
+        "Session: ",
+        sessionInfo
+      ] }),
+      hasLocalCopy && localPath ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        /* @__PURE__ */ jsx7(Text7, { color: "green", children: "Local copy exists" }),
+        /* @__PURE__ */ jsxs6(Text7, { color: "gray", children: [
+          "Path: ",
+          displayPath
+        ] })
+      ] }) : /* @__PURE__ */ jsx7(Text7, { color: "yellow", children: 'No local copy. "Start Locally" will clone the scaffold and install dependencies.' })
+    ] }),
+    /* @__PURE__ */ jsx7(Box6, { marginTop: 1, flexDirection: "column", children: menuItems.map((menuItem, i) => {
+      const isSelected = i === cursorIndex;
+      return /* @__PURE__ */ jsxs6(
+        Text7,
+        {
+          color: isSelected ? "cyan" : "white",
+          bold: isSelected,
+          children: [
+            isSelected ? "\u276F" : " ",
+            " ",
+            menuItem.label
+          ]
+        },
+        menuItem.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(Text7, { color: "gray", children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc Back"
+    ] }) })
+  ] }) });
+}
+
+// src/tui/interfaces/pages/InterfaceRunningView.tsx
+import { useState as useState11, useMemo as useMemo4, useRef as useRef6, useEffect as useEffect11 } from "react";
+import { Box as Box7, Text as Text8, useInput as useInput4, useStdout as useStdout6 } from "ink";
+import { execSync } from "child_process";
+import os3 from "os";
+import open2 from "open";
 import Spinner4 from "ink-spinner";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function copyToClipboard(text) {
+  try {
+    if (process.platform === "darwin") {
+      execSync("pbcopy", { input: text });
+    } else if (process.platform === "win32") {
+      execSync("clip", { input: text });
+    } else {
+      execSync("xclip -selection clipboard", { input: text });
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getPhaseLabel(phase) {
+  switch (phase) {
+    case "cloning":
+      return { text: "Cloning scaffold...", color: "cyan", showSpinner: true };
+    case "installing":
+      return { text: "Installing dependencies...", color: "cyan", showSpinner: true };
+    case "running":
+      return { text: "Dev server running", color: "green", showSpinner: true };
+    case "error":
+      return { text: "Error", color: "red", showSpinner: false };
+    case "deleting":
+      return { text: "Deleting local copy...", color: "yellow", showSpinner: true };
+    default:
+      return { text: "Idle", color: "gray", showSpinner: false };
+  }
+}
+function InterfaceRunningView({
+  name,
+  phase,
+  outputLines,
+  errorMessage,
+  localPath,
+  onStop,
+  onBack
+}) {
+  const { stdout } = useStdout6();
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  const isActive = phase === "cloning" || phase === "installing" || phase === "running" || phase === "deleting";
+  const displayPath = localPath?.replace(os3.homedir(), "~");
+  const menuItems = useMemo4(() => {
+    const items = [];
+    if (isActive && displayPath) {
+      items.push({ id: "claude", label: "Copy Claude Code Command", copyValue: `cd ${displayPath} && claude` });
+      items.push({ id: "codex", label: "Copy Codex Command", copyValue: `cd ${displayPath} && codex` });
+      items.push({ id: "reveal", label: "Open Folder" });
+    }
+    items.push({ id: "action", label: isActive ? "Stop" : "Back" });
+    return items;
+  }, [isActive, displayPath]);
+  const [cursorIndex, setCursorIndex] = useState11(0);
+  const [copiedId, setCopiedId] = useState11(null);
+  const copiedTimerRef = useRef6();
+  useEffect11(() => {
+    return () => clearTimeout(copiedTimerRef.current);
+  }, []);
+  const headerHeight = 14;
+  const menuHeight = menuItems.length;
+  const chromeLines = 7 + menuHeight;
+  const logHeight = Math.max(3, termHeight - headerHeight - chromeLines);
+  const maxScroll = Math.max(0, outputLines.length - logHeight);
+  const effectiveOffset = maxScroll;
+  const copyItem = (item) => {
+    if (!item.copyValue) return;
+    const success = copyToClipboard(item.copyValue);
+    if (success) {
+      setCopiedId(item.id);
+      clearTimeout(copiedTimerRef.current);
+      copiedTimerRef.current = setTimeout(() => setCopiedId(null), 2e3);
+    }
+  };
+  useInput4((input, key) => {
+    if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(menuItems.length - 1, prev + 1));
+    } else if (key.return) {
+      const item = menuItems[cursorIndex];
+      if (!item) return;
+      if (item.copyValue) {
+        copyItem(item);
+      } else if (item.id === "reveal" && localPath) {
+        open2(localPath);
+      } else if (isActive) {
+        onStop();
+      } else {
+        onBack();
+      }
+    } else if (input === "q" || key.escape) {
+      if (isActive) {
+        onStop();
+      } else {
+        onBack();
+      }
+    }
+  });
+  const visibleLines = outputLines.slice(
+    effectiveOffset,
+    effectiveOffset + logHeight
+  );
+  const phaseInfo = getPhaseLabel(phase);
+  return /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx8(Text8, { bold: true, color: "white", underline: true, children: name }),
+    /* @__PURE__ */ jsxs7(Box7, { marginTop: 1, children: [
+      phaseInfo.showSpinner && /* @__PURE__ */ jsxs7(Text8, { color: phaseInfo.color, children: [
+        /* @__PURE__ */ jsx8(Spinner4, { type: "dots" }),
+        " "
+      ] }),
+      /* @__PURE__ */ jsx8(Text8, { color: phaseInfo.color, children: phaseInfo.text })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsx8(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { color: "red", children: errorMessage }) }),
+    /* @__PURE__ */ jsx8(Box7, { marginTop: 1, height: logHeight, children: /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: visibleLines.map((line, i) => /* @__PURE__ */ jsx8(Text8, { wrap: "truncate-end", color: "gray", children: line }, effectiveOffset + i)) }) }),
+    /* @__PURE__ */ jsx8(Box7, { marginTop: 1, flexDirection: "column", children: menuItems.map((item, i) => {
+      const isSelected = i === cursorIndex;
+      const isCopied = copiedId === item.id;
+      return /* @__PURE__ */ jsxs7(Box7, { children: [
+        /* @__PURE__ */ jsxs7(Text8, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
+          isSelected ? "\u276F" : " ",
+          " ",
+          item.label
+        ] }),
+        isCopied && /* @__PURE__ */ jsxs7(Text8, { color: "green", children: [
+          " ",
+          "\u2713",
+          " Copied!"
+        ] })
+      ] }, item.id);
+    }) }),
+    /* @__PURE__ */ jsx8(Box7, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsxs7(Text8, { color: "gray", wrap: "truncate-end", children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc ",
+      isActive ? "Stop" : "Back"
+    ] }) })
+  ] }) });
+}
+
+// src/tui/interfaces/pages/InterfacesPage.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function getSessionStatus(item) {
+  if (item.kind === "script") return "running";
+  const status = item.step.spaEditorSession?.status;
+  if (status === "running" || status === "compiling") return status;
+  if (status === "starting") return "starting";
+  return "stopped";
+}
+function isItemSelectable(item) {
+  const status = getSessionStatus(item);
+  return status === "running" || status === "compiling";
+}
+function getStatusLabel(status) {
+  switch (status) {
+    case "running":
+    case "compiling":
+      return { text: "Online", color: "green" };
+    case "starting":
+      return { text: "Starting", color: "yellow" };
+    case "stopped":
+      return { text: "Offline", color: "gray" };
+  }
+}
+function getRefreshSuffix(status) {
+  switch (status) {
+    case "refreshing":
+      return "Refreshing...";
+    case "refreshed":
+      return "\u2713 Refreshed";
+    case "idle":
+      return null;
+  }
+}
+function formatCount(interfaces, scripts) {
+  const parts = [];
+  if (interfaces > 0) {
+    parts.push(`${interfaces} Interface${interfaces !== 1 ? "s" : ""}`);
+  }
+  if (scripts > 0) {
+    parts.push(`${scripts} Script${scripts !== 1 ? "s" : ""}`);
+  }
+  return parts.join(", ");
+}
+function OfflineView({
+  item,
+  onBack
+}) {
+  useInput5((input, key) => {
+    if (input === "q" || key.escape || key.return) {
+      onBack();
+    }
+  });
+  const name = item.kind === "interface" ? `${item.step.workflowName} - ${item.step.displayName}` : `${item.step.workflowName} - ${item.step.displayName}`;
+  return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: name }),
+    /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx9(Text9, { color: "yellow", children: "This interface is offline." }),
+      /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Start the interface designer in MindStudio to connect to it." })
+    ] }),
+    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsxs8(Text9, { color: "cyan", bold: true, children: [
+      "\u276F",
+      " Back"
+    ] }) }),
+    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Enter/q/Esc Back" }) })
+  ] }) });
+}
+function AgentListView({
+  sessions,
+  onBack,
+  onSelectAgent,
+  onRefresh,
+  refreshStatus
+}) {
+  const refreshIndex = sessions.length;
+  const backIndex = sessions.length + 1;
+  const totalItems = sessions.length + 2;
+  const [cursorIndex, setCursorIndex] = useState12(0);
+  useEffect12(() => {
+    setCursorIndex(sessions.length > 0 ? 0 : backIndex);
+  }, [sessions.length, backIndex]);
+  useInput5((input, key) => {
+    if (input === "q" || key.escape) {
+      onBack();
+      return;
+    }
+    if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(totalItems - 1, prev + 1));
+    } else if (key.return) {
+      if (cursorIndex === backIndex) {
+        onBack();
+      } else if (cursorIndex === refreshIndex) {
+        onRefresh();
+      } else if (sessions[cursorIndex]) {
+        onSelectAgent(sessions[cursorIndex].appId);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
+    sessions.length === 0 ? /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx9(Text9, { color: "yellow", children: "No active editor sessions." }),
+      /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Open an app in MindStudio's editor to see sessions here." })
+    ] }) : /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: sessions.map((session, i) => {
+      const isSelected = i === cursorIndex;
+      const stats = formatCount(
+        session.customInterfaceSteps.length,
+        session.scriptSteps.length
+      );
+      return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
+        /* @__PURE__ */ jsxs8(Box8, { children: [
+          /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
+            isSelected ? "\u276F" : " ",
+            " ",
+            session.appName
+          ] }),
+          isSelected && /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " - Connect to this Agent" })
+        ] }),
+        /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+          "  ",
+          "https://app.mindstudio.ai/agents/",
+          session.appId,
+          "/edit"
+        ] }),
+        /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+          "  ",
+          stats
+        ] })
+      ] }, session.appId);
+    }) }),
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs8(Box8, { children: [
+        /* @__PURE__ */ jsxs8(
+          Text9,
+          {
+            color: cursorIndex === refreshIndex ? "cyan" : "white",
+            bold: cursorIndex === refreshIndex,
+            children: [
+              cursorIndex === refreshIndex ? "\u276F" : " ",
+              " Refresh"
+            ]
+          }
+        ),
+        getRefreshSuffix(refreshStatus) && /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+          " ",
+          getRefreshSuffix(refreshStatus)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs8(
+        Text9,
+        {
+          color: cursorIndex === backIndex ? "cyan" : "white",
+          bold: cursorIndex === backIndex,
+          children: [
+            cursorIndex === backIndex ? "\u276F" : " ",
+            " Back"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc Back"
+    ] }) })
+  ] }) });
+}
+function AgentDetailView({
+  session,
+  onBack,
+  onSelect,
+  onRefresh,
+  refreshStatus
+}) {
+  const [offlineItem, setOfflineItem] = useState12(null);
+  useEffect12(() => {
+    onRefresh();
+  }, []);
+  const interfaces = useMemo5(
+    () => session.customInterfaceSteps.map((step) => ({
+      kind: "interface",
+      appId: session.appId,
+      appName: session.appName,
+      step
+    })),
+    [session]
+  );
+  const scripts = useMemo5(
+    () => session.scriptSteps.map((step) => ({
+      kind: "script",
+      appId: session.appId,
+      appName: session.appName,
+      step
+    })),
+    [session]
+  );
+  const allItems = useMemo5(
+    () => [...interfaces, ...scripts],
+    [interfaces, scripts]
+  );
+  const refreshIndex = allItems.length;
+  const backIndex = allItems.length + 1;
+  const totalItems = allItems.length + 2;
+  const [cursorIndex, setCursorIndex] = useState12(0);
+  useEffect12(() => {
+    setCursorIndex(0);
+  }, [allItems.length]);
+  useInput5((input, key) => {
+    if (offlineItem) return;
+    if (input === "q" || key.escape) {
+      onBack();
+      return;
+    }
+    if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(totalItems - 1, prev + 1));
+    } else if (key.return) {
+      if (cursorIndex === backIndex) {
+        onBack();
+      } else if (cursorIndex === refreshIndex) {
+        onRefresh();
+      } else {
+        const item = allItems[cursorIndex];
+        if (item) {
+          if (isItemSelectable(item)) {
+            onSelect(item);
+          } else {
+            setOfflineItem(item);
+          }
+        }
+      }
+    }
+  });
+  if (offlineItem) {
+    return /* @__PURE__ */ jsx9(OfflineView, { item: offlineItem, onBack: () => setOfflineItem(null) });
+  }
+  const scriptsOffset = interfaces.length;
+  return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: session.appName }),
+    /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Select an interface or script to connect your local editor." }),
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+      interfaces.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Interfaces" }),
+        /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: interfaces.map((item, i) => {
+          const isSelected = i === cursorIndex;
+          const status = getSessionStatus(item);
+          const statusLabel = getStatusLabel(status);
+          return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
+            /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
+              isSelected ? "\u276F" : " ",
+              " ",
+              item.step.workflowName,
+              " - ",
+              item.step.displayName
+            ] }),
+            /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsxs8(Text9, { color: statusLabel.color, children: [
+              "  ",
+              statusLabel.text
+            ] }) })
+          ] }, `${item.step.workflowId}:${item.step.stepId}`);
+        }) })
+      ] }),
+      scripts.length > 0 && /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: interfaces.length > 0 ? 1 : 0, children: [
+        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Scripts" }),
+        /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: scripts.map((item, i) => {
+          const index = scriptsOffset + i;
+          const isSelected = index === cursorIndex;
+          return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
+            /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
+              isSelected ? "\u276F" : " ",
+              " ",
+              item.step.workflowName,
+              " - ",
+              item.step.displayName
+            ] }),
+            /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+              "  ",
+              item.step.entryFile
+            ] })
+          ] }, `${item.step.workflowId}:${item.step.stepId}`);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsxs8(Box8, { children: [
+          /* @__PURE__ */ jsxs8(
+            Text9,
+            {
+              color: cursorIndex === refreshIndex ? "cyan" : "white",
+              bold: cursorIndex === refreshIndex,
+              children: [
+                cursorIndex === refreshIndex ? "\u276F" : " ",
+                " Refresh"
+              ]
+            }
+          ),
+          getRefreshSuffix(refreshStatus) && /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+            " ",
+            getRefreshSuffix(refreshStatus)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs8(
+          Text9,
+          {
+            color: cursorIndex === backIndex ? "cyan" : "white",
+            bold: cursorIndex === backIndex,
+            children: [
+              cursorIndex === backIndex ? "\u276F" : " ",
+              " Back"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc Back"
+    ] }) })
+  ] }) });
+}
+function LocalDevView({
+  item,
+  onBack
+}) {
+  const mode = item.kind === "script" ? "script" : "interface";
+  let sessionId = "";
+  if (item.kind === "interface") {
+    const hotUpdateDomain = item.step.spaEditorSession?.hotUpdateDomain ?? "";
+    sessionId = hotUpdateDomain.replace(/^https?:\/\//, "").split(".")[0] || "";
+  }
+  const {
+    phase,
+    hasLocalCopy,
+    localPath,
+    outputLines,
+    errorMessage,
+    start,
+    stop,
+    deleteLocalCopy
+  } = useLocalInterface({
+    mode,
+    appId: item.appId,
+    stepId: item.step.stepId,
+    workflowId: item.step.workflowId,
+    sessionId
+  });
+  const name = `${item.step.workflowName} - ${item.step.displayName}`;
+  const isActive = phase === "cloning" || phase === "installing" || phase === "running" || phase === "deleting";
+  const wasActiveRef = useRef7(false);
+  useEffect12(() => {
+    if (isActive) {
+      wasActiveRef.current = true;
+    } else if (wasActiveRef.current && phase === "idle") {
+      wasActiveRef.current = false;
+      onBack();
+    }
+  }, [phase, isActive, onBack]);
+  if (isActive || phase === "error") {
+    return /* @__PURE__ */ jsx9(
+      InterfaceRunningView,
+      {
+        name,
+        phase,
+        outputLines,
+        errorMessage,
+        localPath,
+        onStop: stop,
+        onBack
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx9(
+    InterfaceSessionView,
+    {
+      item,
+      onStart: start,
+      onDelete: deleteLocalCopy,
+      onBack,
+      hasLocalCopy,
+      localPath
+    }
+  );
+}
+function InterfacesPage({ onBack }) {
+  const { sessions, loading, error, refreshStatus, refresh } = useEditorSessions();
+  const [selectedAppId, setSelectedAppId] = useState12(null);
+  const [selectedItem, setSelectedItem] = useState12(null);
+  if (loading) {
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", flexGrow: 1, paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
+      /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx9(Text9, { color: "cyan", children: /* @__PURE__ */ jsx9(Spinner5, { type: "dots" }) }),
+        /* @__PURE__ */ jsx9(Text9, { children: " Loading editor sessions..." })
+      ] })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", flexGrow: 1, paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
+      /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text9, { color: "red", children: error }) })
+    ] });
+  }
+  if (selectedItem) {
+    return /* @__PURE__ */ jsx9(
+      LocalDevView,
+      {
+        item: selectedItem,
+        onBack: () => setSelectedItem(null)
+      }
+    );
+  }
+  if (selectedAppId) {
+    const session = sessions.find((s) => s.appId === selectedAppId);
+    if (session) {
+      return /* @__PURE__ */ jsx9(
+        AgentDetailView,
+        {
+          session,
+          onBack: () => setSelectedAppId(null),
+          onSelect: (item) => {
+            setSelectedItem(item);
+          },
+          onRefresh: refresh,
+          refreshStatus
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx9(
+    AgentListView,
+    {
+      sessions,
+      onBack,
+      onSelectAgent: setSelectedAppId,
+      onRefresh: refresh,
+      refreshStatus
+    }
+  );
+}
+
+// src/tui/pages/OnboardingPage.tsx
+import { useEffect as useEffect14, useCallback as useCallback9, useState as useState14, useMemo as useMemo6 } from "react";
+import { Box as Box9, Text as Text10, useInput as useInput6 } from "ink";
+import Spinner6 from "ink-spinner";
 import chalk2 from "chalk";
 
 // src/tui/hooks/useAuth.ts
-import { useState as useState8, useCallback as useCallback6, useRef as useRef4, useEffect as useEffect8 } from "react";
-import open from "open";
+import { useState as useState13, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect13 } from "react";
+import open3 from "open";
 var POLL_INTERVAL = 2e3;
 var MAX_ATTEMPTS = 30;
 function useAuth() {
-  const [status, setStatus] = useState8("idle");
-  const [authUrl, setAuthUrl] = useState8(null);
-  const [timeRemaining, setTimeRemaining] = useState8(0);
-  const cancelledRef = useRef4(false);
-  const timerRef = useRef4(null);
-  useEffect8(() => {
+  const [status, setStatus] = useState13("idle");
+  const [authUrl, setAuthUrl] = useState13(null);
+  const [timeRemaining, setTimeRemaining] = useState13(0);
+  const cancelledRef = useRef8(false);
+  const timerRef = useRef8(null);
+  useEffect13(() => {
     return () => {
       cancelledRef.current = true;
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, []);
-  const cancel = useCallback6(() => {
+  const cancel = useCallback8(() => {
     cancelledRef.current = true;
     if (timerRef.current) {
       clearInterval(timerRef.current);
@@ -1108,7 +2076,7 @@ function useAuth() {
     setAuthUrl(null);
     setTimeRemaining(0);
   }, []);
-  const startAuth = useCallback6(() => {
+  const startAuth = useCallback8(() => {
     cancelledRef.current = false;
     const run = async () => {
       try {
@@ -1128,7 +2096,7 @@ function useAuth() {
             return Math.max(0, next);
           });
         }, 1e3);
-        await open(url);
+        await open3(url);
         for (let i = 0; i < MAX_ATTEMPTS; i++) {
           await new Promise((r) => setTimeout(r, POLL_INTERVAL));
           if (cancelledRef.current) return;
@@ -1136,6 +2104,9 @@ function useAuth() {
           if (result.status === "completed" && result.apiKey) {
             if (timerRef.current) clearInterval(timerRef.current);
             setApiKey(result.apiKey);
+            if (result.userId) {
+              setUserId(result.userId);
+            }
             setStatus("success");
             return;
           }
@@ -1166,12 +2137,12 @@ function useAuth() {
 }
 
 // src/tui/pages/OnboardingPage.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var SHIMMER_SPEED = 35;
 function useShimmerLogo() {
-  const [frame, setFrame] = useState9(0);
-  const lines = useMemo4(() => LogoString.split("\n"), []);
-  const totalChars = useMemo4(() => {
+  const [frame, setFrame] = useState14(0);
+  const lines = useMemo6(() => LogoString.split("\n"), []);
+  const totalChars = useMemo6(() => {
     let count = 0;
     for (const line of lines) {
       for (const ch of line) {
@@ -1181,13 +2152,13 @@ function useShimmerLogo() {
     return count;
   }, [lines]);
   const cycleLength = totalChars + 40;
-  useEffect9(() => {
+  useEffect14(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % cycleLength);
     }, SHIMMER_SPEED);
     return () => clearInterval(interval);
   }, [cycleLength]);
-  return useMemo4(() => {
+  return useMemo6(() => {
     const sweepPos = frame;
     const holdEnd = totalChars + 20;
     let charIdx = 0;
@@ -1234,66 +2205,66 @@ function OnboardingPage({ onComplete }) {
     cancel: cancelAuth
   } = useAuth();
   const shimmerLogo = useShimmerLogo();
-  useEffect9(() => {
+  useEffect14(() => {
     if (authStatus === "success") {
       const timer = setTimeout(() => onComplete(), 1500);
       return () => clearTimeout(timer);
     }
   }, [authStatus, onComplete]);
-  useEffect9(() => {
+  useEffect14(() => {
     return () => cancelAuth();
   }, []);
-  const handleAction = useCallback7(() => {
+  const handleAction = useCallback9(() => {
     cancelAuth();
     startAuth();
   }, [cancelAuth, startAuth]);
   const canAct = authStatus === "idle" || authStatus === "expired" || authStatus === "timeout";
-  useInput3((_input, key) => {
+  useInput6((_input, key) => {
     if (canAct && !key.ctrl) {
       handleAction();
     }
   });
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
-    /* @__PURE__ */ jsx7(Box6, { flexGrow: 1 }),
-    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
-      /* @__PURE__ */ jsx7(Text7, { children: shimmerLogo }),
-      /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
-      /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
-        authStatus === "idle" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Connect your MindStudio account to get started." }),
-          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "cyan", bold: true, children: "Press any key to Connect Account" }) })
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx10(Box9, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx10(Text10, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx10(Box9, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx10(Text10, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", alignItems: "center", children: [
+        authStatus === "idle" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          /* @__PURE__ */ jsx10(Text10, { color: "gray", children: "Connect your MindStudio account to get started." }),
+          /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { color: "cyan", bold: true, children: "Press any key to Connect Account" }) })
         ] }),
-        (authStatus === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          /* @__PURE__ */ jsx7(Text7, { color: "red", children: authStatus === "expired" ? "Authorization expired." : "Authorization timed out." }),
-          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "cyan", bold: true, children: "Press any key to Try Again" }) })
+        (authStatus === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          /* @__PURE__ */ jsx10(Text10, { color: "red", children: authStatus === "expired" ? "Authorization expired." : "Authorization timed out." }),
+          /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { color: "cyan", bold: true, children: "Press any key to Try Again" }) })
         ] }),
-        authStatus === "waiting" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          /* @__PURE__ */ jsxs6(Box6, { children: [
-            /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: /* @__PURE__ */ jsx7(Spinner4, { type: "dots" }) }),
-            /* @__PURE__ */ jsxs6(Text7, { children: [
+        authStatus === "waiting" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+          /* @__PURE__ */ jsxs9(Box9, { children: [
+            /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: /* @__PURE__ */ jsx10(Spinner6, { type: "dots" }) }),
+            /* @__PURE__ */ jsxs9(Text10, { children: [
               " ",
               "Waiting for browser authorization... (",
               timeRemaining,
               "s remaining)"
             ] })
           ] }),
-          authUrl && /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [
-            /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "If browser didn't open, visit:" }),
-            /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: authUrl })
+          authUrl && /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [
+            /* @__PURE__ */ jsx10(Text10, { color: "gray", children: "If browser didn't open, visit:" }),
+            /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: authUrl })
           ] })
         ] }),
-        authStatus === "success" && /* @__PURE__ */ jsxs6(Text7, { color: "green", children: [
+        authStatus === "success" && /* @__PURE__ */ jsxs9(Text10, { color: "green", children: [
           "\u2713",
           " Authenticated!"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(Box6, { flexGrow: 1 })
+    /* @__PURE__ */ jsx10(Box9, { flexGrow: 1 })
   ] });
 }
 
 // src/tui/App.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var MODEL_TYPE_MAP = {
   text: "llm_chat",
   image: "image_generation",
@@ -1301,7 +2272,7 @@ var MODEL_TYPE_MAP = {
 };
 function App({ runner }) {
   const { exit } = useApp();
-  const { stdout } = useStdout6();
+  const { stdout } = useStdout7();
   const {
     status: connectionStatus,
     environment,
@@ -1325,32 +2296,32 @@ function App({ runner }) {
     syncedModels,
     refresh: refreshSynced
   } = useSyncedModels(connectionStatus);
-  const shouldOnboard = getApiKey() === void 0;
-  const [page, setPage] = useState10(
+  const shouldOnboard = getApiKey() === void 0 || getUserId() === void 0;
+  const [page, setPage] = useState15(
     shouldOnboard ? "onboarding" : "dashboard"
   );
-  const [syncStatus, setSyncStatus] = useState10(
+  const [syncStatus, setSyncStatus] = useState15(
     "idle"
   );
-  const syncTimerRef = useRef5();
-  const lastSyncPayloadRef = useRef5("");
-  useEffect10(() => {
+  const syncTimerRef = useRef9();
+  const lastSyncPayloadRef = useRef9("");
+  useEffect15(() => {
     if (connectionStatus === "not_authenticated") {
       setPage("onboarding");
     }
   }, [connectionStatus]);
-  useEffect10(() => {
+  useEffect15(() => {
     if (page === "dashboard") {
       refreshAll();
     }
   }, [page]);
-  useEffect10(() => {
+  useEffect15(() => {
     if (connectionStatus === "connected" && syncedModels.length > 0) {
       runner.start(syncedModels);
     }
   }, [connectionStatus, syncedModels, runner]);
-  useEffect10(() => () => runner.stop(), [runner]);
-  const refreshAll = useCallback8(
+  useEffect15(() => () => runner.stop(), [runner]);
+  const refreshAll = useCallback10(
     async (silent = false) => {
       if (!silent) setSyncStatus("syncing");
       const [discoveredModels] = await Promise.all([
@@ -1380,23 +2351,26 @@ function App({ runner }) {
     },
     [refreshProviders, refreshModels, refreshSynced]
   );
-  useEffect10(() => {
+  useEffect15(() => {
     if (connectionStatus !== "connected" || page !== "dashboard") return;
     const interval = setInterval(() => refreshAll(true), 1500);
     return () => clearInterval(interval);
   }, [connectionStatus, page, refreshAll]);
-  const handleQuit = useCallback8(() => {
+  const handleQuit = useCallback10(() => {
     runner.stop();
     exit();
   }, [runner, exit]);
-  const handleOnboardingComplete = useCallback8(() => {
+  const handleOnboardingComplete = useCallback10(() => {
     retryConnection();
     refreshAll();
     setPage("dashboard");
   }, [retryConnection, refreshAll]);
-  const handleNavigate = useCallback8(
+  const handleNavigate = useCallback10(
     (id) => {
       switch (id) {
+        case "interfaces":
+          setPage("interfaces");
+          break;
         case "auth":
           setPage("onboarding");
           break;
@@ -1416,7 +2390,7 @@ function App({ runner }) {
   const subpageMenuItems = [
     { id: "back", label: "Back", description: "Return to dashboard" }
   ];
-  const handleSubpageNavigate = useCallback8(
+  const handleSubpageNavigate = useCallback10(
     (id) => {
       if (id === "back") {
         setPage("dashboard");
@@ -1426,11 +2400,11 @@ function App({ runner }) {
     },
     [handleNavigate]
   );
-  const [termSize, setTermSize] = useState10({
+  const [termSize, setTermSize] = useState15({
     rows: stdout?.rows ?? 24,
     columns: stdout?.columns ?? 80
   });
-  useEffect10(() => {
+  useEffect15(() => {
     if (!stdout) return;
     const onResize = () => {
       stdout.write("\x1B[2J\x1B[H");
@@ -1443,8 +2417,8 @@ function App({ runner }) {
   }, [stdout]);
   const termHeight = termSize.rows - 4;
   const compactHeader = termSize.rows <= 45 || termSize.columns <= 90;
-  return /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx8(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(Box10, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx11(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs10(Fragment6, { children: [
+    /* @__PURE__ */ jsx11(
       Header,
       {
         connection: connectionStatus,
@@ -1454,7 +2428,7 @@ function App({ runner }) {
         compact: compactHeader
       }
     ),
-    page === "dashboard" && /* @__PURE__ */ jsx8(
+    page === "dashboard" && /* @__PURE__ */ jsx11(
       DashboardPage,
       {
         requests,
@@ -1468,9 +2442,15 @@ function App({ runner }) {
         onNavigate: handleNavigate
       }
     ),
-    page === "setup" && /* @__PURE__ */ jsx8(SetupPage, { onBack: () => setPage("dashboard") }),
-    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx8(Box7, { flexGrow: 1 }),
-    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx8(
+    page === "setup" && /* @__PURE__ */ jsx11(SetupPage, { onBack: () => setPage("dashboard") }),
+    page === "interfaces" && /* @__PURE__ */ jsx11(
+      InterfacesPage,
+      {
+        onBack: () => setPage("dashboard")
+      }
+    ),
+    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
+    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(
       NavigationMenu,
       {
         items: subpageMenuItems,
@@ -1520,24 +2500,24 @@ async function checkForUpdate() {
 }
 
 // src/tui/components/UpdatePrompt.tsx
-import { Box as Box8, Text as Text8, useInput as useInput4 } from "ink";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box11, Text as Text11, useInput as useInput7 } from "ink";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function UpdatePrompt({
   currentVersion,
   latestVersion,
   onChoice
 }) {
-  useInput4((input) => {
+  useInput7((input) => {
     if (input.toLowerCase() === "y") {
       onChoice(true);
     } else {
       onChoice(false);
     }
   });
-  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
-    /* @__PURE__ */ jsxs8(Text8, { children: [
-      /* @__PURE__ */ jsx9(Text8, { color: "yellow", bold: true, children: "Update available:" }),
-      /* @__PURE__ */ jsxs8(Text8, { children: [
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
+    /* @__PURE__ */ jsxs11(Text11, { children: [
+      /* @__PURE__ */ jsx12(Text11, { color: "yellow", bold: true, children: "Update available:" }),
+      /* @__PURE__ */ jsxs11(Text11, { children: [
         " ",
         "v",
         currentVersion,
@@ -1547,20 +2527,20 @@ function UpdatePrompt({
         latestVersion
       ] })
     ] }),
-    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsxs8(Text8, { children: [
+    /* @__PURE__ */ jsx12(Box11, { marginTop: 1, children: /* @__PURE__ */ jsxs11(Text11, { children: [
       "Press ",
-      /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: "y" }),
+      /* @__PURE__ */ jsx12(Text11, { bold: true, color: "cyan", children: "y" }),
       " to update, any other key to skip"
     ] }) })
   ] });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 async function promptForUpdate(currentVersion, latestVersion) {
   return new Promise((resolve) => {
     const { unmount } = render(
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx13(
         UpdatePrompt,
         {
           currentVersion,
@@ -1586,7 +2566,7 @@ async function startTUI() {
     if (shouldUpdate) {
       console.log("\nUpdating to v" + update.latestVersion + "...\n");
       try {
-        execSync("npm install -g @mindstudio-ai/local-model-tunnel@latest", {
+        execSync2("npm install -g @mindstudio-ai/local-model-tunnel@latest", {
           stdio: "inherit"
         });
         console.log("\nRestarting...\n");
@@ -1602,7 +2582,7 @@ async function startTUI() {
   }
   const runner = new TunnelRunner();
   const { waitUntilExit } = render(
-    /* @__PURE__ */ jsx10(App, { runner }),
+    /* @__PURE__ */ jsx13(App, { runner }),
     {
       exitOnCtrlC: true
     }
@@ -1613,4 +2593,4 @@ async function startTUI() {
 export {
   startTUI
 };
-//# sourceMappingURL=tui-4ZB4JAV4.js.map
+//# sourceMappingURL=tui-BW6XKMWK.js.map