Project Workspace
The Problem
The projects page is a list. You can create, delete, and open projects in chat. But to browse a project’s files, you ask the agent. To edit its instructions, you dig through settings. To configure what tools it has access to, somewhere else again.
There’s no single place that says “this is your project — here’s everything about it.”
Project Workspace gives every project its own page.
What You Get
When you open a project, you see a full workspace with four sections:
Overview
A snapshot of the project right now — how many files, whether instructions are set up, what isolation mode it’s using, who has access. Quick context without clicking into anything.
Files
A file browser built into the workspace. Folders on the left, file contents on the right. You can navigate, search, upload files or folders, delete things, and preview what’s there.
Documents render with formatting. Code shows with syntax highlighting. Binary files get a download button. You’re looking at your project’s actual contents — not asking the agent to describe them.
Instructions
The instructions are the persistent context the agent reads before every conversation about this project. This tab gives you a proper editor for them — write in markdown, preview how it looks, save. Changes take effect immediately.
This is the most underrated part. When instructions are buried in a settings page, people forget to update them. When they’re right next to your files, you naturally keep them current.
Settings
Everything that controls how the agent works with this project, in one place: which tools are available, which credentials to use, whether to isolate the workspace, what plugins are enabled. Per-project, not global.
Shared Projects
If someone shares a project with you, you see the same workspace — but only the parts your permissions allow. Read-only access shows Overview and Files. Edit access shows Instructions and Settings too.
Why It Matters
The most common reason an agent gives a wrong answer is missing context. It doesn’t know about your project’s conventions, its tech stack, or the decisions you’ve already made. Instructions fix that, but only if people keep them up to date.
Putting the instructions editor right next to the file browser makes updating them natural. You’re looking at the code, the agent gets something wrong, you flip to Instructions and add a line. Two seconds, same page.
The file browser matters for a different reason: independence. Without it, the only way to see what the agent created is to ask it. The workspace lets you look at your own project directly — no agent required.
Technical Detail — File Browser Implementation
The file browser uses a recursive TreeNode component for the directory tree. Folders lazy-load children on expand. Desktop renders a persistent sidebar tree; mobile uses a Sheet drawer.
Search flattens the tree with flattenTree() and switches the right pane to results. File preview uses ReactMarkdown with remarkGfm for markdown, plain <pre> for text, and a download-only UI for binary/unsupported files.
File operations (upload, delete, folder upload) go through the storage API layer. Breadcrumbs are computed from the current directory path.
Technical Detail — Settings Components
The Settings tab renders five configuration components:
ProjectWorkspaceIsolationSettings— auto/isolated/in-place worktree mode, active worktree tab displayProjectMcpConfig— per-project MCP server enable/disableProjectAccountBindingsConfig— bind provider credentials to this projectProjectConnectionsConfig— fallback connectors from credentialsProjectPluginsConfig— enable project-configurable pluginsProjectSkillsConfig— select available skills
All settings persist to settingsApi.updateProjectInstructions() and Convex projectConfig.
Technical Detail — Routing
Routes defined in AppRoutes.tsx:
/projects/:projectId— workspace for owned project/projects/:scope/:projectId— workspace for shared project
Route helpers in projectRoutes.ts handle path extraction (extractProjectId), href generation (getProjectWorkspaceHref, getSharedProjectWorkspaceHref), and display names.
Permission gating uses the project’s ownership and share permissions to show/hide the Instructions and Settings tabs.