@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/src/components/navigation/sticky-section-nav.tsx

@@ -2,8 +2,10 @@
 
 import type React from 'react';
 import { useEffect, useState, useCallback, useRef } from 'react';
+import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
+import { ScrollShadow } from '../ui/scroll-fade';
 
 export interface StickyNavSection {
   id: string;
@@ -17,6 +19,85 @@ interface StickySectionNavProps {
   className?: string;
   ribbonPosition?: 'left' | 'right';
   ribbonColor?: string;
+  /**
+   * `vertical` (default): the table of contents beside a document.
+   * `horizontal`: a bar across the page (stick it under the header with
+   * `className`): `brand` at the start, the sections as a pill row that scrolls
+   * sideways when it does not fit, `action` at the end.
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /** Horizontal only: what the bar belongs to (a product mark and name). Hidden on a narrow area. */
+  brand?: React.ReactNode;
+  /** Horizontal only: one link or button at the end of the bar. Hidden on a narrow area. */
+  action?: React.ReactNode;
+  /** Names the navigation for assistive tech. */
+  label?: string;
+}
+
+function HorizontalSectionNav({
+  sections,
+  activeSection,
+  onSectionClick,
+  className,
+  brand,
+  action,
+  label,
+}: Omit<StickySectionNavProps, 'ribbonPosition' | 'ribbonColor' | 'orientation'>) {
+  const navRef = useRef<HTMLElement>(null);
+  // Keep the pill of the section being read in view when the row scrolls. The
+  // row is the pill's parent: the lib's `ScrollShadow` owns the scrolling element.
+  useEffect(() => {
+    const pill = navRef.current?.querySelector<HTMLElement>(`[data-section="${CSS.escape(activeSection)}"]`);
+    const row = pill?.parentElement;
+    if (!row || !pill) return;
+    const left = pill.offsetLeft - row.offsetLeft;
+    if (left < row.scrollLeft || left + pill.offsetWidth > row.scrollLeft + row.clientWidth) {
+      row.scrollTo({ left: Math.max(0, left - 12), behavior: 'smooth' });
+    }
+  }, [activeSection]);
+
+  return (
+    <nav ref={navRef} aria-label={label} className={cn('flex h-14 items-stretch gap-6 bg-ods-bg', className)}>
+      {brand && (
+        <div className="hidden shrink-0 items-center gap-2.5 border-r border-ods-border pr-6 text-ods-text-primary text-h4 content-lg:flex">
+          {brand}
+        </div>
+      )}
+      {/* The scrolling row and its edge fades are the lib's one pattern (`ScrollShadow`), not a second one. */}
+      <ScrollShadow
+        axis="horizontal"
+        className="min-w-0 flex-1"
+        scrollClassName="flex h-full items-center gap-1 [scrollbar-width:none] content-lg:items-stretch"
+      >
+        {sections.map(section => {
+          const active = activeSection === section.id;
+          return (
+            <Link
+              key={section.id}
+              href={`#${section.id}`}
+              data-section={section.id}
+              aria-current={active ? 'location' : undefined}
+              onClick={event => {
+                event.preventDefault();
+                onSectionClick(section.id);
+              }}
+              className={cn(
+                // A pill on a narrow area; from the content `lg` step a tab the height of the bar.
+                'flex shrink-0 items-center whitespace-nowrap rounded-full border px-3 py-1.5 transition-colors text-h6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-accent',
+                'content-lg:rounded-none content-lg:border-x-0 content-lg:border-b-2 content-lg:border-t-0 content-lg:py-0',
+                active
+                  ? 'border-ods-border bg-ods-card text-ods-text-primary content-lg:border-ods-accent content-lg:bg-transparent content-lg:bg-gradient-to-b content-lg:from-transparent content-lg:to-ods-accent/10'
+                  : 'border-transparent text-ods-text-secondary hover:text-ods-text-primary content-lg:hover:bg-ods-bg-hover',
+              )}
+            >
+              {section.label}
+            </Link>
+          );
+        })}
+      </ScrollShadow>
+      {action && <div className="hidden shrink-0 items-center content-lg:flex">{action}</div>}
+    </nav>
+  );
 }
 
 /**
@@ -30,11 +111,28 @@ export function StickySectionNav({
   className,
   ribbonPosition = 'left',
   ribbonColor = 'var(--color-accent-primary)',
+  orientation = 'vertical',
+  brand,
+  action,
+  label,
 }: StickySectionNavProps) {
+  if (orientation === 'horizontal') {
+    return (
+      <HorizontalSectionNav
+        sections={sections}
+        activeSection={activeSection}
+        onSectionClick={onSectionClick}
+        className={className}
+        brand={brand}
+        action={action}
+        label={label}
+      />
+    );
+  }
   const navHeight = sections.length * 40; // 40px per item (h-10)
 
   return (
-    <nav className={cn('relative bg-ods-bg', className)}>
+    <nav aria-label={label} className={cn('relative bg-ods-bg', className)}>
       {/* Background gray vertical line for all nav items */}
       <div
         className="absolute bg-ods-border"

