Toolbar tighten: drop labels + New conversation, right-align fields, fix dropdown z-index#444
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
blove
added a commit
that referenced
this pull request
May 18, 2026
PR #444 dropped visible label text from the demo shell toolbar to tighten the layout, but the examples/chat e2e helpers used `.filter({ hasText: label })` to find the four toolbar fields (Model, Effort, Gen UI, Theme) — with labels gone, ~5 tests failed on every CI run since #444 merged. Add `data-field` attributes to the four `.demo-shell__field` wrappers and switch the e2e helpers + the one inlined locator in model-picker.spec.ts to query by attribute. Helper signatures unchanged (label arg now maps to data-field via a small lookup table) so call sites in control-palette, color-scheme, model-picker, etc. need no changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3 tasks
blove
added a commit
that referenced
this pull request
May 18, 2026
…iews (#446) * fix(chat): scope chat-tool-calls to its message via toolCallIds chat-tool-calls.toolCalls fell back to the agent's GLOBAL toolCalls list whenever the message had string content — which is the LangGraph adapter's default (extractTextContent always reduces complex content to a string). Every AI bubble in a thread re-rendered the entire thread's tool calls; with 3 AI messages and 4 tool calls, the chat showed 3 identical tool-call blocks. Fix: add `Message.toolCallIds?: string[]` populated by the LangGraph adapter from raw `tool_calls[].id`. chat-tool-calls prefers this per-message list when present; the legacy Anthropic-style content-block path stays as a fallback; the global-list fallback now fires ONLY when no message context is provided at all. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * style(c-generative-ui): replace Tailwind classes with scoped CSS The cockpit-chat-generative-ui-angular app doesn't have Tailwind configured — styles.css only imports theme tokens. All Tailwind classes (rounded-lg, border-white/10, bg-white/5, flex, gap-6, etc.) were silently no-ops, rendering stat cards as bare stacked text and charts/tables without their card chrome. Convert all 6 view components to scoped Angular styles (or styleUrls) using raw CSS: - stat-card: card chrome, uppercase tracked label, large value, colored delta (green for up, red for down via data-trend attr) - bar-chart + line-chart: card chrome, gradient fills, gridlines, consistent axis-label and title styling - line-chart: area-fill path under the line via SVG path d= - data-grid: card chrome, uppercase header row, zebra striping, tabular-nums, horizontal scroll for narrow widths - dashboard-grid: vertical flex stack, 16px gap - container: CSS grid with row direction = equal columns based on child count, collapses to 2-col then 1-col at responsive breakpoints Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * test(c-generative-ui): update view specs for new attribute-based styling * chore(docs): regenerate api docs * fix(e2e): toolbar field locators use stable data-field attributes PR #444 dropped visible label text from the demo shell toolbar to tighten the layout, but the examples/chat e2e helpers used `.filter({ hasText: label })` to find the four toolbar fields (Model, Effort, Gen UI, Theme) — with labels gone, ~5 tests failed on every CI run since #444 merged. Add `data-field` attributes to the four `.demo-shell__field` wrappers and switch the e2e helpers + the one inlined locator in model-picker.spec.ts to query by attribute. Helper signatures unchanged (label arg now maps to data-field via a small lookup table) so call sites in control-palette, color-scheme, model-picker, etc. need no changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
blove
added a commit
that referenced
this pull request
May 18, 2026
…n + tighten PR #444 (toolbar tighten) and the auto-open sidebar landed several e2e test fallouts that surfaced on CI: - model-picker queried .demo-shell__field via hasText filter; updated to use the data-field attribute introduced for the toolbar. - mode-routing 'landmarks' uses Escape to dismiss the auto-opened sidebar panel (close-button click was hanging against the overlapping debug-devtools panel in CI). - mode-routing 'cross-mode persistence' no longer clicks the launcher before asserting the conversation in /sidebar — panel is open. - debug-devtools 'sidebar surface remains reachable' updated to verify the auto-opened panel + its close button stay visible while chat-debug is open (was: click the now-hidden launcher). - demo-shell toolbar adds flex-wrap so small viewports (480px) don't overflow horizontally — the previous overflow-x:auto would clip the chat-select popover menus, so wrapping is preferred.
blove
added a commit
that referenced
this pull request
May 18, 2026
* feat(demo): A2UI label, sidebar auto-open, flex modes + e2e fallout fixes
User-facing:
- Gen UI dropdown label drops the 'v1-compatible' suffix → just 'A2UI'.
- Sidebar mode auto-opens the chat panel on entry (was: 'click the
launcher first'). Hint text updated for the new flow.
- All three modes (embed, popup, sidebar) switch from
`:host { height: 100% }` to `:host { display: block; flex: 1;
min-height: 0 }` so the chat surface sits below the toolbar via
flex column, not overlapping it.
E2E fallout from PR #444's toolbar tighten:
- test-helpers' toolbarSelect/selectToolbarOption now identifies fields
via `[data-field="<label>"]` (added to demo-shell.component.html);
the prior `filter({ hasText })` broke when the per-field labels were
removed.
- lifecycle 'new conversation clears local thread' test updated to use
the sidenav's 'New chat' (the toolbar 'New conversation' was removed
in #444). Asserts a fresh thread id is created server-side.
- debug-devtools 'sidebar launcher remains reachable' now closes the
auto-opened panel first so the launcher is the affordance under test.
- keyboard-accessibility 'Escape closes ... sidebar' no longer clicks
the launcher (hidden when panel is auto-open); asserts the panel is
already open, then Escape closes it.
- control-palette's Gen UI assertion follows the new 'A2UI' label.
* fix(e2e): adapt mode-routing/debug-devtools/model-picker for auto-open + tighten
PR #444 (toolbar tighten) and the auto-open sidebar landed several e2e
test fallouts that surfaced on CI:
- model-picker queried .demo-shell__field via hasText filter; updated
to use the data-field attribute introduced for the toolbar.
- mode-routing 'landmarks' uses Escape to dismiss the auto-opened
sidebar panel (close-button click was hanging against the overlapping
debug-devtools panel in CI).
- mode-routing 'cross-mode persistence' no longer clicks the launcher
before asserting the conversation in /sidebar — panel is open.
- debug-devtools 'sidebar surface remains reachable' updated to verify
the auto-opened panel + its close button stay visible while
chat-debug is open (was: click the now-hidden launcher).
- demo-shell toolbar adds flex-wrap so small viewports (480px) don't
overflow horizontally — the previous overflow-x:auto would clip the
chat-select popover menus, so wrapping is preferred.
blove
added a commit
that referenced
this pull request
May 19, 2026
…bar/popup (#455) * feat(chat): forward chatWelcomeSuggestions slot from chat-sidebar + chat-popup * feat(demo): full-width toolbar at top, push fixed chrome below it * chore(release): bump publishable libs to 0.0.41 * fix(demo): collapse chat-sidebar host in sidebar mode, constrain sidenav height Three fixes that together eliminate the /sidebar overflow + close-button occlusion the user reported after PR #444's full-width toolbar landed: 1. chat-sidebar's only visible chrome is position: fixed (panel + launcher). Set its host to display: contents in sidebar-mode so it drops from the layout flow and doesn't stack below .sidebar-mode__background. 2. The chat-sidebar default content slot (.chat-sidebar__content) has min-height: 100vh — meant for push-mode consumers' page content. The demo doesn't use that slot; display: none on it here, so it doesn't add a second 100vh row to the demo's main column. 3. chat-sidenav's host has height: 100% plus position: fixed and bottom: 0. With our top: var(--demo-toolbar-height) override, the explicit height kept the sidenav at full viewport (extending ~51px past the bottom). Clamp it to calc(100% - var(--demo-toolbar-height)).
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
Test plan
Demo-only changes; no library or version bump.
🤖 Generated with Claude Code