feat(editor): live-stream file contents into Monaco during write_file

Mirror partial `input.content` from streaming `write_file` tool calls
into a dedicated overlay map, so users see the file fill up line by
line (v0/Lovable-style) instead of just a char counter that can plateau
during model token stalls.

- useAgentChat: derive `streamingFiles` Map from chat.messages, keyed
by path. Signature-based dedup avoids re-renders when content length
is unchanged.
- CodeEditor: merge committed files + streaming overlays; auto-follow
the streaming file unless the user manually picked another;
auto-scroll Monaco to the tail on each chunk; readOnly while
streaming; pulsing dot in the file tree.
- App: auto-switch to Code tab when a stream starts; pulsing dot on
the Code tab; no auto-return to Preview (user chooses).
- Preview iframe is untouched: overlays never enter the VFS, so
`vfs.version` only bumps at tool completion, avoiding rebuilds with
syntactically broken intermediate code.

Made-with: Cursor

frontend/src/App.tsx

@@ -41,6 +41,20 @@ export function App() {
     diagnostics,
   });
 
+  // When the agent starts streaming a file, flip to the Code tab so
+  // the user sees the content appear live (v0/Lovable-style). We
+  // don't auto-flip BACK to Preview at the end - let the user choose
+  // when they want to see the built app, so they can keep reading
+  // the code if they want to.
+  const wasStreamingRef = useRef(false);
+  useEffect(() => {
+    const isStreaming = chat.streamingFiles.size > 0;
+    if (isStreaming && !wasStreamingRef.current) {
+      setActiveTab("code");
+    }
+    wasStreamingRef.current = isStreaming;
+  }, [chat.streamingFiles]);
+
   const previewStatus = deriveAgentStatus(
     chat.messages,
     chat.isLoading,
@@ -149,10 +163,19 @@ export function App() {
           <div className="tab-bar">
             <button
               type="button"
-              className={`tab ${activeTab === "code" ? "active" : ""}`}
+              className={`tab ${activeTab === "code" ? "active" : ""} ${
+                chat.streamingFiles.size > 0 ? "tab-streaming" : ""
+              }`}
               onClick={() => setActiveTab("code")}
             >
               Code · {vfs.files.length}
+              {chat.streamingFiles.size > 0 && (
+                <span
+                  className="tab-streaming-dot"
+                  aria-label="writing"
+                  title="Agent is writing a file"
+                />
+              )}
             </button>
             <button
               type="button"
@@ -167,7 +190,11 @@ export function App() {
           <div
             className={`pane-content ${activeTab === "code" ? "" : "hidden"}`}
           >
-            <CodeEditor files={vfs.files} onChange={handleFileChange} />
+            <CodeEditor
+              files={vfs.files}
+              onChange={handleFileChange}
+              streamingFiles={chat.streamingFiles}
+            />
           </div>
           <div
             className={`pane-content preview-pane ${activeTab === "preview" ? "" : "hidden"}`}

frontend/src/components/CodeEditor.tsx

@@ -1,10 +1,21 @@
-import Editor from "@monaco-editor/react";
-import { useEffect, useMemo, useState } from "react";
+import Editor, { type OnMount } from "@monaco-editor/react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { VirtualFile } from "../hooks/useVirtualFS";
 
+type MonacoEditorInstance = Parameters<OnMount>[0];
+
 interface CodeEditorProps {
   files: VirtualFile[];
   onChange: (path: string, content: string) => void;
+  /**
+   * Partial file contents streamed from the agent while a `write_file`
+   * tool call is in flight (`input-streaming` state). Keys are file
+   * paths, values are the growing partial content. Overlays take
+   * precedence over `files` for display purposes only - they are NOT
+   * written to the VFS (the preview stays stable until the tool
+   * completes and the final content is committed).
+   */
+  streamingFiles?: Map<string, string>;
 }
 
 function guessLanguage(path: string): string {
@@ -34,28 +45,104 @@ function guessLanguage(path: string): string {
   }
 }
 
-export function CodeEditor({ files, onChange }: CodeEditorProps) {
+interface DisplayFile {
+  path: string;
+  content: string;
+  streaming: boolean;
+}
+
+export function CodeEditor({
+  files,
+  onChange,
+  streamingFiles,
+}: CodeEditorProps) {
   const [activePath, setActivePath] = useState<string | null>(null);
+  // Remember the path the user manually picked so we don't rip focus
+  // away from it on every render. Only auto-follow the streaming file
+  // when the user hasn't made a manual selection yet, OR when a brand
+  // new file starts streaming (that's the interesting signal: "the
+  // agent just created something new, show me").
+  const userPickedRef = useRef(false);
+  const lastStreamingKeysRef = useRef<string>("");
+
+  // Build the merged file list: committed files + streaming overlays
+  // that aren't yet in the VFS. Overlays override committed content
+  // for the same path.
+  const displayFiles: DisplayFile[] = useMemo(() => {
+    const byPath = new Map<string, DisplayFile>();
+    for (const f of files) {
+      byPath.set(f.path, { path: f.path, content: f.content, streaming: false });
+    }
+    if (streamingFiles) {
+      for (const [path, content] of streamingFiles) {
+        byPath.set(path, { path, content, streaming: true });
+      }
+    }
+    return Array.from(byPath.values()).sort((a, b) =>
+      a.path.localeCompare(b.path),
+    );
+  }, [files, streamingFiles]);
 
+  // Auto-follow logic.
   useEffect(() => {
-    if (!activePath && files.length > 0) {
-      const preferred = files.find(
-        (f) => f.path === "index.html" || f.path === "src/main.ts",
+    const streamingPaths = streamingFiles ? [...streamingFiles.keys()] : [];
+    const key = streamingPaths.sort().join("|");
+    const streamingStarted =
+      streamingPaths.length > 0 && key !== lastStreamingKeysRef.current;
+    lastStreamingKeysRef.current = key;
+
+    if (streamingPaths.length > 0) {
+      // A file is actively streaming. Switch to it unless the user
+      // just manually picked a different file AND nothing new started
+      // streaming in this tick.
+      const target = streamingPaths[0];
+      if (activePath !== target && (streamingStarted || !userPickedRef.current)) {
+        setActivePath(target);
+        userPickedRef.current = false;
+      }
+      return;
+    }
+
+    // No streaming in flight. Pick a sensible default if nothing is
+    // active, or recover if the active file disappeared.
+    if (!activePath && displayFiles.length > 0) {
+      const preferred = displayFiles.find(
+        (f) => f.path === "index.html" || f.path === "main.js",
       );
-      setActivePath(preferred?.path ?? files[0].path);
+      setActivePath(preferred?.path ?? displayFiles[0].path);
       return;
     }
-    if (activePath && !files.some((f) => f.path === activePath)) {
-      setActivePath(files[0]?.path ?? null);
+    if (activePath && !displayFiles.some((f) => f.path === activePath)) {
+      setActivePath(displayFiles[0]?.path ?? null);
     }
-  }, [files, activePath]);
+  }, [displayFiles, activePath, streamingFiles]);
 
   const activeFile = useMemo(
-    () => files.find((f) => f.path === activePath) ?? null,
-    [files, activePath],
+    () => displayFiles.find((f) => f.path === activePath) ?? null,
+    [displayFiles, activePath],
   );
 
-  if (files.length === 0) {
+  // Auto-scroll Monaco to the tail of the streaming content so new
+  // lines appear at the bottom as they arrive, mimicking a terminal
+  // "tail -f". When the user scrolls up manually, `revealLine` would
+  // fight them - we only auto-reveal while the file is streaming.
+  const monacoRef = useRef<MonacoEditorInstance | null>(null);
+  const handleMount: OnMount = (editor) => {
+    monacoRef.current = editor;
+  };
+  useEffect(() => {
+    if (!activeFile?.streaming) return;
+    const editor = monacoRef.current;
+    if (!editor) return;
+    const model = editor.getModel();
+    if (!model) return;
+    const lastLine = model.getLineCount();
+    // `revealLine` with the `Smooth` scroll type is cheap (no-op when
+    // already at the bottom) and doesn't move the cursor.
+    editor.revealLine(lastLine);
+  }, [activeFile?.content, activeFile?.streaming]);
+
+  if (displayFiles.length === 0) {
     return (
       <div className="code-layout">
         <div className="file-tree">
@@ -73,14 +160,27 @@ export function CodeEditor({ files, onChange }: CodeEditorProps) {
   return (
     <div className="code-layout">
       <div className="file-tree">
-        {files.map((f) => (
+        {displayFiles.map((f) => (
           <div
             key={f.path}
-            className={`file-tree-item ${activePath === f.path ? "active" : ""}`}
-            onClick={() => setActivePath(f.path)}
+            className={`file-tree-item ${activePath === f.path ? "active" : ""} ${
+              f.streaming ? "streaming" : ""
+            }`}
+            onClick={() => {
+              setActivePath(f.path);
+              userPickedRef.current = true;
+            }}
           >
-            <span>{f.path}</span>
-            <span className="file-tree-size">{f.content.length}B</span>
+            <span className="file-tree-path">
+              {f.streaming && (
+                <span className="file-tree-spinner" aria-hidden="true" />
+              )}
+              {f.path}
+            </span>
+            <span className="file-tree-size">
+              {f.content.length.toLocaleString()}
+              {f.streaming ? "…" : "B"}
+            </span>
           </div>
         ))}
       </div>
@@ -92,7 +192,11 @@ export function CodeEditor({ files, onChange }: CodeEditorProps) {
             theme="vs-dark"
             language={guessLanguage(activeFile.path)}
             value={activeFile.content}
-            onChange={(v) => onChange(activeFile.path, v ?? "")}
+            onChange={(v) => {
+              if (activeFile.streaming) return;
+              onChange(activeFile.path, v ?? "");
+            }}
+            onMount={handleMount}
             options={{
               fontSize: 12,
               fontFamily:
@@ -102,6 +206,7 @@ export function CodeEditor({ files, onChange }: CodeEditorProps) {
               tabSize: 2,
               wordWrap: "on",
               automaticLayout: true,
+              readOnly: activeFile.streaming,
             }}
           />
         ) : (

frontend/src/hooks/useAgentChat.ts

@@ -488,6 +488,67 @@ export function useAgentChat({
   // the auto-fix timer callback both read it to decide when to act.
   chatStatusRef.current = chat.status;
 
+  // ------------------------------------------------------------------
+  // Streaming file overlays (v0/Lovable-style "watch the code appear")
+  // ------------------------------------------------------------------
+  //
+  // While the model streams a `write_file` tool call, the SDK exposes
+  // the partial `input.content` as it's incrementally parsed from the
+  // JSON payload. We mirror that partial content into a dedicated
+  // overlay map so the code editor can show the file filling up live.
+  //
+  // The overlay is NOT merged into the VFS - that would re-trigger
+  // the preview iframe rebuild on every chunk with syntactically
+  // broken code, which spams compile errors. Only the final
+  // `input-available` state fires `onToolCall`, which commits to the
+  // VFS once and triggers exactly one preview rebuild.
+  //
+  // Ref-then-state pattern: we keep the map in a ref (single source of
+  // truth, stable JSON-stringified signature) and only call
+  // `setStreamingFiles` when the signature actually changes, so we
+  // don't thrash React on every identical re-derivation.
+
+  const [streamingFiles, setStreamingFiles] = useState<Map<string, string>>(
+    () => new Map(),
+  );
+  const streamingSignatureRef = useRef<string>("");
+
+  useEffect(() => {
+    const next = new Map<string, string>();
+    for (const msg of chat.messages) {
+      if (msg.role !== "assistant") continue;
+      for (const part of msg.parts ?? []) {
+        const p = part as {
+          type: string;
+          state?: string;
+          input?: Record<string, unknown>;
+        };
+        if (typeof p.type !== "string" || !p.type.startsWith("tool-")) {
+          continue;
+        }
+        if (p.state !== "input-streaming") continue;
+        const toolName = p.type.slice("tool-".length);
+        if (toolName !== "write_file") continue;
+        const path = p.input?.path;
+        const content = p.input?.content;
+        if (typeof path === "string" && path && typeof content === "string") {
+          next.set(path, content);
+        }
+      }
+    }
+
+    // Stable signature: sorted `path:length` pairs. Length is enough
+    // because content is append-only during streaming, so a changed
+    // length always means a changed suffix.
+    const sig = [...next.entries()]
+      .map(([k, v]) => `${k}:${v.length}`)
+      .sort()
+      .join("|");
+    if (sig === streamingSignatureRef.current) return;
+    streamingSignatureRef.current = sig;
+    setStreamingFiles(next);
+  }, [chat.messages]);
+
   // Auto-fix loop: when the agent finishes a turn, wait for the preview
   // to settle and check for actionable runtime/compile errors. If any
   // remain, push an auto-fix prompt onto the dispatch queue. Stops
@@ -614,5 +675,6 @@ export function useAgentChat({
     mode,
     setMode,
     autoFix,
+    streamingFiles,
   };
 }

frontend/src/styles.css

@@ -966,12 +966,59 @@ pre,
   border-left-color: var(--accent);
 }
 
+.file-tree-item.streaming {
+  color: var(--text);
+}
+
+.file-tree-item.streaming .file-tree-size {
+  color: var(--accent);
+}
+
+.file-tree-path {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree-spinner {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  animation: file-tree-pulse 1s ease-in-out infinite;
+  flex-shrink: 0;
+}
+
+@keyframes file-tree-pulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.8); }
+  50%      { opacity: 1;    transform: scale(1.15); }
+}
+
 .file-tree-size {
   margin-left: auto;
   color: var(--text-faint);
   font-size: 10px;
 }
 
+.tab-streaming {
+  position: relative;
+}
+
+.tab-streaming-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-left: 6px;
+  vertical-align: middle;
+  animation: file-tree-pulse 1s ease-in-out infinite;
+}
+
 .editor-area {
   min-height: 0;
   display: flex;