diff --git a/agents/python/src/lib/chat.py b/agents/python/src/lib/chat.py
index 948ffbd..33563ce 100644
--- a/agents/python/src/lib/chat.py
+++ b/agents/python/src/lib/chat.py
@@ -75,14 +75,11 @@ async def chat_node(
     """
     logger.info("=== CHAT_NODE: Starting execution ===")
 
+    # Note: report is NOT in emit_intermediate_state to prevent flicker
+    # The report is only emitted once charts are injected
     config = copilotkit_customize_config(
         config,
         emit_intermediate_state=[
-            {
-                "state_key": "report",
-                "tool": "WriteReport",
-                "tool_argument": "report",
-            },
             {
                 "state_key": "research_question",
                 "tool": "WriteResearchQuestion",
@@ -202,17 +199,21 @@ async def chat_node(
 {available_tako_charts_str}
 
             WRITING GUIDELINES:
-            - Write clear, informative prose that references the data from the charts
-            - DO NOT include any chart markers, image syntax, or embed codes - charts will be automatically appended
+            - Write a COMPREHENSIVE report with substantial analysis and narrative text
+            - Use the chart descriptions above AND web resources to write detailed, insightful paragraphs
+            - For EACH chart, write at least 1-2 paragraphs discussing its key insights, trends, and implications
+            - Structure the report so that text naturally leads into and follows from each data point
+            - DO NOT include any chart markers, image syntax, or embed codes - charts will be inserted automatically
             - DO NOT use markdown image syntax like ![title](url)
             - DO NOT include external links like tradingeconomics.com
-            - Focus on analysis and insights from the data
-            - Reference specific data points and trends from the chart descriptions above
+            - Focus on analysis and insights - explain WHAT the data shows and WHY it matters
+            - Reference specific data points, numbers, and trends from the chart descriptions
+            - Connect insights across multiple charts to tell a cohesive story
 
             You should use the search tool to get resources before answering the user's question.
             Use the content and descriptions from both Tako charts and web resources to inform your report.
-            If you finished writing the report, ask the user proactively for next steps, changes etc, make it engaging.
-            To write the report, you should use the WriteReport tool. Never EVER respond with the report, only use the tool.
+            To write the report, you should use the WriteReport tool. Never EVER respond with the report content, only use the tool.
+            After writing the report, send a brief (1-2 sentence) follow-up asking if the user wants any changes or has questions. Do NOT summarize or repeat the report content in the chat.
 
             This is the research question:
             {research_question}
@@ -236,8 +237,16 @@ async def chat_node(
     ai_message = cast(AIMessage, response)
     if ai_message.tool_calls:
         if ai_message.tool_calls[0]["name"] == "WriteReport":
+            # Add progress indicator for report generation
+            state["logs"].append({"message": "Writing research report...", "done": False})
+            await copilotkit_emit_state(config, state)
+
             report = ai_message.tool_calls[0]["args"].get("report", "")
 
+            # Mark report writing as done
+            state["logs"][-1]["done"] = True
+            await copilotkit_emit_state(config, state)
+
             # Clean up: Remove any markdown image links that the LLM incorrectly added
             import re
             external_domains = r'(tradingeconomics|worldbank|imf|fred|ourworldindata|statista)'
@@ -253,6 +262,8 @@ async def chat_node(
             # Second pass: Inject charts at appropriate positions
             processed_report = report
             if tako_charts_map:
+                state["logs"].append({"message": "Inserting data visualizations...", "done": False})
+                await copilotkit_emit_state(config, state)
                 # Build chart list for injection prompt
                 chart_list = "\n".join([f"- {title}" for title in tako_charts_map.keys()])
 
@@ -273,12 +284,33 @@ async def chat_node(
 6. Do not modify the text content, only add markers
 7. Add a blank line before and after each marker
 
-Example:
+CRITICAL PLACEMENT RULES:
+8. NEVER place more than two charts consecutively - there MUST be at least one paragraph of text between any two charts
+9. NEVER append multiple charts at the end of the report - distribute them throughout the text
+10. Each chart should be placed IMMEDIATELY after the paragraph that discusses its specific data/topic
+11. If the report doesn't have enough text to properly intersperse all charts, place charts where they're most relevant and leave remaining charts unplaced rather than clustering them
+
+Example of GOOD placement:
 The economy grew significantly in 2023...
 
 [CHART:GDP Growth 2023]
 
-This growth was driven by...
+This growth was driven by consumer spending. Meanwhile, unemployment continued its downward trend...
+
+[CHART:Unemployment Rate 2023]
+
+The labor market strength contributed to...
+
+Example of BAD placement (DO NOT DO THIS):
+The economy grew significantly in 2023...
+This growth was driven by consumer spending...
+The labor market showed improvement...
+
+[CHART:GDP Growth 2023]
+
+[CHART:Unemployment Rate 2023]
+
+[CHART:Inflation Data 2023]
 """),
                         HumanMessage(content=f"Insert chart markers into this report:\n\n{report}")
                     ],