package/src/components/product-demo/cast.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { DEMO_ORGANIZATIONS, DEMO_PEOPLE, type DemoOrganizationKey, type DemoPersonKey } from './fixtures/shared';
+
+/**
+ * What a host adds to the product screens' cast. The people and customers of
+ * the stories are the library's; their PICTURES are the host's, because the
+ * library holds no storage address:
+ *   - `people`: a portrait by persona slug (`tech`, `leo`, `alex-reed`, ...);
+ *   - `organizations`: a logo by customer key (`acme`, `northbridge`,
+ *     `harbor`).
+ * Anything left out falls back to initials, the way the product draws a
+ * person or a customer that has no picture.
+ */
+export interface ProductDemoCast {
+  people?: Readonly<Record<string, { avatarUrl?: string | null } | undefined>>;
+  organizations?: Readonly<Record<string, { logoUrl?: string | null } | undefined>>;
+}
+
+export type DemoPersonRole = (typeof DEMO_PEOPLE)[DemoPersonKey]['role'];
+
+export interface DemoPerson {
+  id: string;
+  slug: string;
+  name: string;
+  initials: string;
+  /** A technician works in the product; an end user is the customer's employee. */
+  role: DemoPersonRole;
+  /** The host's portrait; absent: the product draws its initials. */
+  avatarUrl?: string;
+}
+
+export interface DemoOrganization {
+  id: string;
+  name: string;
+  initials: string;
+  domain: string;
+  /** The host's logo; absent: the product draws the customer's initials. */
+  logoUrl?: string;
+}
+
+/** The cast a fixture is built from: every person and customer, with their pictures resolved. */
+export interface DemoCast {
+  person: (key: DemoPersonKey) => DemoPerson;
+  organization: (key: DemoOrganizationKey) => DemoOrganization;
+}
+
+/** The cast with the host's pictures applied; no argument: initials everywhere. */
+export function resolveProductDemoCast(cast?: ProductDemoCast | null): DemoCast {
+  return {
+    person: key => {
+      const person = DEMO_PEOPLE[key];
+      return { ...person, avatarUrl: cast?.people?.[person.slug]?.avatarUrl ?? undefined };
+    },
+    organization: key => ({
+      ...DEMO_ORGANIZATIONS[key],
+      logoUrl: cast?.organizations?.[key]?.logoUrl ?? undefined,
+    }),
+  };
+}
+
+const ProductDemoCastContext = createContext<ProductDemoCast | null>(null);
+
+/**
+ * Gives every product screen under it the host's pictures of the cast. Mount
+ * it once around the screens of a page (an explorer, a hero window); a screen
+ * outside it still renders, with initials.
+ */
+export function ProductDemoCastProvider({ cast, children }: { cast: ProductDemoCast | null; children: ReactNode }) {
+  return <ProductDemoCastContext.Provider value={cast}>{children}</ProductDemoCastContext.Provider>;
+}
+
+/** The resolved cast for a screen's fixture; stable while the host's cast is. */
+export function useProductDemoCast(): DemoCast {
+  const cast = useContext(ProductDemoCastContext);
+  return useMemo(() => resolveProductDemoCast(cast), [cast]);
+}

