@quanta-intellect/vessel-browser 0.1.146 → 0.1.147

package/out/main/index.js

@@ -175,12 +175,32 @@ function sanitizeSidebarDetachedBounds(value) {
     height: Math.max(DETACHED_SIDEBAR_MIN_HEIGHT, Math.round(height))
   };
 }
+const DETACHED_DEVTOOLS_DEFAULT_WIDTH = 920;
+const DETACHED_DEVTOOLS_DEFAULT_HEIGHT = 560;
+const DETACHED_DEVTOOLS_MIN_WIDTH = 520;
+const DETACHED_DEVTOOLS_MIN_HEIGHT = 320;
+function sanitizeDevToolsDetachedBounds(value) {
+  if (!value || typeof value !== "object") return null;
+  const bounds = value;
+  const width = Number(bounds.width);
+  const height = Number(bounds.height);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  const x = Number(bounds.x);
+  const y = Number(bounds.y);
+  return {
+    ...Number.isFinite(x) ? { x: Math.round(x) } : {},
+    ...Number.isFinite(y) ? { y: Math.round(y) } : {},
+    width: Math.max(DETACHED_DEVTOOLS_MIN_WIDTH, Math.round(width)),
+    height: Math.max(DETACHED_DEVTOOLS_MIN_HEIGHT, Math.round(height))
+  };
+}
 const defaults = {
   defaultUrl: "https://start.duckduckgo.com",
   theme: "dark",
   sidebarPanelMode: "docked",
   sidebarWidth: 400,
   sidebarDetachedBounds: null,
+  devtoolsPanelDetachedBounds: null,
   mcpPort: 3100,
   autoRestoreSession: true,
   clearBookmarksOnLaunch: false,
@@ -222,6 +242,15 @@ const SettingsValueSchemas = {
       height: zod.z.number().int().min(DETACHED_SIDEBAR_MIN_HEIGHT)
     })
   ]),
+  devtoolsPanelDetachedBounds: zod.z.union([
+    zod.z.null(),
+    zod.z.object({
+      x: zod.z.number().optional(),
+      y: zod.z.number().optional(),
+      width: zod.z.number().int().min(DETACHED_DEVTOOLS_MIN_WIDTH),
+      height: zod.z.number().int().min(DETACHED_DEVTOOLS_MIN_HEIGHT)
+    })
+  ]),
   mcpPort: zod.z.number().int().min(1).max(65535),
   autoRestoreSession: zod.z.boolean(),
   clearBookmarksOnLaunch: zod.z.boolean(),
