@quanta-intellect/vessel-browser 0.1.29 → 0.1.31

package/README.md

@@ -162,8 +162,10 @@ The installer:
 - creates a `vessel-browser-status` helper in `~/.local/bin`
 - creates a desktop entry for Linux app launchers
 - writes `~/.config/vessel/vessel-settings.json` with MCP port `3100`
+- writes `~/.config/vessel/mcp-stdio-snippet.json`
 - writes `~/.config/vessel/mcp-http-snippet.json`
-- prints the exact HTTP MCP snippet to paste into your harness config
+- installs a `vessel-browser-mcp` helper that can run as a stdio-to-HTTP proxy (`--stdio`) or print config snippets
+- prints the exact recommended stdio MCP snippet to paste into your harness config
 
 The packaged AppImage path:
 
@@ -204,7 +206,7 @@ Notes:
 
 - `npm run dev` still launches the stock Electron binary, so Linux may continue showing the default Electron gear icon in development
 - packaged builds created with `npm run dist` / `npm run dist:dir` use the Vessel app icon
-- the tracked smoke test runs typecheck, build, and the Electron navigation regression harness
+- the tracked smoke test runs typecheck, build, the MCP stdio proxy regression check, and the Electron navigation regression harness
 - for headless CI, run the smoke test under `xvfb-run -a npm run smoke:test`
 
 ### Setting up Vessel for Hermes Agent or OpenClaw
@@ -214,7 +216,7 @@ Vessel is designed to act as the browser runtime that your external agent harnes
 1. Launch Vessel
 2. Open Settings (`Ctrl+,`) to confirm MCP status, copy the endpoint, or change the MCP port
 3. Optional: set an Obsidian vault path or session preferences
-4. Start Hermes Agent or OpenClaw and configure it to connect to Vessel's MCP endpoint at `http://127.0.0.1:<mcpPort>/mcp`
+4. Start Hermes Agent or OpenClaw and point it at Vessel — the easiest way is `vessel-browser-mcp --stdio` as the MCP command (auth is resolved automatically), or connect directly to `http://127.0.0.1:<mcpPort>/mcp` with the bearer token from `~/.config/vessel/mcp-auth.json`
 5. Use the Supervisor panel in Vessel's sidebar to pause the agent, change approval mode, review pending approvals, checkpoint, or restore the browser session while the harness runs
 6. Use the Bookmarks panel to organize saved pages into folders and expose those bookmarks back to the agent over MCP
 
@@ -316,7 +318,23 @@ The extraction output can distinguish:
 - active blocking overlays
 - dormant consent/modal UI present in the DOM but not active for the current session or region
 
-Generic HTTP MCP config:
+Stdio proxy MCP config (recommended — resolves auth automatically):
+
+```json
+{
+  "mcpServers": {
+    "vessel": {
+      "command": "vessel-browser-mcp",
+      "args": ["--stdio"]
+    }
+  }
+}
+```
+
+The stdio proxy reads the bearer token from `~/.config/vessel/mcp-auth.json` at connection time, so no manual token management is needed.
+Vessel must already be running when your MCP client connects, and `~/.config/vessel/mcp-auth.json` must exist from install or first launch.
+
+Generic HTTP MCP config (requires copying the token manually):
 
 ```json
 {
@@ -346,8 +364,9 @@ mcp_servers:
 
 ## Configuration 
 
-The installer writes both snippets to:
+The installer writes three snippets to:
 
+- `~/.config/vessel/mcp-stdio-snippet.json`
 - `~/.config/vessel/mcp-http-snippet.json`
 - `~/.config/vessel/mcp-hermes-snippet.yaml`
 
@@ -360,9 +379,15 @@ vessel-browser-mcp
 Helper examples:
 
 ```bash
-# Generic JSON snippet with Authorization header
+# Run as stdio-to-HTTP proxy (for MCP client integration)
+vessel-browser-mcp --stdio
+
+# Recommended stdio MCP snippet
 vessel-browser-mcp
 
+# Generic JSON snippet with Authorization header
+vessel-browser-mcp --format json
+
 # Hermes-ready YAML snippet with Authorization header
 vessel-browser-mcp --format hermes
 

package/out/main/index.js

