diff --git a/design/PAP-75-agents-colors/.gitignore b/design/PAP-75-agents-colors/.gitignore new file mode 100644 index 00000000000..859f4a04008 --- /dev/null +++ b/design/PAP-75-agents-colors/.gitignore @@ -0,0 +1 @@ +.herenow/ diff --git a/design/PAP-75-agents-colors/index.html b/design/PAP-75-agents-colors/index.html new file mode 100644 index 00000000000..d619bd88a6c --- /dev/null +++ b/design/PAP-75-agents-colors/index.html @@ -0,0 +1,416 @@ + + + + + +PAP-75 — Agents + Project status colours (rev 17) + + + +
+
+

PAP-75 · Agents + Project status colours (rev 17)

+

Static mockup (not an app build). Indicator = brand heartbeat capsule (vertical 8×16); chips = brand .task-chip (1px border, light vs dark). All values from brand.css.

+

rev 17 — new: the All Projects page chip mapping (see “All Projects page — project chips” + the sample projects list below). The same approved brand chips are mapped onto all 5 PROJECT_STATUSES in light + dark.

+ Emerging principle: blue = liveness — actively running work is blue; queued/idle work is not. +
+ +
+ +
+

Light mode — #FFFFFF

+
Agents
+
+
Hermes
CEO
claude_local1midle▷⏸
+
Vega
Engineer
claude_local30srunning▷⏸
+
Atlas
Writer
codex4midle▷⏸
+
Nova
Researcher
claude_local1mrunning▷⏸
+
Lyra
Designer
cursor6midle▷⏸
+
Orion
QA
claude_local45srunning▷⏸
+
Sol
DevOps
claude_local8midle▷⏸
+
Juno
PM
claude_local2midle▷⏸
+
Iris
Security
claude_local1hpaused▷⏸
+
Kilo
Analyst
codex3herror▷⏸
+
+
+ + +
+

Dark mode — #141413

+
Agents
+
+
Hermes
CEO
claude_local1midle▷⏸
+
Vega
Engineer
claude_local30srunning▷⏸
+
Atlas
Writer
codex4midle▷⏸
+
Nova
Researcher
claude_local1mrunning▷⏸
+
Lyra
Designer
cursor6midle▷⏸
+
Orion
QA
claude_local45srunning▷⏸
+
Sol
DevOps
claude_local8midle▷⏸
+
Juno
PM
claude_local2midle▷⏸
+
Iris
Security
claude_local1hpaused▷⏸
+
Kilo
Analyst
codex3herror▷⏸
+
+
+
+ + +
+

All states — today vs. suggested

+

Every agent + task state Paperclip allows (packages/shared/src/constants.ts), with today’s production styling and the proposed change. Today = circular dot + borderless pill; Suggested = heartbeat capsule + bordered task-chip.

+ +

Agent states — AGENT_STATUSES (7)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StateWhat it means (verified in code)TodaySuggested
idleOnline, no active run — the resting/available state (DB default)idleidle ← gray “idle” (D1 updated)
activeDead code — never assigned to an agent; only a dashboard display alias for idleactivecollapse → idle (drop as a separate status)
runningA heartbeat is executing right now (live)runningrunning
pausedHalted — manual / budget / system (PAUSE_REASONS)pausedpaused
amber ✓ (D7 — gray would collide with the gray idle state)
errorThe agent itself is broken — e.g. not connected to a model and failing every task. Distinct from a task failing (you’d know it’s the agent, not the work).errorerror
red, blinking — re-added (D5 reversed)
pending_approvalNewly hired — awaiting hire approvalpending approval— removed from the agents list. Hiring approval happens in the task thread: the hiring-plan task pauses as a purple in review task → approve there. No separate agent state.
terminatedRetired / decommissioned (terminal)terminated— not shown in the agents list (hidden like archived companies; lives elsewhere / DB).
+

The agents list shows 4 states: idle · running · paused · error. active folds into idle; pending_approval and terminated are not listed (see above).

+ +

Task states — ISSUE_STATUSES (7) + derived blocked sub-states

+