package/src/components/product-demo/fixtures/cloud-tenants.ts

@@ -0,0 +1,63 @@
+import type { TenantRow } from '../../features/cloud-tenants';
+import type { DemoCast, DemoOrganization } from '../cast';
+import { DEMO_NOW, demoMinutesAgo } from './shared';
+
+function tenant(
+  organization: DemoOrganization,
+  provider: TenantRow['provider'],
+  rest: Pick<TenantRow, 'accessState' | 'userCount' | 'lastReadAt'>,
+): TenantRow {
+  return {
+    id: `tenant-${organization.id}-${provider}`,
+    name: organization.name,
+    provider,
+    domain: organization.domain,
+    customer: { name: organization.name, imageUrl: organization.logoUrl },
+    ...rest,
+  };
+}
+
+export interface CloudTenantsFixture {
+  rows: TenantRow[];
+  /** The clock "Last read" is relative to. */
+  now: Date;
+}
+
+/** The three customers' directories, a Microsoft 365 and a Google Workspace tenant each: all connected with write access but one that lost its connection. */
+export function buildCloudTenantsFixture(cast: DemoCast): CloudTenantsFixture {
+  return {
+    rows: [
+      tenant(cast.organization('acme'), 'MICROSOFT_365', {
+        accessState: 'WRITE_ENABLED',
+        userCount: 212,
+        lastReadAt: demoMinutesAgo(9),
+      }),
+      tenant(cast.organization('northbridge'), 'GOOGLE_WORKSPACE', {
+        accessState: 'WRITE_ENABLED',
+        userCount: 48,
+        lastReadAt: demoMinutesAgo(15),
+      }),
+      tenant(cast.organization('harbor'), 'GOOGLE_WORKSPACE', {
+        accessState: 'DISCONNECTED',
+        userCount: 31,
+        lastReadAt: demoMinutesAgo(26 * 60),
+      }),
+      tenant(cast.organization('northbridge'), 'MICROSOFT_365', {
+        accessState: 'WRITE_ENABLED',
+        userCount: 52,
+        lastReadAt: demoMinutesAgo(21),
+      }),
+      tenant(cast.organization('acme'), 'GOOGLE_WORKSPACE', {
+        accessState: 'WRITE_ENABLED',
+        userCount: 18,
+        lastReadAt: demoMinutesAgo(34),
+      }),
+      tenant(cast.organization('harbor'), 'MICROSOFT_365', {
+        accessState: 'WRITE_ENABLED',
+        userCount: 29,
+        lastReadAt: demoMinutesAgo(47),
+      }),
+    ],
+    now: new Date(DEMO_NOW),
+  };
+}

package/src/components/product-demo/fixtures/devices.ts

