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 @@ + + +
+ + +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.
Light mode — #FFFFFF
+Dark mode — #141413
+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_STATUSES (7)| State | What it means (verified in code) | Today | Suggested |
|---|---|---|---|
| idle | Online, no active run — the resting/available state (DB default) | +idle | +idle ← gray “idle” (D1 updated) | +
| active | Dead code — never assigned to an agent; only a dashboard display alias for idle | +active | +collapse → idle (drop as a separate status) | +
| running | A heartbeat is executing right now (live) | +running | +running | +
| paused | Halted — manual / budget / system (PAUSE_REASONS) |
+ paused | +paused amber ✓ (D7 — gray would collide with the gray idle state) |
+
| error | The 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). | +error | +error red, blinking — re-added (D5 reversed) |
+
| pending_approval | Newly hired — awaiting hire approval | +pending 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. |
+
| terminated | Retired / 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).
ISSUE_STATUSES (7) + derived blocked sub-statesblue = 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.
| State | Today | Suggested | Suggested — dark |
|---|---|---|---|
| backlog | backlog | backlog | backlog |
| todo → amber | todo | todo | todo |
| in_progress → blue · live | in progress | in progress | in progress |
| in_review | in review | in review | in review |
| done | done | done | done |
| blocked | blocked | blocked | blocked |
| cancelled | cancelled | cancelled | cancelled |
| blocked — collapsed to 2 (In queue + blocked) per D6 | |||
| In queue blocked behind a live child | teal ring + dot | In queue | In queue |
| blocked plain blocked = task blocked | red ring | blocked | 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.
| Chip | You see it when… | Self-heals? |
|---|---|---|
| In queue | A 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. |
| blocked | Everything 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.
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.
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
+Dark mode
+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_STATUSES (5)| State | What it means (verified in code) | Today | Suggested — light | Suggested — dark |
|---|---|---|---|---|
| backlog | Parked / unscheduled — not yet picked up | +backlog | +backlog | +backlog | +
| planned → amber | Scheduled / committed but not started. Today it's an identical gray to backlog — indistinguishable. Amber gives it the “queued, ready” identity (mirrors task todo). |
+ planned | +planned | +planned | +
| in_progress → blue · live | Actively being worked — the project has live work. blue = liveness (today it's yellow). | +in progress | +in progress | +in progress | +
| completed | Project delivered / closed out (matches task done + goal achieved) |
+ completed | +completed | +completed | +
| cancelled | Abandoned, not to be resumed (gray + strikethrough, matches task cancelled) |
+ cancelled | +cancelled | +cancelled | +
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.
| Overlay | What it means | Suggested — light | Suggested — dark |
|---|---|---|---|
| paused | Project 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. |
+ paused | +paused | +
| archived | Not 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).
+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
+Dark mode
+Locked into the plan (✦ = updated this round):
+active collapses into one resting state, shown gray “idle” (reverted from green “online”).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).terminated is removed from the agents list (hidden like archived companies; lives elsewhere / DB), rather than shown gray.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.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.
+