\n\n \n\n\n",[],[69,107],"cc56ce0c-30ca-11f1-abe7-42dde27851f2","app.tsx","cc56ceb6-30ca-11f1-abe7-42dde27851f2",["D",1775378299489],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ── Types ──────────────────────────────────────────────────────────────────\ninterface EnvStatus { kernel: boolean; fivesim: boolean; openai: boolean; }\ninterface Account { email: string; profile: string; phone: string; name: string; sessionId: string; proxyId: string; }\ninterface CsvPreview { total: number; rows: any[]; }\n\n// ── Toast ──────────────────────────────────────────────────────────────────\nfunction useToast() {\n const [toasts, setToasts] = useState<{ id: number; msg: string; type: string }[]>([]);\n const show = (msg: string, type = \"info\") => {\n const id = Date.now();\n setToasts(t => [...t, { id, msg, type }]);\n setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 4000);\n };\n return { toasts, show };\n}\n\n// ── Log helpers ────────────────────────────────────────────────────────────\nfunction classifyLog(line: string): string {\n if (line.includes(\"✅\") || line.includes(\"🏆\") || line.includes(\"💾\") || line.includes(\"🎉\")) return \"success\";\n if (line.includes(\"❌\") || line.includes(\"⚠️\") || line.includes(\"LỖI\")) return \"error\";\n if (line.includes(\"🔒\") || line.includes(\"⏳\") || line.includes(\"🔑\")) return \"warn\";\n if (line.includes(\"📥\") || line.includes(\"🚀\") || line.includes(\"🧠\") ||\n line.includes(\"📞\") || line.includes(\"📱\") || line.includes(\"📤\") ||\n line.includes(\"🖥\") || line.includes(\"👤\") || line.includes(\"🌐\")) return \"info\";\n if (line.startsWith(\"══\") || line.trim() === \"\") return \"muted\";\n return \"\";\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Dashboard\n// ══════════════════════════════════════════════════════════════════════════\nfunction Dashboard({ envStatus, accounts, csvPreview, loading }:\n { envStatus: EnvStatus | null; accounts: Account[]; csvPreview: CsvPreview | null; loading: boolean }) {\n\n const envOk = envStatus && envStatus.kernel && envStatus.fivesim;\n\n return (\n

Tổng Accounts

{accounts.length}

đã đăng ký thành công

CSV Rows

