redesign

Tasks.paralla.org — Project-Centric Control-Plane Redesign

Owner: metis (design) → apollo (build). Stack: single-file Alpine.js + FastAPI, served at tasks.paralla.org.

1. Goals & Principles

• Project is the unit of attention. Every screen answers “what is happening on this project, who is on it, what’s next”.
• One primary view (Projects), one secondary view (Live Ops), one detail view (Project). No more.
• Agent identity is a colour, not a label. metis / apollo / mercury are visually distinct at every level.
• Edit-in-place. No modals for routine ops (add todo, reorder, reassign, mark done). Modals reserved for destructive / structural changes only.
• Real-time feel without noise. Status pulses for “now”, static chips for “next”, history stream for “done”.

2. Information Architecture

Top-level routes (replace existing tabs):

• #/ → Projects (default landing)
• #/live → Live Ops (per-agent activity + global action feed)
• #/projects/:slug → Project detail (drill-in: backlog editor, active task, recent activity)
• #/agents/:agent → Agent profile (filtered view: projects owned, current task, history)

No more “tasks” as a top-level page — tasks live under projects.

3. New / API Endpoints (additions only; existing preserved)

• GET /api/projects — list projects with summary fields (assignees, progress, active_task_id)
• GET /api/projects/:slug — project + ordered todos + active tasks + recent activity (composite)
• POST /api/projects — create project {slug, name, summary}
• PATCH /api/projects/:slug — rename / summary
• POST /api/projects/:slug/todos — append todo {text, owner, order?}
• PATCH /api/projects/:slug/todos/:todo_id — edit text / owner / status / order
• DELETE /api/projects/:slug/todos/:todo_id
• POST /api/projects/:slug/todos/reorder — body: [{id, order}] (bulk, atomic)
• PATCH /api/projects/:slug/assignees — body: {agents: [“metis”,“apollo”]} (set assignees)
• GET /api/activity?agent=&project=&limit= — already exists; ensure supports project filter
• GET /api/agents — agent registry (id, name, colour, role)
• GET /api/heartbeat — {ts, agents:{metis:{state,current_task},…}} for “now” pulses

All mutations return updated entity. Optimistic UI on client; reconcile on response.

4. Agent Colour System (single source of truth)

Used as background tints, chip fills, status dots, progress bar fill, activity row left-border.

• metis → indigo #6366F1 (architect / design — calm, strategic)
• apollo → emerald #10B981 (builder / implementation — active, green-light)
• mercury → amber #F59E0B (operator / infra — warm, alert)

Neutrals (dark mission-control base):

• bg-0 #0B0D10 app background
• bg-1 #111418 card / panel
• bg-2 #171B21 raised / hover
• line #22272E hairline borders, dividers
• text-1 #E6E8EB primary
• text-2 #9AA3AD secondary
• text-3 #5C6470 tertiary / meta
• accent #7DD3FC (cyan, used sparingly — focus rings, primary CTA, active link)

Status semantics (independent of agent colour):

• todo → text-3 dot
• doing → agent-colour dot + 1.6s pulse animation
• blocked → #EF4444 dot + left-border tint on card
• done → text-3 ring (○)

Semantic:

• success #10B981 warning #F59E0B danger #EF4444 info #7DD3FC

5. Typography

Single family: Inter (system fallback -apple-system, Segoe UI, sans-serif). Mono: JetBrains Mono for ids, paths, hex, counts.

Scale (rem):

• display 1.75 project name on detail header
• h1 1.25 page title
• h2 1.00 section header
• body 0.875 default
• sm 0.8125 dense rows
• xs 0.75 meta / timestamps
• mono 0.8125 ids & counters

Weight: 500 for headings, 400 body, 600 for numerics & agent names. Numerics tabular (font-variant-numeric: tabular-nums).

6. Spacing & Layout Grid

Base unit 4px. Tokens: s1=4 s2=8 s3=12 s4=16 s6=24 s8=32 s12=48. Card padding s4. Card radius 10px. Hairline border 1px line. Elevation: bg-1 flat; bg-2 only on hover/popovers; modals shadow 0 8px 24px rgba(0,0,0,.4).

Breakpoints: sm ≤640, md ≤1024, lg ≤1440, xl >1440. Desktop-first (this is a control room), but projects grid collapses to 1-col under md.

