@nightkatana/kronosys-app 1.0.0-beta.21 → 1.0.0-beta.22

package/components/dashboard/KronoFocusPanel.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { Play, Pause, RotateCcw, Check, X, CircleHelp } from "lucide-react";
+import { useAnchoredFloatingPortalStyle } from "@/components/dashboard/useAnchoredFloatingPortalStyle";
 import type { DashboardStrings } from "@/lib/dashboardCopy";
 import {
   clearKronoFocusDurationHistory,
@@ -15,6 +17,13 @@ import {
   KRONO_FOCUS_RHYTHM_PRESETS,
 } from "@/lib/kronoFocusRhythm";
 import { getKronoFocusTimerUrgency } from "@/lib/kronoFocusTimerUrgency";
+import {
+  appShellToolbarIconActiveClass,
+  appShellToolbarIconLinkClass,
+  appShellToolbarInsetCellH10ButtonClass,
+  appShellToolbarInsetCellH10Class,
+  appShellToolbarRibbonTrayWideClass,
+} from "@/lib/appShellToolbarChrome";
 
 import { useKronoFocusLiveSeconds } from "./useKronoFocusLiveSeconds";
 
@@ -41,19 +50,10 @@ 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`;
+const kronoFocusControlNeutralCard = `${kronoFocusControlBtnBaseCard} text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/80 disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-zinc-900`;
+const kronoFocusControlAccentCard = `${kronoFocusControlBtnBaseCard} text-violet-800 hover:bg-violet-50 dark:text-violet-200 dark:hover:bg-violet-950/55 disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-zinc-900`;
 
 /** Affichage minuteur et champ de durée : toujours `HH:MM:SS` (temps écoulé, pas une heure du jour). */
 function formatSecondsAsHMS(totalSec: number): string {
@@ -61,7 +61,9 @@ function formatSecondsAsHMS(totalSec: number): string {
   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")}`;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(
+    sec,
+  ).padStart(2, "0")}`;
 }
 
 /**
@@ -73,7 +75,8 @@ function parseTimeInputToSeconds(value: string): number | null {
   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;
+    if (Number.isNaN(h) || Number.isNaN(m) || m < 0 || m > 59 || h < 0)
+      return null;
     return h * 3600 + m * 60;
   }
   if (parts.length === 3) {
@@ -215,7 +218,9 @@ function KronoFocusDurationPopoverFields({
           />
         </div>
       </div>
-      <p className="mt-1.5 text-[0.6rem] leading-snug text-zinc-500 dark:text-zinc-500">{t.kronoFocusRhythmBreaksMinutesHint}</p>
+      <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"
@@ -250,7 +255,10 @@ function KronoFocusDurationPopoverFields({
                   type="button"
                   className={kronoFocusDurationHistoryChipClass}
                   title={label}
-                  aria-label={t.kronoFocusDurationHistoryPickAria.replace("{time}", label)}
+                  aria-label={t.kronoFocusDurationHistoryPickAria.replace(
+                    "{time}",
+                    label,
+                  )}
                   onClick={() => setDraftTime(label)}
                 >
                   {label}
@@ -284,67 +292,6 @@ function KronoFocusDurationPopoverFields({
   );
 }
 
-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);
@@ -382,7 +329,9 @@ function KronoFocusDurationHelpTrigger({ t }: { t: DashboardStrings }) {
           role="region"
           aria-label={t.kronoFocusDurationHelpAriaLabel}
         >
-          <p className="text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">{t.kronoFocusDurationHelpBody}</p>
+          <p className="text-[0.7rem] leading-snug text-zinc-700 dark:text-zinc-300">
+            {t.kronoFocusDurationHelpBody}
+          </p>
         </div>
       ) : null}
     </div>
@@ -407,25 +356,44 @@ export function KronoFocusPanel({
   /** `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 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 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 [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 [customDurationHistory, setCustomDurationHistory] = useState<number[]>(
+    [],
+  );
+  const timeButtonRef = useRef<HTMLButtonElement>(null);
+  const durationPopoverPanelRef = useRef<HTMLDivElement>(null);
   const prevKronoFocusStatusRef = useRef(status);
   const [showStartPulse, setShowStartPulse] = useState(false);
 
+  const durationPopoverStyle = useAnchoredFloatingPortalStyle(
+    durationPopoverOpen && canEditWorkDuration,
+    timeButtonRef,
+    durationPopoverPanelRef,
+    { align: "center", maxWidthRem: 20 },
+  );
+
   useEffect(() => {
-    setCustomDurationHistory(loadKronoFocusDurationHistory(DEFAULT_KRONO_FOCUS_WORK_SEC));
+    setCustomDurationHistory(
+      loadKronoFocusDurationHistory(DEFAULT_KRONO_FOCUS_WORK_SEC),
+    );
   }, []);
 
   useEffect(() => {
@@ -439,7 +407,8 @@ export function KronoFocusPanel({
       return;
     }
     const workSec =
-      typeof kronoFocus?.workDurationSeconds === "number" && Number.isFinite(kronoFocus.workDurationSeconds)
+      typeof kronoFocus?.workDurationSeconds === "number" &&
+      Number.isFinite(kronoFocus.workDurationSeconds)
         ? kronoFocus.workDurationSeconds
         : serverSecs;
     setDraftTime(formatSecondsAsHMS(workSec));
@@ -474,8 +443,12 @@ export function KronoFocusPanel({
   useEffect(() => {
     if (!durationPopoverOpen) return;
     const onDocMouseDown = (e: MouseEvent) => {
-      const el = popoverRef.current;
-      if (el && !el.contains(e.target as Node)) {
+      const target = e.target as Node;
+      const trigger = timeButtonRef.current;
+      const panel = durationPopoverPanelRef.current;
+      const insideTrigger = trigger ? trigger.contains(target) : false;
+      const insidePanel = panel ? panel.contains(target) : false;
+      if (!insideTrigger && !insidePanel) {
         setDurationPopoverOpen(false);
       }
     };
@@ -490,7 +463,9 @@ export function KronoFocusPanel({
     };
   }, [durationPopoverOpen]);
 
-  const applyRhythmPreset = (preset: (typeof KRONO_FOCUS_RHYTHM_PRESETS)[number]) => {
+  const applyRhythmPreset = (
+    preset: (typeof KRONO_FOCUS_RHYTHM_PRESETS)[number],
+  ) => {
     void post({
       type: "setKronoFocusDurations",
       workSeconds: preset.workSeconds,
@@ -498,7 +473,11 @@ export function KronoFocusPanel({
       longBreakSeconds: preset.longBreakSeconds,
     });
     setCustomDurationHistory((prev) => {
-      const next = pushKronoFocusDurationHistory(prev, preset.workSeconds, DEFAULT_KRONO_FOCUS_WORK_SEC);
+      const next = pushKronoFocusDurationHistory(
+        prev,
+        preset.workSeconds,
+        DEFAULT_KRONO_FOCUS_WORK_SEC,
+      );
       persistKronoFocusDurationHistory(next);
       return next;
     });
@@ -511,17 +490,22 @@ export function KronoFocusPanel({
       parsed !== null
         ? clampWorkDurationSeconds(parsed)
         : clampWorkDurationSeconds(
-            typeof kronoFocus?.workDurationSeconds === "number" && Number.isFinite(kronoFocus.workDurationSeconds)
+            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),
+      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),
+      Number.isFinite(lm) && lm >= 1
+        ? lm * 60
+        : kronoFocus?.longBreakDurationSeconds ?? 15 * 60,
     );
     void post({
       type: "setKronoFocusDurations",
@@ -530,7 +514,11 @@ export function KronoFocusPanel({
       longBreakSeconds,
     });
     setCustomDurationHistory((prev) => {
-      const next = pushKronoFocusDurationHistory(prev, workSeconds, DEFAULT_KRONO_FOCUS_WORK_SEC);
+      const next = pushKronoFocusDurationHistory(
+        prev,
+        workSeconds,
+        DEFAULT_KRONO_FOCUS_WORK_SEC,
+      );
       persistKronoFocusDurationHistory(next);
       return next;
     });
@@ -543,7 +531,11 @@ export function KronoFocusPanel({
   };
 
   const modeLabel =
-    mode === "work" ? t.workMode : mode === "break" ? t.breakMode : t.longBreakMode;
+    mode === "work"
+      ? t.workMode
+      : mode === "break"
+      ? t.breakMode
+      : t.longBreakMode;
 
   const linkedId = kronoFocus?.linkedTaskId;
   const linkedName = kronoFocus?.linkedTaskName?.trim();
@@ -555,20 +547,23 @@ export function KronoFocusPanel({
       ? `#kronosys-active-task-${linkedId}`
       : "#kronosys-task-focus";
 
-  const { blink: timerBlink, urgentHighlight: timerUrgentHighlight } = getKronoFocusTimerUrgency({
-    timeLeftSeconds: displaySecs,
-    mode,
-    status,
-  });
+  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. */
+    variant === "headerBar"
+      ? "text-sm font-bold sm:text-base"
+      : "text-3xl sm:text-4xl";
+  /** Libellé de phase : bandeau entête = cellule h10 ; carte = grande échelle. */
   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]`
+      ? "block min-w-0 truncate text-center text-xs font-bold leading-none tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-sm"
       : `${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 =
@@ -583,39 +578,72 @@ export function KronoFocusPanel({
     showStartPulse
       ? "kronosys-krono-focus-start-pulse"
       : timerBlink
-        ? "kronosys-krono-focus-time-blink"
-        : ""
+      ? "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") {
+    const headerBarCtrlDisabled =
+      "disabled:pointer-events-none disabled:opacity-45 disabled:cursor-not-allowed";
+    const headerBarCtrlNeutral = `${appShellToolbarIconLinkClass} ${headerBarCtrlDisabled} [&_svg]:pointer-events-none [&_svg]:block [&_svg]:shrink-0`;
+    const headerBarCtrlAccent = `${appShellToolbarIconActiveClass} ${headerBarCtrlDisabled} [&_svg]:pointer-events-none [&_svg]:block [&_svg]:shrink-0`;
+
+    const ctrlsReadOnly = viewingArchive;
+    const ctrlRoTitle = ctrlsReadOnly
+      ? t.kronoFocusControlsReadOnlyTooltip
+      : undefined;
+
     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"
+        className={`relative ${appShellToolbarRibbonTrayWideClass}`}
         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}
+        <div className="relative flex min-h-0 min-w-0 max-w-full flex-nowrap items-center gap-x-2">
+          <div
+            className={`${appShellToolbarInsetCellH10Class} max-w-[8.5rem] min-w-0 shrink px-1.5 sm:max-w-[11rem]`}
+          >
+            <span className={phaseLabelClassName}>{modeLabel}</span>
+          </div>
+          <div className="flex shrink-0 items-center gap-x-2">
+            {status === "running" ? (
+              <button
+                type="button"
+                className={headerBarCtrlNeutral}
+                disabled={ctrlsReadOnly}
+                title={ctrlsReadOnly ? ctrlRoTitle : t.kronoFocusPause}
+                aria-label={t.kronoFocusPause}
+                onClick={() => void post({ type: "pauseKronoFocus" })}
+              >
+                <Pause strokeWidth={2} aria-hidden />
+              </button>
+            ) : (
+              <button
+                type="button"
+                className={headerBarCtrlAccent}
+                disabled={ctrlsReadOnly}
+                title={ctrlsReadOnly ? ctrlRoTitle : t.kronoFocusStart}
+                aria-label={t.kronoFocusStart}
+                onClick={() => void post({ type: "startKronoFocus" })}
+              >
+                <Play strokeWidth={2} aria-hidden />
+              </button>
+            )}
+            <button
+              type="button"
+              className={headerBarCtrlNeutral}
+              disabled={ctrlsReadOnly}
+              title={ctrlsReadOnly ? ctrlRoTitle : t.kronoFocusReset}
+              aria-label={t.kronoFocusReset}
+              onClick={() => void post({ type: "resetKronoFocus" })}
             >
-              {t.kronoFocusLiveWhileViewingArchive}
-            </span>
-          ) : null}
-          <div className="shrink-0">
-            <KronoFocusPanelHelpTrigger t={t} />
+              <RotateCcw strokeWidth={2} aria-hidden />
+            </button>
           </div>
-          <div className={phaseLabelClassName}>{modeLabel}</div>
           {canEditWorkDuration ? (
             <button
+              ref={timeButtonRef}
               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`}
+              className={`${timeSlotClass} ${appShellToolbarInsetCellH10ButtonClass} min-w-[9ch] px-1 font-mono tabular-nums ${timeClassName}`}
               title={t.kronoFocusEditDurationTitle}
               aria-label={t.kronoFocusEditDurationTitle}
               aria-expanded={durationPopoverOpen ? "true" : "false"}
@@ -625,51 +653,22 @@ export function KronoFocusPanel({
               {clockDisplay}
             </button>
           ) : (
-            <div className={`${timeSlotClass} shrink-0 leading-none ${timeClassName}`} onAnimationEnd={clearStartPulse}>
+            <div
+              className={`${timeSlotClass} ${appShellToolbarInsetCellH10Class} min-w-[9ch] px-1 font-mono tabular-nums 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">
+            <div className="hidden h-10 min-w-0 max-w-[min(38vw,12rem)] shrink items-center border-l border-zinc-300/70 pl-2 sm:flex dark:border-zinc-600/70">
               <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>
+                <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"
@@ -680,34 +679,42 @@ export function KronoFocusPanel({
             </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>
-          )}
+          {durationPopoverOpen &&
+            canEditWorkDuration &&
+            typeof document !== "undefined" &&
+            createPortal(
+              <div
+                ref={durationPopoverPanelRef}
+                style={durationPopoverStyle}
+                className="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>,
+              document.body,
+            )}
         </div>
       </section>
     );
@@ -719,58 +726,65 @@ export function KronoFocusPanel({
       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>
-              )}
+        <div className="flex w-full flex-wrap items-center justify-center gap-3 sm:justify-end">
+          <div className="flex shrink-0 items-center gap-2">
+            {status === "running" ? (
               <button
                 type="button"
                 className={kronoFocusControlNeutralCard}
-                title={t.kronoFocusReset}
-                aria-label={t.kronoFocusReset}
-                onClick={() => void post({ type: "resetKronoFocus" })}
+                disabled={viewingArchive}
+                title={
+                  viewingArchive
+                    ? t.kronoFocusControlsReadOnlyTooltip
+                    : t.kronoFocusPause
+                }
+                aria-label={t.kronoFocusPause}
+                onClick={() => void post({ type: "pauseKronoFocus" })}
               >
-                <RotateCcw strokeWidth={2} aria-hidden />
+                <Pause strokeWidth={2} aria-hidden />
               </button>
-            </div>
-          ) : null}
+            ) : (
+              <button
+                type="button"
+                className={kronoFocusControlAccentCard}
+                disabled={viewingArchive}
+                title={
+                  viewingArchive
+                    ? t.kronoFocusControlsReadOnlyTooltip
+                    : t.kronoFocusStart
+                }
+                aria-label={t.kronoFocusStart}
+                onClick={() => void post({ type: "startKronoFocus" })}
+              >
+                <Play strokeWidth={2} aria-hidden />
+              </button>
+            )}
+            <button
+              type="button"
+              className={kronoFocusControlNeutralCard}
+              disabled={viewingArchive}
+              title={
+                viewingArchive
+                  ? t.kronoFocusControlsReadOnlyTooltip
+                  : t.kronoFocusReset
+              }
+              aria-label={t.kronoFocusReset}
+              onClick={() => void post({ type: "resetKronoFocus" })}
+            >
+              <RotateCcw strokeWidth={2} aria-hidden />
+            </button>
+          </div>
         </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>
+        <div className="relative flex w-full min-w-0 flex-wrap items-center justify-center gap-x-5 gap-y-3">
+          <div
+            className={`${phaseLabelClassName} text-violet-950 dark:text-violet-100/95`}
+          >
+            {modeLabel}
+          </div>
           {canEditWorkDuration ? (
             <button
+              ref={timeButtonRef}
               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}
@@ -782,44 +796,57 @@ export function KronoFocusPanel({
               {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}
+              className={`${timeSlotClass} ${timeClassName}`}
+              onAnimationEnd={clearStartPulse}
             >
-              <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}
-              />
+              {clockDisplay}
             </div>
           )}
+
+          {durationPopoverOpen &&
+            canEditWorkDuration &&
+            typeof document !== "undefined" &&
+            createPortal(
+              <div
+                ref={durationPopoverPanelRef}
+                style={durationPopoverStyle}
+                className="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>,
+              document.body,
+            )}
         </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>
+            <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"