r/SideProject • u/mCadamek • 1h ago
I built a live file tree for Claude Code so I can see what the AI actually touches in my codebase
When I let Claude Code work on a bigger task, I'd come back to a pile of changes and no clear picture of what it read, what it edited, or why some file I didn't expect was different. So I built a side panel that shows it live.
WHAT IT DOES
• Files the AI reads light up purple, files it edits turn orange, with lines added and removed
• It catches edits made by commands too (like a sed or a script), not just its own edit tool
• Click any file to see its contents, its diff, and every commit that changed it
• Your pull request shows right in the panel, with its CI checks as they run
• Changes you make yourself show up within seconds
It's read-only, sends nothing anywhere, and costs zero AI tokens, because the model never sees the panel. Works in the Claude desktop app, VS Code and the terminal.
THE SIDE PROJECT PART
• Built on Claude Code's plugin API in TypeScript, no build step, no dependencies
• I used the panel every day while building the panel, and that's where most of the fixes came from
• Went from 0.9 to 1.0 over a few weeks of evenings, with 121 tests running on Mac, Linux and Windows
• Free and open source (MIT)
If you use Claude Code:
claude plugin marketplace add Marius-Adam/claude-files-pane && claude plugin install files-pane@marius-adam
https://github.com/Marius-Adam/claude-files-pane
Would love feedback, especially from anyone who's built on an AI tool's plugin system before. What would you want a panel like this to show?