McRitchie Studio
Say Hi 👋
Agents Builders
← All Tasks
Sizing

Redesign stage timeline cards

Archived
timeline-card-redesign

Created

Jun 25, 20:46

Started

Jun 25, 22:15

Completed

Jun 25, 22:58

DevOps handoff

Type

Feature

Shape

ui-only

Worktree Slug

timeline-card-redesign

Repositories

mcritchie-studio

Release Train

—

Branch

feat/timeline-card-redesign

Pull Request

https://github.com/amcritchie/mcritchie-studio/pull/207

Local URL

http://localhost:3022/tasks/timeline-cards-demo

QA URL

—

Production URL

—

ui timeline

Acceptance Criteria

  • Stage cards render in a side-by-side grid
  • Each card shows model token cost columns
  • Cards display started date flipping to completed
  • Two-avatar crew stacks render in wider card
  • Missing usage values render as dash not blank

Expected Test Plan

  • [component] rendered _consolidated_timeline partial assertions

Checks Run

  • [component] test/views/consolidated_timeline_test.rb — grid, metric block, started/completed, em-dash (2 tests green)
  • [component] tasks_controller_test stage-timeline render + Steffon/Avi backfill (2 tests green)
  • [full-suite@02580fe7367804beb6ad25d196af907c9ecf5348] bin/rails test green
  • [rubocop@02580fe7367804beb6ad25d196af907c9ecf5348] bin/rubocop clean

Agent Context

Epic: Task Intelligence (4 tasks). THIS = #1 of 4, UI-only, parallel-safe (isolated from backend tasks). Redesign app/views/tasks/_consolidated_timeline.html.erb from stacked rows into taller side-by-side grid cards. Column structure per card: stage-transition (Created→Designed) | avatar(s) | name(+weight tag) | model | token | cost | duration | started→completed timestamp. Cards must be wide enough for the two-avatar crew case (Carl HEAVY + Shannon LIGHT). started=previous transition occurred_at, completed=this transition occurred_at; in-progress stage shows live 'Started …' ticker. Data already exists in TimelineBlock (stage_agents_helper.rb#stage_timeline). Render missing model/tokens/cost as '—'. Sibling tasks: usage-capture-hardening, avi-task-sizing, task-intelligence-dashboard.

Stage Timeline

Who handled each stage, the time it took (measured), and the model / tokens / cost reported (best-effort) — plus who's on it right now. — means the agent didn't report that metric.

Sizing Avi · PO — Dev — Actual XL
  1. Created → Designed
    R Rhydon
    Rhydon
    Model
    —
    Duration
    —
    Tokens
    —
    Cost
    —
    Completed Jun 25, 20:46 · 1 day ago
    api
  2. Designed → Building
    R Rhydon
    Rhydon
    Model
    claude-opus-4-8
    Duration
    4 minutes
    Tokens
    —
    Cost
    —
    Started Jun 25, 20:46
    Completed Jun 25, 20:50 · 1 day ago
    cli
  3. Building → Submitted
    R Rhydon
    Rhydon
    Model
    claude-opus-4-8
    Duration
    40 minutes
    Tokens
    27,905,383
    Cost
    ~$24.80
    Started Jun 25, 20:50
    Completed Jun 25, 21:30 · 1 day ago
    cli
  4. Submitted → Blocked
    —
    Model
    —
    Duration
    36 minutes
    Tokens
    —
    Cost
    —
    Started Jun 25, 21:30
    Completed Jun 25, 22:06 · 1 day ago
    api
  5. Blocked → Building
    R Rhydon
    Rhydon
    Model
    claude-opus-4-8
    Duration
    9 minutes
    Tokens
    12,453,759
    Cost
    ~$8.21
    Started Jun 25, 22:06
    Completed Jun 25, 22:15 · 1 day ago
    cli
  6. Building → Submitted
    R Rhydon
    Rhydon
    Model
    claude-opus-4-8
    Duration
    4 minutes
    Tokens
    6,119,965
    Cost
    ~$3.72
    Started Jun 25, 22:15
    Completed Jun 25, 22:19 · 1 day ago
    cli
  7. Submitted → Reviewed
    J Jasper
    Jasper primary
    C Carl
    Carl light
    Model
    claude-opus-4-8
    Duration
    22 minutes
    Tokens
    —
    Cost
    —
    Started Jun 25, 22:19
    Completed Jun 25, 22:41 · 1 day ago
    cli
  8. Reviewed → Assembled
    S Steffon
    Steffon
    Model
    —
    Duration
    2 minutes
    Tokens
    —
    Cost
    —
    Started Jun 25, 22:41
    Completed Jun 25, 22:43 · 1 day ago
  9. Assembled → Shipped
    A Avi
    Avi
    Model
    —
    Duration
    15 minutes
    Tokens
    —
    Cost
    —
    Started Jun 25, 22:43
    Completed Jun 25, 22:58 · 1 day ago
  10. Shipped → Archived
    —
    Model
    —
    Duration
    about 3 hours
    Tokens
    —
    Cost
    —
    Started Jun 25, 22:58
    Completed Jun 26, 01:51 · 1 day ago

Conversation

QA review feedback, agent handoffs, and follow-up notes for this task.

QA Feedback 1 day ago

BLOCK (shannon heavy; carl light APPROVE'd structure+acceptance). Light-mode contrast defect on the EVERYDAY in-progress state: the data-test=timeline-live Duration ticker renders bare text-green-200 on white --color-surface (light is the no-JS default) -> effectively invisible; the redesign dropped the old bounded green pill. The top data-test=timeline-inprogress pill text is also low-contrast in light mode (saved only by its bg+border). FIX (same pass) in app/views/tasks/_consolidated_timeline.html.erb: give the live Duration span a bounded theme-aware treatment, e.g. bg-green-500/15 border border-green-400/50 px-1.5 py-0.5 rounded text-green-700 dark:text-green-200; apply text-green-700 dark:text-green-200 to the in-progress pill text; verify the live card on /tasks/intent-demo in LIGHT mode. Everything else (responsive grid, Model/Tokens/Cost/Duration dl, Started->Completed, two-member crew clusters, em-dash for missing, Nokogiri-safe tests, green CI) is solid + undraft-ready once contrast is fixed.

Handoff 1 day ago

Rework addressed (Shannon heavy block): light-mode contrast on the live in-progress state. The data-test=timeline-live Duration ticker is now a bounded theme-aware pill (bg-green-500/15 border border-green-400/50 text-green-700 dark:text-green-200) and the in-progress pill text uses text-green-700 dark:text-green-200 — visible on the white light-mode surface. Added a component regression guard. Full-suite + rubocop green at 02580fe73678. PR #207 updated; ready for re-review.

Sealed-bid sizing

Edit →

Alex (PM)

—

Avi (PO)

—

Dev

—

Actual

XL