App shell: 56px top bar + 240px left rail (collapsible to 56px) + fluid main. Left rail items: Projects, Live Ops, Agents, divider, ”+ New Project”. Top bar: global search, env tag, user menu.

7. Component Styles

• Card — bg-1, 1px line, radius 10, padding s4. Hover: border → accent at 40% alpha, subtle bg-2 lift. Blocked cards get 2px left border in danger.
• Agent chip — pill, height 22, px s2, radius 11, fill = agent colour @ 18% alpha, text = agent colour @ 100%, 1px border = agent colour @ 35%. Leading 8px dot in solid agent colour. Used everywhere an agent is named.
• Assignee stack — overlapping chips (negative margin -6px), max 3 visible then “+N” overflow chip in bg-2. Used on project cards and headers.
• Progress bar — track bg-2 radius 4, height 6. Fill = gradient of assignee colours weighted evenly. Done segment is opaque, remaining is 30%. Inline label right-aligned: “7 / 12”.
• Status dot — 8px circle, agent colour if doing, otherwise semantic. Pulse keyframe on doing: scale 1→1.4→1, opacity 1→0.4→1, 1.6s.
• Todo row — 36px tall, drag handle (⠿) at 16px, status dot, owner chip (editable dropdown), text (editable on click), kebab (⋯) for delete/move-to-top. Active drag: shadow + 1px accent border. Done rows: text-2 colour, strikethrough, collapsed by default with checkbox to expand.
• Section header — h2 left, count badge right (mono, bg-2, radius 10). Sticky inside project detail scroll.
• Activity row — 28px, agent colour 2px left bar, mono timestamp (xs, text-3), actor chip, action verb, object (project or task link), 1-line clamp.
• Empty states — single muted illustration + one-line + one CTA. No “no data” walls.

