feat(ag-ui): App-mode promo hero in sidebar mode by blove · Pull Request #737 · cacheplane/angular-agent-framework

blove · 2026-06-25T05:54:37Z

What

Replaces the placeholder launcher hint in sidebar mode (App mode off) with a preview-led marketing hero that sells the App-mode map cockpit and the Threadplane primitives behind it, with a CTA that enables App mode.

New isolated AppModePromoComponent (modes/app-mode-promo.component.ts): hasMapsKey signal input + enable output, OnPush, no shell coupling.
A centered poster card: static Paris map image backdrop (object-fit: cover, dark fallback when absent) + an always-dark caption with a "Built with Threadplane" eyebrow, headline, four capability pills — Client tools, Generative UI, Human-in-the-loop, Shared state — and the primary CTA.
Wired into SidebarMode under the existing @if (shell.appMode() !== 'on') gate: [hasMapsKey]="shell.hasMapsKey", (enable)="shell.onAppModeChange('on')".
No-key fallback: CTA disabled + "Set GOOGLE_MAPS_API_KEY to enable" note (mirrors the toolbar toggle).
a11y/motion: real <button>, focus-visible ring, aria-hidden icons, prefers-reduced-motion gate, (error) guard hides a missing image to the dark fallback.

Spec: docs/superpowers/specs/2026-06-25-ag-ui-app-mode-promo-design.md
Plan: docs/superpowers/plans/2026-06-25-ag-ui-app-mode-promo.md

Verification

Unit (vitest): 45 pass, incl. 3 new (renders headline + 4 pills + enabled CTA; CTA emits enable; no-key disables CTA + shows note + title).
e2e (Playwright): full ag-ui suite 24/24 incl. new app-mode-promo.spec.ts (promo visible in sidebar mode).
Live click-through (real Maps key): sidebar → enabled CTA → /sidebar?appmode=on cockpit (map + overlay), promo gone.
Lint clean.

Follow-up (not blocking)

