@flamingo-stack/openframe-frontend-core 0.0.718 → 0.0.719

package/dist/{knowledge-KLVPVEYZ.cjs → knowledge-FKTJ723Z.cjs}

@@ -8,11 +8,11 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunkZ3CVSPO3cjs = require('./chunk-Z3CVSPO3.cjs');
+var _chunkNQVS4G7Gcjs = require('./chunk-NQVS4G7G.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-Z5UWW3Z2.cjs');
+require('./chunk-LCLDFMDF.cjs');
 require('./chunk-ZXCZYMN4.cjs');
 require('./chunk-B4NCVYEQ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
@@ -97,7 +97,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZ3CVSPO3cjs.KnowledgeBaseArticleView,
+    _chunkNQVS4G7Gcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUWQWMGJ7cjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{knowledge-RZSFNR33.js → knowledge-G6Q5KRWV.js}

@@ -8,11 +8,11 @@ import {
 } from "./chunk-CYUUHFXL.js";
 import {
   KnowledgeBaseArticleView
-} from "./chunk-N2PF5CFX.js";
+} from "./chunk-2JLP2X2M.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
-import "./chunk-LOYPRJWA.js";
+import "./chunk-Y4MB25KW.js";
 import "./chunk-IWCPXJEE.js";
 import "./chunk-3K5ZLZE7.js";
 import "./chunk-HFL2F4RM.js";

package/dist/{logs-OX3XTVL2.cjs → logs-CJCXUBU6.cjs}

