Summary
Beyond running commands (#395), we need bidirectional file communication between the webapp and the Coder workspace:
- Read: Webapp reads code files from the workspace (e.g. display code, parse config, show file tree)
- Write: Webapp writes/updates files in the workspace (e.g. scaffold code, inject config, sync from webapp editor)
Proposed Approaches
1. Coder Agent API (recommended)
Coder exposes file operations via its agent API:
- Read file:
GET /api/v2/workspaces/{id}/agents/{agent_id}/files?path=/home/coder/project/main.py
- Write file:
POST /api/v2/workspaces/{id}/agents/{agent_id}/files?path=/home/coder/project/main.py with file content as body
- List directory:
GET /api/v2/workspaces/{id}/agents/{agent_id}/ls?path=/home/coder/project/
Pros: Simple REST calls, reliable, no iframe or extension needed
Cons: VS Code won't auto-refresh open files (need to combine with a file watcher or extension)
2. Coder /exec for file operations
Use the exec endpoint to run shell commands:
- Read:
exec: cat /home/coder/project/main.py
- Write:
exec: echo '...' > /home/coder/project/main.py
- List:
exec: find /home/coder/project -type f
Pros: Works on any Coder version
Cons: Hacky, escaping issues with file content, not ideal for binary files
3. postMessage + VS Code Extension
A custom extension that handles file read/write requests via postMessage:
webapp → postMessage({type: 'read-file', path: 'main.py'}) → extension
extension → vscode.workspace.fs.readFile() → postMessage back → webapp
Pros: VS Code stays in sync since it's aware of the operations
Cons: Fragile iframe sandboxing, highest complexity
Use Cases
| Action |
Direction |
Example |
| Display code in webapp |
workspace → webapp |
Show user's code in a preview panel |
| File tree browsing |
workspace → webapp |
Navigate project structure from webapp |
| Scaffold/generate code |
webapp → workspace |
Generate boilerplate from webapp UI |
| Config sync |
bidirectional |
Sync settings, metadata between webapp and workspace |
| Code diff/review |
workspace → webapp |
Pull code for review UI in webapp |
Recommendation
Use Coder Agent API for file read/write/list. If VS Code needs to react to external file changes, add a lightweight extension with a file watcher that auto-refreshes open editors when files change on disk.
Related
Summary
Beyond running commands (#395), we need bidirectional file communication between the webapp and the Coder workspace:
Proposed Approaches
1. Coder Agent API (recommended)
Coder exposes file operations via its agent API:
GET /api/v2/workspaces/{id}/agents/{agent_id}/files?path=/home/coder/project/main.pyPOST /api/v2/workspaces/{id}/agents/{agent_id}/files?path=/home/coder/project/main.pywith file content as bodyGET /api/v2/workspaces/{id}/agents/{agent_id}/ls?path=/home/coder/project/Pros: Simple REST calls, reliable, no iframe or extension needed
Cons: VS Code won't auto-refresh open files (need to combine with a file watcher or extension)
2. Coder
/execfor file operationsUse the exec endpoint to run shell commands:
exec: cat /home/coder/project/main.pyexec: echo '...' > /home/coder/project/main.pyexec: find /home/coder/project -type fPros: Works on any Coder version
Cons: Hacky, escaping issues with file content, not ideal for binary files
3. postMessage + VS Code Extension
A custom extension that handles file read/write requests via
postMessage:Pros: VS Code stays in sync since it's aware of the operations
Cons: Fragile iframe sandboxing, highest complexity
Use Cases
Recommendation
Use Coder Agent API for file read/write/list. If VS Code needs to react to external file changes, add a lightweight extension with a file watcher that auto-refreshes open editors when files change on disk.
Related