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

Polish coding agent view #6

New issue
Closed
opened 2026-09-13 15:38:18 -04:00 by cmoriarty · 1 comment
cmoriarty commented 2026-09-13 15:38:18 -04:00
Owner
Copy link

The coding agent view is still not quite reflective of the goal to look and feel like opencode.

  1. Currently there is a jarring effect where raw text is written, and then it snaps into rendered markdown. Text changes size and is unpleasant to watch.
  2. Thinking blocks should be hidden by default, with a visual indicator showing active thinking, and perhaps a checkbox to show thinking. Currently you can click on collapse thinking blocks and open them, which is great, but collapsing them requires you to click the first line of the thinking block. It would be better if you could click anywhere on the thinking block to collapse it.
  3. Generally the code text flow onto screen isn't smooth, I think opencode projects characters onto screen rather than blocks of words at once.
  4. The font should be changed to be the same as opencode.
  5. The background of the coding agent view should be black, same as opencode.
  6. User messages should have a blue line on the left, and a slightly lighter shade of background color for the message box, as opencode does.

I have attached a few screenshots from opencode to help out.

image
image

The coding agent view is still not quite reflective of the goal to look and feel like opencode. 1. Currently there is a jarring effect where raw text is written, and then it snaps into rendered markdown. Text changes size and is unpleasant to watch. 2. Thinking blocks should be hidden by default, with a visual indicator showing active thinking, and perhaps a checkbox to show thinking. Currently you can click on collapse thinking blocks and open them, which is great, but collapsing them requires you to click the first line of the thinking block. It would be better if you could click anywhere on the thinking block to collapse it. 3. Generally the code text flow onto screen isn't smooth, I think opencode projects characters onto screen rather than blocks of words at once. 4. The font should be changed to be the same as opencode. 5. The background of the coding agent view should be black, same as opencode. 6. User messages should have a blue line on the left, and a slightly lighter shade of background color for the message box, as opencode does. I have attached a few screenshots from opencode to help out. ![image](/attachments/30d9d965-ec50-4155-b4f2-4ff1b1f31189) ![image](/attachments/8a38177d-a0b7-4b87-a5c0-4565a74b6269)
image.png
499 KiB
image.png
403 KiB
cmoriarty commented 2026-09-13 18:45:54 -04:00
Author
Owner
Copy link

Shipped in 4c6592c (the implementation) and c3b10d0 (the OpenSpec archive). This went through the OpenSpec change polish-agent-view, now archived; its requirements live in openspec/specs/agent-transcript/spec.md.

Point by point

  1. No more snap from raw text into rendered markdown. Streaming text goes through the same markdown renderer as finished text. Unfinished markup (**bold, a code span, a heading or link still being typed) is closed provisionally, and the agent view uses one text size throughout. When a message finishes arriving nothing moves, and an answer you watched arrive is no longer cut back to "show more".
  2. Thinking is hidden by default. A thought in progress shows only an animated Thinking spinner; a finished one is a single + Thought: 4s row.
    • A new show thinking checkbox in the step header shows thinking as it arrives and opens finished thoughts. It is remembered per browser and replaces "render markdown live".
    • An open thought now closes on a click anywhere in it. Selecting text inside it does not close it.
  3. Characters, not blocks of words. There were two causes: the server only released text on its 4-times-a-second status tick, and the page drew each delivery at once.
    • The server now sends text about 30 times a second, one update per message part.
    • The page reveals arriving text a few characters per frame, at the pace it arrives. The reveal carries on after scrolling away and back and when a message finishes, and it respects your system's reduced-motion setting.
  4. Font. Your screenshots are opencode running in Ghostty with no font configured, which means Ghostty's default, JetBrains Mono. It is now bundled with the UI (no font CDN) and used for all of the console's monospace text.
  5. Black background. The agent view (transcript and message box) uses opencode's default opencode theme, read from the installed opencode 1.18.30:
    • a #0a0a0a background and neutral greys;
    • its markdown colours: purple headings, orange bold, green code, cyan paths, yellow emphasis.
  6. User messages have a #5c9cf5 bar on the left and a #141414 box. Braid's brief for a step gets the same box and keeps its label, so it is not mistaken for something you typed.

