dsh-offwork 1.1.0 → 1.1.2

package/pet-video.js

@@ -0,0 +1,380 @@
+// Independent media presentation; never writes settings or hydration records.
+const PET_VIDEO_SUPPORT = new WeakMap();
+
+export function petClipUrls(models, baseURI) {
+  try {
+    const base = new URL(baseURI);
+    if (!['http:', 'https:'].includes(base.protocol) || base.username || base.password) return {};
+    const prefix = new URL('offwork-clock/media/', base);
+    return Object.fromEntries(
+      Object.entries(models).map(([model, actions]) => [
+        model,
+        Object.fromEntries(
+          Object.entries(actions).flatMap(([action, path]) => {
+            if (typeof path !== 'string' || !path.startsWith('offwork-clock/media/')) return [];
+            const url = new URL(path, base);
+            return url.origin === base.origin &&
+              url.pathname.startsWith(prefix.pathname) &&
+              !url.search &&
+              !url.hash
+              ? [[action, url.href]]
+              : [];
+          }),
+        ),
+      ]),
+    );
+  } catch {
+    return {};
+  }
+}
+
+export function petVideoAlphaSupported(host, source) {
+  if (PET_VIDEO_SUPPORT.has(host)) return PET_VIDEO_SUPPORT.get(host);
+  const result = new Promise((resolve) => {
+    const video = host.document.createElement('video');
+    let timer,
+      frame,
+      delayed,
+      done = false;
+    const finish = (supported) => {
+      if (done) return;
+      done = true;
+      host.clearTimeout(timer);
+      host.clearTimeout(delayed);
+      if (frame !== undefined) video.cancelVideoFrameCallback?.(frame);
+      video.onloadeddata = video.onerror = null;
+      video.pause();
+      video.removeAttribute('src');
+      video.load();
+      resolve(supported);
+    };
+    if (!source || !video.canPlayType('video/webm; codecs="vp9"')) return finish(false);
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = 'auto';
+    const inspect = (presented = false) => {
+      if (done) return true;
+      try {
+        const canvas = host.document.createElement('canvas');
+        canvas.width = canvas.height = 16;
+        const context = canvas.getContext('2d', { willReadFrequently: true });
+        context.drawImage(video, 0, 0, 16, 16);
+        const solid = context.getImageData(1, 1, 1, 1).data[3];
+        const clear = context.getImageData(14, 14, 1, 1).data[3];
+        if (solid > 240 && clear < 8) {
+          finish(true);
+          return true;
+        }
+        if (presented && solid > 240 && clear > 240) {
+          finish(false);
+          return true;
+        }
+      } catch {
+        /* A frame can be undecoded when loadeddata fires. */
+      }
+      return false;
+    };
+    video.onloadeddata = () => {
+      if (inspect()) return;
+      if (video.requestVideoFrameCallback)
+        frame = video.requestVideoFrameCallback(() => inspect(true));
+      const poll = () => {
+        if (!inspect(true)) delayed = host.setTimeout(poll, 80);
+      };
+      delayed = host.setTimeout(poll, 80);
+      try {
+        Promise.resolve(video.play()).catch(() => {
+          if (!inspect()) finish(null);
+        });
+      } catch {
+        if (!inspect()) finish(null);
+      }
+    };
+    video.onerror = () => finish(null);
+    timer = host.setTimeout(() => {
+      if (!inspect()) finish(null);
+    }, 5000);
+    video.src = source;
+    video.load();
+  });
+  PET_VIDEO_SUPPORT.set(host, result);
+  result.then((supported) => {
+    if (supported === null && PET_VIDEO_SUPPORT.get(host) === result)
+      PET_VIDEO_SUPPORT.delete(host);
+  });
+  return result;
+}
+
+export function createPetVideoMotion(element, host, base, clips, probeSource, options = {}) {
+  const layer = element.querySelector('.owc-pet-video-layer');
+  const poster = element.querySelector('.owc-pet-video-poster');
+  if (!layer || !clips) return base;
+  const document = host.document;
+  const reduced = host.matchMedia?.('(prefers-reduced-motion: reduce)');
+  const autoIdle = options.autoIdle !== false;
+  const useFallback = options.fallback !== false;
+  const failed = new Set(),
+    retired = new Map();
+  let enabled = false,
+    resting = false,
+    dragging = false,
+    unsupported = false;
+  let destroyed = false,
+    idleTimer = null,
+    current = null,
+    displayed = null,
+    lastState = '';
+  const allowed = () => enabled && !destroyed && !document.hidden && !reduced?.matches;
+  const canIdle = () =>
+    autoIdle &&
+    allowed() &&
+    !resting &&
+    !dragging &&
+    !unsupported &&
+    Object.hasOwn(clips, 'idle') &&
+    !failed.has('idle');
+  function notify(phase, action = null) {
+    if (destroyed || lastState === phase + ':' + action) return;
+    lastState = phase + ':' + action;
+    options.onStateChange?.({ phase, action });
+  }
+  function clearIdleTimer() {
+    host.clearTimeout(idleTimer);
+    idleTimer = null;
+  }
+  function startIdle() {
+    if (canIdle() && !current) play('idle');
+  }
+  function scheduleIdle(delay = 0) {
+    clearIdleTimer();
+    if (!canIdle()) return;
+    idleTimer = host.setTimeout(() => {
+      idleTimer = null;
+      startIdle();
+    }, delay);
+  }
+  function dispose(run) {
+    if (!run || run.disposed) return;
+    run.disposed = true;
+    host.clearTimeout(run.timer);
+    const video = run.video;
+    if (!video) return;
+    video.onplaying = video.onended = video.onerror = video.onwaiting = video.onstalled = null;
+    video.pause();
+    video.removeAttribute('src');
+    video.load();
+    video.remove();
+  }
+  function flushRetired() {
+    for (const [run, timer] of retired) {
+      host.clearTimeout(timer);
+      dispose(run);
+    }
+    retired.clear();
+  }
+  function retire(run, fade) {
+    if (!run?.video || !fade || !allowed()) return dispose(run);
+    host.clearTimeout(run.timer);
+    run.video.onplaying =
+      run.video.onended =
+      run.video.onerror =
+      run.video.onwaiting =
+      run.video.onstalled =
+        null;
+    run.video.pause();
+    run.video.style.opacity = '0';
+    const timer = host.setTimeout(() => {
+      retired.delete(run);
+      dispose(run);
+    }, 150);
+    retired.set(run, timer);
+  }
+  function settleVisibleFrame() {
+    if (!displayed?.video) {
+      if (poster?.style) {
+        poster.style.transition = 'none';
+        poster.style.opacity = '1';
+        poster.getBoundingClientRect?.();
+        poster.style.opacity = '';
+        poster.style.transition = '';
+      }
+      return;
+    }
+    displayed.video.style.transition = 'none';
+    displayed.video.style.opacity = '1';
+    if (poster?.style) {
+      poster.style.transition = 'none';
+      poster.style.opacity = '0';
+    }
+    displayed.video.getBoundingClientRect?.();
+    displayed.video.style.transition = '';
+    if (poster?.style) {
+      poster.style.opacity = '';
+      poster.style.transition = '';
+    }
+  }
+  function stopMedia(fade = false) {
+    if (!fade && poster?.style) poster.style.transition = 'none';
+    clearIdleTimer();
+    flushRetired();
+    const pending = current,
+      visible = displayed;
+    current = displayed = null;
+    delete element.dataset.videoPlaying;
+    delete element.dataset.videoLoading;
+    delete element.dataset.action;
+    if (pending && pending !== visible) dispose(pending);
+    retire(visible, fade);
+    if (!fade && poster?.style) {
+      poster.getBoundingClientRect?.();
+      poster.style.transition = '';
+    }
+  }
+  function fallback(run, broken = false) {
+    if (current !== run) return;
+    if (broken) failed.add(run.action);
+    stopMedia();
+    notify(unsupported ? 'unsupported' : 'unavailable', run.action);
+    if (allowed() && run.action !== 'idle' && useFallback) {
+      base.play(run.action);
+      scheduleIdle(1400);
+    }
+  }
+  function play(action) {
+    if (!allowed() || dragging || element.dataset.action === 'drag') return false;
+    if (action === 'idle' && (resting || (current && !options.interruptible) || unsupported))
+      return false;
+    if (
+      current &&
+      (action === 'look' ||
+        current.action === action ||
+        (!options.interruptible && current.action === 'celebrate' && action === 'greet'))
+    )
+      return false;
+    if (!Object.hasOwn(clips, action) || failed.has(action) || unsupported) {
+      if (action === 'idle') return false;
+      if (current?.action === 'idle') stopMedia();
+      const played = useFallback && base.play(action);
+      if (played) scheduleIdle(1400);
+      if (!played) notify(unsupported ? 'unsupported' : 'unavailable', action);
+      return !!played;
+    }
+    clearIdleTimer();
+    settleVisibleFrame();
+    flushRetired();
+    if (current && current !== displayed) dispose(current);
+    base.release(true);
+    const run = { action, video: null, timer: null, disposed: false };
+    current = run;
+    element.dataset.action = displayed?.action || action;
+    element.dataset.videoLoading = action;
+    notify('loading', action);
+    run.timer = host.setTimeout(() => fallback(run, true), 9000);
+    petVideoAlphaSupported(host, probeSource).then((supported) => {
+      if (current !== run || !allowed()) return;
+      if (supported !== true) {
+        unsupported = supported === false;
+        return fallback(run);
+      }
+      const video = document.createElement('video');
+      run.video = video;
+      video.muted = video.defaultMuted = true;
+      video.playsInline = true;
+      video.loop = action === 'idle';
+      video.disablePictureInPicture = true;
+      video.preload = 'auto';
+      video.style.opacity = '0';
+      video.setAttribute('aria-hidden', 'true');
+      video.setAttribute('playsinline', '');
+      video.setAttribute('tabindex', '-1');
+      video.onplaying = () => {
+        if (current !== run || !allowed()) return;
+        if (!Number.isFinite(video.duration) || video.duration <= 0 || video.duration > 15)
+          return fallback(run, true);
+        host.clearTimeout(run.timer);
+        run.timer =
+          action === 'idle'
+            ? null
+            : host.setTimeout(() => fallback(run, true), video.duration * 1000 + 2000);
+        const previous = displayed;
+        displayed = run;
+        video.style.opacity = '1';
+        element.dataset.action = action;
+        element.dataset.videoPlaying = 'true';
+        delete element.dataset.videoLoading;
+        if (previous !== run) retire(previous, true);
+        notify('playing', action);
+      };
+      video.onwaiting = video.onstalled = () => {
+        if (current !== run) return;
+        host.clearTimeout(run.timer);
+        run.timer = host.setTimeout(() => fallback(run, true), 4000);
+      };
+      video.onended = () => {
+        if (current !== run) return;
+        host.clearTimeout(run.timer);
+        if (canIdle()) {
+          current = null;
+          if (displayed !== run) dispose(run);
+          scheduleIdle();
+        } else {
+          stopMedia(true);
+          notify('idle');
+        }
+      };
+      video.onerror = () => fallback(run, true);
+      video.src = clips[action];
+      layer.appendChild(video);
+      try {
+        Promise.resolve(video.play()).catch(() => fallback(run, true));
+      } catch {
+        fallback(run, true);
+      }
+    });
+    return true;
+  }
+  function stop() {
+    stopMedia();
+    base.release(true);
+    notify('idle');
+  }
+  const visibility = () => {
+    if (!allowed()) stop();
+    else scheduleIdle();
+  };
+  document.addEventListener('visibilitychange', visibility);
+  reduced?.addEventListener?.('change', visibility);
+  return {
+    play,
+    stop,
+    retry(action) {
+      failed.delete(action);
+      return play(action);
+    },
+    configure(next) {
+      if (!next.enabled || (next.resting && !resting)) stopMedia();
+      enabled = next.enabled;
+      resting = next.resting;
+      base.configure(next);
+      if (!enabled) notify('idle');
+      startIdle();
+    },
+    drag(direction) {
+      dragging = true;
+      stopMedia();
+      base.drag(direction);
+    },
+    release(cancelled) {
+      dragging = false;
+      base.release(cancelled);
+      scheduleIdle(cancelled ? 0 : 650);
+    },
+    destroy() {
+      destroyed = true;
+      stopMedia();
+      document.removeEventListener('visibilitychange', visibility);
+      reduced?.removeEventListener?.('change', visibility);
+      base.destroy();
+    },
+  };
+}

