docs(openspec): add web ui spacing/typography proposal, spec, tasks and audit

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

@@ -0,0 +1,108 @@
+# OpenSpec Tasks: Web UI Foundations — Spacing, Typography & Visual Rhythm
+
+## Change
+`web-ui-spacing-typography-rework` — Pass 1: Foundations
+
+## Parent Spec
+`openspec/specs/web-ui-spacing-typography-rework.md`
+
+## Status
+tasks
+
+---
+
+## Implementation Tasks
+
+- [ ] 1. Expand token scale in `apps/web/src/styles/tokens.css`
+  - Add `--space-7`, `--space-9`, `--space-12`
+  - Add `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-full`
+  - Add `--line-height-tight`, `--line-height-normal`, `--line-height-relaxed`
+  - Add `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--shadow-xl`
+  - Add `--touch-target`, `--sidebar-width`, `--mobile-nav-height`
+  - Add a documentation header comment explaining the token naming convention
+
+- [ ] 2. Add button primitives to `apps/web/src/styles/global.css`
+  - `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-sm`
+  - Include `:focus-visible`, `:hover`, and `:disabled` states
+
+- [ ] 3. Add link-button primitive to `apps/web/src/styles/global.css`
+
+- [ ] 4. Add form primitives to `apps/web/src/styles/global.css`
+  - `.form-input`, `.form-textarea`
+  - `.checkbox-label`
+  - `.hint`
+  - `.form-error`, `.error-message`
+
+- [ ] 5. Add alert primitives to `apps/web/src/styles/global.css`
+  - `.alert`, `.alert-error`, `.alert-warning`, `.alert-info`
+
+- [ ] 6. Add loading-state primitive to `apps/web/src/styles/global.css`
+
+- [ ] 7. Add badge primitives to `apps/web/src/styles/global.css`
+  - `.badge`, `.badge-success`, `.badge-secondary`
+
+- [ ] 8. Add text utility primitives
+  - `.text-muted` in `global.css`
+
+- [ ] 9. Add mobile detail view styles to `apps/web/src/styles/utilities.css`
+  - `.mobile-detail-view`
+  - `.mobile-detail-header`
+  - `.mobile-detail-header-content`
+  - `.mobile-detail-title`
+  - `.mobile-detail-subtitle`
+  - `.mobile-detail-actions`
+  - `.mobile-detail-fields`
+  - `.mobile-detail-field`
+  - `.mobile-detail-field-label`
+  - `.mobile-detail-field-value`
+  - `.mobile-detail-code`
+
+- [ ] 10. Add mobile list search styles to `apps/web/src/styles/utilities.css`
+  - `.mobile-list-search`
+  - `.mobile-list-search-input`
+
+- [ ] 11. Fix mobile nav / FAB / bottom-sheet collisions
+  - Update `--mobile-nav-height` usage in `utilities.css` and `global.css`
+  - `.start-tool-fab` uses `calc(var(--mobile-nav-height) + var(--space-3))`
+  - `.shell-content.mobile` uses `calc(var(--mobile-nav-height) + var(--space-3))`
+  - `.mobile-edit-actions` uses `var(--mobile-nav-height)`
+
+- [ ] 12. Add visible focus states
+  - Add `:focus-visible` rings for `.nav-item`, `.mobile-nav-item`, `.tab`, `.tree-entry`, `.btn`, `.form-input`, `.form-textarea`, `.link-button`
+
+- [ ] 13. Replace critical inline font-size violations
+  - Replace `fontSize: "0.7rem"` in `ConfigProfileListSidebar.tsx` with token-based class
+  - Audit for other `0.7rem` / `10px` / `11px` inline styles and fix
+
+- [ ] 14. Add SSH key page signing/verification styles
+  - `.key-signing`, `.key-verification`, `.signature-result`, `.verify-result` in `utilities.css`
+
+- [ ] 15. Add profile page avatar styles
+  - `.profile-avatar-section`, `.avatar-preview`, `.avatar-image`, `.avatar-placeholder` in `utilities.css`
+
+- [ ] 16. Verification
+  - Run `cd apps/web && npm run typecheck`
+  - Run `cd apps/web && npm run lint`
+  - Search for each previously undefined class and confirm it now has a rule
+  - Spot-check mobile detail view, SSH keys page, and profile page
+
+---
+
+## Acceptance Criteria
+
+- All tasks above are completed.
+- `npm run typecheck` passes.
+- `npm run lint` passes.
+- No referenced class from the audit remains undefined.
+- Mobile nav/FAB/edit-actions no longer collide on devices with safe-area insets.
+- All interactive controls have visible `:focus-visible` states.
+- Inline `0.7rem` font sizes are replaced with token-based classes.
+
+---
+
+## Notes
+
+- Do not rename or remove existing tokens; only add new ones.
+- Do not refactor inline styles in editor components in this pass (Pass 2).
+- Do not unify modals/dialogs in this pass (Pass 3).
+- Keep each commit focused; prefer one commit per task group.