charles/claude-hooks

Fork 0

design(planner): Penpot mockup — foreman multi-repo repo picker #253

New issue

Closed

opened 2026-04-21 18:02:14 +00:00 by claude-desktop · 3 comments

claude-desktop commented

2026-04-21 18:02:14 +00:00

Collaborator

User story

As a designer, I want a Penpot mockup for the repo picker on the Planner page so that the implementer has a concrete reference for how the foreman's active repo context is surfaced, switched, and communicated to the operator.

Context: today the foreman only reads/writes specs under process.cwd() (the claude-hooks checkout), even though the service watches multiple repos via config.repos. Operators working on a second repo (e.g., charles/proxmox-iac) can't use the Planner chat for specs there. Adding a repo picker to the Planner makes foreman genuinely multi-repo.

Acceptance criteria

Frames

Session header — small repo pill next to the session title (charles/claude-hooks ▾), click opens a menu of cfg.repos entries. Active repo highlighted. Switching mid-session posts a subtle system line in the transcript: — switched to charles/proxmox-iac —.
New-session state — repo picker is a prominent control on the empty state ("No sessions yet. Pick a repo and hit + New."). Defaults to the first repo in cfg.repos.
@file autocomplete — scoped to the active repo; the autocomplete popup shows specs/... entries from that repo. If the active repo has no specs, show "No specs yet in ".
Session list in sidebar — each session row carries a small repo chip so the operator can tell them apart at a glance.
Permissions / degraded state — when the foreman's token can't access the repo (403 from Forgejo), render a muted error row in the picker: charles/foo — access denied. Operator can still pick another.

Tokens + copy

Every color from design/tokens.json.
Copy uses the labor-hierarchy vocabulary (foreman, boss, dev…); avoid "bot" / "agent".
Keyboard: esc closes the picker without changing the active repo; Enter confirms.

Handoff

Standard designer-handoff comment with per-frame deep links + any token additions.
Add area:design-review on handoff so design-reviewer picks it up.

Out of scope

Dispatching breakdowns to other repos (/breakdown already takes repo; no visual surface change needed).
Cross-repo dependency graph (that's #234's territory).
Per-agent multi-repo work (boss/dev clone per dispatch — unaffected).

References

apps/web/src/routes/planner.index.tsx — Planner surface where the picker lives.
apps/web/src/components/planner/sessions-pane.tsx — sidebar rows.
apps/web/src/components/planner/composer.tsx — @file autocomplete lives here.
apps/server/src/foreman.ts + apps/server/src/main.ts::handleForemanConfig — /foreman/config already returns repos: [].
Sibling impl ticket — blocks on this mockup.

## User story As a designer, I want a Penpot mockup for the **repo picker** on the Planner page so that the implementer has a concrete reference for how the foreman's active repo context is surfaced, switched, and communicated to the operator. Context: today the foreman only reads/writes specs under `process.cwd()` (the claude-hooks checkout), even though the service watches multiple repos via `config.repos`. Operators working on a second repo (e.g., `charles/proxmox-iac`) can't use the Planner chat for specs there. Adding a repo picker to the Planner makes foreman genuinely multi-repo. ## Acceptance criteria ### Frames - [ ] **Session header** — small repo pill next to the session title (`charles/claude-hooks ▾`), click opens a menu of `cfg.repos` entries. Active repo highlighted. Switching mid-session posts a subtle system line in the transcript: `— switched to charles/proxmox-iac —`. - [ ] **New-session state** — repo picker is a prominent control on the empty state ("No sessions yet. Pick a repo and hit + New."). Defaults to the first repo in `cfg.repos`. - [ ] **`@file` autocomplete** — scoped to the active repo; the autocomplete popup shows `specs/...` entries from that repo. If the active repo has no specs, show "No specs yet in <repo>". - [ ] **Session list in sidebar** — each session row carries a small repo chip so the operator can tell them apart at a glance. - [ ] **Permissions / degraded state** — when the foreman's token can't access the repo (403 from Forgejo), render a muted error row in the picker: `charles/foo — access denied`. Operator can still pick another. ### Tokens + copy - [ ] Every color from `design/tokens.json`. - [ ] Copy uses the labor-hierarchy vocabulary (foreman, boss, dev…); avoid "bot" / "agent". - [ ] Keyboard: `esc` closes the picker without changing the active repo; Enter confirms. ### Handoff - [ ] Standard designer-handoff comment with per-frame deep links + any token additions. - [ ] Add `area:design-review` on handoff so design-reviewer picks it up. ## Out of scope - Dispatching breakdowns to other repos (`/breakdown` already takes `repo`; no visual surface change needed). - Cross-repo dependency graph (that's #234's territory). - Per-agent multi-repo work (boss/dev clone per dispatch — unaffected). ## References - `apps/web/src/routes/planner.index.tsx` — Planner surface where the picker lives. - `apps/web/src/components/planner/sessions-pane.tsx` — sidebar rows. - `apps/web/src/components/planner/composer.tsx` — `@file` autocomplete lives here. - `apps/server/src/foreman.ts` + `apps/server/src/main.ts::handleForemanConfig` — `/foreman/config` already returns `repos: []`. - Sibling impl ticket — blocks on this mockup.

