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

package/dist/{tui-BW6XKMWK.js → tui-EAU7OA4X.js}

@@ -20,19 +20,21 @@ import {
   setUserId,
   syncModels,
   verifyApiKey
-} from "./chunk-44NXQXRB.js";
+} from "./chunk-KLOTDVWL.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
 import { execFileSync, execSync as execSync2 } from "child_process";
 
 // src/tui/App.tsx
-import { useEffect as useEffect15, useCallback as useCallback10, useState as useState15, useRef as useRef9 } from "react";
+import { useEffect as useEffect16, useCallback as useCallback10, useState as useState16, useRef as useRef9 } from "react";
 import { Box as Box10, useApp, useStdout as useStdout7 } from "ink";
 
 // src/tui/components/Header.tsx
+import { useState, useEffect, useMemo } from "react";
 import os from "os";
 import { Box, Text } from "ink";
+import chalk from "chalk";
 import { createRequire } from "module";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
@@ -46,6 +48,52 @@ var LogoString = `       .=+-.     :++.
 =@@@@@@@-.@@@@@@@#.-@@@@@@+
 :@@@@@@:  +@@@@@#. .@@@@@@:
   .++:     .-*-.     .++:`;
+function useActiveShimmerLogo(active) {
+  const [frame, setFrame] = useState(0);
+  const lines = useMemo(() => LogoString.split("\n"), []);
+  const totalChars = useMemo(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  useEffect(() => {
+    if (!active) return;
+    const interval = setInterval(() => {
+      setFrame((f) => f + 1);
+    }, 25);
+    return () => clearInterval(interval);
+  }, [active]);
+  return useMemo(() => {
+    if (!active) return null;
+    const waveLength = 20;
+    let charIdx = 0;
+    return lines.map((line) => {
+      let result = "";
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === " " || ch === "	") {
+          result += ch;
+          continue;
+        }
+        const phase = (charIdx - frame * 0.5) / waveLength * Math.PI * 2;
+        const brightness = 0.65 + 0.35 * Math.sin(phase);
+        if (brightness >= 0.85) {
+          result += chalk.cyanBright(ch);
+        } else if (brightness >= 0.65) {
+          result += chalk.cyan(ch);
+        } else {
+          result += chalk.rgb(0, 140, 160)(ch);
+        }
+        charIdx++;
+      }
+      return result;
+    }).join("\n");
+  }, [active, frame, lines, totalChars]);
+}
 var getConnectionDisplay = (status) => {
   switch (status) {
     case "connected":
@@ -65,9 +113,11 @@ function Header({
   environment,
   configPath,
   connectionError,
-  compact
+  compact,
+  hasActiveRequest
 }) {
   const { color: connectionColor, text: connectionText } = getConnectionDisplay(connection);
+  const shimmerLogo = useActiveShimmerLogo(!compact && !!hasActiveRequest);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -79,7 +129,7 @@ function Header({
       paddingY: 1,
       width: "100%",
       children: [
-        !compact && /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: LogoString }) }),
+        !compact && /* @__PURE__ */ jsx(Box, { paddingLeft: 3, children: shimmerLogo ? /* @__PURE__ */ jsx(Text, { children: shimmerLogo }) : /* @__PURE__ */ jsx(Text, { color: "cyan", children: LogoString }) }),
         /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: compact ? 0 : 4, children: [
           /* @__PURE__ */ jsxs(Box, { children: [
             /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: "MindStudio Local Tunnel" }),
@@ -92,10 +142,6 @@ function Header({
               /* @__PURE__ */ jsx(Text, { color: "yellow", bold: true, children: "[LOCAL]" })
             ] })
           ] }),
-          !compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
-            "v",
-            pkg.version
-          ] }),
           /* @__PURE__ */ jsxs(Text, { color: connectionColor, children: [
             "\u25CF ",
             connectionText
@@ -104,6 +150,10 @@ function Header({
           /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
             "Config: ",
             configPath.replace(os.homedir(), "~")
+          ] }),
+          !compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+            "v",
+            pkg.version
           ] })
         ] })
       ]
