@phenx-inc/ctlsurf 0.1.21 → 0.3.0

package/out/renderer/assets/{index-DwSsD_Xm.js → index-BnCJ1IaZ.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-DiOmyihM.js","./lspLanguageFeatures-CUafmPGy.js","./htmlMode-CQ5Xenrg.js","./jsonMode-DshPNyVy.js","./javascript-U5dsRcHx.js","./typescript-Cvna1mak.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,43 @@ function TerminalPanel({ agent, onSpawn, onExit }) {
       window.removeEventListener("resize", handleResize);
       observer.disconnect();
     };
-  }, [onExit]);
+  }, [tabId, onExit]);
   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 (!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 (isActive) {
+      window.worker.setActiveTab(tabId);
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          const state = _terminals.get(tabId);
+          if (state) {
+            state.fitAddon.fit();
+            state.terminal.focus();
+            scrollIfPinned(tabId, state.terminal);
+            const { cols, rows } = state.terminal;
+            window.worker.resizePty(tabId, cols, rows);
+          }
+        }, 50);
+      });
+    }
+  }, [isActive, tabId]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "terminal-container", ref: containerRef });
 }
 function CtlsurfPanel() {
@@ -206517,7 +206556,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-DiOmyihM.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
 }
 languages.onLanguage("less", () => {
   getMode$3().then((mode2) => mode2.setupMode(lessDefaults));
@@ -206622,7 +206661,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-CQ5Xenrg.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 +206745,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-DshPNyVy.js"), true ? __vite__mapDeps([3,1]) : void 0, import.meta.url);
 }
 languages.register({
   id: "json",
@@ -206952,7 +206991,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-D-7JexQ_.js"), true ? [] : void 0, import.meta.url);
 }
 languages.onLanguage("typescript", () => {
   return getMode().then((mode) => mode.setupTypeScript(typescriptDefaults));
@@ -207147,49 +207186,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-BAfv60yb.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-BAfv60yb.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-BAfv60yb.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-BAfv60yb.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-BAfv60yb.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-BAfv60yb.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-BAfv60yb.js"), true ? [] : void 0, import.meta.url).then((m) => m.TagAutoInterpolationBracket);
   }
 });
 registerLanguage({
@@ -207210,7 +207249,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-Ult17NzQ.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "hcl",
@@ -207223,7 +207262,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-DCxh4J-1.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "ini",
@@ -207246,7 +207285,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-U5dsRcHx.js"), true ? __vite__mapDeps([4,5]) : void 0, import.meta.url)
 });
 registerLanguage({
   id: "julia",
@@ -207285,7 +207324,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-jHHLYTlB.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "m3",
@@ -207303,7 +207342,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-Ct-tiY6g.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "mips",
@@ -207402,7 +207441,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-wD3UwKPV.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "qsharp",
@@ -207421,7 +207460,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-11ECS4oH.js"), true ? [] : void 0, import.meta.url)
 });
 registerLanguage({
   id: "redis",
@@ -207554,7 +207593,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-Cvna1mak.js"), true ? [] : void 0, import.meta.url);
   }
 });
 registerLanguage({
@@ -207599,14 +207638,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-JsEaImjA.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-B8pCNDb_.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;
@@ -211475,6 +211514,8 @@ function SettingsDialog({ open, onClose }) {
   const [apiKey, setApiKey] = reactExports.useState("");
   const [baseUrl, setBaseUrl] = reactExports.useState("");
   const [dataspacePageId, setDataspacePageId] = reactExports.useState("");
+  const [trackTime, setTrackTime] = reactExports.useState(false);
+  const [idleTimeoutMin, setIdleTimeoutMin] = reactExports.useState(15);
   const [saved, setSaved] = reactExports.useState(false);
   const loadProfiles = async () => {
     const data = await window.worker.listProfiles();
@@ -211494,6 +211535,8 @@ function SettingsDialog({ open, onClose }) {
     setApiKey("");
     setBaseUrl(profile.baseUrl);
     setDataspacePageId(profile.dataspacePageId || "");
+    setTrackTime(!!profile.trackTime);
+    setIdleTimeoutMin(profile.idleTimeoutMin ?? 15);
     setSaved(false);
   };
   const startNewProfile = () => {
@@ -211503,6 +211546,8 @@ function SettingsDialog({ open, onClose }) {
     setApiKey("");
     setBaseUrl("http://localhost:8000");
     setDataspacePageId("");
+    setTrackTime(true);
+    setIdleTimeoutMin(15);
     setSaved(false);
   };
   const handleSave = async () => {
@@ -211510,7 +211555,9 @@ function SettingsDialog({ open, onClose }) {
     const data = {
       name: name.trim(),
       baseUrl: baseUrl.trim() || "https://app.ctlsurf.com",
-      dataspacePageId: dataspacePageId.trim()
+      dataspacePageId: dataspacePageId.trim(),
+      trackTime,
+      idleTimeoutMin: Math.max(1, Math.floor(idleTimeoutMin)) || 15
     };
     if (apiKey.trim()) {
       data.apiKey = apiKey.trim();
@@ -211590,6 +211637,31 @@ function SettingsDialog({ open, onClose }) {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "settings-checkbox", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: trackTime,
+              onChange: (e) => setTrackTime(e.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Track time per project" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "settings-hint", children: `Logs each session to a "Time Tracking" datastore on the project's Agent Datastore page.` })
+        ] }),
+        trackTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+          "Idle timeout (min)",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              value: idleTimeoutMin,
+              onChange: (e) => setIdleTimeoutMin(parseInt(e.target.value, 10) || 15)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "settings-hint", children: "Gaps longer than this without terminal activity are counted as idle, not work." })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "settings-actions", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn-secondary", onClick: () => setEditingId(null), children: "Back" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn-primary", onClick: handleSave, children: saved ? "Saved!" : "Save" })
@@ -211638,18 +211710,27 @@ 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 [trackingActive, setTrackingActive] = reactExports.useState(false);
+  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 +211753,102 @@ function App() {
     });
     return unsub;
   }, []);
