@wallarm-org/claude-design 0.0.0-stage → 4.8.0

package/dist/project/components/NotificationCenter/stories.md

@@ -0,0 +1,2170 @@
+# NotificationCenter story sources
+
+### NotificationCenter/NotificationCenter.stories.tsx
+
+```tsx
+import { useState } from 'react';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { CheckCheck, History, Settings, TriangleAlert } from '../../icons';
+import { AppShell } from '../AppShell/AppShell';
+import { AppShellHeader } from '../AppShell/AppShellHeader';
+import { QuickHelpDropdown, WallarmLogo } from '../AppShell/story-content';
+import { Button } from '../Button';
+import { ChatTrigger } from '../Chat';
+import {
+  EmptyStateActions,
+  EmptyStateDescription,
+  EmptyStateIllustration,
+  EmptyStateMessage,
+  EmptyStateTitle,
+} from '../EmptyState';
+import { NumericBadge } from '../NumericBadge';
+import { TabsContent, TabsTrigger } from '../Tabs';
+import { TopHeader, TopHeaderActions, TopHeaderLogo, TopHeaderSeparator } from '../TopHeader';
+import { NotificationCenter } from './NotificationCenter';
+import {
+  NotificationCenterBody,
+  NotificationCenterEmpty,
+  NotificationCenterSkeleton,
+} from './NotificationCenterBody';
+import { NotificationCenterContent } from './NotificationCenterContent';
+import {
+  NotificationCenterHeader,
+  NotificationCenterHeaderAction,
+  NotificationCenterHeaderActions,
+  NotificationCenterTitle,
+} from './NotificationCenterHeader';
+import {
+  NotificationCenterItem,
+  NotificationCenterItemActions,
+  NotificationCenterItemDescription,
+  NotificationCenterList,
+} from './NotificationCenterItem';
+import { NotificationCenterItemTime } from './NotificationCenterItemTime';
+import { NotificationCenterItemTitle } from './NotificationCenterItemTitle';
+import { NotificationCenterTabs, NotificationCenterTabsList } from './NotificationCenterTabs';
+import { NotificationCenterTrigger } from './NotificationCenterTrigger';
+
+const DESCRIPTION = [
+  'The in-app notification inbox the bell in the top header opens: unread count on the bell, New and Read tabs, and a list where each card is one click target with its own action buttons.',
+  'It is composition only — the app owns the data, decides when an item counts as read, and picks what each body shows: a list, `NotificationCenterSkeleton` while loading, or `NotificationCenterEmpty` for the empty and error states.',
+].join(' ');
+
+const meta = {
+  title: 'Messaging/NotificationCenter',
+  component: NotificationCenter,
+  subcomponents: {
+    NotificationCenterTrigger,
+    NotificationCenterContent,
+    NotificationCenterHeader,
+    NotificationCenterTitle,
+    NotificationCenterHeaderActions,
+    NotificationCenterHeaderAction,
+    NotificationCenterTabs,
+    NotificationCenterTabsList,
+    NotificationCenterBody,
+    NotificationCenterList,
+    NotificationCenterItem,
+    NotificationCenterItemTitle,
+    NotificationCenterItemTime,
+    NotificationCenterItemDescription,
+    NotificationCenterItemActions,
+    NotificationCenterEmpty,
+    NotificationCenterSkeleton,
+  },
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+} satisfies Meta<typeof NotificationCenter>;
+
+export default meta;
+
+const MINUTE = 60_000;
+const minutesAgo = (minutes: number) => new Date(Date.now() - minutes * MINUTE);
+
+/**
+ * The four kinds of notification are plain composition: two actions for a decision, one call to
+ * action for triage and digests, none for an FYI. `data-analytics-id` goes on the title and on
+ * each action button.
+ */
+export const Basic: StoryFn<typeof meta> = () => (
+  <div className='flex h-[720px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger count={5} data-analytics-id='notifications-open' />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+          <NotificationCenterHeaderActions>
+            <NotificationCenterHeaderAction data-analytics-id='notifications-mark-all-read'>
+              Mark all as read
+            </NotificationCenterHeaderAction>
+            <NotificationCenterHeaderAction asChild aria-label='Notification settings'>
+              <a href='#notification-settings'>
+                <Settings />
+              </a>
+            </NotificationCenterHeaderAction>
+          </NotificationCenterHeaderActions>
+        </NotificationCenterHeader>
+        <NotificationCenterTabs defaultValue='new'>
+          <NotificationCenterTabsList>
+            <TabsTrigger value='new'>
+              New <NumericBadge size='small'>5</NumericBadge>
+            </TabsTrigger>
+            <TabsTrigger value='read'>Read</TabsTrigger>
+          </NotificationCenterTabsList>
+          <TabsContent value='new'>
+            <NotificationCenterBody>
+              <NotificationCenterList>
+                <NotificationCenterItem unread data-testid='notification-center--item-patch'>
+                  <NotificationCenterItemTitle data-analytics-id='notification-open'>
+                    Apply a virtual patch to api.example.com?
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(3)} />
+                  <NotificationCenterItemDescription>
+                    Wally drafted a patch for the SQL injection on POST /v1/orders. It blocks the
+                    payload without touching the code.
+                  </NotificationCenterItemDescription>
+                  <NotificationCenterItemActions>
+                    <Button size='small' data-analytics-id='notification-patch-approve'>
+                      Approve
+                    </Button>
+                    <Button
+                      size='small'
+                      variant='outline'
+                      color='neutral'
+                      data-analytics-id='notification-patch-reject'
+                    >
+                      Reject
+                    </Button>
+                  </NotificationCenterItemActions>
+                </NotificationCenterItem>
+                <NotificationCenterItem unread>
+                  <NotificationCenterItemTitle data-analytics-id='notification-open'>
+                    New attack detected on api.example.com
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(9)} />
+                  <NotificationCenterItemDescription>
+                    214 SQL injection attempts from 12 IPs in the last 10 minutes.
+                  </NotificationCenterItemDescription>
+                  <NotificationCenterItemActions>
+                    <Button size='small' data-analytics-id='notification-view-attacks'>
+                      View attacks
+                    </Button>
+                  </NotificationCenterItemActions>
+                </NotificationCenterItem>
+                <NotificationCenterItem unread>
+                  <NotificationCenterItemTitle data-analytics-id='notification-open'>
+                    Node wallarm-node-3 is offline
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(22)} />
+                  <NotificationCenterItemDescription>
+                    No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+                <NotificationCenterItem unread>
+                  <NotificationCenterItemTitle data-analytics-id='notification-open'>
+                    Filtering rules updated
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60)} />
+                  <NotificationCenterItemDescription>
+                    All nodes picked up the latest rule set. Nothing to do.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+                <NotificationCenterItem unread>
+                  <NotificationCenterItemTitle data-analytics-id='notification-open'>
+                    Weekly API discovery report is ready
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(120)} />
+                  <NotificationCenterItemDescription>
+                    38 new endpoints this week, 5 of them handling sensitive data.
+                  </NotificationCenterItemDescription>
+                  <NotificationCenterItemActions>
+                    <Button size='small' data-analytics-id='notification-view-report'>
+                      View report
+                    </Button>
+                  </NotificationCenterItemActions>
+                </NotificationCenterItem>
+              </NotificationCenterList>
+            </NotificationCenterBody>
+          </TabsContent>
+          <TabsContent value='read'>
+            <NotificationCenterBody>
+              <NotificationCenterList>
+                <NotificationCenterItem>
+                  <NotificationCenterItemTitle>
+                    Node wallarm-node-2 is back online
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60 * 24)} />
+                  <NotificationCenterItemDescription>
+                    The node reconnected and is filtering traffic again.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+              </NotificationCenterList>
+            </NotificationCenterBody>
+          </TabsContent>
+        </NotificationCenterTabs>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+/**
+ * Read items drop the dot and show their age; the tab opens on Read here through `defaultValue`.
+ */
+export const ReadTab: StoryFn<typeof meta> = () => (
+  <div className='flex h-[720px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+          <NotificationCenterHeaderActions>
+            <NotificationCenterHeaderAction disabled>
+              Mark all as read
+            </NotificationCenterHeaderAction>
+            <NotificationCenterHeaderAction asChild aria-label='Notification settings'>
+              <a href='#notification-settings'>
+                <Settings />
+              </a>
+            </NotificationCenterHeaderAction>
+          </NotificationCenterHeaderActions>
+        </NotificationCenterHeader>
+        <NotificationCenterTabs defaultValue='read'>
+          <NotificationCenterTabsList>
+            <TabsTrigger value='new'>New</TabsTrigger>
+            <TabsTrigger value='read'>Read</TabsTrigger>
+          </NotificationCenterTabsList>
+          <TabsContent value='read'>
+            <NotificationCenterBody>
+              <NotificationCenterList>
+                <NotificationCenterItem>
+                  <NotificationCenterItemTitle>
+                    Apply a virtual patch to api.example.com?
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60 * 24)} />
+                  <NotificationCenterItemDescription>
+                    Approved. The patch is live on all nodes.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+                <NotificationCenterItem>
+                  <NotificationCenterItemTitle>
+                    New attack detected on api.example.com
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60 * 24 * 2)} />
+                  <NotificationCenterItemDescription>
+                    214 SQL injection attempts from 12 IPs in the last 10 minutes.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+                <NotificationCenterItem>
+                  <NotificationCenterItemTitle>
+                    Node wallarm-node-3 is offline
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60 * 24 * 3)} />
+                  <NotificationCenterItemDescription>
+                    No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+                <NotificationCenterItem>
+                  <NotificationCenterItemTitle>
+                    Weekly API discovery report is ready
+                  </NotificationCenterItemTitle>
+                  <NotificationCenterItemTime value={minutesAgo(60 * 24 * 7)} />
+                  <NotificationCenterItemDescription>
+                    38 new endpoints this week, 5 of them handling sensitive data.
+                  </NotificationCenterItemDescription>
+                </NotificationCenterItem>
+              </NotificationCenterList>
+            </NotificationCenterBody>
+          </TabsContent>
+        </NotificationCenterTabs>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+/**
+ * Each tab has its own empty state, built from `EmptyState` parts. "Mark all as read" is disabled
+ * by the app when nothing is unread.
+ */
+export const Empty: StoryFn<typeof meta> = () => (
+  <div className='flex h-[400px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+          <NotificationCenterHeaderActions>
+            <NotificationCenterHeaderAction disabled>
+              Mark all as read
+            </NotificationCenterHeaderAction>
+            <NotificationCenterHeaderAction asChild aria-label='Notification settings'>
+              <a href='#notification-settings'>
+                <Settings />
+              </a>
+            </NotificationCenterHeaderAction>
+          </NotificationCenterHeaderActions>
+        </NotificationCenterHeader>
+        <NotificationCenterTabs defaultValue='new'>
+          <NotificationCenterTabsList>
+            <TabsTrigger value='new'>New</TabsTrigger>
+            <TabsTrigger value='read'>Read</TabsTrigger>
+          </NotificationCenterTabsList>
+          <TabsContent value='new'>
+            <NotificationCenterBody>
+              <NotificationCenterEmpty>
+                <EmptyStateIllustration>
+                  <CheckCheck size='lg' />
+                </EmptyStateIllustration>
+                <EmptyStateMessage>
+                  <EmptyStateTitle>You're all caught up</EmptyStateTitle>
+                  <EmptyStateDescription>No new notifications.</EmptyStateDescription>
+                </EmptyStateMessage>
+              </NotificationCenterEmpty>
+            </NotificationCenterBody>
+          </TabsContent>
+          <TabsContent value='read'>
+            <NotificationCenterBody>
+              <NotificationCenterEmpty>
+                <EmptyStateIllustration>
+                  <History size='lg' />
+                </EmptyStateIllustration>
+                <EmptyStateMessage>
+                  <EmptyStateTitle>Nothing read yet</EmptyStateTitle>
+                  <EmptyStateDescription>
+                    Notifications you've read will show up here.
+                  </EmptyStateDescription>
+                </EmptyStateMessage>
+              </NotificationCenterEmpty>
+            </NotificationCenterBody>
+          </TabsContent>
+        </NotificationCenterTabs>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+/**
+ * While the inbox loads, the body shows placeholder rows and the bell has no badge yet.
+ */
+export const Loading: StoryFn<typeof meta> = () => (
+  <div className='flex h-[400px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+        </NotificationCenterHeader>
+        <NotificationCenterBody>
+          <NotificationCenterSkeleton />
+        </NotificationCenterBody>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+/**
+ * A failed load reuses `NotificationCenterEmpty` with a retry button. Tabs are optional: here the
+ * body sits straight under the header.
+ */
+export const ErrorState: StoryFn<typeof meta> = () => (
+  <div className='flex h-[400px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+        </NotificationCenterHeader>
+        <NotificationCenterBody>
+          <NotificationCenterEmpty>
+            <EmptyStateIllustration>
+              <TriangleAlert size='lg' />
+            </EmptyStateIllustration>
+            <EmptyStateMessage>
+              <EmptyStateTitle>Couldn't load notifications</EmptyStateTitle>
+              <EmptyStateDescription>
+                Something went wrong. Refresh the page or try again later.
+              </EmptyStateDescription>
+            </EmptyStateMessage>
+            <EmptyStateActions>
+              <Button variant='outline' color='neutral' data-analytics-id='notifications-retry'>
+                Try again
+              </Button>
+            </EmptyStateActions>
+          </NotificationCenterEmpty>
+        </NotificationCenterBody>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+const MANY_NOTIFICATIONS = Array.from({ length: 24 }, (_, index) => ({
+  id: `node-${index}`,
+  title: `Node wallarm-node-${index + 1} is offline`,
+  description: 'No heartbeat for 15 minutes. Traffic fails over to the remaining nodes.',
+  createdAt: minutesAgo(index * 37 + 1),
+}));
+
+/**
+ * Past 640px the list scrolls inside the body while the header and tabs stay put.
+ */
+export const ManyItems: StoryFn<typeof meta> = () => (
+  <div className='flex h-[720px] justify-end'>
+    <NotificationCenter data-testid='notification-center'>
+      <NotificationCenterTrigger count={MANY_NOTIFICATIONS.length} />
+      <NotificationCenterContent>
+        <NotificationCenterHeader>
+          <NotificationCenterTitle />
+          <NotificationCenterHeaderActions>
+            <NotificationCenterHeaderAction>Mark all as read</NotificationCenterHeaderAction>
+          </NotificationCenterHeaderActions>
+        </NotificationCenterHeader>
+        <NotificationCenterTabs defaultValue='new'>
+          <NotificationCenterTabsList>
+            <TabsTrigger value='new'>
+              New <NumericBadge size='small'>{MANY_NOTIFICATIONS.length}</NumericBadge>
+            </TabsTrigger>
+            <TabsTrigger value='read'>Read</TabsTrigger>
+          </NotificationCenterTabsList>
+          <TabsContent value='new'>
+            <NotificationCenterBody>
+              <NotificationCenterList>
+                {MANY_NOTIFICATIONS.map(notification => (
+                  <NotificationCenterItem key={notification.id} unread>
+                    <NotificationCenterItemTitle>{notification.title}</NotificationCenterItemTitle>
+                    <NotificationCenterItemTime value={notification.createdAt} />
+                    <NotificationCenterItemDescription>
+                      {notification.description}
+                    </NotificationCenterItemDescription>
+                  </NotificationCenterItem>
+                ))}
+              </NotificationCenterList>
+            </NotificationCenterBody>
+          </TabsContent>
+        </NotificationCenterTabs>
+      </NotificationCenterContent>
+    </NotificationCenter>
+  </div>
+);
+
+/**
+ * Where it lives: the bell in the shell's top header, between the AI Assistant toggle and Quick
+ * help, opening right-aligned under the button.
+ */
+export const InTopHeader: StoryFn<typeof meta> = () => (
+  <AppShell ambient={false} className='h-[720px]'>
+    <AppShellHeader>
+      <TopHeader>
+        <TopHeaderLogo href='/'>
+          <WallarmLogo />
+        </TopHeaderLogo>
+        <TopHeaderActions>
+          <Button variant='ghost' size='small' color='neutral'>
+            Tenant Name
+          </Button>
+          <TopHeaderSeparator />
+          <ChatTrigger />
+          <NotificationCenter data-testid='notification-center'>
+            <NotificationCenterTrigger count={2} />
+            <NotificationCenterContent>
+              <NotificationCenterHeader>
+                <NotificationCenterTitle />
+                <NotificationCenterHeaderActions>
+                  <NotificationCenterHeaderAction>Mark all as read</NotificationCenterHeaderAction>
+                  <NotificationCenterHeaderAction asChild aria-label='Notification settings'>
+                    <a href='#notification-settings'>
+                      <Settings />
+                    </a>
+                  </NotificationCenterHeaderAction>
+                </NotificationCenterHeaderActions>
+              </NotificationCenterHeader>
+              <NotificationCenterTabs defaultValue='new'>
+                <NotificationCenterTabsList>
+                  <TabsTrigger value='new'>
+                    New <NumericBadge size='small'>2</NumericBadge>
+                  </TabsTrigger>
+                  <TabsTrigger value='read'>Read</TabsTrigger>
+                </NotificationCenterTabsList>
+                <TabsContent value='new'>
+                  <NotificationCenterBody>
+                    <NotificationCenterList>
+                      <NotificationCenterItem unread>
+                        <NotificationCenterItemTitle>
+                          New attack detected on api.example.com
+                        </NotificationCenterItemTitle>
+                        <NotificationCenterItemTime value={minutesAgo(3)} />
+                        <NotificationCenterItemDescription>
+                          214 SQL injection attempts from 12 IPs in the last 10 minutes.
+                        </NotificationCenterItemDescription>
+                        <NotificationCenterItemActions>
+                          <Button size='small'>View attacks</Button>
+                        </NotificationCenterItemActions>
+                      </NotificationCenterItem>
+                      <NotificationCenterItem unread>
+                        <NotificationCenterItemTitle>
+                          Node wallarm-node-3 is offline
+                        </NotificationCenterItemTitle>
+                        <NotificationCenterItemTime value={minutesAgo(22)} />
+                        <NotificationCenterItemDescription>
+                          No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.
+                        </NotificationCenterItemDescription>
+                      </NotificationCenterItem>
+                    </NotificationCenterList>
+                  </NotificationCenterBody>
+                </TabsContent>
+                <TabsContent value='read'>
+                  <NotificationCenterBody>
+                    <NotificationCenterList>
+                      <NotificationCenterItem>
+                        <NotificationCenterItemTitle>
+                          Weekly API discovery report is ready
+                        </NotificationCenterItemTitle>
+                        <NotificationCenterItemTime value={minutesAgo(60 * 24 * 7)} />
+                        <NotificationCenterItemDescription>
+                          38 new endpoints this week, 5 of them handling sensitive data.
+                        </NotificationCenterItemDescription>
+                      </NotificationCenterItem>
+                    </NotificationCenterList>
+                  </NotificationCenterBody>
+                </TabsContent>
+              </NotificationCenterTabs>
+            </NotificationCenterContent>
+          </NotificationCenter>
+          <QuickHelpDropdown />
+        </TopHeaderActions>
+      </TopHeader>
+    </AppShellHeader>
+  </AppShell>
+);
+
+InTopHeader.parameters = { layout: 'fullscreen' };
+
+/**
+ * Controlled open state: the app can close the inbox itself, for example after navigating.
+ */
+export const Controlled: StoryFn<typeof meta> = () => {
+  const [open, setOpen] = useState(false);
+  const [unread, setUnread] = useState(true);
+
+  const handleMarkAllRead = () => setUnread(false);
+  const handleItemClick = () => setUnread(false);
+
+  return (
+    <div className='flex h-[400px] justify-end'>
+      <NotificationCenter data-testid='notification-center' open={open} onOpenChange={setOpen}>
+        <NotificationCenterTrigger count={unread ? 1 : 0} />
+        <NotificationCenterContent>
+          <NotificationCenterHeader>
+            <NotificationCenterTitle />
+            <NotificationCenterHeaderActions>
+              <NotificationCenterHeaderAction disabled={!unread} onClick={handleMarkAllRead}>
+                Mark all as read
+              </NotificationCenterHeaderAction>
+            </NotificationCenterHeaderActions>
+          </NotificationCenterHeader>
+          <NotificationCenterBody>
+            <NotificationCenterList>
+              <NotificationCenterItem unread={unread}>
+                <NotificationCenterItemTitle onClick={handleItemClick}>
+                  Weekly API discovery report is ready
+                </NotificationCenterItemTitle>
+                <NotificationCenterItemTime value={minutesAgo(120)} />
+                <NotificationCenterItemDescription>
+                  38 new endpoints this week, 5 of them handling sensitive data.
+                </NotificationCenterItemDescription>
+              </NotificationCenterItem>
+            </NotificationCenterList>
+          </NotificationCenterBody>
+        </NotificationCenterContent>
+      </NotificationCenter>
+    </div>
+  );
+};
+```
+
+### AppShell/story-content/index.ts
+
+```tsx
+export { AccountDropdown, railModeFor, type SidebarMode } from './_storyAccountDropdown';
+export { ConfigRemote, type ConfigRemoteProps, RemoteForProduct } from './_storyConfigRenderer';
+export { HeaderActions } from './_storyHeaderActions';
+export { HomeContent } from './_storyHomeContent';
+export { deriveProduct, PRODUCT_CONFIGS, type Product, productLandingPath } from './_storyLib';
+export {
+  aiHypervisorNavConfig,
+  edgeNavConfig,
+  infraDiscoveryNavConfig,
+  securityTestingNavConfig,
+  settingsNavConfig,
+} from './_storyNavConfigs';
+export { NavRailFooterContent } from './_storyNavRailFooter';
+export { NotificationsInbox } from './_storyNotificationsInbox';
+export { ProductNavItems } from './_storyProductNavItems';
+export { QuickHelpDropdown } from './_storyQuickHelpDropdown';
+export { RecentDropdown } from './_storyRecentDropdown';
+export { StoryRouter, useStoryPathname, useStoryProductNavigation } from './_storyRouter';
+export { WallarmLogo } from './_storyWallarmLogo';
+```
+
+### AppShell/story-content/_storyAccountDropdown.tsx
+
+```tsx
+import { Fragment } from 'react';
+import { LogOut, PanelLeftDashed, PencilRuler, Settings, UserRound } from '../../../icons';
+import { cn } from '../../../utils/cn';
+import {
+  Avatar,
+  AvatarContent,
+  AvatarDescription,
+  AvatarFallback,
+  AvatarImage,
+  AvatarName,
+} from '../../Avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemIcon,
+  DropdownMenuItemText,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuTriggerItem,
+} from '../../DropdownMenu';
+import { NavRailItem, type NavRailMode } from '../../NavRail';
+import { Text } from '../../Text';
+import { type FrameStyle, type Theme, useTheme } from '../../ThemeProvider';
+
+export type SidebarMode = 'adaptive' | 'expanded' | 'collapsed' | 'compact';
+
+/** Adaptive collapses the rail inside a product and expands it on Home; the other modes pin it. */
+export const railModeFor = (mode: SidebarMode, onHome: boolean): NavRailMode => {
+  if (mode === 'adaptive') return onHome ? 'expanded' : 'collapsed';
+  return mode;
+};
+
+const USER_NAME = 'Meow Meow';
+const USER_EMAIL = 'meow@meow.com';
+
+const THEMES: Theme[] = ['light', 'dark'];
+// Adaptive on its own, then the two pinned widths, then compact.
+const SIDEBAR_MODE_GROUPS: SidebarMode[][] = [['adaptive'], ['expanded', 'collapsed'], ['compact']];
+const SIDEBAR_MODES = SIDEBAR_MODE_GROUPS.flat();
+
+const THEME_LABELS: Record<Theme, string> = {
+  light: 'Light',
+  dark: 'Dark',
+};
+
+const FRAME_STYLES: FrameStyle[] = ['neutral', 'branded'];
+
+const FRAME_STYLE_LABELS: Record<FrameStyle, string> = {
+  neutral: 'Neutral',
+  branded: 'Branded',
+};
+
+// The swatch in front of each Frame style option, as in Figma.
+const FRAME_STYLE_SWATCH: Record<FrameStyle, string> = {
+  neutral: 'bg-icon-secondary',
+  branded: 'bg-icon-brand',
+};
+
+const SIDEBAR_MODE_LABELS: Record<SidebarMode, string> = {
+  adaptive: 'Adaptive',
+  expanded: 'Always expanded',
+  collapsed: 'Always collapsed',
+  compact: 'Compact',
+};
+
+export const AccountDropdown = ({
+  sidebarMode,
+  onSidebarModeChange,
+  theme,
+  onThemeChange,
+}: {
+  sidebarMode: SidebarMode;
+  onSidebarModeChange: (mode: SidebarMode) => void;
+  theme: Theme;
+  onThemeChange: (theme: Theme) => void;
+}) => {
+  const { frameStyle, setFrameStyle } = useTheme();
+
+  return (
+    <DropdownMenu positioning={{ placement: 'right-end', gutter: 6, offset: { crossAxis: 12 } }}>
+      <DropdownMenuTrigger>
+        <NavRailItem icon={UserRound} label={USER_NAME} avatar />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-256'>
+        <div className='rounded-6 border border-border-primary-light bg-states-primary-hover px-8 py-8 mb-4'>
+          <Avatar size='md'>
+            <AvatarImage />
+            <AvatarFallback name={USER_NAME} />
+            <AvatarContent>
+              <AvatarName>{USER_NAME}</AvatarName>
+              <AvatarDescription>{USER_EMAIL}</AvatarDescription>
+            </AvatarContent>
+          </Avatar>
+        </div>
+        <DropdownMenuItem>
+          <DropdownMenuItemIcon>
+            <Settings />
+          </DropdownMenuItemIcon>
+          <DropdownMenuItemText>Profile settings</DropdownMenuItemText>
+        </DropdownMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTriggerItem>
+            <DropdownMenuItemIcon>
+              <PencilRuler />
+            </DropdownMenuItemIcon>
+            <DropdownMenuItemContent>
+              <DropdownMenuItemText>Appearance</DropdownMenuItemText>
+              <Text size='xs' color='secondary'>
+                {THEME_LABELS[theme]} and {FRAME_STYLE_LABELS[frameStyle].toLowerCase()}
+              </Text>
+            </DropdownMenuItemContent>
+          </DropdownMenuTriggerItem>
+          <DropdownMenuContent className='w-132'>
+            <DropdownMenuRadioGroup
+              value={theme}
+              onValueChange={({ value }) => {
+                const next = THEMES.find(t => t === value);
+                if (next) onThemeChange(next);
+              }}
+            >
+              {THEMES.map(t => (
+                <DropdownMenuRadioItem key={t} value={t}>
+                  <DropdownMenuItemText>{THEME_LABELS[t]}</DropdownMenuItemText>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioGroup
+              value={frameStyle}
+              onValueChange={({ value }) => {
+                const next = FRAME_STYLES.find(s => s === value);
+                if (next) setFrameStyle(next);
+              }}
+            >
+              {FRAME_STYLES.map(s => (
+                <DropdownMenuRadioItem key={s} value={s}>
+                  <DropdownMenuItemIcon>
+                    <span className='flex size-16 items-center justify-center'>
+                      <span className={cn('size-8 rounded-full', FRAME_STYLE_SWATCH[s])} />
+                    </span>
+                  </DropdownMenuItemIcon>
+                  <DropdownMenuItemText>{FRAME_STYLE_LABELS[s]}</DropdownMenuItemText>
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu>
+          <DropdownMenuTriggerItem>
+            <DropdownMenuItemIcon>
+              <PanelLeftDashed />
+            </DropdownMenuItemIcon>
+            <DropdownMenuItemContent>
+              <DropdownMenuItemText>Sidebar mode</DropdownMenuItemText>
+              <Text size='xs' color='secondary'>
+                {SIDEBAR_MODE_LABELS[sidebarMode]}
+              </Text>
+            </DropdownMenuItemContent>
+          </DropdownMenuTriggerItem>
+          <DropdownMenuContent className='w-200'>
+            <DropdownMenuRadioGroup
+              value={sidebarMode}
+              onValueChange={({ value }) => {
+                const next = SIDEBAR_MODES.find(m => m === value);
+                if (next) onSidebarModeChange(next);
+              }}
+            >
+              {SIDEBAR_MODE_GROUPS.map((group, index) => (
+                <Fragment key={group.join('-')}>
+                  {index > 0 && <DropdownMenuSeparator />}
+                  {group.map(m => (
+                    <DropdownMenuRadioItem key={m} value={m}>
+                      <DropdownMenuItemText>{SIDEBAR_MODE_LABELS[m]}</DropdownMenuItemText>
+                    </DropdownMenuRadioItem>
+                  ))}
+                </Fragment>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <DropdownMenuItemIcon>
+            <LogOut />
+          </DropdownMenuItemIcon>
+          <DropdownMenuItemText>Sign out</DropdownMenuItemText>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+```
+
+### AppShell/story-content/_storyConfigRenderer.tsx
+
+```tsx
+import { type FC, type ReactNode, useEffect, useState } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { Page, PageContent, PageHeader, PageTitle } from '../../Page';
+import {
+  type NavConfig,
+  RemoteShell,
+  RemoteShellBreadcrumb,
+  RemoteShellContent,
+  RemoteShellPanel,
+  useRemoteShellContext,
+} from '../../RemoteShell';
+import { HomeContent } from './_storyHomeContent';
+import { PRODUCT_CONFIGS, type Product } from './_storyLib';
+import { useStoryPathname } from './_storyRouter';
+
+export interface ConfigRemoteProps {
+  config: NavConfig;
+  basePath?: string;
+  /** Fake a 2s load when the product opens, to show the panel and content skeletons. */
+  simulateLoading?: boolean;
+  /** Page content; defaults to a placeholder page titled after the breadcrumbs. */
+  children?: ReactNode;
+}
+
+const RemotePageContent: FC = () => {
+  const { breadcrumbSegments } = useRemoteShellContext();
+
+  const lastSegment = breadcrumbSegments[breadcrumbSegments.length - 1];
+  const pageTitle = lastSegment?.label ?? '';
+  const fullPath = breadcrumbSegments.map(s => s.label).join(' / ');
+
+  return (
+    <Page title={pageTitle} fixedHeight>
+      <PageHeader>
+        <PageTitle>{pageTitle}</PageTitle>
+      </PageHeader>
+      <PageContent>
+        <p className='text-sm text-text-secondary'>Placeholder page for {fullPath}.</p>
+      </PageContent>
+    </Page>
+  );
+};
+
+/**
+ * A product remote wired to TanStack Router the recommended way: the router owns the
+ * URL, `RemoteShell` gets the router's pathname (`pathname`) and hands navigations
+ * back to it (`onNavigate`). Must render inside a router (`StoryRouter`).
+ */
+export const ConfigRemote: FC<ConfigRemoteProps> = ({
+  config,
+  basePath,
+  simulateLoading = true,
+  children,
+}) => {
+  const navigate = useNavigate();
+  const pathname = useStoryPathname();
+  const [loading, setLoading] = useState(simulateLoading);
+
+  // Remounted per product (see `RemoteForProduct`), so this runs once per product.
+  useEffect(() => {
+    if (!simulateLoading) return;
+    const timer = setTimeout(() => setLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, [simulateLoading]);
+
+  return (
+    <RemoteShell
+      config={config}
+      basePath={basePath}
+      pathname={pathname}
+      onNavigate={to => navigate({ to })}
+    >
+      {loading ? (
+        <>
+          <RemoteShellPanel isLoading />
+          <RemoteShellContent isLoading />
+        </>
+      ) : (
+        <>
+          <RemoteShellPanel resizable />
+          <RemoteShellBreadcrumb />
+          <RemoteShellContent>{children ?? <RemotePageContent />}</RemoteShellContent>
+        </>
+      )}
+    </RemoteShell>
+  );
+};
+
+export const RemoteForProduct = ({
+  product,
+  simulateLoading = true,
+}: {
+  product: Product;
+  simulateLoading?: boolean;
+}) => {
+  if (product === 'home') return <HomeContent />;
+  const { config } = PRODUCT_CONFIGS[product];
+  // Keyed by product: each product is its own remote, so its drill-transition and
+  // loading state never carry over to the next one.
+  return (
+    <ConfigRemote
+      key={product}
+      config={config}
+      basePath={`/${product}`}
+      simulateLoading={simulateLoading}
+    />
+  );
+};
+```
+
+### AppShell/story-content/_storyHeaderActions.tsx
+
+```tsx
+import type { ReactNode } from 'react';
+import { ChevronUpDown } from '../../../icons';
+import { Button } from '../../Button';
+import { Code } from '../../Code';
+import { Text } from '../../Text';
+import { TopHeaderSeparator } from '../../TopHeader';
+import { NotificationsInbox } from './_storyNotificationsInbox';
+import { QuickHelpDropdown } from './_storyQuickHelpDropdown';
+import { StorySearchModal } from './_storySearchModal';
+
+interface HeaderActionsProps {
+  /** Rendered before the notifications bell — where the host puts its AI Assistant toggle. */
+  assistantToggle?: ReactNode;
+}
+
+export const HeaderActions = ({ assistantToggle }: HeaderActionsProps) => (
+  <>
+    <StorySearchModal />
+
+    <TopHeaderSeparator />
+
+    <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>
+      <Text size='xs' weight='medium'>
+        Tenant Name
+      </Text>
+      <span className='text-text-tertiary mx-[-2px]'>•</span>
+      <Code size='s' color='secondary'>
+        12345
+      </Code>
+      <ChevronUpDown className='!icon-sm' />
+    </Button>
+
+    {assistantToggle}
+
+    <NotificationsInbox />
+
+    <QuickHelpDropdown />
+  </>
+);
+```
+
+### AppShell/story-content/_storyHomeContent.tsx
+
+```tsx
+import type { FC } from 'react';
+
+export const HomeContent: FC = () => (
+  <div className='p-24'>
+    <h1 className='text-xl font-semibold text-text-primary'>Home</h1>
+    <p className='mt-4 text-sm text-text-secondary'>
+      Cross-product summary. Click any product in the rail to drill into it.
+    </p>
+  </div>
+);
+```
+
+### AppShell/story-content/_storyLib.ts
+
+```tsx
+import { findFirstLinkPath } from '../../RemoteShell';
+import {
+  aiHypervisorNavConfig,
+  edgeNavConfig,
+  infraDiscoveryNavConfig,
+  securityTestingNavConfig,
+  settingsNavConfig,
+} from './_storyNavConfigs';
+
+const KNOWN_PRODUCTS = [
+  'home',
+  'edge',
+  'ai-hypervisor',
+  'infra-discovery',
+  'security-testing',
+  'settings',
+] as const;
+
+export type Product = (typeof KNOWN_PRODUCTS)[number];
+
+export const PRODUCT_CONFIGS: Record<Exclude<Product, 'home'>, { config: typeof edgeNavConfig }> = {
+  edge: { config: edgeNavConfig },
+  'ai-hypervisor': { config: aiHypervisorNavConfig },
+  'infra-discovery': { config: infraDiscoveryNavConfig },
+  'security-testing': { config: securityTestingNavConfig },
+  settings: { config: settingsNavConfig },
+};
+
+export function deriveProduct(pathname: string): Product {
+  const segment = pathname.split('/').filter(Boolean)[0];
+  if (segment && (KNOWN_PRODUCTS as readonly string[]).includes(segment)) {
+    return segment as Product;
+  }
+  return 'home';
+}
+
+/** Landing URL of a product: its first link, or `/home`. */
+export function productLandingPath(product: Product): string {
+  if (product === 'home') return '/home';
+  const { config } = PRODUCT_CONFIGS[product];
+  const firstPath = findFirstLinkPath(config.items) ?? '';
+  return `/${product}/${firstPath}`;
+}
+```
+
+### AppShell/story-content/_storyNavConfigs.ts
+
+```tsx
+import { CircleDashed, Filter, Plus } from '../../../icons';
+import type { NavConfig } from '../../RemoteShell';
+
+export const edgeNavConfig: NavConfig = {
+  productLabel: 'Edge',
+  productPath: '/edge',
+  headerActions: [
+    { icon: Filter, label: 'Filter', onClick: () => alert('Filter clicked') },
+    { icon: Plus, label: 'Add', onClick: () => alert('Add clicked') },
+  ],
+  items: [
+    { type: 'link', id: 'overview', label: 'Overview', path: 'overview', icon: CircleDashed },
+    {
+      type: 'drill',
+      id: 'data-planes',
+      label: 'Data planes',
+      path: 'data-planes',
+      icon: CircleDashed,
+      param: 'dataPlaneId',
+      entities: [
+        { id: 'production', label: 'Production', description: 'Main production environment' },
+        { id: 'staging', label: 'Staging', description: 'Pre-production testing' },
+        { id: 'edge-eu', label: 'Edge EU', description: 'European edge nodes' },
+        { id: 'edge-us', label: 'Edge US', description: 'US edge nodes' },
+      ],
+      children: [
+        {
+          type: 'link',
+          id: 'dp-overview',
+          label: 'Overview',
+          path: 'overview',
+          icon: CircleDashed,
+        },
+        {
+          type: 'drill',
+          id: 'dp-nodes',
+          label: 'Nodes',
+          path: 'nodes',
+          icon: CircleDashed,
+          param: 'nodeId',
+          entities: [
+            { id: 'node-1', label: 'Node 1', description: 'Primary node' },
+            { id: 'node-2', label: 'Node 2', description: 'Secondary node' },
+            { id: 'node-3', label: 'Node 3', description: 'Tertiary node' },
+          ],
+          children: [
+            {
+              type: 'link',
+              id: 'node-overview',
+              label: 'Overview',
+              path: 'overview',
+              icon: CircleDashed,
+            },
+            {
+              type: 'link',
+              id: 'node-metrics',
+              label: 'Metrics',
+              path: 'metrics',
+              icon: CircleDashed,
+            },
+            { type: 'link', id: 'node-logs', label: 'Logs', path: 'logs', icon: CircleDashed },
+            {
+              type: 'link',
+              id: 'node-config',
+              label: 'Configuration',
+              path: 'config',
+              icon: CircleDashed,
+            },
+          ],
+        },
+        {
+          type: 'link',
+          id: 'dp-services',
+          label: 'Services',
+          path: 'services',
+          icon: CircleDashed,
+          dividerAfter: true,
+        },
+        { type: 'link', id: 'dp-govern', label: 'Govern', path: 'govern', icon: CircleDashed },
+        {
+          type: 'group',
+          id: 'dp-operations',
+          label: 'Operations',
+          icon: CircleDashed,
+          children: [
+            {
+              type: 'link',
+              id: 'dp-routing-rules',
+              label: 'Routing rules',
+              path: 'routing-rules',
+            },
+            { type: 'link', id: 'dp-settings', label: 'Settings', path: 'settings' },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'link',
+      id: 'dashboards',
+      label: 'Dashboards',
+      path: 'dashboards',
+      icon: CircleDashed,
+      dividerAfter: true,
+    },
+    { type: 'section-header', id: 'section-detect', label: 'Detect & Respond' },
+    {
+      type: 'group',
+      id: 'events',
+      label: 'Events',
+      icon: CircleDashed,
+      defaultExpanded: true,
+      children: [
+        { type: 'link', id: 'attacks', label: 'Attacks', path: 'attacks' },
+        { type: 'link', id: 'incidents', label: 'Incidents', path: 'incidents' },
+        { type: 'link', id: 'security-issues', label: 'Security Issues', path: 'security-issues' },
+        { type: 'link', id: 'api-sessions', label: 'API Sessions', path: 'api-sessions' },
+      ],
+    },
+    {
+      type: 'group',
+      id: 'api-security',
+      label: 'API Security',
+      icon: CircleDashed,
+      children: [
+        {
+          type: 'link',
+          id: 'api-attack-surface',
+          label: 'API Attack Surface',
+          path: 'api-attack-surface',
+        },
+        { type: 'link', id: 'api-discovery', label: 'API Discovery', path: 'api-discovery' },
+        {
+          type: 'link',
+          id: 'api-abuse-prevention',
+          label: 'API Abuse Prevention',
+          path: 'api-abuse-prevention',
+        },
+        {
+          type: 'link',
+          id: 'api-specifications',
+          label: 'API Specifications',
+          path: 'api-specifications',
+        },
+      ],
+    },
+    {
+      type: 'group',
+      id: 'security-controls',
+      label: 'Security controls',
+      icon: CircleDashed,
+      children: [
+        {
+          type: 'link',
+          id: 'ip-session-lists',
+          label: 'IP & Session Lists',
+          path: 'ip-session-lists',
+        },
+        { type: 'link', id: 'triggers', label: 'Triggers', path: 'triggers' },
+        { type: 'link', id: 'rules', label: 'Rules', path: 'rules' },
+        {
+          type: 'link',
+          id: 'mitigation-controls',
+          label: 'Mitigation Controls',
+          path: 'mitigation-controls',
+        },
+        {
+          type: 'link',
+          id: 'credential-stuffing',
+          label: 'Credential Stuffing',
+          path: 'credential-stuffing',
+        },
+      ],
+    },
+    { type: 'section-header', id: 'section-protect', label: 'Protect' },
+    {
+      type: 'group',
+      id: 'security-testing',
+      label: 'Security Testing',
+      icon: CircleDashed,
+      children: [
+        { type: 'link', id: 'threat-replay', label: 'Threat Replay', path: 'threat-replay' },
+        { type: 'link', id: 'schema-based', label: 'Schema-Based', path: 'schema-based' },
+      ],
+    },
+    {
+      type: 'group',
+      id: 'configuration',
+      label: 'Configuration',
+      icon: CircleDashed,
+      children: [
+        {
+          type: 'group',
+          id: 'nodes',
+          label: 'Nodes',
+          children: [
+            {
+              type: 'link',
+              id: 'nodes-overview',
+              label: 'Overview',
+              path: 'nodes-overview',
+            },
+            { type: 'link', id: 'nodes-pools', label: 'Pools', path: 'nodes-pools' },
+            {
+              type: 'link',
+              id: 'nodes-health-checks',
+              label: 'Health checks',
+              path: 'nodes-health-checks',
+            },
+          ],
+        },
+        { type: 'link', id: 'security-edge', label: 'Security Edge', path: 'security-edge' },
+        { type: 'link', id: 'integrations', label: 'Integrations', path: 'integrations' },
+      ],
+    },
+  ],
+};
+
+export const aiHypervisorNavConfig: NavConfig = {
+  productLabel: 'AI Hypervisor',
+  productPath: '/ai-hypervisor',
+  items: [
+    { type: 'link', id: 'heatmap', label: 'Heatmap', path: 'heatmap', icon: CircleDashed },
+    { type: 'link', id: 'registry', label: 'Registry', path: 'registry', icon: CircleDashed },
+    {
+      type: 'group',
+      id: 'topology',
+      label: 'Topology',
+      icon: CircleDashed,
+      defaultExpanded: true,
+      children: [
+        {
+          type: 'link',
+          id: 'topology-overview',
+          label: 'Overview',
+          path: 'topology-overview',
+        },
+        {
+          type: 'link',
+          id: 'topology-services',
+          label: 'Services',
+          path: 'topology-services',
+        },
+        {
+          type: 'group',
+          id: 'graphs',
+          label: 'Graphs',
+          children: [
+            { type: 'link', id: 'flow-graph', label: 'Flow graph', path: 'flow-graph' },
+            {
+              type: 'link',
+              id: 'dependency-graph',
+              label: 'Dependency graph',
+              path: 'dependency-graph',
+            },
+            {
+              type: 'link',
+              id: 'traffic-graph',
+              label: 'Traffic graph',
+              path: 'traffic-graph',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'link',
+      id: 'data-tracks',
+      label: 'Data Tracks',
+      path: 'data-tracks',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'user-tracks',
+      label: 'User Tracks',
+      path: 'user-tracks',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'supply-chain',
+      label: 'Supply Chain',
+      path: 'supply-chain',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'enforcement',
+      label: 'Enforcement',
+      path: 'enforcement',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'ai-integrations',
+      label: 'Integrations',
+      path: 'ai-integrations',
+      icon: CircleDashed,
+    },
+    { type: 'link', id: 'red-team', label: 'Red Team', path: 'red-team', icon: CircleDashed },
+    { type: 'link', id: 'debugger', label: 'Debugger', path: 'debugger', icon: CircleDashed },
+  ],
+};
+
+export const infraDiscoveryNavConfig: NavConfig = {
+  productLabel: 'Infra Discovery',
+  productPath: '/infra-discovery',
+  headerActions: [{ icon: Filter, label: 'Filter', onClick: () => alert('Filter clicked') }],
+  items: [
+    { type: 'link', id: 'overview', label: 'Overview', path: 'overview', icon: CircleDashed },
+    {
+      type: 'group',
+      id: 'inventory',
+      label: 'Inventory',
+      icon: CircleDashed,
+      defaultExpanded: true,
+      children: [
+        { type: 'link', id: 'all-assets', label: 'All assets', path: 'all-assets' },
+        { type: 'link', id: 'untagged', label: 'Untagged', path: 'untagged' },
+        {
+          type: 'group',
+          id: 'by-source',
+          label: 'By source',
+          children: [
+            {
+              type: 'link',
+              id: 'cloud-accounts',
+              label: 'Cloud accounts',
+              path: 'cloud-accounts',
+            },
+            { type: 'link', id: 'kubernetes', label: 'Kubernetes', path: 'kubernetes' },
+            {
+              type: 'link',
+              id: 'source-control',
+              label: 'Source control',
+              path: 'source-control',
+            },
+          ],
+        },
+      ],
+    },
+    { type: 'link', id: 'topology', label: 'Topology', path: 'topology', icon: CircleDashed },
+    { type: 'link', id: 'findings', label: 'Findings', path: 'findings', icon: CircleDashed },
+    { type: 'link', id: 'risks', label: 'Risks', path: 'risks', icon: CircleDashed },
+    {
+      type: 'link',
+      id: 'infra-integrations',
+      label: 'Integrations',
+      path: 'infra-integrations',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'infra-settings',
+      label: 'Settings',
+      path: 'infra-settings',
+      icon: CircleDashed,
+    },
+  ],
+};
+
+export const securityTestingNavConfig: NavConfig = {
+  productLabel: 'Security Testing',
+  productPath: '/security-testing',
+  items: [
+    { type: 'link', id: 'overview', label: 'Overview', path: 'overview', icon: CircleDashed },
+    {
+      type: 'link',
+      id: 'test-suites',
+      label: 'Test Suites',
+      path: 'test-suites',
+      icon: CircleDashed,
+    },
+    {
+      type: 'group',
+      id: 'templates',
+      label: 'Templates',
+      icon: CircleDashed,
+      children: [
+        { type: 'link', id: 'owasp', label: 'OWASP', path: 'owasp' },
+        { type: 'link', id: 'pci-dss', label: 'PCI DSS', path: 'pci-dss' },
+        { type: 'link', id: 'internal', label: 'Internal', path: 'internal' },
+      ],
+    },
+    { type: 'link', id: 'schedules', label: 'Schedules', path: 'schedules', icon: CircleDashed },
+    { type: 'link', id: 'results', label: 'Results', path: 'results', icon: CircleDashed },
+    { type: 'link', id: 'coverage', label: 'Coverage', path: 'coverage', icon: CircleDashed },
+    {
+      type: 'link',
+      id: 'testing-settings',
+      label: 'Settings',
+      path: 'testing-settings',
+      icon: CircleDashed,
+    },
+  ],
+};
+
+export const settingsNavConfig: NavConfig = {
+  productLabel: 'Settings',
+  productPath: '/settings',
+  items: [
+    { type: 'link', id: 'profile', label: 'Profile', path: 'profile', icon: CircleDashed },
+    { type: 'link', id: 'general', label: 'General', path: 'general', icon: CircleDashed },
+    {
+      type: 'link',
+      id: 'subscriptions',
+      label: 'Subscriptions',
+      path: 'subscriptions',
+      icon: CircleDashed,
+    },
+    {
+      type: 'link',
+      id: 'applications',
+      label: 'Applications',
+      path: 'applications',
+      icon: CircleDashed,
+    },
+    {
+      type: 'group',
+      id: 'users',
+      label: 'Users',
+      icon: CircleDashed,
+      defaultExpanded: true,
+      children: [
+        { type: 'link', id: 'users-all', label: 'All users', path: 'users-all' },
+        {
+          type: 'link',
+          id: 'users-invites',
+          label: 'Pending invites',
+          path: 'users-invites',
+        },
+        { type: 'link', id: 'users-roles', label: 'Roles', path: 'users-roles' },
+      ],
+    },
+    { type: 'section-header', id: 'section-access', label: 'Access Management' },
+    { type: 'link', id: 'groups', label: 'Groups', path: 'groups', icon: CircleDashed },
+    { type: 'link', id: 'api-tokens', label: 'API Tokens', path: 'api-tokens', icon: CircleDashed },
+    {
+      type: 'link',
+      id: 'activity-log',
+      label: 'Activity Log',
+      path: 'activity-log',
+      icon: CircleDashed,
+      dividerAfter: true,
+    },
+    {
+      type: 'group',
+      id: 'admin-zone',
+      label: 'Admin Zone',
+      icon: CircleDashed,
+      defaultExpanded: true,
+      children: [
+        {
+          type: 'link',
+          id: 'customer-settings',
+          label: 'Customer Settings',
+          path: 'customer-settings',
+        },
+        {
+          type: 'group',
+          id: 'system-configuration',
+          label: 'System Configuration',
+          children: [
+            { type: 'link', id: 'sys-general', label: 'General', path: 'sys-general' },
+            { type: 'link', id: 'sys-storage', label: 'Storage', path: 'sys-storage' },
+            {
+              type: 'link',
+              id: 'sys-networking',
+              label: 'Networking',
+              path: 'sys-networking',
+            },
+          ],
+        },
+        {
+          type: 'link',
+          id: 'bola-triggers',
+          label: 'BOLA Triggers',
+          path: 'bola-triggers',
+        },
+        { type: 'link', id: 'experiments', label: 'Experiments', path: 'experiments' },
+      ],
+    },
+  ],
+};
+```
+
+### AppShell/story-content/_storyNavRailFooter.tsx
+
+```tsx
+import type { FC } from 'react';
+import { Settings } from '../../../icons';
+import { NavRailFooter, NavRailItem } from '../../NavRail';
+import type { Theme } from '../../ThemeProvider';
+import { AccountDropdown, type SidebarMode } from './_storyAccountDropdown';
+import type { Product } from './_storyLib';
+
+interface NavRailFooterContentProps {
+  activeProduct: Product;
+  onSelectProduct: (product: Product) => void;
+  sidebarMode: SidebarMode;
+  onSidebarModeChange: (mode: SidebarMode) => void;
+  theme: Theme;
+  onThemeChange: (theme: Theme) => void;
+}
+
+export const NavRailFooterContent: FC<NavRailFooterContentProps> = ({
+  activeProduct,
+  onSelectProduct,
+  sidebarMode,
+  onSidebarModeChange,
+  theme,
+  onThemeChange,
+}) => (
+  <NavRailFooter>
+    <NavRailItem
+      icon={Settings}
+      label='Settings'
+      shortcut={['G', 'S']}
+      active={activeProduct === 'settings'}
+      onClick={() => onSelectProduct('settings')}
+    />
+    <AccountDropdown
+      sidebarMode={sidebarMode}
+      onSidebarModeChange={onSidebarModeChange}
+      theme={theme}
+      onThemeChange={onThemeChange}
+    />
+  </NavRailFooter>
+);
+```
+
+### AppShell/story-content/_storyNotificationsInbox.tsx
+
+```tsx
+import { Settings } from '../../../icons';
+import {
+  NotificationCenter,
+  NotificationCenterBody,
+  NotificationCenterContent,
+  NotificationCenterHeader,
+  NotificationCenterHeaderAction,
+  NotificationCenterHeaderActions,
+  NotificationCenterItem,
+  NotificationCenterItemDescription,
+  NotificationCenterItemTime,
+  NotificationCenterItemTitle,
+  NotificationCenterList,
+  NotificationCenterSkeleton,
+  NotificationCenterTabs,
+  NotificationCenterTabsList,
+  NotificationCenterTitle,
+  NotificationCenterTrigger,
+} from '../../NotificationCenter';
+import { NumericBadge } from '../../NumericBadge';
+import { TabsContent, TabsTrigger } from '../../Tabs';
+
+const MINUTE = 60_000;
+const minutesAgo = (minutes: number) => new Date(Date.now() - minutes * MINUTE);
+
+const NEW = [
+  {
+    id: 'attack',
+    title: 'New attack detected on api.example.com',
+    description: '214 SQL injection attempts from 12 IPs in the last 10 minutes.',
+    createdAt: minutesAgo(3),
+  },
+  {
+    id: 'node',
+    title: 'Node wallarm-node-3 is offline',
+    description: 'No heartbeat for 15 minutes. Traffic fails over to wallarm-node-1.',
+    createdAt: minutesAgo(22),
+  },
+];
+
+const READ = [
+  {
+    id: 'report',
+    title: 'Weekly API discovery report is ready',
+    description: '38 new endpoints this week, 5 of them handling sensitive data.',
+    createdAt: minutesAgo(60 * 24 * 7),
+  },
+];
+
+/** The host's inbox, as core-frontend's NotificationsInbox: bell with the unread count, New/Read tabs. */
+export const NotificationsInbox = ({ loading = false }: { loading?: boolean }) => (
+  <NotificationCenter data-testid='notifications'>
+    <NotificationCenterTrigger count={loading ? 0 : NEW.length} />
+    <NotificationCenterContent>
+      <NotificationCenterHeader>
+        <NotificationCenterTitle />
+        <NotificationCenterHeaderActions>
+          <NotificationCenterHeaderAction disabled={loading}>
+            Mark all as read
+          </NotificationCenterHeaderAction>
+          <NotificationCenterHeaderAction asChild aria-label='Notification settings'>
+            <a href='#notification-settings'>
+              <Settings />
+            </a>
+          </NotificationCenterHeaderAction>
+        </NotificationCenterHeaderActions>
+      </NotificationCenterHeader>
+      {loading ? (
+        <NotificationCenterBody>
+          <NotificationCenterSkeleton />
+        </NotificationCenterBody>
+      ) : (
+        <NotificationCenterTabs defaultValue='new'>
+          <NotificationCenterTabsList>
+            <TabsTrigger value='new'>
+              New <NumericBadge size='small'>{NEW.length}</NumericBadge>
+            </TabsTrigger>
+            <TabsTrigger value='read'>Read</TabsTrigger>
+          </NotificationCenterTabsList>
+          {[
+            { value: 'new', items: NEW },
+            { value: 'read', items: READ },
+          ].map(tab => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <NotificationCenterBody>
+                <NotificationCenterList>
+                  {tab.items.map(item => (
+                    <NotificationCenterItem key={item.id} unread={tab.value === 'new'}>
+                      <NotificationCenterItemTitle>{item.title}</NotificationCenterItemTitle>
+                      <NotificationCenterItemTime value={item.createdAt} />
+                      <NotificationCenterItemDescription>
+                        {item.description}
+                      </NotificationCenterItemDescription>
+                    </NotificationCenterItem>
+                  ))}
+                </NotificationCenterList>
+              </NotificationCenterBody>
+            </TabsContent>
+          ))}
+        </NotificationCenterTabs>
+      )}
+    </NotificationCenterContent>
+  </NotificationCenter>
+);
+```
+
+### AppShell/story-content/_storyProductNavItems.tsx
+
+```tsx
+import type { FC } from 'react';
+import { CircleDashed } from '../../../icons';
+import { NavRailItem } from '../../NavRail';
+import type { Product } from './_storyLib';
+
+interface ProductNavItemsProps {
+  activeProduct: Product;
+  onSelectProduct: (product: Product) => void;
+}
+
+export const ProductNavItems: FC<ProductNavItemsProps> = ({ activeProduct, onSelectProduct }) => (
+  <>
+    <NavRailItem
+      icon={CircleDashed}
+      label='Edge'
+      shortcut={['G', 'E']}
+      active={activeProduct === 'edge'}
+      onClick={() => onSelectProduct('edge')}
+    />
+    <NavRailItem
+      icon={CircleDashed}
+      label='AI Hypervisor'
+      shortcut={['G', 'A']}
+      active={activeProduct === 'ai-hypervisor'}
+      onClick={() => onSelectProduct('ai-hypervisor')}
+    />
+    <NavRailItem
+      icon={CircleDashed}
+      label='Infra Discovery'
+      shortcut={['G', 'I']}
+      active={activeProduct === 'infra-discovery'}
+      onClick={() => onSelectProduct('infra-discovery')}
+    />
+    <NavRailItem
+      icon={CircleDashed}
+      label='Security Testing'
+      shortcut={['G', 'T']}
+      active={activeProduct === 'security-testing'}
+      onClick={() => onSelectProduct('security-testing')}
+    />
+  </>
+);
+```
+
+### AppShell/story-content/_storyQuickHelpDropdown.tsx
+
+```tsx
+import {
+  Activity,
+  Book,
+  CircleHelp,
+  LifeBuoy,
+  NotebookText,
+  SquareArrowOutUpRight,
+} from '../../../icons';
+import { Button } from '../../Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemIcon,
+  DropdownMenuItemText,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../DropdownMenu';
+import { Text } from '../../Text';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../Tooltip';
+
+export const QuickHelpDropdown = () => (
+  <DropdownMenu positioning={{ placement: 'bottom-end', gutter: 4 }}>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className='inline-flex'>
+          <DropdownMenuTrigger asChild>
+            <Button variant='ghost' size='small' color='neutral' aria-label='Quick Help'>
+              <CircleHelp />
+            </Button>
+          </DropdownMenuTrigger>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>Quick help</TooltipContent>
+    </Tooltip>
+
+    <DropdownMenuContent className='w-320'>
+      <DropdownMenuItem onSelect={() => window.open('https://docs.wallarm.com/', '_blank')}>
+        <DropdownMenuItemIcon>
+          <Book />
+        </DropdownMenuItemIcon>
+
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Documentation</DropdownMenuItemText>
+          <Text size='xs' color='secondary'>
+            Setup, deployment, and how-tos
+          </Text>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+
+      <DropdownMenuItem onSelect={() => window.open('https://status.wallarm.com/', '_blank')}>
+        <DropdownMenuItemIcon>
+          <Activity />
+        </DropdownMenuItemIcon>
+
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Service status</DropdownMenuItemText>
+          <Text size='xs' color='secondary'>
+            Live uptime and alerts
+          </Text>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+
+      <DropdownMenuItem onSelect={() => window.open('mailto:support@wallarm.com')}>
+        <DropdownMenuItemIcon>
+          <LifeBuoy />
+        </DropdownMenuItemIcon>
+
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Support</DropdownMenuItemText>
+          <Text size='xs' color='secondary'>
+            Talk to our team
+          </Text>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+
+      <DropdownMenuItem onSelect={() => window.open('https://lab.wallarm.com', '_blank')}>
+        <DropdownMenuItemIcon>
+          <NotebookText />
+        </DropdownMenuItemIcon>
+
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Blog</DropdownMenuItemText>
+          <Text size='xs' color='secondary'>
+            Security news and updates
+          </Text>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem onSelect={() => window.open('https://playground.wallarm.com', '_blank')}>
+        <DropdownMenuItemIcon>
+          <SquareArrowOutUpRight />
+        </DropdownMenuItemIcon>
+
+        <DropdownMenuItemContent>
+          <DropdownMenuItemText>Wallarm Playground</DropdownMenuItemText>
+          <Text size='xs' color='secondary'>
+            Try the platform without any setup
+          </Text>
+        </DropdownMenuItemContent>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+```
+
+### AppShell/story-content/_storyRecentDropdown.tsx
+
+```tsx
+import { History } from '../../../icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemContent,
+  DropdownMenuItemText,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '../../DropdownMenu';
+import { NavRailItem } from '../../NavRail';
+import { Text } from '../../Text';
+
+const RECENT_ITEMS = [
+  { pageName: 'WAF Rules', productName: 'Edge' },
+  { pageName: 'API Sessions', dataPlane: 'US Cloud', productName: 'Edge' },
+  { pageName: 'Prompt Inspector', productName: 'AI Hypervisor' },
+  { pageName: 'Scanner Results', dataPlane: 'EU Cloud', productName: 'Security Testing' },
+  { pageName: 'Asset Inventory', productName: 'Infra Discovery' },
+  { pageName: 'Pupu', productName: 'Edge' },
+  { pageName: 'Pupupu', dataPlane: 'US Cloud', productName: 'Edge' },
+  { pageName: 'PuPuPuuu', productName: 'AI Hypervisor' },
+  { pageName: 'MeowMeow', dataPlane: 'EU Cloud', productName: 'Security Testing' },
+  { pageName: '...', productName: '....' },
+];
+
+export const RecentDropdown = () => (
+  <DropdownMenu positioning={{ placement: 'right-start', gutter: 8 }}>
+    <DropdownMenuTrigger>
+      <NavRailItem icon={History} label='Recent' />
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent className='w-304 h-290 overscroll-none'>
+      <DropdownMenuLabel className='sticky top-0 z-10 bg-bg-surface-2'>Recent</DropdownMenuLabel>
+
+      {RECENT_ITEMS.map(item => (
+        <DropdownMenuItem key={`${item.pageName}-${item.productName}`}>
+          <DropdownMenuItemContent>
+            <DropdownMenuItemText>{item.pageName}</DropdownMenuItemText>
+            <Text size='xs' color='secondary'>
+              {item.dataPlane ? `${item.dataPlane} \u00b7 ${item.productName}` : item.productName}
+            </Text>
+          </DropdownMenuItemContent>
+        </DropdownMenuItem>
+      ))}
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+```
+
+### AppShell/story-content/_storyRouter.tsx
+
+```tsx
+import { createContext, type FC, type ReactNode, useCallback, useContext, useState } from 'react';
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+  useNavigate,
+  useRouterState,
+} from '@tanstack/react-router';
+import { deriveProduct, type Product, productLandingPath } from './_storyLib';
+
+// Story-only harness: every story gets its own TanStack Router on a memory history,
+// so navigation never touches Storybook's iframe URL and stories don't share history.
+// `story-content/**` is excluded from the published build (see rslib.config.ts).
+
+const StoryContentContext = createContext<ReactNode>(null);
+
+const StoryContent: FC = () => <>{useContext(StoryContentContext)}</>;
+
+const createStoryRouter = (initialPath: string) => {
+  const rootRoute = createRootRoute({ component: StoryContent });
+  // Catch-all so every product URL matches; the shell reads the pathname itself.
+  const splatRoute = createRoute({ getParentRoute: () => rootRoute, path: '$' });
+
+  return createRouter({
+    routeTree: rootRoute.addChildren([splatRoute]),
+    history: createMemoryHistory({ initialEntries: [initialPath] }),
+  });
+};
+
+interface StoryRouterProps {
+  /** Starting URL of the memory history. */
+  initialPath?: string;
+  children: ReactNode;
+}
+
+/** Renders `children` inside a per-render TanStack Router with memory history. */
+export const StoryRouter: FC<StoryRouterProps> = ({ initialPath = '/home', children }) => {
+  const [router] = useState(() => createStoryRouter(initialPath));
+
+  return (
+    <StoryContentContext.Provider value={children}>
+      <RouterProvider router={router} />
+    </StoryContentContext.Provider>
+  );
+};
+
+StoryRouter.displayName = 'StoryRouter';
+
+/** Current router pathname — what a host passes to `RemoteShell`'s `pathname` prop. */
+export const useStoryPathname = (): string =>
+  useRouterState({ select: state => state.location.pathname });
+
+/** Router-driven product navigation for the rail. */
+export const useStoryProductNavigation = () => {
+  const navigate = useNavigate();
+  const pathname = useStoryPathname();
+
+  const goToProduct = useCallback(
+    (product: Product) => {
+      navigate({ to: productLandingPath(product) });
+    },
+    [navigate],
+  );
+
+  return { pathname, activeProduct: deriveProduct(pathname), goToProduct };
+};
+```
+
+### AppShell/story-content/_storyWallarmLogo.tsx
+
+```tsx
+export const WallarmLogo = () => (
+  <svg width='89' height='16' viewBox='0 0 89 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M33.9026 4.87835H35.5876L37.698 11.2096L39.383 4.87835H41.4934L38.5405 14.1625H36.8555L34.7451 7.83127L32.6346 14.1625H30.9496L27.9884 4.87835H30.0988L31.7838 11.2096L33.8942 4.87835H33.9026ZM44.9886 12.7862C46.3733 12.7862 47.4076 12.0104 47.4076 10.8676V10.292C46.8738 10.0835 46.1314 9.92502 45.3139 9.92502C44.0042 9.92502 43.2201 10.4589 43.2201 11.3931V11.4265C43.2201 12.294 43.9959 12.7778 44.9802 12.7778L44.9886 12.7862ZM42.7613 5.35382C43.5371 5.07855 44.388 4.90337 45.5057 4.90337C48.2001 4.90337 49.518 6.24637 49.518 8.68212V14.1709H47.4076V13.0531C46.782 13.7955 45.8728 14.3627 44.4881 14.3627C42.7614 14.3627 41.2432 13.3784 41.2432 11.5433V11.5099C41.2432 9.5413 42.8197 8.57368 44.9385 8.57368C46.0479 8.57368 46.6986 8.73217 47.4076 8.95739V8.73217C47.4076 7.47258 46.6652 6.78023 45.2138 6.78023C44.2712 6.78023 43.5204 6.98043 42.7613 7.28073V5.3705V5.35382ZM50.786 14.1625V1.5H52.8964V14.1625H50.786ZM54.1643 14.1625V1.5H56.2747L56.3164 14.1625H54.1643ZM61.0378 12.7862C62.4225 12.7862 63.4569 12.0104 63.4569 10.8676V10.292C62.923 10.0835 62.1806 9.92502 61.3631 9.92502C60.0535 9.92502 59.2694 10.4589 59.2694 11.3931V11.4265C59.2694 12.294 60.0451 12.7778 61.0295 12.7778L61.0378 12.7862ZM58.8106 5.35382C59.578 5.07855 60.4372 4.90337 61.555 4.90337C64.2493 4.90337 65.5589 6.24637 65.5589 8.68212V14.1709H63.4485V13.0531C62.8229 13.7955 61.9137 14.3627 60.529 14.3627C58.8022 14.3627 57.2841 13.3784 57.2841 11.5433V11.5099C57.2841 9.5413 58.8606 8.57368 60.9794 8.57368C62.0888 8.57368 62.7395 8.73217 63.4485 8.95739V8.73217C63.4485 7.47258 62.7061 6.78023 61.2547 6.78023C60.3121 6.78023 59.5613 6.98043 58.8022 7.28073V5.3705L58.8106 5.35382ZM66.8269 14.1625V4.87835H68.9373V6.93872C69.5045 5.5707 70.5389 4.63644 72.1405 4.71152V6.92204H72.0237C70.1885 6.92204 68.9373 8.11489 68.9373 10.534V14.1709H66.8269V14.1625ZM87.0969 8.18162V14.1709H84.9865V8.94071C84.9865 7.48927 84.3359 6.58838 83.1597 6.58838C81.9835 6.58838 81.1911 7.47258 81.1911 8.94071V14.1709H79.0807V8.80724C79.0807 7.38917 78.43 6.58838 77.2705 6.58838C76.1111 6.58838 75.2769 7.52263 75.2769 8.94071V14.1709H73.1665V4.87835H75.2769V6.26305C75.8692 5.45392 76.695 4.68649 78.0964 4.68649C79.406 4.68649 80.3236 5.32879 80.8074 6.29642C81.5498 5.32879 82.5174 4.68649 83.9021 4.68649C85.8874 4.68649 87.0969 5.94607 87.0969 8.18162Z'
+      fill='currentColor'
+    />
+    <path
+      d='M0.849998 6.83954L9.8954 3V8.4134L16.4618 5.62599V9.59236L21.2757 7.54864V10.4542L16.4618 12.498V10.754L9.8954 13.5414V11.1662L0.849998 15V6.83954Z'
+      fill='#FF441C'
+    />
+  </svg>
+);
+```
+
+### ../utils/cn.ts
+
+```tsx
+import { type ClassArray, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...inputs: ClassArray): string => {
+  return twMerge(clsx(inputs));
+};
+```
+
+### AppShell/story-content/_storySearchModal.tsx
+
+```tsx
+import { useState } from 'react';
+import { Building, CircleDashed, Plus } from '../../../icons';
+import { Button } from '../../Button';
+import { Code } from '../../Code';
+import { EmptyState, EmptyStateDescription, EmptyStateMessage } from '../../EmptyState';
+import { Kbd } from '../../Kbd';
+import {
+  SearchModal,
+  SearchModalBody,
+  SearchModalContent,
+  SearchModalEmpty,
+  SearchModalFooter,
+  SearchModalGroup,
+  SearchModalGroupLabel,
+  SearchModalInput,
+  SearchModalItem,
+  SearchModalTrigger,
+} from '../../SearchModal';
+import { Text } from '../../Text';
+import { WallyIcon } from '../../WallyIcon';
+
+const recentItems = [
+  { page: 'Attacks', product: 'Cloud WAF', date: '2 hours ago', href: '/attacks' },
+  { page: 'Rules', product: 'Cloud WAF', date: '5 hours ago', href: '/rules' },
+  {
+    page: 'Endpoints',
+    product: 'US East',
+    dataPlane: true,
+    productExtra: 'API Discovery',
+    date: 'Yesterday',
+    href: '/endpoints',
+  },
+  { page: 'Dashboards', product: 'Cloud WAF', date: '2 days ago', href: '/dashboards' },
+  { page: 'Triggers', product: 'Cloud WAF', date: '3 days ago', href: '/triggers' },
+];
+
+const jumpToItems = [
+  { name: 'Cloud WAF', href: '/cloud-waf' },
+  { name: 'API Discovery', href: '/api-discovery' },
+];
+
+const filterRecent = (query: string) => {
+  if (!query) return recentItems;
+  return recentItems.filter(item => {
+    const text = `${item.page} ${item.product} ${item.productExtra ?? ''}`.toLowerCase();
+    return text.includes(query);
+  });
+};
+
+const filterJumpTo = (query: string) => {
+  if (!query) return jumpToItems;
+  return jumpToItems.filter(item => item.name.toLowerCase().includes(query));
+};
+
+export const StorySearchModal = () => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const lowerQuery = query.toLowerCase();
+
+  const filteredRecent = filterRecent(lowerQuery);
+  const filteredJumpTo = filterJumpTo(lowerQuery);
+  const hasResults = filteredRecent.length > 0 || filteredJumpTo.length > 0 || !lowerQuery;
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setQuery('');
+    }
+  };
+
+  return (
+    <SearchModal open={open} onOpenChange={handleOpenChange} onQueryChange={setQuery}>
+      <SearchModalTrigger asChild>
+        <Button
+          variant='ghost'
+          size='small'
+          color='neutral'
+          className='p-4 gap-6 rounded-6'
+          data-slot='top-header-search'
+        >
+          <Code size='s' color='secondary'>
+            Search Wallarm
+          </Code>
+          <Kbd size='xsmall'>⌘ K</Kbd>
+        </Button>
+      </SearchModalTrigger>
+
+      <SearchModalContent>
+        <SearchModalInput placeholder='Search products, features, and more...' />
+
+        {lowerQuery && !hasResults && (
+          <SearchModalEmpty>
+            <EmptyState type='no-results' className='pb-8'>
+              <EmptyStateMessage>
+                <EmptyStateDescription>No results</EmptyStateDescription>
+              </EmptyStateMessage>
+            </EmptyState>
+          </SearchModalEmpty>
+        )}
+
+        <SearchModalBody>
+          <SearchModalGroup>
+            <SearchModalGroupLabel>
+              <Text size='xs' color='secondary' weight='medium'>
+                Quick actions
+              </Text>
+            </SearchModalGroupLabel>
+            <SearchModalItem onSelect={() => {}}>
+              <WallyIcon variant='circle' size='sm' />
+              <Text size='sm'>Ask Wally</Text>
+            </SearchModalItem>
+
+            {!lowerQuery && (
+              <>
+                <SearchModalItem onSelect={() => {}}>
+                  <Building className='text-text-secondary !icon-md' />
+                  <Text size='sm'>Switch tenant</Text>
+                </SearchModalItem>
+
+                <SearchModalItem onSelect={() => {}}>
+                  <Plus className='text-text-secondary !icon-md' />
+                  <Text size='sm'>Create...</Text>
+                </SearchModalItem>
+              </>
+            )}
+          </SearchModalGroup>
+
+          {filteredRecent.length > 0 && (
+            <SearchModalGroup>
+              <SearchModalGroupLabel>
+                <Text size='xs' color='secondary' weight='medium'>
+                  Recent
+                </Text>
+              </SearchModalGroupLabel>
+              {filteredRecent.map(item => (
+                <SearchModalItem key={`${item.page}-${item.product}`} onSelect={() => {}}>
+                  <CircleDashed className='text-text-primary shrink-0 !icon-md' />
+                  <Text size='sm' grow truncate>
+                    {item.page}
+                    <Text size='sm' color='secondary' inline>
+                      {' '}
+                      — {item.dataPlane ? `${item.productExtra} · ${item.product}` : item.product}
+                    </Text>
+                  </Text>
+                  <span className='shrink-0'>
+                    <Text size='xs' color='secondary'>
+                      {item.date}
+                    </Text>
+                  </span>
+                </SearchModalItem>
+              ))}
+            </SearchModalGroup>
+          )}
+
+          {filteredJumpTo.length > 0 && (
+            <SearchModalGroup>
+              <SearchModalGroupLabel>
+                <Text size='xs' color='secondary' weight='medium'>
+                  Jump to
+                </Text>
+              </SearchModalGroupLabel>
+              {filteredJumpTo.map(item => (
+                <SearchModalItem key={item.href} onSelect={() => {}}>
+                  <CircleDashed className='text-text-primary shrink-0 !icon-md' />
+                  <Text size='sm'>{item.name}</Text>
+                </SearchModalItem>
+              ))}
+            </SearchModalGroup>
+          )}
+        </SearchModalBody>
+
+        <SearchModalFooter />
+      </SearchModalContent>
+    </SearchModal>
+  );
+};
+```