headquarter/openspec/changes/workspace-visual-overhaul/tasks.md

Workspace Visual Overhaul - Tasks

Phase 1: Workspace Header

• Task 1.1: Create WorkspaceHeader component

  • Create components/workspace-header.tsx
  • Project icon + name on left
  • History + Settings buttons on right
  • Props: project, currentRepo, onNavigateToHistory, onNavigateToSettings
  • Add CSS styles

• Task 1.2: Integrate WorkspaceHeader into RepoWorkspace

  • Replace current project header in pages/repo-workspace.tsx
  • Add navigation handlers
  • Remove old header styles

Phase 2: Project Settings Page

• Task 2.1: Create SettingsTabLayout component

  • Create components/settings-tab-layout.tsx
  • Sidebar with tab links
  • Content area for tab content
  • Active tab highlighting
  • Mobile responsive (tabs at top)

• Task 2.2: Create ProjectSettingsPage

  • Create pages/project-settings.tsx
  • Use SettingsTabLayout
  • Implement General tab (name, description, dates)
  • Save/cancel buttons
  • Danger zone section

• Task 2.3: Add API endpoint for project updates

  • Add PUT /projects/:id to src/api/projects.py
  • Update name and description
  • Return updated project
  • Add validation

Phase 3: Move Repository Management

• Task 3.1: Create RepositoriesSettingsTab

  • Create components/repositories-settings-tab.tsx
  • Move logic from pages/git-repositories.tsx
  • Repository list with cards
  • Add/delete functionality
  • Integrate into settings page

• Task 3.2: Update routes

  • Remove /projects/:id/repositories route
  • Add /projects/:id/settings route
  • Add tab routes: /settings/general, /settings/repositories
  • Add redirect from old repo management URL

• Task 3.3: Update navigation

  • Remove "Manage Repositories" from sidebar
  • Update any links to old repo management page
  • Add "Settings" link to workspace header

Phase 4: Sidebar Cleanup

• Task 4.1: Simplify sidebar

  • Remove management links from sidebar
  • Keep only: Branch selector, File tree
  • Adjust sidebar width if needed
  • Update sidebar styles

• Task 4.2: Update workspace layout

  • Ensure clean separation between header, sidebar, and main content
  • Fix any layout issues from header changes
  • Ensure consistent spacing

Phase 5: Members Placeholder

• Task 5.1: Create Members tab placeholder
  • Create components/members-settings-tab.tsx
  • "Coming soon" message
  • Brief feature description
  • Add to settings tabs

Phase 6: Polish & Integration

• Task 6.1: Add breadcrumbs

  • Add breadcrumb navigation to settings page
  • Format: Projects > My Project > Settings > General
  • Make segments clickable

• Task 6.2: Add mobile responsiveness

  • Settings tabs become horizontal on mobile
  • Header actions collapse to icons only
  • Sidebar becomes toggleable overlay

• Task 6.3: Add transitions

  • Tab switching animations
  • Page transition animations
  • Button hover effects

• Task 6.4: Test navigation flow

  • Workspace → Settings → back
  • Settings tabs switching
  • Save changes flow
  • Delete project flow

Phase 7: Quality Gates

• Task 7.1: Run backend checks

  • ruff check
  • mypy
  • pytest

• Task 7.2: Run frontend checks

  • TypeScript typecheck
  • ESLint
  • Build

• Task 7.3: Manual testing

  • Test all navigation flows
  • Test responsive breakpoints
  • Test form validation
  • Verify no broken links