MMO — Multi-Account Manager

\n \n \n\n",[],[165,382],"07d8d29a-3157-11f1-a470-42dde27851f2","index.css","07d8d358-3157-11f1-a470-42dde27851f2",21,["D",1775438528867],"@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0b0b10;\n --surface: #13131e;\n --surface2: #1a1a2e;\n --border: #252540;\n --primary: #6366f1;\n --primary-d: #4f52d0;\n --accent: #8b5cf6;\n --green: #22c55e;\n --red: #ef4444;\n --yellow: #f59e0b;\n --blue: #3b82f6;\n --text: #e2e8f0;\n --text2: #94a3b8;\n --text3: #475569;\n --radius: 12px;\n --radius-sm: 8px;\n font-family: 'Inter', system-ui, sans-serif;\n}\n\nbody {\n background: var(--bg);\n color: var(--text);\n font-size: 14px;\n line-height: 1.5;\n overflow: hidden;\n height: 100vh;\n user-select: none;\n}\n\n#root { display: flex; height: 100vh; overflow: hidden; }\n\n/* Scrollbar */\n::-webkit-scrollbar { width: 6px; height: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }\n::-webkit-scrollbar-thumb:hover { background: var(--text3); }\n\n/* Button */\nbutton { font-family: inherit; cursor: pointer; border: none; }\n.btn {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 8px 16px; border-radius: var(--radius-sm);\n font-size: 13px; font-weight: 600; transition: all 140ms;\n}\n.btn-primary { background: var(--primary); color: #fff; }\n.btn-primary:hover { background: var(--primary-d); transform: translateY(-1px); }\n.btn-ghost { background: var(--surface2); color: var(--text2); }\n.btn-ghost:hover { background: var(--border); color: var(--text); }\n.btn-danger { background: #2d0e0e; color: var(--red); }\n.btn-danger:hover { background: #3d1111; }\n.btn-sm { padding: 5px 10px; font-size: 12px; }\n.btn-icon { padding: 6px; border-radius: 8px; background: none; color: var(--text3); }\n.btn-icon:hover { background: var(--surface2); color: var(--text); }\n\n/* Input */\ninput, textarea, select {\n font-family: inherit; font-size: 13px;\n background: var(--surface2); color: var(--text);\n border: 1px solid var(--border); border-radius: var(--radius-sm);\n padding: 8px 12px; outline: none; width: 100%;\n transition: border-color 150ms;\n}\ninput:focus, textarea:focus, select:focus { border-color: var(--primary); }\ninput::placeholder, textarea::placeholder { color: var(--text3); }\nselect option { background: var(--surface); }\ntextarea { resize: vertical; min-height: 80px; }\n\n/* Label */\n.field { display: flex; flex-direction: column; gap: 5px; }\n.field label { font-size: 12px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }\n\n/* Card */\n.card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n}\n\n/* Badge */\n.badge {\n display: inline-flex; align-items: center; gap: 4px;\n padding: 2px 8px; border-radius: 20px;\n font-size: 11px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .04em;\n}\n.badge-fb { background: #1a2744; color: #4a7cff; }\n.badge-google { background: #1a1a10; color: #f59e0b; }\n.badge-tiktok { background: #1a0e20; color: #e040fb; }\n.badge-active { background: #0f2e1a; color: var(--green); }\n.badge-inactive { background: #1e1e2e; color: var(--text3); }\n.badge-banned { background: #2d0e0e; color: var(--red); }\n.badge-warming { background: #2d2000; color: var(--yellow); }\n\n/* Avatar */\n.avatar {\n width: 36px; height: 36px; border-radius: 50%;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n display: flex; align-items: center; justify-content: center;\n font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;\n}\n.avatar-sm { width: 28px; height: 28px; font-size: 11px; }\n.avatar-lg { width: 48px; height: 48px; font-size: 20px; }\n\n/* Modal */\n.modal-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,.6); backdrop-filter: blur(4px);\n z-index: 1000; display: flex; align-items: center; justify-content: center;\n animation: fadeIn 150ms ease;\n}\n.modal {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 16px;\n width: min(520px, calc(100vw - 40px));\n max-height: 85vh; overflow-y: auto;\n animation: slideUp 180ms cubic-bezier(.34,1.56,.64,1);\n box-shadow: 0 40px 100px rgba(0,0,0,.6);\n}\n.modal-header {\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; justify-content: space-between;\n}\n.modal-title { font-size: 16px; font-weight: 700; }\n.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }\n.modal-footer {\n padding: 16px 24px;\n border-top: 1px solid var(--border);\n display: flex; justify-content: flex-end; gap: 10px;\n}\n\n/* Toast */\n.toast-container {\n position: fixed; bottom: 24px; right: 24px;\n display: flex; flex-direction: column; gap: 8px; z-index: 9999;\n}\n.toast {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: var(--radius-sm); padding: 12px 16px;\n font-size: 13px; font-weight: 500;\n box-shadow: 0 8px 32px rgba(0,0,0,.5);\n display: flex; align-items: center; gap: 8px;\n animation: slideIn 200ms ease;\n max-width: 320px;\n}\n.toast-success { border-left: 3px solid var(--green); }\n.toast-error { border-left: 3px solid var(--red); }\n.toast-info { border-left: 3px solid var(--primary); }\n\n/* Table */\n.table-wrap { overflow-x: auto; }\ntable { width: 100%; border-collapse: collapse; }\nth { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }\ntd { padding: 12px 14px; border-bottom: 1px solid #161624; font-size: 13px; }\ntr:hover td { background: var(--surface2); }\ntr:last-child td { border-bottom: none; }\n\n/* Stat card */\n.stat-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 20px;\n display: flex; flex-direction: column; gap: 6px;\n}\n.stat-num { font-size: 32px; font-weight: 800; line-height: 1; }\n.stat-label { font-size: 12px; color: var(--text2); font-weight: 500; }\n.stat-delta { font-size: 12px; color: var(--green); font-weight: 600; }\n\n/* Sidebar */\n.sidebar {\n width: 220px; flex-shrink: 0;\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex; flex-direction: column;\n padding: 0;\n}\n.sidebar-logo {\n padding: 20px 18px 16px;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; gap: 10px;\n}\n.sidebar-logo-icon {\n width: 32px; height: 32px;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n border-radius: 10px; display: flex; align-items: center; justify-content: center;\n font-size: 16px; box-shadow: 0 2px 12px rgba(99,102,241,.4);\n}\n.sidebar-logo-text { font-size: 16px; font-weight: 800; }\n.sidebar-logo-sub { font-size: 10px; color: var(--text3); }\n.sidebar-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }\n.nav-item {\n display: flex; align-items: center; gap: 10px;\n padding: 9px 10px; border-radius: var(--radius-sm);\n font-size: 13px; font-weight: 500; color: var(--text2);\n cursor: pointer; transition: all 140ms;\n border: none; background: none; width: 100%; text-align: left;\n}\n.nav-item:hover { background: var(--surface2); color: var(--text); }\n.nav-item.active { background: rgba(99,102,241,.15); color: var(--primary); }\n.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }\n.nav-section { padding: 14px 10px 4px; font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }\n.sidebar-footer { padding: 14px 10px; border-top: 1px solid var(--border); }\n\n/* Main */\n.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }\n.topbar {\n height: 56px; flex-shrink: 0;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 24px;\n background: var(--surface);\n}\n.topbar-title { font-size: 16px; font-weight: 700; }\n.topbar-actions { display: flex; align-items: center; gap: 10px; }\n.content { flex: 1; overflow-y: auto; padding: 24px; }\n\n/* Grid */\n.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }\n.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }\n.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }\n\n/* Account card */\n.account-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n transition: border-color 200ms, transform 150ms;\n cursor: pointer;\n}\n.account-card:hover { border-color: var(--primary); transform: translateY(-2px); }\n.account-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }\n.account-card-info { flex: 1; min-width: 0; }\n.account-card-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.account-card-user { font-size: 12px; color: var(--text2); }\n.account-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }\n.account-card-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }\n.acc-stat { text-align: center; }\n.acc-stat-num { font-size: 16px; font-weight: 800; color: var(--primary); }\n.acc-stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; }\n.account-card-actions { margin-top: 12px; display: flex; gap: 6px; }\n\n/* Platform icons (emoji fallback) */\n.platform-icon { font-size: 18px; }\n\n/* Charts */\n.chart-wrap { height: 200px; }\n\n/* Empty state */\n.empty { padding: 60px 20px; text-align: center; color: var(--text3); }\n.empty-icon { font-size: 48px; margin-bottom: 16px; }\n.empty-title { font-size: 18px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }\n.empty-sub { font-size: 13px; }\n\n/* Tag */\n.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }\n\n/* Divider */\n.divider { border: none; border-top: 1px solid var(--border); margin: 0; }\n\n/* Activity feed */\n.activity-item {\n display: flex; gap: 12px; padding: 12px 0;\n border-bottom: 1px solid #161624;\n}\n.activity-item:last-child { border-bottom: none; }\n.activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }\n\n/* Animations */\n@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\n\n/* Spinner */\n.spinner {\n width: 20px; height: 20px;\n border: 2px solid var(--border);\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin .6s linear infinite;\n display: inline-block;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n/* Heading */\nh1 { font-size: 24px; font-weight: 800; }\nh2 { font-size: 18px; font-weight: 700; }\nh3 { font-size: 15px; font-weight: 700; }\n\n/* Flex helpers */\n.flex { display: flex; }\n.flex-col { flex-direction: column; }\n.items-center { align-items: center; }\n.justify-between { justify-content: space-between; }\n.gap-2 { gap: 8px; }\n.gap-3 { gap: 12px; }\n.gap-4 { gap: 16px; }\n.flex-1 { flex: 1; }\n.mt-4 { margin-top: 16px; }\n.mb-4 { margin-bottom: 16px; }\n",[],[165,389],"3c229fea-3157-11f1-a470-42dde27851f2","App.tsx","3c22a0b2-3157-11f1-a470-42dde27851f2",26,["D",1775438616592],"import React, { useState, useEffect } from \"react\";\nimport { ToastProvider } from \"./lib/toast\";\nimport Sidebar from \"./components/Sidebar\";\nimport Dashboard from \"./pages/Dashboard\";\nimport Accounts from \"./pages/Accounts\";\nimport Teams from \"./pages/Teams\";\nimport Profiles from \"./pages/Profiles\";\nimport Posts from \"./pages/Posts\";\nimport Activities from \"./pages/Activities\";\nimport Metrics from \"./pages/Metrics\";\nimport Settings from \"./pages/Settings\";\nimport { api } from \"./lib/invoke\";\n\nexport type Page =\n | \"dashboard\" | \"accounts\" | \"teams\"\n | \"profiles\" | \"posts\" | \"activities\"\n | \"metrics\" | \"settings\";\n\nexport default function App() {\n const [page, setPage] = useState(\"dashboard\");\n const [hasToken, setHasToken] = useState(null);\n\n useEffect(() => {\n api.getGologinToken().then(t => setHasToken(!!t));\n }, []);\n\n // If no token yet, force settings page\n useEffect(() => {\n if (hasToken === false) setPage(\"settings\");\n }, [hasToken]);\n\n const renderPage = () => {\n switch (page) {\n case \"dashboard\": return ;\n case \"accounts\": return ;\n case \"teams\": return ;\n case \"profiles\": return ;\n case \"posts\": return ;\n case \"activities\": return ;\n case \"metrics\": return ;\n case \"settings\": return setHasToken(true)} />;\n default: return ;\n }\n };\n\n return (\n \n

