@mindstudio-ai/local-model-tunnel 0.2.0 → 0.3.0

package/dist/tui-56JFPKBP.js

@@ -0,0 +1,1561 @@
+import {
+  TunnelRunner,
+  detectAllProviderStatuses,
+  discoverAllModels,
+  discoverAllModelsWithParameters,
+  getApiKey,
+  getConfigPath,
+  getEnvironment,
+  getProviderStatuses,
+  getRegisteredModels,
+  pollDeviceAuth,
+  registerLocalModel,
+  requestDeviceAuth,
+  requestEvents,
+  setApiKey,
+  verifyApiKey
+} from "./chunk-PTK4SJQK.js";
+
+// src/tui/index.tsx
+import { render } from "ink";
+
+// src/tui/App.tsx
+import { useEffect as useEffect13, useCallback as useCallback10, useState as useState12 } from "react";
+import { Box as Box8, useApp, useStdout as useStdout5 } from "ink";
+
+// src/tui/components/Header.tsx
+import os from "os";
+import { Box, Text } from "ink";
+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 = `      .=+-.     :++.
+      *@@@@@+  :%@@@@%:
+    .%@@@@@@#..@@@@@@@=
+  .*@@@@@@@--@@@@@@@#.**.
+  *@@@@@@@.-@@@@@@@@.#@@*
+.#@@@@@@@-.@@@@@@@* #@@@@%.
+=@@@@@@@-.@@@@@@@#.-@@@@@@+
+:@@@@@@:  +@@@@@#. .@@@@@@:
+  .++:     .-*-.     .++:`;
+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
+}) {
+  const { color: connectionColor, text: connectionText } = getConnectionDisplay(connection);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "row",
+      alignItems: "center",
+      borderStyle: "round",
+      borderColor: "cyan",
+      paddingX: 1,
+      paddingY: 1,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: LogoString }) }),
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: "MindStudio Local Tunnel" }),
+            environment !== "prod" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Text, { children: " " }),
+              /* @__PURE__ */ jsx(Text, { color: "yellow", bold: true, children: "[LOCAL]" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "v",
+            pkg.version
+          ] }),
+          /* @__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(), "~")
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/tui/components/NavigationMenu.tsx
+import { useState, useEffect } from "react";
+import { Box as Box2, Text as Text2, useInput } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function NavigationMenu({ items, onSelect, title }) {
+  const getDefaultIndex = () => {
+    const backIdx = items.findIndex((i) => i.id === "back");
+    if (backIdx >= 0) return backIdx;
+    const firstIdx = items.findIndex((i) => !i.disabled && !i.isSeparator);
+    return firstIdx >= 0 ? firstIdx : 0;
+  };
+  const [selectedIndex, setSelectedIndex] = useState(getDefaultIndex);
+  useEffect(() => {
+    setSelectedIndex(getDefaultIndex());
+  }, [items]);
+  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) {
+      setSelectedIndex((prev) => findNextEnabled(prev, -1));
+    } else if (key.downArrow) {
+      setSelectedIndex((prev) => findNextEnabled(prev, 1));
+    } else if (key.return) {
+      const item = items[selectedIndex];
+      if (item && !item.disabled) {
+        onSelect(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", dimColor: true, 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, { children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
+          prefix,
+          " ",
+          item.label,
+          item.disabledReason ? ` (${item.disabledReason})` : ""
+        ] }) }, item.id);
+      }
+      return /* @__PURE__ */ jsxs2(Box2, { 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", dimColor: true, wrap: "truncate-end", children: items.some((i) => i.id === "back") ? "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 useState2, useEffect as useEffect2, useCallback } from "react";
+function useConnection() {
+  const [status, setStatus] = useState2("connecting");
+  const [error, setError] = useState2(null);
+  const environment = getEnvironment();
+  const connect = useCallback(async () => {
+    setStatus("connecting");
+    setError(null);
+    const apiKey = getApiKey();
+    if (!apiKey) {
+      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");
+    }
+  }, []);
+  useEffect2(() => {
+    connect();
+  }, [connect]);
+  return {
+    status,
+    environment,
+    error,
+    retry: connect
+  };
+}
+
+// src/tui/hooks/useProviders.ts
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+function useProviders(pollInterval = 1e4) {
+  const [providers, setProviders] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const refresh = useCallback2(async () => {
+    try {
+      const statuses = await getProviderStatuses();
+      setProviders(statuses);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect3(() => {
+    refresh();
+    const interval = setInterval(refresh, pollInterval);
+    return () => clearInterval(interval);
+  }, [refresh, pollInterval]);
+  return {
+    providers,
+    loading,
+    refresh
+  };
+}
+
+// src/tui/hooks/useModels.ts
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+function useModels() {
+  const [models, setModels] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const refresh = useCallback3(async () => {
+    setLoading(true);
+    try {
+      const discoveredModels = await discoverAllModels();
+      setModels(discoveredModels);
+    } catch {
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect4(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    models,
+    loading,
+    refresh
+  };
+}
+
+// src/tui/hooks/useRequests.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef } from "react";
+function useRequests(maxHistory = 50) {
+  const [requests, setRequests] = useState5([]);
+  const requestsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect5(() => {
+    const interval = setInterval(() => {
+      setRequests((prev) => {
+        const hasActive = prev.some((r) => r.status === "processing");
+        return hasActive ? [...prev] : prev;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect5(() => {
+    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" && event.content) {
+        const updated = {
+          ...existing,
+          content: event.content
+        };
+        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 = useCallback4(() => {
+    requestsRef.current.clear();
+    setRequests([]);
+  }, []);
+  return {
+    requests,
+    activeCount,
+    clear
+  };
+}
+
+// src/tui/hooks/useRegisteredModels.ts
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
+function useRegisteredModels(connectionStatus) {
+  const [registeredNames, setRegisteredNames] = useState6(
+    /* @__PURE__ */ new Set()
+  );
+  const refresh = useCallback5(async () => {
+    if (connectionStatus !== "connected") {
+      setRegisteredNames(/* @__PURE__ */ new Set());
+      return;
+    }
+    try {
+      const models = await getRegisteredModels();
+      setRegisteredNames(new Set(models));
+    } catch {
+    }
+  }, [connectionStatus]);
+  useEffect6(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    registeredNames,
+    refresh
+  };
+}
+
+// src/tui/pages/DashboardPage.tsx
+import { useMemo } from "react";
+import { Box as Box4, Text as Text4, useStdout as useStdout2 } from "ink";
+import Spinner2 from "ink-spinner";
+
+// src/tui/components/RequestLog.tsx
+import { Box as Box3, Text as Text3, useStdout } 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: "magenta" };
+    case "video_generation":
+      return { label: "video", color: "cyan" };
+    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;
+    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", dimColor: true, wrap: "truncate-end", children: [
+        snippetIndent,
+        snippet
+      ] })
+    ] });
+  }
+  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", dimColor: true, 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 } = useStdout();
+  const width = stdout?.columns ?? 80;
+  const activeRequests = requests.filter((r) => r.status === "processing");
+  const completedRequests = requests.filter((r) => r.status !== "processing");
+  const itemLines = (r) => r.requestType === "llm_chat" && r.content ? 2 : 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, { flexGrow: 1, alignItems: "center", justifyContent: "center", 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/hooks/useSetupProviders.ts
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback6 } from "react";
+function useSetupProviders() {
+  const [providers, setProviders] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const refresh = useCallback6(async () => {
+    setLoading(true);
+    const statuses = await detectAllProviderStatuses();
+    setProviders(statuses);
+    setLoading(false);
+  }, []);
+  useEffect7(() => {
+    refresh();
+  }, [refresh]);
+  return { providers, loading, refresh };
+}
+
+// src/tui/pages/DashboardPage.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function getCapabilityLabel(capability) {
+  switch (capability) {
+    case "text":
+      return { label: "Text Generation", color: "gray" };
+    case "image":
+      return { label: "Image Generation", color: "magenta" };
+    case "video":
+      return { label: "Video Generation", color: "cyan" };
+    default:
+      return { label: capability, color: "gray" };
+  }
+}
+function DashboardPage({
+  requests,
+  models,
+  registeredNames,
+  modelsLoading,
+  onNavigate
+}) {
+  const { stdout } = useStdout2();
+  const { providers, loading: setupLoading } = useSetupProviders();
+  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 unavailableRegistered = [...registeredNames].filter(
+    (name) => !allModelNames.has(name)
+  );
+  const menuItems = useMemo(() => {
+    return [
+      {
+        id: "register",
+        label: "Sync Models",
+        description: "Sync models with MindStudio Cloud"
+      },
+      {
+        id: "refresh",
+        label: "Refresh Providers",
+        description: "Re-detect local AI providers and models"
+      },
+      {
+        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"
+      }
+    ];
+  }, []);
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  const headerLines = 14;
+  const providerContentLines = setupLoading ? 1 : installedProviders.length === 0 ? 2 : installedProviders.length;
+  const providersLines = 3 + providerContentLines;
+  const modelContentLines = modelsLoading ? 1 : models.length === 0 && unavailableRegistered.length === 0 ? 2 : models.length + (unavailableRegistered.length > 0 ? 1 + unavailableRegistered.length : 0);
+  const modelsLines = 3 + modelContentLines;
+  const requestLogOverhead = 3;
+  const menuLines = menuItems.length + 6;
+  const usedLines = headerLines + providersLines + 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: "Providers" }),
+      setupLoading ? /* @__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: "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 && unavailableRegistered.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 isRegistered = registeredNames.has(model.name);
+          const displayProvider = providers.find((p) => p.provider.name === model.provider)?.provider.displayName ?? model.provider;
+          return /* @__PURE__ */ jsxs4(Box4, { children: [
+            /* @__PURE__ */ jsx4(Text4, { color: isRegistered ? "green" : "gray", children: isRegistered ? "\u25CF" : "\u25CB" }),
+            /* @__PURE__ */ jsx4(Text4, { color: "white", children: ` ${model.name}` }),
+            /* @__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.name);
+        }),
+        unavailableRegistered.length > 0 && /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: models.length > 0 ? 1 : 0, children: [
+          /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Registered but not currently available:" }),
+          unavailableRegistered.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/pages/RegisterPage.tsx
+import { useEffect as useEffect9 } from "react";
+import { Box as Box5, Text as Text5 } from "ink";
+import Spinner3 from "ink-spinner";
+
+// src/tui/hooks/useRegister.ts
+import { useState as useState8, useCallback as useCallback7, useRef as useRef2, useEffect as useEffect8 } from "react";
+var MODEL_TYPE_MAP = {
+  text: "llm_chat",
+  image: "image_generation",
+  video: "video_generation"
+};
+function useRegister() {
+  const [status, setStatus] = useState8("idle");
+  const [progress, setProgress] = useState8({
+    current: 0,
+    total: 0
+  });
+  const [registeredModels, setRegisteredModels] = useState8(
+    []
+  );
+  const [error, setError] = useState8(null);
+  const cancelledRef = useRef2(false);
+  useEffect8(() => {
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, []);
+  const cancel = useCallback7(() => {
+    cancelledRef.current = true;
+    setStatus("idle");
+  }, []);
+  const startRegister = useCallback7(() => {
+    cancelledRef.current = false;
+    setError(null);
+    setRegisteredModels([]);
+    const run = async () => {
+      try {
+        setStatus("discovering");
+        const localModels = await discoverAllModelsWithParameters();
+        if (cancelledRef.current) return;
+        if (localModels.length === 0) {
+          setError("No local models found.");
+          setStatus("error");
+          return;
+        }
+        const existingRegistered = await getRegisteredModels();
+        if (cancelledRef.current) return;
+        const registeredNames = new Set(existingRegistered);
+        const unregisteredModels = localModels.filter(
+          (m) => !registeredNames.has(m.name)
+        );
+        const allModels = localModels.map((m) => ({
+          name: m.name,
+          provider: m.provider,
+          capability: m.capability,
+          isNew: !registeredNames.has(m.name)
+        }));
+        if (unregisteredModels.length === 0) {
+          setRegisteredModels(allModels);
+          setProgress({ current: 0, total: 0 });
+          setStatus("done");
+          return;
+        }
+        setStatus("registering");
+        setProgress({ current: 0, total: unregisteredModels.length });
+        for (let i = 0; i < unregisteredModels.length; i++) {
+          if (cancelledRef.current) return;
+          const model = unregisteredModels[i];
+          const modelType = MODEL_TYPE_MAP[model.capability];
+          await registerLocalModel({
+            modelName: model.name,
+            provider: model.provider,
+            modelType,
+            parameters: model.parameters
+          });
+          setProgress({ current: i + 1, total: unregisteredModels.length });
+        }
+        if (cancelledRef.current) return;
+        const finalModels = localModels.map((m) => ({
+          name: m.name,
+          provider: m.provider,
+          capability: m.capability,
+          isNew: !registeredNames.has(m.name)
+        }));
+        setRegisteredModels(finalModels);
+        setStatus("done");
+      } catch (err) {
+        if (!cancelledRef.current) {
+          setError(err instanceof Error ? err.message : "Registration failed");
+          setStatus("error");
+        }
+      }
+    };
+    run();
+  }, []);
+  return {
+    status,
+    progress,
+    registeredModels,
+    error,
+    startRegister,
+    cancel
+  };
+}
+
+// src/tui/pages/RegisterPage.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function RegisterPage() {
+  const { status, progress, registeredModels, error, startRegister, cancel } = useRegister();
+  useEffect9(() => {
+    startRegister();
+    return () => cancel();
+  }, []);
+  if (status === "idle") {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", marginTop: 1, paddingX: 1, children: /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "Starting model registration..." }) }) });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", marginTop: 1, paddingX: 1, children: /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(Text5, { color: "red", children: [
+      "Registration failed: ",
+      error
+    ] }) }) });
+  }
+  if (status === "discovering") {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", marginTop: 1, paddingX: 1, children: /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: /* @__PURE__ */ jsx5(Spinner3, { type: "dots" }) }),
+      /* @__PURE__ */ jsx5(Text5, { children: " Discovering local models..." })
+    ] }) });
+  }
+  if (status === "registering") {
+    return /* @__PURE__ */ jsx5(Box5, { flexDirection: "column", marginTop: 1, paddingX: 1, children: /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: /* @__PURE__ */ jsx5(Spinner3, { type: "dots" }) }),
+      /* @__PURE__ */ jsxs5(Text5, { children: [
+        " ",
+        "Registering ",
+        progress.current,
+        "/",
+        progress.total,
+        " models..."
+      ] })
+    ] }) });
+  }
+  const newModels = registeredModels.filter((m) => m.isNew);
+  const existingModels = registeredModels.filter((m) => !m.isNew);
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, paddingX: 1, children: [
+    newModels.length > 0 ? /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs5(Text5, { color: "green", children: [
+        "Registered ",
+        newModels.length,
+        " new model",
+        newModels.length !== 1 ? "s" : "",
+        ":"
+      ] }),
+      newModels.map((m) => /* @__PURE__ */ jsxs5(Box5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "green", children: "  \u2713 " }),
+        /* @__PURE__ */ jsxs5(Text5, { children: [
+          m.name,
+          " "
+        ] }),
+        /* @__PURE__ */ jsxs5(Text5, { color: "gray", children: [
+          "[",
+          m.provider,
+          "]"
+        ] })
+      ] }, m.name))
+    ] }) : /* @__PURE__ */ jsx5(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text5, { color: "green", children: "All models already registered." }) }),
+    existingModels.length > 0 && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+      /* @__PURE__ */ jsxs5(Text5, { color: "gray", children: [
+        "Already registered (",
+        existingModels.length,
+        "):"
+      ] }),
+      existingModels.map((m) => /* @__PURE__ */ jsxs5(Box5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "  \u25CF " }),
+        /* @__PURE__ */ jsxs5(Text5, { color: "gray", children: [
+          m.name,
+          " [",
+          m.provider,
+          "]"
+        ] })
+      ] }, m.name))
+    ] })
+  ] });
+}
+
+// src/tui/pages/SetupPage.tsx
+import { useState as useState9, useMemo as useMemo3, useEffect as useEffect10 } from "react";
+import { Box as Box6, Text as Text7, useInput as useInput2, useStdout as useStdout4 } from "ink";
+import Spinner4 from "ink-spinner";
+
+// src/tui/components/MarkdownText.tsx
+import { useMemo as useMemo2 } from "react";
+import { Text as Text6, useStdout as useStdout3 } from "ink";
+import chalk from "chalk";
+import { marked } from "marked";
+import { markedTerminal } from "marked-terminal";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var codeStyle = chalk.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/pages/SetupPage.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ProviderDetailView({
+  provider,
+  onBack
+}) {
+  const [scrollOffset, setScrollOffset] = useState9(0);
+  const { stdout } = useStdout4();
+  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 = useMemo3(() => {
+    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 = useMemo3(() => {
+    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__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs6(Box6, { height: viewHeight, children: [
+      /* @__PURE__ */ jsx7(
+        Box6,
+        {
+          flexDirection: "column",
+          paddingX: 1,
+          paddingY: 1,
+          flexGrow: 1,
+          overflow: "hidden",
+          children: /* @__PURE__ */ jsx7(Text7, { children: visibleContent })
+        }
+      ),
+      scrollbar && /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", children: scrollbar.map((isThumb, i) => /* @__PURE__ */ jsx7(
+        Text7,
+        {
+          color: isThumb ? "cyan" : "gray",
+          dimColor: !isThumb,
+          children: isThumb ? "\u2503" : "\u2502"
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      Box6,
+      {
+        flexDirection: "column",
+        paddingX: 1,
+        borderStyle: "single",
+        borderTop: true,
+        borderBottom: false,
+        borderLeft: false,
+        borderRight: false,
+        borderColor: "gray",
+        children: [
+          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "gray", dimColor: true, children: "Actions" }) }),
+          /* @__PURE__ */ jsxs6(Box6, { children: [
+            /* @__PURE__ */ jsxs6(Text7, { color: "cyan", bold: true, children: [
+              "\u276F",
+              " Back"
+            ] }),
+            /* @__PURE__ */ jsx7(Text7, { color: "gray", children: " - Return to providers" })
+          ] }),
+          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsxs6(Text7, { color: "gray", dimColor: true, 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 = useMemo3(
+    () => providers.filter((p) => p.status.running),
+    [providers]
+  );
+  const installed = useMemo3(
+    () => providers.filter((p) => p.status.installed && !p.status.running),
+    [providers]
+  );
+  const notInstalled = useMemo3(
+    () => providers.filter((p) => !p.status.installed),
+    [providers]
+  );
+  const allProviders = useMemo3(
+    () => [...running, ...installed, ...notInstalled],
+    [running, installed, notInstalled]
+  );
+  const totalItems = allProviders.length + 1;
+  const backIndex = allProviders.length;
+  const [cursorIndex, setCursorIndex] = useState9(backIndex);
+  useEffect10(() => {
+    setCursorIndex(backIndex);
+  }, [backIndex]);
+  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__ */ jsx7(
+        ProviderDetailView,
+        {
+          provider: found.provider,
+          onBack: () => setSelectedProvider(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: "Manage Providers" }),
+    /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Select a provider to view its setup guide." }),
+    loading ? /* @__PURE__ */ jsxs6(Box6, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: /* @__PURE__ */ jsx7(Spinner4, { type: "dots" }) }),
+      /* @__PURE__ */ jsx7(Text7, { children: " Detecting providers..." })
+    ] }) : /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", marginTop: 1, children: [
+      running.length > 0 && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx7(Text7, { bold: true, color: "green", children: "Running" }),
+        running.map(({ provider }, i) => {
+          const index = i;
+          const isSelected = index === cursorIndex;
+          return /* @__PURE__ */ jsxs6(
+            Box6,
+            {
+              flexDirection: "column",
+              marginTop: i > 0 ? 1 : 0,
+              children: [
+                /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
+                  Text7,
+                  {
+                    color: isSelected ? "cyan" : "white",
+                    bold: isSelected,
+                    children: [
+                      isSelected ? "\u276F" : " ",
+                      " ",
+                      "\u25CF",
+                      " ",
+                      provider.displayName
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                  "   ",
+                  provider.description
+                ] })
+              ]
+            },
+            provider.name
+          );
+        })
+      ] }),
+      installed.length > 0 && /* @__PURE__ */ jsxs6(
+        Box6,
+        {
+          flexDirection: "column",
+          marginTop: running.length > 0 ? 1 : 0,
+          children: [
+            /* @__PURE__ */ jsx7(Text7, { bold: true, color: "yellow", children: "Installed" }),
+            installed.map(({ provider, status }, i) => {
+              const index = running.length + i;
+              const isSelected = index === cursorIndex;
+              return /* @__PURE__ */ jsxs6(
+                Box6,
+                {
+                  flexDirection: "column",
+                  marginTop: i > 0 ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
+                      Text7,
+                      {
+                        color: isSelected ? "cyan" : "white",
+                        bold: isSelected,
+                        children: [
+                          isSelected ? "\u276F" : " ",
+                          " ",
+                          "\u25CB",
+                          " ",
+                          provider.displayName
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                      "   ",
+                      provider.description
+                    ] })
+                  ]
+                },
+                provider.name
+              );
+            })
+          ]
+        }
+      ),
+      notInstalled.length > 0 && /* @__PURE__ */ jsxs6(
+        Box6,
+        {
+          flexDirection: "column",
+          marginTop: running.length > 0 || installed.length > 0 ? 1 : 0,
+          children: [
+            /* @__PURE__ */ jsx7(Text7, { bold: true, color: "gray", children: "Not Installed" }),
+            notInstalled.map(({ provider }, i) => {
+              const index = running.length + installed.length + i;
+              const isSelected = index === cursorIndex;
+              return /* @__PURE__ */ jsxs6(
+                Box6,
+                {
+                  flexDirection: "column",
+                  marginTop: i > 0 ? 1 : 0,
+                  children: [
+                    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
+                      Text7,
+                      {
+                        color: isSelected ? "cyan" : "white",
+                        bold: isSelected,
+                        children: [
+                          isSelected ? "\u276F" : " ",
+                          " ",
+                          provider.displayName
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                      "   ",
+                      provider.description
+                    ] })
+                  ]
+                },
+                provider.name
+              );
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(
+        Text7,
+        {
+          color: cursorIndex === backIndex ? "cyan" : "white",
+          bold: cursorIndex === backIndex,
+          children: [
+            cursorIndex === backIndex ? "\u276F" : " ",
+            " Back"
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(Text7, { color: "gray", dimColor: true, children: [
+      "Up/Down Navigate ",
+      "\u2022",
+      " Enter Select ",
+      "\u2022",
+      " q/Esc Back"
+    ] }) })
+  ] }) });
+}
+
+// src/tui/pages/OnboardingPage.tsx
+import { useEffect as useEffect12, useCallback as useCallback9, useState as useState11, useMemo as useMemo4 } from "react";
+import { Box as Box7, Text as Text8, useInput as useInput3 } from "ink";
+import Spinner5 from "ink-spinner";
+import chalk2 from "chalk";
+
+// src/tui/hooks/useAuth.ts
+import { useState as useState10, useCallback as useCallback8, useRef as useRef3, useEffect as useEffect11 } from "react";
+import open from "open";
+var POLL_INTERVAL = 2e3;
+var MAX_ATTEMPTS = 30;
+function useAuth() {
+  const [status, setStatus] = useState10("idle");
+  const [authUrl, setAuthUrl] = useState10(null);
+  const [timeRemaining, setTimeRemaining] = useState10(0);
+  const cancelledRef = useRef3(false);
+  const timerRef = useRef3(null);
+  useEffect11(() => {
+    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 open(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);
+            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 Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var SHIMMER_SPEED = 35;
+function useShimmerLogo() {
+  const [frame, setFrame] = useState11(0);
+  const lines = useMemo4(() => LogoString.split("\n"), []);
+  const totalChars = useMemo4(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  const cycleLength = totalChars + 40;
+  useEffect12(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % cycleLength);
+    }, SHIMMER_SPEED);
+    return () => clearInterval(interval);
+  }, [cycleLength]);
+  return useMemo4(() => {
+    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 += chalk2.cyanBright.bold(ch);
+        } else if (brightness >= 0.6) {
+          result += chalk2.cyan(ch);
+        } else if (brightness >= 0.3) {
+          result += chalk2.rgb(0, 100, 120)(ch);
+        } else {
+          result += chalk2.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();
+  useEffect12(() => {
+    if (authStatus === "success") {
+      const timer = setTimeout(() => onComplete(), 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [authStatus, onComplete]);
+  useEffect12(() => {
+    return () => cancelAuth();
+  }, []);
+  const handleAction = useCallback9(() => {
+    cancelAuth();
+    startAuth();
+  }, [cancelAuth, startAuth]);
+  const canAct = authStatus === "idle" || authStatus === "expired" || authStatus === "timeout";
+  useInput3((_input, key) => {
+    if (canAct && !key.ctrl) {
+      handleAction();
+    }
+  });
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx8(Box7, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx8(Text8, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx8(Box7, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx8(Text8, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", alignItems: "center", children: [
+        authStatus === "idle" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "Connect your MindStudio account to get started." }),
+          /* @__PURE__ */ jsx8(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { color: "cyan", bold: true, children: "Press any key to Connect Account" }) })
+        ] }),
+        (authStatus === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          /* @__PURE__ */ jsx8(Text8, { color: "red", children: authStatus === "expired" ? "Authorization expired." : "Authorization timed out." }),
+          /* @__PURE__ */ jsx8(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { color: "cyan", bold: true, children: "Press any key to Try Again" }) })
+        ] }),
+        authStatus === "waiting" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
+          /* @__PURE__ */ jsxs7(Box7, { children: [
+            /* @__PURE__ */ jsx8(Text8, { color: "cyan", children: /* @__PURE__ */ jsx8(Spinner5, { type: "dots" }) }),
+            /* @__PURE__ */ jsxs7(Text8, { children: [
+              " ",
+              "Waiting for browser authorization... (",
+              timeRemaining,
+              "s remaining)"
+            ] })
+          ] }),
+          authUrl && /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [
+            /* @__PURE__ */ jsx8(Text8, { color: "gray", children: "If browser didn't open, visit:" }),
+            /* @__PURE__ */ jsx8(Text8, { color: "cyan", children: authUrl })
+          ] })
+        ] }),
+        authStatus === "success" && /* @__PURE__ */ jsxs7(Text8, { color: "green", children: [
+          "\u2713",
+          " Authenticated!"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8(Box7, { flexGrow: 1 })
+  ] });
+}
+
+// src/tui/App.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function App({ runner }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout5();
+  const {
+    status: connectionStatus,
+    environment,
+    error: connectionError,
+    retry: retryConnection
+  } = useConnection();
+  const { refresh: refreshProviders } = useProviders();
+  const {
+    models,
+    loading: modelsLoading,
+    refresh: refreshModels
+  } = useModels();
+  const { requests } = useRequests();
+  const { registeredNames, refresh: refreshRegistered } = useRegisteredModels(connectionStatus);
+  const shouldOnboard = getApiKey() === void 0;
+  const [page, setPage] = useState12(
+    shouldOnboard ? "onboarding" : "dashboard"
+  );
+  useEffect13(() => {
+    if (page === "dashboard") {
+      refreshAll();
+    }
+  }, [page]);
+  useEffect13(() => {
+    if (connectionStatus === "connected" && models.length > 0) {
+      runner.start(models.map((m) => m.name));
+    }
+  }, [connectionStatus, models, runner]);
+  useEffect13(() => () => runner.stop(), [runner]);
+  const refreshAll = useCallback10(async () => {
+    await Promise.all([
+      refreshProviders(),
+      refreshModels(),
+      refreshRegistered()
+    ]);
+  }, [refreshProviders, refreshModels, refreshRegistered]);
+  const handleQuit = useCallback10(() => {
+    runner.stop();
+    exit();
+  }, [runner, exit]);
+  const handleOnboardingComplete = useCallback10(() => {
+    retryConnection();
+    refreshAll();
+    setPage("dashboard");
+  }, [retryConnection, refreshAll]);
+  const handleNavigate = useCallback10(
+    (id) => {
+      switch (id) {
+        case "auth":
+          setPage("onboarding");
+          break;
+        case "register":
+          setPage("register");
+          break;
+        case "setup":
+          setPage("setup");
+          break;
+        case "refresh":
+          refreshAll();
+          break;
+        case "quit":
+          handleQuit();
+          break;
+      }
+    },
+    [refreshModels, refreshRegistered, 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 termHeight = (stdout?.rows ?? 24) - 4;
+  return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx9(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(
+      Header,
+      {
+        connection: connectionStatus,
+        environment,
+        configPath: getConfigPath(),
+        connectionError
+      }
+    ),
+    page === "dashboard" && /* @__PURE__ */ jsx9(
+      DashboardPage,
+      {
+        requests,
+        models,
+        registeredNames,
+        modelsLoading,
+        onNavigate: handleNavigate
+      }
+    ),
+    page === "setup" && /* @__PURE__ */ jsx9(SetupPage, { onBack: () => setPage("dashboard") }),
+    page === "register" && /* @__PURE__ */ jsx9(RegisterPage, {}),
+    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx9(Box8, { flexGrow: 1 }),
+    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx9(
+      NavigationMenu,
+      {
+        items: subpageMenuItems,
+        onSelect: handleSubpageNavigate
+      }
+    )
+  ] }) });
+}
+
+// src/tui/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+async function startTUI() {
+  console.clear();
+  const runner = new TunnelRunner();
+  const { waitUntilExit } = render(
+    /* @__PURE__ */ jsx10(App, { runner }),
+    {
+      exitOnCtrlC: true,
+      incrementalRendering: true
+    }
+  );
+  await waitUntilExit();
+  runner.stop();
+}
+export {
+  startTUI
+};
+//# sourceMappingURL=tui-56JFPKBP.js.map