traw 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "traw",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "module": "src/index.ts",
   "type": "module",
   "bin": {

package/src/agent/prompts.ts

@@ -1,34 +1,31 @@
-export const systemPrompt = `You a Traw -control a browser via DOM elements. Each element has an index [N].
-
-LANGUAGE RULES (STRICT):
-- "thought" field: ALWAYS in English, no exceptions
-- "done" action "reason" field: ALWAYS in the SAME language as user's original query
-  - If user asked in Russian → answer in Russian
-  - If user asked in English → answer in English
-  - Match the user's language exactly
-
-MARKDOWN FORMATTING (for "done" reason field):
-The terminal supports rich markdown rendering. USE these features for better readability:
-- **Headers**: Use ### for sections (e.g., ### Installation)
-- **Bold**: Use **text** for emphasis
-- **Italic**: Use *text* for subtle emphasis  
-- **Lists**: Use * or - for bullet points, 1. 2. 3. for numbered lists
-- **Code**: Use \`inline code\` for commands, \`\`\`lang for code blocks
-- **Links**: Use [text](url) format - they will be clickable
-- **Blockquotes**: Use > for quotes or important notes
-Structure your answers with headers and lists for easy scanning.
-
-ACTIONS (use index to target elements):
-- click: {"type":"click","index":N} - click element [N]
-- type: {"type":"type","index":N,"text":"query"} - type into input [N]
-- scroll: {"type":"scroll","direction":"down"} - scroll page
-- goto: {"type":"goto","text":"url"} - navigate to URL
-- wait: {"type":"wait"} - wait 2 seconds
-- back: {"type":"back"} - go back to previous page (FREE action, gives +1 step back, use when current page is wrong/useless)
-- done: {"type":"done","reason":"result"} - task complete, include answer IN USER'S LANGUAGE with markdown
-
-OUTPUT (JSON only, no markdown wrapper):
-{"thought":"English reasoning here","action":{"type":"click","index":0}}`
+export const systemPrompt = `You are Traw - browser agent. You receive page as XML.
+
+INPUT FORMAT:
+<page>
+  <h1>Page Title</h1>
+  <a id="0" href="...">Link</a>
+  <input id="1" type="text" value="current"/>
+  <button id="2" disabled="true">Submit</button>
+</page>
+
+Use "id" attribute to target interactive elements.
+Elements with disabled="true" cannot be clicked.
+
+LANGUAGE:
+- thought: English
+- done reason: Same language as user query
+
+ACTIONS:
+- click: {"type":"click","index":N}
+- type: {"type":"type","index":N,"text":"..."}
+- scroll: {"type":"scroll","direction":"down"|"up"}
+- goto: {"type":"goto","text":"url"}
+- wait: {"type":"wait"}
+- back: {"type":"back"}
+- done: {"type":"done","reason":"answer"}
+
+OUTPUT JSON:
+{"thought":"...","action":{"type":"click","index":0}}`
 
 export const planningPrompt = `Create short numbered plan to accomplish goal via browser. Start from DuckDuckGo search.
 

package/src/browser/controller.ts

@@ -65,89 +65,78 @@ export class BrowserController {
     const url = this.page.url()
     const title = await this.page.title()
 
-    const pageText = await this.page.evaluate(() => {
-      const texts: string[] = []
-      const textSelector = "h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, figcaption, summary"
-      
-      document.querySelectorAll(textSelector).forEach((el) => {
-        const node = el as HTMLElement
-        if (node.offsetParent === null) return
-        
-        const text = node.innerText?.trim()
-        if (!text || text.length < 3) return
-        
-        const tag = el.tagName.toLowerCase()
-        const prefix = tag.startsWith("h") ? `[${tag}]` : ""
-        texts.push(`${prefix} ${text}`)
-      })
-      
-      const unique = [...new Set(texts)]
-      return unique.join("\n")
-    }).catch(() => "")
-
-    const elements = await this.page.evaluate(() => {
-      const items: string[] = []
-      const selector = 'a[href], button, input, textarea, select, [role="button"], [onclick]'
-      
-      document.querySelectorAll(selector).forEach((el) => {
-        const node = el as HTMLElement
-        if (node.offsetParent === null) return
-        
+    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
         const tag = el.tagName.toLowerCase()
-        const type = (el as HTMLInputElement).type || ""
-        const text = el.textContent?.trim() || ""
-        const val = (el as HTMLInputElement).value || ""
-        const name = (el as HTMLInputElement).name || ""
-        const placeholder = (el as HTMLInputElement).placeholder || ""
-        
-        const ariaLabel = el.getAttribute("aria-label") || ""
-        const titleAttr = el.getAttribute("title") || ""
-        const alt = (el as HTMLImageElement).alt || ""
-        
-        let linkedLabel = ""
-        const id = el.id
-        if (id) {
-          const labelEl = document.querySelector(`label[for="${id}"]`)
-          if (labelEl) linkedLabel = labelEl.textContent?.trim() || ""
-        }
-        
-        const displayText = ariaLabel || titleAttr || alt || linkedLabel || text || placeholder || name
-        
-        let label = ""
-        if (tag === "a") {
-          label = `<a>${displayText}</a>`
-        } else if (tag === "button") {
-          label = `<button>${displayText || val}</button>`
-        } else if (tag === "input" && (type === "submit" || type === "button")) {
-          label = `<button>${val || displayText}</button>`
-        } else if (tag === "input") {
-          const labelPart = linkedLabel ? ` label="${linkedLabel}"` : ""
-          label = `<input${type ? ` type="${type}"` : ""}${labelPart}${val ? ` value="${val}"` : ""}>`
-        } else if (tag === "textarea") {
-          const labelPart = linkedLabel ? ` label="${linkedLabel}"` : ""
-          label = `<textarea${labelPart}>${val}</textarea>`
-        } else if (tag === "select") {
-          const labelPart = linkedLabel ? ` label="${linkedLabel}"` : ""
-          const selected = (el as HTMLSelectElement).selectedOptions[0]?.text || ""
-          label = `<select${labelPart}${selected ? ` selected="${selected}"` : ""}>`
+        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)}"`)
+          
+          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() || ""
+          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 {
-          label = `<${tag}>${displayText}</${tag}>`
+          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()
+
+            if (directText.length > 2) {
+              out.push(`${indent}<${tag}>${esc(directText)}</${tag}>`)
+            }
+          }
         }
-        
-        node.setAttribute("data-idx", String(items.length))
-        items.push(`[${items.length}] ${label}`)
-      })
-      
-      return items.join("\n")
-    }).catch(() => "")
-    
-    const combined = [pageText, elements].filter(Boolean).join("\n\n")
-
-    return {
-      url,
-      title,
-      text: combined,
-    }
+
+        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> {