Browser Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_104":103,"_38":51,"_112":94,"_33":59,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":31,"_126":127,"_128":129,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":59,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":31},"version",10,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f36a74e9-5673-47fb-a485-ab96d2b05396","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","api.ts","latestPath","fileId","45ba7a62-2182-11f1-a65a-42dde27851f2","name","fileType","http","content","/**\n * api.ts — REST API backend\n * Kernel API base: https://api.onkernel.com/v1\n *\n * Verified endpoints from docs:\n * POST /browsers → create browser session\n * DELETE /browsers/:id → delete browser session\n * POST /browsers/:id/playwright → execute Playwright code\n *\n * Response fields (create browser):\n * session_id, cdp_ws_url, browser_live_view_url, headless, stealth, ...\n */\n\nimport { parseNaturalLanguage } from \"./llm.ts\";\nimport { compileFlow, type FlowBlock } from \"./executor.ts\";\nimport { listFlows, getFlow, saveFlow, deleteFlow } from \"./db.ts\";\n\nconst KERNEL_API_KEY = Deno.env.get(\"KERNEL_API_KEY\") ?? \"\";\nconst KERNEL_BASE = \"https://api.onkernel.com/v1\";\n\n// ── Helpers ───────────────────────────────────────────────────────────────\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n}\n\nfunction cors(): Response {\n return new Response(null, {\n status: 204,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, DELETE, PATCH, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n },\n });\n}\n\nasync function kfetch(method: string, path: string, body?: unknown): Promise {\n return fetch(`${KERNEL_BASE}${path}`, {\n method,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${KERNEL_API_KEY}`,\n },\n body: body !== undefined ? JSON.stringify(body) : undefined,\n });\n}\n\n// ── Router ────────────────────────────────────────────────────────────────\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (req.method === \"OPTIONS\") return cors();\n\n // ── POST /api/session ─────────────────────────────────────────────────\n // Creates a Kernel browser session, returns session_id + live_view_url\n if (req.method === \"POST\" && path === \"/api/session\") {\n try {\n const kResp = await kfetch(\"POST\", \"/browsers\", {\n // Default: non-headless so live view works, timeout 3600s = 1 hour\n headless: false,\n timeout_seconds: 3600,\n });\n\n const raw = await kResp.text();\n\n if (!kResp.ok) {\n return json({\n error: `Kernel ${kResp.status}: ${raw}`,\n }, 502);\n }\n\n const data = JSON.parse(raw);\n\n // browser_live_view_url is the correct field per Kernel docs\n return json({\n session_id: data.session_id,\n live_view_url: data.browser_live_view_url ?? null,\n cdp_ws_url: data.cdp_ws_url ?? null,\n });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── DELETE /api/session/:id ───────────────────────────────────────────\n const sessionDelMatch = path.match(/^\\/api\\/session\\/([^/]+)$/);\n if (req.method === \"DELETE\" && sessionDelMatch) {\n try {\n await kfetch(\"DELETE\", `/browsers/${sessionDelMatch[1]}`);\n return json({ ok: true });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/execute ─────────────────────────────────────────────────\n // Compiles blocks → Playwright code → sends to Kernel browser\n if (req.method === \"POST\" && path === \"/api/execute\") {\n try {\n const body = await req.json() as {\n session_id: string;\n blocks: FlowBlock[];\n timeout_sec?: number;\n };\n\n if (!body.session_id || !Array.isArray(body.blocks)) {\n return json({ error: \"Missing session_id or blocks\" }, 400);\n }\n\n const code = compileFlow(body.blocks);\n\n // Kernel Playwright execute endpoint (verified from docs)\n const kResp = await kfetch(\n \"POST\",\n `/browsers/${body.session_id}/playwright`,\n {\n code,\n // timeout_ms is used by Kernel playwright endpoint\n timeout_ms: (body.timeout_sec ?? 120) * 1000,\n }\n );\n\n const raw = await kResp.text();\n\n if (!kResp.ok) {\n return json({ error: `Kernel playwright ${kResp.status}: ${raw}` }, 502);\n }\n\n // Try parse JSON, fallback to text\n try {\n return json(JSON.parse(raw));\n } catch {\n return json({ success: true, result: raw });\n }\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/llm-parse ───────────────────────────────────────────────\n if (req.method === \"POST\" && path === \"/api/llm-parse\") {\n try {\n const { blockType, naturalLanguage } = await req.json();\n if (!blockType || !naturalLanguage) {\n return json({ error: \"Missing blockType or naturalLanguage\" }, 400);\n }\n const result = await parseNaturalLanguage({ blockType, naturalLanguage });\n return json(result);\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/flows ────────────────────────────────────────────────────\n if (req.method === \"GET\" && path === \"/api/flows\") {\n try {\n return json(await listFlows());\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/flows/:id ────────────────────────────────────────────────\n const flowGetMatch = path.match(/^\\/api\\/flows\\/([^/]+)$/);\n if (req.method === \"GET\" && flowGetMatch) {\n try {\n const flow = await getFlow(flowGetMatch[1]);\n return flow ? json(flow) : json({ error: \"Not found\" }, 404);\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/flows ───────────────────────────────────────────────────\n if (req.method === \"POST\" && path === \"/api/flows\") {\n try {\n const { id, name, description, flow_json } = await req.json();\n if (!id || !name || !flow_json) {\n return json({ error: \"Missing id, name, or flow_json\" }, 400);\n }\n await saveFlow(id, name, description ?? \"\", flow_json);\n return json({ ok: true, id });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── DELETE /api/flows/:id ─────────────────────────────────────────────\n const flowDelMatch = path.match(/^\\/api\\/flows\\/([^/]+)$/);\n if (req.method === \"DELETE\" && flowDelMatch) {\n try {\n await deleteFlow(flowDelMatch[1]);\n return json({ ok: true });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/debug/kernel ─────────────────────────────────────────────\n // Quick endpoint to test Kernel API key is valid\n if (req.method === \"GET\" && path === \"/api/debug/kernel\") {\n try {\n const r = await kfetch(\"GET\", \"/browsers\");\n const text = await r.text();\n return json({ status: r.status, body: text.slice(0, 500) });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n return json({ error: \"Not found\" }, 404);\n}\n","/**\n * api.ts — REST API backend\n * Kernel API base: https://api.onkernel.com/v1\n *\n * Verified endpoints from docs:\n * POST /browsers → create browser session\n * DELETE /browsers/:id → delete browser session\n * POST /browsers/:id/playwright → execute Playwright code\n *\n * Response fields (create browser):\n * session_id, cdp_ws_url, browser_live_view_url, headless, stealth, ...\n */\n\nimport { parseNaturalLanguage } from \"./llm.ts\";\nimport { compileFlow, type FlowBlock } from \"./executor.ts\";\nimport { listFlows, getFlow, saveFlow, deleteFlow } from \"./db.ts\";\n\nconst KERNEL_API_KEY = Deno.env.get(\"KERNEL_API_KEY\") ?? \"\";\n// No /v1 prefix — verified from Kernel API docs\nconst KERNEL_BASE = \"https://api.onkernel.com\";\n\n// ── Helpers ───────────────────────────────────────────────────────────────\n\nfunction json(data: unknown, status = 200): Response {\n return new Response(JSON.stringify(data), {\n status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n}\n\nfunction cors(): Response {\n return new Response(null, {\n status: 204,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, DELETE, PATCH, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization\",\n },\n });\n}\n\nasync function kfetch(method: string, path: string, body?: unknown): Promise {\n return fetch(`${KERNEL_BASE}${path}`, {\n method,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${KERNEL_API_KEY}`,\n },\n body: body !== undefined ? JSON.stringify(body) : undefined,\n });\n}\n\n// ── Router ────────────────────────────────────────────────────────────────\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n if (req.method === \"OPTIONS\") return cors();\n\n // ── POST /api/session ─────────────────────────────────────────────────\n // Creates a Kernel browser session, returns session_id + live_view_url\n if (req.method === \"POST\" && path === \"/api/session\") {\n try {\n const kResp = await kfetch(\"POST\", \"/browsers\", {\n // Default: non-headless so live view works, timeout 3600s = 1 hour\n headless: false,\n timeout_seconds: 3600,\n });\n\n const raw = await kResp.text();\n\n if (!kResp.ok) {\n return json({\n error: `Kernel ${kResp.status}: ${raw}`,\n }, 502);\n }\n\n const data = JSON.parse(raw);\n\n // browser_live_view_url is the correct field per Kernel docs\n return json({\n session_id: data.session_id,\n live_view_url: data.browser_live_view_url ?? null,\n cdp_ws_url: data.cdp_ws_url ?? null,\n });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── DELETE /api/session/:id ───────────────────────────────────────────\n const sessionDelMatch = path.match(/^\\/api\\/session\\/([^/]+)$/);\n if (req.method === \"DELETE\" && sessionDelMatch) {\n try {\n await kfetch(\"DELETE\", `/browsers/${sessionDelMatch[1]}`);\n return json({ ok: true });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/execute ─────────────────────────────────────────────────\n // Compiles blocks → Playwright code → sends to Kernel browser\n if (req.method === \"POST\" && path === \"/api/execute\") {\n try {\n const body = await req.json() as {\n session_id: string;\n blocks: FlowBlock[];\n timeout_sec?: number;\n };\n\n if (!body.session_id || !Array.isArray(body.blocks)) {\n return json({ error: \"Missing session_id or blocks\" }, 400);\n }\n\n const code = compileFlow(body.blocks);\n\n // Kernel Playwright execute endpoint (verified from docs)\n const kResp = await kfetch(\n \"POST\",\n `/browsers/${body.session_id}/playwright`,\n {\n code,\n // timeout_ms is used by Kernel playwright endpoint\n timeout_ms: (body.timeout_sec ?? 120) * 1000,\n }\n );\n\n const raw = await kResp.text();\n\n if (!kResp.ok) {\n return json({ error: `Kernel playwright ${kResp.status}: ${raw}` }, 502);\n }\n\n // Try parse JSON, fallback to text\n try {\n return json(JSON.parse(raw));\n } catch {\n return json({ success: true, result: raw });\n }\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/llm-parse ───────────────────────────────────────────────\n if (req.method === \"POST\" && path === \"/api/llm-parse\") {\n try {\n const { blockType, naturalLanguage } = await req.json();\n if (!blockType || !naturalLanguage) {\n return json({ error: \"Missing blockType or naturalLanguage\" }, 400);\n }\n const result = await parseNaturalLanguage({ blockType, naturalLanguage });\n return json(result);\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/flows ────────────────────────────────────────────────────\n if (req.method === \"GET\" && path === \"/api/flows\") {\n try {\n return json(await listFlows());\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/flows/:id ────────────────────────────────────────────────\n const flowGetMatch = path.match(/^\\/api\\/flows\\/([^/]+)$/);\n if (req.method === \"GET\" && flowGetMatch) {\n try {\n const flow = await getFlow(flowGetMatch[1]);\n return flow ? json(flow) : json({ error: \"Not found\" }, 404);\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── POST /api/flows ───────────────────────────────────────────────────\n if (req.method === \"POST\" && path === \"/api/flows\") {\n try {\n const { id, name, description, flow_json } = await req.json();\n if (!id || !name || !flow_json) {\n return json({ error: \"Missing id, name, or flow_json\" }, 400);\n }\n await saveFlow(id, name, description ?? \"\", flow_json);\n return json({ ok: true, id });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── DELETE /api/flows/:id ─────────────────────────────────────────────\n const flowDelMatch = path.match(/^\\/api\\/flows\\/([^/]+)$/);\n if (req.method === \"DELETE\" && flowDelMatch) {\n try {\n await deleteFlow(flowDelMatch[1]);\n return json({ ok: true });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n // ── GET /api/debug/kernel ─────────────────────────────────────────────\n // Quick endpoint to test Kernel API key is valid\n if (req.method === \"GET\" && path === \"/api/debug/kernel\") {\n try {\n const r = await kfetch(\"GET\", \"/browsers\");\n const text = await r.text();\n return json({ status: r.status, body: text.slice(0, 500) });\n } catch (err) {\n return json({ error: String(err) }, 500);\n }\n }\n\n return json({ error: \"Not found\" }, 404);\n}\n","createdAt",["D",1773712276560],"branchVersion","branchId","41c01c18-2174-11f1-bf89-42dde27851f2","id","41bf7ff6-2174-11f1-bf89-42dde27851f2","browser_agent",["D",1773691862818],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","019ced01-90af-7019-a349-1b32c2e46191","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ced01-90b0-737e-a20e-8f88f25dd6dd","tursoName","41bf7ff6217411f1bf8942dde27851f2","tursoHostname","41bf7ff6217411f1bf8942dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789530642963],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_19":61,"_108":109,"_110":31},"branch",{"_13":93,"_38":94,"_49":48,"_95":50,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":51,"_102":103},"isOwned",48,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","adminh","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNBd1RwdG53TkRJV2dZYlNJMkVEM1J6U0NuNiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_49":50,"_38":51,"_44":207,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":59,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":208,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":209,"_88":210,"_90":211,"_92":31},"tree",[186,187,188,189,190],"files",[186,187,188,189,190],"counts",{"_175":67,"_176":177,"_178":67,"_179":180,"_181":182},"contents",[134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_49":172,"_38":34,"_36":37,"_142":-5,"_47":48,"_46":14,"_144":31,"_44":173,"_13":168,"_39":40,"_41":43,"_30":31,"_148":-5,"_33":174},{"_49":165,"_38":166,"_36":167,"_142":-5,"_47":48,"_46":168,"_144":129,"_44":169,"_13":67,"_39":156,"_41":170,"_30":31,"_148":-5,"_33":171},{"_49":159,"_38":160,"_36":161,"_142":-5,"_47":48,"_46":146,"_144":31,"_44":162,"_13":67,"_39":156,"_41":163,"_30":31,"_148":-5,"_33":164},{"_49":151,"_38":152,"_36":153,"_142":-5,"_47":48,"_46":154,"_144":129,"_44":155,"_13":67,"_39":156,"_41":157,"_30":31,"_148":-5,"_33":158},{"_49":139,"_38":140,"_36":141,"_142":-5,"_47":48,"_46":143,"_144":31,"_44":145,"_13":146,"_39":40,"_41":147,"_30":31,"_148":149,"_33":150},"6fb3ce48-21a2-11f1-8b45-42dde27851f2","main.ts","41c2431c-2174-11f1-bf89-42dde27851f2","parentId",8,"latest",["D",1773711696754],3,"/**\n * main.ts — Frontend: Browser Automation Flow Builder\n * Uses reactflow@11 (has proper UMD build) + React 18 from CDN\n */\n\nconst API_BASE = \"https://adminh--45ba7a62218211f1a65a42dde27851f2.web.val.run\";\n\nexport default function handler(_req: Request): Response {\n const html = buildHTML(API_BASE);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n\nfunction buildHTML(api: string): string {\nreturn `\n\n\n\n\nBrowser Agent\n\n\n\n\n\n\n\n

\n\n\n`;\n}\n","label","duytan",[140],"370b0b26-2182-11f1-84ff-42dde27851f2","llm.ts","370b0bee-2182-11f1-84ff-42dde27851f2",4,["D",1773697857804],"script","/**\n * llm.ts — Parse natural language input into block params using Qwen3\n * Only called when user types natural language into a block's NL input field.\n */\n\nimport type { BlockType } from \"./executor.ts\";\n\nconst LLM_BASE_URL = \"https://dashscope-intl.aliyuncs.com/compatible-mode/v1\";\nconst LLM_MODEL = \"qwen3-vl-235b-a22b-thinking\";\nconst LLM_API_KEY = \"sk-6c8023e40e4c4621a136680cd8cc1ce0\";\n\ninterface LLMParseRequest {\n blockType: BlockType;\n naturalLanguage: string;\n}\n\ninterface LLMParseResponse {\n params: Record;\n error?: string;\n}\n\n// Per-block schema hints sent to LLM so it knows what fields to fill\nconst BLOCK_SCHEMAS: Partial> = {\n click: `{ \"selector\": \"CSS selector string\", \"button\": \"left|right|middle\", \"clickCount\": number, \"delay\": number }`,\n type_text: `{ \"selector\": \"CSS selector string\", \"text\": \"text to type\" }`,\n press_key: `{ \"key\": \"key name e.g. Enter, Tab, ArrowDown, Escape, Ctrl+A\" }`,\n scroll: `{ \"selector\": \"CSS selector or null for page\", \"deltaX\": number, \"deltaY\": number }`,\n hover: `{ \"selector\": \"CSS selector string\" }`,\n select_option: `{ \"selector\": \"CSS selector for

Diff · v10