@quanta-intellect/vessel-browser 0.1.61 → 0.1.63

package/out/renderer/assets/{index-Di64dPm5.js → index-B2vPgkX2.js}

@@ -1871,6 +1871,9 @@ const [settingsOpen, setSettingsOpen] = createSignal(false);
 const [devtoolsPanelOpen, setDevtoolsPanelOpen] = createSignal(false);
 let lastIpcTime = 0;
 const IPC_THROTTLE_MS = 8;
+function clampSidebarWidth(width) {
+  return Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, Math.round(width)));
+}
 function useUI() {
   return {
     sidebarOpen,
@@ -1885,10 +1888,7 @@ function useUI() {
       setSidebarWidth(result.width);
     },
     resizeSidebar: (width) => {
-      const clamped = Math.max(
-        MIN_SIDEBAR,
-        Math.min(MAX_SIDEBAR, Math.round(width))
-      );
+      const clamped = clampSidebarWidth(width);
       setSidebarWidth(clamped);
       const now2 = performance.now();
       if (now2 - lastIpcTime >= IPC_THROTTLE_MS) {
@@ -1897,6 +1897,9 @@ function useUI() {
       }
     },
     commitResize: async () => {
+      const finalWidth = clampSidebarWidth(sidebarWidth());
+      lastIpcTime = performance.now();
+      await window.vessel.ui.resizeSidebar(finalWidth);
       await window.vessel.ui.commitSidebarResize();
     },
     toggleFocusMode: async () => {
@@ -8084,9 +8087,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           overscroll-behavior: contain;
           scrollbar-gutter: stable;
           box-shadow:
-            0 4px 24px rgba(0, 0, 0, 0.2),
-            0 24px 64px rgba(0, 0, 0, 0.3),
-            inset 0 1px 0 rgba(255, 255, 255, 0.04);
+            0 4px 24px var(--shadow-color),
+            0 24px 64px var(--shadow-color-strong),
+            inset 0 1px 0 var(--inset-highlight);
           animation: command-bar-enter 350ms var(--ease-out-expo) both;
         }
         .command-bar-overlay.closing .settings-panel {
@@ -8103,8 +8106,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           margin-bottom: 20px;
           padding: 14px;
           border-radius: var(--radius-md);
-          border: 1px solid rgba(224, 200, 120, 0.14);
-          background: rgba(224, 200, 120, 0.06);
+          border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
+          background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
         }
         .settings-callout-title {
           font-size: 12px;
@@ -8121,9 +8124,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
         }
         .settings-premium-callout {
           background:
-            radial-gradient(circle at top right, rgba(196, 160, 90, 0.16), transparent 40%),
-            rgba(224, 200, 120, 0.06);
-          border-color: rgba(196, 160, 90, 0.22);
+            radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 16%, transparent), transparent 40%),
+            color-mix(in srgb, var(--accent-primary) 6%, transparent);
+          border-color: color-mix(in srgb, var(--accent-primary) 22%, transparent);
         }
         .settings-premium-callout-actions {
           display: flex;
@@ -8139,7 +8142,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           padding: 14px;
           border-radius: var(--radius-md);
           border: 1px solid var(--border-visible);
-          background: rgba(255, 255, 255, 0.015);
+          background: var(--surface-glass);
         }
         .settings-health-issues {
           display: flex;
@@ -8152,16 +8155,16 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           line-height: 1.5;
           padding: 10px 12px;
           border-radius: var(--radius-md);
-          border: 1px solid rgba(255, 255, 255, 0.06);
+          border: 1px solid var(--border-glass);
           color: var(--text-secondary);
         }
         .settings-health-issue.warning {
-          border-color: rgba(240, 198, 54, 0.28);
-          background: rgba(240, 198, 54, 0.06);
+          border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent);
+          background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
         }
         .settings-health-issue.error {
-          border-color: rgba(255, 108, 91, 0.32);
-          background: rgba(255, 108, 91, 0.06);
+          border-color: color-mix(in srgb, var(--status-error) 32%, transparent);
+          background: color-mix(in srgb, var(--status-error) 6%, transparent);
         }
         .settings-label {
           display: block;
@@ -8202,7 +8205,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
         }
         .settings-input:focus {
           border-color: var(--accent-primary);
-          box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
+          box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
           outline: none;
         }
         .settings-hint {
@@ -8231,8 +8234,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           width: 36px;
           height: 20px;
           border-radius: 999px;
-          background: rgba(255, 255, 255, 0.1);
-          border: 1px solid rgba(255, 255, 255, 0.06);
+          background: var(--surface-hover);
+          border: 1px solid var(--border-glass);
           padding: 0;
           flex-shrink: 0;
           cursor: pointer;
@@ -8241,14 +8244,14 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
             border-color var(--duration-normal) var(--ease-in-out);
         }
         .toggle-switch:hover {
-          background: rgba(255, 255, 255, 0.14);
+          background: var(--surface-active);
         }
         .toggle-switch.on {
           background: var(--accent-primary);
           border-color: transparent;
         }
         .toggle-switch.on:hover {
-          background: #d4b06a;
+          background: color-mix(in srgb, var(--accent-primary) 85%, white);
         }
         .toggle-switch-thumb {
           position: absolute;
@@ -8258,7 +8261,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           height: 14px;
           border-radius: 999px;
           background: var(--text-primary);
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px var(--shadow-color-strong);
           transition: transform var(--duration-normal) var(--ease-out-expo);
           pointer-events: none;
         }