Add the static map screenshot at examples/ag-ui/angular/public/app-mode-preview.webp (drop the raw PNG; I'll resize/convert via sips). Until then the component shows its dark fallback — layout intact, no broken-image badge.

🤖 Generated with Claude Code

Marketing surface for sidebar mode (App mode off): a preview-led poster with a static Paris map backdrop, Threadplane capability pills (client tools, generative UI, human-in-the-loop, shared state), and a CTA that enables App mode. Replaces the placeholder launcher hint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

5 tasks: TDD component (hasMapsKey input / enable output), wire into SidebarMode under the existing gate, e2e (key-independent), static map image with dark fallback + sips processing, verify + ship. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Final-review nits: add an (error) handler so a missing/404 map image hides cleanly to the dark fallback (no broken-image badge on the demo surface), and remove the color/font-size left on .sidebar-mode__background by the deleted launcher hint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-06-25T05:54:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
threadplane	Ready	Preview, Comment	Jun 27, 2026 11:13pm

github-actions

Automated approval: this PR received an intelligent (AI) code review. See the review comments on this PR.

github-actions · 2026-06-25T05:54:51Z

Claude finished @blove's task in 2m 0s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Clean, well-scoped addition. The component is properly isolated (no shell coupling via DI), OnPush with signal inputs/outputs, a11y-aware (real <button>, focus-visible ring, aria-hidden icons), and the reduced-motion gate is correct. No correctness bugs, no security issues, no public API regressions.

Two minor observations (inline comments posted):

(error) direct DOM mutation (app-mode-promo.component.ts:25) — The approach is fine; documented the one edge-case invariant (re-render after @if toggle refires the image request). No action needed.
Missing symmetrical assertion in the first unit test (app-mode-promo.component.spec.ts:21) — The test verifies cta.disabled === false when the key is present, but doesn't assert the title attribute is absent. A one-liner expect(cta!.hasAttribute('title')).toBe(false) would close the gap. Suggestion included.

Everything else looks solid:

hasMapsKey is a plain boolean on the shell (environment-derived, immutable at runtime), bound correctly to the input<boolean>(false) signal input — no change-detection concern.
The [attr.title]="hasMapsKey() ? null : '...' pattern correctly removes the attribute via Angular's null-binding behaviour.
output<void>() + subscribe() in tests is valid Angular 17+ OutputRef API.
::ng-deep override in sidebar-mode.component.ts is pre-existing and not introduced here.
e2e covers the promo being visible in sidebar mode; unit tests cover enabled CTA, emit, and disabled + note states.

Result: LGTM with one minor test suggestion. The follow-up for the static map asset (public/app-mode-preview.webp) is clearly called out in the PR and the dark fallback keeps the layout intact in the meantime.

github-actions · 2026-06-25T05:56:38Z

+        src="/app-mode-preview.webp"
+        alt="Preview of the App-mode map cockpit"
+        loading="lazy"
+        (error)="promoImg.style.display = 'none'"


The direct DOM mutation in the error handler works and avoids a unnecessary component state property for this purely-visual side effect, so this is fine. One thing to be aware of: if the component is destroyed and re-created (e.g. after the @if gate toggles), the style.display = 'none' is gone and the broken image request fires again. Because the image URL is a static asset that either exists or doesn't, this is unlikely to be observed in practice, but if the asset lands later the behavior self-corrects on re-render. No action needed — just documenting the invariant.

github-actions · 2026-06-25T05:56:41Z

+    expect(el.querySelectorAll('.promo__pill').length).toBe(4);
+    const cta = el.querySelector('.promo__cta') as HTMLButtonElement | null;
+    expect(cta).toBeTruthy();
+    expect(cta!.disabled).toBe(false);


Consider adding a companion assertion that the title attribute is absent (or empty) when the key is present — the current test only covers the false branch. A one-liner suffices:

Suggested change

expect(cta!.disabled).toBe(false);

expect(cta!.disabled).toBe(false);

expect(cta!.hasAttribute('title')).toBe(false);

Not blocking, but it closes the symmetry gap with the third test case.

Commit the real Paris map screenshot as the promo hero backdrop (public/app-mode-preview.jpg, 1600x594, ~360KB) and point the component <img> at it. Used JPEG (resized via sips) rather than webp — cwebp is broken on this machine (missing libtiff) and sips lacks webp output; the (error) dark-fallback still covers a missing asset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-25T15:24:43Z

Claude finished @blove's task in 1m 56s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Clean, well-scoped addition. The component is properly isolated (no shell coupling via DI), OnPush with signal inputs/outputs, a11y-aware (real <button>, focus-visible ring, aria-hidden icons), and the reduced-motion gate is correct. Material Symbols Outlined is confirmed loaded in index.html. No security issues, no public API regressions.

Two issues posted as inline comments:

loading="lazy" on the hero image (app-mode-promo.component.ts:24) — This image is the primary viewport content and renders immediately on mount. Lazy-loading defers the fetch until the browser's distance threshold is crossed, which can cause a visible dark-fallback flash on slower connections. Switch to loading="eager" (or remove the attribute; that's the browser default). If the image later becomes the LCP element, fetchpriority="high" is a worthwhile follow-up.
Missing symmetrical title assertion in test case 1 (app-mode-promo.component.spec.ts:21) — The enabled-key test only checks disabled === false but doesn't verify that title is absent. Adding expect(cta!.hasAttribute('title')).toBe(false) closes the symmetry gap with test case 3. (Also noted by the previous automated review.)

Everything else looks solid:

hasMapsKey is a plain boolean (environment-derived, immutable at runtime), bound correctly to input<boolean>(false) — no change-detection concern.
[attr.title]="hasMapsKey() ? null : '...' correctly removes the attribute via Angular's null-binding.
output<void>() + subscribe() in tests is valid Angular 17+ OutputRef API.
::ng-deep override in sidebar-mode.component.ts is pre-existing, not introduced here.
The (error) DOM mutation on promoImg is acceptable for this purely-visual side effect.
e2e covers promo visibility; unit tests cover enabled CTA, emit, and disabled+note states.

LGTM with one real fix (loading="eager") and one minor test suggestion.

github-actions · 2026-06-25T15:26:28Z

+        class="promo__img"
+        src="/app-mode-preview.jpg"
+        alt="Preview of the App-mode map cockpit"
+        loading="lazy"


loading="lazy" is counter-productive here. This image is the primary viewport content — it renders immediately when the component mounts, so the browser should fetch it eagerly. Lazy-loading defers the request until the browser's distance-from-viewport threshold is crossed, which can be satisfied after layout but still adds a tick or two of the dark fallback flash on slower connections. Remove the attribute (browsers default to eager) or switch to loading="eager". If you later add fetchpriority="high" it becomes the LCP hint too.

Suggested change

