feat(examples-chat): round-trip agent knobs through URL query params#527
Merged
Conversation
Adds hydrateFromQuery() private method on DemoShell, wired via a NavigationEnd-driven effect. Six knobs (model, effort, genui, theme, color, project) are read from query params and set on their signals when present. Ephemeral semantics: URL hydration does NOT write to localStorage. A recipient of a shared link gets the URL-specified state but their own persisted preferences remain untouched. Explicit user actions (via onModelChange etc.) continue to persist.
Adds buildQueryParams() + writeKnobsToUrl() private methods. Each of the six knob handlers (onModelChange, onEffortChange, onGenUiModeChange, onThemeChange, onColorSchemeChange, onProjectSelected) now calls writeKnobsToUrl() after persisting. Default values are mapped to null in buildQueryParams() so the Angular router drops them from the URL with queryParamsHandling: 'merge'. replaceUrl: true so dropdown clicks don't pollute the browser history.
Two navigations were dropping knob query params silently: - onModeChange (e.g. clicking 'Popup' in the segmented control) - the signal→URL effect that pushes agent-allocated thread ids Both now use queryParamsHandling: 'preserve' so the URL's full state (thread + knobs) survives mode hops and thread switches.
Four scenarios: 1. Deep-link /embed/<thread-id> loads the thread without resending. 2. /embed?model=gpt-5-nano sets the model picker via URL hydration. 3. Mode switch preserves both /embed/<id> path and ?model= query. 4. Ephemeral hydration: /embed?theme=material-dark does NOT write theme to localStorage (URL hydrates signal but not storage).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Author
Chrome MCP verification (local, against
|
Mode switch with a non-default knob now preserves the param in the URL (via queryParamsHandling: 'preserve' added by the knob round-trip work). The pre-existing assertion `expect(page).toHaveURL(/\/popup$/)` expected the bare path. Updated to match the new behavior: `/popup?...model=gpt-5-nano`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
Round-trips the demo's six agent knobs (model, effort, genui, theme, color, project) through the URL with ephemeral hydration semantics, on top of the URL-as-truth thread-id work already on main.
URL shape:
Default values are omitted; non-default values appear; the URL is the share surface.
Builds on PR #500 + PR #504 + PR #518 — preserves UrlMatcher, getThread() validator, and URL-as-truth threadId semantics.
Files changed
examples/chat/angular/src/app/shell/demo-shell.component.ts— 3 new private methods (hydrateFromQuery, writeKnobsToUrl, buildQueryParams) + 6 knob handlers wired to writeKnobsToUrl + onModeChange/signal→URL effect both preserve query params.examples/chat/angular/src/app/shell/demo-shell.component.spec.ts— 7 new unit tests.examples/chat/angular/e2e/url-routing.spec.ts— NEW Playwright spec: 4 deep-link assertions.Test plan
examples-chat-angularnx serve+ shared-dev LangGraph) — see comment belowexamples/chat — e2e (N/4)shards greenSpec:
docs/superpowers/specs/2026-05-21-demo-url-knobs-design.mdPlan:
docs/superpowers/plans/2026-05-21-demo-url-knobs.mdSupersedes the now-closed PR #494, focused down to just the still-needed bits.
🤖 Generated with Claude Code