@handled-ai/design-system 0.20.3 → 0.20.4

package/dist/components/comment-composer.js

@@ -34,12 +34,12 @@ function CommentComposer({
       "data-slot": "comment-composer",
       "data-open": open ? "true" : void 0,
       className: cn(
-        "border-border bg-background flex items-start gap-2 rounded-lg border p-2 transition-colors",
+        "border-border bg-background flex items-start gap-2 rounded-lg border px-2 py-1.5 transition-colors",
         open && "ring-ring/30 ring-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs(Avatar, { size: "sm", className: "mt-0.5", children: [
+        /* @__PURE__ */ jsxs(Avatar, { size: "sm", className: "mt-px", children: [
           (author == null ? void 0 : author.avatarUrl) ? /* @__PURE__ */ jsx(AvatarImage, { src: author.avatarUrl, alt: (_a = author.name) != null ? _a : "You" }) : null,
           /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground text-[10px] font-medium uppercase", children: getInitials({ name: author == null ? void 0 : author.name, email: author == null ? void 0 : author.email }) })
         ] }),
@@ -54,7 +54,7 @@ function CommentComposer({
               placeholder,
               rows: open ? 3 : 1,
               className: cn(
-                "resize-none border-0 bg-transparent p-1 text-sm shadow-none focus-visible:ring-0",
+                "resize-none border-0 bg-transparent px-1 py-0.5 text-sm leading-snug shadow-none focus-visible:ring-0",
                 !open && "min-h-0"
               ),
               onKeyDown: (e) => {
@@ -65,7 +65,7 @@ function CommentComposer({
               }
             }
           ),
-          open ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between gap-2", children: [
+          open ? /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-[11px]", children: [
               /* @__PURE__ */ jsx(Lock, { size: 12 }),
               " ",

package/dist/components/comment-composer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/comment-composer.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * comment-composer.tsx — an internal-note composer for the case activity\n * timeline. Posting a comment prepends an `operatorNote` event to the log\n * (wired by the consumer). Collapses to a single line; expands on focus or\n * when it has text. ⌘↵ / Ctrl↵ posts.\n *\n * Presentational: `onPost` does the work (the consumer persists the note and\n * adds it to the timeline). Reuses Avatar / Button / Textarea primitives.\n */\n\nimport * as React from \"react\"\nimport { Lock } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { getInitials } from \"../lib/user-display\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\nimport { Button } from \"./button\"\nimport { Textarea } from \"./textarea\"\n\nexport interface CommentComposerProps {\n  /** Called with the trimmed note text when the operator posts. */\n  onPost: (text: string) => void\n  /** Current operator (for the avatar). */\n  author?: { name?: string; email?: string; avatarUrl?: string | null }\n  placeholder?: string\n  /** Hint shown in the footer; defaults to the internal-note reassurance. */\n  hint?: string\n  className?: string\n}\n\nfunction CommentComposer({\n  onPost,\n  author,\n  placeholder = \"Add a comment or internal note…\",\n  hint = \"Internal note: only your team sees this\",\n  className,\n}: CommentComposerProps) {\n  const [text, setText] = React.useState(\"\")\n  const [focused, setFocused] = React.useState(false)\n  const open = focused || text.length > 0\n  const canPost = text.trim().length > 0\n\n  const post = () => {\n    const value = text.trim()\n    if (!value) return\n    onPost(value)\n    setText(\"\")\n    setFocused(false)\n  }\n\n  return (\n    <div\n      data-slot=\"comment-composer\"\n      data-open={open ? \"true\" : undefined}\n      className={cn(\n        \"border-border bg-background flex items-start gap-2 rounded-lg border p-2 transition-colors\",\n        open && \"ring-ring/30 ring-2\",\n        className\n      )}\n    >\n      <Avatar size=\"sm\" className=\"mt-0.5\">\n        {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? \"You\"} /> : null}\n        <AvatarFallback className=\"bg-muted text-muted-foreground text-[10px] font-medium uppercase\">\n          {getInitials({ name: author?.name, email: author?.email })}\n        </AvatarFallback>\n      </Avatar>\n\n      <div className=\"min-w-0 flex-1\">\n        <Textarea\n          data-slot=\"comment-composer-input\"\n          value={text}\n          onChange={(e) => setText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          placeholder={placeholder}\n          rows={open ? 3 : 1}\n          className={cn(\n            \"resize-none border-0 bg-transparent p-1 text-sm shadow-none focus-visible:ring-0\",\n            !open && \"min-h-0\"\n          )}\n          onKeyDown={(e) => {\n            if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") {\n              e.preventDefault()\n              post()\n            }\n          }}\n        />\n\n        {open ? (\n          <div className=\"mt-1 flex items-center justify-between gap-2\">\n            <span className=\"text-muted-foreground inline-flex items-center gap-1 text-[11px]\">\n              <Lock size={12} /> {hint}\n            </span>\n            <span className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => {\n                  setText(\"\")\n                  setFocused(false)\n                }}\n              >\n                Cancel\n              </Button>\n              <Button type=\"button\" size=\"sm\" disabled={!canPost} onClick={post}>\n                Comment\n                <kbd className=\"bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]\">⌘↵</kbd>\n              </Button>\n            </span>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport { CommentComposer }\n"],"mappings":";AA8DM,SACuB,KADvB;AAlDN,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,gBAAgB,mBAAmB;AACpD,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAazB,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AACF,GAAyB;AAtCzB;AAuCE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,EAAE;AACzC,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,OAAO,WAAW,KAAK,SAAS;AACtC,QAAM,UAAU,KAAK,KAAK,EAAE,SAAS;AAErC,QAAM,OAAO,MAAM;AACjB,UAAM,QAAQ,KAAK,KAAK;AACxB,QAAI,CAAC,MAAO;AACZ,WAAO,KAAK;AACZ,YAAQ,EAAE;AACV,eAAW,KAAK;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW,OAAO,SAAS;AAAA,MAC3B,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,UAAO,MAAK,MAAK,WAAU,UACzB;AAAA,4CAAQ,aAAY,oBAAC,eAAY,KAAK,OAAO,WAAW,MAAK,YAAO,SAAP,YAAe,OAAO,IAAK;AAAA,UACzF,oBAAC,kBAAe,WAAU,oEACvB,sBAAY,EAAE,MAAM,iCAAQ,MAAM,OAAO,iCAAQ,MAAM,CAAC,GAC3D;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,cACvC,SAAS,MAAM,WAAW,IAAI;AAAA,cAC9B;AAAA,cACA,MAAM,OAAO,IAAI;AAAA,cACjB,WAAW;AAAA,gBACT;AAAA,gBACA,CAAC,QAAQ;AAAA,cACX;AAAA,cACA,WAAW,CAAC,MAAM;AAChB,qBAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,SAAS;AACjD,oBAAE,eAAe;AACjB,uBAAK;AAAA,gBACP;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEC,OACC,qBAAC,SAAI,WAAU,gDACb;AAAA,iCAAC,UAAK,WAAU,oEACd;AAAA,kCAAC,QAAK,MAAM,IAAI;AAAA,cAAE;AAAA,cAAE;AAAA,eACtB;AAAA,YACA,qBAAC,UAAK,WAAU,2BACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAAS,MAAM;AACb,4BAAQ,EAAE;AACV,+BAAW,KAAK;AAAA,kBAClB;AAAA,kBACD;AAAA;AAAA,cAED;AAAA,cACA,qBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,UAAU,CAAC,SAAS,SAAS,MAAM;AAAA;AAAA,gBAEjE,oBAAC,SAAI,WAAU,0DAAyD,0BAAE;AAAA,iBAC5E;AAAA,eACF;AAAA,aACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/comment-composer.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * comment-composer.tsx — an internal-note composer for the case activity\n * timeline. Posting a comment prepends an `operatorNote` event to the log\n * (wired by the consumer). Collapses to a single line; expands on focus or\n * when it has text. ⌘↵ / Ctrl↵ posts.\n *\n * Presentational: `onPost` does the work (the consumer persists the note and\n * adds it to the timeline). Reuses Avatar / Button / Textarea primitives.\n */\n\nimport * as React from \"react\"\nimport { Lock } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { getInitials } from \"../lib/user-display\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"./avatar\"\nimport { Button } from \"./button\"\nimport { Textarea } from \"./textarea\"\n\nexport interface CommentComposerProps {\n  /** Called with the trimmed note text when the operator posts. */\n  onPost: (text: string) => void\n  /** Current operator (for the avatar). */\n  author?: { name?: string; email?: string; avatarUrl?: string | null }\n  placeholder?: string\n  /** Hint shown in the footer; defaults to the internal-note reassurance. */\n  hint?: string\n  className?: string\n}\n\nfunction CommentComposer({\n  onPost,\n  author,\n  placeholder = \"Add a comment or internal note…\",\n  hint = \"Internal note: only your team sees this\",\n  className,\n}: CommentComposerProps) {\n  const [text, setText] = React.useState(\"\")\n  const [focused, setFocused] = React.useState(false)\n  const open = focused || text.length > 0\n  const canPost = text.trim().length > 0\n\n  const post = () => {\n    const value = text.trim()\n    if (!value) return\n    onPost(value)\n    setText(\"\")\n    setFocused(false)\n  }\n\n  return (\n    <div\n      data-slot=\"comment-composer\"\n      data-open={open ? \"true\" : undefined}\n      className={cn(\n        \"border-border bg-background flex items-start gap-2 rounded-lg border px-2 py-1.5 transition-colors\",\n        open && \"ring-ring/30 ring-2\",\n        className\n      )}\n    >\n      <Avatar size=\"sm\" className=\"mt-px\">\n        {author?.avatarUrl ? <AvatarImage src={author.avatarUrl} alt={author.name ?? \"You\"} /> : null}\n        <AvatarFallback className=\"bg-muted text-muted-foreground text-[10px] font-medium uppercase\">\n          {getInitials({ name: author?.name, email: author?.email })}\n        </AvatarFallback>\n      </Avatar>\n\n      <div className=\"min-w-0 flex-1\">\n        <Textarea\n          data-slot=\"comment-composer-input\"\n          value={text}\n          onChange={(e) => setText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          placeholder={placeholder}\n          rows={open ? 3 : 1}\n          className={cn(\n            \"resize-none border-0 bg-transparent px-1 py-0.5 text-sm leading-snug shadow-none focus-visible:ring-0\",\n            !open && \"min-h-0\"\n          )}\n          onKeyDown={(e) => {\n            if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") {\n              e.preventDefault()\n              post()\n            }\n          }}\n        />\n\n        {open ? (\n          <div className=\"mt-0.5 flex items-center justify-between gap-2\">\n            <span className=\"text-muted-foreground inline-flex items-center gap-1 text-[11px]\">\n              <Lock size={12} /> {hint}\n            </span>\n            <span className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => {\n                  setText(\"\")\n                  setFocused(false)\n                }}\n              >\n                Cancel\n              </Button>\n              <Button type=\"button\" size=\"sm\" disabled={!canPost} onClick={post}>\n                Comment\n                <kbd className=\"bg-primary-foreground/15 ml-1 rounded px-1 text-[10px]\">⌘↵</kbd>\n              </Button>\n            </span>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport { CommentComposer }\n"],"mappings":";AA8DM,SACuB,KADvB;AAlDN,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,gBAAgB,mBAAmB;AACpD,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAazB,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AACF,GAAyB;AAtCzB;AAuCE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,EAAE;AACzC,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,KAAK;AAClD,QAAM,OAAO,WAAW,KAAK,SAAS;AACtC,QAAM,UAAU,KAAK,KAAK,EAAE,SAAS;AAErC,QAAM,OAAO,MAAM;AACjB,UAAM,QAAQ,KAAK,KAAK;AACxB,QAAI,CAAC,MAAO;AACZ,WAAO,KAAK;AACZ,YAAQ,EAAE;AACV,eAAW,KAAK;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW,OAAO,SAAS;AAAA,MAC3B,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,UAAO,MAAK,MAAK,WAAU,SACzB;AAAA,4CAAQ,aAAY,oBAAC,eAAY,KAAK,OAAO,WAAW,MAAK,YAAO,SAAP,YAAe,OAAO,IAAK;AAAA,UACzF,oBAAC,kBAAe,WAAU,oEACvB,sBAAY,EAAE,MAAM,iCAAQ,MAAM,OAAO,iCAAQ,MAAM,CAAC,GAC3D;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,cACvC,SAAS,MAAM,WAAW,IAAI;AAAA,cAC9B;AAAA,cACA,MAAM,OAAO,IAAI;AAAA,cACjB,WAAW;AAAA,gBACT;AAAA,gBACA,CAAC,QAAQ;AAAA,cACX;AAAA,cACA,WAAW,CAAC,MAAM;AAChB,qBAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,SAAS;AACjD,oBAAE,eAAe;AACjB,uBAAK;AAAA,gBACP;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEC,OACC,qBAAC,SAAI,WAAU,kDACb;AAAA,iCAAC,UAAK,WAAU,oEACd;AAAA,kCAAC,QAAK,MAAM,IAAI;AAAA,cAAE;AAAA,cAAE;AAAA,eACtB;AAAA,YACA,qBAAC,UAAK,WAAU,2BACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAAS,MAAM;AACb,4BAAQ,EAAE;AACV,+BAAW,KAAK;AAAA,kBAClB;AAAA,kBACD;AAAA;AAAA,cAED;AAAA,cACA,qBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,UAAU,CAAC,SAAS,SAAS,MAAM;AAAA;AAAA,gBAEjE,oBAAC,SAAI,WAAU,0DAAyD,0BAAE;AAAA,iBAC5E;AAAA,eACF;AAAA,aACF,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/conversation-panel.d.ts

@@ -77,6 +77,16 @@ interface ConversationReplyPayload {
     includeSignature: boolean;
     replyAll: boolean;
 }
+/**
+ * Result of a server-side reply preview. `htmlBody` is the exact HTML the server
+ * prepared for this reply (sanitized by the component before render).
+ * `confirmationToken`, when present, identifies the prepared confirmation so a
+ * consumer can reuse it for the final send instead of re-preparing the message.
+ */
+interface ConversationReplyPreview {
+    htmlBody: string;
+    confirmationToken?: string;
+}
 interface ConversationPanelProps {
     threads: ConversationThread[];
     /** Current operator: drives "to me" + the reply avatar. */
@@ -85,11 +95,19 @@ interface ConversationPanelProps {
     tenantName?: string;
     onSendReply?: (payload: ConversationReplyPayload) => void | Promise<void>;
     onCreateGmailDraft?: (payload: ConversationReplyPayload) => void | Promise<void>;
+    /**
+     * Server-side preview contract. When provided, the reply preview requests the
+     * exact send HTML from the server, the component sanitizes it before render,
+     * and retains any returned `confirmationToken` in preview state so a consumer
+     * can reuse it for the final send. When omitted, the composer falls back to a
+     * clearly labeled local draft preview only.
+     */
+    onPreviewReply?: (payload: ConversationReplyPayload) => Promise<ConversationReplyPreview>;
     onOpenInGmail?: (threadId: string) => void;
     /** Inline-open this thread initially (defaults to the first responded one). */
     defaultOpenThreadId?: string;
     className?: string;
 }
-declare function ConversationPanel({ threads, me, tenantName, onSendReply, onCreateGmailDraft, onOpenInGmail, defaultOpenThreadId, className, }: ConversationPanelProps): React.JSX.Element | null;
+declare function ConversationPanel({ threads, me, tenantName, onSendReply, onCreateGmailDraft, onPreviewReply, onOpenInGmail, defaultOpenThreadId, className, }: ConversationPanelProps): React.JSX.Element | null;
 
-export { type ConvMessage, type ConvParticipant, type ConvStatus, ConversationPanel, type ConversationPanelProps, type ConversationReplyPayload, type ConversationThread };
+export { type ConvMessage, type ConvParticipant, type ConvStatus, ConversationPanel, type ConversationPanelProps, type ConversationReplyPayload, type ConversationReplyPreview, type ConversationThread };

package/dist/components/conversation-panel.js

@@ -337,7 +337,7 @@ function firstName(name) {
 }
 const STATUS_PILL = {
   responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
-  draft: { label: "Draft", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
+  draft: { label: "Draft", cls: "bg-background text-foreground/80 border-border" },
   awaiting: { label: "Awaiting", cls: "bg-status-pending-bg text-status-pending-fg border-status-pending-border" },
   viewing: { label: "Viewing", cls: "bg-muted text-muted-foreground border-border" }
 };
@@ -453,6 +453,7 @@ function MessageView({
     ] })
   ] });
 }