\n \n

{renderPage()}

\n \n );\n}\n",[],[165,397],"67423398-3157-11f1-ad5e-42dde27851f2","Teams.tsx","67423438-3157-11f1-ad5e-42dde27851f2","eeea02ad-2a37-40d3-83c8-847aadaac924",30,["D",1775438688938],"import React, { useEffect, useState } from \"react\";\nimport { api, Team } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\nimport Modal from \"../components/Modal\";\n\nconst COLORS = [\"#6366f1\",\"#8b5cf6\",\"#ec4899\",\"#f59e0b\",\"#22c55e\",\"#3b82f6\",\"#ef4444\",\"#14b8a6\"];\n\nexport default function Teams() {\n const [teams, setTeams] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [editing, setEditing] = useState(null);\n const [form, setForm] = useState({ name: \"\", description: \"\", color: COLORS[0] });\n const { toast } = useToast();\n\n const load = () => api.listTeams().then(setTeams).finally(() => setLoading(false));\n useEffect(() => { load(); }, []);\n\n const openCreate = () => {\n setEditing(null);\n setForm({ name: \"\", description: \"\", color: COLORS[0] });\n setShowModal(true);\n };\n const openEdit = (t: Team) => {\n setEditing(t);\n setForm({ name: t.name, description: t.description, color: t.color });\n setShowModal(true);\n };\n\n const save = async () => {\n if (!form.name.trim()) { toast(\"Team name is required\", \"error\"); return; }\n try {\n if (editing) {\n await api.updateTeam(editing.id, form.name, form.description, form.color);\n toast(\"Team updated\", \"success\");\n } else {\n await api.createTeam(form.name, form.description, form.color);\n toast(\"Team created\", \"success\");\n }\n setShowModal(false);\n load();\n } catch (e: any) { toast(e, \"error\"); }\n };\n\n const del = async (t: Team) => {\n if (!confirm(`Delete team \"${t.name}\"? All accounts will also be deleted.`)) return;\n await api.deleteTeam(t.id);\n toast(\"Team deleted\", \"success\");\n load();\n };\n\n return (\n

\n Teams & Apartments\n \n

\n {loading ?

\n : teams.length === 0 ? (\n

🏢

No teams yet

Create a team to organize accounts by apartment or group.

\n \n

\n ) : (\n

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

{t.name}

\n {t.description &&

{t.description}

}\n

\n Created {new Date(t.created_at).toLocaleDateString()}\n

\n \n \n

\n ))}\n

\n )}\n

\n\n {showModal && (\n setShowModal(false)}\n footer={\n <>\n \n \n \n }\n >\n

\n Team Name *\n setForm(f => ({ ...f, name: e.target.value }))} placeholder=\"e.g. Apartment A, Marketing Team…\" />\n

\n Description\n setForm(f => ({ ...f, description: e.target.value }))} placeholder=\"Optional notes\" />\n

\n Color\n

\n {COLORS.map(c => (\n

\n \n )}\n

\n );\n}\n",[],[165,413,405],"pages","ddcd4b56-3157-11f1-bdba-42dde27851f2","Settings.tsx","ddcd4c32-3157-11f1-bdba-42dde27851f2",36,["D",1775438887824],"import React, { useEffect, useState } from \"react\";\nimport { api } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\n\ninterface Props {\n onTokenSaved: () => void;\n}\n\nexport default function Settings({ onTokenSaved }: Props) {\n const [token, setToken] = useState(\"\");\n const [savedToken, setSavedToken] = useState(null);\n const [saving, setSaving] = useState(false);\n const [testing, setTesting] = useState(false);\n const [testResult, setTestResult] = useState<{ ok: boolean; msg: string } | null>(null);\n const { toast } = useToast();\n\n useEffect(() => {\n api.getGologinToken().then(t => {\n if (t) { setSavedToken(t); setToken(t); }\n });\n }, []);\n\n const save = async () => {\n if (!token.trim()) { toast(\"Token is required\", \"error\"); return; }\n setSaving(true);\n try {\n await api.setGologinToken(token.trim());\n setSavedToken(token.trim());\n toast(\"Token saved!\", \"success\");\n onTokenSaved();\n } catch (e: any) { toast(String(e), \"error\"); }\n finally { setSaving(false); }\n };\n\n const test = async () => {\n if (!token.trim()) { toast(\"Enter a token first\", \"error\"); return; }\n setTesting(true); setTestResult(null);\n try {\n await api.setGologinToken(token.trim());\n const profiles = await api.listGologinProfiles();\n setTestResult({ ok: true, msg: `✓ Connected! Found ${profiles.length} profiles.` });\n onTokenSaved();\n } catch (e: any) {\n setTestResult({ ok: false, msg: `✕ Failed: ${String(e)}` });\n } finally { setTesting(false); }\n };\n\n return (\n

\n Settings\n

\n\n

\n {/* GoLogin section */}\n

🌐

GoLogin API Token

\n Required to manage browser profiles\n

