From b5cd354e6573d55d6d456c1322a0081c2c17b303 Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Sun, 6 Sep 2026 10:34:35 -0600
Subject: [PATCH 1/2] feat(announcements): move the banner above the chat
 composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The banner sat at the top of the shell. What it announces — a new model, a
new capability — is acted on in the composer, so the notice now lives where
the decision is made rather than in a corner the eye has already left. It
mounts from `chat-input` beside `quota-warning-banner`, which is where users
already look for ambient notices.

It still floats rather than stacking in flow. `bottom-full` against a
`relative` chat-input host puts it clear of the quota tabs, which stay
attached to the input, and keeps the property from the previous change:
measured before and after a dismissal, the composer, greeting and scroll
container all move by exactly 0px. Restyled to match the sibling it now sits
beside — a compact shrink-to-fit pill rather than a bar spanning the composer,
which also shrinks how much it overlays.

**It is now a chat-view surface only.** That is the real consequence of the
move and it is deliberate: What's New remains the everywhere-record, which is
why `panel` is forced onto every announcement server-side. The spec's §D1 is
updated to say so rather than leaving the doc describing a placement that no
longer exists, and the two admin help strings that told authors "a strip below
the top nav" now describe where a banner actually appears.

`chat-input` is reused by the agent-preview and marketplace test-drive panes,
where a platform-wide notice would read as a bug rather than an announcement.
A `showAnnouncements` input gates it, following the same opt-out shape as the
`show*` controls beside it: default true, explicitly false at those two call
sites, and threaded through `chat-container` so its embedded mode is off too.

The shell mount and its `isAuthenticated()` gate are gone with it — the
composer only exists inside an authenticated chat route, so the 401-on-login
hazard that gate existed for is now structural rather than guarded.

Three real test failures found and fixed on the way: two `chat-container`
specs stub `app-chat-input` and needed the new input added to the stub, and
one of the banner's own assertions was stale after the restyle. Full frontend
suite 2486 passed, only the known `submission-review` flake outstanding.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 docs/specs/feature-announcements.md           | 18 +++++++++--
 .../announcement-form.page.ts                 |  2 +-
 .../manage-announcements.page.ts              |  3 +-
 .../components/review-test-drive.component.ts |  1 +
 .../components/agent-preview.component.ts     |  1 +
 frontend/ai.client/src/app/app.html           | 10 +------
 frontend/ai.client/src/app/app.ts             | 18 -----------
 .../announcement-banner.component.spec.ts     | 27 ++++++++++-------
 .../announcement-banner.component.ts          | 30 +++++++++++--------
 .../chat-container.component.branding.spec.ts |  1 +
 .../chat-container.component.html             |  6 ++++
 .../chat-container.component.ts               | 11 +++++++
 .../chat-container.error-handling.spec.ts     |  1 +
 .../chat-input/chat-input.component.html      |  8 +++++
 .../chat-input/chat-input.component.ts        | 17 ++++++++++-
 15 files changed, 98 insertions(+), 56 deletions(-)

diff --git a/docs/specs/feature-announcements.md b/docs/specs/feature-announcements.md
index 635b5306..bd199615 100644
--- a/docs/specs/feature-announcements.md
+++ b/docs/specs/feature-announcements.md
@@ -84,8 +84,20 @@ An announcement carries `surfaces: list[Literal["panel", "banner", "modal"]]`.
   never interrupts, browsable forever. **Implied on every announcement**: the
   service adds `"panel"` if the admin omits it, so dismissing a loud surface
   can never destroy the information.
-- **`banner`** — a strip below the top nav, rendered by a sibling of
-  `quota-warning-banner`. One line plus an optional CTA and a ✕.
+- **`banner`** — a compact pill floating just above the chat composer,
+  rendered by a sibling of `quota-warning-banner`. One line plus an optional
+  CTA and a ✕.
+
+  *Revised after PR-4 shipped.* It was first built as a full-bleed strip below
+  the top nav. Two things moved it. Dismissing a strip that occupied layout
+  reflowed the whole view, so it became an overlay; and what a banner
+  announces — a new model, a new capability — is acted on **in the composer**,
+  so the notice belongs where the decision is made rather than in a corner the
+  eye has already left. The consequence to keep in mind: the banner is now a
+  **chat-view surface only**, and it is deliberately suppressed in the
+  embedded preview panes (agent preview, marketplace test-drive). The panel
+  remains the everywhere-record, which is why `panel` is forced onto every
+  announcement server-side.
 - **`modal`** — a dialog on next load. This is the only surface that can
   demand a real acknowledgement (`requiresAck`).
 