loading="lazy"

loading="eager"

github-actions · 2026-06-25T15:26:31Z

+    expect(el.querySelectorAll('.promo__pill').length).toBe(4);
+    const cta = el.querySelector('.promo__cta') as HTMLButtonElement | null;
+    expect(cta).toBeTruthy();
+    expect(cta!.disabled).toBe(false);


The enabled-key case only asserts disabled === false; it doesn't verify the title attribute is absent. Adding the companion assertion closes the symmetry gap with the third test case and ensures [attr.title] null-removal actually works.

Suggested change

expect(cta!.disabled).toBe(false);

expect(cta!.disabled).toBe(false);

expect(cta!.hasAttribute('title')).toBe(false);

- Embed/Popup toolbar buttons are no longer disabled while App mode is on. Choosing a full-chat layout now turns App mode off and shows the full chat. onModeChange navigates first, then flips appMode off so the persist effect's route sync resolves against the new route (no bounce to /sidebar). - Popup mode renders the App-mode promo hero behind the floating launcher (App mode off), mirroring sidebar mode; dead hint markup/styles removed. - e2e: promo visible in popup mode; choosing Embed from App mode lands on /embed with the app-body gone. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-25T15:41:01Z

Claude finished @blove's task in 2m 2s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Clean, well-scoped addition. The latest commit adds the promo to popup mode with symmetric wiring and covers it with two new e2e tests — the implementation pattern is identical to sidebar mode and looks correct. One real fix is still outstanding from the previous review; one minor test suggestion remains open.

Issues

1. loading="lazy" on the hero image — real fix needed
app-mode-promo.component.ts:24

loading="lazy" is the wrong hint here. This image is the primary visible content — it mounts immediately. Lazy loading defers the fetch until the browser decides the element is near the viewport, which adds a brief dark-fallback flash on slower connections even though the image is already in view. Remove the attribute (browsers default to eager) or set loading="eager". Fix this →

-        loading="lazy"
+        loading="eager"

2. Missing symmetrical title assertion in test 1 — minor
app-mode-promo.component.spec.ts:21

The enabled-key test only checks cta.disabled === false. It doesn't verify that [attr.title] was actually removed (null-binding should produce no attribute). Adding the companion assertion closes the symmetry gap with test case 3 and validates the null-removal behaviour. Fix this →

     expect(cta!.disabled).toBe(false);
+    expect(cta!.hasAttribute('title')).toBe(false);

Popup-mode addition (new in this commit) ✓

PopupMode wires the promo identically to SidebarMode — same [hasMapsKey] input, same (enable) output, same @if (appMode() !== 'on') gate. Correct.
Clicking the promo CTA in popup mode calls shell.onAppModeChange('on'), which sets the signal and the persist effect navigates to /sidebar?appmode=on. The cockpit then mounts correctly — no route-bounce risk because the navigation is to an absolute path.
The new e2e tests (popup mode also shows the App-mode promo, choosing embed from App mode turns App mode off) are well-targeted. The toHaveCount(0) assertion on .ag-ui-shell__app-body is correct because the @if (appMode() === 'on') block truly removes the element from the DOM when off.

Everything else ✓

hasMapsKey is a plain boolean (environment-derived, immutable at runtime), bound correctly to input<boolean>(false) — no change-detection concern.
output<void>() + subscribe() in tests is valid Angular 17+ OutputRef API.
[attr.title]="hasMapsKey() ? null : '...' correctly removes the attribute via Angular's null-binding.
::ng-deep override in sidebar-mode.component.ts is pre-existing, not introduced here.
OnPush + signal inputs — no manual markForCheck() needed; Angular derives the binding automatically.
a11y: real <button>, focus-visible ring, aria-hidden icons, prefers-reduced-motion gate. Solid.

Result: LGTM with one real fix (loading="eager") and one minor test suggestion.

