Extract routing hook and feedback subcomponents from agents-view#686
Merged
Conversation
Split agents-view.tsx (904 → 774 lines) by extracting: - use-agents-view-routing.ts: route matching, feedback detail state derivation, route validation effects, and navigation callbacks - agents-view-feedback-detail.tsx: DesktopFeedbackDetail and MobileFeedbackDetail subcomponents replacing inline IIFEs Co-Authored-By: Claude Opus 4.6 <[email protected]>
Replace the leaked mutable ref with handleFeedbackTransitionEnd callback, keeping the stale-detail lifecycle fully encapsulated inside useAgentsViewRouting. Co-Authored-By: Claude Opus 4.6 <[email protected]>
9 tasks
selfcontained
added a commit
that referenced
this pull request
Jun 26, 2026
* Add GitHub Primer syntax highlighting to Changes tab diff viewer - Map Refractor/Prism token classes to exact GitHub Dark and Light colors - Fix horizontal scroll losing diff line backgrounds (table-layout: auto) - Update gutter line numbers to use foreground color on add/delete lines - Add file tree collapse toggle with show/hide buttons - Add data-theme-mode attribute for simplified light/dark CSS targeting - Set data-theme-mode in pre-paint script to prevent FOUC - Fix sticky show-file-tree button overlapping file headers - Increase touch target size on file tree toggle buttons - Update design lab with real sample diff from PR #686 Co-Authored-By: Claude Opus 4.6 <[email protected]> * Move show-file-tree button to non-scrolling toolbar strip Render the "Show file tree" button in a fixed toolbar above the scrollable diff area instead of inside it, so it remains visible when the user scrolls through long diffs. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Show full diff by default, don't hide whitespace changes Remove hardcoded ignoreWhitespace: true from the diff route handlers. The Changes tab now shows all changes including whitespace-only edits, so users can trust it as a complete audit surface. The ignoreWhitespace capability remains in agent-diff.ts for a future user-controlled toggle. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Restore ignoreWhitespace: true for Changes tab diffs User wants whitespace changes hidden by default in the diff viewer. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
use-agents-view-routing.tshook fromagents-view.tsx— encapsulates route matching, feedback detail state derivation, route validation effects, and navigation callbacks (closeFeedbackDetail, openFeedbackDetail, navigateFeedbackItem, onTabChange)agents-view-feedback-detail.tsxwithDesktopFeedbackDetailandMobileFeedbackDetailsubcomponents, replacing inline IIFEs that handled review summary vs feedback item renderingagents-view.tsxreduced from 904 → 774 lines (-130 lines, -14%)New file structure
What's next
Top backlog items for future runs:
create-agent-dialog.tsx(761 lines) — extract form sections and validation hookfeedback-panel.tsx(660 lines) — extract feedback item renderersmedia-sidebar.tsx(632 lines) — extract media item renderers and pin displayTest plan
pnpm run finalize:web— type check + production build passespnpm run test:e2e— 126/127 passed; 1 pre-existing flake (terminal-drag-drop unrelated to this change)🤖 Generated with Claude Code