blue = liveness: in_progress → blue, todo → amber. Suggested chips now carry the brand task-state icon (the 12px glyph from paperclip.ing/brand “Task states”). Derived blocked sub-states (from StatusIcon.tsx via blockerAttention.state) are shown as the status-icon ring — they are not separate ISSUE_STATUSES values and need no colour change.

+ + + + + + + + + + + + + + +
StateTodaySuggestedSuggested — dark
backlogbacklogbacklogbacklog
todo → ambertodotodotodo
in_progress → blue · livein progressin progressin progress
in_reviewin reviewin reviewin review
donedonedonedone
blockedblockedblockedblocked
cancelledcancelledcancelledcancelled
blocked — collapsed to 2 (In queue + blocked) per D6
In queue
blocked behind a live child
teal ring + dotIn queueIn queue
blocked
plain blocked = task blocked
red ringblockedblocked
+ +

Blocked → 2 states (your call: collapse to In queue + blocked)

+

All the “stalled / needs-attention / plain” nuances (verified in StatusIcon.tsx + server/.../issues.ts) fold into one red blocked. The only distinction kept is whether the block is self-healing.

+ + + + + + +
ChipYou see it when…Self-heals?
In queueA blocking sub-task/dependency is currently running (or human-assigned / awaiting approval) — the parent is only waiting on its own live child.Yes — unblocks when the child finishes. No action needed.
blockedEverything else that’s genuinely stuck — a blocker in review with no one on it, unassigned/parked/cancelled, an agent down, or a manual block.No — needs a human (decision / triage / unblock).
+

In queue is the one worth keeping distinct — it means not actually stuck (a child is moving it forward). Everything else is just blocked (red). The richer covered/stalled/needs-attention signal still exists under the hood (blockerAttention) and could power tooltips/filters later, but the chip is binary.

+ +
+

Your question: active vs idle (verified in code)

+

active and idle are not meaningfully different — they should be collapsed. The agents table defaults to idle and is never set to active; active exists only as a dashboard display alias (it counts idle agents as “active”). So the resting state is one thing — labelled “idle” (gray) — and “running” (blue) when a heartbeat is executing. That idle + running mix is what a healthy org shows above.

+
+
+ + +

Sample task list — all task states

+

A realistic task list covering every ISSUE_STATUS plus the two blocked states (In queue, blocked). Brand status icon on the left, brand chip on the right — consistent icon sizes + chip heights. (Spec for the D4 follow-up.)

+
+ +
+

Light mode

+
Tasks
+
+
PAP-41Refactor auth module
in progress
+
PAP-42Write API docs
todo
+
PAP-44Ship onboarding flow
In queue
+
PAP-47Fix payment crash
blocked
+
PAP-48Draft Q3 roadmap
in review
+
PAP-40Set up CI pipeline
done
+
PAP-43Design system audit
backlog
+
PAP-49Deprecate old API
cancelled
+
+
+ +
+

Dark mode

+
Tasks
+
+
PAP-41Refactor auth module
in progress
+
PAP-42Write API docs
todo
+
PAP-44Ship onboarding flow
In queue
+
PAP-47Fix payment crash
blocked
+
PAP-48Draft Q3 roadmap
in review
+
PAP-40Set up CI pipeline
done
+
PAP-43Design system audit
backlog
+
PAP-49Deprecate old API
cancelled
+
+
+
+ + +
+

All Projects page — project chips, today vs. suggested

+

Mapping the approved brand chip system (bordered .task-chip + 12px status glyph, light/dark) onto every project state Paperclip allows (PROJECT_STATUSES in packages/shared/src/constants.ts). Today the all-projects list renders the borderless StatusBadge pill (ui/src/components/StatusBadge.tsx → statusBadge map); suggested swaps it for the same bordered chip used by tasks and agents. blue = liveness carries over: in_progress → blue.

+ +

