dsh-desktop-kit 0.0.0-stage → 1.0.0

package/plugins/dsh-peak-guard/client.js

@@ -0,0 +1,741 @@
+/**
+ * dsh-peak-guard — browser half.
+ *
+ * A live, dismissible peak-pricing notice in the chat.
+ *
+ *   • 5 minutes before a peak window starts it warns that the 2× price is coming;
+ *   • during the window it explains the price, shows the window, a live
+ *     countdown with a depleting ring, and when to come back;
+ *   • it only informs — it never stops the chat, closes a session or aborts a
+ *     turn.
+ *
+ * Real-time: 1s ticks, exact boundary timers (warning start, peak start, peak
+ * end) and wake listeners on focus/visibility/pointer.
+ *
+ * Schedule (UTC, weekdays): 01:00–04:00 and 06:00–10:00; everything else is
+ * off-peak with a 50% discount. Weekends have no peak.
+ */
+
+window.__ModuleLoader__.load({
+  id: "dsh-peak-guard",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    const React = require("react");
+    const h = React.createElement;
+    const useEffect = React.useEffect;
+    const useState = React.useState;
+    const useSyncExternalStore = React.useSyncExternalStore;
+
+    const NS = "peak-guard";
+    const WINDOWS_UTC = [
+      { from: 1, to: 4, id: "morning" },
+      { from: 6, to: 10, id: "day" },
+    ];
+    const TICK_MS = 1000;
+    const PEAK_LEAD_MS = 5 * 60 * 1000;
+    const DISMISS_KEY = "dsh-peak-guard:dismissed-window-end";
+    const SOON_DISMISS_KEY = "dsh-peak-guard:dismissed-soon-start";
+    const ENABLED_KEY = "dsh-peak-guard:enabled";
+    const RING_RADIUS = 26;
+    const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+
+    const EN = {
+      badgeLabel: "Peak ×2",
+      badgeTitle: "Peak pricing is active now: tokens cost 2×. {wait} left in this window.",
+      soonBadgeLabel: "Peak in {wait}",
+      nowLabel: "Now",
+      kicker: "Peak pricing",
+      soonKicker: "Peak coming",
+      multiplier: "×2",
+      title: "Tokens cost double right now",
+      soonTitle: "Peak pricing starts in {wait}",
+      countdownLabel: "until this peak window ends",
+      soonCountdownLabel: "until peak pricing starts",
+      unitHour: "h",
+      unitMin: "min",
+      unitSec: "s",
+      windowLabel: "Window",
+      soonWindowLabel: "Upcoming window",
+      windowRange: "{start}–{end} {zone}",
+      reason: "During peak hours every token type costs twice as much for deepseek-flash and deepseek-v4-pro. Outside these hours the off-peak 50% discount applies.",
+      soonReason: "Off-peak pricing is still active: the 50% discount holds until the window starts. After that, tokens are billed at 2× for the whole peak window.",
+      recommendationTitle: "Best time to come back",
+      soonRecommendationTitle: "Before the price doubles",
+      recommendation: "Return after {time} — in {wait} the token price drops by half.",
+      soonRecommendation: "Finish the current step before {start}, or come back after {end} — the peak window lasts until then.",
+      scheduleTitle: "Peak schedule (weekdays)",
+      scheduleWeekend: "weekdays · weekends have no peak",
+      scheduleChipLabel: "Peak windows",
+      scheduleUtc: "UTC: {windows}",
+      scheduleLocal: "Your time ({zone}): {windows}",
+      holidayNote: "Chinese public holidays are off-peak too; only regular weekdays are shown.",
+      dismiss: "Hide for this peak",
+      soonDismiss: "Hide until the peak starts",
+      details: "Schedule",
+      hideDetails: "Collapse",
+      waitHours: "{hours} h {minutes} min",
+      waitMinutes: "{minutes} min",
+      waitSeconds: "{seconds} s",
+    };
+    const RU = {
+      badgeLabel: "Пик ×2",
+      badgeTitle: "Сейчас пиковый тариф: токены ×2. До конца окна осталось {wait}.",
+      soonBadgeLabel: "Пик через {wait}",
+      nowLabel: "Сейчас",
+      kicker: "Пиковый тариф",
+      soonKicker: "Скоро пик",
+      multiplier: "×2",
+      title: "Токены сейчас стоят вдвое дороже",
+      soonTitle: "Пиковый тариф начнётся через {wait}",
+      countdownLabel: "до конца пикового окна",
+      soonCountdownLabel: "до начала пика",
+      unitHour: "ч",
+      unitMin: "мин",
+      unitSec: "с",
+      windowLabel: "Окно",
+      soonWindowLabel: "Окно начнётся",
+      windowRange: "{start}–{end} {zone}",
+      reason: "В пиковые часы стоимость всех типов токенов для deepseek-flash и deepseek-v4-pro увеличивается вдвое. Вне этих часов действует скидка 50% (off-peak).",
+      soonReason: "Сейчас ещё действует off-peak со скидкой 50%. Когда начнётся окно, все типы токенов будут стоить ×2 до самого конца пика.",
+      recommendationTitle: "Лучшее время вернуться",
+      soonRecommendationTitle: "До подорожания",
+      recommendation: "Вернитесь после {time} — через {wait} цена токенов упадёт вдвое.",
+      soonRecommendation: "Завершите текущий шаг до {start} — или вернитесь после {end}, когда пик закончится.",
+      scheduleTitle: "Расписание пика (будни)",
+      scheduleWeekend: "будни · выходные без пика",
+      scheduleChipLabel: "Окна пика",
+      scheduleUtc: "UTC: {windows}",
+      scheduleLocal: "По вашему времени ({zone}): {windows}",
+      holidayNote: "Государственные праздники Китая тоже считаются off-peak — выше только обычные будни.",
+      dismiss: "Скрыть на этот пик",
+      soonDismiss: "Скрыть до начала пика",
+      details: "Расписание",
+      hideDetails: "Свернуть",
+      waitHours: "{hours} ч {minutes} мин",
+      waitMinutes: "{minutes} мин",
+      waitSeconds: "{seconds} с",
+    };
+    const ZH = {
+      badgeLabel: "高峰 ×2",
+      badgeTitle: "当前为高峰时段：Token 价格 ×2。本时段还剩 {wait}。",
+      soonBadgeLabel: "高峰还剩 {wait}",
+      nowLabel: "现在",
+      kicker: "高峰价格",
+      soonKicker: "高峰将至",
+      multiplier: "×2",
+      title: "当前 Token 价格为 2 倍",
+      soonTitle: "高峰价格将在 {wait} 后开始",
+      countdownLabel: "距本时段结束",
+      soonCountdownLabel: "距高峰开始",
+      unitHour: "小时",
+      unitMin: "分钟",
+      unitSec: "秒",
+      windowLabel: "时段",
+      soonWindowLabel: "即将开始",
+      windowRange: "{start}–{end} {zone}",
+      reason: "高峰时段内 deepseek-flash 与 deepseek-v4-pro 的全部 Token 价格翻倍；其余时段享受 50% 的错峰折扣。",
+      soonReason: "目前仍为错峰价格（50% 折扣）。时段开始后，全部 Token 价格将翻倍，直至本次高峰结束。",
+      recommendationTitle: "建议返回时间",
+      soonRecommendationTitle: "涨价之前",
+      recommendation: "请在 {time}（{wait} 后）再回来 — Token 价格将减半。",
+      soonRecommendation: "请在 {start} 前完成当前步骤，或在 {end} 之后再回来（届时高峰结束）。",
+      scheduleTitle: "高峰时段（工作日）",
+      scheduleWeekend: "工作日 · 周末无高峰",
+      scheduleChipLabel: "高峰时段",
+      scheduleUtc: "UTC：{windows}",
+      scheduleLocal: "本地时间（{zone}）：{windows}",
+      holidayNote: "中国法定节假日同样按错峰计费；上表仅适用于普通工作日。",
+      dismiss: "本次高峰不再提示",
+      soonDismiss: "高峰开始前不再提示",
+      details: "时间表",
+      hideDetails: "收起",
+      waitHours: "{hours} 小时 {minutes} 分钟",
+      waitMinutes: "{minutes} 分钟",
+      waitSeconds: "{seconds} 秒",
+    };
+
+    const inject = ["slots", "locale"];
+
+    function pad(value) {
+      return String(value).padStart(2, "0");
+    }
+
+    function formatTemplate(template, params) {
+      return String(template).replace(/\{(\w+)\}/g, (match, name) =>
+        params && Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : match,
+      );
+    }
+
+    /** Render "{start}…{end}…" with React nodes inside the translated sentence. */
+    function renderTemplate(template, values) {
+      const pattern = /\{(\w+)\}/g;
+      const parts = [];
+      let lastIndex = 0;
+      let match;
+      let index = 0;
+      while ((match = pattern.exec(template)) !== null) {
+        if (match.index > lastIndex) parts.push(template.slice(lastIndex, match.index));
+        const value = values?.[match[1]];
+        parts.push(React.isValidElement(value) ? React.cloneElement(value, { key: `v-${index}` }) : value);
+        lastIndex = match.index + match[0].length;
+        index += 1;
+      }
+      if (lastIndex < template.length) parts.push(template.slice(lastIndex));
+      return parts;
+    }
+
+    function timeZoneLabel(t) {
+      try {
+        const zone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        if (zone === "Europe/Moscow") return t("waitSeconds") === "{seconds} с" ? "МСК" : "MSK";
+        return zone;
+      } catch {
+        return "local";
+      }
+    }
+
+    function formatClock(date) {
+      try {
+        return new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+      } catch {
+        return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+      }
+    }
+
+    function formatRange(start, end) {
+      return `${formatClock(start)}–${formatClock(end)}`;
+    }
+
+    /** Peak window containing `date`, or null. Weekdays are evaluated in UTC. */
+    function peakWindowAt(date) {
+      const day = date.getUTCDay();
+      if (day === 0 || day === 6) return null;
+      const minutes = date.getUTCHours() * 60 + date.getUTCMinutes() + date.getUTCSeconds() / 60;
+      for (const window of WINDOWS_UTC) {
+        if (minutes >= window.from * 60 && minutes < window.to * 60) {
+          const year = date.getUTCFullYear();
+          const month = date.getUTCMonth();
+          const dayOfMonth = date.getUTCDate();
+          return {
+            id: window.id,
+            start: Date.UTC(year, month, dayOfMonth, window.from, 0, 0),
+            end: Date.UTC(year, month, dayOfMonth, window.to, 0, 0),
+          };
+        }
+      }
+      return null;
+    }
+
+    /** Next peak window start strictly after `date`. */
+    function nextPeakWindow(date) {
+      const probe = new Date(date.getTime());
+      for (let index = 0; index < 8; index += 1) {
+        const day = probe.getUTCDay();
+        if (day !== 0 && day !== 6) {
+          for (const window of WINDOWS_UTC) {
+            const start = Date.UTC(probe.getUTCFullYear(), probe.getUTCMonth(), probe.getUTCDate(), window.from, 0, 0);
+            if (start > date.getTime()) {
+              return { start, end: Date.UTC(probe.getUTCFullYear(), probe.getUTCMonth(), probe.getUTCDate(), window.to, 0, 0) };
+            }
+          }
+        }
+        probe.setUTCDate(probe.getUTCDate() + 1);
+        probe.setUTCHours(0, 0, 0, 0);
+      }
+      return null;
+    }
+
+    function waitParts(ms) {
+      const totalMinutes = Math.max(1, Math.ceil(ms / 60000));
+      const hours = Math.floor(totalMinutes / 60);
+      const minutes = totalMinutes % 60;
+      return { hours, minutes, totalMinutes, ms };
+    }
+
+    function waitLabel(parts, t) {
+      if (parts.ms !== undefined && parts.ms < 60000) return formatTemplate(t("waitSeconds"), { seconds: Math.max(1, Math.ceil(parts.ms / 1000)) });
+      if (parts.hours > 0) return formatTemplate(t("waitHours"), { hours: parts.hours, minutes: parts.minutes });
+      return formatTemplate(t("waitMinutes"), { minutes: parts.minutes });
+    }
+
+    function scheduleStrings() {
+      const local = WINDOWS_UTC.map((entry) =>
+        formatRange(new Date(Date.UTC(2000, 0, 3, entry.from)), new Date(Date.UTC(2000, 0, 3, entry.to))),
+      );
+      const utc = WINDOWS_UTC.map((entry) => `${pad(entry.from)}:00–${pad(entry.to)}:00`);
+      return { local, utc, localText: local.join(", "), utcText: utc.join(", ") };
+    }
+
+    function buildState(now, t) {
+      const active = peakWindowAt(now);
+      const schedule = scheduleStrings();
+      const zone = timeZoneLabel(t);
+      const base = {
+        now,
+        zone,
+        leadMs: PEAK_LEAD_MS,
+        scheduleUtc: schedule.utcText,
+        scheduleLocal: schedule.localText,
+        scheduleLocalParts: schedule.local,
+        scheduleUtcParts: schedule.utc,
+      };
+      if (active !== null) {
+        const total = active.end - active.start;
+        const elapsed = now.getTime() - active.start;
+        const progress = total > 0 ? Math.min(1, Math.max(0, elapsed / total)) : 1;
+        const parts = waitParts(active.end - now.getTime());
+        return {
+          ...base,
+          mode: "peak",
+          inPeak: true,
+          soon: false,
+          windowStart: active.start,
+          windowEnd: active.end,
+          remainingMs: active.end - now.getTime(),
+          progress,
+          ringOffset: RING_CIRCUMFERENCE * progress,
+          wait: waitLabel(parts, t),
+          waitParts: parts,
+          startLabel: formatClock(new Date(active.start)),
+          endLabel: formatClock(new Date(active.end)),
+          nowLabel: formatClock(now),
+        };
+      }
+      const next = nextPeakWindow(now);
+      const startsInMs = next === null ? null : next.start - now.getTime();
+      if (next !== null && startsInMs !== null && startsInMs > 0 && startsInMs <= PEAK_LEAD_MS) {
+        const progress = Math.min(1, Math.max(0, 1 - startsInMs / PEAK_LEAD_MS));
+        const parts = waitParts(startsInMs);
+        return {
+          ...base,
+          mode: "soon",
+          inPeak: false,
+          soon: true,
+          windowStart: next.start,
+          windowEnd: next.end,
+          nextStart: next.start,
+          nextEnd: next.end,
+          startsInMs,
+          progress,
+          ringOffset: RING_CIRCUMFERENCE * progress,
+          wait: waitLabel(parts, t),
+          waitParts: parts,
+          startLabel: formatClock(new Date(next.start)),
+          endLabel: formatClock(new Date(next.end)),
+          nowLabel: formatClock(now),
+        };
+      }
+      return {
+        ...base,
+        mode: "off",
+        inPeak: false,
+        soon: false,
+        nextStart: next?.start ?? null,
+        nextEnd: next?.end ?? null,
+        startsInMs,
+      };
+    }
+
+    function createClockStore() {
+      let forcedNow = null;
+      let now = new Date();
+      const listeners = new Set();
+      const emit = () => {
+        for (const listener of [...listeners]) {
+          try {
+            listener();
+          } catch (error) {
+            console.error("[peak-guard] listener failed", error);
+          }
+        }
+      };
+      return {
+        subscribe(listener) {
+          listeners.add(listener);
+          return () => listeners.delete(listener);
+        },
+        getNow() {
+          return forcedNow ?? now;
+        },
+        tick() {
+          now = new Date();
+          emit();
+        },
+        force(iso) {
+          forcedNow = iso === null || iso === undefined ? null : new Date(iso);
+          emit();
+        },
+        getVersion() {
+          return now.getTime() + (forcedNow?.getTime?.() ?? 0);
+        },
+      };
+    }
+
+    function usePeakState(store, t) {
+      const version = useSyncExternalStore(store.subscribe, store.getVersion, store.getVersion);
+      return React.useMemo(() => buildState(store.getNow(), t), [version, t]);
+    }
+
+    function apply(ctx) {
+      const t = ctx.locale.bind(NS);
+      const store = createClockStore();
+
+      ctx.effect(() => ctx.locale.register(NS, { en: EN, zh: ZH }), "peak-guard: dictionaries");
+      ctx.effect(() => {
+        try {
+          return ctx.locale.register(NS, "ru", RU);
+        } catch {
+          return () => {};
+        }
+      }, "peak-guard: ru dictionary");
+
+      // Real-time clock: every second refreshes the countdown; a boundary timer
+      // fires exactly at the 5-minute warning start, the peak start and the peak
+      // end; focus/visibility/pointer wake it after background throttling.
+      ctx.effect(() => {
+        let boundaryTimer = null;
+        const scheduleBoundary = () => {
+          if (boundaryTimer !== null) clearTimeout(boundaryTimer);
+          const now = store.getNow();
+          const active = peakWindowAt(now);
+          const next = nextPeakWindow(now);
+          let boundary = null;
+          if (active !== null) {
+            boundary = active.end;
+          } else if (next !== null) {
+            const warningAt = next.start - PEAK_LEAD_MS;
+            boundary = warningAt > now.getTime() ? warningAt : next.start;
+          }
+          if (boundary === null) return;
+          const delay = Math.max(200, boundary - now.getTime() + 150);
+          boundaryTimer = setTimeout(() => {
+            boundaryTimer = null;
+            store.tick();
+            scheduleBoundary();
+          }, Math.min(delay, 3600000));
+        };
+        const tickNow = () => {
+          store.tick();
+          scheduleBoundary();
+        };
+        const timer = setInterval(tickNow, TICK_MS);
+        const onWake = () => {
+          if (!document.hidden) tickNow();
+        };
+        document.addEventListener("visibilitychange", onWake);
+        window.addEventListener("focus", onWake);
+        window.addEventListener("pointerdown", onWake);
+        scheduleBoundary();
+        return () => {
+          clearInterval(timer);
+          if (boundaryTimer !== null) clearTimeout(boundaryTimer);
+          document.removeEventListener("visibilitychange", onWake);
+          window.removeEventListener("focus", onWake);
+          window.removeEventListener("pointerdown", onWake);
+        };
+      }, "peak-guard: realtime clock");
+
+      ctx.effect(() => {
+        const style = document.createElement("style");
+        style.id = "dsh-peak-guard-style";
+        style.textContent = `
+.dpg-card{--dpg-red:var(--dsw-alias-state-error-primary,#e5484d);--dpg-red-deep:#b4232b;--dpg-ink:var(--dsw-alias-label-primary,#111);--dpg-muted:var(--dsw-alias-label-secondary,#5b6472);position:relative;display:flex;flex-direction:column;gap:14px;margin-top:10px;padding:16px 18px 15px;border-radius:16px;border:1px solid color-mix(in srgb,var(--dpg-red) 26%,transparent);background:
+radial-gradient(120% 160% at 100% 0%,color-mix(in srgb,var(--dpg-red) 14%,transparent) 0%,transparent 52%),
+linear-gradient(155deg,color-mix(in srgb,var(--dpg-red) 7%,var(--dsw-alias-bg-layer-1,#fff)) 0%,var(--dsw-alias-bg-layer-1,#fff) 58%),
+var(--dsw-alias-bg-layer-1,#fff);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent),0 20px 44px -30px color-mix(in srgb,var(--dpg-red) 70%,transparent);overflow:hidden;animation:dpg-in .34s cubic-bezier(.16,1,.3,1)}
+.dpg-card[data-mode="soon"]{--dpg-red:var(--dsw-alias-state-warn-primary,#d97706);--dpg-red-deep:#98540a}
+.dpg-card::before{content:"";position:absolute;left:10px;top:10px;width:13px;height:13px;border-left:1px solid color-mix(in srgb,var(--dpg-red) 55%,transparent);border-top:1px solid color-mix(in srgb,var(--dpg-red) 55%,transparent);pointer-events:none}
+.dpg-card::after{content:"";position:absolute;right:10px;bottom:10px;width:13px;height:13px;border-right:1px solid color-mix(in srgb,var(--dpg-red) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--dpg-red) 55%,transparent);pointer-events:none}
+.dpg-top{display:flex;align-items:flex-start;gap:14px}
+.dpg-seal{position:relative;flex:none;width:62px;height:62px;display:flex;align-items:center;justify-content:center}
+.dpg-ring{position:absolute;inset:0;width:62px;height:62px;transform:rotate(-90deg)}
+.dpg-ring-track{fill:none;stroke:color-mix(in srgb,var(--dpg-red) 18%,transparent);stroke-width:2.5}
+.dpg-ring-fill{fill:none;stroke:var(--dpg-red);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:${RING_CIRCUMFERENCE.toFixed(2)};transition:stroke-dashoffset .8s linear,stroke .3s ease}
+.dpg-seal-icon{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#fff;background:linear-gradient(150deg,var(--dpg-red) 0%,color-mix(in srgb,var(--dpg-red) 55%,#4a070c) 100%);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--dpg-red) 90%,transparent),inset 0 1px 0 rgba(255,255,255,.28)}
+.dpg-card[data-mode="soon"] .dpg-seal-icon{background:linear-gradient(150deg,var(--dpg-red) 0%,color-mix(in srgb,var(--dpg-red) 55%,#3d2400) 100%)}
+.dpg-seal-pulse{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid color-mix(in srgb,var(--dpg-red) 45%,transparent);animation:dpg-ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
+.dpg-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
+.dpg-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--dpg-red-deep)}
+.dpg-dot{width:6px;height:6px;border-radius:50%;background:var(--dpg-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--dpg-red) 16%,transparent);animation:dpg-pulse 2.4s ease-in-out infinite}
+.dpg-mult{display:inline-flex;align-items:center;justify-content:center;height:17px;padding:0 6px;border-radius:5px;border:1px solid color-mix(in srgb,var(--dpg-red) 45%,transparent);background:color-mix(in srgb,var(--dpg-red) 10%,transparent);color:var(--dpg-red-deep);font-size:10px;font-weight:800;letter-spacing:.04em}
+.dpg-title{font-size:15.5px;line-height:21px;font-weight:680;letter-spacing:-.01em;color:var(--dpg-ink)}
+.dpg-reason{font-size:11.5px;line-height:16px;color:var(--dpg-muted);max-width:62ch}
+.dpg-x{position:absolute;right:11px;top:11px;border:none;background:transparent;color:var(--dpg-muted);cursor:pointer;border-radius:8px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;z-index:2}
+.dpg-x:hover{background:color-mix(in srgb,var(--dpg-red) 10%,transparent);color:var(--dpg-red-deep)}
+.dpg-x:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2f7df6);outline-offset:1px}
+.dpg-mid{display:flex;align-items:flex-end;gap:18px}
+.dpg-count{display:flex;flex-direction:column;gap:1px;flex:none;min-width:118px}
+.dpg-count-num{display:flex;align-items:baseline;gap:4px;color:var(--dpg-ink);font-variant-numeric:tabular-nums;letter-spacing:-.035em;line-height:1}
+.dpg-count-num b{font-size:34px;font-weight:760;color:var(--dpg-red-deep)}
+.dpg-count-num span{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--dpg-muted)}
+.dpg-count-label{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--dpg-muted);margin-top:5px}
+.dpg-meter{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;padding-bottom:5px}
+.dpg-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10.5px;line-height:14px;color:var(--dpg-muted);font-variant-numeric:tabular-nums}
+.dpg-meter-head b{color:var(--dpg-ink);font-weight:650}
+.dpg-track{position:relative;height:8px;border-radius:3px;background:color-mix(in srgb,var(--dpg-red) 12%,transparent);overflow:hidden}
+.dpg-track::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 13px,color-mix(in srgb,var(--dsw-alias-bg-layer-1,#fff) 88%,transparent) 13px 14px);opacity:.9;pointer-events:none}
+.dpg-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--dpg-red) 72%,#ffb3b6) 0%,var(--dpg-red) 55%,var(--dpg-red-deep) 100%);transition:width .9s linear;box-shadow:0 0 12px -2px color-mix(in srgb,var(--dpg-red) 60%,transparent)}
+.dpg-rec{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:11px;border:1px solid color-mix(in srgb,var(--dpg-red) 22%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--dpg-red) 9%,transparent),transparent 70%)}
+.dpg-rec-mark{flex:none;width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--dpg-red);font-size:12px;font-weight:800;box-shadow:0 4px 10px -5px color-mix(in srgb,var(--dpg-red) 90%,transparent)}
+.dpg-rec-body{display:flex;flex-direction:column;gap:2px;min-width:0}
+.dpg-rec-label{font-size:9.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--dpg-red-deep)}
+.dpg-rec-text{font-size:12.5px;line-height:17px;color:var(--dpg-ink);font-weight:560}
+.dpg-rec-text b{color:var(--dpg-red-deep);font-weight:760;font-variant-numeric:tabular-nums}
+.dpg-tail{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
+.dpg-schedule{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
+.dpg-schedule-label{font-size:9.5px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--dpg-muted);margin-right:2px}
+.dpg-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;border:1px solid color-mix(in srgb,var(--dpg-red) 24%,transparent);background:color-mix(in srgb,var(--dpg-red) 7%,transparent);color:var(--dpg-ink);font-size:10.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
+.dpg-schedule-note{font-size:10px;line-height:14px;color:var(--dpg-muted)}
+.dpg-actions{display:flex;gap:6px;flex:none}
+.dpg-btn{border:1px solid var(--dsw-alias-border-l2,rgba(0,0,0,.16));background:transparent;color:var(--dpg-ink);font:inherit;font-size:11px;font-weight:650;line-height:15px;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:background .18s ease,border-color .18s ease}
+.dpg-btn:hover{background:color-mix(in srgb,var(--dpg-red) 8%,transparent);border-color:color-mix(in srgb,var(--dpg-red) 38%,transparent)}
+.dpg-btn:focus-visible{outline:2px solid var(--dsw-alias-brand-primary,#2f7df6);outline-offset:1px}
+.dpg-btn[data-emphasis="true"]{border-color:transparent;background:var(--dpg-red-deep);color:#fff}
+.dpg-btn[data-emphasis="true"]:hover{background:color-mix(in srgb,var(--dpg-red-deep) 88%,#000)}
+.dpg-details{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;padding-top:2px;font-size:10.5px;line-height:15px;color:var(--dpg-muted)}
+.dpg-details b{color:var(--dpg-ink);font-weight:650;font-variant-numeric:tabular-nums}
+.dpg-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 42%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 12%,transparent),color-mix(in srgb,var(--dsw-alias-state-error-primary,#e5484d) 5%,transparent));color:var(--dsw-alias-state-error-primary,#c62828);font-size:11px;font-weight:680;line-height:14px;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
+.dpg-badge[data-mode="soon"]{border-color:color-mix(in srgb,var(--dsw-alias-state-warn-primary,#d97706) 45%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--dsw-alias-state-warn-primary,#d97706) 12%,transparent),color-mix(in srgb,var(--dsw-alias-state-warn-primary,#d97706) 5%,transparent));color:var(--dsw-alias-state-warn-primary,#b45309)}
+.dpg-badge .dpg-dot{width:5px;height:5px;box-shadow:none}
+.dpg-badge-wait{opacity:.85}
+@keyframes dpg-pulse{0%,100%{opacity:1}50%{opacity:.4}}
+@keyframes dpg-ping{0%{transform:scale(.92);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
+@keyframes dpg-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
+@media (prefers-color-scheme:dark){
+.dpg-card{--dpg-red-deep:#ff9b9f;--dpg-red:var(--dsw-alias-state-error-primary,#ff7a80);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px -34px rgba(0,0,0,.9)}
+.dpg-card[data-mode="soon"]{--dpg-red-deep:#ffd08a;--dpg-red:var(--dsw-alias-state-warn-primary,#f5b45b)}
+.dpg-seal-icon{color:#2a0709;background:linear-gradient(150deg,var(--dpg-red) 0%,color-mix(in srgb,var(--dpg-red) 55%,#7d1218) 100%)}
+.dpg-card[data-mode="soon"] .dpg-seal-icon{color:#2a1500;background:linear-gradient(150deg,var(--dpg-red) 0%,color-mix(in srgb,var(--dpg-red) 55%,#4a2c00) 100%)}
+.dpg-rec-mark{color:#2a0709}
+.dpg-count-num b{color:var(--dpg-red)}
+.dpg-kicker,.dpg-rec-label,.dpg-mult{color:var(--dpg-red)}
+.dpg-btn[data-emphasis="true"]{background:var(--dpg-red);color:#2a0709}
+}
+@media (max-width:1100px){.dpg-badge-wait{display:none}}
+@media (max-width:900px){.dpg-badge{display:none}.dpg-mid{align-items:stretch;flex-direction:column;gap:8px}.dpg-count{min-width:0;flex-direction:row;align-items:baseline;gap:8px}.dpg-count-label{margin-top:0}.dpg-meter{padding-bottom:0}.dpg-meter-head{flex-wrap:wrap;row-gap:2px}.dpg-tail{align-items:stretch;flex-direction:column}.dpg-actions{display:flex}.dpg-actions .dpg-btn{flex:1;text-align:center}.dpg-seal{width:52px;height:52px}.dpg-ring{width:52px;height:52px}.dpg-title{font-size:14.5px;line-height:20px}}
+@media (max-width:520px){.dpg-card{position:fixed;left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:1200;max-height:78vh;overflow:auto;margin:0;padding:14px 15px 13px;gap:12px}.dpg-seal{display:none}.dpg-details{grid-template-columns:1fr}}
+@media (prefers-reduced-motion:reduce){.dpg-card{animation:none}.dpg-dot,.dpg-seal-pulse{animation:none}.dpg-fill,.dpg-ring-fill{transition:none}}
+`;
+        document.head.appendChild(style);
+        return () => style.remove();
+      }, "peak-guard: styles");
+
+      function IconBolt() {
+        return h("svg", { viewBox: "0 0 20 20", width: 19, height: 19, "aria-hidden": "true", focusable: "false" },
+          h("path", { d: "M11.2 2.6 5.8 11h4.1l-1.1 6.4 5.4-8.4H10l1.2-6.4Z", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinejoin: "round", strokeLinecap: "round" }),
+        );
+      }
+
+      function HeaderBadge() {
+        const state = usePeakState(store, t);
+        if (state.inPeak) {
+          return h("span", {
+            className: "dpg-badge",
+            title: formatTemplate(t("badgeTitle"), { wait: state.wait }),
+            "aria-label": formatTemplate(t("badgeTitle"), { wait: state.wait }),
+          }, h("span", { className: "dpg-dot", "aria-hidden": "true" }), t("badgeLabel"), h("span", { className: "dpg-badge-wait" }, `· ${state.wait}`));
+        }
+        if (state.soon) {
+          const label = formatTemplate(t("soonBadgeLabel"), { wait: state.wait });
+          return h("span", { className: "dpg-badge", "data-mode": "soon", title: label, "aria-label": label },
+            h("span", { className: "dpg-dot", "aria-hidden": "true" }), label);
+        }
+        return null;
+      }
+
+      function Countdown({ state }) {
+        const parts = state.waitParts;
+        if (parts.hours > 0) {
+          return h("div", { className: "dpg-count-num" },
+            h("b", null, parts.hours), h("span", null, t("unitHour")),
+            h("b", null, parts.minutes), h("span", null, t("unitMin")),
+          );
+        }
+        if (parts.totalMinutes >= 1) {
+          return h("div", { className: "dpg-count-num" },
+            h("b", null, parts.minutes), h("span", null, t("unitMin")),
+          );
+        }
+        return h("div", { className: "dpg-count-num" },
+          h("b", null, Math.max(1, Math.ceil(parts.ms / 1000))), h("span", null, t("unitSec")),
+        );
+      }
+
+      function PeakCard() {
+        const state = usePeakState(store, t);
+        const [dismissedEnd, setDismissedEnd] = useState(() => {
+          try {
+            return Number(localStorage.getItem(DISMISS_KEY) || "0");
+          } catch {
+            return 0;
+          }
+        });
+        const [dismissedSoon, setDismissedSoon] = useState(() => {
+          try {
+            return Number(localStorage.getItem(SOON_DISMISS_KEY) || "0");
+          } catch {
+            return 0;
+          }
+        });
+        const [showDetails, setShowDetails] = useState(false);
+        const [enabled, setEnabled] = useState(() => {
+          try {
+            return localStorage.getItem(ENABLED_KEY) !== "0";
+          } catch {
+            return true;
+          }
+        });
+        useEffect(() => {
+          const onStorage = (event) => {
+            if (event.key === ENABLED_KEY) setEnabled(event.newValue !== "0");
+          };
+          window.addEventListener("storage", onStorage);
+          return () => window.removeEventListener("storage", onStorage);
+        }, []);
+        if (!enabled) return null;
+        const isSoon = state.mode === "soon";
+        if (state.mode !== "peak" && state.mode !== "soon") return null;
+        if (state.mode === "peak" && dismissedEnd === state.windowEnd) return null;
+        if (isSoon && dismissedSoon === state.windowStart) return null;
+        const dismiss = () => {
+          if (state.mode === "peak") {
+            setDismissedEnd(state.windowEnd);
+            try {
+              localStorage.setItem(DISMISS_KEY, String(state.windowEnd));
+            } catch {
+              /* private mode */
+            }
+            return;
+          }
+          setDismissedSoon(state.windowStart);
+          try {
+            localStorage.setItem(SOON_DISMISS_KEY, String(state.windowStart));
+          } catch {
+            /* private mode */
+          }
+        };
+        const progressPercent = Math.round((state.progress ?? 0) * 100);
+        return h("div", {
+          className: "dpg-card",
+          "data-mode": isSoon ? "soon" : "peak",
+          role: "status",
+          "aria-live": "polite",
+          "aria-label": isSoon ? `${t("soonKicker")}: ${formatTemplate(t("soonTitle"), { wait: state.wait })}` : `${t("kicker")}: ${t("title")}`,
+        },
+          h("button", { type: "button", className: "dpg-x", onClick: dismiss, title: isSoon ? t("soonDismiss") : t("dismiss"), "aria-label": isSoon ? t("soonDismiss") : t("dismiss") }, "×"),
+          h("div", { className: "dpg-top" },
+            h("div", { className: "dpg-seal", "aria-hidden": "true" },
+              h("svg", { className: "dpg-ring", viewBox: "0 0 64 64" },
+                h("circle", { className: "dpg-ring-track", cx: 32, cy: 32, r: RING_RADIUS }),
+                h("circle", { className: "dpg-ring-fill", cx: 32, cy: 32, r: RING_RADIUS, style: { strokeDashoffset: state.ringOffset } }),
+              ),
+              h("span", { className: "dpg-seal-pulse" }),
+              h("span", { className: "dpg-seal-icon" }, h(IconBolt)),
+            ),
+            h("div", { className: "dpg-copy" },
+              h("div", { className: "dpg-kicker" },
+                h("span", { className: "dpg-dot", "aria-hidden": "true" }),
+                isSoon ? t("soonKicker") : t("kicker"),
+                h("span", { className: "dpg-mult" }, t("multiplier")),
+              ),
+              h("div", { className: "dpg-title" }, isSoon ? formatTemplate(t("soonTitle"), { wait: state.wait }) : t("title")),
+              h("div", { className: "dpg-reason" }, isSoon ? t("soonReason") : t("reason")),
+            ),
+          ),
+          h("div", { className: "dpg-mid" },
+            h("div", { className: "dpg-count" },
+              h(Countdown, { state }),
+              h("div", { className: "dpg-count-label" }, isSoon ? t("soonCountdownLabel") : t("countdownLabel")),
+            ),
+            h("div", { className: "dpg-meter" },
+              h("div", { className: "dpg-meter-head" },
+                h("span", null, t("windowLabel"), " ", h("b", null, formatTemplate(t("windowRange"), { start: state.startLabel, end: state.endLabel, zone: state.zone }))),
+                h("span", null, `${t("nowLabel")} ${state.nowLabel}`, isSoon ? null : h("b", { style: { marginLeft: 6 } }, `${progressPercent}%`)),
+              ),
+              h("div", { className: "dpg-track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progressPercent, "aria-label": isSoon ? t("soonCountdownLabel") : t("countdownLabel") },
+                h("div", { className: "dpg-fill", style: { width: `${progressPercent}%` } }),
+              ),
+            ),
+          ),
+          h("div", { className: "dpg-rec" },
+            h("span", { className: "dpg-rec-mark", "aria-hidden": "true" }, "→"),
+            h("div", { className: "dpg-rec-body" },
+              h("span", { className: "dpg-rec-label" }, isSoon ? t("soonRecommendationTitle") : t("recommendationTitle")),
+              h("span", { className: "dpg-rec-text" }, isSoon
+                ? renderTemplate(t("soonRecommendation"), { start: h("b", null, state.startLabel), end: h("b", null, state.endLabel) })
+                : renderTemplate(t("recommendation"), { time: h("b", null, state.endLabel), wait: h("b", null, state.wait) })),
+            ),
+          ),
+          h("div", { className: "dpg-tail" },
+            h("div", { className: "dpg-schedule" },
+              h("span", { className: "dpg-schedule-label" }, t("scheduleChipLabel")),
+              state.scheduleLocalParts.map((part) => h("span", { className: "dpg-chip", key: part }, part)),
+              h("span", { className: "dpg-schedule-note" }, t("scheduleWeekend")),
+            ),
+            h("div", { className: "dpg-actions" },
+              h("button", { type: "button", className: "dpg-btn", onClick: () => setShowDetails((value) => !value), "aria-expanded": showDetails ? "true" : "false" }, showDetails ? t("hideDetails") : t("details")),
+              h("button", { type: "button", className: "dpg-btn", "data-emphasis": "true", onClick: dismiss }, isSoon ? t("soonDismiss") : t("dismiss")),
+            ),
+          ),
+          showDetails
+            ? h("div", { className: "dpg-details" },
+              h("span", null, t("scheduleUtc"), " ", h("b", null, state.scheduleUtc)),
+              h("span", null, formatTemplate(t("scheduleLocal"), { zone: state.zone }), " ", h("b", null, state.scheduleLocal)),
+              h("span", null, t("holidayNote")),
+              h("span", null, t("scheduleWeekend")),
+            )
+            : null,
+        );
+      }
+
+      ctx.effect(() => ctx.slots.inject("conversation.composer.dock", () => ctx.slots.register({
+        name: "conversation.composer.dock",
+        id: "peak-guard",
+        order: 5,
+        locale: NS,
+      }, PeakCard)), "peak-guard: composer dock card");
+
+      ctx.effect(() => ctx.slots.inject("conversation.session.header.utilities", () => ctx.slots.register({
+        name: "conversation.session.header.utilities",
+        id: "peak-guard",
+        order: 40,
+        label: () => t("badgeLabel"),
+        locale: NS,
+      }, HeaderBadge)), "peak-guard: header badge");
+
+      try {
+        window.__DSH_PEAK_GUARD__ = {
+          state: () => buildState(store.getNow(), t),
+          preview: (iso) => store.force(iso),
+          clearPreview: () => store.force(null),
+          leadMinutes: PEAK_LEAD_MS / 60000,
+          setEnabled: (value) => {
+            try {
+              localStorage.setItem(ENABLED_KEY, value ? "1" : "0");
+            } catch {
+              /* private mode */
+            }
+            window.dispatchEvent(new StorageEvent("storage", { key: ENABLED_KEY, newValue: value ? "1" : "0" }));
+          },
+        };
+        ctx.effect(() => () => {
+          try {
+            delete window.__DSH_PEAK_GUARD__;
+          } catch {
+            /* hardened page */
+          }
+        }, "peak-guard: debug hook");
+      } catch {
+        /* hardened page */
+      }
+
+      console.info("[peak-guard] ready");
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  },
+});