@@ -474,7 +486,7 @@ from §D7.
 | Component | Location | Notes |
 |---|---|---|
 | Whats-new panel | `components/topnav/components/whats-new-panel/` | Dialog listing panel items newest-first, relative dates, **New** / **Updated** pills, markdown body. Opens from the user dropdown; unread dot on the avatar and the menu row. Mirrors `user-menu-link-modal`. |
-| Announcement banner | `components/announcement-banner/` | Sibling of `quota-warning-banner`. `role="status"`, `aria-live="polite"`, severity colours from the `state-*` token scale that banner already uses, ✕ + optional CTA. |
+| Announcement banner | `components/announcement-banner/` | Mounted by `chat-input` beside `quota-warning-banner`, floated `bottom-full` so dismissing it never moves the composer. `role="status"`, `aria-live="polite"`, severity colours from the `state-*` token scale, ✕ + optional CTA. Gated off in embedded panes via `[showAnnouncements]="false"`. |
 | Announcement modal | `components/announcement-modal/` | `user-menu-link-modal` plus a primary ack button. When `requiresAck`, `appDialogDismiss` and the escape handler are disabled so the only exit is the button. |
 | Admin list | `admin/manage-announcements/manage-announcements.page.ts` | Mirrors `manage-user-menu-links`. State chips, surface icons, ack counts, "Show again" action. |
 | Admin form | `admin/manage-announcements/announcement-form.page.ts` | Title, markdown body with live preview, surface checkboxes, severity, schedule, role picker, `showToNewUsers` (with the §D6 warning text), `requiresAck`, CTA. |
