@mindstudio-ai/local-model-tunnel 0.5.7 → 0.5.8

package/dist/{tui-UNFZSO7R.js → tui-4PJCFILV.js}

@@ -1,8 +1,17 @@
 import {
   TunnelRunner,
-  deleteLocalInterfacePath,
   detectAllProviderStatuses,
   discoverAllModelsWithParameters,
+  requestEvents
+} from "./chunk-QALGC7T7.js";
+import {
+  DevProxy,
+  DevRunner,
+  deleteLocalInterfacePath,
+  detectAppConfig,
+  detectGitBranch,
+  devRequestEvents,
+  findDirsNeedingInstall,
   getApiBaseUrl,
   getApiKey,
   getConfigPath,
@@ -12,15 +21,21 @@ import {
   getLocalInterfacesDir,
   getSyncedModels,
   getUserId,
+  getWebInterfaceConfig,
+  getWebProjectDir,
+  initLoggerInteractive,
   pollDeviceAuth,
+  readTableSources,
   requestDeviceAuth,
-  requestEvents,
   setApiKey,
   setLocalInterfacePath,
   setUserId,
+  stablePort,
   syncModels,
-  verifyApiKey
-} from "./chunk-KLOTDVWL.js";
+  syncSchema,
+  verifyApiKey,
+  watchTableFiles
+} from "./chunk-C3JPRLSS.js";
 
 // src/tui/index.tsx
 import { render } from "ink";
@@ -30,8 +45,8 @@ import { get as httpsGet } from "https";
 import { get as httpGet } from "http";
 
 // src/tui/App.tsx
-import { useEffect as useEffect16, useCallback as useCallback10, useState as useState16, useRef as useRef9 } from "react";
-import { Box as Box10, useApp, useStdout as useStdout7 } from "ink";
+import { useEffect as useEffect20, useCallback as useCallback12, useState as useState21, useRef as useRef12 } from "react";
+import { Box as Box14, useApp, useStdout as useStdout8 } from "ink";
 
 // src/tui/components/Header.tsx
 import { useState, useEffect, useMemo } from "react";
@@ -135,7 +150,7 @@ function Header({
             /* @__PURE__ */ jsx(Text, { bold: true, color: "white", children: "MindStudio Local Tunnel" }),
             compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
               " v",
-              "0.5.7"
+              "0.5.8"
             ] }),
             environment !== "prod" && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Text, { children: " " }),
@@ -153,7 +168,7 @@ function Header({
           ] }),
           !compact && /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
             "v",
-            "0.5.7"
+            "0.5.8"
           ] })
         ] })
       ]
@@ -161,150 +176,11 @@ function Header({
   );
 }
 
-// src/tui/components/NavigationMenu.tsx
-import { useState as useState2, useEffect as useEffect2 } from "react";
-import { Box as Box2, Text as Text2, useInput, useStdout } from "ink";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function NavigationMenu({
-  items,
-  onSelect,
-  title
-}) {
-  const { stdout } = useStdout();
-  const compact = (stdout?.rows ?? 24) < 40;
-  const getDefaultIndex = () => {
-    const firstIdx = items.findIndex((i) => !i.disabled && !i.isSeparator);
-    return firstIdx >= 0 ? firstIdx : 0;
-  };
-  const [selectedIndex, setSelectedIndex] = useState2(getDefaultIndex);
-  useEffect2(() => {
-    setSelectedIndex(getDefaultIndex());
-  }, [items]);
-  const selectableItems = items.filter((i) => !i.isSeparator);
-  const findNextEnabled = (from, direction) => {
-    let idx = from;
-    for (let i = 0; i < items.length; i++) {
-      idx = (idx + direction + items.length) % items.length;
-      if (!items[idx].disabled && !items[idx].isSeparator) return idx;
-    }
-    return from;
-  };
-  useInput((input, key) => {
-    if (input === "q" || key.escape) {
-      const backItem = items.find((i) => i.id === "back");
-      if (backItem) {
-        onSelect("back");
-      } else if (input === "q") {
-        onSelect("quit");
-      }
-      return;
-    }
-    if (key.upArrow || compact && key.leftArrow) {
-      setSelectedIndex((prev) => findNextEnabled(prev, -1));
-    } else if (key.downArrow || compact && key.rightArrow) {
-      setSelectedIndex((prev) => findNextEnabled(prev, 1));
-    } else if (key.return) {
-      const item = items[selectedIndex];
-      if (item && !item.disabled) {
-        onSelect(item.id);
-      }
-    }
-  });
-  const hasBack = items.some((i) => i.id === "back");
-  if (compact) {
-    const selectedItem = items[selectedIndex];
-    return /* @__PURE__ */ jsx2(
-      Box2,
-      {
-        flexDirection: "column",
-        paddingX: 1,
-        borderStyle: "single",
-        borderTop: true,
-        borderBottom: false,
-        borderLeft: false,
-        borderRight: false,
-        borderColor: "gray",
-        children: /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", gap: 1, children: items.map((item, index) => {
-          if (item.isSeparator) return null;
-          const isSelected = index === selectedIndex;
-          return /* @__PURE__ */ jsx2(
-            Text2,
-            {
-              color: item.disabled ? "gray" : isSelected ? "cyan" : "white",
-              bold: isSelected,
-              wrap: "truncate-end",
-              children: isSelected ? `\u276F ${item.label}` : `  ${item.label}`
-            },
-            item.id
-          );
-        }) })
-      }
-    );
-  }
-  const separatorExtraLines = items.filter(
-    (item, idx) => item.isSeparator && idx > 0
-  ).length;
-  const menuHeight = items.length + 4 + separatorExtraLines;
-  return /* @__PURE__ */ jsxs2(
-    Box2,
-    {
-      flexDirection: "column",
-      paddingX: 1,
-      marginBottom: 1,
-      borderStyle: "single",
-      borderTop: true,
-      borderBottom: false,
-      borderLeft: false,
-      borderRight: false,
-      borderColor: "gray",
-      children: [
-        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: title ?? "Actions" }) }),
-        /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: items.map((item, index) => {
-          if (item.isSeparator) {
-            return /* @__PURE__ */ jsx2(Box2, { marginTop: index > 0 ? 1 : 0, children: item.label ? /* @__PURE__ */ jsx2(Text2, { bold: true, color: item.color ?? "gray", wrap: "truncate-end", children: item.label }) : null }, item.id);
-          }
-          const isSelected = index === selectedIndex;
-          const prefix = isSelected ? "\u276F" : " ";
-          if (item.disabled) {
-            return /* @__PURE__ */ jsx2(Box2, { height: 1, overflow: "hidden", children: /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
-              prefix,
-              " ",
-              item.label,
-              item.disabledReason ? ` (${item.disabledReason})` : ""
-            ] }) }, item.id);
-          }
-          return /* @__PURE__ */ jsxs2(Box2, { height: 1, overflow: "hidden", children: [
-            /* @__PURE__ */ jsxs2(
-              Text2,
-              {
-                color: isSelected ? "cyan" : "white",
-                bold: isSelected,
-                wrap: "truncate-end",
-                children: [
-                  prefix,
-                  " ",
-                  item.label
-                ]
-              }
-            ),
-            isSelected && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
-              " ",
-              "- ",
-              item.description
-            ] })
-          ] }, item.id);
-        }) }),
-        /* @__PURE__ */ jsx2(Box2, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx2(Text2, { color: "gray", wrap: "truncate-end", children: hasBack ? "Up/Down Navigate \u2022 Enter Select \u2022 q/Esc Back" : "Up/Down Navigate \u2022 Enter Select \u2022 q Quit" }) })
-      ]
-    }
-  );
-}
-
 // src/tui/hooks/useConnection.ts