@@ -0,0 +1,87 @@
+import type { DeviceFilters, DeviceRow } from '../../features/devices';
+import type { DemoCast } from '../cast';
+import { DEMO_DEVICES, demoMinutesAgo } from './shared';
+
+type DemoDevice = (typeof DEMO_DEVICES)[keyof typeof DEMO_DEVICES];
+
+function device(
+  cast: DemoCast,
+  demo: DemoDevice,
+  type: 'laptop' | 'desktop' | 'server',
+  status: 'ONLINE' | 'OFFLINE',
+  lastSeenMinutesAgo: number,
+): DeviceRow {
+  const organization = cast.organization(demo.organization);
+  return {
+    id: demo.id,
+    machineId: demo.id,
+    hostname: demo.hostname,
+    nickname: undefined,
+    status,
+    type,
+    osType: demo.os,
+    last_seen: demoMinutesAgo(lastSeenMinutesAgo),
+    organizationId: organization.id,
+    organization: organization.name,
+    organizationImageUrl: organization.logoUrl,
+  };
+}
+
+/** Rows counted by one of their fields: the facets a server would send for exactly these rows. */
+function countBy(
+  devices: DeviceRow[],
+  pick: (row: DeviceRow) => string | undefined,
+): { value: string; count: number }[] {
+  const counts = new Map<string, number>();
+  for (const row of devices) {
+    const value = pick(row);
+    if (value) counts.set(value, (counts.get(value) ?? 0) + 1);
+  }
+  return Array.from(counts, ([value, count]) => ({ value, count }));
+}
+
+export interface DevicesFixture {
+  devices: DeviceRow[];
+  deviceFilters: DeviceFilters;
+  totalCount: number;
+}
+
+/** The fleet of the three demo customers on an ordinary morning: a mix of states, one desktop offline since last night. */
+export function buildDevicesFixture(cast: DemoCast): DevicesFixture {
+  const devices: DeviceRow[] = [
+    device(cast, DEMO_DEVICES.frontDesk, 'laptop', 'ONLINE', 2),
+    device(cast, DEMO_DEVICES.reception, 'desktop', 'OFFLINE', 190),
+    device(cast, DEMO_DEVICES.mayaAir, 'laptop', 'ONLINE', 1),
+    device(cast, DEMO_DEVICES.buildServer, 'server', 'ONLINE', 1),
+    device(cast, DEMO_DEVICES.leoThinkPad, 'laptop', 'OFFLINE', 64),
+    device(cast, DEMO_DEVICES.samT14, 'laptop', 'ONLINE', 3),
+    device(cast, DEMO_DEVICES.jenSurface, 'laptop', 'ONLINE', 6),
+    device(cast, DEMO_DEVICES.priyaXps, 'laptop', 'ONLINE', 2),
+  ];
+  const deviceFilters: DeviceFilters = {
+    statuses: countBy(devices, row => row.status),
+    deviceTypes: countBy(devices, row => row.type),
+    osTypes: countBy(devices, row => row.osType),
+    organizationIds: countBy(devices, row => row.organizationId).map(entry => ({
+      ...entry,
+      label: devices.find(row => row.organizationId === entry.value)?.organization ?? entry.value,
+    })),
+    tagKeys: [],
+    filteredCount: devices.length,
+  };
+  return { devices, deviceFilters, totalCount: devices.length };
+}
+
+/** What the Devices page shows for a search: the query in the field and the rows that answer it. */
+export const DEVICES_SEARCH_QUERY = 'Windows';
+
+/** The fleet narrowed to its Windows devices, the way the list answers that search. */
+export function buildWindowsDevicesFixture(cast: DemoCast): DevicesFixture {
+  const fleet = buildDevicesFixture(cast);
+  const devices = fleet.devices.filter(row => row.osType === 'WINDOWS');
+  return {
+    devices,
+    deviceFilters: { ...fleet.deviceFilters, filteredCount: devices.length },
+    totalCount: devices.length,
+  };
+}

package/src/components/product-demo/fixtures/knowledge.ts

@@ -0,0 +1,48 @@
+import type { KnowledgeBaseArticleViewProps } from '../../features/knowledge-base';
+import type { DemoCast } from '../cast';
+import { DEMO_DEVICES } from './shared';
+
+export interface KnowledgeFixture {
+  article: Pick<KnowledgeBaseArticleViewProps, 'title' | 'tags' | 'author' | 'updatedLabel' | 'status'>;
+  /** The article's body, in the markdown the product stores. */
+  content: string;
+}
+
+/**
+ * One article of a client's knowledge base, open: the runbook a technician (or
+ * the assistant) follows to set up a new hire's laptop. It names the client,
+ * its author and the steps, so the page says what the knowledge base is for.
+ */
+export function buildKnowledgeFixture(cast: DemoCast): KnowledgeFixture {
+  const client = cast.organization('acme');
+  const author = cast.person('dana');
+  return {
+    article: {
+      title: `New laptop runbook: ${client.name}`,
+      tags: [
+        { id: 'kb-tag-client', label: client.name },
+        { id: 'kb-tag-onboarding', label: 'onboarding' },
+        { id: 'kb-tag-runbook', label: 'runbook' },
+      ],
+      author: { name: author.name, imageUrl: author.avatarUrl },
+      updatedLabel: '10/06/2026',
+      status: 'PUBLISHED',
+    },
+    content: [
+      `How ${client.name} sets up a laptop for a new hire. Every step can be run by a technician or asked of the assistant.`,
+      '',
+      '## Before the first day',
+      '',
+      '1. **Enroll the laptop.** Sign in with the enrollment account. It appears in Devices within a minute.',
+      '2. **Turn on disk encryption.** The "Disk encryption" policy does it. Check that the recovery key is saved.',
+      '3. **Install the standard apps.** Chrome, Slack, Microsoft 365 and the VPN client from the software catalog.',
+      `4. **Create the accounts.** Mailbox, groups and MFA in the ${client.name} Microsoft 365 tenant.`,
+      '',
+      '## On the first day',
+      '',
+      `1. **Join the office Wi-Fi.** Staff network only. The guest network is for visitors.`,
+      `2. **Add the printers.** Front desk and second floor, the same drivers as ${DEMO_DEVICES.reception.hostname}.`,
+      '3. **Hand over.** Sign in together once and close the onboarding ticket.',
+    ].join('\n'),
+  };
+}

