email block initial

apps/x/apps/renderer/src/components/markdown-editor.tsx

@@ -14,6 +14,7 @@ import { EmbedBlockExtension } from '@/extensions/embed-block'
 import { ChartBlockExtension } from '@/extensions/chart-block'
 import { TableBlockExtension } from '@/extensions/table-block'
 import { CalendarBlockExtension } from '@/extensions/calendar-block'
+import { EmailBlockExtension } from '@/extensions/email-block'
 import { Markdown } from 'tiptap-markdown'
 import { useEffect, useCallback, useMemo, useRef, useState } from 'react'
 import { Calendar, ChevronDown, ExternalLink } from 'lucide-react'
@@ -152,6 +153,8 @@ function getMarkdownWithBlankLines(editor: Editor): string {
       blocks.push('```table\n' + (node.attrs?.data as string || '{}') + '\n```')
     } else if (node.type === 'calendarBlock') {
       blocks.push('```calendar\n' + (node.attrs?.data as string || '{}') + '\n```')
+    } else if (node.type === 'emailBlock') {
+      blocks.push('```email\n' + (node.attrs?.data as string || '{}') + '\n```')
     } else if (node.type === 'codeBlock') {
       const lang = (node.attrs?.language as string) || ''
       blocks.push('```' + lang + '\n' + nodeToText(node) + '\n```')
@@ -563,6 +566,7 @@ export function MarkdownEditor({
       ChartBlockExtension,
       TableBlockExtension,
       CalendarBlockExtension,
+      EmailBlockExtension,
       WikiLink.configure({
         onCreate: wikiLinks?.onCreate
           ? (path) => {

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

@@ -0,0 +1,333 @@
+import { mergeAttributes, Node } from '@tiptap/react'
+import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react'
+import { X, Mail, ChevronDown, ExternalLink, Copy, Check, Sparkles, Loader2 } from 'lucide-react'
+import { blocks } from '@x/shared'
+import { useState, useEffect, useRef, useCallback } from 'react'
+
+// --- Helpers ---
+
+function formatEmailDate(dateStr: string): string {
+  try {
+    const d = new Date(dateStr)
+    if (isNaN(d.getTime())) return dateStr
+    return d.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' }) +
+      ' ' + d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+  } catch {
+    return dateStr
+  }
+}
+
+function getInitials(name: string): string {
+  return name.split(/\s+/).map(w => w[0]).filter(Boolean).slice(0, 2).join('').toUpperCase()
+}
+
+// --- Email Block ---
+
+function EmailBlockView({ node, deleteNode, updateAttributes }: {
+  node: { attrs: Record<string, unknown> }
+  deleteNode: () => void
+  updateAttributes: (attrs: Record<string, unknown>) => void
+}) {
+  const raw = node.attrs.data as string
+  let config: blocks.EmailBlock | null = null
+
+  try {
+    config = blocks.EmailBlockSchema.parse(JSON.parse(raw))
+  } catch {
+    // fallback below
+  }
+
+  const hasDraft = !!config?.draft_response
+  const hasPastSummary = !!config?.past_summary
+
+  // Local draft state for editing
+  const [draftBody, setDraftBody] = useState(config?.draft_response || '')
+  const [contextExpanded, setContextExpanded] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [generating, setGenerating] = useState(false)
+  const bodyRef = useRef<HTMLTextAreaElement>(null)
+
+  // Sync draft from external changes
+  useEffect(() => {
+    try {
+      const parsed = blocks.EmailBlockSchema.parse(JSON.parse(raw))
+      setDraftBody(parsed.draft_response || '')
+    } catch { /* ignore */ }
+  }, [raw])
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (bodyRef.current) {
+      bodyRef.current.style.height = 'auto'
+      bodyRef.current.style.height = bodyRef.current.scrollHeight + 'px'
+    }
+  }, [draftBody])
+
+  const commitDraft = useCallback((newBody: string) => {
+    try {
+      const current = JSON.parse(raw) as Record<string, unknown>
+      updateAttributes({ data: JSON.stringify({ ...current, draft_response: newBody }) })
+    } 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])
+
+  if (!config) {
+    return (
+      <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
+        <div className="email-block-card email-block-error">
+          <Mail size={16} />
+          <span>Invalid email block</span>
+        </div>
+      </NodeViewWrapper>
+    )
+  }
+
+  const gmailUrl = config.threadId
+    ? `https://mail.google.com/mail/u/0/#all/${config.threadId}`
+    : null
+
+  // --- Render: Draft mode (draft_response present) ---
+  if (hasDraft) {
+    return (
+      <NodeViewWrapper className="email-block-wrapper" data-type="email-block">
+        <div className="email-block-card" onMouseDown={(e) => e.stopPropagation()}>
+          <button className="email-block-delete" onClick={deleteNode} aria-label="Delete email block">
+            <X size={14} />
+          </button>
+          {/* Draft header */}
+          {config.to && (
+            <div className="email-draft-block-header">
+              <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
+            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 */}
+          <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"
+              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"
+                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">
+                    {config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
+                    <div className="email-block-sender-info">
+                      {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>
+                  <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" 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 */}
+        <div className="email-block-message">
+          <div className="email-block-message-header">
+            {config.from && <div className="email-block-avatar">{getInitials(config.from)}</div>}
+            <div className="email-block-sender-info">
+              {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>
+          <div className="email-block-message-body">{config.latest_email}</div>
+        </div>
+        {/* Action buttons */}
+        <div className="email-draft-block-actions">
+          {hasPastSummary && (
+            <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-generate-btn"
+            onClick={generateResponse}
+            disabled={generating}
+          >
+            {generating ? <Loader2 size={13} className="email-block-spinner" /> : <Sparkles size={13} />}
+            {generating ? 'Generating...' : 'Generate response'}
+          </button>
+          {gmailUrl && (
+            <button
+              className="email-block-gmail-btn"
+              onClick={() => window.open(gmailUrl, '_blank')}
+            >
+              <ExternalLink size={13} />
+              Open in Gmail
+            </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>
+  )
+}
+
+export const EmailBlockExtension = Node.create({
+  name: 'emailBlock',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes() {
+    return {
+      data: { default: '{}' },
+    }
+  },
+
+  parseHTML() {
+    return [{
+      tag: 'pre',
+      priority: 60,
+      getAttrs(element) {
+        const code = element.querySelector('code')
+        if (!code) return false
+        const cls = code.className || ''
+        if (cls.includes('language-email') && !cls.includes('language-emailDraft')) {
+          return { data: code.textContent || '{}' }
+        }
+        return false
+      },
+    }]
+  },
+
+  renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, unknown> }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'email-block' })]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EmailBlockView)
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state: { write: (text: string) => void; closeBlock: (node: unknown) => void }, node: { attrs: { data: string } }) {
+          state.write('```email\n' + node.attrs.data + '\n```')
+          state.closeBlock(node)
+        },
+        parse: {},
+      },
+    }
+  },
+})

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

@@ -617,7 +617,8 @@
 .tiptap-editor .ProseMirror .embed-block-wrapper,
 .tiptap-editor .ProseMirror .chart-block-wrapper,
 .tiptap-editor .ProseMirror .table-block-wrapper,
-.tiptap-editor .ProseMirror .calendar-block-wrapper {
+.tiptap-editor .ProseMirror .calendar-block-wrapper,
+.tiptap-editor .ProseMirror .email-block-wrapper {
   margin: 8px 0;
 }
 
@@ -625,7 +626,9 @@
 .tiptap-editor .ProseMirror .embed-block-card,
 .tiptap-editor .ProseMirror .chart-block-card,
 .tiptap-editor .ProseMirror .table-block-card,
-.tiptap-editor .ProseMirror .calendar-block-card {
+.tiptap-editor .ProseMirror .calendar-block-card,
+.tiptap-editor .ProseMirror .email-block-card,
+.tiptap-editor .ProseMirror .email-draft-block-card {
   position: relative;
   padding: 12px 14px;
   border: 1px solid var(--border);
@@ -639,7 +642,9 @@
 .tiptap-editor .ProseMirror .embed-block-card:hover,
 .tiptap-editor .ProseMirror .chart-block-card:hover,
 .tiptap-editor .ProseMirror .table-block-card:hover,
-.tiptap-editor .ProseMirror .calendar-block-card:hover {
+.tiptap-editor .ProseMirror .calendar-block-card:hover,
+.tiptap-editor .ProseMirror .email-block-card:hover,
+.tiptap-editor .ProseMirror .email-draft-block-card:hover {
   background-color: color-mix(in srgb, var(--muted) 70%, transparent);
 }
 
@@ -647,7 +652,9 @@
 .tiptap-editor .ProseMirror .embed-block-wrapper.ProseMirror-selectednode .embed-block-card,
 .tiptap-editor .ProseMirror .chart-block-wrapper.ProseMirror-selectednode .chart-block-card,
 .tiptap-editor .ProseMirror .table-block-wrapper.ProseMirror-selectednode .table-block-card,
-.tiptap-editor .ProseMirror .calendar-block-wrapper.ProseMirror-selectednode .calendar-block-card {
+.tiptap-editor .ProseMirror .calendar-block-wrapper.ProseMirror-selectednode .calendar-block-card,
+.tiptap-editor .ProseMirror .email-block-wrapper.ProseMirror-selectednode .email-block-card,
+.tiptap-editor .ProseMirror .email-draft-block-wrapper.ProseMirror-selectednode .email-draft-block-card {
   outline: 2px solid var(--primary);
   outline-offset: 1px;
 }
@@ -656,7 +663,9 @@
 .tiptap-editor .ProseMirror .embed-block-delete,
 .tiptap-editor .ProseMirror .chart-block-delete,
 .tiptap-editor .ProseMirror .table-block-delete,
-.tiptap-editor .ProseMirror .calendar-block-delete {
+.tiptap-editor .ProseMirror .calendar-block-delete,
+.tiptap-editor .ProseMirror .email-block-delete,
+.tiptap-editor .ProseMirror .email-draft-block-delete {
   position: absolute;
   top: 6px;
   right: 6px;
@@ -679,7 +688,9 @@
 .tiptap-editor .ProseMirror .embed-block-card:hover .embed-block-delete,
 .tiptap-editor .ProseMirror .chart-block-card:hover .chart-block-delete,
 .tiptap-editor .ProseMirror .table-block-card:hover .table-block-delete,
-.tiptap-editor .ProseMirror .calendar-block-card:hover .calendar-block-delete {
+.tiptap-editor .ProseMirror .calendar-block-card:hover .calendar-block-delete,
+.tiptap-editor .ProseMirror .email-block-card:hover .email-block-delete,
+.tiptap-editor .ProseMirror .email-draft-block-card:hover .email-draft-block-delete {
   opacity: 1;
 }
 
@@ -687,7 +698,9 @@
 .tiptap-editor .ProseMirror .embed-block-delete:hover,
 .tiptap-editor .ProseMirror .chart-block-delete:hover,
 .tiptap-editor .ProseMirror .table-block-delete:hover,
-.tiptap-editor .ProseMirror .calendar-block-delete:hover {
+.tiptap-editor .ProseMirror .calendar-block-delete:hover,
+.tiptap-editor .ProseMirror .email-block-delete:hover,
+.tiptap-editor .ProseMirror .email-draft-block-delete:hover {
   background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
   color: var(--foreground);
 }
@@ -998,6 +1011,304 @@
   border-color: color-mix(in srgb, #7ec8c8 40%, transparent);
 }
 
+/* Email block */
+.tiptap-editor .ProseMirror .email-block-subject {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--foreground);
+  margin-bottom: 8px;
+}
+
+.tiptap-editor .ProseMirror .email-block-loading,
+.tiptap-editor .ProseMirror .email-block-empty {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 50px;
+  justify-content: center;
+  font-size: 13px;
+  color: color-mix(in srgb, var(--foreground) 45%, 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: 13px;
+}
+
+.tiptap-editor .ProseMirror .email-block-error-msg {
+  font-size: 13px;
+  color: #ef4444;
+  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;
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
+  background: color-mix(in srgb, var(--foreground) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+  width: fit-content;
+}
+
+.tiptap-editor .ProseMirror .email-block-thread-toggle:hover {
+  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-toggle-chevron {
+  transition: transform 0.15s ease;
+}
+
+.tiptap-editor .ProseMirror .email-block-toggle-chevron-open {
+  transform: rotate(180deg);
+}
+
+.tiptap-editor .ProseMirror .email-block-message {
+  padding: 8px 0;
+}
+
+.tiptap-editor .ProseMirror .email-block-message + .email-block-message {
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-message-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.tiptap-editor .ProseMirror .email-block-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--primary) 20%, transparent);
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.tiptap-editor .ProseMirror .email-block-sender-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.tiptap-editor .ProseMirror .email-block-sender-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--foreground);
+}
+
+.tiptap-editor .ProseMirror .email-block-sender-date {
+  font-size: 11px;
+  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-message-body {
+  font-size: 13px;
+  color: color-mix(in srgb, var(--foreground) 80%, transparent);
+  white-space: pre-wrap;
+  line-height: 1.5;
+  padding-left: 36px;
+}
+
+.tiptap-editor .ProseMirror .email-block-context {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tiptap-editor .ProseMirror .email-block-context-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tiptap-editor .ProseMirror .email-block-context-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: color-mix(in srgb, var(--foreground) 40%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-context-summary {
+  font-size: 13px;
+  color: color-mix(in srgb, var(--foreground) 65%, transparent);
+  line-height: 1.5;
+  white-space: pre-wrap;
+  padding-left: 8px;
+  border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-gmail-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: 8px;
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 60%, transparent);
+  background: color-mix(in srgb, var(--foreground) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  width: fit-content;
+}
+
+.tiptap-editor .ProseMirror .email-block-gmail-btn:hover {
+  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  color: var(--foreground);
+}
+
+.tiptap-editor .ProseMirror .email-block-gmail-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.tiptap-editor .ProseMirror .email-block-generate-btn {
+  color: var(--primary);
+  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-block-generate-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  color: var(--primary);
+}
+
+@keyframes email-block-spin {
+  to { transform: rotate(360deg); }
+}
+
+.tiptap-editor .ProseMirror .email-block-spinner {
+  animation: email-block-spin 1s linear infinite;
+}
+
+/* Email draft block */
+.tiptap-editor .ProseMirror .email-draft-block-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-field {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-label {
+  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 45%, transparent);
+  min-width: 50px;
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-value {
+  color: var(--foreground);
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-input {
+  flex: 1;
+  font-size: 13px;
+  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) 30%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-body-input {
+  width: 100%;
+  font-size: 13px;
+  color: var(--foreground);
+  background: none;
+  border: none;
+  outline: none;
+  padding: 4px 0;
+  font-family: inherit;
+  line-height: 1.6;
+  resize: none;
+  overflow: hidden;
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-body-input::placeholder {
+  color: color-mix(in srgb, var(--foreground) 30%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.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 8px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--foreground) 50%, transparent);
+  background: color-mix(in srgb, var(--foreground) 5%, transparent);
+  border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  border-radius: 12px;
+  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) 10%, transparent);
+}
+
+.tiptap-editor .ProseMirror .email-draft-block-reply-thread {
+  padding: 4px 0 0 8px;
+  border-left: 2px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+  margin-left: 4px;
+}
+
 /* Meeting event banner */
 .meeting-event-banner {
   position: relative;

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

@@ -60,3 +60,16 @@ export const CalendarBlockSchema = z.object({
 });
 
 export type CalendarBlock = z.infer<typeof CalendarBlockSchema>;
+
+export const EmailBlockSchema = z.object({
+  threadId: z.string().optional(),
+  subject: z.string().optional(),
+  from: z.string().optional(),
+  to: z.string().optional(),
+  date: z.string().optional(),
+  latest_email: z.string(),
+  past_summary: z.string().optional(),
+  draft_response: z.string().optional(),
+});
+
+export type EmailBlock = z.infer<typeof EmailBlockSchema>;