Efficiency

[ngoiyaeric]

Can you make the related section output more efficiently, its lagging behind and the follow up section does not return any output.

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Fix the broken follow-up panel by removing the incorrect resolution_search action type that requires a file upload
• Add comprehensive error handling around streaming operations to prevent hanging UI states
• Ensure the final related queries object is always flushed to clients before closing the stream
• Reduce throttle interval to improve perceived responsiveness while relying on existing memoization for render efficiency

Design Choices

Design Choice 1: What action type should FollowupPanel use for text-only queries?

Options Considered:

1. Remove the action field entirely and let the server action handle it as a standard query
2. Add a new action type specifically for text follow-ups
3. Conditionally set action based on whether a file is attached

Chosen Option: 1

Rationale: Removing the hardcoded action=resolution_search allows the submit handler to process the input through the standard query path, which is the correct flow for text-only follow-up queries.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Fix Follow-up Panel Functionality

This phase addresses the root cause of "no output" from the follow-up section—the incorrect action type that causes the server to throw before generating any response.

Task 1: Correct Action Routing in FollowupPanel

Remove the hardcoded resolution_search action type that requires a file, allowing text queries to flow through the standard query processing path.

• Update components/followup-panel.tsx to remove the formData.append("action", "resolution_search") line
• The submit() function in app/actions.tsx will then route the request through the normal query path (checking for input field) rather than the resolution search path
• Verify the form submission includes the input field which the standard path expects

Task 2: Add Client-Side Error Handling

Wrap the form submission in error handling to gracefully handle any server errors and provide user feedback.

• Add try-catch around the await submit(formData) call in handleSubmit
• On error, optionally display feedback to the user (console error at minimum)
• Ensure the input field is not cleared on error so users don't lose their query

🤖 Prompt for AI agents

This phase fixes the broken follow-up panel by removing the incorrect action
routing and adding client-side error handling. The goal is to allow text-only
follow-up queries to flow through the standard query processing path.

**Task 1: Correct Action Routing in FollowupPanel
(`components/followup-panel.tsx`)**
- Remove the `formData.append("action", "resolution_search")` line from the form
submission logic
- This allows `submit()` in `app/actions.tsx` to route the request through the
normal query path (checking for the `input` field) instead of the resolution
search path
- Verify that the form submission still includes the `input` field, which the
standard path expects

**Task 2: Add Client-Side Error Handling (`components/followup-panel.tsx`)**
- Wrap the `await submit(formData)` call inside `handleSubmit` with a try-catch
block
- In the catch block, log the error at minimum (e.g., `console.error`);
optionally surface feedback to the user
- Do not clear the input field on error, so users do not lose their query

Phase 2: Add Stream Error Handling for Reliability

This phase ensures that streaming failures are handled gracefully, preventing hanging UI states that contribute to perceived lag and unresponsiveness.

Task 1: Add Error Handling in querySuggestor

Wrap the streaming logic in try-catch to ensure the objectStream is always properly closed, even on API or network failures.

• In lib/agents/query-suggestor.tsx, wrap the streamObject call and for await loop in a try-catch block
• In the catch block, call objectStream.error(e) or objectStream.done() to close the stream cleanly
• Log the error for debugging purposes
• Return an empty result structure so the caller can continue gracefully

Task 2: Add Error Handling Wrapper in processEvents

Ensure that uiStream.done() and isGenerating.done() are always called, even if querySuggestor or other async operations throw.

• In app/actions.tsx, wrap the querySuggestor call and subsequent uiStream.append operations in a try-catch block within processEvents
• In the catch/finally block, ensure isGenerating.done(false) and uiStream.done() are called
• This prevents the UI from hanging in a perpetual loading state when errors occur

🤖 Prompt for AI agents

This phase adds error handling around streaming operations to prevent hanging UI
states. The goal is to ensure streams are always properly closed, even on
failures.

**Task 1: Add Error Handling in querySuggestor
(`lib/agents/query-suggestor.tsx`)**
- Wrap the `streamObject` call and the `for await` loop in a try-catch block
- In the catch block:
- Call `objectStream.error(e)` or `objectStream.done()` to cleanly close the
stream
  - Log the error for debugging
- Return an empty result structure from the catch block so the caller can
continue gracefully

**Task 2: Add Error Handling Wrapper in processEvents (`app/actions.tsx`)**
- Within `processEvents`, wrap the `querySuggestor` call and subsequent
`uiStream.append` operations in a try-catch block
- In the catch or finally block, ensure both `isGenerating.done(false)` and
`uiStream.done()` are always called
- This prevents the UI from hanging in a perpetual loading state when errors
occur

Phase 3: Optimize Related Section Streaming Performance

This phase addresses the "lagging" behavior by ensuring complete data is always rendered and reducing unnecessary delays in the streaming pipeline.

Task 1: Ensure Final Object is Flushed Before Stream Closes

Fix the throttling logic to guarantee the final complete object is sent to clients before the stream closes.

