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

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

@@ -0,0 +1,53 @@
+/**
+ * The cast every product-screen fixture draws from, so the screens of one page
+ * tell one story. The people are the hub's demo personas (invented names); the
+ * organizations and devices are invented too.
+ */
+export const DEMO_ORGANIZATIONS = {
+  acme: { id: 'org-acme', name: 'Acme Logistics', initials: 'AL', domain: 'acmelogistics.example' },
+  northbridge: { id: 'org-northbridge', name: 'Northbridge Legal', initials: 'NL', domain: 'northbridgelegal.example' },
+  harbor: { id: 'org-harbor', name: 'Harbor Dental', initials: 'HD', domain: 'harbordental.example' },
+} as const;
+
+/**
+ * `slug` is the persona's slug at the host (the key its portrait arrives by,
+ * see `ProductDemoCastProvider`; the host's own technician is `tech`); `role` decides how the product draws the
+ * person: a technician works in the product, an end user is the customer's
+ * employee on the other end.
+ */
+export const DEMO_PEOPLE = {
+  jen: { id: 'user-jen', slug: 'jen', name: 'Jen Park', initials: 'JP', role: 'end_user' },
+  leo: { id: 'user-leo', slug: 'leo', name: 'Leo Martin', initials: 'LM', role: 'end_user' },
+  maya: { id: 'user-maya', slug: 'maya', name: 'Maya Lopez', initials: 'ML', role: 'end_user' },
+  priya: { id: 'user-priya', slug: 'priya', name: 'Priya Shah', initials: 'PS', role: 'end_user' },
+  sam: { id: 'user-sam', slug: 'sam', name: 'Sam Okafor', initials: 'SO', role: 'end_user' },
+  dana: { id: 'user-dana', slug: 'tech', name: 'Dana Reyes', initials: 'DR', role: 'technician' },
+  alex: { id: 'user-alex', slug: 'alex-reed', name: 'Alex Reed', initials: 'AR', role: 'technician' },
+  roman: { id: 'user-roman', slug: 'roman-smith', name: 'Roman Smith', initials: 'RS', role: 'technician' },
+  sara: { id: 'user-sara', slug: 'sara-kim', name: 'Sara Kim', initials: 'SK', role: 'technician' },
+} as const;
+
+export type DemoPersonKey = keyof typeof DEMO_PEOPLE;
+export type DemoOrganizationKey = keyof typeof DEMO_ORGANIZATIONS;
+
+export const DEMO_DEVICES = {
+  frontDesk: { id: 'device-frontdesk', hostname: 'FRONTDESK-LT02', os: 'WINDOWS', organization: 'harbor' },
+  mayaAir: { id: 'device-maya', hostname: 'MAYA-MBA', os: 'MAC_OS', organization: 'northbridge' },
+  samT14: { id: 'device-sam', hostname: 'SAM-T14', os: 'WINDOWS', organization: 'northbridge' },
+  reception: { id: 'device-reception', hostname: 'RECEPTION-01', os: 'WINDOWS', organization: 'acme' },
+  leoThinkPad: { id: 'device-leo', hostname: 'LEO-THINKPAD', os: 'WINDOWS', organization: 'harbor' },
+  buildServer: { id: 'device-build', hostname: 'BUILD-SRV-01', os: 'LINUX', organization: 'acme' },
+  jenSurface: { id: 'device-jen', hostname: 'JEN-SURFACE', os: 'WINDOWS', organization: 'acme' },
+  priyaXps: { id: 'device-priya', hostname: 'PRIYA-XPS', os: 'WINDOWS', organization: 'northbridge' },
+} as const;
+
+/**
+ * A fixed "now" for relative times, so a screen reads the same on every render
+ * and never drifts between the server and the browser.
+ */
+export const DEMO_NOW = '2026-10-06T14:05:00.000Z';
+
+/** An instant `minutes` before {@link DEMO_NOW}. */
+export function demoMinutesAgo(minutes: number): string {
+  return new Date(Date.parse(DEMO_NOW) - minutes * 60_000).toISOString();
+}

