import { useState } from 'react'; import { ChevronRight, Laptop } from 'lucide-react'; interface Props { /** 'html' → custom markup (rendered as a live preview); * 'card' → preset payload (shown as formatted JSON). */ format: 'html' | 'card'; content: string; /** Preset name for 'card' format, e.g. "email" | "calendar". */ cardType?: string; } /** Wrap the agent's raw notch markup in a minimal black document so the preview * mirrors what showed on the Mac notch (white text on a transparent/black canvas). */ function buildSrcDoc(html: string): string { return `` + `` + `${html}`; } function prettyJson(raw: string): string { try { return JSON.stringify(JSON.parse(raw), null, 2); } catch { return raw.trim(); } } /** * Collapsible "Sent to your Mac" card. The agent emits / * blocks that Morphy renders in the MacBook notch — in the chat the user usually * doesn't want to see them, so we collapse them behind this card and let them * expand to preview exactly what landed on their Mac. */ export default function NotchCard({ format, content, cardType }: Props) { const [expanded, setExpanded] = useState(false); const label = cardType ? `Sent to your Mac · ${cardType}` : 'Sent to your Mac'; return (

{/* Header */}

setExpanded((v) => !v)} className="flex items-center gap-2.5 px-3.5 py-2.5 bg-[#0069FE]/10 hover:bg-[#0069FE]/[0.16] transition-colors cursor-pointer select-none" > {label}

{/* Collapsible content */} {expanded && (

{format === 'html' ? (