{csvPreview?.total ?? \"—\"}

dòng dữ liệu đầu vào

Còn lại

\n {csvPreview ? Math.max(0, csvPreview.total - accounts.length) : \"—\"}\n

chưa đăng ký

Tỉ lệ

\n {csvPreview && csvPreview.total > 0\n ? Math.round((accounts.length / csvPreview.total) * 100) + \"%\"\n : \"—\"}\n

thành công

\n\n {/* Env Status */}\n

🔑 Trạng thái API Keys

KERNEL_API_KEY

Kernel.sh — browser automation

\n {envStatus\n ? \n \n {envStatus.kernel ? \"Đã cài\" : \"Chưa cài\"}\n \n : Đang kiểm tra...\n }\n

FIVESIM_API_KEY

5sim.net — mua số UK nhận OTP

\n {envStatus\n ? \n \n {envStatus.fivesim ? \"Đã cài\" : \"Chưa cài\"}\n \n : Đang kiểm tra...\n }\n

OPENAI_API_KEY

OpenAI — chuẩn hoá dữ liệu (tuỳ chọn)

\n {envStatus\n ? \n \n {envStatus.openai ? \"Đã cài\" : \"Không bắt buộc\"}\n \n : Đang kiểm tra...\n }\n

\n {envStatus && !envOk && (\n

\n ⚠️ Vào Settings → Environment Variables để thêm API keys còn thiếu trước khi chạy.\n

\n )}\n

\n\n {/* CSV Preview */}\n {csvPreview && (\n

📋 Dữ liệu CSV

✅ {csvPreview.total} dòng

\n {csvPreview.rows.length > 0 && (\n

\n \n \n \n {Object.keys(csvPreview.rows[0]).slice(0, 6).map(k => )}\n \n \n \n {csvPreview.rows.map((r, i) => (\n \n {Object.values(r).slice(0, 6).map((v: any, j) => (\n \n ))}\n \n ))}\n \n

{k}
{String(v).substring(0, 30)}

\n Hiển thị 5/{csvPreview.total} dòng đầu\n

\n )}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Run Automation\n// ══════════════════════════════════════════════════════════════════════════\nfunction RunPage({ envStatus, showToast }: { envStatus: EnvStatus | null; showToast: (m: string, t?: string) => void }) {\n const [running, setRunning] = useState(false);\n const [logs, setLogs] = useState([]);\n const logRef = useRef(null);\n\n const envOk = envStatus && envStatus.kernel && envStatus.fivesim;\n\n const addLog = (line: string) => setLogs(prev => [...prev.slice(-200), line]);\n\n const handleRun = async () => {\n setRunning(true);\n setLogs([]);\n addLog(\"⏳ Gửi lệnh khởi động automation...\");\n try {\n const res = await fetch(\"/api/run\", { method: \"POST\" });\n const data = await res.json();\n if (!res.ok) {\n addLog(`❌ Lỗi: ${data.error}`);\n showToast(data.error, \"error\");\n setRunning(false);\n return;\n }\n addLog(\"✅ \" + data.message);\n addLog(\"📋 Theo dõi tiến trình trong tab Logs của Val Town.\");\n addLog(\"👁️ Live View URL sẽ hiển thị trong logs — mở trên máy để xem trình duyệt.\");\n showToast(\"Automation đã khởi động!\", \"success\");\n } catch (e: any) {\n addLog(`❌ Lỗi kết nối: ${e.message}`);\n showToast(\"Lỗi kết nối server\", \"error\");\n }\n setRunning(false);\n };\n\n // Auto scroll logs\n useEffect(() => {\n if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;\n }, [logs]);\n\n return (\n

🚀 Khởi động Automation

Hệ thống sẽ tạo trình duyệt Kernel, đăng ký từng tài khoản eBay
theo dữ liệu CSV và lưu kết quả vào Blob Storage.

\n \n {!envOk && (\n

\n ⚠️ Cần cài đủ API Keys trước khi chạy\n

\n )}\n

\n\n

\n 📟 Output\n \n

\n {logs.length === 0\n ? // Output sẽ hiển thị ở đây sau khi nhấn chạy...\n : logs.map((line, i) => (\n {line}{\"\\n\"}\n ))\n }\n

\n\n

ℹ️ Luồng hoạt động

\n {[\n [\"1\", \"📥\", \"Tải dữ liệu từ Google Sheets CSV\"],\n [\"2\", \"🛡️\", \"Lọc email đã đăng ký (từ Blob Storage)\"],\n [\"3\", \"🧠\", \"AI Agent (OpenAI) chuẩn hoá dữ liệu (nếu có key)\"],\n [\"4\", \"👤\", \"Tạo Kernel Profile + ISP Proxy (US)\"],\n [\"5\", \"🖥️\", \"Khởi động Chrome qua CDP + Extension NopeCHA\"],\n [\"6\", \"📝\", \"Điền form đăng ký eBay + xử lý CAPTCHA tự động\"],\n [\"7\", \"📞\", \"Mua số UK từ 5SIM, nhận OTP\"],\n [\"8\", \"💾\", \"Lưu account thành công vào Blob Storage\"],\n [\"9\", \"🧹\", \"Dọn dẹp browser session\"],\n ].map(([num, icon, text]) => (\n

\n {num}\n {icon}\n {text}\n

\n ))}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Accounts\n// ══════════════════════════════════════════════════════════════════════════\nfunction AccountsPage({ accounts, onRefresh, onClear, loading, showToast }:\n { accounts: Account[]; onRefresh: () => void; onClear: () => void; loading: boolean; showToast: (m: string, t?: string) => void }) {\n\n const [confirmClear, setConfirmClear] = useState(false);\n\n const handleClear = async () => {\n if (!confirmClear) { setConfirmClear(true); return; }\n await onClear();\n setConfirmClear(false);\n showToast(\"Đã xoá toàn bộ lịch sử\", \"success\");\n };\n\n const exportCSV = () => {\n const header = \"email,name,phone,profile,sessionId,proxyId\";\n const rows = accounts.map(a =>\n `${a.email},${a.name},${a.phone},${a.profile},${a.sessionId},${a.proxyId}`\n );\n const blob = new Blob([[header, ...rows].join(\"\\n\")], { type: \"text/csv\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url; a.download = \"ebay_accounts.csv\"; a.click();\n showToast(\"Đã xuất CSV!\", \"success\");\n };\n\n return (\n

\n \n ✅ {accounts.length} accounts\n \n

\n \n {accounts.length > 0 && (\n <>\n \n \n \n )}\n

\n\n {accounts.length === 0 ? (\n

🗃️

Chưa có account nào được đăng ký thành công

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {accounts.map((a, i) => (\n \n \n \n \n \n \n \n ))}\n \n

#	Email	Họ tên	Số ĐT	Kernel Profile
{i + 1}	{a.email}	{a.name \|\| —}	{a.phone \|\| \"—\"}	{a.profile \|\| \"—\"}

\n )}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Settings / Help\n// ══════════════════════════════════════════════════════════════════════════\nfunction SettingsPage() {\n return (\n

📖 Hướng dẫn thiết lập

\n {[\n {\n title: \"1. Kernel API Key\",\n color: \"#60a5fa\",\n content: \"Truy cập kernel.sh → Đăng ký → Settings → API Keys → Tạo key mới → Copy → Dán vào Environment Variables với tên KERNEL_API_KEY\",\n },\n {\n title: \"2. 5SIM API Key\",\n color: \"#a78bfa\",\n content: \"Truy cập 5sim.net → Đăng ký → Nạp tiền → Profile → API → Copy API key → Dán vào Environment Variables với tên FIVESIM_API_KEY\",\n },\n {\n title: \"3. OpenAI API Key (tuỳ chọn)\",\n color: \"#34d399\",\n content: \"Truy cập platform.openai.com → API Keys → Create new → Dán vào OPENAI_API_KEY. Nếu không có, dữ liệu CSV sẽ được dùng trực tiếp.\",\n },\n {\n title: \"4. Cách thêm Environment Variables\",\n color: \"#fbbf24\",\n content: \"Trong Val Town: Vào val ebay-auto-register → Sidebar trái → Environment Variables → Add → Nhập key và value → Save\",\n },\n ].map((s, i) => (\n

{s.title}

{s.content}

\n ))}\n

\n\n

⚙️ Cấu hình hệ thống

\n {[\n [\"Extension NopeCHA ID\", \"bvzghdhbf3xml4koj0ryih1c\"],\n [\"Proxy\", \"ISP — Mỹ (US)\"],\n [\"Viewport\", \"414 × 896 (mobile)\"],\n [\"Số ĐT\", \"England (+44)\"],\n [\"Blob Key\", \"ebay_success_accounts\"],\n [\"Timeout browser\", \"3600 giây / session\"],\n ].map(([k, v]) => (\n

\n {k}\n {v}\n

\n ))}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// APP ROOT\n// ══════════════════════════════════════════════════════════════════════════\nfunction App() {\n const [page, setPage] = useState(\"dashboard\");\n const [envStatus, setEnvStatus] = useState(null);\n const [accounts, setAccounts] = useState([]);\n const [csvPreview, setCsvPreview] = useState(null);\n const [loading, setLoading] = useState(false);\n const { toasts, show: showToast } = useToast();\n\n const fetchAll = useCallback(async () => {\n setLoading(true);\n try {\n const [envRes, accRes, csvRes] = await Promise.all([\n fetch(\"/api/status\").then(r => r.json()),\n fetch(\"/api/accounts\").then(r => r.json()),\n fetch(\"/api/csv-preview\").then(r => r.json()),\n ]);\n setEnvStatus(envRes);\n setAccounts(accRes.accounts ?? []);\n if (!csvRes.error) setCsvPreview(csvRes);\n } catch (_) {}\n setLoading(false);\n }, []);\n\n useEffect(() => { fetchAll(); }, []);\n\n const clearAccounts = async () => {\n await fetch(\"/api/accounts\", { method: \"DELETE\" });\n setAccounts([]);\n };\n\n const navItems = [\n { id: \"dashboard\", icon: \"📊\", label: \"Dashboard\" },\n { id: \"run\", icon: \"▶️\", label: \"Chạy Automation\" },\n { id: \"accounts\", icon: \"🗂️\", label: \"Accounts\" },\n { id: \"settings\", icon: \"⚙️\", label: \"Thiết lập\" },\n ];\n\n return (\n

\n {/* Header */}\n

🛒

eBay Auto Register

Kernel × Playwright × 5SIM × AI

\n {loading && }\n \n \n {!envStatus ? \"Đang kiểm tra...\" : (envStatus.kernel && envStatus.fivesim ? \"Sẵn sàng\" : \"Thiếu API Key\")}\n \n \n

\n\n {/* Main */}\n

\n {/* Sidebar */}\n

\n ))}\n\n {/* Sidebar bottom */}\n

Accounts: {accounts.length}

CSV rows: {csvPreview?.total ?? \"—\"}

\n \n\n {/* Content */}\n

\n {page === \"dashboard\" && (\n \n )}\n {page === \"run\" && (\n \n )}\n {page === \"accounts\" && (\n \n )}\n {page === \"settings\" && }\n

\n\n {/* Toasts */}\n

\n {toasts.map(t => (\n

\n {t.type === \"success\" ? \"✅\" : t.type === \"error\" ? \"❌\" : \"ℹ️\"}\n {t.msg}\n

\n ))}\n

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[69,115],["D",1775378140048],[],[76],"c331ab4a-30c9-11f1-a5eb-42dde27851f2",["D",1775377854654],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tự động đăng ký tài khoản eBay qua Kernel + Playwright + 5SIM","imageUrl","userId","019d5cbd-54a1-73fe-b31b-c843be5aa8b2","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019d5cbd-54a1-73fe-b31b-ce435465b644","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_177":173},"org",{"_11":12,"_171":-5,"_172":173,"_134":135,"_174":175,"_176":56},"branch",{"_17":109,"_13":16,"_36":43,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNCdmxQUnRvMkF4N2pOYW9yd1BYUHZ1WTNtaiJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":124,"_13":14,"_48":235,"_126":-5,"_127":56,"_128":129,"_130":129,"_131":132,"_133":-5,"_134":135,"_136":-5,"_137":56,"_138":-5,"_139":-5,"_140":50,"_141":142,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":148,"_149":148,"_150":151,"_152":151,"_153":151,"_154":148,"_155":148,"_156":236,"_158":237,"_160":238,"_162":56},[214,215,219,220],"files",[214,215,216,217,218,219,220],"counts",{"_204":50,"_205":45,"_206":50,"_31":207,"_208":209},[196,197,198,199],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":50,"_51":73,"_53":-5,"_55":56,"_57":-5,"_18":203},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":72,"_17":50,"_51":73,"_53":-5,"_55":56,"_57":-5,"_18":202},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_18":201},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":200},[38],[60],[69],[76],"pulls","branches","forks",{"_210":212,"_213":50},"connections",{"_210":50,"_211":50},"count","unfilledCount",4,"emptyCount",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":121,"_17":50,"_51":73,"_53":-5,"_55":56,"_57":-5,"_86":233,"_18":234},{"_36":68,"_13":69,"_39":70,"_41":-5,"_42":43,"_44":71,"_46":47,"_48":92,"_17":50,"_51":73,"_53":-5,"_55":56,"_57":-5,"_86":231,"_18":232},{"_36":114,"_13":115,"_39":116,"_41":70,"_42":43,"_44":64,"_46":47,"_48":117,"_17":50,"_51":24,"_53":118,"_55":56,"_57":-5,"_86":229,"_18":230},{"_36":106,"_13":107,"_39":108,"_41":70,"_42":43,"_44":109,"_46":47,"_48":110,"_17":45,"_51":24,"_53":111,"_55":56,"_57":-5,"_86":227,"_18":228},{"_36":98,"_13":99,"_39":100,"_41":70,"_42":43,"_44":101,"_46":47,"_48":102,"_17":50,"_51":24,"_53":103,"_55":56,"_57":-5,"_86":225,"_18":226},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":89,"_17":64,"_51":65,"_53":66,"_55":56,"_57":-5,"_86":223,"_18":224},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":85,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_86":221,"_18":222},[],[38],[],[60],[],[69,99],[],[69,107],[],[69,115],[216,217,218],[69],[],[76],["D",1775377854654],{"_11":12,"_177":173},{"_11":12,"_171":-5,"_172":173,"_134":135,"_174":175,"_176":56},{"_17":109,"_13":16,"_36":43,"_163":124,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"ctx",{"_156":-5,"_193":272,"_273":274,"_275":276,"_277":56,"_278":56,"_279":56,"_280":47,"_281":-5,"_282":-7,"_283":-7,"_284":50,"_285":56,"_286":56,"_287":-5,"_288":56,"_289":56,"_290":56,"_291":-5},"ENV",{"_243":244,"_245":246,"_247":16,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271},"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"]

Code