traw 0.2.2

package/src/browser/controller.ts

@@ -0,0 +1,188 @@
+import { firefox, type Browser, type Page, type BrowserContext } from "playwright"
+import { mkdir } from "node:fs/promises"
+import type { Action, PageState, AgentConfig } from "../types"
+
+export class BrowserController {
+  private browser: Browser | null = null
+  private context: BrowserContext | null = null
+  private page: Page | null = null
+  private config: AgentConfig
+
+  constructor(config: AgentConfig) {
+    this.config = config
+  }
+
+  async launch(): Promise<void> {
+    this.browser = await firefox.launch({
+      headless: this.config.headless,
+    })
+
+    this.context = await this.browser.newContext({
+      viewport: { width: 1280, height: 720 },
+      locale: "en-US",
+      timezoneId: "Europe/Moscow",
+      ...(this.config.recordVideo && {
+        recordVideo: {
+          dir: "./traw-recordings",
+          size: { width: 1280, height: 720 },
+        },
+      }),
+    })
+    this.page = await this.context.newPage()
+  }
+
+  async close(): Promise<string | null> {
+    let videoPath: string | null = null
+
+    if (this.page && this.config.recordVideo) {
+      try {
+        const video = this.page.video()
+        if (video) {
+          await this.page.close()
+          this.page = null
+          await mkdir("./traw-recordings", { recursive: true })
+          const savePath = `./traw-recordings/traw-${Date.now()}.webm`
+          await video.saveAs(savePath)
+          videoPath = savePath
+        }
+      } catch (e: any) {
+        console.error("[video error]", e.message)
+      }
+    }
+
+    if (this.page) await this.page.close().catch(() => {})
+    if (this.context) await this.context.close().catch(() => {})
+    if (this.browser) await this.browser.close().catch(() => {})
+
+    return videoPath
+  }
+
+  async getState(): Promise<PageState> {
+    if (!this.page) throw new Error("browser not launched")
+
+    await this.page.waitForLoadState("domcontentloaded").catch(() => {})
+
+    const url = this.page.url()
+    const title = await this.page.title()
+
+    const xml = await this.page.evaluate(() => {
+      const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+      const out: string[] = ["<page>"]
+      let idx = 0
+
+      document.querySelectorAll("[data-idx]").forEach(el => el.removeAttribute("data-idx"))
+
+      const walk = (node: Element, depth: number) => {
+        const el = node as HTMLElement
+        if (el.offsetParent === null && el.tagName !== "BODY" && el.tagName !== "HTML") return
+
+        const tag = el.tagName.toLowerCase()
+        const indent = "  ".repeat(depth)
+
+        const skipTags = ["script", "style", "noscript", "svg", "path", "meta", "link", "br", "hr"]
+        if (skipTags.includes(tag)) return
+
+        const interactiveTags = ["a", "button", "input", "textarea", "select"]
+        const hasRole = el.getAttribute("role")
+        const hasOnclick = el.hasAttribute("onclick")
+        const isInteractive = interactiveTags.includes(tag) || hasRole || hasOnclick
+
+        if (isInteractive) {
+          el.setAttribute("data-idx", String(idx))
+
+          const attrs: string[] = [`id="${idx}"`]
+          
+          const type = (el as HTMLInputElement).type
+          if (type) attrs.push(`type="${type}"`)
+          
+          const href = (el as HTMLAnchorElement).href
+          if (href && tag === "a") attrs.push(`href="${esc(href.slice(0, 80))}"`)
+          
+          const val = (el as HTMLInputElement).value
+          if (val) attrs.push(`value="${esc(val.slice(0, 40))}"`)
+          
+          if ((el as any).disabled) attrs.push(`disabled="true"`)
+          if ((el as any).checked) attrs.push(`checked="true"`)
+          if ((el as any).readOnly) attrs.push(`readonly="true"`)
+          if ((el as any).required) attrs.push(`required="true"`)
+          if (el.getAttribute("aria-expanded")) attrs.push(`expanded="${el.getAttribute("aria-expanded")}"`)
+          if (el.getAttribute("aria-selected") === "true") attrs.push(`selected="true"`)
+
+          const text = el.textContent?.trim().slice(0, 60) || ""
+          const ariaLabel = el.getAttribute("aria-label")
+          const placeholder = (el as HTMLInputElement).placeholder
+          const label = esc(ariaLabel || text || placeholder || "")
+
+          out.push(`${indent}<${tag} ${attrs.join(" ")}>${label}</${tag}>`)
+          idx++
+        } else {
+          const textTags = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "li", "td", "th", "label"]
+          if (textTags.includes(tag)) {
+            const directText = Array.from(el.childNodes)
+              .filter(n => n.nodeType === 3)
+              .map(n => n.textContent?.trim())
+              .join(" ")
+              .trim()
+              .slice(0, 120)
+
+            if (directText.length > 2) {
+              out.push(`${indent}<${tag}>${esc(directText)}</${tag}>`)
+            }
+          }
+        }
+
+        Array.from(el.children).forEach(child => walk(child, depth + 1))
+      }
+
+      walk(document.body, 0)
+      out.push("</page>")
+      return out.join("\n")
+    }).catch(() => "<page></page>")
+
+    return { url, title, text: xml }
+  }
+
+  async execute(action: Action): Promise<string> {
+    if (!this.page) throw new Error("browser not launched")
+
+    try {
+      switch (action.type) {
+        case "goto":
+          await this.page.goto(action.text!, { waitUntil: "domcontentloaded", timeout: 15000 })
+          return `navigated to ${action.text}`
+
+        case "click":
+          const clickEl = this.page.locator(`[data-idx="${action.index}"]`)
+          await clickEl.click({ timeout: 5000 })
+          return `clicked [${action.index}]`
+
+        case "type":
+          const typeEl = this.page.locator(`[data-idx="${action.index}"]`)
+          await typeEl.fill(action.text!)
+          await this.page.waitForTimeout(300)
+          return `typed "${action.text}" into [${action.index}]`
+
+        case "scroll":
+          const delta = action.direction === "down" ? 500 : -500
+          await this.page.mouse.wheel(0, delta)
+          return `scrolled ${action.direction}`
+
+        case "wait":
+          await this.page.waitForTimeout(2000)
+          return "waited 2s"
+
+        case "back":
+          await this.page.goBack({ waitUntil: "domcontentloaded", timeout: 10000 })
+          return "went back"
+
+        case "done":
+          return "done"
+
+        default:
+          return `unknown action: ${action.type}`
+      }
+    } catch (err: any) {
+      return `error: ${err.message}`
+    }
+  }
+}

