From b3f47310c39366e190f6827a36492fba92e713fc Mon Sep 17 00:00:00 2001 From: Developer Date: Tue, 16 Jun 2026 15:56:06 +0000 Subject: [PATCH] docs(openspec): add ui polish round proposal, spec, and tasks --- ...ish-round-config-sections-home-projects.md | 100 ++++++ ...ish-round-config-sections-home-projects.md | 332 ++++++++++++++++++ ...ish-round-config-sections-home-projects.md | 76 ++++ 3 files changed, 508 insertions(+) create mode 100644 openspec/proposals/ui-polish-round-config-sections-home-projects.md create mode 100644 openspec/specs/ui-polish-round-config-sections-home-projects.md create mode 100644 openspec/tasks/ui-polish-round-config-sections-home-projects.md diff --git a/openspec/proposals/ui-polish-round-config-sections-home-projects.md b/openspec/proposals/ui-polish-round-config-sections-home-projects.md new file mode 100644 index 0000000..2c91367 --- /dev/null +++ b/openspec/proposals/ui-polish-round-config-sections-home-projects.md @@ -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 `

` 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` + `

`. + - 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 `
`. + - 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? diff --git a/openspec/specs/ui-polish-round-config-sections-home-projects.md b/openspec/specs/ui-polish-round-config-sections-home-projects.md new file mode 100644 index 0000000..bad89c7 --- /dev/null +++ b/openspec/specs/ui-polish-round-config-sections-home-projects.md @@ -0,0 +1,332 @@ +# OpenSpec Spec: UI Polish Round — Config Sections, Home Paddings, Project Repos + +## Change +`ui-polish-round-config-sections-home-projects` + +## Parent Proposal +`openspec/proposals/ui-polish-round-config-sections-home-projects.md` + +## Status +spec + +--- + +## 1. Scope + +This spec covers three UI polish fixes: + +1. **Unify config sections** across Tool Workshop and Config Profiles. +2. **Restore paddings** on the Home page cards. +3. **Improve project repository layout** in the expandable project card. + +--- + +## 2. Shared Config Section + +### 2.1 New CSS classes + +Add to `apps/web/src/styles/global.css`: + +```css +.config-section { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-4); + background: var(--panel); + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +.config-section-title { + margin: 0 0 var(--space-1); + font-size: var(--font-size-base); + font-weight: 600; + line-height: var(--line-height-tight); + color: var(--ink); +} + +.config-section-subtitle { + margin: calc(var(--space-1) * -1) 0 var(--space-2); + font-size: var(--font-size-sm); + color: var(--muted); + line-height: var(--line-height-normal); +} + +.config-section > .config-section-title + .config-section-subtitle { + margin-top: calc(var(--space-2) * -1); +} +``` + +### 2.2 Tool Workshop migration + +In `apps/web/src/components/features/tool/manifest-editor.tsx`: + +- Replace every occurrence of: + ```tsx +
+

Title

+ ... +
+ ``` + with: + ```tsx +
+

Title

+ ... +
+ ``` + +- Keep `.card-md` on the preview block if it is not a config section. + +### 2.3 Config Profiles migration + +In `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`: + +- Replace every occurrence of: + ```tsx +
+
+

Title

+ ... +
+ ... +
+ ``` + with: + ```tsx +
+
+
+

Title

