opendevbrowser 0.0.16 → 0.0.18

package/extension/dist/services/cdp-router-commands.js

@@ -2,6 +2,15 @@ export async function handleSetDiscoverTargets(ctx, commandId, params) {
     const discover = params.discover === true;
     const shouldEmit = discover && !ctx.discoverTargets;
     ctx.setDiscoverTargets(discover);
+    try {
+        for (const debuggee of ctx.debuggees.values()) {
+            await ctx.applyDiscoverTargets(debuggee, discover);
+        }
+    }
+    catch (error) {
+        ctx.respondError(commandId, getErrorMessage(error));
+        return;
+    }
     if (shouldEmit) {
         for (const targetInfo of ctx.sessions.listTargetInfos()) {
             ctx.emitTargetCreated(targetInfo);
@@ -14,10 +23,6 @@ export async function handleSetAutoAttach(ctx, commandId, params, sessionId) {
         ctx.respondError(commandId, ctx.flatSessionError, sessionId);
         return;
     }
-    if (sessionId) {
-        ctx.respond(commandId, {}, sessionId);
-        return;
-    }
     const autoAttach = params.autoAttach === true;
     const waitForDebuggerOnStart = params.waitForDebuggerOnStart === true;
     ctx.setAutoAttachOptions({ autoAttach, waitForDebuggerOnStart, flatten: true, filter: params.filter });
@@ -25,18 +30,40 @@ export async function handleSetAutoAttach(ctx, commandId, params, sessionId) {
         ctx.resetRootAttached();
     }
     try {
-        for (const debuggee of ctx.debuggees.values()) {
-            await ctx.applyAutoAttach(debuggee);
+        if (sessionId) {
+            const session = ctx.sessions.getBySessionId(sessionId);
+            if (!session) {
+                ctx.respondError(commandId, `Unknown sessionId: ${sessionId}`, sessionId);
+                return;
+            }
+            await ctx.sendCommand(session.debuggerSession, "Target.setAutoAttach", {
+                autoAttach,
+                waitForDebuggerOnStart,
+                flatten: true,
+                ...(typeof params.filter !== "undefined" ? { filter: params.filter } : {})
+            });
+        }
+        else {
+            for (const debuggee of ctx.debuggees.values()) {
+                await ctx.applyAutoAttach(debuggee);
+            }
         }
     }
     catch (error) {
         ctx.respondError(commandId, getErrorMessage(error));
         return;
     }
+    if (sessionId) {
+        ctx.respond(commandId, {}, sessionId);
+        return;
+    }
     if (!autoAttach) {
         ctx.emitRootDetached();
     }
     else {
+        for (const tabId of ctx.sessions.listTabIds()) {
+            await ctx.refreshRootTargetInfo(tabId);
+        }
         for (const targetInfo of ctx.sessions.listTargetInfos()) {
             ctx.emitRootAttached(targetInfo);
         }
@@ -57,7 +84,8 @@ export async function handleCreateTarget(ctx, commandId, params) {
         await ctx.attach(tab.id);
         await ctx.sessions.waitForRootSession(tab.id);
         await ctx.sendCommand({ tabId: tab.id }, "Target.getTargets", {});
-        const targetInfo = await ctx.registerRootTab(tab.id);
+        await ctx.registerRootTab(tab.id);
+        const targetInfo = await ctx.refreshRootTargetInfo(tab.id);
         if (ctx.discoverTargets) {
             ctx.emitTargetCreated(targetInfo);
         }
@@ -175,11 +203,22 @@ export async function handleAttachToTarget(ctx, commandId, params, sessionId) {
 }
 export async function handleRoutedCommand(ctx, commandId, method, params, sessionId) {
     const session = sessionId ? ctx.sessions.getBySessionId(sessionId) : null;
+    const compatSession = resolveSyntheticCompatSession(ctx, session, sessionId);
+    if (compatSession) {
+        const compatResult = buildSyntheticRootCompatResult(compatSession, method, commandId);
+        if (compatResult) {
+            ctx.respond(commandId, compatResult.result, sessionId);
+            if (compatResult.emitExecutionContext) {
+                ctx.emitEvent("Runtime.executionContextCreated", compatResult.emitExecutionContext, sessionId);
+            }
+            return;
+        }
+    }
     if (sessionId && !session) {
         ctx.respondError(commandId, `Unknown sessionId: ${sessionId}`, sessionId);
         return;
     }
-    const debuggee = session?.debuggerSession ?? ctx.getPrimaryDebuggee();
+    const debuggee = await ctx.resolveCommandDebuggee(sessionId);
     if (!debuggee) {
         ctx.respondError(commandId, "No tab attached", sessionId);
         return;
@@ -201,3 +240,91 @@ const getErrorMessage = (error) => {
     }
     return "Unknown error";
 };
+const SYNTHETIC_ROOT_NOOP_METHODS = new Set([
+    "Runtime.runIfWaitingForDebugger",
+    "Emulation.setFocusEmulationEnabled",
+    "Emulation.setEmulatedMedia"
+]);
+const resolveSyntheticCompatSession = (ctx, session, sessionId) => {
+    if (session && isSyntheticSessionId(session.sessionId)) {
+        return session;
+    }
+    if (!isSyntheticSessionId(sessionId)) {
+        return null;
+    }
+    const primary = ctx.getPrimaryDebuggee();
+    if (typeof primary?.tabId !== "number") {
+        return null;
+    }
+    const record = ctx.sessions.getByTabId(primary.tabId);
+    if (!record) {
+        return null;
+    }
+    const rootSession = ctx.sessions.getBySessionId(record.rootSessionId);
+    if (rootSession) {
+        return rootSession;
+    }
+    return {
+        kind: "root",
+        sessionId,
+        tabId: record.tabId,
+        targetId: record.targetInfo.targetId,
+        debuggerSession: primary,
+        targetInfo: record.targetInfo
+    };
+};
+const buildSyntheticRootCompatResult = (session, method, commandId) => {
+    if (SYNTHETIC_ROOT_NOOP_METHODS.has(method)) {
+        return { result: {} };
+    }
+    const frame = buildSyntheticRootFrame(session);
+    if (method === "Page.getFrameTree") {
+        return { result: { frameTree: { frame } } };
+    }
+    if (method === "Page.addScriptToEvaluateOnNewDocument") {
+        return { result: { identifier: `odb-root-script-${String(commandId)}` } };
+    }
+    if (method === "Runtime.enable") {
+        return {
+            result: {},
+            emitExecutionContext: {
+                context: {
+                    id: 1,
+                    origin: deriveSecurityOrigin(frame.url),
+                    name: "",
+                    auxData: {
+                        frameId: frame.id,
+                        isDefault: true,
+                        type: "default"
+                    }
+                }
+            }
+        };
+    }
+    return null;
+};
+const buildSyntheticRootFrame = (session) => {
+    const targetInfo = session.targetInfo;
+    const url = typeof targetInfo?.url === "string" ? targetInfo.url : "";
+    return {
+        id: session.targetId,
+        loaderId: session.targetId,
+        url,
+        securityOrigin: deriveSecurityOrigin(url),
+        mimeType: "text/html"
+    };
+};
+const deriveSecurityOrigin = (url) => {
+    if (!url) {
+        return "";
+    }
+    try {
+        return new URL(url).origin;
+    }
+    catch {
+        return "";
+    }
+};
+const isSyntheticSessionId = (value) => {
+    return typeof value === "string" && value.startsWith("pw-tab-");
+};

package/extension/dist/services/url-restrictions.js

@@ -1,13 +1,9 @@
-const RESTRICTED_PROTOCOLS = new Set([
-    "chrome:",
-    "chrome-extension:",
-    "chrome-search:",
-    "chrome-untrusted:",
-    "devtools:",
-    "chrome-devtools:",
-    "edge:",
-    "brave:"
+const ALLOWED_PROTOCOLS = new Set([
+    "http:",
+    "https:"
 ]);
+const DEFAULT_SCHEME_MESSAGE = "Active tab uses a restricted URL scheme. Focus a normal http(s) tab and retry.";
+const DEFAULT_WEB_STORE_MESSAGE = "Chrome Web Store tabs cannot be debugged. Open a normal tab and retry.";
 const isWebStoreUrl = (url) => {
     if (url.hostname === "chromewebstore.google.com") {
         return true;
@@ -17,12 +13,12 @@ const isWebStoreUrl = (url) => {
     }
     return false;
 };
-export const getRestrictionMessage = (url) => {
-    if (RESTRICTED_PROTOCOLS.has(url.protocol)) {
-        return "Active tab uses a restricted URL scheme. Focus a normal http(s) tab and retry.";
+export const getRestrictionMessage = (url, options) => {
+    if (!ALLOWED_PROTOCOLS.has(url.protocol)) {
+        return options?.restrictedSchemeMessage ?? DEFAULT_SCHEME_MESSAGE;
     }
     if (isWebStoreUrl(url)) {
-        return "Chrome Web Store tabs cannot be debugged. Open a normal tab and retry.";
+        return options?.webStoreMessage ?? DEFAULT_WEB_STORE_MESSAGE;
     }
     return null;
 };

package/extension/dist/types.js

@@ -1,3 +1,5 @@
 export const OPS_PROTOCOL_VERSION = "1";
 export const MAX_OPS_PAYLOAD_BYTES = 12 * 1024 * 1024;
 export const MAX_SNAPSHOT_BYTES = 2 * 1024 * 1024;
+export const CANVAS_PROTOCOL_VERSION = "1";
+export const MAX_CANVAS_PAYLOAD_BYTES = 12 * 1024 * 1024;

package/extension/manifest.json

@@ -1,10 +1,11 @@
 {
   "manifest_version": 3,
   "name": "OpenDevBrowser Relay",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Optional bridge to reuse existing Chrome tabs with OpenDevBrowser.",
   "permissions": [
     "debugger",
+    "webNavigation",
     "alarms",
     "tabs",
     "storage",
@@ -14,7 +15,6 @@
   ],
   "host_permissions": [
     "http://127.0.0.1/*",
-    "http://localhost/*",
     "<all_urls>"
   ],
   "icons": {

package/extension/popup.html

@@ -85,11 +85,12 @@
       }
 
       .brand-mark {
-        width: 12px;
-        height: 12px;
-        border-radius: 4px;
-        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
-        box-shadow: 0 0 14px rgba(32, 213, 198, 0.55);
+        width: 22px;
+        height: 22px;
+        display: block;
+        object-fit: contain;
+        flex-shrink: 0;
+        filter: drop-shadow(0 0 10px rgba(32, 213, 198, 0.35));
       }
 
       .brand-title {
@@ -376,6 +377,51 @@
         gap: 10px;
       }
 
+      .annotation-list {
+        display: grid;
+        gap: 8px;
+        margin-top: 10px;
+        max-height: 180px;
+        overflow: auto;
+      }
+
+      .annotation-item {
+        display: grid;
+        gap: 8px;
+        padding: 10px;
+        border-radius: 12px;
+        border: 1px solid var(--stroke);
+        background: var(--panel-strong);
+      }
+
+      .annotation-item-summary {
+        font-size: 11px;
+        color: var(--text);
+        line-height: 1.4;
+        word-break: break-word;
+      }
+
+      .annotation-item-meta {
+        font-size: 10px;
+        color: var(--muted);
+      }
+
+      .annotation-item-actions {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+      }
+
+      .annotation-empty {
+        font-size: 10px;
+        color: var(--muted);
+        text-align: center;
+        padding: 12px;
+        border-radius: 12px;
+        border: 1px dashed var(--stroke);
+        background: rgba(255, 255, 255, 0.03);
+      }
+
       @media (prefers-reduced-motion: reduce) {
         * {
           transition: none !important;
@@ -388,7 +434,7 @@
     <div class="app">
       <header class="app-header">
         <div class="brand">
-          <div class="brand-mark"></div>
+          <img class="brand-mark" src="icons/icon32.png" alt="OpenDevBrowser logo" />
           <div>
             <div class="brand-title">OpenDevBrowser</div>
             <div class="brand-subtitle">Relay Extension</div>
@@ -503,6 +549,13 @@
           <button id="annotationStart" class="secondary">Annotate</button>
           <button id="annotationCopy" class="secondary" disabled>Copy payload</button>
         </div>
+        <div class="button-row">
+          <button id="annotationSend" class="secondary" disabled>Send to agent</button>
+          <button id="annotationRefresh" class="secondary">Refresh payload</button>
+        </div>
+        <div id="annotationItems" class="annotation-list">
+          <div class="annotation-empty">No annotation items available.</div>
+        </div>
       </section>
 
       <button id="toggle" class="primary">Connect</button>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "opendevbrowser",
-  "version": "0.0.16",
-  "description": "OpenCode plugin for browser automation via CDP with snapshot-refs-actions workflow",
+  "version": "0.0.18",
+  "description": "Browser automation runtime with snapshot-refs-actions, browser replay screencasts, public read-only desktop observation, and browser-scoped computer-use orchestration",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     "dist",
     "skills",
     "scripts/native",
+    "extension/canvas.html",
     "extension/manifest.json",
     "extension/popup.html",
     "extension/dist",
@@ -26,7 +27,14 @@
     "playwright",
     "testing",
     "web-scraping",
-    "chrome"
+    "chrome",
+    "annotation",
+    "design-canvas",
+    "screencast",
+    "desktop-observation",
+    "browser-replay",
+    "computer-use",
+    "challenge-automation"
   ],
   "license": "MIT",
   "repository": {
@@ -37,11 +45,11 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/cli/index.ts --format esm --clean --sourcemap && tsc --emitDeclarationOnly --declaration --declarationMap -p tsconfig.json && node --input-type=module -e \"import { copyFileSync, existsSync } from 'node:fs';\nimport { resolve } from 'node:path';\nconst dist = resolve('dist');\nconst pairs = [\n  ['index.js', 'opendevbrowser.js'],\n  ['index.js.map', 'opendevbrowser.js.map'],\n  ['index.d.ts', 'opendevbrowser.d.ts'],\n  ['index.d.ts.map', 'opendevbrowser.d.ts.map'],\n];\nfor (const [src, dst] of pairs) {\n  const from = resolve(dist, src);\n  const to = resolve(dist, dst);\n  if (existsSync(from)) copyFileSync(from, to);\n}\"",
-    "dev": "tsup src/index.ts src/cli/index.ts --format esm --dts --watch",
+    "build": "tsup src/index.ts src/cli/index.ts src/skills/skill-loader.ts --format esm --clean --sourcemap && tsc --emitDeclarationOnly --declaration --declarationMap -p tsconfig.json && node scripts/postbuild-dist.mjs",
+    "dev": "tsup src/index.ts src/cli/index.ts src/skills/skill-loader.ts --format esm --dts --watch",
     "lint": "eslint \"src/**/*.ts\" \"tests/**/*.ts\"",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "vitest run --coverage",
+    "test": "node scripts/run-vitest-coverage.mjs",
     "test:release-gate": "node scripts/release-gate-test-groups.mjs",
     "test:release-gate:g1": "node scripts/release-gate-test-groups.mjs --group 1",
     "test:release-gate:g2": "node scripts/release-gate-test-groups.mjs --group 2",
@@ -50,18 +58,21 @@
     "test:release-gate:g5": "node scripts/release-gate-test-groups.mjs --group 5",
     "extension:sync": "node scripts/sync-extension-version.mjs",
     "extension:build": "npm run extension:sync && tsc -p extension/tsconfig.json && node scripts/copy-extension-assets.mjs",
-    "extension:pack": "cd extension && zip -r ../opendevbrowser-extension.zip manifest.json popup.html dist/ icons/",
+    "extension:pack": "cd extension && zip -r ../opendevbrowser-extension.zip manifest.json popup.html canvas.html dist/ icons/",
     "extension:store": "node scripts/chrome-store-publish.mjs",
     "version:check": "node scripts/verify-versions.mjs",
     "prepack": "npm run version:check && npm run build && npm run extension:build"
   },
   "dependencies": {
-    "@opencode-ai/plugin": "^1.2.11",
+    "@opencode-ai/plugin": "^1.2.25",
     "@puppeteer/browsers": "^2.13.0",
     "async-mutex": "^0.5.0",
     "jsonc-parser": "^3.2.0",
+    "parse5": "^8.0.0",
     "playwright-core": "^1.58.2",
+    "typescript": "^5.9.3",
     "ws": "^8.19.0",
+    "yjs": "^13.6.29",
     "zod": "^3.25.76"
   },
   "devDependencies": {
@@ -74,7 +85,6 @@
     "eslint": "^9.39.3",
     "happy-dom": "^20.7.0",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   }
 }

package/skills/AGENTS.md

@@ -1,12 +1,13 @@
 # skills/ — Agent Guidelines
 
-Bundled canonical skill packs (8 total). Extends root `AGENTS.md`.
+Bundled OpenDevBrowser skill directories (9 canonical packs). Extends root `AGENTS.md`.
 
 ## Structure
 
 ```
 skills/
 ├── opendevbrowser-best-practices/SKILL.md
+├── opendevbrowser-design-agent/SKILL.md
 ├── opendevbrowser-continuity-ledger/SKILL.md
 ├── opendevbrowser-login-automation/SKILL.md
 ├── opendevbrowser-form-testing/SKILL.md
@@ -42,6 +43,7 @@ Content organized by topic for filtering.
 7. `.amp/skills/` (AmpCLI project compatibility)
 8. `$AMPCLI_HOME/skills` or `$AMP_CLI_HOME/skills` or `$AMP_HOME/skills` (AmpCLI global compatibility; fallback `~/.amp/skills`)
 9. `skillPaths` config (custom)
+10. Bundled package `skills/` directory as a fallback when no installed copy is available
 
 ## Constraints
 
@@ -49,14 +51,16 @@ Content organized by topic for filtering.
 - Keep guidance short, script-first, snapshot-first
 - Examples must use `opendevbrowser_*` tool names
 - Never include secrets or page data in content
-- Keep canonical guidance in `opendevbrowser-*` packs; do not add legacy alias directories.
+- Keep canonical guidance in `opendevbrowser-*` packs; do not reintroduce legacy alias directories.
 - Match the snapshot → refs → actions flow in `docs/ARCHITECTURE.md` and tool list in `docs/CLI.md`.
+- Keep first-contact quick-start wording aligned with `src/cli/onboarding-metadata.json`, generated help, and `docs/FIRST_RUN_ONBOARDING.md`.
+- When a pack touches runtime lanes, keep the exact generated-help labels `screencast / browser replay`, `desktop observation`, and `computer use / browser-scoped computer use` aligned across packs, and never describe the helper as a desktop agent.
 - Note that extension relay requires Chrome 125+ and uses hub-only relay ownership when enabled.
 - Refer to root `AGENTS.md` for connection flag/status semantics (extensionConnected, handshake, cdpConnected, pairingRequired).
-- Keep skill operational guidance aligned with release-gate scripts in `docs/CLI.md` (`provider-live-matrix --release-gate`, `live-regression-matrix --release-gate`).
+- Keep skill operational guidance aligned with release-gate scripts in `docs/CLI.md` (`provider-direct-runs --release-gate`, `live-regression-direct --release-gate`).
 
 ## Adding Skills
 
 1. Create `skills/<skill-name>/SKILL.md`
 2. Follow frontmatter format above
-3. Update `docs/CLI.md` if adding CLI-related guidance
+3. Update `README.md`, root `AGENTS.md`, and `docs/CLI.md` when the canonical skill-pack count changes