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

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

@@ -1,29 +1,26 @@
 import {
   TunnelRunner,
   detectAllProviderStatuses,
-  discoverAllModels,
   discoverAllModelsWithParameters,
   getApiKey,
   getConfigPath,
   getEnvironment,
-  getProviderStatuses,
   getSyncedModels,
   pollDeviceAuth,
   requestDeviceAuth,
   requestEvents,
   setApiKey,
-  syncLocalModel,
-  updateLocalModel,
+  syncModels,
   verifyApiKey
-} from "./chunk-V3RKCMCQ.js";
+} from "./chunk-PPP2FEIN.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
 import { execFileSync, execSync } from "child_process";
 
 // 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";
+import { useEffect as useEffect10, useCallback as useCallback8, useState as useState10, useRef as useRef5 } from "react";
+import { Box as Box7, useApp, useStdout as useStdout6 } from "ink";
 
 // src/tui/components/Header.tsx
 import os from "os";
@@ -32,7 +29,7 @@ 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 LogoString = `       .=+-.     :++.
       *@@@@@+  :%@@@@%:
     .%@@@@@@#..@@@@@@@=
   .*@@@@@@@--@@@@@@@#.**.
@@ -59,7 +56,8 @@ function Header({
   connection,
   environment,
   configPath,
-  connectionError
+  connectionError,
+  compact
 }) {
   const { color: connectionColor, text: connectionText } = getConnectionDisplay(connection);
   return /* @__PURE__ */ jsxs(
@@ -73,16 +71,20 @@ function Header({
       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: [
+        !compact && /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: /* @__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: "gray", children: [
+          !compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
             "v",
             pkg.version
           ] }),
@@ -103,9 +105,11 @@ function Header({
 
 // src/tui/components/NavigationMenu.tsx
 import { useState, useEffect } from "react";
-import { Box as Box2, Text as Text2, useInput } from "ink";
+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 backIdx = items.findIndex((i) => i.id === "back");
     if (backIdx >= 0) return backIdx;
@@ -116,6 +120,7 @@ function NavigationMenu({ items, onSelect, title }) {
   useEffect(() => {
     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++) {
@@ -134,9 +139,9 @@ function NavigationMenu({ items, onSelect, title }) {
       }
       return;
     }
-    if (key.upArrow) {
+    if (key.upArrow || compact && key.leftArrow) {
       setSelectedIndex((prev) => findNextEnabled(prev, -1));
-    } else if (key.downArrow) {
+    } else if (key.downArrow || compact && key.rightArrow) {
       setSelectedIndex((prev) => findNextEnabled(prev, 1));
     } else if (key.return) {
       const item = items[selectedIndex];
@@ -145,6 +150,24 @@ function NavigationMenu({ items, onSelect, title }) {
       }
     }
   });
+  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: [
@@ -156,14 +179,14 @@ function NavigationMenu({ items, onSelect, title }) {
       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: [
+        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, { children: [
+      return /* @__PURE__ */ jsxs2(Box2, { height: 1, overflow: "hidden", children: [
         /* @__PURE__ */ jsxs2(Text2, { color: isSelected ? "cyan" : "white", bold: isSelected, wrap: "truncate-end", children: [
           prefix,
           " ",
@@ -175,7 +198,7 @@ function NavigationMenu({ items, onSelect, title }) {
         ] })
       ] }, item.id);
     }) }),
-    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", 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" }) })
+    /* @__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" }) })
   ] });
 }
 
@@ -216,47 +239,56 @@ function useConnection() {
   };
 }
 
-// src/tui/hooks/useProviders.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2 } from "react";
-function useProviders(pollInterval = 1e4) {
+// src/tui/hooks/useSetupProviders.ts
+import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2, useRef } from "react";
+function useSetupProviders() {
   const [providers, setProviders] = useState3([]);
   const [loading, setLoading] = useState3(true);
+  const [refreshing, setRefreshing] = useState3(false);
+  const initialLoadDone = useRef(false);
   const refresh = useCallback2(async () => {
-    try {
-      const statuses = await getProviderStatuses();
-      setProviders(statuses);
-    } catch {
-    } finally {
-      setLoading(false);
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshing(true);
     }
+    const statuses = await detectAllProviderStatuses();
+    setProviders(statuses);
+    initialLoadDone.current = true;
+    setLoading(false);
+    setRefreshing(false);
   }, []);
   useEffect3(() => {
     refresh();
-    const interval = setInterval(refresh, pollInterval);
-    return () => clearInterval(interval);
-  }, [refresh, pollInterval]);
-  return {
-    providers,
-    loading,
-    refresh
-  };
+  }, [refresh]);
+  return { providers, loading, refreshing, refresh };
 }
 
 // src/tui/hooks/useModels.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef2 } from "react";
 function useModels() {
   const [models, setModels] = useState4([]);
   const [warnings, setWarnings] = useState4([]);
   const [loading, setLoading] = useState4(true);
+  const [refreshing, setRefreshing] = useState4(false);
+  const initialLoadDone = useRef2(false);
   const refresh = useCallback3(async () => {
-    setLoading(true);
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshing(true);
+    }
     try {
-      const discoveredModels = await discoverAllModels();
+      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);
     }
   }, []);
   useEffect4(() => {
@@ -266,15 +298,16 @@ function useModels() {
     models,
     warnings,
     loading,
+    refreshing,
     refresh
   };
 }
 
 // src/tui/hooks/useRequests.ts
-import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef } from "react";
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef3 } from "react";
 function useRequests(maxHistory = 50) {
   const [requests, setRequests] = useState5([]);
-  const requestsRef = useRef(/* @__PURE__ */ new Map());
+  const requestsRef = useRef3(/* @__PURE__ */ new Map());
   useEffect5(() => {
     const interval = setInterval(() => {
       setRequests((prev) => {
@@ -352,14 +385,17 @@ function useSyncedModels(connectionStatus) {
   const [syncedNames, setSyncedNames] = useState6(
     /* @__PURE__ */ new Set()
   );
+  const [syncedModels, setSyncedModels] = useState6([]);
   const refresh = useCallback5(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]);
@@ -368,17 +404,18 @@ function useSyncedModels(connectionStatus) {
   }, [refresh]);
   return {
     syncedNames,
+    syncedModels,
     refresh
   };
 }
 
 // src/tui/pages/DashboardPage.tsx
 import { useMemo } from "react";
-import { Box as Box4, Text as Text4, useStdout as useStdout2 } from "ink";
+import { Box as Box4, Text as Text4, useStdout as useStdout3 } from "ink";
 import Spinner2 from "ink-spinner";
 
 // src/tui/components/RequestLog.tsx
-import { Box as Box3, Text as Text3, useStdout } from "ink";
+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) {
@@ -498,7 +535,7 @@ function RequestItem({ request, width }) {
   ] }) });
 }
 function RequestLog({ requests, maxVisible = 8, hasModels = true }) {
-  const { stdout } = useStdout();
+  const { stdout } = useStdout2();
   const width = stdout?.columns ?? 80;
   const activeRequests = requests.filter((r) => r.status === "processing");
   const completedRequests = requests.filter((r) => r.status !== "processing");
@@ -543,23 +580,6 @@ function RequestLog({ requests, maxVisible = 8, hasModels = true }) {
   );
 }
 
-// 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 getWorkflowCount(model) {
@@ -583,12 +603,14 @@ function DashboardPage({
   requests,
   models,
   modelWarnings = [],
+  providers,
+  providersLoading,
   syncedNames,
   modelsLoading,
+  syncStatus = "idle",
   onNavigate
 }) {
-  const { stdout } = useStdout2();
-  const { providers, loading: setupLoading } = useSetupProviders();
+  const { stdout } = useStdout3();
   const installedProviders = providers.filter(({ status }) => status.installed);
   const provNameWidth = Math.max(
     ...installedProviders.map((p) => p.provider.displayName.length),
@@ -599,17 +621,13 @@ function DashboardPage({
   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 = 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"
+        label: "Sync Models",
+        description: syncDescription
       },
       {
         id: "setup",
@@ -627,21 +645,23 @@ function DashboardPage({
         description: "Quit the application"
       }
     ];
-  }, []);
+  }, [syncDescription]);
   const termHeight = (stdout?.rows ?? 24) - 4;
-  const headerLines = 14;
-  const providerContentLines = setupLoading ? 1 : installedProviders.length === 0 ? 2 : installedProviders.length;
+  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 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 menuLines = menuItems.length + 6;
+  const compactMenu = termHeight + 4 < 40;
+  const menuLines = compactMenu ? 2 : 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: [
+      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: [
@@ -681,7 +701,7 @@ function DashboardPage({
             /* @__PURE__ */ jsx4(Text4, { color: "gray", children: displayProvider }),
             /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
             /* @__PURE__ */ jsx4(Text4, { color: cap.color, children: cap.label })
-          ] }, model.name);
+          ] }, `${model.provider}:${model.name}`);
         }),
         modelWarnings.map((warning) => {
           const displayProvider = providers.find((p) => p.provider.name === warning.provider)?.provider.displayName ?? warning.provider;
@@ -692,10 +712,10 @@ function DashboardPage({
             /* @__PURE__ */ jsx4(Text4, { color: "gray", children: displayProvider }),
             /* @__PURE__ */ jsx4(Text4, { color: "gray", children: " - " }),
             /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: warning.statusHint })
-          ] }, warning.name);
+          ] }, `${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 not currently available:" }),
+          /* @__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}` })
@@ -715,206 +735,18 @@ function DashboardPage({
   ] });
 }
 
-// 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 useSync() {
-  const [status, setStatus] = useState8("idle");
-  const [progress, setProgress] = useState8({
-    current: 0,
-    total: 0
-  });
-  const [syncedModels, setSyncedModels] = useState8(
-    []
-  );
-  const [error, setError] = useState8(null);
-  const cancelledRef = useRef2(false);
-  useEffect8(() => {
-    return () => {
-      cancelledRef.current = true;
-    };
-  }, []);
-  const cancel = useCallback7(() => {
-    cancelledRef.current = true;
-    setStatus("idle");
-  }, []);
-  const startSync = useCallback7(() => {
-    cancelledRef.current = false;
-    setError(null);
-    setSyncedModels([]);
-    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 existingSynced = await getSyncedModels();
-        if (cancelledRef.current) return;
-        const remoteByName = new Map(
-          existingSynced.map((m) => [m.name, m.id])
-        );
-        setStatus("syncing");
-        setProgress({ current: 0, total: localModels.length });
-        for (let i = 0; i < localModels.length; i++) {
-          if (cancelledRef.current) return;
-          const model = localModels[i];
-          const modelType = MODEL_TYPE_MAP[model.capability];
-          const existingId = remoteByName.get(model.name);
-          if (existingId) {
-            await updateLocalModel({
-              modelId: existingId,
-              modelName: model.name,
-              provider: model.provider,
-              modelType,
-              parameters: model.parameters
-            });
-          } else {
-            await syncLocalModel({
-              modelName: model.name,
-              provider: model.provider,
-              modelType,
-              parameters: model.parameters
-            });
-          }
-          setProgress({ current: i + 1, total: localModels.length });
-        }
-        if (cancelledRef.current) return;
-        const finalModels = localModels.map((m) => ({
-          name: m.name,
-          provider: m.provider,
-          capability: m.capability,
-          isNew: !remoteByName.has(m.name)
-        }));
-        setSyncedModels(finalModels);
-        setStatus("done");
-      } catch (err) {
-        if (!cancelledRef.current) {
-          setError(err instanceof Error ? err.message : "Sync failed");
-          setStatus("error");
-        }
-      }
-    };
-    run();
-  }, []);
-  return {
-    status,
-    progress,
-    syncedModels,
-    error,
-    startSync,
-    cancel
-  };
-}
-
-// src/tui/pages/RegisterPage.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function SyncPage() {
-  const { status, progress, syncedModels, error, startSync, cancel } = useSync();
-  useEffect9(() => {
-    startSync();
-    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 sync..." }) }) });
-  }
-  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: [
-      "Sync 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 === "syncing") {
-    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: [
-        " ",
-        "Syncing ",
-        progress.current,
-        "/",
-        progress.total,
-        " models..."
-      ] })
-    ] }) });
-  }
-  const newModels = syncedModels.filter((m) => m.isNew);
-  const resyncedModels = syncedModels.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: [
-        "Synced ",
-        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))
-    ] }),
-    resyncedModels.length > 0 && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
-      /* @__PURE__ */ jsxs5(Text5, { color: "green", children: [
-        "Resynced ",
-        resyncedModels.length,
-        " existing model",
-        resyncedModels.length !== 1 ? "s" : "",
-        ":"
-      ] }),
-      resyncedModels.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))
-    ] })
-  ] });
-}
-
 // 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";