-  const spawnGenRef = reactExports.useRef(0);
+  reactExports.useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const r = await window.worker.getTracking();
+        if (!cancelled) setTrackingActive(!!r?.active);
+      } catch {
+      }
+    };
+    refresh();
+    const id = setInterval(refresh, 4e3);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, [activeTabId]);
+  const handleToggleTracking = reactExports.useCallback(async () => {
+    try {
+      const r = await window.worker.setTracking(!trackingActive);
+      setTrackingActive(!!r?.active);
+    } catch (err) {
+      console.error("[tracking] toggle failed", err);
+    }
+  }, [trackingActive]);
   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 +211916,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, {}) }
   ];
@@ -211783,17 +211977,33 @@ function App() {
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "titlebar-title", children: "ctlsurf-worker" }),
       /* @__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(
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
-            className: `titlebar-agent-btn ${selectedAgent?.id === a.id ? "active" : ""}`,
-            onClick: () => handleAgentChange(a.id),
-            title: a.description,
-            children: a.name
-          },
-          a.id
-        )),
+            className: `titlebar-btn titlebar-icon-btn ${trackingActive ? "active" : ""}`,
+            onClick: handleToggleTracking,
+            title: trackingActive ? "Time tracking on — click to stop" : "Time tracking off — click to start",
+            "aria-label": "Time tracking",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "tracking-icon", children: "⏱" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `tracking-dot ${trackingActive ? "on" : "off"}` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "titlebar-separator" }),
+        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 +212033,7 @@ function App() {
       {
         agents,
         cwd: cwd2 || "",
-        onSelect: (agent) => {
-          setSelectedAgent(agent);
-          setShowAgentPicker(false);
-        },
+        onSelect: handlePickerSelect,
         onChangeCwd: async () => {
           const newCwd = await window.worker.browseCwd();
           if (newCwd) {