+const IDLE_PREVIEW = { loading: false, html: null, confirmationToken: null, error: null, local: false };
 function ReplyComposer({
   thread,
   me,
@@ -460,23 +461,54 @@ function ReplyComposer({
   tenantName,
   onClose,
   onSend,
-  onDraft
+  onDraft,
+  onPreviewReply
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const [body, setBody] = React.useState((_a = thread.draft) != null ? _a : "");
   const [sig, setSig] = React.useState(true);
   const [preview, setPreview] = React.useState(false);
+  const [previewState, setPreviewState] = React.useState(IDLE_PREVIEW);
   const [sending, setSending] = React.useState(false);
   const [sendError, setSendError] = React.useState(null);
   const ccList = replyAll ? (_b = thread.cc) != null ? _b : [] : [];
   const subject = /^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`;
-  const previewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "");
+  const localPreviewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "");
+  const openPreview = async () => {
+    var _a2, _b2;
+    setPreview(true);
+    setSendError(null);
+    if (!onPreviewReply) {
+      setPreviewState({ loading: false, html: sanitizeHtml(localPreviewHtml), confirmationToken: null, error: null, local: true });
+      return;
+    }
+    setPreviewState({ loading: true, html: null, confirmationToken: null, error: null, local: false });
+    try {
+      const result = await onPreviewReply({ threadId: thread.threadId, body, includeSignature: sig, replyAll });
+      setPreviewState({
+        loading: false,
+        html: sanitizeHtml((_a2 = result.htmlBody) != null ? _a2 : ""),
+        confirmationToken: (_b2 = result.confirmationToken) != null ? _b2 : null,
+        error: null,
+        local: false
+      });
+    } catch (error) {
+      setPreviewState({
+        loading: false,
+        html: null,
+        confirmationToken: null,
+        error: error instanceof Error ? error.message : "Could not load the preview. Please try again.",
+        local: false
+      });
+    }
+  };
   const handleSend = async () => {
     setSending(true);
     setSendError(null);
     try {
       await onSend(body, sig);
       setPreview(false);
+      setPreviewState(IDLE_PREVIEW);
     } catch (error) {
       setSendError(error instanceof Error ? error.message : "Could not send this reply. Please try again.");
     } finally {
@@ -489,6 +521,7 @@ function ReplyComposer({
     try {
       await onDraft(body, sig);
       setPreview(false);
+      setPreviewState(IDLE_PREVIEW);
     } catch (error) {
       setSendError(error instanceof Error ? error.message : "Could not create the Gmail draft. Please try again.");
     } finally {
@@ -545,7 +578,7 @@ function ReplyComposer({
         onKeyDown: (e) => {
           if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault();
-            setPreview(true);
+            void openPreview();
           }
         }
       }
@@ -560,28 +593,32 @@ function ReplyComposer({
         /* @__PURE__ */ jsx(Switch, { checked: sig, onCheckedChange: setSig, "aria-label": "Toggle signature" }),
         "Signature"
       ] }),
-      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => setPreview(true), children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => void openPreview(), children: [
         /* @__PURE__ */ jsx(Eye, { size: 14 }),
         " Preview"
       ] }),
-      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", disabled: sending, onClick: () => setPreview(true), children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", disabled: sending, onClick: () => void openPreview(), children: [
         /* @__PURE__ */ jsx(Send, { size: 14 }),
         " Send"
       ] })
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open: preview, onOpenChange: (open) => {
-      if (!sending) setPreview(open);
+      if (!sending) {
+        setPreview(open);
+        if (!open) setPreviewState(IDLE_PREVIEW);
+      }
     }, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-xl", children: [
       /* @__PURE__ */ jsxs(DialogHeader, { children: [
         /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-1.5 text-[15px]", children: [
           /* @__PURE__ */ jsx(Eye, { size: 15 }),
-          " Preview: this is exactly what sends"
+          " ",
+          previewState.local ? "Local draft preview" : "Reply preview"
         ] }),
-        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+        /* @__PURE__ */ jsx(DialogDescription, { children: previewState.local ? "Local draft preview only \u2014 the server prepares the exact message on send." : /* @__PURE__ */ jsxs(Fragment, { children: [
           "Stays on the ",
           subject.replace(/^Re:\s*/i, ""),
           " thread. Gmail keeps it threaded."
-        ] })
+        ] }) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "border-border space-y-1 rounded-md border p-3 text-[13px]", children: [
         /* @__PURE__ */ jsxs("div", { children: [
@@ -603,14 +640,25 @@ function ReplyComposer({
           subject
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: cn(PROSE, "max-h-72 overflow-auto"), dangerouslySetInnerHTML: { __html: previewHtml } }),
+      previewState.loading ? /* @__PURE__ */ jsxs("div", { "data-slot": "conv-preview-loading", role: "status", className: "text-muted-foreground flex items-center gap-2 px-1 py-6 text-[13px]", children: [
+        /* @__PURE__ */ jsx("span", { className: "border-muted-foreground/40 border-t-foreground size-4 animate-spin rounded-full border-2", "aria-hidden": true }),
+        "Loading preview\u2026"
+      ] }) : previewState.error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", children: previewState.error }) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "conv-preview-body",
+          "data-confirmation-token": (_c = previewState.confirmationToken) != null ? _c : void 0,
+          className: cn(PROSE, "max-h-72 overflow-auto"),
+          dangerouslySetInnerHTML: { __html: (_d = previewState.html) != null ? _d : "" }
+        }
+      ),
       sendError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", children: sendError }) : null,
       /* @__PURE__ */ jsxs(DialogFooter, { className: "sm:justify-between", children: [
         /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            disabled: sending,
+            disabled: sending || previewState.loading,
             onClick: handleDraft,
             className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50",
             children: [
@@ -620,13 +668,16 @@ function ReplyComposer({
           }
         ),
         /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => setPreview(false), children: "Keep editing" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => {
+            setPreview(false);
+            setPreviewState(IDLE_PREVIEW);
+          }, children: "Keep editing" }),
           /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
               size: "sm",
-              disabled: sending,
+              disabled: sending || previewState.loading,
               onClick: handleSend,
               children: [
                 /* @__PURE__ */ jsx(Send, { size: 14 }),
@@ -647,6 +698,7 @@ function ThreadBody({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail
 }) {
   const canReply = thread.canReply !== false;
@@ -661,7 +713,7 @@ function ThreadBody({
     return o;
   });
   const toggle = (id) => setExpanded((e) => __spreadProps(__spreadValues({}, e), { [id]: !e[id] }));
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-1.5", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-2", children: [
     canReply && thread.paused ? /* @__PURE__ */ jsxs("div", { className: "border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
       /* @__PURE__ */ jsx(Pause, { size: 13, className: "mt-0.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -681,7 +733,7 @@ function ThreadBody({
         " You\u2019re not a participant on this thread, so replying is disabled here."
       ] })
     ] }) : null,
-    canReply && mode === "idle" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    canReply && mode === "idle" ? /* @__PURE__ */ jsxs("div", { "data-slot": "conv-action-row", className: "border-border/70 mt-1 flex flex-wrap items-center gap-x-3 gap-y-2 border-t pt-3", children: [
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: () => {
         setReplyAll(false);
         setMode("replying");
@@ -700,8 +752,8 @@ function ThreadBody({
         /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
         " Open in Gmail"
       ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 ml-auto inline-flex items-center gap-1 text-[11px]", children: [
-        /* @__PURE__ */ jsx(GitMerge, { size: 12 }),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 ml-auto inline-flex items-center gap-1.5 text-[12px]", children: [
+        /* @__PURE__ */ jsx(GitMerge, { size: 13 }),
         " Stays on this thread"
       ] })
     ] }) : null,
@@ -712,6 +764,7 @@ function ThreadBody({
         me,
         replyAll,
         tenantName,
+        onPreviewReply,
         onClose: () => setMode("idle"),
         onSend: async (body, includeSignature) => {
           await (onSendReply == null ? void 0 : onSendReply({ threadId: thread.threadId, body, includeSignature, replyAll }));
@@ -763,6 +816,7 @@ function ThreadRow({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail
 }) {
   const status = effectiveStatus(thread);
@@ -782,8 +836,8 @@ function ThreadRow({
           /* @__PURE__ */ jsx("span", { className: cn("size-2 shrink-0 rounded-full", STATUS_DOT[status]), "aria-hidden": true }),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-semibold", children: thread.subject }),
-              /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded border px-1.5 text-[10px] font-medium leading-4", pill.cls), children: pill.label })
+              /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold", children: thread.subject }),
+              /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded-md border px-1.5 py-px text-[10px] font-medium leading-4", pill.cls), children: pill.label })
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [
               /* @__PURE__ */ jsx("b", { className: "text-foreground/80", children: thread.contact.name }),
@@ -806,6 +860,7 @@ function ThreadRow({
         tenantName,
         onSendReply,
         onCreateGmailDraft,
+        onPreviewReply,
         onOpenInGmail
       }
     ) }) : null
@@ -817,6 +872,7 @@ function ConversationPanel({
   tenantName,
   onSendReply,
   onCreateGmailDraft,
+  onPreviewReply,
   onOpenInGmail,
   defaultOpenThreadId,
   className
@@ -867,8 +923,8 @@ function ConversationPanel({
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-semibold", children: headTitle }),
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-semibold leading-tight", children: headTitle }),
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground mt-0.5 block truncate text-xs", children: [
                   threads.length,
                   " ",
                   threads.length === 1 ? "thread" : "threads",
@@ -893,6 +949,7 @@ function ConversationPanel({
             tenantName,
             onSendReply,
             onCreateGmailDraft,
+            onPreviewReply,
             onOpenInGmail
           },
           t.threadId