feat(chat): chat-debug devtools — floating launcher + extension API#249
Merged
Conversation
Repurpose <chat-debug> from a chat-bundled composition into a floating devtools launcher: built-in timeline + state inspector, plus slot API (chatDebugControls, chatDebugInspector) and blessed primitives for host apps to inject controls and tabs. Smoke app's bespoke ControlPalette migrates into chat-debug. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
13 bite-sized tasks covering persistence wrapper, slot directives, blessed primitives (section/segmented/select/toggle/action), built-in Timeline + State inspectors, full ChatDebugComponent rewrite, public-api wiring, and smoke app migration with end-to-end verification. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Removes the standalone ControlPalette component and projects all mode/model/effort/genUi/theme controls into ChatDebugComponent via the new chatDebugControls slot API. Deletes the .demo-shell__debug overlay CSS rule; debug panel open/close is now owned by ChatDebugComponent. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The combined restore-and-write effect tracked only inputs (storageKey, defaultOpen, dock) on its first run via the restore branch, then bailed out via the `restored` guard before reading the writable signals. Result: the effect never re-ran when open/dock/tab changed, so localStorage was never updated. Split into a synchronous restore in the constructor body (inputs are stable for the instance lifetime, so reading them once is correct) and a pure write-through effect that reads open()/dockState()/activeTabId(), which registers them as dependencies and writes on every change. Caught by end-to-end browser verification — pre-fix, no chat-debug:* keys appeared in localStorage after dock or tab interaction. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- chat-debug: simplify outdated constructor comment about the restore flow (no longer happens inside an effect). - palette-persistence: drop dead `debug` and `collapsed` keys — both moved to chat-debug's own persistence when the control palette was migrated. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace ASCII glyphs with proper inline SVG icons throughout: - Launcher uses the ICON_TOOL gear icon (was ⚙ character) - Dock toggle group: three mini panel-position icons (was ◧ ▭ ◨) - Close button: line × (was × character) - Select chevron (was native appearance arrow) - State Copy button gets a copy-icon + 1.5s "Copied" check-mark feedback Add visible weight and depth: - Launcher 40 → 44px with directional shadow + hover lift - Panel gets dock-direction-aware drop shadow - Header gets subtle vertical gradient + a green status dot - Dock toggles styled as a true segmented group (matches segmented primitive) - Controls zone takes a faint surface-alt tint to separate it from inspectors - Tab strip: hover state, taller padding, primary-colored underline on active - Section labels: 10px tracked uppercase, more breathing room Primitive refinements: - chat-debug-segmented: flex-grow so options share width, focus/hover transitions - chat-debug-select: custom chevron, focus ring via primary border, hover border - chat-debug-action: centered button, focus/active transitions - timeline-inspector: pill-shaped count badge, hover row actions with bg, diff card gets shadow + border, empty-state copy when no checkpoints Also fix palette-persistence spec to use `drawerOpen` after `debug`/`collapsed` were removed in the post-review cleanup commit. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…kov-a706d3 # Conflicts: # examples/chat/angular/src/app/shell/control-palette.component.css # examples/chat/angular/src/app/shell/control-palette.component.html # examples/chat/angular/src/app/shell/control-palette.component.ts # examples/chat/angular/src/app/shell/demo-shell.component.html
- chat-debug-inspector: drop the `chatDebugInspectorLabel` alias; consumers now bind `[label]="..."` directly, which is the project convention and passes @angular-eslint/no-input-rename. - website: regen api-docs.json to include the new chat-debug exports (ChatDebugComponent, ChatDebug*Directive, ChatDebug*Component primitives, DockPosition / SegmentedOption / SelectOption types). 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
Repurposes
<chat-debug>from a chat-bundled composition into a floating devtools launcher for anyAgentWithHistory. Drop one tag in your app, get a docked panel with built-in Timeline + State inspectors, plus a slot API for host-injected controls and inspector tabs. Smoke-app's bespokeControlPaletteis deleted and its controls projected into the new slot API.chatDebugControls(pinned top, single) +chatDebugInspector(repeatable tabs, withlabel)<chat-debug-section>/<chat-debug-segmented>/<chat-debug-select>/<chat-debug-toggle>/<chat-debug-action>ControlPalettedeleted (-296 LOC); mode/model/effort/Gen UI/theme/new-conversation now project throughchatDebugControls. The bottom-overlay.demo-shell__debugpanel that conflicted with embed-mode is gone.--ngaf-chat-*tokens — no new namespace introduced.Spec: docs/superpowers/specs/2026-05-11-chat-debug-devtools-design.md
Plan: docs/superpowers/plans/2026-05-11-chat-debug-devtools.md
Net delta across 27 files: −186 LOC (the old chat-bundled composition shed 523 lines on its own).
Test plan
npx nx test chat— 30+ chat-debug specs pass (persistence, primitives, timeline-inspector, ChatDebugComponent)npx nx build chat— library builds cleannpx nx build examples-chat-angular— example app builds cleannpx nx serve examples-chat-angular— verify in browser:<app-control-palette>widget; floating gear in bottom-rightOut of scope (deferred)
🤖 Generated with Claude Code