package/pet-view.js

@@ -2,6 +2,20 @@
 export const PET_MODEL = Object.freeze({ id: 'xiaoxie-original', renderer: 'svg', license: 'MIT' });
 
 export const PET_MODELS = Object.freeze({
+  'whale-ornate-actions': {
+    id: 'whale-ornate-actions',
+    renderer: 'video',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleOrnateActions',
+  },
+  'whale-actions': {
+    id: 'whale-actions',
+    renderer: 'video',
+    widthScale: 1.3125,
+    heightScale: 2.1,
+    label: 'petWhaleActions',
+  },
   'whale-dress': {
     id: 'whale-dress',
     renderer: 'image',
@@ -28,6 +42,8 @@ export function petLayout(
   size = 132,
   contentHeight = 420,
   modelId = 'xiaoxie-original',
+  footerHeight = 30,
+  footerWidth = 148,
 ) {
   const model = petModel(modelId);
   const originX = viewport.left ?? 0,
@@ -41,14 +57,14 @@ export function petLayout(
     Math.min(
       size,
       Math.max(1, (width - edge * 2) / model.widthScale),
-      Math.max(1, Math.floor((height - edge * 2 - 30) / model.heightScale)),
+      Math.max(1, Math.floor((height - edge * 2 - footerHeight) / model.heightScale)),
     ),
   );
   const petWidth = Math.min(
     Math.max(1, width - edge * 2),
-    Math.max(148, artworkSize * model.widthScale),
+    Math.max(footerWidth, artworkSize * model.widthScale),
   );
-  const petHeight = Math.ceil(artworkSize * model.heightScale) + 30;
+  const petHeight = Math.ceil(artworkSize * model.heightScale) + footerHeight;
   const bound = (n, max) => Math.max(Math.min(edge, max), Math.min(n, max));
   const x = bound(
     Number.isFinite(position?.x) ? position.x - originX : width - petWidth - 32,
@@ -111,12 +127,34 @@ export function petArtwork(
   reaction = '',
   modelId = 'xiaoxie-original',
   sprites = {},
+  interactive = false,
 ) {
   const { pose, animate } = presentation;
   const model = petModel(modelId);
-  if (model.renderer === 'image' && sprites[model.id])
+  if (['image', 'video'].includes(model.renderer) && sprites[model.id]) {
+    if (model.renderer === 'video' && interactive)
+      return h(
+        'span',
+        {
+          key: model.id,
+          className: 'owc-pet-art owc-pet-video-art',
+          'aria-hidden': true,
+          'data-interactive': true,
+          'data-pose': pose,
+          'data-animate': animate,
+          style: { width: size * model.widthScale, height: size * model.heightScale },
+        },
+        h('img', {
+          src: sprites[model.id],
+          alt: '',
+          draggable: false,
+          className: 'owc-pet-video-poster',
+        }),
+        h('span', { className: 'owc-pet-video-layer' }),
+      );
     return h('img', {
-      key: model.id + ':' + pose + ':' + reaction,
+      key: interactive ? model.id : model.id + ':' + pose + ':' + reaction,
+      'data-interactive': interactive || undefined,
       src: sprites[model.id],
       alt: '',
       'aria-hidden': true,
@@ -127,12 +165,14 @@ export function petArtwork(
       'data-pose': pose,
       'data-animate': animate,
     });
+  }
   const asleep = ['quiet', 'rest'].includes(pose);
   const path = (d, props = {}) => h('path', { d, ...props });
   return h(
     'svg',
     {
-      key: pose + ':' + reaction,
+      key: interactive ? model.id : pose + ':' + reaction,
+      'data-interactive': interactive || undefined,
       viewBox: '0 0 160 176',
       width: size,
       height: size * 1.1,
@@ -214,8 +254,14 @@ export function petArtwork(
 
 export const PET_MESSAGES = {
   zh: {
-    petOpen: '打开宠物面板',
+    petGreet: '与角色互动',
+    petNeedsSession: '等待会话',
+    petNeedsSetup: '请配置作息',
+    petLoadFailed: '读取失败',
+    petRetryHint: '右键菜单可重新读取设置',
     petCharacter: '角色形象',
+    petWhaleActions: '鲸蓝少女 · 长裙动态',
+    petWhaleOrnateActions: '鲸蓝少女 · 短裙动态',
     petWhaleDress: '鲸蓝少女 · 长裙',
     petWhaleOrnate: '鲸蓝少女 · 礼裙',
     petDroplet: '小歇 · 水滴',
@@ -223,13 +269,35 @@ export const PET_MESSAGES = {
     petQuick: '日常陪伴',
     petDetails: '下班与收入',
     petSize: '宠物大小',
-    petHint: '左键喝水 · 右键菜单 · 拖动移动',
+    petHint: '左键互动 · 右键菜单 · 拖动移动',
     petMode: '宠物模式',
     petClock: '下班倒计时',
+    petPreviewActions: '动作试播',
+    petPreviewIdle: '待机',
+    petPreviewGreet: '挥手',
+    petPreviewDrink: '喝茶',
+    petPreviewStop: '停止',
+    petTryIdle: '试播待机',
+    petTryGreet: '试播挥手',
+    petTryDrink: '试播喝茶',
+    petStopPreview: '停止试播',
+    petPreviewHint: '仅预览，不记喝水次数，也不更换页面角色。',
+    petPreviewLoading: '正在准备动作…',
+    petPreviewPlaying: '正在试播',
+    petPreviewUnsupported: '当前浏览器不支持透明动作视频，已显示静态预览。',
+    petPreviewUnavailable: '动作暂时无法播放，已恢复静态预览。可以重试。',
+    petPreviewEnable: '勾选“角色动作反馈”后可试播；应用后才保存。',
+    petPreviewReduced: '系统已开启减少动态效果，当前显示静态预览。',
   },
   en: {
-    petOpen: 'Open pet panel',
+    petGreet: 'Interact with character',
+    petNeedsSession: 'Open a session',
+    petNeedsSetup: 'Set your schedule',
+    petLoadFailed: 'Settings unavailable',
+    petRetryHint: 'Retry loading settings from the context menu',
     petCharacter: 'Character',
+    petWhaleActions: 'Blue whale · Animated long dress',
+    petWhaleOrnateActions: 'Blue whale · Animated short dress',
     petWhaleDress: 'Blue whale · Long dress',
     petWhaleOrnate: 'Blue whale · Ornate dress',
     petDroplet: 'Xiaoxie · Droplet',
@@ -237,9 +305,26 @@ export const PET_MESSAGES = {
     petQuick: 'Daily companion',
     petDetails: 'Clock and earnings',
     petSize: 'Pet size',
-    petHint: 'Click for water · right-click for menu · drag to move',
+    petHint: 'Click to interact · right-click for menu · drag to move',
     petMode: 'Pet mode',
     petClock: 'Shift countdown',
+    petPreviewActions: 'Preview actions',
+    petPreviewIdle: 'Idle',
+    petPreviewGreet: 'Wave',
+    petPreviewDrink: 'Drink',
+    petPreviewStop: 'Stop',
+    petTryIdle: 'Preview idle',
+    petTryGreet: 'Preview wave',
+    petTryDrink: 'Preview drinking',
+    petStopPreview: 'Stop preview',
+    petPreviewHint: 'Preview only: no drinking record or change to the page character.',
+    petPreviewLoading: 'Preparing action…',
+    petPreviewPlaying: 'Previewing',
+    petPreviewUnsupported:
+      'This browser cannot show transparent action videos. Showing a static preview.',
+    petPreviewUnavailable: 'Action unavailable. Static preview restored; you can retry.',
+    petPreviewEnable: 'Enable character reactions to preview. Apply to save the choice.',
+    petPreviewReduced: 'Reduced motion is enabled. Showing a static preview.',
   },
 };
 
@@ -249,15 +334,46 @@ export const PET_STYLE = `
 .owc-v2 button.owc-pet-handle{padding:0;background:none!important;border-radius:50%;min-height:0;display:block;cursor:grab;touch-action:none;line-height:0}
 .owc-v2 button.owc-pet-handle:active{cursor:grabbing}
 .owc-pet-art{overflow:visible;pointer-events:none;filter:drop-shadow(0 3px 5px #32557418)}
+.owc-pet-video-art{display:block;position:relative;isolation:isolate}
+.owc-pet-video-poster,.owc-pet-video-layer,.owc-pet-video-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
+.owc-pet-video-poster,.owc-pet-video-layer video{mix-blend-mode:plus-lighter}
+.owc-pet-video-poster{opacity:1;transition:opacity .12s linear}
+.owc-pet-video-layer video{opacity:0;transition:opacity .12s linear}
+.owc-pet-video-art[data-video-playing=true] .owc-pet-video-poster{opacity:0}
+.owc-pet-video-art[data-video-playing=true] .owc-pet-video-layer video{opacity:1}
 .owc-pet-portrait{display:block;object-fit:contain;transform-origin:50% 90%}
-.owc-pet-portrait[data-animate=true]{animation:owc-portrait-thanks .65s ease-in-out 2}
+.owc-pet-portrait[data-animate=true]:not([data-interactive=true]){animation:owc-portrait-thanks .65s ease-in-out 2}
+.owc-pet-art[data-interactive=true]{transform-origin:50% 90%}
+.owc-pet-art[data-interactive=true][data-motion=idle]:not([data-action]){animation:owc-pet-breathe 4.5s ease-in-out infinite}
+@keyframes owc-pet-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006)}}
 @keyframes owc-portrait-thanks{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px) rotate(-1deg)}75%{transform:rotate(1deg)}}
 .owc-pet-art[data-pose=offline]{opacity:.65}
-.owc-pet-art[data-animate=true] .owc-pet-body{transform-origin:80px 150px;animation:owc-pet-thanks .65s ease-in-out 2}
+.owc-pet-art[data-animate=true]:not([data-interactive=true]) .owc-pet-body{transform-origin:80px 150px;animation:owc-pet-thanks .65s ease-in-out 2}
 @keyframes owc-pet-thanks{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px) rotate(-3deg)}75%{transform:rotate(2deg)}}
-.owc-v2 button.owc-pet-clock{padding:4px 10px;min-height:26px;gap:5px;white-space:nowrap;border-radius:999px;font-size:11px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 25%,transparent);box-shadow:0 3px 12px #142e4812;font-variant-numeric:tabular-nums;max-width:100%;box-sizing:border-box;overflow:hidden}
+.owc-v2 .owc-pet-clock{display:flex;align-items:center;color:var(--owc-text);line-height:1.5;cursor:default;padding:4px 10px;min-height:26px;gap:5px;white-space:nowrap;border-radius:999px;font-size:11px;background:var(--dsw-alias-bg-overlay);border:1px solid color-mix(in srgb,var(--owc-accent) 25%,transparent);box-shadow:0 3px 12px #142e4812;font-variant-numeric:tabular-nums;max-width:100%;box-sizing:border-box;overflow:hidden}
 .owc-pet-clock-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .owc-pet-clock strong{flex:none}
+.owc-v2 .owc-pet-timers{width:196px;max-width:100%;margin-top:4px;box-sizing:border-box;border:1px solid var(--owc-border);border-radius:13px;background:var(--owc-surface);box-shadow:var(--owc-shadow);overflow:hidden;font-variant-numeric:tabular-nums}
+.owc-v2 .owc-pet-timers .owc-pet-clock{width:100%;height:34px;min-height:0;padding:5px 10px;gap:6px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;color:var(--owc-muted)}
+.owc-pet-timers .owc-pet-clock svg{flex-shrink:0}
+.owc-pet-timers .owc-pet-clock strong{margin-left:auto;font-size:16px;line-height:1;color:var(--owc-text);letter-spacing:.2px}
+.owc-pet-timer-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--owc-border)}
+.owc-v2 .owc-pet-timer-row{display:flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;min-width:0;height:28px;padding:3px 6px;font-size:11px;white-space:nowrap;color:var(--owc-muted)}
+.owc-pet-timer-row+.owc-pet-timer-row{border-left:1px solid var(--owc-border)}
+.owc-pet-timer-label{display:flex;align-items:center;flex-shrink:0}
+.owc-pet-timer-label svg{flex-shrink:0}
+.owc-pet-timer-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:550;color:var(--owc-text)}
+.owc-timer-pause{font-size:9px;margin-right:3px;color:var(--owc-muted)}
+.owc-v2 .owc-pet-timer-row[data-countdown-due=true]{background:color-mix(in srgb,var(--owc-accent) 8%,transparent);color:color-mix(in srgb,var(--owc-accent) 55%,var(--owc-text))}
+.owc-pet-timer-row[data-countdown-due=true] strong{color:inherit}
+.owc-v2 [data-countdown-due=true]{color:var(--owc-accent);border-color:var(--owc-accent)}
+.owc-countdown-card{padding:16px;display:flex;flex-direction:column;gap:14px}
+.owc-countdown-value{font-size:32px;line-height:1.3;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
+.owc-countdown-actions{display:flex;flex-wrap:wrap;gap:8px}
+.owc-countdown-actions button{flex:1;min-width:110px;min-height:40px}
+.owc-countdown-card label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}
+.owc-v2 .owc-countdown-card select{flex:0 0 120px;width:120px;max-width:120px}
+.owc-countdown-card p{margin:0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
 .owc-pet-panel{position:fixed;border-radius:20px;cursor:default;touch-action:manipulation;max-width:calc(100vw - 24px)}
 .owc-pet-panel>.owc-content{max-height:inherit}
 .owc-pet-panel .owc-glass{opacity:max(var(--owc-alpha),.94)}

package/tests/classic-overview.test.mjs

@@ -0,0 +1,77 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { classicClockPresentation } from '../ui-utils.js';
+import { calculate } from '../clock.js';
+const settings = {
+  payMode: 'monthly',
+  monthlySalary: 10000,
+  workdaysPerMonth: 21.75,
+  dailySalary: 0,
+  start: '09:00',
+  end: '18:00',
+  breakStart: '12:00',
+  breakEnd: '13:00',
+  weekdays: [1, 2, 3, 4, 5],
+  timezone: 'Asia/Shanghai',
+};
+const present = (time, config = settings) => {
+  const now = Date.parse(time);
+  return classicClockPresentation({
+    hasSession: true,
+    loaded: true,
+    configured: true,
+    failed: false,
+    state: calculate(config, now),
+    now,
+  });
+};
+test('classic overview distinguishes startup, missing configuration and failed reads without a zero countdown', () => {
+  const base = {
+    hasSession: true,
+    loaded: true,
+    configured: true,
+    failed: false,
+    state: null,
+    now: 0,
+  };
+  for (const [patch, phase] of [
+    [{ hasSession: false }, 'waiting'],
+    [{ loaded: false }, 'loading'],
+    [{ configured: false }, 'setup'],
+    [{ failed: true }, 'error'],
+  ]) {
+    const view = classicClockPresentation({ ...base, ...patch });
+    assert.equal(view.phase, phase);
+    assert.equal(view.seconds, null);
+  }
+});
+test('classic overview shows the correct countdown target for before, working and lunch', () => {
+  assert.equal(present('2026-11-05T00:00:00Z').seconds, 3600);
+  const working = present('2026-11-05T02:00:00Z');
+  assert.equal(working.phase, 'working');
+  assert.equal(working.seconds, 8 * 3600);
+  const lunch = present('2026-11-05T04:30:00Z');
+  assert.equal(lunch.phase, 'lunch');
+  assert.equal(lunch.seconds, 1800);
+});
+test('completed shifts and rest days show a state instead of a meaningless zero', () => {
+  for (const [date, phase] of [
+    ['2026-11-05T11:00:00Z', 'done'],
+    ['2026-11-07T02:00:00Z', 'rest'],
+  ]) {
+    const result = present(date);
+    assert.equal(result.phase, phase);
+    assert.equal(result.seconds, null);
+  }
+  const night = {
+    ...settings,
+    start: '22:00',
+    end: '06:00',
+    breakStart: '02:00',
+    breakEnd: '02:00',
+  };
+  assert.equal(present('2026-11-05T15:00:00Z', night).seconds, 7 * 3600);
+  const completed = present('2026-11-05T23:00:00Z', night);
+  assert.equal(completed.phase, 'done');
+  assert.equal(completed.seconds, null);
+});