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

package/dist/tui-EAU7OA4X.js

@@ -0,0 +1,2839 @@
+import {
+  TunnelRunner,
+  deleteLocalInterfacePath,
+  detectAllProviderStatuses,
+  discoverAllModelsWithParameters,
+  getApiBaseUrl,
+  getApiKey,
+  getConfigPath,
+  getEditorSessions,
+  getEnvironment,
+  getLocalInterfacePath,
+  getLocalInterfacesDir,
+  getSyncedModels,
+  getUserId,
+  pollDeviceAuth,
+  requestDeviceAuth,
+  requestEvents,
+  setApiKey,
+  setLocalInterfacePath,
+  setUserId,
+  syncModels,
+  verifyApiKey
+} from "./chunk-KLOTDVWL.js";
+
+// src/tui/index.tsx
+import { render } from "ink";
+import { execFileSync, execSync as execSync2 } from "child_process";
+
+// src/tui/App.tsx
+import { useEffect as useEffect16, useCallback as useCallback10, useState as useState16, useRef as useRef9 } from "react";
+import { Box as Box10, useApp, useStdout as useStdout7 } from "ink";
+
+// src/tui/components/Header.tsx
+import { useState, useEffect, useMemo } from "react";
+import os from "os";
+import { Box, Text } from "ink";
+import chalk from "chalk";
+import { createRequire } from "module";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var require2 = createRequire(import.meta.url);
+var pkg = require2("../package.json");
+var LogoString = `       .=+-.     :++.
+      *@@@@@+  :%@@@@%:
+    .%@@@@@@#..@@@@@@@=
+  .*@@@@@@@--@@@@@@@#.**.
+  *@@@@@@@.-@@@@@@@@.#@@*
+.#@@@@@@@-.@@@@@@@* #@@@@%.
+=@@@@@@@-.@@@@@@@#.-@@@@@@+
+:@@@@@@:  +@@@@@#. .@@@@@@:
+  .++:     .-*-.     .++:`;
+function useActiveShimmerLogo(active) {
+  const [frame, setFrame] = useState(0);
+  const lines = useMemo(() => LogoString.split("\n"), []);
+  const totalChars = useMemo(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  useEffect(() => {
+    if (!active) return;
+    const interval = setInterval(() => {
+      setFrame((f) => f + 1);
+    }, 25);
+    return () => clearInterval(interval);
+  }, [active]);
+  return useMemo(() => {
+    if (!active) return null;
+    const waveLength = 20;
+    let charIdx = 0;
+    return lines.map((line) => {
+      let result = "";
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === " " || ch === "	") {
+          result += ch;
+          continue;
+        }
+        const phase = (charIdx - frame * 0.5) / waveLength * Math.PI * 2;
+        const brightness = 0.65 + 0.35 * Math.sin(phase);
+        if (brightness >= 0.85) {
+          result += chalk.cyanBright(ch);
+        } else if (brightness >= 0.65) {
+          result += chalk.cyan(ch);
+        } else {
+          result += chalk.rgb(0, 140, 160)(ch);
+        }
+        charIdx++;
+      }
+      return result;
+    }).join("\n");
+  }, [active, frame, lines, totalChars]);
+}
+var getConnectionDisplay = (status) => {
+  switch (status) {
+    case "connected":
+      return { color: "green", text: "Connected to Cloud" };
+    case "connecting":
+      return { color: "yellow", text: "Connecting..." };
+    case "not_authenticated":
+      return { color: "yellow", text: "Not Authenticated" };
+    case "disconnected":
+      return { color: "red", text: "Disconnected" };
+    default:
+      return { color: "red", text: "Error" };
+  }
+};
+function Header({
+  connection,
+  environment,
+  configPath,
+  connectionError,
+  compact,
+  hasActiveRequest
+}) {
+  const { color: connectionColor, text: connectionText } = getConnectionDisplay(connection);
+  const shimmerLogo = useActiveShimmerLogo(!compact && !!hasActiveRequest);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 1,
+      paddingY: 1,
+      width: "100%",
+      children: [
+        !compact && /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: shimmerLogo ? /* @__PURE__ */ jsx(Text, { children: shimmerLogo }) : /* @__PURE__ */ jsx(Text, { color: "cyan", children: LogoString }) }),
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: compact ? 0 : 4, children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: "MindStudio Local Tunnel" }),
+            compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+              " v",
+              pkg.version
+            ] }),
+            environment !== "prod" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { children: " " }),
+              /* @__PURE__ */ jsx(Text, { color: "yellow", bold: true, children: "[LOCAL]" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { color: connectionColor, children: [
+            "\u25CF ",
+            connectionText
+          ] }),
+          connectionError && /* @__PURE__ */ jsx(Text, { color: "red", children: connectionError }),
+          /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "Config: ",
+            configPath.replace(os.homedir(), "~")
+          ] }),
+          !compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "v",
+            pkg.version
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/tui/components/NavigationMenu.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { Box as Box2, Text as Text2, useInput, useStdout } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function NavigationMenu({
+  items,
+  onSelect,
+  title
+}) {
+  const { stdout } = useStdout();
+  const compact = (stdout?.rows ?? 24) < 40;
+  const getDefaultIndex = () => {
+    const firstIdx = items.findIndex((i) => !i.disabled && !i.isSeparator);
+    return firstIdx >= 0 ? firstIdx : 0;
+  };
+  const [selectedIndex, setSelectedIndex] = useState2(getDefaultIndex);
+  useEffect2(() => {
+    setSelectedIndex(getDefaultIndex());
+  }, [items]);
+  const selectableItems = items.filter((i) => !i.isSeparator);
+  const findNextEnabled = (from, direction) => {
+    let idx = from;
+    for (let i = 0; i < items.length; i++) {
+      idx = (idx + direction + items.length) % items.length;
+      if (!items[idx].disabled && !items[idx].isSeparator) return idx;
+    }
+    return from;
+  };
+  useInput((input, key) => {
+    if (input === "q" || key.escape) {
+      const backItem = items.find((i) => i.id === "back");
+      if (backItem) {
+        onSelect("back");
+      } else if (input === "q") {
+        onSelect("quit");
+      }
+      return;
+    }
+    if (key.upArrow || compact && key.leftArrow) {
+      setSelectedIndex((prev) => findNextEnabled(prev, -1));
+    } else if (key.downArrow || compact && key.rightArrow) {
+      setSelectedIndex((prev) => findNextEnabled(prev, 1));
+    } else if (key.return) {
+      const item = items[selectedIndex];
+      if (item && !item.disabled) {
+        onSelect(item.id);
+      }
+    }
+  });
+  const hasBack = items.some((i) => i.id === "back");
+  if (compact) {
+    const selectedItem = items[selectedIndex];
+    return /* @__PURE__ */ jsx2(
+      Box2,
+      {
+        flexDirection: "column",
+        paddingX: 1,
+        borderStyle: "single",
+        borderTop: true,
+        borderBottom: false,
+        borderLeft: false,
+        borderRight: false,
+        borderColor: "gray",
+        children: /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", gap: 1, children: items.map((item, index) => {
+          if (item.isSeparator) return null;
+          const isSelected = index === selectedIndex;
+          return /* @__PURE__ */ jsx2(
+            Text2,
+            {
+              color: item.disabled ? "gray" : isSelected ? "cyan" : "white",
+              bold: isSelected,
+              wrap: "truncate-end",
+              children: isSelected ? `\u276F ${item.label}` : `  ${item.label}`
+            },
+            item.id
+          );
+        }) })
+      }
+    );
+  }
+  const separatorExtraLines = items.filter(
+    (item, idx) => item.isSeparator && idx > 0
+  ).length;
+  const menuHeight = items.length + 4 + separatorExtraLines;
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      flexDirection: "column",
+      paddingX: 1,
+      marginBottom: 1,
+      borderStyle: "single",
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      borderColor: "gray",
+      children: [
+        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: title ?? "Actions" }) }),
+        /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map((item, index) => {
+          if (item.isSeparator) {
+            return /* @__PURE__ */ jsx2(Box2, { marginTop: index > 0 ? 1 : 0, children: item.label ? /* @__PURE__ */ jsx2(Text2, { bold: true, color: item.color ?? "gray", wrap: "truncate-end", children: item.label }) : null }, item.id);
+          }
+          const isSelected = index === selectedIndex;
+          const prefix = isSelected ? "\u276F" : " ";
+          if (item.disabled) {
+            return /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
+              prefix,
+              " ",
+              item.label,
+              item.disabledReason ? ` (${item.disabledReason})` : ""
+            ] }) }, item.id);
+          }
+          return /* @__PURE__ */ jsxs2(Box2, { height: 1, overflow: "hidden", children: [
+            /* @__PURE__ */ jsxs2(
+              Text2,
+              {
+                color: isSelected ? "cyan" : "white",
+                bold: isSelected,
+                wrap: "truncate-end",
+                children: [
+                  prefix,
+                  " ",
+                  item.label
+                ]
+              }
+            ),
+            isSelected && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
+              " ",
+              "- ",
+              item.description
+            ] })
+          ] }, item.id);
+        }) }),
+        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", wrap: "truncate-end", children: hasBack ? "Up/Down Navigate \u2022 Enter Select \u2022 q/Esc Back" : "Up/Down Navigate \u2022 Enter Select \u2022 q Quit" }) })
+      ]
+    }
+  );
+}
+
+// src/tui/hooks/useConnection.ts
+import { useState as useState3, useEffect as useEffect3, useCallback } from "react";
+function useConnection() {
+  const [status, setStatus] = useState3("connecting");
+  const [error, setError] = useState3(null);
+  const environment = getEnvironment();
+  const connect = useCallback(async () => {
+    setStatus("connecting");
+    setError(null);
+    const apiKey = getApiKey();
+    const userId = getUserId();
+    if (!apiKey || !userId) {
+      setStatus("not_authenticated");
+      return;
+    }
+    try {
+      const isValid = await verifyApiKey();
+      if (isValid) {
+        setStatus("connected");
+      } else {
+        setStatus("not_authenticated");
+      }
+    } catch (err) {
+      setStatus("error");
+      setError(err instanceof Error ? err.message : "Connection failed");
+    }
+  }, []);
+  useEffect3(() => {
+    connect();
+  }, [connect]);
+  return {
+    status,
+    environment,
+    error,
+    retry: connect
+  };
+}
+
+// src/tui/interfaces/hooks/useEditorSessions.ts
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback2, useRef } from "react";
+function useEditorSessions() {
+  const [sessions, setSessions] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  const [refreshStatus, setRefreshStatus] = useState4("idle");
+  const initialLoadDone = useRef(false);
+  const timerRef = useRef();
+  const pollRef = useRef();
+  const refresh = useCallback2(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);
+    }
+  }, []);
+  useEffect4(() => {
+    refresh();
+  }, [refresh]);
+  useEffect4(() => {
+    pollRef.current = setInterval(async () => {
+      if (!initialLoadDone.current) return;
+      try {
+        const data = await getEditorSessions();
+        setSessions(data);
+      } catch {
+      }
+    }, 5e3);
+    return () => clearInterval(pollRef.current);
+  }, []);
+  useEffect4(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return { sessions, loading, error, refreshStatus, refresh };
+}
+
+// src/tui/models/hooks/useSetupProviders.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback3, useRef as useRef2 } from "react";
+function useSetupProviders() {
+  const [providers, setProviders] = useState5([]);
+  const [loading, setLoading] = useState5(true);
+  const [refreshing, setRefreshing] = useState5(false);
+  const initialLoadDone = useRef2(false);
+  const refresh = useCallback3(async () => {
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshing(true);
+    }
+    const statuses = await detectAllProviderStatuses();
+    setProviders(statuses);
+    initialLoadDone.current = true;
+    setLoading(false);
+    setRefreshing(false);
+  }, []);
+  useEffect5(() => {
+    refresh();
+  }, [refresh]);
+  return { providers, loading, refreshing, refresh };
+}
+
+// src/tui/models/hooks/useModels.ts
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback4, useRef as useRef3 } from "react";
+function useModels() {
+  const [models, setModels] = useState6([]);
+  const [warnings, setWarnings] = useState6([]);
+  const [loading, setLoading] = useState6(true);
+  const [refreshing, setRefreshing] = useState6(false);
+  const initialLoadDone = useRef3(false);
+  const refresh = useCallback4(async () => {
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshing(true);
+    }
+    try {
+      const discoveredModels = await discoverAllModelsWithParameters();
+      setModels(discoveredModels.filter((m) => !m.statusHint));
+      setWarnings(discoveredModels.filter((m) => !!m.statusHint));
+      initialLoadDone.current = true;
+      return discoveredModels;
+    } catch {
+      return [];
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+  useEffect6(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    models,
+    warnings,
+    loading,
+    refreshing,
+    refresh
+  };
+}
+
+// src/tui/models/hooks/useRequests.ts
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback5, useRef as useRef4 } from "react";
+function useRequests(maxHistory = 50) {
+  const [requests, setRequests] = useState7([]);
+  const requestsRef = useRef4(/* @__PURE__ */ new Map());
+  useEffect7(() => {
+    const interval = setInterval(() => {
+      setRequests((prev) => {
+        const hasActive = prev.some((r) => r.status === "processing");
+        return hasActive ? [...prev] : prev;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect7(() => {
+    const unsubStart = requestEvents.onStart((event) => {
+      const entry = {
+        id: event.id,
+        modelId: event.modelId,
+        requestType: event.requestType,
+        status: "processing",
+        startTime: event.timestamp
+      };
+      requestsRef.current.set(event.id, entry);
+      setRequests((prev) => [...prev, entry].slice(-maxHistory));
+    });
+    const unsubProgress = requestEvents.onProgress((event) => {
+      const existing = requestsRef.current.get(event.id);
+      if (existing && existing.status === "processing") {
+        const updated = {
+          ...existing,
+          ...event.content !== void 0 && { content: event.content },
+          ...event.step !== void 0 && { step: event.step },
+          ...event.totalSteps !== void 0 && {
+            totalSteps: event.totalSteps
+          }
+        };
+        requestsRef.current.set(event.id, updated);
+        setRequests(
+          (prev) => prev.map((r) => r.id === event.id ? updated : r)
+        );
+      }
+    });
+    const unsubComplete = requestEvents.onComplete((event) => {
+      const existing = requestsRef.current.get(event.id);
+      if (existing) {
+        const updated = {
+          ...existing,
+          status: event.success ? "completed" : "failed",
+          endTime: Date.now(),
+          duration: event.duration,
+          result: event.result,
+          error: event.error
+        };
+        requestsRef.current.set(event.id, updated);
+        setRequests(
+          (prev) => prev.map((r) => r.id === event.id ? updated : r)
+        );
+      }
+    });
+    return () => {
+      unsubStart();
+      unsubProgress();
+      unsubComplete();
+    };
+  }, [maxHistory]);
+  const activeCount = requests.filter((r) => r.status === "processing").length;
+  const clear = useCallback5(() => {
+    requestsRef.current.clear();
+    setRequests([]);
+  }, []);
+  return {
+    requests,
+    activeCount,
+    clear
+  };
+}
+
+// src/tui/models/hooks/useRegisteredModels.ts
+import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6 } from "react";
+function useSyncedModels(connectionStatus) {
+  const [syncedNames, setSyncedNames] = useState8(/* @__PURE__ */ new Set());
+  const [syncedModels, setSyncedModels] = useState8([]);
+  const refresh = useCallback6(async () => {
+    if (connectionStatus !== "connected") {
+      setSyncedNames(/* @__PURE__ */ new Set());
+      setSyncedModels([]);
+      return;
+    }
+    try {
+      const models = await getSyncedModels();
+      setSyncedNames(new Set(models.map((m) => m.name)));
+      setSyncedModels(models);
+    } catch {
+    }
+  }, [connectionStatus]);
+  useEffect8(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    syncedNames,
+    syncedModels,
+    refresh
+  };
+}
+
+// src/tui/models/pages/DashboardPage.tsx
+import { useMemo as useMemo2 } from "react";
+import { Box as Box4, Text as Text4, useStdout as useStdout3 } from "ink";
+import Spinner2 from "ink-spinner";
+
+// 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";
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function getRequestTypeLabel(type) {
+  switch (type) {
+    case "llm_chat":
+      return { label: "text", color: "gray" };
+    case "image_generation":
+      return { label: "image", color: "gray" };
+    case "video_generation":
+      return { label: "video", color: "gray" };
+    default:
+      return { label: type, color: "gray" };
+  }
+}
+function snippetLine(content, maxWidth) {
+  const flat = content.replace(/\s+/g, " ").trim();
+  if (flat.length <= maxWidth) return flat;
+  return "\u2026" + flat.slice(-(maxWidth - 1));
+}
+function RequestItem({
+  request,
+  width
+}) {
+  const time = formatTime(request.startTime);
+  const typeLabel = getRequestTypeLabel(request.requestType);
+  const snippetIndent = "   ";
+  const snippetWidth = width - snippetIndent.length - 2;
+  if (request.status === "processing") {
+    const elapsed = Date.now() - request.startTime;
+    const snippet = request.content && request.requestType === "llm_chat" ? snippetLine(request.content, snippetWidth) : null;
+    const stepProgress = request.step !== void 0 && request.totalSteps ? `Step ${request.step}/${request.totalSteps}` : null;
+    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Box3, { children: [
+        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: /* @__PURE__ */ jsx3(Spinner, { type: "dots" }) }),
+        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+          " ",
+          time,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
+        /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
+        /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
+        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+          " ",
+          formatDuration(elapsed),
+          "..."
+        ] })
+      ] }),
+      snippet && /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+        snippetIndent,
+        snippet
+      ] }),
+      stepProgress && /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+        snippetIndent,
+        stepProgress
+      ] })
+    ] });
+  }
+  if (request.status === "completed") {
+    const duration = request.duration ? formatDuration(request.duration) : "";
+    let resultInfo = "";
+    if (request.result?.chars) {
+      resultInfo = ` \xB7 ${request.result.chars} chars`;
+    } else if (request.result?.imageSize) {
+      resultInfo = ` \xB7 ${Math.round(request.result.imageSize / 1024)}KB`;
+    } else if (request.result?.videoSize) {
+      resultInfo = ` \xB7 ${Math.round(request.result.videoSize / 1024 / 1024)}MB`;
+    }
+    const snippet = request.content && request.requestType === "llm_chat" ? snippetLine(request.content, snippetWidth) : null;
+    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Box3, { children: [
+        /* @__PURE__ */ jsx3(Text3, { color: "green", children: "\u2713" }),
+        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+          " ",
+          time,
+          " "
+        ] }),
+        /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
+        /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
+        /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
+        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+          " ",
+          duration,
+          resultInfo
+        ] })
+      ] }),
+      snippet && /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+        snippetIndent,
+        snippet
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: /* @__PURE__ */ jsxs3(Box3, { children: [
+    /* @__PURE__ */ jsx3(Text3, { color: "red", children: "\u25CF" }),
+    /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+      " ",
+      time,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
+    /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
+    /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
+    /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
+      " ",
+      request.error || "Failed"
+    ] })
+  ] }) });
+}
+function RequestLog({
+  requests,
+  maxVisible = 8,
+  hasModels = true
+}) {
+  const { stdout } = useStdout2();
+  const width = stdout?.columns ?? 80;
+  const activeRequests = requests.filter((r) => r.status === "processing");
+  const completedRequests = requests.filter((r) => r.status !== "processing");
+  const itemLines = (r) => {
+    if (r.requestType === "llm_chat" && r.content) return 2;
+    if (r.status === "processing" && r.step !== void 0) return 2;
+    return 1;
+  };
+  let completedToShow = [];
+  let linesUsed = activeRequests.reduce((sum, r) => sum + itemLines(r), 0);
+  for (let i = completedRequests.length - 1; i >= 0 && linesUsed < maxVisible; i--) {
+    const r = completedRequests[i];
+    const lines = itemLines(r);
+    if (linesUsed + lines <= maxVisible) {
+      completedToShow.unshift(r);
+      linesUsed += lines;
+    } else {
+      break;
+    }
+  }
+  const visibleRequests = [...completedToShow, ...activeRequests];
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      flexDirection: "column",
+      flexGrow: 1,
+      width: "100%",
+      paddingX: 1,
+      marginTop: 1,
+      children: [
+        /* @__PURE__ */ jsxs3(Box3, { children: [
+          /* @__PURE__ */ jsx3(Text3, { bold: true, underline: true, color: "white", children: "Generation Requests" }),
+          activeRequests.length > 0 && /* @__PURE__ */ jsxs3(Text3, { color: "cyan", children: [
+            " (",
+            activeRequests.length,
+            " active)"
+          ] })
+        ] }),
+        requests.length === 0 ? /* @__PURE__ */ jsx3(Box3, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx3(Text3, { color: "gray", children: hasModels ? "Tunnel is live \u2014 requests will appear here when models are used in MindStudio" : "Start a model to begin receiving generation requests." }) }) : /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: visibleRequests.map((request) => /* @__PURE__ */ jsx3(RequestItem, { request, width }, request.id)) })
+      ]
+    }
+  );
+}
+
+// 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");
+  if (!param) return null;
+  return param.comfyWorkflowOptions.availableWorkflows.length;
+}
+function getCapabilityLabel(capability) {
+  switch (capability) {
+    case "text":
+      return { label: "Text Generation", color: "gray" };
+    case "image":
+      return { label: "Image Generation", color: "gray" };
+    case "video":
+      return { label: "Video Generation", color: "gray" };
+    default:
+      return { label: capability, color: "gray" };
+  }
+}
+function DashboardPage({
+  requests,
+  models,
+  modelWarnings = [],
+  providers,
+  providersLoading,
+  syncedNames,
+  modelsLoading,
+  syncStatus = "idle",
+  editorSessions,
+  editorsLoading,
+  onNavigate
+}) {
+  const { stdout } = useStdout3();
+  const installedProviders = providers.filter(({ status }) => status.installed);
+  const provNameWidth = Math.max(
+    ...installedProviders.map((p) => p.provider.displayName.length),
+    8
+  );
+  const provStatusWidth = "Local Server Running".length;
+  const allModelNames = new Set(models.map((m) => m.name));
+  const unavailableSynced = [...syncedNames].filter(
+    (name) => !allModelNames.has(name)
+  );
+  const syncDescription = syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "\u2713 Synced" : "Re-detect providers and sync models to MindStudio";
+  const menuItems = useMemo2(() => {
+    return [
+      {
+        id: "interfaces",
+        label: "Connect to Agent",
+        description: "Connect your local editor to a MindStudio interface or script"
+      },
+      {
+        id: "refresh",
+        label: "Sync Models",
+        description: syncDescription
+      },
+      {
+        id: "setup",
+        label: "Manage Providers",
+        description: "Manage local AI providers"
+      },
+      {
+        id: "auth",
+        label: "Re-authenticate",
+        description: "Re-authenticate with MindStudio"
+      },
+      {
+        id: "quit",
+        label: "Exit",
+        description: "Quit the application"
+      }
+    ];
+  }, [syncDescription]);
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  const compactHeader = (stdout?.rows ?? 24) <= 45 || (stdout?.columns ?? 80) <= 90;
+  const headerLines = compactHeader ? 7 : 14;
+  const providerContentLines = providersLoading ? 1 : installedProviders.length === 0 ? 2 : installedProviders.length;
+  const providersLines = 3 + providerContentLines;
+  const editorsContentLines = editorsLoading ? 1 : editorSessions.length === 0 ? 1 : editorSessions.length;
+  const editorsLines = 3 + editorsContentLines;
+  const modelContentLines = modelsLoading ? 1 : models.length === 0 && unavailableSynced.length === 0 && modelWarnings.length === 0 ? 2 : models.length + modelWarnings.length + (unavailableSynced.length > 0 ? 1 + unavailableSynced.length : 0);
+  const modelsLines = 3 + modelContentLines;
+  const requestLogOverhead = 3;
+  const compactMenu = termHeight + 4 < 40;
+  const menuLines = compactMenu ? 2 : menuItems.length + 6;
+  const usedLines = headerLines + providersLines + editorsLines + modelsLines + requestLogOverhead + menuLines;
+  const maxVisible = Math.max(3, termHeight - usedLines);
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Open Agents" }),
+      editorsLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
+        /* @__PURE__ */ jsx4(Text4, { children: " Loading editor sessions..." })
+      ] }) : editorSessions.length === 0 ? /* @__PURE__ */ jsx4(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Agents you are editing in the MindStudio IDE will appear here." }) }) : /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", marginTop: 1, children: editorSessions.map((session) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsx4(Text4, { color: "white", children: session.appName }) }, session.appId)) })
+    ] }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "AI Model Providers" }),
+      providersLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
+        /* @__PURE__ */ jsx4(Text4, { children: " Detecting providers..." })
+      ] }) : installedProviders.length === 0 ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "No providers installed." }),
+        /* @__PURE__ */ jsx4(Text4, { color: "gray", children: 'Use "Manage Providers" below to install one.' })
+      ] }) : /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", marginTop: 1, children: installedProviders.map(({ provider, status }) => {
+        const url = provider.baseUrl;
+        const statusColor = status.running ? "green" : "yellow";
+        const statusText = status.running ? "Local Server Running" : "Installed (not running)";
+        return /* @__PURE__ */ jsxs4(Box4, { children: [
+          /* @__PURE__ */ jsx4(Text4, { color: "white", children: provider.displayName.padEnd(provNameWidth + 2) }),
+          /* @__PURE__ */ jsx4(Text4, { color: statusColor, children: statusText.padEnd(provStatusWidth + 2) }),
+          status.running && /* @__PURE__ */ jsx4(Text4, { color: "gray", children: url })
+        ] }, provider.name);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Local Models" }),
+      modelsLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
+        /* @__PURE__ */ jsx4(Text4, { children: " Discovering models..." })
+      ] }) : models.length === 0 && unavailableSynced.length === 0 && modelWarnings.length === 0 ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "No models found." }),
+        /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Download models using your provider (e.g., ollama pull llama3.2)" })
+      ] }) : /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
+        models.map((model) => {
+          const cap = getCapabilityLabel(model.capability);
+          const isSynced = syncedNames.has(model.name);
+          const displayProvider = providers.find((p) => p.provider.name === model.provider)?.provider.displayName ?? model.provider;
+          const workflowCount = getWorkflowCount(model);
+          const workflowSuffix = workflowCount !== null ? ` (${workflowCount} workflow${workflowCount !== 1 ? "s" : ""}, ${isSynced ? workflowCount : 0} synced)` : "";
+          return /* @__PURE__ */ jsxs4(Box4, { children: [
+            /* @__PURE__ */ jsx4(Text4, { color: isSynced ? "green" : "gray", children: isSynced ? "\u25CF" : "\u25CB" }),
+            /* @__PURE__ */ jsx4(Text4, { color: "white", children: ` ${model.name}` }),
+            workflowSuffix && /* @__PURE__ */ jsx4(Text4, { color: "gray", children: workflowSuffix }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: displayProvider }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
+            /* @__PURE__ */ jsx4(Text4, { color: cap.color, children: cap.label })
+          ] }, `${model.provider}:${model.name}`);
+        }),
+        modelWarnings.map((warning) => {
+          const displayProvider = providers.find((p) => p.provider.name === warning.provider)?.provider.displayName ?? warning.provider;
+          return /* @__PURE__ */ jsxs4(Box4, { children: [
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "\u25CB" }),
+            /* @__PURE__ */ jsx4(Text4, { color: "white", children: ` ${warning.name}` }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: displayProvider }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
+            /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: warning.statusHint })
+          ] }, `${warning.provider}:${warning.name}`);
+        }),
+        unavailableSynced.length > 0 && /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: models.length > 0 ? 1 : 0, children: [
+          /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Synced but provider not running:" }),
+          unavailableSynced.map((name) => /* @__PURE__ */ jsxs4(Box4, { children: [
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "\u25CB" }),
+            /* @__PURE__ */ jsx4(Text4, { color: "gray", children: ` ${name}` })
+          ] }, name))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      RequestLog,
+      {
+        requests,
+        maxVisible,
+        hasModels: models.length > 0
+      }
+    ),
+    /* @__PURE__ */ jsx4(NavigationMenu, { items: menuItems, onSelect: onNavigate })
+  ] });
+}
+
+// src/tui/models/pages/SetupPage.tsx
+import { useState as useState9, useMemo as useMemo4, useEffect as useEffect9 } from "react";
+import { Box as Box5, Text as Text6, useInput as useInput2, useStdout as useStdout5 } from "ink";
+import Spinner3 from "ink-spinner";
+
+// src/tui/components/MarkdownText.tsx
+import { useMemo as useMemo3 } from "react";
+import { Text as Text5, useStdout as useStdout4 } from "ink";
+import chalk2 from "chalk";
+import { marked } from "marked";
+import { markedTerminal } from "marked-terminal";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var codeStyle = chalk2.cyan;
+var identity = (s) => s;
+function renderMarkdown(content, width) {
+  marked.use(
+    markedTerminal({
+      width,
+      codespan: codeStyle,
+      link: identity,
+      href: identity
+    })
+  );
+  marked.use({
+    renderer: {
+      code({ text }) {
+        const lines = text.trim().split("\n").map((l) => "    " + codeStyle(l)).join("\n");
+        return lines + "\n\n";
+      },
+      link({ href, text }) {
+        if (text && text !== href) {
+          return `${text} (${href})`;
+        }
+        return href;
+      }
+    }
+  });
+  return marked.parse(content).trimEnd();
+}
+
+// src/tui/models/pages/SetupPage.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ProviderDetailView({
+  provider,
+  onBack
+}) {
+  const [scrollOffset, setScrollOffset] = useState9(0);
+  const { stdout } = useStdout5();
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  const headerHeight = 14;
+  const footerLines = 6;
+  const contentPadding = 2;
+  const viewHeight = termHeight - headerHeight - footerLines - contentPadding;
+  const contentWidth = (stdout?.columns ?? 80) - 4;
+  const renderedLines = useMemo4(() => {
+    const rendered = renderMarkdown(provider.readme, contentWidth);
+    return rendered.split("\n");
+  }, [provider.readme, contentWidth]);
+  const maxScroll = Math.max(0, renderedLines.length - viewHeight);
+  useInput2((input, key) => {
+    if (input === "q" || key.escape || key.return) {
+      onBack();
+      return;
+    }
+    if (key.upArrow) {
+      setScrollOffset((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setScrollOffset((prev) => Math.min(maxScroll, prev + 1));
+    }
+  });
+  const visibleContent = renderedLines.slice(scrollOffset, scrollOffset + viewHeight).join("\n");
+  const scrollbar = useMemo4(() => {
+    if (maxScroll === 0) return null;
+    const thumbSize = Math.max(
+      1,
+      Math.round(viewHeight / renderedLines.length * viewHeight)
+    );
+    const thumbPos = Math.round(
+      scrollOffset / maxScroll * (viewHeight - thumbSize)
+    );
+    return Array.from(
+      { length: viewHeight },
+      (_, i) => i >= thumbPos && i < thumbPos + thumbSize
+    );
+  }, [scrollOffset, maxScroll, viewHeight, renderedLines.length]);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Box5, { height: viewHeight, children: [
+      /* @__PURE__ */ jsx6(
+        Box5,
+        {
+          flexDirection: "column",
+          paddingX: 1,
+          paddingY: 1,
+          flexGrow: 1,
+          overflow: "hidden",
+          children: /* @__PURE__ */ jsx6(Text6, { children: visibleContent })
+        }
+      ),
+      scrollbar && /* @__PURE__ */ jsx6(Box5, { flexDirection: "column", children: scrollbar.map((isThumb, i) => /* @__PURE__ */ jsx6(
+        Text6,
+        {
+          color: isThumb ? "cyan" : "gray",
+          dimColor: !isThumb,
+          children: isThumb ? "\u2503" : "\u2502"
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs5(
+      Box5,
+      {
+        flexDirection: "column",
+        paddingX: 1,
+        borderStyle: "single",
+        borderTop: true,
+        borderBottom: false,
+        borderLeft: false,
+        borderRight: false,
+        borderColor: "gray",
+        children: [
+          /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx6(Text6, { color: "gray", children: "Actions" }) }),
+          /* @__PURE__ */ jsxs5(Box5, { children: [
+            /* @__PURE__ */ jsxs5(Text6, { color: "cyan", bold: true, children: [
+              "\u276F",
+              " Back"
+            ] }),
+            /* @__PURE__ */ jsx6(Text6, { color: "gray", children: " - Return to providers" })
+          ] }),
+          /* @__PURE__ */ jsx6(Box5, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "truncate-end", children: [
+            "Up/Down Scroll ",
+            "\u2022",
+            " Enter/q/Esc Back",
+            maxScroll > 0 && ` \u2022 ${Math.round(scrollOffset / maxScroll * 100)}%`
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function SetupPage({ onBack }) {
+  const { providers, loading } = useSetupProviders();
+  const [selectedProvider, setSelectedProvider] = useState9(null);
+  const running = useMemo4(
+    () => providers.filter((p) => p.status.running),
+    [providers]
+  );
+  const installed = useMemo4(
+    () => providers.filter((p) => p.status.installed && !p.status.running),
+    [providers]
+  );
+  const notInstalled = useMemo4(
+    () => providers.filter((p) => !p.status.installed),
+    [providers]
+  );
+  const allProviders = useMemo4(
+    () => [...running, ...installed, ...notInstalled],
+    [running, installed, notInstalled]
+  );
+  const totalItems = allProviders.length + 1;
+  const backIndex = allProviders.length;
+  const [cursorIndex, setCursorIndex] = useState9(0);
+  useEffect9(() => {
+    setCursorIndex(0);
+  }, [allProviders.length]);
+  useInput2((input, key) => {
+    if (selectedProvider) 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 (allProviders[cursorIndex]) {
+        setSelectedProvider(allProviders[cursorIndex].provider.name);
+      }
+    }
+  });
+  if (selectedProvider) {
+    const found = providers.find((p) => p.provider.name === selectedProvider);
+    if (found) {
+      return /* @__PURE__ */ jsx6(
+        ProviderDetailView,
+        {
+          provider: found.provider,
+          onBack: () => setSelectedProvider(null)
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx6(Box5, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx6(Text6, { bold: true, color: "white", underline: true, children: "Manage Providers" }),
+    /* @__PURE__ */ jsx6(Text6, { color: "gray", children: "Select a provider to view its setup guide." }),
+    loading ? /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: /* @__PURE__ */ jsx6(Spinner3, { type: "dots" }) }),
+      /* @__PURE__ */ jsx6(Text6, { children: " Detecting providers..." })
+    ] }) : /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+      running.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(Text6, { bold: true, color: "green", children: "Running" }),
+        running.map(({ provider }, i) => {
+          const index = i;
+          const isSelected = index === cursorIndex;
+          return /* @__PURE__ */ jsxs5(
+            Box5,
+            {
+              flexDirection: "column",
+              marginTop: i > 0 ? 1 : 0,
+              children: [
+                /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                  Text6,
+                  {
+                    color: isSelected ? "cyan" : "white",
+                    bold: isSelected,
+                    children: [
+                      isSelected ? "\u276F" : " ",
+                      " ",
+                      "\u25CF",
+                      " ",
+                      provider.displayName
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
+                  "   ",
+                  provider.description
+                ] })
+              ]
+            },
+            provider.name
+          );
+        })
+      ] }),
+      installed.length > 0 && /* @__PURE__ */ jsxs5(
+        Box5,
+        {
+          flexDirection: "column",
+          marginTop: running.length > 0 ? 1 : 0,
+          children: [
+            /* @__PURE__ */ jsx6(Text6, { bold: true, color: "yellow", children: "Installed" }),
+            installed.map(({ provider, status }, i) => {
+              const index = running.length + i;
+              const isSelected = index === cursorIndex;
+              return /* @__PURE__ */ jsxs5(
+                Box5,
+                {
+                  flexDirection: "column",
+                  marginTop: i > 0 ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                      Text6,
+                      {
+                        color: isSelected ? "cyan" : "white",
+                        bold: isSelected,
+                        children: [
+                          isSelected ? "\u276F" : " ",
+                          " ",
+                          "\u25CB",
+                          " ",
+                          provider.displayName
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
+                      "   ",
+                      provider.description
+                    ] })
+                  ]
+                },
+                provider.name
+              );
+            })
+          ]
+        }
+      ),
+      notInstalled.length > 0 && /* @__PURE__ */ jsxs5(
+        Box5,
+        {
+          flexDirection: "column",
+          marginTop: running.length > 0 || installed.length > 0 ? 1 : 0,
+          children: [
+            /* @__PURE__ */ jsx6(Text6, { bold: true, color: "gray", children: "Not Installed" }),
+            notInstalled.map(({ provider }, i) => {
+              const index = running.length + installed.length + i;
+              const isSelected = index === cursorIndex;
+              return /* @__PURE__ */ jsxs5(
+                Box5,
+                {
+                  flexDirection: "column",
+                  marginTop: i > 0 ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                      Text6,
+                      {
+                        color: isSelected ? "cyan" : "white",
+                        bold: isSelected,
+                        children: [
+                          isSelected ? "\u276F" : " ",
+                          " ",
+                          provider.displayName
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
+                      "   ",
+                      provider.description
+                    ] })
+                  ]
+                },
+                provider.name
+              );
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(
+        Text6,
+        {
+          color: cursorIndex === backIndex ? "cyan" : "white",
+          bold: cursorIndex === backIndex,
+          children: [
+            cursorIndex === backIndex ? "\u276F" : " ",
+            " Back"
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(Text6, { color: "gray", children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc Back"
+    ] }) })
+  ] }) });
+}
+
+// src/tui/interfaces/pages/InterfacesPage.tsx
+import { useState as useState13, useMemo as useMemo6, useEffect as useEffect13, useRef as useRef7 } from "react";
+import { Box as Box8, Text as Text9, useInput as useInput5 } from "ink";
+
+// src/tui/interfaces/hooks/useLocalInterface.ts
+import { useState as useState10, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect10 } 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] = useState10(() => {
+    const existing = getLocalInterfacePath(key);
+    if (!existing) return false;
+    try {
+      return fs.existsSync(existing);
+    } catch {
+      return false;
+    }
+  });
+  const [phase, setPhase] = useState10("idle");
+  const [outputLines, setOutputLines] = useState10([]);
+  const [errorMessage, setErrorMessage] = useState10(null);
+  const processRef = useRef5(null);
+  const mountedRef = useRef5(true);
+  const stoppedRef = useRef5(false);
+  useEffect10(() => {
+    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 useState11, useEffect as useEffect11 } 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] = useState11(0);
+  useEffect11(() => {
+    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 useState12, useMemo as useMemo5, useRef as useRef6, useEffect as useEffect12 } 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 = useMemo5(() => {
+    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] = useState12(0);
+  const [copiedId, setCopiedId] = useState12(null);
+  const copiedTimerRef = useRef6();
+  useEffect12(() => {
+    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 { 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] = useState13(0);
+  useEffect13(() => {
+    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" }),
+    /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Don't see your agent? Make sure it's open in the MindStudio editor." }),
+    sessions.length === 0 ? /* @__PURE__ */ jsx9(Box8, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx9(Text9, { color: "yellow", children: "No active editor sessions." }) }) : /* @__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"
+            ] }),
+            stats !== "" && /* @__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] = useState13(null);
+  const interfaces = useMemo6(
+    () => session.customInterfaceSteps.map((step) => ({
+      kind: "interface",
+      appId: session.appId,
+      appName: session.appName,
+      step
+    })),
+    [session]
+  );
+  const scripts = useMemo6(
+    () => session.scriptSteps.map((step) => ({
+      kind: "script",
+      appId: session.appId,
+      appName: session.appName,
+      step
+    })),
+    [session]
+  );
+  const allItems = useMemo6(
+    () => [...interfaces, ...scripts],
+    [interfaces, scripts]
+  );
+  const refreshIndex = allItems.length;
+  const backIndex = allItems.length + 1;
+  const totalItems = allItems.length + 2;
+  const [cursorIndex, setCursorIndex] = useState13(0);
+  useEffect13(() => {
+    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__ */ jsxs8(Text9, { color: "gray", children: [
+      "https://app.mindstudio.ai/agents/",
+      session.appId,
+      "/edit"
+    ] }),
+    /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Select an interface or script to connect your local editor." }),
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", children: "Interfaces" }),
+      interfaces.length > 0 ? /* @__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}`
+        );
+      }) }) : /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " No interfaces in this agent." }),
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", children: "Scripts" }),
+        scripts.length > 0 ? /* @__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__ */ jsx9(Text9, { color: "gray", children: " No scripts in this agent." })
+      ] }),
+      /* @__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);
+  useEffect13(() => {
+    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,
+  sessions,
+  refreshStatus,
+  refresh
+}) {
+  const [selectedAppId, setSelectedAppId] = useState13(null);
+  const [selectedItem, setSelectedItem] = useState13(null);
+  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 useEffect15, useCallback as useCallback9, useState as useState15, useMemo as useMemo7 } from "react";
+import { Box as Box9, Text as Text10, useInput as useInput6 } from "ink";
+import Spinner5 from "ink-spinner";
+import chalk3 from "chalk";
+
+// src/tui/hooks/useAuth.ts
+import { useState as useState14, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect14 } from "react";
+import open3 from "open";
+var POLL_INTERVAL = 2e3;
+var MAX_ATTEMPTS = 30;
+function useAuth() {
+  const [status, setStatus] = useState14("idle");
+  const [authUrl, setAuthUrl] = useState14(null);
+  const [timeRemaining, setTimeRemaining] = useState14(0);
+  const cancelledRef = useRef8(false);
+  const timerRef = useRef8(null);
+  useEffect14(() => {
+    return () => {
+      cancelledRef.current = true;
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+  const cancel = useCallback8(() => {
+    cancelledRef.current = true;
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    setStatus("idle");
+    setAuthUrl(null);
+    setTimeRemaining(0);
+  }, []);
+  const startAuth = useCallback8(() => {
+    cancelledRef.current = false;
+    const run = async () => {
+      try {
+        const { url, token } = await requestDeviceAuth();
+        if (cancelledRef.current) return;
+        setAuthUrl(url);
+        setStatus("waiting");
+        const totalTime = MAX_ATTEMPTS * POLL_INTERVAL / 1e3;
+        setTimeRemaining(totalTime);
+        timerRef.current = setInterval(() => {
+          setTimeRemaining((prev) => {
+            const next = prev - 1;
+            if (next <= 0 && timerRef.current) {
+              clearInterval(timerRef.current);
+              timerRef.current = null;
+            }
+            return Math.max(0, next);
+          });
+        }, 1e3);
+        await open3(url);
+        for (let i = 0; i < MAX_ATTEMPTS; i++) {
+          await new Promise((r) => setTimeout(r, POLL_INTERVAL));
+          if (cancelledRef.current) return;
+          const result = await pollDeviceAuth(token);
+          if (result.status === "completed" && result.apiKey) {
+            if (timerRef.current) clearInterval(timerRef.current);
+            setApiKey(result.apiKey);
+            if (result.userId) {
+              setUserId(result.userId);
+            }
+            setStatus("success");
+            return;
+          }
+          if (result.status === "expired") {
+            if (timerRef.current) clearInterval(timerRef.current);
+            setStatus("expired");
+            return;
+          }
+        }
+        if (!cancelledRef.current) {
+          setStatus("timeout");
+        }
+      } catch {
+        if (!cancelledRef.current) {
+          setStatus("expired");
+        }
+      }
+    };
+    run();
+  }, []);
+  return {
+    status,
+    authUrl,
+    timeRemaining,
+    startAuth,
+    cancel
+  };
+}
+
+// src/tui/pages/OnboardingPage.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var SHIMMER_SPEED = 35;
+function useShimmerLogo() {
+  const [frame, setFrame] = useState15(0);
+  const lines = useMemo7(() => LogoString.split("\n"), []);
+  const totalChars = useMemo7(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  const cycleLength = totalChars + 40;
+  useEffect15(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % cycleLength);
+    }, SHIMMER_SPEED);
+    return () => clearInterval(interval);
+  }, [cycleLength]);
+  return useMemo7(() => {
+    const sweepPos = frame;
+    const holdEnd = totalChars + 20;
+    let charIdx = 0;
+    return lines.map((line) => {
+      let result = "";
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === " " || ch === "	") {
+          result += ch;
+          continue;
+        }
+        let brightness;
+        if (sweepPos <= totalChars) {
+          const lag = charIdx;
+          const t = sweepPos - lag;
+          brightness = t <= 0 ? 0.1 : Math.min(1, t / 8);
+        } else if (sweepPos <= holdEnd) {
+          brightness = 1;
+        } else {
+          const fadeProgress = (sweepPos - holdEnd) / (cycleLength - holdEnd);
+          brightness = Math.max(0.1, 1 - fadeProgress);
+        }
+        if (brightness >= 0.9) {
+          result += chalk3.cyanBright.bold(ch);
+        } else if (brightness >= 0.6) {
+          result += chalk3.cyan(ch);
+        } else if (brightness >= 0.3) {
+          result += chalk3.rgb(0, 100, 120)(ch);
+        } else {
+          result += chalk3.rgb(0, 50, 60)(ch);
+        }
+        charIdx++;
+      }
+      return result;
+    }).join("\n");
+  }, [frame, lines, totalChars, cycleLength]);
+}
+function OnboardingPage({ onComplete }) {
+  const {
+    status: authStatus,
+    authUrl,
+    timeRemaining,
+    startAuth,
+    cancel: cancelAuth
+  } = useAuth();
+  const shimmerLogo = useShimmerLogo();
+  useEffect15(() => {
+    if (authStatus === "success") {
+      const timer = setTimeout(() => onComplete(), 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [authStatus, onComplete]);
+  useEffect15(() => {
+    return () => cancelAuth();
+  }, []);
+  const handleAction = useCallback9(() => {
+    cancelAuth();
+    startAuth();
+  }, [cancelAuth, startAuth]);
+  const canAct = authStatus === "idle" || authStatus === "expired" || authStatus === "timeout";
+  useInput6((_input, key) => {
+    if (canAct && !key.ctrl) {
+      handleAction();
+    }
+  });
+  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(Fragment4, { 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__ */ jsxs9(Fragment4, { 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__ */ jsxs9(Fragment4, { children: [
+          /* @__PURE__ */ jsxs9(Box9, { children: [
+            /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: /* @__PURE__ */ jsx10(Spinner5, { type: "dots" }) }),
+            /* @__PURE__ */ jsxs9(Text10, { children: [
+              " ",
+              "Waiting for browser authorization... (",
+              timeRemaining,
+              "s remaining)"
+            ] })
+          ] }),
+          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__ */ jsxs9(Text10, { color: "green", children: [
+          "\u2713",
+          " Authenticated!"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10(Box9, { flexGrow: 1 })
+  ] });
+}
+
+// src/tui/App.tsx
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var MODEL_TYPE_MAP = {
+  text: "llm_chat",
+  image: "image_generation",
+  video: "video_generation"
+};
+function App({ runner }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout7();
+  const {
+    status: connectionStatus,
+    environment,
+    error: connectionError,
+    retry: retryConnection
+  } = useConnection();
+  const editorSessions = useEditorSessions();
+  const {
+    providers,
+    loading: providersLoading,
+    refresh: refreshProviders
+  } = useSetupProviders();
+  const {
+    models,
+    warnings: modelWarnings,
+    loading: modelsLoading,
+    refresh: refreshModels
+  } = useModels();
+  const { requests, activeCount: activeRequestCount } = useRequests();
+  const {
+    syncedNames,
+    syncedModels,
+    refresh: refreshSynced
+  } = useSyncedModels(connectionStatus);
+  const shouldOnboard = getApiKey() === void 0 || getUserId() === void 0;
+  const [page, setPage] = useState16(
+    shouldOnboard ? "onboarding" : "dashboard"
+  );
+  const [syncStatus, setSyncStatus] = useState16(
+    "idle"
+  );
+  const syncTimerRef = useRef9(void 0);
+  const lastSyncPayloadRef = useRef9("");
+  useEffect16(() => {
+    if (connectionStatus === "not_authenticated") {
+      setPage("onboarding");
+    }
+  }, [connectionStatus]);
+  useEffect16(() => {
+    if (page === "dashboard") {
+      refreshAll();
+    }
+  }, [page]);
+  useEffect16(() => {
+    if (connectionStatus === "connected" && syncedModels.length > 0) {
+      runner.start(syncedModels);
+    }
+  }, [connectionStatus, syncedModels, runner]);
+  useEffect16(() => () => runner.stop(), [runner]);
+  const refreshAll = useCallback10(
+    async (silent = false) => {
+      if (!silent) setSyncStatus("syncing");
+      const [discoveredModels] = await Promise.all([
+        refreshModels(),
+        refreshProviders()
+      ]);
+      const modelsToSync = discoveredModels.filter((m) => !m.statusHint).map((m) => ({
+        name: m.name,
+        provider: m.provider,
+        type: MODEL_TYPE_MAP[m.capability] || "llm_chat",
+        parameters: m.parameters
+      }));
+      const payload = JSON.stringify(modelsToSync);
+      if (payload !== lastSyncPayloadRef.current && modelsToSync.length > 0) {
+        try {
+          await syncModels(modelsToSync);
+          lastSyncPayloadRef.current = payload;
+        } catch {
+        }
+      }
+      await refreshSynced();
+      if (!silent) {
+        setSyncStatus("synced");
+        clearTimeout(syncTimerRef.current);
+        syncTimerRef.current = setTimeout(() => setSyncStatus("idle"), 1500);
+      }
+    },
+    [refreshProviders, refreshModels, refreshSynced]
+  );
+  useEffect16(() => {
+    if (connectionStatus !== "connected" || page !== "dashboard") return;
+    const interval = setInterval(() => refreshAll(true), 1500);
+    return () => clearInterval(interval);
+  }, [connectionStatus, page, refreshAll]);
+  const handleQuit = useCallback10(() => {
+    runner.stop();
+    exit();
+  }, [runner, exit]);
+  const handleOnboardingComplete = useCallback10(() => {
+    retryConnection();
+    refreshAll();
+    setPage("dashboard");
+  }, [retryConnection, refreshAll]);
+  const handleNavigate = useCallback10(
+    (id) => {
+      switch (id) {
+        case "interfaces":
+          setPage("interfaces");
+          break;
+        case "auth":
+          setPage("onboarding");
+          break;
+        case "setup":
+          setPage("setup");
+          break;
+        case "refresh":
+          refreshAll();
+          break;
+        case "quit":
+          handleQuit();
+          break;
+      }
+    },
+    [refreshAll, handleQuit]
+  );
+  const subpageMenuItems = [
+    { id: "back", label: "Back", description: "Return to dashboard" }
+  ];
+  const handleSubpageNavigate = useCallback10(
+    (id) => {
+      if (id === "back") {
+        setPage("dashboard");
+      } else {
+        handleNavigate(id);
+      }
+    },
+    [handleNavigate]
+  );
+  const [termSize, setTermSize] = useState16({
+    rows: stdout?.rows ?? 24,
+    columns: stdout?.columns ?? 80
+  });
+  useEffect16(() => {
+    if (!stdout) return;
+    const onResize = () => {
+      stdout.write("\x1B[2J\x1B[H");
+      setTermSize({ rows: stdout.rows, columns: stdout.columns });
+    };
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  const termHeight = termSize.rows - 4;
+  const compactHeader = termSize.rows <= 45 || termSize.columns <= 90;
+  return /* @__PURE__ */ jsx11(Box10, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx11(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsx11(
+      Header,
+      {
+        connection: connectionStatus,
+        environment,
+        configPath: getConfigPath(),
+        connectionError,
+        compact: compactHeader,
+        hasActiveRequest: activeRequestCount > 0
+      }
+    ),
+    page === "dashboard" && /* @__PURE__ */ jsx11(
+      DashboardPage,
+      {
+        requests,
+        models,
+        modelWarnings,
+        providers,
+        providersLoading,
+        syncedNames,
+        modelsLoading,
+        syncStatus,
+        editorSessions: editorSessions.sessions,
+        editorsLoading: editorSessions.loading,
+        onNavigate: handleNavigate
+      }
+    ),
+    page === "setup" && /* @__PURE__ */ jsx11(SetupPage, { onBack: () => setPage("dashboard") }),
+    page === "interfaces" && /* @__PURE__ */ jsx11(
+      InterfacesPage,
+      {
+        onBack: () => setPage("dashboard"),
+        sessions: editorSessions.sessions,
+        refreshStatus: editorSessions.refreshStatus,
+        refresh: editorSessions.refresh
+      }
+    ),
+    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
+    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(
+      NavigationMenu,
+      {
+        items: subpageMenuItems,
+        onSelect: handleSubpageNavigate
+      }
+    )
+  ] }) });
+}
+
+// src/update.ts
+import { createRequire as createRequire2 } from "module";
+var require3 = createRequire2(import.meta.url);
+var pkg2 = require3("../package.json");
+function getCurrentVersion() {
+  return pkg2.version;
+}
+async function fetchLatestVersion() {
+  try {
+    const res = await fetch(
+      "https://registry.npmjs.org/@mindstudio-ai/local-model-tunnel/latest",
+      { signal: AbortSignal.timeout(5e3) }
+    );
+    if (!res.ok) return null;
+    const data = await res.json();
+    return data.version ?? null;
+  } catch {
+    return null;
+  }
+}
+function isNewerVersion(current, latest) {
+  const currentParts = current.split(".").map(Number);
+  const latestParts = latest.split(".").map(Number);
+  for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+    const c = currentParts[i] ?? 0;
+    const l = latestParts[i] ?? 0;
+    if (l > c) return true;
+    if (l < c) return false;
+  }
+  return false;
+}
+async function checkForUpdate() {
+  const currentVersion = getCurrentVersion();
+  const latestVersion = await fetchLatestVersion();
+  if (!latestVersion) return null;
+  if (!isNewerVersion(currentVersion, latestVersion)) return null;
+  return { currentVersion, latestVersion };
+}
+
+// src/tui/components/UpdatePrompt.tsx
+import { useState as useState17, useEffect as useEffect17, useMemo as useMemo8 } from "react";
+import { Box as Box11, Text as Text11, useInput as useInput7, useStdout as useStdout8 } from "ink";
+import chalk4 from "chalk";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var SHIMMER_SPEED2 = 35;
+function useShimmerLogo2() {
+  const [frame, setFrame] = useState17(0);
+  const lines = useMemo8(() => LogoString.split("\n"), []);
+  const totalChars = useMemo8(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  const cycleLength = totalChars + 40;
+  useEffect17(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % cycleLength);
+    }, SHIMMER_SPEED2);
+    return () => clearInterval(interval);
+  }, [cycleLength]);
+  return useMemo8(() => {
+    const sweepPos = frame;
+    const holdEnd = totalChars + 20;
+    let charIdx = 0;
+    return lines.map((line) => {
+      let result = "";
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === " " || ch === "	") {
+          result += ch;
+          continue;
+        }
+        let brightness;
+        if (sweepPos <= totalChars) {
+          const lag = charIdx;
+          const t = sweepPos - lag;
+          brightness = t <= 0 ? 0.1 : Math.min(1, t / 8);
+        } else if (sweepPos <= holdEnd) {
+          brightness = 1;
+        } else {
+          const fadeProgress = (sweepPos - holdEnd) / (cycleLength - holdEnd);
+          brightness = Math.max(0.1, 1 - fadeProgress);
+        }
+        if (brightness >= 0.9) {
+          result += chalk4.cyanBright.bold(ch);
+        } else if (brightness >= 0.6) {
+          result += chalk4.cyan(ch);
+        } else if (brightness >= 0.3) {
+          result += chalk4.rgb(0, 100, 120)(ch);
+        } else {
+          result += chalk4.rgb(0, 50, 60)(ch);
+        }
+        charIdx++;
+      }
+      return result;
+    }).join("\n");
+  }, [frame, lines, totalChars, cycleLength]);
+}
+function UpdatePrompt({
+  currentVersion,
+  latestVersion,
+  onChoice
+}) {
+  const { stdout } = useStdout8();
+  const shimmerLogo = useShimmerLogo2();
+  useInput7(() => {
+    onChoice(true);
+  });
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", height: termHeight, children: [
+    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx12(Text11, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx12(Box11, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx12(Text11, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs11(Text11, { color: "gray", children: [
+          "Update required ",
+          "\u2022",
+          " v",
+          currentVersion,
+          " ",
+          "\u2192",
+          " v",
+          latestVersion
+        ] }),
+        /* @__PURE__ */ jsx12(Box11, { marginTop: 1, children: /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "Press any key to update" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 })
+  ] });
+}
+
+// src/tui/index.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+async function promptForUpdate(currentVersion, latestVersion) {
+  return new Promise((resolve) => {
+    const { unmount } = render(
+      /* @__PURE__ */ jsx13(
+        UpdatePrompt,
+        {
+          currentVersion,
+          latestVersion,
+          onChoice: (shouldUpdate) => {
+            unmount();
+            resolve(shouldUpdate);
+          }
+        }
+      ),
+      { exitOnCtrlC: true }
+    );
+  });
+}
+async function startTUI() {
+  console.clear();
+  const update = await checkForUpdate();
+  if (update) {
+    const shouldUpdate = await promptForUpdate(
+      update.currentVersion,
+      update.latestVersion
+    );
+    if (shouldUpdate) {
+      console.log("\nUpdating to v" + update.latestVersion + "...\n");
+      try {
+        execSync2("npm install -g @mindstudio-ai/local-model-tunnel@latest", {
+          stdio: "inherit"
+        });
+        console.log("\nRestarting...\n");
+        execFileSync(process.execPath, process.argv.slice(1), {
+          stdio: "inherit"
+        });
+      } catch {
+        console.error("\nUpdate failed. Continuing with current version.\n");
+      }
+      return;
+    }
+    console.clear();
+  }
+  const runner = new TunnelRunner();
+  const { waitUntilExit } = render(/* @__PURE__ */ jsx13(App, { runner }), {
+    exitOnCtrlC: true
+  });
+  await waitUntilExit();
+  runner.stop();
+}
+export {
+  startTUI
+};
+//# sourceMappingURL=tui-EAU7OA4X.js.map