fix(examples-chat): responsive shell side panels at <=1024px#240
Merged
Conversation
The demo shell pinned the threads panel (left, 240px) and timeline panel (right, 280px) as fixed-position columns with no breakpoints. At 1024px viewport both panels open the chat column shrank to ~480px; below 768px they overlapped the central chat surface and each other. Two breakpoints: - <=1024px: narrow the two panels to 200/240px so the chat keeps ~560px - <=768px: promote both panels to a centered floating sheet (gutter-aligned, rounded, shadowed) so they stack above the chat instead of crowding it Toggle behaviour is unchanged; only the geometry of the open state shifts. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
11 tasks
blove
added a commit
that referenced
this pull request
May 11, 2026
…ers (#243) * feat(chat): mount chat-timeline-slider inside chat-debug Demotes the slider from a primary nav surface to an advanced affordance inside the Debug overlay. The two UX patterns — inline gutter markers (new) + panel slider (legacy) — now ship side-by-side as a library-consumer reference. * refactor(examples-chat): remove Phase 6/7 fixed side panels Drops the timeline-panel and threads-panel side panels along with their palette toggles, persistence keys, and responsive overrides from PR #240. The replacement threads-drawer + inline checkpoint markers land in the next commit. The legacy timeline slider is still reachable via the Debug overlay. * feat(examples-chat): nav v2 — header + threads drawer + inline checkpoint markers Replaces the Phase 6/7 fixed side panels (removed in the previous commit) with a left-edge slide-out threads drawer toggled from a permanent hamburger top-left, plus inline checkpoint markers in each assistant turn's gutter. Drawer uses push mode at >=1024px (chat main reflows via padding-left) and overlay-with-scrim below. agent.messageCheckpoints() from the LangGraph adapter pairs each AIMessage id with its newest containing checkpoint; chat-message [checkpointId] picks up the right id and bubbles Rewind/Fork up to the existing onTimelineReplay / onTimelineFork handlers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(chat,examples-chat): forward replay/fork outputs through chat-popup + chat-sidebar Completes cross-mode wiring for the nav v2 redesign. Both wrapper compositions (chat-popup, chat-sidebar) now expose replayRequested + forkRequested outputs that forward from their internal <chat> instance, and the demo-shell's popup and sidebar mode routes bind those outputs to the same onTimelineReplay / onTimelineFork handlers /embed uses. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * fix(examples-chat): refresh threads list after run completes The backend writes metadata.title on the first user message via _maybe_write_thread_title (PR #242). Without this refresh, the drawer keeps showing 'Thread <id-slice>' for the active thread until the user manually switches threads. New effect listens for status transitioning out of 'running' and re-fetches the threads list so the title lands in the drawer as soon as the run ends. * chore: regenerate api-docs for nav v2 demo wiring * fix(examples-chat,chat): drawer + layout fixes from live smoke Three issues uncovered by live smoke against the dev server: 1. Drawer animation: the `[data-open] transform: translateX(0)` CSS rule unreliable across HMR + change detection — switch the chat-thread-drawer composition to a direct `[style.left.px]` binding (0 when open, -320 when closed) with `transition: left 200ms ease`. Drops the CSS attribute selector approach. 2. Redundant header: the demo-shell wrapped both the hamburger and the existing floating-fixed `<app-control-palette>` in a new top header strip, which double-anchored the palette and visually crowded the top. Drop the header; pin the hamburger as its own fixed top-left floating button so the palette keeps its original top-right floating-corner placement. 3. Hamburger sizing: scaled up the default size (32 → 36) to match the palette's visual weight and added a subtle drop shadow so it reads as a floating control like the palette. --------- Co-authored-by: Claude Sonnet 4.6 <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
Findings that drove this
From the smoke pass:
After this change the central column never drops below ~560px down to 1024, and at 768 and below the panels turn into a sheet that floats above the chat.
Test plan
nx build examples-chat-angulargreen🤖 Generated with Claude Code