@quanta-intellect/vessel-browser 0.1.61 → 0.1.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1486,6 +1486,43 @@ const TitleBar = () => {
1486
1486
  })();
1487
1487
  };
1488
1488
  delegateEvents(["click"]);
1489
+ function getEnvFlag(name) {
1490
+ const globalProcess = typeof globalThis === "object" && "process" in globalThis ? globalThis.process : void 0;
1491
+ return globalProcess?.env?.[name];
1492
+ }
1493
+ function isDebugEnabled() {
1494
+ const value = getEnvFlag("VESSEL_DEBUG")?.trim().toLowerCase();
1495
+ return value === "1" || value === "true" || value === "yes" || value === "on";
1496
+ }
1497
+ function writeLog(level, scope, args) {
1498
+ if (level === "debug" && !isDebugEnabled()) {
1499
+ return;
1500
+ }
1501
+ const prefix = `[Vessel ${scope}]`;
1502
+ switch (level) {
1503
+ case "debug":
1504
+ console.debug(prefix, ...args);
1505
+ return;
1506
+ case "info":
1507
+ console.info(prefix, ...args);
1508
+ return;
1509
+ case "warn":
1510
+ console.warn(prefix, ...args);
1511
+ return;
1512
+ case "error":
1513
+ console.error(prefix, ...args);
1514
+ return;
1515
+ }
1516
+ }
1517
+ function createLogger(scope) {
1518
+ return {
1519
+ debug: (...args) => writeLog("debug", scope, args),
1520
+ info: (...args) => writeLog("info", scope, args),
1521
+ warn: (...args) => writeLog("warn", scope, args),
1522
+ error: (...args) => writeLog("error", scope, args)
1523
+ };
1524
+ }
1525
+ const logger$5 = createLogger("TabsStore");
1489
1526
  const [tabs, setTabs] = createSignal([]);
1490
1527
  const [activeTabId, setActiveTabId] = createSignal("");
1491
1528
  let initialized$4 = false;
@@ -1508,7 +1545,7 @@ async function doInit() {
1508
1545
  setActiveTabId(initialState.activeId);
1509
1546
  } catch (error) {
1510
1547
  initialized$4 = false;
1511
- console.error("Failed to initialize tabs store", error);
1548
+ logger$5.error("Failed to initialize tabs store:", error);
1512
1549
  throw error;
1513
1550
  }
1514
1551
  }
@@ -1570,6 +1607,7 @@ function useNow() {
1570
1607
  }
1571
1608
  return now;
1572
1609
  }
1610
+ const logger$4 = createLogger("RuntimeStore");
1573
1611
  const DEFAULT_RUNTIME_STATE = {
1574
1612
  session: null,
1575
1613
  supervisor: {
@@ -1602,7 +1640,7 @@ async function init$3() {
1602
1640
  });
1603
1641
  } catch (error) {
1604
1642
  initialized$3 = false;
1605
- console.error("Failed to initialize runtime store", error);
1643
+ logger$4.error("Failed to initialize runtime store:", error);
1606
1644
  } finally {
1607
1645
  initPromise$2 = null;
1608
1646
  }
@@ -1871,6 +1909,9 @@ const [settingsOpen, setSettingsOpen] = createSignal(false);
1871
1909
  const [devtoolsPanelOpen, setDevtoolsPanelOpen] = createSignal(false);
1872
1910
  let lastIpcTime = 0;
1873
1911
  const IPC_THROTTLE_MS = 8;