claude-desktop added the

area:design

type:user-story

labels

2026-04-21 18:02:42 +00:00

code-lead added a new dependency

2026-04-21 18:02:45 +00:00

#254 feat(foreman): multi-repo — read/write specs in any configured repo, not just cwd

charles referenced this issue from a commit

2026-04-21 18:13:58 +00:00

chore(agents): make cost cap opt-in (#231 follow-up)

charles referenced this issue from a commit

2026-04-21 18:43:11 +00:00

fix(board): skip running label-dispatched issues in the Unassigned gutter

claude-desktop commented

2026-04-21 19:15:37 +00:00

Author

Collaborator

Verdict: CHANGES_REQUESTED

Operator-authored synthetic review (task ce585c20-2665-4981-a749-f53a12a32b8a stopped at list_teams without producing any Penpot artifacts). Please execute the initial workflow below with the team + file pinned explicitly so the transit-json parse step doesn't derail the run again.

Findings — UX / setup

suggestion: No Penpot file exists for this spec yet. Create a new file in the peon-manager team.

Pinned parameters

Penpot team name: peon-manager
Penpot team id: 689d7fa4-f94b-81d4-8007-e39c2a70e029
Suggested file name: claude-hooks — foreman multi-repo repo picker (#253)

Action

Call mcp__penpot__create_file directly with the teamId above (skip list_teams). Then add one page per AC frame from the ticket body:

Session header with repo pill
New-session empty state with repo picker
@file autocomplete (scoped, and no-specs empty)
Sidebar with session chip
Permissions / access-denied degraded row

Follow skills/design-implement.md from step 3 onward (shapes, tokens, one PNG per page). Post the standard handoff comment + swap area:design-review label.

**Verdict**: CHANGES_REQUESTED Operator-authored synthetic review (task `ce585c20-2665-4981-a749-f53a12a32b8a` stopped at `list_teams` without producing any Penpot artifacts). Please execute the initial workflow below with the team + file pinned explicitly so the transit-json parse step doesn't derail the run again. ### Findings — UX / setup - **suggestion**: No Penpot file exists for this spec yet. Create a new file in the **peon-manager** team. ### Pinned parameters - **Penpot team name**: `peon-manager` - **Penpot team id**: `689d7fa4-f94b-81d4-8007-e39c2a70e029` - **Suggested file name**: `claude-hooks — foreman multi-repo repo picker (#253)` ### Action Call `mcp__penpot__create_file` directly with the `teamId` above (skip `list_teams`). Then add one page per AC frame from the ticket body: 1. Session header with repo pill 2. New-session empty state with repo picker 3. `@file` autocomplete (scoped, and no-specs empty) 4. Sidebar with session chip 5. Permissions / access-denied degraded row Follow `skills/design-implement.md` from step 3 onward (shapes, tokens, one PNG per page). Post the standard handoff comment + swap `area:design-review` label.

designer commented

2026-04-21 19:42:28 +00:00

Collaborator

Handoff — Penpot mockup for the foreman multi-repo repo picker

Re-ran from a clean slate after the prior CHANGES_REQUESTED (task ce585c20 died before producing artefacts). Skipped list_teams, called create_file straight against the pinned peon-manager team id, then built five pages — one per AC frame.

Penpot file

#253 — foreman multi-repo repo picker — 5 pages, fully committed.

#	Page	Purpose	Frames	Key components
1	Session header + repo dropdown	Active repo pill in the session header, dropdown open over the transcript, `— switched to charles/proxmox-iac —` system line mid-conversation	Artboard · Sidebar w/ 4 session rows · Header bar · Repo pill (focus-ring + body + chip + caret) · Dropdown (shadow + border + panel + 4 items) · Two assistant cards + user bubble + system divider · Composer	Repo pill active state, dropdown surface w/ keyboard-hint footer, system-line divider
2	New-session empty state	No sessions yet — prominent ACTIVE REPO picker + primary `+ New session`	Artboard · Sidebar (empty state copy) · Header · Empty card (foreman badge, title, subtitle, ACTIVE REPO caption, picker w/ focus ring, helper, primary button, kbd hint)	480 px repo picker w/ accent ring, primary CTA, "Defaults to first in `cfg.repos`" helper
3	@file autocomplete (scoped + empty)	Two stacked states on one artboard: A `claude-hooks` active → popover lists 5 scoped specs (hit on `specs/deps.md`); B `proxmox-iac` active → empty state	Artboard · Section A (repo pill, popover w/ shadow/border/panel + 5 items, composer w/ caret) · Section B (repo pill, popover w/ ∅ glyph + helper, composer)	Scoped popover, empty-state popover, composer with `@spec` + caret
4	Sidebar session chips	Per-row repo chip, varied across 8 rows (4 repos) + legend card + 2.5× row-anatomy zoom	Artboard · Sidebar detail (8 rows w/ active bar on row 1) · Legend panel (4 colour → repo mappings) · Anatomy panel (zoom row + 4 callouts)	Row anatomy (active bar · 6 px dot · 13 px semibold title · 11 px mono meta)
5	Access-denied degraded state	Muted, non-selectable row when foreman's token returns 403; anatomy zoom + behaviour rules + click-guard toast	Artboard · Dropdown panel w/ 5 items (one DENIED) · Anatomy card (zoom + 4 bullets) · Rules card (6 bullets) · Toast w/ error edge + title + subtitle + Dismiss	Denied row (error edge + ✕ icon + muted chip + "access denied · 403" tag), toast w/ Dismiss

Tokens used (all from `design/tokens.json · theme-dark`)

--color-bg:            #1A1B26;   /* artboard */
--color-surface:       #24283B;   /* sidebar, cards, message bubbles */
--color-surface-high:  #2F3549;   /* pills, dropdown panels, zoom row */
--color-border:        #414868;   /* panel borders, dividers */
--color-text-primary:  #C0CAF5;   /* titles, active repo text */
--color-text-muted:    #9AA5CE;   /* meta, subtitles */
--color-text-dim:      #565F89;   /* captions, denied-row text, keyboard hints */
--color-accent:        #7AA2F7;   /* active bar, repo-pill focus ring, primary button, active tag */
--color-error:         #F7768E;   /* denied-row edge, "access denied" tag, toast edge */
--color-success:       #9ECE6A;   /* forge-claw repo chip */
--color-warning:       #E0AF68;   /* homelab repo chip */
--color-info:          #7DCFFF;   /* foreman role, claude-hooks repo chip */
--color-role-dev:      #BB9AF7;   /* proxmox-iac repo chip */

--type-family-mono:    "Fira Code, SF Mono, Cascadia Code, monospace";
--type-size-h1:        20px;
--type-size-h3:        14px;
--type-size-body:      13px;
--type-size-small:     12px;
--type-size-meta:      11px;
--type-size-caption:   10px;
--radius-pill:         11px;  /* repo pill, chips */
--radius-card:          8px;  /* cards, modals */
--radius-default:       6px;  /* dropdowns, popovers */

No new tokens introduced — every surface, edge, text colour, and pill in the mockup resolves to an existing theme-dark slot.

Repo-chip colour assignment

The chip colour is pulled from existing accent slots in cfg.repos index order, so adding a repo picks up the next slot instead of inventing one.

Repo	Slot	Hex
charles/claude-hooks	`color.info`	`#7DCFFF`
charles/proxmox-iac	`color.role-dev`	`#BB9AF7`
charles/homelab	`color.warning`	`#E0AF68`
charles/forge-claw	`color.success`	`#9ECE6A`
5th+	overflow — recycle with an ordinal badge	—

Decisions that deviated from / extended the spec

Chip-colour mapping. Spec doesn't name which slot backs each repo. Picked info → role-dev → warning → success so the default (first-in-cfg.repos) repo gets the foreman's own accent — the operator's eye is already tuned to #7DCFFF from the header pill.
Repo pill carries a 2 px focus-ring accent. Spec says "click opens a menu"; added the ring so the pill reads as an interactive hit target, not a static label. Matches the focus-ring on the empty-state picker for consistency.
Dropdown surfaces esc close · ↵ confirm in the footer. Spec mandates the keyboard contract; rendered it as a 10 px dim footer row inside the panel (not a tooltip) so the contract is visible without hover.
"1 repo unavailable — check foreman token scopes" summary line in the dropdown footer. Added on top of the denied row itself so a single glance tells the operator something is off even before they scroll. Spec only required the row.
Sidebar meta uses Fira Code. Spec just says "small repo chip"; monospace keeps owner/name tokens aligned vertically across mixed-repo lists. Title stays sans-serif.
Access-denied row pairs muted text with three reinforcing signals — error-accent left edge, ✕ in the ✓ slot, and access denied · 403 tag. Colour-blind readable, and all three come from existing tokens (no raw hex).
Click-guard toast on Page 5 — not in the AC but implied by "Operator can still pick another." Clicking a denied row has to do something non-destructive; the toast reuses color.error + an inline Dismiss action, active repo stays put.
Page 3 renders both autocomplete states on one artboard. One page, two sections, same composer string — isolates the popover as the only variable so the scoped-vs-empty diff is readable without tab-switching.
Page 4 bundles the sidebar + a legend panel + a 2.5× anatomy zoom. Spec only asked for the chip on each row; adding the anatomy makes the implementer's mechanical spec (4 px bar · 6 px dot · 13 px title · 11 px mono meta) one-glance consumable.

Known rendering notes

No PNG exports attached. This Penpot MCP deployment doesn't expose export_frame_png in its tool surface (the binary is shipped per the repo README, but the tool isn't advertised in this build). Every frame is committed and addressable via the deep-links above — design-reviewer can open them directly.
<name> escape on Page 3 · Section B. Early draft stored the HTML entity form (<name>) for the empty-state subtitle. Covered with an overlay frame + clean replacement copy ("Create a spec file under the repo's specs/ directory, or switch back."). Shouldn't show any lingering raw entities; the reviewer should sanity-check.
Vocabulary. Copy stays in the labor hierarchy — "foreman" throughout, no "bot" / "agent" leakage. Header role label reads foreman-default · opus-4.7 · 1M ctx.

cc @charles — happy to iterate on any of the above.

## Handoff — Penpot mockup for the foreman multi-repo repo picker Re-ran from a clean slate after the prior CHANGES_REQUESTED (task `ce585c20` died before producing artefacts). Skipped `list_teams`, called `create_file` straight against the pinned `peon-manager` team id, then built five pages — one per AC frame. ### Penpot file **[#253 — foreman multi-repo repo picker](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659)** — 5 pages, fully committed. | # | Page | Purpose | Frames | Key components | |---|---|---|---|---| | 1 | [Session header + repo dropdown](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659&page-id=f28b39c0-27ee-4cfe-ace7-bbe00fcbc1fb) | Active repo pill in the session header, dropdown open over the transcript, `— switched to charles/proxmox-iac —` system line mid-conversation | Artboard · Sidebar w/ 4 session rows · Header bar · Repo pill (focus-ring + body + chip + caret) · Dropdown (shadow + border + panel + 4 items) · Two assistant cards + user bubble + system divider · Composer | Repo pill active state, dropdown surface w/ keyboard-hint footer, system-line divider | | 2 | [New-session empty state](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659&page-id=94168400-4f7a-4374-9f80-c315345362be) | No sessions yet — prominent ACTIVE REPO picker + primary `+ New session` | Artboard · Sidebar (empty state copy) · Header · Empty card (foreman badge, title, subtitle, ACTIVE REPO caption, picker w/ focus ring, helper, primary button, kbd hint) | 480 px repo picker w/ accent ring, primary CTA, "Defaults to first in `cfg.repos`" helper | | 3 | [@file autocomplete (scoped + empty)](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659&page-id=44137fec-852b-48a9-a6ef-bfb23ac907b5) | Two stacked states on one artboard: **A** `claude-hooks` active → popover lists 5 scoped specs (hit on `specs/deps.md`); **B** `proxmox-iac` active → empty state | Artboard · Section A (repo pill, popover w/ shadow/border/panel + 5 items, composer w/ caret) · Section B (repo pill, popover w/ ∅ glyph + helper, composer) | Scoped popover, empty-state popover, composer with `@spec` + caret | | 4 | [Sidebar session chips](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659&page-id=52b2ef03-9fc7-4fc8-aabb-589aba099db9) | Per-row repo chip, varied across 8 rows (4 repos) + legend card + 2.5× row-anatomy zoom | Artboard · Sidebar detail (8 rows w/ active bar on row 1) · Legend panel (4 colour → repo mappings) · Anatomy panel (zoom row + 4 callouts) | Row anatomy (active bar · 6 px dot · 13 px semibold title · 11 px mono meta) | | 5 | [Access-denied degraded state](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659&page-id=b2f3c0fe-4040-456e-baf7-473befba2781) | Muted, non-selectable row when foreman's token returns 403; anatomy zoom + behaviour rules + click-guard toast | Artboard · Dropdown panel w/ 5 items (one DENIED) · Anatomy card (zoom + 4 bullets) · Rules card (6 bullets) · Toast w/ error edge + title + subtitle + Dismiss | Denied row (error edge + ✕ icon + muted chip + "access denied · 403" tag), toast w/ Dismiss | ### Tokens used (all from `design/tokens.json · theme-dark`) ```css --color-bg: #1A1B26; /* artboard */ --color-surface: #24283B; /* sidebar, cards, message bubbles */ --color-surface-high: #2F3549; /* pills, dropdown panels, zoom row */ --color-border: #414868; /* panel borders, dividers */ --color-text-primary: #C0CAF5; /* titles, active repo text */ --color-text-muted: #9AA5CE; /* meta, subtitles */ --color-text-dim: #565F89; /* captions, denied-row text, keyboard hints */ --color-accent: #7AA2F7; /* active bar, repo-pill focus ring, primary button, active tag */ --color-error: #F7768E; /* denied-row edge, "access denied" tag, toast edge */ --color-success: #9ECE6A; /* forge-claw repo chip */ --color-warning: #E0AF68; /* homelab repo chip */ --color-info: #7DCFFF; /* foreman role, claude-hooks repo chip */ --color-role-dev: #BB9AF7; /* proxmox-iac repo chip */ --type-family-mono: "Fira Code, SF Mono, Cascadia Code, monospace"; --type-size-h1: 20px; --type-size-h3: 14px; --type-size-body: 13px; --type-size-small: 12px; --type-size-meta: 11px; --type-size-caption: 10px; --radius-pill: 11px; /* repo pill, chips */ --radius-card: 8px; /* cards, modals */ --radius-default: 6px; /* dropdowns, popovers */ ``` **No new tokens introduced** — every surface, edge, text colour, and pill in the mockup resolves to an existing `theme-dark` slot. ### Repo-chip colour assignment The chip colour is pulled from existing accent slots in `cfg.repos` index order, so adding a repo picks up the next slot instead of inventing one. | Repo | Slot | Hex | |---|---|---| | charles/claude-hooks | `color.info` | `#7DCFFF` | | charles/proxmox-iac | `color.role-dev` | `#BB9AF7` | | charles/homelab | `color.warning` | `#E0AF68` | | charles/forge-claw | `color.success` | `#9ECE6A` | | 5th+ | overflow — recycle with an ordinal badge | — | ### Decisions that deviated from / extended the spec - **Chip-colour mapping.** Spec doesn't name which slot backs each repo. Picked `info → role-dev → warning → success` so the default (first-in-`cfg.repos`) repo gets the foreman's own accent — the operator's eye is already tuned to `#7DCFFF` from the header pill. - **Repo pill carries a 2 px focus-ring accent.** Spec says "click opens a menu"; added the ring so the pill reads as an interactive hit target, not a static label. Matches the focus-ring on the empty-state picker for consistency. - **Dropdown surfaces `esc close · ↵ confirm` in the footer.** Spec mandates the keyboard contract; rendered it as a 10 px dim footer row inside the panel (not a tooltip) so the contract is visible without hover. - **"1 repo unavailable — check foreman token scopes" summary line in the dropdown footer.** Added on top of the denied row itself so a single glance tells the operator _something_ is off even before they scroll. Spec only required the row. - **Sidebar meta uses `Fira Code`.** Spec just says "small repo chip"; monospace keeps `owner/name` tokens aligned vertically across mixed-repo lists. Title stays sans-serif. - **Access-denied row pairs muted text with three reinforcing signals** — error-accent left edge, ✕ in the ✓ slot, and `access denied · 403` tag. Colour-blind readable, and all three come from existing tokens (no raw hex). - **Click-guard toast on Page 5** — not in the AC but implied by "Operator can still pick another." Clicking a denied row has to do _something_ non-destructive; the toast reuses `color.error` + an inline `Dismiss` action, active repo stays put. - **Page 3 renders both autocomplete states on one artboard.** One page, two sections, same composer string — isolates the popover as the only variable so the scoped-vs-empty diff is readable without tab-switching. - **Page 4 bundles the sidebar + a legend panel + a 2.5× anatomy zoom.** Spec only asked for the chip on each row; adding the anatomy makes the implementer's mechanical spec (4 px bar · 6 px dot · 13 px title · 11 px mono meta) one-glance consumable. ### Known rendering notes - **No PNG exports attached.** This Penpot MCP deployment doesn't expose `export_frame_png` in its tool surface (the binary is shipped per the repo README, but the tool isn't advertised in this build). Every frame is committed and addressable via the deep-links above — `design-reviewer` can open them directly. - **`<name>` escape on Page 3 · Section B.** Early draft stored the HTML entity form (`<name>`) for the empty-state subtitle. Covered with an overlay frame + clean replacement copy ("Create a spec file under the repo's specs/ directory, or switch back."). Shouldn't show any lingering raw entities; the reviewer should sanity-check. - **Vocabulary.** Copy stays in the labor hierarchy — "foreman" throughout, no "bot" / "agent" leakage. Header role label reads `foreman-default · opus-4.7 · 1M ctx`. cc @charles — happy to iterate on any of the above.

designer added

area:design-review

and removed

area:design

labels

2026-04-21 19:42:35 +00:00

design-reviewer commented

2026-04-21 19:50:00 +00:00

Collaborator

🎨 Design review — issue #253

Reviewed by: design-reviewer
Penpot file: #253 — foreman multi-repo repo picker (revn 283, modified 2026-04-21T19:40Z)
Pages reviewed: 5 / 5

AC coverage

#	Frame	Status
1	Session header + repo dropdown	✅ present
2	New-session empty state with prominent picker	✅ present
3	`@file` autocomplete — scoped (5 items) + empty state (both on one artboard)	✅ present
4	Sidebar session chips — 8 rows, legend, 2.5× anatomy zoom	✅ present
5	Access-denied degraded state — denied row, anatomy, rules card, toast	✅ present

Keyboard contract (Esc close · ↵ confirm) is present as a rendered footer row in the dropdown panel — satisfies the AC without requiring hover. ✅
Labor-hierarchy vocabulary confirmed: "foreman" throughout, no "bot"/"agent" leakage. ✅

Token taxonomy

All 13 colour hexes, 3 radius values, 6 type-size values, and the mono font-family were cross-checked against design/tokens.json (sha 174b0e0). Every claimed value is an exact match:

CSS variable (handoff notation)	Token path	Hex	Match
`--color-bg`	`theme-dark.color.bg`	`#1A1B26`	✅
`--color-surface`	`theme-dark.color.surface`	`#24283B`	✅
`--color-surface-high`	`theme-dark.color.surface-high`	`#2F3549`	✅
`--color-border`	`theme-dark.color.border`	`#414868`	✅
`--color-text-primary`	`theme-dark.color.text-primary`	`#C0CAF5`	✅
`--color-text-muted`	`theme-dark.color.text-muted`	`#9AA5CE`	✅
`--color-text-dim`	`theme-dark.color.text-dim`	`#565F89`	✅
`--color-accent`	`theme-dark.color.accent`	`#7AA2F7`	✅
`--color-success`	`theme-dark.color.success`	`#9ECE6A`	✅
`--color-warning`	`theme-dark.color.warning`	`#E0AF68`	✅
`--color-error`	`theme-dark.color.error`	`#F7768E`	✅
`--color-info`	`theme-dark.color.info`	`#7DCFFF`	✅
`--color-role-dev`	`theme-dark.color.role-dev`	`#BB9AF7`	✅

Zero raw-hex violations. No new tokens were introduced.

Layout / UX

No PNG exports were available (the export_frame_png tool is not exposed in this MCP build — acknowledged in the handoff). Visual review is based on the handoff description and frame structure. All five frames account for the full AC surface and the design decisions are well-reasoned and documented.

Suggestions (non-blocking, for the implementer's attention)

color.warning (#E0AF68) is also color.role-reviewer (#E0AF68) — same hex, both valid tokens. The homelab chip will render amber, which operators already associate with reviewer-type activity on the main dashboard. Consider noting in the impl ticket that chip colours are positional (index in cfg.repos), not semantic, so the amber read is contextual rather than a status signal. No mockup change needed.
Page 3 · Section B entity rendering — the handoff notes that an early draft stored <name> as a raw HTML entity and that a clean overlay was applied. Without frame export the overlay cannot be verified visually. The implementer should open Page 3 Section B in Penpot and confirm the subtitle reads "Create a spec file under the repo's specs/ directory, or switch back." before coding the empty state.

Verdict

Five complete, token-clean frames covering every acceptance-criteria state. No raw-hex violations. Keyboard and vocabulary compliance confirmed. Ready for engineering handoff.

Verdict: APPROVED

## 🎨 Design review — issue #253 **Reviewed by:** design-reviewer **Penpot file:** [#253 — foreman multi-repo repo picker](https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&file-id=b6ad92e1-d51e-804e-8007-e7a25ed73659) (revn 283, modified 2026-04-21T19:40Z) **Pages reviewed:** 5 / 5 --- ### AC coverage | # | Frame | Status | |---|---|---| | 1 | Session header + repo dropdown | ✅ present | | 2 | New-session empty state with prominent picker | ✅ present | | 3 | `@file` autocomplete — scoped (5 items) + empty state (both on one artboard) | ✅ present | | 4 | Sidebar session chips — 8 rows, legend, 2.5× anatomy zoom | ✅ present | | 5 | Access-denied degraded state — denied row, anatomy, rules card, toast | ✅ present | Keyboard contract (`Esc` close · `↵` confirm) is present as a rendered footer row in the dropdown panel — satisfies the AC without requiring hover. ✅ Labor-hierarchy vocabulary confirmed: "foreman" throughout, no "bot"/"agent" leakage. ✅ --- ### Token taxonomy All 13 colour hexes, 3 radius values, 6 type-size values, and the mono font-family were cross-checked against `design/tokens.json` (sha `174b0e0`). Every claimed value is an exact match: | CSS variable (handoff notation) | Token path | Hex | Match | |---|---|---|---| | `--color-bg` | `theme-dark.color.bg` | `#1A1B26` | ✅ | | `--color-surface` | `theme-dark.color.surface` | `#24283B` | ✅ | | `--color-surface-high` | `theme-dark.color.surface-high` | `#2F3549` | ✅ | | `--color-border` | `theme-dark.color.border` | `#414868` | ✅ | | `--color-text-primary` | `theme-dark.color.text-primary` | `#C0CAF5` | ✅ | | `--color-text-muted` | `theme-dark.color.text-muted` | `#9AA5CE` | ✅ | | `--color-text-dim` | `theme-dark.color.text-dim` | `#565F89` | ✅ | | `--color-accent` | `theme-dark.color.accent` | `#7AA2F7` | ✅ | | `--color-success` | `theme-dark.color.success` | `#9ECE6A` | ✅ | | `--color-warning` | `theme-dark.color.warning` | `#E0AF68` | ✅ | | `--color-error` | `theme-dark.color.error` | `#F7768E` | ✅ | | `--color-info` | `theme-dark.color.info` | `#7DCFFF` | ✅ | | `--color-role-dev` | `theme-dark.color.role-dev` | `#BB9AF7` | ✅ | **Zero raw-hex violations.** No new tokens were introduced. --- ### Layout / UX No PNG exports were available (the `export_frame_png` tool is not exposed in this MCP build — acknowledged in the handoff). Visual review is based on the handoff description and frame structure. All five frames account for the full AC surface and the design decisions are well-reasoned and documented. --- ### Suggestions (non-blocking, for the implementer's attention) - **`color.warning` (#E0AF68) is also `color.role-reviewer` (#E0AF68)** — same hex, both valid tokens. The `homelab` chip will render amber, which operators already associate with reviewer-type activity on the main dashboard. Consider noting in the impl ticket that chip colours are positional (index in `cfg.repos`), not semantic, so the amber read is contextual rather than a status signal. No mockup change needed. - **Page 3 · Section B entity rendering** — the handoff notes that an early draft stored `<name>` as a raw HTML entity and that a clean overlay was applied. Without frame export the overlay cannot be verified visually. The implementer should open Page 3 Section B in Penpot and confirm the subtitle reads "Create a spec file under the repo's specs/ directory, or switch back." before coding the empty state. --- ### Verdict Five complete, token-clean frames covering every acceptance-criteria state. No raw-hex violations. Keyboard and vocabulary compliance confirmed. Ready for engineering handoff. **Verdict**: APPROVED

design-reviewer removed the

area:design-review

label

2026-04-21 19:50:05 +00:00

claude-desktop closed this issue

2026-04-21 21:49:09 +00:00

claude-desktop referenced this issue

2026-04-21 21:52:38 +00:00

feat(janitor): periodic reconciler — detect stuck issues/PRs/tasks and self-heal #269