Verified

  • 1464 backend tests and 306 vitest tests.
  • 8 Playwright specs (ui/e2e/agent-view.spec.ts) that sample every animation frame against a scripted stream. They check that no frame adds more than 24 characters, no markdown marker is ever visible, text stays put when a message finishes, thinking visibility and click-to-close, and the font, sizes and colours.
  • A live run of qwen3.8-27b in the browser: about 30 text updates a second (median 34 ms apart). The answer grew a median of 3 characters per frame (max 8), no markdown marker ever showed, and the thinking spinner showed while the reasoning text stayed hidden.

Not changed: six older e2e specs (layout-stability, flicker-measure, spine-alignment) fail the same way before and after this change. They look for missing test hooks (data-step-id, data-activity) or page text that no longer exists, or need a run with a fan-out step. Worth a separate issue.

Shipped in 4c6592c (the implementation) and c3b10d0 (the OpenSpec archive). This went through the OpenSpec change `polish-agent-view`, now archived; its requirements live in `openspec/specs/agent-transcript/spec.md`. **Point by point** 1. **No more snap from raw text into rendered markdown.** Streaming text goes through the same markdown renderer as finished text. Unfinished markup (`**bold`, a code span, a heading or link still being typed) is closed provisionally, and the agent view uses one text size throughout. When a message finishes arriving nothing moves, and an answer you watched arrive is no longer cut back to "show more". 2. **Thinking is hidden by default.** A thought in progress shows only an animated `Thinking` spinner; a finished one is a single `+ Thought: 4s` row. - A new **show thinking** checkbox in the step header shows thinking as it arrives and opens finished thoughts. It is remembered per browser and replaces "render markdown live". - An open thought now closes on a click anywhere in it. Selecting text inside it does not close it. 3. **Characters, not blocks of words.** There were two causes: the server only released text on its 4-times-a-second status tick, and the page drew each delivery at once. - The server now sends text about 30 times a second, one update per message part. - The page reveals arriving text a few characters per frame, at the pace it arrives. The reveal carries on after scrolling away and back and when a message finishes, and it respects your system's reduced-motion setting. 4. **Font.** Your screenshots are opencode running in Ghostty with no font configured, which means Ghostty's default, **JetBrains Mono**. It is now bundled with the UI (no font CDN) and used for all of the console's monospace text. 5. **Black background.** The agent view (transcript and message box) uses opencode's default `opencode` theme, read from the installed opencode 1.18.30: - a `#0a0a0a` background and neutral greys; - its markdown colours: purple headings, orange bold, green code, cyan paths, yellow emphasis. 6. **User messages** have a `#5c9cf5` bar on the left and a `#141414` box. Braid's brief for a step gets the same box and keeps its label, so it is not mistaken for something you typed. **Verified** - 1464 backend tests and 306 vitest tests. - 8 Playwright specs (`ui/e2e/agent-view.spec.ts`) that sample every animation frame against a scripted stream. They check that no frame adds more than 24 characters, no markdown marker is ever visible, text stays put when a message finishes, thinking visibility and click-to-close, and the font, sizes and colours. - A live run of qwen3.8-27b in the browser: about 30 text updates a second (median 34 ms apart). The answer grew a median of 3 characters per frame (max 8), no markdown marker ever showed, and the thinking spinner showed while the reasoning text stayed hidden. **Not changed:** six older e2e specs (`layout-stability`, `flicker-measure`, `spine-alignment`) fail the same way before and after this change. They look for missing test hooks (`data-step-id`, `data-activity`) or page text that no longer exists, or need a run with a fan-out step. Worth a separate issue.
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#6
No description provided.