App mode is no longer sidebar-only — it's now a property layered over either chat presentation. Two knobs: the route (embed/popup/sidebar) is HOW the chat is presented; App mode toggles WHAT fills the background (promo hero vs the live map cockpit + itinerary overlay) behind popup/sidebar. Decision matrix: App mode OFF App mode ON Embed full chat, no background not allowed (no background area) Popup launcher + promo hero map cockpit + overlay; chat = launcher Sidebar sidebar + promo hero map cockpit + overlay; chat = sidebar Transitions: - Toggle App mode in popup/sidebar: swap promo<->map, stay on the mode. - Enable App mode from embed: auto-switch to sidebar (embed has no background). - Popup <-> sidebar: App mode preserved. Embed always drops App mode. - Reload restores (mode, appMode); embed forces App mode off. Implementation: - Persist effect no longer force-navigates /sidebar; it navigates to the EXPLICIT current mode (read untracked) so reload restores popup/sidebar and knob changes don't bounce the route. The crash-fix loader gate still holds. - mode/appMode seed from window.location at bootstrap (router.url reads '/' pre-initial-nav); appMode starts off if the route is embed. - e2e: App mode in popup shows the map cockpit (promo replaced); popup<->sidebar preserves App mode; embed drops it. Itinerary specs moved to /sidebar?appmode=on (root /?appmode=on now resolves to embed -> App off). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-25T16:00:50Z

Claude finished @blove's task in 2m 55s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Gather context and read CLAUDE.md
Read changed files and diff
Check outstanding issues from previous reviews
Post findings

Summary

The latest commit (3465f40) is a solid routing improvement: App mode now runs in both popup and sidebar (not just sidebar), with locationMode() / initialAppMode() fixing the bootstrap-timing race, untracked(() => this.mode()) in the persist effect keeping it from re-firing on navigation, and the navigate-then-signal pattern in onModeChange / onAppModeChange correctly sequencing route changes before signal flips. The itinerary-client-tools.spec.ts URL updates from /?appmode=on → /sidebar?appmode=on are correct.

Two issues from prior reviews remain unaddressed, and one new stale comment was introduced in the latest commit.

Issues

1. loading="lazy" on the hero image — real fix needed (flagged 2× before)
app-mode-promo.component.ts:24

This image is the primary viewport content; it renders immediately on mount. Lazy-loading defers the fetch until the browser's distance-from-viewport threshold is crossed, adding a dark-fallback flash on slower connections. Remove the attribute or set loading="eager". Fix this →

2. Missing symmetrical title assertion in test 1 — minor (flagged 3× before)
app-mode-promo.component.spec.ts:21

The enabled-key test checks disabled === false but doesn't verify [attr.title] null-removal worked. Closes the symmetry gap with test case 3. Fix this →

3. Stale comment in popup-mode.component.ts — introduced in this commit
popup-mode.component.ts:15-18

The comment says "App mode forces sidebar, so in popup mode it is effectively always off" — this was true before 3465f40 but the latest commit deliberately enables App mode in popup. The e2e test App mode runs in popup mode with the map cockpit behind the chat confirms this. Fix this →

Everything else ✓

locationMode() / initialAppMode() bootstrap-timing fix is correct.
untracked(() => this.mode()) in the persist effect is the right call — prevents the effect from re-running on every navigation.
Navigate-then-signal ordering in onModeChange / onAppModeChange is sound (router events update mode() before the promise resolves).
popup-mode and sidebar-mode wiring of [hasMapsKey] + (enable) is symmetric and correct.
All new e2e tests are well-targeted; popup App-mode cockpit and embed-exit paths are covered.
a11y, OnPush, signal inputs/outputs, focus-visible ring — all fine.

github-actions · 2026-06-25T16:03:19Z

+        class="promo__img"
+        src="/app-mode-preview.jpg"
+        alt="Preview of the App-mode map cockpit"
+        loading="lazy"


loading="lazy" is still counter-productive here (flagged twice in prior reviews). This image is the primary visible content — it mounts immediately when the component renders. Lazy-loading defers the fetch until the browser's distance-from-viewport threshold is crossed, adding a dark-fallback flash even though the element is already in view. Remove the attribute (browser default is eager) or switch to loading="eager".

Suggested change

loading="lazy"

loading="eager"

github-actions · 2026-06-25T16:03:22Z

+    expect(el.querySelectorAll('.promo__pill').length).toBe(4);
+    const cta = el.querySelector('.promo__cta') as HTMLButtonElement | null;
+    expect(cta).toBeTruthy();
+    expect(cta!.disabled).toBe(false);


Still missing the companion assertion that title is absent when the key is present (flagged three times across prior reviews). The test verifies disabled === false but doesn't confirm [attr.title] null-removal actually worked. One liner:

Suggested change

expect(cta!.disabled).toBe(false);

expect(cta!.disabled).toBe(false);

expect(cta!.hasAttribute('title')).toBe(false);

