Merge branch 'feat/pc-style-polish' into develop

Author: pallyoung

docs/superpowers/plans/2026-05-15-pc-style-polish-phase-2.md

@@ -0,0 +1,138 @@
+# PC Style Polish Phase 2 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Tighten the remaining desktop settings chrome gaps and expand desktop UI review coverage with deeper workspace states.
+
+**Architecture:** Keep the phase-1 page structure intact, then layer a desktop-only settings header shell on top of the existing settings route while preserving the mobile header path. Extend `ui-preview` with isolated desktop review scenes for workspace editor and diff states so future visual review covers more than empty and launcher states.
+
+**Tech Stack:** React, TypeScript, Jotai, Vitest, Playwright `e2e-ui`, CSS tokens in `packages/web/src/styles`
+
+---
+
+### Task 1: Add a dedicated desktop settings header shell
+
+**Files:**
+- Modify: `packages/web/src/features/settings/components/settings-page.tsx`
+- Modify: `packages/web/src/features/settings/components/settings-page.test.tsx`
+- Modify: `packages/web/src/styles/components.css`
+- Modify: `packages/web/src/styles/components.theme.test.ts`
+
+- [x] **Step 1: Write the failing tests**
+
+Add a desktop-only assertion in `settings-page.test.tsx` that checks:
+- `.settings-header__desktop` renders on desktop
+- `.settings-header .mobile-page-header` is absent on desktop
+- the current section pill shows the active section label
+
+Add CSS assertions in `components.theme.test.ts` that check:
+- `.settings-header__desktop` uses a centered max-width layout
+- `.settings-header__section-pill` uses elevated panel styling
+- mobile header assertions still target `.mobile-page-header`
+
+- [x] **Step 2: Run the focused tests and verify they fail**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/settings/components/settings-page.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- settings page test fails because desktop header selectors do not exist
+- theme test fails because new desktop header selectors are missing
+
+- [x] **Step 3: Implement the desktop settings header**
+
+In `settings-page.tsx`:
+- render `MobilePageHeader` only for mobile
+- add a desktop header block with back action, product/title copy, active section summary, and a section pill using the active section icon
+
+In `components.css`:
+- keep existing mobile overrides intact
+- add `.settings-header__desktop`, `.settings-header__copy`, `.settings-header__summary`, `.settings-header__section-pill`, and related desktop-only spacing/alignment rules
+
+- [x] **Step 4: Re-run the focused tests and verify green**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/settings/components/settings-page.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- both test files pass with `0 failed`
+
+### Task 2: Expand desktop UI review coverage to editor and diff states
+
+**Files:**
+- Modify: `packages/web/src/ui-preview/scenes/desktop-review-scenes.tsx`
+- Modify: `packages/web/src/ui-preview/scene-metadata.ts`
+- Modify: `packages/web/src/ui-preview/scene-metadata.test.ts`
+- Modify: `packages/web/src/ui-preview/catalog.test.tsx`
+
+- [x] **Step 1: Write the failing tests**
+
+Add metadata assertions for two new scene ids:
+- `workspace-editor-review`
+- `workspace-diff-review`
+
+Add catalog render tests that check:
+- editor review renders a desktop review card plus code editor chrome
+- diff review renders a desktop review card plus git diff content
+
+- [x] **Step 2: Run the focused preview tests and verify they fail**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+
+Expected:
+- metadata test fails because the new scene ids are not registered
+- catalog test fails because the new scenes do not exist yet
+
+- [x] **Step 3: Implement the new desktop review scenes**
+
+In `desktop-review-scenes.tsx`:
+- add helper state for a realistic code editor view
+- add `workspace-editor-review` with a preloaded text editor surface
+- add `workspace-diff-review` with a populated `GitDiffViewer`
+
+In `scene-metadata.ts`:
+- register both scenes as desktop-only review entries with `.desktop-review-card` capture selectors
+
+- [x] **Step 4: Re-run the focused preview tests and verify green**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+
+Expected:
+- both preview test files pass with `0 failed`
+
+### Task 3: Run regression verification for the phase-2 polish slice
+
+**Files:**
+- No code changes required unless regressions surface
+
+- [x] **Step 1: Re-run targeted component and preview tests**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/settings/components/settings-page.test.tsx src/styles/components.theme.test.ts src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx src/features/workspace/index.test.tsx src/features/command-palette/components/command-palette.test.tsx`
+
+Expected:
+- all selected tests pass
+
+- [x] **Step 2: Re-run targeted desktop captures**
+
+Run: `pnpm --dir e2e-ui exec playwright test --config playwright.config.ts --project desktop --workers 4 --grep '(settings-light-theme-review|settings-density-review|workspace-editor-review|workspace-diff-review|workspace-topbar-review|workspace-terminal-empty-review|desktop-overlay-review|desktop-statusbar-review) \\[desktop/'`
+
+Expected:
+- desktop review capture matrix passes for the touched scenes
+
+- [x] **Step 3: Rebuild the report**
+
+Run: `pnpm --dir e2e-ui exec tsx report/build-report.ts`
+
+Expected:
+- report command exits `0`
+
+## Verification Notes
+
+- `pnpm --filter @coder-studio/web exec vitest run src/features/settings/components/settings-page.test.tsx src/styles/components.theme.test.ts`
+  - Result: `Test Files 2 passed (2)`, `Tests 102 passed (102)`
+- `pnpm --filter @coder-studio/web exec vitest run src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+  - Result: `Test Files 2 passed (2)`, `Tests 25 passed (25)`
+- `pnpm --filter @coder-studio/web exec vitest run src/features/settings/components/settings-page.test.tsx src/styles/components.theme.test.ts src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx src/features/workspace/index.test.tsx src/features/command-palette/components/command-palette.test.tsx`
+  - Result: `Test Files 6 passed (6)`, `Tests 149 passed (149)`
+- `pnpm --dir e2e-ui exec playwright test --config playwright.config.ts --project desktop --workers 4 --grep '(settings-light-theme-review|settings-density-review|workspace-editor-review|workspace-diff-review|workspace-topbar-review|workspace-terminal-empty-review|desktop-overlay-review|desktop-statusbar-review) \\[desktop/'`
+  - Result: `120 passed (7.8m)`
+- `pnpm --dir e2e-ui exec tsx report/build-report.ts`
+  - Result: exited `0`

