index.ts

import { tool, type PluginInput, type PluginOptions } from "@opencode-ai/plugin"
import { chromium, type Page, type BrowserContext } from "playwright"
import path from "path"
import fs from "fs"
import os from "os"

const PROFILE_DIR = path.join(os.homedir(), ".opencode", "browser-profile")

interface BrowserState {
  context: BrowserContext | null
  pages: Map<string, Page>
  currentPageId: string | null
  pageCounter: number
  refs: Map<string, Map<string, { role: string; name?: string; nth?: number }>>
  headless: boolean
  lastActivityTime: number
}

const state: BrowserState = {
  context: null,
  pages: new Map(),
  currentPageId: null,
  pageCounter: 0,
  refs: new Map(),
  headless: true,
  lastActivityTime: 0,
}

const IDLE_TIMEOUT = 30 * 60 * 1000
let idleCheckInterval: Timer | null = null

function touchActivity() {
  state.lastActivityTime = Date.now()
}

function startIdleWatchdog() {
  if (idleCheckInterval) clearInterval(idleCheckInterval)

  idleCheckInterval = setInterval(async () => {
    if (!state.context) return

    const idle = Date.now() - state.lastActivityTime
    if (idle >= IDLE_TIMEOUT) {
      await stopBrowser()
    }
  }, 60 * 1000)
}

function stopIdleWatchdog() {
  if (idleCheckInterval) {
    clearInterval(idleCheckInterval)
    idleCheckInterval = null
  }
}

interface BrowserResult {
  success: boolean
  error?: string
}

async function ensureBrowser(headless: boolean = true): Promise<BrowserResult> {
  touchActivity()

  if (state.context) {
    if (!headless && state.headless) {
      await stopBrowser()
    } else {
      startIdleWatchdog()
      return { success: true }
    }
  }

  try {
    state.headless = headless

    if (!fs.existsSync(PROFILE_DIR)) {
      fs.mkdirSync(PROFILE_DIR, { recursive: true })
    }

    state.context = await chromium.launchPersistentContext(PROFILE_DIR, {
      headless,
      viewport: { width: 1280, height: 720 },
    })

    state.context.on("page", (page) => {
      const pageId = nextPageId()
      state.pages.set(pageId, page)
      state.currentPageId = pageId
      state.refs.set(pageId, new Map())
    })

    startIdleWatchdog()
    return { success: true }
  } catch (error) {
    const errorMessage = error instanceof Error ? error.message : String(error)
    return { success: false, error: errorMessage }
  }
}

async function stopBrowser(): Promise<void> {
  stopIdleWatchdog()

  if (state.context) {
    await state.context.close()
  }

  state.context = null
  state.pages.clear()
  state.currentPageId = null
  state.pageCounter = 0
  state.refs.clear()
  state.headless = true
}

function nextPageId(): string {
  state.pageCounter++
  return `page_${state.pageCounter}`
}

function getPage(pageId: string): Page | undefined {
  return state.pages.get(pageId)
}

function getRefs(pageId: string): Map<string, { role: string; name?: string; nth?: number }> {
  if (!state.refs.has(pageId)) {
    state.refs.set(pageId, new Map())
  }
  return state.refs.get(pageId)!
}

async function getLocatorByRef(page: Page, pageId: string, ref: string) {
  const refs = getRefs(pageId)
  const info = refs.get(ref)

  if (!info) return null

  const locator = page.getByRole(info.role as any, { name: info.name })
  return info.nth && info.nth > 0 ? locator.nth(info.nth) : locator
}

async function buildSnapshot(page: Page): Promise<{ snapshot: string; refs: string[] }> {
  const snapshot = await page.locator("body").ariaSnapshot()
  const refs = new Map<string, { role: string; name?: string; nth?: number }>()

  const lines = snapshot.split("\n")
  const counter = { value: 0 }
  const roleCounts = new Map<string, number>()

  const processedLines = lines.map((line) => {
    const match = line.match(/^(\s*)-\s*(\w+)(?:\s+"([^"]*)")?/)
    if (!match) return line

    const [, indent, role, name] = match
    const roleKey = `${role}:${name || ""}`
    const count = roleCounts.get(roleKey) || 0
    roleCounts.set(roleKey, count + 1)

    const interactiveRoles = [
      "button", "link", "textbox", "checkbox", "radio", "combobox",
      "listbox", "menuitem", "searchbox", "slider", "switch", "tab",
    ]

    if (interactiveRoles.includes(role.toLowerCase())) {
      counter.value++
      const ref = `e${counter.value}`
      refs.set(ref, { role: role.toLowerCase(), name, nth: count > 0 ? count : undefined })

      let processed = `${indent}- ${role}`
      if (name) processed += ` "${name}"`
      processed += ` [ref=${ref}]`
      if (count > 0) processed += ` [nth=${count}]`
      return processed
    }

    return line
  })

  const pageId = state.currentPageId || "default"
  state.refs.set(pageId, refs)

  return {
    snapshot: processedLines.join("\n"),
    refs: Array.from(refs.keys()),
  }
}