1912
+ function clampSidebarWidth(width) {
1913
+ return Math.max(MIN_SIDEBAR, Math.min(MAX_SIDEBAR, Math.round(width)));
1914
+ }
1874
1915
  function useUI() {
1875
1916
  return {
1876
1917
  sidebarOpen,
@@ -1885,10 +1926,7 @@ function useUI() {
1885
1926
  setSidebarWidth(result.width);
1886
1927
  },
1887
1928
  resizeSidebar: (width) => {
1888
- const clamped = Math.max(
1889
- MIN_SIDEBAR,
1890
- Math.min(MAX_SIDEBAR, Math.round(width))
1891
- );
1929
+ const clamped = clampSidebarWidth(width);
1892
1930
  setSidebarWidth(clamped);
1893
1931
  const now2 = performance.now();
1894
1932
  if (now2 - lastIpcTime >= IPC_THROTTLE_MS) {
@@ -1897,6 +1935,9 @@ function useUI() {
1897
1935
  }
1898
1936
  },
1899
1937
  commitResize: async () => {
1938
+ const finalWidth = clampSidebarWidth(sidebarWidth());
1939
+ lastIpcTime = performance.now();
1940
+ await window.vessel.ui.resizeSidebar(finalWidth);
1900
1941
  await window.vessel.ui.commitSidebarResize();
1901
1942
  },
1902
1943
  toggleFocusMode: async () => {
@@ -3459,6 +3500,7 @@ const CommandBar = () => {
3459
3500
  });
3460
3501
  };
3461
3502
  delegateEvents(["click", "input", "keydown"]);
3503
+ const logger$3 = createLogger("HistoryStore");
3462
3504
  const INITIAL$1 = { entries: [] };
3463
3505
  const [historyState, setHistoryState] = createSignal(INITIAL$1);
3464
3506
  let initialized$1 = false;
@@ -3474,7 +3516,7 @@ async function init$1() {
3474
3516
  window.vessel.history.onUpdate((s) => setHistoryState(s));
3475
3517
  } catch (error) {
3476
3518
  initialized$1 = false;
3477
- console.error("Failed to initialize history store", error);
3519
+ logger$3.error("Failed to initialize history store:", error);
3478
3520
  } finally {
3479
3521
  initPromise$1 = null;
3480
3522
  }
@@ -3489,6 +3531,7 @@ function useHistory() {
3489
3531
  clear: () => window.vessel.history.clear()
3490
3532
  };
3491
3533
  }
3534
+ const logger$2 = createLogger("BookmarksStore");
3492
3535
  const INITIAL = { folders: [], bookmarks: [] };
3493
3536
  const [bookmarksState, setBookmarksState] = createSignal(INITIAL);
3494
3537
  let initialized = false;
@@ -3504,7 +3547,7 @@ async function init() {
3504
3547
  window.vessel.bookmarks.onUpdate((s) => setBookmarksState(s));
3505
3548
  } catch (error) {
3506
3549
  initialized = false;
3507
- console.error("Failed to initialize bookmarks store", error);
3550
+ logger$2.error("Failed to initialize bookmarks store:", error);
3508
3551
  } finally {
3509
3552
  initPromise = null;
3510
3553
  }
@@ -5321,6 +5364,7 @@ const BUNDLED_KIT_IDS = /* @__PURE__ */ new Set([
5321
5364
  "price-scout",
5322
5365
  "form-filler"
5323
5366
  ]);
5367
+ const logger$1 = createLogger("AutomationKits");
5324
5368
  const BUNDLED_KITS = [
5325
5369
  {
5326
5370
  id: "research-collect",
@@ -5454,8 +5498,8 @@ Steps:
5454
5498
  function renderKitPrompt(kit, values) {
5455
5499
  for (const input of kit.inputs) {
5456
5500
  if (input.required && !values[input.key]?.trim()) {
5457
- console.warn(
5458
- `[automation-kits] Required field "${input.key}" is empty for kit "${kit.id}".`
5501
+ logger$1.warn(
5502
+ `Required field "${input.key}" is empty for kit "${kit.id}".`
5459
5503
  );
5460
5504
  }
5461
5505
  }
@@ -8084,9 +8128,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8084
8128
  overscroll-behavior: contain;
8085
8129
  scrollbar-gutter: stable;
8086
8130
  box-shadow:
8087
- 0 4px 24px rgba(0, 0, 0, 0.2),
8088
- 0 24px 64px rgba(0, 0, 0, 0.3),
8089
- inset 0 1px 0 rgba(255, 255, 255, 0.04);
8131
+ 0 4px 24px var(--shadow-color),
8132
+ 0 24px 64px var(--shadow-color-strong),
8133
+ inset 0 1px 0 var(--inset-highlight);
8090
8134
  animation: command-bar-enter 350ms var(--ease-out-expo) both;
8091
8135
  }
8092
8136
  .command-bar-overlay.closing .settings-panel {
@@ -8103,8 +8147,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8103
8147
  margin-bottom: 20px;
8104
8148
  padding: 14px;
8105
8149
  border-radius: var(--radius-md);
8106
- border: 1px solid rgba(224, 200, 120, 0.14);
8107
- background: rgba(224, 200, 120, 0.06);
8150
+ border: 1px solid color-mix(in srgb, var(--accent-primary) 14%, transparent);
8151
+ background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
8108
8152
  }
8109
8153
  .settings-callout-title {
8110
8154
  font-size: 12px;
@@ -8121,9 +8165,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8121
8165
  }
8122
8166
  .settings-premium-callout {
8123
8167
  background:
8124
- radial-gradient(circle at top right, rgba(196, 160, 90, 0.16), transparent 40%),
8125
- rgba(224, 200, 120, 0.06);
8126
- border-color: rgba(196, 160, 90, 0.22);
8168
+ radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 16%, transparent), transparent 40%),
8169
+ color-mix(in srgb, var(--accent-primary) 6%, transparent);
8170
+ border-color: color-mix(in srgb, var(--accent-primary) 22%, transparent);
8127
8171
  }
8128
8172
  .settings-premium-callout-actions {
8129
8173
  display: flex;
@@ -8139,7 +8183,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8139
8183
  padding: 14px;
8140
8184
  border-radius: var(--radius-md);
8141
8185
  border: 1px solid var(--border-visible);
8142
- background: rgba(255, 255, 255, 0.015);
8186
+ background: var(--surface-glass);
8143
8187
  }
8144
8188
  .settings-health-issues {
8145
8189
  display: flex;
@@ -8152,16 +8196,16 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8152
8196
  line-height: 1.5;
8153
8197
  padding: 10px 12px;
8154
8198
  border-radius: var(--radius-md);
8155
- border: 1px solid rgba(255, 255, 255, 0.06);
8199
+ border: 1px solid var(--border-glass);
8156
8200
  color: var(--text-secondary);
8157
8201
  }
8158
8202
  .settings-health-issue.warning {
8159
- border-color: rgba(240, 198, 54, 0.28);
8160
- background: rgba(240, 198, 54, 0.06);
8203
+ border-color: color-mix(in srgb, var(--accent-primary) 28%, transparent);
8204
+ background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
8161
8205
  }
8162
8206
  .settings-health-issue.error {
8163
- border-color: rgba(255, 108, 91, 0.32);
8164
- background: rgba(255, 108, 91, 0.06);
8207
+ border-color: color-mix(in srgb, var(--status-error) 32%, transparent);
8208
+ background: color-mix(in srgb, var(--status-error) 6%, transparent);
8165
8209
  }
8166
8210
  .settings-label {
8167
8211
  display: block;
@@ -8202,7 +8246,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8202
8246
  }
8203
8247
  .settings-input:focus {
8204
8248
  border-color: var(--accent-primary);
8205
- box-shadow: 0 0 0 2px rgba(196, 160, 90, 0.1);
8249
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 10%, transparent);
8206
8250
  outline: none;
8207
8251
  }
8208
8252
  .settings-hint {
@@ -8231,8 +8275,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8231
8275
  width: 36px;
8232
8276
  height: 20px;
8233
8277
  border-radius: 999px;
8234
- background: rgba(255, 255, 255, 0.1);
8235
- border: 1px solid rgba(255, 255, 255, 0.06);
8278
+ background: var(--surface-hover);
8279
+ border: 1px solid var(--border-glass);
8236
8280
  padding: 0;
8237
8281
  flex-shrink: 0;
8238
8282
  cursor: pointer;
@@ -8241,14 +8285,14 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8241
8285
  border-color var(--duration-normal) var(--ease-in-out);
8242
8286
  }
8243
8287
  .toggle-switch:hover {
8244
- background: rgba(255, 255, 255, 0.14);
8288
+ background: var(--surface-active);
8245
8289
  }
8246
8290
  .toggle-switch.on {
8247
8291
  background: var(--accent-primary);
8248
8292
  border-color: transparent;
8249
8293
  }
8250
8294
  .toggle-switch.on:hover {
8251
- background: #d4b06a;
8295
+ background: color-mix(in srgb, var(--accent-primary) 85%, white);
8252
8296
  }
8253
8297
  .toggle-switch-thumb {
8254
8298
  position: absolute;
@@ -8258,7 +8302,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8258
8302
  height: 14px;
8259
8303
  border-radius: 999px;
8260
8304
  background: var(--text-primary);
8261
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
8305
+ box-shadow: 0 1px 3px var(--shadow-color-strong);
8262
8306
  transition: transform var(--duration-normal) var(--ease-out-expo);
8263
8307
  pointer-events: none;
8264
8308
  }
@@ -8271,10 +8315,10 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8271
8315
  line-height: 1.5;
8272
8316
  }