+ {subtitle &&

{subtitle}

} +
+ ...actions... +
+ ... +
+ ``` + +- Add `.config-section-header` CSS: + ```css + .config-section-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-3); + margin-bottom: var(--space-2); + } + + .config-section-header .config-section-title { + margin-bottom: 0; + } + ``` + +### 2.4 Backward compatibility + +Keep `.form-section` defined as an alias so existing consumers outside Config Profiles are not broken. + +--- + +## 3. Home Page Padding + +### 3.1 Target classes + +In `apps/web/src/styles/global.css`: + +```css +.home-hero { + padding: var(--space-4); +} + +.home-summary-card { + padding: var(--space-4); +} + +.home-section { + padding: var(--space-4); +} +``` + +If `.home-hero` already has padding from a previous rule, override/ensure it uses `--space-4`. + +### 3.2 Mobile adjustments + +At `max-width: 767px`, reduce padding to `--space-3`: + +```css +@media (max-width: 767px) { + .home-hero, + .home-summary-card, + .home-section { + padding: var(--space-3); + } +} +``` + +--- + +## 4. Project Repository Layout + +### 4.1 Component markup + +In `apps/web/src/components/features/project/ProjectCard.tsx`: + +Change the expanded detail block from: + +```tsx +{expanded && ( +
+ {(project.repositories || []).length === 0 ? ( +

No repositories yet.

+ ) : ( +
...
+ )} + {onAddRepository && ( +
...
+ )} +
+)} +``` + +to: + +```tsx +{expanded && ( +
+
+
+
+

Repositories

+

+ {project.repositories?.length ?? 0} repo + {(project.repositories?.length ?? 0) !== 1 ? "s" : ""} +

+
+ {onAddRepository && ( + + )} +
+ + {(project.repositories || []).length === 0 ? ( +

No repositories yet.

+ ) : ( +
+ {(project.repositories || []).map((repo) => ( +
+ ... +
+ ))} +
+ )} +
+
+)} +``` + +Remove the old `.project-add-repo` block. + +### 4.2 CSS changes + +In `apps/web/src/styles/pages/projects.css`: + +```css +.project-detail { + margin-top: var(--space-4); + padding-top: var(--space-4); + border-top: 1px solid var(--border); +} + +.project-repos { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.project-repos-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-3); +} + +.project-repos-header .config-section-title { + margin-bottom: 0; +} + +.repo-list { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.repo-block { + display: flex; + flex-direction: column; + gap: var(--space-3); + background: var(--bg); +} + +.repo-block, +.repo-block.card-md { + border: 1px solid var(--border); + border-radius: var(--radius-md); +} + +/* Remove old .project-add-repo rules */ +.project-add-repo { + display: none; +} +``` + +### 4.3 Mobile + +At `max-width: 767px`, stack `.project-repos-header` vertically: + +```css +@media (max-width: 767px) { + .project-repos-header { + flex-direction: column; + gap: var(--space-2); + } +} +``` + +--- + +## 5. Acceptance Criteria + +- [ ] `.config-section`, `.config-section-title`, `.config-section-subtitle`, `.config-section-header` exist in `global.css`. +- [ ] `manifest-editor.tsx` uses `.config-section` for its grouped blocks. +- [ ] `ConfigProfileEditorPanel.tsx` uses `.config-section` for its grouped blocks. +- [ ] `.form-section` remains as a backward-compatible alias. +- [ ] `.home-hero`, `.home-summary-card`, and `.home-section` have `--space-4` padding (desktop) and `--space-3` padding (mobile). +- [ ] `ProjectCard.tsx` shows a "Repositories" header with repo count and an "Add Repository" button in the section header. +- [ ] Repository blocks are left-aligned under the project header and fill the available width. +- [ ] Old `.project-add-repo` standalone block is removed. +- [ ] `npm run typecheck` passes. +- [ ] `npm run lint` passes. + +--- + +## 6. Verification Plan + +1. Run `cd apps/web && npm run typecheck`. +2. Run `cd apps/web && npm run lint`. +3. Open Tool Workshop → create/edit a tool type → verify section styling matches Config Profiles. +4. Open Config Profiles → verify section headers and subtitles render correctly. +5. Open Home → verify hero, summary cards, and section cards have comfortable padding. +6. Open Projects → expand a project → verify repositories are left-aligned, have a "Repositories" header with count, and the "Add Repository" button is in the header. +7. Test project card on mobile viewport. + +--- + +## 7. Next Phase + +After approval, create tasks and delegate to `sdd-apply`. diff --git a/openspec/tasks/ui-polish-round-config-sections-home-projects.md b/openspec/tasks/ui-polish-round-config-sections-home-projects.md new file mode 100644 index 0000000..3024e23 --- /dev/null +++ b/openspec/tasks/ui-polish-round-config-sections-home-projects.md @@ -0,0 +1,76 @@ +# OpenSpec Tasks: UI Polish Round — Config Sections, Home Paddings, Project Repos + +## Change +`ui-polish-round-config-sections-home-projects` + +## Parent Spec +`openspec/specs/ui-polish-round-config-sections-home-projects.md` + +## Status +tasks + +--- + +## Implementation Tasks + +- [x] 1. Add shared config-section classes to `apps/web/src/styles/global.css` + - `.config-section` + - `.config-section-title` + - `.config-section-subtitle` + - `.config-section-header` + - Keep `.form-section` as backward-compatible alias + +- [x] 2. Refactor `apps/web/src/components/features/tool/manifest-editor.tsx` + - Replace `.card-md.stack.stack-md` + `

` blocks with `.config-section` + `.config-section-title` + - Keep preview block as `.card-md` if it is not a config section + +- [x] 3. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx` + - Replace `.form-section` grouped blocks with `.config-section` + - Use `.config-section-header` for title + action rows + - Add `.config-section-subtitle` where helpful + +- [x] 4. Fix Home page paddings in `apps/web/src/styles/global.css` + - `.home-hero`: `--space-4` padding + - `.home-summary-card`: `--space-4` padding + - `.home-section`: `--space-4` padding + - Mobile (`max-width: 767px`): reduce to `--space-3` + +- [x] 5. Improve project repository layout in `apps/web/src/components/features/project/ProjectCard.tsx` + - Wrap repositories in `
` + - Add `.project-repos-header` with "Repositories" title, repo count, and "Add Repository" button + - Remove old standalone `.project-add-repo` block + +- [x] 6. Update `apps/web/src/styles/pages/projects.css` + - Left-align `.repo-list` + - Add `.project-repos` and `.project-repos-header` styles + - Remove or hide old `.project-add-repo` rules + - Add mobile stacking for `.project-repos-header` + +- [x] 7. Verification + - Run `cd apps/web && npm run typecheck` + - Run `cd apps/web && npm run lint` + - Spot-check Tool Workshop, Config Profiles, Home, and Projects pages + - Test project card on mobile viewport + +- [x] 8. Update OpenSpec artifacts + - Mark tasks complete + - Add final report note + +--- + +## Acceptance Criteria + +- All tasks above are completed. +- `npm run typecheck` passes. +- `npm run lint` passes. +- Tool Workshop and Config Profiles share the same `.config-section` visual style. +- Home page cards have comfortable padding on desktop and mobile. +- Project repositories are left-aligned with a clear header and an attached "Add Repository" button. + +--- + +## Notes + +- Do not delete `.form-section`; keep it as an alias. +- Do not change project data or behavior; only layout. +- Prefer one commit per task area.