Repository navigation
chore(design): app screens in the design system: sidebar, crew, chat, requests - #120
Merged
Merged
Conversation
… requests Adds Sidebar, CrewBots, BotRun, InboundRow and ApprovalCard to the claude.ai/design design system, so designs show Botloft's real screens. They read the app's store and API: BotloftProvider wires the app's own providers to the fake daemon, and scene.ts builds crews, bots, messages and chat items in the protocol's shape, with request inputs and summaries as the daemon makes them. Bot colors now come from AVATAR_PALETTE. Types are emitted for the whole package.
httpsphl
enabled auto-merge
October 2, 2026 18:10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What and why
The explainer video should show Botloft's real screens, not lookalikes. This adds them to the claude.ai/design design system:
Sidebar,CrewBots,BotRun(a bot's turn: replies, tool lines, requests),InboundRow(messages from you, another bot or Botloft) andApprovalCard(a website, a command, a suggested bot, a plan).BotloftProvider(.design-sync/pkg/provider.tsx): the app's ownDaemonProviderandHostProvideronFakeBotloftandFakeHost, seeded with the crews and bots a design passes. Allow and Deny reach the design throughonAnswer.makeCrew,makeBot,makeMessageandchat.*(.design-sync/pkg/scene.ts): protocol objects with the fake daemon's defaults. Request inputs and summaries follow the daemon (tool_summary,browser_sites.rs), so a site request names its site as the app shows it.AVATAR_PALETTEin previews and in the agent's guide.build.mjsemits types for the whole package (repo as root;.design-syncrenamed todsthere, since ts-morph skips dot folders).Nothing under
app/orcrates/changes.How it was tested
The converter's validation passes; all 24 previews render and were graded from screenshots, including a full window (sidebar plus Scout's chat with a site request; Allow moves Scout back to work). The claude.ai/design project was updated against its sync anchor: 9 components changed or added, nothing to delete.
No manual test with Claude Code needed: this does not touch the daemon or the app.
Checklist
cargo fmt,clippy -D warningsandcargo testpass (no Rust changes)pnpm checkpasses (no app changes)docs/spec.mdstill matches the code