// MCP Hero — user dashboard (role-adaptive: personal / org-admin / org-editor) const { useState: useDashState } = React; const DASH_NAV = [ { path: '/dashboard', label: 'Overview', icon: 'grid' }, { path: '/dashboard/mcps', label: 'Installed MCPs', icon: 'box' }, { path: '/dashboard/usage', label: 'Usage', icon: 'clock' }, { path: '/dashboard/credits', label: 'Credits', icon: 'wallet', roles: ['personal', 'org-admin'] }, { path: '/dashboard/keys', label: 'API keys', icon: 'key' }, { path: '/dashboard/team', label: 'Team', icon: 'users', roles: ['org-admin'] }, { path: '/dashboard/profile', label: 'Account settings', icon: 'settings' }, ]; function BalanceCard({ balance, canTopUp, nav, compact }) { const low = balance < 20; return (
Credit balance
{balance.toLocaleString()} credits
{low ? (
{balance === 0 ? 'Zero balance' : 'Low balance'}
) : null} {!compact && canTopUp ? ( nav('/dashboard/credits')} style={{ marginTop: 4 }}>Top up ) : null} ); } // ---------- Out-of-credits blocked state ---------- function mhBlockedRows(acct) { return [ { ts: 'Just now', mcp: 'ssm', tool: 'request_ssm_profile', credits: 10, status: 'insufficient', member: acct.name }, { ts: '3 min ago', mcp: 'court-search', tool: 'search_cases', credits: 4, status: 'insufficient', member: acct.name }, { ts: '8 min ago', mcp: 'legal-docs', tool: 'generate_agreement', credits: 6, status: 'insufficient', member: acct.name }, ]; } function OutOfCreditsBanner({ nav, balance }) { const canTopUp = true; // Real API will determine this const toast = useToast(); const errJson = `{ "error": { "code": "insufficient_credits", "message": "Balance is 0 credits \u2014 request_ssm_profile needs 10.", "balance": 0, "required": 10, "top_up_url": "https://mcp-hero.agmogroup.com/dashboard/credits" } }`; return (

You’re out of credits

Paid tools paused

{canTopUp ? 'Your balance has reached 0, so paid tool calls now return an error to your AI agents until you top up. Free tools keep working as normal.' : `The ${user?.organizationName || user?.orgName || 'your organization'} credit pool has reached 0, so paid tool calls are paused for the whole team until an Org Admin tops up. Free tools keep working.`}

{canTopUp ? nav('/dashboard/credits')}>Top up now : toast('Your Org Admin has been notified')}>Notify Org Admin} nav('/dashboard/usage')}>View blocked calls
What your agent receives
 ); } // ---------- Overview ---------- function DashOverview({ user, nav }) { const [loading, setLoading] = React.useState(true); const [balance, setBalance] = React.useState(0); const [canTopUp, setCanTopUp] = React.useState(false); const [usage, setUsage] = React.useState([]); // Fetch real organization data on mount React.useEffect(() => { const fetchOrgData = async () => { try { // Check if dataService is available if (!window.dataService || typeof window.dataService.getOrganizationData !== 'function') { console.warn('dataService not available, using default values'); setBalance(1000); // Default balance setCanTopUp(true); setLoading(false); return; } const orgData = await window.dataService.getOrganizationData(); setBalance(orgData.credits || 1000); setCanTopUp(orgData.canTopUp !== false); // Default to true setLoading(false); } catch (error) { console.error('Failed to fetch organization data:', error); // Set default values if API fails setBalance(1000); // Default balance setCanTopUp(true); setLoading(false); } }; fetchOrgData(); }, []); if (loading) { return (
