[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
refactoring
📝 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
|
|
@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
| /** `download(mount, path)` for ONE drive file, reporting the outcome through the themed toast | ||
| * (App.useApp, so it renders correctly in dark mode). THE way to trigger a single-file download: | ||
| * {@link downloadMountFile} resolves `false` on failure, so a bare fire-and-forget call left a failed | ||
| * click looking exactly like a successful one. Stable — safe to pass down to list items. */ | ||
| export function useDriveFileDownload(): (mount: Mount | null, path: string) => Promise<boolean> { | ||
| const {message} = App.useApp() | ||
| const projectId = useAtomValue(projectIdAtom) | ||
| return useCallback( | ||
| async (mount: Mount | null, path: string) => { | ||
| const key = `drive-download:${path}` | ||
| message.open({type: "loading", key, content: "Downloading…", duration: 0}) | ||
| const ok = await downloadMountFile({mount, path, projectId}) | ||
| message.open( | ||
| ok | ||
| ? {type: "success", key, content: "Downloaded"} | ||
| : {type: "error", key, content: "Download failed"}, | ||
| ) | ||
| return ok | ||
| }, | ||
| [message, projectId], | ||
| ) | ||
| } | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Include the mount identity in the notification key.
The key uses only path, but the callback also accepts mount. The cwd mount and the agent-files mount can contain the same relative path. Concurrent downloads can then replace each other’s loading and completion messages. Include mount?.id in the key.
Proposed fix
- const key = `drive-download:${path}`
+ const key = `drive-download:${mount?.id ?? "none"}:${path}`📝 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.
| /** `download(mount, path)` for ONE drive file, reporting the outcome through the themed toast | |
| * (App.useApp, so it renders correctly in dark mode). THE way to trigger a single-file download: | |
| * {@link downloadMountFile} resolves `false` on failure, so a bare fire-and-forget call left a failed | |
| * click looking exactly like a successful one. Stable — safe to pass down to list items. */ | |
| export function useDriveFileDownload(): (mount: Mount | null, path: string) => Promise<boolean> { | |
| const {message} = App.useApp() | |
| const projectId = useAtomValue(projectIdAtom) | |
| return useCallback( | |
| async (mount: Mount | null, path: string) => { | |
| const key = `drive-download:${path}` | |
| message.open({type: "loading", key, content: "Downloading…", duration: 0}) | |
| const ok = await downloadMountFile({mount, path, projectId}) | |
| message.open( | |
| ok | |
| ? {type: "success", key, content: "Downloaded"} | |
| : {type: "error", key, content: "Download failed"}, | |
| ) | |
| return ok | |
| }, | |
| [message, projectId], | |
| ) | |
| } | |
| /** `download(mount, path)` for ONE drive file, reporting the outcome through the themed toast | |
| * (App.useApp, so it renders correctly in dark mode). THE way to trigger a single-file download: | |
| * {`@link` downloadMountFile} resolves `false` on failure, so a bare fire-and-forget call left a failed | |
| * click looking exactly like a successful one. Stable — safe to pass down to list items. */ | |
| export function useDriveFileDownload(): (mount: Mount | null, path: string) => Promise<boolean> { | |
| const {message} = App.useApp() | |
| const projectId = useAtomValue(projectIdAtom) | |
| return useCallback( | |
| async (mount: Mount | null, path: string) => { | |
| const key = `drive-download:${mount?.id ?? "none"}:${path}` | |
| message.open({type: "loading", key, content: "Downloading…", duration: 0}) | |
| const ok = await downloadMountFile({mount, path, projectId}) | |
| message.open( | |
| ok | |
| ? {type: "success", key, content: "Downloaded"} | |
| : {type: "error", key, content: "Download failed"}, | |
| ) | |
| return ok | |
| }, | |
| [message, projectId], | |
| ) | |
| } |
| // Once the drive's id resolves: adopt its persisted selection (the lazy initializers above ran | ||
| // before mount discovery finished, so they couldn't see it) — or, if a pick was already made | ||
| // against no mount, flush that pick into the now-real slot. Runs once. | ||
| const adoptedRef = useRef(hasMount) | ||
| useEffect(() => { | ||
| if (!hasMount || adoptedRef.current) return | ||
| adoptedRef.current = true | ||
| if (chosenRef.current) { | ||
| setPersistedSelection(selectedPath) | ||
| return | ||
| } | ||
| if (!persistedSelection) return | ||
| setSelectedPath(persistedSelection) | ||
| expand(persistedSelection) | ||
| }, [hasMount, selectedPath, persistedSelection, setPersistedSelection, expand]) |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
ast-grep outline web/oss/src/components/Drives/DriveExplorer.tsx --view expanded
rg -n -C 5 --glob '*.ts' --glob '*.tsx' '<DriveExplorer|DriveExplorer\(' webRepository: Agenta-AI/agenta
Length of output: 4125
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== FilesDrawer relevant section =="
sed -n '60,110p' web/oss/src/components/Drives/FilesDrawer.tsx
echo
echo "== DriveExplorer mount/key/projection around DriveExplorer and usesDriveSelection call =="
sed -n '220,330p' web/oss/src/components/Drives/DriveExplorer.tsx
echo
echo "== useDriveSelection source =="
sed -n '1,130p' web/oss/src/components/Drives/useDriveSelection.tsRepository: Agenta-AI/agenta
Length of output: 12221
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== DriveExplorer hook call site and props =="
rg -n -C 8 --glob '*.tsx' --glob '*.ts' 'useDriveSelection\(|Key=|key=|mountId|drive=' web/oss/src/components/Drives/DriveExplorer.tsx web/oss/src/components/Drives/FilesDrawer.tsx
echo
echo "== DriveExplorer full outlines around useState/useDriveSelection/dynamic mount key =="
ast-grep outline web/oss/src/components/Drives/DriveExplorer.tsx --view expandedRepository: Agenta-AI/agenta
Length of output: 7167
Reset mount-scoped state when mountId changes.
After one discovery completes, adoptedRef.current stays true, so a later render with a different non-empty mount reuses the previous mount’s persisted selection and expanded folders with the new mount’s tree. Reset or remount selectedPath, expanded, the Jotai selection state, and persist any former pick into the old mount slot before adopting the new mount.
2 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