@@ -477,6 +506,9 @@ function loadSettings() {
       sidebarDetachedBounds: sanitizeSidebarDetachedBounds(
         parsed.sidebarDetachedBounds
       ),
+      devtoolsPanelDetachedBounds: sanitizeDevToolsDetachedBounds(
+        parsed.devtoolsPanelDetachedBounds
+      ),
       sourceDoNotAllowList: sanitizeStringList(
         parsed.sourceDoNotAllowList ?? defaults.sourceDoNotAllowList
       ),
@@ -530,6 +562,8 @@ function setSetting(key2, value) {
     settings.sidebarPanelMode = sanitizeSidebarPanelMode(value);
   } else if (key2 === "sidebarDetachedBounds") {
     settings.sidebarDetachedBounds = sanitizeSidebarDetachedBounds(value);
+  } else if (key2 === "devtoolsPanelDetachedBounds") {
+    settings.devtoolsPanelDetachedBounds = sanitizeDevToolsDetachedBounds(value);
   } else if (key2 === "sourceDoNotAllowList") {
     settings.sourceDoNotAllowList = sanitizeStringList(value);
   } else if (key2 === "chatProvider") {
@@ -2589,6 +2623,9 @@ class DevToolsSession {
   entryCounter = 0;
   // Track in-flight network requests for matching response data
   pendingRequests = /* @__PURE__ */ new Map();
+  // Notified whenever a captured buffer mutates so the DevTools panel can
+  // refresh independent of agent actions (e.g. while a user browses).
+  onCaptureChange = null;
   // Named handlers so we can remove them on detach/destroy (fixes listener leak)
   onDetach = () => {
     this.attached = false;
@@ -2604,6 +2641,27 @@ class DevToolsSession {
   get isAttached() {
     return this.attached;
   }
+  /**
+   * Register a callback invoked whenever a captured console/network/error
+   * entry is added or updated. Used to push live updates to the DevTools
+   * panel while a user browses (not just when an agent acts).
+   */
+  setOnCaptureChange(cb) {
+    this.onCaptureChange = cb;
+  }
+  /**
+   * Enable all capture domains (console, network, errors) in one call.
+   * Idempotent per-domain. Used by the panel-open path so manual browsing is
+   * captured without requiring an agent tool invocation.
+   */
+  async enableCapture() {
+    await this.ensureConsoleDomain();
+    await this.ensureNetworkDomain();
+    await this.ensureErrorCapture();
+  }
+  notifyCaptureChange() {
+    this.onCaptureChange?.();
+  }
   async ensureAttached() {
     if (this.attached) return;
     if (this.attachingPromise) return this.attachingPromise;
@@ -2654,6 +2712,7 @@ class DevToolsSession {
   }
   destroy() {
     this.detach();
+    this.onCaptureChange = null;
     this.consoleBuffer = [];
     this.networkBuffer = [];
     this.errorBuffer = [];
@@ -3111,6 +3170,7 @@ class DevToolsSession {
     if (this.consoleBuffer.length > MAX_CONSOLE_ENTRIES) {
       this.consoleBuffer = this.consoleBuffer.slice(-MAX_CONSOLE_ENTRIES);
     }
+    this.notifyCaptureChange();
   }
   // --- Network events ---
   onNetworkRequest(params) {
@@ -3139,6 +3199,7 @@ class DevToolsSession {
       if (oldest !== void 0) this.pendingRequests.delete(oldest);
     }
     this.pendingRequests.set(requestId, { entry });
+    this.notifyCaptureChange();
   }
   onNetworkResponse(params) {
     const requestId = params.requestId;
@@ -3154,6 +3215,7 @@ class DevToolsSession {
     if (contentLength) {
       pending.entry.contentLength = parseInt(contentLength, 10) || void 0;
     }
+    this.notifyCaptureChange();
   }
   onNetworkFinished(params) {
     const requestId = params.requestId;
@@ -3168,6 +3230,7 @@ class DevToolsSession {
     }
     pending.entry.contentLength = pending.entry.contentLength ?? (params.encodedDataLength || void 0);
     this.pendingRequests.delete(requestId);
+    this.notifyCaptureChange();
   }
   onNetworkFailed(params) {
     const requestId = params.requestId;
@@ -3182,6 +3245,7 @@ class DevToolsSession {
       );
     }
     this.pendingRequests.delete(requestId);
+    this.notifyCaptureChange();
   }
   // --- Error events ---
   onExceptionThrown(params) {
@@ -3208,6 +3272,7 @@ class DevToolsSession {
     if (this.errorBuffer.length > MAX_ERROR_ENTRIES) {
       this.errorBuffer = this.errorBuffer.slice(-MAX_ERROR_ENTRIES);
     }
+    this.notifyCaptureChange();
   }
 }
 function mapConsoleLevel(level) {
@@ -3931,8 +3996,19 @@ const ContentChannels = {
 };
 const DevToolsChannels = {
   DEVTOOLS_PANEL_TOGGLE: "devtools-panel:toggle",
+  DEVTOOLS_PANEL_CLOSE: "devtools-panel:close",
+  DEVTOOLS_PANEL_OPEN_TAB: "devtools-panel:open-tab",
+  DEVTOOLS_PANEL_SELECT_TAB: "devtools-panel:select-tab",
+  DEVTOOLS_PANEL_STATE_GET: "devtools-panel:state-get",
   DEVTOOLS_PANEL_STATE: "devtools-panel:state",
-  DEVTOOLS_PANEL_RESIZE: "devtools-panel:resize"
+  DEVTOOLS_PANEL_RESIZE_START: "devtools-panel:resize-start",
+  DEVTOOLS_PANEL_RESIZE: "devtools-panel:resize",
+  DEVTOOLS_PANEL_RESIZE_COMMIT: "devtools-panel:resize-commit",
+  DEVTOOLS_PANEL_POPOUT: "devtools-panel:popout",
+  DEVTOOLS_PANEL_DOCK: "devtools-panel:dock",
+  DEVTOOLS_PANEL_HOST_STATE_GET: "devtools-panel:host-state-get",
+  DEVTOOLS_PANEL_HOST_STATE: "devtools-panel:host-state",
+  DEVTOOLS_PAGE_MAP_REVEAL: "devtools-panel:page-map:reveal"
 };
 const DownloadChannels = {
   DOWNLOAD_STARTED: "download:started",
@@ -7206,6 +7282,236 @@ function sendSafe(wc, channel, ...args) {
     }
   }
 }
+function closeDetachedViewWindow(state2, host) {
+  const detachedWindow = host.getWindow(state2);
+  if (!detachedWindow) return false;
+  host.setWindow(state2, null);
+  host.setClosing(state2, true);
+  detachedWindow.once("closed", () => {
+    host.setClosing(state2, false);
+  });
+  detachedWindow.close();
+  return true;
+}
+function moveDetachedViewToMainWindow(state2, host) {
+  const view = host.getView(state2);
+  host.getWindow(state2)?.contentView.removeChildView(view);
+  state2.mainWindow.contentView.addChildView(view);
+}
+function createDetachedViewWindow(state2, host) {
+  const detachedWindow = new electron.BaseWindow(host.createWindowOptions(state2));
+  const view = host.getView(state2);
+  state2.mainWindow.contentView.removeChildView(view);
+  detachedWindow.contentView.addChildView(view);
+  host.setWindow(state2, detachedWindow);
+  detachedWindow.on("resize", () => {
+    host.layoutView(state2);
+    host.persistBounds(state2);
+  });
+  detachedWindow.on("move", () => host.persistBounds(state2));
+  detachedWindow.on("close", (event) => {
+    if (host.isClosing(state2)) return;
+    event.preventDefault();
+    host.onNativeClose(state2);
+  });
+  detachedWindow.on("closed", () => {
+    if (host.getWindow(state2) !== detachedWindow) return;
+    host.onUnexpectedClosed(state2, detachedWindow);
+  });
+  return detachedWindow;
+}
+const devToolsDetachedHost = {
+  getWindow: (state2) => state2.devtoolsPanelWindow,
+  setWindow: (state2, window2) => {
+    state2.devtoolsPanelWindow = window2;
+  },
+  isClosing: (state2) => state2.devtoolsPanelWindowClosing,
+  setClosing: (state2, closing) => {
+    state2.devtoolsPanelWindowClosing = closing;
+  },
+  getView: (state2) => state2.devtoolsPanelView
+};
+function setDevToolsPanelMode(state2, mode) {
+  state2.uiState.devtoolsPanelMode = mode;
+}
+function persistDetachedBounds$1(state2) {
+  const devtoolsWindow = state2.devtoolsPanelWindow;
+  if (!devtoolsWindow || devtoolsWindow.isDestroyed()) return;
+  const bounds = devtoolsWindow.getBounds();
+  state2.uiState.devtoolsPanelDetachedBounds = {
+    x: bounds.x,
+    y: bounds.y,
+    width: bounds.width,
+    height: bounds.height
+  };
+  setSetting(
+    "devtoolsPanelDetachedBounds",
+    state2.uiState.devtoolsPanelDetachedBounds
+  );
+}
+function moveDevToolsToMainWindow(state2) {
+  moveDetachedViewToMainWindow(state2, devToolsDetachedHost);
+}
+function isDevToolsPanelDocked(state2) {
+  return state2.uiState.devtoolsPanelMode === "docked";
+}
+function isDevToolsPanelDetached(state2) {
+  return state2.uiState.devtoolsPanelMode === "detached";
+}
+function getDevToolsPanelHostState(state2) {
+  return {
+    open: state2.uiState.devtoolsPanelMode !== "closed",
+    detached: isDevToolsPanelDetached(state2),
+    height: state2.uiState.devtoolsPanelHeight
+  };
+}
+function emitDevToolsPanelHostState(state2) {
+  const panelState = getDevToolsPanelHostState(state2);
+  sendSafe(
+    state2.chromeView.webContents,
+    Channels.DEVTOOLS_PANEL_HOST_STATE,
+    panelState
+  );
+  sendSafe(
+    state2.devtoolsPanelView.webContents,
+    Channels.DEVTOOLS_PANEL_HOST_STATE,
+    panelState
+  );
+  return panelState;
+}
+function closeDetachedDevToolsPanelWindow(state2) {
+  return closeDetachedViewWindow(state2, devToolsDetachedHost);
+}
+function layoutDetachedDevToolsPanel(state2) {
+  if (!state2.devtoolsPanelWindow) return;
+  const [width, height] = state2.devtoolsPanelWindow.getContentSize();
+  state2.devtoolsPanelView.setBounds({ x: 0, y: 0, width, height });
+}
+function toggleDockedDevToolsPanel(state2, hooks) {
+  if (isDevToolsPanelDetached(state2)) {
+    state2.devtoolsPanelWindow?.focus();
+    return getDevToolsPanelHostState(state2);
+  }
+  setDevToolsPanelMode(
+    state2,
+    isDevToolsPanelDocked(state2) ? "closed" : "docked"
+  );
+  hooks.relayout();
+  return emitDevToolsPanelHostState(state2);
+}
+function resizeDockedDevToolsPanel(state2, height, relayout) {
+  state2.uiState.devtoolsPanelHeight = Math.round(height);
+  if (isDevToolsPanelDocked(state2)) {
+    relayout();
+  }
+  return emitDevToolsPanelHostState(state2);
+}
+function detachDevToolsPanel(state2, hooks) {
+  if (state2.devtoolsPanelWindow) {
+    state2.devtoolsPanelWindow.focus();
+    return getDevToolsPanelHostState(state2);
+  }
+  const detachedBounds = state2.uiState.devtoolsPanelDetachedBounds;
+  const devtoolsWindow = createDetachedViewWindow(state2, {
+    ...devToolsDetachedHost,
+    createWindowOptions: () => ({
+      ...typeof detachedBounds?.x === "number" ? { x: detachedBounds.x } : {},
+      ...typeof detachedBounds?.y === "number" ? { y: detachedBounds.y } : {},
+      width: Math.max(
+        DETACHED_DEVTOOLS_MIN_WIDTH,
+        Math.round(detachedBounds?.width ?? DETACHED_DEVTOOLS_DEFAULT_WIDTH)
+      ),
+      height: Math.max(
+        DETACHED_DEVTOOLS_MIN_HEIGHT,
+        Math.round(detachedBounds?.height ?? DETACHED_DEVTOOLS_DEFAULT_HEIGHT)
+      ),
+      minWidth: DETACHED_DEVTOOLS_MIN_WIDTH,
+      minHeight: DETACHED_DEVTOOLS_MIN_HEIGHT,
+      frame: true,
+      show: false,
+      backgroundColor: "#1a1a1e",
+      title: "Vessel DevTools",
+      icon: hooks.getWindowIconPath()
+    }),
+    layoutView: layoutDetachedDevToolsPanel,
+    persistBounds: persistDetachedBounds$1,
+    onNativeClose: () => dockDevToolsPanel(state2, hooks),
+    onUnexpectedClosed: () => {
+      state2.devtoolsPanelWindow = null;
+      setDevToolsPanelMode(state2, "docked");
+      state2.mainWindow.contentView.addChildView(state2.devtoolsPanelView);
+      hooks.relayout();
+      emitDevToolsPanelHostState(state2);
+    }
+  });
+  setDevToolsPanelMode(state2, "detached");
+  hooks.relayout();
+  layoutDetachedDevToolsPanel(state2);
+  devtoolsWindow.show();
+  devtoolsWindow.focus();
+  return emitDevToolsPanelHostState(state2);
+}
+function dockDevToolsPanel(state2, hooks) {
+  const devtoolsWindow = state2.devtoolsPanelWindow;
+  setDevToolsPanelMode(state2, "docked");
+  if (devtoolsWindow) {
+    moveDevToolsToMainWindow(state2);
+    hooks.relayout();
+    closeDetachedDevToolsPanelWindow(state2);
+    state2.mainWindow.focus();
+  } else {
+    hooks.relayout();
+  }
+  return emitDevToolsPanelHostState(state2);
+}
+function closeDevToolsPanel(state2, hooks) {
+  if (state2.devtoolsPanelWindow) {
+    moveDevToolsToMainWindow(state2);
+    closeDetachedDevToolsPanelWindow(state2);
+  }
+  setDevToolsPanelMode(state2, "closed");
+  hooks.relayout();
+  return emitDevToolsPanelHostState(state2);
+}
+function registerDisabledDevToolsPanelHandlers(ipc) {
+  const disabledDevToolsState = {
+    open: false,
+    detached: false,
+    height: 0
+  };
+  const disabledPanelState = {
+    console: [],
+    network: [],
+    errors: [],
+    activity: [],
+    agentTrace: [],
+    pageMap: null
+  };
+  ipc.handle(Channels.DEVTOOLS_PANEL_TOGGLE, () => disabledDevToolsState);
+  ipc.handle(Channels.DEVTOOLS_PANEL_CLOSE, () => disabledDevToolsState);
+  ipc.handle(Channels.DEVTOOLS_PANEL_OPEN_TAB, () => disabledDevToolsState);
+  ipc.handle(Channels.DEVTOOLS_PANEL_STATE_GET, () => disabledPanelState);
+  ipc.handle(Channels.DEVTOOLS_PANEL_RESIZE_START, () => void 0);
+  ipc.handle(Channels.DEVTOOLS_PANEL_RESIZE, () => 0);
+  ipc.handle(Channels.DEVTOOLS_PANEL_RESIZE_COMMIT, () => void 0);
+  ipc.handle(Channels.DEVTOOLS_PANEL_POPOUT, () => disabledDevToolsState);
+  ipc.handle(Channels.DEVTOOLS_PANEL_DOCK, () => disabledDevToolsState);
+  ipc.handle(
+    Channels.DEVTOOLS_PANEL_HOST_STATE_GET,
+    () => disabledDevToolsState
+  );
+}
+const sidebarDetachedHost = {
+  getWindow: (state2) => state2.sidebarWindow,
+  setWindow: (state2, window2) => {
+    state2.sidebarWindow = window2;
+  },
+  isClosing: (state2) => state2.sidebarWindowClosing,
+  setClosing: (state2, closing) => {
+    state2.sidebarWindowClosing = closing;
+  },
+  getView: (state2) => state2.sidebarView
+};
 function setSidebarPanelMode(state2, mode, reason = "user") {
   state2.uiState.sidebarPanelMode = mode;
   if (reason === "user") {
@@ -7225,19 +7531,10 @@ function persistDetachedBounds(state2) {
   setSetting("sidebarDetachedBounds", state2.uiState.sidebarDetachedBounds);
 }
 function closeDetachedSidebarWindow(state2) {
-  const sidebarWindow = state2.sidebarWindow;
-  if (!sidebarWindow) return false;
-  state2.sidebarWindow = null;
-  state2.sidebarWindowClosing = true;
-  sidebarWindow.once("closed", () => {
-    state2.sidebarWindowClosing = false;
-  });
-  sidebarWindow.close();
-  return true;
+  return closeDetachedViewWindow(state2, sidebarDetachedHost);
 }
 function moveSidebarToMainWindow(state2) {
-  state2.sidebarWindow?.contentView.removeChildView(state2.sidebarView);
-  state2.mainWindow.contentView.addChildView(state2.sidebarView);
+  moveDetachedViewToMainWindow(state2, sidebarDetachedHost);
 }
 function getSidebarPanelState(state2) {
   return {
@@ -7297,41 +7594,33 @@ function detachSidebar(state2, hooks) {
   const detachedBounds = state2.uiState.sidebarDetachedBounds;
   const detachedWidth = detachedBounds?.width ?? Math.max(DETACHED_SIDEBAR_DEFAULT_WIDTH, state2.uiState.sidebarWidth);
   const detachedHeight = detachedBounds?.height ?? DETACHED_SIDEBAR_DEFAULT_HEIGHT;
-  const sidebarWindow = new electron.BaseWindow({
-    ...typeof detachedBounds?.x === "number" ? { x: detachedBounds.x } : {},
-    ...typeof detachedBounds?.y === "number" ? { y: detachedBounds.y } : {},
-    width: Math.max(DETACHED_SIDEBAR_MIN_WIDTH, Math.round(detachedWidth)),
-    height: Math.max(DETACHED_SIDEBAR_MIN_HEIGHT, Math.round(detachedHeight)),
-    minWidth: DETACHED_SIDEBAR_MIN_WIDTH,
-    minHeight: DETACHED_SIDEBAR_MIN_HEIGHT,
-    frame: true,
-    show: false,
-    backgroundColor: "#1a1a1e",
-    title: "Vessel Agent",
-    icon: hooks.getWindowIconPath()
+  const sidebarWindow = createDetachedViewWindow(state2, {
+    ...sidebarDetachedHost,
+    createWindowOptions: () => ({
+      ...typeof detachedBounds?.x === "number" ? { x: detachedBounds.x } : {},
+      ...typeof detachedBounds?.y === "number" ? { y: detachedBounds.y } : {},
+      width: Math.max(DETACHED_SIDEBAR_MIN_WIDTH, Math.round(detachedWidth)),
+      height: Math.max(DETACHED_SIDEBAR_MIN_HEIGHT, Math.round(detachedHeight)),
+      minWidth: DETACHED_SIDEBAR_MIN_WIDTH,
+      minHeight: DETACHED_SIDEBAR_MIN_HEIGHT,
+      frame: true,
+      show: false,
+      backgroundColor: "#1a1a1e",
+      title: "Vessel Agent",
+      icon: hooks.getWindowIconPath()
+    }),
+    layoutView: layoutDetachedSidebar,
+    persistBounds: persistDetachedBounds,
+    onNativeClose: () => dockSidebar(state2, hooks),
+    onUnexpectedClosed: () => {
+      state2.sidebarWindow = null;
+      setSidebarPanelMode(state2, "docked");
+      state2.mainWindow.contentView.addChildView(state2.sidebarView);
+      hooks.relayout();
+      emitSidebarPanelState(state2);
+    }
   });
-  state2.mainWindow.contentView.removeChildView(state2.sidebarView);
-  sidebarWindow.contentView.addChildView(state2.sidebarView);
-  state2.sidebarWindow = sidebarWindow;
   setSidebarPanelMode(state2, "detached");
-  sidebarWindow.on("resize", () => {
-    layoutDetachedSidebar(state2);
-    persistDetachedBounds(state2);
-  });
-  sidebarWindow.on("move", () => persistDetachedBounds(state2));
-  sidebarWindow.on("close", (event) => {
-    if (state2.sidebarWindowClosing) return;
-    event.preventDefault();
-    dockSidebar(state2, hooks);
-  });
-  sidebarWindow.on("closed", () => {
-    if (state2.sidebarWindow !== sidebarWindow) return;
-    state2.sidebarWindow = null;
-    setSidebarPanelMode(state2, "docked");
-    state2.mainWindow.contentView.addChildView(state2.sidebarView);
-    hooks.relayout();
-    emitSidebarPanelState(state2);
-  });
   hooks.relayout();
   layoutDetachedSidebar(state2);
   sidebarWindow.show();
@@ -7554,8 +7843,9 @@ function createMainWindow(onTabStateChange) {
     sidebarDetachedBounds: settings2.sidebarDetachedBounds,
     focusMode: false,
     settingsOpen: false,
-    devtoolsPanelOpen: false,
-    devtoolsPanelHeight: DEFAULT_DEVTOOLS_PANEL_HEIGHT
+    devtoolsPanelMode: "closed",
+    devtoolsPanelHeight: DEFAULT_DEVTOOLS_PANEL_HEIGHT,
+    devtoolsPanelDetachedBounds: settings2.devtoolsPanelDetachedBounds
   };
   const tabManager = new TabManager(mainWindow, onTabStateChange);
   const sendToRendererViews = (channel, ...args) => {
@@ -7571,6 +7861,8 @@ function createMainWindow(onTabStateChange) {
     mainWindow,
     sidebarWindow: null,
     sidebarWindowClosing: false,
+    devtoolsPanelWindow: null,
+    devtoolsPanelWindowClosing: false,
     chromeView,
     sidebarView,
     devtoolsPanelView,
@@ -7582,6 +7874,7 @@ function createMainWindow(onTabStateChange) {
   mainWindow.on("focus", () => layoutViews(state2));
   mainWindow.on("closed", () => {
     closeDetachedSidebarWindow(state2);
+    closeDetachedDevToolsPanelWindow(state2);
   });
   sidebarView.webContents.on("context-menu", (event, params) => {
     event.preventDefault();
@@ -7610,7 +7903,9 @@ function layoutViews(state2) {
   const chromeHeight = uiState.focusMode ? 0 : CHROME_HEIGHT;
   const sidebarAttached = isSidebarAttached(state2);
   const sidebarWidth = sidebarAttached ? uiState.sidebarWidth : 0;
-  const devtoolsHeight = uiState.devtoolsPanelOpen ? uiState.devtoolsPanelHeight : 0;
+  const devtoolsDocked = isDevToolsPanelDocked(state2);
+  const devtoolsDetached = isDevToolsPanelDetached(state2);
+  const devtoolsHeight = devtoolsDocked ? uiState.devtoolsPanelHeight : 0;
   const chromeNeedsFullHeight = uiState.settingsOpen;
   if (chromeNeedsFullHeight) {
     chromeView.setBounds({ x: 0, y: 0, width, height });
@@ -7628,14 +7923,14 @@ function layoutViews(state2) {
     sidebarView.setBounds({ x: width, y: 0, width: 0, height: 0 });
   }
   const contentWidth = width - sidebarWidth;
-  if (uiState.devtoolsPanelOpen) {
+  if (devtoolsDocked) {
     devtoolsPanelView.setBounds({
       x: 0,
       y: height - devtoolsHeight,
       width: contentWidth,
       height: devtoolsHeight
     });
-  } else {
+  } else if (!devtoolsDetached) {
     devtoolsPanelView.setBounds({ x: 0, y: height, width: 0, height: 0 });
   }
   mainWindow.contentView.removeChildView(chromeView);
@@ -7644,8 +7939,10 @@ function layoutViews(state2) {
     mainWindow.contentView.removeChildView(sidebarView);
     mainWindow.contentView.addChildView(sidebarView);
   }
-  mainWindow.contentView.removeChildView(devtoolsPanelView);
-  mainWindow.contentView.addChildView(devtoolsPanelView);
+  if (!devtoolsDetached) {
+    mainWindow.contentView.removeChildView(devtoolsPanelView);
+    mainWindow.contentView.addChildView(devtoolsPanelView);
+  }
   const activeTab = tabManager.getActiveTab();
   if (activeTab) {
     activeTab.view.setBounds({
@@ -7661,7 +7958,8 @@ function resizeSidebarViews(state2) {
   const [width, height] = mainWindow.getContentSize();
   const chromeHeight = uiState.focusMode ? 0 : CHROME_HEIGHT;
   const sidebarWidth = isSidebarAttached(state2) ? uiState.sidebarWidth : 0;
-  const devtoolsHeight = uiState.devtoolsPanelOpen ? uiState.devtoolsPanelHeight : 0;
+  const devtoolsDocked = isDevToolsPanelDocked(state2);
+  const devtoolsHeight = devtoolsDocked ? uiState.devtoolsPanelHeight : 0;
   const contentWidth = width - sidebarWidth;
   if (uiState.sidebarPanelMode !== "detached") {
     sidebarView.setBounds({
@@ -7671,7 +7969,7 @@ function resizeSidebarViews(state2) {
       height: height - chromeHeight
     });
   }
-  if (uiState.devtoolsPanelOpen) {
+  if (devtoolsDocked) {
     devtoolsPanelView.setBounds({
       x: 0,
       y: height - devtoolsHeight,
@@ -10295,9 +10593,18 @@ function summarizeToolArg(args) {
 function normalizeCodexText(text) {
   return text.trim().toLowerCase().replace(/[‘’]/g, "'").replace(/[“”]/g, '"');
 }
-function looksLikeFailedToolOutput(output) {
+function looksLikeFailedToolOutput(output, toolName) {
   const normalized = normalizeCodexText(output);
-  return normalized.startsWith("error") || normalized.startsWith("warning") || normalized.startsWith("target") || normalized.startsWith("no active tab") || normalized.includes("same page — results may have loaded dynamically") || normalized.includes("could not ") || normalized.includes("did not ");
+  const firstLine = normalized.split(/\n+/).map((line) => line.trim()).find(Boolean) ?? "";
+  if (/^(?:error\b|error\[|blocked\b|warning\b|target\b|no active tab\b|cannot\b|can't\b)/.test(
+    firstLine
+  )) {
+    return true;
+  }
+  if (toolName === "click" && (normalized.includes("page did not change after click") || normalized.includes("element may need a different interaction method"))) {
+    return true;
+  }
+  return toolName === "type_text" && /^(?:could not|did not|no focused|no visible)/.test(firstLine);
 }
 function looksLikeTravelFareContext(text) {
   const normalized = normalizeCodexText(text);
@@ -10305,7 +10612,7 @@ function looksLikeTravelFareContext(text) {
 }
 function emitCodexToolChunk(onChunk, name, args, output) {
   const summary = summarizeToolArg(args);
-  const argSummary = looksLikeFailedToolOutput(output) ? ["⚠ failed", summary].filter(Boolean).join(" ") : summary;
+  const argSummary = looksLikeFailedToolOutput(output, name) ? ["⚠ failed", summary].filter(Boolean).join(" ") : summary;
   onChunk(`
 <<tool:${name}${argSummary ? ":" + argSummary : ""}>>
 `);
@@ -10970,7 +11277,10 @@ ${latestToolResultPreview || ""}`
           toolHistoryCount += 1;
           latestToolResultPreview = previewToolResult(output.output);
           const outputText = toolResultTextContent(output.output);
-          const toolSucceeded = !looksLikeFailedToolOutput(outputText);
+          const toolSucceeded = !looksLikeFailedToolOutput(
+            outputText,
+            prepared.prepared.name
+          );
           if (toolSucceeded && isRealProgressTool(prepared.prepared.name)) {
             failedClickCountSinceProgress = 0;
           }
@@ -10979,7 +11289,7 @@ ${latestToolResultPreview || ""}`
             searchToolQuery,
             toolSucceeded
           );
-          if (prepared.prepared.name === "click" && looksLikeFailedToolOutput(outputText)) {
+          if (prepared.prepared.name === "click" && looksLikeFailedToolOutput(outputText, prepared.prepared.name)) {
             failedClickCountSinceProgress += 1;
             currentInput.push(
               buildCodexFailedClickRecoveryInput(
@@ -22978,7 +23288,7 @@ function registerPrivateIpcHandlers(state2) {
   });
   ipc.handle(Channels.FOCUS_MODE_TOGGLE, () => false);
   ipc.handle(Channels.SIDEBAR_TOGGLE, () => ({ open: false, width: 0 }));
-  ipc.handle(Channels.DEVTOOLS_PANEL_TOGGLE, () => ({ open: false }));
+  registerDisabledDevToolsPanelHandlers(ipc);
   ipc.handle(
     Channels.FIND_IN_PAGE_START,
     (_e, text, options) => {
@@ -23242,7 +23552,7 @@ function registerSecondaryIpcHandlers(state2) {
   ipc.handle(Channels.SETTINGS_VISIBILITY, () => false);
   ipc.handle(Channels.FOCUS_MODE_TOGGLE, () => false);
   ipc.handle(Channels.SIDEBAR_TOGGLE, () => ({ open: false, width: 0 }));
-  ipc.handle(Channels.DEVTOOLS_PANEL_TOGGLE, () => ({ open: false }));
+  registerDisabledDevToolsPanelHandlers(ipc);
   ipc.handle(
     Channels.FIND_IN_PAGE_START,
     (_e, text, options) => {
@@ -24775,8 +25085,14 @@ const DANGEROUS_DEVTOOLS_ACTIONS = /* @__PURE__ */ new Set([
 ]);
 let stateListener = null;
 const activityLog = [];
+const agentTraceLog = [];
 const MAX_ACTIVITY_ENTRIES = 100;
+const MAX_TRACE_ENTRIES = 200;
 let activityCounter = 0;
+let traceCounter = 0;
+let latestPageMap = null;
+let pageMapRefreshInFlight = false;
+const traceEntriesByActionId = /* @__PURE__ */ new Map();
 function setDevToolsPanelListener(listener) {
   stateListener = listener;
 }
@@ -24786,14 +25102,325 @@ function getDevToolsPanelState(tabId) {
     console: session?.getConsoleLogs() ?? [],
     network: session?.getNetworkLog() ?? [],
     errors: session?.getErrors() ?? [],
-    activity: activityLog
+    activity: activityLog,
+    agentTrace: agentTraceLog,
+    pageMap: latestPageMap
   };
 }
-function broadcastState(tabManager) {
+function broadcastDevToolsPanelState(tabManager) {
   if (!stateListener) return;
   const tabId = tabManager.getActiveTabId();
   stateListener(getDevToolsPanelState(tabId));
 }
+let panelBroadcastScheduled = false;
+let panelBroadcastTabManager = null;
+let panelCapturedTabId = null;
+const panelOwnedCaptureTabs = /* @__PURE__ */ new Set();
+function schedulePanelBroadcast(tabManager) {
+  panelBroadcastTabManager = tabManager;
+  if (panelBroadcastScheduled) return;
+  panelBroadcastScheduled = true;
+  queueMicrotask(() => {
+    panelBroadcastScheduled = false;
+    if (panelBroadcastTabManager) {
+      broadcastDevToolsPanelState(panelBroadcastTabManager);
+    }
+  });
+}
+function releasePanelCaptureForTab(tabId) {
+  const session = getSession(tabId);
+  session?.setOnCaptureChange(null);
+  if (panelCapturedTabId === tabId) {
+    panelCapturedTabId = null;
+  }
+  if (panelOwnedCaptureTabs.delete(tabId)) {
+    destroySession(tabId);
+  }
+}
+function markActiveSessionToolOwned(tabManager) {
+  const tabId = tabManager.getActiveTabId();
+  if (tabId) {
+    panelOwnedCaptureTabs.delete(tabId);
+  }
+}
+async function enableCaptureForTab(tabManager) {
+  const tabId = tabManager.getActiveTabId();
+  if (!tabId) return;
+  if (panelCapturedTabId && panelCapturedTabId !== tabId) {
+    releasePanelCaptureForTab(panelCapturedTabId);
+  }
+  let session = getSession(tabId);
+  const panelCreatedSession = !session;
+  session ??= getOrCreateSession(tabManager);
+  if (panelCreatedSession) {
+    panelOwnedCaptureTabs.add(tabId);
+  }
+  panelCapturedTabId = tabId;
+  session.setOnCaptureChange(() => {
+    if (panelCapturedTabId === tabId) {
+      schedulePanelBroadcast(tabManager);
+    }
+  });
+  await session.enableCapture();
+  if (panelCapturedTabId === tabId) {
+    broadcastDevToolsPanelState(tabManager);
+  }
+}
+function disableCaptureForTab(tabId) {
+  const targetTabId = panelCapturedTabId;
+  if (targetTabId) {
+    releasePanelCaptureForTab(targetTabId);
+  }
+  {
+    for (const ownedTabId of [...panelOwnedCaptureTabs]) {
+      releasePanelCaptureForTab(ownedTabId);
+    }
+    panelBroadcastTabManager = null;
+  }
+}
+function pushTrace(entry) {
+  const traceEntry = {
+    id: ++traceCounter,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    ...entry
+  };
+  agentTraceLog.push(traceEntry);
+  if (agentTraceLog.length > MAX_TRACE_ENTRIES) {
+    const removed = agentTraceLog.splice(
+      0,
+      agentTraceLog.length - MAX_TRACE_ENTRIES
+    );
+    for (const trace of removed) {
+      if (trace.actionId) traceEntriesByActionId.delete(trace.actionId);
+    }
+  }
+  return traceEntry;
+}
+function formatTraceActionName(name) {
+  return name.replace(/^devtools_/, "").split(/[_-]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function traceDetail(event) {
+  const sourcePrefix = event.source === "ai" ? "Agent" : event.source.toUpperCase();
+  return [sourcePrefix, event.detail].filter(Boolean).join(": ").slice(0, 240);
+}
+function recordDevToolsAgentAction(event, tabManager) {
+  const actionName = formatTraceActionName(event.name);
+  if (event.phase === "started") {
+    const entry = pushTrace({
+      actionId: event.actionId,
+      kind: "tool-start",
+      title: `Started ${actionName}`,
+      detail: traceDetail(event),
+      status: "running",
+      tool: event.name
+    });
+    traceEntriesByActionId.set(event.actionId, entry);
+    broadcastDevToolsPanelState(tabManager);
+    return;
+  }
+  const startEntry = traceEntriesByActionId.get(event.actionId);
+  if (startEntry) {
+    startEntry.status = event.phase === "completed" ? "completed" : "failed";
+    startEntry.durationMs = event.durationMs;
+    if (event.phase === "waiting-approval") {
+      startEntry.status = "running";
+      startEntry.detail = traceDetail(event);
+    }
+  }
+  if (event.phase === "waiting-approval") {
+    broadcastDevToolsPanelState(tabManager);
+    return;
+  }
+  pushTrace({
+    actionId: event.actionId,
+    kind: event.phase === "completed" ? "tool-complete" : "tool-error",
+    title: event.phase === "completed" ? `Completed ${actionName}` : `${event.phase === "rejected" ? "Rejected" : "Failed"} ${actionName}`,
+    detail: traceDetail(event),
+    status: event.phase === "completed" ? "completed" : "failed",
+    tool: event.name,
+    durationMs: event.durationMs
+  });
+  traceEntriesByActionId.delete(event.actionId);
+  broadcastDevToolsPanelState(tabManager);
+}
+const PAGE_MAP_SCRIPT = `
+(() => {
+  const INTERACTIVE_SELECTOR = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    "[role='button']",
+    "[role='link']",
+    "[role='checkbox']",
+    "[role='radio']",
+    "[role='switch']",
+    "[role='tab']",
+    "[role='menuitem']",
+    "[contenteditable='true']",
+    "[tabindex]:not([tabindex='-1'])"
+  ].join(",");
+
+  function round(value) {
+    return Math.round(value * 10) / 10;
+  }
+
+  function textFor(el) {
+    const direct =
+      el.getAttribute("aria-label") ||
+      el.getAttribute("title") ||
+      el.getAttribute("placeholder") ||
+      el.getAttribute("alt") ||
+      el.value ||
+      el.innerText ||
+      el.textContent ||
+      "";
+    return String(direct).replace(/\\s+/g, " ").trim().slice(0, 140);
+  }
+
+  function selectorFor(el) {
+    if (el.id) return "#" + CSS.escape(el.id);
+    const parts = [];
+    let node = el;
+    while (node && node.nodeType === Node.ELEMENT_NODE && parts.length < 4) {
+      let part = node.localName;
+      const classes = Array.from(node.classList || []).slice(0, 2);
+      if (classes.length) part += "." + classes.map((c) => CSS.escape(c)).join(".");
+      const parent = node.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter((child) => child.localName === node.localName);
+        if (siblings.length > 1) part += ":nth-of-type(" + (siblings.indexOf(node) + 1) + ")";
+      }
+      parts.unshift(part);
+      node = parent;
+    }
+    return parts.join(" > ");
+  }
+
+  function isVisible(el, style, rect) {
+    return rect.width > 0 &&
+      rect.height > 0 &&
+      style.display !== "none" &&
+      style.visibility !== "hidden" &&
+      Number(style.opacity || "1") > 0.01;
+  }
+
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    scrollX: window.scrollX,
+    scrollY: window.scrollY,
+  };
+
+  const candidates = Array.from(document.querySelectorAll(INTERACTIVE_SELECTOR));
+  const elements = candidates.slice(0, 120).map((el, index) => {
+    const style = window.getComputedStyle(el);
+    const rect = el.getBoundingClientRect();
+    const visible = isVisible(el, style, rect);
+    const disabled = Boolean(el.disabled) || el.getAttribute("aria-disabled") === "true";
+    const inViewport = rect.bottom >= 0 && rect.right >= 0 && rect.top <= viewport.height && rect.left <= viewport.width;
+    let issue = "";
+    let blocked = false;
+    if (!visible) issue = "hidden";
+    else if (!inViewport) issue = "offscreen";
+    else {
+      const centerX = Math.min(Math.max(rect.left + rect.width / 2, 0), viewport.width - 1);
+      const centerY = Math.min(Math.max(rect.top + rect.height / 2, 0), viewport.height - 1);
+      const top = document.elementFromPoint(centerX, centerY);
+      if (top && top !== el && !el.contains(top)) {
+        blocked = true;
+        issue = "covered by " + top.localName;
+      }
+    }
+    return {
+      id: index + 1,
+      tag: el.localName,
+      role: el.getAttribute("role") || undefined,
+      label: textFor(el) || "(unlabeled)",
+      selector: selectorFor(el),
+      href: el.href || undefined,
+      type: el.type || undefined,
+      visible,
+      interactable: visible && inViewport && !disabled && !blocked,
+      disabled,
+      issue: issue || undefined,
+      bounds: {
+        x: round(rect.x),
+        y: round(rect.y),
+        width: round(rect.width),
+        height: round(rect.height),
+      },
+    };
+  });
+
+  const counts = elements.reduce((acc, element) => {
+    acc.total += 1;
+    if (element.visible) acc.visible += 1;
+    if (element.interactable) acc.interactable += 1;
+    if (element.disabled) acc.disabled += 1;
+    if (element.issue && element.issue.startsWith("covered")) acc.blocked += 1;
+    return acc;
+  }, { total: 0, visible: 0, interactable: 0, disabled: 0, blocked: 0 });
+
+  return {
+    timestamp: new Date().toISOString(),
+    pageUrl: location.href,
+    title: document.title || "",
+    viewport,
+    counts,
+    elements,
+    accessIssues: elements.length === 0 ? ["No obvious interactive elements found."] : [],
+  };
+})()
+`;
+async function capturePageMapSnapshot(tabManager) {
+  const tab = tabManager.getActiveTab();
+  if (!tab || tab.view.webContents.isDestroyed()) {
+    return {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: "",
+      title: "No active tab",
+      viewport: { width: 0, height: 0, scrollX: 0, scrollY: 0 },
+      counts: { total: 0, visible: 0, interactable: 0, disabled: 0, blocked: 0 },
+      elements: [],
+      accessIssues: ["No active tab is available."]
+    };
+  }
+  try {
+    return await tab.view.webContents.executeJavaScript(PAGE_MAP_SCRIPT, true);
+  } catch (error) {
+    return {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      pageUrl: tab.view.webContents.getURL(),
+      title: "Page map unavailable",
+      viewport: { width: 0, height: 0, scrollX: 0, scrollY: 0 },
+      counts: { total: 0, visible: 0, interactable: 0, disabled: 0, blocked: 0 },
+      elements: [],
+      accessIssues: [
+        error instanceof Error ? error.message : "Could not inspect active page."
+      ]
+    };
+  }
+}
+async function refreshDevToolsPageMap(tabManager) {
+  if (pageMapRefreshInFlight) {
+    return getDevToolsPanelState(tabManager.getActiveTabId());
+  }
+  pageMapRefreshInFlight = true;
+  try {
+    latestPageMap = await capturePageMapSnapshot(tabManager);
+  } finally {
+    pageMapRefreshInFlight = false;
+  }
+  broadcastDevToolsPanelState(tabManager);
+  return getDevToolsPanelState(tabManager.getActiveTabId());
+}
+function broadcastState(tabManager) {
+  broadcastDevToolsPanelState(tabManager);
+  void refreshDevToolsPageMap(tabManager);
+}
 async function withDevToolsAction(runtime2, tabManager, name, args, executor) {
   try {
     assertFeatureUnlocked("devtools", "DevTools");
@@ -24802,6 +25429,7 @@ async function withDevToolsAction(runtime2, tabManager, name, args, executor) {
       `Error: ${error instanceof Error ? error.message : "DevTools require Vessel Premium."}`
     );
   }
+  markActiveSessionToolOwned(tabManager);
   const activityEntry = {
     id: ++activityCounter,
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -30420,6 +31048,76 @@ async function togglePictureInPicture(tabManager) {
     return false;
   }
 }
+const REVEAL_SCRIPT = `
+(function () {
+  var selector = __SELECTOR_JSON__;
+  try {
+    var el = document.querySelector(selector);
+  } catch (e) {
+    return "invalid-selector";
+  }
+  if (!el) return "not-found";
+  try {
+    el.scrollIntoView({ block: "center", behavior: "smooth" });
+  } catch (e) {}
+  var rect = el.getBoundingClientRect();
+  var overlay = document.createElement("div");
+  overlay.setAttribute("data-vessel-devtools-reveal", "");
+  overlay.style.cssText = [
+    "position: fixed",
+    "left: " + rect.left + "px",
+    "top: " + rect.top + "px",
+    "width: " + rect.width + "px",
+    "height: " + rect.height + "px",
+    "box-sizing: border-box",
+    "border: 2px solid #4f8cff",
+    "background: rgba(79, 140, 255, 0.18)",
+    "border-radius: 4px",
+    "pointer-events: none",
+    "z-index: 2147483647",
+    "transition: opacity 250ms ease-out",
+    "opacity: 1",
+  ].join("; ");
+  document.documentElement.appendChild(overlay);
+  var start = performance.now();
+  function track(now) {
+    var r = el.getBoundingClientRect();
+    overlay.style.left = r.left + "px";
+    overlay.style.top = r.top + "px";
+    overlay.style.width = r.width + "px";
+    overlay.style.height = r.height + "px";
+    if (now - start < 1000) {
+      requestAnimationFrame(track);
+    } else {
+      overlay.style.opacity = "0";
+      setTimeout(function () {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      }, 300);
+    }
+  }
+  requestAnimationFrame(track);
+  return "revealed";
+})();
+`;
+async function revealPageMapElement(tabManager, selector) {
+  const tab = tabManager.getActiveTab();
+  if (!tab || tab.view.webContents.isDestroyed()) {
+    return "no-active-tab";
+  }
+  try {
+    const script = REVEAL_SCRIPT.replace(
+      "__SELECTOR_JSON__",
+      JSON.stringify(selector)
+    );
+    const result = await tab.view.webContents.executeJavaScript(script, true);
+    if (result === "revealed" || result === "not-found" || result === "invalid-selector") {
+      return result;
+    }
+    return "revealed";
+  } catch {
+    return "invalid-selector";
+  }
+}
 const VALID_KIT_CATEGORIES = /* @__PURE__ */ new Set([
   "research",
   "shopping",
@@ -30940,21 +31638,177 @@ function stopScheduler() {
 const KitIdSchema = zod.z.string().min(1);
 const SkillSourceSchema = zod.z.string().min(1).max(1e5);
 const OriginSchema = zod.z.string().min(1);
+const DevToolsHeightSchema = zod.z.number().finite().min(0).max(2e3);
+const DevToolsPageMapRevealSchema = zod.z.object({
+  selector: zod.z.string().min(1)
+});
+const DevToolsPanelTabSchema = zod.z.enum([
+  "console",
+  "network",
+  "activity",
+  "agentTrace",
+  "pageMap"
+]);
+const RendererViewSchema = zod.z.enum(["chrome", "sidebar", "devtools"]);
 function registerSystemHandlers(windowState, sendToRendererViews) {
   const { tabManager } = windowState;
+  let devToolsResizeRecoveryTimer = null;
+  let devToolsResizeActive = false;
+  const relayout = () => layoutViews(windowState);
+  const clearDevToolsResizeRecoveryTimer = () => {
+    if (!devToolsResizeRecoveryTimer) return;
+    clearTimeout(devToolsResizeRecoveryTimer);
+    devToolsResizeRecoveryTimer = null;
+  };
+  const stopDevToolsResize = () => {
+    devToolsResizeActive = false;
+    clearDevToolsResizeRecoveryTimer();
+  };
+  const restoreDevToolsLayoutAfterResize = () => {
+    clearDevToolsResizeRecoveryTimer();
+    if (!devToolsResizeActive) return;
+    devToolsResizeActive = false;
+    relayout();
+  };
+  const scheduleDevToolsResizeRecovery = () => {
+    clearDevToolsResizeRecoveryTimer();
+    devToolsResizeRecoveryTimer = setTimeout(() => {
+      restoreDevToolsLayoutAfterResize();
+    }, 1200);
+  };
+  const maxDockedDevToolsHeight = () => {
+    const [, windowHeight] = windowState.mainWindow.getContentSize();
+    const chromeHeight = windowState.uiState.focusMode ? 0 : CHROME_HEIGHT;
+    return Math.max(
+      MIN_DEVTOOLS_PANEL,
+      Math.min(MAX_DEVTOOLS_PANEL, windowHeight - chromeHeight - 80)
+    );
+  };
+  windowState.mainWindow.once("closed", stopDevToolsResize);
   electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_TOGGLE, (event) => {
     assertTrustedIpcSender(event);
-    windowState.uiState.devtoolsPanelOpen = !windowState.uiState.devtoolsPanelOpen;
-    layoutViews(windowState);
-    return { open: windowState.uiState.devtoolsPanelOpen };
+    stopDevToolsResize();
+    const hostState = toggleDockedDevToolsPanel(windowState, { relayout });
+    if (hostState.open) {
+      void enableCaptureForTab(tabManager);
+    } else {
+      disableCaptureForTab();
+    }
+    return hostState;
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_CLOSE, (event) => {
+    assertTrustedIpcSender(event);
+    stopDevToolsResize();
+    const hostState = closeDevToolsPanel(windowState, { relayout });
+    disableCaptureForTab();
+    return hostState;
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_OPEN_TAB, (event, tab) => {
+    assertTrustedIpcSender(event);
+    const selectedTab = parseIpc(DevToolsPanelTabSchema, tab, "tab");
+    stopDevToolsResize();
+    const wasOpen = getDevToolsPanelHostState(windowState).open;
+    if (!wasOpen) {
+      toggleDockedDevToolsPanel(windowState, { relayout });
+      void enableCaptureForTab(tabManager);
+    } else if (getDevToolsPanelHostState(windowState).detached) {
+      windowState.devtoolsPanelWindow?.focus();
+    }
+    emitDevToolsPanelHostState(windowState);
+    sendSafe(
+      windowState.devtoolsPanelView.webContents,
+      Channels.DEVTOOLS_PANEL_SELECT_TAB,
+      selectedTab
+    );
+    if (selectedTab === "pageMap") {
+      void refreshDevToolsPageMap(tabManager);
+    }
+    return getDevToolsPanelHostState(windowState);
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_RESIZE_START, (event) => {
+    assertTrustedIpcSender(event);
+    if (!getDevToolsPanelHostState(windowState).open) return;
+    if (getDevToolsPanelHostState(windowState).detached) return;
+    devToolsResizeActive = true;
+    clearDevToolsResizeRecoveryTimer();
+    const [windowWidth, windowHeight] = windowState.mainWindow.getContentSize();
+    const chromeHeight = windowState.uiState.focusMode ? 0 : CHROME_HEIGHT;
+    const sidebarWidth = isSidebarAttached(windowState) ? windowState.uiState.sidebarWidth : 0;
+    windowState.devtoolsPanelView.setBounds({
+      x: 0,
+      y: chromeHeight,
+      width: windowWidth - sidebarWidth,
+      height: windowHeight - chromeHeight
+    });
+    scheduleDevToolsResizeRecovery();
   });
   electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_RESIZE, (event, height) => {
     assertTrustedIpcSender(event);
-    const clamped = Math.max(MIN_DEVTOOLS_PANEL, Math.min(MAX_DEVTOOLS_PANEL, Math.round(height)));
-    windowState.uiState.devtoolsPanelHeight = clamped;
-    layoutViews(windowState);
+    const validatedHeight = parseIpc(DevToolsHeightSchema, height, "height");
+    const clamped = Math.max(
+      MIN_DEVTOOLS_PANEL,
+      Math.min(maxDockedDevToolsHeight(), Math.round(validatedHeight))
+    );
+    if (devToolsResizeActive) {
+      windowState.uiState.devtoolsPanelHeight = clamped;
+      scheduleDevToolsResizeRecovery();
+      emitDevToolsPanelHostState(windowState);
+      return clamped;
+    }
+    resizeDockedDevToolsPanel(windowState, clamped, relayout);
     return clamped;
   });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_RESIZE_COMMIT, (event) => {
+    assertTrustedIpcSender(event);
+    stopDevToolsResize();
+    relayout();
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_POPOUT, (event) => {
+    assertTrustedIpcSender(event);
+    stopDevToolsResize();
+    return detachDevToolsPanel(windowState, {
+      relayout,
+      getWindowIconPath
+    });
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_DOCK, (event) => {
+    assertTrustedIpcSender(event);
+    stopDevToolsResize();
+    return dockDevToolsPanel(windowState, { relayout });
+  });
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_STATE_GET, async (event) => {
+    assertTrustedIpcSender(event);
+    if (getDevToolsPanelHostState(windowState).open) {
+      void enableCaptureForTab(tabManager);
+    }
+    return await refreshDevToolsPageMap(tabManager);
+  });
+  electron.ipcMain.handle(
+    Channels.DEVTOOLS_PAGE_MAP_REVEAL,
+    async (event, payload) => {
+      assertTrustedIpcSender(event);
+      const { selector } = parseIpc(
+        DevToolsPageMapRevealSchema,
+        payload,
+        "payload"
+      );
+      return await revealPageMapElement(tabManager, selector);
+    }
+  );
+  electron.ipcMain.handle(Channels.DEVTOOLS_PANEL_HOST_STATE_GET, (event) => {
+    assertTrustedIpcSender(event);
+    return getDevToolsPanelHostState(windowState);
+  });
+  electron.ipcMain.on(Channels.RENDERER_VIEW_READY, (event, view) => {
+    assertTrustedIpcSender(event);
+    const readyView = parseIpc(RendererViewSchema, view, "view");
+    if (readyView !== "devtools") return;
+    emitDevToolsPanelHostState(windowState);
+    void refreshDevToolsPageMap(tabManager);
+    if (getDevToolsPanelHostState(windowState).open) {
+      void enableCaptureForTab(tabManager);
+    }
+  });
   electron.ipcMain.handle(Channels.AUTOMATION_GET_INSTALLED, async (event) => {
     assertTrustedIpcSender(event);
     assertFeatureUnlocked("automation_kits", "Skills");
@@ -33344,6 +34198,7 @@ class AgentRuntime {
   tabManager;
   state;
   updateListener = null;
+  actionLifecycleListener = null;
   pendingResolvers = /* @__PURE__ */ new Map();
   undoSnapshots = [];
   mcpUnsubscribe = null;
@@ -33353,6 +34208,9 @@ class AgentRuntime {
       listener(this.getState());
     }
   }
+  setActionLifecycleListener(listener) {
+    this.actionLifecycleListener = listener;
+  }
   /**
    * Release all resources, listeners, and pending promises.
    * Call when the window is closing to prevent memory leaks.
@@ -33371,6 +34229,7 @@ class AgentRuntime {
     this.state.flowState = null;
     this.state.taskTracker = null;
     this.updateListener = null;
+    this.actionLifecycleListener = null;
   }
   getState() {
     const snapshot2 = clone(this.state);
@@ -33675,8 +34534,18 @@ ${progress}
       args,
       tabId
     });
+    const actionStartedAt = Date.now();
     const transcriptStreamId = `action:${action.id}`;
     const transcriptTitle = humanizeActionName(name);
+    this.emitActionLifecycle({
+      actionId: action.id,
+      source,
+      name,
+      args,
+      tabId,
+      phase: "started",
+      detail: summarizeArgs(args)
+    });
     this.publishTranscript({
       source,
       kind: "status",
@@ -33687,6 +34556,16 @@ ${progress}
     });
     const approvalReason = this.getApprovalReason(dangerous, requiresApproval);
     if (approvalReason) {
+      this.emitActionLifecycle({
+        actionId: action.id,
+        source,
+        name,
+        args,
+        tabId,
+        phase: "waiting-approval",
+        detail: approvalReason,
+        durationMs: Date.now() - actionStartedAt
+      });
       this.publishTranscript({
         source,
         kind: "status",
@@ -33697,6 +34576,16 @@ ${progress}
       });
       const approved = await this.awaitApproval(action, approvalReason);
       if (!approved) {
+        this.emitActionLifecycle({
+          actionId: action.id,
+          source,
+          name,
+          args,
+          tabId,
+          phase: "rejected",
+          detail: approvalReason,
+          durationMs: Date.now() - actionStartedAt
+        });
         this.publishTranscript({
           source,
           kind: "status",
@@ -33728,6 +34617,16 @@ ${progress}
         this.pushUndoSnapshot(undoSnapshot);
       }
       this.finishAction(action.id, "completed", summarizeText(result));
+      this.emitActionLifecycle({
+        actionId: action.id,
+        source,
+        name,
+        args,
+        tabId,
+        phase: "completed",
+        detail: summarizeText(result),
+        durationMs: Date.now() - actionStartedAt
+      });
       this.publishTranscript({
         source,
         kind: "status",
@@ -33742,6 +34641,16 @@ ${progress}
       const message = error instanceof Error ? error.message : "Unknown action failure";
       this.state.supervisor.lastError = message;
       this.finishAction(action.id, "failed", void 0, message);
+      this.emitActionLifecycle({
+        actionId: action.id,
+        source,
+        name,
+        args,
+        tabId,
+        phase: "failed",
+        detail: summarizeText(message),
+        durationMs: Date.now() - actionStartedAt
+      });
       this.publishTranscript({
         source,
         kind: "status",
@@ -33753,6 +34662,15 @@ ${progress}
       throw error;
     }
   }
+  emitActionLifecycle(event) {
+    try {
+      this.actionLifecycleListener?.(event);
+    } catch (error) {
+      logger$3.warn("Action lifecycle listener failed", {
+        error: error instanceof Error ? error.message : String(error)
+      });
+    }
+  }
   createUndoSnapshot(name) {
     return {
       id: crypto$1.randomUUID(),
@@ -34326,6 +35244,10 @@ async function bootstrap() {
     if (meta.persistSession) {
       runtime?.onTabStateChanged();
     }
+    if (windowState.uiState.devtoolsPanelMode !== "closed") {
+      void enableCaptureForTab(windowState.tabManager);
+      void refreshDevToolsPageMap(windowState.tabManager);
+    }
   });
   windowStateForShutdown = windowState;
   let didRevealMainWindow = false;
@@ -34342,6 +35264,9 @@ async function bootstrap() {
   }, 8e3);
   const { chromeView, sidebarView, devtoolsPanelView, tabManager } = windowState;
   runtime = new AgentRuntime(tabManager);
+  runtime.setActionLifecycleListener((event) => {
+    recordDevToolsAgentAction(event, tabManager);
+  });
   installAdBlocking(tabManager);
   setDevToolsPanelListener((state2) => {
     sendSafe(devtoolsPanelView.webContents, Channels.DEVTOOLS_PANEL_STATE, state2);