Now getting a message back but it’s a single chunk

Author: D-K-P

claude-agent-github-wiki/app/response/[runId]/page.tsx

@@ -18,14 +18,11 @@ import {
   CheckCircle,
   Loader2,
   XCircle,
-  Terminal,
-  FileText,
 } from "lucide-react";
 import { agentStream } from "@/trigger/agent-stream";
 import { analyzeRepo } from "@/trigger/analyze-repo";
 import { useState } from "react";
 import ReactMarkdown from "react-markdown";
-import type { SDKMessage } from "@anthropic-ai/claude-agent-sdk";
 
 export default function ResponsePage() {
   const params = useParams();
@@ -45,9 +42,24 @@ export default function ResponsePage() {
   // Subscribe to agent stream
   const { parts, error: streamError } = useRealtimeStream(agentStream, runId, {
     accessToken,
-    timeoutInSeconds: 60,
+    timeoutInSeconds: 300, // 5 minute timeout
+    throttleInMs: 50,
   });
 
+  // Debug logging
+  console.log("[Frontend] Stream state:", {
+    runId,
+    accessToken: accessToken ? "present" : "missing",
+    partsLength: parts?.length || 0,
+    streamError: streamError?.message,
+    runStatus: run?.status,
+  });
+
+  // Log when parts change
+  if (parts && parts.length > 0) {
+    console.log(`[Frontend] Received ${parts.length} parts, latest:`, parts[parts.length - 1]?.slice(0, 100));
+  }
+
   const handleAbort = async () => {
     setIsAborting(true);
     try {
@@ -70,6 +82,27 @@ export default function ResponsePage() {
     router.push("/");
   };
 
+  // Process streamed text chunks
+  const getFormattedContent = () => {
+    if (!parts || parts.length === 0) return null;
+
+    // parts is now an array of text strings
+    const combinedText = parts.join("");
+
+    // Return the combined text as markdown
+    if (combinedText.trim()) {
+      return (
+        <div className="prose prose-sm dark:prose-invert max-w-none">
+          <ReactMarkdown>{combinedText}</ReactMarkdown>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const formattedContent = getFormattedContent();
+
   // Determine status
   const getStatus = () => {
     if (runError || streamError) return "error";
@@ -176,27 +209,25 @@ export default function ResponsePage() {
         )}
 
         {/* Response Content */}
-        {parts && parts.length > 0 && (
+        {(formattedContent || (parts && parts.length > 0)) && (
           <Card>
             <CardHeader>
               <CardTitle>Analysis Result</CardTitle>
-              <CardDescription>
-                Claude is analyzing your repository. Tool usage is shown in
-                collapsible sections.
-              </CardDescription>
             </CardHeader>
-            {parts.map((part, i) => (
-              <CardContent key={i} className="space-y-4">
-                {part}
-              </CardContent>
-            ))}
+            <CardContent>
+              {formattedContent || (
+                <div className="text-muted-foreground">
+                  Waiting for response... (Received {parts?.length || 0} chunks)
+                </div>
+              )}
+            </CardContent>
           </Card>
         )}
 
-        {/* Show message count for debugging */}
-        {parts && (
+        {/* Show streaming status for debugging */}
+        {parts && parts.length > 0 && status === "running" && (
           <div className="mt-4 text-xs text-muted-foreground text-center">
-            Received {parts.length} messages
+            Streaming response... ({parts.length} text chunks received)
           </div>
         )}
 

claude-agent-github-wiki/trigger/agent-stream.ts

@@ -1,8 +1,7 @@
 import { streams } from "@trigger.dev/sdk";
-import { type SDKMessage } from "@anthropic-ai/claude-agent-sdk";
 
-// REALTIME STREAMS V2: Define typed stream for all agent messages
-// This stream will carry every SDKMessage from the Claude Agent (text, tool_use, tool_result)
+// REALTIME STREAMS V2: Define typed stream for text responses only
+// This stream will carry just the text strings from Claude's responses
 export const agentStream = streams.define<string>({
   id: "agent-messages",
-});
+});

claude-agent-github-wiki/trigger/analyze-repo.ts

@@ -1,5 +1,5 @@
-import { query, type SDKMessage } from "@anthropic-ai/claude-agent-sdk";
-import { metadata, schemaTask, streams } from "@trigger.dev/sdk";
+import { query } from "@anthropic-ai/claude-agent-sdk";
+import { logger, metadata, schemaTask } from "@trigger.dev/sdk";
 import { z } from "zod";
 import { mkdtemp, rm } from "fs/promises";
 import { tmpdir } from "os";
@@ -90,17 +90,19 @@ export const analyzeRepo = schemaTask({
       const systemPrompt =
         `You are analyzing the ${repoName} repository that has been cloned to your current working directory.
 
-First, provide a brief 2-3 sentence overview of what this repository contains and its main purpose by examining the file structure and key files like README.md, package.json, etc.
+Your task is to answer the user's question about this repository. Use the available tools (Bash, Read, Grep, Glob) to explore the codebase as needed, but DO NOT narrate your exploration process. The user cannot see your tool usage.
 
-Then, provide a detailed response to the user's question. Focus on technical accuracy and be specific with file references and code examples where relevant.
+After exploring the repository, provide:
+1. A brief 2-3 sentence overview of what this repository contains and its main purpose
+2. A detailed answer to the user's specific question
 
-Start by exploring the repository structure with ls and reading key files, then answer this question: ${question}`;
+User's question: ${question}
+
+Important: Only include your final analysis in your response. Do not include phrases like "Let me explore", "Let me check", "Now let me examine", etc. The user only wants to see the final answer.`;
 
       metadata.set("status", "Generating response...");
       metadata.set("progress", 70);
 
-      const messages: SDKMessage[] = [];
-
       // Use Claude Agent SDK to analyze the repository
       const result = query({
         prompt: systemPrompt,
@@ -123,16 +125,41 @@ Start by exploring the repository structure with ls and reading key files, then
       metadata.set("status", "Streaming response...");
       metadata.set("progress", 90);
 
-      // Stream the response
-      const { stream: readableStream, waitUntilComplete } = agentStream.pipe(
-        result,
-      );
+      // Create an async generator that yields text strings from the messages
+      const extractText = async function* () {
+        for await (const message of result) {
+          logger.debug("Message type", { type: message.type });
+
+          // Extract text from assistant messages
+          if (message.type === "assistant" && message.message?.content) {
+            for (const block of message.message.content) {
+              if (block.type === "text") {
+                const text = block.text;
+                logger.debug("Streaming text block", {
+                  length: text.length,
+                  preview: text.slice(0, 100),
+                });
+
+                // Split large text blocks into smaller chunks for better streaming
+                // This helps when Claude sends a large response in a single message
+                const chunkSize = 20; // Send 20 chars at a time
+                if (text.length > chunkSize) {
+                  for (let i = 0; i < text.length; i += chunkSize) {
+                    yield text.slice(i, i + chunkSize);
+                  }
+                } else {
+                  yield text;
+                }
+              }
+            }
+          }
+        }
+      };
 
+      // Use pipe to stream the text - this properly handles backpressure
+      const { waitUntilComplete } = agentStream.pipe(extractText());
       await waitUntilComplete();
 
-      // Wait for the stream to complete
-      await readableStream.getReader().closed;
-
       metadata.set("status", "Completed");
       metadata.set("progress", 100);
 
@@ -161,19 +188,10 @@ Start by exploring the repository structure with ls and reading key files, then
       metadata.set("status", "Failed");
       metadata.set("error", error.message);
 
-      // Stream error message
+      // Stream error message as plain text
       agentStream.writer({
         execute: async ({ write }) => {
-          write({
-            type: "assistant",
-            message: {
-              role: "assistant",
-              content: [{
-                type: "text",
-                text: `Error: ${error.message}`,
-              }],
-            },
-          } as SDKMessage);
+          write(`Error: ${error.message}`);
         },
       });