modified email block and draft with copilot

apps/x/apps/renderer/src/extensions/email-block.tsx

@@ -1,6 +1,6 @@
 import { mergeAttributes, Node } from '@tiptap/react'
 import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react'
-import { X, Mail, ChevronDown, ExternalLink, Copy, Check, Sparkles, Loader2, MessageSquare } from 'lucide-react'
+import { X, Mail, ChevronDown, ExternalLink, Copy, Check, MessageSquare } from 'lucide-react'
 import { blocks } from '@x/shared'
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { useTheme } from '@/contexts/theme-context'
@@ -18,6 +18,11 @@ function formatEmailDate(dateStr: string): string {
   }
 }
 
+/** Extract just the name part from "Name <email>" format */
+function senderFirstName(from: string): string {
+  const name = from.replace(/<.*>/, '').trim()
+  return name.split(/\s+/)[0] || name
+}
 
 declare global {
   interface Window {
@@ -43,29 +48,15 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
 
   const hasDraft = !!config?.draft_response
   const hasPastSummary = !!config?.past_summary
-  const responseMode = config?.response_mode || 'both'
 
   const { resolvedTheme } = useTheme()
 
   // Local draft state for editing
   const [draftBody, setDraftBody] = useState(config?.draft_response || '')
-  const [contextExpanded, setContextExpanded] = useState(false)
+  const [emailExpanded, setEmailExpanded] = useState(false)
   const [copied, setCopied] = useState(false)
-  const [generating, setGenerating] = useState(false)
-  const [responseSplitOpen, setResponseSplitOpen] = useState(false)
-  const responseSplitRef = useRef<HTMLDivElement>(null)
   const bodyRef = useRef<HTMLTextAreaElement>(null)
 
-  // Close split dropdown on outside click
-  useEffect(() => {
-    if (!responseSplitOpen) return
-    const handler = (e: MouseEvent) => {
-      if (responseSplitRef.current && !responseSplitRef.current.contains(e.target as globalThis.Node)) setResponseSplitOpen(false)
-    }
-    document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
-  }, [responseSplitOpen])
-
   // Sync draft from external changes
   useEffect(() => {
     try {
@@ -89,53 +80,23 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
     } catch { /* ignore */ }
   }, [raw, updateAttributes])
 
-  const generateResponse = useCallback(async () => {
-    if (!config || generating) return
-    setGenerating(true)
-    try {
-      const ipc = (window as unknown as { ipc: { invoke: (channel: string, args: Record<string, unknown>) => Promise<{ response?: string }> } }).ipc
-      // Build context for the agent
-      let noteContent = `# Email: ${config.subject || 'No subject'}\n\n`
-      noteContent += `**From:** ${config.from || 'Unknown'}\n`
-      noteContent += `**Date:** ${config.date || 'Unknown'}\n\n`
-      noteContent += `## Latest email\n\n${config.latest_email}\n\n`
-      if (config.past_summary) {
-        noteContent += `## Earlier conversation summary\n\n${config.past_summary}\n\n`
-      }
-
-      const result = await ipc.invoke('inline-task:process', {
-        instruction: `Draft a concise, professional response to this email. Return only the email body text, no subject line or headers.`,
-        noteContent,
-        notePath: '',
-      })
-
-      if (result.response) {
-        // Clean up the response — strip any markdown headers the agent may add
-        const cleaned = result.response.replace(/^#+\s+.*\n*/gm, '').trim()
-        setDraftBody(cleaned)
-        // Update the block data to include the draft
-        const current = JSON.parse(raw) as Record<string, unknown>
-        updateAttributes({ data: JSON.stringify({ ...current, draft_response: cleaned }) })
-      }
-    } catch (err) {
-      console.error('[email-block] Failed to generate response:', err)
-    } finally {
-      setGenerating(false)
-    }
-  }, [config, generating, raw, updateAttributes])
-
   const draftWithAssistant = useCallback(() => {
     if (!config) return
-    let prompt = `Help me draft a response to this email`
+    let prompt = draftBody
+      ? `Help me refine this draft response to an email`
+      : `Help me draft a response to this email`
     if (config.threadId) {
       prompt += `. Read the full thread at gmail_sync/${config.threadId}.md for context`
     }
     prompt += `.\n\n`
     prompt += `**From:** ${config.from || 'Unknown'}\n`
     prompt += `**Subject:** ${config.subject || 'No subject'}\n`
+    if (draftBody) {
+      prompt += `\n**Current draft:**\n${draftBody}\n`
+    }
     window.__pendingEmailDraft = { prompt }
     window.dispatchEvent(new Event('email-block:draft-with-assistant'))
-  }, [config])
+  }, [config, draftBody])
 
   if (!config) {
     return (
@@ -152,192 +113,112 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
     ? `https://mail.google.com/mail/u/0/#all/${config.threadId}`
     : null
 
-  const senderName = config.from || 'Unknown'
+  // Build summary: use explicit summary, or auto-generate from sender + subject
+  const summary = config.summary
+    || (config.from && config.subject
+      ? `${senderFirstName(config.from)} reached out about ${config.subject}`
+      : config.subject || 'New email')
 
-  // --- Render: Draft mode (draft_response present) ---
-  if (hasDraft) {
-    return (
-      <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
-        <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
-          <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
-            <X size={14} />
-          </button>
-          {/* Draft header – Gmail compose style */}
-          <div className="email-draft-block-header">
-            {config.to && (
-              <div className="email-draft-block-field">
-                <span className="email-draft-block-label">To</span>
-                <span className="email-draft-block-value">{config.to}</span>
-              </div>
-            )}
-            {config.subject && (
-              <div className="email-draft-block-field">
-                <span className="email-draft-block-label">Subject</span>
-                <span className="email-draft-block-value">{config.subject}</span>
-              </div>
-            )}
-          </div>
-          {/* Editable draft body */}
-          <textarea
-            key={resolvedTheme}
-            ref={bodyRef}
-            className="email-draft-block-body-input"
-            value={draftBody}
-            onChange={(e) => setDraftBody(e.target.value)}
-            onBlur={() => commitDraft(draftBody)}
-            placeholder="Write your reply..."
-            rows={3}
-          />
-          {/* Action buttons – Gmail style */}
-          <div className="email-draft-block-actions">
-            {(hasPastSummary || config.latest_email) && (
-              <button
-                className="email-block-gmail-btn"
-                onClick={(e) => { e.stopPropagation(); setContextExpanded(!contextExpanded) }}
-                onMouseDown={(e) => e.stopPropagation()}
-              >
-                <ChevronDown size={13} className={`email-block-toggle-chevron ${contextExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
-                {contextExpanded ? 'Hide' : 'Show'} context
-              </button>
-            )}
-            <button
-              className="email-block-gmail-btn email-block-gmail-btn-primary"
-              onClick={() => {
-                void navigator.clipboard.writeText(draftBody)
-                setCopied(true)
-                setTimeout(() => setCopied(false), 2000)
-              }}
-            >
-              {copied ? <Check size={13} /> : <Copy size={13} />}
-              {copied ? 'Copied!' : 'Copy draft'}
-            </button>
-            {gmailUrl && (
-              <button
-                className="email-block-gmail-btn email-block-gmail-btn-primary"
-                onClick={() => {
-                  void navigator.clipboard.writeText(draftBody)
-                  setCopied(true)
-                  setTimeout(() => setCopied(false), 2000)
-                  window.open(gmailUrl, '_blank')
-                }}
-              >
-                <ExternalLink size={13} />
-                Reply in Gmail
-              </button>
-            )}
-          </div>
-          {/* Context: latest email + past summary */}
-          {contextExpanded && (
-            <div className="email-block-context">
-              <div className="email-block-context-section">
-                <div className="email-block-message">
-                  <div className="email-block-message-header">
-                    <div className="email-block-sender-info">
-                      <div className="email-block-sender-row">
-                        {config.from && <div className="email-block-sender-name">{config.from}</div>}
-                        {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
-                      </div>
-                      <div className="email-block-sender-to">to me</div>
-                    </div>
-                  </div>
-                  <div className="email-block-message-body">{config.latest_email}</div>
-                </div>
-              </div>
-              {hasPastSummary && (
-                <div className="email-block-context-section">
-                  <div className="email-block-context-label">Earlier conversation</div>
-                  <div className="email-block-context-summary">{config.past_summary}</div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      </NodeViewWrapper>
-    )
-  }
-
-  // --- Render: Read mode (no draft_response) ---
   return (
     <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
       <div className="email-block-card email-block-card-gmail" onMouseDown={(e) => e.stopPropagation()}>
         <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
           <X size={14} />
         </button>
-        {config.subject && <div className="email-block-subject">{config.subject}</div>}
+
-        {/* Latest email message */}
+        {/* Header: Email badge */}
-        <div className="email-block-message">
+        <div className="email-block-badge">
-          <div className="email-block-message-header">
+          <Mail size={13} />
-            <div className="email-block-sender-info">
+          Email
-              <div className="email-block-sender-row">
-                <div className="email-block-sender-name">{senderName}</div>
-                {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
-              </div>
-              <div className="email-block-sender-to">to me</div>
-            </div>
-          </div>
-          <div className="email-block-message-body">{config.latest_email}</div>
         </div>
-        {/* Action buttons – Gmail style */}
+
-        <div className="email-draft-block-actions">
+        {/* Summary */}
-          {hasPastSummary && (
+        <div className="email-block-summary">{summary}</div>
-            <button
+
-              className="email-block-gmail-btn"
+        {/* Expandable email details */}
-              onClick={(e) => { e.stopPropagation(); setContextExpanded(!contextExpanded) }}
+        <button
-              onMouseDown={(e) => e.stopPropagation()}
+          className="email-block-expand-btn"
-            >
+          onClick={(e) => { e.stopPropagation(); setEmailExpanded(!emailExpanded) }}
-              <ChevronDown size={13} className={`email-block-toggle-chevron ${contextExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
+          onMouseDown={(e) => e.stopPropagation()}
-              {contextExpanded ? 'Hide' : 'Show'} context
+        >
-            </button>
+          <ChevronDown size={13} className={`email-block-toggle-chevron ${emailExpanded ? 'email-block-toggle-chevron-open' : ''}`} />
-          )}
+          {emailExpanded ? 'Hide email' : 'Show email'}
-          {responseMode === 'inline' && (
+          {config.from && <span className="email-block-expand-meta">· From {senderFirstName(config.from)}</span>}
-            <button
+          {config.date && <span className="email-block-expand-meta">· {formatEmailDate(config.date)}</span>}
-              className="email-block-gmail-btn email-block-gmail-btn-primary"
+        </button>
-              onClick={generateResponse}
+
-              disabled={generating}
+        {emailExpanded && (
-            >
+          <div className="email-block-email-details">
-              {generating ? <Loader2 size={13} className="email-block-spinner" /> : <Sparkles size={13} />}
+            <div className="email-block-message">
-              {generating ? 'Generating...' : 'Generate response'}
+              <div className="email-block-message-header">
-            </button>
+                <div className="email-block-sender-info">
-          )}
+                  <div className="email-block-sender-row">
-          {responseMode === 'assistant' && (
+                    <div className="email-block-sender-name">{config.from || 'Unknown'}</div>
-            <button
+                    {config.date && <div className="email-block-sender-date">{formatEmailDate(config.date)}</div>}
-              className="email-block-gmail-btn email-block-gmail-btn-primary"
+                  </div>
-              onClick={draftWithAssistant}
+                  {config.subject && <div className="email-block-subject-line">Subject: {config.subject}</div>}
-            >
-              <MessageSquare size={13} />
-              Draft with assistant
-            </button>
-          )}
-          {responseMode === 'both' && (
-            <div className="email-block-response-split" ref={responseSplitRef}>
-              <button
-                className="email-block-split-main"
-                onClick={generateResponse}
-                disabled={generating}
-              >
-                {generating ? <Loader2 size={13} className="email-block-spinner" /> : <Sparkles size={13} />}
-                {generating ? 'Generating...' : 'Generate response'}
-              </button>
-              <button
-                className={`email-block-split-chevron ${responseSplitOpen ? 'email-block-split-chevron-open' : ''}`}
-                onMouseDown={(e) => e.stopPropagation()}
-                onClick={(e) => { e.stopPropagation(); setResponseSplitOpen(!responseSplitOpen) }}
-              >
-                <ChevronDown size={12} />
-              </button>
-              {responseSplitOpen && (
-                <div className="email-block-split-dropdown">
-                  <button
-                    className="email-block-split-option"
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onClick={(e) => { e.stopPropagation(); setResponseSplitOpen(false); draftWithAssistant() }}
-                  >
-                    <MessageSquare size={13} />
-                    Draft with assistant
-                  </button>
                 </div>
-              )}
+              </div>
+              <div className="email-block-message-body">{config.latest_email}</div>
             </div>
+            {hasPastSummary && (
+              <div className="email-block-context-section">
+                <div className="email-block-context-label">Earlier conversation</div>
+                <div className="email-block-context-summary">{config.past_summary}</div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Draft section */}
+        {hasDraft && (
+          <div className="email-block-draft-section">
+            <div className="email-block-draft-label">Draft reply</div>
+            <textarea
+              key={resolvedTheme}
+              ref={bodyRef}
+              className="email-draft-block-body-input"
+              value={draftBody}
+              onChange={(e) => setDraftBody(e.target.value)}
+              onBlur={() => commitDraft(draftBody)}
+              placeholder="Write your reply..."
+              rows={3}
+            />
+          </div>
+        )}
+
+        {/* Action buttons */}
+        <div className="email-block-actions">
+          <button
+            className="email-block-gmail-btn email-block-gmail-btn-primary"
+            onClick={draftWithAssistant}
+          >
+            <MessageSquare size={13} />
+            {hasDraft ? 'Refine with Rowboat' : 'Draft with Rowboat'}
+          </button>
+          {hasDraft && (
+            <button
+              className="email-block-gmail-btn email-block-gmail-btn-primary"
+              onClick={() => {
+                navigator.clipboard.writeText(draftBody).then(() => {
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 2000)
+                }).catch(() => {
+                  // Fallback for Electron contexts where clipboard API may fail
+                  const textarea = document.createElement('textarea')
+                  textarea.value = draftBody
+                  document.body.appendChild(textarea)
+                  textarea.select()
+                  document.execCommand('copy')
+                  document.body.removeChild(textarea)
+                  setCopied(true)
+                  setTimeout(() => setCopied(false), 2000)
+                })
+              }}
+            >
+              {copied ? <Check size={13} /> : <Copy size={13} />}
+              {copied ? 'Copied!' : 'Copy draft'}
+            </button>
           )}
           {gmailUrl && (
             <button
@@ -349,15 +230,6 @@ function EmailBlockView({ node, deleteNode, updateAttributes }: {
             </button>
           )}
         </div>
-        {/* Past summary context */}
-        {contextExpanded && hasPastSummary && (
-          <div className="email-block-context">
-            <div className="email-block-context-section">
-              <div className="email-block-context-label">Earlier conversation</div>
-              <div className="email-block-context-summary">{config.past_summary}</div>
-            </div>
-          </div>
-        )}
       </div>
     </NodeViewWrapper>
   )

apps/x/apps/renderer/src/styles/editor.css

@@ -1112,65 +1112,50 @@
   background-color: var(--background);
 }
 
-.tiptap-editor .ProseMirror .email-block-subject {
+/* Email badge */
-  font-size: 18px;
+.tiptap-editor .ProseMirror .email-block-badge {
-  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  margin-bottom: 8px;
+}
+
+/* Summary */
+.tiptap-editor .ProseMirror .email-block-summary {
+  font-size: 15px;
+  font-weight: 500;
   color: var(--foreground);
-  margin-bottom: 16px;
   line-height: 1.4;
+  margin-bottom: 10px;
 }
 
-.tiptap-editor .ProseMirror .email-block-loading,
+/* Expand button */
-.tiptap-editor .ProseMirror .email-block-empty {
+.tiptap-editor .ProseMirror .email-block-expand-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 50px;
-  justify-content: center;
-  font-size: 14px;
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-block-error,
-.tiptap-editor .ProseMirror .email-draft-block-error {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
-  font-size: 14px;
-}
-
-.tiptap-editor .ProseMirror .email-block-error-msg {
-  font-size: 13px;
-  color: #d93025;
-  padding: 8px 0;
-}
-
-.tiptap-editor .ProseMirror .email-block-thread {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.tiptap-editor .ProseMirror .email-block-thread-toggle {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
+  padding: 0;
-  margin-bottom: 6px;
+  font-size: 13px;
-  font-size: 12px;
+  font-weight: 400;
-  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
+  background: none;
-  background: transparent;
+  border: none;
-  border: 1px solid var(--border);
-  border-radius: 16px;
   cursor: pointer;
-  transition: background-color 0.12s ease;
+  transition: color 0.12s ease;
-  width: fit-content;
+  margin-bottom: 4px;
 }
 
-.tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
+.tiptap-editor .ProseMirror .email-block-expand-btn:hover {
-  background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  color: var(--foreground);
+}
+
+.tiptap-editor .ProseMirror .email-block-expand-meta {
+  color: color-mix(in srgb, var(--foreground) 35%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-block-toggle-chevron {
@@ -1181,35 +1166,26 @@
   transform: rotate(180deg);
 }
 
-.tiptap-editor .ProseMirror .email-block-message {
+/* Email details (expanded) */
-  padding: 0 0 8px;
+.tiptap-editor .ProseMirror .email-block-email-details {
+  margin-top: 10px;
+  padding: 12px;
+  background: color-mix(in srgb, var(--foreground) 4%, transparent);
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
-.tiptap-editor .ProseMirror .email-block-message + .email-block-message {
+.tiptap-editor .ProseMirror .email-block-message {
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+  padding: 0;
-  padding-top: 16px;
 }
 
 .tiptap-editor .ProseMirror .email-block-message-header {
   display: flex;
   align-items: flex-start;
   gap: 12px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
-}
-
-.tiptap-editor .ProseMirror .email-block-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #1a73e8;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 500;
-  flex-shrink: 0;
-  letter-spacing: 0.02em;
 }
 
 .tiptap-editor .ProseMirror .email-block-sender-info {
@@ -1217,7 +1193,7 @@
   flex-direction: column;
   min-width: 0;
   flex: 1;
-  gap: 1px;
+  gap: 2px;
 }
 
 .tiptap-editor .ProseMirror .email-block-sender-row {
@@ -1235,14 +1211,14 @@
 
 .tiptap-editor .ProseMirror .email-block-sender-date {
   font-size: 12px;
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
   white-space: nowrap;
   flex-shrink: 0;
 }
 
-.tiptap-editor .ProseMirror .email-block-sender-to {
+.tiptap-editor .ProseMirror .email-block-subject-line {
   font-size: 12px;
-  color: color-mix(in srgb, var(--foreground) 55%, transparent);
+  color: color-mix(in srgb, var(--foreground) 45%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-block-message-body {
@@ -1250,22 +1226,14 @@
   color: color-mix(in srgb, var(--foreground) 80%, transparent);
   white-space: pre-wrap;
   line-height: 1.58;
-  padding-left: 0;
-}
-
-.tiptap-editor .ProseMirror .email-block-context {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
 }
 
 .tiptap-editor .ProseMirror .email-block-context-section {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  padding-top: 10px;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
 }
 
 .tiptap-editor .ProseMirror .email-block-context-label {
@@ -1285,12 +1253,53 @@
   border-left: 3px solid color-mix(in srgb, var(--foreground) 12%, transparent);
 }
 
-/* Gmail-style action buttons */
+/* Draft section */
+.tiptap-editor .ProseMirror .email-block-draft-section {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+  border-radius: 6px;
+}
+
+.tiptap-editor .ProseMirror .email-block-draft-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: color-mix(in srgb, var(--foreground) 40%, transparent);
+  margin-bottom: 4px;
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-body-input {
+  width: 100%;
+  font-size: 14px;
+  color: var(--foreground);
+  background: none;
+  border: none;
+  outline: none;
+  padding: 4px 0;
+  font-family: inherit;
+  line-height: 1.58;
+  resize: none;
+  overflow: hidden;
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
+  color: color-mix(in srgb, var(--foreground) 35%, transparent);
+}
+
+/* Action buttons */
+.tiptap-editor .ProseMirror .email-block-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
 .tiptap-editor .ProseMirror .email-block-gmail-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-top: 0;
   padding: 7px 16px;
   font-size: 14px;
   font-weight: 500;
@@ -1327,208 +1336,13 @@
   color: #fff;
 }
 
-@keyframes email-block-spin {
+.tiptap-editor .ProseMirror .email-block-error,
-  to { transform: rotate(360deg); }
+.tiptap-editor .ProseMirror .email-draft-block-error {
-}
+  display: flex;
-
-.tiptap-editor .ProseMirror .email-block-spinner {
-  animation: email-block-spin 1s linear infinite;
-}
-
-/* Email block split button (generate/assistant) – Gmail style */
-.tiptap-editor .ProseMirror .email-block-response-split {
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  margin-top: 0;
-}
-
-.tiptap-editor .ProseMirror .email-block-response-split > button {
-  box-sizing: border-box;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-main {
-  display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 7px 8px 7px 16px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #fff;
-  background: #1a73e8;
-  border: 1px solid #1a73e8;
-  border-right: none;
-  border-radius: 18px 0 0 18px;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-main:hover:not(:disabled) {
-  background: #1765cc;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-main:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-chevron {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 7px 8px;
-  color: #fff;
-  background: #1a73e8;
-  border: 1px solid #1a73e8;
-  border-left: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 0 18px 18px 0;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-chevron:hover {
-  background: #1765cc;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-chevron-open {
-  border-radius: 0 18px 0 0;
-  border-bottom-color: transparent;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-dropdown {
-  position: absolute;
-  top: calc(100%);
-  right: 0;
-  z-index: 50;
-  background: var(--background);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
-  margin-top: 4px;
-  overflow: hidden;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-  padding: 8px 16px;
-  font-size: 14px;
-  font-weight: 400;
-  color: var(--foreground);
-  background: none;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.12s ease;
-}
-
-.tiptap-editor .ProseMirror .email-block-split-option:hover {
-  background: color-mix(in srgb, var(--foreground) 8%, transparent);
-}
-
-/* Email draft block – Gmail compose style */
-.tiptap-editor .ProseMirror .email-draft-block-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  margin-bottom: 12px;
-  padding-bottom: 0;
-  border-bottom: none;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-field {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  padding: 6px 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-label {
-  font-weight: 500;
-  color: color-mix(in srgb, var(--foreground) 45%, transparent);
-  min-width: 55px;
-  font-size: 14px;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-value {
-  color: var(--foreground);
-  font-size: 14px;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-input {
-  flex: 1;
-  font-size: 14px;
-  color: var(--foreground);
-  background: none;
-  border: none;
-  outline: none;
-  padding: 2px 0;
-  font-family: inherit;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-input::placeholder {
-  color: color-mix(in srgb, var(--foreground) 35%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-body-input {
-  width: 100%;
-  font-size: 14px;
-  color: var(--foreground);
-  background: none;
-  border: none;
-  outline: none;
-  padding: 8px 0;
-  font-family: inherit;
-  line-height: 1.58;
-  resize: none;
-  overflow: hidden;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
-  color: color-mix(in srgb, var(--foreground) 35%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-reply {
-  margin-top: 6px;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-reply-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  margin-bottom: 6px;
-  font-size: 12px;
-  font-weight: 500;
   color: color-mix(in srgb, var(--foreground) 55%, transparent);
-  background: transparent;
+  font-size: 14px;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  cursor: pointer;
-  transition: background-color 0.12s ease;
-  width: fit-content;
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-reply-toggle:hover {
-  background: color-mix(in srgb, var(--foreground) 8%, transparent);
-}
-
-.tiptap-editor .ProseMirror .email-draft-block-reply-thread {
-  padding: 4px 0 0 12px;
-  border-left: 3px solid color-mix(in srgb, var(--foreground) 12%, transparent);
-  margin-left: 4px;
 }
 
 /* Transcript block */

apps/x/packages/shared/src/blocks.ts

@@ -63,6 +63,7 @@ export type CalendarBlock = z.infer<typeof CalendarBlockSchema>;
 
 export const EmailBlockSchema = z.object({
   threadId: z.string().optional(),
+  summary: z.string().optional(),
   subject: z.string().optional(),
   from: z.string().optional(),
   to: z.string().optional(),