What problem does it solve? Adding a new panel to a VSCode-class web IDE shell requires touching many disconnected pieces — type unions, React components, authenticated API routes, a panel registry, state hooks, and security checks — and missing any one of them breaks the shell or leaks workspace files. ## Core Features & Use Cases - End-to-end panel scaffolding workflow: Guides adding the panel id to IdePanelId, creating the component in web/src/components/ide/, registering it in panel-registry.ts, and extending useIde() state. - Secure server API route pattern: Enforces getSession auth, workspace path confinement, and secret-file filtering (.env*, *.pem, *.key) mirroring api/files/route.ts. - WebSocket and verification guidance: Covers custom-server WebSocket upgrades for interactive panels and a typecheck plus puppeteer smoke test for the activity bar. - Use Case: You want to add a workspace-wide search panel to the IDE activity bar; follow the steps to wire the component, route, registry entry, and state slice without touching the chat AgentState contract. ## Quick Start Add a new search panel to the web IDE shell following the add-ide-panel steps, including its API route, registry entry, and security checklist.