package/src/components/product-demo/fixtures/software-update.ts

@@ -0,0 +1,63 @@
+import type { DeviceRow } from '../../features/devices';
+import type { SelectedPackage, SoftwareActionFormProps, SoftwareScheduleTiming } from '../../features/software';
+import type { DemoCast } from '../cast';
+import { buildDevicesFixture } from './devices';
+import { DEMO_DEVICES, DEMO_NOW } from './shared';
+
+/** The catalog entry the row holds: WinGet's Google Chrome. */
+const chrome: SelectedPackage = {
+  id: 'Google.Chrome',
+  name: 'Google Chrome',
+  description: 'A fast, secure web browser built for the modern web',
+  version: '141.0.7390.66',
+  packageType: null,
+};
+
+/** The demo day as a local calendar day, so the date field reads the same in every timezone. */
+function demoDay(): Date {
+  const [year, month, day] = DEMO_NOW.slice(0, 10).split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
+const TONIGHT_11_PM = { value: '23:00', label: '11:00 PM' };
+
+/** A fixed reading of the schedule fields: tonight's late slots, nothing in the past. */
+const timing: SoftwareScheduleTiming = {
+  timeReferenceOptions: [
+    { value: 'SERVER', label: 'Your account timezone' },
+    { value: 'DEVICE_LOCAL', label: 'Device local timezone' },
+  ],
+  getTimeOptions: () => [
+    { value: '22:00', label: '10:00 PM' },
+    { value: '22:30', label: '10:30 PM' },
+    TONIGHT_11_PM,
+    { value: '23:30', label: '11:30 PM' },
+  ],
+  getEarliestDay: demoDay,
+  getStartError: () => undefined,
+};
+
+const initialValues: SoftwareActionFormProps['initialValues'] = {
+  rows: [{ key: 'row-0', packageManager: 'WINGET', pkg: chrome }],
+  mode: 'schedule',
+  date: demoDay(),
+  time: TONIGHT_11_PM.value,
+  timeReference: 'SERVER',
+};
+
+/**
+ * Chrome updated tonight at 11 PM on the Windows devices picked for it (WinGet
+ * installs on Windows, so the picker offers the fleet's Windows devices), one
+ * of them offline until it reconnects.
+ */
+export function buildSoftwareUpdateFixture(cast: DemoCast) {
+  const devices: DeviceRow[] = buildDevicesFixture(cast).devices.filter(device => device.osType === 'WINDOWS');
+  return {
+    action: 'UPDATE',
+    package: chrome,
+    timing,
+    initialValues,
+    devices,
+    selectedIds: new Set<string>([DEMO_DEVICES.reception.id, DEMO_DEVICES.samT14.id, DEMO_DEVICES.frontDesk.id]),
+  } as const;
+}

package/src/components/product-demo/fixtures/tickets-board.ts

@@ -0,0 +1,100 @@
+import { columnFromTicketStatus, type BoardColumnDef, type BoardTicket } from '../../features/board';
+import type { DemoCast, DemoPerson } from '../cast';
+import { DEMO_DEVICES, DEMO_ORGANIZATIONS } from './shared';
+
+function ticket(
+  id: string,
+  title: string,
+  status: string,
+  rest: Omit<BoardTicket, 'id' | 'title' | 'status' | 'ticketNumber'> & { ticketNumber?: string },
+): BoardTicket {
+  return { id, title, status, ticketNumber: rest.ticketNumber ?? '', ...rest };
+}
+
+const assignee = ({ id, name, initials, avatarUrl }: DemoPerson) => ({ id, name, initials, avatarUrl });
+
+/**
+ * A help desk mid-morning: Fae opened and closed most of it, one ticket waits
+ * for a technician's approval, and the technicians hold what needs a person.
+ */
+export function buildTicketsBoardFixture(cast: DemoCast): BoardColumnDef[] {
+  const dana = assignee(cast.person('dana'));
+  const alex = assignee(cast.person('alex'));
+  return [
+    columnFromTicketStatus('ACTIVE', [
+      ticket('tk-1051', 'Printer offline at the front desk', 'ACTIVE', {
+        ticketNumber: '1051',
+        agent: 'fae',
+        deviceHostnames: [DEMO_DEVICES.frontDesk.hostname],
+        organizationName: DEMO_ORGANIZATIONS.harbor.name,
+        priority: 'medium',
+        hasNewMessage: true,
+        activity: { kind: 'ai-working' },
+      }),
+      ticket('tk-1052', 'New hire starts Monday', 'ACTIVE', {
+        ticketNumber: '1052',
+        agent: 'mingo',
+        organizationName: DEMO_ORGANIZATIONS.acme.name,
+        priority: 'low',
+        tags: ['onboarding'],
+      }),
+    ]),
+    columnFromTicketStatus('TECH_REQUIRED', [
+      ticket('tk-1049', 'Acrobat Pro for Maya', 'TECH_REQUIRED', {
+        ticketNumber: '1049',
+        agent: 'fae',
+        deviceHostnames: [DEMO_DEVICES.mayaAir.hostname],
+        organizationName: DEMO_ORGANIZATIONS.northbridge.name,
+        priority: 'high',
+        assignees: [dana],
+        pendingApproval: {
+          id: 'approval-1049',
+          approvalType: 'INSTALL',
+          explanation: 'Install Adobe Acrobat Pro (paid license)',
+        },
+      }),
+      ticket('tk-1050', 'VPN keeps dropping on the train', 'TECH_REQUIRED', {
+        ticketNumber: '1050',
+        agent: 'fae',
+        deviceHostnames: [DEMO_DEVICES.samT14.hostname],
+        organizationName: DEMO_ORGANIZATIONS.northbridge.name,
+        priority: 'medium',
+        assignees: [alex],
+        escalatedByUser: true,
+      }),
+    ]),
+    columnFromTicketStatus('ON_HOLD', [
+      ticket('tk-1046', 'Replace the conference room display', 'ON_HOLD', {
+        ticketNumber: '1046',
+        organizationName: DEMO_ORGANIZATIONS.acme.name,
+        priority: 'low',
+        assignees: [alex],
+        activity: { kind: 'waiting-external' },
+      }),
+    ]),
+    columnFromTicketStatus(
+      'RESOLVED',
+      [
+        ticket('tk-1048', 'Slow laptop', 'RESOLVED', {
+          ticketNumber: '1048',
+          agent: 'fae',
+          deviceHostnames: [DEMO_DEVICES.samT14.hostname],
+          organizationName: DEMO_ORGANIZATIONS.northbridge.name,
+        }),
+        ticket('tk-1047', 'Teams will not open', 'RESOLVED', {
+          ticketNumber: '1047',
+          agent: 'fae',
+          deviceHostnames: [DEMO_DEVICES.mayaAir.hostname],
+          organizationName: DEMO_ORGANIZATIONS.northbridge.name,
+        }),
+        ticket('tk-1045', 'Turned the firewall back on', 'RESOLVED', {
+          ticketNumber: '1045',
+          agent: 'mingo',
+          deviceHostnames: [DEMO_DEVICES.leoThinkPad.hostname],
+          organizationName: DEMO_ORGANIZATIONS.harbor.name,
+        }),
+      ],
+      { total: 14 },
+    ),
+  ];
+}

package/src/components/product-demo/index.ts

@@ -0,0 +1,7 @@
+'use client';
+
+export { ProductDemoCastProvider, resolveProductDemoCast, useProductDemoCast } from './cast';
+export type { DemoCast, DemoOrganization, DemoPerson, ProductDemoCast } from './cast';
+export * from './product-screen';
+export * from './screen-keys';
+export type { ProductScreenComponent, ProductScreenViewProps } from './types';

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

@@ -0,0 +1,94 @@
+'use client';
+
+import { lazy, type LazyExoticComponent, Suspense } from 'react';
+import { ProductScreenFrame, type ProductScreenFrameProps } from '../ui/product-screen-frame';
+import { Skeleton } from '../ui/skeleton';
+import { PRODUCT_SCREEN_LOADERS } from './registry';
+import { PRODUCT_SCREEN_KEYS, PRODUCT_SCREEN_LABELS, type ProductScreenKey } from './screen-keys';
+import type { ProductScreenComponent } from './types';
+
+/** One lazy component per screen, made once: a screen's code is fetched the first time it renders. */
+const LAZY_SCREENS = Object.fromEntries(
+  PRODUCT_SCREEN_KEYS.map(key => [key, lazy(PRODUCT_SCREEN_LOADERS[key])]),
+) as Record<ProductScreenKey, LazyExoticComponent<ProductScreenComponent>>;
+
+/** Frame heights of the two renderings: constants, so a skeleton and the loaded screen are one box. */
+export const PRODUCT_SCREEN_HEIGHT = 440;
+export const PRODUCT_SCREEN_COMPACT_HEIGHT = 300;
+
+/**
+ * The narrowest layout a screen reads well at, where that is wider than a
+ * host's readable width: the device list's customer column breaks a name
+ * mid-word below it, and the logs table beside its open drawer has no room
+ * for the message; the software form is laid out wide so the package, the
+ * schedule and the picked devices all fit the frame's height. A frame never
+ * lays such a screen out narrower.
+ */
+const MIN_LAYOUT_WIDTH: Partial<Record<ProductScreenKey, number>> = {
+  devices: 1120,
+  logs: 1120,
+  'software-update': 1400,
+};
+
+/**
+ * A compact screen that has no layout of its own for a card's width: the
+ * remote desktop's control bar needs more room than a phone's card gives, so
+ * its compact rendering is laid out at this width and scaled to the card, the
+ * way a wide frame scales the full page.
+ */
+const COMPACT_LAYOUT_WIDTH: Partial<Record<ProductScreenKey, number>> = {
+  'remote-session': 380,
+};
+
+export interface ProductScreenProps extends Omit<ProductScreenFrameProps, 'children' | 'label' | 'height'> {
+  screen: ProductScreenKey;
+  /** The narrow rendering in the short frame. */
+  compact?: boolean;
+  /** Overrides the registry's label. */
+  label?: string;
+  /** Overrides the frame height of the rendering. */
+  height?: number | string;
+}
+
+/** The box a product screen occupies while it loads. */
+export function ProductScreenSkeleton({
+  compact = false,
+  height,
+  className,
+}: Pick<ProductScreenProps, 'compact' | 'height' | 'className'>) {
+  return (
+    <Skeleton
+      className={className}
+      style={{ height: height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT) }}
+    />
+  );
+}
+
+/**
+ * One product screen of the registry, in its frame. The screen's code is
+ * downloaded when this mounts; until then the frame holds its box.
+ */
+export function ProductScreen({ screen, compact = false, label, height, designWidth, ...frame }: ProductScreenProps) {
+  const Screen = LAZY_SCREENS[screen];
+  const frameHeight = height ?? (compact ? PRODUCT_SCREEN_COMPACT_HEIGHT : PRODUCT_SCREEN_HEIGHT);
+  const minWidth = compact ? undefined : MIN_LAYOUT_WIDTH[screen];
+  const compactWidth = compact ? COMPACT_LAYOUT_WIDTH[screen] : undefined;
+  const layoutWidth =
+    compactWidth ??
+    // A screen with a minimum keeps it whether or not the host names a width (the frame's default is narrower).
+    (minWidth !== undefined ? Math.max(designWidth ?? minWidth, minWidth) : designWidth);
+  return (
+    <ProductScreenFrame
+      {...frame}
+      designWidth={layoutWidth}
+      // Scaled at every width below its layout width: there is no narrower layout to fall to.
+      {...(compactWidth !== undefined && { scaleFrom: 0 })}
+      label={label ?? PRODUCT_SCREEN_LABELS[screen]}
+      height={frameHeight}
+    >
+      <Suspense fallback={<Skeleton className="h-full w-full" />}>
+        <Screen compact={compact} />
+      </Suspense>
+    </ProductScreenFrame>
+  );
+}