package/src/cli/help.ts

@@ -0,0 +1,37 @@
+import { VERSION } from "../utils/version"
+
+export function printHelp() {
+  console.log(`
+traw v${VERSION} - AI browser agent
+
+Usage:
+  traw run "your goal here"
+  traw auth
+  traw upd
+
+Commands:
+  run           execute browser agent with a goal
+  auth          register new account and set as default
+  upd           check for updates
+
+Options:
+  --fast        use fast model (glm-4-flash, no thinking)
+  --headless    run without visible browser (default)
+  --headed      show browser window
+  --video       enable video recording
+  --vision      send screenshots to AI (visual mode)
+  --steps=N     max steps (default: 20)
+  --mo=URL      mo server url (default: http://localhost:8804)
+  --api=URL     custom OpenAI-compatible API url (bypasses mo)
+  --api-key=KEY API key for custom endpoint (or use OPENAI_API_KEY env)
+  --model=NAME  model name (default: glm-4.7)
+  -v, --version show version
+
+Examples:
+  traw auth
+  traw run "find the weather in Moscow"
+  traw run --fast "quick search for bun.js"
+  traw run --video "search for documentation"
+  traw run --api=https://api.openai.com --model=gpt-4o "search for news"
+`)
+}

package/src/cli/index.ts

