dsh-offwork 1.1.2 → 1.2.2

package/client.source.js

@@ -83,7 +83,7 @@ window.__ModuleLoader__.load({
         error: '操作失败，请重试。',
         saved: '设置已保存',
         days: '日一二三四五六',
-        privacy: '配置保存在 Harness 所在机器；读写结果进入所选会话记录。',
+        privacy: '配置保存在 Harness 所在机器；界面直接保存，不写入会话。代理访问默认关闭。',
         drag: '按住可拖动；方向键微调，Home 复位',
         setup: '先设好你的作息',
         setupHint: '示例数值不是你的收入，保存后才开始计时。',
@@ -240,7 +240,8 @@ window.__ModuleLoader__.load({
         error: 'Operation failed. Please retry.',
         saved: 'Settings saved',
         days: 'SMTWTFS',
-        privacy: 'Settings are saved on the Harness host; results enter the selected session log.',
+        privacy:
+          'Settings stay on the Harness host. UI saves directly without conversation logs; agent access is off by default.',
         drag: 'Drag to move; arrow keys to adjust; Home resets',
         setup: 'Set up your schedule',
         setupHint: 'These are example values, not your income. Save to start.',
@@ -330,7 +331,7 @@ window.__ModuleLoader__.load({
     };
     const STYLE =
       `
-.owc-v2{--owc-accent:color-mix(in srgb,var(--dsw-alias-brand-primary) 65%,#2563eb);pointer-events:auto;position:fixed;top:96px;right:24px;z-index:40;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px;color:var(--dsw-alias-label-primary);font:13px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none}
+.owc-v2{--owc-accent:color-mix(in srgb,var(--dsw-alias-brand-primary) 65%,#2563eb);pointer-events:auto;position:fixed;top:96px;right:24px;z-index:40;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px;color:var(--dsw-alias-label-primary);font:var(--owc-font-size,13px)/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif;cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none}
 .owc-v2:active{cursor:grabbing}
 .owc-v2.owc-compact{touch-action:none;border-radius:18px}
 .owc-v2.owc-compact.owc-quick{width:296px;touch-action:manipulation}
@@ -492,7 +493,19 @@ window.__ModuleLoader__.load({
         ['path', { d: 'M13.1 3v3.2H9.9' }],
       ],
     };
-    const LOCAL_SCREENS = [null, 'appearance', 'smoking', 'water-countdown', 'water', 'home'];
+    const LOCAL_SCREENS = [
+      null,
+      'appearance',
+      'smoking',
+      'water-countdown',
+      'water',
+      'home',
+      'income',
+      'wrap',
+      'preferences',
+      'data',
+      'reminders',
+    ];
     const iconSvg = (name, size = 15) =>
       h(
         'svg',
@@ -658,6 +671,7 @@ window.__ModuleLoader__.load({
                 } catch {
                   /* Polling also synchronizes. */
                 }
+                return changedElsewhere ? null : next;
               } catch {
                 if (alive) setSmokingError('timerStorageError');
               } finally {
@@ -724,28 +738,83 @@ window.__ModuleLoader__.load({
           const state = settings ? safeCalculate(settings) : null;
           const preview = workingDraft ? safeCalculate(workingDraft) : null;
           const safeState = state && !state.error ? state : null;
+          const features = useCompanionFeatures(React, {
+            language: locale.active,
+            screen: ui.screen,
+            menuOpen: !!ui.menu,
+            navigate: (screen, event) => navigateScreen(screen, event),
+            enableCharacter: () => updateAppearance({ companion: true }),
+            configured: !!data?.configured,
+            shift: data?.configured ? safeState : null,
+            timezone: settings?.timezone,
+            smoking,
+            smokingReady: smokingReady && !smokingError,
+            water,
+            waterReady: waterReady && !waterError,
+            waterOwner: waterOwner.current,
+            smokingLabel: t('smokingCountdown'),
+            waterLabel: t('waterDue'),
+            wrapLabel: t('companionDone'),
+            editing: editing || waterEditing || ui.screen === 'wrap' || !!ui.pending,
+            sessionIds,
+            sessionTitles: Object.fromEntries(
+              sessionIds.map((id) => [id, sessions?.byId?.[id]?.title]),
+            ),
+            runningSessions: sessionIds.filter((id) => sessions?.byId?.[id]?.running === true),
+            view: savedView,
+            setView: (patch) => setPreference(patch),
+            openLegacy: (screen) => navigateScreen(screen),
+            reload,
+            refreshLegacy: () => {
+              waterRuntime.current?.tick();
+              smokingRuntime.current?.run({ type: 'retry' });
+            },
+            restartSmoking: () => smokingAction({ type: 'restart' }),
+            drink: () => waterAction({ type: 'manual-drink', actionId: crypto.randomUUID() }),
+            react: () => petMotion.current?.play('greet'),
+          });
+          const displayPreferences =
+            appearanceOnly && features.previewPreferences
+              ? features.previewPreferences
+              : features.state.preferences;
+          const featureStyle = {
+            ...(COMPANION_THEMES[displayPreferences.theme]
+              ? { '--owc-accent': COMPANION_THEMES[displayPreferences.theme] }
+              : {}),
+            '--owc-font-size': 13 * displayPreferences.cardScale + 'px',
+          };
           const petMode = ready && (appearanceOnly ? appearanceWasPet.current : view.companion);
-          const petClockStatus = !sessionId
-            ? 'petNeedsSession'
-            : error || state?.error
+          const petClockStatus =
+            error || state?.error
               ? 'petLoadFailed'
               : !data
                 ? 'loading'
                 : !data.configured
                   ? 'petNeedsSetup'
                   : safeState?.status || 'loading';
-          const stageModel = appearanceOnly ? savedView.petModel : view.petModel;
+          const stageModel = features.customImage
+            ? 'custom-image'
+            : appearanceOnly
+              ? savedView.petModel
+              : view.petModel;
           const petGeometry = petLayout(
             dragPosition ?? view.petPosition,
             viewport,
             appearanceOnly ? savedView.petSize : view.petSize,
             420,
             stageModel,
-            72,
+            (window.matchMedia?.('(pointer:coarse)').matches ? 144 : 108) +
+              (features.activeTimer ? 30 : 0),
             196,
           );
           const surfaceScreen = ui.screen || 'reminder';
-          const surfaceWidth = petSurfaceWidth(surfaceScreen, viewport);
+          const surfaceWidth = Math.max(
+            1,
+            Math.min(
+              petSurfaceWidth(surfaceScreen, viewport) * displayPreferences.cardScale,
+              viewport.width - 24,
+            ),
+          );
           const measureKey = [surfaceScreen, surfaceWidth, locale.active].join(':');
           const measured = cardMeasure.key === measureKey;
           const naturalHeight = measured ? cardMeasure.height : 320;
@@ -797,7 +866,7 @@ window.__ModuleLoader__.load({
           });
           const collapsed = !petMode && ui.screen === null && view.mini;
           const classicClock = classicClockPresentation({
-            hasSession: !!sessionId,
+            hasSession: true,
             loaded: !!data,
             configured: !!data?.configured,
             failed: !!error || !!state?.error,
@@ -831,9 +900,16 @@ window.__ModuleLoader__.load({
             classicSize,
           );
           const cardStyle = {
+            ...featureStyle,
             width: ui.screen
-              ? petSurfaceWidth(ui.screen, viewport)
-              : Math.min(collapsed ? 224 : 320, Math.max(1, viewport.width - 24)),
+              ? Math.min(
+                  petSurfaceWidth(ui.screen, viewport) * displayPreferences.cardScale,
+                  viewport.width - 24,
+                )
+              : Math.min(
+                  (collapsed ? 224 : 320) * displayPreferences.cardScale,
+                  Math.max(1, viewport.width - 24),
+                ),
             '--owc-alpha': String(view.opacity),
             '--owc-viewport-height': Math.max(1, viewport.height - 24) + 'px',
             left: classicPosition.x,
@@ -1102,6 +1178,13 @@ window.__ModuleLoader__.load({
               const outcome = await waterRuntime.current?.update(action);
               const result = outcome?.state;
               if (result) {
+                if (outcome.recorded)
+                  void features.record({
+                    id: 'water-record:' + result.revision,
+                    type: 'water',
+                    at: Date.now(),
+                    label: 'Water',
+                  });
                 setWaterConfirm(null);
                 setNow(Date.now());
                 if (action.type === 'preferences')
@@ -1166,12 +1249,11 @@ window.__ModuleLoader__.load({
           }
 
           React.useEffect(() => {
-            if (sessionId) reload();
-            else setError(t('noSession'));
+            reload();
             return () => {
               generation.current++;
             };
-          }, [sessionId]);
+          }, []);
 
           React.useEffect(() => {
             let timer;
@@ -1257,13 +1339,19 @@ window.__ModuleLoader__.load({
           );
 
           async function request(action, patch) {
-            if (!sessionId) throw new Error(t('noSession'));
-            const rpc = await ctx.remote.commands.execute(
-              sessionId,
-              '/offwork-clock ' + action + (patch ? ' ' + JSON.stringify(patch) : ''),
-              [],
-            );
-            return decodeCommand(rpc);
+            const response = await fetch(new URL('offwork-clock/settings', document.baseURI), {
+              method: action === 'get' ? 'GET' : 'POST',
+              credentials: 'same-origin',
+              cache: 'no-store',
+              headers: {
+                'X-Offwork-Client': '1',
+                ...(action === 'get' ? {} : { 'Content-Type': 'application/json' }),
+              },
+              ...(action === 'get' ? {} : { body: JSON.stringify({ action, settings: patch }) }),
+            });
+            const result = await response.json();
+            if (!response.ok || !result.ok) throw new Error(result.error || t('error'));
+            return result;
           }
 
           async function reload(explicit = false) {
@@ -1435,6 +1523,7 @@ window.__ModuleLoader__.load({
           function performNavigation(screen, root = false) {
             if (root) panelPlacement.current = null;
             if (screen !== ui.screen) {
+              features.discardDrafts();
               if (screen === 'water') {
                 waterPreferencesBase.current = { enabled: water.enabled, interval: water.interval };
                 setWaterInterval(String(water.interval));
@@ -1448,6 +1537,7 @@ window.__ModuleLoader__.load({
                 setError('');
               }
               if (screen === 'appearance') {
+                features.beginAppearance();
                 appearanceBase.current = appearanceValues(savedView);
                 appearanceWasPet.current = !!petMode;
                 setAppearanceDraft(appearanceValues(savedView));
@@ -1462,6 +1552,7 @@ window.__ModuleLoader__.load({
             setWaterConfirm(null);
           }
           function navigateScreen(screen, event) {
+            if (screen === 'water-countdown') screen = 'home';
             if (
               screen !== null &&
               !LOCAL_SCREENS.includes(screen) &&
@@ -1470,6 +1561,7 @@ window.__ModuleLoader__.load({
               return;
             if (
               ui.pending ||
+              features.busy ||
               waterBusy ||
               requestBusy.current ||
               waterPending.current ||
@@ -1485,6 +1577,7 @@ window.__ModuleLoader__.load({
             performNavigation(screen, root);
           }
           function draftChanged() {
+            if (features.dirty) return true;
             if (waterEditing && waterPreferencesBase.current)
               return (
                 waterEnabledDraft !== waterPreferencesBase.current.enabled ||
@@ -1498,7 +1591,8 @@ window.__ModuleLoader__.load({
               );
             return false;
           }
-          function applyAppearance() {
+          async function applyAppearance() {
+            if (!(await features.applyAppearance())) return false;
             panelPlacement.current = null;
             if (appearanceDraft)
               setPreference(changedSettings(appearanceBase.current, appearanceDraft));
@@ -1510,13 +1604,16 @@ window.__ModuleLoader__.load({
             const destination = ui.pending.screen;
             const result = waterEditing
               ? await saveWaterSettings({ preventDefault() {} })
-              : appearanceOnly
-                ? applyAppearance()
-                : await save({ preventDefault() {} });
+              : ui.screen === 'wrap'
+                ? await features.saveNotes(false)
+                : appearanceOnly
+                  ? await applyAppearance()
+                  : await save({ preventDefault() {} });
             if (result) performNavigation(destination, ui.pending.root);
             else dispatchUI({ type: 'stay' });
           }
           function updateAppearance(patch) {
+            if (patch.petModel) features.useBuiltin();
             setAppearanceDraft((current) => ({ ...current, ...patch }));
           }
           function openAppearance(event) {
@@ -1607,6 +1704,7 @@ window.__ModuleLoader__.load({
           const waterState = hydrationView(water, now);
           const waterClaim = water.claim;
           const waterPrompt =
+            !features.ready &&
             waterReady &&
             !waterError &&
             !editing &&
@@ -1835,7 +1933,7 @@ window.__ModuleLoader__.load({
               break: 'waterBreak',
               paused: 'waterPaused',
               finished: 'waterFinished',
-              due: waterPrompt ? 'waterDue' : 'waterOther',
+              due: 'waterDue',
             };
             if (waterState.phase === 'quiet')
               return t('waterQuiet') + ' · ' + formatDuration(waterState.quietRemaining / 1000);
@@ -1846,6 +1944,8 @@ window.__ModuleLoader__.load({
           const waterCountdownText = () => {
             if (waterError) return t('timerUnavailable');
             if (!waterReady) return t('timerLoading');
+            if (waterState.phase === 'due' && features.waterSnoozedUntil > now)
+              return formatDuration(Math.ceil((features.waterSnoozedUntil - now) / 1000));
             if (['countdown', 'due', 'break'].includes(waterState.phase))
               return formatDuration(Math.ceil(waterState.remaining / 1000));
             if (waterState.phase === 'quiet')
@@ -1864,25 +1964,34 @@ window.__ModuleLoader__.load({
               ? t(smokingError ? 'timerUnavailable' : 'timerLoading')
               : smokingState.phase === 'idle'
                 ? t('timerIdle')
-                : formatDuration(Math.ceil(smokingState.remaining / 1000));
+                : smokingState.phase === 'due' && features.smokingSnoozedUntil > now
+                  ? formatDuration(Math.ceil((features.smokingSnoozedUntil - now) / 1000))
+                  : formatDuration(Math.ceil(smokingState.remaining / 1000));
           const timerRow = (kind, value, due, title) => {
-            const phase = kind === 'water' ? waterState.phase : smokingState.phase;
+            let phase = kind === 'water' ? waterState.phase : smokingState.phase;
+            if (
+              phase === 'due' &&
+              (kind === 'water' ? features.waterSnoozedUntil : features.smokingSnoozedUntil) > now
+            )
+              phase = 'snoozed';
             const extra = {
+              snoozed: 'timerSnoozed',
               paused: 'timerPaused',
               break: 'timerBreak',
               quiet: 'timerQuiet',
               due: 'timerDue',
             }[phase];
             return h(
-              'div',
+              'button',
               {
+                type: 'button',
+                onClick: (event) => navigateScreen(kind === 'water' ? 'home' : 'smoking', event),
                 className: 'owc-pet-timer-row',
                 'data-countdown': kind,
-                'data-countdown-due': due,
+                'data-countdown-due': due && phase !== 'snoozed',
                 'data-countdown-phase': phase,
-                role: 'timer',
                 'aria-label': t(kind === 'water' ? 'waterCountdown' : 'smokingCountdown'),
-                title,
+                title: phase === 'snoozed' ? t('timerSnoozed') + ' · ' + value : title,
               },
               h(
                 'span',
@@ -1913,11 +2022,13 @@ window.__ModuleLoader__.load({
                 { className: 'owc-detail-kicker', 'data-water-status': true },
                 t(
                   ticking
-                    ? waterState.phase === 'quiet'
-                      ? 'waterQuiet'
-                      : waterState.phase === 'due'
-                        ? 'waterDue'
-                        : 'waterNext'
+                    ? features.waterSnoozedUntil > now
+                      ? 'timerSnoozed'
+                      : waterState.phase === 'quiet'
+                        ? 'waterQuiet'
+                        : waterState.phase === 'due'
+                          ? 'waterDue'
+                          : 'waterNext'
                     : 'waterTitle',
                 ),
               ),
@@ -1995,14 +2106,16 @@ window.__ModuleLoader__.load({
                 { role: 'status' },
                 smokingUnavailable
                   ? t(smokingError ? 'timerUnavailable' : 'timerLoading')
-                  : t(
-                      {
-                        idle: 'timerIdle',
-                        running: 'timerRunning',
-                        paused: 'timerPaused',
-                        due: 'timerDue',
-                      }[smokingState.phase],
-                    ),
+                  : smokingState.phase === 'due' && features.smokingSnoozedUntil > now
+                    ? t('timerSnoozed')
+                    : t(
+                        {
+                          idle: 'timerIdle',
+                          running: 'timerRunning',
+                          paused: 'timerPaused',
+                          due: 'timerDue',
+                        }[smokingState.phase],
+                      ),
               ),
               h(
                 'label',
@@ -2069,7 +2182,8 @@ window.__ModuleLoader__.load({
                     t('timerStop'),
                   ),
               ),
-              h('p', { className: 'owc-hint' }, t('detailNextInterval')),
+              smokingState.phase !== 'idle' &&
+                h('p', { className: 'owc-hint' }, t('detailNextInterval')),
               h(
                 'details',
                 { className: 'owc-detail-more' },
@@ -2525,11 +2639,12 @@ window.__ModuleLoader__.load({
                   h('span', { className: 'owc-classic-mini-label' }, t(caption)),
                   countdown
                     ? h(
-                        'strong',
+                        'button',
                         {
+                          type: 'button',
+                          onClick: (event) => navigateScreen('income', event),
                           className: 'owc-classic-mini-time',
-                          role: 'timer',
-                          'aria-label': t(classicClock.title),
+                          'aria-label': t('petCountdownCard'),
                         },
                         formatDuration(classicClock.seconds),
                       )
@@ -2662,7 +2777,7 @@ window.__ModuleLoader__.load({
               h(
                 'strong',
                 { className: 'owc-title', tabIndex: 0, title: t('drag'), onKeyDown: gripKeys },
-                t(ui.screen ? petPageTitle[ui.screen] || 'classicOverview' : 'classicOverview'),
+                t(ui.screen ? pageTitle(ui.screen) : 'classicOverview'),
               ),
               ['home', 'water-countdown'].includes(ui.screen) &&
                 h(
@@ -2691,6 +2806,18 @@ window.__ModuleLoader__.load({
                   },
                   iconSvg('water'),
                 ),
+              ui.screen &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'data-panel-more': true,
+                    'aria-label': t('quickMore'),
+                    onClick: openQuickMenu,
+                  },
+                  '⋯',
+                ),
               !ui.screen &&
                 h(
                   React.Fragment,
@@ -2792,7 +2919,7 @@ window.__ModuleLoader__.load({
                     'button',
                     {
                       type: 'button',
-                      disabled: hostBusy || !sessionId,
+                      disabled: hostBusy,
                       onClick: () => reload(true),
                     },
                     iconSvg('refresh', 12),
@@ -3128,7 +3255,6 @@ window.__ModuleLoader__.load({
                   h('span', { className: 'owc-dot' }),
                   t('loading'),
                 ),
-                !sessionId && h('p', { className: 'owc-hint' }, t('noSession')),
                 h(
                   'div',
                   { className: 'owc-row-actions' },
@@ -3138,7 +3264,7 @@ window.__ModuleLoader__.load({
                       type: 'button',
                       className: 'owc-text',
                       onClick: () => reload(true),
-                      disabled: hostBusy || !sessionId,
+                      disabled: hostBusy,
                     },
                     iconSvg('refresh', 12),
                     t('retry'),
@@ -3244,38 +3370,6 @@ window.__ModuleLoader__.load({
                   ),
                 ),
               ),
-              h(
-                'div',
-                { className: 'owc-row-actions' },
-                h(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'owc-text',
-                    onClick: () => reload(true),
-                    disabled: hostBusy,
-                  },
-                  iconSvg('refresh', 12),
-                  t('refresh'),
-                ),
-                petMode &&
-                  h(
-                    'button',
-                    { type: 'button', className: 'owc-text', onClick: openEditor },
-                    t('petWorkSettings'),
-                  ),
-                !petMode &&
-                  h(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'owc-text',
-                      onClick: () =>
-                        setPreference(petMode ? { petPosition: null } : { position: null }),
-                    },
-                    t('reset'),
-                  ),
-              ),
             );
           };
 
@@ -3295,66 +3389,85 @@ window.__ModuleLoader__.load({
                 }),
                 t('petMode'),
               ),
-              h(
-                'label',
-                { className: 'owc-check' },
-                h('input', {
-                  type: 'checkbox',
-                  checked: view.companionMotion,
-                  disabled: !view.companion,
-                  onChange: (event) => updateAppearance({ companionMotion: event.target.checked }),
-                }),
-                t('companionMotion'),
-              ),
               label(
                 t('petCharacter'),
                 h(
                   'select',
                   {
                     'aria-label': t('petCharacter'),
-                    value: view.petModel,
+                    value: features.previewImage ? 'custom-image' : view.petModel,
                     disabled: !view.companion,
-                    onChange: (event) => updateAppearance({ petModel: event.target.value }),
+                    onChange: (event) =>
+                      event.target.value === 'custom-image'
+                        ? features.selectCustom()
+                        : updateAppearance({ petModel: event.target.value }),
                   },
+                  features.hasCustom &&
+                    h(
+                      'option',
+                      { value: 'custom-image' },
+                      locale.active.startsWith('en') ? 'Custom image' : '自定义图片',
+                    ),
                   ...Object.values(PET_MODELS).map((model) =>
                     h('option', { key: model.id, value: model.id }, t(model.label)),
                   ),
                 ),
               ),
-              label(
-                t('petSize'),
-                h('input', {
-                  type: 'range',
-                  min: '80',
-                  max: '180',
-                  step: '4',
-                  value: view.petSize,
-                  'aria-label': t('petSize'),
-                  disabled: !view.companion,
-                  onChange: (event) => updateAppearance({ petSize: event.target.valueAsNumber }),
-                }),
-              ),
-              label(
-                t('opacity'),
+              h(
+                'details',
+                { className: 'owc-appearance-display' },
                 h(
-                  React.Fragment,
+                  'summary',
                   null,
+                  locale.active.startsWith('en') ? 'Display and motion' : '显示与动作',
+                ),
+                h(
+                  'label',
+                  { className: 'owc-check' },
                   h('input', {
-                    className: 'owc-range',
-                    type: 'range',
-                    min: '30',
-                    max: '100',
-                    step: '1',
-                    value: String(Math.round(view.opacity * 100)),
-                    disabled: busy,
-                    'aria-label': t('opacity'),
+                    type: 'checkbox',
+                    checked: view.companionMotion,
+                    disabled: !view.companion,
                     onChange: (event) =>
-                      updateAppearance({ opacity: event.target.valueAsNumber / 100 }),
+                      updateAppearance({ companionMotion: event.target.checked }),
                   }),
+                  t('companionMotion'),
+                ),
+                label(
+                  t('petSize'),
+                  h('input', {
+                    type: 'range',
+                    min: '80',
+                    max: '180',
+                    step: '4',
+                    value: view.petSize,
+                    'aria-label': t('petSize'),
+                    disabled: !view.companion,
+                    onChange: (event) => updateAppearance({ petSize: event.target.valueAsNumber }),
+                  }),
+                ),
+                label(
+                  t('opacity'),
                   h(
-                    'span',
-                    { className: 'owc-range-value', title: t('opacityHint') },
-                    Math.round(view.opacity * 100) + '%',
+                    React.Fragment,
+                    null,
+                    h('input', {
+                      className: 'owc-range',
+                      type: 'range',
+                      min: '30',
+                      max: '100',
+                      step: '1',
+                      value: String(Math.round(view.opacity * 100)),
+                      disabled: busy,
+                      'aria-label': t('opacity'),
+                      onChange: (event) =>
+                        updateAppearance({ opacity: event.target.valueAsNumber / 100 }),
+                    }),
+                    h(
+                      'span',
+                      { className: 'owc-range-value', title: t('opacityHint') },
+                      Math.round(view.opacity * 100) + '%',
+                    ),
                   ),
                 ),
               ),
@@ -3440,6 +3553,7 @@ window.__ModuleLoader__.load({
                   {
                     ref: previewBox,
                     'data-appearance-preview': true,
+                    style: features.cropping ? { display: 'none' } : undefined,
                     className: 'owc-appearance-preview',
                   },
                   view.companion
@@ -3448,14 +3562,15 @@ window.__ModuleLoader__.load({
                         { pose: 'calm', animate: false },
                         view.petSize * (petModel(view.petModel).renderer === 'svg' ? 1 : 0.65),
                         '',
-                        view.petModel,
-                        PET_SPRITES,
-                        petModel(view.petModel).renderer === 'video',
+                        features.previewImage ? 'custom-image' : view.petModel,
+                        { ...PET_SPRITES, 'custom-image': features.previewImage },
+                        !features.previewImage && petModel(view.petModel).renderer === 'video',
                       )
                     : h('p', null, t('petClassicPreview')),
                 ),
-                previewActions(),
+                !features.previewImage && previewActions(),
                 appearanceFields(),
+                features.render('appearance'),
                 h(
                   'div',
                   { className: 'owc-save' },
@@ -3668,8 +3783,6 @@ window.__ModuleLoader__.load({
                 { className: 'owc-advanced' },
                 h('summary', null, t('advanced')),
                 timezoneField(),
-                h('p', { className: 'owc-hint' }, t('sessionHint')),
-                label(t('session'), sessionSelect()),
               ),
               h('p', { className: 'owc-hint' }, t('privacy')),
               h(
@@ -3747,7 +3860,7 @@ window.__ModuleLoader__.load({
             if (scroll) scroll.scrollTop = 0;
           }, [ready, petMode, ui.screen]);
           const petShowing = petOpen;
-          const petFloating = petShowing || autoWaterPrompt;
+          const petFloating = petShowing || autoWaterPrompt || features.alert;
           React.useLayoutEffect(() => {
             if (!petMode || !petFloating || !cardContent.current) return;
             const content = cardContent.current,
@@ -3836,20 +3949,38 @@ window.__ModuleLoader__.load({
             return () => window.removeEventListener('blur', blur);
           }, [ui.menu]);
           React.useEffect(() => {
-            if (!petMode || (!petShowing && !ui.menu)) return;
+            if (!petShowing && !ui.menu) return;
             const outside = (event) => {
+              if (ui.menu && event.target.closest?.('[data-quick-more],[data-panel-more]')) return;
               if (ui.menu && !menuBox.current?.contains(event.target)) {
                 dispatchUI({ type: 'dismiss-menu' });
                 return;
               }
               if (box.current?.contains(event.target)) return;
               if (ui.menu) dispatchUI({ type: 'dismiss-menu' });
-              else if (!editing && !waterEditing && !waterBusy)
-                dispatchUI({ type: 'navigate', screen: null });
+              else if (
+                petMode &&
+                !editing &&
+                !waterEditing &&
+                !waterBusy &&
+                !features.dirty &&
+                !features.busy
+              )
+                navigateScreen(null);
             };
             document.addEventListener('pointerdown', outside);
             return () => document.removeEventListener('pointerdown', outside);
-          }, [petMode, petShowing, ui.menu, editing, waterEditing, waterBusy]);
+          }, [
+            petMode,
+            petShowing,
+            ui.menu,
+            ui.screen,
+            editing,
+            waterEditing,
+            waterBusy,
+            features.dirty,
+            features.busy,
+          ]);
           React.useEffect(() => {
             if (!ui.menu) return;
             const waterEntry = menuTrigger.current?.classList.contains('owc-pet-water-alert')
@@ -3967,7 +4098,21 @@ window.__ModuleLoader__.load({
             water: 'petWaterSettings',
             appearance: 'petAppearance',
             schedule: 'petWorkSettings',
+            wrap: 'companionWrapTitle',
+            preferences: 'companionPreferencesTitle',
+            data: 'companionDataTitle',
+            reminders: 'companionRemindersTitle',
           };
+          const pageTitle = (screen) =>
+            screen === 'income' && safeState
+              ? safeState.status === 'before'
+                ? t('petCountdownBefore')
+                : safeState.status === 'done'
+                  ? t('classicMiniFinished')
+                  : safeState.status === 'rest'
+                    ? t('classicMiniRest')
+                    : t('petCountdownCard')
+              : t(petPageTitle[screen] || 'waterTitle');
           const petHeader = () =>
             h(
               'div',
@@ -3989,8 +4134,22 @@ window.__ModuleLoader__.load({
               h(
                 'strong',
                 { 'data-pet-page-title': true, tabIndex: -1, style: { flex: 1 } },
-                t(petPageTitle[ui.screen] || 'waterTitle'),
+                pageTitle(ui.screen),
               ),
+              ui.screen === 'income' &&
+                data?.configured &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'aria-label': t('petWorkSettings'),
+                    title: t('petWorkSettings'),
+                    disabled: busy || !!ui.pending,
+                    onClick: openEditor,
+                  },
+                  iconSvg('sliders', 14),
+                ),
               ['home', 'water-countdown'].includes(ui.screen) &&
                 h(
                   'button',
@@ -4004,6 +4163,17 @@ window.__ModuleLoader__.load({
                   },
                   iconSvg('sliders', 14),
                 ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-icon',
+                  'data-panel-more': true,
+                  'aria-label': t('quickMore'),
+                  onClick: openQuickMenu,
+                },
+                '⋯',
+              ),
               h(
                 'button',
                 {
@@ -4025,6 +4195,23 @@ window.__ModuleLoader__.load({
                 'data-water-event': waterPrompt ? waterState.eventId : undefined,
               },
               waterHero(),
+              waterState.phase === 'due' &&
+                features.waterSnoozedUntil > now &&
+                h(
+                  'p',
+                  { className: 'owc-hint' },
+                  t('waterSnooze') +
+                    ' · ' +
+                    formatDuration(Math.ceil((features.waterSnoozedUntil - now) / 1000)),
+                ),
+              features.quiet &&
+                h(
+                  'p',
+                  { className: 'owc-hint' },
+                  t('waterQuiet') +
+                    ' · ' +
+                    formatDuration(Math.ceil((features.state.preferences.quietUntil - now) / 1000)),
+                ),
               h(
                 'div',
                 { className: 'owc-detail-primary-actions' },
@@ -4038,14 +4225,15 @@ window.__ModuleLoader__.load({
                   },
                   t('petRecord'),
                 ),
-                waterPrompt &&
+                waterState.phase === 'due' &&
+                  features.waterSnoozedUntil <= now &&
                   h(
                     'button',
                     {
                       type: 'button',
                       className: 'owc-text',
-                      disabled: waterBusy,
-                      onClick: () => waterAction({ type: 'snooze', eventId: waterState.eventId }),
+                      disabled: waterBusy || features.busy || !features.waterCanSnooze,
+                      onClick: () => features.snoozeWater(),
                     },
                     t('waterSnooze'),
                   ),
@@ -4057,11 +4245,16 @@ window.__ModuleLoader__.load({
                   'button',
                   {
                     type: 'button',
-                    className: 'owc-text',
-                    disabled: !water.enabled || busy || waterBusy || waterError || !waterReady,
-                    onClick: () => waterAction({ type: water.paused ? 'resume' : 'pause' }),
+                    className: 'owc-text owc-secondary',
+                    disabled: busy || waterBusy || waterError || !waterReady,
+                    onClick: () =>
+                      waterAction(
+                        water.enabled
+                          ? { type: water.paused ? 'resume' : 'pause' }
+                          : { type: 'preferences', enabled: true },
+                      ),
                   },
-                  t(water.paused ? 'waterResume' : 'waterPause'),
+                  t(!water.enabled ? 'waterEnable' : water.paused ? 'waterResume' : 'waterPause'),
                 ),
                 waterState.phase === 'quiet' &&
                   h(
@@ -4075,33 +4268,34 @@ window.__ModuleLoader__.load({
                     t('waterQuietEnd'),
                   ),
               ),
-              h(
-                'details',
-                { className: 'owc-detail-more' },
-                h('summary', null, t('waterQuiet')),
+              water.enabled &&
                 h(
-                  'div',
-                  { className: 'owc-detail-options' },
-                  [30, 60].map((minutes) =>
-                    h(
-                      'button',
-                      {
-                        type: 'button',
-                        key: minutes,
-                        disabled: !waterCanQuiet || waterBusy,
-                        onClick: (event) => {
-                          const menu = event.currentTarget.closest('details');
-                          menu.open = false;
-                          menu.querySelector('summary')?.focus();
-                          void waterAction({ type: 'quiet', minutes });
+                  'details',
+                  { className: 'owc-detail-more' },
+                  h('summary', null, t('waterQuiet')),
+                  h(
+                    'div',
+                    { className: 'owc-detail-options' },
+                    [30, 60].map((minutes) =>
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          key: minutes,
+                          disabled: !waterCanQuiet || waterBusy,
+                          onClick: (event) => {
+                            const menu = event.currentTarget.closest('details');
+                            menu.open = false;
+                            menu.querySelector('summary')?.focus();
+                            void waterAction({ type: 'quiet', minutes });
+                          },
                         },
-                      },
-                      t(minutes === 30 ? 'petQuiet30' : 'petQuiet60'),
+                        t(minutes === 30 ? 'petQuiet30' : 'petQuiet60'),
+                      ),
                     ),
                   ),
+                  h('p', { className: 'owc-hint' }, t('petQuietHint')),
                 ),
-                h('p', { className: 'owc-hint' }, t('petQuietHint')),
-              ),
               waterError &&
                 h('p', { className: 'owc-error', role: 'alert' }, t('waterUnavailable')),
               waterError &&
@@ -4115,6 +4309,115 @@ window.__ModuleLoader__.load({
                   t('waterRetry'),
                 ),
             );
+          function openQuickMenu(event) {
+            if (ui.pending || busy || waterBusy || features.busy) return;
+            if (ui.menu) {
+              closePetMenu();
+              return;
+            }
+            menuTrigger.current = event.currentTarget;
+            const rect = event.currentTarget.getBoundingClientRect();
+            dispatchUI({ type: 'menu', position: { x: rect.right, y: rect.top } });
+          }
+          const activeCustomTimer = () =>
+            features.activeTimer &&
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'owc-inline-timer',
+                'data-active-custom-timer': true,
+                onClick: (event) => navigateScreen('smoking', event),
+                title: features.activeTimer.name,
+              },
+              iconSvg('alarm', 12),
+              h('span', null, features.activeTimer.name),
+              h(
+                'strong',
+                null,
+                (features.activeTimer.phase === 'paused' ? 'Ⅱ ' : '') +
+                  formatDuration(Math.ceil(features.activeTimer.remaining / 1000)).replace(
+                    /^00:/,
+                    '',
+                  ),
+              ),
+              features.activeTimer.count > 1 ? ' +' + (features.activeTimer.count - 1) : null,
+            );
+          const quickActions = () =>
+            h(
+              'div',
+              { className: 'owc-quick-actions' },
+              waterState.phase === 'due' &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    'data-quick-drink': true,
+                    disabled: !waterCanRecord || waterBusy,
+                    onClick: recordWater,
+                  },
+                  iconSvg('water', 13),
+                  waterNotice?.kind === 'drink' ? t('waterRecorded') : t('petRecord'),
+                ),
+              features.pendingCount > 0 &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    'aria-label': t('companionRemindersTitle'),
+                    onClick: (event) => navigateScreen('reminders', event),
+                  },
+                  iconSvg('alarm', 13),
+                  String(features.pendingCount),
+                ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-quick-more',
+                  'data-quick-more': true,
+                  'aria-label': t('quickMore'),
+                  'aria-expanded': !!ui.menu,
+                  onClick: openQuickMenu,
+                },
+                '⋯',
+              ),
+            );
+          const contentForScreen = () => {
+            if (ui.pending) return draftGuard();
+            if (waterEditing) return waterSettings();
+            if (editing) return editor();
+            if (ui.screen === 'income')
+              return h(
+                React.Fragment,
+                null,
+                panelBody('clock'),
+                features.render('wrap-entry'),
+                h(
+                  'div',
+                  { className: 'owc-extra' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-link-row',
+                      onClick: (event) => navigateScreen('earnings', event),
+                      disabled: !data?.configured,
+                    },
+                    t('petEarningsCard'),
+                  ),
+                ),
+              );
+            if (ui.screen === 'smoking')
+              return h(React.Fragment, null, smokingCountdownCard(), features.render('timers'));
+            if (ui.screen === 'water-countdown' || ui.screen === 'home') return petHome();
+            if (ui.screen === 'earnings') return panelBody('earnings');
+            if (ui.screen === 'wrap') return features.render('wrap');
+            if (ui.screen === 'preferences') return features.render('settings');
+            if (ui.screen === 'data') return features.render('data');
+            if (ui.screen === 'reminders') return features.render('reminders');
+            return collapsed ? classicMini() : classicOverview();
+          };
           const contextMenu = () =>
             ui.menu &&
             h(
@@ -4168,11 +4471,9 @@ window.__ModuleLoader__.load({
                 [
                   ['income', 'petCountdownCard'],
                   ['home', 'petWaterCard'],
-                  ['water-countdown', 'waterCountdown'],
                   ['smoking', 'smokingCountdown'],
-                  ['earnings', 'petEarningsCard'],
                   ['appearance', 'petAppearance'],
-                  ['schedule', 'petWorkSettings'],
+                  ['preferences', 'companionPreferencesTitle'],
                 ].map(([screen, label]) =>
                   h(
                     'button',
@@ -4200,7 +4501,7 @@ window.__ModuleLoader__.load({
                       type: 'button',
                       role: 'menuitem',
                       tabIndex: -1,
-                      disabled: hostBusy || !sessionId,
+                      disabled: hostBusy,
                       onClick: () => {
                         closePetMenu();
                         void reload(true);
@@ -4232,7 +4533,7 @@ window.__ModuleLoader__.load({
               {
                 ref: box,
                 className: 'owc-v2 owc-pet-shell',
-                'data-version': '1.1.2',
+                'data-version': '1.2.2',
                 'data-pet-model': stageModel,
                 'data-status':
                   error || state?.error
@@ -4244,6 +4545,7 @@ window.__ModuleLoader__.load({
                         : 'loading',
                 'aria-label': t('companionLabel'),
                 style: {
+                  ...featureStyle,
                   '--owc-alpha': String(view.opacity),
                   left: petGeometry.x,
                   top: petGeometry.y,
@@ -4267,10 +4569,11 @@ window.__ModuleLoader__.load({
                   else if (ui.pending) dispatchUI({ type: 'stay' });
                   else if (editing || waterEditing) navigateScreen(ui.back);
                   else if (petShowing) closePetPanel();
+                  else if (features.alert) features.dismissAlert();
                   else if (autoWaterPrompt) dismissWaterPopup();
                 },
               },
-              h('style', null, STYLE),
+              h('style', null, STYLE + COMPANION_APP_STYLE),
               liveFeedback(),
               h(
                 'div',
@@ -4295,7 +4598,7 @@ window.__ModuleLoader__.load({
                     petGeometry.artworkSize,
                     waterNotice?.token,
                     stageModel,
-                    PET_SPRITES,
+                    { ...PET_SPRITES, 'custom-image': features.customImage },
                     true,
                   ),
                 ),
@@ -4307,17 +4610,14 @@ window.__ModuleLoader__.load({
                     'aria-label': t('petCountdownGroup'),
                   },
                   h(
-                    'div',
+                    'button',
                     {
+                      type: 'button',
+                      onClick: (event) =>
+                        navigateScreen(data?.configured ? 'income' : 'schedule', event),
                       className: 'owc-pet-clock',
-                      role: data?.configured && safeState ? 'timer' : 'status',
-                      'aria-label': t('petClock'),
-                      title:
-                        error || state?.error
-                          ? t('petRetryHint')
-                          : !sessionId
-                            ? t('noSession')
-                            : undefined,
+                      'aria-label': t('petCountdownCard'),
+                      title: error || state?.error ? t('petRetryHint') : undefined,
                     },
                     iconSvg('alarm', 12),
                     h(
@@ -4328,7 +4628,6 @@ window.__ModuleLoader__.load({
                     data?.configured &&
                       safeState &&
                       !error &&
-                      sessionId &&
                       !['done', 'rest'].includes(safeState.status)
                       ? h('strong', null, duration)
                       : null,
@@ -4360,6 +4659,8 @@ window.__ModuleLoader__.load({
                             )),
                     ),
                   ),
+                  activeCustomTimer(),
+                  quickActions(),
                 ),
               ),
               waterPrompt &&
@@ -4414,7 +4715,10 @@ window.__ModuleLoader__.load({
                     'data-pet-screen': ui.screen || 'reminder',
                     'data-side': floatingPanel.side,
                     role: 'region',
-                    'aria-label': t(petPageTitle[ui.screen] || 'waterTitle'),
+                    'aria-label':
+                      features.alert && !petShowing
+                        ? features.alertTitle
+                        : t(petPageTitle[ui.screen] || 'waterTitle'),
                     style: {
                       left: floatingPanel.left,
                       top: floatingPanel.top,
@@ -4429,7 +4733,11 @@ window.__ModuleLoader__.load({
                     : h(
                         'div',
                         { className: 'owc-head' },
-                        h('strong', { style: { flex: 1, fontSize: 12 } }, t('waterTitle')),
+                        h(
+                          'strong',
+                          { style: { flex: 1, fontSize: 12 } },
+                          features.alert ? features.alertTitle : t('waterTitle'),
+                        ),
                         h(
                           'button',
                           {
@@ -4438,7 +4746,8 @@ window.__ModuleLoader__.load({
                             'aria-label': t('petDismissReminder'),
                             title: t('petDismissReminder'),
                             disabled: waterBusy,
-                            onClick: dismissWaterPopup,
+                            onClick: () =>
+                              features.alert ? features.dismissAlert() : dismissWaterPopup(),
                           },
                           iconSvg('close', 14),
                         ),
@@ -4453,24 +4762,16 @@ window.__ModuleLoader__.load({
                         ? h(
                             React.Fragment,
                             null,
-                            ui.pending
-                              ? draftGuard()
-                              : waterEditing
-                                ? waterSettings()
-                                : editing
-                                  ? editor()
-                                  : petDetails
-                                    ? panelBody('clock')
-                                    : ui.screen === 'water-countdown'
-                                      ? waterCountdownCard()
-                                      : ui.screen === 'smoking'
-                                        ? smokingCountdownCard()
-                                        : ui.screen === 'earnings'
-                                          ? panelBody('earnings')
-                                          : petHome(),
+                            contentForScreen(),
                             notices(),
+                            features.feedback(),
                           )
-                        : waterReminder(),
+                        : h(
+                            React.Fragment,
+                            null,
+                            features.alert ? features.render('alert') : waterReminder(),
+                            features.feedback(),
+                          ),
                     ),
                   ),
                 ),
@@ -4487,7 +4788,7 @@ window.__ModuleLoader__.load({
                 (collapsed && waterQuickOpen ? ' owc-quick' : '') +
                 (editing || waterEditing ? ' owc-editing' : ''),
               'aria-label': t('title'),
-              'data-version': '1.1.2',
+              'data-version': '1.2.2',
               'data-status': classicClock.phase,
               style: cardStyle,
               onPointerDown: dragDown,
@@ -4512,7 +4813,7 @@ window.__ModuleLoader__.load({
                 else setPreference({ mini: true });
               },
             },
-            h('style', null, STYLE),
+            h('style', null, STYLE + COMPANION_APP_STYLE),
             h('div', { className: 'owc-glass', 'aria-hidden': 'true' }),
             h(
               'div',
@@ -4531,27 +4832,13 @@ window.__ModuleLoader__.load({
                 ),
               ),
               !collapsed && classicHeader(),
-              ui.pending
-                ? draftGuard()
-                : waterEditing
-                  ? waterSettings()
-                  : editing
-                    ? editor()
-                    : ui.screen === 'water-countdown'
-                      ? waterCountdownCard()
-                      : ui.screen === 'smoking'
-                        ? smokingCountdownCard()
-                        : ui.screen === 'home'
-                          ? petHome()
-                          : ui.screen === 'earnings'
-                            ? panelBody('earnings')
-                            : ui.screen === 'income'
-                              ? panelBody('clock')
-                              : collapsed
-                                ? classicMini()
-                                : classicOverview(),
+              contentForScreen(),
               notices(ui.screen !== null),
-              ui.screen === null && waterReminder(),
+              features.feedback(),
+              ui.screen === null && (features.alert ? features.render('alert') : waterReminder()),
+              ui.screen === null && activeCustomTimer(),
+              ui.screen === null && quickActions(),
+              contextMenu(),
             ),
           );
         }