package/src/components/product-demo/registry.ts

@@ -0,0 +1,20 @@
+import type { ProductScreenKey } from './screen-keys';
+import type { ProductScreenComponent } from './types';
+
+type ProductScreenLoader = () => Promise<{ default: ProductScreenComponent }>;
+
+/**
+ * How each screen of `screen-keys` is loaded: the product's own view rendered
+ * with a fixture from `./fixtures`, one chunk per screen. The `Record` type
+ * makes a key without a loader a compile error.
+ */
+export const PRODUCT_SCREEN_LOADERS: Record<ProductScreenKey, ProductScreenLoader> = {
+  'remote-session': () => import('./screens/remote-session'),
+  'software-update': () => import('./screens/software-update'),
+  devices: () => import('./screens/devices'),
+  policies: () => import('./screens/policies'),
+  'cloud-tenants': () => import('./screens/cloud-tenants'),
+  'tickets-board': () => import('./screens/tickets-board'),
+  logs: () => import('./screens/logs'),
+  knowledge: () => import('./screens/knowledge'),
+};

package/src/components/product-demo/screen-keys.ts

@@ -0,0 +1,31 @@
+/**
+ * The product screens a marketing page can show: key and label. A key is
+ * stored by hosts (the hub keeps one per capability), so it is a contract:
+ * never rename one, add a new one instead.
+ *
+ * Leaf module with no React and no loaders, so a host reads it on the server
+ * (to validate a stored key, to fill a picker). The loaders are in `registry`.
+ */
+export const PRODUCT_SCREEN_LABELS = {
+  'remote-session': 'Remote desktop session',
+  'software-update': 'Update software',
+  devices: 'Devices',
+  policies: 'Policies',
+  'cloud-tenants': 'Cloud tenants',
+  'tickets-board': 'Ticket board',
+  logs: 'Logs with a log open',
+  knowledge: 'Knowledge base',
+} as const;
+
+export type ProductScreenKey = keyof typeof PRODUCT_SCREEN_LABELS;
+
+export const PRODUCT_SCREEN_KEYS = Object.keys(PRODUCT_SCREEN_LABELS) as ProductScreenKey[];
+
+export function isProductScreenKey(value: unknown): value is ProductScreenKey {
+  return typeof value === 'string' && Object.prototype.hasOwnProperty.call(PRODUCT_SCREEN_LABELS, value);
+}
+
+/** Key and label of every screen, for a picker. */
+export const PRODUCT_SCREEN_OPTIONS: readonly { value: ProductScreenKey; label: string }[] = PRODUCT_SCREEN_KEYS.map(
+  key => ({ value: key, label: PRODUCT_SCREEN_LABELS[key] }),
+);