-import { useState as useState3, useEffect as useEffect3, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
 function useConnection() {
-  const [status, setStatus] = useState3("connecting");
-  const [error, setError] = useState3(null);
+  const [status, setStatus] = useState2("connecting");
+  const [error, setError] = useState2(null);
   const environment = getEnvironment();
   const connect = useCallback(async () => {
     setStatus("connecting");
@@ -327,7 +203,7 @@ function useConnection() {
       setError(err instanceof Error ? err.message : "Connection failed");
     }
   }, []);
-  useEffect3(() => {
+  useEffect2(() => {
     connect();
   }, [connect]);
   return {
@@ -339,12 +215,12 @@ function useConnection() {
 }
 
 // src/tui/interfaces/hooks/useEditorSessions.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback2, useRef } from "react";
+import { useState as useState3, useEffect as useEffect3, 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 [sessions, setSessions] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const [refreshStatus, setRefreshStatus] = useState3("idle");
   const initialLoadDone = useRef(false);
   const timerRef = useRef();
   const pollRef = useRef();
@@ -369,10 +245,10 @@ function useEditorSessions() {
       setLoading(false);
     }
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     refresh();
   }, [refresh]);
-  useEffect4(() => {
+  useEffect3(() => {
     pollRef.current = setInterval(async () => {
       if (!initialLoadDone.current) return;
       try {
@@ -383,18 +259,18 @@ function useEditorSessions() {
     }, 5e3);
     return () => clearInterval(pollRef.current);
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     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";
+import { useState as useState4, useEffect as useEffect4, 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 [providers, setProviders] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [refreshing, setRefreshing] = useState4(false);
   const initialLoadDone = useRef2(false);
   const refresh = useCallback3(async () => {
     if (!initialLoadDone.current) {
@@ -408,19 +284,19 @@ function useSetupProviders() {
     setLoading(false);
     setRefreshing(false);
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     refresh();
   }, [refresh]);
   return { providers, loading, refreshing, refresh };
 }
 
 // src/tui/models/hooks/useModels.ts
-import { useState as useState6, useEffect as useEffect6, useCallback as useCallback4, useRef as useRef3 } from "react";
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback4, useRef as useRef3 } from "react";
 function useModels() {
-  const [models, setModels] = useState6([]);
-  const [warnings, setWarnings] = useState6([]);
-  const [loading, setLoading] = useState6(true);
-  const [refreshing, setRefreshing] = useState6(false);
+  const [models, setModels] = useState5([]);
+  const [warnings, setWarnings] = useState5([]);
+  const [loading, setLoading] = useState5(true);
+  const [refreshing, setRefreshing] = useState5(false);
   const initialLoadDone = useRef3(false);
   const refresh = useCallback4(async () => {
     if (!initialLoadDone.current) {
@@ -441,7 +317,7 @@ function useModels() {
       setRefreshing(false);
     }
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     refresh();
   }, [refresh]);
   return {
@@ -454,11 +330,11 @@ function useModels() {
 }
 
 // src/tui/models/hooks/useRequests.ts
-import { useState as useState7, useEffect as useEffect7, useCallback as useCallback5, useRef as useRef4 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback5, useRef as useRef4 } from "react";
 function useRequests(maxHistory = 50) {
-  const [requests, setRequests] = useState7([]);
+  const [requests, setRequests] = useState6([]);
   const requestsRef = useRef4(/* @__PURE__ */ new Map());
-  useEffect7(() => {
+  useEffect6(() => {
     const interval = setInterval(() => {
       setRequests((prev) => {
         const hasActive = prev.some((r) => r.status === "processing");
@@ -467,7 +343,7 @@ function useRequests(maxHistory = 50) {
     }, 1e3);
     return () => clearInterval(interval);
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     const unsubStart = requestEvents.onStart((event) => {
       const entry = {
         id: event.id,
@@ -532,10 +408,10 @@ function useRequests(maxHistory = 50) {
 }
 
 // src/tui/models/hooks/useRegisteredModels.ts
-import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6 } from "react";
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback6 } from "react";
 function useSyncedModels(connectionStatus) {
-  const [syncedNames, setSyncedNames] = useState8(/* @__PURE__ */ new Set());
-  const [syncedModels, setSyncedModels] = useState8([]);
+  const [syncedNames, setSyncedNames] = useState7(/* @__PURE__ */ new Set());
+  const [syncedModels, setSyncedModels] = useState7([]);
   const refresh = useCallback6(async () => {
     if (connectionStatus !== "connected") {
       setSyncedNames(/* @__PURE__ */ new Set());
@@ -549,7 +425,7 @@ function useSyncedModels(connectionStatus) {
     } catch {
     }
   }, [connectionStatus]);
-  useEffect8(() => {
+  useEffect7(() => {
     refresh();
   }, [refresh]);
   return {
@@ -565,9 +441,9 @@ import { Box as Box4, Text as Text4, useStdout as useStdout3 } from "ink";
 import Spinner2 from "ink-spinner";
 
 // src/tui/models/components/RequestLog.tsx
-import { Box as Box3, Text as Text3, useStdout as useStdout2 } from "ink";
+import { Box as Box2, Text as Text2, useStdout } from "ink";
 import Spinner from "ink-spinner";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function formatTime(timestamp) {
   const date = new Date(timestamp);
   return date.toLocaleTimeString("en-US", {
@@ -610,28 +486,28 @@ function RequestItem({
     const elapsed = Date.now() - request.startTime;
     const snippet = request.content && request.requestType === "llm_chat" ? snippetLine(request.content, snippetWidth) : null;
     const stepProgress = request.step !== void 0 && request.totalSteps ? `Step ${request.step}/${request.totalSteps}` : null;
-    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Box3, { children: [
-        /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: /* @__PURE__ */ jsx3(Spinner, { type: "dots" }) }),
-        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: /* @__PURE__ */ jsx2(Spinner, { type: "dots" }) }),
+        /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
           " ",
           time,
           " "
         ] }),
-        /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
-        /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
-        /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
-        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+        /* @__PURE__ */ jsx2(Text2, { color: "white", children: request.modelId }),
+        /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " " }),
+        /* @__PURE__ */ jsx2(Text2, { color: typeLabel.color, children: typeLabel.label }),
+        /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
           " ",
           formatDuration(elapsed),
           "..."
         ] })
       ] }),
-      snippet && /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+      snippet && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
         snippetIndent,
         snippet
       ] }),
-      stepProgress && /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+      stepProgress && /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
         snippetIndent,
         stepProgress
       ] })
@@ -648,40 +524,40 @@ function RequestItem({
       resultInfo = ` \xB7 ${Math.round(request.result.videoSize / 1024 / 1024)}MB`;
     }
     const snippet = request.content && request.requestType === "llm_chat" ? snippetLine(request.content, snippetWidth) : null;
-    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Box3, { children: [
-        /* @__PURE__ */ jsx3(Text3, { color: "green", children: "\u2713" }),
-        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs2(Box2, { children: [
+        /* @__PURE__ */ jsx2(Text2, { color: "green", children: "\u2713" }),
+        /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
           " ",
           time,
           " "
         ] }),
-        /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
-        /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
-        /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
-        /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+        /* @__PURE__ */ jsx2(Text2, { color: "white", children: request.modelId }),
+        /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " " }),
+        /* @__PURE__ */ jsx2(Text2, { color: typeLabel.color, children: typeLabel.label }),
+        /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
           " ",
           duration,
           resultInfo
         ] })
       ] }),
-      snippet && /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+      snippet && /* @__PURE__ */ jsxs2(Text2, { color: "gray", wrap: "truncate-end", children: [
         snippetIndent,
         snippet
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: /* @__PURE__ */ jsxs3(Box3, { children: [
-    /* @__PURE__ */ jsx3(Text3, { color: "red", children: "\u25CF" }),
-    /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+  return /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", children: /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsx2(Text2, { color: "red", children: "\u25CF" }),
+    /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
       " ",
       time,
       " "
     ] }),
-    /* @__PURE__ */ jsx3(Text3, { color: "white", children: request.modelId }),
-    /* @__PURE__ */ jsx3(Text3, { color: "gray", children: " " }),
-    /* @__PURE__ */ jsx3(Text3, { color: typeLabel.color, children: typeLabel.label }),
-    /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
+    /* @__PURE__ */ jsx2(Text2, { color: "white", children: request.modelId }),
+    /* @__PURE__ */ jsx2(Text2, { color: "gray", children: " " }),
+    /* @__PURE__ */ jsx2(Text2, { color: typeLabel.color, children: typeLabel.label }),
+    /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
       " ",
       request.error || "Failed"
     ] })
@@ -692,7 +568,7 @@ function RequestLog({
   maxVisible = 8,
   hasModels = true
 }) {
-  const { stdout } = useStdout2();
+  const { stdout } = useStdout();
   const width = stdout?.columns ?? 80;
   const activeRequests = requests.filter((r) => r.status === "processing");
   const completedRequests = requests.filter((r) => r.status !== "processing");
@@ -714,8 +590,8 @@ function RequestLog({
     }
   }
   const visibleRequests = [...completedToShow, ...activeRequests];
-  return /* @__PURE__ */ jsxs3(
-    Box3,
+  return /* @__PURE__ */ jsxs2(
+    Box2,
     {
       flexDirection: "column",
       flexGrow: 1,
@@ -723,71 +599,210 @@ function RequestLog({
       paddingX: 1,
       marginTop: 1,
       children: [
-        /* @__PURE__ */ jsxs3(Box3, { children: [
-          /* @__PURE__ */ jsx3(Text3, { bold: true, underline: true, color: "white", children: "Generation Requests" }),
-          activeRequests.length > 0 && /* @__PURE__ */ jsxs3(Text3, { color: "cyan", children: [
+        /* @__PURE__ */ jsxs2(Box2, { children: [
+          /* @__PURE__ */ jsx2(Text2, { bold: true, underline: true, color: "white", children: "Generation Requests" }),
+          activeRequests.length > 0 && /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
             " (",
             activeRequests.length,
             " active)"
           ] })
         ] }),
-        requests.length === 0 ? /* @__PURE__ */ jsx3(Box3, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx3(Text3, { color: "gray", children: hasModels ? "Tunnel is live \u2014 requests will appear here when models are used in MindStudio" : "Start a model to begin receiving generation requests." }) }) : /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", marginTop: 1, children: visibleRequests.map((request) => /* @__PURE__ */ jsx3(RequestItem, { request, width }, request.id)) })
+        requests.length === 0 ? /* @__PURE__ */ jsx2(Box2, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: hasModels ? "Tunnel is live \u2014 requests will appear here when models are used in MindStudio" : "Start a model to begin receiving generation requests." }) }) : /* @__PURE__ */ jsx2(Box2, { flexDirection: "column", marginTop: 1, children: visibleRequests.map((request) => /* @__PURE__ */ jsx2(RequestItem, { request, width }, request.id)) })
       ]
     }
   );
 }
 
-// src/tui/models/pages/DashboardPage.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function getWorkflowCount(model) {
-  const param = model.parameters?.find((p) => p.type === "comfyWorkflow");
-  if (!param) return null;
-  return param.comfyWorkflowOptions.availableWorkflows.length;
-}
-function getCapabilityLabel(capability) {
-  switch (capability) {
-    case "text":
-      return { label: "Text Generation", color: "gray" };
-    case "image":
-      return { label: "Image Generation", color: "gray" };
-    case "video":
-      return { label: "Video Generation", color: "gray" };
-    default:
-      return { label: capability, color: "gray" };
-  }
-}
-function DashboardPage({
-  requests,
-  models,
-  modelWarnings = [],
-  providers,
-  providersLoading,
-  syncedNames,
-  modelsLoading,
-  syncStatus = "idle",
-  editorSessions,
-  editorsLoading,
-  onNavigate
+// src/tui/components/NavigationMenu.tsx
+import { useState as useState8, useEffect as useEffect8 } from "react";
+import { Box as Box3, Text as Text3, useInput, useStdout as useStdout2 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function NavigationMenu({
+  items,
+  onSelect,
+  title
 }) {
-  const { stdout } = useStdout3();
-  const installedProviders = providers.filter(({ status }) => status.installed);
-  const provNameWidth = Math.max(
-    ...installedProviders.map((p) => p.provider.displayName.length),
-    8
-  );
-  const provStatusWidth = "Local Server Running".length;
-  const allModelNames = new Set(models.map((m) => m.name));
-  const unavailableSynced = [...syncedNames].filter(
-    (name) => !allModelNames.has(name)
-  );
-  const syncDescription = syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "\u2713 Synced" : "Re-detect providers and sync models to MindStudio";
-  const menuItems = useMemo2(() => {
-    return [
+  const { stdout } = useStdout2();
+  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] = useState8(getDefaultIndex);
+  useEffect8(() => {
+    setSelectedIndex(getDefaultIndex());
+  }, [items]);
+  const selectableItems = items.filter((i) => !i.isSeparator);
+  const findNextEnabled = (from, direction) => {
+    let idx = from;
+    for (let i = 0; i < items.length; i++) {
+      idx = (idx + direction + items.length) % items.length;
+      if (!items[idx].disabled && !items[idx].isSeparator) return idx;
+    }
+    return from;
+  };
+  useInput((input, key) => {
+    if (input === "q" || key.escape) {
+      const backItem = items.find((i) => i.id === "back");
+      if (backItem) {
+        onSelect("back");
+      } else if (input === "q") {
+        onSelect("quit");
+      }
+      return;
+    }
+    if (key.upArrow || compact && key.leftArrow) {
+      setSelectedIndex((prev) => findNextEnabled(prev, -1));
+    } else if (key.downArrow || compact && key.rightArrow) {
+      setSelectedIndex((prev) => findNextEnabled(prev, 1));
+    } else if (key.return) {
+      const item = items[selectedIndex];
+      if (item && !item.disabled) {
+        onSelect(item.id);
+      }
+    }
+  });
+  const hasBack = items.some((i) => i.id === "back");
+  if (compact) {
+    const selectedItem = items[selectedIndex];
+    return /* @__PURE__ */ jsx3(
+      Box3,
       {
-        id: "interfaces",
-        label: "Connect to Agent",
-        description: "Connect your local editor to a MindStudio interface or script"
-      },
+        flexDirection: "column",
+        paddingX: 1,
+        borderStyle: "single",
+        borderTop: true,
+        borderBottom: false,
+        borderLeft: false,
+        borderRight: false,
+        borderColor: "gray",
+        children: /* @__PURE__ */ jsx3(Box3, { height: 1, overflow: "hidden", gap: 1, children: items.map((item, index) => {
+          if (item.isSeparator) return null;
+          const isSelected = index === selectedIndex;
+          return /* @__PURE__ */ jsx3(
+            Text3,
+            {
+              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__ */ jsxs3(
+    Box3,
+    {
+      flexDirection: "column",
+      paddingX: 1,
+      marginBottom: 1,
+      borderStyle: "single",
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      borderColor: "gray",
+      children: [
+        /* @__PURE__ */ jsx3(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text3, { color: "gray", children: title ?? "Actions" }) }),
+        /* @__PURE__ */ jsx3(Box3, { flexDirection: "column", children: items.map((item, index) => {
+          if (item.isSeparator) {
+            return /* @__PURE__ */ jsx3(Box3, { marginTop: index > 0 ? 1 : 0, children: item.label ? /* @__PURE__ */ jsx3(Text3, { 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__ */ jsx3(Box3, { height: 1, overflow: "hidden", children: /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+              prefix,
+              " ",
+              item.label,
+              item.disabledReason ? ` (${item.disabledReason})` : ""
+            ] }) }, item.id);
+          }
+          return /* @__PURE__ */ jsxs3(Box3, { height: 1, overflow: "hidden", children: [
+            /* @__PURE__ */ jsxs3(
+              Text3,
+              {
+                color: isSelected ? "cyan" : "white",
+                bold: isSelected,
+                wrap: "truncate-end",
+                children: [
+                  prefix,
+                  " ",
+                  item.label
+                ]
+              }
+            ),
+            isSelected && /* @__PURE__ */ jsxs3(Text3, { color: "gray", wrap: "truncate-end", children: [
+              " ",
+              "- ",
+              item.description
+            ] })
+          ] }, item.id);
+        }) }),
+        /* @__PURE__ */ jsx3(Box3, { marginTop: 1, height: 1, children: /* @__PURE__ */ jsx3(Text3, { 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/models/pages/DashboardPage.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function getWorkflowCount(model) {
+  const param = model.parameters?.find((p) => p.type === "comfyWorkflow");
+  if (!param) return null;
+  return param.comfyWorkflowOptions.availableWorkflows.length;
+}
+function getCapabilityLabel(capability) {
+  switch (capability) {
+    case "text":
+      return { label: "Text Generation", color: "gray" };
+    case "image":
+      return { label: "Image Generation", color: "gray" };
+    case "video":
+      return { label: "Video Generation", color: "gray" };
+    default:
+      return { label: capability, color: "gray" };
+  }
+}
+function DashboardPage({
+  requests,
+  models,
+  modelWarnings = [],
+  providers,
+  providersLoading,
+  syncedNames,
+  modelsLoading,
+  syncStatus = "idle",
+  editorSessions,
+  editorsLoading,
+  onNavigate
+}) {
+  const { stdout } = useStdout3();
+  const installedProviders = providers.filter(({ status }) => status.installed);
+  const provNameWidth = Math.max(
+    ...installedProviders.map((p) => p.provider.displayName.length),
+    8
+  );
+  const provStatusWidth = "Local Server Running".length;
+  const allModelNames = new Set(models.map((m) => m.name));
+  const unavailableSynced = [...syncedNames].filter(
+    (name) => !allModelNames.has(name)
+  );
+  const syncDescription = syncStatus === "syncing" ? "Syncing..." : syncStatus === "synced" ? "\u2713 Synced" : "Re-detect providers and sync models to MindStudio";
+  const menuItems = useMemo2(() => {
+    return [
+      {
+        id: "interfaces",
+        label: "Connect to Agent",
+        description: "Connect your local editor to a MindStudio interface or script"
+      },
       {
         id: "refresh",
         label: "Sync Models",
@@ -2442,16 +2457,1142 @@ function OnboardingPage({ onComplete }) {
   ] });
 }
 
+// src/tui/dev/pages/DevPage.tsx
+import { useState as useState20, useEffect as useEffect19, useMemo as useMemo8 } from "react";
+import { Box as Box13, Text as Text14, useInput as useInput7 } from "ink";
+import Spinner7 from "ink-spinner";
+
+// src/tui/dev/components/DevRequestLog.tsx
+import { Box as Box10, Text as Text11 } from "ink";
+import Spinner6 from "ink-spinner";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function DevRequestLog({
+  requests,
+  maxVisible = 10
+}) {
+  if (requests.length === 0) {
+    return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+      /* @__PURE__ */ jsx11(Text11, { bold: true, color: "white", underline: true, children: "Request Log" }),
+      /* @__PURE__ */ jsx11(Text11, { color: "gray", children: " Waiting for requests..." })
+    ] });
+  }
+  const active = requests.filter((r) => r.status === "processing");
+  const completed = requests.filter((r) => r.status !== "processing");
+  const recent = completed.slice(-Math.max(0, maxVisible - active.length));
+  const visible = [...recent, ...active].slice(-maxVisible);
+  return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx11(Text11, { bold: true, color: "white", underline: true, children: "Request Log" }),
+    visible.map((entry) => /* @__PURE__ */ jsx11(RequestEntry, { entry }, entry.id))
+  ] });
+}
+function RequestEntry({ entry }) {
+  const methodLabel = entry.method ?? "unknown";
+  if (entry.status === "processing") {
+    const elapsed = Math.round((Date.now() - entry.startTime) / 1e3);
+    return /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+      /* @__PURE__ */ jsx11(Text11, { color: "cyan", children: /* @__PURE__ */ jsx11(Spinner6, { type: "dots" }) }),
+      /* @__PURE__ */ jsx11(Text11, { children: methodLabel }),
+      /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+        elapsed,
+        "s"
+      ] })
+    ] });
+  }
+  if (entry.status === "failed") {
+    const errorLines = (entry.error ?? "Unknown error").split("\n").slice(0, 4);
+    return /* @__PURE__ */ jsxs10(Box10, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+        /* @__PURE__ */ jsx11(Text11, { color: "red", children: "\u2716" }),
+        /* @__PURE__ */ jsx11(Text11, { children: methodLabel }),
+        entry.duration != null && /* @__PURE__ */ jsxs10(Text11, { color: "gray", children: [
+          entry.duration,
+          "ms"
+        ] })
+      ] }),
+      errorLines.map((line, i) => /* @__PURE__ */ jsxs10(Text11, { color: "red", wrap: "truncate", children: [
+        "  ",
+        line
+      ] }, i))
+    ] });
+  }
+  const duration = entry.duration != null ? `${entry.duration}ms` : "";
+  return /* @__PURE__ */ jsxs10(Box10, { gap: 1, children: [
+    /* @__PURE__ */ jsx11(Text11, { color: "green", children: "\u2713" }),
+    /* @__PURE__ */ jsx11(Text11, { children: methodLabel }),
+    /* @__PURE__ */ jsx11(Text11, { color: "gray", children: duration })
+  ] });
+}
+
+// src/tui/dev/components/DevPortPrompt.tsx
+import { useState as useState16 } from "react";
+import { Box as Box11, Text as Text12 } from "ink";
+import TextInput from "ink-text-input";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function DevPortPrompt({ onSubmit, onSkip }) {
+  const [value, setValue] = useState16("");
+  const [error, setError] = useState16(null);
+  const handleSubmit = (input) => {
+    const trimmed = input.trim();
+    if (trimmed === "" || trimmed === "skip") {
+      onSkip();
+      return;
+    }
+    const port = parseInt(trimmed, 10);
+    if (isNaN(port) || port < 1 || port > 65535) {
+      setError('Enter a valid port number (1-65535) or "skip"');
+      return;
+    }
+    onSubmit(port);
+  };
+  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx12(Text12, { color: "yellow", children: "No devPort found in your web interface config." }),
+    /* @__PURE__ */ jsx12(Text12, { color: "gray", children: "What port is your local dev server running on?" }),
+    /* @__PURE__ */ jsx12(Text12, { color: "gray", dimColor: true, children: 'Type "skip" for backend-only mode (no frontend proxying).' }),
+    /* @__PURE__ */ jsxs11(Box11, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx12(Text12, { color: "cyan", children: "Port: " }),
+      /* @__PURE__ */ jsx12(
+        TextInput,
+        {
+          value,
+          onChange: (val) => {
+            setValue(val);
+            setError(null);
+          },
+          onSubmit: handleSubmit,
+          placeholder: "5173"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx12(Text12, { color: "red", children: error })
+  ] });
+}
+
+// src/tui/dev/components/TabBar.tsx
+import { Box as Box12, Text as Text13, useStdout as useStdout7 } from "ink";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+function TabBar({ tabs, activeTab }) {
+  const { stdout } = useStdout7();
+  const width = stdout?.columns ?? 80;
+  const tabSegments = tabs.map((tab) => {
+    const isActive = tab.id === activeTab;
+    const padded = ` ${tab.label} `;
+    return { tab, isActive, padded };
+  });
+  const labelText = "Screen  ";
+  const hint = " \u2190/\u2192 ";
+  const tabChars = tabSegments.reduce((sum, s) => sum + s.padded.length, 0);
+  const remaining = Math.max(0, width - tabChars - hint.length - labelText.length);
+  return /* @__PURE__ */ jsxs12(Box12, { children: [
+    /* @__PURE__ */ jsx13(Text13, { color: "gray", children: labelText }),
+    tabSegments.map(({ tab, isActive, padded }) => /* @__PURE__ */ jsx13(
+      Text13,
+      {
+        bold: isActive,
+        color: isActive ? "white" : "#aaaaaa",
+        backgroundColor: isActive ? "blueBright" : "#333333",
+        children: padded
+      },
+      tab.id
+    )),
+    /* @__PURE__ */ jsxs12(Text13, { color: "#666666", backgroundColor: "#333333", children: [
+      " ".repeat(remaining),
+      hint
+    ] })
+  ] });
+}
+
+// src/tui/dev/hooks/useDevSession.ts
+import { useState as useState18, useEffect as useEffect17, useRef as useRef10, useCallback as useCallback11 } from "react";
+import { spawn as spawn3 } from "child_process";
+import { watch } from "fs";
+import { join } from "path";
+
+// src/tui/dev/hooks/useDevServer.ts
+import { useState as useState17, useCallback as useCallback10, useRef as useRef9, useEffect as useEffect16 } from "react";
+import { spawn as spawn2 } from "child_process";
+var MAX_OUTPUT_LINES2 = 200;
+var PORT_READY_TIMEOUT_MS = 3e4;
+var PORT_CHECK_INTERVAL_MS = 500;
+function useDevServer() {
+  const [phase, setPhase] = useState17("idle");
+  const [outputLines, setOutputLines] = useState17([]);
+  const [error, setError] = useState17(null);
+  const processRef = useRef9(null);
+  const mountedRef = useRef9(true);
+  useEffect16(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      killProcess();
+    };
+  }, []);
+  const appendOutput = useCallback10((line) => {
+    if (!mountedRef.current) return;
+    setOutputLines((prev) => {
+      const next = [...prev, line];
+      return next.length > MAX_OUTPUT_LINES2 ? next.slice(next.length - MAX_OUTPUT_LINES2) : next;
+    });
+  }, []);
+  const killProcess = useCallback10(() => {
+    if (processRef.current) {
+      processRef.current.kill("SIGTERM");
+      const proc = processRef.current;
+      setTimeout(() => {
+        if (proc && !proc.killed) {
+          proc.kill("SIGKILL");
+        }
+      }, 2e3);
+      processRef.current = null;
+    }
+  }, []);
+  const start = useCallback10(
+    async (opts) => {
+      setPhase("starting");
+      setError(null);
+      setOutputLines([]);
+      appendOutput(`$ ${opts.command}`);
+      const proc = spawn2(opts.command, [], {
+        cwd: opts.cwd,
+        shell: true,
+        env: { ...process.env, FORCE_COLOR: "1" },
+        stdio: ["ignore", "pipe", "pipe"]
+      });
+      processRef.current = proc;
+      const handleData = (data) => {
+        const lines = data.toString().split("\n");
+        for (const line of lines) {
+          if (line.length > 0) {
+            appendOutput(line);
+          }
+        }
+      };
+      proc.stdout?.on("data", handleData);
+      proc.stderr?.on("data", handleData);
+      proc.on("close", (code) => {
+        processRef.current = null;
+        if (mountedRef.current && phase !== "idle") {
+          if (code !== 0 && code !== null) {
+            setError(`Dev server exited with code ${code}`);
+            setPhase("error");
+          } else {
+            setPhase("idle");
+          }
+        }
+      });
+      proc.on("error", (err) => {
+        processRef.current = null;
+        if (mountedRef.current) {
+          setError(err.message);
+          setPhase("error");
+        }
+      });
+      await waitForPort(opts.port, PORT_READY_TIMEOUT_MS);
+      if (mountedRef.current && processRef.current) {
+        setPhase("running");
+      }
+    },
+    [appendOutput]
+  );
+  const stop = useCallback10(() => {
+    killProcess();
+    if (mountedRef.current) {
+      setPhase("idle");
+    }
+  }, [killProcess]);
+  return {
+    phase,
+    outputLines,
+    error,
+    start,
+    stop
+  };
+}
+async function waitForPort(port, timeoutMs) {
+  const start = Date.now();
+  while (Date.now() - start < timeoutMs) {
+    try {
+      const response = await fetch(`http://localhost:${port}/`, {
+        signal: AbortSignal.timeout(1e3)
+      });
+      return;
+    } catch {
+    }
+    await new Promise((resolve) => setTimeout(resolve, PORT_CHECK_INTERVAL_MS));
+  }
+}
+
+// src/tui/dev/hooks/useDevSession.ts
+function runNpmInstall(cwd) {
+  return new Promise((resolve, reject) => {
+    const proc = spawn3("npm", ["install"], {
+      cwd,
+      shell: true,
+      stdio: ["ignore", "ignore", "pipe"]
+    });
+    let stderr = "";
+    proc.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString();
+    });
+    proc.on("close", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`npm install failed in ${cwd}: ${stderr.slice(-200)}`));
+    });
+    proc.on("error", reject);
+  });
+}
+function useDevSession(appConfig) {
+  const logInitRef = useRef10(false);
+  if (!logInitRef.current) {
+    initLoggerInteractive("error");
+    logInitRef.current = true;
+  }
+  const [phase, setPhase] = useState18("detecting");
+  const [session, setSession] = useState18(null);
+  const [error, setError] = useState18(null);
+  const [devPort, setDevPort] = useState18(null);
+  const [proxyPort, setProxyPort] = useState18(null);
+  const [webConfig, setWebConfig] = useState18(null);
+  const [syncResult, setSyncResult] = useState18(null);
+  const [scenarioResult, setScenarioResult] = useState18(null);
+  const [roleOverride, setRoleOverride] = useState18(null);
+  const [installStatus, setInstallStatus] = useState18(null);
+  const [authRefreshUrl, setAuthRefreshUrl] = useState18(null);
+  const runnerRef = useRef10(null);
+  const proxyRef = useRef10(null);
+  const tableWatcherCleanupRef = useRef10(() => {
+  });
+  const mountedRef = useRef10(true);
+  const devServer = useDevServer();
+  const cleanupTableWatchers = useCallback11(() => {
+    tableWatcherCleanupRef.current();
+    tableWatcherCleanupRef.current = () => {
+    };
+  }, []);
+  const setupTableWatchers = useCallback11((config) => {
+    cleanupTableWatchers();
+    tableWatcherCleanupRef.current = watchTableFiles(
+      config.tables,
+      process.cwd(),
+      () => {
+        resyncRef.current?.();
+      }
+    );
+  }, [cleanupTableWatchers]);
+  useEffect17(() => {
+    const config = getWebInterfaceConfig(appConfig);
+    setWebConfig(config);
+    if (config?.devPort) {
+      setDevPort(config.devPort);
+      setPhase("ready");
+    } else if (!appConfig.interfaces.some(
+      (i) => i.type === "web" && i.enabled !== false
+    )) {
+      setDevPort(null);
+      setPhase("ready");
+    } else {
+      setPhase("needs_port");
+    }
+  }, [appConfig]);
+  useEffect17(() => {
+    const unsubExpired = devRequestEvents.onSessionExpired(() => {
+      if (mountedRef.current) {
+        setPhase("expired");
+        setAuthRefreshUrl(null);
+        runnerRef.current = null;
+      }
+    });
+    const unsubImpersonate = devRequestEvents.onImpersonate((event) => {
+      if (mountedRef.current) {
+        setRoleOverride(event.roles);
+      }
+    });
+    const unsubAuthStart = devRequestEvents.onAuthRefreshStart((url) => {
+      if (mountedRef.current) {
+        setAuthRefreshUrl(url);
+      }
+    });
+    const unsubAuthSuccess = devRequestEvents.onAuthRefreshSuccess(() => {
+      if (mountedRef.current) {
+        setAuthRefreshUrl(null);
+      }
+    });
+    const unsubAuthFailed = devRequestEvents.onAuthRefreshFailed(() => {
+      if (mountedRef.current) {
+        setAuthRefreshUrl(null);
+      }
+    });
+    return () => {
+      unsubExpired();
+      unsubImpersonate();
+      unsubAuthStart();
+      unsubAuthSuccess();
+      unsubAuthFailed();
+    };
+  }, []);
+  const restartTimerRef = useRef10(void 0);
+  useEffect17(() => {
+    let watcher;
+    try {
+      const configPath = join(process.cwd(), "mindstudio.json");
+      watcher = watch(configPath, () => {
+        clearTimeout(restartTimerRef.current);
+        restartTimerRef.current = setTimeout(async () => {
+          if (!mountedRef.current || phase !== "running") return;
+          cleanupTableWatchers();
+          proxyRef.current?.stop();
+          proxyRef.current = null;
+          devServer.stop();
+          if (runnerRef.current) {
+            await runnerRef.current.stop().catch(() => {
+            });
+            runnerRef.current = null;
+          }
+          if (mountedRef.current) {
+            setSession(null);
+            setProxyPort(null);
+            setSyncResult(null);
+            setPhase("ready");
+          }
+        }, 500);
+      });
+    } catch {
+    }
+    return () => {
+      clearTimeout(restartTimerRef.current);
+      watcher?.close();
+    };
+  }, [phase, devServer]);
+  useEffect17(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      cleanupTableWatchers();
+      runnerRef.current?.stop().catch(() => {
+      });
+      proxyRef.current?.stop();
+      devServer.stop();
+    };
+  }, []);
+  const start = useCallback11(
+    async (port) => {
+      const currentConfig = detectAppConfig() ?? appConfig;
+      const actualPort = port ?? devPort;
+      if (!currentConfig.appId) {
+        setPhase("error");
+        return;
+      }
+      if (actualPort !== void 0 && actualPort !== null) {
+        setDevPort(actualPort);
+      }
+      setPhase("starting");
+      setError(null);
+      try {
+        const dirsToInstall = findDirsNeedingInstall(currentConfig);
+        for (const dir of dirsToInstall) {
+          const dirName = dir.split("/").slice(-2).join("/");
+          if (mountedRef.current) {
+            setInstallStatus(`Installing dependencies in ${dirName}...`);
+          }
+          await runNpmInstall(dir);
+        }
+        if (mountedRef.current) {
+          setInstallStatus(null);
+        }
+        if (actualPort != null) {
+          const webProjectDir = getWebProjectDir(currentConfig);
+          if (webProjectDir) {
+            const devCommand = webConfig?.devCommand ?? "npm run dev";
+            await devServer.start({
+              command: devCommand,
+              cwd: webProjectDir,
+              port: actualPort
+            });
+          }
+        }
+        const branch = detectGitBranch();
+        const proxyUrl = actualPort != null ? `http://localhost:${stablePort(currentConfig.appId)}` : void 0;
+        const runner = new DevRunner(
+          currentConfig.appId,
+          process.cwd(),
+          {
+            branch,
+            proxyUrl,
+            methods: currentConfig.methods.map((m) => ({ id: m.id, export: m.export, path: m.path }))
+          }
+        );
+        runnerRef.current = runner;
+        const devSession = await runner.start();
+        if (currentConfig.tables.length > 0) {
+          try {
+            const tableSources = readTableSources(currentConfig);
+            if (tableSources.length > 0) {
+              const result = await syncSchema(
+                currentConfig.appId,
+                devSession.sessionId,
+                tableSources
+              );
+              devSession.databases = result.databases;
+              if (mountedRef.current) {
+                setSyncResult(result);
+              }
+            }
+          } catch {
+          }
+        }
+        if (actualPort != null && devSession.clientContext) {
+          const proxy = new DevProxy(actualPort, devSession.clientContext);
+          const preferredProxyPort = stablePort(currentConfig.appId);
+          const pPort = await proxy.start(preferredProxyPort);
+          proxyRef.current = proxy;
+          runner.setProxyUrl(`http://localhost:${pPort}`);
+          runner.setProxy(proxy);
+          if (mountedRef.current) {
+            setProxyPort(pPort);
+          }
+        }
+        setupTableWatchers(currentConfig);
+        if (mountedRef.current) {
+          setSession(devSession);
+          setPhase("running");
+        }
+      } catch (err) {
+        if (mountedRef.current) {
+          setError(
+            err instanceof Error ? err.message : "Failed to start dev session"
+          );
+          setPhase("error");
+        }
+      }
+    },
+    [appConfig, devPort, webConfig, devServer, setupTableWatchers]
+  );
+  const stop = useCallback11(async () => {
+    cleanupTableWatchers();
+    proxyRef.current?.stop();
+    proxyRef.current = null;
+    devServer.stop();
+    if (runnerRef.current) {
+      await runnerRef.current.stop().catch(() => {
+      });
+      runnerRef.current = null;
+    }
+    if (mountedRef.current) {
+      setSession(null);
+      setProxyPort(null);
+      setPhase("stopped");
+    }
+  }, [devServer, cleanupTableWatchers]);
+  const resyncRef = useRef10();
+  const resync = useCallback11(async () => {
+    if (!session) return;
+    const freshConfig = detectAppConfig() ?? appConfig;
+    if (!freshConfig.appId) return;
+    try {
+      const tableSources = readTableSources(freshConfig);
+      if (tableSources.length === 0) return;
+      const result = await syncSchema(
+        freshConfig.appId,
+        session.sessionId,
+        tableSources
+      );
+      if (mountedRef.current) {
+        setSyncResult(result);
+        setSession(
+          (prev) => prev ? { ...prev, databases: result.databases } : prev
+        );
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setSyncResult({
+          created: [],
+          altered: [],
+          errors: [err instanceof Error ? err.message : "Sync failed"],
+          databases: session.databases
+        });
+      }
+    }
+  }, [appConfig, session]);
+  resyncRef.current = resync;
+  const setImpersonation = useCallback11(async (roles) => {
+    if (!runnerRef.current) return;
+    await runnerRef.current.setImpersonation(roles);
+  }, []);
+  const clearImpersonation = useCallback11(async () => {
+    if (!runnerRef.current) return;
+    await runnerRef.current.clearImpersonation();
+  }, []);
+  const runScenario = useCallback11(async (scenarioId) => {
+    if (!runnerRef.current) return;
+    const freshConfig = detectAppConfig() ?? appConfig;
+    const scenario = freshConfig.scenarios.find((s) => s.id === scenarioId);
+    if (!scenario) return;
+    const result = await runnerRef.current.runScenario(scenario);
+    if (mountedRef.current) {
+      setSession(
+        (prev) => prev ? { ...prev, databases: result.databases } : prev
+      );
+      setScenarioResult({
+        id: scenario.id,
+        name: scenario.name,
+        success: result.success,
+        duration: 0,
+        // filled by event listener if needed
+        roles: scenario.roles,
+        error: result.error
+      });
+    }
+  }, [appConfig]);
+  const submitPort = useCallback11(
+    (port) => {
+      setDevPort(port);
+      setPhase("ready");
+    },
+    []
+  );
+  const skipFrontend = useCallback11(() => {
+    setDevPort(null);
+    setPhase("ready");
+  }, []);
+  return {
+    phase,
+    session,
+    error,
+    devPort,
+    proxyPort,
+    webConfig,
+    devServer,
+    syncResult,
+    scenarioResult,
+    roleOverride,
+    installStatus,
+    authRefreshUrl,
+    start,
+    stop,
+    resync,
+    runScenario,
+    setImpersonation,
+    clearImpersonation,
+    submitPort,
+    skipFrontend
+  };
+}
+
+// src/tui/dev/hooks/useDevRequests.ts
+import { useState as useState19, useEffect as useEffect18, useRef as useRef11 } from "react";
+var MAX_HISTORY = 50;
+function useDevRequests() {
+  const requestsRef = useRef11(/* @__PURE__ */ new Map());
+  const [requests, setRequests] = useState19([]);
+  useEffect18(() => {
+    const unsubStart = devRequestEvents.onStart((event) => {
+      const entry = {
+        id: event.id,
+        type: event.type,
+        method: event.method,
+        status: "processing",
+        startTime: event.timestamp
+      };
+      requestsRef.current.set(event.id, entry);
+      setRequests(
+        Array.from(requestsRef.current.values()).slice(-MAX_HISTORY)
+      );
+    });
+    const unsubComplete = devRequestEvents.onComplete((event) => {
+      const existing = requestsRef.current.get(event.id);
+      if (existing) {
+        existing.status = event.success ? "completed" : "failed";
+        existing.endTime = existing.startTime + event.duration;
+        existing.duration = event.duration;
+        existing.error = event.error;
+        setRequests(
+          Array.from(requestsRef.current.values()).slice(-MAX_HISTORY)
+        );
+      }
+    });
+    return () => {
+      unsubStart();
+      unsubComplete();
+    };
+  }, []);
+  useEffect18(() => {
+    const hasActive = requests.some((r) => r.status === "processing");
+    if (!hasActive) return;
+    const interval = setInterval(() => {
+      setRequests(
+        Array.from(requestsRef.current.values()).slice(-MAX_HISTORY)
+      );
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [requests]);
+  const activeCount = requests.filter(
+    (r) => r.status === "processing"
+  ).length;
+  return { requests, activeCount };
+}
+
+// src/tui/dev/pages/DevPage.tsx
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var TABS = [
+  { id: "info", label: "Info" },
+  { id: "requests", label: "Requests" },
+  { id: "methods", label: "Methods" },
+  { id: "server", label: "Dev Server" }
+];
+function DevPage({ appConfig, onNavigate, termHeight }) {
+  const {
+    phase,
+    session,
+    error,
+    devPort,
+    proxyPort,
+    devServer,
+    syncResult,
+    scenarioResult,
+    roleOverride,
+    installStatus,
+    start,
+    stop,
+    resync,
+    runScenario,
+    setImpersonation,
+    clearImpersonation,
+    submitPort,
+    skipFrontend
+  } = useDevSession(appConfig);
+  const { requests, activeCount } = useDevRequests();
+  const [activeTab, setActiveTab] = useState20("info");
+  const [showScenarioPicker, setShowScenarioPicker] = useState20(false);
+  const [showRolePicker, setShowRolePicker] = useState20(false);
+  const hasScenarios = appConfig.scenarios.length > 0;
+  const hasRoles = appConfig.roles.length > 0;
+  const runningMenuItems = useMemo8(
+    () => [
+      ...hasScenarios ? [{ id: "scenario", label: "Run Scenario", description: "Seed database with test data" }] : [],
+      ...hasRoles ? [{ id: "impersonate", label: "Impersonate", description: roleOverride ? `Active: ${roleOverride.join(", ")}` : "Test as a different role" }] : [],
+      { id: "sync", label: "Sync Schema", description: "Re-sync table definitions from disk" },
+      { id: "stop", label: "Stop Session", description: "Stop the dev session and clean up" },
+      { id: "dashboard", label: "Local Models", description: "Switch to local models view" },
+      { id: "quit", label: "Quit", description: "Exit the application" }
+    ],
+    [hasScenarios, hasRoles, roleOverride]
+  );
+  useInput7((_input, key) => {
+    if (phase !== "running") return;
+    if (key.leftArrow) {
+      const idx = TABS.findIndex((t) => t.id === activeTab);
+      setActiveTab(TABS[(idx - 1 + TABS.length) % TABS.length].id);
+    } else if (key.rightArrow) {
+      const idx = TABS.findIndex((t) => t.id === activeTab);
+      setActiveTab(TABS[(idx + 1) % TABS.length].id);
+    }
+  });
+  useEffect19(() => {
+    if (phase === "ready") {
+      start();
+    }
+  }, [phase, start]);
+  if (phase === "detecting") {
+    return /* @__PURE__ */ jsx14(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsx14(Spinner7, { type: "dots" }),
+      " Checking app configuration..."
+    ] }) });
+  }
+  if (phase === "needs_port") {
+    return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(AppInfoHeader, { appConfig }),
+      /* @__PURE__ */ jsx14(DevPortPrompt, { onSubmit: submitPort, onSkip: skipFrontend })
+    ] });
+  }
+  if (phase === "starting") {
+    return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(AppInfoHeader, { appConfig }),
+      /* @__PURE__ */ jsxs13(Box13, { paddingX: 1, marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs13(Text14, { children: [
+          /* @__PURE__ */ jsx14(Spinner7, { type: "dots" }),
+          " Starting dev session..."
+        ] }),
+        installStatus && /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+          /* @__PURE__ */ jsx14(Spinner7, { type: "dots" }),
+          " ",
+          installStatus
+        ] }),
+        devServer.phase === "starting" && /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+          /* @__PURE__ */ jsx14(Spinner7, { type: "dots" }),
+          " Waiting for dev server on port ",
+          devPort,
+          "..."
+        ] }),
+        devServer.outputLines.slice(-6).map((line, i) => /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, wrap: "truncate", children: line }, i))
+      ] })
+    ] });
+  }
+  if (phase === "error") {
+    const errorMenuItems = [
+      { id: "retry", label: "Retry", description: "Try starting the session again" },
+      { id: "dashboard", label: "Local Models", description: "Switch to local models view" },
+      { id: "quit", label: "Quit", description: "Exit the application" }
+    ];
+    return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(AppInfoHeader, { appConfig }),
+      /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+        error && /* @__PURE__ */ jsxs13(Text14, { color: "red", children: [
+          "\u2716 ",
+          error
+        ] }),
+        devServer.error && /* @__PURE__ */ jsxs13(Text14, { color: "red", children: [
+          "Dev server: ",
+          devServer.error
+        ] }),
+        devServer.outputLines.slice(-5).map((line, i) => /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, wrap: "truncate", children: line }, i))
+      ] }),
+      /* @__PURE__ */ jsx14(Box13, { flexGrow: 1 }),
+      /* @__PURE__ */ jsx14(
+        NavigationMenu,
+        {
+          items: errorMenuItems,
+          onSelect: (id) => {
+            if (id === "retry") start();
+            else onNavigate(id);
+          }
+        }
+      )
+    ] });
+  }
+  if (phase === "stopped") {
+    const stoppedMenuItems = [
+      { id: "restart", label: "Restart", description: "Start a new dev session" },
+      { id: "dashboard", label: "Local Models", description: "Switch to local models view" },
+      { id: "quit", label: "Quit", description: "Exit the application" }
+    ];
+    return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(AppInfoHeader, { appConfig }),
+      /* @__PURE__ */ jsx14(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { color: "yellow", children: "Session stopped." }) }),
+      /* @__PURE__ */ jsx14(Box13, { flexGrow: 1 }),
+      /* @__PURE__ */ jsx14(
+        NavigationMenu,
+        {
+          items: stoppedMenuItems,
+          onSelect: (id) => {
+            if (id === "restart") start();
+            else onNavigate(id);
+          }
+        }
+      )
+    ] });
+  }
+  if (phase === "expired") {
+    const expiredMenuItems = [
+      { id: "restart", label: "Restart", description: "Start a new dev session" },
+      { id: "dashboard", label: "Local Models", description: "Switch to local models view" },
+      { id: "quit", label: "Quit", description: "Exit the application" }
+    ];
+    return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+      /* @__PURE__ */ jsx14(AppInfoHeader, { appConfig }),
+      /* @__PURE__ */ jsx14(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { color: "yellow", children: "\u26A0 Dev session expired. The platform may have timed it out." }) }),
+      /* @__PURE__ */ jsx14(Box13, { flexGrow: 1 }),
+      /* @__PURE__ */ jsx14(
+        NavigationMenu,
+        {
+          items: expiredMenuItems,
+          onSelect: (id) => {
+            if (id === "restart") start();
+            else onNavigate(id);
+          }
+        }
+      )
+    ] });
+  }
+  const statusLines = 4;
+  const menuLines = 8;
+  const contentHeight = Math.max(5, (termHeight ?? 30) - statusLines - menuLines);
+  return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx14(Box13, { flexDirection: "column", paddingX: 1, paddingTop: 1, children: /* @__PURE__ */ jsxs13(Box13, { gap: 2, children: [
+      /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", children: appConfig.name }),
+      /* @__PURE__ */ jsxs13(Text14, { color: "green", children: [
+        "\u25CF ",
+        session?.branch ?? "main"
+      ] }),
+      /* @__PURE__ */ jsx14(Text14, { color: "cyan", children: session?.previewUrl ?? session?.webInterfaceUrl ?? "" })
+    ] }) }),
+    /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [
+      activeTab === "info" && /* @__PURE__ */ jsx14(
+        InfoTab,
+        {
+          appConfig,
+          session,
+          devPort,
+          proxyPort,
+          devServerPhase: devServer.phase,
+          requests,
+          syncResult,
+          scenarioResult,
+          roleOverride,
+          contentHeight
+        }
+      ),
+      activeTab === "requests" && /* @__PURE__ */ jsx14(DevRequestLog, { requests, maxVisible: contentHeight }),
+      activeTab === "methods" && /* @__PURE__ */ jsx14(MethodsTab, { appConfig, contentHeight }),
+      activeTab === "server" && /* @__PURE__ */ jsx14(
+        DevServerTab,
+        {
+          devPort,
+          phase: devServer.phase,
+          outputLines: devServer.outputLines,
+          error: devServer.error,
+          contentHeight
+        }
+      )
+    ] }),
+    showScenarioPicker ? /* @__PURE__ */ jsx14(
+      NavigationMenu,
+      {
+        title: "Select Scenario",
+        items: [
+          ...appConfig.scenarios.map((s) => ({
+            id: `scenario:${s.id}`,
+            label: s.name ?? s.id,
+            description: s.description ?? `Roles: ${s.roles.length > 0 ? s.roles.join(", ") : "none"}`
+          })),
+          { id: "back", label: "Back", description: "Return to actions" }
+        ],
+        onSelect: (id) => {
+          setShowScenarioPicker(false);
+          if (id.startsWith("scenario:")) {
+            runScenario(id.slice("scenario:".length));
+          }
+        }
+      }
+    ) : showRolePicker ? /* @__PURE__ */ jsx14(
+      NavigationMenu,
+      {
+        title: "Impersonate Role",
+        items: [
+          ...appConfig.roles.map((r) => ({
+            id: `role:${r.id}`,
+            label: r.name ?? r.id,
+            description: r.description ?? r.id
+          })),
+          ...roleOverride ? [{ id: "clear", label: "Clear Override", description: "Revert to default session roles" }] : [],
+          { id: "back", label: "Back", description: "Return to actions" }
+        ],
+        onSelect: (id) => {
+          setShowRolePicker(false);
+          if (id === "clear") {
+            clearImpersonation();
+          } else if (id.startsWith("role:")) {
+            setImpersonation([id.slice("role:".length)]);
+          }
+        }
+      }
+    ) : /* @__PURE__ */ jsx14(
+      NavigationMenu,
+      {
+        items: runningMenuItems,
+        onSelect: (id) => {
+          if (id === "scenario") setShowScenarioPicker(true);
+          else if (id === "impersonate") setShowRolePicker(true);
+          else if (id === "sync") resync();
+          else if (id === "stop") stop();
+          else onNavigate(id);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx14(TabBar, { tabs: TABS, activeTab })
+  ] });
+}
+function AppInfoHeader({ appConfig }) {
+  return /* @__PURE__ */ jsxs13(
+    Box13,
+    {
+      flexDirection: "column",
+      paddingX: 1,
+      paddingY: 1,
+      borderStyle: "round",
+      borderColor: "gray",
+      children: [
+        /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", children: appConfig.name }),
+        appConfig.description && /* @__PURE__ */ jsx14(Text14, { color: "gray", children: appConfig.description }),
+        !appConfig.appId && /* @__PURE__ */ jsx14(Text14, { color: "yellow", children: '\u26A0 No "appId" field in mindstudio.json \u2014 add your app ID to start a dev session' })
+      ]
+    }
+  );
+}
+function InfoTab({
+  appConfig,
+  session,
+  devPort,
+  proxyPort,
+  devServerPhase,
+  requests,
+  syncResult,
+  scenarioResult,
+  roleOverride,
+  contentHeight
+}) {
+  return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Session" }),
+    /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { color: "gray", children: "Session ID: " }),
+      /* @__PURE__ */ jsx14(Text14, { children: session?.sessionId ?? "..." })
+    ] }),
+    /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { color: "gray", children: "Release ID: " }),
+      /* @__PURE__ */ jsx14(Text14, { children: session?.releaseId ?? "..." })
+    ] }),
+    /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { color: "gray", children: "Branch:     " }),
+      /* @__PURE__ */ jsx14(Text14, { children: session?.branch ?? "..." })
+    ] }),
+    session?.user && /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsx14(Text14, { color: "gray", children: "User:       " }),
+      /* @__PURE__ */ jsxs13(Text14, { children: [
+        session.user.name,
+        " (",
+        session.user.email,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "App URL" }) }),
+    /* @__PURE__ */ jsx14(Text14, { color: "cyan", bold: true, children: session?.previewUrl ?? session?.webInterfaceUrl ?? "..." }),
+    /* @__PURE__ */ jsx14(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Dev Server" }) }),
+    devPort !== null ? /* @__PURE__ */ jsxs13(Text14, { children: [
+      /* @__PURE__ */ jsxs13(Text14, { children: [
+        "localhost:",
+        devPort
+      ] }),
+      devServerPhase === "running" ? /* @__PURE__ */ jsx14(Text14, { color: "green", children: " \u25CF running" }) : devServerPhase === "starting" ? /* @__PURE__ */ jsx14(Text14, { color: "yellow", children: " \u25CB starting" }) : /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+        " \u25CB ",
+        devServerPhase
+      ] })
+    ] }) : /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "Backend-only mode (no frontend)" }),
+    roleOverride && /* @__PURE__ */ jsxs13(Box13, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Impersonation" }),
+      /* @__PURE__ */ jsxs13(Text14, { color: "yellow", children: [
+        "  \u25CF Active: ",
+        roleOverride.join(", ")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Databases" }) }),
+    (session?.databases ?? []).length === 0 ? /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "No databases" }) : session?.databases.map((db) => /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs13(Text14, { children: [
+        "  ",
+        /* @__PURE__ */ jsx14(Text14, { color: "cyan", children: db.name })
+      ] }),
+      db.tables.map((table) => /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+        "    ",
+        table.name
+      ] }, table.name))
+    ] }, db.id)),
+    syncResult && /* @__PURE__ */ jsxs13(Box13, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Schema Sync" }),
+      syncResult.created.length > 0 && /* @__PURE__ */ jsxs13(Text14, { color: "green", children: [
+        "  \u2713 Created: ",
+        syncResult.created.join(", ")
+      ] }),
+      syncResult.altered.length > 0 && /* @__PURE__ */ jsxs13(Text14, { color: "yellow", children: [
+        "  \u2713 Altered: ",
+        syncResult.altered.join(", ")
+      ] }),
+      syncResult.errors.map((err, i) => /* @__PURE__ */ jsxs13(Text14, { color: "red", children: [
+        "  \u2716 ",
+        err
+      ] }, i)),
+      syncResult.created.length === 0 && syncResult.altered.length === 0 && syncResult.errors.length === 0 && /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "  No changes" })
+    ] }),
+    scenarioResult && /* @__PURE__ */ jsxs13(Box13, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Last Scenario" }),
+      scenarioResult.success ? /* @__PURE__ */ jsxs13(Text14, { color: "green", children: [
+        '  \u2713 "',
+        scenarioResult.name ?? scenarioResult.id,
+        '" applied'
+      ] }) : /* @__PURE__ */ jsxs13(Text14, { color: "red", children: [
+        '  \u2716 "',
+        scenarioResult.name ?? scenarioResult.id,
+        '" failed: ',
+        scenarioResult.error
+      ] }),
+      scenarioResult.roles.length > 0 && /* @__PURE__ */ jsxs13(Text14, { color: "gray", dimColor: true, children: [
+        "  Roles: ",
+        scenarioResult.roles.join(", ")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(Box13, { marginTop: 1, children: /* @__PURE__ */ jsx14(Text14, { bold: true, color: "white", underline: true, children: "Recent Requests" }) }),
+    requests.length === 0 ? /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "No requests yet" }) : requests.slice(-5).map((req) => /* @__PURE__ */ jsxs13(Box13, { gap: 1, children: [
+      req.status === "completed" && /* @__PURE__ */ jsx14(Text14, { color: "green", children: "\u2713" }),
+      req.status === "failed" && /* @__PURE__ */ jsx14(Text14, { color: "red", children: "\u2716" }),
+      req.status === "processing" && /* @__PURE__ */ jsx14(Text14, { color: "cyan", children: "\u25CF" }),
+      /* @__PURE__ */ jsx14(Text14, { children: req.method ?? "unknown" }),
+      req.duration != null && /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+        req.duration,
+        "ms"
+      ] }),
+      req.status === "failed" && req.error && /* @__PURE__ */ jsx14(Text14, { color: "red", wrap: "truncate", children: req.error.split("\n")[0] })
+    ] }, req.id))
+  ] });
+}
+function MethodsTab({
+  appConfig,
+  contentHeight
+}) {
+  return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsxs13(Text14, { bold: true, color: "white", underline: true, children: [
+      "Methods (",
+      appConfig.methods.length,
+      ")"
+    ] }),
+    appConfig.methods.slice(0, contentHeight - 2).map((method) => /* @__PURE__ */ jsxs13(Box13, { gap: 1, children: [
+      /* @__PURE__ */ jsx14(Text14, { color: "cyan", children: method.export }),
+      /* @__PURE__ */ jsxs13(Text14, { color: "gray", dimColor: true, children: [
+        "\u2192 ",
+        method.id
+      ] }),
+      /* @__PURE__ */ jsxs13(Text14, { color: "gray", dimColor: true, children: [
+        "(",
+        method.path,
+        ")"
+      ] })
+    ] }, method.id)),
+    appConfig.methods.length === 0 && /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "No methods defined" })
+  ] });
+}
+function DevServerTab({
+  devPort,
+  phase,
+  outputLines,
+  error,
+  contentHeight
+}) {
+  const visibleLines = contentHeight - 3;
+  return /* @__PURE__ */ jsxs13(Box13, { flexDirection: "column", paddingX: 1, marginTop: 1, children: [
+    /* @__PURE__ */ jsxs13(Text14, { bold: true, color: "white", underline: true, children: [
+      "Dev Server",
+      phase === "running" ? /* @__PURE__ */ jsx14(Text14, { color: "green", children: " \u25CF running" }) : phase === "starting" ? /* @__PURE__ */ jsx14(Text14, { color: "yellow", children: " \u25CB starting" }) : phase === "error" ? /* @__PURE__ */ jsx14(Text14, { color: "red", children: " \u2716 error" }) : /* @__PURE__ */ jsxs13(Text14, { color: "gray", children: [
+        " \u25CB ",
+        phase
+      ] })
+    ] }),
+    devPort !== null && /* @__PURE__ */ jsxs13(Text14, { color: "gray", dimColor: true, children: [
+      "localhost:",
+      devPort
+    ] }),
+    devPort === null && /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "Backend-only mode (no frontend)" }),
+    error && /* @__PURE__ */ jsx14(Text14, { color: "red", children: error }),
+    outputLines.slice(-visibleLines).map((line, i) => /* @__PURE__ */ jsx14(Text14, { color: "gray", wrap: "truncate", children: line }, i)),
+    outputLines.length === 0 && phase !== "idle" && !error && /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "Waiting for output..." }),
+    outputLines.length === 0 && phase === "idle" && !error && /* @__PURE__ */ jsx14(Text14, { color: "gray", dimColor: true, children: "Dev server not started" })
+  ] });
+}
+
 // src/tui/App.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var MODEL_TYPE_MAP = {
   text: "llm_chat",
   image: "image_generation",
   video: "video_generation"
 };