8273
8317
  .settings-status.success {
8274
- color: #84d19a;
8318
+ color: var(--status-success);
8275
8319
  }
8276
8320
  .settings-status.error {
8277
- color: #ff8e8e;
8321
+ color: var(--status-error);
8278
8322
  }
8279
8323
  .settings-save, .settings-close {
8280
8324
  height: 34px;
@@ -8291,9 +8335,9 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8291
8335
  }
8292
8336
  .settings-save {
8293
8337
  background: var(--accent-primary);
8294
- color: white;
8338
+ color: var(--button-primary-fg);
8295
8339
  }
8296
- .settings-save:hover { background: #d4b06a; }
8340
+ .settings-save:hover { background: var(--button-primary-hover-bg); }
8297
8341
  .settings-close {
8298
8342
  background: var(--bg-tertiary);
8299
8343
  color: var(--text-secondary);
@@ -8384,11 +8428,11 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8384
8428
  }
8385
8429
  .premium-btn-upgrade {
8386
8430
  background: var(--accent-primary);
8387
- color: white;
8431
+ color: var(--button-primary-fg);
8388
8432
  width: 100%;
8389
8433
  }
8390
8434
  .premium-btn-upgrade:hover {
8391
- background: #d4b06a;
8435
+ background: var(--button-primary-hover-bg);
8392
8436
  }
8393
8437
  .premium-btn-manage {
8394
8438
  background: var(--bg-tertiary);
@@ -8404,8 +8448,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8404
8448
  display: inline-flex;
8405
8449
  align-items: center;
8406
8450
  gap: 6px;
8407
- background: rgba(240, 198, 54, 0.15);
8408
- color: #f0c636;
8451
+ background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
8452
+ color: var(--accent-primary);
8409
8453
  font-size: 12px;
8410
8454
  font-weight: 600;
8411
8455
  padding: 4px 12px;
@@ -8424,7 +8468,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8424
8468
  }
8425
8469
  .premium-btn-reset {
8426
8470
  background: transparent;
8427
- color: var(--text-tertiary, #71717a);
8471
+ color: var(--text-muted);
8428
8472
  border: 1px solid var(--border-subtle);
8429
8473
  font-size: 11px;
8430
8474
  padding: 0 12px;
@@ -8440,8 +8484,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8440
8484
  margin-bottom: 20px;
8441
8485
  padding: 16px;
8442
8486
  border-radius: var(--radius-md);
8443
- border: 1px solid rgba(196, 160, 90, 0.25);
8444
- background: rgba(196, 160, 90, 0.08);
8487
+ border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
8488
+ background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
8445
8489
  }
8446
8490
  .welcome-banner-header {
8447
8491
  display: flex;
@@ -8468,7 +8512,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8468
8512
  justify-content: center;
8469
8513
  }
8470
8514
  .welcome-banner-dismiss:hover {
8471
- background: rgba(255, 255, 255, 0.08);
8515
+ background: var(--surface-hover);
8472
8516
  color: var(--text-primary);
8473
8517
  }
8474
8518
  .welcome-banner-text {
@@ -8496,8 +8540,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8496
8540
  padding: 0 5px;
8497
8541
  font-size: 11px;
8498
8542
  font-family: var(--font-mono);
8499
- background: rgba(255, 255, 255, 0.08);
8500
- border: 1px solid rgba(255, 255, 255, 0.1);
8543
+ background: var(--kbd-bg);
8544
+ border: 1px solid var(--kbd-border);
8501
8545
  border-radius: 3px;
8502
8546
  color: var(--text-primary);
8503
8547
  }
@@ -8520,8 +8564,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8520
8564
  display: inline-block;
8521
8565
  font-size: 10px;
8522
8566
  font-weight: 600;
8523
- color: #f0c636;
8524
- background: rgba(240, 198, 54, 0.15);
8567
+ color: var(--accent-primary);
8568
+ background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
8525
8569
  padding: 1px 6px;
8526
8570
  border-radius: 4px;
8527
8571
  margin-left: 8px;
@@ -8570,7 +8614,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8570
8614
  border-radius: 4px;
8571
8615
  background: transparent;
8572
8616
  border: none;
8573
- color: var(--text-tertiary, #71717a);
8617
+ color: var(--text-muted);
8574
8618
  font-size: 16px;
8575
8619
  cursor: pointer;
8576
8620
  display: flex;
@@ -8579,8 +8623,8 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8579
8623
  transition: background var(--duration-fast), color var(--duration-fast);
8580
8624
  }
8581
8625
  .vault-entry-remove:hover {
8582
- background: rgba(255, 108, 91, 0.12);
8583
- color: #ff8e8e;
8626
+ background: color-mix(in srgb, var(--status-error) 12%, transparent);
8627
+ color: var(--status-error);
8584
8628
  }
8585
8629
  .vault-add-btn {
8586
8630
  height: 32px;
@@ -8604,7 +8648,7 @@ var _tmpl$$2 = /* @__PURE__ */ template(`<div class=welcome-banner-actions><butt
8604
8648
  flex-direction: column;
8605
8649
  gap: 8px;
8606
8650
  padding: 12px;
8607
- background: rgba(255, 255, 255, 0.02);
8651
+ background: var(--surface-glass);
8608
8652
  border: 1px solid var(--border-subtle);
8609
8653
  border-radius: var(--radius-md);
8610
8654
  }
@@ -8625,6 +8669,7 @@ const CHAT_PROVIDERS = Object.values(PROVIDERS).map((p) => ({
8625
8669
  defaultModel: p.defaultModel,
8626
8670
  models: p.models
8627
8671
  }));
8672
+ const logger = createLogger("Settings");
8628
8673
  const Settings = () => {
8629
8674
  const {
8630
8675
  settingsOpen: settingsOpen2,
@@ -8654,7 +8699,8 @@ const Settings = () => {
8654
8699
  try {
8655
8700
  const sessions = await window.vessel.sessions.list();
8656
8701
  setSessionList(sessions);
8657
- } catch {
8702
+ } catch (err) {
8703
+ logger.warn("Failed to load named sessions list:", err);
8658
8704
  }
8659
8705
  };
8660
8706
  const [vaultEntries, setVaultEntries] = createSignal([]);
@@ -8686,7 +8732,8 @@ const Settings = () => {
8686
8732
  try {
8687
8733
  const profiles = await window.vessel.autofill.list();
8688
8734
  setAutofillProfiles(profiles);
8689
- } catch {
8735
+ } catch (err) {
8736
+ logger.warn("Failed to load autofill profiles:", err);
8690
8737
  }
8691
8738
  };
8692
8739
  const handleAutofillAdd = async () => {
@@ -8774,7 +8821,8 @@ const Settings = () => {
8774
8821
  try {
8775
8822
  const entries2 = await window.vessel.vault.list();
8776
8823
  setVaultEntries(entries2);
8777
- } catch {
8824
+ } catch (err) {
8825
+ logger.warn("Failed to load vault entries:", err);
8778
8826
  }
8779
8827
  };
8780
8828
  const handleVaultAdd = async () => {
@@ -8821,7 +8869,8 @@ const Settings = () => {
8821
8869
  kind: "success",
8822
8870
  text: "Credential removed."
8823
8871
  });
8824
- } catch {
8872
+ } catch (err) {
8873
+ logger.warn("Failed to remove credential:", err);
8825
8874
  setVaultMessage({
8826
8875
  kind: "error",
8827
8876
  text: "Failed to remove credential."
@@ -8847,7 +8896,8 @@ const Settings = () => {
8847
8896
  const s = premiumState().status;
8848
8897
  return s === "active" || s === "trialing";
8849
8898
  };
8850
- const trackPremiumContext = (step) => window.vessel.premium.trackContext(step).catch(() => {
8899
+ const trackPremiumContext = (step) => window.vessel.premium.trackContext(step).catch((err) => {
8900
+ logger.warn("Failed to track premium context:", err);
8851
8901
  });
8852
8902
  const startPremiumCheckout = () => {
8853
8903
  void window.vessel.premium.checkout(premiumEmail().trim() || void 0);
@@ -8899,7 +8949,8 @@ const Settings = () => {
8899
8949
  setModelFetchWarning(null);
8900
8950
  setModelFetchState("error");
8901
8951
  }
8902
- }).catch(() => {
8952
+ }).catch((err) => {
8953
+ logger.warn("Failed to fetch provider models:", err);
8903
8954
  setProviderModels([]);
8904
8955
  setModelFetchWarning(null);
8905
8956
  setModelFetchState("error");
@@ -8964,7 +9015,8 @@ const Settings = () => {
8964
9015
  const ps = await window.vessel.premium.getState();
8965
9016
  setPremiumState(ps);
8966
9017
  if (ps.email) setPremiumEmail(ps.email);
8967
- } catch {
9018
+ } catch (err) {
9019
+ logger.warn("Failed to load premium state:", err);
8968
9020
  }
8969
9021
  await loadVaultEntries();
8970
9022
  await loadSessionList();
@@ -9940,9 +9992,9 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
9940
9992
  border-radius: 14px;
9941
9993
  padding: 24px;
9942
9994
  box-shadow:
9943
- 0 4px 24px rgba(0, 0, 0, 0.2),
9944
- 0 24px 64px rgba(0, 0, 0, 0.3),
9945
- inset 0 1px 0 rgba(255, 255, 255, 0.04);
9995
+ 0 4px 24px var(--shadow-color),
9996
+ 0 24px 64px var(--shadow-color-strong),
9997
+ inset 0 1px 0 var(--inset-highlight);
9946
9998
  animation: command-bar-enter 350ms var(--ease-out-expo) both;
9947
9999
  }
9948
10000
  .command-bar-overlay.closing .keyboard-help {
@@ -9967,8 +10019,8 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
9967
10019
  padding: 0;
9968
10020
  }
9969
10021
  .keyboard-help-close kbd {
9970
- background: rgba(255, 255, 255, 0.06);
9971
- border: 1px solid rgba(255, 255, 255, 0.08);
10022
+ background: var(--kbd-bg);
10023
+ border: 1px solid var(--kbd-border);
9972
10024
  padding: 2px 8px;
9973
10025
  border-radius: 4px;
9974
10026
  font-size: 11px;
@@ -9976,7 +10028,7 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
9976
10028
  font-family: var(--font-ui);
9977
10029
  }
9978
10030
  .keyboard-help-close:hover kbd {
9979
- background: rgba(255, 255, 255, 0.1);
10031
+ background: var(--surface-hover);
9980
10032
  color: var(--text-secondary);
9981
10033
  }
9982
10034
  .keyboard-help-grid {
@@ -9999,11 +10051,11 @@ var _tmpl$$1 = /* @__PURE__ */ template(`<div class=command-bar-overlay><div cla
9999
10051
  font-size: 11px;
10000
10052
  font-family: var(--font-mono);
10001
10053
  font-weight: 500;
10002
- background: rgba(255, 255, 255, 0.06);
10003
- border: 1px solid rgba(255, 255, 255, 0.08);
10054
+ background: var(--kbd-bg);
10055
+ border: 1px solid var(--kbd-border);
10004
10056
  border-radius: 4px;
10005
10057
  color: var(--text-primary);
10006
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
10058
+ box-shadow: 0 1px 2px var(--shadow-color);
10007
10059
  }
10008
10060
  .keyboard-help-plus {
10009
10061
  font-size: 10px;
@@ -10198,6 +10250,12 @@ const App = () => {
10198
10250
  onMount(() => {
10199
10251
  void loadAndApplyTheme();
10200
10252
  window.vessel.ui.rendererReady(view);
10253
+ const cleanupSettings = window.vessel.settings.onUpdate((settings) => {
10254
+ applyTheme(settings.theme ?? "dark");
10255
+ });
10256
+ onCleanup(() => {
10257
+ cleanupSettings();
10258
+ });
10201
10259
  if (view !== "chrome") return;
10202
10260
  const cleanupKeys = setupKeybindings({
10203
10261
  openCommandBar,
@@ -10216,13 +10274,9 @@ const App = () => {
10216
10274
  toggleKeyboardHelp: () => setKeyboardHelpOpen((v) => !v)
10217
10275
  });
10218
10276
  const cleanupCapture = window.vessel.highlights.onCaptureResult(showHighlightResult);
10219
- const cleanupSettings = window.vessel.settings.onUpdate((settings) => {
10220
- applyTheme(settings.theme ?? "dark");
10221
- });
10222
10277
  onCleanup(() => {
10223
10278
  cleanupKeys();
10224
10279
  cleanupCapture();
10225
- cleanupSettings();
10226
10280
  });
10227
10281
  });
10228
10282
  if (view === "sidebar") {
@@ -5,8 +5,8 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <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:;" />
7
7
  <title>Vessel</title>
8
- <script type="module" crossorigin src="./assets/index-Di64dPm5.js"></script>
9
- <link rel="stylesheet" crossorigin href="./assets/index-CBe7EN_l.css">
8
+ <script type="module" crossorigin src="./assets/index-BQjjFSb1.js"></script>
9
+ <link rel="stylesheet" crossorigin href="./assets/index-4OgPv5GF.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="root"></div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@quanta-intellect/vessel-browser",
3
3
  "mcpName": "io.github.unmodeled-tyler/vessel-browser",
4
- "version": "0.1.61",
4
+ "version": "0.1.65",
5
5
  "description": "AI-native web browser runtime for autonomous agents with human supervision",
6
6
  "main": "./out/main/index.js",
7
7
  "bin": {