From 54e58b1a49950fe094b99ad5b8dae98e13944dcb Mon Sep 17 00:00:00 2001
From: Y1fe1Zh0u <zhouyifei210@gmail.com>
Date: Tue, 12 May 2026 19:09:04 +0800
Subject: [PATCH] Stop live HTML drafts from rebuilding preview iframes

Streaming workspace HTML drafts were being treated as complete preview documents, so every token burst updated iframe srcdoc and forced a child document rebuild. Keep the live state as a source preview while drafting, preserve the final file preview path, and coalesce chat autoscroll work onto a single animation frame.

Constraint: HTML generation streams partial tool arguments before the final workspace file exists

Constraint: Generated AI HTML should not execute inside the app preview sandbox while still drafting

Rejected: Increase the srcdoc debounce interval | still rebuilds iframes repeatedly during longer generations

Rejected: Disable workspace live draft events globally | would remove useful progress for non-HTML files

Confidence: high

Scope-risk: narrow

Directive: Do not reintroduce iframe srcDoc rendering for live HTML drafts without measuring iframe rebuild count and sandbox warnings

Tested: npm run build

Tested: Local frontend at http://127.0.0.1:3008 and browser probe confirmed source-draft updates create zero iframe loads

Not-tested: Full backend authenticated HTML generation flow because this worktree has no initialized backend database
---
 .../components/WorkspaceOperationPanel.tsx    | 31 ++++++++++++++++---
 frontend/src/index.css                        | 20 ++++++++++++
 frontend/src/pages/AgentDetail.tsx            | 28 ++++++-----------
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/WorkspaceOperationPanel.tsx b/frontend/src/components/WorkspaceOperationPanel.tsx
index 32b9c2da3..2acc93d58 100644
--- a/frontend/src/components/WorkspaceOperationPanel.tsx
+++ b/frontend/src/components/WorkspaceOperationPanel.tsx
@@ -72,6 +72,7 @@ const DEFAULT_TREE_WIDTH = 240;
 const DEFAULT_HISTORY_WIDTH = 320;
 const MIN_SIDE_WIDTH = 220;
 const MAX_SIDE_WIDTH = 520;
