docs(openspec): add pass 2 spec, tasks, and completion report

openspec/tasks/web-ui-spacing-typography-rework-pass2.md

@@ -0,0 +1,99 @@
+# 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.