[davidmckayv]

Bots answer with components by default, code looks like Claude Code, and answers are wider.

Components by default. Every Bot already had the component library: charts, tables, cards, checklists, forms, choices, and UI built on the fly. Nothing told a Bot when to use it. A new standing instruction (COMPONENT_GUIDANCE in shared/bot-prompt.ts) goes to built-in Bots and in the standing role sent to remote harness Bots, in chat and in background turns. When an answer has structure, it uses a component:

• numbers or a comparison: a chart or headline figures;
• steps or a plan: a checklist or table;
• one thing's details: a record card;
• a choice: a choice card.

It adds a sentence or two around the component, and keeps plain text for short replies. It names kinds of answer, never tools, because the tools vary per Bot. Live with the real model:

Question	Before	After
A plan	headed lists	checklist
One thing's details	bullets	record card
A comparison	chart	chart
A greeting	text	text

A Claude Agent SDK coding Bot does not see it: ag-ui-claude-sdk 0.1.5 builds the prompt from the last message and drops system messages, the standing role included. Run live in the app and asked for a plan, then for a code change, a coding Bot planned in prose, worked with its own Bash and Write, and drew no gallery component.

Code that looks like Claude Code.

• Syntax highlighting. Bot messages, tool results and group chat use Streamdown's official code plugin (@streamdown/code, Shiki) with OpenBot's light and dark themes. Shiki loads with the first code block, not with the conversation. In the build, Shiki's core is its own 79.4 kB chunk loaded on demand, not about 80 kB more in the chunk every chat route loads, and each grammar and theme is its own chunk too.

• Coding harness tool cards. Built from OpenBot's own components:

  • Bash: the command, output folded after six lines, and the exit code.
  • Edit, MultiEdit and Write: a red and green diff with +/- counts, using diff. An edit that replaced every occurrence says so.
  • Read, Grep and Glob, and plain ls, cat or grep commands: a run of them folds into one line, as Claude Code folds them ("Read 1 file, searched for 1 pattern and listed 1 directory"), which opens to each step. One on its own keeps its own line. A command folds only when shell-quote reads it as one pipeline of a read, search or list program and filters.
  • TodoWrite: the checklist.
  • TaskCreate and TaskUpdate: task steps.

  The shapes come from recorded runs of the Claude Agent SDK harness. The browser cannot tell which harness a Bot runs, so a call is drawn as Claude Code's only when it carries the arguments Claude Code sends; another harness's tool with the same name is drawn as any other tool.

• Bugs fixed, each with a regression test:

  • a failed command showed as successful after the turn ended, because the harness drops the failure flag;
  • a write or command that Claude Code's sandbox refused showed as done once the turn ended, because the harness's end-of-turn history drops the failure mark. The harness adapter now keeps it;
  • a command that printed JSON with "error": true showed "Didn't work". Only the exact shape the harness wraps a failure in counts now;
  • at phone width a folded run's label ran past the column and was cut off. A long tool line label now wraps.

Wider answers. The answer column is now 768px (max-w-3xl), the reading width ChatGPT and Claude.ai use, up from 672px. The input bar stays 672px, and both stay full width on phones. A Bot's components fill the answer column inside a conversation; previews elsewhere keep their reading width. Skins keep their own widths. A full-width mode for code and tables can come later.

Checked:

• Format, lint, typecheck, test typecheck and the build pass. Every app test file passes, and the harness tests pass.
• Each fix's regression test fails without the fix and passes with it.
• In headless Chrome on a private stack, with the real model and a real Claude Agent SDK harness built from this branch:
  • the answer column measures 768px, a component 736px, the composer 672px;
  • no sideways scroll at 1440px or phone width, in light and dark;
  • code is highlighted;
  • the coding cards, live and after a reload, from a replay of the recorded harness calls (a replace-all edit, a failed command and a refused edit among them) and from the real harness (a refused write among them);
  • the folded reads and searches, closed and open, from both.

[guidovizoso]

Nice work, the coding cards and the component guidance are both solid, and the tests draw from real harness recordings, which I like. A few things inline. The main one is the width: I'd go to 768px (max-w-3xl) instead of 896px for now, and we can add a full-width mode soon for people who want more room.

[guidovizoso]

Thanks, all seven are sorted, and the extra digging was worth it: the harness fix for refused writes, and catching that Shiki wasn't lazy. I checked the snapshot fix against ag-ui-claude-sdk 0.1.5. It builds each snapshot from the history the client sends plus the new turn, so a patched failure stays failed in later turns. The app tests and the harness tests pass locally too.

Approving. A few notes, none blocking:

• Worth its own issue: you found that ag-ui-claude-sdk only sends the last message as the prompt, so Claude SDK Bots never get the standing role message. That means they're missing PROVENANCE_GUIDANCE and UNTRUSTED_GUIDANCE too, not just the component guidance. The second one matters for prompt injection.
• Minor: while a Bash call's arguments stream in, a plain cat or ls shows as a full command card, then jumps into the reads-and-searches line once they arrive. It's brief, so fine to leave.
• Cosmetic: in the groupToolSteps comment in tool-activity.tsx, a sentence got appended to an existing line, so it runs past the wrap width.

We'll do the full-width mode as a follow-up.