package/src/components/product-demo/screens/cloud-tenants.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useMemo } from 'react';
+import { TenantsTableView } from '../../features/cloud-tenants';
+import { useProductDemoCast } from '../cast';
+import { buildCloudTenantsFixture } from '../fixtures/cloud-tenants';
+import type { ProductScreenViewProps } from '../types';
+
+/** A picture has nowhere to go: every row leads to the same inert address. */
+const getHref = () => '#';
+
+/**
+ * The product's Cloud Tenant Management list without its title row and its
+ * empty search field (the job is named above the picture): the tenants table,
+ * each with its directory, its customer and what the last access probe found.
+ */
+export default function CloudTenantsScreen(_props: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const fixture = useMemo(() => buildCloudTenantsFixture(cast), [cast]);
+  const table = <TenantsTableView rows={fixture.rows} getHref={getHref} now={fixture.now} />;
+
+  return <div className="h-full bg-ods-bg p-[var(--spacing-system-l)]">{table}</div>;
+}

package/src/components/product-demo/screens/devices.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useMemo } from 'react';
+import { DevicesPanelView, IDLE_DEVICES_TOOLBAR } from '../../features/devices';
+import { useProductDemoCast } from '../cast';
+import { buildWindowsDevicesFixture, DEVICES_SEARCH_QUERY } from '../fixtures/devices';
+import type { ProductScreenViewProps } from '../types';
+
+/** The toolbar with the search the rows answer: chrome that shows state. */
+const TOOLBAR = { ...IDLE_DEVICES_TOOLBAR, searchValue: DEVICES_SEARCH_QUERY };
+
+/** Stands in for the page header (title, view switch, buttons): the job is named above the picture. */
+const NO_HEADER = <></>;
+
+const HIDDEN_WHEN_COMPACT = ['organization'];
+
+/**
+ * The product's Devices page in its table view, answering a search: the query
+ * in the toolbar, the rows that match. No title row (the job is named above the
+ * picture) and no row menu (a closed menu carries nothing and the customer
+ * needs the room). The narrow rendering drops the customer column and keeps
+ * device, status and OS.
+ */
+export default function DevicesScreen({ compact = false }: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const fixture = useMemo(() => buildWindowsDevicesFixture(cast), [cast]);
+  return (
+    <div className="h-full bg-ods-bg">
+      <DevicesPanelView
+        className="p-[var(--spacing-system-l)]"
+        headerSlot={NO_HEADER}
+        toolbar={TOOLBAR}
+        viewMode="table"
+        devices={fixture.devices}
+        deviceFilters={fixture.deviceFilters}
+        totalCount={fixture.totalCount}
+        hideColumns={compact ? HIDDEN_WHEN_COMPACT : undefined}
+      />
+    </div>
+  );
+}