diff --git a/frontend/ai.client/src/app/admin/manage-announcements/announcement-form.page.ts b/frontend/ai.client/src/app/admin/manage-announcements/announcement-form.page.ts
index 054812ac..66ac5a7a 100644
--- a/frontend/ai.client/src/app/admin/manage-announcements/announcement-form.page.ts
+++ b/frontend/ai.client/src/app/admin/manage-announcements/announcement-form.page.ts
@@ -178,7 +178,7 @@ function byteLength(value: string): number {
                   class="mt-1 size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                 />
                 <label for="surface-banner" class="text-sm/6 text-gray-700 dark:text-gray-300">
-                  <span class="font-medium">Banner</span> — a strip below the top nav
+                  <span class="font-medium">Banner</span> — a pill above the chat composer
                   <span class="block text-xs text-gray-500 dark:text-gray-400">
                     Ambient. Dismissible with a ✕.
                   </span>
diff --git a/frontend/ai.client/src/app/admin/manage-announcements/manage-announcements.page.ts b/frontend/ai.client/src/app/admin/manage-announcements/manage-announcements.page.ts
index 78fb4070..a4542cde 100644
--- a/frontend/ai.client/src/app/admin/manage-announcements/manage-announcements.page.ts
+++ b/frontend/ai.client/src/app/admin/manage-announcements/manage-announcements.page.ts
@@ -305,7 +305,8 @@ export class ManageAnnouncementsPage {
   }
 
   protected surfaceHint(surface: string): string {
-    if (surface === 'banner') return 'A strip below the top nav. At most one at a time.';
+    if (surface === 'banner')
+      return 'A pill above the chat composer, in the chat view only. At most one at a time.';
     if (surface === 'modal') return 'A dialog on next load. At most one at a time.';
     return "Always on. The What's New entry in the user menu.";
   }
diff --git a/frontend/ai.client/src/app/admin/marketplace/components/review-test-drive.component.ts b/frontend/ai.client/src/app/admin/marketplace/components/review-test-drive.component.ts
index f39114d5..956f042e 100644
--- a/frontend/ai.client/src/app/admin/marketplace/components/review-test-drive.component.ts
+++ b/frontend/ai.client/src/app/admin/marketplace/components/review-test-drive.component.ts
@@ -144,6 +144,7 @@ import { PreviewChatService } from '../../../assistants/assistant-form/services/
               [showSettingsControl]="false"
               [autoFocus]="false"
               [showAgentMentions]="false"
+              [showAnnouncements]="false"
               (messageSubmitted)="onMessageSubmitted($event)"
               (messageCancelled)="onMessageCancelled()"
             />
diff --git a/frontend/ai.client/src/app/agents/agent-form/components/agent-preview.component.ts b/frontend/ai.client/src/app/agents/agent-form/components/agent-preview.component.ts
index 0e9f899b..1d46e148 100644
--- a/frontend/ai.client/src/app/agents/agent-form/components/agent-preview.component.ts
+++ b/frontend/ai.client/src/app/agents/agent-form/components/agent-preview.component.ts
@@ -114,6 +114,7 @@ import { ModelService } from '../../../session/services/model/model.service';
                 [showSettingsControl]="false"
                 [autoFocus]="false"
                 [showAgentMentions]="false"
+                [showAnnouncements]="false"
                 (messageSubmitted)="onMessageSubmitted($event)"
                 (messageCancelled)="onMessageCancelled()"
               />
diff --git a/frontend/ai.client/src/app/app.html b/frontend/ai.client/src/app/app.html
index 678a891a..2ebb042d 100644
--- a/frontend/ai.client/src/app/app.html
+++ b/frontend/ai.client/src/app/app.html
@@ -107,15 +107,7 @@
     [class.lg:pl-72]="!sidenavService.isCollapsed() && !chromeHidden()"
     [class.lg:pl-0]="sidenavService.isCollapsed() || chromeHidden()"
     [class.artifact-pane-open]="artifactPanelOpen()">
-    <main class="relative flex h-dvh flex-col">
-      <!-- Ambient announcement strip (spec §D1). Positioned `absolute` against
-           this `relative` main, so showing or dismissing it never reflows the
-           page. `relative` is load-bearing: without it the pill would anchor
-           to the viewport and drift out from under the sidenav padding. -->
-      @if (showAnnouncementBanner()) {
-        <app-announcement-banner />
-      }
-
+    <main class="flex h-dvh flex-col">
       <!-- Scrollable Content. The id is a stable hook for code that reads
            or sets the scroll position (session scroll save/restore) — the
            window itself no longer scrolls now that this container is real. -->
diff --git a/frontend/ai.client/src/app/app.ts b/frontend/ai.client/src/app/app.ts
index 2ece0042..b713f2e9 100644
--- a/frontend/ai.client/src/app/app.ts
+++ b/frontend/ai.client/src/app/app.ts
@@ -7,7 +7,6 @@ import { Sidenav } from './components/sidenav/sidenav';
 import { ErrorToastComponent } from './components/error-toast/error-toast.component';
 import { ToastComponent } from './components/toast';
 import { BackgroundTaskToastsComponent } from './components/background-task-toasts/background-task-toasts.component';
-import { AnnouncementBannerComponent } from './components/announcement-banner/announcement-banner.component';
 import { SidenavService } from './services/sidenav/sidenav.service';
 import { HeaderService } from './services/header/header.service';
 import { TooltipDirective } from './components/tooltip/tooltip.directive';
@@ -25,7 +24,6 @@ import { BrandingService } from '../branding/branding.service';
     ErrorToastComponent,
     ToastComponent,
     BackgroundTaskToastsComponent,
-    AnnouncementBannerComponent,
     TooltipDirective
   ],
   templateUrl: './app.html',
@@ -74,22 +72,6 @@ export class App {
     () => this.sidenavService.isHidden() || this.minimalChrome(),
   );
 
