feat(frontend): Humanize the Build tool log and dock Files as a pane - #5946
Conversation
dosubot
Bot
added
the
size:XL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (1)
Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR replaces the session files drawer with a docked, resizable Files pane. It updates drive navigation, chat integration, tool and approval rendering, download controls, and Playground mode-switch visibility. ChangesDocked session Files pane
Chat activity presentation
Playground mode switch
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant AgentChatPanel
participant SessionFilesPane
participant DriveExplorer
participant StorageSection
User->>AgentChatPanel: toggle Files pane
AgentChatPanel->>SessionFilesPane: open or close active session
SessionFilesPane->>DriveExplorer: render session drive
User->>StorageSection: select or drop file
StorageSection->>SessionFilesPane: set quick look or staged file
SessionFilesPane->>DriveExplorer: update selected file state
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 2📝 Generate docstrings 💡
🛠️ Fix failing CI checks 💡
🧪 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 review |
✅ Action performedReview finished.
|
Railway Preview Environment
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
web/oss/src/components/Drives/StorageFilesHeader.tsx (1)
40-46: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winExpose the toggle state to assistive technology.
Both buttons now toggle the docked Files pane instead of opening a drawer. Neither button reports its state.
OpenFilesPaneButtonsetsaria-pressedfor the same pane. Readopenfrom the hook and setaria-expandedon both buttons so screen-reader users learn whether the pane is currently shown.♿ Proposed fix
- const {toggle: togglePane} = useSessionFilesPane(sessionId) + const {open: paneOpen, toggle: togglePane} = useSessionFilesPane(sessionId)Then add the attribute to each button:
<button type="button" + aria-expanded={paneOpen} onClick={(e) => { e.currentTarget.blur() togglePane() }}Also applies to: 59-66
🧹 Nitpick comments (2)
web/oss/src/components/AgentChatSlice/components/ApprovalDock.tsx (1)
334-336: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winKeep explanatory comments to one short line.
Replace or remove these multi-line comments. The code already expresses the normal UI behavior.
web/oss/src/components/AgentChatSlice/components/ApprovalDock.tsx#L334-L336: use one short comment for the humanized prompt condition.web/oss/src/components/AgentChatSlice/components/ApprovalDock.test.tsx#L231-L232: remove the redundant test comment or reduce it to one short line.web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx#L148-L150: reduce theToolRowdocumentation comment.web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx#L161-L174: reduce the label and summary behavior comments.web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx#L283-L293: reduce theToolActivityPropsand rendering-mode documentation.web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx#L303-L306: reduce the file-card behavior comment.web/oss/src/components/AgentChatSlice/components/ToolActivity.tsx#L322-L323: reduce the live-timeline comment.As per coding guidelines, “Keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements.”
Source: Coding guidelines
web/oss/src/components/AgentChatSlice/AgentChatPanel.tsx (1)
314-331: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winMemoize the
itemsarray passed toTabs.
itemsis an inline array of objects that contain JSX.AgentChatPanelnow re-renders whenever the files pane opens, closes, or resizes, so this array and every conversation element are rebuilt on each of those renders. Wrap it inuseMemo. The dependencies aresessions,entityId, and the stablecomposerRevealPlayedRef.The coding guidelines state: "Memoize inline arrays containing objects or JSX when passing them as props to avoid unnecessary rerenders."
♻️ Proposed refactor
Add the memo near the other derived values:
const tabItems = useMemo( () => sessions.map((session) => ({ key: session.id, // Bar is rendered by `renderTabBar` (SessionTagBar); the per-item label is unused. label: null, children: ( <Suspense fallback={<ConversationSkeleton />}> <MountFade className="h-full min-h-0 w-full"> <AgentConversation entityId={entityId} sessionId={session.id} revealPlayedRef={composerRevealPlayedRef} /> </MountFade> </Suspense> ), })), [sessions, entityId], )Then pass it through:
- items={sessions.map((session) => ({ - key: session.id, - // Bar is rendered by `renderTabBar` (SessionTagBar); the per-item label is unused. - label: null, - children: ( - // The heavy conversation body hydrates behind its own transcript/composer - // skeleton (same shape the frame reserves) and eases in over it. - <Suspense fallback={<ConversationSkeleton />}> - <MountFade className="h-full min-h-0 w-full"> - <AgentConversation - entityId={entityId} - sessionId={session.id} - revealPlayedRef={composerRevealPlayedRef} - /> - </MountFade> - </Suspense> - ), - }))} + items={tabItems}Source: Coding guidelines
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: a154961f-5233-4e31-9bd6-565a63ff1211
📒 Files selected for processing (23)
web/oss/src/components/AgentChatSlice/AgentChatPanel.tsxweb/oss/src/components/AgentChatSlice/AgentConversation.tsxweb/oss/src/components/AgentChatSlice/components/ApprovalDock.test.tsxweb/oss/src/components/AgentChatSlice/components/ApprovalDock.tsxweb/oss/src/components/AgentChatSlice/components/Inspector/lenses/RuntimeLens.tsxweb/oss/src/components/AgentChatSlice/components/OpenFilesPaneButton.tsxweb/oss/src/components/AgentChatSlice/components/RightPanel/RightPanelSplit.tsxweb/oss/src/components/AgentChatSlice/components/ToolActivity.tsxweb/oss/src/components/AgentChatSlice/state/rightPanel.tsweb/oss/src/components/Drives/DriveExplorer.tsxweb/oss/src/components/Drives/DriveFileContentViewer.tsxweb/oss/src/components/Drives/DriveHeader.tsxweb/oss/src/components/Drives/DriveToolbar.tsxweb/oss/src/components/Drives/DriveTreePane.tsxweb/oss/src/components/Drives/FilesDrawer.tsxweb/oss/src/components/Drives/SessionFilesDrawer.tsxweb/oss/src/components/Drives/SessionFilesPane.tsxweb/oss/src/components/Drives/StorageFilesHeader.tsxweb/oss/src/components/Drives/StorageSection.tsxweb/oss/src/components/Drives/configDrive.tsweb/oss/src/components/Drives/driveTreeView.tsweb/oss/src/components/Drives/useDriveTreePane.tsweb/oss/src/components/Playground/Components/PlaygroundHeader/index.tsx
194a28d to
a530da5
Compare
01bfe99 to
c7b36a7
Compare
|
Addressed the review in c7b36a7: the config quick-look guard (Major) is fixed, both config Files toggles now set aria-expanded, and the flagged comments are trimmed to the one-line rule. The nested-minimums note is answered inline (narrow viewports are already below the playground's usable minimum). @coderabbitai review |
|
✅ Action performedReview finished.
|
523886e to
22a4a5e
Compare
c7b36a7 to
ae52f4d
Compare
88a13ef to
d43972c
Compare
… as a pane Build mode now reads like Chat without losing debugging power: humanized tool names with the raw wire name in tooltips, the collapsed 'Used N tools' summary with per-row payload expanders, in-thread file cards, and the humanized approval sentence. The Build/Chat switch is parked behind a flag (Chat code stays). The Files drawer becomes a full-height resizable pane docked right of the chat column (tree right, content left), driven by one panel-scoped open flag so session switches keep it open; the config panel's Files section and all chat openers land in the same pane.
… trim comments CodeRabbit round 1: clicking a config Files row before any session ran wrote the quick-look into an orphaned atom bucket and nothing opened — now it opens the pane at the root instead. The config Files toggles announce aria-expanded, and flagged comments shrink to the one-line rule.
…l, seam polish Config pane and Files pane are now mutually exclusive (opening one collapses the other). The config Files header opens the overlay browse drawer again, while a file row opens the docked pane on just that file (tree collapsed). The session bar chevron hides while the pane is open (the pane header owns the collapse), the pane divider adopts the playground hairline+grip so all seams match, the agent generation section stops reserving a scrollbar gutter (the dead strip right of the chat), and the two right-edge tooltips render leftward so they cannot flash a horizontal scrollbar.
Config pane and Files pane are exclusive only when the window cannot fit both fairly: below sidebar(255) + config(440) + transcript floor(460) + files min(420) + seams = 1600px, opening one collapses the other and shrinking across the threshold with both open keeps Files (the surface the user opened deliberately) and tucks the config away. At or above it both stay open. Window width on purpose — the threshold assumes the nav sidebar at its default width.
d43972c to
3916fda
Compare
The config panel's overlay scrollbar hugged the panel edge at z-20 — inside the splitter dragger's 6px hit strip and above its z-5 — so grabbing the resize grip grabbed a vertical scrollbar instead. Inset the track past the dragger so the two never overlap.
3682c35 to
9a450fb
Compare
… on wide screens min was 20% of the splitter while max stayed a fixed 440px, so any window wider than ~2200px computed min > max: the panel mounted at the percentage min (700px+ on 4K), the first drag snapped it to 440, and the divider was then pinned. Both bounds are pixels now (340 to 640) so the default 440 sits inside a real drag range on every screen.
1 participant
Context
The agent playground kept two rendering registers. Build mode showed raw wire tool names, a permanently expanded step log, and approval cards headed by the raw tool name, while the humanized rendering existed only in Chat mode. Files lived in an overlay drawer that covered the conversation instead of sitting beside it.
Changes
Build mode now uses Chat's humanized register without losing debugging power, and the Files drawer becomes a docked pane.
Transcript. Tool rows show the humanized label and source in both modes; the raw wire name moved to the tooltip. Settled turns collapse to the "Used N tools" summary in Build too. Expanding it shows the rows, and in Build each row still expands to its full input/output/error blocks, so no payload is out of reach. File cards (one per file the turn wrote) now render in Build as well.
Before (Build): an always-visible gutter list of rows like
mcp__agenta-tools__commit_revision.After (Build):
Used 3 toolswhen settled; expanded rows readCommit revision, and a click opens the payload.Approvals. The raw-name header row is gone. Build shows the same sentence Chat had ("The agent wants to use X from Y before it can keep going") and keeps its extras: the compact body and the View trace link. One test pinned the old raw-name contract and was updated.
Files pane. The session Files drawer is now a full-height resizable pane docked right of the whole chat column (session bar included), 420 to 1600 px wide. Inside it the layout is mirrored: file tree on the right, content on the left, toolbar reversed to match, and its header is pinned to the session bar's 48 px so the border reads as one line. A
«button in the session bar opens it and flips to»; the pane header's»collapses it. The open flag is panel-scoped, so adding or switching sessions no longer closes the pane; the previewed file stays per session. Every opener converges on the pane: in-thread file cards, chat file links, the context rail, the inspector's runtime lens, and the config panel's Files section (whose "N files" header now toggles it). The overlay drawer remains only for the agent overview host.Mode switch. The Build/Chat segmented control is parked behind
SHOW_MODE_SWITCH = falsein the playground header. All Chat-mode code stays for its return.Tests
vitestsuites for AgentChatSlice and Drives pass (34 files, 362 tests), including the updated ApprovalDock contract tests.tsc --noEmitclean; changed files linted and formatted.What to QA
«in the session bar. The Files pane opens with the tree on the right; the button now shows». Add a session with+: the pane stays open.