-function App({ runner }) {
+function App({ runner, appConfig }) {
   const { exit } = useApp();
-  const { stdout } = useStdout7();
+  const { stdout } = useStdout8();
   const {
     status: connectionStatus,
     environment,
@@ -2477,31 +3618,31 @@ function App({ runner }) {
     refresh: refreshSynced
   } = useSyncedModels(connectionStatus);
   const shouldOnboard = getApiKey() === void 0 || getUserId() === void 0;
-  const [page, setPage] = useState16(
-    shouldOnboard ? "onboarding" : "dashboard"
+  const [page, setPage] = useState21(
+    shouldOnboard ? "onboarding" : appConfig ? "dev" : "dashboard"
   );
-  const [syncStatus, setSyncStatus] = useState16(
+  const [syncStatus, setSyncStatus] = useState21(
     "idle"
   );
-  const syncTimerRef = useRef9(void 0);
-  const lastSyncPayloadRef = useRef9("");
-  useEffect16(() => {
+  const syncTimerRef = useRef12(void 0);
+  const lastSyncPayloadRef = useRef12("");
+  useEffect20(() => {
     if (connectionStatus === "not_authenticated") {
       setPage("onboarding");
     }
   }, [connectionStatus]);
-  useEffect16(() => {
+  useEffect20(() => {
     if (page === "dashboard") {
       refreshAll();
     }
   }, [page]);
-  useEffect16(() => {
+  useEffect20(() => {
     if (connectionStatus === "connected" && syncedModels.length > 0) {
       runner.start(syncedModels);
     }
   }, [connectionStatus, syncedModels, runner]);
-  useEffect16(() => () => runner.stop(), [runner]);
-  const refreshAll = useCallback10(
+  useEffect20(() => () => runner.stop(), [runner]);
+  const refreshAll = useCallback12(
     async (silent = false) => {
       if (!silent) setSyncStatus("syncing");
       const [discoveredModels] = await Promise.all([
@@ -2531,21 +3672,21 @@ function App({ runner }) {
     },
     [refreshProviders, refreshModels, refreshSynced]
   );
-  useEffect16(() => {
+  useEffect20(() => {
     if (connectionStatus !== "connected" || page !== "dashboard") return;
     const interval = setInterval(() => refreshAll(true), 1500);
     return () => clearInterval(interval);
   }, [connectionStatus, page, refreshAll]);
-  const handleQuit = useCallback10(() => {
+  const handleQuit = useCallback12(() => {
     runner.stop();
     exit();
   }, [runner, exit]);
-  const handleOnboardingComplete = useCallback10(() => {
+  const handleOnboardingComplete = useCallback12(() => {
     retryConnection();
     refreshAll();
     setPage("dashboard");
   }, [retryConnection, refreshAll]);
-  const handleNavigate = useCallback10(
+  const handleNavigate = useCallback12(
     (id) => {
       switch (id) {
         case "interfaces":
@@ -2557,6 +3698,12 @@ function App({ runner }) {
         case "setup":
           setPage("setup");
           break;
+        case "dev":
+          setPage("dev");
+          break;
+        case "dashboard":
+          setPage("dashboard");
+          break;
         case "refresh":
           refreshAll();
           break;
@@ -2570,7 +3717,7 @@ function App({ runner }) {
   const subpageMenuItems = [
     { id: "back", label: "Back", description: "Return to dashboard" }
   ];
-  const handleSubpageNavigate = useCallback10(
+  const handleSubpageNavigate = useCallback12(
     (id) => {
       if (id === "back") {
         setPage("dashboard");
@@ -2580,11 +3727,11 @@ function App({ runner }) {
     },
     [handleNavigate]
   );
-  const [termSize, setTermSize] = useState16({
+  const [termSize, setTermSize] = useState21({
     rows: stdout?.rows ?? 24,
     columns: stdout?.columns ?? 80
   });
-  useEffect16(() => {
+  useEffect20(() => {
     if (!stdout) return;
     const onResize = () => {
       stdout.write("\x1B[2J\x1B[H");
@@ -2597,8 +3744,8 @@ 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(Fragment5, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx15(Box14, { flexDirection: "column", height: termHeight, overflow: "hidden", children: page === "onboarding" ? /* @__PURE__ */ jsx15(OnboardingPage, { onComplete: handleOnboardingComplete }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx15(
       Header,
       {
         connection: connectionStatus,
@@ -2609,7 +3756,7 @@ function App({ runner }) {
         hasActiveRequest: activeRequestCount > 0
       }
     ),
-    page === "dashboard" && /* @__PURE__ */ jsx11(
+    page === "dashboard" && /* @__PURE__ */ jsx15(
       DashboardPage,
       {
         requests,
@@ -2625,8 +3772,8 @@ function App({ runner }) {
         onNavigate: handleNavigate
       }
     ),
-    page === "setup" && /* @__PURE__ */ jsx11(SetupPage, { onBack: () => setPage("dashboard") }),
-    page === "interfaces" && /* @__PURE__ */ jsx11(
+    page === "setup" && /* @__PURE__ */ jsx15(SetupPage, { onBack: () => setPage("dashboard") }),
+    page === "interfaces" && /* @__PURE__ */ jsx15(
       InterfacesPage,
       {
         onBack: () => setPage("dashboard"),
@@ -2635,12 +3782,12 @@ function App({ runner }) {
         refresh: editorSessions.refresh
       }
     ),
-    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(Box10, { flexGrow: 1 }),
-    page !== "dashboard" && page !== "setup" && page !== "interfaces" && /* @__PURE__ */ jsx11(
-      NavigationMenu,
+    page === "dev" && appConfig && /* @__PURE__ */ jsx15(
+      DevPage,
       {
-        items: subpageMenuItems,
-        onSelect: handleSubpageNavigate
+        appConfig,
+        onNavigate: handleNavigate,
+        termHeight
       }
     )
   ] }) });
@@ -2656,7 +3803,7 @@ function getInstallMethod() {
   return "npm";
 }
 function getCurrentVersion() {
-  return "0.5.7";
+  return "0.5.8";
 }
 async function fetchLatestVersion() {
   try {
@@ -2702,15 +3849,15 @@ async function checkForUpdate() {
 }
 
 // src/tui/components/UpdatePrompt.tsx
-import { useState as useState17, useEffect as useEffect17, useMemo as useMemo8 } from "react";
-import { Box as Box11, Text as Text11, useInput as useInput7, useStdout as useStdout8 } from "ink";
+import { useState as useState22, useEffect as useEffect21, useMemo as useMemo9 } from "react";
+import { Box as Box15, Text as Text15, useInput as useInput8, useStdout as useStdout9 } from "ink";
 import chalk4 from "chalk";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var SHIMMER_SPEED2 = 35;
 function useShimmerLogo2() {
-  const [frame, setFrame] = useState17(0);
-  const lines = useMemo8(() => LogoString.split("\n"), []);
-  const totalChars = useMemo8(() => {
+  const [frame, setFrame] = useState22(0);
+  const lines = useMemo9(() => LogoString.split("\n"), []);
+  const totalChars = useMemo9(() => {
     let count = 0;
     for (const line of lines) {
       for (const ch of line) {
@@ -2720,13 +3867,13 @@ function useShimmerLogo2() {
     return count;
   }, [lines]);
   const cycleLength = totalChars + 40;
-  useEffect17(() => {
+  useEffect21(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % cycleLength);
     }, SHIMMER_SPEED2);
     return () => clearInterval(interval);
   }, [cycleLength]);
-  return useMemo8(() => {
+  return useMemo9(() => {
     const sweepPos = frame;
     const holdEnd = totalChars + 20;
     let charIdx = 0;
@@ -2769,19 +3916,19 @@ function UpdatePrompt({
   latestVersion,
   onChoice
 }) {
-  const { stdout } = useStdout8();
+  const { stdout } = useStdout9();
   const shimmerLogo = useShimmerLogo2();
-  useInput7(() => {
+  useInput8(() => {
     onChoice(true);
   });
   const termHeight = (stdout?.rows ?? 24) - 4;
-  return /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", height: termHeight, children: [
-    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 }),
-    /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
-      /* @__PURE__ */ jsx12(Text11, { children: shimmerLogo }),
-      /* @__PURE__ */ jsx12(Box11, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx12(Text11, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
-      /* @__PURE__ */ jsxs11(Box11, { flexDirection: "column", alignItems: "center", children: [
-        /* @__PURE__ */ jsxs11(Text11, { color: "gray", children: [
+  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", height: termHeight, children: [
+    /* @__PURE__ */ jsx16(Box15, { flexGrow: 1 }),
+    /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", alignItems: "center", children: [
+      /* @__PURE__ */ jsx16(Text15, { children: shimmerLogo }),
+      /* @__PURE__ */ jsx16(Box15, { flexDirection: "column", alignItems: "center", marginTop: 2, children: /* @__PURE__ */ jsx16(Text15, { bold: true, color: "white", children: "MindStudio Local Tunnel" }) }),
+      /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs15(Text15, { color: "gray", children: [
           "Update required ",
           "\u2022",
           " v",
@@ -2791,19 +3938,19 @@ function UpdatePrompt({
           " v",
           latestVersion
         ] }),
-        /* @__PURE__ */ jsx12(Box11, { marginTop: 1, children: /* @__PURE__ */ jsx12(Text11, { color: "cyan", bold: true, children: "Press any key to update" }) })
+        /* @__PURE__ */ jsx16(Box15, { marginTop: 1, children: /* @__PURE__ */ jsx16(Text15, { color: "cyan", bold: true, children: "Press any key to update" }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(Box11, { flexGrow: 1 })
+    /* @__PURE__ */ jsx16(Box15, { flexGrow: 1 })
   ] });
 }
 
 // src/tui/index.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 async function promptForUpdate(currentVersion, latestVersion) {
   return new Promise((resolve) => {
     const { unmount } = render(
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx17(
         UpdatePrompt,
         {
           currentVersion,
@@ -2886,14 +4033,16 @@ async function startTUI() {
     }
     console.clear();
   }
+  const appConfig = detectAppConfig(process.cwd());
   const runner = new TunnelRunner();
-  const { waitUntilExit } = render(/* @__PURE__ */ jsx13(App, { runner }), {
-    exitOnCtrlC: true
-  });
+  const { waitUntilExit } = render(
+    /* @__PURE__ */ jsx17(App, { runner, appConfig: appConfig ?? void 0 }),
+    { exitOnCtrlC: true }
+  );
   await waitUntilExit();
   runner.stop();
 }
 export {
   startTUI
 };
-//# sourceMappingURL=tui-UNFZSO7R.js.map
+//# sourceMappingURL=tui-4PJCFILV.js.map