Skip to content

feat(web): add file explorer with tree view, editor, and chat integration#2

Open
leciric-stf wants to merge 13 commits into
mainfrom
feat/file-tree
Open

feat(web): add file explorer with tree view, editor, and chat integration#2
leciric-stf wants to merge 13 commits into
mainfrom
feat/file-tree

Conversation

@leciric-stf
Copy link
Copy Markdown
Collaborator

Summary

  • Add a file explorer panel as a new tab alongside the existing diff panel, with URL-driven state (?panel=files|diff) replacing the old ?diff=1 parameter
  • Implement WorkspaceFileExplorer server service with filesystem CRUD (read, list, rename, delete, create directory) and git status --porcelain integration, exposed via WebSocket RPC
  • Build FileTree component with lazy expand-on-demand directory loading, git status badges (modified/added/untracked), inline search filter, and right-click context menu for rename/delete/new file/new folder
  • Integrate CodeMirror 6 editor with multi-tab support, language detection by extension, read-only viewing, breadcrumb navigation, and keyboard shortcut (Mod+E) to toggle the panel
  • Extend the mention system to support @file:L<start>-L<end> line-range references and wire "Mention in Chat" actions from the file explorer context menu into the composer
  • Add working tree diff support in the checkpointing layer (diffCheckpointToWorkTree) to show uncommitted changes relative to the latest checkpoint
  • Extract RightPanel + RightPanelTabBar from the existing DiffPanelInlineSidebar, unifying the diff and file explorer into a single tabbed container with preserved state across tab switches

Testing

  • Verify file tree loads and expands directories on click, showing correct folder/file icons and sorted entries (directories first)
  • Verify git status badges appear on modified/added/untracked files in the tree
  • Verify clicking a file opens it in the CodeMirror editor with correct syntax highlighting
  • Verify multi-tab behavior: opening multiple files creates tabs, clicking tabs switches content, close button removes tabs
  • Verify context menu actions: rename, delete, new file, and new folder operate correctly and refresh the tree
  • Verify "Mention in Chat" from context menu inserts @file or @file:L1-L10 reference into the composer
  • Verify Mod+E toggles the file explorer panel and Mod+D still toggles the diff panel
  • Verify URL updates correctly between ?panel=files and ?panel=diff when switching tabs
  • Verify the search/filter input in the file tree filters visible nodes
  • Verify panelRouteSearch.test.ts, composer-editor-mentions.test.ts, WorkspacePaths.test.ts, and filesystem.test.ts pass
  • Not run: end-to-end browser testing of the full panel interaction flow

Implement server-side file explorer operations (readFile, listDirectory,
rename, delete, createDirectory, gitFileStatus) as an Effect service
following existing WorkspaceFileSystem patterns. Wire all six new RPC
handlers in ws.ts and compose the layer in server.ts.
- Wire files panel as toggleable right panel (Mod+E) with header button
- Add getWorkingTreeDiff to checkpoint system for uncommitted edits
- Fix WorkspacePaths to resolve "." as valid workspace root
- Polish editor: word wrap toggle, middle-click tab close, scroll-into-view
- Replace resizable-panels with CSS layout, add error/retry state to tree
- Memoize FileTreeNode, restyle borders and backgrounds
@luisflorido-stf
Copy link
Copy Markdown
Collaborator

image

- Delete .superpowers/brainstorm session files (HTML mockup, server state)
- Delete docs/superpowers/plans/2026-04-23-file-explorer.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants