docs(openspec): add ui polish round proposal, spec, and tasks

2026-06-16 15:56:06 +00:00
parent 972dae64f2
commit b3f47310c3
3 changed files with 508 additions and 0 deletions
@@ -0,0 +1,100 @@
+# SDD Proposal: UI Polish Round — Config Sections, Home Paddings, Project Repos
+
+## Status
+**Phase:** proposal  
+**Date:** 2026-06-16  
+**Owner:** el Gentleman  
+
+---
+
+## User Story
+
+As a Headquarter user, I want the Tool Workshop and Config Profiles editors to share a consistent section pattern, the Home page to have readable card paddings, and the Projects page to clearly show which repositories belong to a project so that the UI feels coherent and scannable.
+
+---
+
+## Problems
+
+1. **Config sections are inconsistent**
+   - Config Profiles uses `.form-section`.
+   - Tool Workshop's `manifest-editor.tsx` uses `.card-md.stack.stack-md` with bare `<h4>` headings.
+   - Both serve the same purpose: a grouped configuration block with a title.
+
+2. **Home page cards lost padding**
+   - The `.home-summary-card` has no padding.
+   - `.home-hero` and `.home-section` may have lost explicit padding during the card consolidation pass.
+   - The result is cards that touch their borders and feel cramped.
+
+3. **Project repositories look misaligned**
+   - In the expanded project card, the repository list is rendered but visually floats on the right/indented.
+   - There is no clear "Repositories" header.
+   - The "Add Repository" button is detached from the repo list; it is unclear whether it adds a repo or performs a project-level action.
+
+---
+
+## Goals
+
+1. Introduce a single shared `.config-section` component class and use it in both Config Profiles and Tool Workshop.
+2. Restore comfortable, token-based padding on Home hero, summary cards, and section cards.
+3. Left-align repositories under the project header, add a clear "Repositories" section header, and visually attach the "Add Repository" button to the repo list.
+
+---
+
+## Non-Goals
+
+- No changes to backend APIs or data models.
+- No redesign of the Home page layout or information architecture.
+- No changes to mobile project list behavior.
+- No new features (e.g., no new repo actions).
+
+---
+
+## High-Level Approach
+
+1. **Shared config section**
+   - Add `.config-section` and `.config-section-title` to `global.css`.
+   - Refactor `manifest-editor.tsx` to use `.config-section` instead of `.card-md.stack.stack-md` + `<h4>`.
+   - Refactor `ConfigProfileEditorPanel.tsx` to use `.config-section` instead of `.form-section` for its grouped blocks.
+
+2. **Home padding fix**
+   - Add explicit padding to `.home-hero`, `.home-summary-card`, and `.home-section`.
+   - Use `--space-*` tokens.
+
+3. **Project repo layout**
+   - In `ProjectCard.tsx`, wrap repositories in a `<section className="project-repos">`.
+   - Add a header row with "Repositories" label and repo count.
+   - Move the "Add Repository" button into the repo section footer, directly under the list.
+   - Left-align `.repo-list` so blocks fill from the left edge of the project detail area.
+   - Update `styles/pages/projects.css` accordingly.
+
+---
+
+## Risks
+
+| Risk | Severity | Mitigation |
+|------|----------|------------|
+| `.form-section` has other consumers outside config profiles | Low | Keep `.form-section` as alias; do not delete. |
+| `.card-md` consumers outside manifest editor | Low | `.config-section` will be equivalent; verify no visual change. |
+| Project repo layout changes affect mobile | Medium | Test both desktop and mobile expanded project card. |
+
+---
+
+## Effort Estimate
+
+| Area | Files | Lines (est) |
+|---|---|---|
+| Shared config section | 3 | ~120 |
+| Home padding | 2 | ~40 |
+| Project repo layout | 2 | ~100 |
+| OpenSpec artifacts | 3 | ~80 |
+| **Total** | **10** | **~340** |
+
+Review workload is within the 400-line budget.
+
+---
+
+## Next Recommended Phase
+
+**Spec** — detail the exact CSS rules, component markup changes, and acceptance criteria.
+
+Should I proceed to spec?