\n\n {!savedToken && (\n

\n ⚠️ No token set. MMO requires a GoLogin API token to manage browser profiles.\n

\n )}\n\n

\n API Token\n

\n setToken(e.target.value)}\n placeholder=\"Paste your GoLogin API token…\"\n style={{ flex: 1 }}\n onKeyDown={e => e.key === \"Enter\" && save()}\n />\n \n

\n\n {testResult && (\n

\n {testResult.msg}\n

\n )}\n\n

\n \n \n

\n\n

How to get your token:

Open GoLogin app or go to app.gologin.com
Go to Settings → API
Copy your API Token and paste it above
Make sure the GoLogin desktop app is running to launch profiles locally

\n\n {/* About section */}\n

About MMO

⚡ MMO — Multi-Account Manager

🌐 GoLogin anti-detect browser integration

📊 SQLite local database — all data stays on your machine

🏢 Team/Apartment-based account organization

\n Platforms: Facebook · Google · TikTok\n

\n\n

📁 Database: ~/.config/mmo/mmo.db

🔐 Token stored locally in SQLite, never sent anywhere except GoLogin API

\n );\n}\n",[],[165,413,415],"8fdac9d2-3157-11f1-b5f1-42dde27851f2","Profiles.tsx","8fdaca9a-3157-11f1-b5f1-42dde27851f2",32,["D",1775438757050],"import React, { useEffect, useState } from \"react\";\nimport { api, GologinProfile, Account } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\n\nexport default function Profiles() {\n const [profiles, setProfiles] = useState([]);\n const [accounts, setAccounts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [syncing, setSyncing] = useState(false);\n const [launching, setLaunching] = useState(null);\n const { toast } = useToast();\n\n const load = async () => {\n setLoading(true);\n try {\n const [p, a] = await Promise.all([api.listGologinProfiles(), api.listAccounts()]);\n setProfiles(p); setAccounts(a);\n } catch (e: any) { toast(String(e), \"error\"); }\n finally { setLoading(false); }\n };\n useEffect(() => { load(); }, []);\n\n const sync = async () => {\n setSyncing(true);\n try {\n const n = await api.syncProfiles();\n toast(`Synced ${n} profiles from GoLogin`, \"success\");\n load();\n } catch (e: any) { toast(String(e), \"error\"); }\n finally { setSyncing(false); }\n };\n\n const launch = async (p: GologinProfile) => {\n setLaunching(p.id);\n try {\n const ws = await api.launchProfile(p.id, p.account_id || undefined);\n toast(`Browser started: ${p.name}`, \"success\");\n console.log(\"CDP WebSocket URL:\", ws);\n } catch (e: any) { toast(String(e), \"error\"); }\n finally { setLaunching(null); }\n };\n\n const stop = async (p: GologinProfile) => {\n try {\n await api.stopProfile(p.id);\n toast(`Profile ${p.name} stopped`, \"success\");\n } catch (e: any) { toast(String(e), \"error\"); }\n };\n\n const linkedAccount = (p: GologinProfile) =>\n p.account_id ? accounts.find(a => a.id === p.account_id) : null;\n\n const osIcon = (os: string) => ({ win: \"🪟\", mac: \"🍎\", lin: \"🐧\" }[os] || \"💻\");\n\n return (\n

\n GoLogin Profiles ({profiles.length})\n

\n \n

\n\n

\n {loading ? (\n

\n ) : profiles.length === 0 ? (\n

🌐

No profiles found

Make sure your GoLogin token is set in Settings, then click Sync.

\n \n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {profiles.map(p => {\n const acc = linkedAccount(p);\n return (\n \n \n \n \n \n \n \n );\n })}\n \n

Profile Name	OS	Linked Account	Notes	Actions
\n {p.name} \n {p.id.slice(0, 16)}… \n	{osIcon(p.os)} {p.os.toUpperCase()}	\n {acc ? (\n \n {acc.display_name \|\| acc.username} \n @{acc.username} \n \n ) : (\n Unlinked\n )}\n	{p.notes \|\| \"—\"}	\n \n launch(p)}\n disabled={launching === p.id}\n >\n {launching === p.id\n ? \n : \"🚀 Launch\"}\n \n \n \n

\n )}\n\n

\n ℹ️ How GoLogin works with MMO
\n 1. Install the GoLogin desktop app and keep it running.
\n 2. Set your API token in Settings.
\n 3. Click \"Sync\" to pull your profiles.
\n 4. Click \"Launch\" — a browser window opens at that profile.
\n 5. The CDP WebSocket URL is logged to console for automation tools (Puppeteer, Playwright).\n

\n );\n}\n",[],[165,413,423],"a0683dd4-3157-11f1-aad5-42dde27851f2","Posts.tsx","a0683eb0-3157-11f1-aad5-42dde27851f2",33,["D",1775438784820],"import React, { useEffect, useState } from \"react\";\nimport { api, Post, Account } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\nimport Modal from \"../components/Modal\";\nimport { platformIcon, platformLabel, formatRelative } from \"../lib/utils\";\n\nconst STATUS_COLORS: Record = {\n draft: \"var(--text3)\", scheduled: \"var(--yellow)\",\n published: \"var(--green)\", failed: \"var(--red)\",\n};\n\nexport default function Posts() {\n const [posts, setPosts] = useState([]);\n const [accounts, setAccounts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [filterStatus, setFilterStatus] = useState(\"\");\n const [form, setForm] = useState({\n account_id: \"\", platform: \"facebook\", content: \"\",\n media_urls: \"\", scheduled_at: \"\",\n });\n const { toast } = useToast();\n\n const load = async () => {\n const [p, a] = await Promise.all([api.listPosts(), api.listAccounts()]);\n setPosts(p); setAccounts(a);\n setLoading(false);\n };\n useEffect(() => { load(); }, []);\n\n const openCreate = () => {\n setForm({ account_id: accounts[0]?.id || \"\", platform: accounts[0]?.platform || \"facebook\", content: \"\", media_urls: \"\", scheduled_at: \"\" });\n setShowModal(true);\n };\n\n const onAccountChange = (id: string) => {\n const acc = accounts.find(a => a.id === id);\n setForm(f => ({ ...f, account_id: id, platform: acc?.platform || \"facebook\" }));\n };\n\n const save = async () => {\n if (!form.account_id || !form.content.trim()) {\n toast(\"Account and content are required\", \"error\"); return;\n }\n try {\n const mediaUrls = form.media_urls.split(\"\\n\").map(s => s.trim()).filter(Boolean);\n await api.createPost({\n account_id: form.account_id,\n platform: form.platform,\n content: form.content,\n media_urls: mediaUrls,\n scheduled_at: form.scheduled_at || undefined,\n });\n toast(\"Post created\", \"success\");\n setShowModal(false); load();\n } catch (e: any) { toast(String(e), \"error\"); }\n };\n\n const del = async (id: string) => {\n if (!confirm(\"Delete this post?\")) return;\n await api.deletePost(id);\n toast(\"Post deleted\", \"success\"); load();\n };\n\n const getAccount = (id: string) => accounts.find(a => a.id === id);\n const filtered = posts.filter(p => !filterStatus || p.status === filterStatus);\n\n return (\n

\n Posts ({filtered.length})\n

\n \n \n

\n\n

\n {loading ?

\n : filtered.length === 0 ? (\n

📝

No posts yet

Create posts to track your social media content.

\n \n

\n ) : (\n

\n {filtered.map(p => {\n const acc = getAccount(p.account_id);\n return (\n

\n {platformIcon(p.platform)}\n

\n {acc && (\n @{acc.username}\n )}\n \n ● {p.status}\n \n {p.scheduled_at && (\n \n 🕐 {new Date(p.scheduled_at).toLocaleString()}\n \n )}\n \n {formatRelative(p.created_at)}\n \n

\n {p.content}\n

\n {p.post_url && (\n \n 🔗 View post\n \n )}\n

\n \n

\n );\n })}\n

\n )}\n

\n\n {showModal && (\n setShowModal(false)}\n footer={\n <>\n \n \n \n }\n >\n

\n Account *\n \n

\n Content *\n setForm(f => ({ ...f, content: e.target.value }))}\n placeholder=\"Write your post content…\"\n style={{ minHeight: 120 }}\n />\n

\n {form.content.length} chars\n

