feat: render HTML emails in sandboxed iframe, fix two-PUT reply draft delivery

- Render HTML email bodies in a sandboxed iframe (allow-same-origin) with
  auto-height and no inner scroll, keeping plain text emails as-is
- Add updateSessionPayloadKeepStatus to preserve rewriting state when
  replyState is "loading", enabling the two-PUT pattern for reply drafts
- Fix frontend polling to keep waiting until replyState is "ready" for
  reply actions instead of stopping on any revision bump
- Add no-refetch guidance to SKILL.md: use poll payload data for drafts

Author: zhmzm

packages/server/src/index.ts

@@ -8,7 +8,7 @@ import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
 import { promisify } from 'util'
 import { learnFromDeletions, learnFromRewrite, learnFromTrajectoryRevisions, learnFromCodeRejection, learnFromActionRejection, getLearnedPreferences, clearPreferences, deletePreference } from './preference.js'
-import { createSession, getSession, listSessions, completeSession, setSessionRewriting, updateSessionPageStatus, updateSessionPayload } from './store.js'
+import { createSession, getSession, listSessions, completeSession, setSessionRewriting, updateSessionPageStatus, updateSessionPayload, updateSessionPayloadKeepStatus } from './store.js'
 import {
   buildMemoryCatalog,
   buildMemoryReviewPayload,
@@ -762,10 +762,23 @@ app.put('/api/sessions/:id/payload', (req, res) => {
     }
   }
 
-  updateSessionPayload(req.params.id, finalPayload)
+  // Check if any email still has replyState "loading" — if so, keep session in
+  // "rewriting" so the agent can PUT the finished draft in a follow-up call.
+  let hasLoadingReply = false
+  if (session.type === 'email_review') {
+    const inbox = Array.isArray(finalPayload?.inbox) ? finalPayload.inbox as Array<Record<string, unknown>> : []
+    hasLoadingReply = inbox.some(e => e.replyState === 'loading')
+  }
+
+  if (hasLoadingReply) {
+    updateSessionPayloadKeepStatus(req.params.id, finalPayload)
+  } else {
+    updateSessionPayload(req.params.id, finalPayload)
+  }
   const updated = getSession(req.params.id)
   const newRevision = updated?.revision ?? session.revision + 1
-  console.log(`[agentclick] Session ${session.id} payload updated, back to pending (revision=${newRevision})`)
+  const newStatus = hasLoadingReply ? 'rewriting' : 'pending'
+  console.log(`[agentclick] Session ${session.id} payload updated, status=${newStatus} (revision=${newRevision})`)
 
   // Notify main agent that sub-agent completed a rewrite round (fire-and-forget)
   if (session.sessionKey) {

packages/server/src/store.ts

@@ -99,6 +99,12 @@ export function updateSessionPayload(id: string, payload: unknown): void {
   `).run(JSON.stringify(payload), Date.now(), id)
 }
 
+export function updateSessionPayloadKeepStatus(id: string, payload: unknown): void {
+  db.prepare(`
+    UPDATE sessions SET payload = ?, updatedAt = ?, revision = revision + 1 WHERE id = ?
+  `).run(JSON.stringify(payload), Date.now(), id)
+}
+
 export function updateSessionPageStatus(id: string, pageStatus: SessionPageStatus): void {
   db.prepare(`
     UPDATE sessions SET pageStatus = ?, updatedAt = ? WHERE id = ?

packages/web/src/pages/ReviewPage.tsx

@@ -339,6 +339,18 @@ export default function ReviewPage() {
             } as InboxPayload
           })
           if (pendingAgentAction === 'regenerate') resetEditState()
+
+          // For reply actions, keep waiting until the target email's replyState is "ready"
+          if (pendingAgentAction === 'reply' && activeReplyRequestEmailId) {
+            const serverPayload = data.payload as ReviewSessionPayload
+            const serverInbox = Array.isArray(serverPayload?.inbox) ? serverPayload.inbox : []
+            const targetEmail = serverInbox.find((e: EmailItem) => e.id === activeReplyRequestEmailId)
+            if (targetEmail && targetEmail.replyState !== 'ready') {
+              // Still loading — don't stop waiting
+              return
+            }
+          }
+
           setWaitingForRewrite(false)
           setPendingAgentAction(null)
           setActiveReplyRequestEmailId(null)
@@ -1090,9 +1102,37 @@ export default function ReviewPage() {
                     </div>
                     <div className="p-4 bg-white dark:bg-zinc-900 border border-gray-100 dark:border-zinc-800 rounded-lg">
                       <p className="text-xs uppercase tracking-wider text-zinc-400 dark:text-slate-500 mb-2">Full Email</p>
-                      <p className="text-sm text-zinc-700 dark:text-slate-300 leading-relaxed whitespace-pre-wrap">
-                        {email.body || email.preview || 'No content available.'}
-                      </p>
+                      {(() => {
+                        const bodyContent = email.body || email.preview || ''
+                        const hasHtml = /<(html|body|div|table)\b/i.test(bodyContent)
+                        if (!bodyContent) {
+                          return <p className="text-sm text-zinc-700 dark:text-slate-300 leading-relaxed">No content available.</p>
+                        }
+                        if (hasHtml) {
+                          return (
+                            <iframe
+                              sandbox="allow-same-origin"
+                              srcDoc={bodyContent}
+                              referrerPolicy="no-referrer"
+                              style={{ width: '100%', border: 'none', overflow: 'hidden', minHeight: '120px' }}
+                              onLoad={(e) => {
+                                const iframe = e.currentTarget
+                                try {
+                                  const h = iframe.contentDocument?.body?.scrollHeight
+                                  if (h) {
+                                    iframe.style.height = h + 16 + 'px'
+                                  }
+                                } catch { /* cross-origin guard */ }
+                              }}
+                            />
+                          )
+                        }
+                        return (
+                          <p className="text-sm text-zinc-700 dark:text-slate-300 leading-relaxed whitespace-pre-wrap">
+                            {bodyContent}
+                          </p>
+                        )
+                      })()}
                       {email.headers && email.headers.length > 0 && (
                         <div className="mt-4 pt-3 border-t border-gray-100 dark:border-zinc-800 space-y-1">
                           {email.headers.map(header => (

skills/clickui-email/SKILL.md

@@ -194,7 +194,7 @@ The UI is not only a final approval screen. The user may:
 
 If the result indicates `requestReplyDraft: true` for an email:
 - update the payload quickly so the UI can show that email as loading
-- generate the reply draft yourself as the agent
+- generate the reply draft yourself as the agent — use the email body already present in the poll response payload (do not re-fetch from Gmail)
 - PUT the finished draft back into the same session
 - do not create a new session
 
@@ -286,7 +286,7 @@ curl -s -X PUT "$AGENTCLICK_BASE/api/sessions/${SESSION_ID}/payload" \
 
 Rules:
 - Reuse the same `SESSION_ID` for the full interaction.
-- If the UI asked for loading first, PUT a fast loading-state update, then PUT the completed draft.
+- **Two-PUT pattern for replies:** first PUT a loading-state update (`replyState: "loading"`), then PUT the completed draft (`replyState: "ready"` with `replyDraft`). The server keeps the session in `rewriting` status as long as any email has `replyState: "loading"`, so the second PUT is accepted.
 - If PUT fails, fix it before continuing.
 
 ## Completion Rules
@@ -322,3 +322,4 @@ Assume the page behaves like this and update payloads accordingly:
 - If the environment cannot keep a long blocking wait, poll the session every 10 seconds instead.
 - Do not claim a reply came from Gmail or from a background process if the agent generated it.
 - Prefer the bundled parallel fetch script for inbox loading, and use direct `gog` calls for one-off follow-up detail when needed.
+- The `/wait` and short-poll responses include the full session payload. Use this data to generate reply drafts — do not re-fetch emails from Gmail unless the body is missing.