@@ -8271,10 +8274,10 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           line-height: 1.5;
         }
         .settings-status.success {
-          color: #84d19a;
+          color: var(--status-success);
         }
         .settings-status.error {
-          color: #ff8e8e;
+          color: var(--status-error);
         }
         .settings-save, .settings-close {
           height: 34px;
@@ -8291,9 +8294,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
         }
         .settings-save {
           background: var(--accent-primary);
-          color: white;
+          color: var(--button-primary-fg);
         }
-        .settings-save:hover { background: #d4b06a; }
+        .settings-save:hover { background: var(--button-primary-hover-bg); }
         .settings-close {
           background: var(--bg-tertiary);
           color: var(--text-secondary);
@@ -8384,11 +8387,11 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
         }
         .premium-btn-upgrade {
           background: var(--accent-primary);
-          color: white;
+          color: var(--button-primary-fg);
           width: 100%;
         }
         .premium-btn-upgrade:hover {
-          background: #d4b06a;
+          background: var(--button-primary-hover-bg);
         }
         .premium-btn-manage {
           background: var(--bg-tertiary);
@@ -8404,8 +8407,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           display: inline-flex;
           align-items: center;
           gap: 6px;
-          background: rgba(240, 198, 54, 0.15);
-          color: #f0c636;
+          background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
+          color: var(--accent-primary);
           font-size: 12px;
           font-weight: 600;
           padding: 4px 12px;
@@ -8424,7 +8427,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
         }
         .premium-btn-reset {
           background: transparent;
-          color: var(--text-tertiary, #71717a);
+          color: var(--text-muted);
           border: 1px solid var(--border-subtle);
           font-size: 11px;
           padding: 0 12px;
@@ -8440,8 +8443,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           margin-bottom: 20px;
           padding: 16px;
           border-radius: var(--radius-md);
-          border: 1px solid rgba(196, 160, 90, 0.25);
-          background: rgba(196, 160, 90, 0.08);
+          border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
+          background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
         }
         .welcome-banner-header {
           display: flex;
@@ -8468,7 +8471,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           justify-content: center;
         }
         .welcome-banner-dismiss:hover {
-          background: rgba(255, 255, 255, 0.08);
+          background: var(--surface-hover);
           color: var(--text-primary);
         }
         .welcome-banner-text {
@@ -8496,8 +8499,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           padding: 0 5px;
           font-size: 11px;
           font-family: var(--font-mono);
-          background: rgba(255, 255, 255, 0.08);
-          border: 1px solid rgba(255, 255, 255, 0.1);
+          background: var(--kbd-bg);
+          border: 1px solid var(--kbd-border);
           border-radius: 3px;
           color: var(--text-primary);
         }
@@ -8520,8 +8523,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           display: inline-block;
           font-size: 10px;
           font-weight: 600;
-          color: #f0c636;
-          background: rgba(240, 198, 54, 0.15);
+          color: var(--accent-primary);
+          background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
           padding: 1px 6px;
           border-radius: 4px;
           margin-left: 8px;
@@ -8570,7 +8573,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           border-radius: 4px;
           background: transparent;
           border: none;
-          color: var(--text-tertiary, #71717a);
+          color: var(--text-muted);
           font-size: 16px;
           cursor: pointer;
           display: flex;
@@ -8579,8 +8582,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           transition: background var(--duration-fast), color var(--duration-fast);
         }
         .vault-entry-remove:hover {
-          background: rgba(255, 108, 91, 0.12);
-          color: #ff8e8e;
+          background: color-mix(in srgb, var(--status-error) 12%, transparent);
+          color: var(--status-error);
         }
         .vault-add-btn {
           height: 32px;
@@ -8604,7 +8607,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
           flex-direction: column;
           gap: 8px;
           padding: 12px;
-          background: rgba(255, 255, 255, 0.02);
+          background: var(--surface-glass);
           border: 1px solid var(--border-subtle);
           border-radius: var(--radius-md);
         }
@@ -9940,9 +9943,9 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
           border-radius: 14px;
           padding: 24px;
           box-shadow:
-            0 4px 24px rgba(0, 0, 0, 0.2),
-            0 24px 64px rgba(0, 0, 0, 0.3),
-            inset 0 1px 0 rgba(255, 255, 255, 0.04);
+            0 4px 24px var(--shadow-color),
+            0 24px 64px var(--shadow-color-strong),
+            inset 0 1px 0 var(--inset-highlight);
           animation: command-bar-enter 350ms var(--ease-out-expo) both;
         }
         .command-bar-overlay.closing .keyboard-help {
@@ -9967,8 +9970,8 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
           padding: 0;
         }
         .keyboard-help-close kbd {
-          background: rgba(255, 255, 255, 0.06);
-          border: 1px solid rgba(255, 255, 255, 0.08);
+          background: var(--kbd-bg);
+          border: 1px solid var(--kbd-border);
           padding: 2px 8px;
           border-radius: 4px;
           font-size: 11px;
@@ -9976,7 +9979,7 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
           font-family: var(--font-ui);
         }
         .keyboard-help-close:hover kbd {
-          background: rgba(255, 255, 255, 0.1);
+          background: var(--surface-hover);
           color: var(--text-secondary);
         }
         .keyboard-help-grid {
@@ -9999,11 +10002,11 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
           font-size: 11px;
           font-family: var(--font-mono);
           font-weight: 500;
-          background: rgba(255, 255, 255, 0.06);
-          border: 1px solid rgba(255, 255, 255, 0.08);
+          background: var(--kbd-bg);
+          border: 1px solid var(--kbd-border);
           border-radius: 4px;
           color: var(--text-primary);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 2px var(--shadow-color);
         }
         .keyboard-help-plus {
           font-size: 10px;
@@ -10198,6 +10201,12 @@ const App = () => {
   onMount(() => {
     void loadAndApplyTheme();
     window.vessel.ui.rendererReady(view);
+    const cleanupSettings = window.vessel.settings.onUpdate((settings) => {
+      applyTheme(settings.theme ?? "dark");
+    });
+    onCleanup(() => {
+      cleanupSettings();
+    });
     if (view !== "chrome") return;
     const cleanupKeys = setupKeybindings({
       openCommandBar,
@@ -10216,13 +10225,9 @@ const App = () => {
       toggleKeyboardHelp: () => setKeyboardHelpOpen((v) => !v)
     });
     const cleanupCapture = window.vessel.highlights.onCaptureResult(showHighlightResult);
-    const cleanupSettings = window.vessel.settings.onUpdate((settings) => {
-      applyTheme(settings.theme ?? "dark");
-    });
     onCleanup(() => {
       cleanupKeys();
       cleanupCapture();
-      cleanupSettings();
     });
   });
   if (view === "sidebar") {

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-Di64dPm5.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CBe7EN_l.css">
+    <script type="module" crossorigin src="./assets/index-B2vPgkX2.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-4OgPv5GF.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.61",
+  "version": "0.1.63",
   "description": "AI-native web browser runtime for autonomous agents with human supervision",
   "main": "./out/main/index.js",
   "bin": {