headquarter/openspec/tasks/project-pane-rework.md

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).