function resolvePageId(args: { page_id?: string }) {
  return args.page_id || state.currentPageId || "default"
}

function resolvePage(pageId: string): Page | string {
  const page = getPage(pageId)
  if (!page) return "Error: Page not found"
  return page
}

export default {
  id: "browser",
  async server(input: PluginInput, options?: PluginOptions) {
    return {
      tool: {
        browser: tool({
          description: `Control a web browser using Playwright. Actions: start, stop, open, navigate, snapshot, screenshot, click, type, evaluate, wait.

Workflow:
1. start (headed=true for visible window)
2. open url
3. snapshot to get element refs
4. click/type using refs
5. stop when done

Use ref from snapshot for stable element targeting. Multiple tabs supported via page_id.`,
          args: {
            action: tool.schema.string().describe("Action: start, stop, open, navigate, snapshot, screenshot, click, type, evaluate, wait, close, back"),
            url: tool.schema.string().optional().describe("URL to open or navigate to"),
            page_id: tool.schema.string().optional().default("default").describe("Page/tab identifier (default: 'default')"),
            ref: tool.schema.string().optional().describe("Element ref from snapshot (preferred over selector)"),
            selector: tool.schema.string().optional().describe("CSS selector (use ref when possible)"),
            text: tool.schema.string().optional().describe("Text to type"),
            code: tool.schema.string().optional().describe("JavaScript code to evaluate"),
            path: tool.schema.string().optional().describe("File path for screenshot"),
            wait: tool.schema.number().optional().default(0).describe("Milliseconds to wait"),
            full_page: tool.schema.boolean().optional().default(false).describe("Full page screenshot"),
            headed: tool.schema.boolean().optional().default(false).describe("Show visible browser window"),
            submit: tool.schema.boolean().optional().default(false).describe("Press Enter after typing"),
            slowly: tool.schema.boolean().optional().default(false).describe("Type character by character"),
            timeout: tool.schema.number().optional().default(30000).describe("Timeout in milliseconds"),
          },
          async execute(args, context) {
            const action = args.action.toLowerCase().trim()

            try {
              touchActivity()

              if (action === "start") {
                const headless = !(args.headed ?? false)
                const result = await ensureBrowser(headless)
                if (!result.success) {
                  return `Failed to start browser: ${result.error}. Make sure Playwright is installed: bunx playwright install chromium`
                }
                return `Browser started (${args.headed ? "visible window" : "headless"})`
              }

              if (action === "stop") {
                await stopBrowser()
                return "Browser stopped"
              }

              if (action === "open") {
                if (!args.url) return "Error: url required for open action"

                const result = await ensureBrowser()
                if (!result.success) {
                  return `Error: Failed to start browser: ${result.error}`
                }

                const pageId = args.page_id || nextPageId()
                const page = await state.context!.newPage()

                state.pages.set(pageId, page)
                state.currentPageId = pageId
                state.refs.set(pageId, new Map())

                await page.goto(args.url, { timeout: args.timeout })

                return `Opened ${args.url} (page_id: ${pageId})`
              }

              if (action === "navigate") {
                if (!args.url) return "Error: url required for navigate action"

                const page = resolvePage(resolvePageId(args))
                if (typeof page === "string") return page

                await page.goto(args.url, { timeout: args.timeout })
                return `Navigated to ${args.url}`
              }

              if (action === "back") {
                const page = resolvePage(resolvePageId(args))
                if (typeof page === "string") return page

                await page.goBack({ timeout: args.timeout })
                return "Navigated back"
              }

              if (action === "snapshot") {
                const page = resolvePage(resolvePageId(args))
                if (typeof page === "string") return page

                const result = await buildSnapshot(page)

                let output = `Page: ${page.url()}\n\n`
                output += `Interactive Elements:\n${result.snapshot}\n\n`
                output += `Available refs: ${result.refs.join(", ")}`

                if (args.path) {
                  const filePath = path.isAbsolute(args.path)
                    ? args.path
                    : path.join(context.directory, args.path)
                  await fs.promises.writeFile(filePath, output, "utf-8")
                  output += `\n\nSnapshot saved to: ${args.path}`
                }

                return output
              }

              if (action === "screenshot") {
                const pageId = resolvePageId(args)
                const page = resolvePage(pageId)
                if (typeof page === "string") return page

                const screenshotPath = args.path || `screenshot-${Date.now()}.png`
                const filePath = path.isAbsolute(screenshotPath)
                  ? screenshotPath
                  : path.join(context.directory, screenshotPath)

                if (args.ref) {
                  const locator = await getLocatorByRef(page, pageId, args.ref)
                  if (!locator) return `Error: Ref '${args.ref}' not found`
                  await locator.screenshot({ path: filePath })
                } else {
                  await page.screenshot({ path: filePath, fullPage: args.full_page })
                }

                return `Screenshot saved to ${screenshotPath}`
              }

              if (action === "click") {
                const pageId = resolvePageId(args)
                const page = resolvePage(pageId)
                if (typeof page === "string") return page

                if (!args.ref && !args.selector) {
                  return "Error: ref or selector required for click"
                }

                const locator = args.ref
                  ? await getLocatorByRef(page, pageId, args.ref)
                  : page.locator(args.selector!).first()

                if (!locator) return `Error: Ref '${args.ref}' not found`

                await locator.click({ timeout: args.timeout })

                if (args.wait && args.wait > 0) {
                  await page.waitForTimeout(args.wait)
                }

                return `Clicked ${args.ref || args.selector}`
              }

              if (action === "type") {
                const pageId = resolvePageId(args)
                const page = resolvePage(pageId)
                if (typeof page === "string") return page

                if (!args.ref && !args.selector) {
                  return "Error: ref or selector required for type"
                }

                if (!args.text) {
                  return "Error: text required for type action"
                }

                const locator = args.ref
                  ? await getLocatorByRef(page, pageId, args.ref)
                  : page.locator(args.selector!).first()

                if (!locator) return `Error: Ref '${args.ref}' not found`

                if (args.slowly) {
                  await locator.pressSequentially(args.text)
                } else {
                  await locator.fill(args.text)
                }

                if (args.submit) {
                  await locator.press("Enter")
                }

                return `Typed into ${args.ref || args.selector}`
              }

              if (action === "evaluate" || action === "eval") {
                const page = resolvePage(resolvePageId(args))
                if (typeof page === "string") return page

                if (!args.code) return "Error: code required for evaluate"

                const result = await page.evaluate(args.code)
                return `Result: ${JSON.stringify(result, null, 2)}`
              }

              if (action === "wait") {
                const page = resolvePage(resolvePageId(args))
                if (typeof page === "string") return page

                if (args.wait && args.wait > 0) {
                  await page.waitForTimeout(args.wait)
                  return `Waited ${args.wait}ms`
                }

                await page.waitForLoadState("networkidle", { timeout: args.timeout })
                return "Waited for network idle"
              }

              if (action === "close") {
                const pageId = args.page_id || state.currentPageId
                if (!pageId) return "Error: No page to close"

                const page = getPage(pageId)
                if (!page) return "Error: Page not found"

                await page.close()
                state.pages.delete(pageId)
                state.refs.delete(pageId)

                if (state.currentPageId === pageId) {
                  state.currentPageId = state.pages.keys().next().value || null
                }

                return `Closed page ${pageId}`
              }

              return `Error: Unknown action '${action}'. Available: start, stop, open, navigate, back, snapshot, screenshot, click, type, evaluate, wait, close`

            } catch (error) {
              const errorMessage = error instanceof Error ? error.message : String(error)
              return `Error: ${errorMessage}`
            }
          },
        }),

        browser_start: tool({
          description: "Start browser in visible mode (headed) for debugging or demos",
          args: {
            headed: tool.schema.boolean().default(true).describe("Show visible browser window"),
          },
          async execute(args) {
            const headless = !args.headed
            const result = await ensureBrowser(headless)
            return result.success
              ? `Browser started in ${args.headed ? "visible" : "headless"} mode`
              : `Failed to start browser: ${result.error}`
          },
        }),

        browser_snapshot: tool({
          description: "Take a snapshot of the current page to get interactive element refs",
          args: {
            page_id: tool.schema.string().optional().describe("Page ID (optional)"),
          },
          async execute(args) {
            const pageId = args.page_id || state.currentPageId || "default"
            const page = getPage(pageId)
            if (!page) return "Error: Page not found. Open a page first."

            const result = await buildSnapshot(page)

            return `Page: ${page.url()}\n\n${result.snapshot}\n\nRefs: ${result.refs.join(", ")}`
          },
        }),

        browser_click: tool({
          description: "Click an element using ref from snapshot",
          args: {
            ref: tool.schema.string().describe("Element ref from snapshot"),
            page_id: tool.schema.string().optional().describe("Page ID (optional)"),
          },
          async execute(args) {
            const pageId = args.page_id || state.currentPageId || "default"
            const page = getPage(pageId)
            if (!page) return "Error: Page not found"

            const locator = await getLocatorByRef(page, pageId, args.ref)
            if (!locator) return `Error: Ref '${args.ref}' not found`

            await locator.click()
            return `Clicked ${args.ref}`
          },
        }),

        browser_type: tool({
          description: "Type text into an element using ref from snapshot",
          args: {
            ref: tool.schema.string().describe("Element ref from snapshot"),
            text: tool.schema.string().describe("Text to type"),
            submit: tool.schema.boolean().optional().default(false).describe("Press Enter after typing"),
            page_id: tool.schema.string().optional().describe("Page ID (optional)"),
          },
          async execute(args) {
            const pageId = args.page_id || state.currentPageId || "default"
            const page = getPage(pageId)
            if (!page) return "Error: Page not found"

            const locator = await getLocatorByRef(page, pageId, args.ref)
            if (!locator) return `Error: Ref '${args.ref}' not found`

            await locator.fill(args.text)
            if (args.submit) await locator.press("Enter")

            return `Typed into ${args.ref}`
          },
        }),
      },
    }
  },
}