cmoriarty/braid
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages 1 Wiki Activity Actions

The coding-agent page opens with one status bar: run title, state and pipeline progress #74

New issue
Closed
opened 2026-09-27 02:59:17 -04:00 by cmoriarty · 1 comment
cmoriarty commented 2026-09-27 02:59:17 -04:00
Owner
Copy link

Why

  • The title doesn't read as a title. On the coding-agent page the run's name is set in amber (text-signal), the colour that means "needs you" everywhere else, so it looks like one more alert. It's also the same size and face as the buttons beside it.
  • State and progress are in the wrong place. They sit in a separate block at the top of the spine, about 250px away from the title. That block is five stacked lines: pipeline, pulsing dot, status, a thin bar, a repo caption, auto-approve and questions.

What

  • One top bar on the coding-agent page replaces the stage header's title row and the spine's run header (RunHeader in Spine.tsx).
    • Left: breadcrumb (repo / pipeline / run title #N) and a state chip.
    • Right: subagents, elapsed time, auto-approve and filled buttons with drawn icons (Details, Redo, Stop).
    • Second row: a phase stepper. Finished phases get a thin teal check with no circle. The current phase has a ring and a small progress bar with moving stripes while running, with no "1 of 4" in the bar. The current node's name sits at the right end.
  • Title colour: the title is set in bright ink, and amber is kept for "needs you".
  • Running chip: the dot becomes a 10px ball of the logo's three strands (the braid.ts geometry and colours), winding once every 3.2 seconds. When the run is waiting or failed, it's a still dot in amber or red.
  • Spine: it starts straight at its phases. Finished steps get the same thin check, and the current step gets a ringed dot. The current phase header shows "1 of 4" and the same progress bar.
  • Done is teal everywhere: finished steps and runs show in the running teal (--color-live) across the console (runs list, rail, status light, spine and bar), replacing the olive "succeeded" green. The mark's shape tells done from running: a check for done, a ringed dot, stripes or the braided ball for running.
  • Removed: the pulsing dot, the repo caption (it repeated the title) and the separate "N unanswered" line. The "Needs you" state of the chip covers that last one.
  • Unchanged: the coding-agent window keeps opencode's look and streaming exactly as today.
  • Reduced motion: the ball and the stripes are drawn but don't move.

Mock

Direction C ("Native") of the look studies: https://claude.ai/artifact/LLyBY8bVeFhLnqxVgmF3sg (private to the owner; shared on request).

Tried and dropped along the way: a braid strip on the stepper, a block per step, a braid round the whole chip's outline, and a glint across the chip's text.

Later

The wider Native look for the rest of the console (a proportional face for human text, filled buttons with drawn icons, panels separated by tone rather than outlines) is a separate issue, once those pages have their own mocks.

## Why - **The title doesn't read as a title.** On the coding-agent page the run's name is set in amber (`text-signal`), the colour that means "needs you" everywhere else, so it looks like one more alert. It's also the same size and face as the buttons beside it. - **State and progress are in the wrong place.** They sit in a separate block at the top of the spine, about 250px away from the title. That block is five stacked lines: pipeline, pulsing dot, status, a thin bar, a repo caption, auto-approve and questions. ## What - **One top bar on the coding-agent page** replaces the stage header's title row and the spine's run header (`RunHeader` in `Spine.tsx`). - **Left:** breadcrumb (repo / pipeline / **run title** #N) and a state chip. - **Right:** subagents, elapsed time, auto-approve and filled buttons with drawn icons (Details, Redo, Stop). - **Second row:** a phase stepper. Finished phases get a thin teal check with no circle. The current phase has a ring and a small progress bar with moving stripes while running, with no "1 of 4" in the bar. The current node's name sits at the right end. - **Title colour:** the title is set in bright ink, and amber is kept for "needs you". - **Running chip:** the dot becomes a 10px ball of the logo's three strands (the `braid.ts` geometry and colours), winding once every 3.2 seconds. When the run is waiting or failed, it's a still dot in amber or red. - **Spine:** it starts straight at its phases. Finished steps get the same thin check, and the current step gets a ringed dot. The current phase header shows "1 of 4" and the same progress bar. - **Done is teal everywhere:** finished steps and runs show in the running teal (`--color-live`) across the console (runs list, rail, status light, spine and bar), replacing the olive "succeeded" green. The mark's shape tells done from running: a check for done, a ringed dot, stripes or the braided ball for running. - **Removed:** the pulsing dot, the repo caption (it repeated the title) and the separate "N unanswered" line. The "Needs you" state of the chip covers that last one. - **Unchanged:** the coding-agent window keeps opencode's look and streaming exactly as today. - **Reduced motion:** the ball and the stripes are drawn but don't move. ## Mock Direction C ("Native") of the look studies: https://claude.ai/artifact/LLyBY8bVeFhLnqxVgmF3sg (private to the owner; shared on request). Tried and dropped along the way: a braid strip on the stepper, a block per step, a braid round the whole chip's outline, and a glint across the chip's text. ## Later The wider Native look for the rest of the console (a proportional face for human text, filled buttons with drawn icons, panels separated by tone rather than outlines) is a separate issue, once those pages have their own mocks.
cmoriarty commented 2026-09-27 10:10:12 -04:00
Author
Owner
Copy link

Shipped as the OpenSpec change run-status-bar, archived in #79 (specs: new run-bar; run-spine, stage-header and auto-approve updated). Live on production at 0ba5a45.

What changed on the run page

  • One bar across the page: repo / pipeline / #N title (IBM Plex Sans, bright ink, linked to its issue), a state chip, the elapsed time, auto-approve, and the open step's controls as filled buttons with drawn icons.
  • A phase stepper under it: a teal check on finished phases, a ring and a progress bar on the current one, nothing on phases not reached. A phase whose steps were all skipped is not checked, and a finished run has every phase checked.
  • The chip has a word for all seven run states. An open gate says "Needs you" even while the run's status is running. Running is a still dot.
  • The spine starts at its phases; the current phase band shows N of M and the same bar.
  • Done is teal wherever it means done, drawn as a check. Green stays for diff additions, strings, "fits", "Merged", "ready" and Approve.
  • Phones show back, title, chip and the step's controls; a long title truncates.
  • The coding-agent view is unchanged.

Pull requests: #75 (the bar), #76 (phone overflow, skipped phases), #77 (still dot, rail card height), #78 (finished runs), #79 (archive).

Tried and taken out along the way: a winding braid ball in the running chip (too small to read as moving).

Shipped as the OpenSpec change `run-status-bar`, archived in #79 (specs: new `run-bar`; `run-spine`, `stage-header` and `auto-approve` updated). Live on production at `0ba5a45`. **What changed on the run page** - One bar across the page: `repo / pipeline / #N title` (IBM Plex Sans, bright ink, linked to its issue), a state chip, the elapsed time, auto-approve, and the open step's controls as filled buttons with drawn icons. - A phase stepper under it: a teal check on finished phases, a ring and a progress bar on the current one, nothing on phases not reached. A phase whose steps were all skipped is not checked, and a finished run has every phase checked. - The chip has a word for all seven run states. An open gate says "Needs you" even while the run's status is running. Running is a still dot. - The spine starts at its phases; the current phase band shows `N of M` and the same bar. - Done is teal wherever it means done, drawn as a check. Green stays for diff additions, strings, "fits", "Merged", "ready" and Approve. - Phones show back, title, chip and the step's controls; a long title truncates. - The coding-agent view is unchanged. **Pull requests:** #75 (the bar), #76 (phone overflow, skipped phases), #77 (still dot, rail card height), #78 (finished runs), #79 (archive). Tried and taken out along the way: a winding braid ball in the running chip (too small to read as moving).
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
archive/prefect-kestra-experiments
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
cmoriarty/braid#74
No description provided.