# OpenSpec Tasks: Project Pane Rework ## Change `project-pane-rework` ## Parent Spec `openspec/specs/project-pane-rework.md` ## Status tasks --- ## Implementation Tasks - [ ] 1. Create `apps/web/src/components/features/project/ProjectListItem.tsx` - Project header with name, description, Edit/Delete buttons - Horizontal repo list using `ProjectRepoItem` helper - Vertical workspace/tool lists using `SessionToolLink` helper - Match running sessions from `useSessions` to workspaces/repos/projects - [ ] 2. Update `apps/web/src/pages/ProjectsPage.tsx` - Import `ProjectListItem` and `useSessions` - Replace desktop `ProjectCard` map with `ProjectListItem` map - Remove unused `expandedProject` state and toggle logic from desktop view - Keep mobile view and dialogs unchanged - [ ] 3. Add CSS to `apps/web/src/styles/pages/projects.css` - `.project-list` - `.project-list-item` - `.project-list-item-header` - `.project-list-item-title` - `.project-list-item-actions` - `.project-repo-list` - `.project-repo-item` - `.project-repo-item-header` - `.project-repo-name` - `.project-repo-branch` - `.project-repo-workspaces` - `.project-repo-workspace` - `.workspace-name` - `.workspace-tool-list` - `.workspace-tool-link` - `.session-status-dot` - `.tool-name` - [ ] 4. Verification - Run `cd apps/web && npm run typecheck` - Run `cd apps/web && npm run lint` - Spot-check desktop Projects page - Test workspace and tool links - Verify mobile view still works - [ ] 5. Update OpenSpec artifacts - Mark tasks complete - Add final report note --- ## Acceptance Criteria - All tasks above are completed. - `npm run typecheck` passes. - `npm run lint` passes. - Desktop Projects page shows the new flat list layout. - Each project header has name + Edit + Delete. - Repositories are horizontal. - Each repo shows name + branch. - Workspaces and running tools are listed vertically under each repo. - Workspace links navigate to `/workspaces/:workspaceId`. - Tool links open the tool. - Mobile view remains functional. --- ## Notes - Do not change backend APIs or data models. - Keep mobile behavior unchanged. - Prefer one commit per major area (component, page integration, CSS).