package/src/components/product-demo/fixtures/logs.ts

@@ -0,0 +1,103 @@
+import { logSeverityVariant, type LogDrawerProps, type LogsTableViewProps, type UiLogEntry } from '../../features/logs';
+import type { DeviceCardProps } from '../../ui/device-card';
+import { DEMO_DEVICES, DEMO_ORGANIZATIONS, DEMO_PEOPLE, demoMinutesAgo } from './shared';
+
+const DAY = new Intl.DateTimeFormat('en-US', { dateStyle: 'short', timeZone: 'UTC' });
+const TIME = new Intl.DateTimeFormat('en-US', { timeStyle: 'short', timeZone: 'UTC' });
+
+/** The table's own date and time rendering, pinned to one locale and zone so it never drifts. */
+function displayTime(iso: string): string {
+  const date = new Date(iso);
+  return `${DAY.format(date)} ${TIME.format(date)}`;
+}
+
+function entry(
+  logId: string,
+  minutesAgo: number,
+  severity: 'INFO' | 'WARNING' | 'ERROR',
+  toolType: string,
+  device: UiLogEntry['device'],
+  summary: string,
+): UiLogEntry {
+  return {
+    id: logId,
+    logId,
+    timestamp: displayTime(demoMinutesAgo(minutesAgo)),
+    status: { label: severity, variant: logSeverityVariant(severity) },
+    source: { name: toolType, toolType },
+    device,
+    description: { title: summary },
+  };
+}
+
+const sam = { name: DEMO_DEVICES.samT14.hostname, organization: DEMO_ORGANIZATIONS.northbridge.name };
+/** A system event has no device: the API sends the literal the table maps to "System". */
+const system = (organization: string) => ({ name: 'null', organization });
+
+/** What the Logs page is searched for in the picture: the rows below are what answers it. */
+export const LOGS_FIXTURE_SEARCH = 'sign-in';
+
+const device = (key: keyof typeof DEMO_DEVICES) => ({
+  name: DEMO_DEVICES[key].hostname,
+  organization: DEMO_ORGANIZATIONS[DEMO_DEVICES[key].organization].name,
+});
+
+/** A day of sign-ins across the three customers: one worth a look, a burst of failures, the rest routine. */
+export const LOGS_FIXTURE_ENTRIES: UiLogEntry[] = [
+  entry('evt-8f3a61c2', 52, 'ERROR', 'FLEET_MDM', sam, 'Sign-in from new country'),
+  entry(
+    'evt-8f3a5d07',
+    96,
+    'WARNING',
+    'OPENFRAME_RMM',
+    system(DEMO_ORGANIZATIONS.northbridge.name),
+    '27 failed sign-ins for one account in 10 minutes',
+  ),
+  entry('evt-8f3a4b90', 171, 'INFO', 'FLEET_MDM', device('mayaAir'), 'Sign-in from a new device, approved with MFA'),
+  entry(
+    'evt-8f3a3e15',
+    233,
+    'INFO',
+    'OPENFRAME_RMM',
+    system(DEMO_ORGANIZATIONS.acme.name),
+    'Sign-in blocked: the source address is on the block list',
+  ),
+  entry('evt-8f3a2c44', 318, 'INFO', 'FLEET_MDM', device('frontDesk'), 'Sign-in after a password reset'),
+  entry('evt-8f3a1a02', 402, 'INFO', 'MESHCENTRAL', device('buildServer'), 'Technician sign-in to a remote session'),
+  entry('evt-8f3a0b7e', 487, 'INFO', 'FLEET_MDM', device('leoThinkPad'), 'Sign-in from the office network'),
+  entry('evt-8f39f951', 561, 'INFO', 'FLEET_MDM', device('reception'), 'Sign-in from the office network'),
+];
+
+/** The filters the column headers offer. */
+export const LOGS_FIXTURE_FACETS: NonNullable<LogsTableViewProps['facets']> = {
+  severities: ['ERROR', 'WARNING', 'INFO'],
+  toolTypes: ['FLEET_MDM', 'OPENFRAME_RMM', 'MESHCENTRAL'],
+  organizations: Object.values(DEMO_ORGANIZATIONS).map(organization => ({
+    id: organization.id,
+    label: organization.name,
+    value: organization.id,
+  })),
+};
+
+/** The entry open in the Log Details drawer. */
+export const LOGS_FIXTURE_SELECTED: UiLogEntry = LOGS_FIXTURE_ENTRIES[0];
+
+/** The drawer's text for the selected entry, as the product prints a log: what happened and to whom (its id, source and device are the fields under it). */
+export const LOGS_FIXTURE_SELECTED_DETAILS: Extract<LogDrawerProps['description'], string> = [
+  'Event Type: sign-in',
+  'Message: Sign-in from new country',
+  `Details: ${DEMO_PEOPLE.sam.name} signed in on ${DEMO_DEVICES.samT14.hostname} from a country not seen for this account before.`,
+].join('\n');
+
+/** The device card pinned under the selected entry. */
+export const LOGS_FIXTURE_DEVICE: Pick<DeviceCardProps, 'device' | 'statusTag'> = {
+  device: {
+    id: DEMO_DEVICES.samT14.id,
+    machineId: DEMO_DEVICES.samT14.id,
+    name: DEMO_DEVICES.samT14.hostname,
+    organization: DEMO_ORGANIZATIONS.northbridge.name,
+    lastSeen: demoMinutesAgo(3),
+    operatingSystem: 'windows',
+  },
+  statusTag: { label: 'ONLINE', variant: 'success' },
+};

