@remit/web-client 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/better-auth-config.ts

@@ -1,4 +1,5 @@
 import { createAuthClient } from "better-auth/react";
+import { taggedFetch } from "../lib/network-error";
 import { getRuntimeConfig } from "../runtime-config";
 
 /**
@@ -51,7 +52,9 @@ const decodeExp = (token: string): number => {
 };
 
 const requestToken = async (): Promise<string | null> => {
-	const res = await fetch("/api/auth/token", { credentials: "include" });
+	const res = await taggedFetch("/api/auth/token", {
+		credentials: "include",
+	});
 	if (!res.ok) return null;
 	const body: unknown = await res.json();
 	if (

package/src/components/compose/ComposeForm.tsx

@@ -419,6 +419,7 @@ export const ComposeForm = ({
 		pushError({
 			title: "Couldn't save draft",
 			detail: formatErrorDetail(saveError) ?? "Saving the draft failed.",
+			error: saveError,
 		});
 	}, [saveError, pushError]);
 
@@ -541,6 +542,7 @@ export const ComposeForm = ({
 					pushError({
 						title: "Couldn't send message",
 						detail: formatErrorDetail(error) ?? "Saving the draft failed.",
+						error,
 					});
 					return null;
 				});
@@ -562,6 +564,7 @@ export const ComposeForm = ({
 						(createdThisAttempt
 							? "The draft was saved but the send request failed. Try again from the Outbox."
 							: "The send request failed. Try again."),
+					error,
 				});
 				return null;
 			});

package/src/components/layout/ComposeFab.tsx

@@ -1,16 +1,8 @@
-import { useLocation, useNavigate } from "@tanstack/react-router";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
-import { startTransition } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
-
-/**
- * Returns true when `pathname` is `/mail/<id>` for any id other than
- * the reserved `outbox` segment. That route owns a `FullCompose` mount
- * point, so the FAB can open compose in-place. From every other route
- * the FAB has to send the user there first.
- */
-const isOnMailboxRoute = (pathname: string): boolean =>
-	/^\/mail\/(?!outbox)[^/?]+/.test(pathname);
+import { useGlobalCompose } from "@/hooks/useComposeTarget";
 
 /**
  * Primary mobile surfaces where the FAB belongs: anywhere under
@@ -21,30 +13,34 @@ const isOnMailboxRoute = (pathname: string): boolean =>
 const isOnPrimaryMobileRoute = (pathname: string): boolean =>
 	pathname.startsWith("/mail") || pathname.startsWith("/settings");
 
+interface ComposeFabProps {
+	accounts: RemitImapAccountResponse[];
+}
+
 /**
  * Floating Action Button for composing a new message. Mobile-only.
  *
  * Layout follows Material 3: 56×56 surface, 16px from the right and
  * bottom edges (plus the iOS safe-area inset). Hidden when any of:
- *   - Viewport is `≥ md` (desktop has compose in the sidebar / etc.).
+ *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
+ *     `/mail` shell also stops mounting the FAB above that width; the
+ *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
  *   - The user is reading a thread (`?selectedMessageId=…`) — the
  *     conversation's Reply/Forward action bar covers that workflow.
  *   - The user is not on a primary mobile route (`/mail` or
  *     `/settings`).
  *
- * From routes that don't host a `FullCompose` (everything except
- * `/mail/<mailboxId>` — i.e. `/mail`, `/mail/outbox`, `/settings/*`)
- * tapping the FAB opens compose state and navigates to `/mail`, which
- * the index loader redirects to the preferred mailbox (PR #138). The
- * compose state survives the route transition because `ComposeProvider`
- * lives in `__root.tsx`, so the destination route mounts straight into
- * compose.
+ * The tap itself is `useGlobalCompose`, shared with the desktop top bar:
+ * it opens compose in place on routes that mount `FullCompose` and
+ * otherwise carries the user to a real mailbox that does. Compose state
+ * survives that transition because `ComposeProvider` lives in
+ * `__root.tsx`.
  */
