Separate planning chunks from execution chunks

app/agent.py

@@ -3,39 +3,47 @@ from collections.abc import AsyncIterable
 
 from haystack.dataclasses import ChatMessage
 from haystack.components.agents import Agent
+from haystack.tools import SearchableToolset
 from haystack_integrations.components.generators.nvidia import NvidiaChatGenerator
 from haystack_integrations.tools.mcp import MCPToolset, StreamableHttpServerInfo
 
 from app.models import TextChunk
 from app.queue import StreamingQueue
 
-SYSTEM_PROMPT = """\
+PLANNING_SYSTEM_PROMPT = """\
+You are a research planner with access to Google Drive via MCP tools.
+When given a conference theme, search Google Drive to identify relevant files
+(meeting notes, agendas, slide decks, documents).
+Produce a structured, numbered research plan that lists each file you found:
+its name, URL, file type, and what information to extract from it.
+For each PDF you find, note whether a Google Doc version might exist.
+Do NOT write the final report — output a research plan only."""
+
+PLANNING_USER_PROMPT = """\
+Build a research plan for the theme: "{theme}"
+
+1. Use the available Google Drive tools to search for files related to this theme.
+2. For each PDF you find, note that you should check for a Google Doc version first.
+3. List each relevant file with: name, URL, file type, and what to extract.
+4. Output a numbered list of files to read and what to look for in each."""
+
+EXECUTION_SYSTEM_PROMPT = """\
 You are an expert technical writer with access to Google Drive via MCP tools.
-When given a theme, search Google Drive for relevant files (meeting notes, agendas,
-slide decks, documents), read their contents, and synthesize the findings into a
-structured post-conference report in Markdown.
-Always search and retrieve files before writing the report.
+You will receive a research plan. Execute it step-by-step: read each file listed,
+then synthesize the findings into a structured post-conference report in Markdown.
+For each PDF in the plan, first check whether a Google Doc version already exists
+(search by similar name). Read the Google Doc if found; only download the PDF if no Doc exists.
 Always end the report with a "## Sources" section that lists every file you read,
-as a Markdown link using the file's real Google Drive URL.
+as Markdown links: [File title](Google Drive URL)."""
 
-When you encounter a PDF file, before downloading or converting it, first search
-Google Drive for a Google Doc with the same or similar name. If one already exists,
-read the Google Doc instead of downloading and converting the PDF. Only download and
-convert a PDF when no corresponding Google Doc version can be found."""
+EXECUTION_USER_PROMPT = """\
+Execute this research plan for the theme: "{theme}"
 
-USER_PROMPT = """\
-Research the following theme: "{theme}"
+{plan}
 