package/src/components/product-demo/fixtures/policies.ts

@@ -0,0 +1,77 @@
+import {
+  computePolicySummary,
+  getPolicyTableStatus,
+  type PolicyHostCounts,
+  type PolicySummaryStats,
+  type PolicyTableRow,
+} from '../../features/policies';
+import { DEMO_NOW, demoMinutesAgo } from './shared';
+
+const noop = () => {};
+
+/** The fleet the policies run on: every device of the demo's largest customer. */
+const FLEET_SIZE = 213;
+const FLEET_HOSTS: readonly unknown[] = Array.from({ length: FLEET_SIZE });
+
+interface DemoPolicy extends PolicyHostCounts {
+  id: string;
+  name: string;
+  description: string;
+  critical: boolean;
+}
+
+function policy(id: string, name: string, description: string, critical: boolean, failing: number): DemoPolicy {
+  return {
+    id,
+    name,
+    description,
+    critical,
+    passing_host_count: FLEET_SIZE - failing,
+    failing_host_count: failing,
+    host_count_updated_at: demoMinutesAgo(12),
+    hosts_include_any: FLEET_HOSTS,
+  };
+}
+
+/** Seven laptops have fallen out of disk encryption; the other policies pass everywhere. */
+const POLICIES: DemoPolicy[] = [
+  policy(
+    'policy-disk-encryption',
+    'Disk encryption',
+    'BitLocker on Windows and FileVault on macOS are turned on.',
+    true,
+    7,
+  ),
+  policy('policy-firewall', 'Firewall on', 'The system firewall is enabled on every device.', true, 0),
+  policy('policy-screen-lock', 'Screen lock', 'The screen locks after five minutes without use.', false, 0),
+  policy('policy-local-admins', 'No local admins', 'No everyday account is a local administrator.', false, 0),
+];
+
+export interface PoliciesFixture {
+  summary: PolicySummaryStats;
+  rows: PolicyTableRow[];
+  /** The clock the "Updated" card is relative to. */
+  now: Date;
+}
+
+/**
+ * The product's fleet-wide policies page. The summary and every status cell
+ * are computed from the host counts by the product's own functions.
+ */
+export const POLICIES_FIXTURE: PoliciesFixture = {
+  summary: computePolicySummary(POLICIES),
+  rows: POLICIES.map(item => ({
+    id: item.id,
+    name: item.name,
+    description: item.description,
+    critical: item.critical,
+    severityLabel: item.critical ? 'Critical' : 'Low',
+    status: getPolicyTableStatus(item),
+    actions: [
+      { label: 'Policy Details', onClick: noop },
+      { label: 'Delete Policy', onClick: noop },
+    ],
+    href: '#',
+  })),
+  now: new Date(DEMO_NOW),
+};

