fix(chat): a11y + UX polish caught by live browser smoke (0.0.25) (#198)

* fix(chat): a11y + UX polish caught by live browser smoke (0.0.25)

Three fixes from continued live Chrome smoke testing of @ngaf/chat 0.0.24:

1. **Textarea auto-resize**: rows="1" with no auto-grow logic meant
   multi-line input via Shift+Enter was hidden behind the fixed 24px
   height (scrollHeight grew to 72px+ while clientHeight stayed at 24px).
   Added an effect() that resizes el.style.height to scrollHeight on
   every messageText change, capped at 200px (~8 lines) before
   switching to overflow scrolling.

2. **Escape closes model picker from trigger**: ChatSelectComponent
   handled Escape only on keydown inside the menu (focused option).
   When user clicked the trigger to open and pressed Escape without
   arrowing into the menu, the keypress hit the trigger which only
   handled Enter/Space/ArrowDown — Escape was ignored and the menu
   stayed open until click-outside. Added Escape branch to
   onTriggerKeydown.

3. **aria-pressed on rating toggle buttons**: thumbs-up/down rendered
   visual is-active class but no aria-pressed attribute. Screen
   readers couldn't communicate toggle state. Added [attr.aria-pressed]
   bound to the rating signal.

Synchronized version bump to 0.0.25 across all 16 @Ngaf libs.

* fix(chat): pass [message] to assistant <chat-message> for citations panel

Live Chrome smoke against published 0.0.24 caught: chat-citations is
template-conditioned on @if (message()?.role === 'assistant' && message()),
but the chat composition did not pass [message]="message" to
<chat-message>. So message() was always undefined inside chat-message,
the @if branch was falsy, and <chat-citations> never rendered — even when
markdown citation defs existed in the message content.

This was the missing piece of the 0.0.24 sources panel fix. Three of the
four fixes worked end-to-end (table rows, citation no-url span, task-list
checkbox layout); the panel itself silently never appeared.

Fix: add [message]="message" to the assistant <chat-message> in
chat.component.ts. The user/system variants don't need it.

* fix(chat): clipboard fallback on writeText rejection

Live Chrome smoke caught: when navigator.clipboard.writeText rejects
(permissions, non-secure context, document-not-focused), the catch
silently swallowed the error. The textarea+execCommand legacy path was
only used when clipboard API was missing — not when it failed.

Refactored: try Async Clipboard API first; on rejection, fall through
to the textarea legacy path. Only set copied state when at least one
path succeeded.

* fix(chat): wide-table overflow scroll + broken-image alt fallback

Live Chrome smoke caught:

1. Wide tables (8+ columns or long content) had no overflow handling.
   chat-md-table used 'display: contents' so the inner <table> dictated
   width, with parent at viewport width — wider tables overflowed
   horizontally with no scroll wrapper. Fixed: chat-md-table now uses
   'display: block; overflow-x: auto; max-width: 100%' so wide tables
   scroll within their message bubble. Row/cell elements stay
   layout-transparent so browser table layout still works.

2. Broken images (404 / invalid URL) showed only the browser's default
   broken-image icon with no readable alt text. Fixed: <img> now binds
   (error) to a 'failed' signal that swaps to a styled fallback pill
   showing the alt text and a placeholder icon. Pill uses the same
   surface-alt background as code blocks for consistency.

Author: blove

libs/a2ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/a2ui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "license": "MIT",
   "repository": {
     "type": "git",

libs/ag-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/ag-ui",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "peerDependencies": {
     "@ngaf/chat": "*",
     "@ngaf/licensing": "*",

libs/chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngaf/chat",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "exports": {
     ".": {
       "types": "./index.d.ts",

libs/chat/src/lib/compositions/chat/chat.component.ts

@@ -139,6 +139,7 @@ import type { ChatRenderEvent } from './chat-render-event';
                 @let classified = classifyMessage(content, message);
                 <chat-message
                   [role]="'assistant'"
+                  [message]="message"
                   [prevRole]="prevRole(i)"
                   [streaming]="agent().isLoading() && i === agent().messages().length - 1"
                   [current]="i === agent().messages().length - 1"

libs/chat/src/lib/markdown/views/markdown-image.component.ts

@@ -1,14 +1,36 @@
 // libs/chat/src/lib/markdown/views/markdown-image.component.ts
 // SPDX-License-Identifier: MIT
-import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
 import type { MarkdownImageNode } from '@cacheplane/partial-markdown';
 
 @Component({
   selector: 'chat-md-image',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<img [src]="node().url" [alt]="node().alt" [attr.title]="node().title || null" />`,
+  template: `
+    @if (failed()) {
+      <span class="chat-md-image chat-md-image--broken"
+            role="img"
+            [attr.aria-label]="node().alt || node().url"
+            [attr.title]="node().title || node().url || null">
+        <span class="chat-md-image__icon" aria-hidden="true">🖼️</span>
+        @if (node().alt) {
+          <span class="chat-md-image__alt">{{ node().alt }}</span>
+        } @else {
+          <span class="chat-md-image__alt">image unavailable</span>
+        }
+      </span>
+    } @else {
+      <img
+        [src]="node().url"
+        [alt]="node().alt"
+        [attr.title]="node().title || null"
+        (error)="failed.set(true)"
+      />
+    }
+  `,
 })
 export class MarkdownImageComponent {
   readonly node = input.required<MarkdownImageNode>();
+  protected readonly failed = signal(false);
 }

libs/chat/src/lib/primitives/chat-input/chat-input.component.spec.ts

@@ -121,4 +121,18 @@ describe('ChatInputComponent', () => {
     const controls = (fixture.nativeElement as HTMLElement).querySelector('.chat-input__controls');
     expect(controls).not.toBeNull();
   });
+
+  it('auto-resizes textarea height when messageText changes — bug #198 regression', () => {
+    // Live Chrome smoke caught: rows="1" textarea did not grow with
+    // multi-line input. clientHeight stayed at 24px while scrollHeight
+    // grew to 72px+, hiding lines past the first. Fix: an effect() sets
+    // el.style.height = scrollHeight (capped at 200px) on every change.
+    const textarea = (fixture.nativeElement as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
+    expect(textarea).not.toBeNull();
+    fixture.componentInstance.messageText.set('line one\nline two\nline three');
+    fixture.detectChanges();
+    // The effect sets el.style.height; jsdom layout produces a value (
+    // possibly '0px' due to no real layout, but the property is set).
+    expect(textarea.style.height).not.toBe('');
+  });
 });

libs/chat/src/lib/primitives/chat-input/chat-input.component.ts

@@ -3,6 +3,7 @@
 import {
   Component,
   computed,
+  effect,
   input,
   output,
   signal,
@@ -116,6 +117,30 @@ export class ChatInputComponent {
 
   private readonly textareaEl = viewChild<ElementRef<HTMLTextAreaElement>>('textareaEl');
 
+  /** Maximum auto-grow height in pixels. Caps at ~8 lines; beyond that, scroll. */
+  private static readonly MAX_AUTO_HEIGHT_PX = 200;
+
+  /**
+   * Auto-resize the textarea to fit its content as the user types or pastes
+   * multi-line text. Caps at MAX_AUTO_HEIGHT_PX; beyond that the textarea
+   * scrolls. Without this, multi-line input is hidden behind the rows="1"
+   * fixed height (caught by live browser smoke).
+   */
+  constructor() {
+    effect(() => {
+      const text = this.messageText();
+      const el = this.textareaEl()?.nativeElement;
+      if (!el) return;
+      // Reset to allow scrollHeight to shrink when content shortens.
+      el.style.height = 'auto';
+      const next = Math.min(el.scrollHeight, ChatInputComponent.MAX_AUTO_HEIGHT_PX);
+      el.style.height = `${next}px`;
+      el.style.overflowY = el.scrollHeight > ChatInputComponent.MAX_AUTO_HEIGHT_PX ? 'auto' : 'hidden';
+      // Reference text so the effect re-runs on every change.
+      void text;
+    });
+  }
+
   focusTextarea(): void {
     this.textareaEl()?.nativeElement.focus();
   }

libs/chat/src/lib/primitives/chat-message-actions/chat-message-actions.component.ts

@@ -57,6 +57,7 @@ import { CHAT_MESSAGE_ACTIONS_STYLES } from '../../styles/chat-message-actions.s
       type="button"
       class="chat-message-actions__btn"
       [class.is-active]="rating() === 'up'"
+      [attr.aria-pressed]="rating() === 'up'"
       aria-label="Thumbs up"
       title="Good response"
       (click)="onRate('up')"
@@ -70,6 +71,7 @@ import { CHAT_MESSAGE_ACTIONS_STYLES } from '../../styles/chat-message-actions.s
       type="button"
       class="chat-message-actions__btn"
       [class.is-active]="rating() === 'down'"
+      [attr.aria-pressed]="rating() === 'down'"
       aria-label="Thumbs down"
       title="Poor response"
       (click)="onRate('down')"
@@ -99,25 +101,38 @@ export class ChatMessageActionsComponent {
   protected async onCopy(): Promise<void> {
     const text = this.content();
     if (!text) return;
-    try {
-      const win = this.document.defaultView;
-      if (win?.navigator?.clipboard?.writeText) {
+    let succeeded = false;
+    const win = this.document.defaultView;
+    // Prefer Async Clipboard API; fall back to execCommand if it rejects
+    // (e.g. permissions, non-secure context, document-not-focused). The
+    // prior impl gated the fallback only on API absence, so a rejecting
+    // API silently failed with no user feedback.
+    if (win?.navigator?.clipboard?.writeText) {
+      try {
         await win.navigator.clipboard.writeText(text);
-      } else {
+        succeeded = true;
+      } catch {
+        // Async API failed — fall through to legacy path below.
+      }
+    }
+    if (!succeeded) {
+      try {
         const ta = this.document.createElement('textarea');
         ta.value = text;
         ta.style.position = 'fixed';
         ta.style.opacity = '0';
         this.document.body.appendChild(ta);
         ta.select();
-        this.document.execCommand?.('copy');
+        succeeded = !!this.document.execCommand?.('copy');
         ta.remove();
+      } catch {
+        // Both paths failed — leave copied state unchanged.
       }
+    }
+    if (succeeded) {
       this.copied.set(true);
       this.contentCopied.emit(text);
       setTimeout(() => this.copied.set(false), 2000);
-    } catch {
-      // Silent fail — clipboard may be blocked by permissions.
     }
   }
 

libs/chat/src/lib/primitives/chat-select/chat-select.component.spec.ts

@@ -97,6 +97,21 @@ describe('ChatSelectComponent', () => {
     expect(host.querySelector('.chat-select__menu')).toBeNull();
   });
 
+  it('closes the menu on Escape when focus is still on the trigger — bug #198 regression', () => {
+    // Live Chrome smoke caught: clicking the trigger to open the menu leaves
+    // focus on the trigger (not the menu). Pressing Escape there used to be
+    // ignored — only Escape inside the menu was handled. Fix: handle Escape
+    // in onTriggerKeydown when the menu is open.
+    const trigger = host.querySelector<HTMLButtonElement>('.chat-select__trigger')!;
+    trigger.click();
+    fixture.detectChanges();
+    expect(host.querySelector('.chat-select__menu')).not.toBeNull();
+    const evt = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+    trigger.dispatchEvent(evt);
+    fixture.detectChanges();
+    expect(host.querySelector('.chat-select__menu')).toBeNull();
+  });
+
   it('disables the trigger when [disabled]=true', () => {
     setSignalInput(fixture, 'disabled', true);
     fixture.detectChanges();

libs/chat/src/lib/primitives/chat-select/chat-select.component.ts

@@ -139,6 +139,15 @@ export class ChatSelectComponent {
 
   protected onTriggerKeydown(e: KeyboardEvent): void {
     if (this.disabled()) return;
+    // Escape closes an open menu when focus is still on the trigger
+    // (e.g. user clicked to open, then pressed Escape without arrowing
+    // into the menu). Caught by live browser smoke — without this, click
+    // + Escape leaves the menu open until the user clicks outside.
+    if (e.key === 'Escape' && this.open()) {
+      e.preventDefault();
+      this.open.set(false);
+      return;
+    }
     if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
       e.preventDefault();
       this.open.set(true);