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

package/dist/project/components/RemoteShell/README.md

@@ -0,0 +1,1758 @@
+The frame of one product inside `AppShell` — its navigation panel, breadcrumbs and content area, all driven by a single `NavConfig`. The panel is configured only through `config`: `link`, `group`, `section-header` and `drill` nodes, with `dividerAfter` for a line. Its parts are internal; never compose the panel by hand. The URL is the state: the active item, the drill level and the breadcrumbs are matched from the pathname. When a router owns the URL, hand the shell the router’s pathname through `pathname` and take its navigations back through `onNavigate` — then links in the page, the host rail or `router.navigate` keep the menu in sync. Without `pathname` the shell reads `window.location` and only notices `popstate` and its own navigations.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `config` | `NavConfig` | yes | — | Navigation config used to build nav state for sub-components. |
+| `base-path` | `string \| undefined` | no | — | URL prefix stripped before matching and prepended when navigating (e.g. `"/edge"`). |
+| `pathname` | `string \| undefined` | no | — | Current pathname. When set, it is the single source of truth for the active nav item, drill level and breadcrumbs, and `window.location` is ignored. Pass it — **together with `onNavigate`** — whenever a router owns the URL: router navigations (links in page content, `router.navigate`, memory history, the host's rail) do not fire `popstate`, so without it the shell can go stale. Without `onNavigate` the shell's own navigations would only reach `window.history`, which a controlled shell ignores (a dev warning flags this). Either form is accepted: with the `basePath` prefix (what `onNavigate` receives) or without it — the prefix is stripped only when the pathname starts with a whole `basePath` segment. With TanStack Router, `useRouterState({ select: s => s.location.pathname })` is router-relative: it excludes the router's own `basepath`. So when the router has `basepath`: - omit `basePath` here — `pathname` and `onNavigate` are then both router-relative and `onNavigate={to => navigate({ to })}` is correct; or - keep `basePath` and strip it in `onNavigate` (`to => navigate({ to: to.slice(basePath.length) \|\| '/' })`), otherwise the router prefixes it a second time. Omit it to read `window.location.pathname` (updated on `popstate` and on the shell's own navigations). |
+| `on-navigate` | `((pathname: string) => void) \| undefined` | no | — | Navigation handler for router integration (TanStack Router, React Router, Next.js, …). Receives the target pathname, prefixed with `basePath` when one is set. Without it the shell pushes to `window.history` itself. |
+| `default-checked` | `boolean \| undefined` | no | — |  |
+| `default-value` | `string \| number \| readonly string[] \| undefined` | no | — |  |
+| `auto-focus` | `boolean \| undefined` | no | — |  |
+| `id` | `string \| undefined` | no | — |  |
+| `tab-index` | `number \| undefined` | no | — |  |
+| `title` | `string \| undefined` | no | — |  |
+| `rel` | `string \| undefined` | no | — |  |
+| `on-change` | `ChangeEventHandler<T, Element> \| undefined` | no | — |  |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.RemoteShellBreadcrumb` — `RemoteShellBreadcrumbProps` in the declaration bundle.
+- `WallarmDS.RemoteShellContent` — `RemoteShellContentProps` in the declaration bundle.
+- `WallarmDS.RemoteShellPanel` — `RemoteShellPanelProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+A standalone product on TanStack Router — the recommended integration. `pathname` is
+the router’s `location.pathname` and `onNavigate` calls `navigate`, so the menu, drill
+level and breadcrumbs follow every navigation: the panel, the breadcrumbs and the
+router links in the page. This router has no `basepath` (its routes include `/edge`),
+so both sides use the full pathname. If your router sets `basepath`, its
+`location.pathname` is router-relative: omit `basePath` on `RemoteShell` (or keep it
+and strip it in `onNavigate`), otherwise `navigate` prefixes it twice.
+
+Source: RemoteShell/RemoteShell.stories.tsx#Basic
+
+## Story sources
+
+### RemoteShell/RemoteShell.stories.tsx
+
+```tsx
+import type { FC } from 'react';
+import { Link as RouterLink, useNavigate, useRouterState } from '@tanstack/react-router';
+import type { Meta, StoryFn } from 'storybook-react-rsbuild';
+import { edgeNavConfig, StoryRouter } from '../AppShell/story-content';
+import { Link } from '../Link';
+import { Page, PageContent, PageHeader, PageTitle } from '../Page';
+import { Text } from '../Text';
+import { useRemoteShellContext } from './model';
+import { RemoteShell, type RemoteShellProps } from './RemoteShell';
+import { RemoteShellBreadcrumb } from './RemoteShellBreadcrumb';
+import { RemoteShellContent } from './RemoteShellContent';
+import { RemoteShellPanel } from './RemoteShellPanel';
+
+const DESCRIPTION = [
+  'The frame of one product inside `AppShell` — its navigation panel, breadcrumbs and content area, all driven by a single `NavConfig`.',
+  'The panel is configured only through `config`: `link`, `group`, `section-header` and `drill` nodes, with `dividerAfter` for a line. Its parts are internal; never compose the panel by hand.',
+  'The URL is the state: the active item, the drill level and the breadcrumbs are matched from the pathname. When a router owns the URL, hand the shell the router’s pathname through `pathname` and take its navigations back through `onNavigate` — then links in the page, the host rail or `router.navigate` keep the menu in sync. Without `pathname` the shell reads `window.location` and only notices `popstate` and its own navigations.',
+].join(' ');
+
+const meta = {
+  title: 'Navigation/RemoteShell',
+  component: RemoteShell,
+  subcomponents: {
+    RemoteShellPanel,
+    RemoteShellBreadcrumb,
+    RemoteShellContent,
+  },
+  // Each story render gets its own TanStack Router on a memory history (story-only
+  // harness); the story body below is the integration a product writes itself.
+  decorators: [
+    Story => (
+      <StoryRouter initialPath='/edge/overview'>
+        <Story />
+      </StoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: DESCRIPTION,
+      },
+    },
+  },
+  argTypes: {
+    children: { control: false },
+    ref: { control: false },
+    config: { control: false },
+    basePath: { control: false },
+    pathname: { control: false },
+    onNavigate: { control: false },
+  },
+} satisfies Meta<typeof RemoteShell>;
+
+export default meta;
+
+const EDGE_LINKS = [
+  { to: '/edge/overview', label: 'Edge overview' },
+  { to: '/edge/data-planes/production/services', label: 'Production → Services' },
+  { to: '/edge/data-planes/staging/overview', label: 'Staging → Overview' },
+  { to: '/edge/data-planes/production/nodes/node-2/metrics', label: 'Node 2 → Metrics' },
+];
+
+const EdgePage: FC = () => {
+  const { breadcrumbSegments } = useRemoteShellContext();
+  const pathname = useRouterState({ select: state => state.location.pathname });
+  const title = breadcrumbSegments[breadcrumbSegments.length - 1]?.label ?? '';
+
+  return (
+    <Page title={title} fixedHeight>
+      <PageHeader>
+        <PageTitle>{title}</PageTitle>
+      </PageHeader>
+      <PageContent>
+        <div className='flex flex-col gap-12'>
+          <Text size='sm' color='secondary'>
+            Router pathname: <code>{pathname}</code>
+          </Text>
+          <Text size='sm' color='secondary'>
+            These are router links in the page, not shell navigation — the panel and the breadcrumbs
+            follow them.
+          </Text>
+          <ul className='flex flex-col gap-4'>
+            {EDGE_LINKS.map(link => (
+              <li key={link.to}>
+                <Link asChild>
+                  <RouterLink to={link.to}>{link.label}</RouterLink>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </PageContent>
+    </Page>
+  );
+};
+
+/**
+ * A standalone product on TanStack Router — the recommended integration. `pathname` is
+ * the router’s `location.pathname` and `onNavigate` calls `navigate`, so the menu, drill
+ * level and breadcrumbs follow every navigation: the panel, the breadcrumbs and the
+ * router links in the page. This router has no `basepath` (its routes include `/edge`),
+ * so both sides use the full pathname. If your router sets `basepath`, its
+ * `location.pathname` is router-relative: omit `basePath` on `RemoteShell` (or keep it
+ * and strip it in `onNavigate`), otherwise `navigate` prefixes it twice.
+ */
+export const Basic: StoryFn<RemoteShellProps> = () => {
+  const navigate = useNavigate();
+  const pathname = useRouterState({ select: state => state.location.pathname });
+
+  return (
+    <div className='h-screen bg-bg-page-bg'>
+      <RemoteShell
+        config={edgeNavConfig}
+        basePath='/edge'
+        pathname={pathname}
+        onNavigate={to => navigate({ to })}
+      >
+        <RemoteShellPanel resizable />
+        <RemoteShellBreadcrumb />
+        <RemoteShellContent>
+          <EdgePage />
+        </RemoteShellContent>
+      </RemoteShell>
+    </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>
+  );
+};
+```