@nextclaw/ui 0.25.4 → 0.26.1

package/src/features/chat/pages/ncp-chat-page.tsx

@@ -1,100 +1,20 @@
-import {
-  useEffect,
-  useMemo,
-} from "react";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import {
   ChatPageLayout,
   type ChatPageProps,
   useChatSessionSync,
 } from "@/features/chat/components/layout/chat-page-shell";
 import { parseSessionKeyFromRoute } from "@/features/chat/features/session/utils/chat-session-route.utils";
-import { ChatPresenter } from "@/features/chat/presenters/chat.presenter";
-import { useChatQueryStoreSync } from "@/features/chat/features/ncp/hooks/use-ncp-chat-query-store-sync";
-import {
-  ChatPresenterProvider,
-  usePresenter,
-} from "@/features/chat/components/providers/chat-presenter.provider";
-import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
-import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { useUiShowContentEvent } from "@/features/chat/features/ncp/hooks/use-ui-show-content-event";
-import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
-
-function useNcpChatRouteSelection() {
-  const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
-  const routeSessionKey = useMemo(
-    () => parseSessionKeyFromRoute(routeSessionIdParam),
-    [routeSessionIdParam],
-  );
-  return {
-    routeSessionKey,
-    sessionKey: routeSessionKey ?? undefined,
-  };
-}
-
-function useNcpChatUiBindings() {
-  const presenter = usePresenter();
-  const { confirm, ConfirmDialog } = useConfirmDialog();
-  const location = useLocation();
-  const navigate = useNavigate();
-  useEffect(() => {
-    presenter.chatUiManager.syncState({
-      pathname: location.pathname,
-    });
-    presenter.chatUiManager.bindActions({
-      navigate,
-      confirm,
-    });
-  }, [confirm, location.pathname, navigate, presenter]);
-  return <ConfirmDialog />;
-}
 
 export function NcpChatPage({ view }: ChatPageProps) {
-  const appPresenter = useAppPresenter();
-  const presenter = useMemo(() => new ChatPresenter(appPresenter), [appPresenter]);
-  return (
-    <ChatPresenterProvider presenter={presenter}>
-      <NcpChatPageContent view={view} />
-    </ChatPresenterProvider>
-  );
-}
-
-function NcpChatPageContent({ view }: ChatPageProps) {
-  const appPresenter = useAppPresenter();
   const presenter = usePresenter();
-  const confirmDialog = useNcpChatUiBindings();
-  const routeSelection = useNcpChatRouteSelection();
-  const { routeSessionKey, sessionKey } = routeSelection;
-  const visibleWorkspaceSessionKey = useChatThreadStore((state) => {
-    const { snapshot } = state;
-    if (
-      snapshot.workspacePanelParentKey !== (sessionKey ?? null) ||
-      snapshot.activeWorkspacePanelKind !== "child-session"
-    ) {
-      return null;
-    }
-    return snapshot.activeChildSessionKey?.trim() || null;
-  });
-  useEffect(() => {
-    appPresenter.chatCompletionNotificationManager.syncVisibleSessions(
-      [sessionKey, visibleWorkspaceSessionKey],
-    );
-    return () => {
-      appPresenter.chatCompletionNotificationManager.syncVisibleSessions([]);
-    };
-  }, [
-    appPresenter.chatCompletionNotificationManager,
-    sessionKey,
-    visibleWorkspaceSessionKey,
-  ]);
-  useChatQueryStoreSync({
-    sessionKey: sessionKey ?? null,
-  });
+  const { sessionId } = useParams<{ sessionId?: string }>();
   useChatSessionSync({
-    routeSessionKey,
-    syncRouteSessionSelection:
-      presenter.chatSessionListManager.syncRouteSessionSelection,
+    routeSessionKey: parseSessionKeyFromRoute(sessionId),
+    syncRouteSessionSelection: presenter.chatSessionListManager.syncRouteSessionSelection,
   });
   useUiShowContentEvent();
-  return <ChatPageLayout view={view} confirmDialog={confirmDialog} />;
+  return <ChatPageLayout view={view} />;
 }

