# OpenSpec Tasks: Web UI Component Cleanup — Inline Styles, Forms, Badges

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

## Parent Spec
`openspec/specs/web-ui-spacing-typography-rework-pass2.md`

## Status
tasks

---

## Implementation Tasks

- [x] 1. Add utility classes to `apps/web/src/styles/utilities.css`
  - Layout: `.row`, `.row-sm`, `.row-md`, `.row-lg`, `.stack`, `.stack-sm`, `.stack-md`, `.stack-lg`, `.stack-xl`, `.items-start`, `.items-center`, `.items-end`, `.justify-between`, `.justify-center`, `.justify-end`, `.flex-1`, `.flex-none`, `.w-full`, `.min-w-0`, `.max-w-prose`, `.max-w-form`
  - Spacing: `.m-0`, `.mt-1` through `.mt-6`, `.mb-0` through `.mb-6`, `.ml-auto`, `.mr-auto`, `.p-1` through `.p-5`, `.px-2` through `.px-4`, `.py-1` through `.py-4`
  - Typography: `.text-xs`, `.text-sm`, `.text-base`, `.text-lg`, `.text-xl`, `.font-mono`, `.font-medium`, `.font-semibold`, `.text-center`, `.text-left`, `.text-right`
  - Visual: `.cursor-pointer`, `.overflow-auto`, `.overflow-hidden`, `.rounded-sm`, `.rounded-md`, `.rounded-lg`, `.rounded-xl`, `.rounded-full`
  - Cards: `.card-sm`, `.card-md`, `.card-lg`

- [x] 2. Add form utilities to `apps/web/src/styles/global.css`
  - `.form-section`
  - `.form-row`
  - `.form-help`
  - `.text-error`
  - Unify `.form-group` and `.form-field` into one rule block

- [x] 3. Add button aliases in `apps/web/src/styles/global.css`
  - `.primary-button` → alias to `.btn.btn-primary`
  - `.secondary-button` / `.button-secondary` → alias to `.btn.btn-secondary`
  - `.ghost-button` → explicit style or alias to `.btn.btn-secondary`
  - `.btn-icon` modifier

- [x] 4. Add status badge family to `apps/web/src/styles/global.css`
  - `.status-badge`
  - `.status-badge--running`, `.status-badge--success`
  - `.status-badge--error`, `.status-badge--failed`
  - `.status-badge--warning`
  - `.status-badge--info`, `.status-badge--pending`, `.status-badge--idle`
  - Keep `.instance-chip` as deprecated alias if widely used

- [x] 5. Refactor `apps/web/src/components/features/tool/manifest-editor.tsx`
  - Replace static inline styles with utility classes
  - Keep dynamic values inline (e.g. drag-over background, preview content)
  - Target ≥50% reduction in inline style blocks

- [x] 6. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`
  - Replace static inline styles with utility classes
  - Use `.alert-success` for save success banner
  - Use `.drag-item` / `.drag-item-active` for include list items
  - Use `.dialog-actions` for sticky footer

- [x] 7. Refactor `apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx`
  - Replace static inline styles with utility classes
  - Use shared empty-state and form header patterns

- [x] 8. Refactor `apps/web/src/components/features/tool-workshop/ToolTypeListSidebar.tsx`
  - Replace `280px` with `var(--sidebar-width)`
  - Replace list-item inline spacing with utility classes

- [x] 9. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileListSidebar.tsx`
  - Replace `280px` with `var(--sidebar-width)`
  - Replace remaining inline badge styles with `.badge`/`.badge-secondary`
  - Replace inline delete button with `.btn-icon` or `.ghost-button.small`

- [x] 10. Refactor `apps/web/src/components/features/git/git-mount-editor.tsx`
  - Replace static inline styles with utility classes
  - Use `.stack`, `.row`, `.card-*`, `.gap-*`, `.p-*`, `.mb-*`

- [x] 11. Verification
  - Run `cd apps/web && npm run typecheck`
  - Run `cd apps/web && npm run lint`
  - Count inline style blocks in target components; confirm ≥50% reduction overall
  - Search for `280px` in `apps/web/src`; confirm zero matches
  - Spot-check Tool Workshop and Config Profiles pages

---

## Acceptance Criteria

- All tasks above are completed.
- `npm run typecheck` passes.
- `npm run lint` passes.
- Inline style blocks in the six target components reduced by at least 50% overall.
- No hardcoded `280px` sidebar widths remain in source.
- `.status-badge` family is defined and used by at least one caller.
- `.form-group` and `.form-field` share a single CSS rule block.
- Button aliases work visually.

---

## Notes

- Do not rename or remove existing classes without aliases; backward compatibility matters.
- Keep dynamic inline styles (computed values) in JS.
- Do not unify modals or cards across page CSS files in this pass (Pass 3).
- Prefer one commit per major component or utility group.