docs/superpowers/plans/2026-05-15-pc-style-polish-phase-3.md

@@ -0,0 +1,180 @@
+# PC Style Polish Phase 3 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Tighten the remaining desktop panel chrome in file tree, git panel, and command palette, then expand desktop review coverage for the most visible workspace states.
+
+**Architecture:** Keep the existing desktop workspace structure intact and polish the panel surfaces in place. Use CSS/token tweaks for the visual system, add focused tests for desktop-only selectors and theme rules, and reinforce the result with deterministic `ui-preview` scenes plus desktop capture coverage.
+
+**Tech Stack:** React, TypeScript, Jotai, Vitest, Playwright `e2e-ui`, CSS tokens in `packages/web/src/styles`
+
+---
+
+### Task 1: Tighten the desktop file tree panel
+
+**Files:**
+- Modify: `packages/web/src/features/workspace/views/shared/file-tree-panel.tsx`
+- Modify: `packages/web/src/features/workspace/views/shared/file-tree-panel.test.tsx`
+- Modify: `packages/web/src/styles/components.css`
+- Modify: `packages/web/src/styles/components.theme.test.ts`
+
+- [ ] **Step 1: Write the failing test**
+
+Add a focused desktop assertion in `file-tree-panel.test.tsx` that checks:
+- the desktop shell still renders `.file-tree-shell.file-tree-shell--desktop`
+- the search bar and selected row stay in the same chrome family as the desktop panel
+- the selected row keeps its selected class when the active path matches
+
+Add CSS assertions in `components.theme.test.ts` that check:
+- `.file-tree-shell .file-tree-search` has the tighter desktop chrome used by the panel
+- `.file-tree-shell .tree-item` keeps the desktop row density and hover transition
+- `.file-tree-shell .tree-item.selected` uses the desktop active surface language
+
+- [ ] **Step 2: Run the focused test and verify it fails**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/workspace/views/shared/file-tree-panel.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- the new desktop selector expectations fail until the panel chrome is tightened
+
+- [ ] **Step 3: Implement the desktop file tree polish**
+
+In `file-tree-panel.tsx`:
+- keep the data flow unchanged
+- keep using the existing `selected` class for the active row
+
+In `components.css`:
+- tighten `.file-tree-shell .file-tree-search`
+- tighten `.file-tree-shell .tree-item`
+- tighten `.file-tree-shell .tree-item.selected`
+- keep mobile rules intact under `.file-tree-shell--mobile`
+
+- [ ] **Step 4: Re-run the focused test and verify green**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/workspace/views/shared/file-tree-panel.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- both test files pass with `0 failed`
+
+### Task 2: Tighten the desktop git panel and desktop command palette
+
+**Files:**
+- Modify: `packages/web/src/features/workspace/views/shared/git-panel.tsx`
+- Modify: `packages/web/src/features/workspace/views/shared/git-panel.test.tsx`
+- Modify: `packages/web/src/features/command-palette/components/command-palette.tsx`
+- Modify: `packages/web/src/features/command-palette/components/command-palette.test.tsx`
+- Modify: `packages/web/src/styles/components.css`
+- Modify: `packages/web/src/styles/components.theme.test.ts`
+
+- [ ] **Step 1: Write the failing tests**
+
+Add desktop assertions in `git-panel.test.tsx` that check:
+- the desktop panel keeps `.git-panel.git-panel--desktop`
+- `.git-commit-block`, `.git-panel-section`, `.git-worktree-row`, and `.git-history-row` all stay present in the desktop chrome
+- at least one active change row still renders with the `.active` class
+
+Add desktop assertions in `command-palette.test.tsx` that check:
+- the desktop overlay still renders `.command-palette-overlay` and `.command-palette`
+- the header, search, hint, and list remain present as desktop chrome
+- filtered items still render with `.command-palette-item-selected` when keyboard navigation moves selection
+
+Add CSS assertions in `components.theme.test.ts` that check:
+- `.git-panel-scroll`, `.git-commit-block`, `.git-panel-section`, `.git-worktree-row`, and `.git-history-row` follow the tighter desktop density
+- `.command-palette`, `.command-palette-header`, `.command-palette-search`, and `.command-palette-item` use the desktop tool surface language
+
+- [ ] **Step 2: Run the focused tests and verify they fail**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/workspace/views/shared/git-panel.test.tsx src/features/command-palette/components/command-palette.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- the new desktop selector expectations fail until the git panel and command palette chrome are tightened
+
+- [ ] **Step 3: Implement the desktop git panel and command palette polish**
+
+In `git-panel.tsx` and `command-palette.tsx`:
+- keep behavior unchanged
+- keep mobile / desktop branching unchanged
+- only adjust the desktop chrome classes and structure where needed for consistent spacing and hierarchy
+
+In `components.css`:
+- tighten the desktop `.git-panel-*` rules for commit, section, worktree, change, and history rows
+- tighten the desktop `.command-palette-*` rules for overlay, palette, header, search, hint, list, item, and shortcut chip
+- keep mobile sheet rules unchanged
+
+- [ ] **Step 4: Re-run the focused tests and verify green**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/workspace/views/shared/git-panel.test.tsx src/features/command-palette/components/command-palette.test.tsx src/styles/components.theme.test.ts`
+
+Expected:
+- all selected tests pass with `0 failed`
+
+### Task 3: Expand desktop review scenes for workspace panel density
+
+**Files:**
+- Modify: `packages/web/src/ui-preview/scenes/desktop-review-scenes.tsx`
+- Modify: `packages/web/src/ui-preview/scene-metadata.ts`
+- Modify: `packages/web/src/ui-preview/scene-metadata.test.ts`
+- Modify: `packages/web/src/ui-preview/catalog.test.tsx`
+
+- [ ] **Step 1: Write the failing preview tests**
+
+Add metadata assertions that confirm the desktop review catalog still includes:
+- `workspace-sidebar-files-review`
+- `workspace-sidebar-git-review`
+- `command-palette`
+
+Add catalog assertions that check:
+- the file-tree review scene renders seeded file hierarchy chrome
+- the git review scene renders seeded commit / worktree / history chrome
+- the command palette scene renders the desktop overlay chrome and selected item state
+
+- [ ] **Step 2: Run the focused preview tests and verify they fail**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+
+Expected:
+- the new desktop chrome expectations fail until the review scenes are updated to match the tightened panels
+
+- [ ] **Step 3: Update the review scenes and metadata**
+
+In `desktop-review-scenes.tsx`:
+- keep the seeded data deterministic
+- enrich the existing `workspace-sidebar-files-review` and `workspace-sidebar-git-review` scenes with denser desktop panel state so the new chrome rules are visible in screenshots
+- keep `command-palette` as the canonical desktop palette review scene
+
+In `scene-metadata.ts`:
+- keep the existing scene ids registered
+- update descriptions only if the scene surface changed
+
+- [ ] **Step 4: Re-run the focused preview tests and verify green**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+
+Expected:
+- both preview test files pass with `0 failed`
+
+### Task 4: Run regression verification for the phase-3 polish slice
+
+**Files:**
+- No code changes required unless regressions surface
+
+- [ ] **Step 1: Re-run targeted component, style, and preview tests**
+
+Run: `pnpm --filter @coder-studio/web exec vitest run src/features/workspace/views/shared/file-tree-panel.test.tsx src/features/workspace/views/shared/git-panel.test.tsx src/features/command-palette/components/command-palette.test.tsx src/styles/base.theme.test.ts src/styles/components.theme.test.ts src/ui-preview/scene-metadata.test.ts src/ui-preview/catalog.test.tsx`
+
+Expected:
+- all selected tests pass
+
+- [ ] **Step 2: Re-run targeted desktop captures**
+
+Run: `pnpm --dir e2e-ui exec playwright test --config playwright.config.ts --project desktop --workers 4 --grep '(workspace-sidebar-files-review|workspace-sidebar-git-review|command-palette|workspace-topbar-review|desktop-overlay-review|desktop-statusbar-review) \\[desktop/'`
+
+Expected:
+- the desktop review capture matrix passes for the touched scenes
+
+- [ ] **Step 3: Rebuild the report**
+
+Run: `pnpm --dir e2e-ui exec tsx report/build-report.ts`
+
+Expected:
+- report command exits `0`