8. Main Screen — Projects (#/)

ASCII layout (xl):

┌─────────────────────────────────────────────────────────────────────────────────────┐
│ tasks.paralla.org      [⌕ search projects…]                  prod · pvs            │  ← top bar 56
├──────────┬──────────────────────────────────────────────────────────────────────────┤
│ PROJECTS │ Projects (12)                                  [+ New]  [▢ Card | ☰ List] │
│          │ ┌─ Filter ───────────────────────────────────────────────────────────┐    │
│ LIVE OPS │  Agent: [all▾]  Status: [all▾]  Assignee: [me▾]  Sort: [recent▾]      │    │
│ AGENTS   │ └─────────────────────────────────────────────────────────────────────┘    │
│ ──────── │                                                                              │
│ + NEW    │  ┌────────────────────┐  ┌────────────────────┐  ┌────────────────────┐    │
│          │  │ ◐ tasks-ui-rewrite │  │ ● deploy-v3        │  │ ◑ billing-portal   │    │
│          │  │ Redesign control…  │  │ Cutover to v3…     │  │ Stripe handoff…    │    │
│          │  │ ●● apollo  ● metis │  │ ● mercury          │  │ ◌ unassigned       │    │
│          │  │ ▓▓▓▓▓░░░░░ 7 / 12  │  │ ▓▓▓▓▓▓▓░░ 8 / 10  │  │ ░░░░░░░░░ 0 / 6     │    │
│          │  │ NOW: design tokens │  │ NOW: dns cutover   │  │ NEXT: scope doc    │    │
│          │  └────────────────────┘  └────────────────────┘  └────────────────────┘    │
│          │  ┌────────────────────┐  ┌────────────────────┐                                  │
│          │  │ …more grid cards…  │  │                    │                                  │
│          │  └────────────────────┘  └────────────────────┘                                  │
└──────────┴──────────────────────────────────────────────────────────────────────────┘

Card anatomy (one card, annotated):

┌───────────────────────────────────────────┐
│ ●● apollo  ● metis       [⋯]  ← kebab     │ ← assignees (overlap) + kebab
│                                           │
│ tasks-ui-rewrite                          │ ← name (h2, 500)
│ Redesign control-plane UI to project-     │ ← summary (sm, text-2, 1-line clamp)
│ centric model…                            │
│                                           │
│ ▓▓▓▓▓▓▓░░░░░░░░░░░░  7 / 12  ● 2 doing   │ ← progress + "doing" count
│                                           │
│ NOW  design tokens           apollo ●     │ ← active task (1-line) + agent dot
│ NEXT scope api endpoints      metis  ●    │ ← next todo + agent
└───────────────────────────────────────────┘

Click card → /projects/:slug. Kebab: rename, archive, copy-link. Status prefix glyphs in card border-left: ● doing (agent colour), ◑ planned, ◌ blocked, ○ done.

List view toggle (☰) collapses cards to a dense table — same data, 36px rows, sortable columns.

9. Project Detail (#/projects/:slug)

Three stacked sections, no tabs:

┌─────────────────────────────────────────────────────────────────────────────────────┐
│ ← Projects                                                                           │  ← breadcrumb
│                                                                                     │
│ tasks-ui-rewrite                                  apollo ●  metis ●  mercury ◯     │  ← assignees editable
│ Redesign control-plane UI to project-centric model…                                 │  ← summary (editable on click)
│                                                                                     │
│ ▓▓▓▓▓▓▓░░░░░░░░░░░░  7 / 12 done    2 doing    3 next    0 blocked                  │  ← header progress strip
│                                                                                     │
│ ┌─ NOW ──────────────────────────────────────────────────────────────────────────┐  │
│ │ ● apollo   design tokens                       started 14m ago   [view task]   │  │
│ │ ● metis    api contract review                  started 02m ago   [view task]   │  │
│ └────────────────────────────────────────────────────────────────────────────────┘  │
│                                                                                     │
│ ┌─ BACKLOG (12) ─────────────────────────────────────────── [+ Add todo] ─────────┐  │
│ │ ⠿ ● apollo   design tokens                       done    ✓                       │  │
│ │ ⠿ ● metis    api contract review                 doing   ⋯                        │  │
│ │ ⠿ ● apollo   build progress component            todo    ⋯                        │  │
│ │ ⠿ ● mercury  configure staging env               todo    ⋯                        │  │
│ │ ⠿ ● apollo   write todos.json schema             todo    ⋯                        │  │
│ │ … drag to reorder · click text to edit · click owner to reassign · ✓ to done      │  │
│ └────────────────────────────────────────────────────────────────────────────────┘  │
│                                                                                     │
│ ┌─ ACTIVITY (last 30) ─────────────────────────────────────────────────────────────┐  │
│ │ 14:02  apollo ●  completed todo  "design colour palette"        tasks-ui-rewrite  │  │
│ │ 13:51  metis  ●  updated design doc                              tasks-ui-rewrite  │  │
│ │ 13:40  apollo ●  started todo    "design tokens"                tasks-ui-rewrite  │  │
│ └────────────────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────────────┘

Interactions:

• Add todo: inline row at bottom of backlog, auto-focus, enter to save, esc to cancel, default owner = first assignee.
• Reorder: HTML5 drag on handle (⠿) — drops persist via POST /todos/reorder (atomic).
• Edit text: contenteditable on click; blur saves; esc reverts.
• Reassign owner: click owner chip → popover with 3 agents + “unassigned”.
• Mark done: click status dot (cycles todo → doing → done); or click ✓ on row.
• Delete: kebab → delete (with 5s undo toast).
• Assignees in header: click to toggle agents in/out of project (PATCH /assignees).
• Blocked state: any todo flagged blocked tints the whole card border-left in danger.

10. Live Ops (#/live)

Three vertical lanes, one per agent, side-by-side; below them a unified activity feed spanning full width.

┌─────────────────────────────────────────────────────────────────────────────────────┐
│ Live Ops · updated 2s ago                                              ● ● ● ● ● ●  │  ← pulse row = agents active
├─────────────────────────────────────────────────────────────────────────────────────┤
│ ┌─ metis ● (architect) ────┐  ┌─ apollo ● (builder) ───┐  ┌─ mercury ◯ (operator) ┐ │
│ │ NOW  api contract review  │  │ NOW  design tokens     │  │ NOW  — idle 04m        │ │
│ │      tasks-ui-rewrite     │  │      tasks-ui-rewrite   │  │ LAST dns cutover v3    │ │
│ │ DOING 1  QUEUED 3         │  │ DOING 2  QUEUED 5       │  │ DOING 0  QUEUED 1      │ │
│ │ [view project ▸]          │  │ [view project ▸]        │  │ [view project ▸]       │ │
│ └───────────────────────────┘  └─────────────────────────┘  └────────────────────────┘  │
│                                                                                       │
│ ┌─ ACTIVITY FEED ───────────────────────────────────────────────────────────────[⛶]┐   │
│ │ 14:02  apollo ●  completed todo  "design colour palette"  tasks-ui-rewrite     │   │
│ │ 13:51  metis  ●  updated design doc                         tasks-ui-rewrite   │   │
│ │ 13:40  apollo ●  started todo    "design tokens"           tasks-ui-rewrite    │   │
│ │ … live · auto-scroll · pause on hover · filter by agent/project                  │   │
│ └──────────────────────────────────────────────────────────────────────────────────┘   │
└───────────────────────────────────────────────────────────────────────────────────────┘

• Each lane shows: agent name, role subtitle, NOW (1 line, link to project + task), DOING/QUEUED counts, “view project” link.
• Pulse dots in title row: solid for active in last 60s, hollow otherwise.
• Feed: SSE/poll every 3s; pause-scroll on hover; row click → jump to project/task.
• Filter chips above feed: agent (multi), project, action verb.

11. Micro-states & Motion

• Pulse (doing): 1.6s ease-in-out, scale 1→1.4, opacity 1→0.4.
• Card hover: 120ms ease-out, border colour, translateY -1px.
• Drag: lifted card shadow 0 12px 28px rgba(0,0,0,.5), 1.02 scale.
• Route transitions: 160ms cross-fade main pane only.
• Toasts: bottom-right, slide-up 200ms, auto-dismiss 4s, undo on destructive.
• Focus ring: 2px accent at 2px offset, always visible (a11y + keyboard nav).

12. Accessibility & Density

• Keyboard: j/k move in backlog, e edit, space toggle done, dd delete, 1/2/3 assign owner. g p go projects, g l go live, g a go agents. ? help.
• All colours meet WCAG AA against bg-1; agent chip text uses 100% agent colour on 18% tint = ≥ 4.5:1 verified.
• Honour prefers-reduced-motion: disable pulse + transitions, keep state readable.
• Density toggle: comfortable (default) / compact (-20% row height). Persisted.

13. Out of Scope (explicit)

• Auth / multi-user (single-user pvs; keep current model).
• Mobile <640px (warn banner “best viewed ≥1024px”, do not optimise).
• Charts / historical analytics (future).
• Notifications / webpush.

14. Implementation Order (handoff to apollo)

See todos.json — build bottom-up: design tokens → shell → projects grid → project detail + inline todo editor → live ops → polish (motion, a11y, density, keyboard).

15. Risks / Notes

• Existing tasks endpoint stays; new endpoints are additive. No migration needed; client composes.
• todos.json per project remains source of truth on disk; backend reads/writes it. New endpoints wrap that file (no schema change).
• Realtime: poll /api/heartbeat (3s) + /api/activity?limit=30 (5s). SSE optional later.
• Keep single-file Alpine.js constraint; extract CSS tokens into one :root { --… } block at top of file so apollo can keep it one file.

16. Quick Usage — pvs cheat sheet

Keyboard shortcuts

Key(s)	Action
?	Toggle help overlay
j / k	Navigate backlog rows down / up
e	Edit selected todo text (in-place)
Space	Cycle done: todo → doing → done → todo
dd	Delete selected todo (5s undo toast)
1 / 2 / 3	Assign owner to apollo / metis / mercury
g p	Go to Projects
g l	Go to Live Ops
g a	Go to Agents

Add a project

• Click ”+ New Project” in the left rail (below “Agents”).
• A dialog appears: enter slug, name, summary → save. Project lands on the Projects grid with zero todos and no assignees.

Add a todo (inside a project)

• Open any project detail page (#/projects/:slug).
• Click ”[+ Add todo]” at the top-right of the Backlog section. An inline row appears, auto-focused, default owner = first assignee. Type → Enter saves, Esc cancels.

Reassign a todo (change owner)

• In the backlog, click the owner chip on any todo row → popover with apollo / metis / mercury + “unassigned”. Click the agent to reassign. Saves on blur/enter; Esc reverts.
• Keyboard shortcut 1 / 2 / 3 from a selected row also reassigns (apollo/metis/mercury).

Reassign a project (change assignees)

• On the project detail header, click any agent chip → agent is toggled in/out of the project. Changes persist via PATCH /api/projects/:slug/assignees.