@@ -327,6 +359,14 @@ async def replace_marker(match):
 
                 logger.info(f"Injected {len([r for r in replacements if r[2]])} charts into report")
 
+                # Mark chart injection as done
+                state["logs"][-1]["done"] = True
+                await copilotkit_emit_state(config, state)
+
+            # Clear logs before showing final report
+            state["logs"] = []
+            await copilotkit_emit_state(config, state)
+
             return Command(
                 goto="chat_node",
                 update={
@@ -336,7 +376,7 @@ async def replace_marker(match):
                         ai_message,
                         ToolMessage(
                             tool_call_id=ai_message.tool_calls[0]["id"],
-                            content="Report written.",
+                            content="Report written successfully. Now send a brief follow-up message asking if the user wants any changes or has questions. Do NOT repeat the report content.",
                         ),
                     ],
                 },
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/MarkdownRenderer.tsx
index 0f574c3..0d67ba8 100644
--- a/src/components/MarkdownRenderer.tsx
+++ b/src/components/MarkdownRenderer.tsx
@@ -9,12 +9,6 @@ interface MarkdownRendererProps {
   content: string;
 }
 
-interface ExtractedEmbed {
-  id: string;
-  html: string;
-  src: string;
-}
-
 // Extract the iframe src from an HTML block
 function extractIframeSrc(html: string): string | null {
   const srcMatch = html.match(/src=["']([^"']+)["']/);
@@ -31,185 +25,173 @@ function generateEmbedId(src: string): string {
   }
 }
 