+const HTML_DRAFT_PREVIEW_LIMIT = 20000;
 
 function extOf(path: string): string {
     const idx = path.lastIndexOf('.');
@@ -257,6 +258,18 @@ function buildRevisionDiff(revision: any): string {
     return chunks.join('\n');
 }
 
+function HtmlDraftPreview({ content }: { content: string }) {
+    const shownContent = content.length > HTML_DRAFT_PREVIEW_LIMIT
+        ? `${content.slice(0, HTML_DRAFT_PREVIEW_LIMIT)}\n\n... truncated while drafting ...`
+        : content;
+
+    return (
+        <div className="workspace-op-html-draft">
+            <pre>{shownContent}</pre>
+        </div>
+    );
+}
+
 function HtmlPreviewFrame({
     content,
     title,
@@ -276,7 +289,12 @@ function HtmlPreviewFrame({
 
     const fitFixedWidthContent = () => {
         const frame = frameRef.current;
-        const doc = frame?.contentDocument;
+        let doc: Document | null | undefined;
+        try {
+            doc = frame?.contentDocument;
+        } catch {
+            return;
+        }
         const root = doc?.documentElement;
         const body = doc?.body;
         if (!frame || !doc || !root || !body) return;
@@ -304,7 +322,12 @@ function HtmlPreviewFrame({
 
     const bindFrameFitObservers = () => {
         const frame = frameRef.current;
-        const doc = frame?.contentDocument;
+        let doc: Document | null | undefined;
+        try {
+            doc = frame?.contentDocument;
+        } catch {
+            return;
+        }
         if (!frame || !doc?.documentElement || !doc.body) return;
 
         observersRef.current?.frame?.disconnect();
@@ -371,7 +394,7 @@ function HtmlPreviewFrame({
         <div className="workspace-op-html-fit" ref={containerRef}>
             <iframe
                 ref={frameRef}
-                sandbox="allow-same-origin allow-scripts allow-forms allow-modals allow-popups allow-downloads allow-pointer-lock allow-top-navigation-by-user-activation"
+                sandbox="allow-forms allow-modals allow-popups allow-downloads allow-pointer-lock"
                 src={src}
                 srcDoc={src ? undefined : renderContent}
                 title={title}
@@ -927,7 +950,7 @@ export default function WorkspaceOperationPanel({
                     <div className="workspace-op-live">
                         <div className="workspace-op-live-banner">{liveDraft.status === 'drafting' ? 'Drafting HTML...' : 'Writing HTML...'}</div>
                         {draftContent ? (
-                            <HtmlPreviewFrame content={draftContent} title={fileName(liveDraft.path || 'draft.html')} suspendAutoFit={isSideResizing} />
+                            <HtmlDraftPreview content={draftContent} />
                         ) : (
                             <div className="workspace-op-empty">Preparing file content...</div>
                         )}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 247f4349c..28a7e980b 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -6151,6 +6151,26 @@ select:focus {
   border-radius: 8px;
 }
 
+.workspace-op-html-draft {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+}
+
+.workspace-op-html-draft pre {
+  margin: 0;
+  padding: 12px;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .workspace-op-image-preview {
   display: flex;
   align-items: center;
diff --git a/frontend/src/pages/AgentDetail.tsx b/frontend/src/pages/AgentDetail.tsx
index f589ef0ad..75d4a70ec 100644
--- a/frontend/src/pages/AgentDetail.tsx
+++ b/frontend/src/pages/AgentDetail.tsx
@@ -4237,8 +4237,7 @@ function AgentDetailInner() {
     const pendingHistoryInitialScrollRef = useRef(false);
     const liveAutoFollowUntilRef = useRef(0);
     const userPinnedAwayFromBottomRef = useRef(false);
-    const liveScrollJobRef = useRef(0);
-    const liveScrollTimersRef = useRef<number[]>([]);
+    const liveScrollRafRef = useRef<number | null>(null);
     const chatTouchStartYRef = useRef<number | null>(null);
     const [showScrollBtn, setShowScrollBtn] = useState(false);
     const [chatScrollBtnBottom, setChatScrollBtnBottom] = useState(96);
@@ -4263,9 +4262,10 @@ function AgentDetailInner() {
     }, [activeTab]);
     const cancelLiveAutoFollow = useCallback(() => {
         liveAutoFollowUntilRef.current = 0;
-        liveScrollJobRef.current += 1;
-        liveScrollTimersRef.current.forEach((timer) => window.clearTimeout(timer));
-        liveScrollTimersRef.current = [];
+        if (liveScrollRafRef.current != null) {
+            cancelAnimationFrame(liveScrollRafRef.current);
+            liveScrollRafRef.current = null;
+        }
     }, []);
     const pinChatAwayFromBottom = useCallback(() => {
         cancelLiveAutoFollow();
@@ -4275,24 +4275,16 @@ function AgentDetailInner() {
     }, [cancelLiveAutoFollow]);
     const scheduleLiveScrollToBottom = useCallback(() => {
         if (userPinnedAwayFromBottomRef.current) return;
-        cancelLiveAutoFollow();
-        const jobId = liveScrollJobRef.current;
         liveAutoFollowUntilRef.current = Date.now() + 1500;
-        let attempts = 0;
-        const scroll = () => {
-            if (jobId !== liveScrollJobRef.current) return;
+        if (liveScrollRafRef.current != null) return;
+        liveScrollRafRef.current = requestAnimationFrame(() => {
+            liveScrollRafRef.current = null;
             if (userPinnedAwayFromBottomRef.current) return;
             const el = chatContainerRef.current;
             if (el) el.scrollTop = el.scrollHeight;
             setShowScrollBtn(false);
-            if (attempts++ < 2) requestAnimationFrame(scroll);
-        };
-        requestAnimationFrame(scroll);
-        liveScrollTimersRef.current = [
-            window.setTimeout(scroll, 80),
-            window.setTimeout(scroll, 220),
-        ];
-    }, [cancelLiveAutoFollow]);
+        });
+    }, []);
     useEffect(() => {
         return () => cancelLiveAutoFollow();
     }, [cancelLiveAutoFollow]);