Skip to content

feat: agent-pickable brainless UI blocks in web chat via render_ui tool - #94

Open
sandydasari wants to merge 1 commit into
mainfrom
worktree-brainless-agent-ui
Open

feat: agent-pickable brainless UI blocks in web chat via render_ui tool#94
sandydasari wants to merge 1 commit into
mainfrom
worktree-brainless-agent-ui

Conversation

@sandydasari

Copy link
Copy Markdown
Owner

Summary

Integrates the brainless shadcn registry so agents can dynamically pick rich UI blocks when answering in the web chat.

  • New always-on render_ui system tool — presentation-only; the web renders the call's input, so blocks draw progressively while arguments stream. Two components in v1: todo_list (plan/checklist with per-item status) and diff (before/after hunk for one file, computed client-side by the exported ToolBlock differ).
  • Vendored claude-todo-list, claude-diff, claude-thinking under apps/web/app/components/brainless/claude/, with the @brainless namespace registered in components.json for future adds.
  • Rethemed to paper/ink tokens — the upstream components ship hard-coded terminal hex colors (terracotta, Tokyo-night, #101010 background) that clash with the app theme and break in light mode. Structure, glyph grammar, and a11y semantics (sr-only labels, role="status", aria-live) are preserved; colors map to signal-green / plot-red / ink-* / paper-* so both themes work for free. The thinking line drops the fabricated token counter and "esc to interrupt" hint.
  • The chat's static "Thinking" placeholder is now the animated ClaudeThinking line.
  • Failed or unrecognized render_ui calls fall back to the generic ToolBlock; the TUI shows raw arguments.

Testing

  • New vitest coverage for the tool (packages/tools/test/render-ui.test.ts); full workspace type-check, lint, and tests pass (pre-commit hook ran all 30 tasks).
  • Verified visually end-to-end: seeded a session with both components into the test-slot DB, drove the dev server with Playwright, and inspected the rendered todo list + diff in the light theme with zero console errors.

🤖 Generated with Claude Code

Vendors claude-todo-list, claude-diff, and claude-thinking from the
brainless shadcn registry (namespace registered in components.json),
rethemed from hard-coded terminal hex colors to the paper/ink tokens so
they read as native in both light and dark themes. The thinking line
drops the fabricated token counter and the esc-to-interrupt hint —
neither is true in the web chat.

New always-on render_ui system tool: presentation-only, the web renders
the call's INPUT so blocks appear progressively while arguments stream.
todo_list renders a status checklist; diff renders a before/after hunk
computed client-side by the ToolBlock differ (now exported). Failed or
unrecognized calls fall back to the generic ToolBlock; the TUI shows
raw arguments.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying openacme-ai with  Cloudflare Pages  Cloudflare Pages

Latest commit: 1394e88
Status: ✅  Deploy successful!
Preview URL: https://a067b5f1.openacme-ai.pages.dev
Branch Preview URL: https://worktree-brainless-agent-ui.openacme-ai.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant