BrowserFlow Engine

⚡ BrowserFlow

\n \n \n \n \n

\n ● Connecting...\n \n

\n\n\n

Total Flows

Total Runs

Success

Failed

\n\n

My Flows

🌊

No flows yet. Create your first flow!

\n\n

Recent Runs

\n \n \n \n

Flow	Status	Started	Duration	Actions
No runs yet

\n\n\n

\n \n \n\n \n

\n \n

\n ➕ Click to add block or drag from sidebar\n

\n\n \n

Flow Variables

\n \n

Selected Block

Click a block to see details

Quick Actions

\n \n \n \n

\n\n\n

\n \n

Select a run to view logs

\n\n\n

⚙️ Settings

🔑 API Keys

Kernel.sh API Key

\n \n

Get from app.kernel.sh → API Keys

BrowserFlow API Key (optional)

\n \n

Protect your API endpoint

\n \n

🌐 API Endpoint

Backend URL

\n \n

Your Val Town endpoint

\n \n

📦 Block Stats

ℹ️ About

BrowserFlow Engine v1.0.0

Browser automation platform

• Kernel.sh (Cloud Browser)

• Playwright (Browser Control)

• Val Town (Serverless)

\n\n\n\n\n\n\n\n\n\n

🚀 Starting Kernel.sh browser...

\n \n

\n\n\n