Project states — PROJECT_STATUSES (5)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StateWhat it means (verified in code)TodaySuggested — lightSuggested — dark
backlogParked / unscheduled — not yet picked upbacklogbacklogbacklog
planned → amberScheduled / committed but not started. Today it's an identical gray to backlog — indistinguishable. Amber gives it the “queued, ready” identity (mirrors task todo).plannedplannedplanned
in_progress → blue · liveActively being worked — the project has live work. blue = liveness (today it's yellow).in progressin progressin progress
completedProject delivered / closed out (matches task done + goal achieved)completedcompletedcompleted
cancelledAbandoned, not to be resumed (gray + strikethrough, matches task cancelled)cancelledcancelledcancelled
+ +

Derived overlays — not in PROJECT_STATUSES (handled separately)

+

A project also carries pauseReason/pausedAt and archivedAt (verified in packages/shared/src/types/project.ts). These are overlays on top of the base status, not values in the 5-state enum.

+ + + + + + + + + + + + + +
OverlayWhat it meansSuggested — lightSuggested — dark
pausedProject halted (manual / budget / system). Amber, consistent with a paused agent (D7). Shown as an overlay chip beside the base status, not a replacement enum value.pausedpaused
archivedNot shown in the all-projects list — the page already filters !p.archivedAt (ui/src/pages/Projects.tsx). Same treatment as terminated agents / archived companies. No chip needed.— hidden from the list (no chip change required) —
+

The all-projects list shows 5 chips: + backlog + planned + in progress + completed + cancelled + · the only colour changes from today are planned (gray → amber, to split it from backlog) and in_progress (yellow → blue, the liveness rule).

+
+ + +

Sample All Projects list — all project states

+

The all-projects page (ui/src/pages/Projects.tsx) with the proposed brand chips on the far right, every PROJECT_STATUS covered. Project tile icon on the left (unchanged), brand status chip on the right.

+
+ +
+

Light mode

+
Projects
+
+
Paperclip App
12 tasks
in progress
+
Paperclip Website
8 tasks
planned
+
companies.io
3 tasks
backlog
+
Onboarding revamp
20 tasks
completed
+
Discord bot
5 tasks · paused
paused
+
Legacy migration
2 tasks
cancelled
+
+
+ +
+

Dark mode

+
Projects
+
+
Paperclip App
12 tasks
in progress
+
Paperclip Website
8 tasks
planned
+
companies.io
3 tasks
backlog
+
Onboarding revamp
20 tasks
completed
+
Discord bot
5 tasks · paused
paused
+
Legacy migration
2 tasks
cancelled
+
+
+
+ + +
+

Decisions — resolved ✓

+

Locked into the plan (✦ = updated this round):

+

✦ D1 — active collapses into one resting state, shown gray “idle” (reverted from green “online”).

+

✦ D2 — pending_approval is removed as an agent state. Hiring approval happens in the task thread (the hiring-plan task pauses as a purple in review task → approve there).

+

✦ D3 — terminated is removed from the agents list (hidden like archived companies; lives elsewhere / DB), rather than shown gray.

+

✓ D4 — issue/task chip + status-icon restyle → follow-up issue (paperclip-website project, its own workspace). PAP-75 ships agents only.

+

✦ D5 — agent error capsule re-added (red, blinking). Scenario: the agent is broken (e.g. not connected to a model) and failing every task — distinct from a task failing.

+

✦ D6 — blocked task states collapse to 2: In queue (blue, self-heals) + blocked (red).

+

✓ D7 — paused agent = amber (gray would collide with the gray idle state).

+

✦ D8 — All Projects page chips adopt the same brand chip system. 5 PROJECT_STATUSES map to: backlog (gray) · planned (amber) · in_progress (blue, liveness) · completed (green) · cancelled (gray, strikethrough). Only two colour changes from today: planned gray→amber (split from backlog) and in_progress yellow→blue. paused overlay = amber; archived stays hidden from the list. Awaiting board approval.

+

All decisions confirmed by the board. Final agents list = 4 states: idle (gray) · running (blue, pulse 1.6s) · paused (amber) · error (red, blinking). active→idle; pending_approval & terminated not listed.

+

Follow-ups created for the task/issue status restyle: one on the Paperclip App (core app, everywhere statuses appear) and one on the Paperclip Website project. PAP-75 itself ships the agent changes.

+
+
+ +