-1. Use the available Google Drive tools to search for files related to this theme.
-2. For each PDF you find, first check whether a Google Doc version already exists
-   (search by a similar name). If a Google Doc exists, read it directly. Only
-   download and convert a PDF if no Google Doc equivalent is found.
-3. Read the contents of the most relevant files you find.
-4. Write a clear, well-structured Markdown report that covers the key findings.
-   Use whatever sections and level of detail best fit the material — do not force
-   a fixed template.
-5. End the report with a "## Sources" section listing every file you referenced,
-   as Markdown links: [File title](Google Drive URL)."""
+Read each file in the plan, extract the relevant information, and write a comprehensive,
+well-structured Markdown report. Use sections and detail that best fit the material.
+End with a "## Sources" section listing every file you referenced as Markdown links."""
 
 toolset = MCPToolset(
     server_info=StreamableHttpServerInfo(
@@ -45,7 +53,10 @@ toolset = MCPToolset(
 )
 
 
-async def run_agent(theme: str) -> AsyncIterable[TextChunk]:
+async def _run_phase(
+    tools: SearchableToolset,
+    messages: list[ChatMessage],
+) -> AsyncIterable[TextChunk]:
     streaming_queue = StreamingQueue()
     generator = NvidiaChatGenerator(
         model="nvidia/nemotron-3-super-120b-a12b",
@@ -57,14 +68,9 @@ async def run_agent(theme: str) -> AsyncIterable[TextChunk]:
     )
     agent = Agent(
         chat_generator=generator,
-        tools=toolset,
+        tools=tools,
     )
 
-    messages = [
-        ChatMessage.from_system(SYSTEM_PROMPT),
-        ChatMessage.from_user(USER_PROMPT.format(theme=theme)),
-    ]
-
     async def run() -> None:
         async with streaming_queue:
             await agent.run_async(messages=messages)
@@ -97,3 +103,30 @@ async def run_agent(theme: str) -> AsyncIterable[TextChunk]:
     # Flush any remaining buffered calls (shouldn't happen in normal flow)
     for data in pending_calls.values():
         yield TextChunk(type="tool_call", tool_name=data["name"], content=data["args"])
+
+
+async def run_agent(theme: str) -> AsyncIterable[TextChunk]:
+    # Phase 1: Planning — identify relevant files and produce a research plan
+    planning_tools = SearchableToolset(catalog=toolset)
+    planning_messages = [
+        ChatMessage.from_system(PLANNING_SYSTEM_PROMPT),
+        ChatMessage.from_user(PLANNING_USER_PROMPT.format(theme=theme)),
+    ]
+
+    plan_text = ""
+    async for chunk in _run_phase(planning_tools, planning_messages):
+        chunk.phase = "planning"
+        if chunk.type == "text":
+            plan_text += chunk.content
+        yield chunk
+
+    # Phase 2: Execution — follow the plan, read files, write the report
+    execution_tools = SearchableToolset(catalog=toolset)
+    execution_messages = [
+        ChatMessage.from_system(EXECUTION_SYSTEM_PROMPT),
+        ChatMessage.from_user(EXECUTION_USER_PROMPT.format(theme=theme, plan=plan_text)),
+    ]
+
+    async for chunk in _run_phase(execution_tools, execution_messages):
+        chunk.phase = "execution"
+        yield chunk

app/models.py

@@ -11,3 +11,4 @@ class TextChunk(BaseModel):
     type: Literal["text", "tool_call", "tool_result"] = "text"
     content: str = ""
     tool_name: str | None = None
+    phase: Literal["planning", "execution"] | None = None

app/static/index.html

@@ -7,14 +7,14 @@
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
-    #output h1, #output h2, #output h3 { font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; }
-    #output h1 { font-size: 1.5rem; }
-    #output h2 { font-size: 1.25rem; }
-    #output ul  { list-style: disc;    padding-left: 1.5rem; margin: 0.5rem 0; }
-    #output ol  { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
-    #output li  { margin-bottom: 0.25rem; }
-    #output p   { margin-bottom: 0.75rem; }
-    #output strong { font-weight: 700; }
+    .prose h1, .prose h2, .prose h3 { font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; }
+    .prose h1 { font-size: 1.5rem; }
+    .prose h2 { font-size: 1.25rem; }
+    .prose ul  { list-style: disc;    padding-left: 1.5rem; margin: 0.5rem 0; }
+    .prose ol  { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
+    .prose li  { margin-bottom: 0.25rem; }
+    .prose p   { margin-bottom: 0.75rem; }
+    .prose strong { font-weight: 700; }
     @keyframes spin { to { transform: rotate(360deg); } }
     .spinner { animation: spin 0.8s linear infinite; }
   </style>
@@ -52,12 +52,25 @@
     <div id="activityLog" class="text-xs font-mono text-gray-400 space-y-0.5 max-h-48 overflow-y-auto"></div>
   </div>
 
+  <div id="planPanel" class="w-full max-w-3xl rounded-xl border border-indigo-800 bg-gray-900 p-6 hidden">
+    <div class="flex items-center justify-between mb-4">
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold uppercase tracking-wider text-indigo-400 border border-indigo-700 rounded px-1.5 py-0.5">Planning</span>
+        <h2 class="text-lg font-semibold text-gray-200">Research Plan</h2>
+      </div>
+    </div>
+    <div id="plan" class="prose text-gray-100 text-sm leading-relaxed"></div>
+  </div>
+
   <div id="outputPanel" class="w-full max-w-3xl rounded-xl border border-gray-700 bg-gray-900 p-6 hidden">
     <div class="flex items-center justify-between mb-4">
-      <h2 class="text-lg font-semibold text-gray-200">Generated Report</h2>
+      <div class="flex items-center gap-2">
+        <span class="text-xs font-semibold uppercase tracking-wider text-emerald-400 border border-emerald-800 rounded px-1.5 py-0.5">Execution</span>
+        <h2 class="text-lg font-semibold text-gray-200">Generated Report</h2>
+      </div>
       <span id="status" class="text-xs text-gray-500"></span>
     </div>
-    <div id="output" class="text-gray-100 text-sm leading-relaxed"></div>
+    <div id="output" class="prose text-gray-100 text-sm leading-relaxed"></div>
   </div>
 
   <script>
@@ -68,7 +81,9 @@
     const activityPanel = document.getElementById('activityPanel');
     const activityLog   = document.getElementById('activityLog');
     const spinnerEl     = document.getElementById('spinner');
-    const panel         = document.getElementById('outputPanel');
+    const planPanel     = document.getElementById('planPanel');
+    const planEl        = document.getElementById('plan');
+    const outputPanel   = document.getElementById('outputPanel');
     const outputEl      = document.getElementById('output');
     const statusEl      = document.getElementById('status');
 
@@ -79,6 +94,16 @@
       activityLog.scrollTop = activityLog.scrollHeight;
     }
 
+    function appendPhaseHeader(phase) {
+      const p = document.createElement('p');
+      p.className = 'mt-1';
+      const color = phase === 'planning' ? 'text-indigo-400' : 'text-emerald-400';
+      const label = phase === 'planning' ? 'Planning phase' : 'Execution phase';
+      p.innerHTML = `<span class="font-semibold ${color}">── ${label} ──</span>`;
+      activityLog.appendChild(p);
+      activityLog.scrollTop = activityLog.scrollHeight;
+    }
+
     btn.addEventListener('click', async () => {
       const theme = promptEl.value.trim();
       if (!theme) return;
@@ -87,11 +112,15 @@
       activityPanel.classList.remove('hidden');
       activityLog.innerHTML = '';
       spinnerEl.classList.remove('hidden');
-      panel.classList.remove('hidden');
+      planPanel.classList.add('hidden');
+      planEl.innerHTML = '';
+      outputPanel.classList.add('hidden');
       outputEl.innerHTML = '';
       statusEl.textContent = 'Generating…';
 
-      let accumulated = '';
+      let planAccumulated    = '';
+      let reportAccumulated  = '';
+      let lastPhase          = null;
 
       try {
         const response = await fetch('/agent', {
@@ -123,6 +152,17 @@
             let parsed;
             try { parsed = JSON.parse(line); } catch { continue; }
 
+            // Emit a phase header in the activity log on first chunk of each phase
+            if (parsed.phase && parsed.phase !== lastPhase) {
+              lastPhase = parsed.phase;
+              appendPhaseHeader(parsed.phase);
+              if (parsed.phase === 'planning') {
+                planPanel.classList.remove('hidden');
+              } else if (parsed.phase === 'execution') {
+                outputPanel.classList.remove('hidden');
+              }
+            }
+
             if (parsed.type === 'tool_call') {
               let argsDisplay = '';
               if (parsed.content) {
@@ -138,16 +178,21 @@
               appendActivity(`<span class="text-indigo-400">→</span> <code class="text-yellow-300">${parsed.tool_name}</code>${argsDisplay}`);
             } else if (parsed.type === 'tool_result') {
               appendActivity(`<span class="text-green-400">↳ result:</span> ${parsed.content}`);
-            } else {
-              accumulated += parsed.content;
-              outputEl.innerHTML = marked.parse(accumulated);
-              outputEl.scrollIntoView({ block: 'end', behavior: 'smooth' });
+            } else if (parsed.type === 'text') {
+              if (parsed.phase === 'planning') {
+                planAccumulated += parsed.content;
+                planEl.innerHTML = marked.parse(planAccumulated);
+              } else {
+                reportAccumulated += parsed.content;
+                outputEl.innerHTML = marked.parse(reportAccumulated);
+                outputEl.scrollIntoView({ block: 'end', behavior: 'smooth' });
+              }
             }
           }
         }
 
         statusEl.textContent = 'Done';
-        outputEl.innerHTML = marked.parse(accumulated);
+        outputEl.innerHTML = marked.parse(reportAccumulated);
 
       } catch (err) {
         statusEl.textContent = 'Error';