@@ -0,0 +1,281 @@
+#!/usr/bin/env bun
+import { Agent } from "../agent/agent"
+import type { AgentConfig } from "../types"
+import { log, setSilent } from "../utils/log"
+import { pingMo, isMoInstalled, downloadMo, startMo, stopMo } from "../utils/mo-manager"
+import { printHelp } from "./help"
+import { VERSION, checkForUpdates } from "../utils/version"
+import { checkFirstRun, markFirstRunDone, showStarBanner } from "../utils/first-run"
+
+const DEFAULT_MO_PORT = 8804
+
+const defaultConfig: AgentConfig = {
+  moUrl: `http://localhost:${DEFAULT_MO_PORT}`,
+  apiUrl: undefined,
+  apiKey: process.env.OPENAI_API_KEY || process.env.API_KEY,
+  model: "glm-4.7",
+  thinking: true,
+  headless: true,
+  recordVideo: false,
+  maxSteps: 20,
+  debug: false,
+  jsonOutput: false,
+}
+
+async function prompt(question: string): Promise<string> {
+  process.stdout.write(question)
+  for await (const line of console) {
+    return line.trim()
+  }
+  return ""
+}
+
+async function ensureMo(moUrl: string): Promise<boolean> {
+  // check if mo is already running
+  if (await pingMo(moUrl)) {
+    return true
+  }
+
+  // mo not running, check if installed
+  const installed = await isMoInstalled()
+
+  if (!installed) {
+    const answer = await prompt("mo server not found. install mo? [Y/n] ")
+    if (answer.toLowerCase() === "n") {
+      log.error("mo is required to run traw")
+      return false
+    }
+
+    try {
+      await downloadMo()
+    } catch (err: any) {
+      log.error(`failed to install mo: ${err.message}`)
+      return false
+    }
+  }
+
+  // start mo
+  try {
+    const port = parseInt(new URL(moUrl).port) || DEFAULT_MO_PORT
+    await startMo(port)
+    return true
+  } catch (err: any) {
+    log.error(`failed to start mo: ${err.message}`)
+    return false
+  }
+}
+
+async function registerAccount(moUrl: string): Promise<void> {
+  log.info("registering new account...")
+  log.info("browser will open for captcha solving")
+
+  const resp = await fetch(`${moUrl}/auth/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+  })
+
+  if (!resp.ok) {
+    const err = await resp.json().catch(() => ({ error: resp.statusText }))
+    throw new Error(err.error || `registration failed: ${resp.status}`)
+  }
+
+  const data = await resp.json() as {
+    success: boolean
+    token: { id: string; email: string; active: boolean }
+  }
+
+  if (!data.success) {
+    throw new Error("registration failed")
+  }
+
+  log.success(`registered: ${data.token.email}`)
+  log.info(`token id: ${data.token.id}`)
+  log.info("token is now active and ready to use")
+}
+
+async function main() {
+  const args = process.argv.slice(2)
+
+  // show star banner on first run (non-blocking)
+  if (await checkFirstRun()) {
+    showStarBanner()
+    await markFirstRunDone()
+  }
+
+  if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
+    printHelp()
+    return
+  }
+
+  const cmd = args[0]
+
+  // handle version command
+  if (cmd === "--version" || cmd === "-v") {
+    console.log(`traw ${VERSION}`)
+    return
+  }
+
+  // handle update check command
+  if (cmd === "upd" || cmd === "update") {
+    log.info(`current version: ${VERSION}`)
+    log.info("checking for updates...")
+
+    const update = await checkForUpdates()
+    if (!update) {
+      log.error("failed to check for updates")
+      process.exit(1)
+    }
+
+    if (update.hasUpdate) {
+      console.log()
+      log.success(`new version available: ${update.latest}`)
+      log.info(`download: ${update.url}`)
+    } else {
+      log.success("you're on the latest version!")
+    }
+    return
+  }
+
+  // handle auth command
+  if (cmd === "auth") {
+    let moUrl = defaultConfig.moUrl
+    for (let i = 1; i < args.length; i++) {
+      if (args[i].startsWith("--mo=")) {
+        moUrl = args[i].split("=")[1]
+      }
+    }
+
+    if (!await ensureMo(moUrl)) {
+      process.exit(1)
+    }
+
+    try {
+      await registerAccount(moUrl)
+    } catch (err: any) {
+      log.error(err.message)
+      process.exit(1)
+    } finally {
+      stopMo()
+    }
+    return
+  }
+
+  if (cmd !== "run") {
+    console.error(`unknown command: ${cmd}`)
+    process.exit(1)
+  }
+
+  const config = { ...defaultConfig }
+  const goalParts: string[] = []
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i]
+
+    if (arg === "--headless") {
+      config.headless = true
+      continue
+    }
+    if (arg === "--no-headless" || arg === "--headed") {
+      config.headless = false
+      continue
+    }
+    if (arg === "--video") {
+      config.recordVideo = true
+      continue
+    }
+    if (arg === "--fast") {
+      config.model = "0727-106B-API"
+      config.thinking = false
+      continue
+    }
+    if (arg === "--debug") {
+      config.debug = true
+      continue
+    }
+    if (arg === "--json") {
+      config.jsonOutput = true
+      continue
+    }
+    if (arg.startsWith("--steps=")) {
+      config.maxSteps = parseInt(arg.split("=")[1])
+      continue
+    }
+    if (arg.startsWith("--mo=")) {
+      config.moUrl = arg.split("=")[1]
+      continue
+    }
+    if (arg.startsWith("--api=")) {
+      config.apiUrl = arg.split("=")[1]
+      continue
+    }
+    if (arg.startsWith("--api-key=")) {
+      config.apiKey = arg.split("=")[1]
+      continue
+    }
+    if (arg.startsWith("--model=")) {
+      config.model = arg.split("=")[1]
+      continue
+    }
+    if (!arg.startsWith("--")) {
+      goalParts.push(arg)
+    }
+  }
+
+  const goal = goalParts.join(" ")
+  if (!goal) {
+    log.error("provide a goal: bun run traw run \"your goal\"")
+    process.exit(1)
+  }
+
+  if (!config.jsonOutput) {
+    log.header(goal)
+    log.config({
+      api: config.apiUrl || config.moUrl,
+      model: config.model,
+      headless: config.headless,
+      video: config.recordVideo,
+      steps: config.maxSteps,
+    })
+  } else {
+    setSilent(true)
+  }
+
+  // skip mo setup if using custom api
+  if (!config.apiUrl && !await ensureMo(config.moUrl)) {
+    process.exit(1)
+  }
+
+  const agent = new Agent(config)
+
+  try {
+    const result = await agent.run(goal)
+
+    if (config.jsonOutput) {
+      const output = {
+        success: true,
+        goal,
+        steps: result.history,
+        video: result.video,
+      }
+      console.log(JSON.stringify(output))
+    } else if (result.video) {
+      log.video(result.video)
+    }
+  } catch (err: any) {
+    if (config.jsonOutput) {
+      const output = {
+        success: false,
+        goal,
+        error: err.message,
+      }
+      console.log(JSON.stringify(output))
+      process.exit(1)
+    }
+    log.error(err.message)
+    process.exit(1)
+  } finally {
+    stopMo()
+  }
+}
+
+main()

package/src/index.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env bun
+// re-export for cli entry point
+export * from "./cli/index"

package/src/markdownly.d.ts

@@ -0,0 +1,3 @@
+declare module "markdownly.js" {
+  export function markdown(text: string): string
+}

package/src/types.ts

@@ -0,0 +1,47 @@
+export type ActionType =
+  | "click"
+  | "type"
+  | "scroll"
+  | "goto"
+  | "wait"
+  | "back"
+  | "done"
+
+export interface Action {
+  type: ActionType
+  index?: number
+  text?: string
+  direction?: "up" | "down"
+  reason: string
+}
+
+export interface PageState {
+  url: string
+  title: string
+  text: string
+}
+
+export interface AgentStep {
+  timestamp: number
+  thought: string
+  action: Action
+  result?: string
+}
+
+export interface AgentConfig {
+  moUrl: string
+  apiUrl?: string
+  apiKey?: string
+  model: string
+  thinking: boolean
+  headless: boolean
+  recordVideo: boolean
+  maxSteps: number
+  debug: boolean
+  jsonOutput: boolean
+}
+
+export interface ChatMessage {
+  role: "system" | "user" | "assistant"
+  content: string
+}

package/src/utils/first-run.ts

@@ -0,0 +1,27 @@
+import { homedir } from "os"
+import { join } from "path"
+
+const CONFIG_DIR = join(homedir(), ".traw")
+const FIRST_RUN_FILE = join(CONFIG_DIR, ".first-run-done")
+
+const c = {
+  reset: "\x1b[0m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+  dim: "\x1b[2m",
+}
+
+export async function checkFirstRun(): Promise<boolean> {
+  const file = Bun.file(FIRST_RUN_FILE)
+  return !(await file.exists())
+}
+
+export async function markFirstRunDone(): Promise<void> {
+  await Bun.write(FIRST_RUN_FILE, "1")
+}
+
+export function showStarBanner(): void {
+  console.log()
+  console.log(`${c.yellow}*${c.reset} like traw? give it a star: ${c.cyan}https://github.com/zarazaex69/traw${c.reset}`)
+  console.log()
+}