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

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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-*

• 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.