@@ -16,11 +16,11 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZ3CVSPO3cjs = require('./chunk-Z3CVSPO3.cjs');
+var _chunkNQVS4G7Gcjs = require('./chunk-NQVS4G7G.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-Z5UWW3Z2.cjs');
+require('./chunk-LCLDFMDF.cjs');
 require('./chunk-ZXCZYMN4.cjs');
 require('./chunk-B4NCVYEQ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
@@ -78,7 +78,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkZ3CVSPO3cjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkNQVS4G7Gcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -150,13 +150,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ3CVSPO3cjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQVS4G7Gcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkZ3CVSPO3cjs.LogsPageView,
+      _chunkNQVS4G7Gcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -164,7 +164,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkZ3CVSPO3cjs.LogsTableView,
+          _chunkNQVS4G7Gcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -178,8 +178,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ3CVSPO3cjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkZ3CVSPO3cjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQVS4G7Gcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkNQVS4G7Gcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -191,12 +191,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ3CVSPO3cjs.ToolBadge, { toolType: _chunkUWQWMGJ7cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQVS4G7Gcjs.ToolBadge, { toolType: _chunkUWQWMGJ7cjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkZ3CVSPO3cjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkNQVS4G7Gcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkZ3CVSPO3cjs.DeviceCard,
+          _chunkNQVS4G7Gcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{logs-E5DOV5JO.js → logs-QMV6XIC4.js}

@@ -16,11 +16,11 @@ import {
   ToolBadge,
   logSeverityVariant,
   logSourceLabels
-} from "./chunk-N2PF5CFX.js";
+} from "./chunk-2JLP2X2M.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
-import "./chunk-LOYPRJWA.js";
+import "./chunk-Y4MB25KW.js";
 import "./chunk-IWCPXJEE.js";
 import "./chunk-3K5ZLZE7.js";
 import "./chunk-HFL2F4RM.js";

package/dist/{policies-MC2S4S5G.js → policies-G6D7AX6F.js}

@@ -10,11 +10,11 @@ import {
   PolicySummaryCards,
   computePolicySummary,
   getPolicyTableStatus
-} from "./chunk-N2PF5CFX.js";
+} from "./chunk-2JLP2X2M.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
-import "./chunk-LOYPRJWA.js";
+import "./chunk-Y4MB25KW.js";
 import "./chunk-IWCPXJEE.js";
 import "./chunk-3K5ZLZE7.js";
 import "./chunk-HFL2F4RM.js";

package/dist/{policies-FOSCIZGK.cjs → policies-QMRTK3CY.cjs}

@@ -10,11 +10,11 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZ3CVSPO3cjs = require('./chunk-Z3CVSPO3.cjs');
+var _chunkNQVS4G7Gcjs = require('./chunk-NQVS4G7G.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
-require('./chunk-Z5UWW3Z2.cjs');
+require('./chunk-LCLDFMDF.cjs');
 require('./chunk-ZXCZYMN4.cjs');
 require('./chunk-B4NCVYEQ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
@@ -83,14 +83,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkZ3CVSPO3cjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkNQVS4G7Gcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkZ3CVSPO3cjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkNQVS4G7Gcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -104,16 +104,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZ3CVSPO3cjs.PoliciesTable,
+    _chunkNQVS4G7Gcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ3CVSPO3cjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQVS4G7Gcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ3CVSPO3cjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQVS4G7Gcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{remote-session-DRFE5XZE.cjs → remote-session-2JVI7RVA.cjs}

@@ -10,7 +10,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZ5UWW3Z2cjs = require('./chunk-Z5UWW3Z2.cjs');
+var _chunkLCLDFMDFcjs = require('./chunk-LCLDFMDF.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-DC4RTYWK.cjs');
 require('./chunk-FFT56TYB.cjs');
@@ -175,7 +175,7 @@ function RemoteSessionScreen({ compact = false }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[var(--spacing-system-l)] flex-shrink-0" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkZ5UWW3Z2cjs.RemoteDesktopView,
+      _chunkLCLDFMDFcjs.RemoteDesktopView,
       {
         ...fixture.view,
         onEnterFullscreen: noop,
@@ -186,7 +186,7 @@ function RemoteSessionScreen({ compact = false }) {
         screen: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemoteDesktopPicture, { desktop: fixture.desktop }),
         chat: compact ? null : (
           // The side column needs the room of the wide layout; a narrow frame keeps the screen alone.
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden min-h-0 content-md:flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ5UWW3Z2cjs.RemoteDesktopChatPanel, { ...fixture.chat, sending: false, onSend: keepDraft, variant: "side" }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden min-h-0 content-md:flex", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLCLDFMDFcjs.RemoteDesktopChatPanel, { ...fixture.chat, sending: false, onSend: keepDraft, variant: "side" }) })
         )
       }
     ) })

package/dist/{remote-session-JQ2BPIE3.js → remote-session-DBD6OSTX.js}

@@ -10,7 +10,7 @@ import {
 import {
   RemoteDesktopChatPanel,
   RemoteDesktopView
-} from "./chunk-LOYPRJWA.js";
+} from "./chunk-Y4MB25KW.js";
 import "./chunk-YYYVS7CX.js";
 import "./chunk-KBJJQFYU.js";
 import "./chunk-P3JMAMHP.js";

package/dist/{software-update-D4OEIH65.js → software-update-6BQM6BKH.js}

@@ -15,13 +15,13 @@ import {
   PACKAGE_SEARCH_LABEL,
   PACKAGE_SEARCH_PLACEHOLDER,
   SoftwareActionForm
-} from "./chunk-N2PF5CFX.js";
+} from "./chunk-2JLP2X2M.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
 import {
   Autocomplete
-} from "./chunk-LOYPRJWA.js";
+} from "./chunk-Y4MB25KW.js";
 import "./chunk-IWCPXJEE.js";
 import "./chunk-3K5ZLZE7.js";
 import "./chunk-HFL2F4RM.js";

package/dist/{software-update-HOBSTWVO.cjs → software-update-PNZMRDBT.cjs}

