@phenx-inc/ctlsurf 0.1.21 → 0.2.0

package/out/renderer/assets/{index-DwSsD_Xm.js → index-BsdOeO0U.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./cssMode-C6bY9C4O.js","./lspLanguageFeatures-Dljhj5Gh.js","./htmlMode-DYFYy4MK.js","./jsonMode-DdDRlbXP.js","./javascript-CiHhG2a9.js","./typescript-422MU_YO.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./cssMode-D3kH1Kju.js","./lspLanguageFeatures-hoVZfVKv.js","./htmlMode-BucU1MUc.js","./jsonMode-BmJotb6E.js","./javascript-bPY5C4uq.js","./typescript-Ckc6emP2.js"])))=>i.map(i=>d[i]);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -18721,22 +18721,21 @@ function requireAddonWebLinks() {
   return addonWebLinks.exports;
 }
 var addonWebLinksExports = requireAddonWebLinks();
-let _terminal = null;
-let _fitAddon = null;
-let _currentAgentId = null;
-let _pinnedToBottom = true;
+const _terminals = /* @__PURE__ */ new Map();
 function isAtBottom(terminal) {
   const buf = terminal.buffer.active;
   return buf.viewportY >= buf.baseY;
 }
-function scrollIfPinned(terminal) {
-  if (_pinnedToBottom) {
+function scrollIfPinned(tabId, terminal) {
+  const state = _terminals.get(tabId);
+  if (state?.pinnedToBottom) {
     terminal.scrollToBottom();
   }
 }
-function getOrCreateTerminal(onExit) {
-  if (_terminal && _fitAddon) {
-    return { terminal: _terminal, fitAddon: _fitAddon };
+function getOrCreateTerminal(tabId, onExit) {
+  const existing = _terminals.get(tabId);
+  if (existing) {
+    return { terminal: existing.terminal, fitAddon: existing.fitAddon };
   }
   const terminal = new xtermExports.Terminal({
     cursorBlink: true,
@@ -18771,32 +18770,51 @@ function getOrCreateTerminal(onExit) {
   const fitAddon = new addonFitExports.FitAddon();
   terminal.loadAddon(fitAddon);
   terminal.loadAddon(new addonWebLinksExports.WebLinksAddon());
+  const state = {
+    terminal,
+    fitAddon,
+    unsubData: null,
+    unsubExit: null,
+    spawnedAgentId: null,
+    pinnedToBottom: true
+  };
   terminal.onScroll(() => {
-    _pinnedToBottom = isAtBottom(terminal);
+    state.pinnedToBottom = isAtBottom(terminal);
   });
   terminal.onData((data) => {
-    _pinnedToBottom = true;
+    state.pinnedToBottom = true;
     terminal.scrollToBottom();
-    window.worker.writePty(data);
+    window.worker.writePty(tabId, data);
   });
-  window.worker.onPtyData((data) => {
-    terminal.write(data);
-    scrollIfPinned(terminal);
+  state.unsubData = window.worker.onPtyData((eventTabId, data) => {
+    if (eventTabId === tabId) {
+      terminal.write(data);
+      scrollIfPinned(tabId, terminal);
+    }
   });
-  window.worker.onPtyExit((code) => {
-    terminal.writeln(`\r
+  state.unsubExit = window.worker.onPtyExit((eventTabId, code) => {
+    if (eventTabId === tabId) {
+      terminal.writeln(`\r
 \x1B[33m[Process exited with code ${code}]\x1B[0m`);
-    onExit();
+      onExit(tabId);
+    }
   });
-  _terminal = terminal;
-  _fitAddon = fitAddon;
+  _terminals.set(tabId, state);
   return { terminal, fitAddon };
 }
-function TerminalPanel({ agent, onSpawn, onExit }) {
+function destroyTerminal(tabId) {
+  const state = _terminals.get(tabId);
+  if (!state) return;
+  state.unsubData?.();
+  state.unsubExit?.();
+  state.terminal.dispose();
+  _terminals.delete(tabId);
+}
+function TerminalPanel({ tabId, agent, onSpawn, onExit, isActive }) {
   const containerRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (!containerRef.current) return;
-    const { terminal, fitAddon } = getOrCreateTerminal(onExit);
+    const { terminal, fitAddon } = getOrCreateTerminal(tabId, onExit);
     const existingParent = terminal.element?.parentElement;
     if (existingParent && existingParent !== containerRef.current) {
       containerRef.current.appendChild(terminal.element);
@@ -18804,16 +18822,17 @@ function TerminalPanel({ agent, onSpawn, onExit }) {
       terminal.open(containerRef.current);
     }
     fitAddon.fit();
-    scrollIfPinned(terminal);
+    scrollIfPinned(tabId, terminal);
     let resizeTimeout;
     const handleResize = () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        if (_fitAddon && _terminal) {
-          _fitAddon.fit();
-          scrollIfPinned(_terminal);
-          const { cols, rows } = _terminal;
-          window.worker.resizePty(cols, rows);
+        const state = _terminals.get(tabId);
+        if (state) {
+          state.fitAddon.fit();
+          scrollIfPinned(tabId, state.terminal);
+          const { cols, rows } = state.terminal;
+          window.worker.resizePty(tabId, cols, rows);
         }
       }, 150);
     };
@@ -18825,23 +18844,36 @@ function TerminalPanel({ agent, onSpawn, onExit }) {
       window.removeEventListener("resize", handleResize);
       observer.disconnect();
     };
-  }, [onExit]);
+  }, [tabId, onExit]);
+  reactExports.useEffect(() => {
+    if (!agent) return;
+    const state = _terminals.get(tabId);
+    if (!state) return;
+    if (state.spawnedAgentId === agent.id) return;
+    state.spawnedAgentId = agent.id;
+    state.terminal.clear();
+    onSpawn(tabId, agent).then(() => {
+      const s = _terminals.get(tabId);
+      if (s) {
+        s.fitAddon.fit();
+        s.pinnedToBottom = true;
+        s.terminal.scrollToBottom();
+        const { cols, rows } = s.terminal;
+        window.worker.resizePty(tabId, cols, rows);
+      }
+      state.terminal.focus();
+    });
+  }, [tabId, agent, onSpawn]);
   reactExports.useEffect(() => {
-    if (!agent || !_terminal) return;
-    if (_currentAgentId === agent.id) return;
-    _currentAgentId = agent.id;
-    _terminal.clear();
-    onSpawn(agent).then(() => {
-      if (_fitAddon && _terminal) {
-        _fitAddon.fit();
-        _pinnedToBottom = true;
-        _terminal.scrollToBottom();
-        const { cols, rows } = _terminal;
-        window.worker.resizePty(cols, rows);
-      }
-      _terminal?.focus();
-    });
-  }, [agent, onSpawn]);
+    if (isActive) {
+      const state = _terminals.get(tabId);
+      if (state) {
+        state.fitAddon.fit();
+        state.terminal.focus();
+      }
+      window.worker.setActiveTab(tabId);
+    }
+  }, [isActive, tabId]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "terminal-container", ref: containerRef });
 }
 function CtlsurfPanel() {
@@ -206517,7 +206549,7 @@ const lessDefaults = new LanguageServiceDefaultsImpl$3(
   modeConfigurationDefault$2
 );
 function getMode$3() {
-  return __vitePreload(() => import("./cssMode-C6bY9C4O.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./cssMode-D3kH1Kju.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
 }
 languages.onLanguage("less", () => {
   getMode$3().then((mode2) => mode2.setupMode(lessDefaults));
@@ -206622,7 +206654,7 @@ const razorLanguageService = registerHTMLLanguageService(
 );
 const razorDefaults = razorLanguageService.defaults;
 function getMode$2() {
-  return __vitePreload(() => import("./htmlMode-DYFYy4MK.js"), true ? __vite__mapDeps([2,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./htmlMode-BucU1MUc.js"), true ? __vite__mapDeps([2,1]) : void 0, import.meta.url);
 }
 function registerHTMLLanguageService(languageId, options = optionsDefault, modeConfiguration = getConfigurationDefault(languageId)) {
   const defaults = new LanguageServiceDefaultsImpl$2(languageId, options, modeConfiguration);
@@ -206706,7 +206738,7 @@ const jsonDefaults = new LanguageServiceDefaultsImpl$1(
 );
 const getWorker$1 = () => getMode$1().then((mode2) => mode2.getWorker());
 function getMode$1() {
-  return __vitePreload(() => import("./jsonMode-DdDRlbXP.js"), true ? __vite__mapDeps([3,1]) : void 0, import.meta.url);
+  return __vitePreload(() => import("./jsonMode-BmJotb6E.js"), true ? __vite__mapDeps([3,1]) : void 0, import.meta.url);
 }
 languages.register({
   id: "json",
@@ -206952,7 +206984,7 @@ const getJavaScriptWorker = () => {
   return getMode().then((mode) => mode.getJavaScriptWorker());
 };
 function getMode() {
-  return __vitePreload(() => import("./tsMode-BGTjG8Ow.js"), true ? [] : void 0, import.meta.url);
+  return __vitePreload(() => import("./tsMode-B90EqYGx.js"), true ? [] : void 0, import.meta.url);
 }
 languages.onLanguage("typescript", () => {
   return getMode().then((mode) => mode.setupTypeScript(typescriptDefaults));
@@ -207147,49 +207179,49 @@ registerLanguage({
   extensions: [".ftl", ".ftlh", ".ftlx"],
   aliases: ["FreeMarker2", "Apache FreeMarker2"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-angle.interpolation-dollar",
   aliases: ["FreeMarker2 (Angle/Dollar)", "Apache FreeMarker2 (Angle/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-bracket.interpolation-dollar",
   aliases: ["FreeMarker2 (Bracket/Dollar)", "Apache FreeMarker2 (Bracket/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-angle.interpolation-bracket",
   aliases: ["FreeMarker2 (Angle/Bracket)", "Apache FreeMarker2 (Angle/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAngleInterpolationBracket);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-bracket.interpolation-bracket",
   aliases: ["FreeMarker2 (Bracket/Bracket)", "Apache FreeMarker2 (Bracket/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagBracketInterpolationBracket);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-auto.interpolation-dollar",
   aliases: ["FreeMarker2 (Auto/Dollar)", "Apache FreeMarker2 (Auto/Dollar)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationDollar);
   }
 });
 registerLanguage({
   id: "freemarker2.tag-auto.interpolation-bracket",
   aliases: ["FreeMarker2 (Auto/Bracket)", "Apache FreeMarker2 (Auto/Bracket)"],
   loader: () => {
-    return __vitePreload(() => import("./freemarker2-CkAJiX1K.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationBracket);
+    return __vitePreload(() => import("./freemarker2-BCHZUSLb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationBracket);
   }
 });
 registerLanguage({
@@ -207210,7 +207242,7 @@ registerLanguage({
   extensions: [".handlebars", ".hbs"],
   aliases: ["Handlebars", "handlebars", "hbs"],
   mimetypes: ["text/x-handlebars-template"],
-  loader: () => __vitePreload(() => import("./handlebars-DnLXVUXp.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./handlebars-DKx-Fw-H.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "hcl",
@@ -207223,7 +207255,7 @@ registerLanguage({
   extensions: [".html", ".htm", ".shtml", ".xhtml", ".mdoc", ".jsp", ".asp", ".aspx", ".jshtm"],
   aliases: ["HTML", "htm", "html", "xhtml"],
   mimetypes: ["text/html", "text/x-jshtm", "text/template", "text/ng-template"],
-  loader: () => __vitePreload(() => import("./html-Ds5-qvDh.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./html-BSCM04uL.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "ini",
@@ -207246,7 +207278,7 @@ registerLanguage({
   filenames: ["jakefile"],
   aliases: ["JavaScript", "javascript", "js"],
   mimetypes: ["text/javascript"],
-  loader: () => __vitePreload(() => import("./javascript-CiHhG2a9.js"), true ? __vite__mapDeps([4,5]) : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./javascript-bPY5C4uq.js"), true ? __vite__mapDeps([4,5]) : void 0, import.meta.url)
 });
 registerLanguage({
   id: "julia",
@@ -207285,7 +207317,7 @@ registerLanguage({
   extensions: [".liquid", ".html.liquid"],
   aliases: ["Liquid", "liquid"],
   mimetypes: ["application/liquid"],
-  loader: () => __vitePreload(() => import("./liquid-BP5mb-uD.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./liquid-Cja_Pzh3.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "m3",
@@ -207303,7 +207335,7 @@ registerLanguage({
   id: "mdx",
   extensions: [".mdx"],
   aliases: ["MDX", "mdx"],
-  loader: () => __vitePreload(() => import("./mdx-D4u3N7dt.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./mdx-C0s81MOq.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "mips",
@@ -207402,7 +207434,7 @@ registerLanguage({
   extensions: [".py", ".rpy", ".pyw", ".cpy", ".gyp", ".gypi"],
   aliases: ["Python", "py"],
   firstLine: "^#!/.*\\bpython[0-9.-]*\\b",
-  loader: () => __vitePreload(() => import("./python-BQDHXVwp.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./python-CulkBOJr.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "qsharp",
@@ -207421,7 +207453,7 @@ registerLanguage({
   extensions: [".cshtml"],
   aliases: ["Razor", "razor"],
   mimetypes: ["text/x-cshtml"],
-  loader: () => __vitePreload(() => import("./razor-BfXW9cDc.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./razor-czmzhwVZ.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "redis",
@@ -207554,7 +207586,7 @@ registerLanguage({
   aliases: ["TypeScript", "ts", "typescript"],
   mimetypes: ["text/typescript"],
   loader: () => {
-    return __vitePreload(() => import("./typescript-422MU_YO.js"), true ? [] : void 0, import.meta.url);
+    return __vitePreload(() => import("./typescript-Ckc6emP2.js"), true ? [] : void 0, import.meta.url);
   }
 });
 registerLanguage({
@@ -207599,14 +207631,14 @@ registerLanguage({
   firstLine: "(\\<\\?xml.*)|(\\<svg)|(\\<\\!doctype\\s+svg)",
   aliases: ["XML", "xml"],
   mimetypes: ["text/xml", "application/xml", "application/xaml+xml", "application/xml-dtd"],
-  loader: () => __vitePreload(() => import("./xml-B6EKhHiy.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./xml-CKh-JyGN.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "yaml",
   extensions: [".yaml", ".yml"],
   aliases: ["YAML", "yaml", "YML", "yml"],
   mimetypes: ["application/x-yaml", "text/x-yaml"],
-  loader: () => __vitePreload(() => import("./yaml-LkO_eGYb.js"), true ? [] : void 0, import.meta.url)
+  loader: () => __vitePreload(() => import("./yaml-B49zLim4.js"), true ? [] : void 0, import.meta.url)
 });
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -211638,18 +211670,26 @@ const DEFAULT_LAYOUT = {
   sizes: [50, 50]
 };
 const ALL_PANE_IDS = ["editor", "terminal", "ctlsurf"];
+let _tabCounter = 0;
+function nextTabId() {
+  return `tab-${++_tabCounter}`;
+}
 function App() {
   const [agents, setAgents] = reactExports.useState([]);
-  const [selectedAgent, setSelectedAgent] = reactExports.useState(null);
-  const [agentStatus, setAgentStatus] = reactExports.useState("idle");
   const [sessionStart, setSessionStart] = reactExports.useState(null);
   const [layout2, setLayout] = reactExports.useState(DEFAULT_LAYOUT);
   const [hiddenPanes, setHiddenPanes] = reactExports.useState(/* @__PURE__ */ new Set());
   const [showSettings, setShowSettings] = reactExports.useState(false);
   const [wsStatus, setWsStatus] = reactExports.useState("disconnected");
   const [cwd2, setCwd] = reactExports.useState(null);
-  const visiblePaneIds = findPaneIds(layout2);
+  const [tabs, setTabs] = reactExports.useState(() => {
+    const id = nextTabId();
+    return [{ id, label: "Terminal 1", agent: null, agentStatus: "idle" }];
+  });
+  const [activeTabId, setActiveTabId] = reactExports.useState(tabs[0].id);
+  const [pickerTargetTabId, setPickerTargetTabId] = reactExports.useState(tabs[0].id);
   const [showAgentPicker, setShowAgentPicker] = reactExports.useState(true);
+  const visiblePaneIds = findPaneIds(layout2);
   reactExports.useEffect(() => {
     async function init2() {
       const list2 = await window.worker.listAgents();
@@ -211672,41 +211712,78 @@ function App() {
     });
     return unsub;
   }, []);
-  const spawnGenRef = reactExports.useRef(0);
   const cwdRef = reactExports.useRef(null);
-  const handleSpawn = reactExports.useCallback(async (agent) => {
-    spawnGenRef.current += 1;
-    setAgentStatus("active");
+  const handleSpawn = reactExports.useCallback(async (tabId, agent) => {
+    setTabs((prev) => prev.map((t) => t.id === tabId ? { ...t, agentStatus: "active" } : t));
     setSessionStart(/* @__PURE__ */ new Date());
     const spawnCwd = cwdRef.current || await window.worker.getCwd().catch(() => window.worker.getHomePath());
     setCwd(spawnCwd);
     cwdRef.current = spawnCwd;
-    await window.worker.spawnAgent(agent, spawnCwd);
+    await window.worker.spawnAgent(tabId, agent, spawnCwd);
   }, []);
   const handleAgentChange = reactExports.useCallback(async (agentId) => {
     const agent = agents.find((a) => a.id === agentId);
     if (agent) {
-      await window.worker.killPty();
-      setSelectedAgent(agent);
+      await window.worker.killPty(activeTabId);
+      setTabs((prev) => prev.map((t) => t.id === activeTabId ? { ...t, agent, agentStatus: "idle" } : t));
     }
-  }, [agents]);
-  const handleExit = reactExports.useCallback(() => {
-    const gen = spawnGenRef.current;
+  }, [agents, activeTabId]);
+  const handleExit = reactExports.useCallback((tabId) => {
     setTimeout(() => {
-      if (spawnGenRef.current === gen) setAgentStatus("exited");
+      setTabs((prev) => prev.map((t) => t.id === tabId ? { ...t, agentStatus: "exited" } : t));
     }, 200);
   }, []);
   const handleChangeCwd = reactExports.useCallback(async () => {
     const newCwd = await window.worker.browseCwd();
-    if (!newCwd || !selectedAgent) return;
+    const activeTab = tabs.find((t) => t.id === activeTabId);
+    if (!newCwd || !activeTab?.agent) return;
     cwdRef.current = newCwd;
     setCwd(newCwd);
-    await window.worker.killPty();
-    spawnGenRef.current += 1;
-    setAgentStatus("active");
+    await window.worker.killPty(activeTabId);
+    setTabs((prev) => prev.map((t) => t.id === activeTabId ? { ...t, agentStatus: "active" } : t));
     setSessionStart(/* @__PURE__ */ new Date());
-    await window.worker.spawnAgent(selectedAgent, newCwd);
-  }, [selectedAgent]);
+    await window.worker.spawnAgent(activeTabId, activeTab.agent, newCwd);
+  }, [tabs, activeTabId]);
+  const addTab = reactExports.useCallback(() => {
+    const id = nextTabId();
+    const num = _tabCounter;
+    setTabs((prev) => [...prev, { id, label: `Terminal ${num}`, agent: null, agentStatus: "idle" }]);
+    setActiveTabId(id);
+    setPickerTargetTabId(id);
+    setShowAgentPicker(true);
+  }, []);
+  const handlePickerSelect = reactExports.useCallback((agent) => {
+    const tabId = pickerTargetTabId;
+    if (tabId) {
+      setTabs((prev) => prev.map(
+        (t) => t.id === tabId ? { ...t, agent, label: `${agent.name} ${tabs.filter((x) => x.agent?.id === agent.id).length + 1}` } : t
+      ));
+    }
+    setShowAgentPicker(false);
+    setPickerTargetTabId(null);
+  }, [pickerTargetTabId, tabs]);
+  const closeTab = reactExports.useCallback(async (tabId) => {
+    await window.worker.killPty(tabId);
+    destroyTerminal(tabId);
+    setTabs((prev) => {
+      const next = prev.filter((t) => t.id !== tabId);
+      if (tabId === activeTabId && next.length > 0) {
+        setActiveTabId(next[next.length - 1].id);
+      }
+      if (next.length === 0) {
+        const id = nextTabId();
+        const num = _tabCounter;
+        setActiveTabId(id);
+        setPickerTargetTabId(id);
+        setShowAgentPicker(true);
+        return [{ id, label: `Terminal ${num}`, agent: null, agentStatus: "idle" }];
+      }
+      return next;
+    });
+  }, [activeTabId]);
+  const switchTab = reactExports.useCallback((tabId) => {
+    setActiveTabId(tabId);
+  }, []);
   const togglePane = reactExports.useCallback((id) => {
     if (visiblePaneIds.includes(id)) {
       const newLayout = removePane(layout2, id);
@@ -211774,7 +211851,59 @@ function App() {
     {
       id: "terminal",
       label: "Terminal",
-      content: /* @__PURE__ */ jsxRuntimeExports.jsx(TerminalPanel, { agent: selectedAgent, onSpawn: handleSpawn, onExit: handleExit })
+      content: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "terminal-tabs-wrapper", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "terminal-tab-bar", children: [
+          tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: `terminal-tab ${tab.id === activeTabId ? "active" : ""}`,
+              onClick: () => switchTab(tab.id),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "terminal-tab-label", children: [
+                  tab.agent ? tab.agent.name : tab.label,
+                  tab.agentStatus === "active" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "terminal-tab-dot active" }),
+                  tab.agentStatus === "exited" && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "terminal-tab-dot exited" })
+                ] }),
+                tabs.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "button",
+                  {
+                    className: "terminal-tab-close",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      closeTab(tab.id);
+                    },
+                    title: "Close tab",
+                    children: "×"
+                  }
+                )
+              ]
+            },
+            tab.id
+          )),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "terminal-tab-add", onClick: addTab, title: "New terminal tab", children: "+" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "terminal-tabs-content", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "terminal-tab-panel",
+            style: {
+              display: tab.id === activeTabId ? "flex" : "none",
+              flex: 1
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TerminalPanel,
+              {
+                tabId: tab.id,
+                agent: tab.agent,
+                onSpawn: handleSpawn,
+                onExit: handleExit,
+                isActive: tab.id === activeTabId
+              }
+            )
+          },
+          tab.id
+        )) })
+      ] })
     },
     { id: "ctlsurf", label: "ctlsurf", content: /* @__PURE__ */ jsxRuntimeExports.jsx(CtlsurfPanel, {}) }
   ];
@@ -211784,16 +211913,19 @@ function App() {
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "titlebar-controls", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "titlebar-btn", onClick: () => setShowSettings(true), title: "Settings", children: "Settings" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "titlebar-separator" }),
-        agents.map((a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            className: `titlebar-agent-btn ${selectedAgent?.id === a.id ? "active" : ""}`,
-            onClick: () => handleAgentChange(a.id),
-            title: a.description,
-            children: a.name
-          },
-          a.id
-        )),
+        agents.map((a) => {
+          const activeTab = tabs.find((t) => t.id === activeTabId);
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              className: `titlebar-agent-btn ${activeTab?.agent?.id === a.id ? "active" : ""}`,
+              onClick: () => handleAgentChange(a.id),
+              title: a.description,
+              children: a.name
+            },
+            a.id
+          );
+        }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "titlebar-separator" }),
         ALL_PANE_IDS.map((id) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
@@ -211823,10 +211955,7 @@ function App() {
       {
         agents,
         cwd: cwd2 || "",
-        onSelect: (agent) => {
-          setSelectedAgent(agent);
-          setShowAgentPicker(false);
-        },
+        onSelect: handlePickerSelect,
         onChangeCwd: async () => {
           const newCwd = await window.worker.browseCwd();
           if (newCwd) {