feat: add prompt_sandbox streaming progress UI#1548
Conversation
Add PromptSandboxStreamProgress component that renders real-time sandbox output as it streams from the API generator tool. Shows booting spinner, terminal-style streaming output, and complete/error states. Co-Authored-By: Claude Opus 4.6 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughAdded support for the 'prompt_sandbox' tool with streaming progress visualization. Introduced SandboxStreamProgress type and type guard for validation. Created PromptSandboxStreamProgress component to render sandbox execution states including booting, streaming, completion, and error conditions. Changes
Estimated Code Review Effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly Related PRs
Poem
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
components/VercelChat/tools/sandbox/PromptSandboxStreamProgress.tsx (1)
29-46: Consider addingaria-livefor accessibility on streaming output.The streaming output updates in real-time, but screen reader users won't be notified of these changes. Adding an
aria-liveregion would improve accessibility for users relying on assistive technology.♿ Proposed accessibility enhancement
if (progress.status === "streaming") { return ( - <div className="space-y-2"> + <div className="space-y-2" aria-live="polite" aria-atomic="false"> <div className="flex items-center gap-2 text-sm text-muted-foreground"> <Loader className="h-3 w-3 animate-spin" /> <span>Running in sandbox...</span> </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/VercelChat/tools/sandbox/PromptSandboxStreamProgress.tsx` around lines 29 - 46, The streaming output block (when progress.status === "streaming") isn't announced to screen readers; update the output container (e.g., the <pre> referenced by preRef or its wrapper div inside PromptSandboxStreamProgress) to be an ARIA live region by adding attributes such as aria-live="polite" (or "assertive" if immediate), aria-atomic="true", and an appropriate role like role="status" so assistive technology will announce incremental updates to progress.output; ensure these attributes are applied to the element that receives dynamic text updates.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/VercelChat/tools/sandbox/PromptSandboxStreamProgress.tsx`:
- Around line 29-46: The streaming output block (when progress.status ===
"streaming") isn't announced to screen readers; update the output container
(e.g., the <pre> referenced by preRef or its wrapper div inside
PromptSandboxStreamProgress) to be an ARIA live region by adding attributes such
as aria-live="polite" (or "assertive" if immediate), aria-atomic="true", and an
appropriate role like role="status" so assistive technology will announce
incremental updates to progress.output; ensure these attributes are applied to
the element that receives dynamic text updates.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/VercelChat/ToolComponents.tsxcomponents/VercelChat/tools/sandbox/PromptSandboxStreamProgress.tsxlib/sandboxes/sandboxStreamTypes.ts
Remove isSandboxStreamProgress guard and GenericSuccess fallback — the matched tool always renders the streaming progress component. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
DRY: both PromptSandboxStreamProgress and RunLogsList used the same auto-scroll-to-bottom pattern. Extracted to shared hooks/useAutoScroll. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
1 participant
Summary
PromptSandboxStreamProgresscomponent that renders real-time sandbox output as it streamssandboxStreamTypes.tswith shared types andisSandboxStreamProgresstype guardprompt_sandboxin bothgetToolCallComponent(booting skeleton) andgetToolResultComponent(streaming progress)Changes
lib/sandboxes/sandboxStreamTypes.tscomponents/VercelChat/tools/sandbox/PromptSandboxStreamProgress.tsxcomponents/VercelChat/ToolComponents.tsxUI States
Depends on
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes