{/* Title bar */}

Search Mailbox

{['M7 12h10M12 7v10','M3 6h18M3 12h18M3 18h18','M5 12h14M12 5l7 7-7 7'].map((d, i) => ( ))}

{/* Three-pane layout */}

{/* Sidebar — both accounts visible, current one highlighted */}

Favorites

} label="All Inboxes" count={428} active /> } label="Flagged" count={12} /> } label="Today" count={31} />

Accounts

{/* Work account */} } label="Work" active={account === 'business'} />

{/* Personal account */}

} label="Personal" active={account === 'personal'} />

{/* Message list */}

{account === 'business' ? 'Work' : 'Personal'} · Inbox By Date ▾

{inbox.map((m, i) => ( ))}

{/* Reading pane */}

{selected.subject}

{selected.from[0]}

{selected.from}

To: {account === 'business' ? 'jordan@horizonlabs.io' : 'jordan@me.com'} · 9:14 AM

{account === 'business' ? ( <>

Hi Jordan,

Ahead of next week's review I've pulled together the Q2 numbers across both pipelines. Headline: activation lift held at +18% after the rework, and we're trending to beat the H1 target by ~9%.

I'd love to walk you through the deck live — easier to talk through the cohort framing in person. Can we lock something in for early next week? Tuesday 2pm PT or Wed 10am PT both work for me.

Anya

) : ( <>

hey —

saw the new Villeneuve is finally out. wanna do thursday after work? could grab dinner at that ramen place on 14th first if you're hungry.

also down for the imax one if it's playing somewhere not insane to get to. lmk what works 🙂

x s

)}

); } // ── MailTwin assistant window (the real app) ── function AssistantWindow({ account, streaming }) { const SCRIPTS = { business: { sender: 'anya@horizonlabs.io', subject: 'Q2 partnership review — schedule', reply: [ "Hi Anya,\n\n", "Thanks for pulling the Q2 numbers together — the conversion lift on the activation flow is genuinely impressive.\n\n", "Tuesday at 2pm PT works on my end. I'll have Mark join so we can walk through the pipeline assumptions live. Could you share the deck a day prior so I can pre-read?\n\n", "One quick ask: it would help to see the Q1 retention cohort alongside, so we're comparing on the same axis.\n\n", "Best,\nJordan", ], }, personal: { sender: 'sam.k@me.com', subject: 'movie thursday??', reply: [ "yes please 🎬\n\n", "thursday works — anything but the 3hr one. that new villeneuve is supposed to be wild though, dealer's choice.\n\n", "want me to grab tickets? i can do the 7:40 at the alamo if it's still got seats.\n\n", "x j", ], }, }; const script = SCRIPTS[account]; const fullText = script.reply.join(''); const [text, setText] = useState(streaming ? '' : fullText); const [done, setDone] = useState(!streaming); const [activeAction, setActiveAction] = useState(1); useEffect(() => { if (!streaming) { setText(fullText); setDone(true); return; } setText(''); setDone(false); setActiveAction(1); let i = 0; const speeds = [12, 14, 16, 18, 22, 28]; let timer; const tick = () => { i += Math.floor(Math.random() * 3) + 1; if (i >= fullText.length) { setText(fullText); setDone(true); return; } setText(fullText.slice(0, i)); timer = setTimeout(tick, speeds[Math.floor(Math.random() * speeds.length)]); }; timer = setTimeout(tick, 700); return () => clearTimeout(timer); }, [account, streaming]); return (

{/* Title bar */}

{/* Sender pill */}

{script.sender} · {script.subject}

{/* Steer prompt */}

Steer the reply (optional) — push back, ask for a date, decline politely…

{/* Action chips */}

} label="Reply" active={activeAction === 0} onClick={() => setActiveAction(0)} /> } label="Reply (my style)" active={activeAction === 1} onClick={() => setActiveAction(1)} /> } label="Summarize" active={activeAction === 2} onClick={() => setActiveAction(2)} /> } label="Action items" active={activeAction === 3} onClick={() => setActiveAction(3)} /> } label="Translate" active={activeAction === 4} onClick={() => setActiveAction(4)} /> } label="Improve draft" active={activeAction === 5} onClick={() => setActiveAction(5)} />

{/* Tone / Length */}

} label="Tone" /> } label="Length" />

{/* Output */}

{text === '' && !done ? (

Run an action to see the result here.

) : ( <> {text} {!done && } )}

{/* Insert bar */}

{[, , ].map((ic, i) => ( ))}

{/* Status footer */}

Claude ready

✦ 14d trial

); } // ── Composite: Mail.app backdrop + assistant overlay ── function MailMockup({ scale = 1, streaming = true, account = 'business' }) { const stageW = 1280; const stageH = 720; return (

{/* Mail.app in the back */}

{/* MailTwin on top — positioned bottom-right, overlapping the reading pane */}

); } if (typeof document !== 'undefined' && !document.getElementById('mailtwin-kf')) { const s = document.createElement('style'); s.id = 'mailtwin-kf'; s.textContent = `@keyframes mailtwin-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }`; document.head.appendChild(s); } window.MailMockup = MailMockup;