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

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>
   );
 }

package/src/components/ui/page-actions.tsx

@@ -527,9 +527,26 @@ function CompactPrimaryActions({ actions, loading: loadingProp }: { actions: Pag
   );
 }
 
+const subscribeNothing = () => () => {};
+
+/**
+ * False on the server and through hydration, true after: what lets a render use a value only the client measures and
+ * still hydrate into the server's markup.
+ */
+function useHydrated(): boolean {
+  return React.useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false,
+  );
+}
+
 function MobileBottomActions({ actions, loading: loadingProp }: { actions: PageActionButton[]; loading?: boolean }) {
   const loading = useLoadingScope() || loadingProp;
-  // Over the composer dock where the layout has one.
+  // Over the composer dock where the layout has one. `AppLayout` measures the dock after it mounts, and a page hydrates
+  // after the layout, so the height is often known by the bar's first client render: drawn then, it would not match the
+  // server's markup (no offset). The bar takes it from the render after hydration instead.
+  const hydrated = useHydrated();
   const dockHeight = useComposerDockHeight();
   // Its height, for the chrome that stays clear of it (`useMobileActionBarHeight`).
   const barRef = React.useRef<HTMLDivElement>(null);
@@ -543,7 +560,7 @@ function MobileBottomActions({ actions, loading: loadingProp }: { actions: PageA
     <div
       ref={barRef}
       data-testid="mobile-action-bar"
-      style={dockHeight > 0 ? { bottom: dockHeight } : undefined}
+      style={hydrated && dockHeight > 0 ? { bottom: dockHeight } : undefined}
       className={cn(
         'fixed bottom-0 left-0 right-0 z-50 md:hidden',
         'border-t border-ods-border bg-ods-card',