@flamingo-stack/openframe-frontend-core 0.0.849 → 0.0.851

package/src/components/features/policy-configuration-panel.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { ChevronDown, Shield } from 'lucide-react';
 import type { FC } from 'react';
 import { useState } from 'react';
 import type {
@@ -11,17 +10,21 @@ import type {
 } from '../../types/permissions';
 import { cn } from '../../utils/cn';
 import { useCollapsible } from '../chat/hooks/use-collapsible';
+import { Chevron02DownIcon, ShieldIcon } from '../icons-v2-generated';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { ToolIcon } from '../tool-icon';
 import { Button } from '../ui/button';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
 import { loadingItemProps, useLoadingScope } from '../ui/loading-scope';
-import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from './approval-level';
+import { APPROVAL_LEVEL_META, APPROVAL_LEVELS, ApprovalLevelView } from './approval-level';
 
-const approvalLevelOptions = APPROVAL_LEVELS.map(value => ({ value, label: APPROVAL_LEVEL_META[value].label }));
-
-const POLICY_LEVEL_WIDTH = 'w-[180px]';
-const CATEGORY_LEVEL_WIDTH = 'w-[256px]';
+const CATEGORY_LEVEL_WIDTH = 'w-[296px]';
 
 /** How many collapsed category rows the panel draws while loading when the host passes no categories. */
 export const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
@@ -40,9 +43,22 @@ const CATEGORY_LEVEL_COLUMN_CLASS = cn(
   CATEGORY_LEVEL_WIDTH,
 );
 /** The expand / collapse control's chevron. */
-const CHEVRON_CLASS = 'h-6 w-6 text-ods-text-primary transition-transform duration-300';
+const CHEVRON_CLASS = '!h-6 !w-6 text-ods-text-primary transition-transform duration-300';
+
+/** A level as the dropdown writes it: its icon in its colour (the trigger's chevron size, 24px), then its name. */
+const LevelOption: FC<{ level: ApprovalLevel }> = ({ level }) => {
+  const { label, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+  return (
+    <span className="inline-flex min-w-0 items-center gap-[var(--spacing-system-xsf)]">
+      <Icon size={24} className={cn('shrink-0', toneClassName)} aria-hidden />
+      <span className="truncate">{label}</span>
+    </span>
+  );
+};
 
-const getApprovalLevelLabel = (level: ApprovalLevel): string => APPROVAL_LEVEL_META[level]?.label ?? level;
+/** A dropdown item at its trigger's scale: the trigger's type and icon size, a field's height (48px). The menu is
+ *  portalled to the window, so it steps with the window (`md:`), not the content. */
+const LEVEL_MENU_ITEM_CLASS = 'p-[var(--spacing-system-sf)] text-h4 [&_svg]:size-4 md:[&_svg]:size-6';
 
 const ApprovalLevelDropdown: FC<{
   value: ApprovalLevel | undefined;
@@ -58,27 +74,31 @@ const ApprovalLevelDropdown: FC<{
       <Button
         variant="outline"
         disabled={disabled}
-        rightIcon={<ChevronDown className="h-6 w-6 text-ods-text-secondary" />}
+        rightIcon={<Chevron02DownIcon className="!h-6 !w-6 text-ods-text-secondary" />}
         className={cn(
-          'flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover',
+          'flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !p-[var(--spacing-system-sf)] transition-colors !text-h4 hover:bg-ods-bg-hover',
           value ? 'text-ods-text-primary' : 'text-ods-text-secondary',
           triggerClassName,
         )}
       >
-        {value ? getApprovalLevelLabel(value) : 'Set Global Permission'}
+        {value ? <LevelOption level={value} /> : 'Set Global Permission'}
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" className={contentClassName}>
-      {allowClear && (
-        <DropdownMenuItem onClick={() => onChange(undefined)} className="text-h6">
-          Clear Global Permission
-        </DropdownMenuItem>
-      )}
-      {approvalLevelOptions.map(option => (
-        <DropdownMenuItem key={option.value} onClick={() => onChange(option.value)} className="text-h6">
-          {option.label}
+      {APPROVAL_LEVELS.map(level => (
+        <DropdownMenuItem key={level} onClick={() => onChange(level)} className={LEVEL_MENU_ITEM_CLASS}>
+          <LevelOption level={level} />
         </DropdownMenuItem>
       ))}
+      {/* The way back out comes last, apart from the levels. */}
+      {allowClear && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => onChange(undefined)} className={LEVEL_MENU_ITEM_CLASS}>
+            Clear Global Permission
+          </DropdownMenuItem>
+        </>
+      )}
     </DropdownMenuContent>
   </DropdownMenu>
 );
@@ -89,56 +109,49 @@ const PolicyRow: FC<{
   editMode: boolean;
   onPermissionChange: (categoryId: string, policyId: string, level: ApprovalLevel) => void;
 }> = ({ policy, categoryId, editMode, onPermissionChange }) => {
-  const handleChange = (level: ApprovalLevel | undefined) => {
-    if (level) onPermissionChange(categoryId, policy.id, level);
-  };
+  const nameId = `policy-${categoryId}-${policy.id}`;
+  // The level as every guardrail surface draws it: its icon in its colour, then its name (Figma 1608-49525), or, while
+  // editing, its name in its colour beside the four levels' icons to pick from (Figma 4365-22663).
+  const level = policy.approvalLevel ? (
+    <ApprovalLevelView
+      value={policy.approvalLevel}
+      editable={editMode}
+      onChange={next => onPermissionChange(categoryId, policy.id, next)}
+      aria-labelledby={nameId}
+    />
+  ) : null;
 
   return (
     <div className="flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center">
-      {/* Tool Icon */}
-      <div className={ICON_TILE_CLASS}>
+      {/* Tool Icon: grey, as the category's (Figma 1608-49526). Editing on a phone it moves beside the name, and the
+          strip gets the row's width (Figma 4365-22455). */}
+      <div className={cn(ICON_TILE_CLASS, 'text-ods-text-secondary', editMode && 'hidden content-md:flex')}>
         <ToolIcon toolType={policy.toolName} size={16} />
       </div>
 
-      {/* Policy Info — on mobile the approval level stacks below the pattern */}
+      {/* Policy Info — on mobile the approval level stacks below the name */}
       <div className="flex min-w-0 flex-1 flex-col">
-        <p className="truncate text-ods-text-primary text-h4" title={policy.name}>
-          {policy.name}
-        </p>
-        <p className="break-all text-ods-text-secondary text-h6">{policy.commandPattern}</p>
-        {editMode ? (
-          <div className="mt-[var(--spacing-system-xsf)] content-md:hidden">
-            <ApprovalLevelDropdown
-              value={policy.approvalLevel}
-              onChange={handleChange}
-              triggerClassName="w-full"
-              contentClassName={POLICY_LEVEL_WIDTH}
-            />
-          </div>
-        ) : policy.approvalLevel ? (
-          <span className="text-ods-text-primary text-h4 content-md:hidden">
-            {getApprovalLevelLabel(policy.approvalLevel)}
-          </span>
-        ) : null}
-      </div>
-
-      {/* Approval Level column (desktop only) */}
-      <div className="hidden shrink-0 content-md:block">
-        {editMode ? (
-          <ApprovalLevelDropdown
-            value={policy.approvalLevel}
-            onChange={handleChange}
-            triggerClassName={POLICY_LEVEL_WIDTH}
-            contentClassName={POLICY_LEVEL_WIDTH}
-          />
-        ) : (
-          <div className={cn('px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)]', POLICY_LEVEL_WIDTH)}>
-            {policy.approvalLevel && (
-              <span className="text-ods-text-primary text-h4">{getApprovalLevelLabel(policy.approvalLevel)}</span>
-            )}
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-sf)]">
+          <div className="flex min-w-0 flex-1 flex-col">
+            {/* The rule's name only: its command pattern is a regex, not something to read. */}
+            <p id={nameId} className="truncate text-ods-text-primary text-h4" title={policy.name}>
+              {policy.name}
+            </p>
           </div>
+          {editMode && (
+            <span className="flex shrink-0 text-ods-text-secondary content-md:hidden">
+              <ToolIcon toolType={policy.toolName} size={16} />
+            </span>
+          )}
+        </div>
+        {level && (
+          <div className={cn('flex content-md:hidden', editMode && 'mt-[var(--spacing-system-sf)]')}>{level}</div>
         )}
       </div>
+
+      {/* Approval Level column (desktop only). A flex box, not a block: a block's line box around the inline level
+          stood taller than the level and set it above the row's centre. */}
+      {level && <div className="hidden shrink-0 items-center content-md:flex">{level}</div>}
     </div>
   );
 };
@@ -186,15 +199,21 @@ const CategorySection: FC<{
       {/* Category Header */}
       <div
         {...loadingItemProps(props)}
-        className={cn(CATEGORY_HEADER_CLASS, !loading && 'cursor-pointer transition-colors hover:bg-ods-bg-hover')}
+        // The whole row toggles, so the whole row lights on hover; not while the pointer is on the bulk dropdown, which
+        // is its own target. Open, a rule under the row (on the frame below) ends the lit row at an edge.
+        className={cn(
+          CATEGORY_HEADER_CLASS,
+          !loading &&
+            'cursor-pointer transition-colors hover:bg-ods-bg-hover [&:has([data-bulk-level]:hover)]:bg-ods-card',
+        )}
         onClick={loading ? undefined : () => onToggle(category.id)}
       >
         {/* Category Icon (static: the host's, else the default shield) */}
         <div className={ICON_TILE_CLASS}>
-          <div className="text-ods-text-secondary">{category.icon ?? <Shield className="h-4 w-4" />}</div>
+          <div className="text-ods-text-secondary">{category.icon ?? <ShieldIcon size={16} />}</div>
         </div>
 
-        {/* Category Info — on mobile the bulk dropdown stacks below the count */}
+        {/* Category Info. A phone has no bulk dropdown (Figma 4365-22446): its rules are set one by one. */}
         <div className={CATEGORY_TEXT_CLASS}>
           {category.name ? (
             <p className="truncate text-ods-text-primary text-h4" title={category.name}>
@@ -206,25 +225,15 @@ const CategorySection: FC<{
           {loading ? (
             <TextLineSkeleton type="h6" className="w-24" />
           ) : (
-            <p className="text-ods-text-secondary text-h6">{category.policies.length} Configurations</p>
-          )}
-          {editMode && (
-            <div className="mt-[var(--spacing-system-xsf)] content-md:hidden" onClick={e => e.stopPropagation()}>
-              <ApprovalLevelDropdown
-                value={bulkLevel}
-                onChange={handleBulkChange}
-                allowClear
-                triggerClassName="w-full"
-                contentClassName={CATEGORY_LEVEL_WIDTH}
-                disabled={loading}
-              />
-            </div>
+            <p className="text-ods-text-secondary text-h6">
+              {category.policies.length} {category.policies.length === 1 ? 'Configuration' : 'Configurations'}
+            </p>
           )}
         </div>
 
         {/* Global Permission column (desktop only) */}
         {editMode ? (
-          <div className="hidden shrink-0 content-md:block" onClick={e => e.stopPropagation()}>
+          <div data-bulk-level className="hidden shrink-0 content-md:block" onClick={e => e.stopPropagation()}>
             <ApprovalLevelDropdown
               value={bulkLevel}
               onChange={handleBulkChange}
@@ -247,8 +256,13 @@ const CategorySection: FC<{
             e.stopPropagation();
             onToggle(category.id);
           }}
-          leftIcon={<ChevronDown className={cn(CHEVRON_CLASS, isExpanded && 'rotate-180')} />}
-          className="h-auto w-auto shrink-0 rounded-md"
+          leftIcon={<Chevron02DownIcon className={cn(CHEVRON_CLASS, isExpanded && 'rotate-180')} />}
+          // 40px on a phone (Figma 4365-22452), 48 from content-md.
+          className={cn(
+            'h-auto w-auto shrink-0 rounded-md !p-[var(--spacing-system-xsf)] content-md:!p-[var(--spacing-system-sf)]',
+            // The row is the hover; the chevron adds none of its own.
+            'hover:bg-transparent active:bg-transparent',
+          )}
           aria-label={isExpanded ? 'Collapse' : 'Expand'}
         />
       </div>
@@ -264,7 +278,10 @@ const CategorySection: FC<{
         }}
         className={isExpanded ? 'opacity-100' : 'opacity-0'}
       >
-        <div ref={innerRef} className="px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0">
+        <div
+          ref={innerRef}
+          className="border-t border-ods-border px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-[var(--spacing-system-mf)]"
+        >
           <div className="overflow-hidden rounded-md border border-ods-border">
             {/* No rows while the policies are read: nothing read is drawn, even collapsed. */}
             {(loading ? [] : category.policies).map(policy => (
@@ -290,9 +307,9 @@ const CategorySection: FC<{
  * background data refreshes never collapse the user's view. Bulk selections
  * reset when `editMode` changes.
  *
- * Responsive: below `md` the approval level / dropdowns stack inside the text
- * column (per the ODS mobile design); at `md+` they render as fixed-width
- * right-hand columns.
+ * Responsive (content width): below `content-md` a rule's level stacks under its
+ * pattern, and a category has no bulk dropdown (Figma 4365-22405); from
+ * `content-md` both are right-hand columns.
  */
 /** One shared empty map, so a reset that changes nothing changes no identity. */
 const NO_BULK_LEVELS: Record<string, ApprovalLevel | undefined> = {};

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

@@ -40,6 +40,7 @@ export { type PackageSearchSlotProps, SoftwareRowFields, type SoftwareRowFieldsP
 export {
   DEFAULT_SOFTWARE_UPDATE_POLICY,
   DEFAULT_SOFTWARE_UPDATE_SETTINGS,
+  defaultSoftwareUpdateSettings,
   SOFTWARE_UPDATE_COUNTDOWN_OPTIONS,
   SOFTWARE_UPDATE_DEADLINE_OPTIONS,
   type SoftwareUpdateMode,

package/src/components/features/software/software-action-copy.ts

@@ -19,6 +19,21 @@ export interface SoftwareActionCopy {
   logsHeading: string;
 }
 
+/**
+ * The run modes say when a device actually gets the run, not only when it is sent. Both forms submit a software bundle
+ * (`submitSoftwareBundle`), and the backend delivers it per device:
+ * - Now: each device gets an online-dispatch sentinel (`SoftwareBundleService.armOnlineDispatch`), so an online device
+ *   starts at once and an offline one when it comes online.
+ * - Scheduled: the schedule is created with `offlineBehavior` RETRY_ON_RECONNECT and the reconnect window
+ *   `openframe.rmm.software.bundle.schedule.reconnect-window-seconds` (604800 s, 7 days, in saas-tenant
+ *   `configs/base/openframe-saas-api.yml`): a device offline at the start time gets the run when it reconnects within
+ *   that window. Keep "within 7 days" in step with that key.
+ */
+const nowDescription = (noun: string) =>
+  `The ${noun} starts now on online devices, and on the others when they come online.`;
+const scheduleDescription = (noun: string) =>
+  `The ${noun} runs at the scheduled time. Devices offline then get it when they come back online, within 7 days.`;
+
 /** Everything the install and update flows word differently, on every page that shows one. */
 export const SOFTWARE_ACTION_COPY: Record<SoftwareActionKind, SoftwareActionCopy> = {
   INSTALL: {
@@ -27,12 +42,8 @@ export const SOFTWARE_ACTION_COPY: Record<SoftwareActionKind, SoftwareActionCopy
     runLabel: 'Run Installation',
     scheduleLabel: 'Schedule Install',
     modes: [
-      { value: 'now', label: 'Install Now', description: 'The install starts immediately.' },
-      {
-        value: 'schedule',
-        label: 'Schedule Install',
-        description: 'The install runs automatically at the scheduled time.',
-      },
+      { value: 'now', label: 'Install Now', description: nowDescription('install') },
+      { value: 'schedule', label: 'Schedule Install', description: scheduleDescription('install') },
     ],
     started: 'Installation started',
     scheduled: 'Installation scheduled',
@@ -46,12 +57,8 @@ export const SOFTWARE_ACTION_COPY: Record<SoftwareActionKind, SoftwareActionCopy
     runLabel: 'Run Update',
     scheduleLabel: 'Schedule Update',
     modes: [
-      { value: 'now', label: 'Update Now', description: 'The update starts immediately.' },
-      {
-        value: 'schedule',
-        label: 'Schedule Update',
-        description: 'The update runs automatically at the scheduled time.',
-      },
+      { value: 'now', label: 'Update Now', description: nowDescription('update') },
+      { value: 'schedule', label: 'Schedule Update', description: scheduleDescription('update') },
     ],
     started: 'Update started',
     scheduled: 'Update scheduled',

package/src/components/features/software/software-action-form.tsx

@@ -10,7 +10,7 @@ import { SOFTWARE_ACTION_COPY, type SoftwareActionKind } from './software-action
 import { newSoftwareRow, type SoftwareRow } from './software-row';
 import { type PackageSearchSlotProps, SoftwareRowFields } from './software-row-fields';
 import {
-  DEFAULT_SOFTWARE_UPDATE_SETTINGS,
+  defaultSoftwareUpdateSettings,
   SoftwareUpdateSettingsFields,
   type SoftwareUpdateSettingsValues,
 } from './update-settings-fields';
@@ -74,6 +74,12 @@ export interface SoftwareActionFormProps<TRef extends string = string> {
    * settings yet never shows choices that go nowhere; the host that submits `updateSettings` passes true.
    */
   showUpdateSettings?: boolean;
+  /**
+   * "Update Settings" offer Wait & notify and the countdowns, which need the devices to notify the user. Default false:
+   * Wait (with an optional deadline that closes the app without warning) or Force Update, opening on Force Update, and
+   * no countdown.
+   */
+  updateUserNotifications?: boolean;
   /** The "Device Selection" heading over the picker. Default true; a host that titles the picker itself passes false. */
   showDeviceHeading?: boolean;
   className?: string;
@@ -104,6 +110,7 @@ export function SoftwareActionForm<TRef extends string = string>({
   addRows = true,
   runModeLayout = 'stacked',
   showUpdateSettings = false,
+  updateUserNotifications = false,
   showDeviceHeading = true,
   className = 'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
 }: SoftwareActionFormProps<TRef>) {
@@ -115,7 +122,7 @@ export function SoftwareActionForm<TRef extends string = string>({
   const [time, setTime] = useState(initialValues.time ?? '');
   const [timeReference, setTimeReference] = useState<TRef>(initialValues.timeReference);
   const [updateSettings, setUpdateSettings] = useState<SoftwareUpdateSettingsValues>(
-    () => initialValues.updateSettings ?? DEFAULT_SOFTWARE_UPDATE_SETTINGS,
+    () => initialValues.updateSettings ?? defaultSoftwareUpdateSettings(updateUserNotifications),
   );
   const withUpdateSettings = action === 'UPDATE' && showUpdateSettings;
 
@@ -215,7 +222,13 @@ export function SoftwareActionForm<TRef extends string = string>({
         </>
       )}
 
-      {withUpdateSettings && <SoftwareUpdateSettingsFields value={updateSettings} onChange={setUpdateSettings} />}
+      {withUpdateSettings && (
+        <SoftwareUpdateSettingsFields
+          value={updateSettings}
+          onChange={setUpdateSettings}
+          userNotifications={updateUserNotifications}
+        />
+      )}
 
       {showDeviceHeading && (
         <h2 className="pt-[var(--spacing-system-l)] text-ods-text-primary text-h2">Device Selection</h2>

package/src/components/features/software/update-settings-fields.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { InfoCircleIcon } from '../../icons-v2-generated';
 import {
-  Alert,
   CheckboxBlock,
   Label,
   RadioGroupBlock,
@@ -71,24 +69,95 @@ export const DEFAULT_SOFTWARE_UPDATE_SETTINGS: SoftwareUpdateSettingsValues = {
   autoUpdatePolicy: DEFAULT_SOFTWARE_UPDATE_POLICY,
 };
 
-const MODE_OPTIONS: RadioGroupBlockOption[] = [
-  {
+/** Force Update, with a 7-day deadline ready for when Wait is picked: what the form opens with without notifications. */
+const FORCE_UPDATE_POLICY: SoftwareUpdatePolicy = {
+  ...DEFAULT_SOFTWARE_UPDATE_POLICY,
+  mode: 'FORCE',
+  deadlineEnabled: false,
+};
+
+/**
+ * What the form opens with. With user notifications, the server's own defaults. Without them, Force Update: an app is
+ * never closed unannounced a week later, and nobody is promised a prompt that cannot be shown.
+ */
+export function defaultSoftwareUpdateSettings(userNotifications: boolean): SoftwareUpdateSettingsValues {
+  if (userNotifications) return DEFAULT_SOFTWARE_UPDATE_SETTINGS;
+  return { ...DEFAULT_SOFTWARE_UPDATE_SETTINGS, policy: FORCE_UPDATE_POLICY, autoUpdatePolicy: FORCE_UPDATE_POLICY };
+}
+
+/**
+ * The two modes and their deadline, worded by what the device does. With user notifications the user is asked and
+ * warned. Without them the agent shows nothing on the device (no prompt, no countdown on screen; there is no end-user
+ * UI anywhere yet), so the copy says only what happens:
+ * - Wait (WAIT, no deadline): the agent reports Waiting and installs once the app is closed.
+ * - A deadline (WAIT + `deadlineSeconds`): counted from the first time the agent finds the app running; at the deadline
+ *   the backend sends the update again as FORCE (`armDeadline` / `driveDeadlineForce` in openframe-client-core), and
+ *   withdraws that if the update finished first.
+ * - Force (FORCE): the agent waits `countdownSeconds` (clamped to 60–1800 s), asks the app to close, stops it after a
+ *   10 s grace and installs (`run.rs` / `close.rs` in openframe-client). The wait is silent, so it is not offered as a
+ *   control; the copy states it, since the app is not closed at once.
+ */
+interface ModeCopy {
+  wait: RadioGroupBlockOption;
+  force: RadioGroupBlockOption;
+  deadline: { label: string; description: string };
+}
+
+/** "5 minutes": the silent wait before a forced close, worded as the countdown options word it. */
+function closeDelay(countdownSeconds: number): string {
+  const option = SOFTWARE_UPDATE_COUNTDOWN_OPTIONS.find(candidate => candidate.seconds === countdownSeconds);
+  if (option) return option.label;
+  const minutes = Math.max(1, Math.round(countdownSeconds / 60));
+  return minutes === 1 ? '1 minute' : `${minutes} minutes`;
+}
+
+const NOTIFIED_COPY: ModeCopy = {
+  wait: {
     value: 'WAIT',
     label: 'Wait & notify',
     description: 'The user gets Update now or Ask Later. If they close the app, it updates then.',
   },
-  {
+  force: {
     value: 'FORCE',
     label: 'Force Update',
     description: 'The user gets a short countdown, then the app closes and updates.',
   },
-];
+  deadline: {
+    label: 'Countdown after the deadline',
+    description: 'If the update still isn’t installed by the deadline, the user gets a countdown and then it installs.',
+  },
+};
+
+function silentCopy(countdownSeconds: number): ModeCopy {
+  const delay = closeDelay(countdownSeconds);
+  return {
+    wait: { value: 'WAIT', label: 'Wait', description: 'The update waits until the user closes the app.' },
+    force: {
+      value: 'FORCE',
+      label: 'Force Update',
+      description: `The app is closed without warning ${delay} later, then updated.`,
+    },
+    deadline: {
+      label: 'Close the app after a deadline',
+      description: `If the app is still open by the deadline, it is closed without warning ${delay} later, then updated.`,
+    },
+  };
+}
 
 const SAME_SETTINGS_DESCRIPTION: Record<SoftwareUpdateMode, string> = {
   WAIT: 'Auto-updates follow "If the app is running" above. Uncheck to set them separately.',
   FORCE: 'Later releases will also be force-updated.',
 };
 
+/**
+ * "Keep it auto-updated", as the backend runs it (`PackageAutoUpdatePolicyService.turnOn`, `PackageAutoUpdateTrigger`):
+ * a run with it on enables a policy per device for the package, and the trigger orders each new catalog version (Brew
+ * and winget catalogs) on those devices. A run with it off leaves an earlier policy as it is: only Turn Off Auto-Update
+ * (`turnOffSoftwareAutoUpdate`) or the package leaving the device turns one off, so "off" does not mean "stop".
+ */
+const AUTO_UPDATE_DESCRIPTION =
+  'After this update, OpenFrame installs each new version from Winget or Brew on the selected devices. Leaving it off does not turn off auto-update that is already on there.';
+
 const groupLabelClass = 'text-h5 text-ods-text-secondary';
 
 function SecondsSelect({
@@ -126,17 +195,21 @@ function UpdatePolicyFields({
   name,
   label,
   policy,
+  userNotifications,
   onChange,
 }: {
   /** The radio group's name: two policies on one page must not share it. */
   name: string;
   label: string;
   policy: SoftwareUpdatePolicy;
+  /** Off, the choices say what the device does with nobody told, and there is no countdown to set. */
+  userNotifications: boolean;
   onChange: (policy: SoftwareUpdatePolicy) => void;
 }) {
+  const copy = userNotifications ? NOTIFIED_COPY : silentCopy(policy.countdownSeconds);
   const waits = policy.mode === 'WAIT';
   const deadline = waits && policy.deadlineEnabled;
-  const countdown = (
+  const countdown = userNotifications && (
     <SecondsSelect
       label="Countdown"
       value={policy.countdownSeconds}
@@ -154,7 +227,7 @@ function UpdatePolicyFields({
           variant="grouped"
           value={policy.mode}
           onValueChange={mode => onChange({ ...policy, mode: mode as SoftwareUpdateMode })}
-          options={MODE_OPTIONS}
+          options={[copy.wait, copy.force]}
           itemClassName="py-[var(--spacing-system-sf)]"
         />
       </div>
@@ -164,8 +237,8 @@ function UpdatePolicyFields({
             id={`${name}-deadline`}
             checked={policy.deadlineEnabled}
             onCheckedChange={deadlineEnabled => onChange({ ...policy, deadlineEnabled })}
-            label="Countdown after the deadline"
-            description="If the update still isn’t installed by the deadline, the user gets a countdown and then it installs."
+            label={copy.deadline.label}
+            description={copy.deadline.description}
           />
           {deadline && (
             <div className="grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-3 content-md:items-start">
@@ -180,7 +253,9 @@ function UpdatePolicyFields({
           )}
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-3">{countdown}</div>
+        userNotifications && (
+          <div className="grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-3">{countdown}</div>
+        )
       )}
     </div>
   );
@@ -189,6 +264,12 @@ function UpdatePolicyFields({
 export interface SoftwareUpdateSettingsFieldsProps {
   value: SoftwareUpdateSettingsValues;
   onChange: (value: SoftwareUpdateSettingsValues) => void;
+  /**
+   * The devices can notify the user: Wait & notify, its countdown after the deadline and the countdowns. Default false,
+   * as today, when the client has no notifications: Wait (until the user closes the app, or a deadline closes it without
+   * warning) or Force Update, and no countdown.
+   */
+  userNotifications?: boolean;
 }
 
 /**
@@ -196,7 +277,11 @@ export interface SoftwareUpdateSettingsFieldsProps {
  * rules 1034:8173): what happens on a device where the app is running, and
  * whether later releases are installed the same way.
  */
-export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdateSettingsFieldsProps) {
+export function SoftwareUpdateSettingsFields({
+  value,
+  onChange,
+  userNotifications = false,
+}: SoftwareUpdateSettingsFieldsProps) {
   return (
     <section aria-labelledby="software-update-settings" className="flex flex-col gap-[var(--spacing-system-l)]">
       <h2 id="software-update-settings" className="pt-[var(--spacing-system-l)] text-ods-text-primary text-h2">
@@ -207,6 +292,7 @@ export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdate
         name="updatePolicy"
         label="If the app is running"
         policy={value.policy}
+        userNotifications={userNotifications}
         onChange={policy => onChange({ ...value, policy })}
       />
 
@@ -218,7 +304,7 @@ export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdate
             checked={value.autoUpdate}
             onCheckedChange={autoUpdate => onChange({ ...value, autoUpdate })}
             label="Keep it auto-updated"
-            description="After this update, OpenFrame installs each new version from Winget or Brew on the selected devices. When off, only this update runs."
+            description={AUTO_UPDATE_DESCRIPTION}
           />
           {value.autoUpdate && (
             <>
@@ -235,6 +321,7 @@ export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdate
                     name="autoUpdatePolicy"
                     label="For auto-updates"
                     policy={value.autoUpdatePolicy}
+                    userNotifications={userNotifications}
                     onChange={autoUpdatePolicy => onChange({ ...value, autoUpdatePolicy })}
                   />
                 </div>
@@ -244,25 +331,10 @@ export function SoftwareUpdateSettingsFields({ value, onChange }: SoftwareUpdate
         </div>
       </div>
 
-      {/* Core Alert on the card surface, as a note: it comes with "Keep it auto-updated" and goes with it, since the
-          reinstall is what lets OpenFrame keep a hand-installed app updated, and a one-off update promises no more. The
-          icon sits in a span so Alert's `[&>svg]` positioning does not apply. */}
-      {value.autoUpdate && (
-        <Alert
-          role="note"
-          className="flex items-center gap-[var(--spacing-system-m)] rounded-[6px] border-ods-border bg-ods-card p-[var(--spacing-system-m)]"
-        >
-          <span className="shrink-0 text-ods-text-secondary">
-            <InfoCircleIcon size={24} color="currentColor" />
-          </span>
-          <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
-            <p className="text-ods-text-primary text-h3">Apps installed by hand get reinstalled</p>
-            <p className="text-ods-text-secondary text-h6">
-              On the first update, OpenFrame reinstalls them with Winget or Brew so it can keep them updated.
-            </p>
-          </div>
-        </Alert>
-      )}
+      {/* No note that apps installed by hand get reinstalled on the first update: the agent does not do that. A copy no
+          package manager installed is left alone (brew probes it as not installed, winget as "not installed from a
+          winget source"), so it is neither updated nor reinstalled. Reinstalling it with a package manager is Adopt
+          (`adoptSoftware`), which the backend does not implement yet. */}
     </section>
   );
 }