github-actions · 2026-06-25T16:03:26Z

+      <!-- The chat is a floating launcher here, so the area behind it markets
+           App mode (same hero as sidebar mode). App mode forces sidebar, so in
+           popup mode it is effectively always off — gate it the same way for
+           symmetry with sidebar mode. -->


This comment is now stale after commit 3465f40. "App mode forces sidebar, so in popup mode it is effectively always off" was true before but the latest commit explicitly makes App mode work in popup too (the map fills the background behind the floating launcher). The e2e test App mode runs in popup mode with the map cockpit behind the chat confirms this. The second and third sentences should be removed or rewritten.

Suggested change

The chat-select dropdown menu was an absolutely-positioned child, so it was clipped by any ancestor overflow container and trapped by any ancestor transform — e.g. the "More prompts" menu in sidebar mode was cut off by the sliding chat-sidebar panel (which has both overflow AND transform). position: fixed can't escape a transformed ancestor, so the menu must leave that context. Convert the menu to a CDK connected overlay (cdkConnectedOverlay) that portals to a body-level pane and uses a flexible position strategy (above-right preferred, flips/shifts to stay in the viewport). This fixes clipping for every chat-select consumer (welcome "More prompts", model picker in the input pill, both demo toolbars) and improves placement (toolbar selects now flip down instead of opening up into the top edge). - libs/chat: chat-select uses OverlayModule; menu styles drop self-positioning; options are queried via the menu view-ref (now portaled out of the host); outside-click close is handled by (overlayOutsideClick). New `panelClass` input lets consumers style the portaled pane. Theme tokens survive the portal because they're defined on :root, not :host. - @angular/cdk added as a peer dependency of @threadplane/chat. - Consumer menu-width overrides migrated from `::ng-deep chat-select .chat-select__menu` to the panelClass (both example welcome-suggestions). - specs/e2e updated to query the menu in the CDK overlay container. Verified: lint + unit (lib + both examples), ag-ui e2e 28/28, chat e2e 42/42, and live Chrome across all three consumer surfaces. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-27T17:23:31Z

Claude finished @blove's task in 4m 39s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Gather context and read CLAUDE.md
Read changed files and diff
Check outstanding issues from previous reviews
Post findings

Summary

The latest commit (293afc7) migrates chat-select from a manually-managed document mousedown listener to a CDK connected overlay. This is a solid change: overlayOutsideClick/detach cleanly replace the hand-rolled listener, the overlayPositions array covers the four flip/shift variants correctly, panelClasses() handles both string and string[], and the viewChild('menuEl') pattern works correctly because CDK's TemplatePortal keeps the embedded view in the component's ViewContainerRef (Angular's view query can still find it, and keyboard navigation is not broken). Tests are correctly updated to query OverlayContainer instead of the host element, with proper afterEach cleanup. The @angular/cdk peer dep is already installed workspace-wide (~21.1.0), so formalising it in libs/chat/package.json is correct, not a breaking bump.

Three issues from prior reviews remain unaddressed — inline comments posted on each.

Outstanding issues (inline comments posted)

1. loading="lazy" on the hero image — real fix, flagged ×4
app-mode-promo.component.ts:24

Still counter-productive. Primary viewport content that mounts immediately; lazy-loading adds a dark-fallback flash for nothing. Fix this →

2. Stale comment in popup-mode.component.ts — flagged ×3
popup-mode.component.ts:16-18

"App mode forces sidebar, so in popup mode it is effectively always off" contradicts the PR's own behaviour and the e2e test App mode runs in popup mode with the map cockpit behind the chat. Fix this →

3. Missing symmetrical title assertion in test case 1 — flagged ×3
app-mode-promo.component.spec.ts:21

Enabled-key case asserts disabled === false but doesn't verify [attr.title] null-removal. One-liner closes the symmetry gap with test case 3. Fix this →

LGTM with one real fix (loading="eager") and two minor cleanup items.

github-actions · 2026-06-27T17:27:48Z

+        class="promo__img"
+        src="/app-mode-preview.jpg"
+        alt="Preview of the App-mode map cockpit"
+        loading="lazy"


loading="lazy" is still counter-productive here — flagged in every prior review (×4 now). This image is the primary visible content and mounts immediately; lazy-loading only adds a dark-fallback flash on slower connections. Remove the attribute (the browser default is eager) or switch to loading="eager".

Suggested change

loading="lazy"

loading="eager"

github-actions · 2026-06-27T17:27:54Z

+           App mode (same hero as sidebar mode). App mode forces sidebar, so in
+           popup mode it is effectively always off — gate it the same way for
+           symmetry with sidebar mode. -->


This comment is still stale — flagged in the previous review. "App mode forces sidebar, so in popup mode it is effectively always off" was true before commit 3465f40, but App mode now explicitly runs in popup (the e2e test App mode runs in popup mode with the map cockpit behind the chat confirms this). The @if gate itself is correct; the description of it is wrong.

Suggested change

App mode (same hero as sidebar mode). App mode forces sidebar, so in

popup mode it is effectively always off — gate it the same way for

symmetry with sidebar mode. -->

App mode (same hero as sidebar mode). The gate mirrors sidebar mode: while

App mode is on the map fills the background, so the promo is not shown. -->

github-actions · 2026-06-27T17:27:56Z

+    expect(el.querySelectorAll('.promo__pill').length).toBe(4);
+    const cta = el.querySelector('.promo__cta') as HTMLButtonElement | null;
+    expect(cta).toBeTruthy();
+    expect(cta!.disabled).toBe(false);


Still missing the symmetrical title assertion (flagged ×3 in prior reviews). Closes the gap with test case 3 and verifies [attr.title]=null actually removes the attribute.

Suggested change

expect(cta!.disabled).toBe(false);

expect(cta!.disabled).toBe(false);

expect(cta!.hasAttribute('title')).toBe(false);

Replace @threadplane/chat's @angular/cdk peer dep with a small public connected-overlay primitive (body portal + flip/clamp positioning + live reposition + a11y), using CDK overlay as the reference. chat-select is the first consumer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ive)

…al CSS

… portal, live reposition)