package/src/components/product-demo/fixtures/remote-session.ts

@@ -0,0 +1,65 @@
+import type {
+  RemoteDesktopChatPanelProps,
+  RemoteDesktopViewProps,
+  RemoteSessionChatMessage,
+} from '../../features/remote-session';
+import type { DemoCast } from '../cast';
+import { DEMO_DEVICES, demoMinutesAgo } from './shared';
+
+const device = DEMO_DEVICES.frontDesk;
+
+function message(
+  id: string,
+  minutesAgo: number,
+  rest: Omit<RemoteSessionChatMessage, 'id' | 'at'>,
+): RemoteSessionChatMessage {
+  return { id, at: new Date(demoMinutesAgo(minutesAgo)), ...rest };
+}
+
+export interface RemoteSessionFixture {
+  view: Pick<
+    RemoteDesktopViewProps,
+    'deviceName' | 'organizationName' | 'currentDisplayLabel' | 'displayMenuGroups' | 'actionsMenuGroups'
+  >;
+  chat: Pick<RemoteDesktopChatPanelProps, 'messages' | 'technician'>;
+  /** What the remote desktop itself shows. */
+  desktop: { printer: string; clock: string; date: string };
+}
+
+/**
+ * A connected session on the front desk laptop: the end user reports the
+ * printer in the session chat, the technician restarts the spooler on the
+ * remote desktop and says so. The technician's rows carry their portrait; the
+ * end user's are a plain name, the way the product shows the other side.
+ */
+export function buildRemoteSessionFixture(cast: DemoCast): RemoteSessionFixture {
+  const technician = cast.person('dana');
+  const endUser = cast.person('leo');
+  return {
+    view: {
+      deviceName: device.hostname,
+      organizationName: cast.organization(device.organization).name,
+      currentDisplayLabel: 'Display 1',
+      displayMenuGroups: [],
+      actionsMenuGroups: [],
+    },
+    chat: {
+      technician: { name: technician.name, avatarUrl: technician.avatarUrl },
+      messages: [
+        message('rs-1', 6, { author: 'user', name: endUser.name, text: 'The front desk printer says offline again.' }),
+        message('rs-2', 5, {
+          author: 'technician',
+          name: technician.name,
+          text: 'On it. I am on your screen now, keep working.',
+        }),
+        message('rs-3', 2, {
+          author: 'technician',
+          name: technician.name,
+          text: 'Print spooler restarted and a test page went through. Try it now.',
+        }),
+        message('rs-4', 1, { author: 'user', name: endUser.name, text: 'Printing. Thank you!' }),
+      ],
+    },
+    desktop: { printer: 'Front Desk LaserJet', clock: '10:04 AM', date: '10/6/2026' },
+  };
+}