setNewLabel(e.target.value)} placeholder="Label (optional) — e.g. Alex beta" style={{ background: '#0a0a0a', border: '1px solid #262626', color: '#EDEDED', fontSize: 13, padding: '8px 12px', borderRadius: 5, outline: 'none' }} />
setNewExp(e.target.value)} style={{ background: '#0a0a0a', border: '1px solid #262626', color: '#EDEDED', fontFamily: "'JetBrains Mono', monospace", fontSize: 12, padding: '8px 12px', borderRadius: 5, outline: 'none' }}>
Expires in 24h
Expires in 7d
Expires in 30d
Never expires
Generate
setShowGen(false)}>Cancel
)}
setJustCreatedCode(null)} toast={toast} />
CODE LABEL STATUS CREATED EXPIRES INBOXES EMAILS LAST SEEN ACTIONS
{keys.map((k) => (
e.currentTarget.style.background = '#101010'}
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
>
{k.code}
{k.hasFullCode && (
copy(k.code)}
title="Copy full code"
style={{ background: 'none', border: 'none', color: '#565656', cursor: 'pointer', display: 'flex', padding: 2 }}
>
)}
{k.label || — }
{k.created}
{k.expires}
{k.inboxes}
{k.emails}
{k.lastSeen}
onInspect(k)}>
{k.status === 'active' &&
revoke(k.id)}>Revoke }
))}
);
};
// Modal shown ONCE when a fresh access key is generated. The full code is
// argon2-hashed in the DB so this is the only chance to copy it.
const NewKeyModal = ({ code, onClose, toast }) => {
const [acknowledged, setAcknowledged] = React.useState(false);
const [copied, setCopied] = React.useState(false);
React.useEffect(() => {
if (code) { setAcknowledged(false); setCopied(false); }
}, [code]);
if (!code) return null;
const doCopy = () => {
navigator.clipboard?.writeText(code);
setCopied(true);
toast && toast('Code copied to clipboard');
};
return (
<>
FULL CODE — SHOWN ONCE
Copy this access code now . It's argon2-hashed in the database — once you close this dialog there is no way to retrieve it. If you lose it, you'll need to revoke this key and generate a new one.
{code}
{copied ? '✓ COPIED' : 'COPY'}
The keys list will only show the redacted preview {code.slice(0,4)}-XXXX-XXXX-{code.slice(-4)} from now on.
I have copied this code somewhere safe.
Close
);
};
const StatusPill = ({ status }) => {
const map = {
active: { bg: '#0a1f1a', border: '#1a3f33', color: '#10B981' },
revoked: { bg: '#2a0e0e', border: '#5a1a1a', color: '#DC2626' },
expired: { bg: '#1a1a1a', border: '#262626', color: '#8A8A8A' },
unused: { bg: '#0c2a4a', border: '#1e3f6b', color: '#60A5FA' },
};
const s = map[status] || map.expired;
return (
);
};
// ================= FIREHOSE =================
const AdminFirehose = ({ toast }) => {
const [stream, setStream] = React.useState([]);
const [paused, setPaused] = React.useState(false);
const [filter, setFilter] = React.useState('');
const [selected, setSelected] = React.useState(null);
const [loaded, setLoaded] = React.useState(false);
// Initial load
React.useEffect(() => {
let cancel = false;
tmApi.admin.firehose.list({ limit: 50 }).then((r) => {
if (cancel) return;
setStream(r);
setSelected(r[0] || null);
setLoaded(true);
}).catch((e) => { setLoaded(true); toast('Firehose load failed: ' + e.message); });
return () => { cancel = true; };
}, []);
// Live WS stream
React.useEffect(() => {
if (paused) return;
const conn = tmApi.openFirehose({
onEntry: (entry) => setStream((p) => [{ ...entry, isNew: true }, ...p].slice(0, 200)),
onError: () => { /* will be retried on next mount */ },
});
return () => conn.close();
}, [paused]);
const filtered = filter ? stream.filter(f => (f.from + f.subject + f.to + f.domain).toLowerCase().includes(filter.toLowerCase())) : stream;
if (!loaded) return
setPaused(!paused)}>
{paused ? <>
{/* Stream */}
{filtered.map((f) => (
setSelected(f)} style={{
display: 'grid', gridTemplateColumns: '70px 1fr auto 70px', gap: 10, padding: '9px 16px',
borderBottom: '1px solid #141414', cursor: 'pointer', alignItems: 'center',
background: selected?.id === f.id ? '#141414' : 'transparent',
borderLeft: `2px solid ${selected?.id === f.id ? '#F59E0B' : f.flagged ? '#DC2626' : 'transparent'}`,
animation: f.isNew ? 'newMail 1.8s ease' : 'none',
}}
onMouseEnter={(e) => selected?.id !== f.id && (e.currentTarget.style.background = '#101010')}
onMouseLeave={(e) => selected?.id !== f.id && (e.currentTarget.style.background = 'transparent')}
>
{f.ts}
{f.flagged && → {f.to}
{f.subject}
{f.hasCode ? (
⚡ {f.code}
) :
}
{f.size}
))}
{/* Inspector */}
{selected ? (
<>
INSPECTION · {selected.id}
TS {selected.ts}
FROM {selected.from}
TO {selected.to}
DOMAIN {selected.domain}
KEY {selected.keyId}
SIZE {selected.size}
FLAGGED {selected.flagged ? 'YES' : 'NO'}
{selected.hasCode && (<>CODE {selected.code} )}
SUBJECT
{selected.subject}
BODY PREVIEW
Hello,
{selected.hasCode ? `Your verification code is ${selected.code}.` : 'Thanks for using our service. This is a preview of the message body as it would appear to the recipient.'}
— {selected.from}
Flag
Block sender
) :
Select a message
}
setAdding(true)}>
{adding && (
setPattern(e.target.value)} placeholder="spammer@example.com or @*.ml" style={{ background: '#0a0a0a', border: '1px solid #262626', color: '#EDEDED', fontFamily: "'JetBrains Mono', monospace", fontSize: 13, padding: '8px 12px', borderRadius: 5, outline: 'none' }} />
setReason(e.target.value)} placeholder="Reason" style={{ background: '#0a0a0a', border: '1px solid #262626', color: '#EDEDED', fontSize: 13, padding: '8px 12px', borderRadius: 5, outline: 'none' }} />
Block
setAdding(false)}>Cancel
)}
KIND PATTERN HITS REASON ADDED ACTIONS
{blocks.map((b) => (
{b.kind.toUpperCase()} {b.pattern} {b.hits}
{b.reason || — }
{b.added}
remove(b.id)}>Remove
))}
);
};
// ================= HEALTH =================
const AdminHealth = () => {
const [health, setHealth] = React.useState(null);
React.useEffect(() => {
tmApi.admin.health().then(setHealth).catch(() => setHealth([]));
const t = setInterval(() => tmApi.admin.health().then(setHealth).catch(() => {}), 30000);
return () => clearInterval(t);
}, []);
if (!health) return h.status==='ok').length}/${health.length} ok`} />
);
};
// ================= AUDIT =================
const AdminAudit = () => {
const [events, setEvents] = React.useState(null);
React.useEffect(() => {
tmApi.admin.audit({ limit: 100 }).then(setEvents).catch(() => setEvents([]));
}, []);
if (!events) return
TIMESTAMP ACTOR ACTION TARGET META
{events.map((a) => (
{a.ts}
{a.actor}
{a.action} {a.target} {a.meta}
))}
);
};
// ================= SETTINGS =================
const AdminSettings = ({ toast }) => {
const [s, setS] = React.useState(null);
React.useEffect(() => {
tmApi.admin.settings.get().then(setS).catch((e) => toast('Load failed: ' + e.message));
}, []);
if (!s) return
Save changes
setS({...s, sharedRetention: v})} /> setS({...s, customRetention: v})} />
setS({...s, maxAttempts: v})} /> setS({...s, rateLimitWin: v})} /> setS({...s, sessionTTL: v})} />
setS({...s, smtpHost: v})} /> setS({...s, maxAttachMB: v})} /> setS({...s, autoFlagSpam: v})} />
setS({...s, webhookUrl: v})} placeholder="https://…" />
);
};
const SettingsGroup = ({ label, children }) => (
);
const SRow = ({ label, children }) => (
{label} {children}
);
const NumInput = ({ value, onChange }) =>
KEY ACTIVITY
{keyObj.code}
{keyObj.label &&
{keyObj.label}
}
{/* Stat strip */}
{[['INBOXES', keyObj.inboxes], ['EMAILS', keyObj.emails], ['LAST IP', keyObj.ip], ['LAST SEEN', keyObj.lastSeen]].map(([l, v]) => (
))}
ALL MESSAGES · {keyFirehose.length}
{keyFirehose.length === 0 ? (
No activity yet
) : keyFirehose.map((f) => (
setSelected(f)} style={{ padding: '10px 24px', borderBottom: '1px solid #151515', cursor: 'pointer', background: selected?.id === f.id ? '#141414' : 'transparent' }}>
{f.from} {f.ts}
{f.subject}
))}
{selected && (
MESSAGE INSPECT
FROM: {selected.from}
TO: {selected.to}
TS: {selected.ts}
{selected.subject}
{selected.hasCode ? `Your verification code is ${selected.code}.` : 'Full email body would render here, sanitized and sandboxed.'}
)}
);
};
Object.assign(window, { AdminDashboard, AdminDomains, AdminKeys, AdminFirehose, AdminAbuse, AdminHealth, AdminAudit, AdminSettings, KeyActivityDrawer });