dsh-offwork 1.1.1 → 1.2.2

package/client.source.js

@@ -13,7 +13,42 @@ window.__ModuleLoader__.load({
         ...PET_MESSAGES.zh,
         ...PET_INTERACTION_MESSAGES.zh,
         ...PET_SURFACE_MESSAGES.zh,
+        detailHelp: '使用说明',
+        detailApply: '应用',
+        detailShift: '班次详情',
+        detailWaterRule: '全天按自然时间提醒，需保持页面打开。',
+        detailSavedInterval: '已生效间隔',
+        detailDraftHint: '保存后生效',
+        detailNextInterval: '用于下一轮计时',
         title: '下班计时器',
+        classicMiniWorking: '距下班',
+        classicMiniBefore: '距开工',
+        classicMiniLunch: '午休中',
+        classicMiniStatus: '本班状态',
+        classicMiniWaiting: '待开启',
+        classicMiniFinished: '已结束',
+        classicOverview: '今日概览',
+        classicReturn: '返回概览',
+        classicMore: '展开作息详情',
+        classicLess: '收起作息详情',
+        classicNoSession: '等待会话',
+        classicUnavailable: '暂时无法计时',
+        classicRetryHint: '重新读取作息后恢复计时。',
+        classicLoading: '正在准备计时',
+        classicLoadingHint: '正在读取已保存的作息。',
+        classicBeforeHint: '班次尚未开始，显示距离开工的时间。',
+        classicWorkingHint: '本班工作进行中。',
+        classicLunchRemaining: '距离午休结束',
+        classicLunchHint: '午休结束后继续工作；喝水提醒照常计时。',
+        classicDoneHint: '本班计时已结束，下一班开始后继续。',
+        classicRestHint: '今天不计工作时长，计时会在工作日恢复。',
+        classicWaterHint: '自然时间计时',
+        classicSmokeHint: '自然时间计时',
+        classicConfigure: '设置作息与薪资',
+        classicIncome: '本班收入',
+        classicIncomeEntry: '查看收入详情',
+        classicShift: '本班作息',
+        classicEnd: '下班时间',
         working: '距离下班',
         before: '距离开工',
         lunch: '午休中',
@@ -48,7 +83,7 @@ window.__ModuleLoader__.load({
         error: '操作失败，请重试。',
         saved: '设置已保存',
         days: '日一二三四五六',
-        privacy: '配置保存在 Harness 所在机器；读写结果进入所选会话记录。',
+        privacy: '配置保存在 Harness 所在机器；界面直接保存，不写入会话。代理访问默认关闭。',
         drag: '按住可拖动；方向键微调，Home 复位',
         setup: '先设好你的作息',
         setupHint: '示例数值不是你的收入，保存后才开始计时。',
@@ -74,7 +109,7 @@ window.__ModuleLoader__.load({
         opacityHint: '只影响背景，不影响文字。',
         waterTitle: '喝水提醒',
         waterEnable: '开启喝水提醒',
-        waterInterval: '自定义间隔（分钟）',
+        waterInterval: '提醒间隔（分钟）',
         waterSave: '保存提醒设置',
         waterEdit: '设置喝水提醒',
         waterBack: '返回',
@@ -84,21 +119,21 @@ window.__ModuleLoader__.load({
         waterEffective: '当前间隔',
         waterManage: '数据管理',
         waterSaveHint: '修改后点击保存，按新间隔重新计时。',
-        waterBrief: '按工作时间计时，午休暂停。关闭页面后不提醒。',
+        waterBrief: '按自然时间计时，午休、下班和休息日均可提醒。需要保持页面打开。',
         waterApply: '应用间隔',
         waterInvalid: '请输入 5–240 的整数。',
         waterNext: '下次喝水',
         waterDue: '该喝水啦',
         waterDrink: '喝了',
-        waterSnooze: '工作 10 分钟后',
-        waterPause: '本班暂停',
-        waterResume: '恢复本班提醒',
-        waterCount: '本班打卡',
+        waterSnooze: '10 分钟后',
+        waterPause: '暂停提醒',
+        waterResume: '恢复提醒',
+        waterCount: '饮水计数',
         waterManual: '喝了一杯',
         waterQuick: '喝水快捷操作',
         waterQuickClose: '收起喝水快捷操作',
         waterRecorded: '这杯记下啦。',
-        waterRecordHint: '工作和午休期间可以打卡，关闭提醒也能记录。',
+        waterRecordHint: '随时可以打卡，关闭提醒也能记录；计数可手动清零。',
         waterActionStale: '状态已变化，请再试一次。',
         waterQuiet: '免打扰',
         waterQuietAdjust: '调整时长',
@@ -109,32 +144,68 @@ window.__ModuleLoader__.load({
         waterQuietEnded: '免打扰已结束。',
         waterQuietHint: '按自然时间，到期自动恢复；已到期的提醒只提示一次。',
         waterOff: '提醒已关闭',
-        waterWaiting: '等待工作时段',
-        waterBreak: '休息中，提醒计时暂停',
-        waterPaused: '本班已暂停',
-        waterFinished: '本班不再安排新提醒',
+        waterWaiting: '等待开启提醒',
+        waterBreak: '提醒已暂停',
+        waterPaused: '提醒已暂停',
+        waterFinished: '提醒已结束',
         waterOther: '提醒已到期，等待可见标签页处理',
-        waterClear: '清除本班次数',
+        waterClear: '清除饮水计数',
         waterReset: '重置喝水提醒',
         waterConfirm: '确认操作',
-        waterClearHint: '仅清零本班次数，保留下一次提醒和暂停状态。',
-        waterResetHint: '清除喝水提醒设置和记录，恢复默认关闭。',
+        waterClearHint: '仅清零饮水计数，保留下一次提醒和暂停状态。',
+        waterResetHint: '清除当前喝水提醒设置和计数，恢复默认关闭。',
         waterLocal: '提醒设置和打卡仅保存在当前浏览器，不进入会话。与薪资配置分别保存。',
-        waterRules: '按工作分钟计时，午休冻结。开启、修改间隔或作息后重新计时；关闭页面后不提醒。',
+        waterRules:
+          '按自然分钟计时，与作息、薪资和会话无关。开启、修改间隔或手动恢复后重新计时；关闭页面后不提醒。',
         waterUnavailable:
-          '喝水提醒存储不可用或数据无效，自动提醒已停止。可重试；重置将清除原喝水数据。',
+          '喝水提醒存储不可用或数据无效，自动提醒已停止。可重试；重置将清除当前提醒设置和计数。',
         waterRetry: '重试读取',
-        waterSetup: '请先保存薪资与作息。',
+        waterSetup: '开启后按所选间隔提醒。',
         waterLoading: '正在读取喝水提醒…',
-        waterChanged: '提醒设置已在本浏览器生效',
-        waterStale: '作息已变化，请点击“读取最新配置”后继续提醒。',
+        waterChanged: '提醒设置已保存',
+        waterStale: '记录已更新，请重试读取。',
       },
       en: {
         ...COMPANION_MESSAGES.en,
         ...PET_MESSAGES.en,
         ...PET_INTERACTION_MESSAGES.en,
         ...PET_SURFACE_MESSAGES.en,
+        detailHelp: 'How it works',
+        detailApply: 'Apply',
+        detailShift: 'Shift details',
+        detailWaterRule: 'Reminds you throughout the day. Keep the page open.',
+        detailSavedInterval: 'Saved interval',
+        detailDraftHint: 'Applies when saved',
+        detailNextInterval: 'Applies to the next timer',
         title: 'Offwork Clock',
+        classicMiniWorking: 'To end',
+        classicMiniBefore: 'To start',
+        classicMiniLunch: 'Break',
+        classicMiniStatus: 'Status',
+        classicMiniWaiting: 'Waiting',
+        classicMiniFinished: 'Done',
+        classicOverview: 'Today at a glance',
+        classicReturn: 'Back to overview',
+        classicMore: 'Show schedule details',
+        classicLess: 'Hide schedule details',
+        classicNoSession: 'Waiting for a session',
+        classicUnavailable: 'Timer unavailable',
+        classicRetryHint: 'Reload your schedule to restore the timer.',
+        classicLoading: 'Preparing your timer',
+        classicLoadingHint: 'Loading your saved schedule.',
+        classicBeforeHint: 'Your shift has not started. This is the time until work begins.',
+        classicWorkingHint: 'Your shift is in progress.',
+        classicLunchRemaining: 'Until lunch ends',
+        classicLunchHint: 'Work resumes after lunch. Water reminders continue as usual.',
+        classicDoneHint: 'This shift has ended. Timing resumes with your next shift.',
+        classicRestHint: 'No work time is counted today. Timing resumes on a scheduled workday.',
+        classicWaterHint: 'Clock time',
+        classicSmokeHint: 'Clock time',
+        classicConfigure: 'Set schedule and pay',
+        classicIncome: 'Shift earnings',
+        classicIncomeEntry: 'View earnings',
+        classicShift: 'Shift schedule',
+        classicEnd: 'Shift ends',
         working: 'Until clock-out',
         before: 'Until work starts',
         lunch: 'On break',
@@ -169,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.',
@@ -196,7 +268,7 @@ window.__ModuleLoader__.load({
         opacityHint: 'Affects the background only.',
         waterTitle: 'Water reminder',
         waterEnable: 'Enable water reminders',
-        waterInterval: 'Custom interval (minutes)',
+        waterInterval: 'Interval (minutes)',
         waterSave: 'Save reminder settings',
         waterEdit: 'Reminder settings',
         waterBack: 'Back',
@@ -206,21 +278,23 @@ window.__ModuleLoader__.load({
         waterEffective: 'Current interval',
         waterManage: 'Manage data',
         waterSaveHint: 'Save changes to restart with the new interval.',
-        waterBrief: 'Counts working time and pauses on unpaid breaks. Keep the page open.',
+        waterBrief:
+          'Uses clock time, including breaks, off-hours and days off. Keep the page open.',
         waterApply: 'Apply interval',
         waterInvalid: 'Enter a whole number from 5 to 240.',
         waterNext: 'Next water break',
         waterDue: 'Time for some water',
         waterDrink: 'Drank water',
-        waterSnooze: 'In 10 working minutes',
-        waterPause: 'Pause this shift',
-        waterResume: 'Resume this shift',
-        waterCount: 'Drinks this shift',
+        waterSnooze: 'In 10 minutes',
+        waterPause: 'Pause reminders',
+        waterResume: 'Resume reminders',
+        waterCount: 'Drinks recorded',
         waterManual: 'Had a glass',
         waterQuick: 'Quick water actions',
         waterQuickClose: 'Close quick water actions',
         waterRecorded: 'Got it, your drink is recorded.',
-        waterRecordHint: 'Check in during work or breaks, even with reminders off.',
+        waterRecordHint:
+          'Check in at any time, even with reminders off. Clear the count manually when needed.',
         waterActionStale: 'The state changed. Please try again.',
         waterQuiet: 'Quiet time',
         waterQuietAdjust: 'Change duration',
@@ -232,32 +306,32 @@ window.__ModuleLoader__.load({
         waterQuietHint:
           'Uses clock time. Resumes automatically, with just one reminder if overdue.',
         waterOff: 'Reminders off',
-        waterWaiting: 'Waiting for working hours',
-        waterBreak: 'On break; reminder timer paused',
-        waterPaused: 'Paused for this shift',
-        waterFinished: 'No more reminders this shift',
+        waterWaiting: 'Waiting for reminders to be enabled',
+        waterBreak: 'Reminders paused',
+        waterPaused: 'Reminders paused',
+        waterFinished: 'Reminders ended',
         waterOther: 'Reminder due; waiting for a visible tab',
-        waterClear: 'Clear shift count',
+        waterClear: 'Clear drink count',
         waterReset: 'Reset water reminders',
         waterConfirm: 'Confirm',
         waterClearHint: 'Clear the drink count only. Keep the next reminder and pause state.',
-        waterResetHint: 'Delete water preferences and records, then turn reminders off.',
+        waterResetHint: 'Clear current water preferences and count, then turn reminders off.',
         waterLocal:
           'Reminder preferences and check-ins stay in this browser, outside conversations. Saved separately from salary settings.',
         waterRules:
-          'Counts working minutes; unpaid breaks pause the timer. Enabling or changing interval or schedule restarts it. The page must stay open.',
+          'Uses clock time, independently of work, salary and sessions. Enabling, changing the interval or manually resuming starts a new interval. Keep the page open.',
         waterUnavailable:
-          'Water storage is unavailable or invalid; automatic reminders stopped. Retry, or reset to delete old water data.',
+          'Water storage is unavailable or invalid; automatic reminders stopped. Retry, or reset current water preferences and count.',
         waterRetry: 'Retry loading',
-        waterSetup: 'Save your salary and schedule first.',
+        waterSetup: 'Enable reminders to start the selected interval.',
         waterLoading: 'Loading water reminders…',
-        waterChanged: 'Reminder preferences saved in this browser',
-        waterStale: 'Schedule changed. Reload the latest settings to continue reminders.',
+        waterChanged: 'Reminder settings saved',
+        waterStale: 'Records changed. Retry loading to continue.',
       },
     };
     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}
@@ -384,6 +458,15 @@ window.__ModuleLoader__.load({
       water: [
         ['path', { d: 'M8 1.5C6.6 4 3.5 7.1 3.5 10a4.5 4.5 0 0 0 9 0C12.5 7.1 9.4 4 8 1.5Z' }],
       ],
+      smoking: [
+        ['rect', { x: 1.5, y: 10, width: 11, height: 3, rx: 0.5 }],
+        [
+          'path',
+          {
+            d: 'M9.5 10v3M14.5 10v3M10 7.5c1-1 .8-1.8 0-2.5s-1-1.5 0-2.5M13 6c1-1 .8-1.8 0-2.5s-1-1.5 0-2.5',
+          },
+        ],
+      ],
       eye: [
         ['path', { d: 'M1.7 8S4.3 3.9 8 3.9 14.3 8 14.3 8 11.7 12.1 8 12.1 1.7 8 1.7 8Z' }],
         ['circle', { cx: 8, cy: 8, r: 2.05 }],
@@ -410,6 +493,19 @@ window.__ModuleLoader__.load({
         ['path', { d: 'M13.1 3v3.2H9.9' }],
       ],
     };
+    const LOCAL_SCREENS = [
+      null,
+      'appearance',
+      'smoking',
+      'water-countdown',
+      'water',
+      'home',
+      'income',
+      'wrap',
+      'preferences',
+      'data',
+      'reminders',
+    ];
     const iconSvg = (name, size = 15) =>
       h(
         'svg',
@@ -457,12 +553,20 @@ window.__ModuleLoader__.load({
           const waterEditing = ui.screen === 'water';
           const [appearanceDraft, setAppearanceDraft] = React.useState(null);
           const appearanceBase = React.useRef(null);
+          const previewBox = React.useRef(null);
+          const previewMotion = React.useRef(null);
+          const [previewState, setPreviewState] = React.useState({ phase: 'idle', action: null });
+          const [previewReduced, setPreviewReduced] = React.useState(
+            () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false,
+          );
           const appearanceWasPet = React.useRef(false);
           const salaryBase = React.useRef(null);
           const menuBox = React.useRef(null);
           const menuTrigger = React.useRef(null);
           const [dragPosition, setDragPosition] = React.useState(null);
-          const [busy, setBusy] = React.useState(false);
+          const requestBusy = React.useRef(false);
+          const [hostBusy, setBusy] = React.useState(false);
+          const busy = hostBusy && (requestBusy.current || !LOCAL_SCREENS.includes(ui.screen));
           const [error, setError] = React.useState('');
           const [notice, setNotice] = React.useState('');
           const [storageError, setStorageError] = React.useState(false);
@@ -488,8 +592,118 @@ window.__ModuleLoader__.load({
           const dragState = React.useRef(null);
           const lastPosition = React.useRef(null);
           const generation = React.useRef(0);
-          const requestBusy = React.useRef(false);
           const focusReturn = React.useRef(null);
+          const [smoking, setSmoking] = React.useState(defaultCountdown);
+          const [smokingReady, setSmokingReady] = React.useState(false);
+          const [smokingBusy, setSmokingBusy] = React.useState(false);
+          const [smokingError, setSmokingError] = React.useState('');
+          const smokingRuntime = React.useRef(null);
+          React.useEffect(() => {
+            let alive = true,
+              reading = false,
+              writing = false,
+              issued = 0,
+              accepted = 0,
+              channel;
+            const makeStore = () => {
+              try {
+                return createStateStore(
+                  window.indexedDB,
+                  SMOKING_TIMER_DB,
+                  defaultCountdown,
+                  validateCountdown,
+                );
+              } catch {
+                return createStateStore(
+                  null,
+                  SMOKING_TIMER_DB,
+                  defaultCountdown,
+                  validateCountdown,
+                );
+              }
+            };
+            let store = makeStore();
+            const accept = (next, order) => {
+              if (!alive || order < accepted) return;
+              accepted = order;
+              setSmoking(next);
+              setNow(Date.now());
+              setSmokingReady(true);
+            };
+            const refresh = async () => {
+              if (!alive || reading || writing) return;
+              reading = true;
+              const source = store,
+                order = ++issued;
+              try {
+                const next = await source.update((current) => current);
+                if (source === store) accept(next, order);
+              } catch {
+                if (alive && source === store && order >= accepted)
+                  setSmokingError('timerStorageError');
+              } finally {
+                reading = false;
+              }
+            };
+            const run = async (action) => {
+              if (!alive || writing) return;
+              writing = true;
+              const order = ++issued;
+              setSmokingBusy(true);
+              try {
+                if (action.type === 'retry') {
+                  store.close();
+                  store = makeStore();
+                }
+                let changedElsewhere = false;
+                const next = await store.update((current) => {
+                  if (action.type === 'retry') return current;
+                  if (current.revision !== action.revision) {
+                    changedElsewhere = true;
+                    return current;
+                  }
+                  return transitionCountdown(current, action, Date.now());
+                });
+                accept(next, order);
+                if (alive) setSmokingError(changedElsewhere ? 'timerChanged' : '');
+                try {
+                  channel?.postMessage(next.revision);
+                } catch {
+                  /* Polling also synchronizes. */
+                }
+                return changedElsewhere ? null : next;
+              } catch {
+                if (alive) setSmokingError('timerStorageError');
+              } finally {
+                writing = false;
+                if (alive) setSmokingBusy(false);
+              }
+            };
+            smokingRuntime.current = { run };
+            try {
+              channel = new BroadcastChannel(SMOKING_TIMER_DB);
+              channel.onmessage = refresh;
+            } catch {
+              /* Polling is sufficient. */
+            }
+            void refresh();
+            const timer = window.setInterval(refresh, 2000);
+            window.addEventListener('focus', refresh);
+            document.addEventListener('visibilitychange', refresh);
+            return () => {
+              alive = false;
+              smokingRuntime.current = null;
+              window.clearInterval(timer);
+              window.removeEventListener('focus', refresh);
+              document.removeEventListener('visibilitychange', refresh);
+              channel?.close();
+              store.close();
+            };
+          }, []);
+          const smokingState = countdownView(smoking, now);
+          const smokingUnavailable = !smokingReady || smokingError === 'timerStorageError';
+          const smokingAction = (action) =>
+            smokingRuntime.current?.run({ ...action, revision: smoking.revision });
           const [water, setWater] = React.useState(defaultHydration);
           const [waterReady, setWaterReady] = React.useState(false);
           const [waterError, setWaterError] = React.useState(false);
@@ -507,6 +721,7 @@ window.__ModuleLoader__.load({
           const [waterInvalid, setWaterInvalid] = React.useState(false);
           const [waterConfirm, setWaterConfirm] = React.useState(null);
           const [waterNotice, setWaterNotice] = React.useState(false);
+          const [reminderGate, setReminderGate] = React.useState(initialPetReminder);
           const reactionState = React.useRef(null);
           const petMotion = React.useRef(null);
           const petReactionToken = React.useRef(null);
@@ -516,32 +731,90 @@ window.__ModuleLoader__.load({
             waterOwner.current =
               window.crypto?.randomUUID?.() || String(Math.random()) + Date.now();
           const waterInputs = React.useRef(null);
-          const waterScheduleChange = React.useRef(null);
-          waterInputs.current = {
-            settings: data?.configured && !error ? data.settings : null,
-            editing: editing || waterEditing,
-          };
+          waterInputs.current = { editing: editing || waterEditing };
 
           const settings = data?.settings;
           const workingDraft = draft || settings;
           const state = settings ? safeCalculate(settings) : null;
           const preview = workingDraft ? safeCalculate(workingDraft) : null;
           const safeState = state && !state.error ? state : null;
-          const petMode =
-            ready &&
-            data?.configured &&
-            !!safeState &&
-            (appearanceOnly ? appearanceWasPet.current : view.companion);
-          const stageModel = appearanceOnly ? savedView.petModel : view.petModel;
+          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 =
+            error || state?.error
+              ? 'petLoadFailed'
+              : !data
+                ? 'loading'
+                : !data.configured
+                  ? 'petNeedsSetup'
+                  : safeState?.status || 'loading';
+          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,
+            (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;
@@ -582,7 +855,7 @@ window.__ModuleLoader__.load({
           );
           const waterAlertLayout = placePetSurface(anchor, viewport, {
             width: Math.min(140, Math.max(110, alertRoom)),
-            height: 34,
+            height: 44,
             kind: 'menu',
             obstacles: [...(petOpen ? [floatingPanel] : []), ...(ui.menu ? [menuLayout] : [])],
           });
@@ -591,14 +864,15 @@ window.__ModuleLoader__.load({
             height: toastHeight,
             kind: 'menu',
           });
-          const collapsed =
-            !petMode &&
-            !!safeState &&
-            !editing &&
-            !waterEditing &&
-            view.mini &&
-            !error &&
-            !state?.error;
+          const collapsed = !petMode && ui.screen === null && view.mini;
+          const classicClock = classicClockPresentation({
+            hasSession: true,
+            loaded: !!data,
+            configured: !!data?.configured,
+            failed: !!error || !!state?.error,
+            state: safeState,
+            now,
+          });
           const seconds = safeState
             ? safeState.status === 'before'
               ? safeState.startRemaining
@@ -626,6 +900,16 @@ window.__ModuleLoader__.load({
             classicSize,
           );
           const cardStyle = {
+            ...featureStyle,
+            width: ui.screen
+              ? 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,
@@ -708,17 +992,8 @@ window.__ModuleLoader__.load({
               store = createHydrationStore(null);
             }
             try {
-              channel = new BroadcastChannel('dsh.offwork-clock.hydration.v1');
+              channel = new BroadcastChannel('dsh.offwork-clock.hydration.wall-clock.v3');
             } catch {}
-            const contextAt = (time) => {
-              const current = waterInputs.current.settings;
-              if (!current) return null;
-              try {
-                return hydrationContext(current, calculate(current, time));
-              } catch {
-                return null;
-              }
-            };
             const update = async (action = { type: 'tick' }, automatic = false) => {
               if (!active || (automatic && (running || failed))) return;
               running++;
@@ -734,59 +1009,31 @@ window.__ModuleLoader__.load({
                 let changed = false;
                 let recorded = false;
                 let quietChanged = false;
-                let usedPermit = null;
                 const result = await store.update(
                   (current) => {
                     const time = Date.now();
-                    const context = contextAt(time);
                     if (action.type === 'sync') return current;
-                    const permit = waterScheduleChange.current;
-                    const operation =
-                      permit && context && permit.schedule === context.schedule
-                        ? { ...action, baseSchedule: permit.baseSchedule }
-                        : action;
-                    let next = transitionHydration(
-                      current,
-                      context,
-                      operation,
-                      time,
-                      waterOwner.current,
-                    );
+                    let next = transitionHydration(current, action, time, waterOwner.current);
                     recorded =
-                      ['drink', 'manual-drink'].includes(action.type) &&
-                      next.shift?.count >
-                        (current.shift?.id === next.shift?.id ? (current.shift?.count ?? 0) : 0);
+                      ['drink', 'manual-drink'].includes(action.type) && next.count > current.count;
                     quietChanged =
                       ['quiet', 'end-quiet'].includes(action.type) &&
-                      next.shift?.quietUntil !== current.shift?.quietUntil;
+                      next.quietUntil !== current.quietUntil;
                     if (automatic) {
                       const allow = !document.hidden && !waterInputs.current.editing;
                       next = transitionHydration(
                         next,
-                        context,
                         { type: allow ? 'claim' : 'release' },
                         time,
                         waterOwner.current,
                       );
                     }
-                    if (
-                      permit &&
-                      context &&
-                      permit.schedule === context.schedule &&
-                      next.shift?.schedule === context.schedule
-                    )
-                      usedPermit = permit;
                     changed = JSON.stringify(next) !== JSON.stringify(current);
                     return next;
                   },
                   { reset: action.type === 'reset' },
                 );
                 if (!active) return;
-                if (
-                  action.type === 'reset' ||
-                  (usedPermit && waterScheduleChange.current === usedPermit)
-                )
-                  waterScheduleChange.current = null;
                 failed = false;
                 setWater(result);
                 setWaterReady(true);
@@ -818,11 +1065,14 @@ window.__ModuleLoader__.load({
             const visibility = () => {
               setWaterVisible(!document.hidden);
               setNow(Date.now());
-              if (document.hidden) void update({ type: 'release' });
-              else tick();
+              if (document.hidden) {
+                setReminderGate(initialPetReminder);
+                void update({ type: 'release' });
+              } else tick();
             };
             const pageHide = () => {
               setWaterVisible(false);
+              setReminderGate(initialPetReminder);
               void update({ type: 'release' });
             };
             waterRuntime.current = { update, tick };
@@ -847,8 +1097,7 @@ window.__ModuleLoader__.load({
               channel?.close();
               void store
                 .update((current) => {
-                  if (current.shift?.claim?.owner === waterOwner.current)
-                    current.shift.claim = null;
+                  if (current.claim?.owner === waterOwner.current) current.claim = null;
                   return current;
                 })
                 .catch(() => {})
@@ -858,7 +1107,7 @@ window.__ModuleLoader__.load({
 
           React.useEffect(() => {
             waterRuntime.current?.tick();
-          }, [settings, editing, waterEditing, error]);
+          }, [editing, waterEditing]);
 
           React.useEffect(() => {
             if (!waterNotice) return;
@@ -904,6 +1153,7 @@ window.__ModuleLoader__.load({
             const interval = Number(waterInterval);
             if (!Number.isInteger(interval) || interval < 5 || interval > 240) {
               setWaterInvalid(true);
+              box.current?.querySelector('[name=waterInterval]')?.focus();
               return;
             }
             const result = await waterAction({
@@ -928,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')
@@ -936,7 +1193,7 @@ window.__ModuleLoader__.load({
                   setWaterNotice({ key: 'waterRecorded', kind: 'drink', token: result.revision });
                 if (action.type === 'manual-drink') {
                   setWaterNotice({
-                    key: result.shift?.recentActions.includes(action.actionId)
+                    key: result.recentActions.includes(action.actionId)
                       ? 'waterRecorded'
                       : 'waterActionStale',
                     kind: outcome.recorded ? 'drink' : 'notice',
@@ -947,7 +1204,7 @@ window.__ModuleLoader__.load({
                 if (action.type === 'quiet')
                   setWaterNotice({
                     key:
-                      outcome.quietChanged && result.shift?.quietUntil > Date.now()
+                      outcome.quietChanged && result.quietUntil > Date.now()
                         ? 'waterQuietStarted'
                         : 'waterActionStale',
                     kind: 'notice',
@@ -975,13 +1232,9 @@ window.__ModuleLoader__.load({
                         ? '.owc-pet-handle'
                         : '.owc-grip,.owc-title'
                       : action.type === 'manual-drink'
-                        ? petMode
-                          ? '.owc-pet-water-row .owc-primary'
-                          : '.owc-water-actions .owc-primary'
+                        ? '.owc-water-record,.owc-water-actions .owc-primary'
                         : action.type === 'end-quiet'
-                          ? petMode
-                            ? '.owc-pet-quiet-row button'
-                            : '.owc-water-quiet summary'
+                          ? '.owc-detail-more summary,.owc-water-quiet summary'
                           : '.owc-water-form details > summary';
                     box.current?.querySelector(target)?.focus();
                   });
@@ -996,12 +1249,11 @@ window.__ModuleLoader__.load({
           }
 
           React.useEffect(() => {
-            if (sessionId) reload();
-            else setError(t('noSession'));
+            reload();
             return () => {
               generation.current++;
             };
-          }, [sessionId]);
+          }, []);
 
           React.useEffect(() => {
             let timer;
@@ -1050,7 +1302,7 @@ window.__ModuleLoader__.load({
               window.visualViewport?.removeEventListener('resize', resize);
               window.visualViewport?.removeEventListener('scroll', resize);
             };
-          }, [clamp, petMode]);
+          }, [clamp, petMode, ready]);
 
           React.useEffect(() => {
             if (ui.pending) {
@@ -1087,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) {
@@ -1102,21 +1360,11 @@ window.__ModuleLoader__.load({
             setBusy(true);
             setError('');
             try {
-              const baseSchedule = (await waterRuntime.current?.update({ type: 'sync' }))?.state
-                ?.shift?.schedule;
-              if (token !== generation.current) return;
               const next = await request('get');
               if (token !== generation.current) return;
-              if (next.configured)
-                waterScheduleChange.current = {
-                  baseSchedule,
-                  schedule: hydrationContext(next.settings, calculate(next.settings, Date.now()))
-                    .schedule,
-                };
               setData(next);
               if (!next.configured) {
                 setDraft({ ...next.settings });
-                dispatchUI({ type: 'navigate', screen: 'schedule', discard: true });
                 salaryBase.current = next.settings;
               }
               if (explicit) setNotice(t('synced'));
@@ -1135,19 +1383,11 @@ window.__ModuleLoader__.load({
             setError('');
             const token = ++generation.current;
             try {
-              const baseSchedule = (await waterRuntime.current?.update({ type: 'sync' }))?.state
-                ?.shift?.schedule;
-              if (token !== generation.current) return;
               const next = await request(
                 'set',
                 changedSettings(salaryBase.current ?? settings, draft),
               );
               if (token === generation.current) {
-                waterScheduleChange.current = {
-                  baseSchedule,
-                  schedule: hydrationContext(next.settings, calculate(next.settings, Date.now()))
-                    .schedule,
-                };
                 setData(next);
                 dispatchUI({ type: 'navigate', screen: ui.back, discard: true });
                 setDraft(null);
@@ -1253,7 +1493,7 @@ window.__ModuleLoader__.load({
             petDragged.current = false;
             if (ui.pending) return true;
             if (!petMode) {
-              if (!busy && !waterBusy) navigateScreen('appearance', event);
+              if (!requestBusy.current && !waterBusy) navigateScreen('appearance', event);
               return true;
             }
             const trigger =
@@ -1269,7 +1509,7 @@ window.__ModuleLoader__.load({
               : trigger;
             const rect = trigger?.getBoundingClientRect();
             const point =
-              event.type === 'keydown'
+              event.type === 'keydown' || (event.type === 'click' && event.detail === 0)
                 ? { x: rect?.right ?? petGeometry.x, y: rect?.top ?? petGeometry.y }
                 : { x: event.clientX, y: event.clientY };
             dispatchUI({ type: 'menu', position: point });
@@ -1283,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));
@@ -1296,6 +1537,7 @@ window.__ModuleLoader__.load({
                 setError('');
               }
               if (screen === 'appearance') {
+                features.beginAppearance();
                 appearanceBase.current = appearanceValues(savedView);
                 appearanceWasPet.current = !!petMode;
                 setAppearanceDraft(appearanceValues(savedView));
@@ -1310,8 +1552,21 @@ window.__ModuleLoader__.load({
             setWaterConfirm(null);
           }
           function navigateScreen(screen, event) {
-            if (!data?.configured && screen !== 'schedule') return;
-            if (ui.pending || busy || waterBusy || requestBusy.current || waterPending.current)
+            if (screen === 'water-countdown') screen = 'home';
+            if (
+              screen !== null &&
+              !LOCAL_SCREENS.includes(screen) &&
+              (!data || (!data.configured && screen !== 'schedule'))
+            )
+              return;
+            if (
+              ui.pending ||
+              features.busy ||
+              waterBusy ||
+              requestBusy.current ||
+              waterPending.current ||
+              (hostBusy && !LOCAL_SCREENS.includes(screen))
+            )
               return;
             const root = event?.currentTarget?.getAttribute?.('role') === 'menuitem';
             if (event?.currentTarget) focusReturn.current = event.currentTarget;
@@ -1322,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 ||
@@ -1335,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));
@@ -1347,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) {
@@ -1363,7 +1623,7 @@ window.__ModuleLoader__.load({
             navigateScreen('schedule', event);
           }
           function closeEditor() {
-            if ((!data?.configured && !appearanceOnly) || busy) return;
+            if (busy) return;
             performNavigation(ui.back);
           }
           function update(key, value) {
@@ -1432,20 +1692,19 @@ window.__ModuleLoader__.load({
               'button',
               {
                 type: 'button',
-                className: 'owc-text',
+                className: 'owc-icon',
                 'aria-pressed': view.masked,
+                'aria-label': t(view.masked ? 'show' : 'hide'),
                 title: t(view.masked ? 'show' : 'hide'),
                 onClick: () => setPreference({ masked: !view.masked }),
               },
               iconSvg(view.masked ? 'eyeOff' : 'eye', 13),
-              t(view.masked ? 'show' : 'hide'),
             );
 
-          const waterContext =
-            data?.configured && safeState && !error ? hydrationContext(settings, safeState) : null;
-          const waterState = hydrationView(water, waterContext, now);
-          const waterClaim = water.shift?.claim;
+          const waterState = hydrationView(water, now);
+          const waterClaim = water.claim;
           const waterPrompt =
+            !features.ready &&
             waterReady &&
             !waterError &&
             !editing &&
@@ -1454,9 +1713,59 @@ window.__ModuleLoader__.load({
             !document.hidden &&
             waterState.phase === 'due' &&
             waterClaim?.owner === waterOwner.current &&
-            waterClaim.sequence === water.shift.sequence &&
+            waterClaim.sequence === water.sequence &&
             waterClaim.until > Date.now() &&
             waterClaim.until <= Date.now() + HYDRATION_LEASE_MS;
+          const reminderReady = !!(petMode && waterReady && !waterError);
+          const reminderVisible = waterVisible && !document.hidden;
+          const reminderAvailable = !petOpen && !ui.menu && !ui.pending && !busy;
+          React.useEffect(() => {
+            setReminderGate((current) =>
+              nextPetReminder(current, {
+                ready: reminderReady,
+                eventId: waterState.eventId,
+                phase: waterState.phase,
+                visible: reminderVisible,
+                available: reminderAvailable,
+                ownsPrompt: waterPrompt,
+              }),
+            );
+          }, [
+            reminderReady,
+            waterState.eventId,
+            waterState.phase,
+            reminderVisible,
+            reminderAvailable,
+            waterPrompt,
+          ]);
+          const autoWaterPrompt =
+            reminderReady &&
+            reminderVisible &&
+            reminderAvailable &&
+            waterPrompt &&
+            reminderGate.open &&
+            reminderGate.eventId === waterState.eventId;
+          function openWaterPopup(event) {
+            if (!waterPrompt || waterBusy) return;
+            if (!reminderAvailable) {
+              navigateScreen('home', event);
+              return;
+            }
+            const trigger = event.currentTarget;
+            setReminderGate({ eventId: waterState.eventId, armed: false, open: true });
+            requestAnimationFrame(() => {
+              const active = document.activeElement;
+              if (active !== trigger && active?.tagName !== 'BODY') return;
+              if (petPanel.current?.dataset.petScreen === 'reminder')
+                petPanel.current.querySelector('.owc-water-actions button')?.focus();
+            });
+          }
+          function dismissWaterPopup() {
+            const hadFocus = petPanel.current?.contains(document.activeElement);
+            setReminderGate(dismissPetReminder);
+            if (hadFocus)
+              requestAnimationFrame(() => box.current?.querySelector('.owc-pet-handle')?.focus());
+          }
           const reactionSurface = [
             collapsed,
             editing,
@@ -1478,8 +1787,8 @@ window.__ModuleLoader__.load({
             workStatus: safeState?.status,
             phase: waterState.phase,
             ownsPrompt: waterPrompt,
-            ready: waterReady && !!safeState,
-            failed: waterError || !!error,
+            ready: waterReady,
+            failed: waterError,
             feedback: waterNotice || null,
             visible: view.companion,
             motion: view.companionMotion && !reactionState.current?.stopped,
@@ -1510,11 +1819,10 @@ window.__ModuleLoader__.load({
                 waterVisible &&
                 waterReady &&
                 !waterError &&
-                !error &&
                 !editing &&
                 !waterEditing &&
                 !ui.menu,
-              resting: ['quiet', 'rest', 'offline'].includes(companion.pose),
+              resting: ['quiet', 'offline'].includes(companion.pose),
             });
           }, [
             petMode,
@@ -1535,6 +1843,60 @@ window.__ModuleLoader__.load({
             petReactionToken.current = token;
             if (petMode && companion.animate) petMotion.current?.play('celebrate');
           }, [petMode, waterNotice?.token, companion.animate]);
+          React.useEffect(() => {
+            const media = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+            const update = () => setPreviewReduced(!!media?.matches);
+            media?.addEventListener?.('change', update);
+            return () => media?.removeEventListener?.('change', update);
+          }, []);
+          React.useLayoutEffect(() => {
+            if (!appearanceOnly || ui.pending) return;
+            setPreviewState({ phase: 'idle', action: null });
+            if (!view.companion || petModel(view.petModel).renderer !== 'video') return;
+            const artwork = previewBox.current?.querySelector('.owc-pet-art');
+            if (!artwork) return;
+            const base = createPetMotion(artwork, window, { enabled: false, ambient: false });
+            const controller = createPetVideoMotion(
+              artwork,
+              window,
+              base,
+              PET_CLIPS.models[view.petModel],
+              PET_CLIPS.probe,
+              {
+                autoIdle: false,
+                fallback: false,
+                interruptible: true,
+                onStateChange: setPreviewState,
+              },
+            );
+            previewMotion.current = controller;
+            return () => {
+              controller.destroy();
+              previewMotion.current = null;
+            };
+          }, [appearanceOnly, view.companion, view.petModel, !!ui.pending]);
+          React.useLayoutEffect(() => {
+            previewMotion.current?.configure({
+              enabled:
+                appearanceOnly &&
+                view.companion &&
+                view.companionMotion &&
+                waterVisible &&
+                !previewReduced &&
+                !ui.menu &&
+                !ui.pending,
+              resting: false,
+            });
+          }, [
+            appearanceOnly,
+            view.companion,
+            view.petModel,
+            view.companionMotion,
+            waterVisible,
+            previewReduced,
+            !!ui.menu,
+            !!ui.pending,
+          ]);
           const companionCard = (compact = false) =>
             companion.visible &&
             h(
@@ -1565,20 +1927,13 @@ window.__ModuleLoader__.load({
           const waterSummary = () => {
             if (!waterReady) return t('waterLoading');
             if (waterError) return t('waterUnavailable');
-            if (
-              water.enabled &&
-              waterContext &&
-              water.shift &&
-              water.shift.config !== waterContext.config
-            )
-              return t('waterStale');
             const labels = {
               off: 'waterOff',
               waiting: 'waterWaiting',
               break: 'waterBreak',
               paused: 'waterPaused',
               finished: 'waterFinished',
-              due: waterPrompt ? 'waterDue' : 'waterOther',
+              due: 'waterDue',
             };
             if (waterState.phase === 'quiet')
               return t('waterQuiet') + ' · ' + formatDuration(waterState.quietRemaining / 1000);
@@ -1586,19 +1941,274 @@ window.__ModuleLoader__.load({
               ? t('waterNext') + ' · ' + formatDuration(waterState.remaining / 1000)
               : t(labels[waterState.phase]);
           };
-          const waterCanRecord =
-            waterReady &&
-            !waterError &&
-            data?.configured &&
-            ['working', 'lunch'].includes(waterContext?.status) &&
-            (!water.shift || water.shift.config === waterContext.config);
-          const waterCanQuiet = waterCanRecord && water.enabled && !water.shift?.paused;
+          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')
+              return formatDuration(Math.ceil(waterState.quietRemaining / 1000));
+            return t(
+              {
+                off: 'timerOff',
+                waiting: 'timerWaiting',
+                paused: 'timerPaused',
+                finished: 'timerFinished',
+              }[waterState.phase] || 'timerUnavailable',
+            );
+          };
+          const smokingCountdownText = () =>
+            smokingUnavailable
+              ? t(smokingError ? 'timerUnavailable' : 'timerLoading')
+              : smokingState.phase === 'idle'
+                ? t('timerIdle')
+                : 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) => {
+            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(
+              'button',
+              {
+                type: 'button',
+                onClick: (event) => navigateScreen(kind === 'water' ? 'home' : 'smoking', event),
+                className: 'owc-pet-timer-row',
+                'data-countdown': kind,
+                'data-countdown-due': due && phase !== 'snoozed',
+                'data-countdown-phase': phase,
+                'aria-label': t(kind === 'water' ? 'waterCountdown' : 'smokingCountdown'),
+                title: phase === 'snoozed' ? t('timerSnoozed') + ' · ' + value : title,
+              },
+              h(
+                'span',
+                { className: 'owc-pet-timer-label' },
+                iconSvg(kind, 14),
+                extra && h('span', { className: 'owc-sr-only' }, t(extra)),
+              ),
+              h(
+                'strong',
+                null,
+                ['paused', 'break'].includes(phase) &&
+                  /^\d/.test(value) &&
+                  h('span', { className: 'owc-timer-pause', 'aria-hidden': true }, 'Ⅱ'),
+                phase === 'quiet' &&
+                  h('span', { className: 'owc-timer-pause', 'aria-hidden': true }, '☾'),
+                value.startsWith('00:') ? value.slice(3) : value.replace(/^0(?=\d:)/, ''),
+              ),
+            );
+          };
+          const waterHero = () => {
+            const ticking =
+              waterReady && !waterError && ['countdown', 'due', 'quiet'].includes(waterState.phase);
+            return h(
+              'div',
+              { className: 'owc-detail-hero' },
+              h(
+                'p',
+                { className: 'owc-detail-kicker', 'data-water-status': true },
+                t(
+                  ticking
+                    ? features.waterSnoozedUntil > now
+                      ? 'timerSnoozed'
+                      : waterState.phase === 'quiet'
+                        ? 'waterQuiet'
+                        : waterState.phase === 'due'
+                          ? 'waterDue'
+                          : 'waterNext'
+                    : 'waterTitle',
+                ),
+              ),
+              h(
+                'div',
+                {
+                  className: 'owc-detail-value' + (ticking ? '' : ' owc-detail-state'),
+                  role: 'timer',
+                  'aria-label': t('waterCountdown'),
+                },
+                waterCountdownText(),
+              ),
+              h(
+                'div',
+                { className: 'owc-detail-meta' },
+                h(
+                  'span',
+                  { 'data-water-count': true },
+                  t('waterCount') + ' · ' + (waterReady && !waterError ? waterState.count : '—'),
+                ),
+                h(
+                  'span',
+                  { className: 'owc-detail-feedback' },
+                  waterNotice ? t(waterNotice.key) : '',
+                ),
+              ),
+            );
+          };
+          const waterCountdownCard = () =>
+            h(
+              'div',
+              { className: 'owc-countdown-card', 'data-water-countdown-card': true },
+              waterHero(),
+              h(
+                'div',
+                { className: 'owc-countdown-actions' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-primary owc-water-record',
+                    disabled: !waterCanRecord || waterBusy,
+                    onClick: recordWater,
+                  },
+                  t('petRecord'),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-text',
+                    onClick: (event) => navigateScreen('home', event),
+                  },
+                  t('timerWaterDetails'),
+                ),
+              ),
+            );
+          const smokingCountdownCard = () =>
+            h(
+              'div',
+              { className: 'owc-countdown-card', 'data-smoking-countdown-card': true },
+              h(
+                'div',
+                {
+                  className: 'owc-countdown-value',
+                  role: 'timer',
+                  'aria-label': t('smokingCountdown'),
+                },
+                !smokingUnavailable && smokingState.phase === 'idle'
+                  ? formatDuration(smoking.minutes * 60)
+                  : smokingCountdownText(),
+              ),
+              h(
+                'p',
+                { role: 'status' },
+                smokingUnavailable
+                  ? t(smokingError ? 'timerUnavailable' : 'timerLoading')
+                  : smokingState.phase === 'due' && features.smokingSnoozedUntil > now
+                    ? t('timerSnoozed')
+                    : t(
+                        {
+                          idle: 'timerIdle',
+                          running: 'timerRunning',
+                          paused: 'timerPaused',
+                          due: 'timerDue',
+                        }[smokingState.phase],
+                      ),
+              ),
+              h(
+                'label',
+                null,
+                t('timerInterval'),
+                h(
+                  'select',
+                  {
+                    value: smoking.minutes,
+                    disabled: smokingUnavailable || smokingBusy,
+                    onChange: (event) =>
+                      smokingAction({ type: 'interval', minutes: Number(event.target.value) }),
+                  },
+                  COUNTDOWN_INTERVALS.map((minutes) =>
+                    h('option', { key: minutes, value: minutes }, String(minutes)),
+                  ),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-countdown-actions' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-primary',
+                    disabled: smokingUnavailable || smokingBusy,
+                    onClick: () =>
+                      smokingAction({
+                        type:
+                          smokingState.phase === 'running'
+                            ? 'pause'
+                            : smokingState.phase === 'paused'
+                              ? 'resume'
+                              : 'start',
+                      }),
+                  },
+                  t(
+                    smokingState.phase === 'running'
+                      ? 'timerPause'
+                      : smokingState.phase === 'paused'
+                        ? 'timerResume'
+                        : 'timerStart',
+                  ),
+                ),
+                smokingState.phase !== 'idle' &&
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      disabled: smokingUnavailable || smokingBusy,
+                      onClick: () => smokingAction({ type: 'restart' }),
+                    },
+                    t('timerRestart'),
+                  ),
+                smokingState.phase !== 'idle' &&
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      disabled: smokingUnavailable || smokingBusy,
+                      onClick: () => smokingAction({ type: 'stop' }),
+                    },
+                    t('timerStop'),
+                  ),
+              ),
+              smokingState.phase !== 'idle' &&
+                h('p', { className: 'owc-hint' }, t('detailNextInterval')),
+              h(
+                'details',
+                { className: 'owc-detail-more' },
+                h('summary', null, t('detailHelp')),
+                h('p', null, t('timerHint')),
+              ),
+              smokingError && h('p', { className: 'owc-error', role: 'alert' }, t(smokingError)),
+              smokingError === 'timerStorageError' &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: smokingBusy,
+                    onClick: () => smokingAction({ type: 'retry' }),
+                  },
+                  t('timerRetry'),
+                ),
+            );
+          const waterCanRecord = waterReady && !waterError;
+          const waterCanQuiet = waterCanRecord && water.enabled && !water.paused;
           const recordWater = (event) => {
             if (event.detail > 1) return;
             if (!manualAttempt.current)
               manualAttempt.current = {
                 type: 'manual-drink',
-                shiftId: waterContext.id,
                 actionId: window.crypto?.randomUUID?.() || String(Math.random()) + Date.now(),
                 ...(waterState.phase === 'due' ? { eventId: waterState.eventId } : {}),
               };
@@ -1667,14 +2277,10 @@ window.__ModuleLoader__.load({
                   'button',
                   {
                     type: 'button',
-                    disabled:
-                      waterError ||
-                      waterBusy ||
-                      !waterContext ||
-                      water.shift?.id !== waterContext.id,
-                    onClick: () => waterAction({ type: water.shift?.paused ? 'resume' : 'pause' }),
+                    disabled: waterError || waterBusy || !waterReady,
+                    onClick: () => waterAction({ type: water.paused ? 'resume' : 'pause' }),
                   },
-                  t(water.shift?.paused ? 'waterResume' : 'waterPause'),
+                  t(water.paused ? 'waterResume' : 'waterPause'),
                 ),
               waterError &&
                 h(
@@ -1724,7 +2330,7 @@ window.__ModuleLoader__.load({
                     className: 'owc-text',
                     style: { marginLeft: 'auto' },
                     'aria-label': t('waterEdit'),
-                    disabled: !waterReady || !data?.configured,
+                    disabled: !waterReady,
                     onClick: openWaterEditor,
                   },
                   t('settings'),
@@ -1757,16 +2363,59 @@ window.__ModuleLoader__.load({
                   { 'data-water-effective': water.interval },
                   t('waterEvery') + ' ' + water.interval + ' ' + t('waterMinutes'),
                 ),
-                h('span', { 'data-water-count': true }, t('waterCount') + ': ' + waterState.count),
+                h(
+                  'span',
+                  { 'data-water-count': true },
+                  t('waterCount') + ': ' + (waterReady && !waterError ? waterState.count : '—'),
+                ),
               ),
               waterControls(),
-              !['working', 'lunch'].includes(waterContext?.status) &&
-                h('p', { className: 'owc-hint' }, t('waterRecordHint')),
+              h('p', { className: 'owc-hint' }, t('waterRecordHint')),
               waterState.phase === 'quiet' &&
                 h('p', { className: 'owc-hint' }, t('waterQuietHint')),
               waterNotice && !view.companion && h('p', null, t(waterNotice.key)),
             );
 
+          const waterIntervalField = () =>
+            h(
+              'label',
+              { className: 'owc-water-interval' },
+              h('span', null, t('waterInterval')),
+              h('input', {
+                name: 'waterInterval',
+                type: 'number',
+                inputMode: 'numeric',
+                min: '5',
+                max: '240',
+                step: '1',
+                value: waterInterval,
+                'aria-invalid': waterInvalid,
+                onChange: (event) => {
+                  setWaterInterval(event.target.value);
+                  setWaterInvalid(false);
+                },
+              }),
+            );
+          const waterSettingsActions = () =>
+            h(
+              'div',
+              { className: 'owc-save' },
+              h(
+                'button',
+                { type: 'button', disabled: waterBusy, onClick: closeWaterEditor },
+                t('cancel'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'submit',
+                  className: 'owc-primary',
+                  'aria-label': t('waterSave'),
+                  disabled: !waterReady || waterError || waterBusy,
+                },
+                t(waterBusy ? 'busy' : 'save'),
+              ),
+            );
           const waterSettings = () =>
             h(
               'form',
@@ -1789,7 +2438,7 @@ window.__ModuleLoader__.load({
                 h('input', {
                   type: 'checkbox',
                   checked: waterEnabledDraft,
-                  disabled: !waterReady || waterError || waterBusy || !data?.configured,
+                  disabled: !waterReady || waterError || waterBusy,
                   onChange: (event) => {
                     setWaterEnabledDraft(event.target.checked);
                     setWaterNotice(false);
@@ -1798,8 +2447,9 @@ window.__ModuleLoader__.load({
               ),
               h(
                 'fieldset',
-                { disabled: !waterReady || waterError || waterBusy || !data?.configured },
-                h('legend', { className: 'owc-muted' }, t('waterPresets')),
+                { disabled: !waterReady || waterError || waterBusy },
+                h('legend', { className: 'owc-sr-only' }, t('waterPresets')),
+                waterIntervalField(),
                 h(
                   'div',
                   { className: 'owc-water-presets' },
@@ -1810,63 +2460,33 @@ window.__ModuleLoader__.load({
                         type: 'button',
                         key: minutes,
                         'aria-pressed': Number(waterInterval) === minutes,
+                        'aria-label': minutes + ' ' + t('waterMinutes'),
                         onClick: () => {
                           setWaterInterval(String(minutes));
                           setWaterInvalid(false);
                         },
                       },
-                      minutes + ' ' + t('waterMinutes'),
+                      String(minutes),
                     ),
                   ),
                 ),
-                h(
-                  'label',
-                  { className: 'owc-field' },
-                  h('span', null, t('waterInterval')),
-                  h('input', {
-                    name: 'waterInterval',
-                    type: 'number',
-                    inputMode: 'numeric',
-                    min: '5',
-                    max: '240',
-                    step: '1',
-                    value: waterInterval,
-                    'aria-invalid': waterInvalid,
-                    onChange: (event) => {
-                      setWaterInterval(event.target.value);
-                      setWaterInvalid(false);
-                    },
-                  }),
-                ),
               ),
               waterInvalid && h('p', { role: 'alert' }, t('waterInvalid')),
-              h(
-                'p',
-                { 'data-water-saved-interval': water.interval },
-                t('waterEffective') + ': ' + water.interval + ' ' + t('waterMinutes'),
-              ),
-              h('p', { className: 'owc-hint' }, t('waterSaveHint')),
-              h('p', { className: 'owc-hint' }, t('waterBrief')),
-              waterError && h('p', { role: 'alert' }, t('waterUnavailable')),
-              !data?.configured && h('p', null, t('waterSetup')),
-              h(
-                'div',
-                { className: 'owc-save' },
+              (Number(waterInterval) !== water.interval || waterEnabledDraft !== water.enabled) &&
                 h(
-                  'button',
-                  { type: 'button', disabled: waterBusy, onClick: closeWaterEditor },
-                  t('cancel'),
-                ),
-                h(
-                  'button',
-                  {
-                    type: 'submit',
-                    className: 'owc-primary',
-                    disabled: !waterReady || waterError || waterBusy || !data?.configured,
-                  },
-                  t(waterBusy ? 'busy' : 'waterSave'),
+                  'p',
+                  { className: 'owc-hint', 'data-water-saved-interval': water.interval },
+                  t('detailSavedInterval') +
+                    ': ' +
+                    water.interval +
+                    ' ' +
+                    t('waterMinutes') +
+                    ' · ' +
+                    t('detailDraftHint'),
                 ),
-              ),
+              h('p', { className: 'owc-hint' }, t('detailWaterRule')),
+              waterError && h('p', { role: 'alert' }, t('waterUnavailable')),
+
               waterError &&
                 h(
                   'button',
@@ -1929,6 +2549,7 @@ window.__ModuleLoader__.load({
                     ),
                   ),
               ),
+              waterSettingsActions(),
             );
           const waterReminder = () =>
             waterPrompt &&
@@ -1943,6 +2564,7 @@ window.__ModuleLoader__.load({
                   'button',
                   {
                     type: 'button',
+                    className: 'owc-primary',
                     disabled: waterBusy,
                     onClick: () => waterAction({ type: 'drink', eventId: waterState.eventId }),
                   },
@@ -1960,6 +2582,453 @@ window.__ModuleLoader__.load({
               ),
             );
 
+          const classicMini = () => {
+            const countdown = classicClock.seconds !== null;
+            const caption =
+              {
+                working: 'classicMiniWorking',
+                before: 'classicMiniBefore',
+                lunch: 'classicMiniLunch',
+              }[classicClock.phase] || 'classicMiniStatus';
+            const stateTitle =
+              { setup: 'petNeedsSetup', error: 'petLoadFailed', waiting: 'petNeedsSession' }[
+                classicClock.phase
+              ] || classicClock.title;
+            const valid = !!data?.configured && !!safeState && !error;
+            const showIncome = valid && ['working', 'lunch', 'done'].includes(safeState.status);
+            const compact = (value) => {
+              if (value === t('timerUnavailable')) return '—';
+              if (value === t('timerWaiting')) return t('classicMiniWaiting');
+              if (value === t('timerFinished')) return t('classicMiniFinished');
+              return value.startsWith('00:') ? value.slice(3) : value.replace(/^0(?=\d:)/, '');
+            };
+            const tile = (kind, screen, label, value, summary, due) =>
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-classic-mini-timer',
+                  'data-classic-timer': kind,
+                  'data-countdown-due': due,
+                  'aria-label': t(label),
+                  title: t(label) + ' · ' + summary,
+                  disabled: busy || waterBusy,
+                  onClick: (event) => navigateScreen(screen, event),
+                },
+                iconSvg(kind, 13),
+                h('strong', null, compact(value)),
+              );
+            return h(
+              'div',
+              {
+                className: 'owc-classic-mini',
+                'data-classic-overview': true,
+                'data-clock-phase': classicClock.phase,
+              },
+              h(
+                'div',
+                { className: 'owc-classic-mini-top' },
+                h(
+                  'div',
+                  {
+                    className: 'owc-grip',
+                    tabIndex: 0,
+                    title: t(classicClock.hint) + ' · ' + t('drag'),
+                    onKeyDown: gripKeys,
+                  },
+                  h('span', { className: 'owc-classic-mini-label' }, t(caption)),
+                  countdown
+                    ? h(
+                        'button',
+                        {
+                          type: 'button',
+                          onClick: (event) => navigateScreen('income', event),
+                          className: 'owc-classic-mini-time',
+                          'aria-label': t('petCountdownCard'),
+                        },
+                        formatDuration(classicClock.seconds),
+                      )
+                    : ['setup', 'error'].includes(classicClock.phase)
+                      ? h(
+                          'button',
+                          {
+                            type: 'button',
+                            className: 'owc-classic-mini-state',
+                            disabled: hostBusy,
+                            'aria-label': t(
+                              classicClock.phase === 'setup' ? 'classicConfigure' : 'retry',
+                            ),
+                            onClick:
+                              classicClock.phase === 'setup' ? openEditor : () => reload(true),
+                          },
+                          t(stateTitle),
+                        )
+                      : h(
+                          'strong',
+                          { className: 'owc-classic-mini-state', role: 'status' },
+                          t(stateTitle),
+                        ),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    title: t('expand'),
+                    'aria-label': t('expand'),
+                    onClick: () => setPreference({ mini: false }),
+                  },
+                  iconSvg('chevronDown', 14),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-classic-mini-timers' },
+                tile(
+                  'water',
+                  'water-countdown',
+                  'waterCountdown',
+                  waterCountdownText(),
+                  waterSummary(),
+                  waterState.phase === 'due',
+                ),
+                tile(
+                  'smoking',
+                  'smoking',
+                  'smokingCountdown',
+                  smokingCountdownText(),
+                  t(
+                    smokingState.phase === 'paused'
+                      ? 'timerPaused'
+                      : smokingState.phase === 'due'
+                        ? 'timerDue'
+                        : smokingState.phase === 'idle'
+                          ? 'timerIdle'
+                          : 'timerRunning',
+                  ),
+                  smokingState.phase === 'due',
+                ),
+                h(
+                  'div',
+                  { className: 'owc-classic-mini-income' },
+                  showIncome &&
+                    !view.masked &&
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-classic-mini-amount',
+                        'aria-label': t('classicIncomeEntry'),
+                        'aria-description': moneyText,
+                        title: moneyText,
+                        onClick: (event) => navigateScreen('earnings', event),
+                      },
+                      moneyText,
+                    ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      disabled: !valid,
+                      'aria-label': t(
+                        showIncome ? (view.masked ? 'show' : 'hide') : 'classicIncomeEntry',
+                      ),
+                      title: t(showIncome ? (view.masked ? 'show' : 'hide') : 'classicIncomeEntry'),
+                      'aria-pressed': showIncome ? !view.masked : undefined,
+                      onClick: (event) =>
+                        showIncome
+                          ? setPreference({ masked: !view.masked })
+                          : navigateScreen('earnings', event),
+                    },
+                    iconSvg(view.masked || !showIncome ? 'eyeOff' : 'eye', 13),
+                  ),
+                ),
+              ),
+            );
+          };
+
+          const classicHeader = () =>
+            h(
+              'div',
+              { className: 'owc-head owc-classic-head' },
+              ui.screen &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'aria-label': t(
+                      PET_EDITOR_SCREENS.includes(ui.screen) && ui.back
+                        ? 'petBack'
+                        : 'classicReturn',
+                    ),
+                    title: t(
+                      PET_EDITOR_SCREENS.includes(ui.screen) && ui.back
+                        ? 'petBack'
+                        : 'classicReturn',
+                    ),
+                    disabled: busy || waterBusy || !!ui.pending,
+                    onClick: () =>
+                      navigateScreen(PET_EDITOR_SCREENS.includes(ui.screen) ? ui.back : null),
+                  },
+                  '←',
+                ),
+              h(
+                'strong',
+                { className: 'owc-title', tabIndex: 0, title: t('drag'), onKeyDown: gripKeys },
+                t(ui.screen ? pageTitle(ui.screen) : 'classicOverview'),
+              ),
+              ['home', 'water-countdown'].includes(ui.screen) &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'aria-label': t('petWaterSettings'),
+                    title: t('petWaterSettings'),
+                    disabled: busy || waterBusy || !!ui.pending,
+                    onClick: openWaterEditor,
+                  },
+                  iconSvg('sliders', 14),
+                ),
+              waterPrompt &&
+                ui.screen &&
+                !['home', 'water-countdown'].includes(ui.screen) &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'aria-label': t('waterDue'),
+                    title: t('waterDue'),
+                    onClick: (event) => navigateScreen('home', event),
+                  },
+                  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,
+                  null,
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-text', onClick: openAppearance },
+                    t('appearanceGroup'),
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      'aria-label': t('petWorkSettings'),
+                      title: t('petWorkSettings'),
+                      disabled: hostBusy || !data,
+                      onClick: openEditor,
+                    },
+                    iconSvg('sliders'),
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      'aria-label': t(collapsed ? 'classicMore' : 'classicLess'),
+                      title: t(collapsed ? 'classicMore' : 'classicLess'),
+                      onClick: () => setPreference({ mini: !view.mini }),
+                    },
+                    iconSvg(collapsed ? 'chevronDown' : 'chevronUp'),
+                  ),
+                ),
+            );
+          const classicOverview = () => {
+            const countdown = classicClock.seconds !== null;
+            const valid = !!data?.configured && !!safeState && !error;
+            const showIncome = valid && ['working', 'lunch', 'done'].includes(safeState.status);
+            const tile = (kind, screen, label, value, summary) =>
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-classic-tile',
+                  'data-classic-timer': kind,
+                  'aria-label': t(label),
+                  disabled: busy || waterBusy,
+                  onClick: (event) => navigateScreen(screen, event),
+                },
+                h(
+                  'span',
+                  { className: 'owc-classic-tile-title' },
+                  iconSvg(kind, 14),
+                  t(kind === 'water' ? 'waterTimerShort' : 'smokingTimerShort'),
+                ),
+                h('strong', null, value),
+                h('span', { className: 'owc-classic-tile-hint' }, summary),
+              );
+            return h(
+              'div',
+              {
+                className: 'owc-classic-overview',
+                'data-classic-overview': true,
+                'data-clock-phase': classicClock.phase,
+              },
+              h(
+                'div',
+                { className: 'owc-classic-hero' },
+                h(
+                  'div',
+                  { className: 'owc-classic-kicker' },
+                  iconSvg('alarm', 14),
+                  t(countdown ? classicClock.title : 'title'),
+                ),
+                countdown
+                  ? h(
+                      'div',
+                      {
+                        className: 'owc-classic-time',
+                        role: 'timer',
+                        'aria-label': t(classicClock.title),
+                      },
+                      formatDuration(classicClock.seconds),
+                    )
+                  : h(
+                      'h3',
+                      { className: 'owc-classic-state', role: 'status' },
+                      t(classicClock.title),
+                    ),
+                h('p', { className: 'owc-classic-hint' }, t(classicClock.hint)),
+                classicClock.phase === 'setup' &&
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-primary', onClick: openEditor },
+                    t('classicConfigure'),
+                  ),
+                classicClock.phase === 'error' &&
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      disabled: hostBusy,
+                      onClick: () => reload(true),
+                    },
+                    iconSvg('refresh', 12),
+                    t('retry'),
+                  ),
+                valid &&
+                  h(
+                    'div',
+                    { className: 'owc-classic-schedule' },
+                    h(
+                      'span',
+                      null,
+                      settings.start + ' — ' + settings.end + (safeState.overnight ? ' +1' : ''),
+                    ),
+                    h('span', null, t('classicEnd') + ' ' + settings.end),
+                  ),
+              ),
+              h(
+                'div',
+                { className: 'owc-classic-timers' },
+                tile(
+                  'water',
+                  'water-countdown',
+                  'waterCountdown',
+                  waterCountdownText(),
+                  waterState.phase === 'countdown' ? t('classicWaterHint') : waterSummary(),
+                ),
+                tile(
+                  'smoking',
+                  'smoking',
+                  'smokingCountdown',
+                  smokingCountdownText(),
+                  smokingUnavailable
+                    ? t(smokingError ? 'timerUnavailable' : 'timerLoading')
+                    : t(
+                        {
+                          idle: 'classicSmokeHint',
+                          running: 'classicSmokeHint',
+                          paused: 'timerPaused',
+                          due: 'timerDue',
+                        }[smokingState.phase],
+                      ),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-classic-income' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-classic-income-link',
+                    disabled: !valid,
+                    onClick: (event) => navigateScreen('earnings', event),
+                  },
+                  h('span', null, t(showIncome ? 'classicIncome' : 'classicIncomeEntry')),
+                  showIncome &&
+                    h('strong', { 'aria-label': view.masked ? t('masked') : moneyText }, moneyText),
+                  h('span', { 'aria-hidden': true }, '›'),
+                ),
+                showIncome && salaryToggle(),
+              ),
+              !collapsed &&
+                h(
+                  'div',
+                  { className: 'owc-classic-details' },
+                  valid
+                    ? h(
+                        React.Fragment,
+                        null,
+                        h(
+                          'div',
+                          { className: 'owc-classic-detail-title' },
+                          t('classicShift'),
+                          h('span', null, Math.floor(safeState.progress * 100) + '%'),
+                        ),
+                        h(
+                          'div',
+                          {
+                            className: 'owc-progress',
+                            role: 'progressbar',
+                            'aria-label': t('progress'),
+                            'aria-valuenow': Math.floor(safeState.progress * 100),
+                            'aria-valuemin': 0,
+                            'aria-valuemax': 100,
+                          },
+                          h('div', { style: { width: safeState.progress * 100 + '%' } }),
+                        ),
+                        h(
+                          'p',
+                          null,
+                          t('shiftDate') + ' ' + safeState.shiftDate + ' · ' + settings.timezone,
+                        ),
+                        h(
+                          'p',
+                          null,
+                          settings.breakStart === settings.breakEnd
+                            ? t('noBreak')
+                            : t('lunch') + ' ' + settings.breakStart + '–' + settings.breakEnd,
+                        ),
+                        h('button', { type: 'button', onClick: openEditor }, t('petWorkSettings')),
+                      )
+                    : h('p', null, t(classicClock.hint)),
+                ),
+              waterNotice &&
+                h('p', { className: 'owc-classic-feedback', role: 'status' }, t(waterNotice.key)),
+            );
+          };
+
           const strip = () =>
             h(
               'div',
@@ -2186,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' },
@@ -2196,14 +3264,26 @@ window.__ModuleLoader__.load({
                       type: 'button',
                       className: 'owc-text',
                       onClick: () => reload(true),
-                      disabled: busy || !sessionId,
+                      disabled: hostBusy,
                     },
                     iconSvg('refresh', 12),
                     t('retry'),
                   ),
                 ),
               );
-            const status = safeState.status === 'done' ? '' : t(safeState.status);
+            const clockSeconds = ['done', 'rest'].includes(safeState.status) ? null : seconds;
+            const clockTitle =
+              safeState.status === 'before'
+                ? 'before'
+                : ['working', 'lunch'].includes(safeState.status)
+                  ? 'working'
+                  : safeState.status;
+            const status =
+              clockSeconds === null
+                ? ''
+                : safeState.status === 'lunch'
+                  ? t('lunch') + ' · ' + t('working')
+                  : t(clockTitle);
             return h(
               'div',
               { className: 'owc-main' },
@@ -2213,10 +3293,15 @@ window.__ModuleLoader__.load({
               section !== 'earnings' &&
                 h(
                   'div',
-                  { className: 'owc-time', 'aria-label': status + ' ' + duration },
-                  duration,
+                  {
+                    className: 'owc-time' + (clockSeconds === null ? ' owc-detail-state' : ''),
+                    role: clockSeconds === null ? 'status' : 'timer',
+                    'aria-label': t(clockTitle),
+                  },
+                  clockSeconds === null ? t(clockTitle) : formatDuration(clockSeconds),
                 ),
               section !== 'earnings' &&
+                ['working', 'lunch', 'done'].includes(safeState.status) &&
                 h(
                   'div',
                   {
@@ -2260,57 +3345,30 @@ window.__ModuleLoader__.load({
                   ),
                 ),
               h(
-                'div',
-                { className: 'owc-meta' },
-                h(
-                  'span',
-                  null,
-                  settings.start +
-                    ' — ' +
-                    settings.end +
-                    (settings.end < settings.start ? ' +1' : '') +
-                    ' · ' +
-                    (settings.breakStart === settings.breakEnd
-                      ? t('noBreak')
-                      : settings.breakStart + '–' + settings.breakEnd),
-                ),
-                h(
-                  'span',
-                  null,
-                  t('shiftDate') + ' ' + safeState.shiftDate + ' · ' + settings.timezone,
-                ),
-              ),
-              h(
-                'div',
-                { className: 'owc-row-actions' },
+                'details',
+                { className: 'owc-detail-more' },
+                h('summary', null, t('detailShift')),
                 h(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'owc-text',
-                    onClick: () => reload(true),
-                    disabled: busy,
-                  },
-                  iconSvg('refresh', 12),
-                  t('refresh'),
-                ),
-                petMode &&
+                  'div',
+                  { className: 'owc-meta' },
                   h(
-                    'button',
-                    { type: 'button', className: 'owc-text', onClick: openEditor },
-                    t('petWorkSettings'),
+                    'span',
+                    null,
+                    settings.start +
+                      ' — ' +
+                      settings.end +
+                      (settings.end < settings.start ? ' +1' : '') +
+                      ' · ' +
+                      (settings.breakStart === settings.breakEnd
+                        ? t('noBreak')
+                        : settings.breakStart + '–' + settings.breakEnd),
                   ),
-                !petMode &&
                   h(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'owc-text',
-                      onClick: () =>
-                        setPreference(petMode ? { petPosition: null } : { position: null }),
-                    },
-                    t('reset'),
+                    'span',
+                    null,
+                    t('shiftDate') + ' ' + safeState.shiftDate + ' · ' + settings.timezone,
                   ),
+                ),
               ),
             );
           };
@@ -2331,100 +3389,201 @@ 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 }),
-                }),
-              ),
-              h('p', { className: 'owc-hint' }, t('petAppearanceHint')),
-              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-hint', style: { margin: 0 } },
-                    Math.round(view.opacity * 100) + '% · ' + t('opacityHint'),
+                    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) + '%',
+                    ),
+                  ),
+                ),
+              ),
+            );
+          const previewActions = () => {
+            if (!view.companion || petModel(view.petModel).renderer !== 'video') return null;
+            const labels = {
+              idle: 'petPreviewIdle',
+              greet: 'petPreviewGreet',
+              celebrate: 'petPreviewDrink',
+            };
+            const names = { idle: 'petTryIdle', greet: 'petTryGreet', celebrate: 'petTryDrink' };
+            const clips = PET_CLIPS.models[view.petModel] || {};
+            const blocked =
+              !view.companionMotion || previewReduced || previewState.phase === 'unsupported';
+            const message = previewReduced
+              ? t('petPreviewReduced')
+              : !view.companionMotion
+                ? t('petPreviewEnable')
+                : previewState.phase === 'loading'
+                  ? t('petPreviewLoading')
+                  : previewState.phase === 'playing'
+                    ? t('petPreviewPlaying') + ' · ' + t(labels[previewState.action])
+                    : previewState.phase === 'unsupported'
+                      ? t('petPreviewUnsupported')
+                      : previewState.phase === 'unavailable'
+                        ? t('petPreviewUnavailable')
+                        : t('petPreviewHint');
+            return h(
+              'div',
+              { className: 'owc-preview-tools' },
+              h(
+                'div',
+                {
+                  className: 'owc-preview-actions',
+                  role: 'group',
+                  'aria-label': t('petPreviewActions'),
+                },
+                ...Object.keys(labels)
+                  .filter((action) => Object.hasOwn(clips, action))
+                  .map((action) =>
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        key: action,
+                        'aria-label': t(names[action]),
+                        'aria-pressed':
+                          previewState.action === action &&
+                          ['loading', 'playing'].includes(previewState.phase),
+                        disabled: blocked,
+                        onClick: () => previewMotion.current?.retry?.(action),
+                      },
+                      t(labels[action]),
+                    ),
                   ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    'aria-label': t('petStopPreview'),
+                    disabled: !['loading', 'playing'].includes(previewState.phase),
+                    onClick: () => previewMotion.current?.stop?.(),
+                  },
+                  t('petPreviewStop'),
                 ),
               ),
+              h(
+                'p',
+                { className: 'owc-hint owc-preview-status', role: 'status', 'aria-atomic': true },
+                message,
+              ),
             );
+          };
           const editor = () => {
             if (appearanceOnly)
               return h(
                 'div',
                 { className: 'owc-form owc-appearance', 'data-appearance-settings': true },
-                h('p', { className: 'owc-hint' }, t('petAppearancePreview')),
+                h('p', { className: 'owc-sr-only' }, t('petAppearancePreview')),
                 h(
                   'div',
-                  { 'data-appearance-preview': true, className: 'owc-appearance-preview' },
+                  {
+                    ref: previewBox,
+                    'data-appearance-preview': true,
+                    style: features.cropping ? { display: 'none' } : undefined,
+                    className: 'owc-appearance-preview',
+                  },
                   view.companion
                     ? petArtwork(
                         h,
-                        companion,
+                        { pose: 'calm', animate: false },
                         view.petSize * (petModel(view.petModel).renderer === 'svg' ? 1 : 0.65),
                         '',
-                        view.petModel,
-                        PET_SPRITES,
+                        features.previewImage ? 'custom-image' : view.petModel,
+                        { ...PET_SPRITES, 'custom-image': features.previewImage },
+                        !features.previewImage && petModel(view.petModel).renderer === 'video',
                       )
                     : h('p', null, t('petClassicPreview')),
                 ),
+                !features.previewImage && previewActions(),
                 appearanceFields(),
+                features.render('appearance'),
                 h(
                   'div',
                   { className: 'owc-save' },
                   h('button', { type: 'button', onClick: closeEditor }, t('cancel')),
                   h(
                     'button',
-                    { type: 'button', className: 'owc-primary', onClick: applyAppearance },
-                    t('petApplyAppearance'),
+                    {
+                      type: 'button',
+                      className: 'owc-primary',
+                      'aria-label': t('petApplyAppearance'),
+                      onClick: applyAppearance,
+                    },
+                    t('detailApply'),
                   ),
                 ),
               );
@@ -2432,21 +3591,7 @@ window.__ModuleLoader__.load({
             const payDaily = workingDraft.payMode === 'daily';
             const salaryKey = payDaily ? 'dailySalary' : 'monthlySalary';
             const salaryControl = view.masked
-              ? h(
-                  'div',
-                  { className: 'owc-private' },
-                  h('span', null, '••••'),
-                  h(
-                    'button',
-                    {
-                      type: 'button',
-                      className: 'owc-text',
-                      'aria-label': t('show'),
-                      onClick: () => setPreference({ masked: false }),
-                    },
-                    t('show'),
-                  ),
-                )
+              ? h('div', { className: 'owc-private', 'aria-label': t('masked') }, '••••')
               : numberInput(salaryKey);
             const breakOn = workingDraft.breakStart !== workingDraft.breakEnd;
             const commonZones = [
@@ -2471,6 +3616,20 @@ window.__ModuleLoader__.load({
             const zones = [
               ...new Set([workingDraft.timezone, ...commonZones, ...allZones].filter(Boolean)),
             ];
+            const timezoneField = () =>
+              label(
+                t('timezone'),
+                h(
+                  'select',
+                  {
+                    name: 'timezone',
+                    value: workingDraft.timezone ?? '',
+                    disabled: busy,
+                    onChange: (e) => update('timezone', e.target.value),
+                  },
+                  zones.map((zone) => h('option', { key: zone, value: zone }, zone)),
+                ),
+              );
             return h(
               'form',
               {
@@ -2487,7 +3646,22 @@ window.__ModuleLoader__.load({
               h(
                 'fieldset',
                 { className: 'owc-setting-group' },
-                h('legend', null, t('salaryGroup')),
+                h(
+                  'legend',
+                  { className: 'owc-salary-legend' },
+                  h('span', null, t('salaryGroup')),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      'aria-label': t(view.masked ? 'show' : 'hide'),
+                      title: t(view.masked ? 'show' : 'hide'),
+                      onClick: () => setPreference({ masked: !view.masked }),
+                    },
+                    iconSvg(view.masked ? 'eyeOff' : 'eye', 13),
+                  ),
+                ),
                 label(
                   t('payMode'),
                   h(
@@ -2581,22 +3755,10 @@ window.__ModuleLoader__.load({
                     ),
                   ),
                 ),
-                label(
-                  t('timezone'),
-                  h(
-                    'select',
-                    {
-                      name: 'timezone',
-                      value: workingDraft.timezone ?? '',
-                      disabled: busy,
-                      onChange: (e) => update('timezone', e.target.value),
-                    },
-                    zones.map((zone) => h('option', { key: zone, value: zone }, zone)),
-                  ),
-                ),
               ),
               preview &&
                 !preview.error &&
+                !view.masked &&
                 h(
                   'div',
                   { className: 'owc-preview' },
@@ -2620,8 +3782,7 @@ window.__ModuleLoader__.load({
                 'details',
                 { className: 'owc-advanced' },
                 h('summary', null, t('advanced')),
-                h('p', { className: 'owc-hint' }, t('sessionHint')),
-                label(t('session'), sessionSelect()),
+                timezoneField(),
               ),
               h('p', { className: 'owc-hint' }, t('privacy')),
               h(
@@ -2642,12 +3803,18 @@ window.__ModuleLoader__.load({
             );
           };
 
-          const notices = () =>
+          const notices = (showBusinessError = true) =>
             h(
               React.Fragment,
               null,
-              error && h('p', { className: 'owc-error', role: 'alert' }, error),
-              state?.error && h('p', { className: 'owc-error', role: 'alert' }, state.error),
+              showBusinessError &&
+                !LOCAL_SCREENS.includes(ui.screen) &&
+                error &&
+                h('p', { className: 'owc-error', role: 'alert' }, error),
+              showBusinessError &&
+                !LOCAL_SCREENS.includes(ui.screen) &&
+                state?.error &&
+                h('p', { className: 'owc-error', role: 'alert' }, state.error),
               notice && h('p', { className: 'owc-note', role: 'status' }, notice),
               storageError && h('p', { className: 'owc-note' }, t('storage')),
             );
@@ -2685,8 +3852,15 @@ window.__ModuleLoader__.load({
                 waterPrompt ? t('waterDue') : waterNotice ? t(waterNotice.key) : '',
               ),
             );
+          React.useLayoutEffect(() => {
+            if (!ready) return;
+            const scroll = petMode
+              ? petPanel.current?.querySelector('.owc-pet-scroll')
+              : box.current?.querySelector('.owc-content');
+            if (scroll) scroll.scrollTop = 0;
+          }, [ready, petMode, ui.screen]);
           const petShowing = petOpen;
-          const petFloating = petShowing || waterPrompt;
+          const petFloating = petShowing || autoWaterPrompt || features.alert;
           React.useLayoutEffect(() => {
             if (!petMode || !petFloating || !cardContent.current) return;
             const content = cardContent.current,
@@ -2775,22 +3949,46 @@ 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) menuBox.current?.querySelector('[role=menuitem]:not(:disabled)')?.focus();
+            if (!ui.menu) return;
+            const waterEntry = menuTrigger.current?.classList.contains('owc-pet-water-alert')
+              ? menuBox.current?.querySelector('[data-pet-menu-screen="home"]:not(:disabled)')
+              : null;
+            (
+              waterEntry || menuBox.current?.querySelector('[role=menuitem]:not(:disabled)')
+            )?.focus();
           }, [ui.menu]);
           React.useEffect(() => {
             if (!petMode || editing || waterEditing || ui.menu) return;
@@ -2806,6 +4004,32 @@ window.__ModuleLoader__.load({
             if (ui.pending && (busy || waterBusy))
               box.current?.querySelector('[data-nav-confirm]')?.focus();
           }, [ui.pending, busy, waterBusy]);
+          const classicNavigation = React.useRef({ screen: ui.screen, pending: !!ui.pending });
+          React.useEffect(() => {
+            const previous = classicNavigation.current;
+            classicNavigation.current = { screen: ui.screen, pending: !!ui.pending };
+            if (
+              petMode ||
+              !ready ||
+              (previous.screen === ui.screen && previous.pending === !!ui.pending)
+            )
+              return;
+            const frame = requestAnimationFrame(() => {
+              if (ui.pending) box.current?.querySelector('[data-keep-editing]')?.focus();
+              else if (!editing && !waterEditing) {
+                const kind = focusReturn.current?.getAttribute?.('data-classic-timer');
+                const target =
+                  !ui.screen && ['water', 'smoking'].includes(kind)
+                    ? box.current?.querySelector(`[data-classic-timer="${kind}"]`)
+                    : box.current?.querySelector(
+                        '.owc-classic-head .owc-title,.owc-classic-mini .owc-grip',
+                      );
+                target?.focus();
+              } else if (previous.pending)
+                box.current?.querySelector('form input,form select,form button')?.focus();
+            });
+            return () => cancelAnimationFrame(frame);
+          }, [petMode, ready, ui.screen, !!ui.pending]);
           const draftGuard = () =>
             h(
               'div',
@@ -2867,12 +4091,28 @@ window.__ModuleLoader__.load({
             );
           const petPageTitle = {
             home: 'petWaterCard',
+            'water-countdown': 'waterCountdown',
+            smoking: 'smokingCountdown',
             income: 'petCountdownCard',
             earnings: 'petEarningsCard',
             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',
@@ -2893,8 +4133,46 @@ window.__ModuleLoader__.load({
                 ),
               h(
                 'strong',
-                { 'data-pet-page-title': true, tabIndex: -1, style: { flex: 1, fontSize: 12 } },
-                t(petPageTitle[ui.screen] || 'waterTitle'),
+                { 'data-pet-page-title': true, tabIndex: -1, style: { flex: 1 } },
+                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',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    'aria-label': t('petWaterSettings'),
+                    title: t('petWaterSettings'),
+                    disabled: busy || waterBusy || !!ui.pending,
+                    onClick: openWaterEditor,
+                  },
+                  iconSvg('sliders', 14),
+                ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-icon',
+                  'data-panel-more': true,
+                  'aria-label': t('quickMore'),
+                  onClick: openQuickMenu,
+                },
+                '⋯',
               ),
               h(
                 'button',
@@ -2911,102 +4189,115 @@ window.__ModuleLoader__.load({
           const petHome = () =>
             h(
               'div',
-              { className: 'owc-pet-home', 'data-pet-home': true },
-
-              h(
-                'div',
-                {
-                  className: 'owc-pet-water-card' + (waterPrompt ? ' owc-water-due' : ''),
-                  'data-water-event': waterPrompt ? waterState.eventId : undefined,
-                },
+              {
+                className: 'owc-pet-home' + (waterPrompt ? ' owc-water-due' : ''),
+                'data-pet-home': true,
+                'data-water-event': waterPrompt ? waterState.eventId : undefined,
+              },
+              waterHero(),
+              waterState.phase === 'due' &&
+                features.waterSnoozedUntil > now &&
                 h(
                   'p',
-                  { className: 'owc-water-status', 'data-water-status': true },
-                  waterPrompt
-                    ? t('waterDue')
-                    : waterState.phase === 'quiet'
-                      ? t('petQuietActive')
-                      : waterSummary(),
+                  { className: 'owc-hint' },
+                  t('waterSnooze') +
+                    ' · ' +
+                    formatDuration(Math.ceil((features.waterSnoozedUntil - now) / 1000)),
                 ),
+              features.quiet &&
                 h(
-                  'div',
-                  { className: 'owc-pet-water-row' },
+                  'p',
+                  { className: 'owc-hint' },
+                  t('waterQuiet') +
+                    ' · ' +
+                    formatDuration(Math.ceil((features.state.preferences.quietUntil - now) / 1000)),
+                ),
+              h(
+                'div',
+                { className: 'owc-detail-primary-actions' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-primary owc-water-record',
+                    disabled: !waterCanRecord || waterBusy,
+                    onClick: recordWater,
+                  },
+                  t('petRecord'),
+                ),
+                waterState.phase === 'due' &&
+                  features.waterSnoozedUntil <= now &&
                   h(
                     'button',
                     {
                       type: 'button',
-                      className: 'owc-primary',
-                      disabled: !waterCanRecord || waterBusy,
-                      onClick: recordWater,
+                      className: 'owc-text',
+                      disabled: waterBusy || features.busy || !features.waterCanSnooze,
+                      onClick: () => features.snoozeWater(),
                     },
-                    t('petRecord'),
-                  ),
-                  h(
-                    'span',
-                    { 'data-water-count': true },
-                    t('waterCount') + ': ' + waterState.count,
+                    t('waterSnooze'),
                   ),
-                ),
               ),
               h(
                 'div',
-                { className: 'owc-pet-quiet-row' },
-                [30, 60].map((minutes) =>
+                { className: 'owc-detail-secondary' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    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.enabled ? 'waterEnable' : water.paused ? 'waterResume' : 'waterPause'),
+                ),
+                waterState.phase === 'quiet' &&
                   h(
                     'button',
                     {
                       type: 'button',
-                      key: minutes,
-                      disabled: !waterCanQuiet || waterBusy,
-                      onClick: () => waterAction({ type: 'quiet', minutes }),
+                      className: 'owc-text',
+                      disabled: waterBusy,
+                      onClick: () => waterAction({ type: 'end-quiet' }),
                     },
-                    t(minutes === 30 ? 'petQuiet30' : 'petQuiet60'),
+                    t('waterQuietEnd'),
                   ),
-                ),
-              ),
-              h(
-                'div',
-                { className: 'owc-pet-quiet-status' },
-                waterPrompt
-                  ? h(
-                      'button',
-                      {
-                        type: 'button',
-                        disabled: waterBusy,
-                        onClick: () => waterAction({ type: 'snooze', eventId: waterState.eventId }),
-                      },
-                      t('waterSnooze'),
-                    )
-                  : water.shift?.paused
-                    ? t('petPausedHint')
-                    : waterState.phase === 'quiet'
-                      ? h(
-                          React.Fragment,
-                          null,
-                          t('waterQuiet') +
-                            ' · ' +
-                            formatDuration(waterState.quietRemaining / 1000),
-                          h(
-                            'button',
-                            {
-                              type: 'button',
-                              disabled: waterBusy,
-                              onClick: () => waterAction({ type: 'end-quiet' }),
-                            },
-                            t('waterQuietEnd'),
-                          ),
-                        )
-                      : t('petQuietHint'),
-              ),
-              h(
-                'div',
-                { className: 'owc-pet-feedback' },
-                waterNotice
-                  ? t(waterNotice.key)
-                  : waterError
-                    ? t('waterUnavailable')
-                    : t('petHomeHint'),
               ),
+              water.enabled &&
+                h(
+                  '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'),
+                      ),
+                    ),
+                  ),
+                  h('p', { className: 'owc-hint' }, t('petQuietHint')),
+                ),
+              waterError &&
+                h('p', { className: 'owc-error', role: 'alert' }, t('waterUnavailable')),
               waterError &&
                 h(
                   'button',
@@ -3017,27 +4308,116 @@ 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(
-                'div',
-                { className: 'owc-pet-home-links' },
-                h('button', { type: 'button', onClick: openWaterEditor }, t('petWaterSettings')),
+                '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',
-                    disabled:
-                      !water.enabled ||
-                      busy ||
-                      waterBusy ||
-                      waterError ||
-                      !waterContext ||
-                      water.shift?.id !== waterContext.id,
-                    onClick: () => waterAction({ type: water.shift?.paused ? 'resume' : 'pause' }),
+                    'aria-label': t('companionRemindersTitle'),
+                    onClick: (event) => navigateScreen('reminders', event),
                   },
-                  t(water.shift?.paused ? 'waterResume' : 'waterPause'),
+                  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(
@@ -3091,9 +4471,9 @@ window.__ModuleLoader__.load({
                 [
                   ['income', 'petCountdownCard'],
                   ['home', 'petWaterCard'],
-                  ['earnings', 'petEarningsCard'],
+                  ['smoking', 'smokingCountdown'],
                   ['appearance', 'petAppearance'],
-                  ['schedule', 'petWorkSettings'],
+                  ['preferences', 'companionPreferencesTitle'],
                 ].map(([screen, label]) =>
                   h(
                     'button',
@@ -3101,14 +4481,34 @@ window.__ModuleLoader__.load({
                       key: screen,
                       type: 'button',
                       role: 'menuitem',
+                      'data-pet-menu-screen': screen,
                       tabIndex: -1,
-                      disabled: busy || waterBusy,
+                      disabled:
+                        requestBusy.current ||
+                        waterBusy ||
+                        (!LOCAL_SCREENS.includes(screen) &&
+                          (hostBusy || !data || (!data.configured && screen !== 'schedule'))),
                       onClick: (event) => navigateScreen(screen, event),
                     },
                     t(label),
                   ),
                 ),
 
+                (!data || error || state?.error) &&
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      role: 'menuitem',
+                      tabIndex: -1,
+                      disabled: hostBusy,
+                      onClick: () => {
+                        closePetMenu();
+                        void reload(true);
+                      },
+                    },
+                    t('retry'),
+                  ),
                 h('hr', null),
                 h(
                   'button',
@@ -3126,17 +4526,26 @@ window.__ModuleLoader__.load({
               ),
             );
 
+          if (!ready) return null;
           if (petMode)
             return h(
               'section',
               {
                 ref: box,
                 className: 'owc-v2 owc-pet-shell',
-                'data-version': '1.1.1',
+                'data-version': '1.2.2',
                 'data-pet-model': stageModel,
-                'data-status': safeState.status,
+                'data-status':
+                  error || state?.error
+                    ? 'error'
+                    : data?.configured && safeState
+                      ? safeState.status
+                      : data
+                        ? 'setup'
+                        : 'loading',
                 'aria-label': t('companionLabel'),
                 style: {
+                  ...featureStyle,
                   '--owc-alpha': String(view.opacity),
                   left: petGeometry.x,
                   top: petGeometry.y,
@@ -3160,11 +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 (waterPrompt)
-                    void waterAction({ type: 'snooze', eventId: waterState.eventId });
+                  else if (features.alert) features.dismissAlert();
+                  else if (autoWaterPrompt) dismissWaterPopup();
                 },
               },
-              h('style', null, STYLE),
+              h('style', null, STYLE + COMPANION_APP_STYLE),
               liveFeedback(),
               h(
                 'div',
@@ -3189,33 +4598,84 @@ window.__ModuleLoader__.load({
                     petGeometry.artworkSize,
                     waterNotice?.token,
                     stageModel,
-                    PET_SPRITES,
+                    { ...PET_SPRITES, 'custom-image': features.customImage },
                     true,
                   ),
                 ),
                 h(
                   'div',
                   {
-                    className: 'owc-pet-clock',
-                    role: 'timer',
-                    'aria-label': t('petClock'),
+                    className: 'owc-pet-timers',
+                    role: 'group',
+                    'aria-label': t('petCountdownGroup'),
                   },
-                  iconSvg('alarm', 12),
-                  h('span', { className: 'owc-pet-clock-label' }, t(safeState.status)),
-                  ['done', 'rest'].includes(safeState.status) ? null : h('strong', null, duration),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      onClick: (event) =>
+                        navigateScreen(data?.configured ? 'income' : 'schedule', event),
+                      className: 'owc-pet-clock',
+                      'aria-label': t('petCountdownCard'),
+                      title: error || state?.error ? t('petRetryHint') : undefined,
+                    },
+                    iconSvg('alarm', 12),
+                    h(
+                      'span',
+                      { className: 'owc-pet-clock-label', title: t(petClockStatus) },
+                      t(petClockStatus),
+                    ),
+                    data?.configured &&
+                      safeState &&
+                      !error &&
+                      !['done', 'rest'].includes(safeState.status)
+                      ? h('strong', null, duration)
+                      : null,
+                  ),
+                  h(
+                    'div',
+                    { className: 'owc-pet-timer-pair' },
+                    timerRow(
+                      'water',
+                      waterCountdownText(),
+                      waterState.phase === 'due',
+                      t('waterCountdown') + ' · ' + waterSummary(),
+                    ),
+                    timerRow(
+                      'smoking',
+                      smokingCountdownText(),
+                      smokingState.phase === 'due',
+                      t('smokingCountdown') +
+                        ' · ' +
+                        (smokingUnavailable
+                          ? t('timerUnavailable')
+                          : t(
+                              {
+                                idle: 'timerIdle',
+                                running: 'timerRunning',
+                                paused: 'timerPaused',
+                                due: 'timerDue',
+                              }[smokingState.phase],
+                            )),
+                    ),
+                  ),
+                  activeCustomTimer(),
+                  quickActions(),
                 ),
               ),
               waterPrompt &&
-                petShowing &&
+                !autoWaterPrompt &&
                 ui.screen !== 'home' &&
                 h(
-                  'div',
+                  'button',
                   {
+                    type: 'button',
                     className: 'owc-pet-water-alert owc-water-due',
                     'data-water-event': waterState.eventId,
-                    role: 'note',
                     'aria-label': t('petWaterAlert'),
                     title: t('petWaterAlert'),
+                    disabled: busy || waterBusy || !!ui.pending,
+                    onClick: openWaterPopup,
                     style: {
                       left: waterAlertLayout.left,
                       top: waterAlertLayout.top,
@@ -3224,7 +4684,8 @@ window.__ModuleLoader__.load({
                     },
                   },
                   iconSvg('water', 13),
-                  t('petWaterBadge'),
+                  h('span', { className: 'owc-pet-water-label' }, t('petWaterBadge')),
+                  iconSvg('chevronUp', 10),
                 ),
               contextMenu(),
               !petShowing &&
@@ -3249,12 +4710,15 @@ window.__ModuleLoader__.load({
                   'div',
                   {
                     ref: petPanel,
-                    className: 'owc-pet-panel owc-pet-workspace',
-                    'data-pet-panel': petShowing ? 'open' : 'bubble',
+                    className: 'owc-pet-panel owc-pet-workspace owc-detail-page',
+                    'data-pet-panel': petShowing ? 'open' : 'reminder',
                     '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,
@@ -3269,16 +4733,21 @@ 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',
                           {
                             type: 'button',
                             className: 'owc-icon',
-                            'aria-label': t('waterSnooze'),
+                            'aria-label': t('petDismissReminder'),
+                            title: t('petDismissReminder'),
                             disabled: waterBusy,
                             onClick: () =>
-                              waterAction({ type: 'snooze', eventId: waterState.eventId }),
+                              features.alert ? features.dismissAlert() : dismissWaterPopup(),
                           },
                           iconSvg('close', 14),
                         ),
@@ -3293,20 +4762,16 @@ window.__ModuleLoader__.load({
                         ? h(
                             React.Fragment,
                             null,
-                            ui.pending
-                              ? draftGuard()
-                              : waterEditing
-                                ? waterSettings()
-                                : editing
-                                  ? editor()
-                                  : petDetails
-                                    ? panelBody('clock')
-                                    : ui.screen === 'earnings'
-                                      ? panelBody('earnings')
-                                      : petHome(),
+                            contentForScreen(),
                             notices(),
+                            features.feedback(),
                           )
-                        : waterReminder(),
+                        : h(
+                            React.Fragment,
+                            null,
+                            features.alert ? features.render('alert') : waterReminder(),
+                            features.feedback(),
+                          ),
                     ),
                   ),
                 ),
@@ -3317,13 +4782,14 @@ window.__ModuleLoader__.load({
             {
               ref: box,
               className:
-                'owc-v2' +
+                'owc-v2 owc-classic' +
+                (!collapsed ? ' owc-detail-page' : '') +
                 (collapsed ? ' owc-compact' : '') +
                 (collapsed && waterQuickOpen ? ' owc-quick' : '') +
                 (editing || waterEditing ? ' owc-editing' : ''),
               'aria-label': t('title'),
-              'data-version': '1.1.1',
-              'data-status': safeState?.status || 'setup',
+              'data-version': '1.2.2',
+              'data-status': classicClock.phase,
               style: cardStyle,
               onPointerDown: dragDown,
               onPointerMove: dragMove,
@@ -3342,12 +4808,12 @@ window.__ModuleLoader__.load({
                   return;
                 event.preventDefault();
                 if (ui.pending) dispatchUI({ type: 'stay' });
-                else if (editing || waterEditing) navigateScreen(ui.back);
-                else if (waterQuickOpen) closeWaterQuick();
+                else if (ui.screen)
+                  navigateScreen(PET_EDITOR_SCREENS.includes(ui.screen) ? ui.back : null);
                 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',
@@ -3365,33 +4831,14 @@ window.__ModuleLoader__.load({
                   waterPrompt ? t('waterDue') : waterNotice ? t(waterNotice.key) : '',
                 ),
               ),
-              collapsed
-                ? h(
-                    React.Fragment,
-                    null,
-                    strip(),
-                    waterQuickOpen && waterOverview(true),
-                    !waterQuickOpen &&
-                      waterNotice &&
-                      (!view.companion || companion.announce) &&
-                      h('p', { className: 'owc-mini-feedback' }, t(waterNotice.key)),
-                  )
-                : h(
-                    React.Fragment,
-                    null,
-                    panelHead(),
-                    !editing && !waterEditing && companionCard(),
-                    ui.pending
-                      ? draftGuard()
-                      : waterEditing
-                        ? waterSettings()
-                        : editing
-                          ? editor()
-                          : panelBody(),
-                    notices(),
-                    !editing && !waterEditing && waterOverview(),
-                  ),
-              !collapsed && waterReminder(),
+              !collapsed && classicHeader(),
+              contentForScreen(),
+              notices(ui.screen !== null),
+              features.feedback(),
+              ui.screen === null && (features.alert ? features.render('alert') : waterReminder()),
+              ui.screen === null && activeCustomTimer(),
+              ui.screen === null && quickActions(),
+              contextMenu(),
             ),
           );
         }