4b8f8178ee
Second phase of the DESIGN.md migration. Rewrites the two color
dictionaries that back most status/priority/role indicators across the
app, and adds the controlled "chart palette" exception for agent role
colors per user decision in MIGRATION-PLAN section 9.
status-colors.ts (full rewrite, 109 -> 122 lines)
- All 5 dictionaries (statusBadge, statusDot, priorityColor,
issueStatusIcon, agentStatusDot) + 5 defaults rewritten to use
semantic token classes:
* done/completed/approved -> bg-success/15 text-success border-success/30
* error/failed/terminated/rejected -> bg-destructive/15 text-destructive border-destructive/30
* pending/paused/in_review -> bg-warning/15 text-warning border-warning/30
* running/in_progress -> bg-primary/15 text-primary border-primary/30
* idle/planned/backlog/todo -> bg-muted text-muted-foreground border-border
* blocked -> bg-destructive/10 text-destructive border-destructive/25 (softer)
* cancelled/archived -> bg-muted/40 text-muted-foreground/70 border-border
* priority urgent/high/medium/low -> destructive/warning/primary/muted
- Zero raw palette utilities remain (rg verified).
- All export identifiers and signatures preserved; 11 caller files
across ui/src compile unchanged.
- Note: timed_out was not explicitly mapped in the spec but exists
in the source; agent chose warning (semantically closer than error).
agent-role-colors.ts (full rewrite, 17 -> 68 lines)
- Controlled "chart palette" exception: 5 muted desaturated hues,
passed WCAG AA for all 10 combinations (dark + light), 7/10
also pass AAA.
- 11 AgentRole entries cycle through 5 slots via mod-5:
* slot 1 (volt #faff69 dark / olive #4f5100 light): general, pm
* slot 2 (teal #6ee7b7 / #0f766e): devops, cto
* slot 3 (lavender #c4b5fd / violet #6d28d9): designer, cmo
* slot 4 (amber #fcd34d / #b45309): ceo, cfo, researcher
* slot 5 (silver #a0a0a0 / gray #6b6b6b): engineer, qa
- Hue collisions past slot 5 are intentional and documented inline;
secondary differentiation relies on icons/labels.
index.css
- Added 5 --chart-role-* vars to :root and .dark (light + dark modes).
- Mirrored as --color-chart-role-N in @theme inline so
text-chart-role-1..5 become valid Tailwind utilities.
- Minimal surgical additions — nothing else touched.
Verification
- npx tsc --noEmit in ui/: zero errors in modified files. Pre-existing
errors in unrelated files (AgentConfigForm, command.tsx, etc.)
remain unchanged.
- rg '(bg|text|border|ring)-(red|blue|green|amber|yellow|cyan|violet|pink|slate|zinc|neutral|sky|teal|emerald|indigo|rose|orange)-\d'
on modified files: zero matches.
Test follow-up (out of scope, flagged for next PR)
- ui/src/lib/agent-role-colors.test.ts asserts each role has a
"dark:" prefix (no longer true — CSS vars handle dark variants)
and that all roles have unique colors (no longer true — 11 roles,
5 slots). Both assertions need rewriting.
Phase 3 follow-ups
- Sweep agent should verify no component layers raw palette
utilities on top of dictionary output.
- Consumers that previously wrapped statusBadge output in their own
border-* class may now double-border — worth a visual audit.
- agentStatusDot's animate-pulse modifier is gone except on
"running" — if any caller expected animation on "active",
inline handling needed.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| components.json | ||
| index.html | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.