\n Media URLs (one per line)\n setForm(f => ({ ...f, media_urls: e.target.value }))}\n placeholder=\"https://example.com/image.jpg\"\n style={{ minHeight: 60 }}\n />\n

\n Schedule (optional)\n setForm(f => ({ ...f, scheduled_at: e.target.value }))} />\n

\n \n )}\n

\n );\n}\n",[],[165,413,431],"cd07e858-3157-11f1-93b2-42dde27851f2","Metrics.tsx","cd07e916-3157-11f1-93b2-42dde27851f2",35,["D",1775438859688],"import React, { useEffect, useState } from \"react\";\nimport { api, Metric, Account } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\nimport Modal from \"../components/Modal\";\nimport { platformIcon, today, formatDate } from \"../lib/utils\";\nimport {\n LineChart, Line, XAxis, YAxis, CartesianGrid,\n Tooltip, Legend, ResponsiveContainer, BarChart, Bar\n} from \"recharts\";\n\nconst METRIC_FIELDS = [\n { key: \"new_posts\", label: \"New Posts\", color: \"#6366f1\" },\n { key: \"new_likes\", label: \"Likes\", color: \"#ef4444\" },\n { key: \"new_reacts\", label: \"Reacts\", color: \"#f59e0b\" },\n { key: \"new_comments\", label: \"Comments\", color: \"#3b82f6\" },\n { key: \"new_friends\", label: \"New Friends\", color: \"#22c55e\" },\n { key: \"new_followers\", label: \"Followers\", color: \"#8b5cf6\" },\n { key: \"profile_views\", label: \"Profile Views\", color: \"#14b8a6\" },\n { key: \"reach\", label: \"Reach\", color: \"#f97316\" },\n { key: \"comments_made\", label: \"Comments Made\", color: \"#06b6d4\" },\n { key: \"friend_requests_sent\", label: \"FR Sent\", color: \"#84cc16\" },\n { key: \"messages_sent\", label: \"Messages Sent\", color: \"#a855f7\" },\n] as const;\n\nexport default function Metrics() {\n const [accounts, setAccounts] = useState([]);\n const [metrics, setMetrics] = useState([]);\n const [history, setHistory] = useState([]);\n const [selectedAccount, setSelectedAccount] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [chartField, setChartField] = useState(\"new_posts\");\n const [form, setForm] = useState & { account_id: string; date: string; platform: string }>({\n account_id: \"\", date: today(), platform: \"facebook\",\n new_posts: 0, new_likes: 0, new_reacts: 0, new_comments: 0,\n new_friends: 0, new_followers: 0, profile_views: 0, reach: 0,\n comments_made: 0, friend_requests_sent: 0, messages_sent: 0, notes: \"\",\n });\n const { toast } = useToast();\n\n const load = async () => {\n const [m, a] = await Promise.all([api.getMetrics(), api.listAccounts()]);\n setMetrics(m); setAccounts(a);\n if (a.length > 0 && !selectedAccount) setSelectedAccount(a[0].id);\n setLoading(false);\n };\n\n useEffect(() => { load(); }, []);\n\n useEffect(() => {\n if (!selectedAccount) return;\n api.getMetricHistory(selectedAccount, 30).then(setHistory);\n }, [selectedAccount]);\n\n const openCreate = () => {\n const acc = accounts.find(a => a.id === selectedAccount) || accounts[0];\n setForm({\n account_id: acc?.id || \"\", date: today(), platform: acc?.platform || \"facebook\",\n new_posts: 0, new_likes: 0, new_reacts: 0, new_comments: 0,\n new_friends: 0, new_followers: 0, profile_views: 0, reach: 0,\n comments_made: 0, friend_requests_sent: 0, messages_sent: 0, notes: \"\",\n });\n setShowModal(true);\n };\n\n const onAccountChange = (id: string) => {\n const acc = accounts.find(a => a.id === id);\n setForm(f => ({ ...f, account_id: id, platform: acc?.platform || \"facebook\" }));\n };\n\n const save = async () => {\n if (!form.account_id) { toast(\"Select an account\", \"error\"); return; }\n try {\n await api.recordMetric(form as any);\n toast(\"Metrics recorded\", \"success\");\n setShowModal(false); load();\n } catch (e: any) { toast(String(e), \"error\"); }\n };\n\n const acc = accounts.find(a => a.id === selectedAccount);\n const todayMetrics = metrics.filter(m => m.date === today() && m.account_id === selectedAccount);\n const todaySummary = METRIC_FIELDS.reduce((acc, f) => {\n acc[f.key] = todayMetrics.reduce((s, m) => s + (m[f.key] as number || 0), 0);\n return acc;\n }, {} as Record);\n\n const chartData = history.map(m => ({\n date: m.date.slice(5), // MM-DD\n [chartField]: m[chartField] as number,\n }));\n\n return (\n

\n Metrics & Analytics\n

\n \n \n

\n\n

\n {loading ?

: (\n <>\n {/* Today's stats */}\n

\n Today — {acc ? `@${acc.username}` : \"Select account\"}\n

\n {METRIC_FIELDS.slice(0, 8).map(f => (\n

\n {(todaySummary[f.key] || 0).toLocaleString()}\n

{f.label}

\n ))}\n

\n\n {/* Chart */}\n

30-Day History

\n \n

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

\n No historical data yet. Record daily metrics to see trends.\n

\n ) : (\n \n \n \n \n \n \n f.key === chartField)?.color || \"#6366f1\"}\n strokeWidth={2} dot={false} activeDot={{ r: 4 }}\n />\n \n \n )}\n

\n\n {/* All-time table */}\n

All Metrics Log

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {metrics.slice(0, 50).map(m => {\n const a = accounts.find(a => a.id === m.account_id);\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n })}\n \n

Date	Account	Posts	Likes	Comments	Friends	Followers	Reach	FR Sent
{m.date}	\n {a && (\n {platformIcon(a.platform)} @{a.username}\n )}\n	{m.new_posts}	{m.new_likes}	{m.new_comments}	{m.new_friends}	{m.new_followers}	{m.reach}	{m.friend_requests_sent}

\n \n )}\n

\n\n {showModal && (\n setShowModal(false)}\n width={580}\n footer={\n <>\n \n \n \n }\n >\n

\n Account *\n \n

\n Date *\n setForm(f => ({ ...f, date: e.target.value }))} />\n

\n Engagement (received)\n

\n {METRIC_FIELDS.slice(0, 8).map(f => (\n

\n {f.label}\n setForm(fp => ({ ...fp, [f.key]: parseInt(e.target.value) || 0 }))}\n />\n

\n ))}\n

\n Activity (done by you)\n

\n {METRIC_FIELDS.slice(8).map(f => (\n

\n {f.label}\n setForm(fp => ({ ...fp, [f.key]: parseInt(e.target.value) || 0 }))}\n />\n

\n ))}\n

\n Notes\n setForm(f => ({ ...f, notes: e.target.value }))} placeholder=\"Optional notes for this day\" />\n

\n \n )}\n

\n );\n}\n",[],[165,413,439],"590ff684-3157-11f1-8203-42dde27851f2","Dashboard.tsx","590ff896-3157-11f1-8203-42dde27851f2",29,["D",1775438665121],"import React, { useEffect, useState } from \"react\";\nimport { api, DashboardStats, Activity } from \"../lib/invoke\";\nimport { activityColor, activityIcon, formatRelative, platformIcon, platformLabel } from \"../lib/utils\";\nimport {\n AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid\n} from \"recharts\";\n\nconst COLORS = { facebook: \"#4a7cff\", google: \"#f59e0b\", tiktok: \"#e040fb\" };\n\nexport default function Dashboard() {\n const [stats, setStats] = useState(null);\n const [activities, setActivities] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n Promise.all([\n api.getDashboardStats(),\n api.listActivities(undefined, undefined, 15),\n ]).then(([s, a]) => {\n setStats(s);\n setActivities(a);\n }).finally(() => setLoading(false));\n }, []);\n\n if (loading) return (\n

