opendevbrowser 0.0.16 → 0.0.17

package/dist/opendevbrowser.js

@@ -2,22 +2,25 @@ import {
   DaemonClient,
   ScriptRunner,
   buildAnnotateResult,
-  buildBlockerArtifacts,
-  classifyBlockerSignal,
-  createBrowserFallbackPort,
-  createConfiguredProviderRuntime,
   createOpenDevBrowserCore,
-  createRequestId,
   executeMacroResolution,
   extractExtension,
   fetchDaemonStatusFromMetadata,
-  runProductVideoWorkflow,
-  runResearchWorkflow,
-  runShoppingWorkflow,
   shapeExecutionPayload,
   startDaemon
-} from "./chunk-ST7CO5FA.js";
-import "./chunk-7W3SPXIB.js";
+} from "./chunk-5J3IFL3X.js";
+import "./chunk-Y2KL55OG.js";
+import "./chunk-TBUCZX4A.js";
+import {
+  createBrowserFallbackPort,
+  createConfiguredProviderRuntime
+} from "./chunk-V7KUDHDG.js";
+import {
+  buildBlockerArtifacts,
+  classifyBlockerSignal,
+  createRequestId
+} from "./chunk-D633UO34.js";
+import "./chunk-FUSXMW3G.js";
 
 // src/cli/remote-manager.ts
 function isLegacyRelayEndpoint(wsEndpoint) {
@@ -40,10 +43,18 @@ var RemoteManager = class {
   connect(options) {
     return this.client.call("session.connect", options);
   }
-  connectRelay(wsEndpoint) {
+  connectRelay(wsEndpoint, options) {
+    const startUrl = typeof options?.startUrl === "string" && options.startUrl.trim().length > 0 ? options.startUrl.trim() : void 0;
     return this.client.call(
       "session.connect",
-      isLegacyRelayEndpoint(wsEndpoint) ? { wsEndpoint, extensionLegacy: true } : { wsEndpoint }
+      isLegacyRelayEndpoint(wsEndpoint) ? {
+        wsEndpoint,
+        extensionLegacy: true,
+        ...startUrl ? { startUrl } : {}
+      } : {
+        wsEndpoint,
+        ...startUrl ? { startUrl } : {}
+      }
     );
   }
   disconnect(sessionId, closeBrowser = false) {
@@ -281,6 +292,17 @@ var RemoteManager = class {
   }
 };
 
+// src/cli/remote-canvas-manager.ts
+var RemoteCanvasManager = class {
+  client;
+  constructor(client) {
+    this.client = client;
+  }
+  execute(command, params = {}) {
+    return this.client.call("canvas.execute", { command, params });
+  }
+};
+
 // src/cli/remote-relay.ts
 var emptyStatus = {
   running: false,
@@ -289,6 +311,7 @@ var emptyStatus = {
   cdpConnected: false,
   annotationConnected: false,
   opsConnected: false,
+  canvasConnected: false,
   pairingRequired: false,
   instanceId: "",
   epoch: 0,
@@ -300,6 +323,7 @@ var emptyStatus = {
     cdpConnected: false,
     annotationConnected: false,
     opsConnected: false,
+    canvasConnected: false,
     pairingRequired: false
   }
 };
@@ -309,6 +333,7 @@ var RemoteRelay = class {
   lastCdpUrl = null;
   lastAnnotationUrl = null;
   lastOpsUrl = null;
+  lastCanvasUrl = null;
   constructor(client) {
     this.client = client;
   }
@@ -322,11 +347,14 @@ var RemoteRelay = class {
       this.lastAnnotationUrl = typeof annotationUrl === "string" ? annotationUrl : null;
       const opsUrl = await this.client.call("relay.opsUrl");
       this.lastOpsUrl = typeof opsUrl === "string" ? opsUrl : null;
+      const canvasUrl = await this.client.call("relay.canvasUrl");
+      this.lastCanvasUrl = typeof canvasUrl === "string" ? canvasUrl : null;
     } catch {
       this.lastStatus = emptyStatus;
       this.lastCdpUrl = null;
       this.lastAnnotationUrl = null;
       this.lastOpsUrl = null;
+      this.lastCanvasUrl = null;
     }
   }
   status() {
@@ -341,6 +369,9 @@ var RemoteRelay = class {
   getOpsUrl() {
     return this.lastOpsUrl;
   }
+  getCanvasUrl() {
+    return this.lastCanvasUrl;
+  }
 };
 
 // src/skills/skill-nudge.ts
@@ -418,18 +449,25 @@ import { tool } from "@opencode-ai/plugin";
 function ok(data) {
   return JSON.stringify({ ok: true, ...data });
 }
-function failure(message, code) {
+function failure(message, code, details) {
   return JSON.stringify({
     ok: false,
     error: {
       message,
-      code
+      code,
+      ...details ? { details } : {}
     }
   });
 }
 function serializeError(error) {
   if (error instanceof Error) {
-    return { message: error.message };
+    const detailCarrier = error;
+    const details = detailCarrier.details && typeof detailCarrier.details === "object" && !Array.isArray(detailCarrier.details) ? detailCarrier.details : detailCarrier.blocker && typeof detailCarrier.blocker === "object" && !Array.isArray(detailCarrier.blocker) ? { blocker: detailCarrier.blocker } : void 0;
+    return {
+      message: error.message,
+      code: detailCarrier.code,
+      details
+    };
   }
   return { message: "Unknown error" };
 }
@@ -523,7 +561,7 @@ function createLaunchTool(deps) {
               return failure(buildExtensionMissingMessage(diagnostics.message), "extension_not_connected");
             }
             try {
-              result = await deps.manager.connectRelay(relayUrl);
+              result = args.startUrl ? await deps.manager.connectRelay(relayUrl, { startUrl: args.startUrl }) : await deps.manager.connectRelay(relayUrl);
               usedRelay = true;
             } catch (error) {
               const errorMessage = serializeError(error).message;
@@ -561,9 +599,6 @@ function createLaunchTool(deps) {
               return failure(buildManagedFailureMessage(error), "launch_failed");
             }
           }
-          if (usedRelay && args.startUrl && result.activeTargetId) {
-            await deps.manager.goto(result.sessionId, args.startUrl, "load", 3e4);
-          }
           const warnings = result.warnings ?? [];
           return ok({
             sessionId: result.sessionId,
@@ -770,6 +805,7 @@ function createConnectTool(deps) {
       wsEndpoint: z2.string().optional().describe("Full WebSocket endpoint to connect to"),
       host: z2.string().optional().describe("Host for /json/version lookup"),
       port: z2.number().int().optional().describe("Port for /json/version lookup"),
+      startUrl: z2.string().optional().describe("Open this URL immediately after connect"),
       extensionLegacy: z2.boolean().optional().describe("Use legacy extension relay (/cdp) instead of ops")
     },
     async execute(args) {
@@ -777,6 +813,7 @@ function createConnectTool(deps) {
         await deps.relay?.refresh?.();
         const wsEndpoint = args.wsEndpoint;
         const extensionLegacy = args.extensionLegacy === true;
+        const startUrl = typeof args.startUrl === "string" && args.startUrl.trim().length > 0 ? args.startUrl.trim() : void 0;
         const hasExplicitCdp = Boolean(wsEndpoint || args.host || args.port);
         const relayUrl = extensionLegacy ? deps.relay?.getCdpUrl() ?? null : deps.relay?.getOpsUrl?.() ?? null;
         const normalizedOpsEndpoint = normalizeRelayEndpoint(wsEndpoint, "ops", true);
@@ -787,7 +824,7 @@ function createConnectTool(deps) {
         const relayEndpoint = relayUrl && wsEndpoint === relayUrl ? relayUrl : extensionLegacy ? normalizedLegacyEndpoint ?? normalizedOpsEndpoint : normalizedOpsEndpoint;
         let result;
         if (relayEndpoint || !hasExplicitCdp && relayUrl) {
-          result = await deps.manager.connectRelay(relayEndpoint ?? relayUrl ?? "");
+          result = startUrl ? await deps.manager.connectRelay(relayEndpoint ?? relayUrl ?? "", { startUrl }) : await deps.manager.connectRelay(relayEndpoint ?? relayUrl ?? "");
         } else {
           if (!hasExplicitCdp) {
             return failure("Extension relay not available. Connect the extension or pass wsEndpoint/host/port.", "extension_not_connected");
@@ -795,7 +832,8 @@ function createConnectTool(deps) {
           result = await deps.manager.connect({
             wsEndpoint,
             host: args.host,
-            port: args.port
+            port: args.port,
+            startUrl
           });
         }
         return ok({
@@ -1116,6 +1154,7 @@ function createGotoTool(deps) {
     args: {
       sessionId: z12.string().describe("Session id"),
       url: z12.string().describe("URL to navigate to"),
+      targetId: z12.string().optional().describe("Optional target id"),
       waitUntil: waitUntilSchema.optional().describe("Load state to wait for"),
       timeoutMs: z12.number().int().optional().describe("Timeout in milliseconds")
     },
@@ -1125,7 +1164,9 @@ function createGotoTool(deps) {
           args.sessionId,
           args.url,
           args.waitUntil ?? "load",
-          args.timeoutMs ?? 3e4
+          args.timeoutMs ?? 3e4,
+          void 0,
+          args.targetId
         );
         return ok(result);
       } catch (error) {
@@ -1145,6 +1186,7 @@ function createWaitTool(deps) {
     description: "Wait for a load state or a ref state.",
     args: {
       sessionId: z13.string().describe("Session id"),
+      targetId: z13.string().optional().describe("Optional target id"),
       until: waitUntilSchema2.optional().describe("Load state to wait for"),
       ref: z13.string().optional().describe("Ref to wait for"),
       state: waitStateSchema.optional().describe("Ref state to wait for"),
@@ -1157,7 +1199,8 @@ function createWaitTool(deps) {
             args.sessionId,
             args.ref,
             args.state ?? "attached",
-            args.timeoutMs ?? 3e4
+            args.timeoutMs ?? 3e4,
+            args.targetId
           );
           return ok(result2);
         }
@@ -1167,7 +1210,8 @@ function createWaitTool(deps) {
         const result = await deps.manager.waitForLoad(
           args.sessionId,
           args.until,
-          args.timeoutMs ?? 3e4
+          args.timeoutMs ?? 3e4,
+          args.targetId
         );
         return ok(result);
       } catch (error) {
@@ -1186,6 +1230,7 @@ function createSnapshotTool(deps) {
     description: "Capture a snapshot of the current page and return refs.",
     args: {
       sessionId: z14.string().describe("Session id"),
+      targetId: z14.string().optional().describe("Optional target id"),
       format: formatSchema.optional().describe("Snapshot format"),
       maxChars: z14.number().int().optional().describe("Max characters for snapshot output"),
       cursor: z14.string().optional().describe("Cursor for paging")
@@ -1197,7 +1242,8 @@ function createSnapshotTool(deps) {
           args.sessionId,
           args.format ?? "outline",
           args.maxChars ?? config.snapshot.maxChars,
-          args.cursor
+          args.cursor,
+          args.targetId
         );
         return ok(result);
       } catch (error) {
@@ -1215,11 +1261,12 @@ function createClickTool(deps) {
     description: "Click a referenced element.",
     args: {
       sessionId: z15.string().describe("Session id"),
+      targetId: z15.string().optional().describe("Optional target id"),
       ref: z15.string().describe("Element ref")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.click(args.sessionId, args.ref);
+        const result = await deps.manager.click(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "click_failed");
@@ -1236,11 +1283,12 @@ function createHoverTool(deps) {
     description: "Hover over an element by ref.",
     args: {
       sessionId: z16.string().describe("Active browser session id"),
+      targetId: z16.string().optional().describe("Optional target id"),
       ref: z16.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.hover(args.sessionId, args.ref);
+        const result = await deps.manager.hover(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "hover_failed");
@@ -1257,12 +1305,13 @@ function createPressTool(deps) {
     description: "Press a keyboard key, optionally focusing a ref first.",
     args: {
       sessionId: z17.string().describe("Active browser session id"),
+      targetId: z17.string().optional().describe("Optional target id"),
       key: z17.string().describe("Keyboard key to press, e.g. Enter or ArrowDown"),
       ref: z17.string().optional().describe("Optional element ref to focus first")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.press(args.sessionId, args.key, args.ref);
+        const result = await deps.manager.press(args.sessionId, args.key, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "press_failed");
@@ -1279,11 +1328,12 @@ function createCheckTool(deps) {
     description: "Check a checkbox or toggle by ref.",
     args: {
       sessionId: z18.string().describe("Active browser session id"),
+      targetId: z18.string().optional().describe("Optional target id"),
       ref: z18.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.check(args.sessionId, args.ref);
+        const result = await deps.manager.check(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "check_failed");
@@ -1300,11 +1350,12 @@ function createUncheckTool(deps) {
     description: "Uncheck a checkbox or toggle by ref.",
     args: {
       sessionId: z19.string().describe("Active browser session id"),
+      targetId: z19.string().optional().describe("Optional target id"),
       ref: z19.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.uncheck(args.sessionId, args.ref);
+        const result = await deps.manager.uncheck(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "uncheck_failed");
@@ -1321,6 +1372,7 @@ function createTypeTool(deps) {
     description: "Type text into a referenced input.",
     args: {
       sessionId: z20.string().describe("Session id"),
+      targetId: z20.string().optional().describe("Optional target id"),
       ref: z20.string().describe("Element ref"),
       text: z20.string().describe("Text to type"),
       clear: z20.boolean().optional().describe("Clear before typing"),
@@ -1333,7 +1385,8 @@ function createTypeTool(deps) {
           args.ref,
           args.text,
           Boolean(args.clear),
-          Boolean(args.submit)
+          Boolean(args.submit),
+          args.targetId
         );
         return ok(result);
       } catch (error) {
@@ -1351,12 +1404,13 @@ function createSelectTool(deps) {
     description: "Select options in a referenced select element.",
     args: {
       sessionId: z21.string().describe("Session id"),
+      targetId: z21.string().optional().describe("Optional target id"),
       ref: z21.string().describe("Element ref"),
       values: z21.array(z21.string()).describe("Values to select")
     },
     async execute(args) {
       try {
-        await deps.manager.select(args.sessionId, args.ref, args.values);
+        await deps.manager.select(args.sessionId, args.ref, args.values, args.targetId);
         return ok({});
       } catch (error) {
         return failure(serializeError(error).message, "select_failed");
@@ -1373,12 +1427,13 @@ function createScrollTool(deps) {
     description: "Scroll the page or a referenced element.",
     args: {
       sessionId: z22.string().describe("Session id"),
+      targetId: z22.string().optional().describe("Optional target id"),
       dy: z22.number().describe("Scroll delta in pixels"),
       ref: z22.string().optional().describe("Optional element ref to scroll")
     },
     async execute(args) {
       try {
-        await deps.manager.scroll(args.sessionId, args.dy, args.ref);
+        await deps.manager.scroll(args.sessionId, args.dy, args.ref, args.targetId);
         return ok({});
       } catch (error) {
         return failure(serializeError(error).message, "scroll_failed");
@@ -1395,11 +1450,12 @@ function createScrollIntoViewTool(deps) {
     description: "Scroll an element into view by ref.",
     args: {
       sessionId: z23.string().describe("Active browser session id"),
+      targetId: z23.string().optional().describe("Optional target id"),
       ref: z23.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.scrollIntoView(args.sessionId, args.ref);
+        const result = await deps.manager.scrollIntoView(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "scroll_into_view_failed");
@@ -1416,6 +1472,7 @@ function createDomGetHtmlTool(deps) {
     description: "Get outerHTML for a referenced element.",
     args: {
       sessionId: z24.string().describe("Session id"),
+      targetId: z24.string().optional().describe("Optional target id"),
       ref: z24.string().describe("Element ref"),
       maxChars: z24.number().int().optional().describe("Max characters")
     },
@@ -1424,7 +1481,8 @@ function createDomGetHtmlTool(deps) {
         const result = await deps.manager.domGetHtml(
           args.sessionId,
           args.ref,
-          args.maxChars ?? 8e3
+          args.maxChars ?? 8e3,
+          args.targetId
         );
         return ok({
           ref: args.ref,
@@ -1446,6 +1504,7 @@ function createDomGetTextTool(deps) {
     description: "Get inner text for a referenced element.",
     args: {
       sessionId: z25.string().describe("Session id"),
+      targetId: z25.string().optional().describe("Optional target id"),
       ref: z25.string().describe("Element ref"),
       maxChars: z25.number().int().optional().describe("Max characters")
     },
@@ -1454,7 +1513,8 @@ function createDomGetTextTool(deps) {
         const result = await deps.manager.domGetText(
           args.sessionId,
           args.ref,
-          args.maxChars ?? 8e3
+          args.maxChars ?? 8e3,
+          args.targetId
         );
         return ok({
           ref: args.ref,
@@ -1476,12 +1536,13 @@ function createGetAttrTool(deps) {
     description: "Get a DOM attribute value by ref.",
     args: {
       sessionId: z26.string().describe("Active browser session id"),
+      targetId: z26.string().optional().describe("Optional target id"),
       ref: z26.string().describe("Element ref from snapshot"),
       name: z26.string().describe("Attribute name, e.g. href or aria-label")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.domGetAttr(args.sessionId, args.ref, args.name);
+        const result = await deps.manager.domGetAttr(args.sessionId, args.ref, args.name, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "get_attr_failed");
@@ -1498,11 +1559,12 @@ function createGetValueTool(deps) {
     description: "Get the input value for an element by ref.",
     args: {
       sessionId: z27.string().describe("Active browser session id"),
+      targetId: z27.string().optional().describe("Optional target id"),
       ref: z27.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.domGetValue(args.sessionId, args.ref);
+        const result = await deps.manager.domGetValue(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "get_value_failed");
@@ -1519,11 +1581,12 @@ function createIsVisibleTool(deps) {
     description: "Check if an element is visible by ref.",
     args: {
       sessionId: z28.string().describe("Active browser session id"),
+      targetId: z28.string().optional().describe("Optional target id"),
       ref: z28.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.domIsVisible(args.sessionId, args.ref);
+        const result = await deps.manager.domIsVisible(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "is_visible_failed");
@@ -1540,11 +1603,12 @@ function createIsEnabledTool(deps) {
     description: "Check if an element is enabled by ref.",
     args: {
       sessionId: z29.string().describe("Active browser session id"),
+      targetId: z29.string().optional().describe("Optional target id"),
       ref: z29.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.domIsEnabled(args.sessionId, args.ref);
+        const result = await deps.manager.domIsEnabled(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "is_enabled_failed");
@@ -1561,11 +1625,12 @@ function createIsCheckedTool(deps) {
     description: "Check if an element is checked by ref.",
     args: {
       sessionId: z30.string().describe("Active browser session id"),
+      targetId: z30.string().optional().describe("Optional target id"),
       ref: z30.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.domIsChecked(args.sessionId, args.ref);
+        const result = await deps.manager.domIsChecked(args.sessionId, args.ref, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "is_checked_failed");
@@ -2033,12 +2098,23 @@ import { tool as tool38 } from "@opencode-ai/plugin";
 var z38 = tool38.schema;
 async function loadMacroRuntime() {
   try {
-    const module = await import("./macros-NUBRM44Y.js");
+    const module = await import("./macros-ND2M7LWU.js");
     return module;
   } catch {
     return null;
   }
 }
+async function resolveMacroProviderRuntime(deps) {
+  if (deps.providerRuntime) {
+    return deps.providerRuntime;
+  }
+  const { createConfiguredProviderRuntime: createConfiguredProviderRuntime2 } = await import("./runtime-factory-BICHDPE7.js");
+  return createConfiguredProviderRuntime2({
+    config: deps.config?.get?.(),
+    manager: deps.manager,
+    browserFallbackPort: deps.browserFallbackPort
+  });
+}
 function parseFallbackMacro(expression, defaultProvider) {
   const raw = expression.trim();
   if (!raw.startsWith("@")) {
@@ -2113,12 +2189,7 @@ function createMacroResolveTool(deps) {
             ...catalog ? { catalog } : {}
           });
         }
-        const runtimeConfig = deps.config?.get?.();
-        const providerRuntime = deps.providerRuntime ?? createConfiguredProviderRuntime({
-          config: runtimeConfig,
-          manager: deps.manager,
-          browserFallbackPort: deps.browserFallbackPort
-        });
+        const providerRuntime = await resolveMacroProviderRuntime(deps);
         const execution = shapeExecutionPayload(
           await executeMacroResolution(resolution, providerRuntime)
         );
@@ -2142,11 +2213,12 @@ function createClonePageTool(deps) {
   return tool39({
     description: "Export the active page as a React component and CSS bundle.",
     args: {
-      sessionId: z39.string().describe("Active browser session id")
+      sessionId: z39.string().describe("Active browser session id"),
+      targetId: z39.string().optional().describe("Optional target id")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.clonePage(args.sessionId);
+        const result = await deps.manager.clonePage(args.sessionId, args.targetId);
         return ok({ component: result.component, css: result.css, warnings: result.warnings });
       } catch (error) {
         return failure(serializeError(error).message, "clone_page_failed");
@@ -2163,11 +2235,12 @@ function createCloneComponentTool(deps) {
     description: "Export a selected element subtree as a React component and CSS bundle.",
     args: {
       sessionId: z40.string().describe("Active browser session id"),
+      targetId: z40.string().optional().describe("Optional target id"),
       ref: z40.string().describe("Element ref from snapshot")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.cloneComponent(args.sessionId, args.ref);
+        const result = await deps.manager.cloneComponent(args.sessionId, args.ref, args.targetId);
         return ok({ component: result.component, css: result.css, warnings: result.warnings });
       } catch (error) {
         return failure(serializeError(error).message, "clone_component_failed");
@@ -2183,11 +2256,12 @@ function createPerfTool(deps) {
   return tool41({
     description: "Fetch lightweight performance metrics from the active page.",
     args: {
-      sessionId: z41.string().describe("Active browser session id")
+      sessionId: z41.string().describe("Active browser session id"),
+      targetId: z41.string().optional().describe("Optional target id")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.perfMetrics(args.sessionId);
+        const result = await deps.manager.perfMetrics(args.sessionId, args.targetId);
         return ok({ metrics: result.metrics });
       } catch (error) {
         return failure(serializeError(error).message, "perf_failed");
@@ -2204,11 +2278,12 @@ function createScreenshotTool(deps) {
     description: "Capture a screenshot of the active page.",
     args: {
       sessionId: z42.string().describe("Active browser session id"),
+      targetId: z42.string().optional().describe("Optional target id"),
       path: z42.string().optional().describe("Optional output file path")
     },
     async execute(args) {
       try {
-        const result = await deps.manager.screenshot(args.sessionId, args.path);
+        const result = await deps.manager.screenshot(args.sessionId, args.path, args.targetId);
         return ok(result);
       } catch (error) {
         return failure(serializeError(error).message, "screenshot_failed");
@@ -2227,6 +2302,8 @@ function createAnnotateTool(deps) {
     description: "Request interactive annotations via direct (CDP) or relay transport.",
     args: {
       sessionId: z43.string().describe("Session id"),
+      stored: z43.boolean().optional().describe("Fetch the latest payload explicitly sent from popup/canvas surfaces"),
+      includeScreenshots: z43.boolean().optional().describe("When fetching stored payloads, prefer screenshots if still available in memory"),
       transport: transportSchema.optional().describe("auto | direct | relay (default: auto)"),
       targetId: z43.string().optional().describe("Optional target id for direct mode"),
       tabId: z43.number().int().optional().describe("Optional Chrome tab id for relay mode"),
@@ -2238,7 +2315,7 @@ function createAnnotateTool(deps) {
     },
     async execute(args) {
       try {
-        const transport = args.transport ?? "auto";
+        const transport = args.stored ? "relay" : args.transport ?? "auto";
         if (transport === "relay") {
           const status = await deps.manager.status(args.sessionId);
           if (status.mode !== "extension") {
@@ -2248,6 +2325,8 @@ function createAnnotateTool(deps) {
         const response = await deps.annotationManager.requestAnnotation({
           sessionId: args.sessionId,
           transport,
+          stored: args.stored ?? false,
+          includeScreenshots: args.includeScreenshots ?? true,
           targetId: args.targetId,
           tabId: args.tabId,
           url: args.url,
@@ -2256,6 +2335,12 @@ function createAnnotateTool(deps) {
           context: args.context,
           timeoutMs: args.timeoutMs
         });
+        if (response.status === "cancelled") {
+          return ok({
+            cancelled: true,
+            message: response.error?.message ?? "Annotation cancelled."
+          });
+        }
         if (response.status !== "ok" || !response.payload) {
           const message2 = response.error?.message ?? "Annotation failed.";
           const code = response.error?.code ?? "annotate_failed";
@@ -2278,11 +2363,12 @@ function createAnnotateTool(deps) {
 import { tool as tool44 } from "@opencode-ai/plugin";
 
 // src/tools/workflow-runtime.ts
-var resolveProviderRuntime = (deps) => {
+var resolveProviderRuntime = async (deps) => {
   if (deps.providerRuntime) {
     return deps.providerRuntime;
   }
-  return createConfiguredProviderRuntime({
+  const { createConfiguredProviderRuntime: createConfiguredProviderRuntime2 } = await import("./runtime-factory-BICHDPE7.js");
+  return createConfiguredProviderRuntime2({
     config: deps.config?.get?.(),
     manager: deps.manager,
     browserFallbackPort: deps.browserFallbackPort
@@ -2315,7 +2401,8 @@ function createResearchRunTool(deps) {
     },
     async execute(args) {
       try {
-        const runtime = resolveProviderRuntime(deps);
+        const runtime = await resolveProviderRuntime(deps);
+        const { runResearchWorkflow } = await import("./providers-G3LRHQXX.js");
         const result = await runResearchWorkflow(runtime, {
           topic: args.topic,
           days: args.days,
@@ -2362,7 +2449,8 @@ function createShoppingRunTool(deps) {
     },
     async execute(args) {
       try {
-        const runtime = resolveProviderRuntime(deps);
+        const runtime = await resolveProviderRuntime(deps);
+        const { runShoppingWorkflow } = await import("./providers-G3LRHQXX.js");
         const result = await runShoppingWorkflow(runtime, {
           query: args.query,
           providers: args.providers,
@@ -2426,7 +2514,8 @@ function createProductVideoRunTool(deps) {
     },
     async execute(args) {
       try {
-        const runtime = resolveProviderRuntime(deps);
+        const runtime = await resolveProviderRuntime(deps);
+        const { runProductVideoWorkflow } = await import("./providers-G3LRHQXX.js");
         const includeScreenshots = args.include_screenshots ?? true;
         const result = await runProductVideoWorkflow(runtime, {
           product_url: args.product_url,
@@ -2450,10 +2539,41 @@ function createProductVideoRunTool(deps) {
   });
 }
 
-// src/tools/skill_list.ts
+// src/tools/canvas.ts
 import { tool as tool47 } from "@opencode-ai/plugin";
-function createSkillListTool(deps) {
+var z47 = tool47.schema;
+function createCanvasTool(deps) {
   return tool47({
+    description: "Execute a typed design-canvas command such as canvas.session.open or canvas.document.patch.",
+    args: {
+      command: z47.string().min(1).describe("Canvas command name"),
+      params: z47.record(z47.string(), z47.unknown()).optional().describe("Canvas command payload")
+    },
+    async execute(args) {
+      if (!deps.canvasManager) {
+        return failure("Canvas manager unavailable.", "canvas_unavailable");
+      }
+      try {
+        if (!args.command.startsWith("canvas.")) {
+          return failure("Canvas commands must start with 'canvas.'.", "canvas_invalid_command");
+        }
+        const result = await deps.canvasManager.execute(args.command, args.params ?? {});
+        if (result && typeof result === "object" && !Array.isArray(result)) {
+          return ok(result);
+        }
+        return ok({ result });
+      } catch (error) {
+        const serialized = serializeError(error);
+        return failure(serialized.message, serialized.code ?? "canvas_failed", serialized.details);
+      }
+    }
+  });
+}
+
+// src/tools/skill_list.ts
+import { tool as tool48 } from "@opencode-ai/plugin";
+function createSkillListTool(deps) {
+  return tool48({
     description: "List available skills from OpenCode skill directories (compatibility wrapper)",
     args: {},
     async execute() {
@@ -2469,14 +2589,14 @@ function createSkillListTool(deps) {
 }
 
 // src/tools/skill_load.ts
-import { tool as tool48 } from "@opencode-ai/plugin";
-var z47 = tool48.schema;
+import { tool as tool49 } from "@opencode-ai/plugin";
+var z48 = tool49.schema;
 function createSkillLoadTool(deps) {
-  return tool48({
+  return tool49({
     description: "Load a specific skill by name from OpenCode skill directories (compatibility wrapper)",
     args: {
-      name: z47.string().describe("Name of the skill to load (e.g., 'opendevbrowser-login-automation', 'opendevbrowser-form-testing')"),
-      topic: z47.string().optional().describe("Optional topic to filter the skill content")
+      name: z48.string().describe("Name of the skill to load (e.g., 'opendevbrowser-login-automation', 'opendevbrowser-form-testing')"),
+      topic: z48.string().optional().describe("Optional topic to filter the skill content")
     },
     async execute(args) {
       try {
@@ -2547,6 +2667,7 @@ function createTools(deps) {
     opendevbrowser_research_run: wrap(createResearchRunTool(deps)),
     opendevbrowser_shopping_run: wrap(createShoppingRunTool(deps)),
     opendevbrowser_product_video_run: wrap(createProductVideoRunTool(deps)),
+    opendevbrowser_canvas: wrap(createCanvasTool(deps)),
     opendevbrowser_clone_page: wrap(createClonePageTool(deps)),
     opendevbrowser_clone_component: wrap(createCloneComponentTool(deps)),
     opendevbrowser_perf: wrap(createPerfTool(deps)),
@@ -2563,6 +2684,7 @@ var OpenDevBrowserPlugin = async ({ directory, worktree }) => {
   const { config, configStore, skills, ensureRelay, cleanup, getExtensionPath } = core;
   let relay = core.relay;
   let manager = core.manager;
+  let canvasManager = core.canvasManager;
   let runner = core.runner;
   let annotationManager = core.annotationManager;
   let providerRuntime = core.providerRuntime;
@@ -2581,6 +2703,7 @@ var OpenDevBrowserPlugin = async ({ directory, worktree }) => {
   }
   const toolDeps = {
     manager,
+    canvasManager,
     annotationManager,
     runner,
     config: configStore,
@@ -2595,6 +2718,7 @@ var OpenDevBrowserPlugin = async ({ directory, worktree }) => {
       daemonClient = new DaemonClient({ autoRenew: true });
     }
     manager = new RemoteManager(daemonClient);
+    canvasManager = new RemoteCanvasManager(daemonClient);
     relay = new RemoteRelay(daemonClient);
     annotationManager.setRelay(relay);
     annotationManager.setBrowserManager(manager);
@@ -2606,6 +2730,7 @@ var OpenDevBrowserPlugin = async ({ directory, worktree }) => {
       browserFallbackPort
     });
     toolDeps.manager = manager;
+    toolDeps.canvasManager = canvasManager;
     toolDeps.relay = relay;
     toolDeps.runner = runner;
     toolDeps.providerRuntime = providerRuntime;