@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/KronoFocusPanel.tsx

@@ -0,0 +1,834 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Play, Pause, RotateCcw, Check, X, CircleHelp } from "lucide-react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import {
+  clearKronoFocusDurationHistory,
+  loadKronoFocusDurationHistory,
+  persistKronoFocusDurationHistory,
+  pushKronoFocusDurationHistory,
+} from "@/lib/kronoFocusDurationHistory";
+import {
+  clampBreakDurationSeconds,
+  clampWorkDurationSeconds,
+  KRONO_FOCUS_RHYTHM_PRESETS,
+} from "@/lib/kronoFocusRhythm";
+import { getKronoFocusTimerUrgency } from "@/lib/kronoFocusTimerUrgency";
+
+import { useKronoFocusLiveSeconds } from "./useKronoFocusLiveSeconds";
+
+type KronoFocusPanelState = {
+  mode: "work" | "break" | "longBreak";
+  status: "idle" | "running" | "paused";
+  timeLeftSeconds: number;
+  /** Aligné sur le serveur (`readPayload`) — décompte affiché entre deux rafraîchissements. */
+  kronoFocusDeadlineAtMs?: number;
+  workDurationSeconds?: number;
+  shortBreakDurationSeconds?: number;
+  longBreakDurationSeconds?: number;
+  linkedTaskId?: string;
+  linkedTaskName?: string;
+};
+
+function truncateLabel(s: string, max: number) {
+  const t = s.trim();
+  if (t.length <= max) return t;
+  return `${t.slice(0, max - 1)}…`;
+}
+
+const MAX_WORK_SEC = 8 * 3600;
+/** Durée de travail KronoFocus par défaut (25 min). */
+const DEFAULT_KRONO_FOCUS_WORK_SEC = 25 * 60;
+
+/**
+ * Bandeau entête : repères proches des boutons du header, avec variantes clair / sombre.
+ */
+/** Même gabarit que `AppShellRouteNav` (`size-10`) pour rester sur une ligne avec la nav. */
+const kronoFocusControlBtnBaseHeader =
+  "box-border inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-300 bg-white p-0 leading-none outline-none transition hover:border-zinc-400 [&_svg]:pointer-events-none [&_svg]:block [&_svg]:!h-5 [&_svg]:!w-5 [&_svg]:max-h-5 [&_svg]:max-w-5 [&_svg]:shrink-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:border-zinc-500";
+const kronoFocusControlNeutralHeader = `${kronoFocusControlBtnBaseHeader} text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/80`;
+const kronoFocusControlAccentHeader = `${kronoFocusControlBtnBaseHeader} text-violet-800 hover:bg-violet-50 dark:text-violet-200 dark:hover:bg-violet-950/55`;
+
+const kronoFocusControlBtnBaseCard =
+  "box-border inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-md border border-zinc-300 bg-white p-0 leading-none outline-none transition hover:border-zinc-400 [&_svg]:pointer-events-none [&_svg]:block [&_svg]:!h-[18px] [&_svg]:!w-[18px] [&_svg]:max-h-[18px] [&_svg]:max-w-[18px] [&_svg]:shrink-0 sm:h-10 sm:w-10 sm:[&_svg]:!h-5 sm:[&_svg]:!w-5 sm:[&_svg]:max-h-5 sm:[&_svg]:max-w-5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:border-zinc-500";
+const kronoFocusControlNeutralCard = `${kronoFocusControlBtnBaseCard} text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/80`;
+const kronoFocusControlAccentCard = `${kronoFocusControlBtnBaseCard} text-violet-800 hover:bg-violet-50 dark:text-violet-200 dark:hover:bg-violet-950/55`;
+
+/** Affichage minuteur et champ de durée : toujours `HH:MM:SS` (temps écoulé, pas une heure du jour). */
+function formatSecondsAsHMS(totalSec: number): string {
+  const s = Math.max(0, Math.min(MAX_WORK_SEC, Math.floor(totalSec)));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+}
+
+/**
+ * Parse `HH:MM:SS` ou `HH:MM` (secondes = 0). Espaces autour des segments tolérés.
+ */
+function parseTimeInputToSeconds(value: string): number | null {
+  const trimmed = value.trim();
+  const parts = trimmed.split(":").map((p) => p.trim());
+  if (parts.length === 2) {
+    const h = Number.parseInt(parts[0], 10);
+    const m = Number.parseInt(parts[1], 10);
+    if (Number.isNaN(h) || Number.isNaN(m) || m < 0 || m > 59 || h < 0) return null;
+    return h * 3600 + m * 60;
+  }
+  if (parts.length === 3) {
+    const h = Number.parseInt(parts[0], 10);
+    const m = Number.parseInt(parts[1], 10);
+    const sec = Number.parseInt(parts[2], 10);
+    if (
+      Number.isNaN(h) ||
+      Number.isNaN(m) ||
+      Number.isNaN(sec) ||
+      m < 0 ||
+      m > 59 ||
+      sec < 0 ||
+      sec > 59 ||
+      h < 0
+    ) {
+      return null;
+    }
+    return h * 3600 + m * 60 + sec;
+  }
+  return null;
+}
+
+const kronoFocusDurationHistoryChipClass =
+  "rounded-md border border-zinc-300 bg-white px-2 py-1 font-mono text-[0.65rem] leading-none text-zinc-700 tabular-nums hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-600/90 dark:bg-zinc-950/80 dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800";
+
+function KronoFocusDurationPopoverFields({
+  inputId,
+  t,
+  draftTime,
+  setDraftTime,
+  draftShortBreakMin,
+  setDraftShortBreakMin,
+  draftLongBreakMin,
+  setDraftLongBreakMin,
+  onPickPreset,
+  customHistory,
+  onPickDefault,
+  onApply,
+  onCancel,
+  onClearHistory,
+}: {
+  inputId: string;
+  t: DashboardStrings;
+  draftTime: string;
+  setDraftTime: (v: string) => void;
+  draftShortBreakMin: string;
+  setDraftShortBreakMin: (v: string) => void;
+  draftLongBreakMin: string;
+  setDraftLongBreakMin: (v: string) => void;
+  onPickPreset: (preset: (typeof KRONO_FOCUS_RHYTHM_PRESETS)[number]) => void;
+  customHistory: number[];
+  onPickDefault: () => void;
+  onApply: () => void;
+  onCancel: () => void;
+  onClearHistory: () => void;
+}) {
+  const shortId = `${inputId}-short-break-min`;
+  const longId = `${inputId}-long-break-min`;
+
+  return (
+    <>
+      <div>
+        <p className="text-[0.6rem] font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-500">
+          {t.kronoFocusRhythmPresetsHeading}
+        </p>
+        <div className="mt-1.5 flex flex-wrap gap-1.5">
+          {KRONO_FOCUS_RHYTHM_PRESETS.map((preset, i) => (
+            <button
+              key={preset.id}
+              type="button"
+              className="rounded-md border border-violet-300/80 bg-violet-50/90 px-2 py-1 text-[0.65rem] font-semibold text-violet-950 hover:bg-violet-100 dark:border-violet-700/60 dark:bg-violet-950/40 dark:text-violet-100 dark:hover:bg-violet-900/45"
+              title={t.kronoFocusRhythmPresetTitles[i]}
+              aria-label={t.kronoFocusRhythmPresetTitles[i]}
+              onClick={() => onPickPreset(preset)}
+            >
+              {t.kronoFocusRhythmPresetLabels[i]}
+            </button>
+          ))}
+        </div>
+      </div>
+      <hr className="my-2.5 border-zinc-200 dark:border-zinc-600" />
+      <div className="flex items-start justify-between gap-2">
+        <label
+          htmlFor={inputId}
+          className="block flex-1 text-[0.65rem] font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-400"
+        >
+          {t.kronoFocusDurationPickerLabel}
+        </label>
+        <KronoFocusDurationHelpTrigger t={t} />
+      </div>
+      <input
+        id={inputId}
+        type="text"
+        inputMode="text"
+        autoComplete="off"
+        spellCheck={false}
+        placeholder={t.kronoFocusDurationInputPlaceholder}
+        value={draftTime}
+        onChange={(e) => setDraftTime(e.target.value)}
+        title={t.kronoFocusDurationPickerLabel}
+        className="mt-2 w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 font-mono text-sm text-zinc-900 placeholder:text-zinc-400 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-600"
+      />
+      <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <div>
+          <label
+            htmlFor={shortId}
+            className="block text-[0.6rem] font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-500"
+          >
+            {t.kronoFocusShortBreakMinutesLabel}
+          </label>
+          <input
+            id={shortId}
+            type="text"
+            inputMode="numeric"
+            autoComplete="off"
+            spellCheck={false}
+            value={draftShortBreakMin}
+            onChange={(e) => setDraftShortBreakMin(e.target.value)}
+            className="mt-1 w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 font-mono text-sm text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor={longId}
+            className="block text-[0.6rem] font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-500"
+          >
+            {t.kronoFocusLongBreakMinutesLabel}
+          </label>
+          <input
+            id={longId}
+            type="text"
+            inputMode="numeric"
+            autoComplete="off"
+            spellCheck={false}
+            value={draftLongBreakMin}
+            onChange={(e) => setDraftLongBreakMin(e.target.value)}
+            className="mt-1 w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 font-mono text-sm text-zinc-900 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
+          />
+        </div>
+      </div>
+      <p className="mt-1.5 text-[0.6rem] leading-snug text-zinc-500 dark:text-zinc-500">{t.kronoFocusRhythmBreaksMinutesHint}</p>
+      <button
+        type="button"
+        className="mt-2 w-full rounded-md border border-zinc-300 px-2 py-1.5 text-left text-[0.7rem] font-medium text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+        title={t.kronoFocusDefaultWorkDuration}
+        aria-label={t.kronoFocusDefaultWorkDuration}
+        onClick={onPickDefault}
+      >
+        {t.kronoFocusDefaultWorkDuration}
+      </button>
+      {customHistory.length > 0 ? (
+        <div className="mt-2">
+          <div className="mb-1.5 flex items-start justify-between gap-2">
+            <p className="min-w-0 flex-1 text-[0.6rem] font-medium uppercase tracking-wide text-zinc-600 dark:text-zinc-500">
+              {t.kronoFocusDurationHistoryLabel}
+            </p>
+            <button
+              type="button"
+              className="shrink-0 rounded border border-zinc-300 bg-zinc-100 px-1.5 py-0.5 text-[0.6rem] font-medium text-zinc-600 hover:border-zinc-400 hover:bg-zinc-200/80 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+              title={t.kronoFocusDurationHistoryClearTitle}
+              aria-label={t.kronoFocusDurationHistoryClearTitle}
+              onClick={onClearHistory}
+            >
+              {t.kronoFocusDurationHistoryClear}
+            </button>
+          </div>
+          <div className="flex max-h-[6.5rem] flex-wrap gap-1.5 overflow-y-auto pr-0.5">
+            {customHistory.map((sec) => {
+              const label = formatSecondsAsHMS(sec);
+              return (
+                <button
+                  key={sec}
+                  type="button"
+                  className={kronoFocusDurationHistoryChipClass}
+                  title={label}
+                  aria-label={t.kronoFocusDurationHistoryPickAria.replace("{time}", label)}
+                  onClick={() => setDraftTime(label)}
+                >
+                  {label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : null}
+      <div className="mt-3 flex justify-end gap-2">
+        <button
+          type="button"
+          className="rounded-md border border-zinc-300 p-1.5 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+          title={t.kronoFocusCancelDurationEdit}
+          aria-label={t.kronoFocusCancelDurationEdit}
+          onClick={onCancel}
+        >
+          <X size={18} strokeWidth={2} aria-hidden />
+        </button>
+        <button
+          type="button"
+          className="rounded-md border border-violet-500/45 bg-violet-50 p-1.5 text-violet-900 hover:bg-violet-100/90 dark:border-violet-500/50 dark:bg-violet-950/40 dark:text-violet-100 dark:hover:bg-violet-900/50"
+          title={t.kronoFocusApplyDuration}
+          aria-label={t.kronoFocusApplyDuration}
+          onClick={() => void onApply()}
+        >
+          <Check size={18} strokeWidth={2} aria-hidden />
+        </button>
+      </div>
+    </>
+  );
+}
+
+function KronoFocusPanelHelpTrigger({ t }: { t: DashboardStrings }) {
+  const subtitle = (t.kronoFocusStandaloneSubtitle ?? "").trim();
+  const note = (t.kronoFocusAutoRefreshNote ?? "").trim();
+  const hasBody = subtitle.length > 0 || note.length > 0;
+
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  if (!hasBody) {
+    return null;
+  }
+
+  return (
+    <div className="relative inline-flex shrink-0" ref={rootRef}>
+      <button
+        type="button"
+        className="rounded p-0.5 text-zinc-500 hover:bg-zinc-200/90 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+        aria-label={t.kronoFocusPanelHelpAriaLabel}
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={`${id}-kronoFocus-panel-help`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <CircleHelp size={15} strokeWidth={1.75} aria-hidden />
+      </button>
+      {open ? (
+        <div
+          id={`${id}-kronoFocus-panel-help`}
+          className="absolute left-0 top-full z-[60] mt-1 w-[min(calc(100vw-2rem),18rem)] rounded-lg border border-zinc-200 bg-white p-2.5 text-left shadow-lg dark:border-zinc-600 dark:bg-zinc-900"
+          role="region"
+          aria-label={t.kronoFocusPanelHelpAriaLabel}
+        >
+          {subtitle ? (
+            <p className="text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">{subtitle}</p>
+          ) : null}
+          {note ? (
+            <p
+              className={`text-[0.7rem] leading-snug text-zinc-600 dark:text-zinc-400 ${subtitle ? "mt-2" : ""}`}
+            >
+              {note}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function KronoFocusDurationHelpTrigger({ t }: { t: DashboardStrings }) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const id = useId();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  return (
+    <div className="relative inline-flex shrink-0" ref={rootRef}>
+      <button
+        type="button"
+        className="rounded p-0.5 text-zinc-500 hover:bg-zinc-200/90 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+        aria-label={t.kronoFocusDurationHelpAriaLabel}
+        aria-expanded={open ? "true" : "false"}
+        aria-controls={`${id}-kronoFocus-duration-help`}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <CircleHelp size={15} strokeWidth={1.75} aria-hidden />
+      </button>
+      {open ? (
+        <div
+          id={`${id}-kronoFocus-duration-help`}
+          className="absolute right-0 top-full z-[60] mt-1 w-[min(calc(100vw-2rem),14rem)] rounded-lg border border-zinc-200 bg-white p-2.5 text-left shadow-lg dark:border-zinc-600 dark:bg-zinc-900"
+          role="region"
+          aria-label={t.kronoFocusDurationHelpAriaLabel}
+        >
+          <p className="text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">{t.kronoFocusDurationHelpBody}</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function KronoFocusPanel({
+  kronoFocus,
+  liveActiveTaskIds,
+  t,
+  post,
+  viewingArchive,
+  variant = "default",
+}: {
+  kronoFocus: KronoFocusPanelState | undefined;
+  /** Tâches au minuteur en session live (ancre `#kronosys-active-task-<id>` si le KronoFocus est lié). */
+  liveActiveTaskIds?: string[];
+  t: DashboardStrings;
+  post: (body: Record<string, unknown>) => Promise<void>;
+  /** True when the user is browsing a past session — timer UI still targets the live session */
+  viewingArchive?: boolean;
+  /** `headerBar` : bandeau compact pour l’entête (grands écrans) ; `default` : carte complète */
+  variant?: "default" | "headerBar";
+}) {
+  const serverSecs = kronoFocus?.timeLeftSeconds ?? DEFAULT_KRONO_FOCUS_WORK_SEC;
+  const mode = kronoFocus?.mode ?? "work";
+  const status = kronoFocus?.status ?? "idle";
+  const displaySecs = useKronoFocusLiveSeconds(serverSecs, status, kronoFocus?.kronoFocusDeadlineAtMs);
+  const clockDisplay = formatSecondsAsHMS(displaySecs);
+  const canEditWorkDuration =
+    !viewingArchive && status === "idle" && mode === "work";
+
+  const [durationPopoverOpen, setDurationPopoverOpen] = useState(false);
+  const [draftTime, setDraftTime] = useState(() => formatSecondsAsHMS(serverSecs));
+  const [draftShortBreakMin, setDraftShortBreakMin] = useState("5");
+  const [draftLongBreakMin, setDraftLongBreakMin] = useState("15");
+  const [customDurationHistory, setCustomDurationHistory] = useState<number[]>([]);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const prevKronoFocusStatusRef = useRef(status);
+  const [showStartPulse, setShowStartPulse] = useState(false);
+
+  useEffect(() => {
+    setCustomDurationHistory(loadKronoFocusDurationHistory(DEFAULT_KRONO_FOCUS_WORK_SEC));
+  }, []);
+
+  useEffect(() => {
+    if (!canEditWorkDuration) {
+      setDurationPopoverOpen(false);
+    }
+  }, [canEditWorkDuration]);
+
+  useEffect(() => {
+    if (!durationPopoverOpen) {
+      return;
+    }
+    const workSec =
+      typeof kronoFocus?.workDurationSeconds === "number" && Number.isFinite(kronoFocus.workDurationSeconds)
+        ? kronoFocus.workDurationSeconds
+        : serverSecs;
+    setDraftTime(formatSecondsAsHMS(workSec));
+    const sb = kronoFocus?.shortBreakDurationSeconds ?? 5 * 60;
+    const lb = kronoFocus?.longBreakDurationSeconds ?? 15 * 60;
+    setDraftShortBreakMin(String(Math.max(1, Math.round(sb / 60))));
+    setDraftLongBreakMin(String(Math.max(1, Math.round(lb / 60))));
+  }, [
+    durationPopoverOpen,
+    kronoFocus?.workDurationSeconds,
+    kronoFocus?.shortBreakDurationSeconds,
+    kronoFocus?.longBreakDurationSeconds,
+    serverSecs,
+  ]);
+
+  useEffect(() => {
+    const prev = prevKronoFocusStatusRef.current;
+    if (status === "running" && prev === "idle") {
+      setShowStartPulse(true);
+    }
+    prevKronoFocusStatusRef.current = status;
+  }, [status]);
+
+  useEffect(() => {
+    if (!showStartPulse) {
+      return;
+    }
+    const id = window.setTimeout(() => setShowStartPulse(false), 1000);
+    return () => window.clearTimeout(id);
+  }, [showStartPulse]);
+
+  useEffect(() => {
+    if (!durationPopoverOpen) return;
+    const onDocMouseDown = (e: MouseEvent) => {
+      const el = popoverRef.current;
+      if (el && !el.contains(e.target as Node)) {
+        setDurationPopoverOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setDurationPopoverOpen(false);
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [durationPopoverOpen]);
+
+  const applyRhythmPreset = (preset: (typeof KRONO_FOCUS_RHYTHM_PRESETS)[number]) => {
+    void post({
+      type: "setKronoFocusDurations",
+      workSeconds: preset.workSeconds,
+      shortBreakSeconds: preset.shortBreakSeconds,
+      longBreakSeconds: preset.longBreakSeconds,
+    });
+    setCustomDurationHistory((prev) => {
+      const next = pushKronoFocusDurationHistory(prev, preset.workSeconds, DEFAULT_KRONO_FOCUS_WORK_SEC);
+      persistKronoFocusDurationHistory(next);
+      return next;
+    });
+    setDurationPopoverOpen(false);
+  };
+
+  const applyDraftDuration = () => {
+    const parsed = parseTimeInputToSeconds(draftTime);
+    const workSeconds =
+      parsed !== null
+        ? clampWorkDurationSeconds(parsed)
+        : clampWorkDurationSeconds(
+            typeof kronoFocus?.workDurationSeconds === "number" && Number.isFinite(kronoFocus.workDurationSeconds)
+              ? kronoFocus.workDurationSeconds
+              : serverSecs,
+          );
+    const sm = Number.parseInt(draftShortBreakMin.trim(), 10);
+    const lm = Number.parseInt(draftLongBreakMin.trim(), 10);
+    const shortBreakSeconds = clampBreakDurationSeconds(
+      Number.isFinite(sm) && sm >= 1 ? sm * 60 : (kronoFocus?.shortBreakDurationSeconds ?? 5 * 60),
+    );
+    const longBreakSeconds = clampBreakDurationSeconds(
+      Number.isFinite(lm) && lm >= 1 ? lm * 60 : (kronoFocus?.longBreakDurationSeconds ?? 15 * 60),
+    );
+    void post({
+      type: "setKronoFocusDurations",
+      workSeconds,
+      shortBreakSeconds,
+      longBreakSeconds,
+    });
+    setCustomDurationHistory((prev) => {
+      const next = pushKronoFocusDurationHistory(prev, workSeconds, DEFAULT_KRONO_FOCUS_WORK_SEC);
+      persistKronoFocusDurationHistory(next);
+      return next;
+    });
+    setDurationPopoverOpen(false);
+  };
+
+  const clearDurationHistory = () => {
+    clearKronoFocusDurationHistory();
+    setCustomDurationHistory([]);
+  };
+
+  const modeLabel =
+    mode === "work" ? t.workMode : mode === "break" ? t.breakMode : t.longBreakMode;
+
+  const linkedId = kronoFocus?.linkedTaskId;
+  const linkedName = kronoFocus?.linkedTaskName?.trim();
+  const showTaskLink =
+    !!linkedId && (status === "running" || status === "paused");
+  const ids = liveActiveTaskIds ?? [];
+  const taskHref =
+    linkedId && ids.includes(linkedId)
+      ? `#kronosys-active-task-${linkedId}`
+      : "#kronosys-task-focus";
+
+  const { blink: timerBlink, urgentHighlight: timerUrgentHighlight } = getKronoFocusTimerUrgency({
+    timeLeftSeconds: displaySecs,
+    mode,
+    status,
+  });
+
+  const clearStartPulse = () => setShowStartPulse(false);
+
+  const timeSize =
+    variant === "headerBar" ? "text-lg xl:text-xl" : "text-3xl sm:text-4xl";
+  /** Libellé de phase : même échelle que le minuteur ; bandeau entête = une ligne, troncature serrée. */
+  const phaseLabelClassName =
+    variant === "headerBar"
+      ? `${timeSize} min-w-0 max-w-[8.5rem] shrink truncate text-center font-bold leading-none tracking-tight text-zinc-800 dark:text-zinc-100 sm:max-w-[11rem] xl:max-w-[13rem]`
+      : `${timeSize} max-w-[min(100%,24rem)] text-center font-bold leading-none tracking-tight text-zinc-800 dark:text-zinc-100 sm:max-w-[30rem]`;
+  /** Largeur stable pour `HH:MM:SS` jusqu’à 8 h (08:00:00). */
+  const timeSlotClass =
+    variant === "headerBar"
+      ? "inline-block min-w-[9ch] text-center tabular-nums font-mono font-bold sm:min-w-[10ch]"
+      : "inline-block min-w-[11ch] text-center tabular-nums font-mono font-bold sm:min-w-[12ch]";
+  const timeClassName = `${timeSize} ${
+    timerUrgentHighlight
+      ? "text-violet-600 dark:text-violet-400"
+      : "text-zinc-900 dark:text-zinc-50"
+  } ${
+    showStartPulse
+      ? "kronosys-krono-focus-start-pulse"
+      : timerBlink
+        ? "kronosys-krono-focus-time-blink"
+        : ""
+  }`;
+
+  const durationPopoverAlign =
+    "left-1/2 top-full z-50 mt-2 w-[min(100vw-2rem,20rem)] -translate-x-1/2";
+
+  if (variant === "headerBar") {
+    return (
+      <section
+        className="flex w-full min-w-0 items-center justify-center rounded-lg border border-violet-200/90 bg-gradient-to-r from-violet-50/95 via-white to-violet-50/80 px-2 py-1 shadow-sm shadow-violet-900/10 sm:px-3 xl:h-10 xl:min-h-0 xl:py-0.5 dark:border-violet-900/40 dark:from-violet-950/35 dark:via-zinc-900/50 dark:to-violet-950/30 dark:shadow-black/15"
+        aria-label={t.kronoFocusTitle}
+      >
+        <div
+          ref={popoverRef}
+          className="relative flex w-full min-w-0 max-w-6xl flex-wrap items-center justify-center gap-x-1.5 gap-y-1 sm:gap-x-2 xl:flex-nowrap xl:gap-y-0"
+        >
+          {viewingArchive ? (
+            <span
+              className="max-w-[5rem] shrink-0 truncate text-[0.55rem] font-medium leading-none text-violet-900/90 sm:max-w-[7rem] dark:text-violet-200/85"
+              title={t.kronoFocusLiveWhileViewingArchive}
+            >
+              {t.kronoFocusLiveWhileViewingArchive}
+            </span>
+          ) : null}
+          <div className="shrink-0">
+            <KronoFocusPanelHelpTrigger t={t} />
+          </div>
+          <div className={phaseLabelClassName}>{modeLabel}</div>
+          {canEditWorkDuration ? (
+            <button
+              type="button"
+              className={`${timeSlotClass} rounded-md px-0.5 py-0 leading-none ${timeClassName} cursor-pointer outline-none transition-colors hover:bg-zinc-200/60 dark:hover:bg-zinc-800/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55`}
+              title={t.kronoFocusEditDurationTitle}
+              aria-label={t.kronoFocusEditDurationTitle}
+              aria-expanded={durationPopoverOpen ? "true" : "false"}
+              onClick={() => setDurationPopoverOpen((v) => !v)}
+              onAnimationEnd={clearStartPulse}
+            >
+              {clockDisplay}
+            </button>
+          ) : (
+            <div className={`${timeSlotClass} shrink-0 leading-none ${timeClassName}`} onAnimationEnd={clearStartPulse}>
+              {clockDisplay}
+            </div>
+          )}
+          {!viewingArchive ? (
+            <div className="flex shrink-0 items-center gap-1.5">
+              {status === "running" ? (
+                <button
+                  type="button"
+                  className={kronoFocusControlNeutralHeader}
+                  title={t.kronoFocusPause}
+                  aria-label={t.kronoFocusPause}
+                  onClick={() => void post({ type: "pauseKronoFocus" })}
+                >
+                  <Pause strokeWidth={2} aria-hidden />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className={kronoFocusControlAccentHeader}
+                  title={t.kronoFocusStart}
+                  aria-label={t.kronoFocusStart}
+                  onClick={() => void post({ type: "startKronoFocus" })}
+                >
+                  <Play strokeWidth={2} aria-hidden />
+                </button>
+              )}
+              <button
+                type="button"
+                className={kronoFocusControlNeutralHeader}
+                title={t.kronoFocusReset}
+                aria-label={t.kronoFocusReset}
+                onClick={() => void post({ type: "resetKronoFocus" })}
+              >
+                <RotateCcw strokeWidth={2} aria-hidden />
+              </button>
+            </div>
+          ) : null}
+          {showTaskLink ? (
+            <div className="hidden min-w-0 max-w-[min(38vw,12rem)] shrink border-l border-violet-200/70 pl-2 sm:block dark:border-violet-800/50">
+              <p
+                className="min-w-0 truncate text-left text-[0.65rem] leading-none text-zinc-600 dark:text-zinc-400"
+                title={`${t.kronoFocusLinkedTaskIntro} ${linkedName || "—"}`}
+              >
+                <span className="text-zinc-500">{t.kronoFocusLinkedTaskIntro} </span>
+                <a
+                  href={taskHref}
+                  className="font-medium text-violet-800 underline decoration-violet-500/45 underline-offset-2 hover:text-violet-700 dark:text-violet-400/95 dark:decoration-violet-500/50 dark:hover:text-violet-300"
+                >
+                  {linkedName || "—"}
+                </a>
+              </p>
+            </div>
+          ) : null}
+
+          {durationPopoverOpen && canEditWorkDuration && (
+            <div
+              className={`absolute ${durationPopoverAlign} rounded-lg border border-zinc-200 bg-white p-3 text-left shadow-xl dark:border-zinc-600 dark:bg-zinc-900`}
+              role="dialog"
+              aria-label={t.kronoFocusDurationPickerLabel}
+            >
+              <KronoFocusDurationPopoverFields
+                inputId="kronosys-krono-focus-duration-hb"
+                t={t}
+                draftTime={draftTime}
+                setDraftTime={setDraftTime}
+                draftShortBreakMin={draftShortBreakMin}
+                setDraftShortBreakMin={setDraftShortBreakMin}
+                draftLongBreakMin={draftLongBreakMin}
+                setDraftLongBreakMin={setDraftLongBreakMin}
+                onPickPreset={applyRhythmPreset}
+                customHistory={customDurationHistory}
+                onPickDefault={() => {
+                  setDraftTime(formatSecondsAsHMS(DEFAULT_KRONO_FOCUS_WORK_SEC));
+                  setDraftShortBreakMin("5");
+                  setDraftLongBreakMin("15");
+                }}
+                onApply={applyDraftDuration}
+                onCancel={() => setDurationPopoverOpen(false)}
+                onClearHistory={clearDurationHistory}
+              />
+            </div>
+          )}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section
+      className="rounded-xl border border-violet-200/80 bg-gradient-to-r from-violet-50/90 via-white to-zinc-50/95 p-5 shadow-sm shadow-violet-900/10 sm:p-6 dark:border-violet-900/35 dark:from-violet-950/40 dark:via-zinc-900/60 dark:to-zinc-900/40 dark:shadow-black/20"
+      aria-label={t.kronoFocusTitle}
+    >
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-4">
+        <div className="flex w-full flex-wrap items-center justify-center gap-3 sm:justify-between">
+          <div className="flex min-w-0 flex-wrap items-center justify-center gap-2">
+            {viewingArchive ? (
+              <p className="max-w-[min(100%,22rem)] text-center text-[0.7rem] leading-snug text-violet-900/85 dark:text-violet-200/75">
+                {t.kronoFocusLiveWhileViewingArchive}
+              </p>
+            ) : null}
+            <KronoFocusPanelHelpTrigger t={t} />
+          </div>
+          {!viewingArchive ? (
+            <div className="flex shrink-0 items-center gap-2">
+              {status === "running" ? (
+                <button
+                  type="button"
+                  className={kronoFocusControlNeutralCard}
+                  title={t.kronoFocusPause}
+                  aria-label={t.kronoFocusPause}
+                  onClick={() => void post({ type: "pauseKronoFocus" })}
+                >
+                  <Pause strokeWidth={2} aria-hidden />
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className={kronoFocusControlAccentCard}
+                  title={t.kronoFocusStart}
+                  aria-label={t.kronoFocusStart}
+                  onClick={() => void post({ type: "startKronoFocus" })}
+                >
+                  <Play strokeWidth={2} aria-hidden />
+                </button>
+              )}
+              <button
+                type="button"
+                className={kronoFocusControlNeutralCard}
+                title={t.kronoFocusReset}
+                aria-label={t.kronoFocusReset}
+                onClick={() => void post({ type: "resetKronoFocus" })}
+              >
+                <RotateCcw strokeWidth={2} aria-hidden />
+              </button>
+            </div>
+          ) : null}
+        </div>
+
+        <div
+          className="relative flex w-full min-w-0 flex-wrap items-center justify-center gap-x-5 gap-y-3"
+          ref={popoverRef}
+        >
+          <div className={`${phaseLabelClassName} text-violet-950 dark:text-violet-100/95`}>{modeLabel}</div>
+          {canEditWorkDuration ? (
+            <button
+              type="button"
+              className={`${timeSlotClass} rounded-md px-1 py-0.5 ${timeClassName} cursor-pointer outline-none transition-colors hover:bg-zinc-200/60 dark:hover:bg-zinc-800/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-violet-500/55`}
+              title={t.kronoFocusEditDurationTitle}
+              aria-label={t.kronoFocusEditDurationTitle}
+              aria-expanded={durationPopoverOpen ? "true" : "false"}
+              onClick={() => setDurationPopoverOpen((v) => !v)}
+              onAnimationEnd={clearStartPulse}
+            >
+              {clockDisplay}
+            </button>
+          ) : (
+            <div className={`${timeSlotClass} ${timeClassName}`} onAnimationEnd={clearStartPulse}>
+              {clockDisplay}
+            </div>
+          )}
+
+          {durationPopoverOpen && canEditWorkDuration && (
+            <div
+              className={`absolute ${durationPopoverAlign} rounded-lg border border-zinc-200 bg-white p-3 text-left shadow-xl dark:border-zinc-600 dark:bg-zinc-900`}
+              role="dialog"
+              aria-label={t.kronoFocusDurationPickerLabel}
+            >
+              <KronoFocusDurationPopoverFields
+                inputId="kronosys-krono-focus-duration"
+                t={t}
+                draftTime={draftTime}
+                setDraftTime={setDraftTime}
+                draftShortBreakMin={draftShortBreakMin}
+                setDraftShortBreakMin={setDraftShortBreakMin}
+                draftLongBreakMin={draftLongBreakMin}
+                setDraftLongBreakMin={setDraftLongBreakMin}
+                onPickPreset={applyRhythmPreset}
+                customHistory={customDurationHistory}
+                onPickDefault={() => {
+                  setDraftTime(formatSecondsAsHMS(DEFAULT_KRONO_FOCUS_WORK_SEC));
+                  setDraftShortBreakMin("5");
+                  setDraftLongBreakMin("15");
+                }}
+                onApply={applyDraftDuration}
+                onCancel={() => setDurationPopoverOpen(false)}
+                onClearHistory={clearDurationHistory}
+              />
+            </div>
+          )}
+        </div>
+
+        {showTaskLink ? (
+          <p className="w-full max-w-3xl text-center text-[0.8rem] leading-snug text-zinc-600 dark:text-zinc-400">
+            <span className="text-zinc-500">{t.kronoFocusLinkedTaskIntro} </span>
+            <a
+              href={taskHref}
+              className="font-medium text-violet-800 underline decoration-violet-500/45 underline-offset-2 hover:text-violet-700 dark:text-violet-400/95 dark:decoration-violet-500/50 dark:hover:text-violet-300"
+            >
+              {truncateLabel(linkedName || "—", 72)}
+            </a>
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}