\n\n\n\n\n","children",[],[110],"adc205ec-2053-11f1-a220-42dde27851f2","types.ts","8f080e96-204c-11f1-9400-42dde27851f2",30,["D",1773567919436],"// ============================================================\n// TYPES - Định nghĩa toàn bộ kiểu dữ liệu cho hệ thống\n// ============================================================\n\nexport type BlockType =\n // 🖱️ Interact\n | \"click\"\n | \"type_text\"\n | \"press_key\"\n | \"scroll\"\n | \"hover\"\n | \"select_option\"\n | \"set_date_input\"\n | \"upload_file\"\n | \"handle_dialog\"\n // 📊 Extract\n | \"get_element_text\"\n | \"get_link_url\"\n | \"get_page_url\"\n | \"get_element_attribute\"\n | \"get_element_html\"\n | \"get_clipboard\"\n | \"save_file\"\n | \"take_screenshot\"\n | \"generate_pdf\"\n // 🧭 Navigate\n | \"visit\"\n | \"go_back\"\n | \"go_forward\"\n | \"reload_page\"\n // 📑 Spreadsheet\n | \"loop_spreadsheet_rows\"\n | \"add_spreadsheet_row\"\n | \"update_spreadsheet_row\"\n | \"find_spreadsheet_row\"\n // 🔁 Control Flow\n | \"loop_elements\"\n | \"loop_pages\"\n | \"loop\"\n | \"loop_list_items\"\n | \"if\"\n | \"else\"\n | \"while\"\n | \"end\"\n | \"break\"\n // 🪟 Tabs\n | \"create_tab\"\n | \"get_active_tab_id\"\n | \"select_tab\"\n | \"close_tab\"\n // 🔧 Utilities\n | \"run_script\"\n | \"get_date\"\n | \"wait\"\n | \"wait_for_element\"\n | \"show_alert\"\n | \"make_http_request\"\n | \"assert\"\n | \"run_flow\"\n | \"comment\"\n | \"solve_captcha\";\n\nexport interface Block {\n id: string;\n type: BlockType;\n params: Record;\n comment?: string;\n}\n\nexport interface Flow {\n id: string;\n name: string;\n description?: string;\n blocks: Block[];\n variables?: Record;\n createdAt?: string;\n updatedAt?: string;\n}\n\nexport interface FlowContext {\n variables: Record;\n tabs: Map; // tabId -> page object\n activeTabId: string;\n loopStack: LoopFrame[];\n browser: any;\n kernelSessionId: string;\n logs: LogEntry[];\n shouldBreak: boolean;\n}\n\nexport interface LoopFrame {\n type: \"loop\" | \"loop_elements\" | \"loop_pages\" | \"loop_list_items\" | \"loop_spreadsheet_rows\" | \"while\";\n startIndex: number; // index của block loop trong flow\n currentIteration: number;\n maxIterations?: number;\n items?: any[];\n currentItem?: any;\n condition?: string; // dùng cho while\n startedAt?: number; // Date.now() khi bắt đầu while, dùng để timeout\n isIf?: boolean; // true nếu frame này là if/else\n}\n\nexport interface LogEntry {\n timestamp: string;\n level: \"info\" | \"warn\" | \"error\" | \"debug\";\n blockId?: string;\n blockType?: string;\n message: string;\n data?: any;\n}\n\nexport interface BlockResult {\n success: boolean;\n output?: any;\n error?: string;\n skipToEnd?: boolean; // dùng cho break\n jumpToIndex?: number; // dùng cho loop\n}\n\nexport interface RunFlowOptions {\n flowId?: string;\n flow?: Flow;\n variables?: Record;\n kernelApiKey: string;\n}\n\nexport interface RunFlowResult {\n success: boolean;\n variables: Record;\n logs: LogEntry[];\n error?: string;\n screenshots?: string[];\n}\n",[],[119],"b16bbcbc-2056-11f1-ac46-42dde27851f2","storage.ts","fe6dfab6-204c-11f1-8e02-42dde27851f2",34,["D",1773569214099],"// ============================================================\n// STORAGE - Lưu/lấy Flows từ SQLite\n// ============================================================\n\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Flow } from \"./types.ts\";\n\n// Khởi tạo bảng\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS flows (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n description TEXT,\n data TEXT NOT NULL,\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL\n )\n`);\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS flow_runs (\n id TEXT PRIMARY KEY,\n flow_id TEXT NOT NULL,\n status TEXT NOT NULL,\n started_at TEXT NOT NULL,\n finished_at TEXT,\n variables TEXT,\n logs TEXT,\n error TEXT\n )\n`);\n\n// ─── FLOWS ────────────────────────────────────────────────\nexport async function saveFlow(flow: Flow): Promise {\n const now = new Date().toISOString();\n const existing = await getFlow(flow.id);\n if (existing) {\n await sqlite.execute({\n sql: `UPDATE flows SET name=?, description=?, data=?, updated_at=? WHERE id=?`,\n args: [flow.name, flow.description || \"\", JSON.stringify(flow), now, flow.id]\n });\n } else {\n await sqlite.execute({\n sql: `INSERT INTO flows (id, name, description, data, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)`,\n args: [flow.id, flow.name, flow.description || \"\", JSON.stringify(flow), now, now]\n });\n }\n}\n\nexport async function getFlow(id: string): Promise {\n const result = await sqlite.execute({\n sql: `SELECT data FROM flows WHERE id=?`,\n args: [id]\n });\n if (!result.rows.length) return null;\n return JSON.parse(result.rows[0].data as string);\n}\n\nexport async function listFlows(): Promise[]> {\n const result = await sqlite.execute(\n `SELECT id, name, description, created_at, updated_at FROM flows ORDER BY updated_at DESC`\n );\n return result.rows.map(row => ({\n id: row.id as string,\n name: row.name as string,\n description: row.description as string,\n blocks: [],\n createdAt: row.created_at as string,\n updatedAt: row.updated_at as string,\n }));\n}\n\nexport async function deleteFlow(id: string): Promise {\n await sqlite.execute({ sql: `DELETE FROM flows WHERE id=?`, args: [id] });\n}\n\n// ─── FLOW RUNS ─────────────────────────────────────────────\nexport async function saveFlowRun(run: {\n id: string; flowId: string; status: string;\n startedAt: string; finishedAt?: string;\n variables?: any; logs?: any; error?: string;\n}): Promise {\n await sqlite.execute({\n sql: `INSERT OR REPLACE INTO flow_runs \n (id, flow_id, status, started_at, finished_at, variables, logs, error) \n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n run.id, run.flowId, run.status, run.startedAt,\n run.finishedAt || null,\n run.variables ? JSON.stringify(run.variables) : null,\n run.logs ? JSON.stringify(run.logs) : null,\n run.error || null\n ]\n });\n}\n\n// Helper: convert result rows → typed objects using column names\nfunction mapRows>(result: { columns: string[]; rows: any[] }): T[] {\n return result.rows.map(row => {\n // std/sqlite/main.ts trả rows là object (key-value) — dùng trực tiếp\n // Nhưng nếu là array thì map theo columns\n if (Array.isArray(row)) {\n const obj: Record = {};\n result.columns.forEach((col, i) => { obj[col] = row[i]; });\n return obj as T;\n }\n return row as T;\n });\n}\n\nexport async function getFlowRun(id: string): Promise {\n const result = await sqlite.execute({\n sql: `SELECT * FROM flow_runs WHERE id=?`,\n args: [id]\n });\n if (!result.rows.length) return null;\n const rows = mapRows(result);\n const row = rows[0] as any;\n return {\n id: row.id,\n flow_id: row.flow_id,\n status: row.status,\n started_at: row.started_at,\n finished_at: row.finished_at,\n error: row.error,\n variables: row.variables ? JSON.parse(row.variables as string) : {},\n logs: row.logs ? JSON.parse(row.logs as string) : [],\n };\n}\n\nexport async function listFlowRuns(flowId?: string): Promise {\n const result = flowId\n ? await sqlite.execute({\n sql: `SELECT id, flow_id, status, started_at, finished_at, error FROM flow_runs WHERE flow_id=? ORDER BY started_at DESC LIMIT 50`,\n args: [flowId]\n })\n : await sqlite.execute(\n `SELECT id, flow_id, status, started_at, finished_at, error FROM flow_runs ORDER BY started_at DESC LIMIT 50`\n );\n return mapRows(result);\n}\n",[],[127],"fbee8240-2058-11f1-bb20-42dde27851f2","main.ts","1a923ef0-204d-11f1-a860-42dde27851f2",39,["D",1773570198098],"http","// ============================================================\n// MAIN HTTP API + UI SERVER — v2 với async run + polling\n// ============================================================\n\nimport { runFlow } from \"./engine.ts\";\nimport {\n saveFlow, getFlow, listFlows, deleteFlow,\n saveFlowRun, getFlowRun, listFlowRuns\n} from \"./storage.ts\";\nimport type { Flow } from \"./types.ts\";\n\nconst CORS_HEADERS = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, PUT, DELETE, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Authorization, X-Kernel-API-Key\",\n};\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data, null, 2), {\n status,\n headers: { ...CORS_HEADERS, \"Content-Type\": \"application/json\" }\n });\n}\nfunction err(msg: string, status = 400) {\n return json({ error: msg }, status);\n}\nfunction genId(prefix: string) {\n return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;\n}\n\nexport default async function handler(req: Request): Promise {\n if (req.method === \"OPTIONS\") return new Response(null, { headers: CORS_HEADERS });\n\n const url = new URL(req.url);\n const path = url.pathname;\n const method = req.method;\n\n // ── Serve UI ───────────────────────────────────────────\n if ((path === \"/\" || path === \"\") && method === \"GET\") {\n return new Response(HTML, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n }\n\n // ── Health check ───────────────────────────────────────\n if (path === \"/health\") {\n return json({ status: \"ok\", name: \"BrowserFlow Engine\", version: \"2.0.0\" });\n }\n\n // ── Internal: thực thi flow background ────────────────\n if (path === \"/internal/run\" && method === \"POST\") {\n const token = req.headers.get(\"X-Internal-Token\");\n const expectedToken = Deno.env.get(\"INTERNAL_TOKEN\") || \"internal_browserflow_secret\";\n if (token !== expectedToken) return err(\"Unauthorized\", 401);\n\n const body = await req.json() as {\n runId: string; flowId?: string; flow?: Flow;\n variables?: Record; kernelApiKey: string;\n };\n\n (async () => {\n try {\n const flow = body.flow ?? (body.flowId ? await getFlow(body.flowId) : null);\n if (!flow) {\n await saveFlowRun({\n id: body.runId, flowId: body.flowId ?? \"inline\",\n status: \"failed\", startedAt: new Date().toISOString(),\n finishedAt: new Date().toISOString(), error: \"Flow not found\"\n });\n return;\n }\n\n const result = await runFlow({\n flow,\n variables: body.variables ?? {},\n kernelApiKey: body.kernelApiKey\n });\n\n await saveFlowRun({\n id: body.runId,\n flowId: flow.id,\n status: result.success ? \"success\" : \"failed\",\n startedAt: new Date().toISOString(),\n finishedAt: new Date().toISOString(),\n variables: result.variables,\n logs: result.logs,\n error: result.error\n });\n } catch (e: any) {\n await saveFlowRun({\n id: body.runId,\n flowId: body.flowId ?? \"inline\",\n status: \"failed\",\n startedAt: new Date().toISOString(),\n finishedAt: new Date().toISOString(),\n error: e.message\n }).catch(() => {});\n }\n })();\n\n return json({ accepted: true, runId: body.runId }, 202);\n }\n\n const kernelApiKey = req.headers.get(\"X-Kernel-API-Key\") || Deno.env.get(\"KERNEL_API_KEY\") || \"\";\n\n try {\n\n // ── GET /flows ────────────────────────────────────────\n if (path === \"/flows\" && method === \"GET\") {\n const flows = await listFlows();\n return json({ flows, total: flows.length });\n }\n\n // ── POST /flows ───────────────────────────────────────\n if (path === \"/flows\" && method === \"POST\") {\n const body = await req.json() as Flow;\n if (!body.name) return err(\"Missing flow name\");\n if (!Array.isArray(body.blocks)) return err(\"Missing blocks array\");\n if (!body.id) body.id = genId(\"flow\");\n await saveFlow(body);\n return json({ success: true, flowId: body.id });\n }\n\n const flowMatch = path.match(/^\\/flows\\/([^/]+)$/);\n const runMatch = path.match(/^\\/flows\\/([^/]+)\\/run$/);\n\n // ── GET /flows/:id ────────────────────────────────────\n if (flowMatch && method === \"GET\") {\n const flow = await getFlow(flowMatch[1]);\n if (!flow) return err(\"Flow not found\", 404);\n return json(flow);\n }\n\n // ── DELETE /flows/:id ─────────────────────────────────\n if (flowMatch && method === \"DELETE\") {\n await deleteFlow(flowMatch[1]);\n return json({ success: true });\n }\n\n // ── POST /flows/:id/run ───────────────────────────────\n if (runMatch && method === \"POST\") {\n const flowId = runMatch[1];\n const flow = await getFlow(flowId);\n if (!flow) return err(\"Flow not found\", 404);\n if (!kernelApiKey) return err(\"Missing Kernel API Key\");\n\n const body = await req.json().catch(() => ({})) as Record;\n const runId = genId(\"run\");\n\n await saveFlowRun({\n id: runId, flowId,\n status: \"running\",\n startedAt: new Date().toISOString(),\n });\n\n const selfUrl = `${url.origin}/internal/run`;\n const internalToken = Deno.env.get(\"INTERNAL_TOKEN\") || \"internal_browserflow_secret\";\n fetch(selfUrl, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Internal-Token\": internalToken,\n },\n body: JSON.stringify({\n runId, flowId,\n variables: body.variables ?? {},\n kernelApiKey,\n }),\n }).catch((e) => console.error(\"[ASYNC RUN] fire-and-forget failed:\", e.message));\n\n return json({\n runId,\n status: \"running\",\n message: \"Flow started. Poll GET /runs/\" + runId + \" for status.\",\n pollUrl: `${url.origin}/runs/${runId}`,\n }, 202);\n }\n\n // ── POST /run (inline, sync) ───────────────────────────\n if (path === \"/run\" && method === \"POST\") {\n if (!kernelApiKey) return err(\"Missing Kernel API Key\");\n const body = await req.json() as { flow: Flow; variables?: Record; async?: boolean };\n if (!body.flow) return err(\"Missing flow\");\n\n if (body.async) {\n const runId = genId(\"run\");\n const inlineFlowId = body.flow.id ?? genId(\"inline_flow\");\n body.flow.id = inlineFlowId;\n\n await saveFlowRun({\n id: runId, flowId: inlineFlowId,\n status: \"running\", startedAt: new Date().toISOString(),\n });\n\n const selfUrl = `${url.origin}/internal/run`;\n const internalToken = Deno.env.get(\"INTERNAL_TOKEN\") || \"internal_browserflow_secret\";\n fetch(selfUrl, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-Internal-Token\": internalToken,\n },\n body: JSON.stringify({\n runId, flow: body.flow,\n variables: body.variables ?? {},\n kernelApiKey,\n }),\n }).catch((e) => console.error(\"[ASYNC /run] failed:\", e.message));\n\n return json({\n runId, status: \"running\",\n pollUrl: `${url.origin}/runs/${runId}`,\n }, 202);\n }\n\n const result = await runFlow({\n flow: body.flow,\n variables: body.variables ?? {},\n kernelApiKey\n });\n return json(result);\n }\n\n // ── GET /runs ─────────────────────────────────────────\n if (path === \"/runs\" && method === \"GET\") {\n const runs = await listFlowRuns(url.searchParams.get(\"flowId\") ?? undefined);\n return json({ runs });\n }\n\n // ── GET /runs/:id ─────────────────────────────────────\n const runDetailMatch = path.match(/^\\/runs\\/([^/]+)$/);\n if (runDetailMatch && method === \"GET\") {\n const run = await getFlowRun(runDetailMatch[1]);\n if (!run) return err(\"Run not found\", 404);\n\n if (url.searchParams.get(\"wait\") === \"true\" && run.status === \"running\") {\n const deadline = Date.now() + 25_000;\n let latest = run;\n while (Date.now() < deadline && latest.status === \"running\") {\n await new Promise(r => setTimeout(r, 1500));\n const fresh = await getFlowRun(runDetailMatch[1]);\n if (fresh) latest = fresh;\n }\n return json(latest);\n }\n\n return json(run);\n }\n\n // ── DELETE /runs/:id ──────────────────────────────────\n if (runDetailMatch && method === \"DELETE\") {\n const run = await getFlowRun(runDetailMatch[1]);\n if (!run) return err(\"Run not found\", 404);\n if (run.status === \"running\") {\n await saveFlowRun({ ...run, status: \"cancelled\", finishedAt: new Date().toISOString() });\n }\n return json({ success: true });\n }\n\n return err(\"Not found\", 404);\n\n } catch (e: any) {\n console.error(\"[API ERROR]\", e);\n return err(e.message, 500);\n }\n}\n\n// ── Inline HTML UI ─────────────────────────────────────────\n// NOTE: Toàn bộ JS trong \n\n`;\n",[],[135],"b53989ae-2052-11f1-82e9-42dde27851f2","engine.ts","f52e6d8c-204c-11f1-8e02-42dde27851f2",26,["D",1773567502494],13,"// ============================================================\n// FLOW ENGINE v2 - Kernel.sh REST API + Playwright CDP\n// Base URL confirmed: https://api.onkernel.com (từ official docs)\n// ============================================================\n\n// StubFS: bắt buộc trên Val Town để playwright-core không crash\nimport \"https://esm.town/v/wolf/StubFS/stubFs.ts\";\n\nimport type {\n Flow, Block, FlowContext, BlockResult, RunFlowOptions, RunFlowResult, LogEntry\n} from \"./types.ts\";\nimport { executeInteractBlock } from \"./blocks/interact.ts\";\nimport { executeExtractBlock } from \"./blocks/extract.ts\";\nimport { executeNavigateBlock } from \"./blocks/navigate.ts\";\nimport { executeControlFlowBlock } from \"./blocks/controlflow.ts\";\nimport { executeUtilityBlock } from \"./blocks/utilities.ts\";\nimport { executeSpreadsheetBlock } from \"./blocks/spreadsheet.ts\";\n\n// ─── Block groups ─────────────────────────────────────────\nconst INTERACT_BLOCKS = new Set([\n \"click\", \"type_text\", \"press_key\", \"scroll\", \"hover\",\n \"select_option\", \"set_date_input\", \"upload_file\", \"handle_dialog\"\n]);\nconst EXTRACT_BLOCKS = new Set([\n \"get_element_text\", \"get_link_url\", \"get_page_url\", \"get_element_attribute\",\n \"get_element_html\", \"get_clipboard\", \"save_file\", \"take_screenshot\", \"generate_pdf\"\n]);\nconst NAVIGATE_BLOCKS = new Set([\"visit\", \"go_back\", \"go_forward\", \"reload_page\"]);\nconst CONTROLFLOW_BLOCKS = new Set([\n \"loop\", \"loop_elements\", \"loop_list_items\", \"loop_pages\",\n \"if\", \"else\", \"while\", \"end\", \"break\"\n]);\nconst SPREADSHEET_BLOCKS = new Set([\n \"loop_spreadsheet_rows\", \"add_spreadsheet_row\", \"update_spreadsheet_row\", \"find_spreadsheet_row\"\n]);\n\n// ─── Kernel API types ─────────────────────────────────────\nconst KERNEL_BASE = \"https://api.onkernel.com\";\n\ninterface KernelSession {\n session_id: string;\n cdp_ws_url: string;\n browser_live_view_url?: string;\n}\n\n// ─── Kernel REST: tạo browser session ─────────────────────\nasync function createKernelSession(apiKey: string): Promise {\n const res = await fetch(`${KERNEL_BASE}/browsers`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n headless: false,\n timeout_seconds: 300, // 5 phút\n }),\n signal: AbortSignal.timeout(20_000),\n });\n\n const text = await res.text();\n console.log(`[KERNEL] POST /browsers → ${res.status}: ${text.slice(0, 300)}`);\n\n if (!res.ok) {\n throw new Error(`Kernel API ${res.status}: ${text.slice(0, 200)}`);\n }\n\n const data = JSON.parse(text) as any;\n const session_id: string = data.session_id ?? \"\";\n const cdp_ws_url: string = data.cdp_ws_url ?? \"\";\n\n if (!session_id) throw new Error(`Kernel: no session_id. Got: ${text.slice(0, 100)}`);\n if (!cdp_ws_url) throw new Error(`Kernel: no cdp_ws_url. Got: ${text.slice(0, 100)}`);\n\n return { session_id, cdp_ws_url, browser_live_view_url: data.browser_live_view_url };\n}\n\n// ─── Kernel REST: xóa session ─────────────────────────────\nasync function deleteKernelSession(apiKey: string, sessionId: string): Promise {\n if (!sessionId) return;\n try {\n const res = await fetch(`${KERNEL_BASE}/browsers/${sessionId}`, {\n method: \"DELETE\",\n headers: { \"Authorization\": `Bearer ${apiKey}` },\n signal: AbortSignal.timeout(8_000),\n });\n console.log(`[KERNEL] DELETE /browsers/${sessionId} → ${res.status}`);\n } catch (e: any) {\n console.warn(`[KERNEL] Delete session warning: ${e.message}`);\n }\n}\n\n// ─── Retry với exponential backoff ────────────────────────\nasync function withRetry(\n fn: () => Promise,\n maxAttempts = 3,\n baseDelayMs = 2000,\n label = \"op\"\n): Promise {\n let lastError: Error = new Error(\"Unknown\");\n for (let i = 1; i <= maxAttempts; i++) {\n try {\n return await fn();\n } catch (err: any) {\n lastError = err;\n if (i < maxAttempts) {\n const delay = Math.min(baseDelayMs * Math.pow(2, i - 1), 30_000);\n console.warn(`[RETRY] ${label} attempt ${i}/${maxAttempts} failed: ${err.message}. Retry in ${delay}ms`);\n await new Promise(r => setTimeout(r, delay));\n }\n }\n }\n throw lastError;\n}\n\n// ─── Engine chính ──────────────────────────────────────────\nexport async function runFlow(options: RunFlowOptions): Promise {\n const { flow, kernelApiKey } = options;\n if (!flow) return { success: false, variables: {}, logs: [], error: \"No flow provided\" };\n\n // Logger dùng closure — không pass như arg để tránh \"log is not a function\"\n const logs: LogEntry[] = [];\n function emitLog(level: LogEntry[\"level\"], message: string, blockId?: string, blockType?: string, data?: unknown): void {\n const entry: LogEntry = {\n timestamp: new Date().toISOString(),\n level,\n message,\n blockId,\n blockType,\n data,\n };\n logs.push(entry);\n console.log(`[${level.toUpperCase()}][${blockType ?? \"engine\"}] ${message}`);\n }\n\n let browser: any = null;\n let sessionId = \"\";\n\n // ─── Phase 1: Tạo Kernel session ───────────────────────\n try {\n emitLog(\"info\", \"🚀 Tạo Kernel browser session...\");\n\n const ks = await withRetry(\n () => createKernelSession(kernelApiKey),\n 3, 2000, \"kernel-create\"\n );\n sessionId = ks.session_id;\n emitLog(\"info\", `✅ Session: ${sessionId}`);\n emitLog(\"info\", `🔗 CDP: ${ks.cdp_ws_url}`);\n if (ks.browser_live_view_url) {\n emitLog(\"info\", `🖥️ Live view: ${ks.browser_live_view_url}`);\n }\n\n // ─── Phase 2: Connect Playwright ──────────────────────\n emitLog(\"info\", \"🎭 Connecting Playwright via CDP...\");\n const { chromium } = await import(\"npm:playwright-core@1.49.1\");\n\n browser = await withRetry(\n () => chromium.connectOverCDP(ks.cdp_ws_url, { timeout: 30_000 }),\n 3, 2000, \"cdp-connect\"\n );\n emitLog(\"info\", \"✅ Playwright connected\");\n\n } catch (err: any) {\n emitLog(\"error\", `❌ Init failed: ${err.message}`);\n if (sessionId) await deleteKernelSession(kernelApiKey, sessionId);\n return { success: false, variables: {}, logs, error: err.message };\n }\n\n // ─── Phase 3: Khởi tạo Page ──────────────────────────\n let mainPage: any;\n try {\n const contexts = browser.contexts();\n const ctx0 = contexts.length > 0 ? contexts[0] : await browser.newContext();\n const pages = ctx0.pages();\n mainPage = pages.length > 0 ? pages[0] : await ctx0.newPage();\n emitLog(\"info\", \"✅ Page ready\");\n } catch (err: any) {\n emitLog(\"error\", `❌ Page init failed: ${err.message}`);\n await browser.close().catch(() => {});\n await deleteKernelSession(kernelApiKey, sessionId);\n return { success: false, variables: {}, logs, error: err.message };\n }\n\n const initialTabId = \"tab_main\";\n const tabs = new Map();\n tabs.set(initialTabId, mainPage);\n\n const flowCtx: FlowContext = {\n variables: { ...(flow.variables ?? {}), ...(options.variables ?? {}) },\n tabs,\n activeTabId: initialTabId,\n loopStack: [],\n browser,\n kernelSessionId: sessionId,\n logs,\n shouldBreak: false,\n };\n\n // ─── Phase 4: Thực thi blocks ────────────────────────\n let blockIndex = 0;\n const blocks = flow.blocks ?? [];\n let runSuccess = true;\n let runError = \"\";\n\n while (blockIndex < blocks.length) {\n const block = blocks[blockIndex];\n if (!block) { blockIndex++; continue; }\n\n // Skip comment blocks\n if (block.type === \"comment\") {\n emitLog(\"debug\", `💬 ${block.params?.text ?? \"\"}`, block.id, \"comment\");\n blockIndex++;\n continue;\n }\n\n const t0 = Date.now();\n emitLog(\"info\", `▶ [${blockIndex}] ${block.type}`, block.id, block.type, block.params);\n\n let result: BlockResult;\n try {\n if (INTERACT_BLOCKS.has(block.type)) {\n result = await executeInteractBlock(block, flowCtx);\n } else if (EXTRACT_BLOCKS.has(block.type)) {\n result = await executeExtractBlock(block, flowCtx);\n } else if (NAVIGATE_BLOCKS.has(block.type)) {\n result = await executeNavigateBlock(block, flowCtx);\n } else if (CONTROLFLOW_BLOCKS.has(block.type)) {\n result = await executeControlFlowBlock(block, flowCtx, blockIndex, blocks);\n } else if (SPREADSHEET_BLOCKS.has(block.type)) {\n result = await executeSpreadsheetBlock(block, flowCtx, blockIndex);\n } else if (block.type === \"run_flow\") {\n result = await runSubFlow(block, flowCtx, kernelApiKey);\n } else {\n result = await executeUtilityBlock(block, flowCtx);\n }\n } catch (err: any) {\n result = { success: false, error: err.message };\n }\n\n const ms = Date.now() - t0;\n\n if (!result.success) {\n const msg = `❌ [${block.type}] ${result.error ?? \"Unknown error\"} (${ms}ms)`;\n emitLog(\"error\", msg, block.id, block.type);\n\n // Auto-screenshot on error\n try {\n const buf = await mainPage.screenshot({ type: \"png\", fullPage: false });\n const b64 = btoa(String.fromCharCode(...new Uint8Array(buf)));\n emitLog(\"debug\", `📸 screenshot:data:image/png;base64,${b64}`, block.id, block.type);\n } catch (_) { /* ignore */ }\n\n if (block.params?.continueOnError) {\n emitLog(\"warn\", `⚠️ continueOnError=true, continuing`, block.id, block.type);\n blockIndex++;\n continue;\n }\n runSuccess = false;\n runError = msg;\n break;\n }\n\n emitLog(\"info\", `✅ [${block.type}] done (${ms}ms)`, block.id, block.type,\n result.output !== undefined ? result.output : undefined);\n\n // Điều hướng index\n if (flowCtx.shouldBreak) {\n flowCtx.shouldBreak = false;\n blockIndex = findNextEnd(blocks, blockIndex) + 1;\n continue;\n }\n if (result.jumpToIndex !== undefined) {\n blockIndex = result.jumpToIndex;\n continue;\n }\n if (result.skipToEnd) {\n blockIndex = findNextEndOrElse(blocks, blockIndex) + 1;\n continue;\n }\n\n blockIndex++;\n }\n\n // ─── Cleanup ─────────────────────────────────────────\n emitLog(\"info\", \"🧹 Cleaning up...\");\n try { await browser.close(); } catch (_) { /* ignore */ }\n await deleteKernelSession(kernelApiKey, sessionId);\n emitLog(\"info\", \"✅ Done\");\n\n return {\n success: runSuccess,\n variables: flowCtx.variables,\n logs,\n error: runError || undefined,\n };\n}\n\n// ─── Sub-flow runner ─────────────────────────────────────\nasync function runSubFlow(block: Block, ctx: FlowContext, kernelApiKey: string): Promise {\n const flowId: string = block.params?.flowId ?? \"\";\n if (!flowId) return { success: false, error: \"run_flow: missing flowId\" };\n try {\n const { getFlow } = await import(\"./storage.ts\");\n const subFlow = await getFlow(flowId);\n if (!subFlow) return { success: false, error: `Flow not found: ${flowId}` };\n const result = await runFlow({ flow: subFlow, kernelApiKey, variables: ctx.variables });\n Object.assign(ctx.variables, result.variables);\n return { success: result.success, output: result.variables, error: result.error };\n } catch (err: any) {\n return { success: false, error: err.message };\n }\n}\n\n// ─── Index helpers ───────────────────────────────────────\nconst LOOP_TYPES = [\"loop\", \"loop_elements\", \"loop_list_items\", \"loop_pages\", \"loop_spreadsheet_rows\", \"if\", \"while\"];\n\nfunction findNextEnd(blocks: Block[], from: number): number {\n let depth = 1;\n for (let i = from + 1; i < blocks.length; i++) {\n if (LOOP_TYPES.includes(blocks[i].type)) depth++;\n if (blocks[i].type === \"end\") { if (--depth === 0) return i; }\n }\n return blocks.length - 1;\n}\n\nfunction findNextEndOrElse(blocks: Block[], from: number): number {\n let depth = 1;\n for (let i = from + 1; i < blocks.length; i++) {\n const t = blocks[i].type;\n if (LOOP_TYPES.includes(t)) depth++;\n if (t === \"end\") { if (--depth === 0) return i; }\n if (t === \"else\" && depth === 1) return i;\n }\n return blocks.length - 1;\n}\n",[],[144],["D",1773564881135],[155,156,157,158,159,160],[19],{"_39":91,"_13":92,"_42":93,"_44":45,"_46":47,"_48":94,"_50":51,"_52":176,"_17":81,"_55":24,"_56":96,"_58":59,"_60":-5,"_115":177,"_18":178},{"_39":84,"_13":85,"_42":86,"_44":45,"_46":47,"_48":87,"_50":51,"_52":173,"_17":54,"_55":24,"_56":89,"_58":59,"_60":-5,"_115":174,"_18":175},{"_39":76,"_13":77,"_42":78,"_44":45,"_46":47,"_48":79,"_50":51,"_52":170,"_17":81,"_55":24,"_56":82,"_58":59,"_60":-5,"_115":171,"_18":172},{"_39":69,"_13":70,"_42":71,"_44":45,"_46":47,"_48":72,"_50":51,"_52":167,"_17":54,"_55":24,"_56":74,"_58":59,"_60":-5,"_115":168,"_18":169},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":164,"_17":54,"_55":24,"_56":67,"_58":59,"_60":-5,"_115":165,"_18":166},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":161,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_115":162,"_18":163},["D",1773564972926],[],[19,41],["D",1773564995756],[],[19,63],["D",1773564906723],[],[19,70],["D",1773567586314],[],[19,77],["D",1773564897920],[],[19,85],["D",1773567636596],[],[19,92],"85943de4-204c-11f1-94bd-42dde27851f2",["D",1773564845585],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Browser automation engine giống Browserflow, chạy trên Kernel.sh","imageUrl","userId","019ced01-90af-7019-a349-1b32c2e46191","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019ced04-6266-748c-a6bb-b70a7446d59e","tursoName","85943de4204c11f194bd42dde27851f2","tursoHostname","85943de4204c11f194bd42dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789528252206],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_236":232},"org",{"_11":12,"_229":230,"_231":232,"_189":-5,"_233":234,"_235":59},"branch",{"_17":137,"_13":16,"_39":47,"_221":179,"_222":-5,"_223":-5,"_224":-5,"_225":-5,"_226":-5,"_227":14,"_228":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","adminh","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/0cef36b0-8080-4c50-5206-197543f8c300/square512?exp=1789563599&sig=1ccfdce22d8edc3bd9250cca31470852cf07faf925087d05b411d9d5b694a781","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_39":179,"_13":14,"_52":315,"_181":-5,"_182":59,"_183":184,"_185":184,"_186":187,"_188":-5,"_189":190,"_191":136,"_192":51,"_193":-5,"_194":-5,"_195":54,"_196":197,"_198":199,"_200":201,"_202":316,"_204":-5,"_205":206,"_207":206,"_208":209,"_210":209,"_211":209,"_212":206,"_213":206,"_214":317,"_216":318,"_218":319,"_220":59},[279,286,287,288,289,290],"files",[279,280,281,282,283,284,285,286,287,288,289,290],"counts",{"_270":54,"_271":81,"_272":54,"_32":273,"_274":275},[258,259,260,261,262,263],{"_39":98,"_46":47,"_42":45,"_13":19,"_56":-5,"_55":101,"_17":54,"_44":-5,"_52":256,"_48":99,"_60":-5,"_18":257},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1773564881135],[19],{"_39":91,"_13":92,"_42":93,"_44":45,"_46":47,"_48":94,"_50":51,"_52":95,"_17":81,"_55":24,"_56":96,"_58":59,"_60":-5,"_18":269},{"_39":84,"_13":85,"_42":86,"_44":45,"_46":47,"_48":87,"_50":51,"_52":88,"_17":54,"_55":24,"_56":89,"_58":59,"_60":-5,"_18":268},{"_39":76,"_13":77,"_42":78,"_44":45,"_46":47,"_48":79,"_50":51,"_52":80,"_17":81,"_55":24,"_56":82,"_58":59,"_60":-5,"_18":267},{"_39":69,"_13":70,"_42":71,"_44":45,"_46":47,"_48":72,"_50":51,"_52":73,"_17":54,"_55":24,"_56":74,"_58":59,"_60":-5,"_18":266},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":66,"_17":54,"_55":24,"_56":67,"_58":59,"_60":-5,"_18":265},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_18":264},[19,41],[19,63],[19,70],[19,77],[19,85],[19,92],"pulls","branches","forks",{"_276":99,"_278":54},"connections",{"_276":54,"_277":54},"count","unfilledCount","emptyCount",{"_39":98,"_13":19,"_42":45,"_44":-5,"_46":47,"_48":99,"_50":51,"_52":152,"_17":54,"_55":101,"_56":-5,"_58":59,"_60":-5,"_115":313,"_18":314},{"_39":91,"_13":92,"_42":93,"_44":45,"_46":47,"_48":94,"_50":51,"_52":176,"_17":81,"_55":24,"_56":96,"_58":59,"_60":-5,"_115":311,"_18":312},{"_39":84,"_13":85,"_42":86,"_44":45,"_46":47,"_48":87,"_50":51,"_52":173,"_17":54,"_55":24,"_56":89,"_58":59,"_60":-5,"_115":309,"_18":310},{"_39":76,"_13":77,"_42":78,"_44":45,"_46":47,"_48":79,"_50":51,"_52":170,"_17":81,"_55":24,"_56":82,"_58":59,"_60":-5,"_115":307,"_18":308},{"_39":69,"_13":70,"_42":71,"_44":45,"_46":47,"_48":72,"_50":51,"_52":167,"_17":54,"_55":24,"_56":74,"_58":59,"_60":-5,"_115":305,"_18":306},{"_39":62,"_13":63,"_42":64,"_44":45,"_46":47,"_48":65,"_50":51,"_52":164,"_17":54,"_55":24,"_56":67,"_58":59,"_60":-5,"_115":303,"_18":304},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":161,"_17":54,"_55":24,"_56":57,"_58":59,"_60":-5,"_115":301,"_18":302},{"_39":143,"_13":144,"_42":145,"_44":-5,"_46":47,"_48":146,"_50":51,"_52":147,"_17":148,"_55":24,"_56":149,"_58":59,"_60":-5,"_115":299,"_18":300},{"_39":134,"_13":135,"_42":136,"_44":-5,"_46":47,"_48":137,"_50":51,"_52":138,"_17":112,"_55":139,"_56":140,"_58":59,"_60":-5,"_115":297,"_18":298},{"_39":126,"_13":127,"_42":128,"_44":-5,"_46":47,"_48":129,"_50":51,"_52":130,"_17":81,"_55":24,"_56":131,"_58":59,"_60":-5,"_115":295,"_18":296},{"_39":118,"_13":119,"_42":120,"_44":-5,"_46":47,"_48":121,"_50":51,"_52":122,"_17":81,"_55":24,"_56":123,"_58":59,"_60":-5,"_115":293,"_18":294},{"_39":109,"_13":110,"_42":111,"_44":-5,"_46":47,"_48":112,"_50":51,"_52":113,"_17":54,"_55":24,"_56":114,"_58":59,"_60":-5,"_115":291,"_18":292},[],[110],[],[119],[],[127],[],[135],[],[144],[],[19,41],[],[19,63],[],[19,70],[],[19,77],[],[19,85],[],[19,92],[280,281,282,283,284,285],[19],["D",1773564845585],["D",1789528252206],{"_11":12,"_236":232},{"_11":12,"_229":230,"_231":232,"_189":-5,"_233":234,"_235":59},{"_17":137,"_13":16,"_39":47,"_221":179,"_222":-5,"_223":-5,"_224":-5,"_225":-5,"_226":-5,"_227":14,"_228":12},"ctx",{"_214":-5,"_253":353,"_354":355,"_356":357,"_358":59,"_359":59,"_360":59,"_361":51,"_362":-5,"_363":-7,"_364":-7,"_365":54,"_366":59,"_367":59,"_368":-5,"_369":59,"_370":59,"_371":59,"_372":-5},"ENV",{"_324":325,"_326":327,"_328":16,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

🔑 API Keys

🌐 API Endpoint

📦 Block Stats

ℹ️ About

➕ Add Block

📥 Import Flow JSON