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

package/src/components/features/policies/index.ts

@@ -0,0 +1,14 @@
+'use client';
+
+export { PoliciesTable } from './policies-table';
+export type { PoliciesTableProps } from './policies-table';
+export { PolicySummaryCards } from './policy-summary-cards';
+export type { PolicySummaryCardsProps } from './policy-summary-cards';
+export {
+  computePolicySummary,
+  getPolicyStatus,
+  getPolicyTableStatus,
+  POLICY_STATUS_CONFIG,
+} from './compute-policy-summary';
+export type { PolicyHostCounts, PolicyStatus, PolicySummaryStats } from './compute-policy-summary';
+export type { PolicyStatusVariant, PolicyTableAction, PolicyTableRow, PolicyTableStatus } from './policy-table-row';

package/src/components/features/policies/policies-table.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { Button } from '../../ui/button';
+import { type ColumnDef, DataTable, type Row, type SortingState, useDataTable } from '../../ui/data-table';
+import { MoreActionsMenu } from '../../ui/more-actions-menu';
+import type { NoDataProps } from '../../ui/no-data';
+import { Tag } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+import { OSTypeBadgeGroup } from '../os-type-badge-group';
+import type { PolicyTableRow } from './policy-table-row';
+
+/**
+ * Click handler that opens `href` in a new tab. The row is itself a link and
+ * an `<a>` cannot be nested in an `<a>`, so the button opens it by script.
+ */
+const EMPTY_COLUMN_FILTERS: never[] = [];
+
+// An empty platform list means the policy applies to every OS, so we render the
+// full set of OS icons rather than a plain-text "All" label.
+const ALL_PLATFORMS = ['windows', 'darwin', 'linux'];
+
+const NOTE_TONE_CLASS = {
+  error: 'text-ods-error',
+  warning: 'text-ods-warning',
+} as const;
+
+export interface PoliciesTableProps {
+  rows: PolicyTableRow[];
+  isLoading?: boolean;
+  /** Show the OS Platform column (fleet-wide monitoring view). */
+  showPlatform?: boolean;
+  /** Enable client-side sorting on Severity & Status, with header sort controls. */
+  sortable?: boolean;
+  emptyMessage?: string;
+  /** Rich empty state (icon + title + description), overrides `emptyMessage`. */
+  emptyState?: NoDataProps;
+  /** Make each row a link to its `href`. */
+  rowAsLink?: boolean;
+  stickyHeader?: boolean;
+  stickyHeaderOffset?: string;
+  /** Rendered at the right edge of the header (e.g. a row count). */
+  rightSlot?: ReactNode;
+  skeletonRows?: number;
+  /** Infinite "load more" footer. */
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+  /** The next page is being fetched: the footer shows it and asks for nothing more meanwhile. Default false (a host that pages rows it already holds). */
+  isLoadingMore?: boolean;
+}
+
+/**
+ * Shared policies table. Renders a normalized `PolicyTableRow[]` with a
+ * consistent column set (Policy name+description, Severity, optional Platform,
+ * Status, optional row actions, open-in-new-tab). Used by both the fleet-wide
+ * monitoring page and the per-device Policies tab.
+ */
+export function PoliciesTable({
+  rows,
+  isLoading = false,
+  showPlatform = false,
+  sortable = false,
+  emptyMessage,
+  emptyState,
+  rowAsLink = false,
+  stickyHeader = false,
+  stickyHeaderOffset,
+  rightSlot,
+  skeletonRows = 10,
+  hasMore = false,
+  onLoadMore,
+  isLoadingMore = false,
+}: PoliciesTableProps) {
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  // Reserve the actions column while loading so the column count stays stable across
+  // skeleton, loading and loaded (otherwise it appears once rows arrive and shifts every
+  // column, the "jitter"). Loaded rows in every caller carry actions.
+  const hasActions = useMemo(() => isLoading || rows.some(r => r.actions && r.actions.length > 0), [isLoading, rows]);
+
+  const columns = useMemo<ColumnDef<PolicyTableRow>[]>(() => {
+    const cols: ColumnDef<PolicyTableRow>[] = [
+      {
+        accessorKey: 'name',
+        header: 'Name',
+        cell: ({ row }: { row: Row<PolicyTableRow> }) => (
+          <div className="flex min-h-[60px] min-w-0 flex-col justify-center gap-1 py-2">
+            <TruncateText>{row.original.name}</TruncateText>
+            {row.original.description && (
+              <TruncateText variant="h6" tone="secondary">
+                {row.original.description}
+              </TruncateText>
+            )}
+          </div>
+        ),
+        meta: { width: 'flex-1 min-w-0' },
+      },
+      {
+        id: 'severity',
+        accessorFn: (row: PolicyTableRow) => (row.critical ? 1 : 0),
+        header: 'SEVERITY',
+        cell: ({ row }: { row: Row<PolicyTableRow> }) => (
+          <span className="text-ods-text-primary text-h6">{row.original.severityLabel}</span>
+        ),
+        enableSorting: sortable,
+        meta: { width: 'w-[100px]', sortable, hideAt: 'md' },
+      },
+    ];
+
+    if (showPlatform) {
+      cols.push({
+        id: 'platform',
+        header: 'PLATFORM',
+        cell: ({ row }: { row: Row<PolicyTableRow> }) => {
+          const platforms = row.original.platforms ?? [];
+          const osTypes = platforms.length > 0 ? platforms : ALL_PLATFORMS;
+          return <OSTypeBadgeGroup osTypes={osTypes} iconSize="w-6 h-6" />;
+        },
+        meta: { width: 'w-[140px]', hideAt: 'lg' },
+      });
+    }
+
+    cols.push({
+      id: 'status',
+      accessorFn: (row: PolicyTableRow) => row.status.label,
+      header: 'STATUS',
+      cell: ({ row }: { row: Row<PolicyTableRow> }) => {
+        const { status } = row.original;
+        return (
+          <div className="flex flex-col items-start gap-1">
+            <Tag className="self-start" label={status.label} variant={status.variant} />
+            {status.note && <span className={`text-h6 ${NOTE_TONE_CLASS[status.note.tone]}`}>{status.note.text}</span>}
+          </div>
+        );
+      },
+      enableSorting: sortable,
+      meta: { width: 'w-[140px]', sortable, hideAt: 'md' },
+    });
+
+    if (hasActions) {
+      cols.push({
+        id: 'actions',
+        header: '',
+        cell: ({ row }: { row: Row<PolicyTableRow> }) =>
+          row.original.actions && row.original.actions.length > 0 ? (
+            <div data-no-row-click className="pointer-events-auto flex items-center justify-end gap-2">
+              <MoreActionsMenu items={row.original.actions} />
+            </div>
+          ) : null,
+        enableSorting: false,
+        meta: { width: 'w-12 content-md:w-auto content-md:min-w-[100px] shrink-0 flex-none', align: 'right' },
+      });
+    }
+
+    cols.push({
+      id: 'open',
+      header: '',
+      cell: ({ row }: { row: Row<PolicyTableRow> }) =>
+        row.original.href ? (
+          <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+            <Button
+              onClick={openInNewTab(row.original.href)}
+              variant="outline"
+              size="icon"
+              leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+              aria-label={`Open ${row.original.name}`}
+              className="bg-ods-card"
+            />
+          </div>
+        ) : null,
+      enableSorting: false,
+      meta: { width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+    });
+
+    return cols;
+  }, [showPlatform, sortable, hasActions]);
+
+  const table = useDataTable<PolicyTableRow>({
+    data: rows,
+    columns,
+    getRowId: (row: PolicyTableRow) => row.id,
+    clientSideSorting: sortable,
+    enableSorting: sortable,
+    state: { sorting, columnFilters: EMPTY_COLUMN_FILTERS },
+    onSortingChange: setSorting,
+  });
+
+  const sortState = sortable && sorting[0] ? { id: sorting[0].id, desc: sorting[0].desc } : null;
+  const handleSortChange = useCallback((columnId: string) => {
+    setSorting(prev => {
+      const current = prev[0];
+      if (!current || current.id !== columnId) return [{ id: columnId, desc: false }];
+      if (!current.desc) return [{ id: columnId, desc: true }];
+      return [];
+    });
+  }, []);
+
+  const rowHref = useCallback((row: PolicyTableRow) => (rowAsLink ? row.href : undefined), [rowAsLink]);
+
+  // Hide the column header on the empty state: only show it while loading (skeleton rows)
+  // or when there are real rows.
+  const showHeader = isLoading || rows.length > 0;
+
+  return (
+    <DataTable table={table}>
+      {showHeader && (
+        <DataTable.Header
+          stickyHeader={stickyHeader}
+          stickyHeaderOffset={stickyHeaderOffset}
+          rightSlot={rightSlot}
+          sort={sortState}
+          onSortChange={sortable ? handleSortChange : undefined}
+        />
+      )}
+      <DataTable.Body
+        loading={isLoading}
+        skeletonRows={skeletonRows}
+        emptyMessage={emptyMessage}
+        emptyState={emptyState}
+        rowClassName="mb-1"
+        rowHref={rowHref}
+      />
+      {hasMore && onLoadMore && (
+        <DataTable.InfiniteFooter
+          hasNextPage
+          isFetchingNextPage={isLoadingMore}
+          onLoadMore={onLoadMore}
+          skeletonRows={2}
+        />
+      )}
+    </DataTable>
+  );
+}

package/src/components/features/policies/policy-summary-cards.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { formatRelativeTimeFrom } from '../../../utils/date-utils';
+import { DashboardInfoCard } from '../../ui/dashboard-info-card';
+import { Skeleton } from '../../ui/skeleton';
+import type { PolicySummaryStats } from './compute-policy-summary';
+
+/** What a card shows when there is no value to show. */
+const EMPTY_VALUE = '—';
+
+const CARD_SKELETON_KEYS = ['total', 'compliance', 'failed', 'updated'] as const;
+
+export interface PolicySummaryCardsProps {
+  summary: PolicySummaryStats;
+  isLoading?: boolean;
+  /**
+   * Whether the summary describes loaded data. It decides the VALUES, never
+   * whether the cards render: without data every card shows the empty mark,
+   * because "Total Policies 0 / Failed 0" is an all-clear a failed load has
+   * not earned.
+   */
+  hasData?: boolean;
+  /** The clock "Updated" is relative to. Default: the moment of the render. */
+  now?: Date;
+}
+
+/** The four counters above the fleet-wide policies table. */
+export function PolicySummaryCards({ summary, isLoading = false, hasData = true, now }: PolicySummaryCardsProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4">
+      {isLoading ? (
+        // `h-16 content-md:h-[104px]` is `DashboardInfoCard`'s own height, so the
+        // grid does not jump when the real cards replace the placeholders.
+        CARD_SKELETON_KEYS.map(key => <Skeleton key={key} className="h-16 w-full content-md:h-[104px]" />)
+      ) : (
+        <>
+          <DashboardInfoCard title="Total Policies" value={hasData ? summary.totalPolicies : EMPTY_VALUE} />
+          <DashboardInfoCard
+            title="Compliance Rate"
+            value={
+              hasData
+                ? `${summary.compliantPolicies}/${summary.compliantPolicies + summary.failingPolicies}`
+                : EMPTY_VALUE
+            }
+            percentage={hasData ? summary.compliantPoliciesPercentage : undefined}
+            showProgress={hasData}
+          />
+          <DashboardInfoCard
+            title="Failed Policies"
+            value={hasData ? summary.failingPolicies : EMPTY_VALUE}
+            percentage={hasData ? summary.failingPoliciesPercentage : undefined}
+            showProgress={hasData}
+            progressVariant="error"
+          />
+          <DashboardInfoCard
+            title="Updated"
+            value={
+              hasData && summary.lastUpdatedAt
+                ? formatRelativeTimeFrom(summary.lastUpdatedAt, now ?? new Date())
+                : EMPTY_VALUE
+            }
+            valueClassName="!text-h3"
+            tooltip="Policy compliance stats are updated hourly. View a policy's devices for real-time status."
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/features/policies/policy-table-row.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps } from 'react';
+import type { MoreActionsMenu } from '../../ui/more-actions-menu';
+
+/** A single ellipsis-menu action, as accepted by the core `MoreActionsMenu`. */
+export type PolicyTableAction = ComponentProps<typeof MoreActionsMenu>['items'][number];
+
+export type PolicyStatusVariant = 'success' | 'error' | 'warning' | 'critical' | 'grey';
+
+export interface PolicyTableStatus {
+  label: string;
+  variant: PolicyStatusVariant;
+  /** Optional secondary line under the status tag (e.g. "3 devices"). */
+  note?: { text: string; tone: 'error' | 'warning' };
+}
+
+/**
+ * Normalized row consumed by the shared `PoliciesTable`. Each caller maps its
+ * own policy model (fleet-wide policy, per-device Fleet host policy, ...) into
+ * this view-model so the table/columns live in a single place.
+ */
+export interface PolicyTableRow {
+  /** Stable row id. */
+  id: string;
+  name: string;
+  description?: string;
+  /** Critical severity: drives sorting and the default severity label. */
+  critical: boolean;
+  /** Display text for the SEVERITY column ("Critical" / "Low" / "Non-critical"). */
+  severityLabel: string;
+  status: PolicyTableStatus;
+  /** OS platforms, only rendered when the table shows the Platform column. */
+  platforms?: string[];
+  /** Optional ellipsis-menu actions for the row. */
+  actions?: PolicyTableAction[];
+  /** Target for the open-in-new-tab button and (optionally) the row link. */
+  href?: string;
+}

package/src/components/features/remote-session/index.ts

@@ -13,6 +13,14 @@ export type {
 } from './remote-session-block';
 export { RemoteSessionChatPanel } from './remote-session-chat-panel';
 export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
+export { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
+export type { RemoteDesktopChatMessageRowProps } from './remote-desktop-chat-message-row';
+export { REMOTE_DESKTOP_CHAT_END_USER_NAME, RemoteDesktopChatPanel } from './remote-desktop-chat-panel';
+export type { RemoteDesktopChatPanelProps, RemoteDesktopChatTechnician } from './remote-desktop-chat-panel';
+export { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
+export type { RemoteDesktopFullscreenToolbarProps } from './remote-desktop-fullscreen-toolbar';
+export { RemoteDesktopView, RemoteDesktopViewSkeleton } from './remote-desktop-view';
+export type { RemoteDesktopViewProps } from './remote-desktop-view';
 export { RemoteSessionDialog } from './remote-session-dialog';
 export type { RemoteSessionDialogProps } from './remote-session-dialog';
 export { RemoteSessionBorder, RemoteSessionPill } from './remote-session-overlay';

package/src/components/features/remote-session/remote-desktop-chat-message-row.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { formatTime } from '../../../utils/format-date';
+import { SquareAvatar } from '../../ui/square-avatar';
+
+export interface RemoteDesktopChatMessageRowProps {
+  authorName: string;
+  /** The technician's rows carry the avatar and the accent-colored name. */
+  isTechnician: boolean;
+  avatarUrl?: string;
+  /** When the message was sent: an ISO timestamp or a `Date`. */
+  sentAt: string | Date;
+  body: string;
+}
+
+/**
+ * One session-chat message on the technician's side, shared by the recording
+ * transcript and the live panel: the technician's rows carry a 24px avatar and
+ * an accent-colored name, the end user's rows a plain grey name; the timestamp
+ * sits right-aligned on the name row and the message body follows below.
+ *
+ * Names are Azeret Mono 18/24 medium in the mockup - a combination the ODS
+ * composite utilities don't carry (`text-h5` is the 14px uppercase caption),
+ * so the heading family is applied over `text-h4` via the ODS font variable.
+ */
+export function RemoteDesktopChatMessageRow({
+  authorName,
+  isTechnician,
+  avatarUrl,
+  sentAt,
+  body,
+}: RemoteDesktopChatMessageRowProps) {
+  return (
+    <div className="grid grid-cols-1 gap-[var(--spacing-system-xxs)]">
+      <div className="flex items-center gap-[var(--spacing-system-xxs)]">
+        {isTechnician && (
+          <SquareAvatar variant="round" sizePx={24} src={avatarUrl} alt={authorName} className="shrink-0" />
+        )}
+        <span
+          className={cn(
+            'min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]',
+            isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary',
+          )}
+        >
+          {authorName}
+        </span>
+        {/* The time is in the viewer's zone, which a server render cannot know. */}
+        <span suppressHydrationWarning className="shrink-0 text-ods-text-secondary text-h6">
+          {formatTime(sentAt)}
+        </span>
+      </div>
+      <p className="whitespace-pre-wrap text-ods-text-primary text-h4">{body}</p>
+    </div>
+  );
+}

package/src/components/features/remote-session/remote-desktop-chat-panel.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../../utils/cn';
+import { ChatInput } from '../../chat/chat-input';
+import { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
+import type { RemoteSessionChatMessage } from './types';
+
+/** Who is typing on the technician's side of the chat: shown on the technician's rows. */
+export interface RemoteDesktopChatTechnician {
+  name: string;
+  avatarUrl?: string;
+}
+
+/** The end user has no profile on the wire: their rows read "User" unless a row names them. */
+export const REMOTE_DESKTOP_CHAT_END_USER_NAME = 'User';
+
+export interface RemoteDesktopChatPanelProps {
+  messages: RemoteSessionChatMessage[];
+  /** The dialog's history is still on its way; the empty state must not claim there is nothing. */
+  loading?: boolean;
+  technician: RemoteDesktopChatTechnician;
+  sending: boolean;
+  /** Resolves `false` to keep the draft in the input (nothing was sent). */
+  onSend: (body: string) => Promise<boolean>;
+  /**
+   * `side` - the right-hand column next to the screen;
+   * `overlay` - floating over the stream in fullscreen, positioned against
+   * the fullscreen screen container.
+   */
+  variant: 'side' | 'overlay';
+}
+
+/**
+ * The technician's chat with the end user during a remote session: the message
+ * stream bottom-aligned above the composer. The end user's side is
+ * `RemoteSessionChatPanel` in the session block; the "joined the chat" notice
+ * is that side's indication only and is not shown here.
+ */
+export function RemoteDesktopChatPanel({
+  messages,
+  loading,
+  technician,
+  sending,
+  onSend,
+  variant,
+}: RemoteDesktopChatPanelProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  // System notices (the "joined the chat" line) are the end user's indication only.
+  const rows = messages.filter(message => message.author !== 'system');
+
+  // Keep the newest message in view as the stream grows.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [rows.length]);
+
+  return (
+    <aside
+      aria-label="Session chat"
+      className={cn(
+        'flex flex-col gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
+        variant === 'side'
+          ? 'h-full w-[400px] flex-shrink-0'
+          : 'absolute bottom-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] top-[calc(var(--spacing-system-xlf)+var(--spacing-system-mf))] z-10 w-[360px] shadow-lg',
+      )}
+    >
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]">
+          {rows.length === 0 ? (
+            <p className="text-center text-ods-text-muted text-h6">
+              {loading ? 'Loading the chat...' : 'No messages yet - say hello to the user.'}
+            </p>
+          ) : (
+            rows.map(message => (
+              <RemoteDesktopChatMessageRow
+                key={message.id}
+                authorName={
+                  message.name ||
+                  (message.author === 'technician' ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME)
+                }
+                isTechnician={message.author === 'technician'}
+                avatarUrl={message.author === 'technician' ? technician.avatarUrl : undefined}
+                sentAt={message.at}
+                body={message.text}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      <ChatInput
+        placeholder="Enter your Message..."
+        onSend={onSend}
+        sending={sending}
+        showSendButton
+        fullWidth
+        maxRows={4}
+      />
+    </aside>
+  );
+}

package/src/components/features/remote-session/remote-desktop-fullscreen-toolbar.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import {
+  ChatOffIcon,
+  ChatTextIcon,
+  Chevron02DownIcon,
+  Collapse02Icon,
+  Ellipsis01Icon,
+  MonitorIcon,
+  Settings01Icon,
+} from '../../icons-v2-generated';
+import { OpenFrameLogo } from '../../icons/openframe-logo';
+import { ActionsMenuDropdown, type ActionsMenuGroup } from '../../ui/actions-menu';
+import { Button } from '../../ui/button/button';
+
+export interface RemoteDesktopFullscreenToolbarProps {
+  deviceName: string;
+  displayMenuGroups: ActionsMenuGroup[];
+  currentDisplayLabel: string;
+  actionsMenuGroups: ActionsMenuGroup[];
+  onOpenSettings: () => void;
+  onExitFullscreen: () => void;
+  /** Session chat toggle - omitted when the session has no chat. */
+  chatOpen?: boolean;
+  onToggleChat?: () => void;
+}
+
+/**
+ * Compact overlay chrome for the fullscreen remote-desktop mode (Figma 1-70992):
+ * a floating semi-transparent bar at top-center (device name, display switcher,
+ * actions / exit-fullscreen / settings) plus a dimmed OpenFrame logo in the
+ * top-left corner of the stream. Rendered inside the fullscreen container,
+ * absolutely positioned over the screen.
+ */
+export function RemoteDesktopFullscreenToolbar({
+  deviceName,
+  displayMenuGroups,
+  currentDisplayLabel,
+  actionsMenuGroups,
+  onOpenSettings,
+  onExitFullscreen,
+  chatOpen = false,
+  onToggleChat,
+}: RemoteDesktopFullscreenToolbarProps) {
+  return (
+    <>
+      <OpenFrameLogo className="absolute left-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10 h-6 w-6 opacity-50" />
+      <div
+        className={
+          'absolute left-1/2 top-0 z-10 w-[calc(100%-7rem)] -translate-x-1/2 ' +
+          'flex items-center gap-[var(--spacing-system-xs)] ' +
+          'rounded-b-[6px] border-x border-b border-ods-border bg-ods-overlay ' +
+          'py-[var(--spacing-system-xsf)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xsf)]'
+        }
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]">
+          <span className="truncate text-ods-text-primary text-h6">{deviceName}</span>
+          {displayMenuGroups.length > 0 && (
+            <ActionsMenuDropdown
+              groups={displayMenuGroups}
+              customTrigger={
+                <button
+                  type="button"
+                  aria-label="Switch display"
+                  className={
+                    'flex h-8 flex-shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-[6px] ' +
+                    'border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] ' +
+                    'text-ods-text-primary hover:border-ods-border-hover'
+                  }
+                >
+                  <MonitorIcon className="h-4 w-4" />
+                  <span className="whitespace-nowrap text-h5">{currentDisplayLabel}</span>
+                  <Chevron02DownIcon className="h-4 w-4" />
+                </button>
+              }
+            />
+          )}
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+          {onToggleChat && (
+            <Button
+              variant="outline"
+              size="small"
+              onClick={onToggleChat}
+              leftIcon={chatOpen ? <ChatOffIcon className="h-4 w-4" /> : <ChatTextIcon className="h-4 w-4" />}
+            >
+              <span className="text-h5">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
+            </Button>
+          )}
+          <ActionsMenuDropdown
+            groups={actionsMenuGroups}
+            customTrigger={
+              <Button
+                variant="outline"
+                size="icon-sm"
+                aria-label="Actions"
+                leftIcon={<Ellipsis01Icon className="h-4 w-4" />}
+              />
+            }
+          />
+          <Button
+            variant="outline"
+            size="icon-sm"
+            aria-label="Exit fullscreen"
+            onClick={onExitFullscreen}
+            leftIcon={<Collapse02Icon className="h-4 w-4" />}
+          />
+          <Button
+            variant="outline"
+            size="icon-sm"
+            aria-label="Settings"
+            onClick={onOpenSettings}
+            leftIcon={<Settings01Icon className="h-4 w-4" />}
+          />
+        </div>
+      </div>
+    </>
+  );
+}