reasoning streaming llm

Author: blessing-sanusi

src/frontend/src/api/apiService.tsx

@@ -21,7 +21,9 @@ const API_ENDPOINTS = {
     STEPS: '/steps',
     HUMAN_FEEDBACK: '/human_feedback',
     APPROVE_STEPS: '/approve_step_or_steps',
+    APPROVE_STEPS_STREAM: '/approve_step_or_steps_stream',
     HUMAN_CLARIFICATION: '/human_clarification_on_plan',
+    HUMAN_CLARIFICATION_STREAM: '/human_clarification_on_plan_stream',
     AGENT_MESSAGES: '/agent_messages',
     MESSAGES: '/messages'
 };
@@ -149,6 +151,51 @@ export class APIService {
         return response.body;
     }
 
+    /**
+     * Approve step with streaming response like original experience
+     * @param stepId Step ID to approve
+     * @param planId Plan ID
+     * @param sessionId Session ID
+     * @param approved Whether the step is approved
+     * @returns ReadableStream for streaming response
+     */
+    async approveStepStream(
+        stepId: string,
+        planId: string,
+        sessionId: string,
+        approved: boolean
+    ): Promise<ReadableStream<Uint8Array>> {
+        // Import the config functions
+        const { headerBuilder, getApiUrl } = await import('./config');
+        
+        const authHeaders = headerBuilder();
+        const apiUrl = getApiUrl();
+        
+        const response = await fetch(`${apiUrl}${API_ENDPOINTS.APPROVE_STEPS}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...authHeaders,
+            },
+            body: JSON.stringify({
+                step_id: stepId,
+                plan_id: planId,
+                session_id: sessionId,
+                approved
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        if (!response.body) {
+            throw new Error('Response body is null');
+        }
+
+        return response.body;
+    }
+
     /**
      * Get all plans, optionally filtered by session ID
      * @param sessionId Optional session ID to filter plans
@@ -510,6 +557,93 @@ export class APIService {
         this._cache.clear();
     }
 
+    /**
+     * Submit clarification for a plan with streaming response
+     * @param planId Plan ID
+     * @param sessionId Session ID
+     * @param clarification Clarification text
+     * @returns ReadableStream for streaming response
+     */
+    async submitClarificationStream(
+        planId: string,
+        sessionId: string,
+        clarification: string
+    ): Promise<ReadableStream<Uint8Array>> {
+        // Import the config functions
+        const { headerBuilder, getApiUrl } = await import('./config');
+        
+        const authHeaders = headerBuilder();
+        const apiUrl = getApiUrl();
+        
+        const response = await fetch(`${apiUrl}${API_ENDPOINTS.HUMAN_CLARIFICATION_STREAM}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...authHeaders,
+            },
+            body: JSON.stringify({
+                plan_id: planId,
+                session_id: sessionId,
+                human_clarification: clarification
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        if (!response.body) {
+            throw new Error('Response body is null');
+        }
+
+        return response.body;
+    }
+
+    /**
+     * Approve step with streaming response
+     * @param stepId Step ID to approve
+     * @param planId Plan ID
+     * @param sessionId Session ID
+     * @param approved Whether the step is approved
+     * @returns ReadableStream for streaming response
+     */
+    async approveStepStreamNew(
+        stepId: string,
+        planId: string,
+        sessionId: string,
+        approved: boolean
+    ): Promise<ReadableStream<Uint8Array>> {
+        // Import the config functions
+        const { headerBuilder, getApiUrl } = await import('./config');
+        
+        const authHeaders = headerBuilder();
+        const apiUrl = getApiUrl();
+        
+        const response = await fetch(`${apiUrl}${API_ENDPOINTS.APPROVE_STEPS_STREAM}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                ...authHeaders,
+            },
+            body: JSON.stringify({
+                step_id: stepId,
+                plan_id: planId,
+                session_id: sessionId,
+                approved
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        if (!response.body) {
+            throw new Error('Response body is null');
+        }
+
+        return response.body;
+    }
+
     /**
      * Get progress status counts for a plan
      * @param plan Plan with steps

src/frontend/src/components/content/HomeInput.tsx

@@ -65,9 +65,10 @@ const HomeInput: React.FC<HomeInputProps> = ({
                 }
 
                 if (response.plan_id && response.plan_id !== null) {
-                    showToast("Plan created!", "success");
                     dismissToast(id);
-                    // Navigate to the create page to show streaming generation
+                    // Navigate immediately to show unified reasoning + planning experience
+                    showToast("Starting planner agent reasoning...", "success");
+                    // Navigate immediately to the create page to show unified experience
                     navigate(`/plan/${response.plan_id}/create`, { 
                         state: { isNewPlan: true, autoStartGeneration: true } 
                     });

src/frontend/src/components/content/PlanChat.tsx

@@ -71,10 +71,53 @@ const PlanChat: React.FC<PlanChatProps> = ({
     setShowScrollButton(false);
   };
 
-  if (!planData)
+  if (!planData) {
+    // If no plan data, still show the chat input for user to provide clarifications
     return (
-      <ContentNotFound subtitle="The requested page could not be found." />
+      <div className="chat-container">
+        <div className="messages" ref={messagesContainerRef}>
+          <div className="message-wrapper">
+            <div className="message assistant">
+              <div className="plan-chat-header">
+                <div className="plan-chat-speaker">
+                  <Body1 className="speaker-name">AI Assistant</Body1>
+                  <Tag size="extra-small" shape="rounded" appearance="brand">
+                    Ready
+                  </Tag>
+                </div>
+              </div>
+              <Body1>
+                <div className="plan-chat-message-content">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
+                    Plan completed! Feel free to ask questions or provide additional clarifications.
+                  </ReactMarkdown>
+                </div>
+              </Body1>
+            </div>
+          </div>
+        </div>
+
+        <div className="plan-chat-input-container" ref={inputContainerRef}>
+          <div className="plan-chat-input-wrapper">
+            <ChatInput
+              value={input}
+              placeholder="Ask questions or provide clarifications about your plan..."
+              onChange={setInput}
+              onEnter={() => OnChatSubmit(input)}
+              disabledChat={submittingChatDisableInput}
+            >
+              <Button
+                appearance="subtle"
+                onClick={() => OnChatSubmit(input)}
+                disabled={submittingChatDisableInput}
+                icon={<Send />}
+              />
+            </ChatInput>
+          </div>
+        </div>
+      </div>
     );
+  }
   return (
     <div className="chat-container">
       <div className="messages" ref={messagesContainerRef}>

src/frontend/src/components/content/PlanPanelRight.tsx

@@ -10,7 +10,18 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
     OnApproveStep,
     processingSubtaskId
 }) => {
-    if (!planData) return null;
+    // Only show panel when there are tasks created with relevant agents
+    // Hide panel during initial streaming or when no steps exist
+    const shouldShowPanel = planData && 
+                            planData.steps && 
+                            planData.steps.length > 0 && 
+                            planData.agents && 
+                            planData.agents.length > 0 &&
+                            !loading;
+
+    if (!shouldShowPanel) {
+        return null; // Hide the panel completely
+    }
 
     return (
         <PanelRight
@@ -19,8 +30,7 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
             panelResize={true}
             panelType="first"
         >
-
-            <div >
+            <div>
                 <TaskDetails
                     planData={planData}
                     OnApproveStep={OnApproveStep}