From 2feb762aa2a3f8e0b696263ffc7e798bcb9ef2fa Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 08:38:31 -0700
Subject: [PATCH 1/8] docs(spec): chat-surface polish design (sub-project B)

Three chat-surface tweaks for the demo UX polish pass: collapse the
welcome suggestions to a single featured chip plus "More prompts"
dropdown, add a 32px gradient fade above the chat input, and bump the
message-actions padding to 16px/12px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../2026-05-17-chat-surface-polish-design.md  | 177 ++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md

diff --git a/docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md b/docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md
new file mode 100644
index 000000000..fc352078b
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md
@@ -0,0 +1,177 @@
+# Chat surface polish — Design
+
+**Status:** Approved
+**Date:** 2026-05-17
+**Goal:** Three chat-surface tweaks that complete the demo UX polish pass — reduce suggestion footprint to a single chip, add a scroll fade above the input, and increase the message-actions bar padding.
+
+## Why now
+
+Sub-project B of the demo UX polish pass. Sub-project A (sidenav) shipped in PR #399 and is live on `demo.cacheplane.ai`. The remaining three items the user flagged from the production review:
+
+- **Suggestion list** still occupies more space than warranted. With sub-project A's sidenav now drawing the eye correctly, the suggestions are next to compress.
+- **Abrupt line** between scrolling chat content and the input bar is jarring.
+- **Message-actions bar** sits too tightly under each assistant message.
+
+## Decisions locked during brainstorming
+
+| Decision | Choice |
+|---|---|
+| Suggestions layout | **One featured chip + "More prompts" dropdown** in a single horizontal row, centered under the chat input |
+| Featured chip source | `FEATURED_SUGGESTIONS[0]` — the first array entry. Consumer-controlled. Text trims with ellipsis if needed. |
+| Canonical demo's featured prompt | "Demo: render a contact form" — the GenUI surface showcase is the most differentiating capability of @ngaf/chat |
+| Scroll fade | 32px gradient mask above the chat input |
+| Message-actions padding | 16px top / 12px bottom |
+| Layout responsiveness | Pill respects container width via `max-width` + ellipsis. No new viewport breakpoints. |
+
+## Architecture
+
+### Item 3 — Single featured chip + dropdown
+
+`WelcomeSuggestionsComponent` (in `examples/chat/angular/src/app/modes/`) was added in PR #383 to render `FEATURED_SUGGESTIONS` (3 chips) + `MORE_SUGGESTIONS` (14 chips in a dropdown). This spec reduces FEATURED to render only its first entry as a single chip, with everything else (FEATURED[1..] + all of MORE_SUGGESTIONS) consolidated into the dropdown.
+
+Two implementation paths:
+1. **Trim FEATURED_SUGGESTIONS to a single entry** in `welcome-suggestions.ts` (data change), keep the component reading `FEATURED_SUGGESTIONS[0]`.
+2. **Keep FEATURED_SUGGESTIONS as a 3-entry list** but the component renders only `featured[0]` and merges `featured[1..] ++ more` into the dropdown options.
+
+We pick #2. Rationale: the data file's intent (group of curated entries) stays consistent for any future consumer that wants to feature multiple chips. The component owns the "show only the first" presentation decision.
+
+Layout: single horizontal flex row, centered, gap 12px. Pill uses `max-width: 380px` + `text-overflow: ellipsis` so long labels truncate. Dropdown trigger ("More prompts ⌄") is a borderless text-button (subtler than today's bordered chat-select trigger).
+
+The canonical demo's `FEATURED_SUGGESTIONS` array gets reordered so "Demo: render a contact form" is at index 0.
+
+### Item 4 — Scroll fade above input
+
+Chat input lives at the bottom of the chat surface. The scrollable message-list above it currently abuts the input with no visual transition.
+
+Add a 32px-tall gradient mask layer between the message list and the input: `linear-gradient(180deg, transparent 0%, var(--ngaf-chat-bg) 100%)`. Absolutely positioned, anchored to the top edge of the input region, with `pointer-events: none` so it doesn't block clicks.
+
+The mask is rendered by `chat-window` or `chat-input` — whichever owns the bottom-anchored input chrome. Inspection needed; lib-side change in either case.
+
+### Item 5 — Message-actions bar padding
+
+`chat-message-actions` primitive (libs/chat) wraps the refresh/copy/thumbs row. Current vertical padding is ~4px. Increase to 16px top / 12px bottom via the component's CSS.
+
+The 16px above separates the action row from the message bubble it belongs to; the 12px below separates it from the next message in the stream.
+
+## Files touched
+
+### Demo
+
+- `examples/chat/angular/src/app/modes/welcome-suggestions.ts` — reorder `FEATURED_SUGGESTIONS` so the contact-form prompt is at index 0
+- `examples/chat/angular/src/app/modes/welcome-suggestions.component.ts` — render only `featured[0]` as the single chip; merge `featured[1..] ++ more` into the dropdown options
+- `examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts` — update existing tests; add new cases for the single-chip behavior
+
+### Library
+
+- `libs/chat/src/lib/primitives/chat-message-actions/` (component file + spec + styles) — increase padding to 16/12
+- `libs/chat/src/lib/primitives/chat-window/chat-window.component.ts` — template gains a `<div class="chat-window__scroll-fade" aria-hidden="true">` element as the **first child of `.chat-window__footer`**. Mask uses `--ngaf-chat-bg` so it works in both themes.
+- `libs/chat/src/lib/styles/chat-window.styles.ts` — add `position: relative` to `.chat-window__footer` and add the new `.chat-window__scroll-fade` rule
+
+### Out of scope
+- Bigger suggestion redesign (e.g. dropdown becomes a slide-down panel)
+- Animating the fade in/out on scroll position
+- Per-message-type action bar variants
+- Sidenav polish (sub-project A, already shipped)
+
+## Visual treatment
+
+### welcome-suggestions.component.ts template
+
+```html
+<div class="welcome-suggestions__row">
+  <chat-welcome-suggestion
+    class="welcome-suggestions__featured"
+    [label]="featuredOne.label"
+    [value]="featuredOne.value"
+    (selected)="selected.emit($event)"
+  />
+  <chat-select
+    [options]="moreOptions"
+    placeholder="More prompts"
+    menuLabel="More demo prompts"
+    (valueChange)="selected.emit($event)"
+  />
+</div>
+```
+
+```css
+:host {
+  display: flex;
+  justify-content: center;
+}
+.welcome-suggestions__row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.welcome-suggestions__featured {
+  max-width: 380px;
+  overflow: hidden;
+}
+.welcome-suggestions__featured ::ng-deep .chat-welcome-suggestion__label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+```
+
+Component class:
+
+```ts
+protected readonly featuredOne = FEATURED_SUGGESTIONS[0];
+protected readonly moreOptions: readonly ChatSelectOption[] = [
+  ...FEATURED_SUGGESTIONS.slice(1),
+  ...MORE_SUGGESTIONS,
+].map((s) => ({ value: s.value, label: s.label }));
+```
+
+### Scroll fade
+
+```css
+.chat-window__footer {
+  position: relative; /* anchor for the scroll-fade overlay */
+}
+.chat-window__scroll-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%; /* sits directly above the footer's top edge */
+  height: 32px;
+  background: linear-gradient(180deg, transparent 0%, var(--ngaf-chat-bg) 100%);
+  pointer-events: none;
+}
+```
+
+Placing the fade element as the first child of `.chat-window__footer` and anchoring with `bottom: 100%` keeps the mask glued to the footer's top edge regardless of input height — no CSS variable plumbing required.
+
+### Message-actions padding
+
+```css
+.chat-message-actions {
+  padding-top: 16px;
+  padding-bottom: 12px;
+}
+```
+
+(replacing the current ~4px values).
+
+## Testing
+
+### Unit
+
+- `welcome-suggestions.component.spec.ts` — UPDATE existing tests to assert: (a) one chip rendered (not 3); (b) dropdown options count = `FEATURED_SUGGESTIONS.length - 1 + MORE_SUGGESTIONS.length`; (c) clicking chip emits `(selected)` with `FEATURED_SUGGESTIONS[0].value`
+- `chat-message-actions.component.spec.ts` — ADD a CSS-string assertion that the `.chat-message-actions` rule sets `padding-top: 16px` and `padding-bottom: 12px`
+- `chat-window.component.spec.ts` (or wherever the fade is added) — ADD assertion that the gradient-mask element is rendered
+
+### Manual smoke
+
+- Suggestion row centers under the input on wide viewports; single chip + dropdown visible
+- Long pill labels truncate with ellipsis (test by feeding a 200-char featured prompt)
+- Scrolling chat content fades into the input area; no abrupt edge
+- Message actions sit ~16px below the bubble and ~12px above the next message
+
+## References
+
+- Prior sub-project A spec: `docs/superpowers/specs/2026-05-17-sidenav-polish-design.md`
+- Welcome-suggestions component (added in PR #383): `examples/chat/angular/src/app/modes/welcome-suggestions.component.ts`
+- Visual mockup: `.superpowers/brainstorm/33646-1779031519/content/scroll-fade-and-actions.html`

From 4c4bc25b3ce7e90d19195dd9359996660d8422ac Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:26:39 -0700
Subject: [PATCH 2/8] docs(plan): chat-surface polish implementation plan

Six tasks for sub-project B: reorder featured suggestions, collapse to a
single chip + dropdown, bump message-actions padding, add chat-window
scroll fade, release @ngaf/chat 0.0.36, and ship the PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-05-17-chat-surface-polish.md   | 480 ++++++++++++++++++
 1 file changed, 480 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-17-chat-surface-polish.md

diff --git a/docs/superpowers/plans/2026-05-17-chat-surface-polish.md b/docs/superpowers/plans/2026-05-17-chat-surface-polish.md
new file mode 100644
index 000000000..1f82d63a3
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-17-chat-surface-polish.md
@@ -0,0 +1,480 @@
+# Chat-Surface Polish Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Ship sub-project B of the demo UX polish pass — collapse welcome suggestions to a single featured chip + dropdown, add a scroll-fade above the chat input, and increase chat-message-actions padding.
+
+**Architecture:** Two demo-side changes (welcome-suggestions data reorder + component refactor) and two library-side changes (chat-window adds a `.chat-window__scroll-fade` overlay inside the footer slot; `chat-message-actions` bumps padding). Library changes ship as a patch release; demo picks up via the canonical Vercel deploy when libs/ or examples/chat/angular changes land on main.
+
+**Tech Stack:** Angular 20+ standalone components / signals / `@for`, vitest, Nx, @ngaf/chat primitives (chat-window, chat-welcome-suggestion, chat-select, chat-message-actions).
+
+**Branch:** `claude/chat-surface-polish` (already created; spec committed).
+
+**Spec:** `docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md`
+
+---
+
+## File map
+
+| File | Change |
+|---|---|
+| `examples/chat/angular/src/app/modes/welcome-suggestions.ts` | Reorder `FEATURED_SUGGESTIONS` so the contact-form prompt is index 0 |
+| `examples/chat/angular/src/app/modes/welcome-suggestions.component.ts` | Render `featured[0]` as a single chip; merge `featured[1..] ++ more` into the dropdown options |
+| `examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts` | Update tests for single-chip + expanded dropdown |
+| `libs/chat/src/lib/styles/chat-message-actions.styles.ts` | Increase padding to `16px 0 12px 0` |
+| `libs/chat/src/lib/primitives/chat-window/chat-window.component.ts` | Add `<div class="chat-window__scroll-fade" aria-hidden="true">` as first child of `.chat-window__footer` |
+| `libs/chat/src/lib/styles/chat-window.styles.ts` | Add `position: relative` to `.chat-window__footer`; add `.chat-window__scroll-fade` rule |
+| `libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts` | Add test asserting the fade element renders |
+| `libs/chat/package.json` | Bump `version` 0.0.35 → 0.0.36 |
+
+---
+
+## Task 1: Reorder FEATURED_SUGGESTIONS so contact-form is first
+
+**Files:**
+- Modify: `examples/chat/angular/src/app/modes/welcome-suggestions.ts:25-42`
+
+- [ ] **Step 1: Read current array order**
+
+Run: `grep -n 'label:' examples/chat/angular/src/app/modes/welcome-suggestions.ts | head -6`
+Expected output (snippet): coral reefs first, Angular signals second, contact form third.
+
+- [ ] **Step 2: Reorder so contact form is index 0**
+
+Replace the `FEATURED_SUGGESTIONS` literal (lines 25-42) with:
+
+```ts
+export const FEATURED_SUGGESTIONS: readonly WelcomeSuggestion[] = [
+  // 1. GenUI surface render — the canonical demo's most differentiating capability
+  {
+    label: 'Demo: render a contact form',
+    value:
+      'Show me a contact form with fields for name, email address, subject, and a multi-line message, plus a Send button.',
+  },
+
+  // 2. Markdown / streaming showcase
+  { label: 'Tell me about coral reefs', value: 'Tell me about coral reefs' },
+
+  // 3. Tool use + citations
+  {
+    label: 'What are Angular signals? (search + cite sources)',
+    value:
+      'Use the search tool to find authoritative information about Angular signals, then explain what they are and when to use them. Cite each source inline as [^doc-id] using the document `id` field returned by the tool.',
+  },
+];
+```
+
+- [ ] **Step 3: Run the existing tests to see them fail on label-order assertion**
+
+Run: `pnpm nx test chat-angular-example -- --runTestsByPath examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts`
+Expected: `renders the chip labels in order` test passes (it reads from `FEATURED_SUGGESTIONS.map(s => s.label)`, so it's still correct after the reorder); `emits (selected) when a chip is clicked` still passes (asserts `FEATURED_SUGGESTIONS[0].value`, which is now the contact-form value). All 5 tests should pass.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add examples/chat/angular/src/app/modes/welcome-suggestions.ts
+git commit -m "feat(demo): feature contact-form prompt at index 0 of FEATURED_SUGGESTIONS"
+```
+
+---
+
+## Task 2: Render only the first featured chip + dropdown for the rest
+
+**Files:**
+- Modify: `examples/chat/angular/src/app/modes/welcome-suggestions.component.ts` (full rewrite of template + class)
+- Modify: `examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts` (rewrite all tests)
+
+- [ ] **Step 1: Write the failing tests**
+
+Replace the entire contents of `welcome-suggestions.component.spec.ts` with:
+
+```ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { WelcomeSuggestionsComponent } from './welcome-suggestions.component';
+import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
+
+describe('WelcomeSuggestionsComponent', () => {
+  let fx: ComponentFixture<WelcomeSuggestionsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [WelcomeSuggestionsComponent] });
+    fx = TestBed.createComponent(WelcomeSuggestionsComponent);
+    fx.detectChanges();
+  });
+
+  it('renders exactly one featured chip', () => {
+    const chips = fx.nativeElement.querySelectorAll('chat-welcome-suggestion');
+    expect(chips.length).toBe(1);
+  });
+
+  it('renders the first featured suggestion as the chip', () => {
+    const label = fx.nativeElement.querySelector(
+      'chat-welcome-suggestion .chat-welcome-suggestion__label',
+    ) as HTMLElement;
+    expect(label.textContent?.trim()).toBe(FEATURED_SUGGESTIONS[0].label);
+  });
+
+  it('renders the overflow chat-select with "More prompts" placeholder', () => {
+    const select = fx.nativeElement.querySelector('chat-select');
+    expect(select).toBeTruthy();
+    const trigger = select.querySelector('.chat-select__trigger') as HTMLElement;
+    expect(trigger.textContent).toContain('More prompts');
+  });
+
+  it('merges FEATURED_SUGGESTIONS[1..] + MORE_SUGGESTIONS into dropdown options', () => {
+    const opts = fx.componentInstance['moreOptions'] as { value: string; label: string }[];
+    const expectedLen = FEATURED_SUGGESTIONS.length - 1 + MORE_SUGGESTIONS.length;
+    expect(opts.length).toBe(expectedLen);
+    // First overflow entry should be FEATURED_SUGGESTIONS[1]
+    expect(opts[0].label).toBe(FEATURED_SUGGESTIONS[1].label);
+    expect(opts[0].value).toBe(FEATURED_SUGGESTIONS[1].value);
+    // After the leftover featured items, MORE_SUGGESTIONS begins
+    const moreStart = FEATURED_SUGGESTIONS.length - 1;
+    expect(opts[moreStart].label).toBe(MORE_SUGGESTIONS[0].label);
+  });
+
+  it('emits (selected) with the featured value when the chip is clicked', () => {
+    let captured: string | null = null;
+    fx.componentInstance.selected.subscribe((v) => (captured = v));
+    const chipBtn = fx.nativeElement.querySelector(
+      'chat-welcome-suggestion button',
+    ) as HTMLButtonElement;
+    chipBtn.click();
+    expect(captured).toBe(FEATURED_SUGGESTIONS[0].value);
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `pnpm nx test chat-angular-example -- --runTestsByPath examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts`
+Expected: `renders exactly one featured chip` FAILS (current component renders 3); `merges FEATURED_SUGGESTIONS[1..] + MORE_SUGGESTIONS` FAILS (current moreOptions length is 14, not 16).
+
+- [ ] **Step 3: Refactor the component**
+
+Replace the entire contents of `welcome-suggestions.component.ts` with:
+
+```ts
+// SPDX-License-Identifier: MIT
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import {
+  ChatWelcomeSuggestionComponent,
+  ChatSelectComponent,
+  type ChatSelectOption,
+} from '@ngaf/chat';
+import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
+
+/**
+ * Demo-side composition that renders the welcome-state suggestion surface
+ * as a single featured chip + a "More prompts" dropdown for everything
+ * else. The featured chip is `FEATURED_SUGGESTIONS[0]` — consumer
+ * controls which prompt is featured by ordering the array.
+ *
+ * Output `(selected)` fires with the suggestion's `value` for BOTH chip
+ * clicks and dropdown picks — consumers wire it directly to
+ * `agent.submit({ message: $event })` for auto-send semantics.
+ */
+@Component({
+  selector: 'welcome-suggestions',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ChatWelcomeSuggestionComponent, ChatSelectComponent],
+  template: `
+    <div class="welcome-suggestions__row">
+      <chat-welcome-suggestion
+        class="welcome-suggestions__featured"
+        [label]="featuredOne.label"
+        [value]="featuredOne.value"
+        (selected)="selected.emit($event)"
+      />
+      <chat-select
+        [options]="moreOptions"
+        placeholder="More prompts"
+        menuLabel="More demo prompts"
+        (valueChange)="selected.emit($event)"
+      />
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        justify-content: center;
+      }
+      .welcome-suggestions__row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .welcome-suggestions__featured {
+        max-width: 380px;
+        overflow: hidden;
+      }
+      .welcome-suggestions__featured ::ng-deep .chat-welcome-suggestion__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    `,
+  ],
+})
+export class WelcomeSuggestionsComponent {
+  readonly selected = output<string>();
+  protected readonly featuredOne = FEATURED_SUGGESTIONS[0];
+  protected readonly moreOptions: readonly ChatSelectOption[] = [
+    ...FEATURED_SUGGESTIONS.slice(1),
+    ...MORE_SUGGESTIONS,
+  ].map((s) => ({ value: s.value, label: s.label }));
+}
+```
+
+- [ ] **Step 4: Run tests to verify they pass**
+
+Run: `pnpm nx test chat-angular-example -- --runTestsByPath examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts`
+Expected: all 5 tests PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add examples/chat/angular/src/app/modes/welcome-suggestions.component.ts \
+        examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts
+git commit -m "feat(demo): collapse welcome suggestions to single chip + dropdown"
+```
+
+---
+
+## Task 3: Bump chat-message-actions padding to 16px / 12px
+
+**Files:**
+- Modify: `libs/chat/src/lib/styles/chat-message-actions.styles.ts:10` (the `padding: 4px 0 0 0;` line on `:host`)
+
+- [ ] **Step 1: Write the failing test**
+
+Create `libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts`:
+
+```ts
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { CHAT_MESSAGE_ACTIONS_STYLES } from '../../styles/chat-message-actions.styles';
+
+describe('CHAT_MESSAGE_ACTIONS_STYLES', () => {
+  it('sets 16px top / 12px bottom padding on :host so the actions row has breathing room', () => {
+    // Normalize whitespace so a multi-line CSS rule still matches.
+    const normalized = CHAT_MESSAGE_ACTIONS_STYLES.replace(/\s+/g, ' ');
+    expect(normalized).toMatch(/:host\s*\{[^}]*padding:\s*16px\s+0\s+12px\s+0\s*;/);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm nx test chat -- --runTestsByPath libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts`
+Expected: FAIL — current value is `padding: 4px 0 0 0;`, regex won't match.
+
+- [ ] **Step 3: Update the padding**
+
+In `libs/chat/src/lib/styles/chat-message-actions.styles.ts`, replace:
+
+```
+    padding: 4px 0 0 0;
+```
+
+with:
+
+```
+    padding: 16px 0 12px 0;
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `pnpm nx test chat -- --runTestsByPath libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts`
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add libs/chat/src/lib/styles/chat-message-actions.styles.ts \
+        libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts
+git commit -m "feat(chat): increase chat-message-actions padding to 16px/12px"
+```
+
+---
+
+## Task 4: Add scroll-fade overlay above the chat-window footer
+
+**Files:**
+- Modify: `libs/chat/src/lib/primitives/chat-window/chat-window.component.ts` (template only)
+- Modify: `libs/chat/src/lib/styles/chat-window.styles.ts` (footer + new rule)
+- Modify: `libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts` (add assertion)
+
+- [ ] **Step 1: Write the failing test**
+
+Append the following `it` block inside the existing `describe('ChatWindowComponent', ...)` in `chat-window.component.spec.ts`:
+
+```ts
+  it('renders a scroll-fade overlay as the first child of the footer', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(Host);
+    fx.detectChanges();
+    const footer = fx.nativeElement.querySelector('.chat-window__footer') as HTMLElement;
+    const fade = footer.firstElementChild as HTMLElement;
+    expect(fade).toBeTruthy();
+    expect(fade.classList.contains('chat-window__scroll-fade')).toBe(true);
+    expect(fade.getAttribute('aria-hidden')).toBe('true');
+  });
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `pnpm nx test chat -- --runTestsByPath libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts`
+Expected: FAIL — `.chat-window__scroll-fade` element does not exist yet; `firstElementChild` is the projected `<div chatFooter>` node.
+
+- [ ] **Step 3: Add the fade element to the template**
+
+In `libs/chat/src/lib/primitives/chat-window/chat-window.component.ts`, replace the footer div in the template:
+
+```html
+<div class="chat-window__footer"><ng-content select="[chatFooter]" /></div>
+```
+
+with:
+
+```html
+<div class="chat-window__footer">
+  <div class="chat-window__scroll-fade" aria-hidden="true"></div>
+  <ng-content select="[chatFooter]" />
+</div>
+```
+
+- [ ] **Step 4: Add the CSS rules**
+
+In `libs/chat/src/lib/styles/chat-window.styles.ts`, replace the `.chat-window__footer` block:
+
+```css
+.chat-window__footer {
+  flex-shrink: 0;
+  margin-top: var(--ngaf-chat-input-gap);
+}
+.chat-window__footer:empty { display: none; }
+```
+
+with:
+
+```css
+.chat-window__footer {
+  position: relative;
+  flex-shrink: 0;
+  margin-top: var(--ngaf-chat-input-gap);
+}
+.chat-window__footer:empty { display: none; }
+.chat-window__scroll-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: 32px;
+  background: linear-gradient(180deg, transparent 0%, var(--ngaf-chat-bg) 100%);
+  pointer-events: none;
+}
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `pnpm nx test chat -- --runTestsByPath libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts`
+Expected: PASS — both the existing slot-projection test and the new fade test.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add libs/chat/src/lib/primitives/chat-window/chat-window.component.ts \
+        libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts \
+        libs/chat/src/lib/styles/chat-window.styles.ts
+git commit -m "feat(chat): add scroll-fade overlay above chat-window footer"
+```
+
+---
+
+## Task 5: Bump @ngaf/chat to 0.0.36 and run the full library test suite
+
+**Files:**
+- Modify: `libs/chat/package.json` (version field)
+
+- [ ] **Step 1: Bump version**
+
+In `libs/chat/package.json`, change:
+
+```json
+  "version": "0.0.35",
+```
+
+to:
+
+```json
+  "version": "0.0.36",
+```
+
+- [ ] **Step 2: Run the full chat library test suite**
+
+Run: `pnpm nx test chat`
+Expected: all tests PASS, including the two new ones from Tasks 3 and 4.
+
+- [ ] **Step 3: Run the angular demo's full test suite**
+
+Run: `pnpm nx test chat-angular-example`
+Expected: all tests PASS, including the rewritten welcome-suggestions tests from Task 2.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add libs/chat/package.json
+git commit -m "chore(chat): release 0.0.36 — scroll-fade + actions padding"
+```
+
+---
+
+## Task 6: Push branch, open PR, merge on green
+
+- [ ] **Step 1: Push the branch**
+
+```bash
+git push -u origin claude/chat-surface-polish
+```
+
+- [ ] **Step 2: Open the PR**
+
+```bash
+gh pr create --title "Chat-surface polish: featured chip, scroll fade, actions padding" --body "$(cat <<'EOF'
+## Summary
+- Welcome suggestions collapse to a single featured chip (`FEATURED_SUGGESTIONS[0]`) + "More prompts" dropdown; canonical demo features the contact-form prompt.
+- `chat-window` gains a 32px gradient overlay above the footer so chat content fades into the input area instead of clipping at a hard edge.
+- `chat-message-actions` padding bumped to 16px top / 12px bottom for breathing room.
+- @ngaf/chat 0.0.36.
+
+## Test plan
+- [ ] `pnpm nx test chat` passes
+- [ ] `pnpm nx test chat-angular-example` passes
+- [ ] Canonical demo redeploys and shows the single chip + fade + padding on demo.cacheplane.ai
+
+Spec: docs/superpowers/specs/2026-05-17-chat-surface-polish-design.md
+
+🤖 Generated with [Claude Code](https://claude.com/claude-code)
+EOF
+)"
+```
+
+- [ ] **Step 3: Wait for CI to go green**
+
+Run: `gh pr checks --watch`
+Expected: all required checks pass.
+
+- [ ] **Step 4: Merge the PR**
+
+Run: `gh pr merge --squash --delete-branch`
+Expected: PR merged into `main`; branch deleted both remotely and locally.
+
+- [ ] **Step 5: Verify the canonical demo redeploys**
+
+Run: `gh run list --workflow="Canonical demo → Vercel" --limit 1`
+Expected: a new run kicked off by the merge commit. Wait for it to complete (`gh run watch`), then confirm by loading https://demo.cacheplane.ai — the welcome state shows one chip + "More prompts", the fade is visible above the input, and the message-actions row has the new padding.

From 9a747a16b9a9f84699b44997f3d1ae07ce8c4563 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:33:08 -0700
Subject: [PATCH 3/8] feat(demo): feature contact-form prompt at index 0 of
 FEATURED_SUGGESTIONS

---
 .../src/app/modes/welcome-suggestions.ts       | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/chat/angular/src/app/modes/welcome-suggestions.ts b/examples/chat/angular/src/app/modes/welcome-suggestions.ts
index 341cec3ba..94ec92853 100644
--- a/examples/chat/angular/src/app/modes/welcome-suggestions.ts
+++ b/examples/chat/angular/src/app/modes/welcome-suggestions.ts
@@ -23,21 +23,21 @@ export interface WelcomeSuggestion {
 }
 
 export const FEATURED_SUGGESTIONS: readonly WelcomeSuggestion[] = [
-  // 1. Markdown / streaming showcase
-  { label: 'Tell me about coral reefs', value: 'Tell me about coral reefs' },
-
-  // 2. Tool use + citations
+  // 1. GenUI surface render — the canonical demo's most differentiating capability
   {
-    label: 'What are Angular signals? (search + cite sources)',
+    label: 'Demo: render a contact form',
     value:
-      'Use the search tool to find authoritative information about Angular signals, then explain what they are and when to use them. Cite each source inline as [^doc-id] using the document `id` field returned by the tool.',
+      'Show me a contact form with fields for name, email address, subject, and a multi-line message, plus a Send button.',
   },
 
-  // 3. GenUI surface render
+  // 2. Markdown / streaming showcase
+  { label: 'Tell me about coral reefs', value: 'Tell me about coral reefs' },
+
+  // 3. Tool use + citations
   {
-    label: 'Demo: render a contact form',
+    label: 'What are Angular signals? (search + cite sources)',
     value:
-      'Show me a contact form with fields for name, email address, subject, and a multi-line message, plus a Send button.',
+      'Use the search tool to find authoritative information about Angular signals, then explain what they are and when to use them. Cite each source inline as [^doc-id] using the document `id` field returned by the tool.',
   },
 ];
 

From c820c58de59940d2e02fd4f1eb24497c373fe69a Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:33:54 -0700
Subject: [PATCH 4/8] feat(demo): collapse welcome suggestions to single chip +
 dropdown

---
 .../welcome-suggestions.component.spec.ts     | 35 +++++++-------
 .../modes/welcome-suggestions.component.ts    | 48 ++++++++++---------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts b/examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts
index 55b457235..c8b4f1eff 100644
--- a/examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts
+++ b/examples/chat/angular/src/app/modes/welcome-suggestions.component.spec.ts
@@ -13,17 +13,16 @@ describe('WelcomeSuggestionsComponent', () => {
     fx.detectChanges();
   });
 
-  it('renders one chip per FEATURED_SUGGESTIONS entry', () => {
+  it('renders exactly one featured chip', () => {
     const chips = fx.nativeElement.querySelectorAll('chat-welcome-suggestion');
-    expect(chips.length).toBe(FEATURED_SUGGESTIONS.length);
-    expect(FEATURED_SUGGESTIONS.length).toBe(3);
+    expect(chips.length).toBe(1);
   });
 
-  it('renders the chip labels in order', () => {
-    const labels = Array.from(
-      fx.nativeElement.querySelectorAll('chat-welcome-suggestion .chat-welcome-suggestion__label'),
-    ).map((el) => (el as HTMLElement).textContent?.trim());
-    expect(labels).toEqual(FEATURED_SUGGESTIONS.map((s) => s.label));
+  it('renders the first featured suggestion as the chip', () => {
+    const label = fx.nativeElement.querySelector(
+      'chat-welcome-suggestion .chat-welcome-suggestion__label',
+    ) as HTMLElement;
+    expect(label.textContent?.trim()).toBe(FEATURED_SUGGESTIONS[0].label);
   });
 
   it('renders the overflow chat-select with "More prompts" placeholder', () => {
@@ -33,19 +32,23 @@ describe('WelcomeSuggestionsComponent', () => {
     expect(trigger.textContent).toContain('More prompts');
   });
 
-  it('passes MORE_SUGGESTIONS through as chat-select options', () => {
+  it('merges FEATURED_SUGGESTIONS[1..] + MORE_SUGGESTIONS into dropdown options', () => {
     const opts = fx.componentInstance['moreOptions'] as { value: string; label: string }[];
-    expect(opts.length).toBe(MORE_SUGGESTIONS.length);
-    expect(opts.length).toBe(14);
-    expect(opts[0].label).toBe(MORE_SUGGESTIONS[0].label);
-    expect(opts[0].value).toBe(MORE_SUGGESTIONS[0].value);
+    const expectedLen = FEATURED_SUGGESTIONS.length - 1 + MORE_SUGGESTIONS.length;
+    expect(opts.length).toBe(expectedLen);
+    expect(opts[0].label).toBe(FEATURED_SUGGESTIONS[1].label);
+    expect(opts[0].value).toBe(FEATURED_SUGGESTIONS[1].value);
+    const moreStart = FEATURED_SUGGESTIONS.length - 1;
+    expect(opts[moreStart].label).toBe(MORE_SUGGESTIONS[0].label);
   });
 
-  it('emits (selected) when a chip is clicked', () => {
+  it('emits (selected) with the featured value when the chip is clicked', () => {
     let captured: string | null = null;
     fx.componentInstance.selected.subscribe((v) => (captured = v));
-    const firstChipBtn = fx.nativeElement.querySelector('chat-welcome-suggestion button') as HTMLButtonElement;
-    firstChipBtn.click();
+    const chipBtn = fx.nativeElement.querySelector(
+      'chat-welcome-suggestion button',
+    ) as HTMLButtonElement;
+    chipBtn.click();
     expect(captured).toBe(FEATURED_SUGGESTIONS[0].value);
   });
 });
diff --git a/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts b/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts
index 1e4e08de0..d5a9109bd 100644
--- a/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts
+++ b/examples/chat/angular/src/app/modes/welcome-suggestions.component.ts
@@ -9,9 +9,9 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
 
 /**
  * Demo-side composition that renders the welcome-state suggestion surface
- * as 3 curated chips above + a "More prompts" dropdown below for the
- * remaining demo prompts. Reuses `<chat-welcome-suggestion>` (chip) and
- * `<chat-select>` (the same primitive backing the model picker pill).
+ * as a single featured chip + a "More prompts" dropdown for everything
+ * else. The featured chip is `FEATURED_SUGGESTIONS[0]` — consumer
+ * controls which prompt is featured by ordering the array.
  *
  * Output `(selected)` fires with the suggestion's `value` for BOTH chip
  * clicks and dropdown picks — consumers wire it directly to
@@ -23,16 +23,13 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ChatWelcomeSuggestionComponent, ChatSelectComponent],
   template: `
-    <div class="welcome-suggestions__featured">
-      @for (s of featured; track s.value) {
-        <chat-welcome-suggestion
-          [label]="s.label"
-          [value]="s.value"
-          (selected)="selected.emit($event)"
-        />
-      }
-    </div>
-    <div class="welcome-suggestions__overflow">
+    <div class="welcome-suggestions__row">
+      <chat-welcome-suggestion
+        class="welcome-suggestions__featured"
+        [label]="featuredOne.label"
+        [value]="featuredOne.value"
+        (selected)="selected.emit($event)"
+      />
       <chat-select
         [options]="moreOptions"
         placeholder="More prompts"
@@ -45,23 +42,30 @@ import { FEATURED_SUGGESTIONS, MORE_SUGGESTIONS } from './welcome-suggestions';
     `
       :host {
         display: flex;
-        flex-direction: column;
+        justify-content: center;
+      }
+      .welcome-suggestions__row {
+        display: flex;
         align-items: center;
         gap: 12px;
       }
       .welcome-suggestions__featured {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        gap: 8px;
+        max-width: 380px;
+        overflow: hidden;
+      }
+      .welcome-suggestions__featured ::ng-deep .chat-welcome-suggestion__label {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     `,
   ],
 })
 export class WelcomeSuggestionsComponent {
   readonly selected = output<string>();
-  protected readonly featured = FEATURED_SUGGESTIONS;
-  protected readonly moreOptions: readonly ChatSelectOption[] = MORE_SUGGESTIONS.map(
-    (s) => ({ value: s.value, label: s.label }),
-  );
+  protected readonly featuredOne = FEATURED_SUGGESTIONS[0];
+  protected readonly moreOptions: readonly ChatSelectOption[] = [
+    ...FEATURED_SUGGESTIONS.slice(1),
+    ...MORE_SUGGESTIONS,
+  ].map((s) => ({ value: s.value, label: s.label }));
 }

From dad9b4a0b52cc52535714fcc185670c187799067 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:36:06 -0700
Subject: [PATCH 5/8] feat(chat): increase chat-message-actions padding to
 16px/12px

---
 .../chat-message-actions.styles.spec.ts                | 10 ++++++++++
 .../chat/src/lib/styles/chat-message-actions.styles.ts |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts

diff --git a/libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts b/libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts
new file mode 100644
index 000000000..e8e3353b2
--- /dev/null
+++ b/libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.styles.spec.ts
@@ -0,0 +1,10 @@
+// SPDX-License-Identifier: MIT
+import { describe, it, expect } from 'vitest';
+import { CHAT_MESSAGE_ACTIONS_STYLES } from '../../styles/chat-message-actions.styles';
+
+describe('CHAT_MESSAGE_ACTIONS_STYLES', () => {
+  it('sets 16px top / 12px bottom padding on :host so the actions row has breathing room', () => {
+    const normalized = CHAT_MESSAGE_ACTIONS_STYLES.replace(/\s+/g, ' ');
+    expect(normalized).toMatch(/:host\s*\{[^}]*padding:\s*16px\s+0\s+12px\s+0\s*;/);
+  });
+});
diff --git a/libs/chat/src/lib/styles/chat-message-actions.styles.ts b/libs/chat/src/lib/styles/chat-message-actions.styles.ts
index 92664df26..c1177bde8 100644
--- a/libs/chat/src/lib/styles/chat-message-actions.styles.ts
+++ b/libs/chat/src/lib/styles/chat-message-actions.styles.ts
@@ -7,7 +7,7 @@ export const CHAT_MESSAGE_ACTIONS_STYLES = `
   :host {
     display: flex;
     gap: 0.5rem;
-    padding: 4px 0 0 0;
+    padding: 16px 0 12px 0;
     opacity: 0;
     transition: opacity 200ms ease;
     pointer-events: none;

From 3ebb8bdda5e8bf319a324a78cd3221736066e261 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:37:13 -0700
Subject: [PATCH 6/8] feat(chat): add scroll-fade overlay above chat-window
 footer

---
 .../chat-window/chat-window.component.spec.ts         | 11 +++++++++++
 .../primitives/chat-window/chat-window.component.ts   |  5 ++++-
 libs/chat/src/lib/styles/chat-window.styles.ts        | 10 ++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts b/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
index 5054ed1b8..5e83b3f50 100644
--- a/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
+++ b/libs/chat/src/lib/primitives/chat-window/chat-window.component.spec.ts
@@ -28,4 +28,15 @@ describe('ChatWindowComponent', () => {
     expect(win.querySelector('.chat-window__body')!.textContent).toContain('messages here');
     expect(win.querySelector('.chat-window__footer')!.textContent).toContain('input here');
   });
+
+  it('renders a scroll-fade overlay as the first child of the footer', () => {
+    TestBed.configureTestingModule({});
+    const fx = TestBed.createComponent(Host);
+    fx.detectChanges();
+    const footer = fx.nativeElement.querySelector('.chat-window__footer') as HTMLElement;
+    const fade = footer.firstElementChild as HTMLElement;
+    expect(fade).toBeTruthy();
+    expect(fade.classList.contains('chat-window__scroll-fade')).toBe(true);
+    expect(fade.getAttribute('aria-hidden')).toBe('true');
+  });
 });
diff --git a/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts b/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
index 17077e142..71f8e6d13 100644
--- a/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
+++ b/libs/chat/src/lib/primitives/chat-window/chat-window.component.ts
@@ -12,7 +12,10 @@ import { CHAT_WINDOW_STYLES } from '../../styles/chat-window.styles';
   template: `
     <div class="chat-window__header"><ng-content select="[chatHeader]" /></div>
     <div class="chat-window__body"><ng-content select="[chatBody]" /></div>
-    <div class="chat-window__footer"><ng-content select="[chatFooter]" /></div>
+    <div class="chat-window__footer">
+      <div class="chat-window__scroll-fade" aria-hidden="true"></div>
+      <ng-content select="[chatFooter]" />
+    </div>
   `,
 })
 export class ChatWindowComponent {}
diff --git a/libs/chat/src/lib/styles/chat-window.styles.ts b/libs/chat/src/lib/styles/chat-window.styles.ts
index 0f9c9cce1..bb97c35b6 100644
--- a/libs/chat/src/lib/styles/chat-window.styles.ts
+++ b/libs/chat/src/lib/styles/chat-window.styles.ts
@@ -29,8 +29,18 @@ export const CHAT_WINDOW_STYLES = `
     overflow: hidden;
   }
   .chat-window__footer {
+    position: relative;
     flex-shrink: 0;
     margin-top: var(--ngaf-chat-input-gap);
   }
   .chat-window__footer:empty { display: none; }
+  .chat-window__scroll-fade {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 100%;
+    height: 32px;
+    background: linear-gradient(180deg, transparent 0%, var(--ngaf-chat-bg) 100%);
+    pointer-events: none;
+  }
 `;

From 44d6e40a6840eff2de9a16859dddad4e7cbdb735 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:37:50 -0700
Subject: [PATCH 7/8] =?UTF-8?q?chore(chat):=20release=200.0.36=20=E2=80=94?=
 =?UTF-8?q?=20scroll-fade=20+=20actions=20padding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libs/chat/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/chat/package.json b/libs/chat/package.json
index f7231f41e..b914a3cbd 100644
--- a/libs/chat/package.json
+++ b/libs/chat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "exports": {
     ".": {
       "types": "./index.d.ts",

From 0adbec60acd999cb420195bd475cba707137dc40 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Sun, 17 May 2026 09:45:22 -0700
Subject: [PATCH 8/8] chore(release): bump remaining @ngaf libs to 0.0.36 for
 uniform publishable release

---
 libs/a2ui/package.json      | 2 +-
 libs/ag-ui/package.json     | 2 +-
 libs/langgraph/package.json | 2 +-
 libs/licensing/package.json | 2 +-
 libs/render/package.json    | 2 +-
 libs/telemetry/package.json | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/a2ui/package.json b/libs/a2ui/package.json
index eb2a35bab..a12781edf 100644
--- a/libs/a2ui/package.json
+++ b/libs/a2ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/a2ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/ag-ui/package.json b/libs/ag-ui/package.json
index c9e127d7a..b36cd7c7b 100644
--- a/libs/ag-ui/package.json
+++ b/libs/ag-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/ag-ui",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",
diff --git a/libs/langgraph/package.json b/libs/langgraph/package.json
index 8d11d562a..99d2b9d73 100644
--- a/libs/langgraph/package.json
+++ b/libs/langgraph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/langgraph",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",
diff --git a/libs/licensing/package.json b/libs/licensing/package.json
index 1f3be77ad..d9bce259f 100644
--- a/libs/licensing/package.json
+++ b/libs/licensing/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/licensing",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/render/package.json b/libs/render/package.json
index a3a7fddd9..410302b47 100644
--- a/libs/render/package.json
+++ b/libs/render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/render",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^21.0.0",
     "@angular/common": "^20.0.0 || ^21.0.0",
diff --git a/libs/telemetry/package.json b/libs/telemetry/package.json
index 09e7b7d4e..6b7f5ab7a 100644
--- a/libs/telemetry/package.json
+++ b/libs/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/telemetry",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "license": "MIT",
   "publishConfig": {
     "access": "public"