\n );\n\n const statCards = [\n { label: \"Total Accounts\", value: stats?.total_accounts ?? 0, icon: \"👤\", color: \"var(--primary)\" },\n { label: \"Active Accounts\", value: stats?.active_accounts ?? 0, icon: \"✅\", color: \"var(--green)\" },\n { label: \"Posts Today\", value: stats?.total_posts_today ?? 0, icon: \"📝\", color: \"var(--blue)\" },\n { label: \"Activities Today\", value: stats?.total_activities_today ?? 0, icon: \"⚡\", color: \"var(--accent)\" },\n { label: \"New Friends Today\", value: stats?.total_new_friends_today ?? 0, icon: \"👋\", color: \"var(--green)\" },\n { label: \"New Followers Today\", value: stats?.total_new_followers_today ?? 0, icon: \"➕\", color: \"var(--primary)\" },\n { label: \"Comments Made\", value: stats?.total_comments_today ?? 0, icon: \"💬\", color: \"var(--blue)\" },\n { label: \"Likes Today\", value: stats?.total_likes_today ?? 0, icon: \"❤️\", color: \"var(--red)\" },\n ];\n\n return (\n

\n Dashboard\n \n {new Date().toLocaleDateString(\"en-US\", { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" })}\n \n

\n\n

\n {/* Stat grid */}\n

\n {statCards.map(s => (\n

\n {s.icon}\n {s.value}\n

{s.label}

\n ))}\n

\n\n

\n {/* Platform breakdown */}\n

Platform Breakdown

\n {stats?.platform_breakdown.length === 0 && (\n

No accounts yet.

\n )}\n {stats?.platform_breakdown.map(p => (\n

\n {platformIcon(p.platform)}\n

\n {platformLabel(p.platform)}\n {p.count} accounts\n

\n 📝 {p.posts_today} posts\n ❤️ {p.likes_today} likes\n

\n ))}\n

\n\n {/* Team breakdown */}\n

Team Performance

\n {stats?.team_breakdown.length === 0 && (\n

No teams yet.

\n )}\n {stats?.team_breakdown.map(t => (\n

{t.team_name}

\n {t.account_count} accounts\n

{t.posts_today}

posts today

\n ))}\n

\n\n {/* Recent activity feed */}\n

Recent Activity

\n {activities.length === 0 && (\n

No activities logged yet.

\n )}\n {activities.map(a => (\n

\n {activityIcon(a.type)}\n \n {a.type.replace(\"_\", \" \")}\n \n {a.target_name && (\n → {a.target_name}\n )}\n

\n {a.content && (\n

\n \"{a.content.slice(0, 80)}{a.content.length > 80 ? \"…\" : \"\"}\"\n

\n )}\n

\n {formatRelative(a.done_at)}\n

\n ))}\n

\n );\n}\n",[],[165,413,447],"b38704c2-3157-11f1-93b2-42dde27851f2","Activities.tsx","b3870576-3157-11f1-93b2-42dde27851f2",34,["D",1775438816898],"import React, { useEffect, useState } from \"react\";\nimport { api, Activity, Account } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\nimport Modal from \"../components/Modal\";\nimport { activityIcon, activityColor, formatRelative, platformIcon } from \"../lib/utils\";\n\nconst TYPES = [\"comment\", \"friend_request\", \"like\", \"share\", \"follow\", \"message\", \"custom\"];\n\nexport default function Activities() {\n const [activities, setActivities] = useState([]);\n const [accounts, setAccounts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [filterType, setFilterType] = useState(\"\");\n const [filterAccount, setFilterAccount] = useState(\"\");\n const [form, setForm] = useState({\n account_id: \"\", activity_type: \"comment\",\n target_url: \"\", target_name: \"\", content: \"\", status: \"done\",\n });\n const { toast } = useToast();\n\n const load = async () => {\n const [a, acc] = await Promise.all([api.listActivities(undefined, undefined, 200), api.listAccounts()]);\n setActivities(a); setAccounts(acc);\n setLoading(false);\n };\n useEffect(() => { load(); }, []);\n\n const openCreate = () => {\n setForm({ account_id: accounts[0]?.id || \"\", activity_type: \"comment\", target_url: \"\", target_name: \"\", content: \"\", status: \"done\" });\n setShowModal(true);\n };\n\n const save = async () => {\n if (!form.account_id) { toast(\"Select an account\", \"error\"); return; }\n try {\n await api.logActivity(form);\n toast(\"Activity logged\", \"success\");\n setShowModal(false); load();\n } catch (e: any) { toast(String(e), \"error\"); }\n };\n\n const getAccount = (id: string) => accounts.find(a => a.id === id);\n\n const filtered = activities.filter(a =>\n (!filterType || a.type === filterType) &&\n (!filterAccount || a.account_id === filterAccount)\n );\n\n // Activity counts by type\n const typeCounts = TYPES.reduce((acc, t) => {\n acc[t] = activities.filter(a => a.type === t).length;\n return acc;\n }, {} as Record);\n\n return (\n

\n Activities ({filtered.length})\n

\n \n \n \n

\n\n

\n {/* Summary pills */}\n

\n {TYPES.map(t => (\n setFilterType(f => f === t ? \"\" : t)}\n style={{\n cursor: \"pointer\",\n background: filterType === t ? activityColor(t) + \"22\" : undefined,\n borderColor: filterType === t ? activityColor(t) : undefined,\n color: filterType === t ? activityColor(t) : undefined,\n border: \"1px solid\",\n }}\n >\n {activityIcon(t)} {t.replace(\"_\", \" \")} {typeCounts[t] || 0}\n \n ))}\n

\n\n {loading ?

\n : filtered.length === 0 ? (\n

⚡

No activities logged

Log comments, friend requests, likes, and more.

\n \n

\n ) : (\n

\n {filtered.map(a => {\n const acc = getAccount(a.account_id);\n return (\n

\n {activityIcon(a.type)}\n

\n \n {a.type.replace(\"_\", \" \")}\n \n {acc && (\n \n {platformIcon(acc.platform)} @{acc.username}\n \n )}\n {a.target_name && (\n → {a.target_name}\n )}\n \n {formatRelative(a.done_at)}\n \n

\n {a.content && (\n

\n \"{a.content.slice(0, 120)}{a.content.length > 120 ? \"…\" : \"\"}\"\n

\n )}\n {a.target_url && (\n

\n {a.target_url.slice(0, 60)}…\n

\n )}\n

\n \n {a.status}\n \n

\n );\n })}\n

\n )}\n

\n\n {showModal && (\n setShowModal(false)}\n footer={\n <>\n \n \n \n }\n >\n

\n Account *\n \n

\n Activity Type *\n \n

\n Target Name\n setForm(f => ({ ...f, target_name: e.target.value }))} placeholder=\"Person's name / post title\" />\n

\n Target URL\n setForm(f => ({ ...f, target_url: e.target.value }))} placeholder=\"https://…\" />\n

\n Content / Comment\n

setForm(f => ({ ...f, content: e.target.value }))} placeholder=\"What did you comment / message?\" style={{ minHeight: 80 }} />\n          </div>\n          <div className=\"field\">\n            <label>Status</label>\n            <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value }))}>\n              {[\"done\", \"pending\", \"failed\"].map(s => <option key={s} value={s}>{s}</option>)}\n            </select>\n          </div>\n        </Modal>\n      )}\n    </div>\n  );\n}\n",[],[165,413,455],"81fdf79e-3157-11f1-b5f1-42dde27851f2","Accounts.tsx","81fdf834-3157-11f1-b5f1-42dde27851f2",31,["D",1775438733791],"import React, { useEffect, useState } from \"react\";\nimport { api, Account, Team, GologinProfile } from \"../lib/invoke\";\nimport { useToast } from \"../lib/toast\";\nimport Modal from \"../components/Modal\";\nimport { platformIcon, platformLabel, initials, formatRelative } from \"../lib/utils\";\n\nconst STATUS_OPTIONS = [\"active\", \"inactive\", \"banned\", \"warming\"] as const;\nconst PLATFORMS = [\"facebook\", \"google\", \"tiktok\"] as const;\n\nexport default function Accounts() {\n  const [accounts, setAccounts] = useState<Account[]>([]);\n  const [teams, setTeams] = useState<Team[]>([]);\n  const [profiles, setProfiles] = useState<GologinProfile[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [filterTeam, setFilterTeam] = useState(\"\");\n  const [filterPlatform, setFilterPlatform] = useState(\"\");\n  const [showModal, setShowModal] = useState(false);\n  const [editing, setEditing] = useState<Account | null>(null);\n  const [launching, setLaunching] = useState<string | null>(null);\n  const [form, setForm] = useState({\n    team_id: \"\", platform: \"facebook\" as typeof PLATFORMS[number],\n    username: \"\", display_name: \"\", avatar_url: \"\",\n    gologin_profile_id: \"\", proxy: \"\", notes: \"\", status: \"active\" as typeof STATUS_OPTIONS[number],\n  });\n  const { toast } = useToast();\n\n  const load = async () => {\n    const [a, t] = await Promise.all([api.listAccounts(), api.listTeams()]);\n    setAccounts(a); setTeams(t);\n    // Try load GL profiles (may fail if token not set)\n    try { setProfiles(await api.listGologinProfiles()); } catch (_) {}\n    setLoading(false);\n  };\n  useEffect(() => { load(); }, []);\n\n  const openCreate = () => {\n    setEditing(null);\n    setForm({ team_id: teams[0]?.id || \"\", platform: \"facebook\", username: \"\", display_name: \"\", avatar_url: \"\", gologin_profile_id: \"\", proxy: \"\", notes: \"\", status: \"active\" });\n    setShowModal(true);\n  };\n  const openEdit = (a: Account) => {\n    setEditing(a);\n    setForm({ team_id: a.team_id, platform: a.platform as any, username: a.username, display_name: a.display_name, avatar_url: a.avatar_url, gologin_profile_id: a.gologin_profile_id, proxy: a.proxy, notes: a.notes, status: a.status as any });\n    setShowModal(true);\n  };\n\n  const save = async () => {\n    if (!form.team_id || !form.username) { toast(\"Team and username are required\", \"error\"); return; }\n    try {\n      if (editing) {\n        await api.updateAccount(editing.id, { status: form.status, gologin_profile_id: form.gologin_profile_id, proxy: form.proxy, notes: form.notes, display_name: form.display_name });\n        toast(\"Account updated\", \"success\");\n      } else {\n        await api.addAccount(form);\n        toast(\"Account added\", \"success\");\n      }\n      setShowModal(false); load();\n    } catch (e: any) { toast(String(e), \"error\"); }\n  };\n\n  const del = async (a: Account) => {\n    if (!confirm(`Delete account @${a.username}?`)) return;\n    await api.deleteAccount(a.id);\n    toast(\"Account deleted\", \"success\"); load();\n  };\n\n  const launch = async (a: Account) => {\n    if (!a.gologin_profile_id) { toast(\"No GoLogin profile linked to this account\", \"error\"); return; }\n    setLaunching(a.id);\n    try {\n      await api.launchProfile(a.gologin_profile_id, a.id);\n      toast(`Browser launched for @${a.username}`, \"success\");\n    } catch (e: any) { toast(String(e), \"error\"); }\n    finally { setLaunching(null); }\n  };\n\n  const filtered = accounts.filter(a =>\n    (!filterTeam || a.team_id === filterTeam) &&\n    (!filterPlatform || a.platform === filterPlatform)\n  );\n\n  const teamName = (id: string) => teams.find(t => t.id === id)?.name || \"—\";\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", height: \"100%\", overflow: \"hidden\" }}>\n      <div className=\"topbar\">\n        <span className=\"topbar-title\">Accounts ({filtered.length})</span>\n        <div className=\"topbar-actions\">\n          <select value={filterTeam} onChange={e => setFilterTeam(e.target.value)} style={{ width: 140 }}>\n            <option value=\"\">All Teams</option>\n            {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}\n          </select>\n          <select value={filterPlatform} onChange={e => setFilterPlatform(e.target.value)} style={{ width: 120 }}>\n            <option value=\"\">All Platforms</option>\n            {PLATFORMS.map(p => <option key={p} value={p}>{platformLabel(p)}</option>)}\n          </select>\n          <button className=\"btn btn-primary\" onClick={openCreate}>＋ Add Account</button>\n        </div>\n      </div>\n\n      <div className=\"content\">\n        {loading ? <div style={{ textAlign: \"center\", paddingTop: 60 }}><div className=\"spinner\" /></div>\n          : filtered.length === 0 ? (\n            <div className=\"empty\">\n              <div className=\"empty-icon\">👤</div>\n              <div className=\"empty-title\">No accounts yet</div>\n              <div className=\"empty-sub\">Add your Facebook, Google, or TikTok accounts.</div>\n              <button className=\"btn btn-primary\" style={{ marginTop: 20 }} onClick={openCreate}>＋ Add Account</button>\n            </div>\n          ) : (\n            <div className=\"grid-auto\">\n              {filtered.map(a => {\n                const team = teams.find(t => t.id === a.team_id);\n                return (\n                  <div className=\"account-card\" key={a.id}>\n                    <div className=\"account-card-header\">\n                      <div className=\"avatar\" style={{ background: `linear-gradient(135deg, ${team?.color || \"#6366f1\"}, #8b5cf6)` }}>\n                        {initials(a.display_name || a.username)}\n                      </div>\n                      <div className=\"account-card-info\">\n                        <div className=\"account-card-name\">{a.display_name || a.username}</div>\n                        <div className=\"account-card-user\">@{a.username}</div>\n                      </div>\n                    </div>\n                    <div className=\"account-card-meta\">\n                      <span className={`badge badge-${a.platform === \"facebook\" ? \"fb\" : a.platform === \"google\" ? \"google\" : \"tiktok\"}`}>\n                        {platformIcon(a.platform)} {platformLabel(a.platform)}\n                      </span>\n                      <span className={`badge badge-${a.status}`}>{a.status}</span>\n                    </div>\n                    {team && (\n                      <div style={{ fontSize: 11, color: \"var(--text3)\", marginBottom: 8, display: \"flex\", alignItems: \"center\", gap: 4 }}>\n                        <span style={{ width: 8, height: 8, borderRadius: \"50%\", background: team.color, display: \"inline-block\" }} />\n                        {team.name}\n                      </div>\n                    )}\n                    {a.last_active_at && (\n                      <div style={{ fontSize: 11, color: \"var(--text3)\", marginBottom: 8 }}>\n                        Last active: {formatRelative(a.last_active_at)}\n                      </div>\n                    )}\n                    {a.gologin_profile_id ? (\n                      <div style={{ fontSize: 11, color: \"var(--primary)\", marginBottom: 10 }}>\n                        🌐 {profiles.find(p => p.id === a.gologin_profile_id)?.name || a.gologin_profile_id.slice(0, 12) + \"…\"}\n                      </div>\n                    ) : (\n                      <div style={{ fontSize: 11, color: \"var(--text3)\", marginBottom: 10 }}>No GL profile linked</div>\n                    )}\n                    <div className=\"account-card-actions\">\n                      <button\n                        className=\"btn btn-primary btn-sm\"\n                        onClick={() => launch(a)}\n                        disabled={launching === a.id}\n                        style={{ flex: 1 }}\n                      >\n                        {launching === a.id ? <span className=\"spinner\" style={{ width: 14, height: 14 }} /> : \"🚀 Launch\"}\n                      </button>\n                      <button className=\"btn btn-ghost btn-sm\" onClick={() => openEdit(a)}>✏️</button>\n                      <button className=\"btn btn-danger btn-sm\" onClick={() => del(a)}>🗑</button>\n                    </div>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n      </div>\n\n      {showModal && (\n        <Modal\n          title={editing ? `Edit @${editing.username}` : \"Add Account\"}\n          onClose={() => setShowModal(false)}\n          footer={\n            <>\n              <button className=\"btn btn-ghost\" onClick={() => setShowModal(false)}>Cancel</button>\n              <button className=\"btn btn-primary\" onClick={save}>{editing ? \"Save\" : \"Add Account\"}</button>\n            </>\n          }\n        >\n          {!editing && (\n            <>\n              <div className=\"field\">\n                <label>Platform *</label>\n                <select value={form.platform} onChange={e => setForm(f => ({ ...f, platform: e.target.value as any }))}>\n                  {PLATFORMS.map(p => <option key={p} value={p}>{platformLabel(p)}</option>)}\n                </select>\n              </div>\n              <div className=\"field\">\n                <label>Username *</label>\n                <input value={form.username} onChange={e => setForm(f => ({ ...f, username: e.target.value }))} placeholder=\"@username or email\" />\n              </div>\n            </>\n          )}\n          <div className=\"field\">\n            <label>Display Name</label>\n            <input value={form.display_name} onChange={e => setForm(f => ({ ...f, display_name: e.target.value }))} placeholder=\"Full name\" />\n          </div>\n          <div className=\"field\">\n            <label>Team *</label>\n            <select value={form.team_id} onChange={e => setForm(f => ({ ...f, team_id: e.target.value }))}>\n              <option value=\"\">Select team…</option>\n              {teams.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}\n            </select>\n          </div>\n          <div className=\"field\">\n            <label>GoLogin Profile</label>\n            <select value={form.gologin_profile_id} onChange={e => setForm(f => ({ ...f, gologin_profile_id: e.target.value }))}>\n              <option value=\"\">None</option>\n              {profiles.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}\n            </select>\n          </div>\n          <div className=\"field\">\n            <label>Status</label>\n            <select value={form.status} onChange={e => setForm(f => ({ ...f, status: e.target.value as any }))}>\n              {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}\n            </select>\n          </div>\n          <div className=\"field\">\n            <label>Proxy (optional)</label>\n            <input value={form.proxy} onChange={e => setForm(f => ({ ...f, proxy: e.target.value }))} placeholder=\"http://user:pass@host:port\" />\n          </div>\n          <div className=\"field\">\n            <label>Notes</label>\n            <textarea value={form.notes} onChange={e => setForm(f => ({ ...f, notes: e.target.value }))} placeholder=\"Internal notes…\" style={{ minHeight: 60 }} />\n          </div>\n        </Modal>\n      )}\n    </div>\n  );\n}\n",[],[165,413,463],"59102bae-3157-11f1-8203-42dde27851f2",["D",1775438665121],[189,190,191,192,193,194,195,196],[165,413],"2250e4fa-3157-11f1-8918-42dde27851f2","utils.ts","2250e5cc-3157-11f1-8918-42dde27851f2","7f691c6a-dca9-4db9-93ba-690978bedac4",25,["D",1775438573275],"export function platformIcon(platform: string) {\n  switch (platform) {\n    case \"facebook\": return \"🟦\";\n    case \"google\":   return \"🔴\";\n    case \"tiktok\":   return \"🖤\";\n    default:         return \"🌐\";\n  }\n}\n\nexport function platformLabel(platform: string) {\n  switch (platform) {\n    case \"facebook\": return \"Facebook\";\n    case \"google\":   return \"Google\";\n    case \"tiktok\":   return \"TikTok\";\n    default:         return platform;\n  }\n}\n\nexport function statusColor(status: string) {\n  switch (status) {\n    case \"active\":   return \"var(--green)\";\n    case \"banned\":   return \"var(--red)\";\n    case \"warming\":  return \"var(--yellow)\";\n    default:         return \"var(--text3)\";\n  }\n}\n\nexport function today() {\n  return new Date().toISOString().slice(0, 10);\n}\n\nexport function formatDate(iso: string) {\n  return new Date(iso).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\nexport function formatRelative(iso: string) {\n  const diff = Date.now() - new Date(iso).getTime();\n  const m = Math.floor(diff / 60000);\n  if (m < 1) return \"just now\";\n  if (m < 60) return `${m}m ago`;\n  const h = Math.floor(m / 60);\n  if (h < 24) return `${h}h ago`;\n  return `${Math.floor(h / 24)}d ago`;\n}\n\nexport function initials(name: string) {\n  return name.split(\" \").slice(0, 2).map(w => w[0]).join(\"\").toUpperCase() || \"?\";\n}\n\nexport function activityIcon(type: string) {\n  switch (type) {\n    case \"comment\": return \"💬\";\n    case \"friend_request\": return \"👋\";\n    case \"like\": return \"❤️\";\n    case \"share\": return \"🔁\";\n    case \"follow\": return \"➕\";\n    case \"message\": return \"✉️\";\n    default: return \"⚡\";\n  }\n}\n\nexport function activityColor(type: string) {\n  switch (type) {\n    case \"comment\": return \"var(--blue)\";\n    case \"friend_request\": return \"var(--green)\";\n    case \"like\": return \"var(--red)\";\n    case \"share\": return \"var(--primary)\";\n    case \"follow\": return \"var(--accent)\";\n    default: return \"var(--text3)\";\n  }\n}\n",[],[165,483,475],"lib","1c0ddfee-3157-11f1-a470-42dde27851f2","toast.tsx","1c0de0a2-3157-11f1-a470-42dde27851f2",24,["D",1775438562769],"import React, { createContext, useContext, useState, useCallback, useId } from \"react\";\n\ninterface Toast { id: string; message: string; type: \"success\" | \"error\" | \"info\"; }\ninterface ToastCtx { toast: (msg: string, type?: Toast[\"type\"]) => void; }\n\nconst Ctx = createContext<ToastCtx>({ toast: () => {} });\nexport const useToast = () => useContext(Ctx);\n\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  const [toasts, setToasts] = useState<Toast[]>([]);\n  const toast = useCallback((message: string, type: Toast[\"type\"] = \"info\") => {\n    const id = Math.random().toString(36).slice(2);\n    setToasts(t => [...t, { id, message, type }]);\n    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3000);\n  }, []);\n\n  return (\n    <Ctx.Provider value={{ toast }}>\n      {children}\n      <div className=\"toast-container\">\n        {toasts.map(t => (\n          <div key={t.id} className={`toast toast-${t.type}`}>\n            <span>{t.type === \"success\" ? \"✓\" : t.type === \"error\" ? \"✕\" : \"ℹ\"}</span>\n            {t.message}\n          </div>\n        ))}\n      </div>\n    </Ctx.Provider>\n  );\n}\n",[],[165,483,485],"178f6848-3157-11f1-8918-42dde27851f2","invoke.ts","178f6906-3157-11f1-8918-42dde27851f2",23,["D",1775438555223],"import { invoke as tauriInvoke } from \"@tauri-apps/api/core\";\n\n// Type-safe wrapper around Tauri invoke\nexport async function invoke<T>(cmd: string, args?: Record<string, unknown>): Promise<T> {\n  return tauriInvoke<T>(cmd, args);\n}\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface Team {\n  id: string;\n  name: string;\n  description: string;\n  color: string;\n  created_at: string;\n}\n\nexport interface Account {\n  id: string;\n  team_id: string;\n  platform: \"facebook\" | \"google\" | \"tiktok\";\n  username: string;\n  display_name: string;\n  avatar_url: string;\n  gologin_profile_id: string;\n  proxy: string;\n  notes: string;\n  status: \"active\" | \"inactive\" | \"banned\" | \"warming\";\n  last_active_at: string | null;\n  created_at: string;\n}\n\nexport interface GologinProfile {\n  id: string;\n  name: string;\n  os: string;\n  notes: string;\n  account_id: string | null;\n}\n\nexport interface Post {\n  id: string;\n  account_id: string;\n  platform: string;\n  content: string;\n  media_urls: string; // JSON string\n  status: \"draft\" | \"scheduled\" | \"published\" | \"failed\";\n  scheduled_at: string | null;\n  published_at: string | null;\n  post_url: string;\n  created_at: string;\n}\n\nexport interface Activity {\n  id: string;\n  account_id: string;\n  type: string;\n  target_url: string;\n  target_name: string;\n  content: string;\n  status: string;\n  done_at: string;\n}\n\nexport interface Metric {\n  id: string;\n  account_id: string;\n  date: string;\n  platform: string;\n  new_posts: number;\n  new_likes: number;\n  new_reacts: number;\n  new_comments: number;\n  new_friends: number;\n  new_followers: number;\n  profile_views: number;\n  reach: number;\n  comments_made: number;\n  friend_requests_sent: number;\n  messages_sent: number;\n  notes: string;\n  created_at: string;\n}\n\nexport interface DashboardStats {\n  total_accounts: number;\n  active_accounts: number;\n  total_posts_today: number;\n  total_activities_today: number;\n  total_new_friends_today: number;\n  total_new_followers_today: number;\n  total_comments_today: number;\n  total_likes_today: number;\n  platform_breakdown: { platform: string; count: number; posts_today: number; likes_today: number }[];\n  team_breakdown: { team_id: string; team_name: string; account_count: number; posts_today: number }[];\n}\n\n// ── API calls ──────────────────────────────────────────────────────────────\n\nexport const api = {\n  // Settings\n  setGologinToken: (token: string) => invoke(\"set_gologin_token\", { token }),\n  getGologinToken: () => invoke<string | null>(\"get_gologin_token\"),\n\n  // Teams\n  createTeam: (name: string, description?: string, color?: string) =>\n    invoke<Team>(\"create_team\", { name, description, color }),\n  listTeams: () => invoke<Team[]>(\"list_teams\"),\n  updateTeam: (id: string, name?: string, description?: string, color?: string) =>\n    invoke(\"update_team\", { id, name, description, color }),\n  deleteTeam: (id: string) => invoke(\"delete_team\", { id }),\n\n  // Accounts\n  addAccount: (args: Partial<Account> & { team_id: string; platform: string; username: string }) =>\n    invoke<Account>(\"add_account\", args),\n  listAccounts: (team_id?: string, platform?: string) =>\n    invoke<Account[]>(\"list_accounts\", { team_id, platform }),\n  getAccount: (id: string) => invoke<Account>(\"get_account\", { id }),\n  updateAccount: (id: string, args: Partial<Account>) =>\n    invoke(\"update_account\", { id, ...args }),\n  deleteAccount: (id: string) => invoke(\"delete_account\", { id }),\n\n  // GoLogin Profiles\n  listGologinProfiles: () => invoke<GologinProfile[]>(\"list_gologin_profiles\"),\n  launchProfile: (profile_id: string, account_id?: string) =>\n    invoke<string>(\"launch_profile\", { profile_id, account_id }),\n  stopProfile: (profile_id: string) => invoke(\"stop_profile\", { profile_id }),\n  syncProfiles: () => invoke<number>(\"sync_profiles\"),\n\n  // Posts\n  createPost: (args: { account_id: string; platform: string; content: string; media_urls?: string[]; scheduled_at?: string }) =>\n    invoke<Post>(\"create_post\", args),\n  listPosts: (account_id?: string, platform?: string, status?: string) =>\n    invoke<Post[]>(\"list_posts\", { account_id, platform, status }),\n  deletePost: (id: string) => invoke(\"delete_post\", { id }),\n\n  // Activities\n  logActivity: (args: { account_id: string; activity_type: string; target_url?: string; target_name?: string; content?: string; status?: string }) =>\n    invoke<Activity>(\"log_activity\", args),\n  listActivities: (account_id?: string, activity_type?: string, limit?: number) =>\n    invoke<Activity[]>(\"list_activities\", { account_id, activity_type, limit }),\n\n  // Metrics\n  recordMetric: (args: Partial<Metric> & { account_id: string; date: string; platform: string }) =>\n    invoke<Metric>(\"record_metric\", args),\n  getMetrics: (account_id?: string, date_from?: string, date_to?: string) =>\n    invoke<Metric[]>(\"get_metrics\", { account_id, date_from, date_to }),\n  getMetricHistory: (account_id: string, days?: number) =>\n    invoke<Metric[]>(\"get_metric_history\", { account_id, days }),\n  getDashboardStats: () => invoke<DashboardStats>(\"get_dashboard_stats\"),\n};\n",[],[165,483,493],"178f8f9e-3157-11f1-8918-42dde27851f2",["D",1775438555223],[185,186,187],[165,483],"440e1d74-3157-11f1-8c67-42dde27851f2","Sidebar.tsx","440e1e14-3157-11f1-8c67-42dde27851f2","847f7292-ef84-4636-9710-c41b5d7fd275",27,["D",1775438629803],"import React from \"react\";\nimport type { Page } from \"../App\";\n\nconst NAV: { id: Page; label: string; icon: string; section?: string }[] = [\n  { id: \"dashboard\",  label: \"Dashboard\",   icon: \"📊\", section: \"Overview\" },\n  { id: \"accounts\",   label: \"Accounts\",    icon: \"👤\" },\n  { id: \"teams\",      label: \"Teams\",       icon: \"🏢\" },\n  { id: \"profiles\",   label: \"GL Profiles\", icon: \"🌐\", section: \"GoLogin\" },\n  { id: \"posts\",      label: \"Posts\",       icon: \"📝\", section: \"Actions\" },\n  { id: \"activities\", label: \"Activities\",  icon: \"⚡\" },\n  { id: \"metrics\",    label: \"Metrics\",     icon: \"📈\", section: \"Analytics\" },\n  { id: \"settings\",   label: \"Settings\",    icon: \"⚙️\", section: \"System\" },\n];\n\ninterface Props {\n  current: Page;\n  onNavigate: (p: Page) => void;\n  hasToken: boolean;\n}\n\nexport default function Sidebar({ current, onNavigate, hasToken }: Props) {\n  let lastSection = \"\";\n\n  return (\n    <aside className=\"sidebar\">\n      <div className=\"sidebar-logo\">\n        <div className=\"sidebar-logo-icon\">⚡</div>\n        <div>\n          <div className=\"sidebar-logo-text\">MMO</div>\n          <div className=\"sidebar-logo-sub\">Multi-Account Manager</div>\n        </div>\n      </div>\n\n      <nav className=\"sidebar-nav\">\n        {NAV.map(item => {\n          const showSection = item.section && item.section !== lastSection;\n          if (item.section) lastSection = item.section;\n          return (\n            <React.Fragment key={item.id}>\n              {showSection && (\n                <div className=\"nav-section\">{item.section}</div>\n              )}\n              <button\n                className={`nav-item${current === item.id ? \" active\" : \"\"}`}\n                onClick={() => onNavigate(item.id)}\n              >\n                <span style={{ fontSize: 15 }}>{item.icon}</span>\n                {item.label}\n                {item.id === \"settings\" && !hasToken && (\n                  <span style={{\n                    marginLeft: \"auto\", width: 7, height: 7,\n                    borderRadius: \"50%\", background: \"var(--red)\",\n                    display: \"inline-block\", flexShrink: 0\n                  }} />\n                )}\n              </button>\n            </React.Fragment>\n          );\n        })}\n      </nav>\n\n      <div className=\"sidebar-footer\">\n        <div style={{ fontSize: 11, color: \"var(--text3)\", lineHeight: 1.6 }}>\n          {hasToken\n            ? <span style={{ color: \"var(--green)\" }}>● GoLogin connected</span>\n            : <span style={{ color: \"var(--red)\" }}>● Token not set</span>}\n        </div>\n      </div>\n    </aside>\n  );\n}\n",[],[165,513,505],"components","480ee0b6-3157-11f1-9205-42dde27851f2","Modal.tsx","480ee174-3157-11f1-9205-42dde27851f2",28,["D",1775438636596],"import React, { useEffect } from \"react\";\n\ninterface Props {\n  title: string;\n  onClose: () => void;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  width?: number;\n}\n\nexport default function Modal({ title, onClose, children, footer, width = 520 }: Props) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onClose();\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [onClose]);\n\n  return (\n    <div className=\"modal-overlay\" onClick={e => e.target === e.currentTarget && onClose()}>\n      <div className=\"modal\" style={{ width: Math.min(width, window.innerWidth - 40) }}>\n        <div className=\"modal-header\">\n          <span className=\"modal-title\">{title}</span>\n          <button className=\"btn-icon\" onClick={onClose} style={{ fontSize: 18, lineHeight: 1 }}>✕</button>\n        </div>\n        <div className=\"modal-body\">{children}</div>\n        {footer && <div className=\"modal-footer\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n",[],[165,513,515],"440e37b4-3157-11f1-8c67-42dde27851f2",["D",1775438629803],[182,183],[165,513],["D",1775438477550],[181,184,188,197,198,199,200],[165],["D",1775438052675],{"_16":17,"_80":76},{"_16":17,"_74":-5,"_75":76,"_32":33,"_77":78,"_79":26},{"_62":63,"_20":64,"_18":65,"_66":19,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":21,"_73":17},"ctx",{"_55":-5,"_101":566,"_567":568,"_569":570,"_571":26,"_572":26,"_573":26,"_574":120,"_575":-5,"_576":-7,"_577":-7,"_578":39,"_579":26,"_580":26,"_581":-5,"_582":26,"_583":26,"_584":26,"_585":-5},"ENV",{"_537":538,"_539":540,"_541":64,"_542":543,"_544":545,"_546":547,"_548":549,"_550":551,"_552":553,"_554":555,"_556":557,"_558":559,"_560":561,"_562":563,"_564":565},"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"]
</article></body></html>

Search