From 1094914308d05d50bd8a728b480549cb60606ecb Mon Sep 17 00:00:00 2001
From: Phil Merrell <philmerrell@boisestate.edu>
Date: Sun, 6 Sep 2026 08:40:53 -0600
Subject: [PATCH] feat(announcements): render the banner surface (PR-4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `banner` surface has been authorable since PR-1 and computed by the
server since PR-2, but nothing in the SPA consumed `bannerItem()` — an
admin who ticked "banner" got a field that did nothing, with no way to
tell from the UI that the surface was unbuilt.

`components/announcement-banner` renders the one banner the server picked
(§D7) as a strip at the top of the shell: severity icon and colour from
the `state-*` scale, the `summary` line when the author wrote one, an
optional CTA, and a ✕ that records a durable `dismissed` ack. It writes
`seen` on render — once per announcement per tab — which is what clears
the unread dot for someone who reads the banner and never opens What's
New. That write races the ✕, and deliberately relies on §D2's monotonic
server-side rank rather than ordering the two client-side.

Placement is a flex child of the shell's `<main>`, above the scroll
container, so content reflows instead of hiding underneath. Three pieces
of viewport-fixed chrome would otherwise paint over it, so the strip
publishes its measured height as `--announcement-banner-height` and they
offset against it: the chat topnav, the full-page empty-state overlay
(which was `inset: 0`), and the two floating sidenav control clusters.
The height is measured rather than hardcoded because the line wraps on
narrow viewports. The voice overlay still covers it, which is right —
that one is a modal.

Gated on `isAuthenticated()`, not just chrome. `AnnouncementsService`
loads its feed on the first read of `bannerItem()` and `resource()` loads
exactly once, so mounting the banner on the login screen would fire
`GET /announcements` unauthenticated, take the 401's empty-feed fallback,
and never retry — announcements would be missing for the life of the tab.
Found in the browser, not by a spec.

Verified end to end against dev data with a local app-api: strip renders
in light and dark and at 375px with no horizontal overflow, ✕ writes an
ack that upgrades the existing `seen` row in place to rank 2 rather than
duplicating it, the server then returns `banner: null` while the panel
entry survives (§D1/§D2), and deleting the ack brings the banner back.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/ai.client/src/app/app.html           |  17 +-
 frontend/ai.client/src/app/app.ts             |  18 ++
 .../announcement-banner.component.spec.ts     | 232 ++++++++++++++++++
 .../announcement-banner.component.ts          | 221 +++++++++++++++++
 .../announcements/announcement.model.ts       |   4 +-
 .../announcements/announcements.service.ts    |   2 +-
 .../chat-container.component.css              |  14 +-
 7 files changed, 501 insertions(+), 7 deletions(-)
 create mode 100644 frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
 create mode 100644 frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts

diff --git a/frontend/ai.client/src/app/app.html b/frontend/ai.client/src/app/app.html
index 2ebb042d..136655fb 100644
--- a/frontend/ai.client/src/app/app.html
+++ b/frontend/ai.client/src/app/app.html
@@ -41,7 +41,9 @@
 
   <!-- Desktop controls (when sidenav collapsed) -->
   @if (sidenavService.isCollapsed() && !chromeHidden()) {
-    <div class="hidden lg:flex fixed top-4 left-4 z-50 gap-2">
+    <div
+      class="hidden lg:flex fixed left-4 z-50 gap-2"
+      [style.top]="'calc(1rem + var(--announcement-banner-height, 0px))'">
       <!-- Expand sidebar button -->
       <button
         type="button"
@@ -72,7 +74,9 @@
 
   <!-- Mobile controls (when header content hidden and sidenav not visible) -->
   @if (!headerService.showContent() && !sidenavService.isVisible() && !chromeHidden()) {
-    <div class="flex lg:hidden fixed top-4 left-4 z-50 gap-2">
+    <div
+      class="flex lg:hidden fixed left-4 z-50 gap-2"
+      [style.top]="'calc(1rem + var(--announcement-banner-height, 0px))'">
       <!-- Open sidenav button -->
       <button
         type="button"
@@ -108,6 +112,15 @@
     [class.lg:pl-0]="sidenavService.isCollapsed() || chromeHidden()"
     [class.artifact-pane-open]="artifactPanelOpen()">
     <main class="flex h-dvh flex-col">
+      <!-- Ambient announcement strip (spec §D1). A flex child rather than an
+           overlay, so the scrolling content below reflows instead of hiding
+           under it. It publishes its measured height as
+           --announcement-banner-height; the fixed chat topnav and the
+           floating sidenav controls offset against that. -->
+      @if (showAnnouncementBanner()) {
+        <app-announcement-banner />
+      }
+
       <!-- 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 b713f2e9..2ece0042 100644
--- a/frontend/ai.client/src/app/app.ts
+++ b/frontend/ai.client/src/app/app.ts
@@ -7,6 +7,7 @@ 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';
@@ -24,6 +25,7 @@ import { BrandingService } from '../branding/branding.service';
     ErrorToastComponent,
     ToastComponent,
     BackgroundTaskToastsComponent,
+    AnnouncementBannerComponent,
     TooltipDirective
   ],
   templateUrl: './app.html',
@@ -72,6 +74,22 @@ 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
new file mode 100644
index 00000000..ac8a4be3
--- /dev/null
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.spec.ts
@@ -0,0 +1,232 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { TestBed } from '@angular/core/testing';
+import { signal } from '@angular/core';
+import { AnnouncementsService } from '../../services/announcements/announcements.service';
+import { Announcement } from '../../services/announcements/announcement.model';
+import { AnnouncementBannerComponent } from './announcement-banner.component';
+
+function makeAnnouncement(overrides: Partial<Announcement> = {}): Announcement {
+  return {
+    announcement_id: 'a1',
+    title: 'Skills are here',
+    body_markdown: '# Skills\n\n- one',
+    summary: null,
+    surfaces: ['panel', 'banner'],
+    severity: 'info',
+    publish_at: '2026-01-01T00:00:00Z',
+    expires_at: '2026-02-01T00:00:00Z',
+    requires_ack: false,
+    cta_label: null,
+    cta_url: null,
+    revision: 1,
+    is_unread: true,
+    is_updated: false,
+    ...overrides,
+  };
+}
+
+describe('AnnouncementBannerComponent', () => {
+  let bannerItem: ReturnType<typeof signal<Announcement | null>>;
+  let ack: ReturnType<typeof vi.fn>;
+  let observed: Element[];
+
+  beforeEach(() => {
+    TestBed.resetTestingModule();
+    bannerItem = signal<Announcement | null>(null);
+    ack = vi.fn(async () => true);
+    observed = [];
+
+    // jsdom has no ResizeObserver. Stub one that records what it watches so
+    // the height-publishing path is actually exercised rather than skipped.
+    (globalThis as any).ResizeObserver = class {
+      constructor(private cb: ResizeObserverCallback) {}
+      observe(el: Element) {
+        observed.push(el);
+      }
+      disconnect() {}
+      unobserve() {}
+      emit(height: number) {
+        this.cb(
+          [{ contentRect: { height } } as unknown as ResizeObserverEntry],
+          this as unknown as ResizeObserver,
+        );
+      }
+    };
+
+    // DI-token override rather than vi.mock, per house convention.
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: AnnouncementsService, useValue: { bannerItem, ack } },
+      ],
+    });
+  });
+
+  afterEach(() => {
+    TestBed.resetTestingModule();
+    document.documentElement.style.removeProperty('--announcement-banner-height');
+  });
+
+  function create() {
+    const fixture = TestBed.createComponent(AnnouncementBannerComponent);
+    fixture.detectChanges();
+    return fixture;
+  }
+
+  function text(fixture: ReturnType<typeof create>) {
+    return (fixture.nativeElement as HTMLElement).textContent?.trim() ?? '';
+  }
+
+  function strip(fixture: ReturnType<typeof create>): HTMLElement | null {
+    return (fixture.nativeElement as HTMLElement).querySelector('[role="status"]');
+  }
+
+  it('renders nothing when the server sent no banner', () => {
+    const fixture = create();
+    expect(strip(fixture)).toBeNull();
+  });
+
+  it('renders the strip once the feed resolves', () => {
+    // The dependency-set regression from #974: read the derived state while
+    // the feed is still EMPTY first, then populate it. A computed that
+    // guard-clauses out before touching its signal tracks nothing on that
+    // first evaluation and never recomputes — which is how the submit button
+    // on the admin form shipped permanently disabled.
+    const fixture = create();
+    const component = fixture.componentInstance;
+    expect(component.bannerText()).toBe('');
+    expect(strip(fixture)).toBeNull();
+
+    bannerItem.set(makeAnnouncement());
+    fixture.detectChanges();
+
+    expect(component.bannerText()).toBe('Skills are here');
+    expect(strip(fixture)).not.toBeNull();
+    expect(text(fixture)).toContain('Skills are here');
+  });
+
+  it('prefers the summary over the title — the strip is one line', () => {
+    bannerItem.set(
+      makeAnnouncement({ title: 'A'.repeat(140), summary: 'Short version' }),
+    );
+    const fixture = create();
+    expect(text(fixture)).toContain('Short version');
+    expect(text(fixture)).not.toContain('A'.repeat(140));
+  });
+
+  it('falls back to the title when the summary is blank whitespace', () => {
+    bannerItem.set(makeAnnouncement({ summary: '   ' }));
+    const fixture = create();
+    expect(fixture.componentInstance.bannerText()).toBe('Skills are here');
+  });
+
+  it('writes `seen` on render, and only once per announcement', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+
+    expect(ack).toHaveBeenCalledWith('a1', 'seen', 'banner');
+    expect(ack).toHaveBeenCalledTimes(1);
+
+    fixture.detectChanges();
+    fixture.detectChanges();
+    expect(ack).toHaveBeenCalledTimes(1);
+  });
+
+  it('writes `seen` again when a different announcement takes the slot', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+    ack.mockClear();
+
+    bannerItem.set(makeAnnouncement({ announcement_id: 'a2' }));
+    fixture.detectChanges();
+
+    expect(ack).toHaveBeenCalledWith('a2', 'seen', 'banner');
+  });
+
+  it('records a durable `dismissed` ack on ✕, scoped to the banner surface', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+    ack.mockClear();
+
+    const dismiss = (fixture.nativeElement as HTMLElement).querySelector(
+      'button',
+    ) as HTMLButtonElement;
+    expect(dismiss.getAttribute('aria-label')).toBe(
+      'Dismiss announcement: Skills are here',
+    );
+    dismiss.click();
+
+    expect(ack).toHaveBeenCalledWith('a1', 'dismissed', 'banner');
+  });
+
+  it('is a polite live region, never assertive', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+    const el = strip(fixture)!;
+    expect(el.getAttribute('aria-live')).toBe('polite');
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it.each([
+    ['info' as const, 'heroInformationCircle', 'state-info'],
+    ['success' as const, 'heroCheckCircle', 'state-success'],
+    ['warning' as const, 'heroExclamationTriangle', 'state-warning'],
+  ])('maps %s severity to its icon and token scale', (severity, icon, scale) => {
+    bannerItem.set(makeAnnouncement({ severity }));
+    const fixture = create();
+    const component = fixture.componentInstance;
+
+    expect(component.iconName()).toBe(icon);
+    // Full literal class strings — a concatenated `bg-state-${severity}-50`
+    // would compile to nothing, because Tailwind scans source text.
+    expect(component.severityClass()).toContain(`bg-${scale}-50`);
+    expect(component.severityClass()).toContain(`dark:bg-${scale}-900/30`);
+  });
+
+  it('renders the CTA only when both label and url are present', () => {
+    bannerItem.set(makeAnnouncement({ cta_label: 'Read more' }));
+    let fixture = create();
+    expect(
+      (fixture.nativeElement as HTMLElement).querySelector('a'),
+    ).toBeNull();
+
+    TestBed.resetTestingModule();
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: AnnouncementsService, useValue: { bannerItem, ack } },
+      ],
+    });
+    bannerItem.set(
+      makeAnnouncement({ cta_label: 'Read more', cta_url: 'https://example.edu' }),
+    );
+    fixture = create();
+    const link = (fixture.nativeElement as HTMLElement).querySelector('a')!;
+    expect(link.getAttribute('href')).toBe('https://example.edu');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('publishes its measured height so the fixed topnav can clear it', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+
+    expect(observed).toHaveLength(1);
+    expect(observed[0]).toBe(fixture.nativeElement);
+  });
+
+  it('clears the height variable on destroy, so nothing is left offset', () => {
+    bannerItem.set(makeAnnouncement());
+    const fixture = create();
+    expect(
+      document.documentElement.style.getPropertyValue(
+        '--announcement-banner-height',
+      ),
+    ).not.toBe('');
+
+    fixture.destroy();
+
+    expect(
+      document.documentElement.style.getPropertyValue(
+        '--announcement-banner-height',
+      ),
+    ).toBe('');
+  });
+});
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
new file mode 100644
index 00000000..a53524ce
--- /dev/null
+++ b/frontend/ai.client/src/app/components/announcement-banner/announcement-banner.component.ts
@@ -0,0 +1,221 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  computed,
+  effect,
+  inject,
+  signal,
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+  heroCheckCircle,
+  heroExclamationTriangle,
+  heroInformationCircle,
+  heroXMark,
+} from '@ng-icons/heroicons/outline';
+import { AnnouncementsService } from '../../services/announcements/announcements.service';
+import {
+  Announcement,
+  AnnouncementSeverity,
+} from '../../services/announcements/announcement.model';
+
+/**
+ * The ambient announcement surface (§D1) — a strip at the top of the shell.
+ *
+ * At most one is ever shown, and **the server picks which** (§D7: highest
+ * severity, then oldest `publishAt`). There is no selection logic here; this
+ * renders `bannerItem()` and nothing else.
+ *
+ * Three things about it are less obvious than they look.
+ *
+ * **It writes `seen` on render, once per announcement per tab.** That is what
+ * clears the unread dot for someone who reads the banner and never opens the
+ * panel. The write races the user's click on ✕, which is exactly why §D2 makes
+ * the server-side rank monotonic — a late `seen` cannot clobber `dismissed`
+ * and bring the banner back. Do not "fix" that race here by delaying or
+ * ordering the writes; the guard belongs at the database.
+ *
+ * **Dismissal is durable, not client-side.** Unlike `quota-warning-banner`,
+ * whose dismissal is a `localStorage` "not now" for a signal that recomputes
+ * every turn, an announcement is one-shot: dismissing it means never again, on
+ * every device (§D3). `AnnouncementsService.ack` still hides it locally when
+ * the POST fails, so a transient 500 cannot trap a user under an
+ * undismissable strip.
+ *
+ * **It publishes its own height** as `--announcement-banner-height` on the
+ * document root. The strip is a flex child of the shell's `<main>`, so the
+ * scrolling content reflows on its own — but the chat topnav is
+ * `position: fixed`, and would sit on top of the banner without that offset.
+ * The value is measured rather than hardcoded because the line wraps on narrow
+ * viewports.
+ *
+ * Body markdown is deliberately *not* rendered here: this surface is one line.
+ * The full body lives in What's New, which is why `panel` is forced onto every
+ * announcement server-side.
+ */
+@Component({
+  selector: 'app-announcement-banner',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIcon],
+  providers: [
+    provideIcons({
+      heroCheckCircle,
+      heroExclamationTriangle,
+      heroInformationCircle,
+      heroXMark,
+    }),
+  ],
+  host: { class: 'block' },
+  template: `
+    @if (announcement(); as item) {
+      <div
+        class="flex items-center gap-x-3 border-b px-4 py-2.5 sm:px-6"
+        [class]="severityClass()"
+        role="status"
+        aria-live="polite"
+      >
+        <ng-icon
+          [name]="iconName()"
+          class="size-5 shrink-0"
+          aria-hidden="true"
+        />
+
+        <p class="min-w-0 flex-1 truncate text-sm/6 font-medium">
+          {{ bannerText() }}
+        </p>
+
+        @if (item.cta_url && item.cta_label) {
+          <a
+            [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"
+          >
+            {{ item.cta_label }}
+          </a>
+        }
+
+        <button
+          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"
+        >
+          <ng-icon name="heroXMark" class="size-4" aria-hidden="true" />
+        </button>
+      </div>
+    }
+  `,
+})
+export class AnnouncementBannerComponent {
+  private readonly announcements = inject(AnnouncementsService);
+  private readonly host: ElementRef<HTMLElement> = inject(ElementRef);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly document = inject(DOCUMENT);
+
+  /** The CSS custom property the shell's fixed chrome offsets against. */
+  private static readonly HEIGHT_VAR = '--announcement-banner-height';
+
+  readonly announcement = computed<Announcement | null>(() =>
+    this.announcements.bannerItem(),
+  );
+
+  /**
+   * Announcements this tab has already reported as `seen`.
+   *
+   * Without it the POST repeats on every re-render of the strip. The write is
+   * idempotent server-side, so this is a courtesy to the network rather than a
+   * correctness guard.
+   */
+  private readonly reportedSeen = new Set<string>();
+
+  /**
+   * `summary` is the banner's line when the author wrote one — `title` can run
+   * to 140 characters, which is a heading, not a strip.
+   */
+  readonly bannerText = computed<string>(() => {
+    const item = this.announcement();
+    if (!item) return '';
+    return item.summary?.trim() || item.title;
+  });
+
+  readonly iconName = computed<string>(() => {
+    switch (this.severity()) {
+      case 'success':
+        return 'heroCheckCircle';
+      case 'warning':
+        return 'heroExclamationTriangle';
+      default:
+        return 'heroInformationCircle';
+    }
+  });
+
+  /**
+   * Full literal class strings per severity, never concatenated.
+   *
+   * Tailwind scans source text for complete class names, so a built-up
+   * `bg-state-${severity}-50` would compile to nothing and the strip would
+   * render unstyled.
+   */
+  readonly severityClass = computed<string>(() => {
+    switch (this.severity()) {
+      case 'success':
+        return 'border-state-success-200 bg-state-success-50 text-state-success-800 dark:border-state-success-800 dark:bg-state-success-900/30 dark:text-state-success-200';
+      case 'warning':
+        return 'border-state-warning-200 bg-state-warning-50 text-state-warning-800 dark:border-state-warning-800 dark:bg-state-warning-900/30 dark:text-state-warning-200';
+      default:
+        return 'border-state-info-200 bg-state-info-50 text-state-info-800 dark:border-state-info-800 dark:bg-state-info-900/30 dark:text-state-info-200';
+    }
+  });
+
+  private readonly severity = computed<AnnouncementSeverity>(
+    () => this.announcement()?.severity ?? 'info',
+  );
+
+  /** Measured height of the strip, mirrored onto the document root. */
+  private readonly height = signal(0);
+
+  constructor() {
+    effect(() => {
+      const item = this.announcement();
+      if (!item || this.reportedSeen.has(item.announcement_id)) return;
+      this.reportedSeen.add(item.announcement_id);
+      void this.announcements.ack(item.announcement_id, 'seen', 'banner');
+    });
+
+    effect(() => {
+      const px = this.height();
+      this.document.documentElement.style.setProperty(
+        AnnouncementBannerComponent.HEIGHT_VAR,
+        `${px}px`,
+      );
+    });
+
+    // `ResizeObserver` rather than a one-shot measurement: the line wraps when
+    // the viewport narrows or the artifact pane opens, and the fixed topnav
+    // has to follow it down.
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(entries => {
+        const next = entries[0]?.contentRect.height ?? 0;
+        this.height.set(Math.round(next));
+      });
+      observer.observe(this.host.nativeElement);
+      this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+
+    this.destroyRef.onDestroy(() => {
+      this.document.documentElement.style.removeProperty(
+        AnnouncementBannerComponent.HEIGHT_VAR,
+      );
+    });
+  }
+
+  protected onDismiss(): void {
+    const item = this.announcement();
+    if (!item) return;
+    void this.announcements.ack(item.announcement_id, 'dismissed', 'banner');
+  }
+}
diff --git a/frontend/ai.client/src/app/services/announcements/announcement.model.ts b/frontend/ai.client/src/app/services/announcements/announcement.model.ts
index 933ad32f..3cfcc85b 100644
--- a/frontend/ai.client/src/app/services/announcements/announcement.model.ts
+++ b/frontend/ai.client/src/app/services/announcements/announcement.model.ts
@@ -37,8 +37,8 @@ export interface Announcement {
 /**
  * `GET /announcements` — already filtered and capped by the server (§D5/§D7).
  *
- * `banner` and `modal` are populated from the backend today; no SPA surface
- * consumes them until PR-4 / PR-5.
+ * `banner` is rendered by `components/announcement-banner`; `modal` is
+ * populated from the backend but has no SPA surface until PR-5.
  */
 export interface AnnouncementFeed {
   panel: Announcement[];
diff --git a/frontend/ai.client/src/app/services/announcements/announcements.service.ts b/frontend/ai.client/src/app/services/announcements/announcements.service.ts
index 6a734f95..31865d2e 100644
--- a/frontend/ai.client/src/app/services/announcements/announcements.service.ts
+++ b/frontend/ai.client/src/app/services/announcements/announcements.service.ts
@@ -67,7 +67,7 @@ export class AnnouncementsService {
   /** Every announcement this user may browse, newest first. Uncapped. */
   readonly panelItems = computed<Announcement[]>(() => this.feed().panel);
 
-  /** At most one, chosen by the server. Consumed by PR-4. */
+  /** At most one, chosen by the server. Rendered by `AnnouncementBannerComponent`. */
   readonly bannerItem = computed<Announcement | null>(() =>
     this.visibleOrNull(this.feed().banner),
   );
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
index a415d639..9544128e 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
@@ -8,7 +8,11 @@
 /* Topnav wrapper for full-page mode */
 .chat-topnav-wrapper {
   position: fixed;
-  top: 0;
+  /* Sits directly below the announcement strip when one is showing. The strip
+     is a flex child of the shell's <main>, so the scroll container already
+     starts below it — but this bar is fixed and would otherwise cover it.
+     The variable is published (and cleared) by app-announcement-banner. */
+  top: var(--announcement-banner-height, 0px);
   left: 0;
   right: 0;
   z-index: 40;
@@ -49,7 +53,13 @@
 /* Empty state container for full-page mode */
 .chat-container-empty.full-page {
   position: fixed;
-  inset: 0;
+  /* Not `inset: 0` — this overlay is viewport-fixed and opaque, so a flush
+     top would paint over the announcement strip that sits above the shell's
+     scroll container. Same offset the topnav takes. */
+  top: var(--announcement-banner-height, 0px);
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
   align-items: center;
   justify-content: center;