@etus/bhono-app 0.1.1

package/templates/base/.claude/skills/dev-browser/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "dev-browser",
+  "version": "0.0.1",
+  "type": "module",
+  "imports": {
+    "@/*": "./src/*"
+  },
+  "scripts": {
+    "start-server": "npx tsx scripts/start-server.ts",
+    "dev": "npx tsx --watch src/index.ts",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "express": "^4.21.0",
+    "playwright": "^1.49.0"
+  },
+  "devDependencies": {
+    "@types/express": "^5.0.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.1.0"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.0.0"
+  }
+}

package/templates/base/.claude/skills/dev-browser/scripts/start-server.ts

@@ -0,0 +1,117 @@
+import { serve } from "@/index.js";
+import { execSync } from "child_process";
+import { mkdirSync, existsSync, readdirSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const tmpDir = join(__dirname, "..", "tmp");
+const profileDir = join(__dirname, "..", "profiles");
+
+// Create tmp and profile directories if they don't exist
+console.log("Creating tmp directory...");
+mkdirSync(tmpDir, { recursive: true });
+console.log("Creating profiles directory...");
+mkdirSync(profileDir, { recursive: true });
+
+// Install Playwright browsers if not already installed
+console.log("Checking Playwright browser installation...");
+
+function findPackageManager(): { name: string; command: string } | null {
+  const managers = [
+    { name: "bun", command: "bunx playwright install chromium" },
+    { name: "pnpm", command: "pnpm exec playwright install chromium" },
+    { name: "npm", command: "npx playwright install chromium" },
+  ];
+
+  for (const manager of managers) {
+    try {
+      execSync(`which ${manager.name}`, { stdio: "ignore" });
+      return manager;
+    } catch {
+      // Package manager not found, try next
+    }
+  }
+  return null;
+}
+
+function isChromiumInstalled(): boolean {
+  const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+  const playwrightCacheDir = join(homeDir, ".cache", "ms-playwright");
+
+  if (!existsSync(playwrightCacheDir)) {
+    return false;
+  }
+
+  // Check for chromium directories (e.g., chromium-1148, chromium_headless_shell-1148)
+  try {
+    const entries = readdirSync(playwrightCacheDir);
+    return entries.some((entry) => entry.startsWith("chromium"));
+  } catch {
+    return false;
+  }
+}
+
+try {
+  if (!isChromiumInstalled()) {
+    console.log("Playwright Chromium not found. Installing (this may take a minute)...");
+
+    const pm = findPackageManager();
+    if (!pm) {
+      throw new Error("No package manager found (tried bun, pnpm, npm)");
+    }
+
+    console.log(`Using ${pm.name} to install Playwright...`);
+    execSync(pm.command, { stdio: "inherit" });
+    console.log("Chromium installed successfully.");
+  } else {
+    console.log("Playwright Chromium already installed.");
+  }
+} catch (error) {
+  console.error("Failed to install Playwright browsers:", error);
+  console.log("You may need to run: npx playwright install chromium");
+}
+
+// Check if server is already running
+console.log("Checking for existing servers...");
+try {
+  const res = await fetch("http://localhost:9222", {
+    signal: AbortSignal.timeout(1000),
+  });
+  if (res.ok) {
+    console.log("Server already running on port 9222");
+    process.exit(0);
+  }
+} catch {
+  // Server not running, continue to start
+}
+
+// Clean up stale CDP port if HTTP server isn't running (crash recovery)
+// This handles the case where Node crashed but Chrome is still running on 9223
+try {
+  const pid = execSync("lsof -ti:9223", { encoding: "utf-8" }).trim();
+  if (pid) {
+    console.log(`Cleaning up stale Chrome process on CDP port 9223 (PID: ${pid})`);
+    execSync(`kill -9 ${pid}`);
+  }
+} catch {
+  // No process on CDP port, which is expected
+}
+
+console.log("Starting dev browser server...");
+const headless = process.env.HEADLESS === "true";
+const server = await serve({
+  port: 9222,
+  headless,
+  profileDir,
+});
+
+console.log(`Dev browser server started`);
+console.log(`  WebSocket: ${server.wsEndpoint}`);
+console.log(`  Tmp directory: ${tmpDir}`);
+console.log(`  Profile directory: ${profileDir}`);
+console.log(`\nReady`);
+console.log(`\nPress Ctrl+C to stop`);
+
+// Keep the process running
+await new Promise(() => {});

package/templates/base/.claude/skills/dev-browser/server.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Get the directory where this script is located
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+# Change to the script directory
+cd "$SCRIPT_DIR"
+
+# Parse command line arguments
+HEADLESS=false
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --headless) HEADLESS=true ;;
+        *) echo "Unknown parameter: $1"; exit 1 ;;
+    esac
+    shift
+done
+
+echo "Installing dependencies..."
+npm install
+
+echo "Starting dev-browser server..."
+export HEADLESS=$HEADLESS
+npx tsx scripts/start-server.ts

