dsh-offwork 1.0.1 → 1.1.1

package/client.source.js

@@ -5,8 +5,14 @@ window.__ModuleLoader__.load({
     const React = require('react');
     const h = React.createElement;
     /* PURE_MODULES */
+    /* PET_SPRITES */
+    /* PET_CLIPS */
     const messages = {
       zh: {
+        ...COMPANION_MESSAGES.zh,
+        ...PET_MESSAGES.zh,
+        ...PET_INTERACTION_MESSAGES.zh,
+        ...PET_SURFACE_MESSAGES.zh,
         title: '下班计时器',
         working: '距离下班',
         before: '距离开工',
@@ -53,6 +59,7 @@ window.__ModuleLoader__.load({
         salaryGroup: '薪资',
         scheduleGroup: '作息',
         appearanceGroup: '外观',
+        appearanceDone: '完成',
         advanced: '高级设置',
         sessionHint: '仅用于记录配置读写操作，不是账本，不影响工资计算。',
         session: '操作记录会话',
@@ -65,8 +72,68 @@ window.__ModuleLoader__.load({
         shiftDate: '班次',
         opacity: '背景透明度',
         opacityHint: '只影响背景，不影响文字。',
+        waterTitle: '喝水提醒',
+        waterEnable: '开启喝水提醒',
+        waterInterval: '自定义间隔（分钟）',
+        waterSave: '保存提醒设置',
+        waterEdit: '设置喝水提醒',
+        waterBack: '返回',
+        waterPresets: '常用间隔',
+        waterMinutes: '分钟',
+        waterEvery: '每',
+        waterEffective: '当前间隔',
+        waterManage: '数据管理',
+        waterSaveHint: '修改后点击保存，按新间隔重新计时。',
+        waterBrief: '按工作时间计时，午休暂停。关闭页面后不提醒。',
+        waterApply: '应用间隔',
+        waterInvalid: '请输入 5–240 的整数。',
+        waterNext: '下次喝水',
+        waterDue: '该喝水啦',
+        waterDrink: '喝了',
+        waterSnooze: '工作 10 分钟后',
+        waterPause: '本班暂停',
+        waterResume: '恢复本班提醒',
+        waterCount: '本班打卡',
+        waterManual: '喝了一杯',
+        waterQuick: '喝水快捷操作',
+        waterQuickClose: '收起喝水快捷操作',
+        waterRecorded: '这杯记下啦。',
+        waterRecordHint: '工作和午休期间可以打卡，关闭提醒也能记录。',
+        waterActionStale: '状态已变化，请再试一次。',
+        waterQuiet: '免打扰',
+        waterQuietAdjust: '调整时长',
+        waterQuiet30: '30 分钟',
+        waterQuiet60: '1 小时',
+        waterQuietEnd: '结束免打扰',
+        waterQuietStarted: '好，先安静一会儿，到时再提醒你。',
+        waterQuietEnded: '免打扰已结束。',
+        waterQuietHint: '按自然时间，到期自动恢复；已到期的提醒只提示一次。',
+        waterOff: '提醒已关闭',
+        waterWaiting: '等待工作时段',
+        waterBreak: '休息中，提醒计时暂停',
+        waterPaused: '本班已暂停',
+        waterFinished: '本班不再安排新提醒',
+        waterOther: '提醒已到期，等待可见标签页处理',
+        waterClear: '清除本班次数',
+        waterReset: '重置喝水提醒',
+        waterConfirm: '确认操作',
+        waterClearHint: '仅清零本班次数，保留下一次提醒和暂停状态。',
+        waterResetHint: '清除喝水提醒设置和记录，恢复默认关闭。',
+        waterLocal: '提醒设置和打卡仅保存在当前浏览器，不进入会话。与薪资配置分别保存。',
+        waterRules: '按工作分钟计时，午休冻结。开启、修改间隔或作息后重新计时；关闭页面后不提醒。',
+        waterUnavailable:
+          '喝水提醒存储不可用或数据无效，自动提醒已停止。可重试；重置将清除原喝水数据。',
+        waterRetry: '重试读取',
+        waterSetup: '请先保存薪资与作息。',
+        waterLoading: '正在读取喝水提醒…',
+        waterChanged: '提醒设置已在本浏览器生效',
+        waterStale: '作息已变化，请点击“读取最新配置”后继续提醒。',
       },
       en: {
+        ...COMPANION_MESSAGES.en,
+        ...PET_MESSAGES.en,
+        ...PET_INTERACTION_MESSAGES.en,
+        ...PET_SURFACE_MESSAGES.en,
         title: 'Offwork Clock',
         working: 'Until clock-out',
         before: 'Until work starts',
@@ -113,6 +180,7 @@ window.__ModuleLoader__.load({
         salaryGroup: 'Salary',
         scheduleGroup: 'Schedule',
         appearanceGroup: 'Appearance',
+        appearanceDone: 'Done',
         advanced: 'Advanced',
         sessionHint:
           'Logs configuration operations only; not a ledger and does not affect pay calculations.',
@@ -126,17 +194,79 @@ window.__ModuleLoader__.load({
         shiftDate: 'Shift',
         opacity: 'Surface opacity',
         opacityHint: 'Affects the background only.',
+        waterTitle: 'Water reminder',
+        waterEnable: 'Enable water reminders',
+        waterInterval: 'Custom interval (minutes)',
+        waterSave: 'Save reminder settings',
+        waterEdit: 'Reminder settings',
+        waterBack: 'Back',
+        waterPresets: 'Quick intervals',
+        waterMinutes: 'min',
+        waterEvery: 'Every',
+        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.',
+        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',
+        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.',
+        waterActionStale: 'The state changed. Please try again.',
+        waterQuiet: 'Quiet time',
+        waterQuietAdjust: 'Change duration',
+        waterQuiet30: '30 minutes',
+        waterQuiet60: '1 hour',
+        waterQuietEnd: 'End quiet time',
+        waterQuietStarted: 'Enjoy some quiet. I’ll remind you when it ends.',
+        waterQuietEnded: 'Quiet time has ended.',
+        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',
+        waterOther: 'Reminder due; waiting for a visible tab',
+        waterClear: 'Clear shift 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.',
+        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.',
+        waterUnavailable:
+          'Water storage is unavailable or invalid; automatic reminders stopped. Retry, or reset to delete old water data.',
+        waterRetry: 'Retry loading',
+        waterSetup: 'Save your salary and schedule first.',
+        waterLoading: 'Loading water reminders…',
+        waterChanged: 'Reminder preferences saved in this browser',
+        waterStale: 'Schedule changed. Reload the latest settings to continue reminders.',
       },
     };
-    const STYLE = `
+    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:active{cursor:grabbing}
 .owc-v2.owc-compact{touch-action:none;border-radius:18px}
+.owc-v2.owc-compact.owc-quick{width:296px;touch-action:manipulation}
 .owc-v2:not(.owc-compact){width:296px}
 .owc-v2 :is(button,input,select,label,a){cursor:pointer;user-select:auto;-webkit-user-select:auto}
 .owc-v2 :is(input,select){user-select:text;-webkit-user-select:text}
 .owc-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--owc-alpha,.82);background:color-mix(in srgb,var(--dsw-alias-bg-overlay) 97%,var(--owc-accent));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--dsw-alias-label-secondary) 18%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--dsw-alias-bg-base) 70%,transparent),0 8px 20px color-mix(in srgb,var(--dsw-alias-label-primary) 7%,transparent),0 14px 34px color-mix(in srgb,var(--owc-accent) 5%,transparent);transition:opacity .18s ease}
-.owc-content{position:relative;border-radius:inherit;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
+.owc-content{position:relative;border-radius:inherit;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
+.owc-content::-webkit-scrollbar{display:none}
 .owc-v2 button{appearance:none;-webkit-appearance:none;border:0;margin:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px;min-height:28px;border-radius:10px;transition:background .15s ease,color .15s ease}
 .owc-v2 button:hover{background:color-mix(in srgb,var(--dsw-alias-label-primary) 7%,transparent)}
 .owc-v2 button:focus-visible,.owc-v2 :is(input,select):focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}
@@ -212,9 +342,48 @@ window.__ModuleLoader__.load({
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.owc-glass{opacity:1}}
 @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.owc-glass{opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none}}
 @media(prefers-reduced-motion:reduce){.owc-v2 button,.owc-glass,.owc-progress>div{transition:none}}
+.owc-water{padding:10px 14px;border-top:1px solid color-mix(in srgb,var(--dsw-alias-label-primary) 12%,transparent);font-size:12px;cursor:default}
+.owc-water summary{cursor:pointer;font-weight:600;margin-bottom:8px}
+.owc-water p{margin:6px 0;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
+.owc-water-actions{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
+.owc-water-actions button{white-space:normal;text-align:left;font-size:11px}
+.owc-water-due{background:color-mix(in srgb,var(--owc-accent) 9%,transparent);border-radius:0 0 18px 18px}
+.owc-water-summary{font-size:11px!important;text-align:left;white-space:normal}
+.owc-water input[type=number]{max-width:100px}
+.owc-water .owc-check{margin-top:8px}
+.owc-water-confirm{padding:8px;border:1px solid var(--owc-accent);border-radius:8px}
+.owc-water-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.owc-water-head strong{display:flex;align-items:center;gap:5px;font-size:12px}
+.owc-water-quiet{margin:0!important;align-self:center;flex:1;min-width:90px}
+.owc-water-quiet summary{cursor:pointer;font-size:11px;padding:6px}
+.owc-water-quiet[open]{flex-basis:100%}
+.owc-water-overview{padding:12px 17px}
+.owc-water-overview .owc-water-status{font-size:12px;font-variant-numeric:tabular-nums;margin:7px 0}
+.owc-water-meta{display:flex;justify-content:space-between;gap:8px;color:var(--dsw-alias-label-secondary);font-size:11px}
+.owc-water-form{border-top:0;padding:4px 17px 16px}
+.owc-water-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-weight:600}
+.owc-water-toggle input{width:18px;height:18px;accent-color:var(--owc-accent)}
+.owc-water-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}
+.owc-water-presets button{border:1px solid color-mix(in srgb,var(--dsw-alias-label-primary) 12%,transparent);border-radius:10px;padding:8px 4px}
+.owc-water-presets button[aria-pressed=true]{background:color-mix(in srgb,var(--owc-accent) 12%,transparent);color:var(--owc-accent);border-color:var(--owc-accent)}
+.owc-water-form input[type=number]{max-width:none}
+.owc-water-form fieldset{border:0;padding:0;margin:0;min-width:0}
+.owc-water-form fieldset:disabled{opacity:.5}
+.owc-water-form .owc-save{margin:12px 0}
+.owc-water-form details{margin-top:14px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--dsw-alias-label-primary) 10%,transparent)}
+.owc-pill-salary{display:flex;align-items:center;gap:3px}
+.owc-pill-water{font-size:11px!important;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
+.owc-water-summary{justify-content:flex-start!important}
 @media(max-width:420px){.owc-pill{min-width:136px;padding:8px 8px 7px 12px}.owc-pill-status{display:none}.owc-pill-time{font-size:22px}.owc-main,.owc-form{padding-left:14px;padding-right:14px}.owc-time{font-size:31px}}
-`;
+` +
+      COMPANION_STYLE +
+      PET_STYLE +
+      PET_INTERACTION_STYLE +
+      PET_SURFACE_STYLE;
     const ICONS = {
+      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' }],
+      ],
       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 }],
@@ -264,7 +433,10 @@ window.__ModuleLoader__.load({
       apply(ctx) {
         for (const [lang, dict] of Object.entries(messages))
           ctx.effect(() => ctx.locale.register('offwork-clock', lang, dict));
-        const viewKey = 'dsh.offwork-clock.view.v4';
+        const viewKey = 'dsh.offwork-clock.view.v7';
+        const previousViewKey = 'dsh.offwork-clock.view.v6';
+        const olderViewKey = 'dsh.offwork-clock.view.v5';
+        const oldestViewKey = 'dsh.offwork-clock.view.v4';
         const legacyKey = 'dsh.offwork-clock.view.v3';
 
         function Clock(props) {
@@ -279,27 +451,154 @@ window.__ModuleLoader__.load({
           const sessionId = sessionIds.includes(sessionChoice) ? sessionChoice : sessionIds[0];
           const [data, setData] = React.useState(null);
           const [draft, setDraft] = React.useState(null);
-          const [editing, setEditing] = React.useState(false);
+          const [ui, dispatchUI] = React.useReducer(petUIReducer, initialPetUI);
+          const editing = ui.screen === 'schedule' || ui.screen === 'appearance';
+          const appearanceOnly = ui.screen === 'appearance';
+          const waterEditing = ui.screen === 'water';
+          const [appearanceDraft, setAppearanceDraft] = React.useState(null);
+          const appearanceBase = React.useRef(null);
+          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 [error, setError] = React.useState('');
           const [notice, setNotice] = React.useState('');
           const [storageError, setStorageError] = React.useState(false);
           const [now, setNow] = React.useState(Date.now());
-          const [view, setView] = React.useState(normalizeView(null));
+          const [savedView, setView] = React.useState(normalizeView(null));
+          const view =
+            appearanceOnly && appearanceDraft ? { ...savedView, ...appearanceDraft } : savedView;
           const [ready, setReady] = React.useState(false);
           const box = React.useRef(null);
+          const petPanel = React.useRef(null);
+          const cardContent = React.useRef(null);
+          const menuContent = React.useRef(null);
+          const toastContent = React.useRef(null);
+          const [toastHeight, setToastHeight] = React.useState(48);
+          const [cardMeasure, setCardMeasure] = React.useState({ key: '', height: 320 });
+          const [menuMeasure, setMenuMeasure] = React.useState({ width: 0, height: 260 });
+          const panelPlacement = React.useRef(null);
+          const petDragged = React.useRef(false);
+          const petOpen = ui.screen !== null;
+          const petDetails = ui.screen === 'income';
+          const [classicSize, setClassicSize] = React.useState({ width: 340, height: 240 });
+          const [viewport, setViewport] = React.useState(() => petViewport(window));
           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 [water, setWater] = React.useState(defaultHydration);
+          const [waterReady, setWaterReady] = React.useState(false);
+          const [waterError, setWaterError] = React.useState(false);
+          const [waterBusy, setWaterBusy] = React.useState(false);
+          const [waterVisible, setWaterVisible] = React.useState(!document.hidden);
+          const [waterInterval, setWaterInterval] = React.useState('60');
+          const [waterQuickOpen, setWaterQuickOpen] = React.useState(false);
+          const waterQuickTrigger = React.useRef(null);
+          const [waterEnabledDraft, setWaterEnabledDraft] = React.useState(false);
+          const waterPending = React.useRef(false);
+          const manualAttempt = React.useRef(null);
+          const waterPreferencesBase = React.useRef(null);
+          const editorWasOpen = React.useRef(false);
+          const previousPetMode = React.useRef(null);
+          const [waterInvalid, setWaterInvalid] = React.useState(false);
+          const [waterConfirm, setWaterConfirm] = React.useState(null);
+          const [waterNotice, setWaterNotice] = React.useState(false);
+          const reactionState = React.useRef(null);
+          const petMotion = React.useRef(null);
+          const petReactionToken = React.useRef(null);
+          const waterRuntime = React.useRef(null);
+          const waterOwner = React.useRef(null);
+          if (!waterOwner.current)
+            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,
+          };
 
           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 collapsed = !!safeState && !editing && view.mini && !error && !state?.error;
+          const petMode =
+            ready &&
+            data?.configured &&
+            !!safeState &&
+            (appearanceOnly ? appearanceWasPet.current : view.companion);
+          const stageModel = appearanceOnly ? savedView.petModel : view.petModel;
+          const petGeometry = petLayout(
+            dragPosition ?? view.petPosition,
+            viewport,
+            appearanceOnly ? savedView.petSize : view.petSize,
+            420,
+            stageModel,
+          );
+          const surfaceScreen = ui.screen || 'reminder';
+          const surfaceWidth = petSurfaceWidth(surfaceScreen, viewport);
+          const measureKey = [surfaceScreen, surfaceWidth, locale.active].join(':');
+          const measured = cardMeasure.key === measureKey;
+          const naturalHeight = measured ? cardMeasure.height : 320;
+          const anchor = {
+            x: petGeometry.x,
+            y: petGeometry.y,
+            width: petGeometry.petWidth,
+            height: petGeometry.petHeight,
+          };
+          const placementKey = [
+            measureKey,
+            viewport.width,
+            viewport.height,
+            viewport.left,
+            viewport.top,
+            (dragPosition ?? savedView.petPosition)?.x,
+            (dragPosition ?? savedView.petPosition)?.y,
+          ].join(':');
+          const previousPlacement =
+            panelPlacement.current?.key === placementKey ? panelPlacement.current.panel : null;
+          const floatingPanel = placePetSurface(anchor, viewport, {
+            width: surfaceWidth,
+            height: naturalHeight,
+            previous: previousPlacement,
+          });
+          if (!petMode || !petOpen) panelPlacement.current = null;
+          else if (measured) panelPlacement.current = { key: placementKey, panel: floatingPanel };
+          const menuWidth = petSurfaceWidth('menu', viewport);
+          const menuLayout = placePetSurface(anchor, viewport, {
+            width: menuWidth,
+            height: menuMeasure.width === menuWidth ? menuMeasure.height : 260,
+            kind: 'menu',
+            point: ui.menu,
+          });
+          const alertRoom = Math.max(
+            anchor.x - viewport.left - 24,
+            viewport.left + viewport.width - anchor.x - anchor.width - 24,
+          );
+          const waterAlertLayout = placePetSurface(anchor, viewport, {
+            width: Math.min(140, Math.max(110, alertRoom)),
+            height: 34,
+            kind: 'menu',
+            obstacles: [...(petOpen ? [floatingPanel] : []), ...(ui.menu ? [menuLayout] : [])],
+          });
+          const toastLayout = placePetSurface(anchor, viewport, {
+            width: Math.min(224, viewport.width - 24),
+            height: toastHeight,
+            kind: 'menu',
+          });
+          const collapsed =
+            !petMode &&
+            !!safeState &&
+            !editing &&
+            !waterEditing &&
+            view.mini &&
+            !error &&
+            !state?.error;
           const seconds = safeState
             ? safeState.status === 'before'
               ? safeState.startRemaining
@@ -318,10 +617,23 @@ window.__ModuleLoader__.load({
           );
           const money = (value) => (view.masked ? '••••' : formatMoney.format(value));
           const moneyText = safeState ? money(safeState.earned) : '—';
-          const cardStyle = Object.assign(
-            { '--owc-alpha': String(view.opacity) },
-            view.position ? { left: view.position.x, top: view.position.y, right: 'auto' } : {},
+          const classicPosition = clampPosition(
+            view.position ?? {
+              x: viewport.left + viewport.width - classicSize.width - 24,
+              y: viewport.top + 96,
+            },
+            viewport,
+            classicSize,
           );
+          const cardStyle = {
+            '--owc-alpha': String(view.opacity),
+            '--owc-viewport-height': Math.max(1, viewport.height - 24) + 'px',
+            left: classicPosition.x,
+            top: classicPosition.y,
+            right: 'auto',
+            maxWidth: Math.max(1, viewport.width - 24),
+            maxHeight: Math.max(1, viewport.height - 24),
+          };
 
           function safeCalculate(value) {
             try {
@@ -339,20 +651,20 @@ window.__ModuleLoader__.load({
 
           const clamp = React.useCallback(
             (position) =>
-              clampPosition(
-                position,
-                { width: window.innerWidth, height: window.innerHeight },
-                {
-                  width: box.current?.offsetWidth || 300,
-                  height: box.current?.offsetHeight || 200,
-                },
-              ),
+              clampPosition(position, petViewport(window), {
+                width: box.current?.offsetWidth || 300,
+                height: box.current?.offsetHeight || 200,
+              }),
             [],
           );
 
           React.useEffect(() => {
             try {
-              const saved = localStorage.getItem(viewKey);
+              const saved =
+                localStorage.getItem(viewKey) ??
+                localStorage.getItem(previousViewKey) ??
+                localStorage.getItem(olderViewKey) ??
+                localStorage.getItem(oldestViewKey);
               const legacy = !saved ? JSON.parse(localStorage.getItem(legacyKey) || 'null') : null;
               setView(
                 normalizeView(
@@ -378,11 +690,310 @@ window.__ModuleLoader__.load({
           React.useEffect(() => {
             if (!ready) return;
             try {
-              localStorage.setItem(viewKey, JSON.stringify(normalizeView(view)));
+              localStorage.setItem(viewKey, JSON.stringify(normalizeView(savedView)));
             } catch {
               setStorageError(true);
             }
-          }, [ready, view]);
+          }, [ready, savedView]);
+
+          React.useEffect(() => {
+            let active = true;
+            let running = 0;
+            let failed = false;
+            let store;
+            let channel;
+            try {
+              store = createHydrationStore(window.indexedDB);
+            } catch {
+              store = createHydrationStore(null);
+            }
+            try {
+              channel = new BroadcastChannel('dsh.offwork-clock.hydration.v1');
+            } 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++;
+              try {
+                if (action.type === 'retry') {
+                  store.close();
+                  try {
+                    store = createHydrationStore(window.indexedDB);
+                  } catch {
+                    store = createHydrationStore(null);
+                  }
+                }
+                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,
+                    );
+                    recorded =
+                      ['drink', 'manual-drink'].includes(action.type) &&
+                      next.shift?.count >
+                        (current.shift?.id === next.shift?.id ? (current.shift?.count ?? 0) : 0);
+                    quietChanged =
+                      ['quiet', 'end-quiet'].includes(action.type) &&
+                      next.shift?.quietUntil !== current.shift?.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);
+                setWaterError(false);
+                if (changed || action.type === 'reset') {
+                  try {
+                    channel?.postMessage('changed');
+                  } catch {}
+                }
+                return { state: result, recorded, quietChanged };
+              } catch (waterFailure) {
+                console.warn(
+                  'Water reminder storage failed:',
+                  waterFailure?.name,
+                  waterFailure?.message,
+                );
+                if (active) {
+                  failed = true;
+                  setWaterError(true);
+                  setWaterReady(true);
+                }
+              } finally {
+                running--;
+              }
+            };
+            const tick = () => {
+              void update({ type: 'tick' }, true);
+            };
+            const visibility = () => {
+              setWaterVisible(!document.hidden);
+              setNow(Date.now());
+              if (document.hidden) void update({ type: 'release' });
+              else tick();
+            };
+            const pageHide = () => {
+              setWaterVisible(false);
+              void update({ type: 'release' });
+            };
+            waterRuntime.current = { update, tick };
+            if (channel)
+              channel.onmessage = () => {
+                void update({ type: 'sync' });
+              };
+            const timer = setInterval(tick, 2000);
+            document.addEventListener('visibilitychange', visibility);
+            window.addEventListener('pageshow', visibility);
+            window.addEventListener('pagehide', pageHide);
+            window.addEventListener('focus', tick);
+            tick();
+            return () => {
+              active = false;
+              waterRuntime.current = null;
+              clearInterval(timer);
+              document.removeEventListener('visibilitychange', visibility);
+              window.removeEventListener('pageshow', visibility);
+              window.removeEventListener('pagehide', pageHide);
+              window.removeEventListener('focus', tick);
+              channel?.close();
+              void store
+                .update((current) => {
+                  if (current.shift?.claim?.owner === waterOwner.current)
+                    current.shift.claim = null;
+                  return current;
+                })
+                .catch(() => {})
+                .finally(() => store.close());
+            };
+          }, []);
+
+          React.useEffect(() => {
+            waterRuntime.current?.tick();
+          }, [settings, editing, waterEditing, error]);
+
+          React.useEffect(() => {
+            if (!waterNotice) return;
+            const timer = setTimeout(() => setWaterNotice(false), 5000);
+            return () => clearTimeout(timer);
+          }, [waterNotice]);
+
+          React.useEffect(() => {
+            if (!waterQuickOpen || !collapsed) return;
+            const closeOutside = (event) => {
+              if (!box.current?.contains(event.target)) setWaterQuickOpen(false);
+            };
+            document.addEventListener('pointerdown', closeOutside);
+            return () => document.removeEventListener('pointerdown', closeOutside);
+          }, [waterQuickOpen, collapsed]);
+
+          function toggleWaterQuick(event) {
+            waterQuickTrigger.current = event.currentTarget;
+            setWaterQuickOpen((open) => !open);
+          }
+
+          function closeWaterQuick() {
+            setWaterQuickOpen(false);
+            (
+              (waterQuickTrigger.current?.isConnected ? waterQuickTrigger.current : null) ||
+              box.current?.querySelector('.owc-pill-water') ||
+              box.current?.querySelector('.owc-companion-trigger') ||
+              box.current?.querySelector('.owc-grip')
+            )?.focus();
+          }
+
+          function openWaterEditor(event) {
+            navigateScreen('water', event);
+          }
+
+          function closeWaterEditor() {
+            if (waterPending.current) return;
+            performNavigation(ui.back);
+          }
+
+          async function saveWaterSettings(event) {
+            event.preventDefault();
+            const interval = Number(waterInterval);
+            if (!Number.isInteger(interval) || interval < 5 || interval > 240) {
+              setWaterInvalid(true);
+              return;
+            }
+            const result = await waterAction({
+              type: 'preferences',
+              ...(waterEnabledDraft !== waterPreferencesBase.current?.enabled
+                ? { enabled: waterEnabledDraft }
+                : {}),
+              ...(interval !== waterPreferencesBase.current?.interval ? { interval } : {}),
+            });
+            if (result) performNavigation(ui.back);
+            return result;
+          }
+
+          async function waterAction(action) {
+            if (waterPending.current) return;
+            waterPending.current = true;
+            setWaterBusy(true);
+            setWaterNotice(false);
+            const actionFocus = document.activeElement;
+            const hadFocus = box.current?.querySelector('.owc-water-due')?.contains(actionFocus);
+            try {
+              const outcome = await waterRuntime.current?.update(action);
+              const result = outcome?.state;
+              if (result) {
+                setWaterConfirm(null);
+                setNow(Date.now());
+                if (action.type === 'preferences')
+                  setWaterNotice({ key: 'waterChanged', kind: 'notice' });
+                if (action.type === 'drink' && outcome.recorded)
+                  setWaterNotice({ key: 'waterRecorded', kind: 'drink', token: result.revision });
+                if (action.type === 'manual-drink') {
+                  setWaterNotice({
+                    key: result.shift?.recentActions.includes(action.actionId)
+                      ? 'waterRecorded'
+                      : 'waterActionStale',
+                    kind: outcome.recorded ? 'drink' : 'notice',
+                    token: result.revision,
+                  });
+                  manualAttempt.current = null;
+                }
+                if (action.type === 'quiet')
+                  setWaterNotice({
+                    key:
+                      outcome.quietChanged && result.shift?.quietUntil > Date.now()
+                        ? 'waterQuietStarted'
+                        : 'waterActionStale',
+                    kind: 'notice',
+                  });
+                if (action.type === 'end-quiet')
+                  setWaterNotice({
+                    key: outcome.quietChanged ? 'waterQuietEnded' : 'waterActionStale',
+                    kind: 'notice',
+                  });
+                if (action.type === 'reset') {
+                  manualAttempt.current = null;
+                  setWaterInterval('60');
+                  setWaterEnabledDraft(false);
+                  setWaterInvalid(false);
+                }
+                if (
+                  hadFocus ||
+                  ['manual-drink', 'end-quiet', 'clear-count', 'reset'].includes(action.type)
+                ) {
+                  requestAnimationFrame(() => {
+                    const active = document.activeElement;
+                    if (active !== actionFocus && active?.tagName !== 'BODY') return;
+                    const target = hadFocus
+                      ? petMode
+                        ? '.owc-pet-handle'
+                        : '.owc-grip,.owc-title'
+                      : action.type === 'manual-drink'
+                        ? petMode
+                          ? '.owc-pet-water-row .owc-primary'
+                          : '.owc-water-actions .owc-primary'
+                        : action.type === 'end-quiet'
+                          ? petMode
+                            ? '.owc-pet-quiet-row button'
+                            : '.owc-water-quiet summary'
+                          : '.owc-water-form details > summary';
+                    box.current?.querySelector(target)?.focus();
+                  });
+                }
+                waterRuntime.current?.tick();
+              }
+              return result;
+            } finally {
+              waterPending.current = false;
+              setWaterBusy(false);
+            }
+          }
 
           React.useEffect(() => {
             if (sessionId) reload();
@@ -411,27 +1022,61 @@ window.__ModuleLoader__.load({
             };
           }, []);
 
-          React.useEffect(() => {
-            const resize = () =>
-              setView((current) =>
-                current.position ? { ...current, position: clamp(current.position) } : current,
+          React.useLayoutEffect(() => {
+            const resize = () => {
+              const rect = box.current?.getBoundingClientRect();
+              const nextViewport = petViewport(window);
+              setViewport((current) =>
+                Object.keys(nextViewport).every((key) => current[key] === nextViewport[key])
+                  ? current
+                  : nextViewport,
               );
+              if (!rect || petMode) return;
+              const width = box.current.offsetWidth,
+                height = box.current.offsetHeight;
+              setClassicSize((current) =>
+                current.width === width && current.height === height ? current : { width, height },
+              );
+            };
             const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(resize) : null;
             if (box.current) ro?.observe(box.current);
+            resize();
             window.addEventListener('resize', resize);
+            window.visualViewport?.addEventListener('resize', resize);
+            window.visualViewport?.addEventListener('scroll', resize);
             return () => {
               ro?.disconnect();
               window.removeEventListener('resize', resize);
+              window.visualViewport?.removeEventListener('resize', resize);
+              window.visualViewport?.removeEventListener('scroll', resize);
             };
-          }, [clamp]);
+          }, [clamp, petMode]);
 
           React.useEffect(() => {
-            if (!editing) {
-              focusReturn.current?.focus?.();
+            if (ui.pending) {
+              box.current?.querySelector('[data-keep-editing]')?.focus();
+              return;
+            }
+            const wasOpen = editorWasOpen.current;
+            const modeChanged = previousPetMode.current !== petMode;
+            previousPetMode.current = petMode;
+            editorWasOpen.current = editing || waterEditing;
+            if (editing && modeChanged) {
+              box.current?.querySelector('input[name=companion]')?.focus();
               return;
             }
-            box.current?.querySelector('form input,form select')?.focus?.();
-          }, [editing]);
+            if (!editing && !waterEditing) {
+              if (!wasOpen) return;
+              if (focusReturn.current?.isConnected) focusReturn.current.focus?.();
+              else if (petMode) box.current?.querySelector('.owc-pet-handle')?.focus?.();
+              else if (waterQuickOpen)
+                box.current?.querySelector('[data-water-quick] .owc-text')?.focus?.();
+              else box.current?.querySelector('.owc-grip,.owc-title')?.focus?.();
+              focusReturn.current = null;
+              return;
+            }
+            box.current?.querySelector('form input,form select,.owc-appearance input')?.focus?.();
+          }, [editing, waterEditing, petMode, ui.screen, ui.pending]);
 
           React.useEffect(
             () => () => {
@@ -457,12 +1102,22 @@ 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 });
-                setEditing(true);
+                dispatchUI({ type: 'navigate', screen: 'schedule', discard: true });
+                salaryBase.current = next.settings;
               }
               if (explicit) setNotice(t('synced'));
             } catch (e) {
@@ -480,12 +1135,24 @@ window.__ModuleLoader__.load({
             setError('');
             const token = ++generation.current;
             try {
-              const next = await request('set', changedSettings(settings, draft));
+              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);
-                setEditing(false);
+                dispatchUI({ type: 'navigate', screen: ui.back, discard: true });
                 setDraft(null);
                 setNotice(t('saved'));
+                return next;
               }
             } catch (e) {
               if (token === generation.current) setError(errorText(e));
@@ -497,15 +1164,22 @@ window.__ModuleLoader__.load({
 
           function commitPosition(position) {
             const next = clamp(position);
-            setPreference({ position: next });
+            setPreference(petMode ? { petPosition: next } : { position: next });
             lastPosition.current = next;
           }
           function dragDown(e) {
             if (e.button !== 0) return;
+            petDragged.current = false;
             if (
-              e.target.closest?.('button,input,select,label,a,textarea,summary,[contenteditable]')
+              petMode
+                ? !e.target.closest?.('.owc-pet-handle')
+                : e.target.closest?.(
+                    'button,input,select,label,a,textarea,summary,[contenteditable]',
+                  )
             )
               return;
+            const capture = petMode ? e.target.closest('.owc-pet-handle') : e.currentTarget;
+            if (petMode && ui.menu) dispatchUI({ type: 'dismiss-menu' });
             const rect = box.current.getBoundingClientRect();
             dragState.current = {
               dx: e.clientX - rect.left,
@@ -513,17 +1187,23 @@ window.__ModuleLoader__.load({
               x0: e.clientX,
               y0: e.clientY,
               moved: false,
+              capture,
             };
             try {
-              e.currentTarget.setPointerCapture?.(e.pointerId);
+              capture.setPointerCapture?.(e.pointerId);
             } catch {}
           }
           function dragMove(e) {
             const d = dragState.current;
             if (!d) return;
-            if (!d.moved && Math.abs(e.clientX - d.x0) + Math.abs(e.clientY - d.y0) < 4) return;
+            if (!d.moved && Math.hypot(e.clientX - d.x0, e.clientY - d.y0) < 6) return;
             d.moved = true;
+            petDragged.current = true;
             const next = clamp({ x: e.clientX - d.dx, y: e.clientY - d.dy });
+            if (petMode) {
+              setDragPosition(next);
+              petMotion.current?.drag(e.clientX - d.x0);
+            }
             lastPosition.current = next;
             if (box.current) {
               box.current.style.left = next.x + 'px';
@@ -535,16 +1215,20 @@ window.__ModuleLoader__.load({
             const d = dragState.current;
             if (!d) return;
             dragState.current = null;
+            if (petMode && d.moved) petMotion.current?.release(e.type !== 'pointerup');
+            if (e.type === 'pointercancel' || e.type === 'lostpointercapture')
+              petDragged.current = false;
             if (d.moved && lastPosition.current) commitPosition(lastPosition.current);
+            setDragPosition(null);
             try {
-              if (e.currentTarget.hasPointerCapture?.(e.pointerId))
-                e.currentTarget.releasePointerCapture(e.pointerId);
+              if (d.capture?.hasPointerCapture?.(e.pointerId))
+                d.capture.releasePointerCapture(e.pointerId);
             } catch {}
           }
           function gripKeys(e) {
             if (e.key === 'Home') {
               e.preventDefault();
-              setPreference({ position: null });
+              setPreference(petMode ? { petPosition: null } : { position: null });
               return;
             }
             if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return;
@@ -556,18 +1240,131 @@ window.__ModuleLoader__.load({
             });
           }
 
-          function openEditor(e) {
-            focusReturn.current = e.currentTarget;
-            setDraft({ ...settings });
-            setEditing(true);
-            setError('');
-            setNotice('');
+          function openAppearanceContext(event) {
+            if (
+              !box.current?.contains(event.target) ||
+              event.target.closest?.(
+                'textarea,select,input:not([type=checkbox]):not([type=radio]):not([type=range]),[contenteditable=true],[contenteditable=""]',
+              )
+            )
+              return false;
+            event.preventDefault();
+            event.stopPropagation();
+            petDragged.current = false;
+            if (ui.pending) return true;
+            if (!petMode) {
+              if (!busy && !waterBusy) navigateScreen('appearance', event);
+              return true;
+            }
+            const trigger =
+              event.target.closest('button,.owc-title,[data-pet-page-title]') ||
+              event.target
+                .closest('.owc-pet-panel')
+                ?.querySelector('[data-pet-page-title],.owc-head button') ||
+              box.current.querySelector('.owc-pet-handle');
+            menuTrigger.current = menuBox.current?.contains(trigger)
+              ? menuTrigger.current?.isConnected
+                ? menuTrigger.current
+                : box.current?.querySelector('.owc-pet-handle')
+              : trigger;
+            const rect = trigger?.getBoundingClientRect();
+            const point =
+              event.type === 'keydown'
+                ? { x: rect?.right ?? petGeometry.x, y: rect?.top ?? petGeometry.y }
+                : { x: event.clientX, y: event.clientY };
+            dispatchUI({ type: 'menu', position: point });
+            return true;
+          }
+          function appearanceShortcut(event) {
+            if (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10'))
+              return openAppearanceContext(event);
+            return false;
+          }
+          function performNavigation(screen, root = false) {
+            if (root) panelPlacement.current = null;
+            if (screen !== ui.screen) {
+              if (screen === 'water') {
+                waterPreferencesBase.current = { enabled: water.enabled, interval: water.interval };
+                setWaterInterval(String(water.interval));
+                setWaterEnabledDraft(water.enabled);
+                setWaterInvalid(false);
+                setWaterConfirm(null);
+              }
+              if (screen === 'schedule') {
+                salaryBase.current = settings;
+                setDraft({ ...settings });
+                setError('');
+              }
+              if (screen === 'appearance') {
+                appearanceBase.current = appearanceValues(savedView);
+                appearanceWasPet.current = !!petMode;
+                setAppearanceDraft(appearanceValues(savedView));
+              }
+              if (ui.screen === 'schedule') {
+                setDraft(null);
+                setError('');
+              }
+              if (ui.screen === 'appearance') setAppearanceDraft(null);
+            }
+            dispatchUI({ type: 'navigate', screen, discard: true, root });
+            setWaterConfirm(null);
+          }
+          function navigateScreen(screen, event) {
+            if (!data?.configured && screen !== 'schedule') return;
+            if (ui.pending || busy || waterBusy || requestBusy.current || waterPending.current)
+              return;
+            const root = event?.currentTarget?.getAttribute?.('role') === 'menuitem';
+            if (event?.currentTarget) focusReturn.current = event.currentTarget;
+            if (screen !== ui.screen && draftChanged()) {
+              dispatchUI({ type: 'navigate', screen, dirty: true, root });
+              return;
+            }
+            performNavigation(screen, root);
+          }
+          function draftChanged() {
+            if (waterEditing && waterPreferencesBase.current)
+              return (
+                waterEnabledDraft !== waterPreferencesBase.current.enabled ||
+                Number(waterInterval) !== waterPreferencesBase.current.interval
+              );
+            if (ui.screen === 'schedule' && draft && salaryBase.current)
+              return Object.keys(changedSettings(salaryBase.current, draft)).length > 0;
+            if (appearanceOnly && appearanceDraft && appearanceBase.current)
+              return (
+                Object.keys(changedSettings(appearanceBase.current, appearanceDraft)).length > 0
+              );
+            return false;
+          }
+          function applyAppearance() {
+            panelPlacement.current = null;
+            if (appearanceDraft)
+              setPreference(changedSettings(appearanceBase.current, appearanceDraft));
+            performNavigation(ui.back);
+            return true;
+          }
+          async function saveAndContinue() {
+            if (!ui.pending || busy || waterBusy) return;
+            const destination = ui.pending.screen;
+            const result = waterEditing
+              ? await saveWaterSettings({ preventDefault() {} })
+              : appearanceOnly
+                ? applyAppearance()
+                : await save({ preventDefault() {} });
+            if (result) performNavigation(destination, ui.pending.root);
+            else dispatchUI({ type: 'stay' });
+          }
+          function updateAppearance(patch) {
+            setAppearanceDraft((current) => ({ ...current, ...patch }));
+          }
+          function openAppearance(event) {
+            navigateScreen('appearance', event);
+          }
+          function openEditor(event) {
+            navigateScreen('schedule', event);
           }
           function closeEditor() {
-            if (!data?.configured) return;
-            setEditing(false);
-            setDraft(null);
-            setError('');
+            if ((!data?.configured && !appearanceOnly) || busy) return;
+            performNavigation(ui.back);
           }
           function update(key, value) {
             setDraft((current) => ({ ...current, [key]: value }));
@@ -644,136 +1441,756 @@ window.__ModuleLoader__.load({
               t(view.masked ? 'show' : 'hide'),
             );
 
-          const strip = () =>
+          const waterContext =
+            data?.configured && safeState && !error ? hydrationContext(settings, safeState) : null;
+          const waterState = hydrationView(water, waterContext, now);
+          const waterClaim = water.shift?.claim;
+          const waterPrompt =
+            waterReady &&
+            !waterError &&
+            !editing &&
+            !waterEditing &&
+            waterVisible &&
+            !document.hidden &&
+            waterState.phase === 'due' &&
+            waterClaim?.owner === waterOwner.current &&
+            waterClaim.sequence === water.shift.sequence &&
+            waterClaim.until > Date.now() &&
+            waterClaim.until <= Date.now() + HYDRATION_LEASE_MS;
+          const reactionSurface = [
+            collapsed,
+            editing,
+            waterEditing,
+            view.companion,
+            view.companionMotion,
+            waterVisible,
+          ].join(':');
+          if (reactionState.current?.token !== waterNotice?.token) {
+            reactionState.current = {
+              token: waterNotice?.token,
+              surface: reactionSurface,
+              stopped: ['quiet', 'paused', 'break'].includes(waterState.phase),
+            };
+          } else if (reactionState.current && reactionState.current.surface !== reactionSurface) {
+            reactionState.current.stopped = true;
+          }
+          const companion = companionPresentation({
+            workStatus: safeState?.status,
+            phase: waterState.phase,
+            ownsPrompt: waterPrompt,
+            ready: waterReady && !!safeState,
+            failed: waterError || !!error,
+            feedback: waterNotice || null,
+            visible: view.companion,
+            motion: view.companionMotion && !reactionState.current?.stopped,
+            pageVisible: waterVisible && !document.hidden && !editing && !waterEditing,
+          });
+          React.useLayoutEffect(() => {
+            if (!petMode) return;
+            const artwork = box.current?.querySelector('.owc-pet-handle > .owc-pet-art');
+            if (!artwork) return;
+            const base = createPetMotion(artwork, window, { enabled: false });
+            const controller = createPetVideoMotion(
+              artwork,
+              window,
+              base,
+              PET_CLIPS.models[stageModel],
+              PET_CLIPS.probe,
+            );
+            petMotion.current = controller;
+            return () => {
+              controller.destroy();
+              petMotion.current = null;
+            };
+          }, [petMode, stageModel]);
+          React.useLayoutEffect(() => {
+            petMotion.current?.configure({
+              enabled:
+                savedView.companionMotion &&
+                waterVisible &&
+                waterReady &&
+                !waterError &&
+                !error &&
+                !editing &&
+                !waterEditing &&
+                !ui.menu,
+              resting: ['quiet', 'rest', 'offline'].includes(companion.pose),
+            });
+          }, [
+            petMode,
+            stageModel,
+            savedView.companionMotion,
+            waterVisible,
+            waterReady,
+            waterError,
+            error,
+            editing,
+            waterEditing,
+            !!ui.menu,
+            companion.pose,
+          ]);
+          React.useLayoutEffect(() => {
+            const token = waterNotice?.token;
+            if (petReactionToken.current === token) return;
+            petReactionToken.current = token;
+            if (petMode && companion.animate) petMotion.current?.play('celebrate');
+          }, [petMode, waterNotice?.token, companion.animate]);
+          const companionCard = (compact = false) =>
+            companion.visible &&
             h(
               'div',
-              { className: 'owc-pill' },
+              { className: 'owc-companion', 'data-companion': companion.pose },
+              !compact && companionArtwork(h, companion, 52, waterNotice?.token),
               h(
                 'div',
-                { className: 'owc-pill-top' },
-                iconSvg('alarm', 16),
+                { className: 'owc-companion-copy' },
                 h(
-                  'span',
-                  { className: 'owc-grip', tabIndex: 0, title: t('drag'), onKeyDown: gripKeys },
-                  safeState.status !== 'done' &&
-                    h('span', { className: 'owc-pill-status' }, t(safeState.status)),
-                  h('span', { className: 'owc-pill-time' }, duration),
+                  'div',
+                  { className: 'owc-companion-name' },
+                  t('companionName'),
+                  h('span', null, t('companionLabel')),
+                ),
+                companion.message &&
+                  h(
+                    'p',
+                    {
+                      key: companion.announce
+                        ? 'feedback:' + (waterNotice?.token ?? companion.message)
+                        : 'ambient',
+                    },
+                    t(companion.message),
+                  ),
+              ),
+            );
+          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',
+            };
+            if (waterState.phase === 'quiet')
+              return t('waterQuiet') + ' · ' + formatDuration(waterState.quietRemaining / 1000);
+            return waterState.phase === 'countdown'
+              ? 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 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 } : {}),
+              };
+            void waterAction(manualAttempt.current);
+          };
+          const waterControls = () =>
+            h(
+              'div',
+              { className: 'owc-water-actions' },
+              !waterPrompt &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-primary',
+                    disabled: !waterCanRecord || waterBusy,
+                    onClick: recordWater,
+                  },
+                  t('waterManual'),
                 ),
+              waterState.phase === 'quiet' &&
                 h(
                   'button',
                   {
                     type: 'button',
-                    className: 'owc-icon',
-                    style: { marginLeft: 'auto' },
-                    title: t('expand'),
-                    'aria-label': t('expand'),
-                    onClick: () => setPreference({ mini: false }),
+                    disabled: waterBusy || waterError,
+                    onClick: () => waterAction({ type: 'end-quiet' }),
                   },
-                  iconSvg('chevronUp', 14),
+                  t('waterQuietEnd'),
                 ),
-              ),
+              waterCanQuiet &&
+                h(
+                  'details',
+                  { className: 'owc-water-quiet' },
+                  h(
+                    'summary',
+                    null,
+                    t(waterState.phase === 'quiet' ? 'waterQuietAdjust' : 'waterQuiet'),
+                  ),
+                  h(
+                    'div',
+                    { className: 'owc-water-actions' },
+                    [30, 60].map((minutes) =>
+                      h(
+                        'button',
+                        {
+                          key: minutes,
+                          type: 'button',
+                          disabled: waterBusy,
+                          onClick: (event) => {
+                            const menu = event.currentTarget.closest('details');
+                            menu.open = false;
+                            menu.querySelector('summary')?.focus();
+                            void waterAction({ type: 'quiet', minutes });
+                          },
+                        },
+                        t(minutes === 30 ? 'waterQuiet30' : 'waterQuiet60'),
+                      ),
+                    ),
+                  ),
+                  waterState.phase !== 'quiet' &&
+                    h('p', { className: 'owc-hint' }, t('waterQuietHint')),
+                ),
+              water.enabled &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled:
+                      waterError ||
+                      waterBusy ||
+                      !waterContext ||
+                      water.shift?.id !== waterContext.id,
+                    onClick: () => waterAction({ type: water.shift?.paused ? 'resume' : 'pause' }),
+                  },
+                  t(water.shift?.paused ? 'waterResume' : 'waterPause'),
+                ),
+              waterError &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: waterBusy,
+                    onClick: () => waterAction({ type: 'retry' }),
+                  },
+                  t('waterRetry'),
+                ),
+            );
+
+          const waterOverview = (quick = false) =>
+            h(
+              'div',
+              {
+                className: 'owc-water owc-water-overview',
+                'data-water-overview': true,
+                'data-water-quick': quick || undefined,
+                role: quick ? 'region' : undefined,
+                'aria-label': quick ? t('waterQuick') : undefined,
+                onKeyDown: quick
+                  ? (event) => {
+                      if (event.key === 'Escape') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        closeWaterQuick();
+                      }
+                    }
+                  : undefined,
+              },
               h(
                 'div',
-                { className: 'owc-pill-bottom' },
+                { className: 'owc-water-head' },
+                h('strong', null, iconSvg('water', 14), t('waterTitle')),
+                quick &&
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-text', onClick: openAppearance },
+                    t('appearanceGroup'),
+                  ),
                 h(
-                  'span',
+                  'button',
                   {
-                    className: 'owc-pill-money',
-                    'aria-label': view.masked ? t('masked') : moneyText,
+                    type: 'button',
+                    className: 'owc-text',
+                    style: { marginLeft: 'auto' },
+                    'aria-label': t('waterEdit'),
+                    disabled: !waterReady || !data?.configured,
+                    onClick: openWaterEditor,
                   },
-                  moneyText,
+                  t('settings'),
                 ),
-                h(
-                  'div',
-                  { className: 'owc-pill-actions' },
+                quick &&
                   h(
                     'button',
                     {
                       type: 'button',
                       className: 'owc-icon',
-                      title: t(view.masked ? 'show' : 'hide'),
-                      'aria-label': t(view.masked ? 'show' : 'hide'),
-                      onClick: () => setPreference({ masked: !view.masked }),
+                      'aria-label': t('waterQuickClose'),
+                      title: t('waterQuickClose'),
+                      onClick: closeWaterQuick,
                     },
-                    iconSvg(view.masked ? 'eyeOff' : 'eye', 14),
+                    iconSvg('close', 14),
                   ),
+              ),
+              quick && companionCard(true),
+              !waterPrompt &&
+                h(
+                  'p',
+                  { className: 'owc-water-status', 'data-water-status': true },
+                  waterSummary(),
+                ),
+              h(
+                'div',
+                { className: 'owc-water-meta' },
+                h(
+                  'span',
+                  { 'data-water-effective': water.interval },
+                  t('waterEvery') + ' ' + water.interval + ' ' + t('waterMinutes'),
                 ),
+                h('span', { 'data-water-count': true }, t('waterCount') + ': ' + waterState.count),
               ),
+              waterControls(),
+              !['working', 'lunch'].includes(waterContext?.status) &&
+                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 panelHead = () =>
+          const waterSettings = () =>
             h(
-              'div',
-              { className: 'owc-head' },
-              h(
-                'span',
-                {
-                  className: 'owc-title',
-                  tabIndex: 0,
-                  title: t('drag'),
-                  onKeyDown: gripKeys,
+              'form',
+              {
+                className: 'owc-water owc-water-form',
+                'data-water-settings': true,
+                onSubmit: saveWaterSettings,
+                noValidate: true,
+                onKeyDown: (event) => {
+                  if (event.key === 'Escape') {
+                    event.preventDefault();
+                    navigateScreen(ui.back);
+                  }
                 },
-                editing ? t(data?.configured ? 'settings' : 'setup') : t('title'),
+              },
+              h(
+                'label',
+                { className: 'owc-water-toggle' },
+                h('span', null, t('waterEnable')),
+                h('input', {
+                  type: 'checkbox',
+                  checked: waterEnabledDraft,
+                  disabled: !waterReady || waterError || waterBusy || !data?.configured,
+                  onChange: (event) => {
+                    setWaterEnabledDraft(event.target.checked);
+                    setWaterNotice(false);
+                  },
+                }),
               ),
-              editing
-                ? data?.configured &&
-                    h(
-                      'button',
-                      {
-                        type: 'button',
-                        className: 'owc-icon',
-                        title: t('cancel'),
-                        'aria-label': t('cancel'),
-                        onClick: closeEditor,
-                        disabled: busy,
-                      },
-                      iconSvg('close'),
-                    )
-                : h(
-                    React.Fragment,
-                    null,
-                    h(
-                      'button',
-                      {
-                        type: 'button',
-                        className: 'owc-icon',
-                        title: t('settings'),
-                        'aria-label': t('settings'),
-                        onClick: openEditor,
-                        disabled: busy,
-                      },
-                      iconSvg('sliders'),
-                    ),
+              h(
+                'fieldset',
+                { disabled: !waterReady || waterError || waterBusy || !data?.configured },
+                h('legend', { className: 'owc-muted' }, t('waterPresets')),
+                h(
+                  'div',
+                  { className: 'owc-water-presets' },
+                  [15, 30, 45, 60, 90, 120].map((minutes) =>
                     h(
                       'button',
                       {
                         type: 'button',
-                        className: 'owc-icon',
-                        title: t('collapse'),
-                        'aria-label': t('collapse'),
-                        onClick: () => setPreference({ mini: true }),
+                        key: minutes,
+                        'aria-pressed': Number(waterInterval) === minutes,
+                        onClick: () => {
+                          setWaterInterval(String(minutes));
+                          setWaterInvalid(false);
+                        },
                       },
-                      iconSvg('chevronDown'),
+                      minutes + ' ' + t('waterMinutes'),
                     ),
                   ),
-            );
-
-          const panelBody = () => {
-            if (!safeState)
-              return h(
-                'div',
-                { className: 'owc-main' },
-                h(
-                  'div',
-                  { className: 'owc-status' },
-                  h('span', { className: 'owc-dot' }),
-                  t('loading'),
                 ),
-                !sessionId && h('p', { className: 'owc-hint' }, t('noSession')),
                 h(
-                  'div',
-                  { className: 'owc-row-actions' },
-                  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' },
+                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'),
+                ),
+              ),
+              waterError &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: waterBusy,
+                    onClick: () => waterAction({ type: 'retry' }),
+                  },
+                  t('waterRetry'),
+                ),
+              h(
+                'details',
+                null,
+                h('summary', null, t('waterManage')),
+                h('p', null, t('waterLocal')),
+                h(
+                  'div',
+                  { className: 'owc-water-actions' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      disabled: waterError || waterBusy || !waterState.count,
+                      onClick: () => setWaterConfirm('clear-count'),
+                    },
+                    t('waterClear'),
+                  ),
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      disabled: waterBusy || !waterReady,
+                      onClick: () => setWaterConfirm('reset'),
+                    },
+                    t('waterReset'),
+                  ),
+                ),
+                waterConfirm &&
+                  h(
+                    'div',
+                    { className: 'owc-water-confirm' },
+                    h('p', null, t(waterConfirm === 'reset' ? 'waterResetHint' : 'waterClearHint')),
+                    h(
+                      'div',
+                      { className: 'owc-water-actions' },
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          disabled: waterBusy,
+                          onClick: () => waterAction({ type: waterConfirm }),
+                        },
+                        t('waterConfirm'),
+                      ),
+                      h(
+                        'button',
+                        { type: 'button', onClick: () => setWaterConfirm(null) },
+                        t('cancel'),
+                      ),
+                    ),
+                  ),
+              ),
+            );
+          const waterReminder = () =>
+            waterPrompt &&
+            h(
+              'div',
+              { className: 'owc-water owc-water-due', 'data-water-event': waterState.eventId },
+              h('p', null, iconSvg('water', 14), ' ' + t('waterDue')),
+              h(
+                'div',
+                { className: 'owc-water-actions' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: waterBusy,
+                    onClick: () => waterAction({ type: 'drink', eventId: waterState.eventId }),
+                  },
+                  t('waterDrink'),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: waterBusy,
+                    onClick: () => waterAction({ type: 'snooze', eventId: waterState.eventId }),
+                  },
+                  t('waterSnooze'),
+                ),
+              ),
+            );
+
+          const strip = () =>
+            h(
+              'div',
+              { className: 'owc-pill' },
+              h(
+                'div',
+                { className: 'owc-pill-top' },
+                companion.visible
+                  ? h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-companion-trigger',
+                        'aria-label': t('companionOpen'),
+                        'aria-expanded': waterQuickOpen,
+                        title:
+                          t('companionName') +
+                          (companion.message ? ' · ' + t(companion.message) : ''),
+                        onClick: toggleWaterQuick,
+                        onKeyDown: (event) => {
+                          if (event.key === 'Escape' && waterQuickOpen) {
+                            event.preventDefault();
+                            closeWaterQuick();
+                          }
+                        },
+                      },
+                      companionArtwork(h, companion, 36, waterNotice?.token),
+                    )
+                  : iconSvg('alarm', 16),
+                h(
+                  'span',
+                  { className: 'owc-grip', tabIndex: 0, title: t('drag'), onKeyDown: gripKeys },
+                  safeState.status !== 'done' &&
+                    h('span', { className: 'owc-pill-status' }, t(safeState.status)),
+                  h('span', { className: 'owc-pill-time' }, duration),
+                ),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-icon',
+                    style: { marginLeft: 'auto' },
+                    title: t('expand'),
+                    'aria-label': t('expand'),
+                    onClick: () => {
+                      setWaterQuickOpen(false);
+                      setPreference({ mini: false });
+                    },
+                  },
+                  iconSvg('chevronUp', 14),
+                ),
+              ),
+              waterPrompt
+                ? waterReminder()
+                : h(
+                    'div',
+                    { className: 'owc-pill-bottom' },
+                    h(
+                      'div',
+                      { className: 'owc-pill-salary' },
+                      h(
+                        'span',
+                        {
+                          className: 'owc-pill-money',
+                          'aria-label': view.masked ? t('masked') : moneyText,
+                        },
+                        moneyText,
+                      ),
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'owc-icon',
+                          title: t(view.masked ? 'show' : 'hide'),
+                          'aria-label': t(view.masked ? 'show' : 'hide'),
+                          onClick: () => setPreference({ masked: !view.masked }),
+                        },
+                        iconSvg(view.masked ? 'eyeOff' : 'eye', 13),
+                      ),
+                    ),
+                    (water.enabled || waterError) &&
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'owc-pill-water',
+                          onClick: toggleWaterQuick,
+                          'aria-label': t('waterQuick'),
+                          'aria-expanded': waterQuickOpen,
+                          onKeyDown: (event) => {
+                            if (event.key === 'Escape' && waterQuickOpen) {
+                              event.preventDefault();
+                              closeWaterQuick();
+                            }
+                          },
+                          title: waterSummary(),
+                        },
+                        iconSvg('water', 13),
+                        waterState.phase === 'quiet' && !waterError
+                          ? t('waterQuiet') +
+                              ' ' +
+                              formatDuration(waterState.quietRemaining / 1000).replace(/^00:/, '')
+                          : waterState.phase === 'countdown' && !waterError
+                            ? formatDuration(waterState.remaining / 1000).replace(/^00:/, '')
+                            : t(
+                                waterError
+                                  ? 'waterTitle'
+                                  : {
+                                      paused: 'waterPaused',
+                                      break: 'lunch',
+                                      waiting: 'waterWaiting',
+                                      finished: 'waterFinished',
+                                      due: 'waterDue',
+                                      off: 'waterOff',
+                                    }[waterState.phase],
+                              ),
+                      ),
+                  ),
+            );
+
+          const panelHead = () =>
+            h(
+              'div',
+              { className: 'owc-head' },
+              h(
+                'span',
+                {
+                  className: 'owc-title',
+                  tabIndex: 0,
+                  title: t('drag'),
+                  onKeyDown: gripKeys,
+                },
+                waterEditing
+                  ? t('waterTitle')
+                  : editing
+                    ? t(
+                        appearanceOnly
+                          ? 'appearanceGroup'
+                          : data?.configured
+                            ? 'settings'
+                            : 'setup',
+                      )
+                    : petMode
+                      ? t('companionName')
+                      : t('title'),
+              ),
+              !editing &&
+                !waterEditing &&
+                data?.configured &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-text',
+                    onClick: openAppearance,
+                  },
+                  t('appearanceGroup'),
+                ),
+              waterEditing
+                ? h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-icon',
+                      title: t('waterBack'),
+                      'aria-label': t('waterBack'),
+                      onClick: closeWaterEditor,
+                      disabled: waterBusy,
+                    },
+                    iconSvg('close'),
+                  )
+                : editing
+                  ? data?.configured &&
+                    h(
+                      'button',
+                      {
+                        type: 'button',
+                        className: 'owc-icon',
+                        title: t(appearanceOnly ? 'waterBack' : 'cancel'),
+                        'aria-label': t(appearanceOnly ? 'waterBack' : 'cancel'),
+                        onClick: closeEditor,
+                        disabled: busy,
+                      },
+                      iconSvg('close'),
+                    )
+                  : h(
+                      React.Fragment,
+                      null,
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'owc-icon',
+                          title: t('settings'),
+                          'aria-label': t('settings'),
+                          onClick: openEditor,
+                          disabled: busy,
+                        },
+                        iconSvg('sliders'),
+                      ),
+                      h(
+                        'button',
+                        {
+                          type: 'button',
+                          className: 'owc-icon',
+                          title: t(petMode ? 'petClose' : 'collapse'),
+                          'aria-label': t(petMode ? 'petClose' : 'collapse'),
+                          onClick: () =>
+                            petMode ? closePetPanel() : setPreference({ mini: true }),
+                        },
+                        iconSvg('chevronDown'),
+                      ),
+                    ),
+            );
+
+          const panelBody = (section = 'all') => {
+            if (!safeState)
+              return h(
+                'div',
+                { className: 'owc-main' },
+                h(
+                  'div',
+                  { className: 'owc-status' },
+                  h('span', { className: 'owc-dot' }),
+                  t('loading'),
+                ),
+                !sessionId && h('p', { className: 'owc-hint' }, t('noSession')),
+                h(
+                  'div',
+                  { className: 'owc-row-actions' },
+                  h(
                     'button',
                     {
                       type: 'button',
@@ -790,48 +2207,58 @@ window.__ModuleLoader__.load({
             return h(
               'div',
               { className: 'owc-main' },
-              status &&
+              section !== 'earnings' &&
+                status &&
                 h('div', { className: 'owc-status' }, h('span', { className: 'owc-dot' }), status),
-              h('div', { className: 'owc-time', 'aria-label': status + ' ' + duration }, duration),
-              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(
-                'div',
-                { className: 'owc-earn-row' },
-                h('span', { className: 'owc-muted' }, t('earned')),
-                salaryToggle(),
-              ),
-              h(
-                'div',
-                { className: 'owc-money', 'aria-label': view.masked ? t('masked') : moneyText },
-                moneyText,
-              ),
-              h(
-                'div',
-                { className: 'owc-stats' },
+              section !== 'earnings' &&
                 h(
                   'div',
-                  null,
-                  h('span', null, t('daily')),
-                  h('strong', null, money(safeState.daily)),
+                  { className: 'owc-time', 'aria-label': status + ' ' + duration },
+                  duration,
                 ),
+              section !== 'earnings' &&
                 h(
                   'div',
-                  null,
-                  h('span', null, t('hourly')),
-                  h('strong', null, money(safeState.hourly)),
+                  {
+                    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 + '%' } }),
+                ),
+              section !== 'clock' &&
+                h(
+                  'div',
+                  { className: 'owc-earn-row' },
+                  h('span', { className: 'owc-muted' }, t('earned')),
+                  salaryToggle(),
+                ),
+              section !== 'clock' &&
+                h(
+                  'div',
+                  { className: 'owc-money', 'aria-label': view.masked ? t('masked') : moneyText },
+                  moneyText,
+                ),
+              section !== 'clock' &&
+                h(
+                  'div',
+                  { className: 'owc-stats' },
+                  h(
+                    'div',
+                    null,
+                    h('span', null, t('daily')),
+                    h('strong', null, money(safeState.daily)),
+                  ),
+                  h(
+                    'div',
+                    null,
+                    h('span', null, t('hourly')),
+                    h('strong', null, money(safeState.hourly)),
+                  ),
                 ),
-              ),
               h(
                 'div',
                 { className: 'owc-meta' },
@@ -867,20 +2294,140 @@ window.__ModuleLoader__.load({
                   iconSvg('refresh', 12),
                   t('refresh'),
                 ),
+                petMode &&
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-text', onClick: openEditor },
+                    t('petWorkSettings'),
+                  ),
+                !petMode &&
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-text',
+                      onClick: () =>
+                        setPreference(petMode ? { petPosition: null } : { position: null }),
+                    },
+                    t('reset'),
+                  ),
+              ),
+            );
+          };
+
+          const appearanceFields = () =>
+            h(
+              'fieldset',
+              { className: 'owc-setting-group' },
+              h('legend', null, t('appearanceGroup')),
+              h(
+                'label',
+                { className: 'owc-check' },
+                h('input', {
+                  type: 'checkbox',
+                  name: 'companion',
+                  checked: view.companion,
+                  onChange: (event) => updateAppearance({ companion: event.target.checked }),
+                }),
+                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(
-                  'button',
+                  'select',
                   {
-                    type: 'button',
-                    className: 'owc-text',
-                    onClick: () => setPreference({ position: null }),
+                    'aria-label': t('petCharacter'),
+                    value: view.petModel,
+                    disabled: !view.companion,
+                    onChange: (event) => updateAppearance({ petModel: event.target.value }),
                   },
-                  t('reset'),
+                  ...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(
+                  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-hint', style: { margin: 0 } },
+                    Math.round(view.opacity * 100) + '% · ' + t('opacityHint'),
+                  ),
                 ),
               ),
             );
-          };
-
           const editor = () => {
+            if (appearanceOnly)
+              return h(
+                'div',
+                { className: 'owc-form owc-appearance', 'data-appearance-settings': true },
+                h('p', { className: 'owc-hint' }, t('petAppearancePreview')),
+                h(
+                  'div',
+                  { 'data-appearance-preview': true, className: 'owc-appearance-preview' },
+                  view.companion
+                    ? petArtwork(
+                        h,
+                        companion,
+                        view.petSize * (petModel(view.petModel).renderer === 'svg' ? 1 : 0.65),
+                        '',
+                        view.petModel,
+                        PET_SPRITES,
+                      )
+                    : h('p', null, t('petClassicPreview')),
+                ),
+                appearanceFields(),
+                h(
+                  'div',
+                  { className: 'owc-save' },
+                  h('button', { type: 'button', onClick: closeEditor }, t('cancel')),
+                  h(
+                    'button',
+                    { type: 'button', className: 'owc-primary', onClick: applyAppearance },
+                    t('petApplyAppearance'),
+                  ),
+                ),
+              );
             if (!workingDraft) return null;
             const payDaily = workingDraft.payMode === 'daily';
             const salaryKey = payDaily ? 'dailySalary' : 'monthlySalary';
@@ -932,7 +2479,7 @@ window.__ModuleLoader__.load({
                 onKeyDown: (e) => {
                   if (e.key === 'Escape') {
                     e.preventDefault();
-                    closeEditor();
+                    navigateScreen(ui.back);
                   }
                 },
               },
@@ -1048,34 +2595,6 @@ window.__ModuleLoader__.load({
                   ),
                 ),
               ),
-              h(
-                'fieldset',
-                { className: 'owc-setting-group' },
-                h('legend', null, t('appearanceGroup')),
-                label(
-                  t('opacity'),
-                  h(
-                    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: (e) => setPreference({ opacity: e.target.valueAsNumber / 100 }),
-                    }),
-                    h(
-                      'span',
-                      { className: 'owc-hint', style: { margin: 0 } },
-                      Math.round(view.opacity * 100) + '% · ' + t('opacityHint'),
-                    ),
-                  ),
-                ),
-              ),
               preview &&
                 !preview.error &&
                 h(
@@ -1133,14 +2652,677 @@ window.__ModuleLoader__.load({
               storageError && h('p', { className: 'owc-note' }, t('storage')),
             );
 
+          function closePetPanel() {
+            navigateScreen(null);
+          }
+          function interactWithPet(event) {
+            if (petDragged.current && event.detail !== 0) {
+              petDragged.current = false;
+              return;
+            }
+            petDragged.current = false;
+            if (!ui.pending) petMotion.current?.play('greet');
+          }
+          function closePetMenu(restore = true) {
+            dispatchUI({ type: 'dismiss-menu' });
+            if (restore)
+              (menuTrigger.current?.isConnected
+                ? menuTrigger.current
+                : box.current?.querySelector('.owc-pet-handle')
+              )?.focus();
+          }
+          const liveFeedback = () =>
+            h(
+              'span',
+              { className: 'owc-sr-only', role: 'status', 'aria-atomic': true },
+              h(
+                'span',
+                {
+                  key: waterPrompt
+                    ? waterState.eventId
+                    : (waterNotice?.token ?? waterNotice?.key ?? 'idle'),
+                },
+                waterPrompt ? t('waterDue') : waterNotice ? t(waterNotice.key) : '',
+              ),
+            );
+          const petShowing = petOpen;
+          const petFloating = petShowing || waterPrompt;
+          React.useLayoutEffect(() => {
+            if (!petMode || !petFloating || !cardContent.current) return;
+            const content = cardContent.current,
+              header = petPanel.current?.querySelector('.owc-head');
+            let frame = 0;
+            const measure = () => {
+              const height = Math.ceil(
+                content.getBoundingClientRect().height +
+                  (header?.getBoundingClientRect().height ?? 0) +
+                  2,
+              );
+              setCardMeasure((current) =>
+                current.key === measureKey && Math.abs(current.height - height) < 1
+                  ? current
+                  : { key: measureKey, height },
+              );
+            };
+            const observer =
+              typeof ResizeObserver === 'function'
+                ? new ResizeObserver(() => {
+                    cancelAnimationFrame(frame);
+                    frame = requestAnimationFrame(measure);
+                  })
+                : null;
+            observer?.observe(content);
+            if (header) observer?.observe(header);
+            measure();
+            return () => {
+              observer?.disconnect();
+              cancelAnimationFrame(frame);
+            };
+          }, [petMode, petFloating, measureKey, ui.pending]);
+          React.useLayoutEffect(() => {
+            if (!petMode || !ui.menu || !menuContent.current) return;
+            const content = menuContent.current;
+            let frame = 0;
+            const measure = () => {
+              const height = Math.ceil(content.getBoundingClientRect().height + 2);
+              setMenuMeasure((current) =>
+                current.width === menuWidth && Math.abs(current.height - height) < 1
+                  ? current
+                  : { width: menuWidth, height },
+              );
+            };
+            const observer =
+              typeof ResizeObserver === 'function'
+                ? new ResizeObserver(() => {
+                    cancelAnimationFrame(frame);
+                    frame = requestAnimationFrame(measure);
+                  })
+                : null;
+            observer?.observe(content);
+            measure();
+            return () => {
+              observer?.disconnect();
+              cancelAnimationFrame(frame);
+            };
+          }, [petMode, !!ui.menu, menuWidth]);
+          React.useLayoutEffect(() => {
+            if (!petMode || petShowing || waterPrompt || !waterNotice || !toastContent.current)
+              return;
+            const content = toastContent.current;
+            let frame = 0;
+            const measure = () => {
+              const height = Math.ceil(content.getBoundingClientRect().height + 20);
+              setToastHeight((current) => (current === height ? current : height));
+            };
+            const observer =
+              typeof ResizeObserver === 'function'
+                ? new ResizeObserver(() => {
+                    cancelAnimationFrame(frame);
+                    frame = requestAnimationFrame(measure);
+                  })
+                : null;
+            observer?.observe(content);
+            measure();
+            return () => {
+              observer?.disconnect();
+              cancelAnimationFrame(frame);
+            };
+          }, [petMode, petShowing, waterPrompt, waterNotice, viewport.width]);
+          React.useEffect(() => {
+            if (!ui.menu) return;
+            const blur = () => dispatchUI({ type: 'dismiss-menu' });
+            window.addEventListener('blur', blur);
+            return () => window.removeEventListener('blur', blur);
+          }, [ui.menu]);
+          React.useEffect(() => {
+            if (!petMode || (!petShowing && !ui.menu)) return;
+            const outside = (event) => {
+              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 });
+            };
+            document.addEventListener('pointerdown', outside);
+            return () => document.removeEventListener('pointerdown', outside);
+          }, [petMode, petShowing, ui.menu, editing, waterEditing, waterBusy]);
+          React.useEffect(() => {
+            if (ui.menu) menuBox.current?.querySelector('[role=menuitem]:not(:disabled)')?.focus();
+          }, [ui.menu]);
+          React.useEffect(() => {
+            if (!petMode || editing || waterEditing || ui.menu) return;
+            if (ui.pending) {
+              box.current?.querySelector('[data-keep-editing]')?.focus();
+              return;
+            }
+            if (ui.screen === null) box.current?.querySelector('.owc-pet-handle')?.focus();
+            else petPanel.current?.querySelector('[data-pet-page-title]')?.focus();
+          }, [ui.screen]);
+
+          React.useEffect(() => {
+            if (ui.pending && (busy || waterBusy))
+              box.current?.querySelector('[data-nav-confirm]')?.focus();
+          }, [ui.pending, busy, waterBusy]);
+          const draftGuard = () =>
+            h(
+              'div',
+              {
+                className: 'owc-pet-unsaved',
+                'data-nav-confirm': true,
+                tabIndex: -1,
+                onKeyDown: (event) => {
+                  if (event.key !== 'Tab') return;
+                  const buttons = [
+                    ...event.currentTarget.querySelectorAll('button:not(:disabled)'),
+                  ];
+                  if (!buttons.length) {
+                    event.preventDefault();
+                    return;
+                  }
+                  if (event.shiftKey && document.activeElement === buttons[0]) {
+                    event.preventDefault();
+                    buttons.at(-1).focus();
+                  } else if (!event.shiftKey && document.activeElement === buttons.at(-1)) {
+                    event.preventDefault();
+                    buttons[0].focus();
+                  }
+                },
+                role: 'alertdialog',
+                'aria-label': t('petUnsaved'),
+              },
+              h('h3', null, t('petUnsaved')),
+              h('p', null, t('petUnsavedHint')),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-primary',
+                  disabled: busy || waterBusy,
+                  onClick: saveAndContinue,
+                },
+                t('petSaveContinue'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  disabled: busy || waterBusy,
+                  onClick: () => performNavigation(ui.pending.screen, ui.pending.root),
+                },
+                t('petDiscard'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  'data-keep-editing': true,
+                  disabled: busy || waterBusy,
+                  onClick: () => dispatchUI({ type: 'stay' }),
+                },
+                t('petKeepEditing'),
+              ),
+            );
+          const petPageTitle = {
+            home: 'petWaterCard',
+            income: 'petCountdownCard',
+            earnings: 'petEarningsCard',
+            water: 'petWaterSettings',
+            appearance: 'petAppearance',
+            schedule: 'petWorkSettings',
+          };
+          const petHeader = () =>
+            h(
+              'div',
+              { className: 'owc-head' },
+              PET_EDITOR_SCREENS.includes(ui.screen) &&
+                ui.back !== null &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-text',
+                    disabled: busy || waterBusy || !!ui.pending,
+                    onClick: () => navigateScreen(ui.back),
+                    'aria-label': t('petBack'),
+                  },
+                  '← ',
+                  t('petBack'),
+                ),
+              h(
+                'strong',
+                { 'data-pet-page-title': true, tabIndex: -1, style: { flex: 1, fontSize: 12 } },
+                t(petPageTitle[ui.screen] || 'waterTitle'),
+              ),
+              h(
+                'button',
+                {
+                  type: 'button',
+                  className: 'owc-icon',
+                  'aria-label': t('petCloseAll'),
+                  disabled: busy || waterBusy || !!ui.pending,
+                  onClick: closePetPanel,
+                },
+                iconSvg('close', 14),
+              ),
+            );
+          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,
+                },
+                h(
+                  'p',
+                  { className: 'owc-water-status', 'data-water-status': true },
+                  waterPrompt
+                    ? t('waterDue')
+                    : waterState.phase === 'quiet'
+                      ? t('petQuietActive')
+                      : waterSummary(),
+                ),
+                h(
+                  'div',
+                  { className: 'owc-pet-water-row' },
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      className: 'owc-primary',
+                      disabled: !waterCanRecord || waterBusy,
+                      onClick: recordWater,
+                    },
+                    t('petRecord'),
+                  ),
+                  h(
+                    'span',
+                    { 'data-water-count': true },
+                    t('waterCount') + ': ' + waterState.count,
+                  ),
+                ),
+              ),
+              h(
+                'div',
+                { className: 'owc-pet-quiet-row' },
+                [30, 60].map((minutes) =>
+                  h(
+                    'button',
+                    {
+                      type: 'button',
+                      key: minutes,
+                      disabled: !waterCanQuiet || waterBusy,
+                      onClick: () => waterAction({ type: 'quiet', minutes }),
+                    },
+                    t(minutes === 30 ? 'petQuiet30' : 'petQuiet60'),
+                  ),
+                ),
+              ),
+              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'),
+              ),
+              waterError &&
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled: waterBusy,
+                    onClick: () => waterAction({ type: 'retry' }),
+                  },
+                  t('waterRetry'),
+                ),
+              h(
+                'div',
+                { className: 'owc-pet-home-links' },
+                h('button', { type: 'button', onClick: openWaterEditor }, t('petWaterSettings')),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    disabled:
+                      !water.enabled ||
+                      busy ||
+                      waterBusy ||
+                      waterError ||
+                      !waterContext ||
+                      water.shift?.id !== waterContext.id,
+                    onClick: () => waterAction({ type: water.shift?.paused ? 'resume' : 'pause' }),
+                  },
+                  t(water.shift?.paused ? 'waterResume' : 'waterPause'),
+                ),
+              ),
+            );
+          const contextMenu = () =>
+            ui.menu &&
+            h(
+              'div',
+              {
+                ref: menuBox,
+                className: 'owc-pet-context',
+                role: 'menu',
+                'aria-label': t('petMenu'),
+                style: {
+                  left: menuLayout.left,
+                  top: menuLayout.top,
+                  width: menuLayout.width,
+                  maxHeight: menuLayout.height,
+                },
+                onBlur: (event) => {
+                  if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget))
+                    dispatchUI({ type: 'dismiss-menu' });
+                },
+                onKeyDown: (event) => {
+                  if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    closePetMenu();
+                    return;
+                  }
+                  const items = [
+                    ...event.currentTarget.querySelectorAll('[role=menuitem]:not(:disabled)'),
+                  ];
+                  const index = items.indexOf(document.activeElement);
+                  const next =
+                    event.key === 'ArrowDown'
+                      ? (index + 1) % items.length
+                      : event.key === 'ArrowUp'
+                        ? (index + items.length - 1) % items.length
+                        : event.key === 'Home'
+                          ? 0
+                          : event.key === 'End'
+                            ? items.length - 1
+                            : -1;
+                  if (next >= 0) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    items[next]?.focus();
+                  }
+                },
+              },
+              h(
+                'div',
+                { ref: menuContent, className: 'owc-menu-natural' },
+                [
+                  ['income', 'petCountdownCard'],
+                  ['home', 'petWaterCard'],
+                  ['earnings', 'petEarningsCard'],
+                  ['appearance', 'petAppearance'],
+                  ['schedule', 'petWorkSettings'],
+                ].map(([screen, label]) =>
+                  h(
+                    'button',
+                    {
+                      key: screen,
+                      type: 'button',
+                      role: 'menuitem',
+                      tabIndex: -1,
+                      disabled: busy || waterBusy,
+                      onClick: (event) => navigateScreen(screen, event),
+                    },
+                    t(label),
+                  ),
+                ),
+
+                h('hr', null),
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    role: 'menuitem',
+                    tabIndex: -1,
+                    onClick: () => {
+                      setPreference({ petPosition: null });
+                      closePetMenu();
+                    },
+                  },
+                  t('reset'),
+                ),
+              ),
+            );
+
+          if (petMode)
+            return h(
+              'section',
+              {
+                ref: box,
+                className: 'owc-v2 owc-pet-shell',
+                'data-version': '1.1.1',
+                'data-pet-model': stageModel,
+                'data-status': safeState.status,
+                'aria-label': t('companionLabel'),
+                style: {
+                  '--owc-alpha': String(view.opacity),
+                  left: petGeometry.x,
+                  top: petGeometry.y,
+                  right: 'auto',
+                  width: petGeometry.petWidth,
+                  height: petGeometry.petHeight,
+                },
+                onPointerDown: dragDown,
+                onPointerMove: dragMove,
+                onPointerUp: dragEnd,
+                onPointerCancel: dragEnd,
+                onLostPointerCapture: dragEnd,
+                onContextMenuCapture: openAppearanceContext,
+                onKeyDown: (event) => {
+                  if (appearanceShortcut(event)) return;
+                  if (event.key !== 'Escape' || event.defaultPrevented) return;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  if (ui.menu) closePetMenu();
+                  else if (busy || waterBusy) return;
+                  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 });
+                },
+              },
+              h('style', null, STYLE),
+              liveFeedback(),
+              h(
+                'div',
+                { className: 'owc-pet-stage' },
+                h(
+                  'button',
+                  {
+                    type: 'button',
+                    className: 'owc-pet-handle',
+                    'aria-label': t('petGreet'),
+                    title: t('companionName') + ' · ' + t('petHint'),
+                    onClick: interactWithPet,
+                    onPointerEnter: (event) => {
+                      if (event.pointerType === 'mouse' && !dragState.current)
+                        petMotion.current?.play('look');
+                    },
+                    onKeyDown: gripKeys,
+                  },
+                  petArtwork(
+                    h,
+                    companion,
+                    petGeometry.artworkSize,
+                    waterNotice?.token,
+                    stageModel,
+                    PET_SPRITES,
+                    true,
+                  ),
+                ),
+                h(
+                  'div',
+                  {
+                    className: 'owc-pet-clock',
+                    role: 'timer',
+                    'aria-label': t('petClock'),
+                  },
+                  iconSvg('alarm', 12),
+                  h('span', { className: 'owc-pet-clock-label' }, t(safeState.status)),
+                  ['done', 'rest'].includes(safeState.status) ? null : h('strong', null, duration),
+                ),
+              ),
+              waterPrompt &&
+                petShowing &&
+                ui.screen !== 'home' &&
+                h(
+                  'div',
+                  {
+                    className: 'owc-pet-water-alert owc-water-due',
+                    'data-water-event': waterState.eventId,
+                    role: 'note',
+                    'aria-label': t('petWaterAlert'),
+                    title: t('petWaterAlert'),
+                    style: {
+                      left: waterAlertLayout.left,
+                      top: waterAlertLayout.top,
+                      width: waterAlertLayout.width,
+                      height: waterAlertLayout.height,
+                    },
+                  },
+                  iconSvg('water', 13),
+                  t('petWaterBadge'),
+                ),
+              contextMenu(),
+              !petShowing &&
+                !waterPrompt &&
+                waterNotice &&
+                h(
+                  'div',
+                  {
+                    className: 'owc-pet-toast',
+                    'aria-hidden': true,
+                    style: {
+                      left: toastLayout.left,
+                      top: toastLayout.top,
+                      width: toastLayout.width,
+                      maxHeight: toastLayout.height,
+                    },
+                  },
+                  h('div', { ref: toastContent }, t(waterNotice.key)),
+                ),
+              petFloating &&
+                h(
+                  'div',
+                  {
+                    ref: petPanel,
+                    className: 'owc-pet-panel owc-pet-workspace',
+                    'data-pet-panel': petShowing ? 'open' : 'bubble',
+                    'data-pet-screen': ui.screen || 'reminder',
+                    'data-side': floatingPanel.side,
+                    role: 'region',
+                    'aria-label': t(petPageTitle[ui.screen] || 'waterTitle'),
+                    style: {
+                      left: floatingPanel.left,
+                      top: floatingPanel.top,
+                      width: floatingPanel.width,
+                      height: floatingPanel.height,
+                      maxHeight: floatingPanel.maxHeight,
+                    },
+                  },
+                  h('div', { className: 'owc-glass', 'aria-hidden': true }),
+                  petShowing
+                    ? petHeader()
+                    : h(
+                        'div',
+                        { className: 'owc-head' },
+                        h('strong', { style: { flex: 1, fontSize: 12 } }, t('waterTitle')),
+                        h(
+                          'button',
+                          {
+                            type: 'button',
+                            className: 'owc-icon',
+                            'aria-label': t('waterSnooze'),
+                            disabled: waterBusy,
+                            onClick: () =>
+                              waterAction({ type: 'snooze', eventId: waterState.eventId }),
+                          },
+                          iconSvg('close', 14),
+                        ),
+                      ),
+                  h(
+                    'div',
+                    { className: 'owc-pet-scroll' },
+                    h(
+                      'div',
+                      { ref: cardContent, className: 'owc-pet-natural' },
+                      petShowing
+                        ? h(
+                            React.Fragment,
+                            null,
+                            ui.pending
+                              ? draftGuard()
+                              : waterEditing
+                                ? waterSettings()
+                                : editing
+                                  ? editor()
+                                  : petDetails
+                                    ? panelBody('clock')
+                                    : ui.screen === 'earnings'
+                                      ? panelBody('earnings')
+                                      : petHome(),
+                            notices(),
+                          )
+                        : waterReminder(),
+                    ),
+                  ),
+                ),
+            );
+
           return h(
             'section',
             {
               ref: box,
               className:
-                'owc-v2' + (collapsed ? ' owc-compact' : '') + (editing ? ' owc-editing' : ''),
+                'owc-v2' +
+                (collapsed ? ' owc-compact' : '') +
+                (collapsed && waterQuickOpen ? ' owc-quick' : '') +
+                (editing || waterEditing ? ' owc-editing' : ''),
               'aria-label': t('title'),
-              'data-version': '1.0.1',
+              'data-version': '1.1.1',
               'data-status': safeState?.status || 'setup',
               style: cardStyle,
               onPointerDown: dragDown,
@@ -1148,15 +3330,68 @@ window.__ModuleLoader__.load({
               onPointerUp: dragEnd,
               onPointerCancel: dragEnd,
               onLostPointerCapture: dragEnd,
+              onContextMenuCapture: openAppearanceContext,
+              onKeyDown: (event) => {
+                if (
+                  appearanceShortcut(event) ||
+                  event.key !== 'Escape' ||
+                  event.defaultPrevented ||
+                  busy ||
+                  waterBusy
+                )
+                  return;
+                event.preventDefault();
+                if (ui.pending) dispatchUI({ type: 'stay' });
+                else if (editing || waterEditing) navigateScreen(ui.back);
+                else if (waterQuickOpen) closeWaterQuick();
+                else setPreference({ mini: true });
+              },
             },
             h('style', null, STYLE),
             h('div', { className: 'owc-glass', 'aria-hidden': 'true' }),
             h(
               'div',
               { className: 'owc-content' },
+              h(
+                'span',
+                { className: 'owc-sr-only', role: 'status', 'aria-atomic': true },
+                h(
+                  'span',
+                  {
+                    key: waterPrompt
+                      ? waterState.eventId
+                      : (waterNotice?.token ?? waterNotice?.key ?? 'idle'),
+                  },
+                  waterPrompt ? t('waterDue') : waterNotice ? t(waterNotice.key) : '',
+                ),
+              ),
               collapsed
-                ? strip()
-                : h(React.Fragment, null, panelHead(), editing ? editor() : panelBody(), notices()),
+                ? 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(),
             ),
           );
         }