feat(examples-chat): palette v2 — status pill + shadcn panel#244
Merged
Conversation
Replaces the floating vertical column palette with a Next.js dev-tools-style status pill (top-right) that expands into a shadcn-refined panel with grouped sections (Mode / Model / Appearance / Action). - Pill collapsed state shows live model + mode; status dot pulses while streaming. - Panel uses a switch component for the debug toggle, segmented control for mode, and native <select> elements visually replaced with button triggers (preserved keyboard a11y via opacity:0 select overlay). - Close affordances: × button, Escape key, document-level click outside the palette. - Spacing/typography follow shadcn conventions: zinc palette, uppercase section labels, 140px min-width controls aligned in a column. Wires streaming via the existing agent.status() signal from demo-shell so the dot animates exactly while a run is in flight. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
14 tasks
blove
added a commit
that referenced
this pull request
May 11, 2026
… + switch (#251) * docs(specs): chat-debug shadcn polish design Align chat-debug chrome with the design language from palette v2 (PR #244, since deleted): persistent dark zinc-900 surface, status-pill launcher, sliding switch, custom select trigger, mount animation. Introduces --ngaf-chat-debug-* token namespace independent of chat tokens, so the devtools chrome is theme-stable regardless of host theme. Hosts can override any token. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(plans): chat-debug shadcn polish implementation plan 12 bite-sized tasks: define --ngaf-chat-debug-* tokens, build the new switch primitive, swap toggle, re-skin every chat-debug primitive + inspector + the launcher chrome to the dark zinc palette, with mount animation and click-outside dismiss. CHAT_DEBUG_TOKENS also rewires the chat library's color tokens for chat-debug's subtree so embedded checkpoint cards / state-diff / state-inspector inherit the dark surface without per-file re-skinning. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * feat(chat): chat-debug devtools token namespace * feat(chat): chat-debug-switch primitive (sliding shadcn switch) * feat(chat): swap chat-debug-toggle for chat-debug-switch in public surface * feat(chat): re-skin chat-debug-section to debug tokens * feat(chat): re-skin chat-debug-segmented to debug tokens * feat(chat): re-skin chat-debug-select with custom trigger + overlay native select * feat(chat): re-skin chat-debug-action to debug tokens * feat(chat): re-skin timeline inspector to debug tokens * feat(chat): re-skin state inspector to debug tokens * feat(chat): chat-debug shadcn chrome — pill launcher + dark panel + mount + click-outside * docs(website): regen api-docs for chat-debug switch primitive --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3 tasks
blove
added a commit
that referenced
this pull request
May 12, 2026
…rk (#271) Brings the canonical smoke checklist current with 29 PRs that landed between Phase 7 (#239) and today without checklist updates. Specifically: Updated sections: - chat-debug devtools — replaced bottom-drawer model with floating launcher + status pill + switch (PRs #249, #251) - Control palette — palette v2 (status pill, shadcn-styled panel, PR #244) - Generative UI / A2UI surfaces — single-bubble invariant (PR #255), parent-emits-envelopes architecture (PR #259), wrapped-content + tool_calls coexistence (PR #255), envelope reorder - Server-side wire format — tool_calls preserved on the final AI - Replaced 'Multi-thread' section with 'Sidenav (thread management)' reflecting the permanent semantic <nav> + Active/Archived sections (PR #253) and removing the old palette-toggled drawer model Added sections: - Cmd+K history search — palette open/search/select/close, archived result subtitle, keyboard navigation (PR #253) - Per-row thread actions — kebab menu order per state (active, pinned, archived), rename + pin/unpin + archive/unarchive + delete flows (PRs #258, #260, #267) - Thread titles — first-user-message derivation, idempotent writes, manual rename precedence (PR #242) - Progressive A2UI streaming — per-component fallback transition observable during streaming window (PRs #252, #261, #262, #268, #269) - Inline checkpoint markers — render between messages during multi-step runs (PR #243) - Responsive sidenav — viewport breakpoints, auto-collapse behavior (PR #240) Total: ~58 new check items across 6 new sections, plus rewrites to 5 existing sections. Original 333-line checklist → 391 lines / 237 check items.
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
1 participant
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.
Summary
Replaces the floating vertical column palette in the canonical chat demo with a Next.js dev-tools-style status pill (top-right corner) that expands into a shadcn-refined panel with grouped sections.