@@ -112,18 +162,22 @@ function Header({
 }
 
 // src/tui/components/NavigationMenu.tsx
-import { useState, useEffect } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 import { Box as Box2, Text as Text2, useInput, useStdout } from "ink";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function NavigationMenu({ items, onSelect, title }) {
+function NavigationMenu({
+  items,
+  onSelect,
+  title
+}) {
   const { stdout } = useStdout();
   const compact = (stdout?.rows ?? 24) < 40;
   const getDefaultIndex = () => {
     const firstIdx = items.findIndex((i) => !i.disabled && !i.isSeparator);
     return firstIdx >= 0 ? firstIdx : 0;
   };
-  const [selectedIndex, setSelectedIndex] = useState(getDefaultIndex);
-  useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = useState2(getDefaultIndex);
+  useEffect2(() => {
     setSelectedIndex(getDefaultIndex());
   }, [items]);
   const selectableItems = items.filter((i) => !i.isSeparator);
@@ -159,60 +213,98 @@ 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
-      );
-    }) }) });
+    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 separatorExtraLines = items.filter(
+    (item, idx) => item.isSeparator && idx > 0
+  ).length;
   const menuHeight = items.length + 4 + separatorExtraLines;
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, marginBottom: 1, borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: "gray", children: [
-    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: title ?? "Actions" }) }),
-    /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map((item, index) => {
-      if (item.isSeparator) {
-        return /* @__PURE__ */ jsx2(Box2, { marginTop: index > 0 ? 1 : 0, children: item.label ? /* @__PURE__ */ jsx2(Text2, { bold: true, color: item.color ?? "gray", wrap: "truncate-end", children: item.label }) : null }, item.id);
-      }
-      const isSelected = index === selectedIndex;
-      const prefix = isSelected ? "\u276F" : " ";
-      if (item.disabled) {
-        return /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
-          prefix,
-          " ",
-          item.label,
-          item.disabledReason ? ` (${item.disabledReason})` : ""
-        ] }) }, item.id);
-      }
-      return /* @__PURE__ */ jsxs2(Box2, { height: 1, overflow: "hidden", children: [
-        /* @__PURE__ */ jsxs2(Text2, { color: isSelected ? "cyan" : "white", bold: isSelected, wrap: "truncate-end", children: [
-          prefix,
-          " ",
-          item.label
-        ] }),
-        isSelected && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
-          " - ",
-          item.description
-        ] })
-      ] }, item.id);
-    }) }),
-    /* @__PURE__ */ jsx2(Box2, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", wrap: "truncate-end", children: hasBack ? "Up/Down Navigate \u2022 Enter Select \u2022 q/Esc Back" : "Up/Down Navigate \u2022 Enter Select \u2022 q Quit" }) })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      flexDirection: "column",
+      paddingX: 1,
+      marginBottom: 1,
+      borderStyle: "single",
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      borderColor: "gray",
+      children: [
+        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: title ?? "Actions" }) }),
+        /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map((item, index) => {
+          if (item.isSeparator) {
+            return /* @__PURE__ */ jsx2(Box2, { marginTop: index > 0 ? 1 : 0, children: item.label ? /* @__PURE__ */ jsx2(Text2, { bold: true, color: item.color ?? "gray", wrap: "truncate-end", children: item.label }) : null }, item.id);
+          }
+          const isSelected = index === selectedIndex;
+          const prefix = isSelected ? "\u276F" : " ";
+          if (item.disabled) {
+            return /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
+              prefix,
+              " ",
+              item.label,
+              item.disabledReason ? ` (${item.disabledReason})` : ""
+            ] }) }, item.id);
+          }
+          return /* @__PURE__ */ jsxs2(Box2, { height: 1, overflow: "hidden", children: [
+            /* @__PURE__ */ jsxs2(
+              Text2,
+              {
+                color: isSelected ? "cyan" : "white",
+                bold: isSelected,
+                wrap: "truncate-end",
+                children: [
+                  prefix,
+                  " ",
+                  item.label
+                ]
+              }
+            ),
+            isSelected && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
+              " ",
+              "- ",
+              item.description
+            ] })
+          ] }, item.id);
+        }) }),
+        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", wrap: "truncate-end", children: hasBack ? "Up/Down Navigate \u2022 Enter Select \u2022 q/Esc Back" : "Up/Down Navigate \u2022 Enter Select \u2022 q Quit" }) })
+      ]
+    }
+  );
 }
 
 // src/tui/hooks/useConnection.ts
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState3, useEffect as useEffect3, useCallback } from "react";
 function useConnection() {
-  const [status, setStatus] = useState2("connecting");
-  const [error, setError] = useState2(null);
+  const [status, setStatus] = useState3("connecting");
+  const [error, setError] = useState3(null);
   const environment = getEnvironment();
   const connect = useCallback(async () => {
     setStatus("connecting");
@@ -235,7 +327,7 @@ function useConnection() {
       setError(err instanceof Error ? err.message : "Connection failed");
     }
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     connect();
   }, [connect]);
   return {
@@ -246,14 +338,65 @@ function useConnection() {
   };
 }
 
-// src/tui/models/hooks/useSetupProviders.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2, useRef } from "react";
-function useSetupProviders() {
-  const [providers, setProviders] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const [refreshing, setRefreshing] = useState3(false);
+// src/tui/interfaces/hooks/useEditorSessions.ts
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback2, useRef } from "react";
+function useEditorSessions() {
+  const [sessions, setSessions] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [error, setError] = useState4(null);
+  const [refreshStatus, setRefreshStatus] = useState4("idle");
   const initialLoadDone = useRef(false);
+  const timerRef = useRef();
+  const pollRef = useRef();
   const refresh = useCallback2(async () => {
+    if (!initialLoadDone.current) {
+      setLoading(true);
+    } else {
+      setRefreshStatus("refreshing");
+    }
+    setError(null);
+    try {
+      const data = await getEditorSessions();
+      setSessions(data);
+      initialLoadDone.current = true;
+      setRefreshStatus("refreshed");
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setRefreshStatus("idle"), 1500);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch sessions");
+      setRefreshStatus("idle");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect4(() => {
+    refresh();
+  }, [refresh]);
+  useEffect4(() => {
+    pollRef.current = setInterval(async () => {
+      if (!initialLoadDone.current) return;
+      try {
+        const data = await getEditorSessions();
+        setSessions(data);
+      } catch {
+      }
+    }, 5e3);
+    return () => clearInterval(pollRef.current);
+  }, []);
+  useEffect4(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  return { sessions, loading, error, refreshStatus, refresh };
+}
+
+// src/tui/models/hooks/useSetupProviders.ts
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback3, useRef as useRef2 } from "react";
+function useSetupProviders() {
+  const [providers, setProviders] = useState5([]);
+  const [loading, setLoading] = useState5(true);
+  const [refreshing, setRefreshing] = useState5(false);
+  const initialLoadDone = useRef2(false);
+  const refresh = useCallback3(async () => {
     if (!initialLoadDone.current) {
       setLoading(true);
     } else {
@@ -265,21 +408,21 @@ function useSetupProviders() {
     setLoading(false);
     setRefreshing(false);
   }, []);
-  useEffect3(() => {
+  useEffect5(() => {
     refresh();
   }, [refresh]);
   return { providers, loading, refreshing, refresh };
 }
 
 // src/tui/models/hooks/useModels.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3, useRef as useRef2 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback4, useRef as useRef3 } 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 () => {
+  const [models, setModels] = useState6([]);
+  const [warnings, setWarnings] = useState6([]);
+  const [loading, setLoading] = useState6(true);
+  const [refreshing, setRefreshing] = useState6(false);
+  const initialLoadDone = useRef3(false);
+  const refresh = useCallback4(async () => {
     if (!initialLoadDone.current) {
       setLoading(true);
     } else {
@@ -298,7 +441,7 @@ function useModels() {
       setRefreshing(false);
     }
   }, []);
-  useEffect4(() => {
+  useEffect6(() => {
     refresh();
   }, [refresh]);
   return {
@@ -311,11 +454,11 @@ function useModels() {
 }
 
 // src/tui/models/hooks/useRequests.ts
-import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef3 } from "react";
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback5, useRef as useRef4 } from "react";
 function useRequests(maxHistory = 50) {
-  const [requests, setRequests] = useState5([]);
-  const requestsRef = useRef3(/* @__PURE__ */ new Map());
-  useEffect5(() => {
+  const [requests, setRequests] = useState7([]);
+  const requestsRef = useRef4(/* @__PURE__ */ new Map());
+  useEffect7(() => {
     const interval = setInterval(() => {
       setRequests((prev) => {
         const hasActive = prev.some((r) => r.status === "processing");
@@ -324,7 +467,7 @@ function useRequests(maxHistory = 50) {
     }, 1e3);
     return () => clearInterval(interval);
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     const unsubStart = requestEvents.onStart((event) => {
       const entry = {
         id: event.id,
@@ -343,7 +486,9 @@ function useRequests(maxHistory = 50) {
           ...existing,
           ...event.content !== void 0 && { content: event.content },
           ...event.step !== void 0 && { step: event.step },
-          ...event.totalSteps !== void 0 && { totalSteps: event.totalSteps }
+          ...event.totalSteps !== void 0 && {
+            totalSteps: event.totalSteps
+          }
         };
         requestsRef.current.set(event.id, updated);
         setRequests(
@@ -375,7 +520,7 @@ function useRequests(maxHistory = 50) {
     };
   }, [maxHistory]);
   const activeCount = requests.filter((r) => r.status === "processing").length;
-  const clear = useCallback4(() => {
+  const clear = useCallback5(() => {
     requestsRef.current.clear();
     setRequests([]);
   }, []);
@@ -387,13 +532,11 @@ function useRequests(maxHistory = 50) {
 }
 
 // src/tui/models/hooks/useRegisteredModels.ts
-import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5 } from "react";
+import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6 } from "react";
 function useSyncedModels(connectionStatus) {
-  const [syncedNames, setSyncedNames] = useState6(
-    /* @__PURE__ */ new Set()
-  );
-  const [syncedModels, setSyncedModels] = useState6([]);
-  const refresh = useCallback5(async () => {
+  const [syncedNames, setSyncedNames] = useState8(/* @__PURE__ */ new Set());
+  const [syncedModels, setSyncedModels] = useState8([]);
+  const refresh = useCallback6(async () => {
     if (connectionStatus !== "connected") {
       setSyncedNames(/* @__PURE__ */ new Set());
       setSyncedModels([]);
@@ -406,7 +549,7 @@ function useSyncedModels(connectionStatus) {
     } catch {
     }
   }, [connectionStatus]);
-  useEffect6(() => {
+  useEffect8(() => {
     refresh();
   }, [refresh]);
   return {
@@ -417,7 +560,7 @@ function useSyncedModels(connectionStatus) {
 }
 
 // src/tui/models/pages/DashboardPage.tsx
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 import { Box as Box4, Text as Text4, useStdout as useStdout3 } from "ink";
 import Spinner2 from "ink-spinner";
 
@@ -455,7 +598,10 @@ function snippetLine(content, maxWidth) {
   if (flat.length <= maxWidth) return flat;
   return "\u2026" + flat.slice(-(maxWidth - 1));
 }
-function RequestItem({ request, width }) {
+function RequestItem({
+  request,
+  width
+}) {
   const time = formatTime(request.startTime);
   const typeLabel = getRequestTypeLabel(request.requestType);
   const snippetIndent = "   ";
@@ -470,13 +616,13 @@ function RequestItem({ request, width }) {
         /* @__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: "gray", children: " " }),
         /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
         /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
-          "  ",
+          " ",
           formatDuration(elapsed),
           "..."
         ] })
@@ -508,13 +654,13 @@ function RequestItem({ request, width }) {
         /* @__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: "gray", children: " " }),
         /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
         /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
-          "  ",
+          " ",
           duration,
           resultInfo
         ] })
@@ -530,18 +676,22 @@ function RequestItem({ request, width }) {
     /* @__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: "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 }) {
+function RequestLog({
+  requests,
+  maxVisible = 8,
+  hasModels = true
+}) {
   const { stdout } = useStdout2();
   const width = stdout?.columns ?? 80;
   const activeRequests = requests.filter((r) => r.status === "processing");
@@ -615,6 +765,8 @@ function DashboardPage({
   syncedNames,
   modelsLoading,
   syncStatus = "idle",
+  editorSessions,
+  editorsLoading,
   onNavigate
 }) {
   const { stdout } = useStdout3();
@@ -629,11 +781,11 @@ function DashboardPage({
     (name) => !allModelNames.has(name)
   );
   const syncDescription = syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "\u2713 Synced" : "Re-detect providers and sync models to MindStudio";
-  const menuItems = useMemo(() => {
+  const menuItems = useMemo2(() => {
     return [
       {
         id: "interfaces",
-        label: "Connect to IDE",
+        label: "Connect to Agent",
         description: "Connect your local editor to a MindStudio interface or script"
       },
       {
@@ -663,16 +815,25 @@ function DashboardPage({
   const headerLines = compactHeader ? 7 : 14;
   const providerContentLines = providersLoading ? 1 : installedProviders.length === 0 ? 2 : installedProviders.length;
   const providersLines = 3 + providerContentLines;
+  const editorsContentLines = editorsLoading ? 1 : editorSessions.length === 0 ? 1 : editorSessions.length;
+  const editorsLines = 3 + editorsContentLines;
   const modelContentLines = modelsLoading ? 1 : models.length === 0 && unavailableSynced.length === 0 && modelWarnings.length === 0 ? 2 : models.length + modelWarnings.length + (unavailableSynced.length > 0 ? 1 + unavailableSynced.length : 0);
   const modelsLines = 3 + modelContentLines;
   const requestLogOverhead = 3;
   const compactMenu = termHeight + 4 < 40;
   const menuLines = compactMenu ? 2 : menuItems.length + 6;
-  const usedLines = headerLines + providersLines + modelsLines + requestLogOverhead + menuLines;
+  const usedLines = headerLines + providersLines + editorsLines + modelsLines + requestLogOverhead + menuLines;
   const maxVisible = Math.max(3, termHeight - usedLines);
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", flexGrow: 1, children: [
     /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Providers" }),
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Open Agents" }),
+      editorsLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
+        /* @__PURE__ */ jsx4(Text4, { children: " Loading editor sessions..." })
+      ] }) : editorSessions.length === 0 ? /* @__PURE__ */ jsx4(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "Agents you are editing in the MindStudio IDE will appear here." }) }) : /* @__PURE__ */ jsx4(Box4, { flexDirection: "column", marginTop: 1, children: editorSessions.map((session) => /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsx4(Text4, { color: "white", children: session.appName }) }, session.appId)) })
+    ] }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "AI Model Providers" }),
       providersLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
         /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
         /* @__PURE__ */ jsx4(Text4, { children: " Detecting providers..." })
@@ -691,7 +852,7 @@ function DashboardPage({
       }) })
     ] }),
     /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
-      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Models" }),
+      /* @__PURE__ */ jsx4(Text4, { bold: true, color: "white", underline: true, children: "Local Models" }),
       modelsLoading ? /* @__PURE__ */ jsxs4(Box4, { marginTop: 1, children: [
         /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: /* @__PURE__ */ jsx4(Spinner2, { type: "dots" }) }),
         /* @__PURE__ */ jsx4(Text4, { children: " Discovering models..." })
@@ -748,18 +909,18 @@ function DashboardPage({
 }
 
 // src/tui/models/pages/SetupPage.tsx
-import { useState as useState7, useMemo as useMemo3, useEffect as useEffect7 } from "react";
+import { useState as useState9, useMemo as useMemo4, useEffect as useEffect9 } from "react";
 import { Box as Box5, Text as Text6, useInput as useInput2, useStdout as useStdout5 } from "ink";
 import Spinner3 from "ink-spinner";
 
 // src/tui/components/MarkdownText.tsx
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { Text as Text5, useStdout as useStdout4 } from "ink";
-import chalk from "chalk";
+import chalk2 from "chalk";
 import { marked } from "marked";
 import { markedTerminal } from "marked-terminal";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var codeStyle = chalk.cyan;
+var codeStyle = chalk2.cyan;
 var identity = (s) => s;
 function renderMarkdown(content, width) {
   marked.use(
@@ -793,7 +954,7 @@ function ProviderDetailView({
   provider,
   onBack
 }) {
-  const [scrollOffset, setScrollOffset] = useState7(0);
+  const [scrollOffset, setScrollOffset] = useState9(0);
   const { stdout } = useStdout5();
   const termHeight = (stdout?.rows ?? 24) - 4;
   const headerHeight = 14;
@@ -801,7 +962,7 @@ function ProviderDetailView({
   const contentPadding = 2;
   const viewHeight = termHeight - headerHeight - footerLines - contentPadding;
   const contentWidth = (stdout?.columns ?? 80) - 4;
-  const renderedLines = useMemo3(() => {
+  const renderedLines = useMemo4(() => {
     const rendered = renderMarkdown(provider.readme, contentWidth);
     return rendered.split("\n");
   }, [provider.readme, contentWidth]);
@@ -818,7 +979,7 @@ function ProviderDetailView({
     }
   });
   const visibleContent = renderedLines.slice(scrollOffset, scrollOffset + viewHeight).join("\n");
-  const scrollbar = useMemo3(() => {
+  const scrollbar = useMemo4(() => {
     if (maxScroll === 0) return null;
     const thumbSize = Math.max(
       1,
@@ -888,27 +1049,27 @@ function ProviderDetailView({
 }
 function SetupPage({ onBack }) {
   const { providers, loading } = useSetupProviders();
-  const [selectedProvider, setSelectedProvider] = useState7(null);
-  const running = useMemo3(
+  const [selectedProvider, setSelectedProvider] = useState9(null);
+  const running = useMemo4(
     () => providers.filter((p) => p.status.running),
     [providers]
   );
-  const installed = useMemo3(
+  const installed = useMemo4(
     () => providers.filter((p) => p.status.installed && !p.status.running),
     [providers]
   );
-  const notInstalled = useMemo3(
+  const notInstalled = useMemo4(
     () => providers.filter((p) => !p.status.installed),
     [providers]
   );
-  const allProviders = useMemo3(
+  const allProviders = useMemo4(
     () => [...running, ...installed, ...notInstalled],
     [running, installed, notInstalled]
   );
   const totalItems = allProviders.length + 1;
   const backIndex = allProviders.length;
-  const [cursorIndex, setCursorIndex] = useState7(0);
-  useEffect7(() => {
+  const [cursorIndex, setCursorIndex] = useState9(0);
+  useEffect9(() => {
     setCursorIndex(0);
   }, [allProviders.length]);
   useInput2((input, key) => {
@@ -1088,51 +1249,11 @@ function SetupPage({ onBack }) {
 }
 
 // src/tui/interfaces/pages/InterfacesPage.tsx
-import { useState as useState12, useMemo as useMemo5, useEffect as useEffect12, useRef as useRef7 } from "react";
+import { useState as useState13, useMemo as useMemo6, useEffect as useEffect13, useRef as useRef7 } from "react";
 import { Box as Box8, Text as Text9, useInput as useInput5 } from "ink";
-import Spinner5 from "ink-spinner";
-
-// src/tui/interfaces/hooks/useEditorSessions.ts
-import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6, useRef as useRef4 } from "react";
-function useEditorSessions() {
-  const [sessions, setSessions] = useState8([]);
-  const [loading, setLoading] = useState8(true);
-  const [error, setError] = useState8(null);
-  const [refreshStatus, setRefreshStatus] = useState8("idle");
-  const initialLoadDone = useRef4(false);
-  const timerRef = useRef4();
-  const refresh = useCallback6(async () => {
-    if (!initialLoadDone.current) {
-      setLoading(true);
-    } else {
-      setRefreshStatus("refreshing");
-    }
-    setError(null);
-    try {
-      const data = await getEditorSessions();
-      setSessions(data);
-      initialLoadDone.current = true;
-      setRefreshStatus("refreshed");
-      clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setRefreshStatus("idle"), 1500);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to fetch sessions");
-      setRefreshStatus("idle");
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-  useEffect8(() => {
-    refresh();
-  }, [refresh]);
-  useEffect8(() => {
-    return () => clearTimeout(timerRef.current);
-  }, []);
-  return { sessions, loading, error, refreshStatus, refresh };
-}
 
 // src/tui/interfaces/hooks/useLocalInterface.ts
-import { useState as useState9, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect9 } from "react";
+import { useState as useState10, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect10 } from "react";
 import { spawn } from "child_process";
 import crypto from "crypto";
 import fs from "fs";
@@ -1148,7 +1269,7 @@ function useLocalInterface({
   sessionId
 }) {
   const key = `${appId}:${stepId}`;
-  const [hasLocalCopy, setHasLocalCopy] = useState9(() => {
+  const [hasLocalCopy, setHasLocalCopy] = useState10(() => {
     const existing = getLocalInterfacePath(key);
     if (!existing) return false;
     try {
@@ -1157,13 +1278,13 @@ function useLocalInterface({
       return false;
     }
   });
-  const [phase, setPhase] = useState9("idle");
-  const [outputLines, setOutputLines] = useState9([]);
-  const [errorMessage, setErrorMessage] = useState9(null);
+  const [phase, setPhase] = useState10("idle");
+  const [outputLines, setOutputLines] = useState10([]);
+  const [errorMessage, setErrorMessage] = useState10(null);
   const processRef = useRef5(null);
   const mountedRef = useRef5(true);
   const stoppedRef = useRef5(false);
-  useEffect9(() => {
+  useEffect10(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -1222,7 +1343,17 @@ function useLocalInterface({
     if (mode === "script") {
       env.MINDSTUDIO_API_KEY = getApiKey() ?? "";
       return {
-        args: ["run", "dev:local", "--", "--app", appId, "--workflow", workflowId, "--step", stepId],
+        args: [
+          "run",
+          "dev:local",
+          "--",
+          "--app",
+          appId,
+          "--workflow",
+          workflowId,
+          "--step",
+          stepId
+        ],
         env
       };
     }
@@ -1290,14 +1421,21 @@ function useLocalInterface({
       } catch (err) {
         if (mountedRef.current) {
           setPhase("error");
-          setErrorMessage(
-            err instanceof Error ? err.message : "Unknown error"
-          );
+          setErrorMessage(err instanceof Error ? err.message : "Unknown error");
         }
       }
     };
     run();
-  }, [key, mode, appId, stepId, workflowId, sessionId, appendOutput, runCommand]);
+  }, [
+    key,
+    mode,
+    appId,
+    stepId,
+    workflowId,
+    sessionId,
+    appendOutput,
+    runCommand
+  ]);
   const stop = useCallback7(() => {
     stoppedRef.current = true;
     if (processRef.current) {
@@ -1324,9 +1462,7 @@ function useLocalInterface({
       setHasLocalCopy(false);
       appendOutput("Deleted successfully.");
     } catch (err) {
-      setErrorMessage(
-        err instanceof Error ? err.message : "Failed to delete"
-      );
+      setErrorMessage(err instanceof Error ? err.message : "Failed to delete");
     }
     setPhase("idle");
   }, [key, appendOutput]);
@@ -1343,7 +1479,7 @@ function useLocalInterface({
 }
 
 // src/tui/interfaces/pages/InterfaceSessionView.tsx
-import { useState as useState10, useEffect as useEffect10 } from "react";
+import { useState as useState11, useEffect as useEffect11 } from "react";
 import { Box as Box6, Text as Text7, useInput as useInput3 } from "ink";
 import os2 from "os";
 import open from "open";
@@ -1364,8 +1500,8 @@ function InterfaceSessionView({
     menuItems.push({ id: "delete", label: "Delete Local Copy" });
   }
   menuItems.push({ id: "back", label: "Back" });
-  const [cursorIndex, setCursorIndex] = useState10(0);
-  useEffect10(() => {
+  const [cursorIndex, setCursorIndex] = useState11(0);
+  useEffect11(() => {
     setCursorIndex(0);
   }, [hasLocalCopy]);
   useInput3((input, key) => {
@@ -1447,7 +1583,7 @@ function InterfaceSessionView({
 }
 
 // src/tui/interfaces/pages/InterfaceRunningView.tsx
-import { useState as useState11, useMemo as useMemo4, useRef as useRef6, useEffect as useEffect11 } from "react";
+import { useState as useState12, useMemo as useMemo5, useRef as useRef6, useEffect as useEffect12 } from "react";
 import { Box as Box7, Text as Text8, useInput as useInput4, useStdout as useStdout6 } from "ink";
 import { execSync } from "child_process";
 import os3 from "os";
@@ -1473,13 +1609,21 @@ function getPhaseLabel(phase) {
     case "cloning":
       return { text: "Cloning scaffold...", color: "cyan", showSpinner: true };
     case "installing":
-      return { text: "Installing dependencies...", color: "cyan", showSpinner: true };
+      return {
+        text: "Installing dependencies...",
+        color: "cyan",
+        showSpinner: true
+      };
     case "running":
       return { text: "Dev server running", color: "green", showSpinner: true };
     case "error":
       return { text: "Error", color: "red", showSpinner: false };
     case "deleting":
-      return { text: "Deleting local copy...", color: "yellow", showSpinner: true };
+      return {
+        text: "Deleting local copy...",
+        color: "yellow",
+        showSpinner: true
+      };
     default:
       return { text: "Idle", color: "gray", showSpinner: false };
   }
@@ -1497,20 +1641,28 @@ function InterfaceRunningView({
   const termHeight = (stdout?.rows ?? 24) - 4;
   const isActive = phase === "cloning" || phase === "installing" || phase === "running" || phase === "deleting";
   const displayPath = localPath?.replace(os3.homedir(), "~");
-  const menuItems = useMemo4(() => {
+  const menuItems = useMemo5(() => {
     const items = [];
     if (isActive && displayPath) {
-      items.push({ id: "claude", label: "Copy Claude Code Command", copyValue: `cd ${displayPath} && claude` });
-      items.push({ id: "codex", label: "Copy Codex Command", copyValue: `cd ${displayPath} && codex` });
+      items.push({
+        id: "claude",
+        label: "Copy Claude Code Command",
+        copyValue: `cd ${displayPath} && claude`
+      });
+      items.push({
+        id: "codex",
+        label: "Copy Codex Command",
+        copyValue: `cd ${displayPath} && codex`
+      });
       items.push({ id: "reveal", label: "Open Folder" });
     }
     items.push({ id: "action", label: isActive ? "Stop" : "Back" });
     return items;
   }, [isActive, displayPath]);
-  const [cursorIndex, setCursorIndex] = useState11(0);
-  const [copiedId, setCopiedId] = useState11(null);
+  const [cursorIndex, setCursorIndex] = useState12(0);
+  const [copiedId, setCopiedId] = useState12(null);
   const copiedTimerRef = useRef6();
-  useEffect11(() => {
+  useEffect12(() => {
     return () => clearTimeout(copiedTimerRef.current);
   }, []);
   const headerHeight = 14;
@@ -1590,14 +1742,15 @@ function InterfaceRunningView({
       "\u2022",
       " Enter Select ",
       "\u2022",
-      " q/Esc ",
+      " q/Esc",
+      " ",
       isActive ? "Stop" : "Back"
     ] }) })
   ] }) });
 }
 
 // src/tui/interfaces/pages/InterfacesPage.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function getSessionStatus(item) {
   if (item.kind === "script") return "running";
   const status = item.step.spaEditorSession?.status;
@@ -1640,10 +1793,7 @@ function formatCount(interfaces, scripts) {
   }
   return parts.join(", ");
 }
-function OfflineView({
-  item,
-  onBack
-}) {
+function OfflineView({ item, onBack }) {
   useInput5((input, key) => {
     if (input === "q" || key.escape || key.return) {
       onBack();
@@ -1673,8 +1823,8 @@ function AgentListView({
   const refreshIndex = sessions.length;
   const backIndex = sessions.length + 1;
   const totalItems = sessions.length + 2;
-  const [cursorIndex, setCursorIndex] = useState12(0);
-  useEffect12(() => {
+  const [cursorIndex, setCursorIndex] = useState13(0);
+  useEffect13(() => {
     setCursorIndex(sessions.length > 0 ? 0 : backIndex);
   }, [sessions.length, backIndex]);
   useInput5((input, key) => {
@@ -1698,35 +1848,48 @@ function AgentListView({
   });
   return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
     /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
-    sessions.length === 0 ? /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx9(Text9, { color: "yellow", children: "No active editor sessions." }),
-      /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Open an app in MindStudio's editor to see sessions here." })
-    ] }) : /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: sessions.map((session, i) => {
+    /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Don't see your agent? Make sure it's open in the MindStudio editor." }),
+    sessions.length === 0 ? /* @__PURE__ */ jsx9(Box8, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx9(Text9, { color: "yellow", children: "No active editor sessions." }) }) : /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: sessions.map((session, i) => {
       const isSelected = i === cursorIndex;
       const stats = formatCount(
         session.customInterfaceSteps.length,
         session.scriptSteps.length
       );
-      return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
-        /* @__PURE__ */ jsxs8(Box8, { children: [
-          /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
-            isSelected ? "\u276F" : " ",
-            " ",
-            session.appName
-          ] }),
-          isSelected && /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " - Connect to this Agent" })
-        ] }),
-        /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
-          "  ",
-          "https://app.mindstudio.ai/agents/",
-          session.appId,
-          "/edit"
-        ] }),
-        /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
-          "  ",
-          stats
-        ] })
-      ] }, session.appId);
+      return /* @__PURE__ */ jsxs8(
+        Box8,
+        {
+          flexDirection: "column",
+          marginTop: i > 0 ? 1 : 0,
+          children: [
+            /* @__PURE__ */ jsxs8(Box8, { children: [
+              /* @__PURE__ */ jsxs8(
+                Text9,
+                {
+                  color: isSelected ? "cyan" : "white",
+                  bold: isSelected,
+                  children: [
+                    isSelected ? "\u276F" : " ",
+                    " ",
+                    session.appName
+                  ]
+                }
+              ),
+              isSelected && /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " - Connect to this Agent" })
+            ] }),
+            /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+              "  ",
+              "https://app.mindstudio.ai/agents/",
+              session.appId,
+              "/edit"
+            ] }),
+            stats !== "" && /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+              "  ",
+              stats
+            ] })
+          ]
+        },
+        session.appId
+      );
     }) }),
     /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
       /* @__PURE__ */ jsxs8(Box8, { children: [
@@ -1774,11 +1937,8 @@ function AgentDetailView({
   onRefresh,
   refreshStatus
 }) {
-  const [offlineItem, setOfflineItem] = useState12(null);
-  useEffect12(() => {
-    onRefresh();
-  }, []);
-  const interfaces = useMemo5(
+  const [offlineItem, setOfflineItem] = useState13(null);
+  const interfaces = useMemo6(
     () => session.customInterfaceSteps.map((step) => ({
       kind: "interface",
       appId: session.appId,
@@ -1787,7 +1947,7 @@ function AgentDetailView({
     })),
     [session]
   );
-  const scripts = useMemo5(
+  const scripts = useMemo6(
     () => session.scriptSteps.map((step) => ({
       kind: "script",
       appId: session.appId,
@@ -1796,15 +1956,15 @@ function AgentDetailView({
     })),
     [session]
   );
-  const allItems = useMemo5(
+  const allItems = useMemo6(
     () => [...interfaces, ...scripts],
     [interfaces, scripts]
   );
   const refreshIndex = allItems.length;
   const backIndex = allItems.length + 1;
   const totalItems = allItems.length + 2;
-  const [cursorIndex, setCursorIndex] = useState12(0);
-  useEffect12(() => {
+  const [cursorIndex, setCursorIndex] = useState13(0);
+  useEffect13(() => {
     setCursorIndex(0);
   }, [allItems.length]);
   useInput5((input, key) => {
@@ -1840,48 +2000,83 @@ function AgentDetailView({
   const scriptsOffset = interfaces.length;
   return /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", flexGrow: 1, children: /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
     /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: session.appName }),
+    /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+      "https://app.mindstudio.ai/agents/",
+      session.appId,
+      "/edit"
+    ] }),
     /* @__PURE__ */ jsx9(Text9, { color: "gray", children: "Select an interface or script to connect your local editor." }),
     /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
-      interfaces.length > 0 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Interfaces" }),
-        /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: interfaces.map((item, i) => {
-          const isSelected = i === cursorIndex;
-          const status = getSessionStatus(item);
-          const statusLabel = getStatusLabel(status);
-          return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
-            /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
-              isSelected ? "\u276F" : " ",
-              " ",
-              item.step.workflowName,
-              " - ",
-              item.step.displayName
-            ] }),
-            /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsxs8(Text9, { color: statusLabel.color, children: [
-              "  ",
-              statusLabel.text
-            ] }) })
-          ] }, `${item.step.workflowId}:${item.step.stepId}`);
-        }) })
-      ] }),
-      scripts.length > 0 && /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: interfaces.length > 0 ? 1 : 0, children: [
-        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Scripts" }),
-        /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: scripts.map((item, i) => {
+      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", children: "Interfaces" }),
+      interfaces.length > 0 ? /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: interfaces.map((item, i) => {
+        const isSelected = i === cursorIndex;
+        const status = getSessionStatus(item);
+        const statusLabel = getStatusLabel(status);
+        return /* @__PURE__ */ jsxs8(
+          Box8,
+          {
+            flexDirection: "column",
+            marginTop: i > 0 ? 1 : 0,
+            children: [
+              /* @__PURE__ */ jsxs8(
+                Text9,
+                {
+                  color: isSelected ? "cyan" : "white",
+                  bold: isSelected,
+                  children: [
+                    isSelected ? "\u276F" : " ",
+                    " ",
+                    item.step.workflowName,
+                    " -",
+                    " ",
+                    item.step.displayName
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx9(Box8, { children: /* @__PURE__ */ jsxs8(Text9, { color: statusLabel.color, children: [
+                "  ",
+                statusLabel.text
+              ] }) })
+            ]
+          },
+          `${item.step.workflowId}:${item.step.stepId}`
+        );
+      }) }) : /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " No interfaces in this agent." }),
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
+        /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", children: "Scripts" }),
+        scripts.length > 0 ? /* @__PURE__ */ jsx9(Box8, { flexDirection: "column", marginTop: 1, children: scripts.map((item, i) => {
           const index = scriptsOffset + i;
           const isSelected = index === cursorIndex;
-          return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [
-            /* @__PURE__ */ jsxs8(Text9, { color: isSelected ? "cyan" : "white", bold: isSelected, children: [
-              isSelected ? "\u276F" : " ",
-              " ",
-              item.step.workflowName,
-              " - ",
-              item.step.displayName
-            ] }),
-            /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
-              "  ",
-              item.step.entryFile
-            ] })
-          ] }, `${item.step.workflowId}:${item.step.stepId}`);
-        }) })
+          return /* @__PURE__ */ jsxs8(
+            Box8,
+            {
+              flexDirection: "column",
+              marginTop: i > 0 ? 1 : 0,
+              children: [
+                /* @__PURE__ */ jsxs8(
+                  Text9,
+                  {
+                    color: isSelected ? "cyan" : "white",
+                    bold: isSelected,
+                    children: [
+                      isSelected ? "\u276F" : " ",
+                      " ",
+                      item.step.workflowName,
+                      " -",
+                      " ",
+                      item.step.displayName
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs8(Text9, { color: "gray", children: [
+                  "  ",
+                  item.step.entryFile
+                ] })
+              ]
+            },
+            `${item.step.workflowId}:${item.step.stepId}`
+          );
+        }) }) : /* @__PURE__ */ jsx9(Text9, { color: "gray", children: " No scripts in this agent." })
       ] }),
       /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", marginTop: 1, children: [
         /* @__PURE__ */ jsxs8(Box8, { children: [
@@ -1952,7 +2147,7 @@ function LocalDevView({
   const name = `${item.step.workflowName} - ${item.step.displayName}`;
   const isActive = phase === "cloning" || phase === "installing" || phase === "running" || phase === "deleting";
   const wasActiveRef = useRef7(false);
-  useEffect12(() => {
+  useEffect13(() => {
     if (isActive) {
       wasActiveRef.current = true;
     } else if (wasActiveRef.current && phase === "idle") {
@@ -1986,33 +2181,16 @@ function LocalDevView({
     }
   );
 }
-function InterfacesPage({ onBack }) {
-  const { sessions, loading, error, refreshStatus, refresh } = useEditorSessions();
-  const [selectedAppId, setSelectedAppId] = useState12(null);
-  const [selectedItem, setSelectedItem] = useState12(null);
-  if (loading) {
-    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", flexGrow: 1, paddingX: 1, marginTop: 1, children: [
-      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
-      /* @__PURE__ */ jsxs8(Box8, { marginTop: 1, children: [
-        /* @__PURE__ */ jsx9(Text9, { color: "cyan", children: /* @__PURE__ */ jsx9(Spinner5, { type: "dots" }) }),
-        /* @__PURE__ */ jsx9(Text9, { children: " Loading editor sessions..." })
-      ] })
-    ] });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", flexGrow: 1, paddingX: 1, marginTop: 1, children: [
-      /* @__PURE__ */ jsx9(Text9, { bold: true, color: "white", underline: true, children: "Choose an Agent" }),
-      /* @__PURE__ */ jsx9(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text9, { color: "red", children: error }) })
-    ] });
-  }
+function InterfacesPage({
+  onBack,
+  sessions,
+  refreshStatus,
+  refresh
+}) {
+  const [selectedAppId, setSelectedAppId] = useState13(null);
+  const [selectedItem, setSelectedItem] = useState13(null);
   if (selectedItem) {
-    return /* @__PURE__ */ jsx9(
-      LocalDevView,
-      {
-        item: selectedItem,
-        onBack: () => setSelectedItem(null)
-      }
-    );
+    return /* @__PURE__ */ jsx9(LocalDevView, { item: selectedItem, onBack: () => setSelectedItem(null) });
   }
   if (selectedAppId) {
     const session = sessions.find((s) => s.appId === selectedAppId);
@@ -2044,23 +2222,23 @@ function InterfacesPage({ onBack }) {
 }
 
 // src/tui/pages/OnboardingPage.tsx
-import { useEffect as useEffect14, useCallback as useCallback9, useState as useState14, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect15, useCallback as useCallback9, useState as useState15, useMemo as useMemo7 } from "react";
 import { Box as Box9, Text as Text10, useInput as useInput6 } from "ink";
-import Spinner6 from "ink-spinner";
-import chalk2 from "chalk";
+import Spinner5 from "ink-spinner";
+import chalk3 from "chalk";
 
 // src/tui/hooks/useAuth.ts
-import { useState as useState13, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect13 } from "react";
+import { useState as useState14, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect14 } from "react";
 import open3 from "open";
 var POLL_INTERVAL = 2e3;
 var MAX_ATTEMPTS = 30;
 function useAuth() {
-  const [status, setStatus] = useState13("idle");
-  const [authUrl, setAuthUrl] = useState13(null);
-  const [timeRemaining, setTimeRemaining] = useState13(0);
+  const [status, setStatus] = useState14("idle");
+  const [authUrl, setAuthUrl] = useState14(null);
+  const [timeRemaining, setTimeRemaining] = useState14(0);
   const cancelledRef = useRef8(false);
   const timerRef = useRef8(null);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       cancelledRef.current = true;
       if (timerRef.current) clearInterval(timerRef.current);
@@ -2137,12 +2315,12 @@ function useAuth() {
 }
 
 // src/tui/pages/OnboardingPage.tsx
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var SHIMMER_SPEED = 35;
 function useShimmerLogo() {
-  const [frame, setFrame] = useState14(0);
-  const lines = useMemo6(() => LogoString.split("\n"), []);
-  const totalChars = useMemo6(() => {
+  const [frame, setFrame] = useState15(0);
+  const lines = useMemo7(() => LogoString.split("\n"), []);
+  const totalChars = useMemo7(() => {
     let count = 0;
     for (const line of lines) {
       for (const ch of line) {
@@ -2152,13 +2330,13 @@ function useShimmerLogo() {
     return count;
   }, [lines]);
   const cycleLength = totalChars + 40;
-  useEffect14(() => {
+  useEffect15(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % cycleLength);
     }, SHIMMER_SPEED);
     return () => clearInterval(interval);
   }, [cycleLength]);
-  return useMemo6(() => {
+  return useMemo7(() => {
     const sweepPos = frame;
     const holdEnd = totalChars + 20;
     let charIdx = 0;
@@ -2182,13 +2360,13 @@ function useShimmerLogo() {
           brightness = Math.max(0.1, 1 - fadeProgress);
         }
         if (brightness >= 0.9) {
-          result += chalk2.cyanBright.bold(ch);
+          result += chalk3.cyanBright.bold(ch);
         } else if (brightness >= 0.6) {
-          result += chalk2.cyan(ch);
+          result += chalk3.cyan(ch);
         } else if (brightness >= 0.3) {
-          result += chalk2.rgb(0, 100, 120)(ch);
+          result += chalk3.rgb(0, 100, 120)(ch);
         } else {
-          result += chalk2.rgb(0, 50, 60)(ch);
+          result += chalk3.rgb(0, 50, 60)(ch);
         }
         charIdx++;
       }
@@ -2205,13 +2383,13 @@ function OnboardingPage({ onComplete }) {
     cancel: cancelAuth
   } = useAuth();
   const shimmerLogo = useShimmerLogo();
-  useEffect14(() => {
+  useEffect15(() => {
     if (authStatus === "success") {
       const timer = setTimeout(() => onComplete(), 1500);
       return () => clearTimeout(timer);
     }
   }, [authStatus, onComplete]);
-  useEffect14(() => {
+  useEffect15(() => {
     return () => cancelAuth();
   }, []);
   const handleAction = useCallback9(() => {
@@ -2230,17 +2408,17 @@ function OnboardingPage({ onComplete }) {
       /* @__PURE__ */ jsx10(Text10, { children: shimmerLogo }),
       /* @__PURE__ */ jsx10(Box9, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx10(Text10, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
       /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", alignItems: "center", children: [
-        authStatus === "idle" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        authStatus === "idle" && /* @__PURE__ */ jsxs9(Fragment4, { children: [
           /* @__PURE__ */ jsx10(Text10, { color: "gray", children: "Connect your MindStudio account to get started." }),
           /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { color: "cyan", bold: true, children: "Press any key to Connect Account" }) })
         ] }),
-        (authStatus === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        (authStatus === "expired" || authStatus === "timeout") && /* @__PURE__ */ jsxs9(Fragment4, { children: [
           /* @__PURE__ */ jsx10(Text10, { color: "red", children: authStatus === "expired" ? "Authorization expired." : "Authorization timed out." }),
           /* @__PURE__ */ jsx10(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text10, { color: "cyan", bold: true, children: "Press any key to Try Again" }) })
         ] }),
-        authStatus === "waiting" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+        authStatus === "waiting" && /* @__PURE__ */ jsxs9(Fragment4, { children: [
           /* @__PURE__ */ jsxs9(Box9, { children: [
-            /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: /* @__PURE__ */ jsx10(Spinner6, { type: "dots" }) }),
+            /* @__PURE__ */ jsx10(Text10, { color: "cyan", children: /* @__PURE__ */ jsx10(Spinner5, { type: "dots" }) }),
             /* @__PURE__ */ jsxs9(Text10, { children: [
               " ",
               "Waiting for browser authorization... (",
@@ -2264,7 +2442,7 @@ function OnboardingPage({ onComplete }) {
 }
 
 // src/tui/App.tsx
-import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var MODEL_TYPE_MAP = {
   text: "llm_chat",
   image: "image_generation",
@@ -2279,6 +2457,7 @@ function App({ runner }) {
     error: connectionError,
     retry: retryConnection
   } = useConnection();
+  const editorSessions = useEditorSessions();
   const {
     providers,
     loading: providersLoading,
@@ -2290,37 +2469,37 @@ function App({ runner }) {
     loading: modelsLoading,
     refresh: refreshModels
   } = useModels();
-  const { requests } = useRequests();
+  const { requests, activeCount: activeRequestCount } = useRequests();
   const {
     syncedNames,
     syncedModels,
     refresh: refreshSynced
   } = useSyncedModels(connectionStatus);
   const shouldOnboard = getApiKey() === void 0 || getUserId() === void 0;
-  const [page, setPage] = useState15(
+  const [page, setPage] = useState16(
     shouldOnboard ? "onboarding" : "dashboard"
   );
-  const [syncStatus, setSyncStatus] = useState15(
+  const [syncStatus, setSyncStatus] = useState16(
     "idle"
   );
-  const syncTimerRef = useRef9();
+  const syncTimerRef = useRef9(void 0);
   const lastSyncPayloadRef = useRef9("");
-  useEffect15(() => {
+  useEffect16(() => {
     if (connectionStatus === "not_authenticated") {
       setPage("onboarding");
     }
   }, [connectionStatus]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (page === "dashboard") {
       refreshAll();
     }
   }, [page]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (connectionStatus === "connected" && syncedModels.length > 0) {
       runner.start(syncedModels);
     }
   }, [connectionStatus, syncedModels, runner]);
-  useEffect15(() => () => runner.stop(), [runner]);
+  useEffect16(() => () => runner.stop(), [runner]);
   const refreshAll = useCallback10(
     async (silent = false) => {
       if (!silent) setSyncStatus("syncing");
@@ -2351,7 +2530,7 @@ function App({ runner }) {
     },
     [refreshProviders, refreshModels, refreshSynced]
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (connectionStatus !== "connected" || page !== "dashboard") return;
     const interval = setInterval(() => refreshAll(true), 1500);
     return () => clearInterval(interval);
@@ -2400,11 +2579,11 @@ function App({ runner }) {
     },
     [handleNavigate]
   );
-  const [termSize, setTermSize] = useState15({
+  const [termSize, setTermSize] = useState16({
     rows: stdout?.rows ?? 24,
     columns: stdout?.columns ?? 80
   });
-  useEffect15(() => {
+  useEffect16(() => {
     if (!stdout) return;
     const onResize = () => {
       stdout.write("\x1B[2J\x1B[H");
@@ -2417,7 +2596,7 @@ function App({ runner }) {
   }, [stdout]);
   const termHeight = termSize.rows - 4;
   const compactHeader = termSize.rows <= 45 || termSize.columns <= 90;
-  return /* @__PURE__ */ jsx11(Box10, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx11(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs10(Fragment6, { children: [
+  return /* @__PURE__ */ jsx11(Box10, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx11(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
     /* @__PURE__ */ jsx11(
       Header,
       {
@@ -2425,7 +2604,8 @@ function App({ runner }) {
         environment,
         configPath: getConfigPath(),
         connectionError,
-        compact: compactHeader
+        compact: compactHeader,
+        hasActiveRequest: activeRequestCount > 0
       }
     ),
     page === "dashboard" && /* @__PURE__ */ jsx11(
@@ -2439,6 +2619,8 @@ function App({ runner }) {
         syncedNames,
         modelsLoading,
         syncStatus,
+        editorSessions: editorSessions.sessions,
+        editorsLoading: editorSessions.loading,
         onNavigate: handleNavigate
       }
     ),
@@ -2446,7 +2628,10 @@ function App({ runner }) {
     page === "interfaces" && /* @__PURE__ */ jsx11(
       InterfacesPage,
       {
-        onBack: () => setPage("dashboard")
+        onBack: () => setPage("dashboard"),
+        sessions: editorSessions.sessions,
+        refreshStatus: editorSessions.refreshStatus,
+        refresh: editorSessions.refresh
       }
     ),
     page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
@@ -2500,38 +2685,99 @@ async function checkForUpdate() {
 }
 
 // src/tui/components/UpdatePrompt.tsx
-import { Box as Box11, Text as Text11, useInput as useInput7 } from "ink";
+import { useState as useState17, useEffect as useEffect17, useMemo as useMemo8 } from "react";
+import { Box as Box11, Text as Text11, useInput as useInput7, useStdout as useStdout8 } from "ink";
+import chalk4 from "chalk";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var SHIMMER_SPEED2 = 35;
+function useShimmerLogo2() {
+  const [frame, setFrame] = useState17(0);
+  const lines = useMemo8(() => LogoString.split("\n"), []);
+  const totalChars = useMemo8(() => {
+    let count = 0;
+    for (const line of lines) {
+      for (const ch of line) {
+        if (ch !== " " && ch !== "	") count++;
+      }
+    }
+    return count;
+  }, [lines]);
+  const cycleLength = totalChars + 40;
+  useEffect17(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % cycleLength);
+    }, SHIMMER_SPEED2);
+    return () => clearInterval(interval);
+  }, [cycleLength]);
+  return useMemo8(() => {
+    const sweepPos = frame;
+    const holdEnd = totalChars + 20;
+    let charIdx = 0;
+    return lines.map((line) => {
+      let result = "";
+      for (let i = 0; i < line.length; i++) {
+        const ch = line[i];
+        if (ch === " " || ch === "	") {
+          result += ch;
+          continue;
+        }
+        let brightness;
+        if (sweepPos <= totalChars) {
+          const lag = charIdx;
+          const t = sweepPos - lag;
+          brightness = t <= 0 ? 0.1 : Math.min(1, t / 8);
+        } else if (sweepPos <= holdEnd) {
+          brightness = 1;
+        } else {
+          const fadeProgress = (sweepPos - holdEnd) / (cycleLength - holdEnd);
+          brightness = Math.max(0.1, 1 - fadeProgress);
+        }
+        if (brightness >= 0.9) {
+          result += chalk4.cyanBright.bold(ch);
+        } else if (brightness >= 0.6) {
+          result += chalk4.cyan(ch);
+        } else if (brightness >= 0.3) {
+          result += chalk4.rgb(0, 100, 120)(ch);
+        } else {
+          result += chalk4.rgb(0, 50, 60)(ch);
+        }
+        charIdx++;
+      }
+      return result;
+    }).join("\n");
+  }, [frame, lines, totalChars, cycleLength]);
+}
 function UpdatePrompt({
   currentVersion,
   latestVersion,
   onChoice
 }) {
-  useInput7((input) => {
-    if (input.toLowerCase() === "y") {
-      onChoice(true);
-    } else {
-      onChoice(false);
-    }
+  const { stdout } = useStdout8();
+  const shimmerLogo = useShimmerLogo2();
+  useInput7(() => {
+    onChoice(true);
   });
-  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", paddingY: 1, paddingX: 2, children: [
-    /* @__PURE__ */ jsxs11(Text11, { children: [
-      /* @__PURE__ */ jsx12(Text11, { color: "yellow", bold: true, children: "Update available:" }),
-      /* @__PURE__ */ jsxs11(Text11, { children: [
-        " ",
-        "v",
-        currentVersion,
-        " ",
-        "\u2192",
-        " v",
-        latestVersion
+  const termHeight = (stdout?.rows ?? 24) - 4;
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", height: termHeight, children: [
+    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx12(Text11, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx12(Box11, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx12(Text11, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs11(Text11, { color: "gray", children: [
+          "Update required ",
+          "\u2022",
+          " v",
+          currentVersion,
+          " ",
+          "\u2192",
+          " v",
+          latestVersion
+        ] }),
+        /* @__PURE__ */ jsx12(Box11, { marginTop: 1, children: /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "Press any key to update" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(Box11, { marginTop: 1, children: /* @__PURE__ */ jsxs11(Text11, { children: [
-      "Press ",
-      /* @__PURE__ */ jsx12(Text11, { bold: true, color: "cyan", children: "y" }),
-      " to update, any other key to skip"
-    ] }) })
+    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 })
   ] });
 }
 
@@ -2581,16 +2827,13 @@ async function startTUI() {
     console.clear();
   }
   const runner = new TunnelRunner();
-  const { waitUntilExit } = render(
-    /* @__PURE__ */ jsx13(App, { runner }),
-    {
-      exitOnCtrlC: true
-    }
-  );
+  const { waitUntilExit } = render(/* @__PURE__ */ jsx13(App, { runner }), {
+    exitOnCtrlC: true
+  });
   await waitUntilExit();
   runner.stop();
 }
 export {
   startTUI
 };
-//# sourceMappingURL=tui-BW6XKMWK.js.map
+//# sourceMappingURL=tui-EAU7OA4X.js.map