package/src/features/chat/presenters/chat.presenter.ts

@@ -22,7 +22,8 @@ export class ChatPresenter {
     this.chatThreadManager = new ChatThreadManager(
       this.chatUiManager,
       this.chatSessionListManager,
-      appPresenter.notifyRightPanelOpened,
+      appPresenter.notifyWorkspacePanelOpened,
     );
+    appPresenter.pageResourceManager.bindWorkspace(this.chatThreadManager);
   }
 }

package/src/features/chat/stores/__tests__/chat-thread.store.test.ts

@@ -99,7 +99,7 @@ describe('chat thread workspace panel persistence', () => {
     expect(persisted.state.snapshot.workspaceFileTabs[0].params).toEqual({
       chart: { series: [3, 5, 8] },
     });
-    expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toBeUndefined();
+    expect(persisted.state.snapshot.workspaceFileTabs[0].fullLines).toEqual([]);
   });
 
   it('does not persist an unmaterialized side chat draft', () => {
@@ -228,7 +228,7 @@ describe('chat thread workspace panel persistence', () => {
             ],
           },
         },
-        version: 2,
+        version: 3,
       }),
     );
 

package/src/features/chat/stores/chat-thread.store.ts

@@ -1,3 +1,4 @@
+import { ViewMemoryStorage } from '@/shared/lib/navigation-history';
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 import type { NcpMessage } from '@nextclaw/ncp';
@@ -71,6 +72,7 @@ export type ChatWorkspaceNavigationEntry =
   | { kind: 'continuous-attention' };
 
 export type ChatThreadSnapshot = {
+  workspacePanelHidden?: boolean;
   sessionTypeLabel?: string | null;
   sessionTypeIcon?: SessionTypeIconView | null;
   sessionKey: string | null;
@@ -115,6 +117,7 @@ type ChatThreadStore = {
 type PersistedChatThreadStore = {
   snapshot?: {
     workspacePanelParentKey?: unknown;
+    workspacePanelHidden?: unknown;
     activeWorkspacePanelKind?: unknown;
     activeChildSessionKey?: unknown;
     workspaceFileTabs?: unknown;
@@ -130,6 +133,7 @@ type PersistedChatThreadStore = {
 
 type PersistedChatWorkspaceSnapshot = Pick<
   ChatThreadSnapshot,
+  | 'workspacePanelHidden'
   | 'workspacePanelParentKey'
   | 'activeWorkspacePanelKind'
   | 'activeChildSessionKey'
@@ -280,6 +284,7 @@ function normalizePersistedWorkspaceSnapshot(value: unknown): PersistedChatWorks
       : 0;
 
   return {
+    workspacePanelHidden: value.workspacePanelHidden === true,
     workspacePanelParentKey,
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
     activeChildSessionKey,
@@ -309,7 +314,7 @@ export const useChatThreadStore = create<ChatThreadStore>()(
     {
       name: CHAT_THREAD_WORKSPACE_STORAGE_KEY,
       version: CHAT_THREAD_WORKSPACE_STORAGE_VERSION,
-      storage: createJSONStorage(() => window.localStorage),
+      storage: createJSONStorage(() => new ViewMemoryStorage()),
       partialize: (state): PersistedChatThreadStore => {
         const workspaceNavigationHistory = state.snapshot.workspaceNavigationHistory.filter(
           (entry) => entry.kind !== 'side-chat-draft',
@@ -320,6 +325,7 @@ export const useChatThreadStore = create<ChatThreadStore>()(
             : 0;
         return {
           snapshot: {
+            workspacePanelHidden: state.snapshot.workspacePanelHidden,
             workspacePanelParentKey: state.snapshot.workspacePanelParentKey,
             activeWorkspacePanelKind:
               state.snapshot.activeWorkspacePanelKind === 'side-chat-draft'

package/src/features/chat/stores/floating-session.store.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+export type FloatingSession = { sessionKey: string; title: string };
+
+type FloatingSessionStore = {
+  session: FloatingSession | null;
+};
+
+export const useFloatingSessionStore = create<FloatingSessionStore>(() => ({
+  session: null,
+}));

package/src/features/chat/utils/chat-voice-permissions.utils.test.ts

@@ -1,5 +1,6 @@
 import { afterEach, expect, it, vi } from 'vitest';
 import { checkMicrophoneAccess, classifyMicrophoneError, voicePermissionInstructionKeys } from './chat-voice-permissions.utils';
+import { setLanguage, t } from '@/shared/lib/i18n';
 
 afterEach(() => vi.unstubAllGlobals());
 
@@ -20,8 +21,11 @@ it('rechecks access and immediately releases every captured track', async () =>
   expect(stop).toHaveBeenCalledTimes(2);
 });
 
-it('reports unavailable media API and an actual denial without caching', async () => {
+it('distinguishes insecure HTTP from an unsupported media API and an actual denial', async () => {
+  vi.stubGlobal('isSecureContext', false);
   vi.stubGlobal('navigator', {});
+  expect(await checkMicrophoneAccess()).toBe('insecure-context');
+  vi.stubGlobal('isSecureContext', true);
   expect(await checkMicrophoneAccess()).toBe('unsupported');
   vi.stubGlobal('navigator', { mediaDevices: { getUserMedia: vi.fn().mockRejectedValue(new DOMException('', 'NotAllowedError')) } });
   expect(await checkMicrophoneAccess()).toBe('permission');
@@ -34,3 +38,10 @@ it.each([
   expect(voicePermissionInstructionKeys(ua)).toEqual(['chatInputVoicePermissionBrowser', `chatInputVoicePermission${platform}`]);
   expect(voicePermissionInstructionKeys(`${ua} Electron`)[0]).toBe('chatInputVoicePermissionDesktop');
 });
+
+it('explains the VPS HTTPS recovery path in both supported languages', () => {
+  setLanguage('zh');
+  expect(t('chatInputVoiceInsecureContext')).toContain('VPS 配置 HTTPS');
+  setLanguage('en');
+  expect(t('chatInputVoiceInsecureContext')).toContain('Configure HTTPS for a VPS');
+});

package/src/features/chat/utils/chat-voice-permissions.utils.ts

@@ -1,4 +1,8 @@
-export type MicrophoneError = 'permission' | 'no-device' | 'device-busy' | 'unsupported' | 'failed';
+export type MicrophoneError = 'insecure-context' | 'permission' | 'no-device' | 'device-busy' | 'unsupported' | 'failed';
+
+export function isMicrophoneSecureContext(): boolean {
+  return globalThis.isSecureContext !== false;
+}
 
 export function classifyMicrophoneError(error: unknown): MicrophoneError {
   const name = error instanceof DOMException || error instanceof Error ? error.name : '';
@@ -11,6 +15,7 @@ export function classifyMicrophoneError(error: unknown): MicrophoneError {
 
 /** Check on explicit start/retry; release every track even if the panel was closed. */
 export async function checkMicrophoneAccess(): Promise<MicrophoneError | null> {
+  if (!isMicrophoneSecureContext()) return 'insecure-context';
   if (!navigator.mediaDevices?.getUserMedia) return 'unsupported';
   try {
     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

package/src/features/cron/components/__tests__/cron-config.test.tsx

@@ -350,3 +350,7 @@ describe("CronConfig", () => {
     });
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));
+
+vi.mock("@/features/right-panel-resources", () => ({ PageResourceActionsMenu: () => null, PageResourceActionItems: () => null, pageResourceFromSystemObject: vi.fn() }));

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import type { ReactNode } from "react";
 import { Play, Trash2 } from "lucide-react";
 
@@ -87,7 +89,7 @@ export function CronJobDetailDialog({
               {isBound ? t("cronBoundSession") : t("cronDedicatedSession")}
             </span>
           </div>
-          <SheetTitle>{job.name || job.id}</SheetTitle>
+          <div className="flex items-center justify-between gap-2"><SheetTitle>{job.name || job.id}</SheetTitle><PageResourceActionsMenu page={pageResourceFromSystemObject('cron-job', job.id, job.name || job.id)} /></div>
           <SheetDescription>{t("cronDetailDescription")}</SheetDescription>
         </SheetHeader>
 

package/src/features/cron/components/cron-job-row.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useState } from "react";
 import {
   CalendarClock,
@@ -157,8 +159,14 @@ export function CronJobRow({
         </button>
 
         <TooltipProvider delayDuration={250}>
-          <div className="relative flex shrink-0 items-center">
-            <div className="absolute right-11 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
+          <div className="relative flex shrink-0 items-center gap-1">
+            <Switch
+              checked={job.enabled}
+              onCheckedChange={(checked) => onToggle(job, checked)}
+              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
+            />
+
+            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -190,7 +198,8 @@ export function CronJobRow({
                   </TooltipTrigger>
                   <TooltipContent>{t("cronMoreActions")}</TooltipContent>
                 </Tooltip>
-                <PopoverContent align="end" sideOffset={4} className="w-40 p-1">
+                <PopoverContent align="end" sideOffset={4} variant="menu">
+                  <div className="my-1 h-px bg-border" />
                   <button
                     type="button"
                     onClick={() => {
@@ -213,14 +222,11 @@ export function CronJobRow({
                     <Trash2 className="h-3.5 w-3.5" />
                     {t("delete")}
                   </button>
+                <div className="my-1 h-px bg-border" />
+                  <PageResourceActionItems page={pageResourceFromSystemObject("cron-job", job.id, jobLabel)} onSelect={() => setMenuOpen(false)} />
                 </PopoverContent>
               </Popover>
             </div>
-            <Switch
-              checked={job.enabled}
-              onCheckedChange={(checked) => onToggle(job, checked)}
-              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
-            />
           </div>
         </TooltipProvider>
       </div>

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

@@ -114,3 +114,6 @@ describe("InboxReaderDialog", () => {
     );
   });
 });
+
+// Resource policy has separate integration coverage; keep this fixture scoped to its business UI.
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

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

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useRef, useState } from "react";
 import { ChevronLeft, ChevronRight, Inbox } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -151,7 +153,10 @@ export function InboxReaderDialog() {
                     {formatDateTime(activeDelivery.createdAt)}
                   </time>
                 </div>
-                {positionControls}
+                <div className="flex shrink-0 items-center gap-1">
+                  {positionControls}
+                  <PageResourceActionsMenu page={pageResourceFromSystemObject("inbox-delivery", activeDelivery.id, activeDelivery.title)} />
+                </div>
               </div>
               <DialogDescription className="sr-only">
                 {activeDelivery.summary ?? t("inboxNoSummary")}

package/src/features/inbox/pages/inbox-page.test.ts

@@ -145,3 +145,6 @@ describe("InboxPage", () => {
     );
   });
 });
+
+// Resource policy has separate integration coverage; keep this fixture scoped to its business UI.
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

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

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useEffect, useMemo, useState } from "react";
 import type { InboxDelivery } from "@nextclaw/shared";
 import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
@@ -113,14 +115,17 @@ function InboxListPane({
         {filteredDeliveries.length > 0 ? (
           <ul className="space-y-0.5">
             {filteredDeliveries.map((delivery) => (
-              <li key={delivery.id}>
+              <li key={delivery.id} className={cn(
+                "group/page-row relative rounded-lg hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--interaction-hover)]",
+                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)]",
+              )}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-lg px-2.5 py-2 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    "block rounded-lg px-2.5 py-2 pr-10 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",
+                      ? "text-foreground"
+                      : "text-foreground/80 hover:text-foreground",
                   )}
                 >
                   <h2 className={cn(
@@ -145,6 +150,9 @@ function InboxListPane({
                     )}
                   </div>
                 </Link>
+                <span className="absolute right-1 top-1.5">
+                  <PageResourceActionsMenu revealOnHover page={pageResourceFromSystemObject("inbox-delivery", delivery.id, delivery.title)} />
+                </span>
               </li>
             ))}
           </ul>

package/src/features/marketplace/components/__tests__/marketplace-page-detail.test.tsx

@@ -43,7 +43,8 @@ vi.mock("@/shared/components/doc-browser", () => ({
   }),
 }));
 
-vi.mock("@/shared/lib/api", () => ({
+vi.mock("@/shared/lib/api", async (importOriginal) => ({
+  ...await importOriginal<object>(),
   fetchMarketplaceSkillContent: mocks.fetchMarketplaceSkillContent,
 }));
 
@@ -348,3 +349,6 @@ describe("MarketplacePage detail loading", () => {
     expect(useMarketplaceDetailDocStore.getState().entries["skill:web-search"]?.contentRaw).not.toContain("Stale");
   });
 });
+
+// Resource policy has separate integration coverage; keep this fixture scoped to its business UI.
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -449,3 +449,6 @@ describe("MarketplacePage", () => {
     );
   });
 });
+
+// Resource policy has separate integration coverage; keep this fixture scoped to its business UI.
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/marketplace/components/curated-shelves/__tests__/marketplace-curated-scene-route.test.tsx

@@ -273,3 +273,5 @@ describe("Marketplace curated scene routes", () => {
     expect(screen.queryByRole("button", { name: /Development/ })).toBeNull();
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -1,3 +1,6 @@
+import { PageResourceActionsMenu } from '@/features/right-panel-resources';
+import { pageResourceFromTarget } from '@/features/right-panel-resources';
+import { createMarketplaceDetailDocTarget } from '@/features/marketplace/components/marketplace-detail-doc';
 import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
@@ -273,6 +276,7 @@ export function MarketplaceListCard(props: {
         </div>
 
         <MarketplaceListCardStatus record={record} disabled={isDisabled} />
+        {record?.resourceUri ? <PageResourceActionsMenu page={{ uri: record.resourceUri, title, target: { kind: "system-object", title, url: record.resourceUri, resourceUri: record.resourceUri, historyPolicy: "none" } }} /> : item && <PageResourceActionsMenu page={pageResourceFromTarget(createMarketplaceDetailDocTarget({ id: `skill:${item.slug}`, title, typeLabel: t("marketplaceTypeSkill"), spec, status: "loading" }))} />}
       </div>
 
       <div className="mt-2 flex min-w-0 flex-1 flex-col">

package/src/features/marketplace/components/mcp/__tests__/mcp-marketplace-page.test.tsx

@@ -226,3 +226,5 @@ describe("McpMarketplacePage", () => {
     expect(screen.getByText("Disable")).toBeTruthy();
   });
 });
+
+vi.mock("@/features/right-panel-resources/hooks/use-page-resource-actions", () => ({ usePageResourceActions: () => () => [] }));

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -1,3 +1,5 @@
+import { PageResourceActionsMenu } from "@/features/right-panel-resources";
+import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 import type {
   MarketplaceInstalledRecord,
   MarketplaceItemSummary,
@@ -121,6 +123,7 @@ export function McpMarketplaceCard(props: {
               ) : null}
             </>
           ) : null}
+          {record?.id && <PageResourceActionsMenu page={pageResourceFromSystemObject("mcp-server", record.id, name)} />}
         </div>
       </div>
     </article>

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

@@ -9,6 +9,25 @@ function CurrentPathname() {
 }
 
 describe("AppNotificationToast", () => {
+  it("expands through a separate keyboard action without navigating", async () => {
+    const onDismiss = vi.fn();
+    const onExpand = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <MemoryRouter initialEntries={['/chat/current']}>
+        <AppNotificationToast title="Reply" href="/chat/other" dismissLabel="Dismiss"
+          onDismiss={onDismiss} action={{ label: 'Expand', onClick: onExpand }} />
+        <CurrentPathname />
+      </MemoryRouter>,
+    );
+    await user.tab();
+    await user.tab();
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Expand' }));
+    await user.keyboard('{Enter}');
+    expect(onExpand).toHaveBeenCalledOnce();
+    expect(onDismiss).toHaveBeenCalledOnce();
+    expect(screen.getByTestId('current-pathname').textContent).toBe('/chat/current');
+  });
   it("keeps opening and dismissing a route notification as separate actions", async () => {
     const onDismiss = vi.fn();
     const user = userEvent.setup();

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

@@ -1,4 +1,4 @@
-import { X } from "lucide-react";
+import { Maximize2, X } from "lucide-react";
 import { Link } from "react-router-dom";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 
@@ -10,13 +10,14 @@ export type AppNotificationToastProps = {
   ariaLabel?: string;
   dismissLabel: string;
   onDismiss: () => void;
+  action?: { label: string; onClick: () => void };
 };
 
 const NOTIFICATION_CARD_CLASS =
-  "relative ml-auto flex min-h-[74px] w-[320px] max-w-[calc(100vw-2rem)] rounded-[20px] border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
+  "relative ml-auto flex min-h-[68px] w-[360px] max-w-[calc(100vw-2rem)] items-center rounded-2xl border border-border/80 bg-background text-left text-foreground shadow-[0_8px_18px_rgba(0,0,0,0.12),0_2px_5px_rgba(0,0,0,0.06)]";
 
 const NOTIFICATION_CONTENT_CLASS =
-  "flex min-h-[72px] min-w-0 flex-1 items-center gap-3 rounded-[inherit] py-3 pl-[18px] pr-[52px]";
+  "flex min-h-[66px] min-w-0 flex-1 items-center gap-2.5 rounded-[inherit] py-3 pl-3.5 pr-1";
 
 function AppNotificationContent({
   title,
@@ -47,19 +48,33 @@ function AppNotificationContent({
   );
 }
 
-function AppNotificationDismissButton({
+function AppNotificationActions({
   dismissLabel,
   onDismiss,
-}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss">) {
+  action,
+}: Pick<AppNotificationToastProps, "dismissLabel" | "onDismiss" | "action">) {
   return (
-    <IconActionButton
-      className="absolute right-2.5 top-2.5 z-10"
-      icon={<X className="h-4 w-4" aria-hidden="true" />}
-      label={dismissLabel}
-      onClick={onDismiss}
-      size="lg"
-      tooltipSide="left"
-    />
+    <div className="flex shrink-0 items-center gap-0.5 pr-2">
+      {action ? (
+        <IconActionButton
+          icon={<Maximize2 className="h-4 w-4" aria-hidden="true" />}
+          label={action.label}
+          className="h-9 w-9"
+          size="lg"
+          onClick={() => {
+            action.onClick();
+            onDismiss();
+          }}
+        />
+      ) : null}
+      <IconActionButton
+        icon={<X className="h-4 w-4" aria-hidden="true" />}
+        label={dismissLabel}
+        onClick={onDismiss}
+        className="h-9 w-9"
+        size="lg"
+      />
+    </div>
   );
 }
 
@@ -71,6 +86,7 @@ export function AppNotificationToast({
   ariaLabel,
   dismissLabel,
   onDismiss,
+  action,
 }: AppNotificationToastProps) {
   const accessibleLabel = ariaLabel ?? [title, description].filter(Boolean).join(": ");
 
@@ -89,7 +105,8 @@ export function AppNotificationToast({
             iconSrc={iconSrc}
           />
         </Link>
-        <AppNotificationDismissButton
+        <AppNotificationActions
+          action={action}
           dismissLabel={dismissLabel}
           onDismiss={onDismiss}
         />
@@ -110,7 +127,8 @@ export function AppNotificationToast({
           iconSrc={iconSrc}
         />
       </div>
-      <AppNotificationDismissButton
+      <AppNotificationActions
+        action={action}
         dismissLabel={dismissLabel}
         onDismiss={onDismiss}
       />

package/src/features/notifications/managers/app-notification.manager.ts

@@ -12,6 +12,7 @@ export type AppNotification = {
   ariaLabel?: string;
   dismissLabel?: string;
   durationMs?: number;
+  action?: { label: string; onClick: () => void };
 };
 
 const DEFAULT_NOTIFICATION_DURATION_MS = 8_000;
@@ -26,6 +27,7 @@ export class AppNotificationManager {
           href: notification.href,
           iconSrc: notification.iconSrc,
           ariaLabel: notification.ariaLabel,
+          action: notification.action,
           dismissLabel: notification.dismissLabel ?? t("notificationDismiss"),
           onDismiss: () => {
             toast.dismiss(toastId);