[chore] Split DriveExplorer into hooks and views - #5570
Conversation
DriveExplorer.tsx: 2587 -> 409 lines, across 26 flat siblings (the Drives
folder has no subdirectories; new modules join it as siblings).
views DriveBreadcrumb, DriveTreeRow, DriveFileContentViewer,
DriveFilePreview, FolderTile, FolderView, DriveHeader,
DriveTreeList, DriveTreePane, DriveToolbar, DriveExplorerStates,
DrivePendingTiles
hooks useDriveFilters, useDriveSelection, useDriveTreeData,
useDriveTreePane, useTreeGroupScroll, useDriveTreeViewport,
useDriveTreeReveal, useDriveTreeKeyboard, useDriveDownloadAll,
useDriveUploads
helpers driveTypes, driveTreeView, useDelayedTrue; motion tokens append
to the existing driveMotion.ts
Refs stay inside their owning hook: the scroll element never leaves
useDriveTreeViewport (group scroll attaches via attachTreeWheel) and the
group maps never leave useTreeGroupScroll (rows read scrollXFor(parent)).
Split against current content so the upload/staging feature survives.
useDriveUploads is called ABOVE the tree so its uploadFiles feed
buildDriveTree — that is what makes an in-flight upload render as a real
row under its destination folder rather than a pinned list — and
pendingUploadByPath then decorates the resulting rows. retry/dismiss are
exposed as named accessors rather than leaking the upload object.
currentFolder and commitStaged stay in the root: they read the selection,
which derives from the tree, which consumes useDriveUploads — moving them
into the hook would be circular. Verified line-by-line against the upstream
diff.
dosubot
Bot
added
the
size:XXL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dosubot
Bot
added
frontend
refactor
📝 WalkthroughSummary by CodeRabbit
WalkthroughDriveExplorer is refactored into a composition root. New hooks and components provide filtering, selection, tree navigation, uploads, downloads, folder views, file previews, and terminal states. ChangesDrive explorer modularization
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant DriveExplorer
participant useDriveTreeData
participant useDriveUploads
participant DriveTreePane
participant DriveTreeList
participant FolderView
DriveExplorer->>useDriveTreeData: derive filtered flatRows
DriveExplorer->>useDriveUploads: provide upload state and handlers
DriveExplorer->>DriveTreePane: render tree and content panes
DriveTreePane->>DriveTreeList: pass virtualized rows and drop props
DriveTreeList->>DriveExplorer: emit selection and expansion changes
DriveExplorer->>FolderView: render selected folder entries
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 |
Railway Preview Environment
Updated at 2026-07-31T19:19:30.850Z |
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (7)
web/oss/src/components/Drives/useDriveSelection.ts (1)
51-53: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an explicit
eslint-disable-next-line react-hooks/exhaustive-deps.
selectis intentionally omitted so the effect only reacts to prop changes; without the disable commentpnpm lint-fixwill either flag it or "fix" it by addingselect, silently changing behavior.♻️ Suggested change
useEffect(() => { if (initialPath != null) select(initialPath) + // eslint-disable-next-line react-hooks/exhaustive-deps -- prop-change only, must not refire on select identity }, [initialPath])web/oss/src/components/Drives/useDriveUploads.ts (1)
50-56: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAvoid the
as unknown as MountFiledouble cast.This silently accepts any future required field on
MountFile. Build the object typed (or widen the tree-build input toPick<MountFile, "path" | "size">) so the compiler keeps verifying the synthetic nodes.web/oss/src/components/Drives/DrivePendingTiles.tsx (1)
56-86: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrefer theme tokens over hard-coded
rgba(0,0,0,…)overlays.The retry pill, progress track, and remove button use raw color literals. Swapping to antd semantic token variables (e.g.
var(--ant-color-bg-mask)) keeps light/dark consistent with the rest of the drive UI.As per coding guidelines, "Consume theme colors through Ant Design semantic tokens, Tailwind color utilities, or supported
var(--ag-color*)variables; do not use raw hex colors or--ag-c-*literals."Source: Coding guidelines
web/oss/src/components/Drives/FolderView.tsx (1)
254-300: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winDeduplicate the staged/upload tile wrapper and stabilize
renderTile.The two
motion.divwrappers (Lines 260-274 and 281-299) are identical except for the child; extract one<PendingTileMotion>wrapper. Also,renderTileis a fresh closure on every render, soVirtualTileGridre-renders every cell on any parent state change (e.g.repoExpanded) — wrap it inuseCallbackor lift the tile into a memoized component.As per coding guidelines, "Minimize React re-renders with
useMemo,useCallback, andReact.memowhere appropriate; avoid unstable inline functions and objects, especially in lists."Source: Coding guidelines
web/oss/src/components/Drives/DriveTreeRow.tsx (1)
73-81: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRaw Ant Design CSS variable used for the primary-bg tint in two places. Both sites hardcode
bg-[var(--ant-color-primary-bg)]instead of a sanctioned theme channel (Ant Design semantic token, Tailwind color utility, orvar(--ag-color*)), so the tint bypasses the project's token pipeline and its light/dark verification.
web/oss/src/components/Drives/DriveTreeRow.tsx#L73-L81: replace the pending-upload tint with the semantic Tailwind utility (e.g.bg-colorPrimaryBg).web/oss/src/components/Drives/DriveTreeList.tsx#L100-L108: replace the drop-hover tint with the same utility so both row states stay in sync.As per coding guidelines: "Consume theme colors through Ant Design semantic tokens, Tailwind color utilities, or supported
var(--ag-color*)variables; do not use raw hex colors or--ag-c-*literals."Source: Coding guidelines
web/oss/src/components/Drives/DriveTreeList.tsx (1)
148-155: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueHoist the toggle closure out of the row map.
A fresh
onToggle(and thesetExpandedupdater) is allocated per visible row on every render, defeating any futureReact.memoonTreeRow. A singleuseCallback((path: string) => setExpanded(...))above the return would be reused by all rows.As per coding guidelines: "Minimize React re-renders with
useMemo,useCallback, andReact.memowhere appropriate; avoid unstable inline functions and objects, especially in lists."Source: Coding guidelines
web/oss/src/components/Drives/DriveTreePane.tsx (1)
77-91: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueSeparator is mouse-only.
role="separator"with pointer handlers but notabIndex={0}, arrow-key handling, oraria-valuenow/aria-valuemin/aria-valuemaxmakes the resize unreachable by keyboard and unannounced. The toolbar toggle keeps the pane usable, so this is an enhancement rather than a blocker.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4e680dee-ce45-4f37-ac4b-a92f69f7a51e
📒 Files selected for processing (27)
web/oss/src/components/Drives/DriveBreadcrumb.tsxweb/oss/src/components/Drives/DriveExplorer.tsxweb/oss/src/components/Drives/DriveExplorerStates.tsxweb/oss/src/components/Drives/DriveFileContentViewer.tsxweb/oss/src/components/Drives/DriveFilePreview.tsxweb/oss/src/components/Drives/DriveHeader.tsxweb/oss/src/components/Drives/DrivePendingTiles.tsxweb/oss/src/components/Drives/DriveToolbar.tsxweb/oss/src/components/Drives/DriveTreeList.tsxweb/oss/src/components/Drives/DriveTreePane.tsxweb/oss/src/components/Drives/DriveTreeRow.tsxweb/oss/src/components/Drives/FolderTile.tsxweb/oss/src/components/Drives/FolderView.tsxweb/oss/src/components/Drives/driveMotion.tsweb/oss/src/components/Drives/driveTreeView.tsweb/oss/src/components/Drives/driveTypes.tsweb/oss/src/components/Drives/useDelayedTrue.tsweb/oss/src/components/Drives/useDriveDownloadAll.tsweb/oss/src/components/Drives/useDriveFilters.tsweb/oss/src/components/Drives/useDriveSelection.tsweb/oss/src/components/Drives/useDriveTreeData.tsweb/oss/src/components/Drives/useDriveTreeKeyboard.tsweb/oss/src/components/Drives/useDriveTreePane.tsweb/oss/src/components/Drives/useDriveTreeReveal.tsweb/oss/src/components/Drives/useDriveTreeViewport.tsweb/oss/src/components/Drives/useDriveUploads.tsweb/oss/src/components/Drives/useTreeGroupScroll.ts
| const handleDownloadAll = useCallback(async () => { | ||
| if (!archiveMounts.length || downloadingAll) return | ||
| setDownloadingAll(true) | ||
| const key = "drive-download-all" | ||
| message.open({type: "loading", key, content: "Preparing download…", duration: 0}) | ||
| const result = await downloadMountArchive({ | ||
| mounts: archiveMounts, | ||
| projectId, | ||
| filename: `${driveRootLabel(drive.mount)}-files.zip`, | ||
| }) | ||
| if (result.cancelled) message.destroy(key) | ||
| else if (result.ok) message.open({type: "success", key, content: "Download ready"}) | ||
| else message.open({type: "error", key, content: result.error ?? "Download failed"}) | ||
| setDownloadingAll(false) | ||
| }, [archiveMounts, drive.mount, projectId, downloadingAll, message]) |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Wrap the await in try/finally — a throw permanently wedges the button and leaves the toast up.
downloadMountArchive is not exception-free: in the streaming path await handle.createWritable() sits outside its inner try (web/oss/src/components/Drives/driveMedia.ts lines 225-308), so a rejection propagates here. downloadingAll then stays true forever (guard at Line 35 blocks all retries) and the duration: 0 loading toast never closes.
🛡️ Proposed fix
- const result = await downloadMountArchive({
- mounts: archiveMounts,
- projectId,
- filename: `${driveRootLabel(drive.mount)}-files.zip`,
- })
- if (result.cancelled) message.destroy(key)
- else if (result.ok) message.open({type: "success", key, content: "Download ready"})
- else message.open({type: "error", key, content: result.error ?? "Download failed"})
- setDownloadingAll(false)
+ try {
+ const result = await downloadMountArchive({
+ mounts: archiveMounts,
+ projectId,
+ filename: `${driveRootLabel(drive.mount)}-files.zip`,
+ })
+ if (result.cancelled) message.destroy(key)
+ else if (result.ok) message.open({type: "success", key, content: "Download ready"})
+ else message.open({type: "error", key, content: result.error ?? "Download failed"})
+ } catch {
+ message.open({type: "error", key, content: "Download failed"})
+ } finally {
+ setDownloadingAll(false)
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleDownloadAll = useCallback(async () => { | |
| if (!archiveMounts.length || downloadingAll) return | |
| setDownloadingAll(true) | |
| const key = "drive-download-all" | |
| message.open({type: "loading", key, content: "Preparing download…", duration: 0}) | |
| const result = await downloadMountArchive({ | |
| mounts: archiveMounts, | |
| projectId, | |
| filename: `${driveRootLabel(drive.mount)}-files.zip`, | |
| }) | |
| if (result.cancelled) message.destroy(key) | |
| else if (result.ok) message.open({type: "success", key, content: "Download ready"}) | |
| else message.open({type: "error", key, content: result.error ?? "Download failed"}) | |
| setDownloadingAll(false) | |
| }, [archiveMounts, drive.mount, projectId, downloadingAll, message]) | |
| const handleDownloadAll = useCallback(async () => { | |
| if (!archiveMounts.length || downloadingAll) return | |
| setDownloadingAll(true) | |
| const key = "drive-download-all" | |
| message.open({type: "loading", key, content: "Preparing download…", duration: 0}) | |
| try { | |
| const result = await downloadMountArchive({ | |
| mounts: archiveMounts, | |
| projectId, | |
| filename: `${driveRootLabel(drive.mount)}-files.zip`, | |
| }) | |
| if (result.cancelled) message.destroy(key) | |
| else if (result.ok) message.open({type: "success", key, content: "Download ready"}) | |
| else message.open({type: "error", key, content: result.error ?? "Download failed"}) | |
| } catch { | |
| message.open({type: "error", key, content: "Download failed"}) | |
| } finally { | |
| setDownloadingAll(false) | |
| } | |
| }, [archiveMounts, drive.mount, projectId, downloadingAll, message]) |
Report single-file download failures. Four call sites dropped downloadMountFile's `false`, so a failed click looked identical to a successful one. Lift the one correct implementation (the context menu's) into useDriveFileDownload, route every site through it, give the shared DriveFileDownloadButton a loading state, drop DriveHeader's duplicate button, and un-export downloadMountFile so the pattern can't return. Stop downloadMountArchive from throwing past its result contract: handle.createWritable() sat outside the try, so a refused write permission escaped every caller's result handling — stranding the download-all button (its in-flight flag gates retries) and the folder-zip toast. Also reset the flag in `finally`. Key drive selection persistence on a real mount id. drive.mount resolves async, so early renders keyed the selection atom on "" — a slot shared by every mountless drive — and the root-landing effect wrote to it. Read "" as empty, never write it, adopt the drive's persisted selection (or flush a pre-mount pick) once the id lands, and stop auto-landing on root from overwriting persistence. The local-file drive has no mount at all, so the gate is on persistence, not on selection. Derive the selection's folder-ness from the backend's is_folder instead of its name. The name guess made extensionless files (LICENSE, Dockerfile) issue a needless directory query; it now covers only the cold window before any level lands, corrected during render so a wrong guess never mounts a subscriber. The heuristic itself is one shared helper — DriveExplorer's skeleton held a second, divergent copy. Fix the inverted aria-pressed on the hidden-files toggle and align all three toolbar toggles on one convention: a static label naming the control, aria-pressed carrying the state, dynamic wording in the tooltip. Drop the overflow menu's leading divider when there are no drive ids.
|
@coderabbitai review |
✅ Action performedReview finished.
|
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 (3)
web/oss/src/components/Drives/DriveExplorer.tsx (3)
238-239: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winInclude local and in-flight content in the empty-state decision.
FolderViewreceivesexplicitFiles,stagedItems, and pending-upload data, but this branch returnsDriveEmptyStatesolely fromdrive.fileCount. An empty backend drive with staged or pending files therefore hides the grid and the upload controls. Base this branch on effective content, not only persisteddrive.fileCount.
334-335: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winExpose partial-error retry and staged-upload actions in embedded mode.
DriveExplorer.renderonly rendersFolderViewdirectly whenonCloseis absent, sodrive.partialErrored/retryand staged commit (onUploadStaged) stay hidden in headerless/embedded use. Keep retry/staged actions available in headerless mode, for example by rendering them inFolderView.
161-172: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winPass an explicit kind for unloaded Quick Look targets.
DriveExplorer.initialPathonly carries the target path;selectedIsFolderfalls back tofalseuntilnodeByPathloads it, so an unloaded folder selection entersDriveFilePreviewand staged uploads default to the parent folder. Store/provide the file/folder kind in the drawer state, or make Quick Look callers pass folder paths explicitly as browse targets.
🧹 Nitpick comments (1)
web/oss/src/components/Drives/DriveFileContentViewer.tsx (1)
56-57: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winShorten the exported component comment to one line.
This JSDoc describes normal behavior and spans two source lines. Keep it concise.
Proposed change
-/** Download button for one file — raw bytes, so every type round-trips (not just text). Shared by - * the drawer header and the file preview, so both report a failure the same way. */ +/** Downloads raw file bytes through the shared drive download hook. */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
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f1bd1e72-c039-4760-bb30-25f8e55f57af
📒 Files selected for processing (12)
web/oss/src/components/Drives/DriveExplorer.tsxweb/oss/src/components/Drives/DriveFileCard.tsxweb/oss/src/components/Drives/DriveFileContentViewer.tsxweb/oss/src/components/Drives/DriveHeader.tsxweb/oss/src/components/Drives/DriveItemContextMenu.tsxweb/oss/src/components/Drives/DriveToolbar.tsxweb/oss/src/components/Drives/driveFileSource.tsxweb/oss/src/components/Drives/driveMedia.tsweb/oss/src/components/Drives/driveTreeView.tsweb/oss/src/components/Drives/useDriveDownloadAll.tsweb/oss/src/components/Drives/useDriveSelection.tsweb/oss/src/components/Drives/useDriveTreeData.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- web/oss/src/components/Drives/DriveToolbar.tsx
- web/oss/src/components/Drives/useDriveDownloadAll.ts
- web/oss/src/components/Drives/DriveHeader.tsx
Include the mount id in the single-file download toast key. `path` here is mount-RELATIVE, so `agent-files/notes.md` and a cwd `notes.md` both arrive as "notes.md" and shared a message key — concurrent downloads replaced each other's loading and completion toasts. A regression from extracting useDriveFileDownload: the context menu previously keyed on the presented path, which is unique across mounts. Remount DriveExplorer when one real drive is replaced by a different one. useConfigDrive resolves its session from the active-session atoms rather than a prop, so closing the active tab swaps the mount under an open drawer. Selection, expanded set and pane state are mount-scoped, and so is useLazyDriveTree's accumulated per-directory file map — which is keyed by presented path and therefore collides across drives. Resetting that map in place is not an option (it empties `files`, flips rootLoading and flashes the drawer back to skeleton), so key the subtree instead and let every hook reset at once. The key ignores the other two transitions on purpose: null→drive is adopted in place by useDriveSelection (remounting there would wipe a search typed against the skeleton) and drive→null is a host tearing down on close.
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: e86ed59d-917d-4896-8e77-bd7e91ededf8
📒 Files selected for processing (3)
web/oss/src/components/Drives/FilesDrawer.tsxweb/oss/src/components/Drives/driveMedia.tsweb/oss/src/components/Drives/useDriveSelection.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- web/oss/src/components/Drives/useDriveSelection.ts
- web/oss/src/components/Drives/driveMedia.ts
| if (mountId && seen.current !== mountId) { | ||
| if (seen.current !== null) generation.current += 1 | ||
| seen.current = mountId |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
rg -n -C 6 'useDriveGeneration|driveGeneration' \
web/oss/src/components/Drives/FilesDrawer.tsx
rg -n -C 6 'startTransition|createRoot|act\(' \
web --glob '*.{test,spec}.{ts,tsx}'Repository: Agenta-AI/agenta
Length of output: 14787
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
# Inspect the hook and its only call site, plus related DriveExplorer component if available.
sed -n '1,150p' web/oss/src/components/Drives/FilesDrawer.tsx
echo '--- DriveExplorer candidates ---'
fd -a 'DriveExplorer\.(tsx|ts)$' . | sed "s#$(pwd)/##"
echo '--- DriveExplorer usage and related keys ---'
rg -n -C 3 'DriveExplorer|onDriveExplorer|DriveExplorerProps' web/oss/src web/**/*.tsx web/**/*.ts | head -n 200
echo '--- package/react versions ---'
if [ -f web/package.json ]; then
jq '.dependencies.react, .dependencies."`@types/react`", .devDependencies.react, .devDependencies."`@types/react`"' web/package.json 2>/dev/null || cat web/package.json
fiRepository: Agenta-AI/agenta
Length of output: 24559
🌐 Web query:
React render phase effects refs can be updated and not rolled back if render is interrupted documentation
💡 Result:
In React, the render phase must be pure and must not contain side effects [1][2][3]. Because the render phase can be interrupted, paused, or discarded by React's scheduler (particularly in Concurrent Mode), any code executing during rendering may run multiple times without successfully committing to the screen [1][4][3]. If you mutate a ref (e.g., ref.current = ...) during the render phase: 1. The mutation is not rolled back by React because refs are plain JavaScript objects outside of React's direct management [5][6]. Unlike component state, which React snapshots and manages according to the render lifecycle, refs are mutable containers that persist independently of renders [5][6]. 2. If the render is interrupted and later restarted, your previous mutation remains. This can lead to unpredictable application behavior, inconsistent state, or bugs, as the ref may hold a value from a discarded render attempt [6]. The official React documentation explicitly states: "Don't read or write ref.current during rendering" [5]. Side effects, including ref updates, should be performed in event handlers or during the commit phase via useEffect or useLayoutEffect, which are guaranteed to run only after the render is complete [1][7][8]. The only exception allowed is for initialization (e.g., if (!ref.current) ref.current = new Thing()), which is safe only because it is idempotent—it produces the same result regardless of how many times it is called [5][6].
Citations:
- 1: https://react.dev/reference/rules/components-and-hooks-must-be-pure
- 2: https://react.dev/learn/keeping-components-pure
- 3: https://dev.to/peter-present/react-rendering-pipeline-2gfj
- 4: https://gist.github.com/Luncher/6eae70b4bb2910e4bf93f9fdc7b7020e
- 5: https://react.dev/learn/referencing-values-with-refs
- 6: https://www.joseph0926.com/en/post/2026-03-01-why-shouldnt-you-read-useref-during-render
- 7: https://react.dev/learn/synchronizing-with-effects
- 8: https://github.com/samirarezai/React-Fiber-Reconciliation-Guide/blob/main/README.md
Keep generation bookkeeping out of render-phase ref mutations.
useDriveGeneration mutates seen.current and generation.current during the render phase. React can interrupt or discard a render, while leaving those ref mutations in place. A later render can then return a stale/new key and remount DriveExplorer without a committed drive replacement. Move this bookkeeping to committed state/effects or a non-mutating approach before using it as the DriveExplorer key.
|
Two notes from the release review pass for 0.106.2. Already fixed here, thanks. The Still open, and we are treating it as a QA target rather than a blocker. Fixing it properly means moving the bookkeeping into committed state or an effect, which is more than a patch release wants. So the plan is to QA it directly: open one drive, switch to another, confirm no state carries over. If it holds up we file a follow-up issue and ship. If it leaks we fix it before merge. |
3 participants
Context
DriveExplorer.tsxhad grown to 2587 lines holding 14 inline components plus the whole browsing body: the lazy tree pipeline, selection, search, the per-parent horizontal scroll groups, pane drag, keyboard navigation, the row virtualizer, and the upload staging flow.Changes
The presentational half moves to sibling modules, then the remaining body splits into hooks. The
Drives/folder is flat by convention, so everything joins it as siblings rather than introducing subdirectories.DriveExplorer.tsxis 409 lines.Shared refs stay inside the hook that owns them. The tree scroll element never leaves
useDriveTreeViewport(group scroll attaches throughattachTreeWheel(el)), and the group maps never leaveuseTreeGroupScroll(rows readscrollXFor(parent)).Ordering matters for uploads and is preserved.
useDriveUploadsis called above the tree so itsuploadFilesfeedbuildDriveTree. That is what makes an in-flight upload render as a real row under its destination folder instead of a separate pinned list.pendingUploadByPaththen decorates the resulting rows.currentFolderandcommitStagedstay in the root on purpose. They read the selection, which derives from the tree, which consumesuseDriveUploads. Moving them into the hook would be circular, and keeping them out preserved their dependency arrays exactly.Tests
pnpm --filter @agenta/oss exec tsc --noEmitpasses with zero errors, as do@agenta/entity-uiand@agenta/ee.pnpm lint-fixacross the repo makes no changes. Prettier clean.release/v0.106.1rather than rebased, because the upload and staging feature (512 added lines) landed inside the regions this refactor deletes. Verified line by line: every behavioural line survives, andNEXT_PUBLIC_AGENT_FILE_UPLOADSstill reaches the drop targets, the header upload button and the staged inbox.Not runtime verified. The gates above are static.
One follow-up left in place: the module doc still says "Phase 1 is read-only", which uploads made false. It was kept verbatim rather than silently edited in a structural refactor.
What to QA