\n\n \n\n\n",[],[174,176],"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",[],[174,183],"6bd964f4-30ca-11f1-873c-42dde27851f2",2,["D",1775378137606],[140,141,142],[174],["D",1775378140048],[],[18],["D",1775377854654],{"_11":12,"_95":91},{"_11":12,"_89":-5,"_90":91,"_31":50,"_92":93,"_94":30},{"_78":79,"_13":16,"_38":80,"_81":39,"_82":-5,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":14,"_88":12},"ctx",{"_71":-5,"_114":234,"_235":236,"_237":238,"_239":30,"_240":30,"_241":30,"_242":24,"_243":-5,"_244":-7,"_245":-7,"_246":26,"_247":30,"_248":30,"_249":-5,"_250":30,"_251":30,"_252":30,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":16,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"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"]

History · backend