+import { useState as useState7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
+import { Box as Box5, Text as Text6, useInput as useInput2, useStdout as useStdout5 } from "ink";
+import Spinner3 from "ink-spinner";
 
 // src/tui/components/MarkdownText.tsx
 import { useMemo as useMemo2 } from "react";
-import { Text as Text6, useStdout as useStdout3 } from "ink";
+import { Text as Text5, useStdout as useStdout4 } from "ink";
 import chalk from "chalk";
 import { marked } from "marked";
 import { markedTerminal } from "marked-terminal";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var codeStyle = chalk.cyan;
 var identity = (s) => s;
 function renderMarkdown(content, width) {
@@ -944,13 +776,13 @@ function renderMarkdown(content, width) {
 }
 
 // src/tui/pages/SetupPage.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+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 } = useStdout4();
+  const [scrollOffset, setScrollOffset] = useState7(0);
+  const { stdout } = useStdout5();
   const termHeight = (stdout?.rows ?? 24) - 4;
   const headerHeight = 14;
   const footerLines = 6;
@@ -988,21 +820,21 @@ function ProviderDetailView({
       (_, 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,
+  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__ */ jsx7(Text7, { children: visibleContent })
+          children: /* @__PURE__ */ jsx6(Text6, { children: visibleContent })
         }
       ),
-      scrollbar && /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", children: scrollbar.map((isThumb, i) => /* @__PURE__ */ jsx7(
-        Text7,
+      scrollbar && /* @__PURE__ */ jsx6(Box5, { flexDirection: "column", children: scrollbar.map((isThumb, i) => /* @__PURE__ */ jsx6(
+        Text6,
         {
           color: isThumb ? "cyan" : "gray",
           dimColor: !isThumb,
@@ -1011,8 +843,8 @@ function ProviderDetailView({
         i
       )) })
     ] }),
-    /* @__PURE__ */ jsxs6(
-      Box6,
+    /* @__PURE__ */ jsxs5(
+      Box5,
       {
         flexDirection: "column",
         paddingX: 1,
@@ -1023,15 +855,15 @@ function ProviderDetailView({
         borderRight: false,
         borderColor: "gray",
         children: [
-          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Actions" }) }),
-          /* @__PURE__ */ jsxs6(Box6, { children: [
-            /* @__PURE__ */ jsxs6(Text7, { color: "cyan", bold: true, 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__ */ jsx7(Text7, { color: "gray", children: " - Return to providers" })
+            /* @__PURE__ */ jsx6(Text6, { color: "gray", children: " - Return to providers" })
           ] }),
-          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "truncate-end", children: [
+          /* @__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",
@@ -1044,7 +876,7 @@ function ProviderDetailView({
 }
 function SetupPage({ onBack }) {
   const { providers, loading } = useSetupProviders();
-  const [selectedProvider, setSelectedProvider] = useState9(null);
+  const [selectedProvider, setSelectedProvider] = useState7(null);
   const running = useMemo3(
     () => providers.filter((p) => p.status.running),
     [providers]
@@ -1063,8 +895,8 @@ function SetupPage({ onBack }) {
   );
   const totalItems = allProviders.length + 1;
   const backIndex = allProviders.length;
-  const [cursorIndex, setCursorIndex] = useState9(backIndex);
-  useEffect10(() => {
+  const [cursorIndex, setCursorIndex] = useState7(backIndex);
+  useEffect7(() => {
     setCursorIndex(backIndex);
   }, [backIndex]);
   useInput2((input, key) => {
@@ -1088,7 +920,7 @@ function SetupPage({ onBack }) {
   if (selectedProvider) {
     const found = providers.find((p) => p.provider.name === selectedProvider);
     if (found) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx6(
         ProviderDetailView,
         {
           provider: found.provider,
@@ -1097,26 +929,26 @@ function SetupPage({ onBack }) {
       );
     }
   }
-  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" }),
+  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__ */ jsxs6(
-            Box6,
+          return /* @__PURE__ */ jsxs5(
+            Box5,
             {
               flexDirection: "column",
               marginTop: i > 0 ? 1 : 0,
               children: [
-                /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
-                  Text7,
+                /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                  Text6,
                   {
                     color: isSelected ? "cyan" : "white",
                     bold: isSelected,
@@ -1129,7 +961,7 @@ function SetupPage({ onBack }) {
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
                   "   ",
                   provider.description
                 ] })
@@ -1139,24 +971,24 @@ function SetupPage({ onBack }) {
           );
         })
       ] }),
-      installed.length > 0 && /* @__PURE__ */ jsxs6(
-        Box6,
+      installed.length > 0 && /* @__PURE__ */ jsxs5(
+        Box5,
         {
           flexDirection: "column",
           marginTop: running.length > 0 ? 1 : 0,
           children: [
-            /* @__PURE__ */ jsx7(Text7, { bold: true, color: "yellow", children: "Installed" }),
+            /* @__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__ */ jsxs6(
-                Box6,
+              return /* @__PURE__ */ jsxs5(
+                Box5,
                 {
                   flexDirection: "column",
                   marginTop: i > 0 ? 1 : 0,
                   children: [
-                    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
-                      Text7,
+                    /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                      Text6,
                       {
                         color: isSelected ? "cyan" : "white",
                         bold: isSelected,
@@ -1169,7 +1001,7 @@ function SetupPage({ onBack }) {
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
                       "   ",
                       provider.description
                     ] })
@@ -1181,24 +1013,24 @@ function SetupPage({ onBack }) {
           ]
         }
       ),
-      notInstalled.length > 0 && /* @__PURE__ */ jsxs6(
-        Box6,
+      notInstalled.length > 0 && /* @__PURE__ */ jsxs5(
+        Box5,
         {
           flexDirection: "column",
           marginTop: running.length > 0 || installed.length > 0 ? 1 : 0,
           children: [
-            /* @__PURE__ */ jsx7(Text7, { bold: true, color: "gray", children: "Not Installed" }),
+            /* @__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__ */ jsxs6(
-                Box6,
+              return /* @__PURE__ */ jsxs5(
+                Box5,
                 {
                   flexDirection: "column",
                   marginTop: i > 0 ? 1 : 0,
                   children: [
-                    /* @__PURE__ */ jsx7(Box6, { children: /* @__PURE__ */ jsxs6(
-                      Text7,
+                    /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs5(
+                      Text6,
                       {
                         color: isSelected ? "cyan" : "white",
                         bold: isSelected,
@@ -1209,7 +1041,7 @@ function SetupPage({ onBack }) {
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsxs6(Text7, { color: "gray", wrap: "wrap", children: [
+                    /* @__PURE__ */ jsxs5(Text6, { color: "gray", wrap: "wrap", children: [
                       "   ",
                       provider.description
                     ] })
@@ -1221,8 +1053,8 @@ function SetupPage({ onBack }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(
-        Text7,
+      /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(
+        Text6,
         {
           color: cursorIndex === backIndex ? "cyan" : "white",
           bold: cursorIndex === backIndex,
@@ -1233,7 +1065,7 @@ function SetupPage({ onBack }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsxs6(Text7, { color: "gray", children: [
+    /* @__PURE__ */ jsx6(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs5(Text6, { color: "gray", children: [
       "Up/Down Navigate ",
       "\u2022",
       " Enter Select ",
@@ -1244,29 +1076,29 @@ function SetupPage({ onBack }) {
 }
 
 // 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 { useEffect as useEffect9, useCallback as useCallback7, useState as useState9, useMemo as useMemo4 } from "react";
+import { Box as Box6, Text as Text7, useInput as useInput3 } from "ink";
+import Spinner4 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 { useState as useState8, useCallback as useCallback6, useRef as useRef4, useEffect as useEffect8 } 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(() => {
+  const [status, setStatus] = useState8("idle");
+  const [authUrl, setAuthUrl] = useState8(null);
+  const [timeRemaining, setTimeRemaining] = useState8(0);
+  const cancelledRef = useRef4(false);
+  const timerRef = useRef4(null);
+  useEffect8(() => {
     return () => {
       cancelledRef.current = true;
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, []);
-  const cancel = useCallback8(() => {
+  const cancel = useCallback6(() => {
     cancelledRef.current = true;
     if (timerRef.current) {
       clearInterval(timerRef.current);
@@ -1276,7 +1108,7 @@ function useAuth() {
     setAuthUrl(null);
     setTimeRemaining(0);
   }, []);
-  const startAuth = useCallback8(() => {
+  const startAuth = useCallback6(() => {
     cancelledRef.current = false;
     const run = async () => {
       try {
@@ -1334,10 +1166,10 @@ function useAuth() {
 }
 
 // src/tui/pages/OnboardingPage.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var SHIMMER_SPEED = 35;
 function useShimmerLogo() {
-  const [frame, setFrame] = useState11(0);
+  const [frame, setFrame] = useState9(0);
   const lines = useMemo4(() => LogoString.split("\n"), []);
   const totalChars = useMemo4(() => {
     let count = 0;
@@ -1349,7 +1181,7 @@ function useShimmerLogo() {
     return count;
   }, [lines]);
   const cycleLength = totalChars + 40;
-  useEffect12(() => {
+  useEffect9(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % cycleLength);
     }, SHIMMER_SPEED);
@@ -1402,16 +1234,16 @@ function OnboardingPage({ onComplete }) {
     cancel: cancelAuth
   } = useAuth();
   const shimmerLogo = useShimmerLogo();
-  useEffect12(() => {
+  useEffect9(() => {
     if (authStatus === "success") {
       const timer = setTimeout(() => onComplete(), 1500);
       return () => clearTimeout(timer);
     }
   }, [authStatus, onComplete]);
-  useEffect12(() => {
+  useEffect9(() => {
     return () => cancelAuth();
   }, []);
-  const handleAction = useCallback9(() => {
+  const handleAction = useCallback7(() => {
     cancelAuth();
     startAuth();
   }, [cancelAuth, startAuth]);
@@ -1421,57 +1253,66 @@ function OnboardingPage({ onComplete }) {
       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" }) })
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx7(Box6, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx7(Text7, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx7(Box6, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx7(Text7, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", children: [
+        authStatus === "idle" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "Connect your MindStudio account to get started." }),
+          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "cyan", bold: true, children: "Press any key to Connect Account" }) })
         ] }),
-        (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 === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx7(Text7, { color: "red", children: authStatus === "expired" ? "Authorization expired." : "Authorization timed out." }),
+          /* @__PURE__ */ jsx7(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "cyan", bold: true, children: "Press any key to Try Again" }) })
         ] }),
-        authStatus === "waiting" && /* @__PURE__ */ jsxs7(Fragment3, { children: [
-          /* @__PURE__ */ jsxs7(Box7, { children: [
-            /* @__PURE__ */ jsx8(Text8, { color: "cyan", children: /* @__PURE__ */ jsx8(Spinner5, { type: "dots" }) }),
-            /* @__PURE__ */ jsxs7(Text8, { children: [
+        authStatus === "waiting" && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsxs6(Box6, { children: [
+            /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: /* @__PURE__ */ jsx7(Spinner4, { type: "dots" }) }),
+            /* @__PURE__ */ jsxs6(Text7, { children: [
               " ",
               "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 })
+          authUrl && /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", marginTop: 1, children: [
+            /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "If browser didn't open, visit:" }),
+            /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: authUrl })
           ] })
         ] }),
-        authStatus === "success" && /* @__PURE__ */ jsxs7(Text8, { color: "green", children: [
+        authStatus === "success" && /* @__PURE__ */ jsxs6(Text7, { color: "green", children: [
           "\u2713",
           " Authenticated!"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(Box7, { flexGrow: 1 })
+    /* @__PURE__ */ jsx7(Box6, { flexGrow: 1 })
   ] });
 }
 
 // src/tui/App.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } 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 } = useStdout5();
+  const { stdout } = useStdout6();
   const {
     status: connectionStatus,
     environment,
     error: connectionError,
     retry: retryConnection
   } = useConnection();
-  const { refresh: refreshProviders } = useProviders();
+  const {
+    providers,
+    loading: providersLoading,
+    refresh: refreshProviders
+  } = useSetupProviders();
   const {
     models,
     warnings: modelWarnings,
@@ -1479,47 +1320,86 @@ function App({ runner }) {
     refresh: refreshModels
   } = useModels();
   const { requests } = useRequests();
-  const { syncedNames, refresh: refreshSynced } = useSyncedModels(connectionStatus);
+  const {
+    syncedNames,
+    syncedModels,
+    refresh: refreshSynced
+  } = useSyncedModels(connectionStatus);
   const shouldOnboard = getApiKey() === void 0;
-  const [page, setPage] = useState12(
+  const [page, setPage] = useState10(
     shouldOnboard ? "onboarding" : "dashboard"
   );
-  useEffect13(() => {
+  const [syncStatus, setSyncStatus] = useState10(
+    "idle"
+  );
+  const syncTimerRef = useRef5();
+  const lastSyncPayloadRef = useRef5("");
+  useEffect10(() => {
+    if (connectionStatus === "not_authenticated") {
+      setPage("onboarding");
+    }
+  }, [connectionStatus]);
+  useEffect10(() => {
     if (page === "dashboard") {
       refreshAll();
     }
   }, [page]);
-  useEffect13(() => {
-    if (connectionStatus === "connected" && models.length > 0) {
-      runner.start(models.map((m) => m.name));
+  useEffect10(() => {
+    if (connectionStatus === "connected" && syncedModels.length > 0) {
+      runner.start(syncedModels);
     }
-  }, [connectionStatus, models, runner]);
-  useEffect13(() => () => runner.stop(), [runner]);
-  const refreshAll = useCallback10(async () => {
-    await Promise.all([
-      refreshProviders(),
-      refreshModels(),
-      refreshSynced()
-    ]);
-  }, [refreshProviders, refreshModels, refreshSynced]);
-  const handleQuit = useCallback10(() => {
+  }, [connectionStatus, syncedModels, runner]);
+  useEffect10(() => () => runner.stop(), [runner]);
+  const refreshAll = useCallback8(
+    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]
+  );
+  useEffect10(() => {
+    if (connectionStatus !== "connected" || page !== "dashboard") return;
+    const interval = setInterval(() => refreshAll(true), 1500);
+    return () => clearInterval(interval);
+  }, [connectionStatus, page, refreshAll]);
+  const handleQuit = useCallback8(() => {
     runner.stop();
     exit();
   }, [runner, exit]);
-  const handleOnboardingComplete = useCallback10(() => {
+  const handleOnboardingComplete = useCallback8(() => {
     retryConnection();
     refreshAll();
     setPage("dashboard");
   }, [retryConnection, refreshAll]);
-  const handleNavigate = useCallback10(
+  const handleNavigate = useCallback8(
     (id) => {
       switch (id) {
         case "auth":
           setPage("onboarding");
           break;
-        case "register":
-          setPage("sync");
-          break;
         case "setup":
           setPage("setup");
           break;
@@ -1531,12 +1411,12 @@ function App({ runner }) {
           break;
       }
     },
-    [refreshModels, refreshSynced, refreshAll, handleQuit]
+    [refreshAll, handleQuit]
   );
   const subpageMenuItems = [
     { id: "back", label: "Back", description: "Return to dashboard" }
   ];
-  const handleSubpageNavigate = useCallback10(
+  const handleSubpageNavigate = useCallback8(
     (id) => {
       if (id === "back") {
         setPage("dashboard");
@@ -1546,32 +1426,51 @@ function App({ runner }) {
     },
     [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(
+  const [termSize, setTermSize] = useState10({
+    rows: stdout?.rows ?? 24,
+    columns: stdout?.columns ?? 80
+  });
+  useEffect10(() => {
+    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__ */ jsx8(Box7, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx8(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
       Header,
       {
         connection: connectionStatus,
         environment,
         configPath: getConfigPath(),
-        connectionError
+        connectionError,
+        compact: compactHeader
       }
     ),
-    page === "dashboard" && /* @__PURE__ */ jsx9(
+    page === "dashboard" && /* @__PURE__ */ jsx8(
       DashboardPage,
       {
         requests,
         models,
         modelWarnings,
+        providers,
+        providersLoading,
         syncedNames,
         modelsLoading,
+        syncStatus,
         onNavigate: handleNavigate
       }
     ),
-    page === "setup" && /* @__PURE__ */ jsx9(SetupPage, { onBack: () => setPage("dashboard") }),
-    page === "sync" && /* @__PURE__ */ jsx9(SyncPage, {}),
-    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx9(Box8, { flexGrow: 1 }),
-    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx9(
+    page === "setup" && /* @__PURE__ */ jsx8(SetupPage, { onBack: () => setPage("dashboard") }),
+    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx8(Box7, { flexGrow: 1 }),
+    page !== "dashboard" && page !== "setup" && /* @__PURE__ */ jsx8(
       NavigationMenu,
       {
         items: subpageMenuItems,
@@ -1621,8 +1520,8 @@ async function checkForUpdate() {
 }
 
 // src/tui/components/UpdatePrompt.tsx
-import { Box as Box9, Text as Text9, useInput as useInput4 } from "ink";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Box as Box8, Text as Text8, useInput as useInput4 } from "ink";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function UpdatePrompt({
   currentVersion,
   latestVersion,
@@ -1635,10 +1534,10 @@ function UpdatePrompt({
       onChoice(false);
     }
   });
-  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
-    /* @__PURE__ */ jsxs9(Text9, { children: [
-      /* @__PURE__ */ jsx10(Text9, { color: "yellow", bold: true, children: "Update available:" }),
-      /* @__PURE__ */ jsxs9(Text9, { children: [
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
+    /* @__PURE__ */ jsxs8(Text8, { children: [
+      /* @__PURE__ */ jsx9(Text8, { color: "yellow", bold: true, children: "Update available:" }),
+      /* @__PURE__ */ jsxs8(Text8, { children: [
         " ",
         "v",
         currentVersion,
@@ -1648,20 +1547,20 @@ function UpdatePrompt({
         latestVersion
       ] })
     ] }),
-    /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsxs9(Text9, { children: [
+    /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsxs8(Text8, { children: [
       "Press ",
-      /* @__PURE__ */ jsx10(Text9, { bold: true, color: "cyan", children: "y" }),
+      /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: "y" }),
       " to update, any other key to skip"
     ] }) })
   ] });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 async function promptForUpdate(currentVersion, latestVersion) {
   return new Promise((resolve) => {
     const { unmount } = render(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx10(
         UpdatePrompt,
         {
           currentVersion,
@@ -1703,7 +1602,7 @@ async function startTUI() {
   }
   const runner = new TunnelRunner();
   const { waitUntilExit } = render(
-    /* @__PURE__ */ jsx11(App, { runner }),
+    /* @__PURE__ */ jsx10(App, { runner }),
     {
       exitOnCtrlC: true
     }
@@ -1714,4 +1613,4 @@ async function startTUI() {
 export {
   startTUI
 };
-//# sourceMappingURL=tui-YFUZJIGF.js.map
+//# sourceMappingURL=tui-4ZB4JAV4.js.map