-  /**
-   * Whether the ambient announcement strip renders.
-   *
-   * Gated on the session, not just the chrome. `AnnouncementsService` loads
-   * its feed lazily on the first read of `bannerItem()`, and `resource()`
-   * loads exactly once — so instantiating the banner on the login screen
-   * would fire `GET /announcements` unauthenticated, take the 401's
-   * empty-feed fallback, and then never retry. The user would land in the
-   * app with announcements permanently missing for the life of the tab.
-   * Waiting for `isAuthenticated()` also keeps the server's role-based
-   * targeting honest: it needs the session to evaluate it.
-   */
-  protected readonly showAnnouncementBanner = computed(
-    () => this.session.isAuthenticated() && !this.minimalChrome(),
-  );
-
   /** True while an artifact pane is docked — content reserves right-side
    *  space for it (desktop only) so the fixed panel doesn't occlude chat. */
   protected readonly artifactPanelOpen = computed(
diff --git a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
index b79a832c..8dab8d19 100644
--- a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
@@ -197,9 +197,9 @@ describe('AnnouncementBannerComponent', () => {
       expect(host.className).not.toContain('block');
     });
 
-    it('lets clicks through the positioning strip to the chrome beneath', () => {
-      // The strip spans the full content width. Without this, it would
-      // swallow clicks aimed at the topnav and the sidebar buttons under it.
+    it('lets clicks through the positioning strip to whatever is beneath', () => {
+      // The strip spans the composer's full width. Without this, it would
+      // swallow clicks aimed at the message list behind it.
       bannerItem.set(makeAnnouncement());
       const fixture = create();
       const host = fixture.nativeElement as HTMLElement;
@@ -208,23 +208,28 @@ describe('AnnouncementBannerComponent', () => {
       expect(strip(fixture)!.className).toContain('pointer-events-auto');
     });
 
-    it('clears the topnav and the floating sidenav controls', () => {
-      // `top-16` puts the pill just below a chat route's fixed topnav, and
-      // below the shell's `top-4` sidebar buttons everywhere else — one
-      // constant instead of route awareness.
+    it('floats above the composer rather than stacking in flow with it', () => {
+      // `bottom-full` against the `relative` chat-input host: the pill sits
+      // clear of the quota tabs, which stay attached to the input, and
+      // dismissing it cannot move the composer under the user's cursor.
       bannerItem.set(makeAnnouncement());
       const fixture = create();
-      expect((fixture.nativeElement as HTMLElement).className).toContain('top-16');
+      const host = (fixture.nativeElement as HTMLElement).className;
+      expect(host).toContain('bottom-full');
+      expect(host).not.toContain('top-16');
     });
 
-    it('reads as a floating card, not a full-bleed strip', () => {
+    it('reads as a compact tab beside the quota warning, not a full-bleed strip', () => {
       bannerItem.set(makeAnnouncement());
       const fixture = create();
       const pill = strip(fixture)!;
 
       expect(pill.className).toContain('rounded-2xl');
-      expect(pill.className).toContain('shadow-lg');
-      expect(pill.className).toContain('max-w-2xl');
+      expect(pill.className).toContain('shadow-md');
+      // Shrink-to-fit, so it reads as a sibling of the quota tab rather than
+      // a bar spanning the composer.
+      expect(pill.className).toContain('inline-flex');
+      expect(pill.className).toContain('text-xs');
       // The old full-bleed look leaned on a bottom border instead.
       expect(pill.className).not.toContain('border-b');
     });
diff --git a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
index 0349243d..d064dd93 100644
--- a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
@@ -49,11 +49,17 @@ import {
  * `--announcement-banner-height`: nothing has to move any more, so that
  * variable, its `ResizeObserver`, and all three offsets are gone.
  *
- * `top-16` is not arbitrary. On a chat route it lands the pill immediately
- * below the fixed topnav — the placement §D1 asks for — and everywhere else
- * it clears the shell's floating sidenav controls, which sit at `top-4` and
- * would otherwise be overlapped by a centred pill on any viewport narrow
- * enough for the two to meet. One constant, no route awareness.
+ * **It lives above the composer, not at the top of the shell.** A deviation
+ * from §D1's "strip below the top nav", and a deliberate one: what these
+ * announce — a new model, a new capability — is acted on in the composer, so
+ * the notice belongs where the decision is made rather than in a corner the
+ * eye has already left. It mounts from `chat-input` beside
+ * `quota-warning-banner` for that reason, which also means it is a **chat
+ * surface only**; What's New remains the everywhere-record, which is why
+ * `panel` is forced onto every announcement server-side.
+ *
+ * `bottom-full` against the `relative` chat-input host puts it clear of the
+ * quota tabs, which stay visually attached to the input.
  *
  * The wrapper is `pointer-events-none` and only the pill itself takes events,
  * so the full-width positioning strip cannot swallow clicks aimed at the
@@ -79,23 +85,23 @@ import {
     // The positioning strip. `pointer-events-none` here (and `auto` on the
     // pill) keeps it from swallowing clicks meant for the chrome beneath.
     class:
-      'pointer-events-none absolute inset-x-0 top-16 z-50 flex justify-center px-4',
+      'pointer-events-none absolute inset-x-0 bottom-full z-30 mb-2 flex justify-center px-4',
   },
   template: `
     @if (announcement(); as item) {
       <div
-        class="pointer-events-auto flex w-full max-w-2xl items-center gap-x-3 rounded-2xl border px-4 py-2.5 shadow-lg sm:px-5"
+        class="pointer-events-auto inline-flex max-w-full items-center gap-x-2 rounded-2xl border px-3 py-1.5 text-xs shadow-md"
         [class]="severityClass()"
         role="status"
         aria-live="polite"
       >
         <ng-icon
           [name]="iconName()"
-          class="size-5 shrink-0"
+          class="size-4 shrink-0"
           aria-hidden="true"
         />
 
-        <p class="min-w-0 flex-1 truncate text-sm/6 font-medium">
+        <p class="min-w-0 truncate font-medium">
           {{ bannerText() }}
         </p>
 
@@ -104,7 +110,7 @@ import {
             [href]="item.cta_url"
             target="_blank"
             rel="noopener noreferrer"
-            class="shrink-0 text-sm/6 font-semibold underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+            class="shrink-0 font-semibold underline underline-offset-2 hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
           >
             {{ item.cta_label }}
           </a>
@@ -114,9 +120,9 @@ import {
           type="button"
           (click)="onDismiss()"
           [attr.aria-label]="'Dismiss announcement: ' + item.title"
-          class="-mr-1 flex size-7 shrink-0 items-center justify-center rounded-2xl hover:bg-black/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current dark:hover:bg-white/10"
+          class="-mr-1 flex size-5 shrink-0 items-center justify-center rounded-full hover:bg-black/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current dark:hover:bg-white/10"
         >
-          <ng-icon name="heroXMark" class="size-4" aria-hidden="true" />
+          <ng-icon name="heroXMark" class="size-3.5" aria-hidden="true" />
         </button>
       </div>
     }
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
index eed3c92e..7f9b98d9 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
@@ -33,6 +33,7 @@ class ChatInputStub {
   readonly showFileControls = input<boolean>(true);
   readonly showVoiceControl = input<boolean>(true);
   readonly showSettingsControl = input<boolean>(true);
+  readonly showAnnouncements = input<boolean>(true);
   readonly messageSubmitted = output<unknown>();
   readonly messageCancelled = output<void>();
   readonly fileAttached = output<File>();
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
index cad92035..a87c9219 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
@@ -64,6 +64,7 @@
       <!-- Fixed input at bottom for embedded empty state -->
       <div class="chat-input-footer embedded">
         <app-chat-input
+          [showAnnouncements]="showAnnouncements()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
@@ -123,6 +124,7 @@
       [class.artifact-pane-open]="artifactPanelOpen()">
         <div class="mx-auto px-4 max-w-[720px]">
           <app-chat-input
+            [showAnnouncements]="showAnnouncements()"
             [sessionId]="sessionId()"
             [isChatLoading]="isChatLoading()"
             [showFileControls]="resolvedConfig().showFileControls"
@@ -171,6 +173,7 @@
       [class.artifact-pane-open]="artifactPanelOpen()">
         <div class="mx-auto px-4 max-w-[720px]">
           <app-chat-input
+            [showAnnouncements]="showAnnouncements()"
             [sessionId]="sessionId()"
             [isChatLoading]="isChatLoading()"
             [showFileControls]="resolvedConfig().showFileControls"
@@ -224,6 +227,7 @@
 
           <div class="relative">
             <app-chat-input
+              [showAnnouncements]="showAnnouncements()"
               [sessionId]="sessionId()"
               [isChatLoading]="isChatLoading()"
               [showFileControls]="resolvedConfig().showFileControls"
@@ -294,6 +298,7 @@
           </div>
         }
         <app-chat-input
+          [showAnnouncements]="showAnnouncements()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
@@ -339,6 +344,7 @@
           <app-session-cost-badge />
         </div>
         <app-chat-input
+          [showAnnouncements]="showAnnouncements()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
index 279303cd..fd4816fa 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
@@ -223,6 +223,17 @@ export class ChatContainerComponent {
    * remounting — a remount restarts the fixed wrapper's `left` transition,
    * which reads as the whole bar sweeping across the screen.
    */
+  /**
+   * Whether a composer in this container may float an announcement.
+   *
+   * Off in embedded mode: an agent preview or a marketplace test-drive is
+   * exercising one specific agent, and a platform-wide notice inside that
+   * pane reads as a bug. The real chat is the only place it belongs.
+   */
+  protected readonly showAnnouncements = computed(
+    () => !this.resolvedConfig().embeddedMode,
+  );
+
   protected readonly showChatTopnav = computed(
     () =>
       this.resolvedConfig().fullPageMode &&
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
index 2a57f5d9..b6cebe93 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
@@ -35,6 +35,7 @@ describe('ChatContainerComponent — branding logo theme swap and error handling
     readonly showFileControls = input<boolean>(true);
     readonly showVoiceControl = input<boolean>(true);
     readonly showSettingsControl = input<boolean>(true);
+    readonly showAnnouncements = input<boolean>(true);
     readonly messageSubmitted = output<{ content: string; timestamp: Date; fileUploadIds?: string[]; mentionAgentId?: string }>();
     readonly messageCancelled = output<void>();
     readonly fileAttached = output<File>();
diff --git a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
index eb30c2f7..fa69c4e2 100644
--- a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
@@ -1,3 +1,11 @@
+<!-- Ambient announcement (spec §D1), floated above the composer rather than
+     stacked in flow: dismissing it must not move the composer under the
+     user's cursor. Sits above the quota tabs, which stay attached to the
+     input itself. -->
+@if (showAnnouncements()) {
+  <app-announcement-banner />
+}
+
 <!-- Cost quota warning indicator -->
 <app-quota-warning-banner />
 
diff --git a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
index ababafd3..97f3905e 100644
--- a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
+++ b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
@@ -25,6 +25,7 @@ import {
 } from '@ng-icons/heroicons/outline';
 import { heroPaperAirplaneSolid, heroStopSolid } from '@ng-icons/heroicons/solid';
 import { ModelDropdownComponent } from '../../../components/model-dropdown/model-dropdown.component';
+import { AnnouncementBannerComponent } from '../../../components/announcement-banner/announcement-banner.component';
 import { QuotaWarningBannerComponent } from '../../../components/quota-warning-banner/quota-warning-banner.component';
 import { TooltipDirective } from '../../../components/tooltip';
 import { FileCardComponent } from '../../../components/file-card';
@@ -105,7 +106,10 @@ interface MentionToken {
 
 @Component({
   selector: 'app-chat-input',
-  imports: [FormsModule, ModelDropdownComponent, NgIcon, QuotaWarningBannerComponent, StorageQuotaBannerComponent, TooltipDirective, FileCardComponent, AgentMentionMenuComponent, SpinnerComponent],
+  imports: [AnnouncementBannerComponent, FormsModule, ModelDropdownComponent, NgIcon, QuotaWarningBannerComponent, StorageQuotaBannerComponent, TooltipDirective, FileCardComponent, AgentMentionMenuComponent, SpinnerComponent],
+  // `relative` is the anchor the announcement banner floats against — it sits
+  // `bottom-full` of this host, above the quota tabs and clear of the composer.
+  host: { class: 'relative block' },
   providers: [
     provideIcons({
       heroPlus,
@@ -157,6 +161,17 @@ export class ChatInputComponent {
   // running the Agent being edited.
   readonly showAgentMentions = input<boolean>(true);
 
+  /**
+   * Whether an announcement banner may float above this composer.
+   *
+   * True for the real chat and false for the embedded preview panes — an
+   * agent-preview or a marketplace test-drive is exercising one specific
+   * agent, and a platform-wide "new models are available" notice appearing
+   * inside that small pane reads as a bug rather than an announcement.
+   * Follows the same opt-out shape as the `show*` controls above.
+   */
+  readonly showAnnouncements = input<boolean>(true);
+
   private readonly messageInput = viewChild<ElementRef<HTMLTextAreaElement>>('messageInput');
 
   // Use the input directly - parent controls loading state

From dfe4ad8f673115c9509b1aed69e84e856851da73 Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Sun, 6 Sep 2026 10:38:11 -0600
Subject: [PATCH 2/2] feat(announcements): put the banner on the side the
 composer leaves free
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The composer is not always in the same place. A conversation pins it to the
bottom of the viewport, where a pill below it would be off the edge. The empty
state centres it with the greeting immediately above, where a pill above it
floats over that greeting — visibly so at 375px, where the greeting wraps and
the pill covered its second line.

So the placement follows the composer: `below` on the empty state, `above`
otherwise.

Derived, not measured. `isEmptyState()` is the same computed that already
picks which layout branch renders — the centred composer or the bottom-pinned
one — so reading it makes the two impossible to drift apart. Measuring the
composer's viewport position would re-derive that same fact less reliably and
would have to be recomputed on resize, on scroll, and when the artifact pane
opens.

The banner takes a `placement` input and swaps `bottom-full`/`mb-2` for
`top-full`/`mt-2`; `chat-container` supplies it through `chat-input` alongside
the `showAnnouncements` gate.

Verified on the empty state at desktop and 375px: the pill sits below the
composer in clear space and `coversGreeting` is false in both, where it was
true before. Full frontend suite 2490 passed — a clean run, including the
`submission-review` spec that has been flaking.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../announcement-banner.component.spec.ts     | 14 +++++++++
 .../announcement-banner.component.ts          | 29 +++++++++++++++++--
 .../chat-container.component.branding.spec.ts |  1 +
 .../chat-container.component.html             |  6 ++++
 .../chat-container.component.ts               | 13 +++++++++
 .../chat-container.error-handling.spec.ts     |  1 +
 .../chat-input/chat-input.component.html      |  2 +-
 .../chat-input/chat-input.component.ts        |  7 +++++
 8 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
index 8dab8d19..5c5872e0 100644
--- a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
@@ -219,6 +219,20 @@ describe('AnnouncementBannerComponent', () => {
       expect(host).not.toContain('top-16');
     });
 
+    it('takes the other side when the composer is centred', () => {
+      // The empty state puts the greeting immediately above a centred
+      // composer, so `above` would float the pill over it — visibly so at
+      // narrow widths, where the greeting wraps.
+      bannerItem.set(makeAnnouncement());
+      const fixture = TestBed.createComponent(AnnouncementBannerComponent);
+      fixture.componentRef.setInput('placement', 'below');
+      fixture.detectChanges();
+
+      const host = (fixture.nativeElement as HTMLElement).className;
+      expect(host).toContain('top-full');
+      expect(host).not.toContain('bottom-full');
+    });
+
     it('reads as a compact tab beside the quota warning, not a full-bleed strip', () => {
       bannerItem.set(makeAnnouncement());
       const fixture = create();
diff --git a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
index d064dd93..e2882259 100644
--- a/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
@@ -4,6 +4,7 @@ import {
   computed,
   effect,
   inject,
+  input,
 } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
@@ -58,8 +59,19 @@ import {
  * surface only**; What's New remains the everywhere-record, which is why
  * `panel` is forced onto every announcement server-side.
  *
- * `bottom-full` against the `relative` chat-input host puts it clear of the
- * quota tabs, which stay visually attached to the input.
+ * **Which side of the composer it takes follows the composer.** In a
+ * conversation the composer is pinned to the bottom of the viewport, so the
+ * pill goes above it. On the empty state the composer is centred with the
+ * greeting directly above it, so the pill goes below instead — otherwise it
+ * floats over the greeting, which is exactly what it does at narrow widths.
+ * The caller passes `placement`; it is derived from the container's
+ * `isEmptyState()`, not measured, because that signal is what decides which
+ * layout branch renders in the first place. Measuring viewport position would
+ * re-derive the same fact less reliably, and would have to be recomputed on
+ * resize, on scroll, and when the artifact pane opens.
+ *
+ * Either way it floats clear of the quota tabs, which stay visually attached
+ * to the input.
  *
  * The wrapper is `pointer-events-none` and only the pill itself takes events,
  * so the full-width positioning strip cannot swallow clicks aimed at the
@@ -85,7 +97,11 @@ import {
     // The positioning strip. `pointer-events-none` here (and `auto` on the
     // pill) keeps it from swallowing clicks meant for the chrome beneath.
     class:
-      'pointer-events-none absolute inset-x-0 bottom-full z-30 mb-2 flex justify-center px-4',
+      'pointer-events-none absolute inset-x-0 z-30 flex justify-center px-4',
+    '[class.bottom-full]': "placement() === 'above'",
+    '[class.mb-2]': "placement() === 'above'",
+    '[class.top-full]': "placement() === 'below'",
+    '[class.mt-2]': "placement() === 'below'",
   },
   template: `
     @if (announcement(); as item) {
@@ -131,6 +147,13 @@ import {
 export class AnnouncementBannerComponent {
   private readonly announcements = inject(AnnouncementsService);
 
+  /**
+   * Which side of the composer to take. `'above'` suits a bottom-pinned
+   * composer; `'below'` keeps the pill off the greeting when the composer is
+   * centred on the empty state.
+   */
+  readonly placement = input<'above' | 'below'>('above');
+
   readonly announcement = computed<Announcement | null>(() =>
     this.announcements.bannerItem(),
   );
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
index 7f9b98d9..299f45e5 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.branding.spec.ts
@@ -34,6 +34,7 @@ class ChatInputStub {
   readonly showVoiceControl = input<boolean>(true);
   readonly showSettingsControl = input<boolean>(true);
   readonly showAnnouncements = input<boolean>(true);
+  readonly announcementPlacement = input<'above' | 'below'>('above');
   readonly messageSubmitted = output<unknown>();
   readonly messageCancelled = output<void>();
   readonly fileAttached = output<File>();
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
index a87c9219..b0471987 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
@@ -65,6 +65,7 @@
       <div class="chat-input-footer embedded">
         <app-chat-input
           [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
@@ -125,6 +126,7 @@
         <div class="mx-auto px-4 max-w-[720px]">
           <app-chat-input
             [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
             [sessionId]="sessionId()"
             [isChatLoading]="isChatLoading()"
             [showFileControls]="resolvedConfig().showFileControls"
@@ -174,6 +176,7 @@
         <div class="mx-auto px-4 max-w-[720px]">
           <app-chat-input
             [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
             [sessionId]="sessionId()"
             [isChatLoading]="isChatLoading()"
             [showFileControls]="resolvedConfig().showFileControls"
@@ -228,6 +231,7 @@
           <div class="relative">
             <app-chat-input
               [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
               [sessionId]="sessionId()"
               [isChatLoading]="isChatLoading()"
               [showFileControls]="resolvedConfig().showFileControls"
@@ -299,6 +303,7 @@
         }
         <app-chat-input
           [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
@@ -345,6 +350,7 @@
         </div>
         <app-chat-input
           [showAnnouncements]="showAnnouncements()"
+          [announcementPlacement]="announcementPlacement()"
           [sessionId]="sessionId()"
           [isChatLoading]="isChatLoading()"
           [showFileControls]="resolvedConfig().showFileControls"
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
index fd4816fa..640333f8 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.ts
@@ -234,6 +234,19 @@ export class ChatContainerComponent {
     () => !this.resolvedConfig().embeddedMode,
   );
 
+  /**
+   * Which side of the composer an announcement takes, following the composer.
+   *
+   * The empty state centres the composer with the greeting immediately above
+   * it, so a pill placed above would float over the greeting — visibly so at
+   * narrow widths, where the greeting wraps. A conversation pins the composer
+   * to the bottom, where below would be off the edge. Same `isEmptyState()`
+   * that picks the layout branch picks the side, so the two cannot drift.
+   */
+  protected readonly announcementPlacement = computed<'above' | 'below'>(
+    () => (this.isEmptyState() ? 'below' : 'above'),
+  );
+
   protected readonly showChatTopnav = computed(
     () =>
       this.resolvedConfig().fullPageMode &&
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts b/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
index b6cebe93..cf5e0e90 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.error-handling.spec.ts
@@ -36,6 +36,7 @@ describe('ChatContainerComponent — branding logo theme swap and error handling
     readonly showVoiceControl = input<boolean>(true);
     readonly showSettingsControl = input<boolean>(true);
     readonly showAnnouncements = input<boolean>(true);
+    readonly announcementPlacement = input<'above' | 'below'>('above');
     readonly messageSubmitted = output<{ content: string; timestamp: Date; fileUploadIds?: string[]; mentionAgentId?: string }>();
     readonly messageCancelled = output<void>();
     readonly fileAttached = output<File>();
diff --git a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
index fa69c4e2..8037a802 100644
--- a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.html
@@ -3,7 +3,7 @@
      user's cursor. Sits above the quota tabs, which stay attached to the
      input itself. -->
 @if (showAnnouncements()) {
-  <app-announcement-banner />
+  <app-announcement-banner [placement]="announcementPlacement()" />
 }
 
 <!-- Cost quota warning indicator -->
diff --git a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
index 97f3905e..0cb307b0 100644
--- a/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
+++ b/frontend/ai.client/src/app/session/components/chat-input/chat-input.component.ts
@@ -172,6 +172,13 @@ export class ChatInputComponent {
    */
   readonly showAnnouncements = input<boolean>(true);
 
+  /**
+   * Which side of this composer an announcement takes. Supplied by the
+   * container, which knows whether the composer is centred (empty state) or
+   * pinned to the bottom (a conversation).
+   */
+  readonly announcementPlacement = input<'above' | 'below'>('above');
+
   private readonly messageInput = viewChild<ElementRef<HTMLTextAreaElement>>('messageInput');
 
   // Use the input directly - parent controls loading state