-export const ComposeFab = () => {
-	const { state, openCompose } = useCompose();
+export const ComposeFab = ({ accounts }: ComposeFabProps) => {
+	const { state } = useCompose();
 	const location = useLocation();
-	const navigate = useNavigate();
+	const compose = useGlobalCompose(accounts);
 
 	const search = location.search as Record<string, unknown> | undefined;
 	const isReadingThread =
@@ -58,21 +54,10 @@ export const ComposeFab = () => {
 	)
 		return null;
 
-	const handleClick = () => {
-		// Wrap in startTransition so the suspension that ComposeForm
-		// triggers on first mount (lazy chunks, queries) doesn't
-		// snap the surrounding chrome into a route-level fallback.
-		startTransition(() => {
-			openCompose({ mode: "new" });
-		});
-		if (isOnMailboxRoute(location.pathname)) return;
-		navigate({ to: "/mail" });
-	};
-
 	return (
 		<button
 			type="button"
-			onClick={handleClick}
+			onClick={compose}
 			aria-label="Compose new message"
 			className="lg:hidden fixed right-4 z-30 h-14 w-14 rounded-full bg-accent text-accent-fg shadow-lg flex items-center justify-center hover:opacity-90 active:scale-95 transition-all"
 			style={{

package/src/components/layout/MailTopBar.tsx

@@ -0,0 +1,64 @@
+/**
+ * MailTopBar — the app's one search surface and its global actions.
+ *
+ * Mounted above every pane by the `/mail` shell, so the field spans the nav,
+ * the list and the reading pane. It is the app's search, not the list's: the
+ * list header drops its own field wherever this bar is mounted, so exactly one
+ * search input exists on the page and the "/" shortcut has one target.
+ *
+ * The actions here are the ones that belong to the app rather than to whatever
+ * is currently listed or open — compose, bug report, account. Reply, delete,
+ * move and the rest stay on the reading pane's own toolbar, under this bar.
+ */
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { AppTopBar, Button, SearchBar } from "@remit/ui";
+import { SquarePen } from "lucide-react";
+import { AccountMenu } from "@/auth/AccountMenu";
+import { BugReportButton } from "@/components/ui/BugReportButton";
+import { useGlobalCompose } from "@/hooks/useComposeTarget";
+import { tooltipForAction } from "@/lib/keymap";
+import { useMailContext } from "@/lib/mail-context";
+
+interface MailTopBarProps {
+	accounts: RemitImapAccountResponse[];
+}
+
+export function MailTopBar({ accounts }: MailTopBarProps) {
+	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
+		useMailContext();
+	const compose = useGlobalCompose(accounts);
+
+	return (
+		<AppTopBar
+			leading={
+				<span className="px-1 text-sm font-semibold tracking-tight text-fg">
+					remit
+				</span>
+			}
+			search={
+				<SearchBar
+					value={searchInput}
+					onChange={onSearchChange}
+					onClear={onSearchClear}
+					onClearQuery={onSearchClearQuery}
+					placeholder="Search all mail"
+					size="lg"
+				/>
+			}
+			actions={
+				<>
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<SquarePen className="size-4" />}
+						title={`Compose ${tooltipForAction("compose")}`}
+						aria-label="Compose"
+						onClick={compose}
+					/>
+					<BugReportButton />
+					<AccountMenu />
+				</>
+			}
+		/>
+	);
+}

package/src/components/mail/BriefPane.tsx

@@ -184,26 +184,15 @@ function BriefList() {
  */
 function BriefReading() {
 	const { conversation } = useBriefPane();
-	const {
-		onToggleIntelligence,
-		searchInput,
-		onSearchChange,
-		onSearchClear,
-		onSearchClearQuery,
-	} = useMailContext();
+	const { onToggleIntelligence } = useMailContext();
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
 				hasThread={Boolean(conversation)}
-				onCompose={() => undefined}
 				intelligenceOpen={false}
 				showIntelligenceToggle={false}
 				onToggleIntelligence={onToggleIntelligence}
-				searchValue={searchInput}
-				onSearchChange={onSearchChange}
-				onSearchClear={onSearchClear}
-				onSearchClearQuery={onSearchClearQuery}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{conversation ? (

package/src/components/mail/FlaggedPane.tsx

@@ -128,26 +128,15 @@ function FlaggedListSlot() {
  */
 function FlaggedReading() {
 	const { selectedThread } = useFlaggedPane();
-	const {
-		onToggleIntelligence,
-		searchInput,
-		onSearchChange,
-		onSearchClear,
-		onSearchClearQuery,
-	} = useMailContext();
+	const { onToggleIntelligence } = useMailContext();
 
 	return (
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
 				hasThread={Boolean(selectedThread)}
-				onCompose={() => undefined}
 				intelligenceOpen={false}
 				showIntelligenceToggle={false}
 				onToggleIntelligence={onToggleIntelligence}
-				searchValue={searchInput}
-				onSearchChange={onSearchChange}
-				onSearchClear={onSearchClear}
-				onSearchClearQuery={onSearchClearQuery}
 			/>
 			<div className="min-h-0 flex-1 overflow-hidden">
 				{selectedThread ? (

package/src/components/mail/IntelligencePane.tsx

@@ -313,15 +313,17 @@ function WiredPanel({
 		[updateFlags],
 	);
 
-	// Per-sender flag toggles are always wired. They stay active even before the
-	// address record resolves: `updateFlags` surfaces feedback when `addressId`
-	// is missing rather than letting the button look active but do nothing.
+	// Every per-sender flag toggle PATCHes the sender's address row, so none of
+	// them can be serviced until that row resolves. Leave them unwired until it
+	// does: the panel renders an unwired quick action as disabled, so the flow is
+	// never reachable in a state where a click can only fail (issue #51).
+	const canUpdateFlags = addressId !== undefined;
 	const actions: IntelligenceQuickActions = {
-		onToggleVip: handleToggleVip,
-		onToggleMute: handleToggleMute,
-		onToggleBlock: handleToggleBlock,
-		onToggleUnsubscribe: handleToggleUnsubscribe,
-		onReclassify: () => setReclassifyOpen(true),
+		onToggleVip: canUpdateFlags ? handleToggleVip : undefined,
+		onToggleMute: canUpdateFlags ? handleToggleMute : undefined,
+		onToggleBlock: canUpdateFlags ? handleToggleBlock : undefined,
+		onToggleUnsubscribe: canUpdateFlags ? handleToggleUnsubscribe : undefined,
+		onReclassify: canUpdateFlags ? () => setReclassifyOpen(true) : undefined,
 		onNotSpam: spamAction === "notSpam" ? handleNotSpam : undefined,
 		onMarkSpam: spamAction === "markSpam" ? handleMarkSpam : undefined,
 	};

package/src/components/mail/MailListHeader.tsx

@@ -31,7 +31,7 @@ import {
 	useAppShellLayout,
 } from "@remit/ui";
 import { type ReactNode, useState } from "react";
-import { useLayoutTier } from "@/hooks/useLayoutTier";
+import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailContext } from "@/lib/mail-context";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
 import {
@@ -168,11 +168,15 @@ export function MailListHeader({
 			<MailHeader
 				title={title}
 				unreadCount={unreadCount}
-				// The list pane is narrow even on desktop, and the reading-pane
-				// toolbar owns the wide search; keep the header's search compact (a
-				// magnifier) at every width. On phone the magnifier opens the
-				// full-screen takeover above; on tablet it expands over the title.
+				// Desktop mounts the app top bar, which owns search for the whole
+				// shell — the list header shows no field there, so the page never
+				// has two search inputs competing for "/" and for focus. Below
+				// desktop the header keeps a compact magnifier: on phone it opens
+				// the full-screen takeover above, on tablet it expands over the
+				// title. `isSinglePaneTier` is the same predicate the shell gates
+				// the top bar on, so the two cannot drift into zero or two fields.
 				isDesktop={false}
+				showSearch={isSinglePaneTier(tier)}
 				onMenuClick={() => layout?.openNav()}
 				searchValue={searchInput}
 				onSearchChange={onSearchChange}

package/src/components/mail/MailboxPane.tsx

@@ -202,7 +202,6 @@ interface MailboxPaneContextValue {
 	onToolbarDiscardDraft: () => void;
 	onToolbarMove: (destMailboxId: string) => void;
 	composeState: ReturnType<typeof useCompose>["state"];
-	openCompose: () => void;
 	closeCompose: () => void;
 	hasRemitDraftOpen: boolean;
 	// Phone actions
@@ -843,7 +842,6 @@ function MailboxPaneProvider({
 		onToolbarDiscardDraft: handleToolbarDiscardDraft,
 		onToolbarMove: handleToolbarMove,
 		composeState,
-		openCompose: handleNewCompose,
 		closeCompose,
 		hasRemitDraftOpen,
 		onBack: goBack,
@@ -1044,10 +1042,7 @@ function MailboxReading() {
 		onToolbarDiscardDraft,
 		onToolbarMove,
 		composeState,
-		openCompose,
 	} = useMailboxPane();
-	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
-		useMailContext();
 	const tier = useLayoutTier();
 	const isDesktop = tier === "desktop";
 	const hasThread = Boolean(conversation);
@@ -1078,14 +1073,9 @@ function MailboxReading() {
 		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
 			<MessageToolbar
 				hasThread={hasThread}
-				onCompose={openCompose}
 				intelligenceOpen={showIntelligence}
 				showIntelligenceToggle={isDesktop && hasThread}
 				onToggleIntelligence={onToggleIntelligence}
-				searchValue={searchInput}
-				onSearchChange={onSearchChange}
-				onSearchClear={onSearchClear}
-				onSearchClearQuery={onSearchClearQuery}
 				onReply={hasThread ? onToolbarReply : undefined}
 				onReplyAll={hasThread ? onToolbarReplyAll : undefined}
 				onForward={hasThread ? onToolbarForward : undefined}

package/src/components/mail/MessageActionMenu.tsx

@@ -27,6 +27,7 @@ import { formatErrorDetail } from "@/components/ui/error-banners";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import { patchThreadListCache, type ThreadListCache } from "@/lib/thread-cache";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 interface ThreadMessagesData {
@@ -34,15 +35,12 @@ interface ThreadMessagesData {
 	[key: string]: unknown;
 }
 
-interface ThreadsListPage {
-	items: RemitImapThreadMessageResponse[];
-	[key: string]: unknown;
-}
-
-interface ThreadsListData {
-	pages: ThreadsListPage[];
-	pageParams: Array<string | undefined>;
-}
+/**
+ * Either shape a thread list/search query caches — the infinite mailbox list
+ * or a single-shot page. `setQueriesData` matches by key prefix, so the
+ * optimistic updater sees both.
+ */
+type ThreadsListData = ThreadListCache;
 
 interface SnapshotEntry<T> {
 	queryKey: readonly unknown[];
@@ -169,26 +167,20 @@ export const MessageActionMenu = ({
 				},
 			);
 
-			const patchListData = (old: ThreadsListData | undefined) => {
-				if (!old) return old;
-				return {
-					...old,
-					pages: old.pages.map((page) => ({
-						...page,
-						items: page.items.map((item) =>
-							targetIds.has(item.messageId)
-								? { ...item, isRead: isReadNext }
-								: item,
-						),
-					})),
-				};
-			};
+			const patchListData = (old: unknown) =>
+				patchThreadListCache(old, (items) =>
+					items.map((item) =>
+						targetIds.has(item.messageId)
+							? { ...item, isRead: isReadNext }
+							: item,
+					),
+				);
 
-			queryClient.setQueriesData<ThreadsListData>(
+			queryClient.setQueriesData(
 				{ queryKey: threadsListPrefix },
 				patchListData,
 			);
-			queryClient.setQueriesData<ThreadsListData>(
+			queryClient.setQueriesData(
 				{ queryKey: threadsSearchPrefix },
 				patchListData,
 			);
@@ -214,6 +206,7 @@ export const MessageActionMenu = ({
 			pushError({
 				title: isReadNext ? "Couldn't mark as read" : "Couldn't mark as unread",
 				detail: formatErrorDetail(err),
+				error: err,
 			});
 		},
 		onSettled: (_data, _err, _vars, context) => {

package/src/components/mail/MessageDetail.tsx

@@ -74,6 +74,7 @@ export const MessageDetail = ({ messageId }: MessageDetailProps) => {
 			pushError({
 				title: "Couldn't mark message as read",
 				detail: formatErrorDetail(error),
+				error,
 			});
 		},
 	});

package/src/components/mail/MessageToolbar.render.test.ts

@@ -12,6 +12,7 @@ import { describe, it } from "node:test";
 import { MailActionToolbar } from "@remit/ui";
 import React, { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { MessageToolbar } from "./MessageToolbar";
 
 // The node test loader transpiles remit-ui's `.tsx` (resolved through
 // node_modules) with the classic JSX runtime, which references a global
@@ -55,3 +56,41 @@ describe("MailActionToolbar never disables its action buttons (#799)", () => {
 		assert.doesNotMatch(html, /aria-label="Archive"/);
 	});
 });
+
+/**
+ * The reading-pane toolbar carries message context only (#49). Search, compose,
+ * bug report and the account menu moved up into the app top bar, which spans
+ * every pane. Two search fields on one screen fight over "/" and over focus, so
+ * the absence of one here is the thing worth pinning.
+ */
+describe("MessageToolbar carries message context only (#49)", () => {
+	const render = (hasThread: boolean): string =>
+		renderToString(
+			createElement(MessageToolbar, {
+				hasThread,
+				intelligenceOpen: false,
+				showIntelligenceToggle: true,
+				onToggleIntelligence: () => undefined,
+			}) as never,
+		);
+
+	it("mounts no search field", () => {
+		for (const hasThread of [false, true]) {
+			assert.doesNotMatch(render(hasThread), /aria-label="Search mail"/);
+		}
+	});
+
+	it("carries no global actions — compose, bug report, account", () => {
+		const html = render(true);
+		assert.doesNotMatch(html, /aria-label="Compose"/);
+		assert.doesNotMatch(html, /aria-label="Report a bug"/);
+		assert.doesNotMatch(html, /aria-label="Account menu"/);
+	});
+
+	it("keeps the message verbs and the intelligence toggle", () => {
+		const html = render(true);
+		assert.match(html, /aria-label="Reply"/);
+		assert.match(html, /aria-label="Star"/);
+		assert.match(html, /intelligence sidebar/);
+	});
+});

package/src/components/mail/MessageToolbar.tsx

@@ -1,22 +1,17 @@
-import {
-	Button,
-	type MailAction,
-	MailActionToolbar,
-	SearchBar,
-} from "@remit/ui";
-import { Info, SquarePen } from "lucide-react";
+import { Button, type MailAction, MailActionToolbar } from "@remit/ui";
+import { Info } from "lucide-react";
 import { useState } from "react";
-import { AccountMenu } from "@/auth/AccountMenu";
-import { BugReportButton } from "@/components/ui/BugReportButton";
 import { tooltipForAction } from "@/lib/keymap";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 /**
  * Message action toolbar on the pane-header datum (40px, the shared
- * `--spacing-pane-header`). The reading pane's verbs — reply / reply-all /
- * forward, then delete / move / flag — Apple-Mail-style ghost icon buttons,
- * then the search field top-right (still filters the current list), compose
- * (✎) and the intelligence toggle (#422).
+ * `--spacing-pane-header`). Everything here acts on the open message: reply /
+ * reply-all / forward, then delete / move / flag — Apple-Mail-style ghost icon
+ * buttons — and the intelligence toggle (#422).
+ *
+ * Search, compose, bug report and the account menu are not message context;
+ * they live in the app top bar above every pane (`MailTopBar`, #49).
  *
  * Buttons are always pressable (never `disabled`): with no thread open a press
  * is a no-op that surfaces a one-line inline explanation rather than greying
@@ -24,7 +19,6 @@ import { MoveToTrigger } from "./MoveToTrigger";
  */
 export interface MessageToolbarProps {
 	hasThread: boolean;
-	onCompose: () => void;
 	intelligenceOpen: boolean;
 	/**
 	 * Whether the intelligence toggle is shown at all. The rail is contextual
@@ -33,12 +27,6 @@ export interface MessageToolbarProps {
 	 */
 	showIntelligenceToggle: boolean;
 	onToggleIntelligence: () => void;
-	searchValue: string;
-	onSearchChange: (value: string) => void;
-	/** Full clear (X button): drops the query and any selected thread (#538). */
-	onSearchClear: () => void;
-	/** Query-only clear (Esc): drops the query, keeps the thread open (#489). */
-	onSearchClearQuery?: () => void;
 
 	/* ---- wired action callbacks (omit to keep the no-op-explain behaviour) ---- */
 	onReply?: () => void;
@@ -71,14 +59,9 @@ const OPEN_FIRST = "Open a message first";
 
 export const MessageToolbar = ({
 	hasThread,
-	onCompose,
 	intelligenceOpen,
 	showIntelligenceToggle,
 	onToggleIntelligence,
-	searchValue,
-	onSearchChange,
-	onSearchClear,
-	onSearchClearQuery,
 	onReply,
 	onReplyAll,
 	onForward,
@@ -120,27 +103,6 @@ export const MessageToolbar = ({
 				) : undefined
 			}
 		>
-			{/* Apple Mail geometry: search sits top-right over the message area
-			    but still filters the current list. Reuses the wired SearchBar
-			    (the global "/" focus shortcut + Escape handling live in it). */}
-			<div className="w-64 min-w-40 shrink">
-				<SearchBar
-					value={searchValue}
-					onChange={onSearchChange}
-					onClear={onSearchClear}
-					onClearQuery={onSearchClearQuery}
-					placeholder="Search mail"
-				/>
-			</div>
-			<span className="mx-1 h-4 w-px bg-line" aria-hidden />
-			<Button
-				variant="ghost"
-				size="sm"
-				icon={<SquarePen className="size-4" />}
-				title={`Compose ${tooltipForAction("compose")}`}
-				aria-label="Compose"
-				onClick={onCompose}
-			/>
 			{showIntelligenceToggle && (
 				<Button
 					variant="ghost"
@@ -159,8 +121,6 @@ export const MessageToolbar = ({
 					}
 				/>
 			)}
-			<BugReportButton />
-			<AccountMenu />
 		</MailActionToolbar>
 	);
 };

package/src/components/ui/ErrorBanner.tsx

@@ -15,12 +15,12 @@ const SEVERITY_STYLES: Record<
 	{ container: string; icon: string; title: string }
 > = {
 	error: {
-		container: "border-danger/50 bg-danger/10 dark:bg-danger/20",
+		container: "border-danger/50 bg-danger-soft",
 		icon: "text-danger",
 		title: "text-danger",
 	},
 	warning: {
-		container: "border-warning/50 bg-warning/10",
+		container: "border-warning/50 bg-warning-soft",
 		icon: "text-warning",
 		title: "text-warning",
 	},
@@ -61,7 +61,10 @@ export const ErrorBanner = ({
 			role={severity === "error" ? "alert" : "status"}
 			aria-live={severity === "error" ? "assertive" : "polite"}
 			className={cn(
-				"pointer-events-auto flex items-start gap-3 rounded-md border bg-canvas/80 px-3 py-2 shadow-md backdrop-blur",
+				// Opaque, not translucent: a banner overlaps the toolbar and the
+				// message list, and see-through text on top of see-through text is
+				// unreadable (issue #55).
+				"pointer-events-auto flex items-start gap-3 rounded-md border bg-canvas px-3 py-2 shadow-lg",
 				styles.container,
 			)}
 		>