feat(examples-chat): nav v2 — threads drawer + inline checkpoint markers#243
Merged
Conversation
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.
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.
…oint 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>
…pup + 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>
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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
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
Final PR of the threads + checkpoints navigation v2 redesign. Replaces the Phase 6 timeline-panel and Phase 7 threads-panel side panels with:
<chat-thread-drawer>toggled by a permanent hamburger anchored top-left. Push mode at >=1024px (chat reflows), overlay+scrim below.<chat-checkpoint-marker>gutter dots anchored to each assistant message, exposing Rewind + Fork on hover/focus.<chat-timeline-slider>relocated to the Debug overlay so library consumers see both UX patterns side-by-side.Depends on PR #241 (lib primitives) and pairs with PR #242 (backend thread titles) — both merged.
What changed
Lib (
@ngaf/chat):chat-debugnow mounts<chat-timeline-slider>as an advanced section (replay/fork bubble through new chat-debug outputs).chatcomposition wires[checkpointId]per assistant message viaagent.messageCheckpoints(); bubbles replay/fork outputs.chat-popup+chat-sidebarforward replay/fork outputs from their internal<chat>.Demo shell (
examples/chat/angular):Timeline off/on+Threads off/onpalette toggles;.demo-shell__timeline-panel+.demo-shell__threads-panelCSS; PR fix(examples-chat): responsive shell side panels at <=1024px #240's responsive overrides on those panels.<chat-thread-drawer>mounting<chat-thread-list>, push-mode reflow on.demo-shell__main, viewport-width signal driving overlay/push.onTimelineReplay/onTimelineForkhandlers; threads list refresh after every run completion so backend-written titles show in the drawer without manual switch.Live smoke (Chrome MCP, http://localhost:4200/embed)
<chat-thread-list>with 50+ threads+ New threadcreates a fresh thread (verified id019e180c...etc.)<chat-checkpoint-marker>) renders next to assistant message with correctaria-label="Checkpoint <id>"Thread <id>to first-user-message slice after run completes (verified backend writes title + refresh-after-run effect picks it up)Test plan
nx build chat,examples-chat-angulargreennx lint chat,examples-chat-angulargreen🤖 Generated with Claude Code