Design: UX mockups for the /agents dashboard page (Penpot) #55

New issue

Closed

opened 2026-04-18 15:04:43 +00:00 by claude-desktop · 2 comments

claude-desktop commented 2026-04-18 15:04:43 +00:00

Collaborator

Copy link

User story

As a maintainer, I want visual mockups for the /agents page — list view, create/edit modal, delete-confirm, skill viewer + appendix editor, and empty/error states — produced in Penpot before the implementation ticket (A6) starts, so that the CRUD UI lands with a deliberate UX rather than being designed ad-hoc at implement-time.

Context

A6 (#53) scopes the functional requirements of the agents CRUD surface (endpoints, form fields, live state, cleanup-on-delete). This story covers the design layer upstream of it: layouts, component choices, interaction states, and copy. The operator (@charles) drives the Penpot session with the interactive Claude (claude-desktop) acting as UX designer via the Penpot MCP.

The existing dashboard lives in src/dashboard.html and has a minimal look. The mockups should extend that vocabulary — don't introduce a new design system, use what the dashboard already uses for colours, type scale, and spacing. If gaps exist (e.g. no modal or tag-input component today), propose the minimum-viable component extension and document it in the Penpot file.

Acceptance criteria

Penpot file

• New Penpot page in the existing koinos team's primary file (or a new file named claude-hooks — dashboard, one-off decision at the start of the session) titled /agents.
• Design frames produced at desktop width (min 1280 px) only. Mobile is out of scope — the admin surface is desktop-only.
• Page deep-link pasted as a reference in this issue before it's closed.

Screens / states

• List view — table of instances with columns: name, type, model (showing override with a badge when non-default), match_labels (chip list), queue depth, status (idle/busy/stopped pill). Sort + filter controls where they belong. Include a populated example (5–7 rows) plus an empty state ("No agents yet — create your first one").
• Create modal — form fields: type dropdown, name input (with live-validation state — valid / duplicate / invalid chars), model dropdown, match_labels tag-input, prompt appendix textarea (with char count), notes textarea. Show primary / secondary action affordance.
• Edit view — same form pre-filled. Visual distinction between create and edit flows (title, button label).
• Delete-confirm modal — show what will be cleaned up (container name, worktree count, session count), a match_labels preview so the operator sees what routing they're breaking, and a "Also wipe volume" checkbox with a clear destructive-action visual. Confirm button disabled until the operator types the instance name.
• Skill viewer + appendix editor — on the edit view, a section that lists skills (implement, review, address-review, rebase, merge, fix-ci, breakdown). Each skill is collapsible, read-only markdown render. Next to / below it: the per-agent prompt_appendix textarea with live character count. Visual distinction between the immutable base and the editable appendix.
• Live-state indicators — a component spec for the idle/busy/stopped pill and the queue-depth chip, showing each state variant.
• Error state — a container-down instance ("stopped" status). Include the visual for the row and any banner that surfaces the underlying error (e.g. "container exited 1 — see logs").

Interaction specs

• For each screen, annotate the happy-path flow: what clicking each action does, where focus moves, what the loading state looks like.
• Delete flow annotation must capture: mid-task cancel → 15 s wait → force remove, with a spinner / status message stage for each.
• match_labels tag-input: adding a label (suggestion from existing repo labels when available; free-form allowed), removing a label, empty state.

Design system hygiene

• Colour tokens, type scale, and spacing are pulled from the existing dashboard (inspect src/dashboard.html rendered in browser, lift the palette). Do not introduce a new accent colour without a note in the Penpot file explaining why.
• Any new component (modal, tag-input, collapsible section) is specified as a Penpot component so A6's implementer can reuse its spec directly.
• Export a minimal token list (colours + type) as a comment on this issue so the implementer can lift them into CSS without opening Penpot.

Handoff

• Before closing this issue, post a comment with: the Penpot page URL, a per-screen screenshot (or Penpot-exported PNG), and a short note on any decision that surprised the designer during the session (e.g. "went with a drawer instead of a modal for edit because the skill viewer wanted vertical space").

Out of scope

• Implementation (see A6 / #53).
• Redesign of other dashboard pages — only /agents is in scope here. Other pages may reuse the components introduced by this story; that's fine.
• Mobile layouts.
• Dark mode — if the existing dashboard supports it, match; if not, don't introduce it.
• Copy localisation.

References

• Tracking issue: #47.
• Dependent story: A6 — Dashboard agents CRUD (#53).
• Existing dashboard: src/dashboard.html.
• Penpot instance: design.jacquin.app (team koinos).
• Penpot MCP wired in the interactive Claude session — use it to create / modify the file directly.

Dependencies

• Blocked by: nothing — can run in parallel with A1–A5.
• Blocks: A6 (implementer uses the mockup as the reference).
• Branch off: N/A — Penpot-only, no code changes.

## User story As a **maintainer**, I want visual mockups for the `/agents` page — list view, create/edit modal, delete-confirm, skill viewer + appendix editor, and empty/error states — produced in Penpot before the implementation ticket (A6) starts, so that the CRUD UI lands with a deliberate UX rather than being designed ad-hoc at implement-time. ## Context `A6` (#53) scopes the **functional** requirements of the agents CRUD surface (endpoints, form fields, live state, cleanup-on-delete). This story covers the **design** layer upstream of it: layouts, component choices, interaction states, and copy. The operator (`@charles`) drives the Penpot session with the interactive Claude (`claude-desktop`) acting as UX designer via the Penpot MCP. The existing dashboard lives in `src/dashboard.html` and has a minimal look. The mockups should extend that vocabulary — don't introduce a new design system, use what the dashboard already uses for colours, type scale, and spacing. If gaps exist (e.g. no modal or tag-input component today), propose the minimum-viable component extension and document it in the Penpot file. ## Acceptance criteria ### Penpot file - [ ] New Penpot page in the existing `koinos` team's primary file (or a new file named `claude-hooks — dashboard`, one-off decision at the start of the session) titled `/agents`. - [ ] Design frames produced at desktop width (min 1280 px) only. Mobile is out of scope — the admin surface is desktop-only. - [ ] Page deep-link pasted as a reference in this issue before it's closed. ### Screens / states - [ ] **List view** — table of instances with columns: name, type, model (showing override with a badge when non-default), `match_labels` (chip list), queue depth, status (idle/busy/stopped pill). Sort + filter controls where they belong. Include a populated example (5–7 rows) plus an **empty state** ("No agents yet — create your first one"). - [ ] **Create modal** — form fields: type dropdown, name input (with live-validation state — valid / duplicate / invalid chars), model dropdown, `match_labels` tag-input, prompt appendix textarea (with char count), notes textarea. Show primary / secondary action affordance. - [ ] **Edit view** — same form pre-filled. Visual distinction between create and edit flows (title, button label). - [ ] **Delete-confirm modal** — show what will be cleaned up (container name, worktree count, session count), a `match_labels` preview so the operator sees what routing they're breaking, and a "Also wipe volume" checkbox with a clear destructive-action visual. Confirm button disabled until the operator types the instance name. - [ ] **Skill viewer + appendix editor** — on the edit view, a section that lists skills (`implement`, `review`, `address-review`, `rebase`, `merge`, `fix-ci`, `breakdown`). Each skill is collapsible, read-only markdown render. Next to / below it: the per-agent `prompt_appendix` textarea with live character count. Visual distinction between the immutable base and the editable appendix. - [ ] **Live-state indicators** — a component spec for the idle/busy/stopped pill and the queue-depth chip, showing each state variant. - [ ] **Error state** — a container-down instance ("stopped" status). Include the visual for the row and any banner that surfaces the underlying error (e.g. "container exited 1 — see logs"). ### Interaction specs - [ ] For each screen, annotate the happy-path flow: what clicking each action does, where focus moves, what the loading state looks like. - [ ] Delete flow annotation must capture: mid-task cancel → 15 s wait → force remove, with a spinner / status message stage for each. - [ ] `match_labels` tag-input: adding a label (suggestion from existing repo labels when available; free-form allowed), removing a label, empty state. ### Design system hygiene - [ ] Colour tokens, type scale, and spacing are pulled from the existing dashboard (inspect `src/dashboard.html` rendered in browser, lift the palette). Do not introduce a new accent colour without a note in the Penpot file explaining why. - [ ] Any new component (modal, tag-input, collapsible section) is specified as a Penpot component so A6's implementer can reuse its spec directly. - [ ] Export a minimal token list (colours + type) as a comment on this issue so the implementer can lift them into CSS without opening Penpot. ### Handoff - [ ] Before closing this issue, post a comment with: the Penpot page URL, a per-screen screenshot (or Penpot-exported PNG), and a short note on any decision that surprised the designer during the session (e.g. "went with a drawer instead of a modal for edit because the skill viewer wanted vertical space"). ## Out of scope - Implementation (see **A6** / #53). - Redesign of other dashboard pages — only `/agents` is in scope here. Other pages may reuse the components introduced by this story; that's fine. - Mobile layouts. - Dark mode — if the existing dashboard supports it, match; if not, don't introduce it. - Copy localisation. ## References - Tracking issue: #47. - Dependent story: **A6 — Dashboard agents CRUD** (#53). - Existing dashboard: `src/dashboard.html`. - Penpot instance: `design.jacquin.app` (team `koinos`). - Penpot MCP wired in the interactive Claude session — use it to create / modify the file directly. ## Dependencies - **Blocked by:** nothing — can run in parallel with A1–A5. - **Blocks:** A6 (implementer uses the mockup as the reference). - **Branch off:** N/A — Penpot-only, no code changes.

claude-desktop added the

area:dashboard

type:user-story

labels 2026-04-18 15:04:47 +00:00

claude-desktop added this to the Agent pool + customization milestone 2026-04-18 15:04:50 +00:00

claude-desktop commented 2026-04-18 17:09:55 +00:00

Author

Collaborator

Copy link

Handoff — UX mockups for /agents

Penpot file: claude-hooks — dashboard in team peon-manager.
File: https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=689d7fa4-f94b-81d4-8007-e39c5c82f66c

Pages

#	Page	Covers
01	Design tokens	Dark + light palettes, type scale, spacing, radius
02	Components	Buttons · Pills · Chips · Badges · Inputs · Dropdown · Textarea · Tag input · Checkbox
03	List — populated	6 rows: idle / busy (+ pulse) / stopped, model-override badge, chip labels, boss-no-labels case
04	List — empty	No agents yet state + primary CTA
05	Create modal	Type · Name · Model · Match labels (tag input) · Prompt appendix (with char count) · Cancel/Create
06	Edit + skill viewer	Form (left) + base skills collapsible list with 1 expanded + per-instance appendix editor (right)
07	Delete confirm	Cleanup preview (container, worktrees, sessions, routing, volume), destructive wipe checkbox, type-to-confirm input, 15s→force-remove progress strip
08	Error state	Banner (container exited) + stopped row + interaction spec

Design tokens — lift straight into CSS

Palette is Tokyo Night Storm (dark) / Tokyo Night Day (light). One accent, two semantic-status colors, one warning for overrides:

/* ── dark (primary theme) ──────────── */
--bg:            #1A1B26;  --surface:       #24283B;  --surface-high: #2F3549;
--border:        #414868;  --text-primary:  #C0CAF5;  --text-muted:   #9AA5CE;
--text-dim:      #565F89;  --accent:        #7AA2F7;  --success:      #9ECE6A;
--warning:       #E0AF68;  --error:         #F7768E;  --info:         #7DCFFF;
--role-dev:      #BB9AF7;  --role-boss:     #7AA2F7;  --role-reviewer:#E0AF68;

/* ── light (parity theme) ──────────── */
--bg:            #E9ECF2;  --surface:       #FFFFFF;  --surface-high: #D5D6DB;
--border:        #CBD0DC;  --text-primary:  #1A1B26;  --text-muted:   #6172B0;
--text-dim:      #9AA5CE;  --accent:        #2E7DE9;  --success:      #587539;
--warning:       #8C6C3E;  --error:         #F52A65;  --info:         #007197;

/* ── type ───────────────────────────── */
font-family: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
/* scale: 24 display · 20 h1 · 18 h2 · 16 body-lg · 13 body · 12 small · 11 meta(uppercase, ls 0.5) */
/* weights: 400 regular · 600 semibold */

/* ── spacing ────────────────────────── */
/* 4 · 8 · 12 · 16 · 24 · 32 */

/* ── radius ─────────────────────────── */
/* 4 (compact) · 6 (buttons/inputs) · 8 (cards) · 11 (pills) */

Pill / badge recipe (as rendered in the file)

.pill   { height: 22px; border-radius: 11px; padding: 0 12px; }
.pill--idle    { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.pill--busy    { background: color-mix(in srgb, var(--accent)  20%, transparent); color: var(--accent);  /* 6px pulse dot, keyframes opacity */ }
.pill--stopped { background: color-mix(in srgb, var(--error)   20%, transparent); color: var(--error);   }
.pill--queued  { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.pill-text     { font: 600 11px/1 'Fira Code', monospace; letter-spacing: 0.5px; text-transform: uppercase; }

.chip          { height: 18px; border-radius: 9px; padding: 0 10px; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.chip--selected { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent); }

.badge--override { height: 18px; border-radius: 9px; padding: 0 8px; background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); font: 600 9px/1 'Fira Code', monospace; letter-spacing: 0.5px; text-transform: uppercase; }

Interaction notes (from 06 and 07)

• List row click → navigates to /agents/:name (Edit view on page 06). Hover: row bg #2F3549 at 40% alpha.
• New agent button → opens the create modal (page 05). Focus lands on the first field (type dropdown). ESC = cancel.
• Delete flow (from page 07): cancel-running-task → spinner 0–15 s → force-remove container → drop SQLite row last. If partial failure, the row stays in the table in STOPPED state rather than vanishing.
• Busy pulse dot: 2 s ease-in-out opacity 1 → 0.3, matches the existing dashboard's live-indicator keyframes (src/dashboard.html line 92).
• match_labels tag-input: paste or comma-separated → split into chips; ✕ removes the chip immediately (no confirm); suggestions from the repo's existing label set when typing, free-form allowed.

Decisions that deviated from the issue spec

1. Palette is new — the existing dashboard uses GitHub-inspired dark (#0d1117/#58a6ff/#3fb950). Per operator direction we switched to Tokyo Night. The AC said "don't introduce a new accent colour without a note" — this is that note. Rationale: @charles' preference, and it gives us a light-theme sibling palette for free.
2. Light theme included — dashboard is dark-only today. Light palette shipped as a design-system deliverable so the tokens can be reused later. Recommendation: A6 ships /agents dark-only; a separate follow-up adds a theme toggle.
3. Base components are visual specs, not Penpot Components — left as drawn shapes on page 02 rather than promoted via create_component. Rationale: implementer lifts CSS from the specs anyway, and the MCP's component-conversion makes the file harder to navigate. If the next design session wants them promoted, a five-minute pass in the Penpot UI will do it.
4. Edit view = side-by-side — spec said "next to it / below it" for the appendix editor. We went side-by-side (form on left, skills + appendix on right). The appendix sits inside the skills card at the bottom, visually distinct via a warning-colored stroke (--warning) to signal "editable, per-instance" against the muted/read-only skills above.
5. auth-token pre-seeded cookie path in the MCP — our Penpot instance has login-with-password disabled (OIDC-only) and access tokens off, so the Penpot MCP needed a patched auth path (cookie injection + Authelia Basic proxy-auth). Not design-relevant, but worth flagging if a future session tries to reuse the MCP.

What's not covered here (stays out of scope per AC)

• Mobile layouts.
• Dark-mode toggle UI (palette exists, toggle does not).
• Copy localisation.
• Redesign of /tasks or /storage.

Ready for A6 (#53) to pick up.

## Handoff — UX mockups for `/agents` Penpot file: **claude-hooks — dashboard** in team `peon-manager`. File: https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=689d7fa4-f94b-81d4-8007-e39c5c82f66c ### Pages | # | Page | Covers | |---|------|--------| | 01 | `Design tokens` | Dark + light palettes, type scale, spacing, radius | | 02 | `Components` | Buttons · Pills · Chips · Badges · Inputs · Dropdown · Textarea · Tag input · Checkbox | | 03 | `List — populated` | 6 rows: idle / busy (+ pulse) / stopped, model-override badge, chip labels, boss-no-labels case | | 04 | `List — empty` | `No agents yet` state + primary CTA | | 05 | `Create modal` | Type · Name · Model · Match labels (tag input) · Prompt appendix (with char count) · Cancel/Create | | 06 | `Edit + skill viewer` | Form (left) + base skills collapsible list with 1 expanded + per-instance appendix editor (right) | | 07 | `Delete confirm` | Cleanup preview (container, worktrees, sessions, routing, volume), destructive wipe checkbox, type-to-confirm input, 15s→force-remove progress strip | | 08 | `Error state` | Banner (container exited) + stopped row + interaction spec | ### Design tokens — lift straight into CSS Palette is **Tokyo Night Storm** (dark) / **Tokyo Night Day** (light). One accent, two semantic-status colors, one warning for overrides: ```css /* ── dark (primary theme) ──────────── */ --bg: #1A1B26; --surface: #24283B; --surface-high: #2F3549; --border: #414868; --text-primary: #C0CAF5; --text-muted: #9AA5CE; --text-dim: #565F89; --accent: #7AA2F7; --success: #9ECE6A; --warning: #E0AF68; --error: #F7768E; --info: #7DCFFF; --role-dev: #BB9AF7; --role-boss: #7AA2F7; --role-reviewer:#E0AF68; /* ── light (parity theme) ──────────── */ --bg: #E9ECF2; --surface: #FFFFFF; --surface-high: #D5D6DB; --border: #CBD0DC; --text-primary: #1A1B26; --text-muted: #6172B0; --text-dim: #9AA5CE; --accent: #2E7DE9; --success: #587539; --warning: #8C6C3E; --error: #F52A65; --info: #007197; /* ── type ───────────────────────────── */ font-family: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace; /* scale: 24 display · 20 h1 · 18 h2 · 16 body-lg · 13 body · 12 small · 11 meta(uppercase, ls 0.5) */ /* weights: 400 regular · 600 semibold */ /* ── spacing ────────────────────────── */ /* 4 · 8 · 12 · 16 · 24 · 32 */ /* ── radius ─────────────────────────── */ /* 4 (compact) · 6 (buttons/inputs) · 8 (cards) · 11 (pills) */ ``` ### Pill / badge recipe (as rendered in the file) ```css .pill { height: 22px; border-radius: 11px; padding: 0 12px; } .pill--idle { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); } .pill--busy { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); /* 6px pulse dot, keyframes opacity */ } .pill--stopped { background: color-mix(in srgb, var(--error) 20%, transparent); color: var(--error); } .pill--queued { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); } .pill-text { font: 600 11px/1 'Fira Code', monospace; letter-spacing: 0.5px; text-transform: uppercase; } .chip { height: 18px; border-radius: 9px; padding: 0 10px; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; } .chip--selected { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); color: var(--accent); } .badge--override { height: 18px; border-radius: 9px; padding: 0 8px; background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); font: 600 9px/1 'Fira Code', monospace; letter-spacing: 0.5px; text-transform: uppercase; } ``` ### Interaction notes (from `06` and `07`) - **List row click** → navigates to `/agents/:name` (Edit view on page 06). Hover: row bg `#2F3549` at 40% alpha. - **New agent button** → opens the create modal (page 05). Focus lands on the first field (type dropdown). ESC = cancel. - **Delete flow** (from page 07): cancel-running-task → spinner 0–15 s → force-remove container → drop SQLite row last. If partial failure, the row stays in the table in `STOPPED` state rather than vanishing. - **Busy pulse dot**: 2 s ease-in-out opacity 1 → 0.3, matches the existing dashboard's live-indicator keyframes (`src/dashboard.html` line 92). - **`match_labels` tag-input**: paste or comma-separated → split into chips; ✕ removes the chip immediately (no confirm); suggestions from the repo's existing label set when typing, free-form allowed. ### Decisions that deviated from the issue spec 1. **Palette is new** — the existing dashboard uses GitHub-inspired dark (`#0d1117`/`#58a6ff`/`#3fb950`). Per operator direction we switched to Tokyo Night. The AC said "don't introduce a new accent colour without a note" — this *is* that note. Rationale: @charles' preference, and it gives us a light-theme sibling palette for free. 2. **Light theme included** — dashboard is dark-only today. Light palette shipped as a *design-system deliverable* so the tokens can be reused later. Recommendation: A6 ships `/agents` dark-only; a separate follow-up adds a theme toggle. 3. **Base components are visual specs, not Penpot Components** — left as drawn shapes on page 02 rather than promoted via `create_component`. Rationale: implementer lifts CSS from the specs anyway, and the MCP's component-conversion makes the file harder to navigate. If the next design session wants them promoted, a five-minute pass in the Penpot UI will do it. 4. **Edit view = side-by-side** — spec said "next to it / below it" for the appendix editor. We went side-by-side (form on left, skills + appendix on right). The appendix sits *inside* the skills card at the bottom, visually distinct via a warning-colored stroke (`--warning`) to signal "editable, per-instance" against the muted/read-only skills above. 5. **`auth-token` pre-seeded cookie path in the MCP** — our Penpot instance has `login-with-password` disabled (OIDC-only) and access tokens off, so the Penpot MCP needed a patched auth path (cookie injection + Authelia Basic proxy-auth). Not design-relevant, but worth flagging if a future session tries to reuse the MCP. ### What's *not* covered here (stays out of scope per AC) - Mobile layouts. - Dark-mode toggle UI (palette exists, toggle does not). - Copy localisation. - Redesign of `/tasks` or `/storage`. Ready for A6 (#53) to pick up.

claude-desktop referenced this issue 2026-04-18 17:17:41 +00:00

Add designer + design-reviewer agent types (UI/UX mockups) #56

claude-desktop referenced this issue 2026-04-18 17:42:10 +00:00

Patch Penpot MCP: add design-token write endpoints (create/update color + typography + dimension tokens, themes) #60

dev referenced this issue from a commit 2026-04-18 17:51:10 +00:00

feat(penpot-mcp): add design-token write endpoints and get_design_tokens RPC fallback

dev referenced this issue 2026-04-18 17:51:21 +00:00

feat(penpot-mcp): add design-token write endpoints and get_design_tokens RPC fallback #61

dev referenced this issue from a commit 2026-04-18 18:04:16 +00:00

feat(penpot-mcp): add design-token write endpoints and get_design_tokens RPC fallback

dev referenced this issue from a commit 2026-04-18 18:14:50 +00:00

feat(penpot-mcp): add design-token write endpoints and get_design_tokens RPC fallback

code-lead referenced this issue from a commit 2026-04-18 18:20:53 +00:00

feat(penpot-mcp): add design-token write endpoints and get_design_tokens RPC fallback (#61)

charles referenced this issue from a commit 2026-04-18 19:11:49 +00:00

feat(design): add Tokyo Night design tokens (DTCG)

claude-desktop referenced this issue 2026-04-18 19:51:53 +00:00

[smoke] Designer dispatch — hello sticker #62

designer referenced this issue 2026-04-18 21:51:10 +00:00

[smoke] Designer dispatch — hello sticker #62

charles referenced this issue from a commit 2026-04-18 22:42:52 +00:00

fix(penpot-mcp): force Accept: application/json on every RPC response

claude-desktop referenced this issue 2026-04-18 22:44:39 +00:00

Patch Penpot MCP: add canvas primitive tools (create_file / create_page / create_frame / create_text / export_frame_png) #69

claude-desktop referenced this issue 2026-04-18 23:03:02 +00:00

Design: rework the claude-hooks monitor (dashboard home screen) #70

designer referenced this issue 2026-04-18 23:05:10 +00:00

Design: rework the claude-hooks monitor (dashboard home screen) #70

charles referenced this issue from a commit 2026-04-18 23:15:23 +00:00

feat(penpot-mcp): canvas primitives — list_*, create_page, create_frame, create_text

claude-desktop referenced this issue 2026-04-18 23:15:45 +00:00

feat(penpot-mcp): canvas primitives — list_*, create_page, create_frame, create_text #71

charles referenced this issue from a commit 2026-04-18 23:25:16 +00:00

review: apply reviewer fixes on #71

code-lead referenced this issue from a commit 2026-04-19 00:12:16 +00:00

feat(penpot-mcp): canvas primitives — list_*, create_page, create_frame, create_text (#71)

designer referenced this issue 2026-04-19 08:21:18 +00:00

[smoke] Designer dispatch — hello sticker #62

designer referenced this issue 2026-04-19 18:04:03 +00:00

Design: rework the claude-hooks monitor (dashboard home screen) #70

designer referenced this issue 2026-04-19 18:30:15 +00:00

Design: rework the claude-hooks monitor (dashboard home screen) #70

designer referenced this issue 2026-04-19 23:47:09 +00:00

Design: rework the claude-hooks monitor (dashboard home screen) #70

claude-desktop referenced this issue 2026-04-20 14:24:09 +00:00

Tracking: agent pool + customization #47

claude-desktop commented 2026-04-20 14:24:15 +00:00

Author

Collaborator

Copy link

Closing as retroactively-obsolete. A6 (#53 / #116) shipped the agents CRUD ad-hoc during milestone 16 without this Penpot mockup upstream — the design decisions were made at implementation time and documented in the resulting code. Reintroducing the mockup now would be post-hoc documentation of what already ships.

If you want a Penpot record of the current dashboard surface (both for team handoff and to unblock future design iteration), that's a fresh area:design ticket scoped to "mockup the dashboard as it currently ships" — cleaner than trying to retcon this one.

Closes with milestone 16.

Closing as retroactively-obsolete. A6 (#53 / #116) shipped the agents CRUD ad-hoc during milestone 16 without this Penpot mockup upstream — the design decisions were made at implementation time and documented in the resulting code. Reintroducing the mockup now would be post-hoc documentation of what already ships. If you want a Penpot record of the current dashboard surface (both for team handoff and to unblock future design iteration), that's a fresh `area:design` ticket scoped to "mockup the dashboard as it currently ships" — cleaner than trying to retcon this one. Closes with milestone 16.

claude-desktop closed this issue 2026-04-20 14:24:20 +00:00

designer referenced this issue 2026-04-21 13:33:31 +00:00

design(agents): Penpot mockup — fleet-health panel on /agents #238

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Agent pool + customization

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#55

No description provided.