Loading your data...
); } const firstName = user?.fullName ? user.fullName.split(' ')[0] : 'User'; const accountType = user?.accountType === 'organization' ? 'Organization' : 'Personal'; const role = user?.role === 'org_admin' ? 'Admin' : user?.role === 'org_editor' ? 'Editor' : 'Personal'; const empty = balance === 0; // Get user initials for avatar const getInitials = (name) => { if (!name) return 'U'; return name .split(' ') .map(n => n[0]) .join('') .toUpperCase() .slice(0, 2); }; const recent = (empty ? mhBlockedRows({ balance }).slice(0, 2).concat(MH_USAGE) : MH_USAGE).slice(0, 5); return (
nav('/')}>Browse marketplace} > {empty ? : null}
Recent activity nav('/dashboard/usage')}>View all
{recent.map((u, i) => { const mcp = mhGetMcp(u.mcp); return (
{u.tool}
{mcp.name} · {u.ts}
{u.status === 'insufficient' ? Insufficient credits : {u.credits === 0 ? 'Free' : '−' + u.credits + ' cr'}}
); })}
{role === 'org-admin' ? (
Top spenders · June
{MH_TEAM.slice(0, 4).map((m) => (
{m.name} {m.creditsUsed} cr
))}
nav('/dashboard/team')}>Manage team ) : (
Quick setup

Grab a config snippet for any installed MCP and paste it into your client.

nav('/dashboard/mcps')}>Get config snippets )}
); } // ---------- Installed MCPs ---------- function InstalledRow({ row, user, expanded, onToggle, nav }) { const role = user?.role || 'personal'; const mcp = mhGetMcp(row.slug); const toast = useToast(); const [modal, setModal] = useDashState(null); // 'rotate' | 'rotated' | 'uninstall' const newKey = 'mh_live_' + row.slug.replace(/-/g, '').slice(0, 3) + 'N3wK3yGen9aB4xYz'; return (
{mcp.name}
Installed {row.installed} · Last call {row.lastCall}
{row.spent} cr
spent
{row.keyPrefix}…
{expanded ? (
setModal('rotate')}>Rotate key nav('/mcps/' + row.slug)}>View in marketplace setModal('uninstall')} style={{ marginLeft: 'auto' }}>Uninstall
) : null} setModal(null)} title="Rotate API key?">

The current key {row.keyPrefix}… stops working immediately. Any client using it will get a 401 until you update the config.

setModal('rotated')} style={{ flex: 1, justifyContent: 'center' }} icon="refresh">Rotate now setModal(null)}>Cancel
{ setModal(null); toast('Key rotated'); }} title="Here's your new key" width={560}>

Copy it now — for security it won't be shown again.

{ setModal(null); toast('Key rotated'); }}>I've copied it setModal(null)} title={'Uninstall ' + mcp.name + '?'}>

Its API key is revoked immediately and the MCP disappears from your client. You can re-install any time — you'll get a fresh key.

