feat(frontend): refine onboarding audio orb - #13785
Conversation
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
github-actions
Bot
added
platform/frontend
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe brain-dump onboarding flow adds three selectable orb styles, audio-reactive rendering, WebGL fallbacks, recording controls, cancellation handling, timed feedback, reduced-motion support, and expanded browser tests. ChangesBrain dump orb recording
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant BrainDumpStep
participant OrbSelector
participant OrbFrame
participant OrbVisual
participant RecordingControls
participant useBrainDumpStep
BrainDumpStep->>OrbSelector: select orb variant
OrbSelector->>OrbFrame: provide variant
OrbFrame->>OrbVisual: render audio and recording state
BrainDumpStep->>RecordingControls: provide recording actions
RecordingControls->>useBrainDumpStep: send or cancel recording
useBrainDumpStep-->>RecordingControls: return action state
RecordingControls-->>BrainDumpStep: display pending or status feedback
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
github-actions
Bot
removed
the
conflicts
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 0 conflict(s), 0 medium risk, 2 low risk (out of 2 PRs with file overlap) Auto-generated on push. Ignores: |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
github-actions
Bot
added
cla: pending
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (9)
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/useBrainDumpStep.ts (2)
115-126: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract the discard sequence into one helper.
handleStop(Lines 115-126),handleRestart(Lines 196-207), anddropRecoverable(Lines 351-358) now repeat the same "clear locally, then discard on the server, both best effort" sequence. A future change to the discard contract must be applied in three places. Extract a singlediscardTake(recordingId)helper and call it from all three.♻️ Proposed refactor
+ // Local parts and the server's half-uploaded buffer are always dropped + // together; a failure on either side must not block the user. + async function discardTake(recordingId: string) { + await clearRecording(recordingId).catch(() => undefined); + await discardBrainDump({ recording_id: recordingId }).catch( + () => undefined, + ); + } + async function handleStop() { const recordingId = recorder.recordingId; await recorder.stop(); recorder.resetQueue(); - if (recordingId) { - await clearRecording(recordingId).catch(() => undefined); - await discardBrainDump({ recording_id: recordingId }).catch( - () => undefined, - ); - } + if (recordingId) await discardTake(recordingId); setScreen("rest"); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/useBrainDumpStep.ts around lines 115 - 126, Extract the repeated best-effort cleanup sequence into a shared discardTake(recordingId) helper that clears the local recording and then discards it on the server. Update handleStop, handleRestart, and dropRecoverable to call this helper while preserving their existing behavior and error suppression.
115-126: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winTrack the cancel action.
handleStopis the only terminal user action in this hook that emits no analytics event.handleRestartsendsbrain_dump_restarted,handleSkipsendsbrain_dump_skipped, andhandleRetrysendsbrain_dump_retry. Without an event you cannot measure how often users abandon a take through the new Cancel control.♻️ Proposed change
async function handleStop() { + trackBrainDump("brain_dump_canceled"); const recordingId = recorder.recordingId; await recorder.stop();🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/useBrainDumpStep.ts around lines 115 - 126, Update handleStop to emit the brain-dump cancellation analytics event when the user cancels a recording, consistent with the existing tracking in handleRestart, handleSkip, and handleRetry. Place the event alongside the other terminal-action tracking while preserving the existing recording cleanup and rest-screen transition.autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/WavyOrb.test.tsx (1)
55-66: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a test that exercises reduced motion.
setReducedMotionaccepts amatchesargument, but every call passesfalse. No test covers the reduced-motion branch inWavyOrb, whererenderdraws one frame and does not schedulerequestAnimationFrame, anduTimeis pinned to3.2. Add a case withsetReducedMotion(true)that asserts the loop stops after the first frame.💚 Proposed test
+ it("draws a single frame when the user prefers reduced motion", () => { + setReducedMotion(true); + const gl = createWebGlContext(); + vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue( + gl as unknown as WebGL2RenderingContext, + ); + + render(<WavyOrb audioStream={null} settings={DEFAULT_WAVY_ORB_SETTINGS} />); + + act(() => flushAnimationFrames()); + expect(animationFrames.size).toBe(0); + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/WavyOrb.test.tsx around lines 55 - 66, Add a reduced-motion test in the WavyOrb test suite that calls setReducedMotion(true), renders WavyOrb, and verifies render draws exactly one frame without scheduling requestAnimationFrame; also assert the uTime uniform remains pinned to 3.2, covering the reduced-motion branch.autogpt_platform/frontend/src/app/(no-navbar)/onboarding/__tests__/brain-dump.test.tsx (1)
198-226: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winComplete the analyser fixture for the wavy orb path.
FakeAudioContextexposesgetByteTimeDomainDatabut nogetByteFrequencyData, and the class has nosampleRate.WavyOrbcalls both when an audio stream is present. Today no test records while the wavy orb is selected, so the gap is not hit. If a test records with that variant,getByteFrequencyDatathrows andsampleRateproducesNaNuniforms with no visible failure. Add both to the fixture.♻️ Proposed change
class FakeAudioContext { state: AudioContextState = "running"; + sampleRate = 48000; createAnalyser() { return { fftSize: 256, frequencyBinCount: 128, smoothingTimeConstant: 0, getByteTimeDomainData(samples: Uint8Array) { samples.fill(128); }, + getByteFrequencyData(samples: Uint8Array) { + samples.fill(0); + }, } as unknown as AnalyserNode; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/__tests__/brain-dump.test.tsx around lines 198 - 226, Complete FakeAudioContext for WavyOrb audio recording tests by adding a valid sampleRate and implementing createAnalyser’s getByteFrequencyData method. Keep the existing time-domain fixture behavior and fill frequency samples with deterministic values so audio uniforms remain finite.autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/useAudioLevel.ts (1)
49-53: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winHandle rejection from
audioContext.close().
close()returns a Promise. It rejects if the context is already closed.voiddoes not attach a rejection handler, so the rejection becomes an unhandled promise rejection. Attach a catch.♻️ Proposed fix
return () => { cancelAnimationFrame(animationFrame); level.set(0); - void audioContext.close(); + void audioContext.close().catch(() => undefined); };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/useAudioLevel.ts around lines 49 - 53, Update the cleanup function in useAudioLevel to attach a rejection handler to audioContext.close(), preventing an unhandled rejection when the context is already closed. Keep the existing animation cancellation and level reset behavior unchanged.autogpt_platform/frontend/src/components/molecules/GlassOrb/GlassSurface.tsx (1)
28-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove the props to a
Propsinterface.The changed signature declares props inline. The coding guidelines require component props in
src/**/*.tsxto use a non-exportedinterface Props { ... }.♻️ Proposed fix
-export function GlassSurface({ - params, - showRim = true, -}: { - params: GlassParams; - showRim?: boolean; -}) { +interface Props { + params: GlassParams; + showRim?: boolean; +} + +export function GlassSurface({ params, showRim = true }: Props) {As per coding guidelines: "Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/molecules/GlassOrb/GlassSurface.tsx` around lines 28 - 34, Replace the inline props type in the GlassSurface component with a non-exported interface Props containing params and optional showRim, then use Props as the component parameter type while preserving the existing default value.Source: Coding guidelines
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbUiOrb.tsx (1)
14-20: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winReduce the React re-render rate driven by the audio level.
useAudioLevelwrites a new level on every animation frame.useMotionValueEventcallssetVolumeon each change. Rounding to two decimals still changes on almost every frame, because the RMS value moves continuously. The result is a React re-render ofOrbat roughly 60 fps for the whole recording duration.Quantize more coarsely, or skip the update when the rounded value did not change.
♻️ Proposed fix
useMotionValueEvent(audioLevel, "change", (latest) => { - setVolume(Math.round(latest * 100) / 100); + const next = Math.round(latest * 20) / 20; + setVolume((current) => (current === next ? current : next)); });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbUiOrb.tsx around lines 14 - 20, Reduce updates in OrbUiOrb’s useMotionValueEvent handler by quantizing audioLevel more coarsely or tracking the last rounded value and calling setVolume only when the quantized value changes, while preserving the current volume behavior.autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsx (1)
38-39: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winSkip audio analysis when the variant does not consume
audioLevel.
OrbVisualignoresaudioLevelin thewavybranch and passesaudioStreamtoWavyOrb, which performs its own analysis. For thewavyvariant this hook opens a secondAudioContextand a second analyser on the sameMediaStream, and runs arequestAnimationFrameloop whose output nothing reads. Gate the hook argument on the variant.♻️ Proposed fix
const isRecording = progress !== undefined; - const audioLevel = useAudioLevel(isRecording ? audioStream : null); + const audioLevel = useAudioLevel( + isRecording && variant !== "wavy" ? audioStream : null, + );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsx around lines 38 - 39, Update the audio-level hook invocation in OrbFrame so useAudioLevel receives audioStream only for variants whose OrbVisual path consumes audioLevel; pass null for the wavy variant, which analyzes audio internally through WavyOrb. Preserve the existing isRecording gating for applicable variants.autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/BrainDumpStep.tsx (1)
300-483: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy liftExtract the new sub-components into their own files.
This diff adds
OrbControlButton,RecordingControls, andRecordingControlButtontoBrainDumpStep.tsx, taking the file to roughly 484 lines. The guidelines cap files at about 200 lines and require sub-components to live in a localcomponents/folder. Acomponents/RecordingControls/folder next to the step would holdRecordingControls.tsxandRecordingControlButton.tsx, andOrbControlButton.tsxcan sit beside the existingMicButton.tsx.As per coding guidelines: "Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this" and "use sub-components in local
/componentsfolder".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/BrainDumpStep.tsx around lines 300 - 483, Extract OrbControlButton, RecordingControls, and RecordingControlButton from BrainDumpStep.tsx into local components files: place OrbControlButton alongside MicButton.tsx, and place RecordingControls with RecordingControlButton under a components/RecordingControls/ folder. Update imports and preserve each component’s existing props, behavior, and styling while keeping BrainDumpStep.tsx under the file-size guideline.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/__tests__/brain-dump.test.tsx:
- Around line 581-630: In the “shows immediate progress while canceling a
recording” test, wait until the MSW discard handler has assigned finishDiscard
before invoking it. Replace the optional call with an assertion or wait that
confirms finishDiscard is defined, then resolve the pending discard so the final
“Start talking” assertion can complete.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/BrainDumpStep.tsx:
- Around line 347-358: Update runAction to use a synchronously updated ref as
the concurrency guard, setting it before invoking the callback and clearing it
in finally alongside pendingAction; keep the existing state update for UI
disabling. Add Sentry handling for callback rejections by catching errors and
reporting them, since callers intentionally use void runAction(...); import
useRef from react and Sentry from `@sentry/nextjs` as required.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/WavyOrb.tsx:
- Around line 289-482: Extract the WebGL lifecycle currently implemented in
WavyOrb’s useEffect into a useWavyOrb hook, including context/program setup,
audio analysis, observers, resizing, cleanup, and animation rendering. Move
shader source constants and hexToRgb, compileShader, follow, and bandAverage
into WavyOrb/helpers.ts, then keep WavyOrb/WavyOrb.tsx limited to component
render logic and hook usage. Follow the WavyOrb.tsx, useWavyOrb.ts, and
helpers.ts structure while preserving existing behavior and dependencies.
In `@autogpt_platform/frontend/src/components/molecules/GlassOrb/GlassOrb.tsx`:
- Around line 31-36: Update the audio-reactive transforms in GlassOrb to use
reduced-motion-safe output ranges when prefersReducedMotion is true: flatten or
substantially reduce fillScale, fillOpacity, and pulseOpacity so recording no
longer causes continuous large-amplitude scaling or flashing, while preserving
the existing ranges for normal motion preferences.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/__tests__/brain-dump.test.tsx:
- Around line 198-226: Complete FakeAudioContext for WavyOrb audio recording
tests by adding a valid sampleRate and implementing createAnalyser’s
getByteFrequencyData method. Keep the existing time-domain fixture behavior and
fill frequency samples with deterministic values so audio uniforms remain
finite.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/BrainDumpStep.tsx:
- Around line 300-483: Extract OrbControlButton, RecordingControls, and
RecordingControlButton from BrainDumpStep.tsx into local components files: place
OrbControlButton alongside MicButton.tsx, and place RecordingControls with
RecordingControlButton under a components/RecordingControls/ folder. Update
imports and preserve each component’s existing props, behavior, and styling
while keeping BrainDumpStep.tsx under the file-size guideline.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/WavyOrb.test.tsx:
- Around line 55-66: Add a reduced-motion test in the WavyOrb test suite that
calls setReducedMotion(true), renders WavyOrb, and verifies render draws exactly
one frame without scheduling requestAnimationFrame; also assert the uTime
uniform remains pinned to 3.2, covering the reduced-motion branch.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsx:
- Around line 38-39: Update the audio-level hook invocation in OrbFrame so
useAudioLevel receives audioStream only for variants whose OrbVisual path
consumes audioLevel; pass null for the wavy variant, which analyzes audio
internally through WavyOrb. Preserve the existing isRecording gating for
applicable variants.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbUiOrb.tsx:
- Around line 14-20: Reduce updates in OrbUiOrb’s useMotionValueEvent handler by
quantizing audioLevel more coarsely or tracking the last rounded value and
calling setVolume only when the quantized value changes, while preserving the
current volume behavior.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/useAudioLevel.ts:
- Around line 49-53: Update the cleanup function in useAudioLevel to attach a
rejection handler to audioContext.close(), preventing an unhandled rejection
when the context is already closed. Keep the existing animation cancellation and
level reset behavior unchanged.
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/useBrainDumpStep.ts:
- Around line 115-126: Extract the repeated best-effort cleanup sequence into a
shared discardTake(recordingId) helper that clears the local recording and then
discards it on the server. Update handleStop, handleRestart, and dropRecoverable
to call this helper while preserving their existing behavior and error
suppression.
- Around line 115-126: Update handleStop to emit the brain-dump cancellation
analytics event when the user cancels a recording, consistent with the existing
tracking in handleRestart, handleSkip, and handleRetry. Place the event
alongside the other terminal-action tracking while preserving the existing
recording cleanup and rest-screen transition.
In
`@autogpt_platform/frontend/src/components/molecules/GlassOrb/GlassSurface.tsx`:
- Around line 28-34: Replace the inline props type in the GlassSurface component
with a non-exported interface Props containing params and optional showRim, then
use Props as the component parameter type while preserving the existing default
value.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c5717b23-cd4a-4662-a1a3-318a5c46787b
⛔ Files ignored due to path filters (1)
autogpt_platform/frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
autogpt_platform/frontend/package.jsonautogpt_platform/frontend/src/app/(no-navbar)/onboarding/__tests__/brain-dump.test.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/BrainDumpStep.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/__tests__/helpers.test.tsautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/MicButton.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbSelector.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbUiOrb.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbVisual.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/RecordingStatus.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/TapHint.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/WavyOrb.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/WavyOrb.test.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/useAudioLevel.tsautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/helpers.tsautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/useBrainDumpStep.tsautogpt_platform/frontend/src/components/atoms/Reveal/Reveal.tsxautogpt_platform/frontend/src/components/atoms/SwapFade/SwapFade.tsxautogpt_platform/frontend/src/components/molecules/GlassOrb/GlassOrb.tsxautogpt_platform/frontend/src/components/molecules/GlassOrb/GlassSurface.tsx
💤 Files with no reviewable changes (1)
- autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/TapHint.tsx
There was a problem hiding this comment.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx (1)
15-17: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a function declaration for the mocked component.
OrbVisualis a React component, including in this module mock. Replace the arrow function with a named function declaration.Proposed change
vi.mock("../OrbVisual", () => ({ - OrbVisual: () => <div data-testid="orb-visual" />, + OrbVisual: function OrbVisual() { + return <div data-testid="orb-visual" />; + }, }));As per coding guidelines, “Use function declarations (not arrow functions) for components/handlers.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx around lines 15 - 17, Update the OrbVisual mock in the vi.mock factory to use a named function declaration instead of an arrow function, while preserving its existing rendered output and test identifier.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx:
- Around line 15-17: Update the OrbVisual mock in the vi.mock factory to use a
named function declaration instead of an arrow function, while preserving its
existing rendered output and test identifier.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 7c9a8459-4ddb-4eeb-9ae3-96b297ee9a99
📒 Files selected for processing (2)
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsxautogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/OrbFrame.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (6)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: end-to-end tests
- GitHub Check: Seer Code Review
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (14)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend developmentFormat frontend code using
pnpm format
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development
autogpt_platform/frontend/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components/handlers
Noanytypes unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Always import the-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports are deprecated
Do not useuseCallbackoruseMemounless asked to optimize a given function
Never usesrc/components/__legacy__/*— use design system components fromsrc/components/
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}: Use Vitest + RTL + MSW for integration tests as the primary testing approach (~90%, page-level), use Playwright for E2E critical flows, and use Storybook for design system components
Run frontend integration tests withpnpm test:unit(Vitest + RTL + MSW)
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
autogpt_platform/frontend/**/*.{tsx,jsx}: Nodark:Tailwind classes — the design system handles dark mode
Use Next.js<Link>for internal navigation — never raw<a>tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in local
components/folder; component props should betype Props = { ... }(not exported) unless used outside the component
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/app/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Write integration tests in
__tests__/next topage.tsxusing Vitest + RTL + MSW for new pages/features
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Orval-generated MSW handlers from
@/app/api/__generated__/endpoints/{tag}/{tag}.msw.tsfor API mocking
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
🧠 Learnings (11)
📚 Learning: 2026-02-27T10:45:49.499Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:49.499Z
Learning: Prefer using generated OpenAPI types from '`@/app/api/__generated__/`' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-07-28T15:32:54.931Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13699
File: autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx:0-0
Timestamp: 2026-07-28T15:32:54.931Z
Learning: In AutoGPT's frontend (autogpt_platform/frontend), prefer importing the non-legacy ScrollArea component from `@/components/ui/scroll-area` over `@/components/__legacy__/ui/scroll-area` for new or migrated code. The non-legacy component is a drop-in superset: it preserves the legacy component’s props and additionally supports the optional `showScrollToTop` prop—so reviewers should flag new legacy imports unless there’s a specific, documented reason they can’t use the non-legacy version.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-07-03T04:19:11.799Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13474
File: autogpt_platform/frontend/src/app/(platform)/PlatformChrome/PlatformChrome.tsx:38-38
Timestamp: 2026-07-03T04:19:11.799Z
Learning: When reviewing Tailwind usage in .tsx components, allow intentional raw hex color values if they exactly match the design-spec and there is no equivalent Tailwind design token/utility class available (e.g., a utility like `bg-zinc-50` may be a different shade than the required `#f9f9f9`). Do not flag these as "design-token violations" as long as the reviewer can confirm that an appropriate Tailwind token does not exist or would not match the exact color.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-20T13:17:39.951Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12854
File: autogpt_platform/frontend/src/app/(platform)/library/__tests__/briefing.test.tsx:84-84
Timestamp: 2026-04-20T13:17:39.951Z
Learning: In the AutoGPT frontend, `testing-library/react` cleanup is already handled globally after each test via `src/tests/integrations/vitest.setup.tsx`. Therefore, for integration test files under `__tests__/`, do NOT add redundant `afterEach(() => cleanup())`. Only add local `afterEach` teardown for resources that are not covered globally—specifically, when using fake timers, add `afterEach(() => vi.useRealTimers())` (or equivalent) to restore real timers and prevent cross-test interference.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
📚 Learning: 2026-04-20T20:07:22.981Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/__tests__/ExecutionsTable.test.tsx:27-76
Timestamp: 2026-04-20T20:07:22.981Z
Learning: In this codebase, Orval-generated API modules under `src/app/api/__generated__/` are not committed to git and must be generated via `pnpm generate:api` (requires a running backend). In integration tests, it’s acceptable—and expected—to stub generated hooks/modules by mocking them with `vi.mock("`@/app/api/__generated__/endpoints/`{tag}/{tag}")`. Do not treat `vi.mock` of these generated hook modules as a violation of the MSW handler guideline, since the corresponding MSW handlers cannot be imported at test time when generated files are absent.
Applied to files:
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/BrainDumpStep/components/__tests__/OrbFrame.test.tsx (1)
1-13: LGTM!Also applies to: 19-50
|
🔄 Auto-redeploying: new commits pushed to a PR with an active deployment. Refreshing development environment for PR #13785. |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## dev #13785 +/- ##
==========================================
+ Coverage 77.06% 77.56% +0.50%
==========================================
Files 2997 2853 -144
Lines 227098 215546 -11552
Branches 21592 20594 -998
==========================================
- Hits 175004 167182 -7822
+ Misses 47379 43826 -3553
+ Partials 4715 4538 -177
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
🤖 Addressed the three collapsed nitpicks from CodeRabbit review 4871483905 in b2605eefa1: the recording feedback live region is now persistent, the cancel-race test asserts the final |
|
🔄 Auto-redeploying: new commits pushed to a PR with an active deployment. Refreshing development environment for PR #13785. |
|
/review |
![autogpt-pr-reviewer[bot]](https://avatars.githubusercontent.com/u/130738209?s=60&v=4){kind=small}
There was a problem hiding this comment.
❓ INCONCLUSIVE
You've hit your session limit · resets 9am (UTC)
Risk level: medium | Human review: recommended | Duration: 840s | Reviewed: b2605eef
Specialist Reports
| Specialist | Status | Summary |
|---|---|---|
| security | You've hit your session limit · resets 9am (UTC) | |
| architect | You've hit your session limit · resets 9am (UTC) | |
| performance | You've hit your session limit · resets 9am (UTC) | |
| testing | You've hit your session limit · resets 9am (UTC) | |
| quality | You've hit your session limit · resets 9am (UTC) | |
| product | You've hit your session limit · resets 9am (UTC) | |
| discussion | You've hit your session limit · resets 9am (UTC) | |
| ui-reviewer (local) | You've hit your session limit · resets 9am (UTC) | |
| ui-reviewer (hosted) | ✅ PASS | Onboarding brain-dump orb refresh works: all three orb variants render live, typed fallback completes end-to-end with a verified backend state change, negatives return 401/422, and the PR's own 87 tests pass — no functional regressions found. |
Quality Checks
- ✅ lint: cd autogpt_platform/frontend && pnpm lint:
cd autogpt_platform/frontend && pnpm lint(77s) - ✅ lint: cd autogpt_platform/backend && poetry run lint:
cd autogpt_platform/backend && poetry run lint(0s) - ✅ typecheck: cd autogpt_platform/frontend && pnpm types:
cd autogpt_platform/frontend && pnpm types(46s) - ❌ test: cd autogpt_platform/frontend && mv .env /tmp/qa-env-stash 2>/dev/null; pnpm test:unit; rc=$?; [ -f /tmp/qa-env-stash ] && mv /tmp/qa-env-stash .env; exit $rc:
cd autogpt_platform/frontend && mv .env /tmp/qa-env-stash 2>/dev/null; pnpm test:unit; rc=$?; [ -f /tmp/qa-env-stash ] && mv /tmp/qa-env-stash .env; exit $rc(390s) - ✅ build: cd autogpt_platform/frontend && pnpm build:
cd autogpt_platform/frontend && pnpm build(318s)
|
🔄 Auto-redeploying: new commits pushed to a PR with an active deployment. Refreshing development environment for PR #13785. |
|
🔄 Auto-redeploying: new commits pushed to a PR with an active deployment. Refreshing development environment for PR #13785. |
|
/review |
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
There was a problem hiding this comment.
📋 Automated Review — PR #13785
PR #13785 — feat(frontend): refine onboarding audio orb
Author: Abhi1992002 | Files: 25
🎯 Verdict: APPROVE
PR Description Quality
OrbVisual renders only the GlassOrb path, and brain-dump.test.tsx explicitly asserts the "Orb style" combobox is absent). Trim the description to what actually merges so the changelog/release notes stay accurate.
What This PR Does
Refreshes the onboarding brain-dump audio orb: the orb becomes a decorative visual with audio-reactive frequency bars (useAudioBars), a full-screen recording overlay, and a redesigned Cancel/Send/Retry control set with an explicit confirm-and-discard dialog. It also hardens the recorder teardown (stop() now releases tracks/context in a finally) and adds a take-ownership mutex so submit and discard can't race the same recording. Entirely frontend, gated behind the onboarding-brain-dump LaunchDarkly flag.
Specialist Findings
🛡️ Security ✅ — Frontend-only; no backend/auth/dependency/config changes. AudioContext lifecycle is cleaned up correctly (context closed, source disconnected, RAF cancelled on unmount/failure), no mic-stream leak, no audio bytes leave the client. Noted the client-supplied recording_id on discard relies on existing server-side ownership checks (pattern predates this PR); QA confirmed unauthenticated DELETE returns 401.
🏗️ Architecture ✅ — Clean component decomposition and unidirectional dependency flow; the take-ownership mutex correctly serializes submit-vs-discard.
🟠 useAudioBars opens a second AudioContext/analyser over the same recording stream that the recorder already analyses for silence detection (useAudioBars.ts:39) — doubles audio-graph resources per recording. (Flagged by: architect, performance — 2 specialists)
⚡ Performance ✅ — Hot path is sound: the audio meter drives framer-motion MotionValues directly, bypassing React re-renders. O(bins)/frame, ~32 FFT bins, no growth over recording duration. Two flagged items: a full-viewport backdrop-blur-xl during recording (GPU-expensive on low-end devices, BrainDumpStep.tsx:50) and minor per-frame closure allocation in the RAF loop (useAudioBars.ts:71). Both 🟡.
🧪 Testing useAudioBars, OrbFrame, recorder stop-failure, and concurrency-mutex specs). Gaps: RecordingControls send/retry pending copy + its component-level error catch are never exercised (RecordingControls.tsx:63,76), and milestone tests assert only .not.toBeNull() rather than the actual copy mapping (helpers.test.ts:40).
📖 Quality ✅ — Well-separated render/logic, function declarations, icons via the Icon atom. Minor polish: one hardcoded hex bg-[#F6F7F8]/90 (BrainDumpStep.tsx:48), unexplained audio tuning constants (useAudioBars.ts:79), and useBrainDumpStep.ts at 469 lines.
📦 Product purple-600 to !text-purple-400 (~2.1:1 contrast, below WCAG AA 4.5:1) on the light backdrop (RecordingStatus.tsx:32). Also flagged the encouragement cadence now fires every 20–30s, reversing a prior deliberate "don't nag" decision (helpers.ts:38) — worth confirming intent.
📬 Discussion ✅ — All 23 review threads resolved; every one of maintainer kcze's 10 concerns was fixed in commit e0660df4c (Hugeicons migration, finally teardown, guarded AudioContext, cancel confirm dialog, reduced-motion, aria fixes). GitHub CI fully green. Outstanding item is process-only: no fresh maintainer approval recorded on the current head yet.
🔎 QA ✅ — Reached the flagged step and exercised it end-to-end with a synthetic audio stream. Orb geometry matches the PR's own test assertions exactly (width 184px, bars 22,34,46,34,22), recording controls + cancel dialog render, and the discard flow fired a real DELETE /api/onboarding/brain-dump?recording_id=… → 200. Negative auth test returned 401. No runtime errors. Send/finalize not fully exercised (test user lacked a linked platform User row — data-setup, not code).
🟠 Should Fix
- WCAG AA contrast regression (
RecordingStatus.tsx:32) —!text-purple-400at 14px gives ~2.1:1 on the light recording backdrop; restorepurple-600/700or an AA-compliant token. (Flagged by: product — 1) - Second AudioContext on the recording stream (
useAudioBars.ts:39) — expose a single shared analyser fromuseBrainDumpRecorderinstead of opening a duplicate context per recording. (Flagged by: architect, performance — 2 specialists; confirm againstuseBrainDumpRecorder.ts) - Untested RecordingControls send/retry + error branches (
RecordingControls.tsx:63,76) — add a unit spec for thesend/retrypending copy and therunActioncatch/Sentry.captureExceptionpath. (Flagged by: testing — 1) - Weak milestone assertions (
helpers.test.ts:40) — assert concrete copy at a wrap boundary so an off-by-one in the milestone→copy modulo is caught. (Flagged by: testing — 1) - Trim PR description — remove the "selectable glass / wavy WebGL / Orb UI style picker" claims that don't ship. (Flagged by: architect, product — 2 specialists)
🟡 Nice to Have
- Lighter recording-overlay blur (
BrainDumpStep.tsx:50) — full-viewportbackdrop-blur-xlunder an animating orb is GPU-heavy; considerbackdrop-blur-mdand verify on a mid-tier device. (performance) - Confirm encouragement cadence (
helpers.ts:38) — the 20–30s nag reverses a prior intentional "go quiet" decision; confirm it's deliberate. (product) - AudioContext reuse across retry/cancel cycles (
useAudioBars.ts:39) — reuse a suspended context to avoid the browser's ~6-context cap under aggressive retrying. (performance) - Extract audio tuning constants (
useAudioBars.ts:79) — nameNOISE_FLOOR/GAIN/ATTACK_RATE/DECAY_RATE. (quality) - Shrink
useBrainDumpStep.ts(469 lines) — extract the take-ownership mutex into a small hook. (quality)
🔵 Nits
- Hardcoded hex (
BrainDumpStep.tsx:48) — replacebg-[#F6F7F8]/90with a design token. (quality) - Stale comment (
BrainDumpStep.tsx:161) — the "both slots swap contents" comment no longer matches the now-empty second slot. (architect) - Dead export (
helpers.ts:50) —DURATION_GUIDANCE_COPYis only used within the module. (quality) - Aria vs visible copy divergence (
RecordingControls.tsx:97) — align the two vocabularies or note the intent. (quality)
QA Screenshots
| Screenshot | Description |
|---|---|
 |
Rest-state orb + "Start talking"; width 184px, 5 bars, no progress ring ✅ |
 |
Full-screen recording, progress ring filling, timer 0:27, parts POST → 200 ✅ |
 |
Cancel confirm dialog with Keep/Discard; discard → backend DELETE 200 ✅ |
Human Review Needed
NO — Frontend-only UI change with no auth, credential, or trust-boundary impact; QA verified the full flow end-to-end including a 401 on unauthenticated discard.
Risk Assessment
Merge risk: LOW | Rollback: EASY (feature-flag gated, frontend-only)
CI Status
GitHub CI: all required checks green per discussion review (lint, typecheck, CodeQL, codecov patch/project, e2e, integration — on head e0660df). Local harness: lint ✅, typecheck ✅, build ✅; the local pnpm test:unit run failed, but the repository's own CI ran the same suite green on this SHA — treating the local failure as environment skew, not a code defect. Process note: no fresh maintainer approval is recorded on the current head yet.
UI Testing — Variant Results
✅ local: Brain-dump audio orb refinements verified end-to-end: new orb visuals (184px, 5 reactive bars), recording controls, and cancel-and-discard flow all work with backend DELETE returning 200 and no runtime errors.
✅ hosted: I'll start with the mandatory Bash call to get auth and verify services. Token came back empty. Let me try the sign-up fallback then re-auth. The injected credentials are different. Let me auth with the real ones.
| let audioContext: AudioContext | null = null; | ||
| let analyser: AnalyserNode | null = null; | ||
| let source: MediaStreamAudioSourceNode | null = null; | ||
|
|
There was a problem hiding this comment.
🤖 🟡 medium (architect/resource-ownership)
useAudioBars opens its own AudioContext + AnalyserNode over the recording MediaStream. The recorder likely already runs an analyser on the same stream for silence detection (test FakeAudioContext exposes getByteTimeDomainData, unused here), meaning two concurrent audio graphs and RAF loops per recording.
Suggestion: Expose a single shared analyser/AudioContext from useBrainDumpRecorder and have useAudioBars read frequency data from it instead of constructing a second context.
| cancelControlRef.current?.querySelector("button")?.focus(); | ||
| }, [pendingAction]); | ||
|
|
||
| async function runAction( |
There was a problem hiding this comment.
🤖 🟢 low (architect/duplicate-error-handling)
runAction wraps onSend/onRetry/onStop in try/catch + Sentry.captureException, but the corresponding handlers in useBrainDumpStep already catch internally and never rethrow. The catch is effectively dead today and would double-report to Sentry if a handler ever throws.
Suggestion: Own error reporting in one layer (prefer the domain hook that decides the failure UI) and drop the redundant catch here, or have handlers rethrow and let RecordingControls report.
| {orbScreen !== "failed" && !isRecording && ( | ||
| <> | ||
| <div className="flex h-10 w-full items-center justify-center"> | ||
| <SwapFade |
There was a problem hiding this comment.
🤖 🟢 low (architect/comment-durability)
Comment says 'Both slots keep their height ... swaps their contents', but ElapsedTime moved to the overlay and the second slot is now a permanently-empty div, so it no longer swaps content.
Suggestion: Rewrite to reference only the first slot, e.g. 'The first slot keeps its height across rest → recording → processing, so advancing a screen swaps its contents without nudging the orb or the headline.'
| // lands past the last step with nothing to render. | ||
| const isSubmittingRef = useRef(false); | ||
| const activeTakeActionRef = useRef<{ | ||
| action: "submit" | "discard"; |
There was a problem hiding this comment.
🤖 🟢 low (architect/coupling)
The take action is serialized by activeTakeActionRef here and independently by isActionPendingRef in RecordingControls, giving two mutexes for one invariant.
Suggestion: Document the domain token as the source of truth (the UI ref is only for disable feedback) so future refactors don't rely on the UI guard alone.
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
|
🧹 Auto-undeploying: PR closed with active deployment. Cleaning up development environment for PR #13785. |
|
🧹 Preview Environment Cleaned Up All resources for PR #13785 have been removed:
Cleanup completed successfully. |
4 participants
Why / What / How
The onboarding brain-dump step needs a clearer, more responsive recording experience so users understand when recording is active and can confidently cancel, retry, or submit a take.
This PR refreshes the audio orb experience with selectable glass, wavy WebGL, and Orb UI visualizations; audio-reactive animation; focused recording controls and feedback; and updated encouragement timing.
The implementation keeps the existing recording and recovery flow, adds a shared audio-level motion value for visual reactivity, renders a full-screen recording state, and explicitly discards canceled takes both locally and on the backend.
Changes 🏗️
Checklist 📋
For code changes:
pnpm format,pnpm lint, andpnpm typesExample test plan
For configuration changes:
.env.defaultis updated or already compatible with my changesdocker-compose.ymlis updated or already compatible with my changesExamples of configuration changes