traw 0.1.0

package/.github/workflows/release-traw.yml

@@ -0,0 +1,63 @@
+name: Release Traw
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  publish-npm:
+    name: Publish to NPM
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Get version
+        id: version
+        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
+
+      - name: Update package version
+        run: |
+          npm version ${{ steps.version.outputs.VERSION }} --no-git-tag-version --allow-same-version
+
+      - name: Publish to NPM
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v1
+        with:
+          name: Traw v${{ steps.version.outputs.VERSION }}
+          body: |
+            ## Traw v${{ steps.version.outputs.VERSION }}
+
+            ### Installation
+
+            ```bash
+            # npm
+            npm install traw
+
+            # bun
+            bun add traw
+            ```
+
+            ### Usage
+
+            ```bash
+            bun run traw
+            ```
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "mo"]
+	path = mo
+	url = https://github.com/zarazaex69/mo.git

package/README.md

@@ -0,0 +1,36 @@
+<div align="center">
+  <img src="assets/logo.png" alt="Traw" width="300"/>
+</div>
+
+<div align="center">
+
+![Bun](https://img.shields.io/badge/-Bun-0D1117?style=flat-square&logo=Bun&logoColor=F3E6D8)
+![License](https://img.shields.io/badge/license-BSD--2--Clause-0D1117?style=flat-square&logo=open-source-initiative&logoColor=green&labelColor=0D1117)
+
+</div>
+
+## About
+
+Traw is a simple and fast neuro agent that browses the internet instead of you
+
+## Fast Start
+
+```bash
+ # start the traw
+bun run traw run "your goal" // re.. goal -> you real goal... not mock... you get the idea... 
+```
+
+<div align="center">
+
+---
+
+### Contact
+
+Telegram: [zarazaex](https://t.me/zarazaexe)
+<br>
+Email: [zarazaex@tuta.io](mailto:zarazaex@tuta.io)
+<br>
+Site: [zarazaex.xyz](https://zarazaex.xyz)
+<br>
+
+</div>

package/bun.lock

@@ -0,0 +1,35 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "traw",
+      "dependencies": {
+        "playwright": "^1.40.0",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+
+    "@types/node": ["@types/node@25.0.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA=="],
+
+    "bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+
+    "fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
+
+    "playwright": ["playwright@1.57.0", "", { "dependencies": { "playwright-core": "1.57.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw=="],
+
+    "playwright-core": ["playwright-core@1.57.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+  }
+}

package/index.ts

@@ -0,0 +1 @@
+console.log("Hello via Bun!");

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "traw",
+  "version": "0.1.0",
+  "module": "src/index.ts",
+  "type": "module",
+  "scripts": {
+    "traw": "bun run src/index.ts",
+    "postinstall": "bunx playwright install firefox"
+  },
+  "dependencies": {
+    "playwright": "^1.40.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}

package/src/agent.ts

@@ -0,0 +1,173 @@
+import type { Action, AgentConfig, AgentStep, ChatMessage, PageState } from "./types"
+import { BrowserController } from "./browser"
+import { MoClient } from "./mo-client"
+
+const systemPrompt = `You are a browser automation agent. You see the page state and decide what to do next.
+
+ACTIONS:
+- goto: navigate to URL
+- click: click element by CSS selector
+- type: type text into input (selector + text)
+- scroll: scroll up/down
+- wait: wait 1s
+- done: task complete, report results
+
+CSS SELECTOR RULES (CRITICAL):
+- Use ONLY valid CSS selectors
+- IDs: #search_form_input
+- Classes: .result__a or a.result__a
+- Attributes: a[href*="github.com"] or input[name="q"]
+- Tag + class: button.search-btn
+- NEVER use parentheses in selectors like a(something) - this is INVALID
+- NEVER invent class names - use only what you see in the DOM
+
+IMPORTANT RULES:
+- Follow your plan step by step
+- Do NOT use "done" until you have FULLY completed ALL steps in your plan
+- If you encounter an error, try alternative approach
+- Actually visit pages and read content, don't guess from search results
+
+Respond with JSON only:
+{
+  "thought": "brief reasoning",
+  "action": {
+    "type": "click|type|goto|scroll|wait|done",
+    "selector": "#valid-css-selector",
+    "text": "for type/goto",
+    "direction": "up|down",
+    "reason": "why"
+  }
+}
+
+When ALL steps complete, use "done" with full results in "reason".`
+
+const planningPrompt = `You are a planning agent. Create a step-by-step plan to accomplish the user's goal using a web browser.
+
+Rules:
+- Be specific about what to search, click, or navigate to
+- Number each step
+- Keep it concise (max 10 steps)
+- Start from DuckDuckGo search page
+
+Respond with a numbered plan only, no JSON.`
+
+export class Agent {
+  private browser: BrowserController
+  private mo: MoClient
+  private config: AgentConfig
+  private history: AgentStep[] = []
+  private messages: ChatMessage[] = []
+  private plan = ""
+
+  constructor(config: AgentConfig) {
+    this.config = config
+    this.browser = new BrowserController(config)
+    this.mo = new MoClient(config.moUrl, config.model)
+  }
+
+  async run(goal: string): Promise<AgentStep[]> {
+    console.log(`\n[goal] ${goal}\n`)
+
+    console.log("[planning]...")
+    this.plan = await this.createPlan(goal)
+    console.log("\n" + this.plan + "\n")
+
+    await this.browser.launch()
+    await this.browser.execute({
+      type: "goto",
+      text: "https://html.duckduckgo.com/html/",
+      reason: "start page",
+    })
+
+    this.messages.push({ role: "system", content: systemPrompt })
+    this.messages.push({
+      role: "user",
+      content: `Your task: ${goal}\n\nYour plan:\n${this.plan}\n\nFollow this plan step by step. You are now on DuckDuckGo search.`,
+    })
+
+    try {
+      for (let step = 0; step < this.config.maxSteps; step++) {
+        const state = await this.browser.getState()
+
+        console.log(`\n--- step ${step + 1} ---`)
+        console.log(`url: ${state.url}`)
+        console.log(`title: ${state.title}`)
+
+        const decision = await this.think(state)
+
+        console.log(`thought: ${decision.thought}`)
+        console.log(`action: ${decision.action.type} - ${decision.action.reason}`)
+
+        const result = await this.browser.execute(decision.action)
+        console.log(`result: ${result}`)
+
+        this.history.push({
+          timestamp: Date.now(),
+          thought: decision.thought,
+          action: decision.action,
+          result,
+        })
+
+        if (decision.action.type === "done") {
+          console.log(`\n[complete]`)
+          break
+        }
+
+        await new Promise((r) => setTimeout(r, 500))
+      }
+    } finally {
+      const videoPath = await this.browser.close()
+      if (videoPath) {
+        console.log(`[video] ${videoPath}`)
+      }
+    }
+
+    return this.history
+  }
+
+  private async createPlan(goal: string): Promise<string> {
+    return this.mo.chat([
+      { role: "system", content: planningPrompt },
+      { role: "user", content: `Goal: ${goal}` },
+    ])
+  }
+
+  private async think(state: PageState): Promise<{ thought: string; action: Action }> {
+    const stateMsg = `Current page:
+URL: ${state.url}
+Title: ${state.title}
+
+Interactive elements:
+${state.dom}
+
+What's your next action?`
+
+    this.messages.push({ role: "user", content: stateMsg })
+
+    const response = await this.mo.chat(this.messages)
+
+    try {
+      let jsonStr = response
+
+      // extract json from markdown code block if present
+      const match = response.match(/```(?:json)?\s*([\s\S]*?)```/)
+      if (match) {
+        jsonStr = match[1]
+      }
+
+      const parsed = JSON.parse(jsonStr.trim())
+      this.messages.push({ role: "assistant", content: response })
+
+      return {
+        thought: parsed.thought || "thinking...",
+        action: parsed.action,
+      }
+    } catch {
+      console.error("failed to parse AI response:", response)
+      return {
+        thought: "couldn't parse response, waiting...",
+        action: { type: "wait", reason: "parse error" },
+      }
+    }
+  }
+}

package/src/browser.ts

@@ -0,0 +1,197 @@
+import { chromium, 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 chromium.launch({
+      headless: this.config.headless,
+    })
+
+    const contextOpts: any = {
+      viewport: { width: 1280, height: 720 },
+    }
+
+    if (this.config.recordVideo) {
+      contextOpts.recordVideo = {
+        dir: "./traw-recordings",
+        size: { width: 1280, height: 720 },
+      }
+    }
+
+    this.context = await this.browser.newContext(contextOpts)
+    this.page = await this.context.newPage()
+  }
+
+  async close(): Promise<string | null> {
+    let videoPath: string | null = null
+
+    try {
+      if (this.page && this.config.recordVideo) {
+        await this.page.waitForTimeout(1000)
+
+        const video = this.page.video()
+        if (video) {
+          await this.page.close()
+          this.page = null
+
+          await mkdir("./traw-recordings", { recursive: true })
+
+          const filename = `traw-${Date.now()}.webm`
+          const savePath = `./traw-recordings/${filename}`
+
+          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")
+
+    const url = this.page.url()
+    const title = await this.page.title()
+    const dom = await this.extractDom()
+
+    return { url, title, dom }
+  }
+
+  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: "networkidle", timeout: 15000 })
+          return `navigated to ${action.text}`
+
+        case "click":
+          await this.page.click(action.selector!, { timeout: 10000 })
+          await this.page.waitForLoadState("networkidle", { timeout: 10000 }).catch(() => {})
+          return `clicked ${action.selector}`
+
+        case "type":
+          await this.page.fill(action.selector!, action.text!)
+          return `typed "${action.text}" into ${action.selector}`
+
+        case "scroll":
+          const delta = action.direction === "down" ? 500 : -500
+          await this.page.mouse.wheel(0, delta)
+          await this.page.waitForTimeout(300)
+          return `scrolled ${action.direction}`
+
+        case "wait":
+          await this.page.waitForTimeout(2000)
+          return "waited 2s"
+
+        case "screenshot":
+          const buf = await this.page.screenshot()
+          return `screenshot taken (${buf.length} bytes)`
+
+        case "done":
+          return "agent finished"
+
+        default:
+          return `unknown action: ${action.type}`
+      }
+    } catch (err: any) {
+      return `error: ${err.message}`
+    }
+  }
+
+  async screenshot(): Promise<Buffer> {
+    if (!this.page) throw new Error("browser not launched")
+    return this.page.screenshot()
+  }
+
+  // extract only interactive elements with valid css selectors
+  private async extractDom(): Promise<string> {
+    if (!this.page) return ""
+
+    return this.page.evaluate(() => {
+      const selectors = [
+        "a",
+        "button",
+        "input",
+        "textarea",
+        "select",
+        "[role='button']",
+        "[type='submit']",
+      ]
+      const elements: string[] = []
+
+      selectors.forEach((sel) => {
+        document.querySelectorAll(sel).forEach((el) => {
+          const tag = el.tagName.toLowerCase()
+          const text = (el as HTMLElement).innerText?.slice(0, 40)?.trim() || ""
+          const href = (el as HTMLAnchorElement).href || ""
+          const placeholder = (el as HTMLInputElement).placeholder || ""
+          const type = (el as HTMLInputElement).type || ""
+          const name = (el as HTMLInputElement).name || ""
+          const value = (el as HTMLInputElement).value || ""
+          const title = el.getAttribute("title") || ""
+          const ariaLabel = el.getAttribute("aria-label") || ""
+
+          // build css selector - try multiple strategies
+          let selector = ""
+
+          if (el.id) {
+            selector = `#${el.id}`
+          } else if (name) {
+            selector = `${tag}[name="${name}"]`
+          } else if (title) {
+            selector = `${tag}[title="${title}"]`
+          } else if (ariaLabel) {
+            selector = `${tag}[aria-label="${ariaLabel}"]`
+          } else if (type && tag === "input") {
+            selector = `input[type="${type}"]`
+          } else if (el.className && typeof el.className === "string") {
+            const cls = el.className.split(" ").filter((c) => c && !c.includes(":"))[0]
+            if (cls) selector = `${tag}.${cls}`
+          }
+
+          // fallback: nth-of-type
+          if (!selector && (tag === "button" || tag === "a")) {
+            const siblings = Array.from(document.querySelectorAll(tag))
+            const index = siblings.findIndex((s) => s === el) + 1
+            if (index > 0) selector = `${tag}:nth-of-type(${index})`
+          }
+
+          if (!selector) return
+
+          let desc = `[${selector}]`
+          if (text) desc += ` "${text}"`
+          if (value && !text) desc += ` value="${value}"`
+          if (href && !href.startsWith("javascript:")) desc += ` -> ${href.slice(0, 50)}`
+          if (placeholder) desc += ` placeholder="${placeholder}"`
+          if (title && !text) desc += ` title="${title}"`
+          if (ariaLabel && !text && !title) desc += ` aria="${ariaLabel}"`
+          if (type && type !== "submit" && type !== "text") desc += ` type=${type}`
+
+          elements.push(desc)
+        })
+      })
+
+      // dedupe and limit
+      return [...new Set(elements)].slice(0, 60).join("\n")
+    })
+  }
+}

package/src/index.ts

@@ -0,0 +1,102 @@
+#!/usr/bin/env bun
+import { Agent } from "./agent"
+import type { AgentConfig } from "./types"
+
+const defaultConfig: AgentConfig = {
+  moUrl: "http://localhost:8080",
+  model: "glm-4.7",
+  headless: false,
+  recordVideo: true,
+  maxSteps: 20,
+}
+
+async function main() {
+  const args = process.argv.slice(2)
+
+  if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
+    printHelp()
+    return
+  }
+
+  const cmd = args[0]
+  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-video") {
+      config.recordVideo = false
+      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("--")) {
+      goalParts.push(arg)
+    }
+  }
+
+  const goal = goalParts.join(" ")
+  if (!goal) {
+    console.error("[error] provide a goal: bun run traw run \"your goal\"")
+    process.exit(1)
+  }
+
+  console.log("[traw] starting agent...")
+  console.log(`  mo: ${config.moUrl}`)
+  console.log(`  headless: ${config.headless}`)
+  console.log(`  video: ${config.recordVideo}`)
+  console.log(`  max steps: ${config.maxSteps}`)
+
+  const agent = new Agent(config)
+
+  try {
+    const history = await agent.run(goal)
+
+    console.log("\n[done] steps:", history.length)
+    if (history.length > 0) {
+      const last = history[history.length - 1]
+      console.log("  final:", last.action.type, "-", last.action.reason)
+    }
+  } catch (err: any) {
+    console.error("\n[error]", err.message)
+    process.exit(1)
+  }
+}
+
+function printHelp() {
+  console.log(`
+🌐 traw - AI browser agent
+
+Usage:
+  traw run "your goal here"
+  traw run                    # interactive mode (coming soon)
+
+Options:
+  --headless    run without visible browser
+  --no-video    disable video recording
+  --steps=N     max steps (default: 20)
+  --mo=URL      mo server url (default: http://localhost:8080)
+
+Examples:
+  traw run "find the weather in Moscow"
+  traw run "search for bun.js documentation"
+`)
+}
+
+main()

package/src/mo-client.ts

@@ -0,0 +1,35 @@
+import type { ChatMessage } from "./types"
+
+export class MoClient {
+  private url: string
+  private model: string
+
+  constructor(url: string, model: string) {
+    this.url = url
+    this.model = model
+  }
+
+  async chat(messages: ChatMessage[]): Promise<string> {
+    const resp = await fetch(`${this.url}/v1/chat/completions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model: this.model,
+        messages,
+        stream: false,
+        thinking: false,
+      }),
+    })
+
+    if (!resp.ok) {
+      const body = await resp.text()
+      throw new Error(`mo error: ${resp.status} ${body}`)
+    }
+
+    const data = (await resp.json()) as {
+      choices: { message: { content: string } }[]
+    }
+
+    return data.choices[0]?.message?.content ?? ""
+  }
+}

package/src/types.ts

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

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": false,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}