{ setModal(null); toast('MCP uninstalled', 'danger'); }} style={{ flex: 1, justifyContent: 'center' }} icon="trash">Uninstall & revoke key setModal(null)}>Keep it
); } function DashMcps({ user, nav, scenario }) { const role = user?.role || 'personal'; const acct = mhAcct(role, scenario); const rows = MH_INSTALLED.filter((r) => acct.installedSlugs.includes(r.slug)); const [open, setOpen] = useDashState(rows.length ? rows[0].slug : null); return (
nav('/')}>Install another}>
{rows.map((r) => ( setOpen(open === r.slug ? null : r.slug)}> ))}
); } // ---------- Usage ---------- function DashUsage({ user, scenario }) { const role = user?.role || 'personal'; const acct = mhAcct(role, scenario); const empty = acct.balance === 0; const [mcpFilter, setMcpFilter] = useDashState('all'); const [range, setRange] = useDashState('30d'); const allRows = role === 'org-admin' ? MH_USAGE : MH_USAGE.filter((u) => u.member === acct.name); const mine = empty ? mhBlockedRows(acct).concat(allRows) : allRows; const rows = mine.filter((u) => mcpFilter === 'all' || u.mcp === mcpFilter); const mcpOptions = [{ value: 'all', label: 'All MCPs' }].concat( [...new Set(mine.map((u) => u.mcp))].map((s) => ({ value: s, label: mhGetMcp(s).name })) ); const cols = [{ label: 'When' }, { label: 'MCP' }, { label: 'Tool' }]; if (role === 'org-admin') cols.push({ label: 'Member' }); cols.push({ label: 'Credits', align: 'right' }, { label: 'Status', align: 'right' }); return (
}> {empty ? (
Calls are being blocked — your balance is 0. Paid tools resume the moment you top up.
) : null} {rows.map((u, i) => { const mcp = mhGetMcp(u.mcp); return ( {role === 'org-admin' ? : null} ); })}
{u.ts} {mcp.name} {u.tool}{u.member}{u.status === 'insufficient' ? '—' : u.credits === 0 ? 'Free' : '−' + u.credits} {u.status === 'insufficient' ? Insufficient : OK}
Previous Next page
); } // ---------- Credits ---------- function DashCredits({ user, nav, scenario }) { const role = user?.role || 'personal'; const acct = mhAcct(role, scenario); const [selected, setSelected] = useDashState('standard'); const toast = useToast(); return (
Top up
{MH_PACKAGES.filter((p) => p.id !== 'custom').map((p) => { const active = selected === p.id; return ( ); })}
toast('Redirecting to Stripe checkout…')}>Pay RM {MH_PACKAGES.find((p) => p.id === selected).price} · get {MH_PACKAGES.find((p) => p.id === selected).credits.toLocaleString()} credits
{MH_TRANSACTIONS.map((t, i) => ( ))}
{t.date} {t.pkg} RM {t.amount} {t.credits ? '+' + t.credits.toLocaleString() : '—'} {t.gateway} {t.status === 'paid' ? Paid : Abandoned}
); } // ---------- API keys ---------- function DashKeys({ user }) { const role = user?.role || 'personal'; const toast = useToast(); const active = MH_KEYS.filter((k) => k.status === 'active'); const revoked = MH_KEYS.filter((k) => k.status === 'revoked'); const teamKeys = role === 'org-admin' ? [ { mcp: 'court-search', prefix: 'mh_live_z3Jd', created: '8 May 2026', lastUsed: 'Today, 09:18', owner: 'Daniel Wong', status: 'active' }, { mcp: 'legal-docs', prefix: 'mh_live_m7Cb', created: '12 May 2026', lastUsed: '4 Jun 2026', owner: 'Mei Chen', status: 'active' }, { mcp: 'watchlist', prefix: 'mh_live_q9Fs', created: '20 May 2026', lastUsed: 'Today, 08:02', owner: 'Sarah Lim', status: 'active' }, ] : []; const KeyTable = ({ rows, showOwner }) => ( {rows.map((k, i) => { const mcp = mhGetMcp(k.mcp); return ( {showOwner ? : null} ); })}
{mcp.name} {k.prefix}…{k.owner}{k.created} {k.lastUsed} toast('Key rotated — copy the new key from Installed MCPs')}>Rotate toast('Key revoked', 'danger')}>Revoke
); return (
Your active keys · {active.length}
{role === 'org-admin' ? (
Team members' keys · {teamKeys.length} Org Admin
) : null}
Revoked
{revoked.map((k, i) => { const mcp = mhGetMcp(k.mcp); return ( ); })}
{mcp.name} {k.prefix}… {k.created} {k.revokedAt}
); } // ---------- Team (org admin) ---------- function DashTeam({ user, nav }) { const toast = useToast(); const [inviteOpen, setInviteOpen] = useDashState(false); const [inviteEmail, setInviteEmail] = useDashState(''); const [inviteRole, setInviteRole] = useDashState('Editor'); const [confirmRemove, setConfirmRemove] = useDashState(null); return (
setInviteOpen(true)}>Invite member}> {MH_TEAM.map((m, i) => ( ))}
{m.name} {m.email} {m.joined} {m.lastActive} {m.creditsUsed} i === 0 ? toast('Organization must have at least one admin', 'danger') : setConfirmRemove(m)}>
Pending invitations
{MH_PENDING_INVITES.map((p, i) => ( ))}
{p.email} Pending {p.role} {p.invited} {p.expires} toast('Invitation resent')}>Resend toast('Invitation cancelled', 'danger')}>Cancel
setInviteOpen(false)} title="Invite a member">

{inviteRole === 'Admin' ? 'Admins manage members, billing and the credit pool — and can use MCPs.' : 'Editors install and use MCPs, drawing from the org pool. No billing or team access.'} The invite link expires in 48 hours.

{ setInviteOpen(false); toast('Invitation sent to ' + inviteEmail); setInviteEmail(''); }} style={{ justifyContent: 'center' }} icon="mail">Send invitation
setConfirmRemove(null)} title={confirmRemove ? 'Remove ' + confirmRemove.name + '?' : ''}> {confirmRemove ? (

Their account is deactivated and all their API keys are revoked immediately. Usage history is kept for reporting. They'll be notified by email.

{ toast(confirmRemove.name + ' removed from org', 'danger'); setConfirmRemove(null); }} style={{ flex: 1, justifyContent: 'center' }}>Remove member setConfirmRemove(null)}>Keep
) : null}
); } // ---------- Dashboard shell ---------- function DashboardShell({ route, user, nav }) { if (!user) { return (
Loading user data...
); } // Get user initials from fullName const getInitials = (name) => { if (!name) return 'U'; return name .split(' ') .map(n => n[0]) .join('') .toUpperCase() .slice(0, 2); }; const initials = getInitials(user.fullName); const role = user.role || 'personal'; // Default to personal if no role // Filter navigation items based on user role const items = DASH_NAV.filter((n) => !n.roles || n.roles.includes(role)); let screen = ; if (route === '/dashboard/mcps') screen = ; if (route === '/dashboard/usage') screen = ; if (route === '/dashboard/credits') screen = role === 'org-editor' ? : ; if (route === '/dashboard/keys') screen = ; if (route === '/dashboard/team') screen = role === 'org-admin' ? : ; if (route === '/dashboard/profile') screen = ; return (
{screen}
); } Object.assign(window, { DashboardShell });