@@ -15,13 +15,13 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZ3CVSPO3cjs = require('./chunk-Z3CVSPO3.cjs');
+var _chunkNQVS4G7Gcjs = require('./chunk-NQVS4G7G.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 
 
-var _chunkZ5UWW3Z2cjs = require('./chunk-Z5UWW3Z2.cjs');
+var _chunkLCLDFMDFcjs = require('./chunk-LCLDFMDF.cjs');
 require('./chunk-ZXCZYMN4.cjs');
 require('./chunk-B4NCVYEQ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
@@ -116,14 +116,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZ5UWW3Z2cjs.Autocomplete,
+    _chunkLCLDFMDFcjs.Autocomplete,
     {
-      label: _chunkZ3CVSPO3cjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkNQVS4G7Gcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkZ3CVSPO3cjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkNQVS4G7Gcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -137,7 +137,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZ3CVSPO3cjs.SoftwareActionForm,
+    _chunkNQVS4G7Gcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -149,7 +149,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkZ3CVSPO3cjs.DeviceSelector,
+        _chunkNQVS4G7Gcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.718",
+  "version": "0.0.719",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/remote-session/remote-desktop-view.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import {
   ChatOffIcon,
   ChatTextIcon,
+  Chevron02DownIcon,
   Collapse02Icon,
   Expand02Icon,
   MonitorIcon,
@@ -19,8 +20,12 @@ import { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-tool
 /** The page chrome both the view and its skeleton render in. */
 const PAGE_CLASS = 'h-full overflow-hidden px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]';
 
+/** The header card: the device row, and under it the display row when there is one to pick. */
 const CONTROLS_BAR_CLASS =
-  'flex flex-shrink-0 items-center justify-between gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]';
+  'flex flex-shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card';
+
+const CONTROLS_ROW_CLASS =
+  'flex items-center justify-between gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]';
 
 export interface RemoteDesktopViewProps {
   /** First line of the device header. */
@@ -36,9 +41,13 @@ export interface RemoteDesktopViewProps {
   fullscreen?: boolean;
   onEnterFullscreen: () => void;
   onExitFullscreen: () => void;
-  /** The display switcher's menu; the switcher is hidden while this is empty (a single display). */
+  /**
+   * The display switcher's menu, one entry per separate display. The switcher is
+   * the full-width row under the device row (Figma 2155:109503), and it is left
+   * out while this is empty: one display, or an agent that reports none.
+   */
   displayMenuGroups?: ActionsMenuGroup[];
-  /** The switcher's label, e.g. "Display All" or "Display 2". */
+  /** The switcher's label, e.g. "Display 2", or "Display" before the agent has named one. */
   currentDisplayLabel: string;
   actionsMenuGroups: ActionsMenuGroup[];
   onOpenSettings: () => void;
@@ -86,61 +95,73 @@ export function RemoteDesktopView({
 }: RemoteDesktopViewProps) {
   const controlsBar = (
     <div className={CONTROLS_BAR_CLASS}>
-      <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-        <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
-          <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
-        </div>
-        <div className="flex min-w-0 flex-col">
-          <TruncateText>{deviceName}</TruncateText>
-          <TruncateText
-            variant="h6"
-            tone="secondary"
-          >{`Desktop • ${organizationName || 'Unknown Customer'}`}</TruncateText>
+      <div className={CONTROLS_ROW_CLASS}>
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+          <div className="flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]">
+            <MonitorIcon className="h-4 w-4 text-ods-text-primary" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <TruncateText>{deviceName}</TruncateText>
+            <TruncateText
+              variant="h6"
+              tone="secondary"
+            >{`Desktop • ${organizationName || 'Unknown Customer'}`}</TruncateText>
+          </div>
         </div>
-      </div>
-      <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-        {displayMenuGroups.length > 0 && (
-          <ActionsMenuDropdown
-            groups={displayMenuGroups}
-            customTrigger={
-              <Button variant="outline" leftIcon={<MonitorIcon className="h-4 w-4 md:h-6 md:w-6" />}>
-                {/* A narrow page keeps the icon and drops the words: the bar never pushes the device's name out. */}
-                <span className="sr-only content-md:not-sr-only">{currentDisplayLabel}</span>
-              </Button>
-            }
+        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+          {onToggleChat && (
+            <Button
+              variant="outline"
+              onClick={onToggleChat}
+              leftIcon={
+                chatOpen ? (
+                  <ChatOffIcon className="h-4 w-4 md:h-6 md:w-6" />
+                ) : (
+                  <ChatTextIcon className="h-4 w-4 md:h-6 md:w-6" />
+                )
+              }
+            >
+              {/* A narrow page keeps the icon and drops the words: the bar never pushes the device's name out. */}
+              <span className="sr-only content-md:not-sr-only">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
+            </Button>
+          )}
+          <ActionsMenuDropdown groups={actionsMenuGroups} triggerAriaLabel="Actions" />
+          <Button
+            variant="outline"
+            size="icon"
+            aria-label="Settings"
+            onClick={onOpenSettings}
+            leftIcon={<Settings01Icon />}
           />
-        )}
-        {onToggleChat && (
           <Button
             variant="outline"
-            onClick={onToggleChat}
-            leftIcon={
-              chatOpen ? (
-                <ChatOffIcon className="h-4 w-4 md:h-6 md:w-6" />
-              ) : (
-                <ChatTextIcon className="h-4 w-4 md:h-6 md:w-6" />
-              )
-            }
-          >
-            <span className="sr-only content-md:not-sr-only">{chatOpen ? 'Close Chat' : 'Open Chat'}</span>
-          </Button>
-        )}
-        <ActionsMenuDropdown groups={actionsMenuGroups} triggerAriaLabel="Actions" />
-        <Button
-          variant="outline"
-          size="icon"
-          aria-label="Settings"
-          onClick={onOpenSettings}
-          leftIcon={<Settings01Icon />}
-        />
-        <Button
-          variant="outline"
-          size="icon"
-          aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-          onClick={fullscreen ? onExitFullscreen : onEnterFullscreen}
-          leftIcon={fullscreen ? <Collapse02Icon /> : <Expand02Icon />}
-        />
+            size="icon"
+            aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            onClick={fullscreen ? onExitFullscreen : onEnterFullscreen}
+            leftIcon={fullscreen ? <Collapse02Icon /> : <Expand02Icon />}
+          />
+        </div>
       </div>
+      {/* The monitor selector is a row of its own under the device row, the full
+          width of the card (Figma 2155:109503): the label never competes with the
+          device's name for the header's width. Hidden with one display or none. */}
+      {displayMenuGroups.length > 0 && (
+        <ActionsMenuDropdown
+          groups={displayMenuGroups}
+          align="start"
+          customTrigger={
+            <button
+              type="button"
+              aria-label="Switch display"
+              className="flex w-full items-center gap-[var(--spacing-system-xs)] border-t border-ods-border p-[var(--spacing-system-sf)] text-left text-ods-text-primary outline-none transition-colors hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus"
+            >
+              <MonitorIcon className="h-6 w-6 shrink-0" />
+              <span className="min-w-0 flex-1 truncate text-h4">{currentDisplayLabel}</span>
+              <Chevron02DownIcon className="h-6 w-6 shrink-0" />
+            </button>
+          }
+        />
+      )}
     </div>
   );
 
@@ -189,17 +210,19 @@ export function RemoteDesktopViewSkeleton({ onBack }: Pick<RemoteDesktopViewProp
   return (
     <PageLayout className={PAGE_CLASS} backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}>
       <div className={CONTROLS_BAR_CLASS}>
-        <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
-          <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
-          <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-            <Skeleton className="h-5 w-48" />
-            <Skeleton className="h-4 w-36" />
+        <div className={CONTROLS_ROW_CLASS}>
+          <div className="flex min-w-0 items-center gap-[var(--spacing-system-mf)]">
+            <Skeleton className="h-9 w-9 flex-shrink-0 rounded-md" />
+            <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-4 w-36" />
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
+            <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
           </div>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]">
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
-          <Skeleton className="h-11 w-11 rounded-lg md:h-12 md:w-12" />
         </div>
       </div>