• In lib/agents/query-suggestor.tsx, after the for await loop completes, add a final objectStream.update(finalRelatedQueries) call before objectStream.done()
• This ensures that even if the last batch arrived within the 200ms throttle window, the complete final state is pushed to clients
• The final update should only fire if finalRelatedQueries has valid items

Task 2: Reduce Throttle Interval for Faster Updates

Decrease the throttle delay to provide more responsive UI updates during streaming.

• In lib/agents/query-suggestor.tsx, reduce UPDATE_THROTTLE from 200ms to 100ms
• This provides a better balance between render performance and perceived responsiveness
• The existing memoization in SearchRelated (React.memo, useMemo, useCallback) will prevent excessive re-renders despite more frequent updates

🤖 Prompt for AI agents

This phase optimizes the related section streaming performance by ensuring the
final data is always flushed and reducing throttle delay. The goal is to
eliminate lag and incomplete renders.

**Task 1: Ensure Final Object is Flushed Before Stream Closes
(`lib/agents/query-suggestor.tsx`)**
- After the `for await` loop completes, add a final
`objectStream.update(finalRelatedQueries)` call before `objectStream.done()`
- This guarantees that even if the last batch arrived within the throttle
window, the complete final state is pushed to clients
- Only fire this final update if `finalRelatedQueries` has valid items

**Task 2: Reduce Throttle Interval (`lib/agents/query-suggestor.tsx`)**
- Reduce the `UPDATE_THROTTLE` constant from `200`ms to `100`ms
- This improves perceived responsiveness with more frequent updates
- Note: the existing memoization in `SearchRelated` (`React.memo`, `useMemo`,
`useCallback`) will prevent excessive re-renders despite the increased update
frequency

Research

The application uses Vercel AI SDK's streaming primitives (createStreamableValue, createStreamableUI) to stream AI-generated content. The querySuggestor agent generates related queries via streamObject with 200ms throttling and an LRU cache. The SearchRelated component consumes a StreamableValue<PartialRelated> via useStreamableValue. The FollowupPanel is a text input form that submits queries through the main submit() server action. The core issue is that FollowupPanel hardcodes action=resolution_search which requires an image file—when no file is provided, the server action throws immediately, preventing any response. Additionally, querySuggestor lacks error handling, leaving streams in a permanently pending state on failures.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase fixes the broken follow-up panel by removing the incorrect action
routing and adding client-side error handling. The goal is to allow text-only
follow-up queries to flow through the standard query processing path.

**Task 1: Correct Action Routing in FollowupPanel
(`components/followup-panel.tsx`)**
- Remove the `formData.append("action", "resolution_search")` line from the form
submission logic
- This allows `submit()` in `app/actions.tsx` to route the request through the
normal query path (checking for the `input` field) instead of the resolution
search path
- Verify that the form submission still includes the `input` field, which the
standard path expects

**Task 2: Add Client-Side Error Handling (`components/followup-panel.tsx`)**
- Wrap the `await submit(formData)` call inside `handleSubmit` with a try-catch
block
- In the catch block, log the error at minimum (e.g., `console.error`);
optionally surface feedback to the user
- Do not clear the input field on error, so users do not lose their query
===============================================================================

Task: 2

This phase adds error handling around streaming operations to prevent hanging UI
states. The goal is to ensure streams are always properly closed, even on
failures.

**Task 1: Add Error Handling in querySuggestor
(`lib/agents/query-suggestor.tsx`)**
- Wrap the `streamObject` call and the `for await` loop in a try-catch block
- In the catch block:
- Call `objectStream.error(e)` or `objectStream.done()` to cleanly close the
stream
  - Log the error for debugging
- Return an empty result structure from the catch block so the caller can
continue gracefully

**Task 2: Add Error Handling Wrapper in processEvents (`app/actions.tsx`)**
- Within `processEvents`, wrap the `querySuggestor` call and subsequent
`uiStream.append` operations in a try-catch block
- In the catch or finally block, ensure both `isGenerating.done(false)` and
`uiStream.done()` are always called
- This prevents the UI from hanging in a perpetual loading state when errors
occur
===============================================================================

Task: 3

This phase optimizes the related section streaming performance by ensuring the
final data is always flushed and reducing throttle delay. The goal is to
eliminate lag and incomplete renders.

**Task 1: Ensure Final Object is Flushed Before Stream Closes
(`lib/agents/query-suggestor.tsx`)**
- After the `for await` loop completes, add a final
`objectStream.update(finalRelatedQueries)` call before `objectStream.done()`
- This guarantees that even if the last batch arrived within the throttle
window, the complete final state is pushed to clients
- Only fire this final update if `finalRelatedQueries` has valid items

**Task 2: Reduce Throttle Interval (`lib/agents/query-suggestor.tsx`)**
- Reduce the `UPDATE_THROTTLE` constant from `200`ms to `100`ms
- This improves perceived responsiveness with more frequent updates
- Note: the existing memoization in `SearchRelated` (`React.memo`, `useMemo`,
`useCallback`) will prevent excessive re-renders despite the increased update
frequency

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!