# Pass 2 (Component Cleanup) — Implementation Report

## Change
`web-ui-spacing-typography-rework` — Pass 2: Component Cleanup

## Branch
`feat/web-ui-component-cleanup` (merged into `dev`)

## Summary
Implemented Pass 2 of the web UI spacing/typography/visual-rhythm rework. Refactored the six highest-volume inline-style offenders into token-based utility classes, replaced hardcoded `280px` sidebar widths with `var(--sidebar-width)`, unified the form-field pattern, consolidated button aliases, and added the `.status-badge` family.

## Files Changed

### CSS / Design System
- `apps/web/src/styles/utilities.css`
  - Added layout utilities: `.row*`, `.stack*`, `.items-*`, `.justify-*`, `.flex-*`, `.flex-wrap`, `.min-h-0`, `.w-*`, `.overflow-*`, `.rounded-*`
  - Added spacing utilities: `.m-0`, `.mt-*`, `.mb-*`, `.ml-*`, `.mr-*`, `.p-*`, `.px-*`, `.py-*`, `.pl-*`, `.pr-*`
  - Added typography utilities: `.text-*`, `.font-*`, `.text-center/left/right`
  - Added visual utilities: `.cursor-pointer`, `.border`, `.border-l`, `.border-l-2`
  - Added card utilities: `.card-sm`, `.card-md`, `.card-lg`
  - Added component utilities: `.sidebar`, `.sidebar-item`, `.sidebar-create-button`, `.drag-item`, `.code-block`, `.empty-state`, `.sticky-footer`
- `apps/web/src/styles/global.css`
  - Added `.form-section`, `.form-row`, `.form-help`, `.text-error`, `.alert-success`
  - Unified `.form-group` and `.form-field` into one rule block
  - Added `.status-badge` family with BEM modifiers
  - Added button aliases: `.primary-button`, `.secondary-button`, `.ghost-button`, `.button-secondary` → `.btn` primitives

### Components Refactored
- `apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx`
  - Replaced `280px` with `var(--sidebar-width)` via `.sidebar`
  - Replaced inline list-item styles with `.sidebar-item` utilities
- `apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx`
  - Replaced `280px` with `var(--sidebar-width)` via `.sidebar`
  - Replaced inline badge/delete styles with `.badge`/`.delete-btn`
- `apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx`
  - Replaced empty-state and form layout inline styles with utility classes
  - Used `.btn.btn-primary`/`.btn.btn-secondary`
- `apps/web/src/components/features/git/git-mount-editor.tsx`
  - Replaced card/row/gap/padding/margin inline styles with utility classes
- `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`
  - Replaced static inline styles with utility classes
  - Used `.alert-success`, `.drag-item`/`.drag-item-active`, `.form-section`, `.sticky-footer`
- `apps/web/src/components/features/tool/manifest-editor.tsx`
  - Replaced static inline styles with utility classes
  - Used `.card-md`, `.form-row`, `.code-block`, `.button-secondary`, `.button-icon`

### OpenSpec Artifacts
- `openspec/specs/web-ui-spacing-typography-rework-pass2.md`
- `openspec/tasks/web-ui-spacing-typography-rework-pass2.md` (tasks marked complete)

## Commits Created

1. `5d5b39b feat(web/ui): refactor component inline styles into utility classes`
2. `6559c2a docs(openspec): add pass 2 spec, tasks, and completion report`
3. `docs(openspec): note push pending status in pass 2 report`

## Verification Results

| Check | Result |
|---|---|
| `npm run typecheck` | ✅ Pass |
| `npm run lint` | ✅ Pass |
| `npm run build` | ✅ Pass (only pre-existing chunk-size warnings) |
| Inline `style={{` reduction | ✅ 198 → 11 (94% reduction, target was ≥50%) |
| Hardcoded `280px` sidebar widths | ✅ Removed from sidebars; token `--sidebar-width` used |
| `.status-badge` defined and used | ✅ Defined in global.css; used by session-card, workspace-tools-panel, workspace-card, workspace-settings-panel |
| `.form-group`/`.form-field` unified | ✅ Both selectors share one rule block |

### Inline Style Counts

| Component | Before | After |
|---|---|---|
| `manifest-editor.tsx` | 70 | 7 |
| `ConfigProfileEditorPanel.tsx` | 51 | 2 |
| `ToolTypeEditorPanel.tsx` | 20 | 0 |
| `ToolTypeListSidebar.tsx` | 12 | 0 |
| `ConfigProfileListSidebar.tsx` | 14 | 0 |
| `git-mount-editor.tsx` | 31 | 2 |
| **Total** | **198** | **11** |

## Remaining Inline Styles (intentionally kept)

- `manifest-editor.tsx`: 7 dynamic/static width/preview max-height values
- `ConfigProfileEditorPanel.tsx`: 1 select width, 1 preview max-height
- `git-mount-editor.tsx`: 1 disabled-state opacity/pointer-events block, 1 warning color span

These were kept because they represent dynamic computed values or one-off sizes that do not map cleanly to a reusable token class without adding overly specific utilities.

## Risks / Open Questions

- The refactor removed some hover background color manipulation via `onMouseEnter`/`onMouseLeave` in the sidebars in favor of CSS `:hover`. This is simpler and theme-aware but should be visually verified in both light and dark themes.
- Some legacy class names (`.primary-button`, `.secondary-button`, `.ghost-button`, `.button-secondary`, `.instance-chip`) are now aliases rather than being removed, preserving backward compatibility.
- Pass 3 (modal/dialog unification, card consolidation across page CSS, breakpoint standardization) remains for a future PR.

## Merge Status

Branch `feat/web-ui-component-cleanup` merged into `dev` with `--no-ff` (merge commit `f47cf27`).

## Push Status

⚠️ **Push to `origin dev` is pending.** The Gentle AI runtime safety policy blocks this subagent session from executing `git push` (with or without the required `GIT_SSH_COMMAND` override for `ssh://git@git.commumedia.org:2222`). Supervisor approval or a parent-session push is required to complete this step.