…l close-event handling Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…angular/cdk peer dep

… menu

- chat-select.styles.ts: fix stale "CDK" comment (now the in-lib overlay). - ag-ui e2e test-helpers selectToolbarOption: query .chat-overlay-container (the portaled menu), matching the chat twin. - Remove the obsolete manual toolbar menu-flip workaround from both shells — the connected-overlay positioner auto-flips downward, and the host-scoped ::ng-deep rule no longer reached the portaled menu anyway. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…promo # Conflicts: # examples/ag-ui/angular/src/app/modes/sidebar-mode.component.ts

…-merge with #741) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

github-actions · 2026-06-27T23:10:53Z

Claude finished @blove's task in 1m 44s —— View job

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Gather context and read CLAUDE.md
Read changed files and apply outstanding fixes
Fix loading="eager" on hero image (app-mode-promo.component.ts:24)
Fix stale comment in popup-mode.component.ts:16-18
Add symmetrical title assertion in app-mode-promo.component.spec.ts:21
Commit changes locally (commit 6e01a0a)
Push to remote ⚠️ blocked — 403 from GitHub App

Applied fixes

All three outstanding review items are addressed in commit 6e01a0a fix(ag-ui): address outstanding review items on app-mode-promo:

1. loading="eager" on hero image — app-mode-promo.component.ts:24

The hero image is primary viewport content rendered immediately on mount; loading="lazy" was deferring the fetch unnecessarily, risking a dark-fallback flash. Changed to loading="eager".

-        loading="lazy"
+        loading="eager"

2. Stale comment in popup-mode.component.ts — lines 15–18

"App mode forces sidebar, so in popup mode it is effectively always off" contradicted the PR's own behaviour (App mode now runs in popup too, confirmed by the e2e test). Updated to accurately describe the gate.

-      
+

3. Symmetrical title assertion in test case 1 — app-mode-promo.component.spec.ts:21

Closes the symmetry gap with test case 3; validates that [attr.title]=null actually removes the attribute from the DOM.

     expect(cta!.disabled).toBe(false);
+    expect(cta!.hasAttribute('title')).toBe(false);

Push status

The commit is ready locally but the GitHub App token returned a 403 on push (write permissions not granted for this run). Please run git push origin blove/ag-ui-app-mode-promo locally to apply, or grant the action contents: write permission.