@@ -5177,9 +5177,6 @@ class AnthropicProvider {
       let iterationsUsed = 0;
       for (let i = 0; i < maxIterations; i++) {
         iterationsUsed = i + 1;
-        const msgTokenEstimate = JSON.stringify(messages).length;
-        const sysTokenEstimate = systemPrompt.length;
-        const streamStartTime = Date.now();
         const stream = this.client.messages.stream(
           {
             model: this.model,
@@ -5496,8 +5493,6 @@ class OpenAICompatProvider {
       let iterationsUsed = 0;
       for (let i = 0; i < maxIterations; i++) {
         iterationsUsed = i + 1;
-        const msgTokenEstimate = JSON.stringify(messages).length;
-        const streamStartTime = Date.now();
         let textAccum = "";
         const toolCallAccums = {};
         let finishReason = null;
@@ -12135,7 +12130,7 @@ async function executeAction(name, args, ctx) {
         }
         case "click": {
           if (!wc) return "Error: No active tab";
-          const selector = await resolveSelector$1(wc, args.index, args.selector);
+          const selector = typeof args.selector === "string" && args.selector.trim() ? await resolveSelector$1(wc, void 0, args.selector) : typeof args.index === "number" ? `__vessel_idx:${args.index}` : await resolveSelector$1(wc, args.index, args.selector);
           if (!selector) return "Error: No element index or selector provided";
           return clickResolvedSelector$1(wc, selector);
         }
@@ -15966,7 +15961,7 @@ ${buildScopedContext(pageContent, mode)}`;
         { index, selector },
         async () => {
           const wc = tab.view.webContents;
-          const resolvedSelector = await resolveSelector(wc, index, selector);
+          const resolvedSelector = typeof selector === "string" && selector.trim() ? await resolveSelector(wc, void 0, selector) : typeof index === "number" ? `__vessel_idx:${index}` : await resolveSelector(wc, index, selector);
           if (!resolvedSelector) {
             return "Error: No index or selector provided";
           }

package/out/preload/content-script.js

@@ -3195,6 +3195,25 @@ function interactByIndex(index, action, value) {
   if (action === "click") {
     el.focus();
     el.click();
+    if (el instanceof HTMLInputElement) {
+      if (el.type === "checkbox") {
+        const label = getInputLabel(el) || el.getAttribute("aria-label") || el.name || "checkbox";
+        return `${el.checked ? "Checked" : "Unchecked"}: ${label}`;
+      }
+      if (el.type === "radio") {
+        const label = getTrimmedText(el.value) || getInputLabel(el) || el.getAttribute("aria-label") || el.name || "radio";
+        return `${el.checked ? "Selected" : "Clicked"}: ${label}`;
+      }
+    }
+    const role = el.getAttribute("role");
+    if (role === "checkbox" || role === "radio") {
+      const label = getTrimmedText(el.getAttribute("aria-label")) || getTrimmedText(el.textContent) || el.tagName.toLowerCase();
+      const ariaChecked = el.getAttribute("aria-checked");
+      if (role === "checkbox") {
+        return `${ariaChecked === "true" ? "Checked" : "Unchecked"}: ${label}`;
+      }
+      return `${ariaChecked === "true" ? "Selected" : "Clicked"}: ${label}`;
+    }
     return "Clicked: " + (el.getAttribute("aria-label") || el.textContent?.trim().slice(0, 60) || el.tagName.toLowerCase());
   }
   if (action === "focus") {

package/out/renderer/assets/{index-BnUB1gZc.js → index-DVD9XuhC.js}

@@ -1696,6 +1696,7 @@ function getAgentPresence(state, currentTime = Date.now()) {
   return "idle";
 }
 var _tmpl$$d = /* @__PURE__ */ template(`<img class=tab-favicon alt>`), _tmpl$2$b = /* @__PURE__ */ template(`<span class=tab-favicon-fallback>`), _tmpl$3$8 = /* @__PURE__ */ template(`<div class=tab-bar><div class=tab-list><button class=tab-new data-tooltip="New Tab">+`), _tmpl$4$8 = /* @__PURE__ */ template(`<div role=tab><span class=tab-title></span><button class=tab-close>×`), _tmpl$5$6 = /* @__PURE__ */ template(`<span class=tab-agent-indicator aria-hidden=true title="Agent active on this tab">`), _tmpl$6$6 = /* @__PURE__ */ template(`<span class=tab-loading>`);
+const TAB_CLOSE_MS = 200;
 function stringToHue(str) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -1747,7 +1748,19 @@ const TabBar = () => {
     runtimeState: runtimeState2
   } = useRuntime();
   const now2 = useNow();
+  const [closingTabIds, setClosingTabIds] = createSignal(/* @__PURE__ */ new Set());
   const modelActiveTabIds = createMemo(() => getAgentActiveTabIds(runtimeState2(), now2()));
+  const handleClose = (id) => {
+    setClosingTabIds((prev) => new Set(prev).add(id));
+    setTimeout(() => {
+      closeTab(id);
+      setClosingTabIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, TAB_CLOSE_MS);
+  };
   return (() => {
     var _el$3 = _tmpl$3$8(), _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
     insert(_el$4, createComponent(For, {
@@ -1757,7 +1770,7 @@ const TabBar = () => {
       children: (tab) => (() => {
         var _el$6 = _tmpl$4$8(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
         _el$6.addEventListener("auxclick", (e) => {
-          if (e.button === 1) closeTab(tab.id);
+          if (e.button === 1) handleClose(tab.id);
         });
         _el$6.$$click = () => switchTab(tab.id);
         insert(_el$6, createComponent(TabFavicon, {
@@ -1782,16 +1795,18 @@ const TabBar = () => {
         })(), _el$8);
         _el$8.$$click = (e) => {
           e.stopPropagation();
-          closeTab(tab.id);
+          handleClose(tab.id);
         };
         createRenderEffect((_p$) => {
-          var _v$ = `tab-item ${tab.id === activeTabId2() ? "active" : ""} ${modelActiveTabIds().has(tab.id) ? "model-active" : ""}`, _v$2 = modelActiveTabIds().has(tab.id) ? `${tab.title || "New Tab"} • Agent active` : tab.title;
+          var _v$ = `tab-item ${tab.id === activeTabId2() ? "active" : ""} ${modelActiveTabIds().has(tab.id) ? "model-active" : ""}`, _v$2 = !!closingTabIds().has(tab.id), _v$3 = modelActiveTabIds().has(tab.id) ? `${tab.title || "New Tab"} • Agent active` : tab.title;
           _v$ !== _p$.e && className(_el$6, _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$6, "title", _p$.t = _v$2);
+          _v$2 !== _p$.t && _el$6.classList.toggle("closing", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$6, "title", _p$.a = _v$3);
           return _p$;
         }, {
           e: void 0,
-          t: void 0
+          t: void 0,
+          a: void 0
         });
         return _el$6;
       })()
@@ -2122,6 +2137,15 @@ function useScrollFade(el) {
     observer.disconnect();
   });
 }
+function formatTime(iso, options) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleTimeString([], {
+    hour: options?.includeSeconds ? "2-digit" : "numeric",
+    minute: "2-digit",
+    ...options?.includeSeconds && { second: "2-digit" }
+  });
+}
 var _tmpl$$9 = /* @__PURE__ */ template(`<span class=agent-transcript-live><span class=agent-transcript-live-dot aria-hidden=true></span>Live`), _tmpl$2$8 = /* @__PURE__ */ template(`<div class=agent-transcript-list>`), _tmpl$3$7 = /* @__PURE__ */ template(`<aside class=agent-transcript-dock><div class=agent-transcript-header><div class=agent-transcript-title-row><span class=agent-transcript-title>Agent Transcript</span></div><div class=agent-transcript-actions><button class=agent-transcript-icon></button><button class=agent-transcript-icon data-tooltip=Hide>×`), _tmpl$4$7 = /* @__PURE__ */ template(`<article><div class=agent-transcript-meta><span class=agent-transcript-badge></span><span class=agent-transcript-time></span></div><div class=agent-transcript-text>`);
 const AgentTranscriptDock = () => {
   const {
@@ -2140,14 +2164,6 @@ const AgentTranscriptDock = () => {
   });
   const visibleEntries = createMemo(() => runtimeState2().transcript.slice(-6).reverse());
   const hasStreamingEntry = createMemo(() => visibleEntries().some((entry) => entry.status === "streaming"));
-  const formatTime2 = (value) => {
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return "";
-    return date.toLocaleTimeString([], {
-      hour: "numeric",
-      minute: "2-digit"
-    });
-  };
   const hideDock = async () => {
     setMode("off");
     await window.vessel.settings.set("agentTranscriptMode", "off");
@@ -2185,7 +2201,7 @@ const AgentTranscriptDock = () => {
             children: (entry) => (() => {
               var _el$0 = _tmpl$4$7(), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$1.nextSibling;
               insert(_el$10, () => entry.title || entry.kind);
-              insert(_el$11, () => formatTime2(entry.updatedAt));
+              insert(_el$11, () => formatTime(entry.updatedAt));
               insert(_el$12, () => entry.text);
               createRenderEffect((_p$) => {
                 var _v$3 = `agent-transcript-entry ${entry.kind}`, _v$4 = !!(entry.status === "streaming");
@@ -2459,7 +2475,35 @@ function useAI() {
     }
   };
 }
+function useAnimatedPresence(isOpen, exitDurationMs) {
+  const [visible, setVisible] = createSignal(false);
+  const [closing, setClosing] = createSignal(false);
+  let exitTimer;
+  createEffect(() => {
+    const open = isOpen();
+    if (open) {
+      if (exitTimer) {
+        clearTimeout(exitTimer);
+        exitTimer = void 0;
+      }
+      setClosing(false);
+      setVisible(true);
+    } else if (visible()) {
+      setClosing(true);
+      exitTimer = window.setTimeout(() => {
+        setVisible(false);
+        setClosing(false);
+        exitTimer = void 0;
+      }, exitDurationMs);
+    }
+  });
+  onCleanup(() => {
+    if (exitTimer) clearTimeout(exitTimer);
+  });
+  return { visible, closing };
+}
 var _tmpl$$8 = /* @__PURE__ */ template(`<div class=command-bar-no-provider><p>Configure a chat provider to start using the AI assistant.</p><button class=command-bar-no-provider-btn>Open Settings <kbd>Ctrl+,`), _tmpl$2$7 = /* @__PURE__ */ template(`<div class=command-bar-recent><span class=command-bar-recent-label>Recent</span><div class=command-bar-recent-list>`), _tmpl$3$6 = /* @__PURE__ */ template(`<span>Try "summarize" or ask a question`), _tmpl$4$6 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div class=command-bar><form><div class=command-bar-icon><svg width=16 height=16 viewBox="0 0 16 16"><circle cx=8 cy=8 r=6 fill=none stroke=var(--accent-primary) stroke-width=1.5></circle><circle cx=6 cy=7 r=0.8 fill=var(--accent-primary)></circle><circle cx=10 cy=7 r=0.8 fill=var(--accent-primary)></circle><path d="M6 10c0.5 0.8 3.5 0.8 4 0"fill=none stroke=var(--accent-primary) stroke-width=0.8 stroke-linecap=round></path></svg></div><input class=command-bar-input type=text></form><div class=command-bar-hints><span><kbd>Enter</kbd> to ask</span><span><kbd>Esc</kbd> to close`), _tmpl$5$5 = /* @__PURE__ */ template(`<button class=command-bar-recent-item type=button>`), _tmpl$6$5 = /* @__PURE__ */ template(`<span>Set up a provider in Settings first`);
+const COMMAND_BAR_EXIT_MS = 200;
 const CommandBar = () => {
   const {
     commandBarOpen: commandBarOpen2,
@@ -2467,6 +2511,10 @@ const CommandBar = () => {
     toggleSidebar,
     openSettings
   } = useUI();
+  const {
+    visible,
+    closing
+  } = useAnimatedPresence(commandBarOpen2, COMMAND_BAR_EXIT_MS);
   const {
     query,
     recentQueries: recentQueries2,
@@ -2505,7 +2553,7 @@ const CommandBar = () => {
   };
   return createComponent(Show, {
     get when() {
-      return commandBarOpen2();
+      return visible();
     },
     get children() {
       var _el$ = _tmpl$4$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$10 = _el$3.nextSibling, _el$11 = _el$10.firstChild;
@@ -2562,13 +2610,15 @@ const CommandBar = () => {
         }
       }), null);
       createRenderEffect((_p$) => {
-        var _v$ = hasProvider() ? "Ask about this page, summarize, or search..." : "No chat provider configured", _v$2 = !hasProvider();
-        _v$ !== _p$.e && setAttribute(_el$5, "placeholder", _p$.e = _v$);
-        _v$2 !== _p$.t && (_el$5.disabled = _p$.t = _v$2);
+        var _v$ = !!closing(), _v$2 = hasProvider() ? "Ask about this page, summarize, or search..." : "No chat provider configured", _v$3 = !hasProvider();
+        _v$ !== _p$.e && _el$.classList.toggle("closing", _p$.e = _v$);
+        _v$2 !== _p$.t && setAttribute(_el$5, "placeholder", _p$.t = _v$2);
+        _v$3 !== _p$.a && (_el$5.disabled = _p$.a = _v$3);
         return _p$;
       }, {
         e: void 0,
-        t: void 0
+        t: void 0,
+        a: void 0
       });
       createRenderEffect(() => _el$5.value = input());
       return _el$;
@@ -4034,6 +4084,9 @@ ${token}
     ALLOWED_ATTR: ["href", "target", "rel", "data-language", "style", "class"]
   });
 }
+function isPremiumStatus(status) {
+  return status === "active" || status === "trialing";
+}
 const WORD_NORMALIZATIONS = [
   [/\bminutes?\b/g, "min"],
   [/\bmins?\b/g, "min"],
@@ -4643,10 +4696,7 @@ const AutomationTab = (props) => {
   const [premiumData] = createResource(() => window.vessel.premium.getState().catch(() => ({
     status: "free"
   })));
-  const isPremium = () => {
-    const s = premiumData()?.status;
-    return s === "active" || s === "trialing";
-  };
+  const isPremium = () => isPremiumStatus(premiumData()?.status);
   const [installedKits, {
     refetch: refetchInstalled
   }] = createResource(() => isPremium(), (active) => active ? window.vessel.automation.getInstalled().catch(() => []) : Promise.resolve([]));
@@ -5456,10 +5506,7 @@ const Sidebar = (props) => {
     expiresAt: ""
   });
   const trackedPremiumContexts = /* @__PURE__ */ new Set();
-  const isPremium = () => {
-    const status = premiumState().status;
-    return status === "active" || status === "trialing";
-  };
+  const isPremium = () => isPremiumStatus(premiumState().status);
   const trackPremiumContext = (step) => {
     if (trackedPremiumContexts.has(step)) return;
     trackedPremiumContexts.add(step);
@@ -6549,18 +6596,6 @@ ${contextBlock}` : contextBlock);
 };
 delegateEvents(["click", "pointerdown", "input", "keydown"]);
 var _tmpl$$3 = /* @__PURE__ */ template(`<div class=devtools-console>`), _tmpl$2$3 = /* @__PURE__ */ template(`<div class=devtools-empty>Waiting for console output... Console monitoring activates when an agent uses devtools.`), _tmpl$3$2 = /* @__PURE__ */ template(`<div><span></span><span class=console-time></span><span class=console-text></span><span class=console-source>`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class=devtools-network><div class=network-header><span>Method</span><span>URL</span><span>Status</span><span>Type</span><span>Time`), _tmpl$5$2 = /* @__PURE__ */ template(`<div class=devtools-empty>Waiting for network requests... Network monitoring activates when an agent uses devtools.`), _tmpl$6$2 = /* @__PURE__ */ template(`<div><span class=network-method></span><span class=network-url></span><span></span><span class=network-type></span><span class=network-duration>`), _tmpl$7$1 = /* @__PURE__ */ template(`<div class=devtools-activity>`), _tmpl$8$1 = /* @__PURE__ */ template(`<div class=devtools-empty>Waiting for agent devtools activity...`), _tmpl$9$1 = /* @__PURE__ */ template(`<div class=activity-entry><span class=activity-time></span><span class=activity-tool></span><span class=activity-args></span><span></span><span class=activity-duration>`), _tmpl$0$1 = /* @__PURE__ */ template(`<span class="devtools-tab-badge error">`), _tmpl$1$1 = /* @__PURE__ */ template(`<span class="devtools-tab-badge count">`), _tmpl$10$1 = /* @__PURE__ */ template(`<div class=export-date-inputs><div class=export-date-row><span class=export-date-label>From</span><input class=export-date-input type=date></div><div class=export-date-row><span class=export-date-label>To</span><input class=export-date-input type=date>`), _tmpl$11$1 = /* @__PURE__ */ template(`<div class=devtools-export-dropdown><div class=export-section><div class=export-section-label>Log Types</div><label class=export-checkbox><input type=checkbox>Console</label><label class=export-checkbox><input type=checkbox>Network</label><label class=export-checkbox><input type=checkbox>Activity</label></div><div class=export-section><div class=export-section-label>Date Range</div><div class=export-date-btns><button>Today</button><button>Custom</button></div></div><button class=export-submit>Export JSON`), _tmpl$12$1 = /* @__PURE__ */ template(`<div class=devtools-panel><div class=devtools-tabs><button>Console</button><button>Network</button><button>Activity</button><div class=devtools-tab-spacer></div><div class=devtools-export-wrap><button title="Export Logs"><svg width=13 height=13 viewBox="0 0 13 13"fill=none style=vertical-align:middle><path d="M6.5 1v7M3.5 5l3 3 3-3"stroke=currentColor stroke-width=1.3 stroke-linecap=round stroke-linejoin=round></path><path d="M1 9.5v1A1.5 1.5 0 0 0 2.5 12h8A1.5 1.5 0 0 0 12 10.5v-1"stroke=currentColor stroke-width=1.3 stroke-linecap=round></path></svg></button></div><button class=devtools-close-btn title="Close DevTools">×</button></div><div class=devtools-content>`);
-function formatTime(iso) {
-  try {
-    const d = new Date(iso);
-    return d.toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit"
-    });
-  } catch {
-    return "";
-  }
-}
 function statusClass(status) {
   if (status == null) return "pending";
   if (status >= 200 && status < 300) return "ok";
@@ -6635,7 +6670,9 @@ const ConsoleView = (props) => {
         children: (entry) => (() => {
           var _el$3 = _tmpl$3$2(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling;
           insert(_el$4, () => entry.level);
-          insert(_el$5, () => formatTime(entry.timestamp));
+          insert(_el$5, () => formatTime(entry.timestamp, {
+            includeSeconds: true
+          }));
           insert(_el$6, () => entry.text);
           insert(_el$7, () => shortenSource(entry.url, entry.line));
           createRenderEffect((_p$) => {
@@ -6734,7 +6771,9 @@ const ActivityView = (props) => {
         },
         children: (entry) => (() => {
           var _el$17 = _tmpl$9$1(), _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling;
-          insert(_el$18, () => formatTime(entry.timestamp));
+          insert(_el$18, () => formatTime(entry.timestamp, {
+            includeSeconds: true
+          }));
           insert(_el$19, () => entry.tool.replace("devtools_", ""));
           insert(_el$20, () => entry.args);
           insert(_el$21, (() => {
@@ -6994,6 +7033,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
             inset 0 1px 0 rgba(255, 255, 255, 0.04);
           animation: command-bar-enter 350ms var(--ease-out-expo) both;
         }
+        .command-bar-overlay.closing .settings-panel {
+          animation: command-bar-exit 200ms var(--ease-in-out) both;
+        }
         .settings-title {
           font-size: 16px;
           font-weight: 600;
@@ -7580,6 +7622,10 @@ const Settings = () => {
     settingsOpen: settingsOpen2,
     closeSettings
   } = useUI();
+  const {
+    visible: settingsVisible,
+    closing: settingsClosing
+  } = useAnimatedPresence(settingsOpen2, 200);
   const [autoRestoreSession, setAutoRestoreSession] = createSignal(true);
   const [clearBookmarksOnLaunch, setClearBookmarksOnLaunch] = createSignal(false);
   const [obsidianVaultPath, setObsidianVaultPath] = createSignal("");
@@ -7841,7 +7887,7 @@ const Settings = () => {
   };
   return createComponent(Show, {
     get when() {
-      return settingsOpen2();
+      return settingsVisible();
     },
     get children() {
       return [(() => {
@@ -7962,9 +8008,9 @@ const Settings = () => {
                     })()
                   }), null);
                   createRenderEffect((_p$) => {
-                    var _v$9 = !!(issue.severity === "warning"), _v$0 = !!(issue.severity === "error");
-                    _v$9 !== _p$.e && _el$110.classList.toggle("warning", _p$.e = _v$9);
-                    _v$0 !== _p$.t && _el$110.classList.toggle("error", _p$.t = _v$0);
+                    var _v$0 = !!(issue.severity === "warning"), _v$1 = !!(issue.severity === "error");
+                    _v$0 !== _p$.e && _el$110.classList.toggle("warning", _p$.e = _v$0);
+                    _v$1 !== _p$.t && _el$110.classList.toggle("error", _p$.t = _v$1);
                     return _p$;
                   }, {
                     e: void 0,
@@ -8148,9 +8194,9 @@ const Settings = () => {
                   var _el$124 = _tmpl$29();
                   insert(_el$124, () => msg().text);
                   createRenderEffect((_p$) => {
-                    var _v$1 = !!(msg().kind === "success"), _v$10 = !!(msg().kind === "error");
-                    _v$1 !== _p$.e && _el$124.classList.toggle("success", _p$.e = _v$1);
-                    _v$10 !== _p$.t && _el$124.classList.toggle("error", _p$.t = _v$10);
+                    var _v$10 = !!(msg().kind === "success"), _v$11 = !!(msg().kind === "error");
+                    _v$10 !== _p$.e && _el$124.classList.toggle("success", _p$.e = _v$10);
+                    _v$11 !== _p$.t && _el$124.classList.toggle("error", _p$.t = _v$11);
                     return _p$;
                   }, {
                     e: void 0,
@@ -8312,9 +8358,9 @@ const Settings = () => {
                 var _el$132 = _tmpl$29();
                 insert(_el$132, () => msg().text);
                 createRenderEffect((_p$) => {
-                  var _v$11 = !!(msg().kind === "success"), _v$12 = !!(msg().kind === "error");
-                  _v$11 !== _p$.e && _el$132.classList.toggle("success", _p$.e = _v$11);
-                  _v$12 !== _p$.t && _el$132.classList.toggle("error", _p$.t = _v$12);
+                  var _v$12 = !!(msg().kind === "success"), _v$13 = !!(msg().kind === "error");
+                  _v$12 !== _p$.e && _el$132.classList.toggle("success", _p$.e = _v$12);
+                  _v$13 !== _p$.t && _el$132.classList.toggle("error", _p$.t = _v$13);
                   return _p$;
                 }, {
                   e: void 0,
@@ -8336,9 +8382,9 @@ const Settings = () => {
             var _el$133 = _tmpl$29();
             insert(_el$133, () => currentStatus().text);
             createRenderEffect((_p$) => {
-              var _v$13 = !!(currentStatus().kind === "success"), _v$14 = !!(currentStatus().kind === "error");
-              _v$13 !== _p$.e && _el$133.classList.toggle("success", _p$.e = _v$13);
-              _v$14 !== _p$.t && _el$133.classList.toggle("error", _p$.t = _v$14);
+              var _v$14 = !!(currentStatus().kind === "success"), _v$15 = !!(currentStatus().kind === "error");
+              _v$14 !== _p$.e && _el$133.classList.toggle("success", _p$.e = _v$14);
+              _v$15 !== _p$.t && _el$133.classList.toggle("error", _p$.t = _v$15);
               return _p$;
             }, {
               e: void 0,
@@ -8348,15 +8394,16 @@ const Settings = () => {
           })()
         }), null);
         createRenderEffect((_p$) => {
-          var _v$ = !!autoRestoreSession(), _v$2 = autoRestoreSession(), _v$3 = !!clearBookmarksOnLaunch(), _v$4 = clearBookmarksOnLaunch(), _v$5 = !!chatEnabled(), _v$6 = chatEnabled(), _v$7 = !!telemetryEnabled(), _v$8 = telemetryEnabled();
-          _v$ !== _p$.e && _el$36.classList.toggle("on", _p$.e = _v$);
-          _v$2 !== _p$.t && setAttribute(_el$36, "aria-checked", _p$.t = _v$2);
-          _v$3 !== _p$.a && _el$39.classList.toggle("on", _p$.a = _v$3);
-          _v$4 !== _p$.o && setAttribute(_el$39, "aria-checked", _p$.o = _v$4);
-          _v$5 !== _p$.i && _el$43.classList.toggle("on", _p$.i = _v$5);
-          _v$6 !== _p$.n && setAttribute(_el$43, "aria-checked", _p$.n = _v$6);
-          _v$7 !== _p$.s && _el$93.classList.toggle("on", _p$.s = _v$7);
-          _v$8 !== _p$.h && setAttribute(_el$93, "aria-checked", _p$.h = _v$8);
+          var _v$ = !!settingsClosing(), _v$2 = !!autoRestoreSession(), _v$3 = autoRestoreSession(), _v$4 = !!clearBookmarksOnLaunch(), _v$5 = clearBookmarksOnLaunch(), _v$6 = !!chatEnabled(), _v$7 = chatEnabled(), _v$8 = !!telemetryEnabled(), _v$9 = telemetryEnabled();
+          _v$ !== _p$.e && _el$.classList.toggle("closing", _p$.e = _v$);
+          _v$2 !== _p$.t && _el$36.classList.toggle("on", _p$.t = _v$2);
+          _v$3 !== _p$.a && setAttribute(_el$36, "aria-checked", _p$.a = _v$3);
+          _v$4 !== _p$.o && _el$39.classList.toggle("on", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$39, "aria-checked", _p$.i = _v$5);
+          _v$6 !== _p$.n && _el$43.classList.toggle("on", _p$.n = _v$6);
+          _v$7 !== _p$.s && setAttribute(_el$43, "aria-checked", _p$.s = _v$7);
+          _v$8 !== _p$.h && _el$93.classList.toggle("on", _p$.h = _v$8);
+          _v$9 !== _p$.r && setAttribute(_el$93, "aria-checked", _p$.r = _v$9);
           return _p$;
         }, {
           e: void 0,
@@ -8366,7 +8413,8 @@ const Settings = () => {
           i: void 0,
           n: void 0,
           s: void 0,
-          h: void 0
+          h: void 0,
+          r: void 0
         });
         createRenderEffect(() => _el$20.value = defaultUrl());
         createRenderEffect(() => _el$23.value = mcpPort());
@@ -8391,6 +8439,9 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
             inset 0 1px 0 rgba(255, 255, 255, 0.04);
           animation: command-bar-enter 350ms var(--ease-out-expo) both;
         }
+        .command-bar-overlay.closing .keyboard-help {
+          animation: command-bar-exit 200ms var(--ease-in-out) both;
+        }
         .keyboard-help-header {
           display: flex;
           justify-content: space-between;
@@ -8487,9 +8538,13 @@ const SHORTCUTS = [{
   action: "This help overlay"
 }];
 const KeyboardHelp = (props) => {
+  const {
+    visible,
+    closing
+  } = useAnimatedPresence(() => props.open, 200);
   return createComponent(Show, {
     get when() {
-      return props.open;
+      return visible();
     },
     get children() {
       return [(() => {
@@ -8510,6 +8565,7 @@ const KeyboardHelp = (props) => {
           insert(_el$9, () => s.action);
           return _el$9;
         })()]));
+        createRenderEffect(() => _el$.classList.toggle("closing", !!closing()));
         return _el$;
       })(), _tmpl$2$1()];
     }
@@ -8589,28 +8645,7 @@ const App = () => {
   } = useTabs();
   const [highlightToast, setHighlightToast] = createSignal(null);
   const [keyboardHelpOpen, setKeyboardHelpOpen] = createSignal(false);
-  const captureHighlight = async () => {
-    try {
-      const result = await window.vessel.highlights.capture();
-      if (result.success && result.text) {
-        const preview = result.text.length > 60 ? result.text.slice(0, 57) + "..." : result.text;
-        setHighlightToast({
-          title: "Highlight saved",
-          message: preview
-        });
-      } else {
-        setHighlightToast({
-          title: "No selection",
-          message: result.message || "Select text on the page first, then press Ctrl+H"
-        });
-      }
-    } catch {
-      setHighlightToast({
-        title: "Highlight failed",
-        message: "Could not capture selection"
-      });
-    }
-  };
+  const loadingPresence = useAnimatedPresence(() => !!activeTab()?.isLoading, 300);
   const showHighlightResult = (result) => {
     if (result.success && result.text) {
       const preview = result.text.length > 60 ? result.text.slice(0, 57) + "..." : result.text;
@@ -8625,6 +8660,17 @@ const App = () => {
       });
     }
   };
+  const captureHighlight = async () => {
+    try {
+      const result = await window.vessel.highlights.capture();
+      showHighlightResult(result);
+    } catch {
+      setHighlightToast({
+        title: "Highlight failed",
+        message: "Could not capture selection"
+      });
+    }
+  };
   onMount(() => {
     if (view !== "chrome") return;
     const cleanupKeys = setupKeybindings({
@@ -8672,10 +8718,12 @@ const App = () => {
     insert(_el$2, createComponent(AddressBar, {}), null);
     insert(_el$2, createComponent(Show, {
       get when() {
-        return activeTab()?.isLoading;
+        return loadingPresence.visible();
       },
       get children() {
-        return _tmpl$();
+        var _el$3 = _tmpl$();
+        createRenderEffect(() => _el$3.classList.toggle("closing", !!loadingPresence.closing()));
+        return _el$3;
       }
     }), null);
     insert(_el$, createComponent(CommandBar, {}), null);

package/out/renderer/assets/{index-Ct7z7yP_.css → index-eS3ccAls.css}

@@ -177,6 +177,24 @@
     }
 }
 
+.tab-item.closing {
+    animation: tab-close 200ms var(--ease-in-out) both;
+    pointer-events: none;
+}
+
+@keyframes tab-close {
+    from {
+        max-width: 200px;
+        padding: 0 12px;
+        opacity: 1;
+    }
+    to {
+        max-width: 0;
+        padding: 0;
+        opacity: 0;
+    }
+}
+
 .tab-item:hover {
     background: rgba(255, 255, 255, 0.04);
     color: var(--text-secondary);
@@ -585,17 +603,6 @@
     animation: badge-enter var(--duration-enter) var(--ease-out-back) both;
 }
 
-@keyframes badge-enter {
-    from {
-        opacity: 0;
-        transform: scale(0);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
 
 /* ═══════════════════════════════════════
    Bookmark toast notifications — animated
@@ -941,6 +948,30 @@
     }
 }
 
+@keyframes command-bar-exit {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-12px) scale(0.97);
+    }
+}
+
+@keyframes overlay-fade-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.command-bar-overlay.closing {
+    animation: overlay-fade-out 200ms var(--ease-in-out) both;
+}
+
+.command-bar-overlay.closing .command-bar {
+    animation: command-bar-exit 200ms var(--ease-in-out) both;
+}
+
 .command-bar form {
     display: flex;
     align-items: center;
@@ -1307,17 +1338,6 @@
     animation: badge-enter var(--duration-enter) var(--ease-out-back) both;
 }
 
-@keyframes badge-enter {
-    from {
-        opacity: 0;
-        transform: scale(0);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
 .sidebar-messages {
     flex: 1;
     overflow-y: auto;
@@ -4543,6 +4563,11 @@ button:active:not(:disabled) {
         loading-bar-enter var(--duration-normal) var(--ease-out-expo) both,
         loading-bar-shimmer 1.6s ease-in-out infinite;
     z-index: 10;
+    transition: opacity 300ms var(--ease-in-out);
+}
+
+.loading-bar.closing {
+    opacity: 0;
 }
 
 @keyframes loading-bar-enter {
@@ -4677,3 +4702,14 @@ button:active:not(:disabled) {
 [data-tooltip-pos="left"]:hover::after {
     transform: translateY(-50%) translateX(0);
 }
+
+@keyframes badge-enter {
+    from {
+        opacity: 0;
+        transform: scale(0);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

package/out/renderer/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:;" />
     <title>Vessel</title>
-    <script type="module" crossorigin src="./assets/index-BnUB1gZc.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Ct7z7yP_.css">
+    <script type="module" crossorigin src="./assets/index-DVD9XuhC.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-eS3ccAls.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quanta-intellect/vessel-browser",
   "mcpName": "io.github.unmodeled-tyler/vessel-browser",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "AI-native web browser for Linux — persistent browser runtime for autonomous agents with human supervision",
   "main": "./out/main/index.js",
   "bin": {
@@ -16,7 +16,7 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "electron-vite dev",
+    "dev": "ELECTRON_DISABLE_SANDBOX=1 electron-vite dev",
     "build": "electron-vite build",
     "dist": "npm run build && electron-builder --linux --publish never",
     "dist:dir": "npm run build && electron-builder --linux dir --publish never",
@@ -24,6 +24,7 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build",
     "test:navigation-regression": "env -u ELECTRON_RUN_AS_NODE ELECTRON_DISABLE_SANDBOX=1 electron --no-sandbox --disable-setuid-sandbox scripts/run-navigation-regression.mjs",
+    "test:mcp-proxy": "node scripts/test-mcp-stdio-proxy.mjs",
     "smoke:test": "node scripts/smoke-test.mjs",
     "test:coverage": "c8 --reporter=text --reporter=html tsx --test tests/*.test.ts"
   },