-// Module-level cache for embeds to persist across re-renders
-const embedCache = new Map<string, ExtractedEmbed>();
+// Memoized components object - using type assertion to avoid react-markdown's complex types
+const markdownComponents = {
+  h1: (props: React.ComponentPropsWithoutRef<"h1">) => (
+    <h1 className="text-3xl font-bold mb-4 text-primary" {...props} />
+  ),
+  h2: (props: React.ComponentPropsWithoutRef<"h2">) => (
+    <h2 className="text-2xl font-semibold mb-3 mt-6 text-primary" {...props} />
+  ),
+  h3: (props: React.ComponentPropsWithoutRef<"h3">) => (
+    <h3 className="text-xl font-semibold mb-2 mt-4 text-primary" {...props} />
+  ),
+  p: (props: React.ComponentPropsWithoutRef<"p">) => (
+    <p className="mb-4 text-foreground leading-relaxed" {...props} />
+  ),
+  ul: (props: React.ComponentPropsWithoutRef<"ul">) => (
+    <ul className="list-disc list-inside mb-4 space-y-2" {...props} />
+  ),
+  ol: (props: React.ComponentPropsWithoutRef<"ol">) => (
+    <ol className="list-decimal list-inside mb-4 space-y-2" {...props} />
+  ),
+  li: (props: React.ComponentPropsWithoutRef<"li">) => (
+    <li className="text-foreground" {...props} />
+  ),
+  a: (props: React.ComponentPropsWithoutRef<"a">) => (
+    <a
+      className="text-[#6766FC] hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+    />
+  ),
+  code: ({ className, children, ...props }: React.ComponentPropsWithoutRef<"code">) => {
+    const isCodeBlock = className?.includes("language-");
+    if (!isCodeBlock) {
+      return (
+        <code className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono" {...props}>
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="block bg-gray-100 p-4 rounded-lg text-sm font-mono overflow-x-auto mb-4" {...props}>
+        {children}
+      </code>
+    );
+  },
+};
+
+// Global registry of iframes - src never changes for a given id
+const iframeRegistry = new Map<string, string>();
+
+type ContentSegment =
+  | { type: 'text'; content: string; key: string }
+  | { type: 'iframe'; id: string; src: string; key: string };
 
 export function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  // Process content and extract embeds using useMemo (no state updates)
-  const { processedContent, embeds } = useMemo(() => {
+  // Split content into text segments and iframes as siblings
+  // This keeps iframes OUTSIDE ReactMarkdown's component tree
+  const segments = useMemo(() => {
     const embedPattern = /<!doctype html>[\s\S]*?<\/html>/gi;
-    let processed = content;
-    const matches = content.match(embedPattern) || [];
-    const currentEmbeds = new Map<string, ExtractedEmbed>();
+    const parts: ContentSegment[] = [];
+
+    let lastIndex = 0;
+    let textSegmentIndex = 0;
+    const regex = new RegExp(embedPattern.source, 'gi');
+    let match;
+
+    while ((match = regex.exec(content)) !== null) {
+      // Add text before this match
+      if (match.index > lastIndex) {
+        const textContent = content.slice(lastIndex, match.index);
+        if (textContent.trim()) {
+          parts.push({
+            type: 'text',
+            content: textContent,
+            key: `text-${textSegmentIndex++}`
+          });
+        }
+      }
 
-    for (const match of matches) {
-      const src = extractIframeSrc(match);
+      // Add iframe with stable ID based on src
+      const src = extractIframeSrc(match[0]);
       if (src) {
         const id = generateEmbedId(src);
-
-        // Use cached embed if available, otherwise create new
-        if (embedCache.has(id)) {
-          currentEmbeds.set(id, embedCache.get(id)!);
-        } else {
-          const embed = { id, html: match, src };
-          embedCache.set(id, embed);
-          currentEmbeds.set(id, embed);
+        // Register in global registry (immutable once set)
+        if (!iframeRegistry.has(id)) {
+          iframeRegistry.set(id, src);
         }
-
-        // Replace with placeholder
-        processed = processed.replace(match, `<div data-embed-placeholder="${id}"></div>`);
+        parts.push({ type: 'iframe', id, src, key: id });
       }
-    }
 
-    return { processedContent: processed, embeds: currentEmbeds };
-  }, [content]);
+      lastIndex = regex.lastIndex;
+    }
 
-  // Listen for Tako chart resize messages
-  useEffect(() => {
-    const handleTakoResize = (event: MessageEvent) => {
-      const data = event.data;
-      if (data.type !== "tako::resize") return;
-
-      const iframes = document.querySelectorAll<HTMLIFrameElement>("iframe[data-tako-embed]");
-      for (const iframe of iframes) {
-        if (iframe.contentWindow === event.source) {
-          iframe.style.height = `${data.height}px`;
-          break;
-        }
+    // Add remaining text
+    if (lastIndex < content.length) {
+      const textContent = content.slice(lastIndex);
+      if (textContent.trim()) {
+        parts.push({
+          type: 'text',
+          content: textContent,
+          key: `text-${textSegmentIndex}`
+        });
       }
-    };
+    }
 
-    window.addEventListener("message", handleTakoResize);
-    return () => window.removeEventListener("message", handleTakoResize);
-  }, []);
+    return parts;
+  }, [content]);
 
   return (
     <div className="prose prose-slate max-w-none bg-background px-6 py-8 border-0 shadow-none rounded-xl">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeRaw]}
-        components={{
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          h1: ({ node, ...props }) => (
-            <h1 className="text-3xl font-bold mb-4 text-primary" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          h2: ({ node, ...props }) => (
-            <h2 className="text-2xl font-semibold mb-3 mt-6 text-primary" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          h3: ({ node, ...props }) => (
-            <h3 className="text-xl font-semibold mb-2 mt-4 text-primary" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          p: ({ node, ...props }) => (
-            <p className="mb-4 text-foreground leading-relaxed" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          ul: ({ node, ...props }) => (
-            <ul className="list-disc list-inside mb-4 space-y-2" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          ol: ({ node, ...props }) => (
-            <ol className="list-decimal list-inside mb-4 space-y-2" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          li: ({ node, ...props }) => (
-            <li className="text-foreground" {...props} />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          a: ({ node, ...props }) => (
-            <a
-              className="text-[#6766FC] hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-              {...props}
-            />
-          ),
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          code: ({ node, className, children, ...props }) => {
-            const isCodeBlock = className?.includes("language-");
-            if (!isCodeBlock) {
-              return (
-                <code
-                  className="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono"
-                  {...props}
-                >
-                  {children}
-                </code>
-              );
-            }
-            return (
-              <code
-                className="block bg-gray-100 p-4 rounded-lg text-sm font-mono overflow-x-auto mb-4"
-                {...props}
-              >
-                {children}
-              </code>
-            );
-          },
-          // Render embed placeholders with stable iframe components
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          div: ({ node, ...props }) => {
-            const embedId = (node?.properties?.["dataEmbedPlaceholder"] as string) ||
-                           (props as Record<string, unknown>)["data-embed-placeholder"] as string | undefined;
-            if (embedId) {
-              const embed = embeds.get(embedId);
-              if (embed) {
-                return <StableEmbed key={embed.id} embed={embed} />;
-              }
-            }
-            return <div {...props} />;
-          },
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          iframe: ({ node, ...props }) => (
-            <iframe
-              {...props}
-              className="w-full border-0 rounded-lg mb-4"
-              data-tako-embed="true"
-            />
-          ),
-        }}
-      >
-        {processedContent}
-      </ReactMarkdown>
+      {segments.map((segment) => {
+        if (segment.type === 'text') {
+          return (
+            <ReactMarkdown
+              key={segment.key}
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeRaw]}
+              components={markdownComponents}
+            >
+              {segment.content}
+            </ReactMarkdown>
+          );
+        } else {
+          // Iframe rendered as sibling, not inside ReactMarkdown
+          // Use stable ID as key so it persists across content changes
+          const registeredSrc = iframeRegistry.get(segment.id);
+          if (!registeredSrc) return null;
+          return <StableIframe key={segment.key} id={segment.id} src={registeredSrc} />;
+        }
+      })}
     </div>
   );
 }
 
-// Separate component for stable embed rendering
-const StableEmbed = React.memo(function StableEmbed({ embed }: { embed: ExtractedEmbed }) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
+// Stable iframe component - memoized to prevent re-renders
+const StableIframe = React.memo(
+  function StableIframe({ src }: { id: string; src: string }) {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  // Handle resize messages for this specific iframe
-  useEffect(() => {
-    const handleResize = (event: MessageEvent) => {
-      const data = event.data;
-      if (data.type !== "tako::resize") return;
+    // Handle resize messages from Tako embeds
+    useEffect(() => {
+      const handleResize = (event: MessageEvent) => {
+        if (event.data?.type !== "tako::resize") return;
 
-      if (iframeRef.current && iframeRef.current.contentWindow === event.source) {
-        iframeRef.current.style.height = `${data.height}px`;
-      }
-    };
+        if (iframeRef.current?.contentWindow === event.source) {
+          iframeRef.current.style.height = `${event.data.height}px`;
+        }
+      };
 
-    window.addEventListener("message", handleResize);
-    return () => window.removeEventListener("message", handleResize);
-  }, []);
+      window.addEventListener("message", handleResize);
+      return () => window.removeEventListener("message", handleResize);
+    }, []);
 
-  return (
-    <div className="w-full mb-4">
+    return (
       <iframe
         ref={iframeRef}
-        src={embed.src}
+        src={src}
         className="w-full border-0 rounded-lg"
-        style={{ height: "400px" }}
+        style={{ height: "400px", display: "block" }}
         scrolling="no"
         frameBorder="0"
         allow="fullscreen"
         data-tako-embed="true"
       />
-    </div>
-  );
-}, (prevProps, nextProps) => {
-  return prevProps.embed.src === nextProps.embed.src;
-});
+    );
+  },
+  // Only re-render if id or src changes
+  (prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.src === nextProps.src
+);
diff --git a/src/components/ResearchCanvas.tsx b/src/components/ResearchCanvas.tsx
index 7667264..c7cb565 100644
--- a/src/components/ResearchCanvas.tsx
+++ b/src/components/ResearchCanvas.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { ChevronDown } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -32,10 +32,26 @@ export function ResearchCanvas() {
     },
   });
 
-  // Use state values directly - the agent state is the source of truth
-  const resources = state.resources || [];
-  const report = state.report || "";
-  const researchQuestion = state.research_question || "";
+  // Use refs to persist last known good values (prevents flicker on partial state updates)
+  const lastResourcesRef = useRef<Resource[]>([]);
+  const lastReportRef = useRef<string>("");
+  const lastQuestionRef = useRef<string>("");
+
+  // Update refs when we get valid values, use ref values as fallback
+  if (state.resources && state.resources.length > 0) {
+    lastResourcesRef.current = state.resources;
+  }
+  if (state.report && state.report.length > 0) {
+    lastReportRef.current = state.report;
+  }
+  if (state.research_question && state.research_question.length > 0) {
+    lastQuestionRef.current = state.research_question;
+  }
+
+  // Use current state if available, otherwise fall back to last known good value
+  const resources = (state.resources && state.resources.length > 0) ? state.resources : lastResourcesRef.current;
+  const report = (state.report && state.report.length > 0) ? state.report : lastReportRef.current;
+  const researchQuestion = (state.research_question && state.research_question.length > 0) ? state.research_question : lastQuestionRef.current;
 
   useCoAgentStateRender({
     name: agent,