…742) Post-merge main CI fixes for the connected-overlay primitive (#737): - connected-overlay.directive.ts tripped @angular-eslint/no-input-rename / no-output-rename (errors in this repo) for the chatOverlay* binding aliases. Those aliases ARE the intended public API (namespacing under chatOverlay*, mirroring CDK's cdkConnectedOverlay* convention), so add a justified file-level eslint-disable for the two rules. - Regenerate chat api-docs.json for the new public exports (ChatConnectedOverlay/ChatOverlayOrigin directives + ConnectedPosition/ OverlayPositionResult types), which the "Verify generated API docs are committed" CI step requires. Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

blove and others added 7 commits June 24, 2026 22:44

feat(ag-ui): App-mode promo hero component

3d3f10b

fix(ag-ui): a11y focus ring + hover + title assertion for promo CTA

342e251

feat(ag-ui): render App-mode promo in sidebar mode

c1d32d3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

test(ag-ui): e2e for the App-mode promo in sidebar mode

2a7b011

github-actions Bot approved these changes Jun 25, 2026

View reviewed changes

vercel Bot deployed to Preview – threadplane June 25, 2026 05:56 View deployment

github-actions Bot reviewed Jun 25, 2026

View reviewed changes

vercel Bot deployed to Preview – threadplane June 25, 2026 15:27 View deployment

vercel Bot deployed to Preview – threadplane June 25, 2026 15:43 View deployment

vercel Bot deployed to Preview – threadplane June 25, 2026 16:03 View deployment

github-actions Bot reviewed Jun 25, 2026

View reviewed changes

vercel Bot deployed to Preview – threadplane June 27, 2026 17:25 View deployment

github-actions Bot reviewed Jun 27, 2026

View reviewed changes

chore(docs): regenerate api docs

03a0ba9

github-actions Bot reviewed Jun 27, 2026

View reviewed changes

blove and others added 11 commits June 27, 2026 16:00

docs(plans): hand-rolled connected-overlay primitive implementation plan

187be4e

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

feat(chat): connected-position fit/flip/push function (overlay primit…

4ff3d81

…ive)

feat(chat): body-portal overlay container with self-injected structur…

47e9afb

…al CSS

feat(chat): ChatConnectedOverlay + ChatOverlayOrigin directives (body…

7ecc059

… portal, live reposition)

feat(chat): export connected-overlay primitive from public API

5b1806f

fix(chat): default position for empty overlay positions; document dua…

5267844

…l close-event handling Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

refactor(chat): chat-select uses the in-lib overlay primitive; drop @…

e6b6686

…angular/cdk peer dep

test(chat): chat-select spec queries .chat-overlay-container

74159de

test(chat-e2e): query .chat-overlay-container for the portaled select…

d6bba6b

… menu

vercel Bot deployed to Preview – threadplane June 27, 2026 23:02 View deployment

blove and others added 2 commits June 27, 2026 16:09

Merge remote-tracking branch 'origin/main' into blove/ag-ui-app-mode-…

2f23eaf

…promo # Conflicts: # examples/ag-ui/angular/src/app/modes/sidebar-mode.component.ts

fix(ag-ui): rename promo tokens --ngaf-chat-* → --tplane-chat-* (post…

f3823e6

…-merge with #741) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview – threadplane June 27, 2026 23:13 View deployment

blove merged commit ab084d5 into main Jun 27, 2026
22 of 23 checks passed

blove mentioned this pull request Jun 27, 2026

fix(chat): clear overlay-directive lint errors + regenerate api docs #742

Merged

	expect(cta!.disabled).toBe(false);
	expect(cta!.disabled).toBe(false);
	expect(cta!.hasAttribute('title')).toBe(false);

Uh oh!

Conversation

blove commented Jun 25, 2026

What

Verification

Follow-up (not blocking)

Uh oh!

vercel Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Issues

Popup-mode addition (new in this commit) ✓

Everything else ✓

Uh oh!

github-actions Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Issues

Everything else ✓

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 25, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Summary

Outstanding issues (inline comments posted)

Uh oh!

github-actions Bot Jun 27, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 27, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jun 27, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: feat(ag-ui): App-mode promo hero in sidebar mode

Applied fixes

Push status

Uh oh!

vercel Bot commented Jun 25, 2026 •

edited

Loading

github-actions Bot commented Jun 25, 2026 •

edited

Loading

github-actions Bot commented Jun 25, 2026 •

edited

Loading

github-actions Bot commented Jun 25, 2026 •

edited

Loading

github-actions Bot commented Jun 25, 2026 •

edited

Loading

github-actions Bot commented Jun 27, 2026 •

edited

Loading

github-actions Bot commented Jun 27, 2026 •

edited

Loading