@nextclaw/ui 0.15.22 → 0.15.24

package/src/features/inbox/components/inbox-delivery-content.test.tsx

@@ -23,7 +23,7 @@ describe("InboxDeliveryContent", () => {
   it("renders static HTML in an isolated document", () => {
     render(
       <InboxDeliveryContent
-        content={'<meta http-equiv="refresh" content="0;url=https://example.com"><h1 onclick="alert(1)">Report</h1><script>alert(1)</script>'}
+        content={'<meta http-equiv="refresh" content="0;url=https://example.com"><h1 onclick="alert(1)">Report</h1><a href="https://example.com/report">Source</a><a href="javascript:alert(1)">Unsafe</a><script>alert(1)</script>'}
         contentType="html"
         fillHeight
         title="HTML report"
@@ -31,7 +31,9 @@ describe("InboxDeliveryContent", () => {
     );
 
     const frame = screen.getByTitle<HTMLIFrameElement>("HTML report");
-    expect(frame.getAttribute("sandbox")).toBe("");
+    expect(frame.getAttribute("sandbox")).toBe(
+      "allow-popups allow-popups-to-escape-sandbox",
+    );
     expect(frame.className).toContain("h-full");
     expect(frame.className).toContain("border-0");
     expect(frame.srcdoc).toContain("Content-Security-Policy");
@@ -40,6 +42,10 @@ describe("InboxDeliveryContent", () => {
     expect(frame.srcdoc).not.toContain("http-equiv=\"refresh\"");
     expect(frame.srcdoc).not.toContain("onclick");
     expect(frame.srcdoc).not.toContain("<script");
+    expect(frame.srcdoc).toContain('href="https://example.com/report"');
+    expect(frame.srcdoc).toContain('target="_blank"');
+    expect(frame.srcdoc).toContain('rel="noopener noreferrer"');
+    expect(frame.srcdoc).not.toContain("javascript:");
   });
 
   it("preserves the iframe instance while the surrounding view rerenders", () => {

package/src/features/inbox/components/inbox-delivery-content.tsx

@@ -79,7 +79,7 @@ function InboxHtmlContent({
           ? "h-full min-h-0 border-0"
           : "h-[min(60vh,680px)] min-h-[360px] border border-border/70",
       )}
-      sandbox=""
+      sandbox="allow-popups allow-popups-to-escape-sandbox"
       srcDoc={document}
       title={title}
     />

package/src/features/inbox/components/inbox-reader-dialog.test.tsx

@@ -3,6 +3,7 @@ import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { InboxReaderDialog } from "@/features/inbox/components/inbox-reader-dialog";
 import { useInboxStore } from "@/features/inbox/stores/inbox.store";
+import { t } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
   closeReader: vi.fn(),
@@ -54,24 +55,29 @@ describe("InboxReaderDialog", () => {
     });
   });
 
-  it("renders one accessible reader with friendly Markdown output", () => {
+  it("renders one accessible compact reader with friendly Markdown output", () => {
     render(<MemoryRouter><InboxReaderDialog /></MemoryRouter>);
 
     expect(screen.getAllByRole("dialog")).toHaveLength(1);
     const title = screen.getByRole("heading", { name: "A considered report" });
-    expect(title).toBeTruthy();
+    expect(title.className).toContain("text-sm");
     expect(document.activeElement).toBe(title);
+    expect(screen.getByText("A concise summary").className).toContain("sr-only");
     expect(screen.getByText(/Important result/)).toBeTruthy();
     expect(screen.queryByText("**Important** result")).toBeNull();
+    expect(screen.queryByRole("button", { name: t("inboxPrevious") })).toBeNull();
+    expect(screen.queryByRole("button", { name: t("inboxNext") })).toBeNull();
   });
 
-  it("uses compact chrome and lets HTML fill the reading area", () => {
+  it("lets HTML fill the reading area without changing the compact chrome", () => {
     mocks.contentType = "html";
     render(<MemoryRouter><InboxReaderDialog /></MemoryRouter>);
 
     const title = screen.getByRole("heading", { name: "A considered report" });
     expect(title.className).toContain("text-sm");
     expect(screen.getByText("A concise summary").className).toContain("sr-only");
-    expect(screen.getByTitle("A considered report").className).toContain("h-full");
+    const htmlPreview = screen.getAllByTitle("A considered report")
+      .find((element) => element.tagName === "IFRAME");
+    expect(htmlPreview?.className).toContain("h-full");
   });
 });

package/src/features/inbox/components/inbox-reader-dialog.tsx

@@ -89,7 +89,7 @@ export function InboxReaderDialog() {
     });
   };
 
-  const positionControls = (
+  const positionControls = unreadDeliveries.length > 1 ? (
     <div className="flex shrink-0 items-center gap-1 pr-1">
       <span className="mr-1 text-[11px] tabular-nums text-muted-foreground">
         {formatPosition(activeIndex + 1, unreadDeliveries.length)}
@@ -107,7 +107,7 @@ export function InboxReaderDialog() {
         onClick={() => selectAt(activeIndex + 1)}
       />
     </div>
-  );
+  ) : null;
 
   return (
     <Dialog
@@ -127,64 +127,40 @@ export function InboxReaderDialog() {
       >
         {activeDelivery ? (
           <>
-            {isHtml ? (
-              <header className="shrink-0 border-b border-border/60 px-6 py-3 pr-14 sm:px-8">
-                <div className="flex min-h-8 items-center justify-between gap-4">
-                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
-                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
-                      <Inbox className="h-3.5 w-3.5" />
-                    </span>
-                    <DialogTitle
-                      ref={titleRef}
-                      tabIndex={-1}
-                      className="truncate text-sm font-semibold text-foreground outline-none"
-                    >
-                      {activeDelivery.title}
-                    </DialogTitle>
-                    <span aria-hidden="true">·</span>
-                    <time className="shrink-0" dateTime={activeDelivery.createdAt}>
-                      {formatDateTime(activeDelivery.createdAt)}
-                    </time>
-                  </div>
-                  {positionControls}
-                </div>
-                <DialogDescription className="sr-only">
-                  {activeDelivery.summary ?? t("inboxNoSummary")}
-                </DialogDescription>
-              </header>
-            ) : (
-              <header className="shrink-0 border-b border-border/60 px-6 pb-4 pt-5 pr-14 sm:px-8 sm:pb-5 sm:pt-6">
-                <div className="mb-5 flex min-h-8 items-center justify-between gap-4">
-                  <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
-                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted">
-                      <Inbox className="h-3.5 w-3.5" />
-                    </span>
-                    <span className="truncate">{t("inboxDeliveredBy")}</span>
-                    <span aria-hidden="true">·</span>
-                    <time dateTime={activeDelivery.createdAt}>
-                      {formatDateTime(activeDelivery.createdAt)}
-                    </time>
-                  </div>
-                  {positionControls}
+            <header className="shrink-0 border-b border-border/50 px-5 py-3 pr-14 sm:px-6">
+              <div className="flex min-h-7 items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-muted/70 text-muted-foreground">
+                    <Inbox className="h-3.5 w-3.5" />
+                  </span>
+                  <DialogTitle
+                    ref={titleRef}
+                    tabIndex={-1}
+                    title={activeDelivery.title}
+                    className="min-w-0 truncate text-sm font-medium text-foreground outline-none"
+                  >
+                    {activeDelivery.title}
+                  </DialogTitle>
+                  <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+                  <time
+                    className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+                    dateTime={activeDelivery.createdAt}
+                  >
+                    {formatDateTime(activeDelivery.createdAt)}
+                  </time>
                 </div>
-                <DialogTitle
-                  ref={titleRef}
-                  tabIndex={-1}
-                  className="max-w-[680px] text-balance text-2xl font-semibold leading-tight tracking-[-0.02em] outline-none sm:text-[28px]"
-                >
-                  {activeDelivery.title}
-                </DialogTitle>
-                <DialogDescription className="mt-2 max-w-[680px] text-sm leading-6 text-muted-foreground">
-                  {activeDelivery.summary ?? t("inboxNoSummary")}
-                </DialogDescription>
-              </header>
-            )}
+                {positionControls}
+              </div>
+              <DialogDescription className="sr-only">
+                {activeDelivery.summary ?? t("inboxNoSummary")}
+              </DialogDescription>
+            </header>
 
             <div className={cn(
               "min-h-0 flex-1",
               isHtml
-                ? "p-4 sm:p-5"
-                : "custom-scrollbar overflow-y-auto px-6 py-6 sm:px-8 sm:py-7",
+                ? "p-3 sm:p-4"
+                : "custom-scrollbar overflow-y-auto px-6 py-5 sm:px-8 sm:py-6",
             )}>
               <InboxDeliveryContent
                 className={isHtml ? "h-full" : undefined}
@@ -195,23 +171,23 @@ export function InboxReaderDialog() {
               />
             </div>
 
-            <footer className="shrink-0 border-t border-border/60 bg-background/95 px-6 py-4 backdrop-blur sm:px-8">
+            <footer className="shrink-0 border-t border-border/50 bg-background px-5 py-3 sm:px-6">
               {error ? (
                 <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>
               ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex flex-col-reverse gap-2 sm:flex-row">
-                  <Button variant="ghost" onClick={inboxManager.closeReader}>
+                <div className="flex flex-col-reverse gap-1 sm:flex-row sm:flex-wrap">
+                  <Button size="sm" variant="ghost" onClick={inboxManager.closeReader}>
                     {t("inboxReadLater")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={markRead}>
+                  <Button size="sm" variant="outline" disabled={pendingAction !== null} onClick={markRead}>
                     {t("inboxMarkRead")}
                   </Button>
-                  <Button variant="outline" disabled={pendingAction !== null} onClick={openInbox}>
+                  <Button size="sm" variant="ghost" disabled={pendingAction !== null} onClick={openInbox}>
                     {t("inboxOpenInbox")}
                   </Button>
                 </div>
-                <Button disabled={pendingAction !== null} onClick={continueInChat}>
+                <Button size="sm" disabled={pendingAction !== null} onClick={continueInChat}>
                   {t("inboxContinueChat")}
                 </Button>
               </div>

package/src/features/inbox/pages/inbox-page.tsx

@@ -3,12 +3,13 @@ import type { InboxDelivery } from "@nextclaw/shared";
 import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { PageHeader } from "@/app/components/layout/page-layout";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { InboxDeliveryContent } from "@/features/inbox/components/inbox-delivery-content";
 import { useInboxDeliveries } from "@/features/inbox/hooks/use-inbox-deliveries";
 import { Button } from "@/shared/components/ui/button";
 import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { formatDateTime, t } from "@/shared/lib/i18n";
+import { formatDateShort, formatDateTime, t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type InboxFilter = "unread" | "all" | "archived";
@@ -51,26 +52,6 @@ function InboxEmptyState({ selection = false }: { selection?: boolean }) {
   );
 }
 
-function InboxPageHeader({ unreadCount }: { unreadCount: number }) {
-  return (
-    <header className="shrink-0 px-4 pb-4 pt-1 sm:px-0">
-      <div className="flex items-end justify-between gap-4">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
-            {t("inboxTitle")}
-          </h1>
-          <p className="mt-1 text-sm text-muted-foreground">{t("inboxDescription")}</p>
-        </div>
-        {unreadCount > 0 ? (
-          <span className="shrink-0 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary">
-            {t("inboxUnreadCount").replace("{count}", String(unreadCount))}
-          </span>
-        ) : null}
-      </div>
-    </header>
-  );
-}
-
 function InboxListPane({
   activeDeliveryId,
   deliveries,
@@ -82,69 +63,76 @@ function InboxListPane({
   filter: InboxFilter;
   onFilterChange: (filter: InboxFilter) => void;
 }) {
-  const filterItems: Array<{ id: InboxFilter; label: string }> = [
-    { id: "unread", label: t("inboxUnread") },
-    { id: "all", label: t("inboxAll") },
-    { id: "archived", label: t("inboxArchived") },
+  const filterItems: Array<{ id: InboxFilter; label: string; count: number }> = [
+    {
+      id: "unread",
+      label: t("inboxUnread"),
+      count: filterDeliveries(deliveries, "unread").length,
+    },
+    { id: "all", label: t("inboxAll"), count: filterDeliveries(deliveries, "all").length },
+    {
+      id: "archived",
+      label: t("inboxArchived"),
+      count: filterDeliveries(deliveries, "archived").length,
+    },
   ];
   const filteredDeliveries = filterDeliveries(deliveries, filter);
   return (
-    <aside className="flex min-h-0 flex-col border-border/60 md:border-r">
-      <div className="flex shrink-0 gap-1 border-b border-border/60 p-3">
+    <aside className="flex min-h-0 flex-col border-border/60 bg-muted/20 md:border-r">
+      <div className="flex shrink-0 gap-1 border-b border-border/50 px-3 py-2">
         {filterItems.map((item) => (
           <button
             key={item.id}
             type="button"
             onClick={() => onFilterChange(item.id)}
             className={cn(
-              "rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
               filter === item.id
-                ? "bg-foreground text-background"
-                : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                ? "bg-[var(--interaction-selection)] text-foreground"
+                : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
             )}
           >
             {item.label}
+            <span aria-hidden="true" className="text-[10px] font-normal tabular-nums opacity-60">
+              {item.count}
+            </span>
           </button>
         ))}
       </div>
       <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-2">
         {filteredDeliveries.length > 0 ? (
-          <ul className="space-y-1">
+          <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
               <li key={delivery.id}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-xl px-3 py-3 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
-                    activeDeliveryId === delivery.id ? "bg-muted" : "hover:bg-muted/70",
+                    "block rounded-lg px-2.5 py-2 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    activeDeliveryId === delivery.id
+                      ? "bg-[var(--interaction-selection)] text-foreground"
+                      : "text-foreground/80 hover:bg-[var(--interaction-hover)] hover:text-foreground",
                   )}
                 >
-                  <div className="flex items-start gap-2">
-                    <span
-                      className={cn(
-                        "mt-1.5 h-2 w-2 shrink-0 rounded-full",
-                        !delivery.readAt && "bg-primary",
-                      )}
-                      aria-label={!delivery.readAt ? t("inboxUnread") : undefined}
-                      aria-hidden={delivery.readAt ? "true" : undefined}
-                    />
-                    <div className="min-w-0 flex-1">
-                      <h2 className={cn(
-                        "line-clamp-2 text-sm leading-5 text-foreground",
-                        !delivery.readAt && "font-semibold",
-                      )}>
-                        {delivery.title}
-                      </h2>
-                      <p className="mt-1 line-clamp-2 text-xs leading-5 text-muted-foreground">
-                        {delivery.summary ?? t("inboxNoSummary")}
-                      </p>
-                      <time
-                        className="mt-2 block text-[11px] text-muted-foreground/80"
-                        dateTime={delivery.createdAt}
-                      >
-                        {formatDateTime(delivery.createdAt)}
+                  <h2 className={cn(
+                    "truncate font-medium leading-5",
+                    !delivery.readAt && "font-semibold text-foreground",
+                  )}>
+                    {delivery.title}
+                  </h2>
+                  <div className="mt-0.5 flex items-center gap-2 text-[11px] leading-4 text-muted-foreground/65">
+                    <p className="min-w-0 flex-1 truncate">
+                      {delivery.summary ?? t("inboxNoSummary")}
+                    </p>
+                    {!delivery.readAt ? (
+                      <span
+                        className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                        aria-label={t("inboxUnread")}
+                      />
+                    ) : (
+                      <time className="shrink-0 tabular-nums" dateTime={delivery.createdAt}>
+                        {formatDateShort(delivery.createdAt)}
                       </time>
-                    </div>
+                    )}
                   </div>
                 </Link>
               </li>
@@ -183,42 +171,40 @@ function InboxDetailPane({
   const isHtml = delivery.contentType === "html";
   return (
     <main className="flex min-h-0 flex-col">
-      <div className={cn(
-        "shrink-0 border-b border-border/60 px-5 sm:px-8",
-        isHtml ? "py-3 sm:py-4" : "py-4 sm:py-6",
-      )}>
+      <div className="shrink-0 border-b border-border/50 px-5 py-3 sm:px-6">
         {isMobile ? (
           <button
             type="button"
             onClick={onBack}
-            className="mb-4 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+            className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
           >
             <ArrowLeft className="h-4 w-4" />
             {t("inboxTitle")}
           </button>
         ) : null}
-        <div className="text-xs text-muted-foreground">
-          {t("inboxDeliveredBy")} · {formatDateTime(delivery.createdAt)}
+        <div className="flex min-h-7 min-w-0 items-center gap-2">
+          <h2
+            title={delivery.title}
+            className="min-w-0 truncate text-sm font-medium text-foreground"
+          >
+            {delivery.title}
+          </h2>
+          <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+          <time
+            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+            dateTime={delivery.createdAt}
+          >
+            {formatDateTime(delivery.createdAt)}
+          </time>
         </div>
-        <h2 className={cn(
-          "text-balance font-semibold leading-tight tracking-[-0.02em] text-foreground",
-          isHtml ? "mt-2 text-lg sm:text-xl" : "mt-3 text-2xl",
-        )}>
-          {delivery.title}
-        </h2>
-        {delivery.summary && !isHtml ? (
-          <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
-            {delivery.summary}
-          </p>
-        ) : null}
       </div>
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
-          ? "p-4 sm:p-5"
-          : "custom-scrollbar overflow-y-auto px-5 py-6 sm:px-8 sm:py-8",
+          ? "p-3 sm:p-4"
+          : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
       )}>
-        <div className={cn("mx-auto", isHtml ? "h-full max-w-5xl" : "max-w-3xl")}>
+        <div className={cn("mx-auto max-w-5xl", isHtml && "h-full")}>
           <InboxDeliveryContent
             className={isHtml ? "h-full" : undefined}
             content={delivery.content}
@@ -228,26 +214,28 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/60 px-5 py-3 sm:px-8">
+      <div className="shrink-0 border-t border-border/50 px-5 py-3 sm:px-6">
         {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
-        <div className="flex flex-wrap items-center gap-2">
-          <Button disabled={pending} onClick={onContinue}>
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center gap-1">
+            <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
+              {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onArchiveToggle}>
+              {delivery.archivedAt
+                ? <RotateCcw className="mr-2 h-4 w-4" />
+                : <Archive className="mr-2 h-4 w-4" />}
+              {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
+            </Button>
+            <Button size="sm" variant="ghost" disabled={pending} onClick={onDelete}>
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t("inboxDelete")}
+            </Button>
+          </div>
+          <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
           </Button>
-          <Button variant="outline" disabled={pending} onClick={onReadToggle}>
-            {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onArchiveToggle}>
-            {delivery.archivedAt
-              ? <RotateCcw className="mr-2 h-4 w-4" />
-              : <Archive className="mr-2 h-4 w-4" />}
-            {delivery.archivedAt ? t("inboxRestore") : t("inboxArchive")}
-          </Button>
-          <Button variant="ghost" disabled={pending} onClick={onDelete}>
-            <Trash2 className="mr-2 h-4 w-4" />
-            {t("inboxDelete")}
-          </Button>
         </div>
       </div>
     </main>
@@ -351,14 +339,18 @@ export function InboxPage() {
   const showDetail = !isMobile || Boolean(activeDelivery);
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
-      <InboxPageHeader unreadCount={deliveriesQuery.data?.unreadCount ?? 0} />
+    <div className="flex h-full min-h-0 flex-col gap-6">
+      <PageHeader
+        headingLevel={1}
+        title={t("inboxTitle")}
+        className="px-4 sm:px-0"
+      />
 
       <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
         {deliveriesQuery.isError ? (
           <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
         ) : (
-          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[320px_minmax(0,1fr)]">
+          <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
             {showList ? <InboxListPane
               activeDeliveryId={activeDelivery?.id ?? null}
               deliveries={deliveries}

package/src/features/notifications/components/__tests__/app-notification-toast.test.tsx

@@ -1,22 +1,28 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, useLocation } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
 import { AppNotificationToast } from "@/features/notifications";
 
+function CurrentPathname() {
+  return <span data-testid="current-pathname">{useLocation().pathname}</span>;
+}
+
 describe("AppNotificationToast", () => {
-  it("renders a keyboard-accessible route notification and dismisses it on activation", async () => {
+  it("keeps opening and dismissing a route notification as separate actions", async () => {
     const onDismiss = vi.fn();
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter initialEntries={["/chat/current"]}>
         <AppNotificationToast
           title="Background task"
           description="The requested summary is ready."
           href="/chat/session-1"
           ariaLabel="Open the background task reply"
+          dismissLabel="Dismiss notification"
           onDismiss={onDismiss}
         />
+        <CurrentPathname />
       </MemoryRouter>,
     );
 
@@ -29,23 +35,39 @@ describe("AppNotificationToast", () => {
     );
     expect(screen.getByText("Background task")).toBeTruthy();
     expect(screen.getByText("The requested summary is ready.")).toBeTruthy();
+    expect(notification.querySelector("button")).toBeNull();
 
-    await user.click(notification);
+    const dismiss = screen.getByRole("button", { name: "Dismiss notification" });
+    await user.tab();
+    expect(document.activeElement).toBe(notification);
+    await user.tab();
+    expect(document.activeElement).toBe(dismiss);
+    await user.click(dismiss);
     expect(onDismiss).toHaveBeenCalledOnce();
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/current");
+
+    await user.click(notification);
+    expect(onDismiss).toHaveBeenCalledTimes(2);
+    expect(screen.getByTestId("current-pathname").textContent).toBe("/chat/session-1");
   });
 
-  it("keeps informational notifications non-interactive when no route exists", () => {
+  it("lets users dismiss an informational notification without making its content interactive", async () => {
+    const onDismiss = vi.fn();
+    const user = userEvent.setup();
     render(
       <MemoryRouter>
         <AppNotificationToast
           title="All caught up"
           description="There is nothing else to review."
-          onDismiss={vi.fn()}
+          dismissLabel="Dismiss notification"
+          onDismiss={onDismiss}
         />
       </MemoryRouter>,
     );
 
     expect(screen.getByRole("status")).toBeTruthy();
     expect(screen.queryByRole("link")).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Dismiss notification" }));
+    expect(onDismiss).toHaveBeenCalledOnce();
   });
 });