package/src/components/product-demo/screens/knowledge.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMemo } from 'react';
+import { KnowledgeBaseArticleView } from '../../features/knowledge-base';
+import { SimpleMarkdownRenderer } from '../../ui/markdown/simple-markdown-renderer';
+import { useProductDemoCast } from '../cast';
+import { buildKnowledgeFixture } from '../fixtures/knowledge';
+import type { ProductScreenViewProps } from '../types';
+
+/**
+ * The product's Knowledge Base with one article open: a client's runbook, its
+ * author and status, and the steps. A list of file names says nothing about
+ * the job; an open runbook does. The title is the article's own name, the one
+ * line that says what is open; the page's buttons are left out.
+ */
+export default function KnowledgeScreen(_props: ProductScreenViewProps) {
+  const cast = useProductDemoCast();
+  const fixture = useMemo(() => buildKnowledgeFixture(cast), [cast]);
+  return (
+    <div className="h-full bg-ods-bg">
+      <KnowledgeBaseArticleView
+        {...fixture.article}
+        content={<SimpleMarkdownRenderer content={fixture.content} textSize="compact" />}
+      />
+    </div>
+  );
+}

package/src/components/product-demo/screens/logs.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState } from 'react';
+import { normalizeToolTypeWithFallback } from '../../../utils/tool-utils';
+import {
+  LogCopyIconButton,
+  LogDrawer,
+  logSourceLabels,
+  LogsPageView,
+  type LogsTableColumnId,
+  LogsTableView,
+} from '../../features/logs';
+import { AppLayoutDrawerContainerContext } from '../../navigation/app-layout-context';
+import { ToolBadge } from '../../platform/ToolBadge';
+import { Button } from '../../ui/button';
+import { DeviceCard } from '../../ui/device-card';
+import {
+  LOGS_FIXTURE_DEVICE,
+  LOGS_FIXTURE_ENTRIES,
+  LOGS_FIXTURE_FACETS,
+  LOGS_FIXTURE_SEARCH,
+  LOGS_FIXTURE_SELECTED,
+  LOGS_FIXTURE_SELECTED_DETAILS,
+} from '../fixtures/logs';
+import type { ProductScreenViewProps } from '../types';
+
+const noop = () => {};
+const NO_FILTERS: Record<string, string[]> = {};
+/** A row's action buttons carry nothing in a picture and squeeze what the row is about: both renderings drop them. */
+const ACTION_COLUMNS: LogsTableColumnId[] = ['copy', 'quickView', 'open'];
+/**
+ * Beside the open drawer the table keeps when, how bad and what happened: the
+ * tool and the device are in the drawer, and their fixed widths would leave
+ * the message no room.
+ */
+const BESIDE_DRAWER_HIDDEN: LogsTableColumnId[] = [...ACTION_COLUMNS, 'tool', 'source'];
+const logHref = () => '#';
+const copyAction = () => <LogCopyIconButton />;
+
+/** The product's Logs page with one entry open in the Log Details drawer; the narrow rendering is the table alone. */
+export default function LogsScreen({ compact = false }: ProductScreenViewProps) {
+  // The drawer portals into this box, so it stays inside the screen, docked beside the table.
+  const [dock, setDock] = useState<HTMLDivElement | null>(null);
+  const selected = LOGS_FIXTURE_SELECTED;
+
+  return (
+    <div className="flex h-full bg-ods-bg">
+      {/* Clipped, not a scroll container: the page's sticky toolbar and table header measure from the frame, as they do from the product's page. */}
+      <div className="min-w-0 flex-1 overflow-clip">
+        {/* No title row: the job is named above the picture. The search shows the query the rows answer. */}
+        <LogsPageView
+          showHeader={false}
+          className="p-[var(--spacing-system-l)]"
+          search={LOGS_FIXTURE_SEARCH}
+          onSearchChange={noop}
+          onOpenFilters={noop}
+        >
+          <LogsTableView
+            logs={LOGS_FIXTURE_ENTRIES}
+            facets={LOGS_FIXTURE_FACETS}
+            filters={NO_FILTERS}
+            onFilterChange={noop}
+            getLogHref={logHref}
+            renderCopyAction={copyAction}
+            onQuickView={noop}
+            hiddenColumns={compact ? ACTION_COLUMNS : BESIDE_DRAWER_HIDDEN}
+          />
+        </LogsPageView>
+      </div>
+
+      {!compact && (
+        <div ref={setDock} className="relative w-[calc(400px+var(--spacing-system-m))] shrink-0">
+          {dock && (
+            <AppLayoutDrawerContainerContext.Provider value={dock}>
+              <LogDrawer
+                docked
+                isOpen
+                onClose={noop}
+                description={<div className="whitespace-pre-wrap break-words">{LOGS_FIXTURE_SELECTED_DETAILS}</div>}
+                statusTag={selected.status}
+                timestamp={selected.timestamp}
+                infoFields={[
+                  { label: 'Log ID', value: selected.logId },
+                  {
+                    label: 'Source',
+                    value: <ToolBadge toolType={normalizeToolTypeWithFallback(selected.source.toolType)} />,
+                  },
+                  { label: 'Device', value: logSourceLabels(selected.device).deviceName },
+                ]}
+                deviceCard={
+                  <DeviceCard
+                    {...LOGS_FIXTURE_DEVICE}
+                    actions={{
+                      moreButton: { visible: false },
+                      detailsButton: {
+                        visible: true,
+                        component: (
+                          <Button variant="outline" className="shrink-0">
+                            Details
+                          </Button>
+                        ),
+                      },
+                    }}
+                  />
+                }
+              />
+            </AppLayoutDrawerContainerContext.Provider>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/product-demo/screens/policies.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { PoliciesTable, PolicySummaryCards } from '../../features/policies';
+import { DataTable } from '../../ui/data-table';
+import { POLICIES_FIXTURE } from '../fixtures/policies';
+import type { ProductScreenViewProps } from '../types';
+
+/**
+ * The product's fleet-wide Policies page without its title row and its empty
+ * search field (the job is named above the picture): the compliance counters
+ * and the table. The narrow rendering is the table alone.
+ */
+export default function PoliciesScreen({ compact = false }: ProductScreenViewProps) {
+  const table = (
+    <PoliciesTable
+      rows={POLICIES_FIXTURE.rows}
+      rowAsLink
+      rightSlot={compact ? undefined : <DataTable.RowCount />}
+      emptyMessage="No policies found."
+    />
+  );
+
+  return (
+    <div className="flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]">
+      {!compact && <PolicySummaryCards summary={POLICIES_FIXTURE.summary} now={POLICIES_FIXTURE.now} />}
+      {table}
+    </div>
+  );
+}