🤖 feat: add file browser panel to right sidebar #1493
Conversation
Add a new Files tab to the right sidebar that allows users to browse workspace files in a tree view and view file content with syntax highlighting. Features: - New FILE_PANEL experiment flag (opt-in via Settings) - File tree using git ls-files (works across all runtime types) - Syntax highlighting via Shiki for 30+ languages - Split view: content viewer on left, tree on right (IDE-style) - Persisted expand/collapse state and selected file per workspace - 1MB file size limit with truncation warning - Proper workspace lifecycle (storage keys cleaned on delete/fork) Backend: - workspace.listFiles: Returns hierarchical file tree - workspace.readFile: Returns content with language detection Frontend: - FilePanel component with TreeNode and FileContentViewer - Integration with RightSidebar tabs - Storybook stories for visual testing
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ad8404998e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Fix path traversal check to allow valid filenames containing '..' (e.g., foo..bar.ts) by checking for '..' path segments instead of substring matching - Add keyboard shortcut Ctrl+4/Cmd+4 for Files tab - Add tooltip with keybind hint to Files tab button - Add FILES_TAB to KeybindsSection for settings display
|
@codex review Addressed your comments:
|
There was a problem hiding this comment.
💡 Codex Review
mux/src/browser/stories/App.rightSidebar.stories.tsx
Lines 80 to 83 in f4c7459
Avoid direct localStorage calls per AGENTS.md
Repo root AGENTS.md says “Never call localStorage directly — always use usePersistedState/readPersistedState/updatePersistedState helpers.” This story setup writes directly to localStorage, which bypasses the shared parsing/error-handling behavior. Please use the persisted-state helpers even in story setup to comply with the guideline.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const result = await execBuffered(runtime, gitCommand, { | ||
| cwd: workspacePath, | ||
| timeout: 30000, |
There was a problem hiding this comment.
ExecOptions’ timeout is in seconds (see Runtime.ts), so 30000 here means ~8.3 hours. If git ls-files stalls (large repo, SSH hiccup, hung git), the Files panel request can hang for hours instead of failing quickly, which is a user-visible responsiveness issue. Consider using a seconds value (e.g., timeout: 30) consistent with other runtime calls.
Useful? React with 👍 / 👎.
| setExpandStateMap: ( | ||
| value: Record<string, boolean> | ((prev: Record<string, boolean>) => Record<string, boolean>) | ||
| ) => void; | ||
| }> = ({ node, depth, selectedPath, onSelectFile, expandStateMap, setExpandStateMap }) => { |
There was a problem hiding this comment.
Repo root AGENTS.md says “Avoid destructuring props in function signatures; access via props.field.” This component signature (and others in this file) destructure props, which violates the repo’s maintainability rule. Please switch to a props parameter and access fields via props.* to match the guideline.
Useful? React with 👍 / 👎.
1 participant
Summary
Add a new Files tab to the right sidebar that allows users to browse workspace files in a tree view and view file content with syntax highlighting.
Features
git ls-filesto list tracked files (works across worktree, local, and SSH runtimes)Implementation
Backend
workspace.listFiles: Returns hierarchical file tree structureworkspace.readFile: Returns content with auto-detected languageFrontend
FilePanelcomponent withTreeNodeandFileContentViewerRightSidebartabs infrastructureScreenshots
The panel appears as a new "Files" tab in the right sidebar when the experiment is enabled.
Generated with
mux• Model:anthropic:claude-opus-4-5• Thinking:high