package/templates/base/.claude/skills/dev-browser/src/client.ts

@@ -0,0 +1,403 @@
+import { chromium, type Browser, type Page, type ElementHandle } from "playwright";
+import type {
+  GetPageRequest,
+  GetPageResponse,
+  ListPagesResponse,
+  ServerInfoResponse,
+} from "./types";
+import { getSnapshotScript } from "./snapshot/browser-script";
+
+/**
+ * Options for waiting for page load
+ */
+export interface WaitForPageLoadOptions {
+  /** Maximum time to wait in ms (default: 10000) */
+  timeout?: number;
+  /** How often to check page state in ms (default: 50) */
+  pollInterval?: number;
+  /** Minimum time to wait even if page appears ready in ms (default: 100) */
+  minimumWait?: number;
+  /** Wait for network to be idle (no pending requests) (default: true) */
+  waitForNetworkIdle?: boolean;
+}
+
+/**
+ * Result of waiting for page load
+ */
+export interface WaitForPageLoadResult {
+  /** Whether the page is considered loaded */
+  success: boolean;
+  /** Document ready state when finished */
+  readyState: string;
+  /** Number of pending network requests when finished */
+  pendingRequests: number;
+  /** Time spent waiting in ms */
+  waitTimeMs: number;
+  /** Whether timeout was reached */
+  timedOut: boolean;
+}
+
+interface PageLoadState {
+  documentReadyState: string;
+  documentLoading: boolean;
+  pendingRequests: PendingRequest[];
+}
+
+interface PendingRequest {
+  url: string;
+  loadingDurationMs: number;
+  resourceType: string;
+}
+
+/**
+ * Wait for a page to finish loading using document.readyState and performance API.
+ *
+ * Uses browser-use's approach of:
+ * - Checking document.readyState for 'complete'
+ * - Monitoring pending network requests via Performance API
+ * - Filtering out ads, tracking, and non-critical resources
+ * - Graceful timeout handling (continues even if timeout reached)
+ */
+export async function waitForPageLoad(
+  page: Page,
+  options: WaitForPageLoadOptions = {}
+): Promise<WaitForPageLoadResult> {
+  const {
+    timeout = 10000,
+    pollInterval = 50,
+    minimumWait = 100,
+    waitForNetworkIdle = true,
+  } = options;
+
+  const startTime = Date.now();
+  let lastState: PageLoadState | null = null;
+
+  // Wait minimum time first
+  if (minimumWait > 0) {
+    await new Promise((resolve) => setTimeout(resolve, minimumWait));
+  }
+
+  // Poll until ready or timeout
+  while (Date.now() - startTime < timeout) {
+    try {
+      lastState = await getPageLoadState(page);
+
+      // Check if document is complete
+      const documentReady = lastState.documentReadyState === "complete";
+
+      // Check if network is idle (no pending critical requests)
+      const networkIdle = !waitForNetworkIdle || lastState.pendingRequests.length === 0;
+
+      if (documentReady && networkIdle) {
+        return {
+          success: true,
+          readyState: lastState.documentReadyState,
+          pendingRequests: lastState.pendingRequests.length,
+          waitTimeMs: Date.now() - startTime,
+          timedOut: false,
+        };
+      }
+    } catch {
+      // Page may be navigating, continue polling
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, pollInterval));
+  }
+
+  // Timeout reached - return current state
+  return {
+    success: false,
+    readyState: lastState?.documentReadyState ?? "unknown",
+    pendingRequests: lastState?.pendingRequests.length ?? 0,
+    waitTimeMs: Date.now() - startTime,
+    timedOut: true,
+  };
+}
+
+/**
+ * Get the current page load state including document ready state and pending requests.
+ * Filters out ads, tracking, and non-critical resources that shouldn't block loading.
+ */
+async function getPageLoadState(page: Page): Promise<PageLoadState> {
+  const result = await page.evaluate(() => {
+    // Access browser globals via globalThis for TypeScript compatibility
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    const g = globalThis as { document?: any; performance?: any };
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+    const perf = g.performance!;
+    const doc = g.document!;
+
+    const now = perf.now();
+    const resources = perf.getEntriesByType("resource");
+    const pending: Array<{ url: string; loadingDurationMs: number; resourceType: string }> = [];
+
+    // Common ad/tracking domains and patterns to filter out
+    const adPatterns = [
+      "doubleclick.net",
+      "googlesyndication.com",
+      "googletagmanager.com",
+      "google-analytics.com",
+      "facebook.net",
+      "connect.facebook.net",
+      "analytics",
+      "ads",
+      "tracking",
+      "pixel",
+      "hotjar.com",
+      "clarity.ms",
+      "mixpanel.com",
+      "segment.com",
+      "newrelic.com",
+      "nr-data.net",
+      "/tracker/",
+      "/collector/",
+      "/beacon/",
+      "/telemetry/",
+      "/log/",
+      "/events/",
+      "/track.",
+      "/metrics/",
+    ];
+
+    // Non-critical resource types
+    const nonCriticalTypes = ["img", "image", "icon", "font"];
+
+    for (const entry of resources) {
+      // Resources with responseEnd === 0 are still loading
+      if (entry.responseEnd === 0) {
+        const url = entry.name;
+
+        // Filter out ads and tracking
+        const isAd = adPatterns.some((pattern) => url.includes(pattern));
+        if (isAd) continue;
+
+        // Filter out data: URLs and very long URLs
+        if (url.startsWith("data:") || url.length > 500) continue;
+
+        const loadingDuration = now - entry.startTime;
+
+        // Skip requests loading > 10 seconds (likely stuck/polling)
+        if (loadingDuration > 10000) continue;
+
+        const resourceType = entry.initiatorType || "unknown";
+
+        // Filter out non-critical resources loading > 3 seconds
+        if (nonCriticalTypes.includes(resourceType) && loadingDuration > 3000) continue;
+
+        // Filter out image URLs even if type is unknown
+        const isImageUrl = /\.(jpg|jpeg|png|gif|webp|svg|ico)(\?|$)/i.test(url);
+        if (isImageUrl && loadingDuration > 3000) continue;
+
+        pending.push({
+          url,
+          loadingDurationMs: Math.round(loadingDuration),
+          resourceType,
+        });
+      }
+    }
+
+    return {
+      documentReadyState: doc.readyState,
+      documentLoading: doc.readyState !== "complete",
+      pendingRequests: pending,
+    };
+  });
+
+  return result;
+}
+
+export interface DevBrowserClient {
+  page: (name: string) => Promise<Page>;
+  list: () => Promise<string[]>;
+  close: (name: string) => Promise<void>;
+  disconnect: () => Promise<void>;
+  /**
+   * Get AI-friendly ARIA snapshot for a page.
+   * Returns YAML format with refs like [ref=e1], [ref=e2].
+   * Refs are stored on window.__devBrowserRefs for cross-connection persistence.
+   */
+  getAISnapshot: (name: string) => Promise<string>;
+  /**
+   * Get an element handle by its ref from the last getAISnapshot call.
+   * Refs persist across Playwright connections.
+   */
+  selectSnapshotRef: (name: string, ref: string) => Promise<ElementHandle | null>;
+}
+
+export async function connect(serverUrl = "http://localhost:9222"): Promise<DevBrowserClient> {
+  let browser: Browser | null = null;
+  let wsEndpoint: string | null = null;
+  let connectingPromise: Promise<Browser> | null = null;
+
+  async function ensureConnected(): Promise<Browser> {
+    // Return existing connection if still active
+    if (browser && browser.isConnected()) {
+      return browser;
+    }
+
+    // If already connecting, wait for that connection (prevents race condition)
+    if (connectingPromise) {
+      return connectingPromise;
+    }
+
+    // Start new connection with mutex
+    connectingPromise = (async () => {
+      try {
+        // Fetch wsEndpoint from server
+        const res = await fetch(serverUrl);
+        if (!res.ok) {
+          throw new Error(`Server returned ${res.status}: ${await res.text()}`);
+        }
+        const info = (await res.json()) as ServerInfoResponse;
+        wsEndpoint = info.wsEndpoint;
+
+        // Connect to the browser via CDP
+        browser = await chromium.connectOverCDP(wsEndpoint);
+        return browser;
+      } finally {
+        connectingPromise = null;
+      }
+    })();
+
+    return connectingPromise;
+  }
+
+  // Find page by CDP targetId - more reliable than JS globals
+  async function findPageByTargetId(b: Browser, targetId: string): Promise<Page | null> {
+    for (const context of b.contexts()) {
+      for (const page of context.pages()) {
+        let cdpSession;
+        try {
+          cdpSession = await context.newCDPSession(page);
+          const { targetInfo } = await cdpSession.send("Target.getTargetInfo");
+          if (targetInfo.targetId === targetId) {
+            return page;
+          }
+        } catch (err) {
+          // Only ignore "target closed" errors, log unexpected ones
+          const msg = err instanceof Error ? err.message : String(err);
+          if (!msg.includes("Target closed") && !msg.includes("Session closed")) {
+            console.warn(`Unexpected error checking page target: ${msg}`);
+          }
+        } finally {
+          if (cdpSession) {
+            try {
+              await cdpSession.detach();
+            } catch {
+              // Ignore detach errors - session may already be closed
+            }
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  // Helper to get a page by name (used by multiple methods)
+  async function getPage(name: string): Promise<Page> {
+    // Request the page from server (creates if doesn't exist)
+    const res = await fetch(`${serverUrl}/pages`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name } satisfies GetPageRequest),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to get page: ${await res.text()}`);
+    }
+
+    const { targetId } = (await res.json()) as GetPageResponse;
+
+    // Connect to browser
+    const b = await ensureConnected();
+
+    // Find the page by targetId
+    const page = await findPageByTargetId(b, targetId);
+    if (!page) {
+      throw new Error(`Page "${name}" not found in browser contexts`);
+    }
+
+    return page;
+  }
+
+  return {
+    page: getPage,
+
+    async list(): Promise<string[]> {
+      const res = await fetch(`${serverUrl}/pages`);
+      const data = (await res.json()) as ListPagesResponse;
+      return data.pages;
+    },
+
+    async close(name: string): Promise<void> {
+      const res = await fetch(`${serverUrl}/pages/${encodeURIComponent(name)}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) {
+        throw new Error(`Failed to close page: ${await res.text()}`);
+      }
+    },
+
+    async disconnect(): Promise<void> {
+      // Just disconnect the CDP connection - pages persist on server
+      if (browser) {
+        await browser.close();
+        browser = null;
+      }
+    },
+
+    async getAISnapshot(name: string): Promise<string> {
+      // Get the page
+      const page = await getPage(name);
+
+      // Inject the snapshot script and call getAISnapshot
+      const snapshotScript = getSnapshotScript();
+      const snapshot = await page.evaluate((script: string) => {
+        // Inject script if not already present
+        // Note: page.evaluate runs in browser context where window exists
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const w = globalThis as any;
+        if (!w.__devBrowser_getAISnapshot) {
+          // eslint-disable-next-line no-eval
+          eval(script);
+        }
+        return w.__devBrowser_getAISnapshot();
+      }, snapshotScript);
+
+      return snapshot;
+    },
+
+    async selectSnapshotRef(name: string, ref: string): Promise<ElementHandle | null> {
+      // Get the page
+      const page = await getPage(name);
+
+      // Find the element using the stored refs
+      const elementHandle = await page.evaluateHandle((refId: string) => {
+        // Note: page.evaluateHandle runs in browser context where globalThis is the window
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const w = globalThis as any;
+        const refs = w.__devBrowserRefs;
+        if (!refs) {
+          throw new Error("No snapshot refs found. Call getAISnapshot first.");
+        }
+        const element = refs[refId];
+        if (!element) {
+          throw new Error(
+            `Ref "${refId}" not found. Available refs: ${Object.keys(refs).join(", ")}`
+          );
+        }
+        return element;
+      }, ref);
+
+      // Check if we got an element
+      const element = elementHandle.asElement();
+      if (!element) {
+        await elementHandle.dispose();
+        return null;
+      }
+
+      return element;
+    },
+  };
+}