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

package/components/dashboard/TaskSessionLiveCard.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import {
   Timer,
   Play,
   Pause,
   CheckCircle2,
+  Bookmark,
   Trash2,
-  GitCommit,
+  Copy,
+  Save,
 } from "lucide-react";
 import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
 import { formatIsoInstantShort } from "@/lib/formatIsoShort";
@@ -20,6 +22,7 @@ import {
   mergeTagsForDisplay,
   normalizeTagKey,
   parseTaskWithAutoTags,
+  resolvePersonalProjectForTaskUpdate,
   resolveProjectForTaskUpdate,
   taskTitleEditBaseline,
   taskTitleForDisplay,
@@ -28,6 +31,7 @@ import { TagPills } from "./TagPills";
 import { tbEmeraldIcon } from "@/lib/translucentButtonClasses";
 import {
   PROJECT_CHIP_APPLIED_CLASS,
+  PROJECT_CHIP_APPLIED_PERSONAL_CLASS,
   TASK_ACTIVE_TITLE_EDIT_INPUT_CLASS,
   TASK_ACTIVE_TITLE_READ_CLASS,
 } from "./taskFieldStyles";
@@ -74,9 +78,9 @@ const DONE_TITLE_PLAIN_CLASS =
 const TASK_CARD_SHELL_CLASS =
   "rounded-xl border border-zinc-200 bg-zinc-100/80 p-5 dark:border-zinc-800 dark:bg-black/20 sm:p-6";
 
-/** Tâches en cours : pas de cadre, intégration dans le flux. */
+/** Même gabarit visuel pour toutes les sections (en cours / pause / terminée) pour fluidifier les animations. */
 const TASK_CARD_SHELL_PLAIN_CLASS =
-  "rounded-none border-0 bg-transparent py-4 shadow-none first:pt-2 dark:bg-transparent";
+  "rounded-xl border border-zinc-200 bg-zinc-100/80 p-5 dark:border-zinc-800 dark:bg-black/20 sm:p-6";
 
 export type TaskSessionLiveCardTask = {
   id: string;
@@ -87,8 +91,19 @@ export type TaskSessionLiveCardTask = {
   startTime?: string;
   /** Fin du suivi ou de l’entrée passée (ISO 8601), si connu. */
   endTime?: string;
+  /** Fin planifiée pour une tâche active (ISO 8601), si connue. */
+  scheduledEndAt?: string;
+  /** Segments de suivi successifs (play/pause/completed). */
+  taskTimerLaps?: Array<{
+    startTime?: string;
+    endTime?: string;
+    durationMs?: number;
+  }>;
   tags?: string[];
   project?: string | null;
+  /** Projet issu d’un jeton `!` (temps personnel). */
+  personalProject?: boolean;
+  note?: string;
   subtasks?: Array<{
     id: string;
     title: string;
@@ -96,8 +111,13 @@ export type TaskSessionLiveCardTask = {
     durationMs?: number;
   }>;
   activeSubtaskTimerId?: string;
+  subtaskTimerStartedAt?: string | number;
+  mainTimerSegmentStartedAt?: string | null;
+  taskCurrentLapStartedAt?: string | number | null;
 };
 
+type DurationAdjustMode = "keep" | "manual" | "from_bounds";
+
 function TaskTimingFieldRow({
   label,
   displayValue,
@@ -105,6 +125,8 @@ function TaskTimingFieldRow({
   draftValue,
   onDraftChange,
   onDraftBlur,
+  defaultTimeMode,
+  alertClassName,
   lang,
   t,
 }: {
@@ -114,6 +136,8 @@ function TaskTimingFieldRow({
   draftValue: string;
   onDraftChange: (next: string) => void;
   onDraftBlur: () => void;
+  defaultTimeMode?: "current-hour" | "next-half-hour";
+  alertClassName?: string;
   lang: Lang;
   t: DashboardStrings;
 }) {
@@ -121,7 +145,11 @@ function TaskTimingFieldRow({
     return null;
   }
   return (
-    <div className="mt-2 flex min-w-0 flex-wrap items-center gap-2 text-[0.7rem] leading-snug text-zinc-600 dark:text-zinc-400">
+    <div
+      className={`inline-flex min-w-0 items-center gap-2 whitespace-nowrap text-[0.7rem] leading-[1.35] text-zinc-600 dark:text-zinc-400 ${
+        alertClassName ?? ""
+      }`}
+    >
       <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
         {label}
       </span>
@@ -133,11 +161,12 @@ function TaskTimingFieldRow({
             onBlur={onDraftBlur}
             aria-label={label}
             lang={lang}
+            defaultTimeMode={defaultTimeMode}
             t={t}
           />
         </>
       ) : (
-        <span className="min-w-0 tabular-nums text-zinc-800 dark:text-zinc-200">
+        <span className="inline-flex min-w-0 items-center tabular-nums text-zinc-800 dark:text-zinc-200">
           {displayValue}
         </span>
       )}
@@ -181,12 +210,20 @@ export function TaskSessionLiveCard({
   kronoFocusIsRunningOrPaused,
   showKronoFocusTaskActions = true,
   startKronoFocusFromTask,
+  onDuplicateTask,
+  onSaveAsTemplate,
+  isAlreadyTemplate = false,
   pausePlayMode,
   onPausePlay,
   anchorId,
   variant = "card",
   allowTaskStartTimeEdit = true,
   allowTaskEndTimeEdit = true,
+  showTaskActionButtons = true,
+  allowAddSubtasks = true,
+  showLiveTimerWhenInspecting = false,
+  deriveLiveTimerFromStartTime = true,
+  temporalPlanned = false,
 }: {
   task: TaskSessionLiveCardTask;
   lang: Lang;
@@ -203,6 +240,11 @@ export function TaskSessionLiveCard({
   /** Bouton « démarrer le KronoFocus » sur les tâches non terminées (paramètre tableau de bord). */
   showKronoFocusTaskActions?: boolean;
   startKronoFocusFromTask: () => void;
+  onDuplicateTask: (task: TaskSessionLiveCardTask) => void;
+  /** Enregistrer titre / étiquettes / projet comme template de tâche (carte active, en pause ou terminée). */
+  onSaveAsTemplate?: (task: TaskSessionLiveCardTask) => void;
+  /** Vrai si cette tâche existe déjà dans les templates sauvegardés. */
+  isAlreadyTemplate?: boolean;
   /** `null` : tâche terminée (pas de pause / reprise). */
   pausePlayMode: "pause" | "resume" | null;
   onPausePlay: () => void;
@@ -214,14 +256,25 @@ export function TaskSessionLiveCard({
   allowTaskStartTimeEdit?: boolean;
   /** Option `dashboardAllowTaskEndTimeEdit` : correction du `endTime` (tâches terminées). */
   allowTaskEndTimeEdit?: boolean;
+  /** Affiche/masque les actions latérales (dupliquer, supprimer, etc.). */
+  showTaskActionButtons?: boolean;
+  /** Autorise l’ajout de sous-tâches depuis la carte. */
+  allowAddSubtasks?: boolean;
+  /** Affiche la minuterie live même en mode inspection (ex. reporting). */
+  showLiveTimerWhenInspecting?: boolean;
+  /** Si `false`, la minuterie reste basée sur `durationMs` (pas de dérive depuis `startTime`). */
+  deriveLiveTimerFromStartTime?: boolean;
+  /** Affichage « planifié » (début ou fin dans le futur) : style distinct, pas de minuteur live. */
+  temporalPlanned?: boolean;
 }) {
-  const [shouldCommit, setShouldCommit] = useState(false);
+  const timingAdjustRadioGroupId = useId();
   const [finishOpenSubtasksWarnOpen, setFinishOpenSubtasksWarnOpen] =
     useState(false);
   const [dontRemindOpenSubtasksFinish, setDontRemindOpenSubtasksFinish] =
     useState(false);
   const [titleEditing, setTitleEditing] = useState(false);
   const [titleDraft, setTitleDraft] = useState("");
+  const [noteDraft, setNoteDraft] = useState("");
   const [taskStartDraft, setTaskStartDraft] = useState("");
   const [optimisticLiveBaseMs, setOptimisticLiveBaseMs] = useState<
     number | null
@@ -233,23 +286,46 @@ export function TaskSessionLiveCard({
   const [optimisticDoneDurationMin, setOptimisticDoneDurationMin] = useState<
     number | null
   >(null);
+  const [timingAdjustOpen, setTimingAdjustOpen] = useState(false);
+  const [timingAdjustMode, setTimingAdjustMode] =
+    useState<DurationAdjustMode>("keep");
+  const [manualHours, setManualHours] = useState("0");
+  const [manualMinutes, setManualMinutes] = useState("0");
+  const [manualSeconds, setManualSeconds] = useState("0");
+  const [pendingTimingEdit, setPendingTimingEdit] = useState<{
+    kind: "start" | "end";
+    nextIso: string;
+    startMs: number;
+    endMs: number | null;
+  } | null>(null);
   const titleInputRef = useRef<HTMLInputElement>(null);
   const skipTitleBlurCommitRef = useRef(false);
+  const finishAnimationPlayedRef = useRef(false);
+  const [finishCelebrate, setFinishCelebrate] = useState(false);
+  const [blinkNowMs, setBlinkNowMs] = useState(() => Date.now());
+  const [lapsNowMs, setLapsNowMs] = useState(() => Date.now());
 
   const mergedTags = mergeTagsForDisplay(task.name, task.tags);
   const trimmedProject = task.project?.trim() ?? "";
+  const isPersonalProject = task.personalProject === true;
   /** Affichage lecture seule : sans `#tags` ni `@projet` (pastilles en dessous). */
   const titleDisplay = taskTitleForDisplay(task.name);
   /** Valeur initiale à l’édition : libellé seul ; on peut toujours saisir `#tag` ou `@projet` dans le champ. */
   const titleDraftSource = taskTitleEditBaseline(task.name);
   const isDone = task.isDone === true;
-  const smoothTaskTimer = !isDone && !isInspecting && pausePlayMode === "pause";
+  const taskIsPaused = !isDone && pausePlayMode === "resume";
+  const taskIsRunning = !isDone && pausePlayMode === "pause";
+  const smoothTaskTimer =
+    !temporalPlanned &&
+    !isDone &&
+    (!isInspecting || showLiveTimerWhenInspecting) &&
+    pausePlayMode === "pause";
   const taskStopwatchBaseMs =
     optimisticLiveBaseMs !== null
       ? optimisticLiveBaseMs
       : derivedLiveBaseMs !== null
-        ? derivedLiveBaseMs
-        : Math.max(0, task.durationMs ?? 0);
+      ? derivedLiveBaseMs
+      : Math.max(0, task.durationMs ?? 0);
   const liveTaskStopwatchMs = useSmoothStopwatchDisplayMs(
     taskStopwatchBaseMs,
     smoothTaskTimer,
@@ -264,10 +340,17 @@ export function TaskSessionLiveCard({
           use24HourClock,
         )
       : null;
+  const effectiveEndIso =
+    typeof task.endTime === "string" && task.endTime.trim() !== ""
+      ? task.endTime
+      : typeof task.scheduledEndAt === "string" &&
+        task.scheduledEndAt.trim() !== ""
+      ? task.scheduledEndAt
+      : undefined;
   const endFmt =
-    typeof task.endTime === "string"
+    typeof effectiveEndIso === "string"
       ? formatIsoInstantShort(
-          task.endTime,
+          effectiveEndIso,
           lang,
           displayTimeZone,
           use24HourClock,
@@ -282,17 +365,92 @@ export function TaskSessionLiveCard({
     durationMinResolved !== null ? formatDuration(durationMinResolved) : null;
   const showDoneTimingRow =
     isDone && (startFmt !== null || endFmt !== null || durationLabel !== null);
+  const persistedTaskTimerLaps = Array.isArray(task.taskTimerLaps)
+    ? task.taskTimerLaps
+        .map((lap, index) => {
+          const startIso =
+            typeof lap?.startTime === "string" ? lap.startTime.trim() : "";
+          const endIso =
+            typeof lap?.endTime === "string" ? lap.endTime.trim() : "";
+          if (!startIso || !endIso) {
+            return null;
+          }
+          const durationMsRaw =
+            typeof lap?.durationMs === "number" &&
+            Number.isFinite(lap.durationMs)
+              ? Math.max(0, Math.floor(lap.durationMs))
+              : Math.max(0, Date.parse(endIso) - Date.parse(startIso));
+          if (durationMsRaw < 1000) {
+            return null;
+          }
+          const startLabel = formatIsoInstantShort(
+            startIso,
+            lang,
+            displayTimeZone,
+            use24HourClock,
+          );
+          const endLabel = formatIsoInstantShort(
+            endIso,
+            lang,
+            displayTimeZone,
+            use24HourClock,
+          );
+          return {
+            id: `${task.id}-lap-${index}-${startIso}`,
+            startLabel,
+            endLabel,
+            durationLabel: formatStopwatchMs(durationMsRaw),
+          };
+        })
+        .filter(
+          (
+            lap,
+          ): lap is {
+            id: string;
+            startLabel: string;
+            endLabel: string;
+            durationLabel: string;
+          } => lap !== null,
+        )
+        .map((lap, index) => ({ ...lap, index: index + 1 }))
+    : [];
+  const runningSegmentRaw = task.taskCurrentLapStartedAt;
+  const runningSegmentStartMs =
+    typeof runningSegmentRaw === "string"
+      ? Date.parse(runningSegmentRaw)
+      : typeof runningSegmentRaw === "number" &&
+        Number.isFinite(runningSegmentRaw)
+      ? runningSegmentRaw
+      : Number.NaN;
+  const runningTaskTimerLap =
+    taskIsRunning && Number.isFinite(runningSegmentStartMs)
+      ? {
+          id: `${task.id}-lap-running-${runningSegmentStartMs}`,
+          index: persistedTaskTimerLaps.length + 1,
+          startLabel: formatIsoInstantShort(
+            new Date(runningSegmentStartMs).toISOString(),
+            lang,
+            displayTimeZone,
+            use24HourClock,
+          ),
+          endLabel: lang === "fr" ? "en cours..." : "running...",
+          durationLabel: formatStopwatchMs(
+            Math.max(0, lapsNowMs - runningSegmentStartMs),
+          ),
+        }
+      : null;
+  const taskTimerLaps =
+    runningTaskTimerLap !== null
+      ? [...persistedTaskTimerLaps, runningTaskTimerLap]
+      : persistedTaskTimerLaps;
   const canEditTaskStartTime =
-    allowTaskStartTimeEdit &&
+    (isDone ? true : allowTaskStartTimeEdit) &&
     typeof task.startTime === "string" &&
     task.startTime.trim() !== "";
   const canEditTaskEndTime =
-    allowTaskEndTimeEdit &&
-    isDone &&
+    (isDone || allowTaskEndTimeEdit) &&
     typeof task.startTime === "string" &&
-    task.startTime.trim() !== "" &&
-    typeof task.endTime === "string" &&
-    task.endTime.trim() !== "";
+    task.startTime.trim() !== "";
   const doneTimingAria = [
     startFmt ? `${t.archiveTaskStartLabel} ${startFmt}` : "",
     endFmt ? `${t.archiveTaskEndLabel} ${endFmt}` : "",
@@ -300,11 +458,75 @@ export function TaskSessionLiveCard({
   ]
     .filter(Boolean)
     .join(", ");
+  const scheduledEndMs =
+    typeof task.scheduledEndAt === "string" && task.scheduledEndAt.trim() !== ""
+      ? Date.parse(task.scheduledEndAt)
+      : Number.NaN;
+  const taskRemainingMs = Number.isFinite(scheduledEndMs)
+    ? scheduledEndMs - blinkNowMs
+    : Number.NaN;
+  let taskEndAlertClassName = "";
+  if (!isDone && Number.isFinite(taskRemainingMs) && taskRemainingMs > 0) {
+    if (taskRemainingMs <= 5 * 60_000) {
+      taskEndAlertClassName = "kronosys-end-time-alert-fast";
+    } else if (taskRemainingMs <= 15 * 60_000) {
+      taskEndAlertClassName = "kronosys-end-time-alert-slow";
+    }
+  }
 
   useEffect(() => {
     setTitleEditing(false);
   }, [task.id]);
 
+  useEffect(() => {
+    const hasScheduledEnd =
+      typeof task.scheduledEndAt === "string" &&
+      task.scheduledEndAt.trim() !== "";
+    if (!hasScheduledEnd || isDone) {
+      return;
+    }
+    const interval = globalThis.setInterval(() => {
+      setBlinkNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(interval);
+  }, [task.scheduledEndAt, isDone, task.id]);
+
+  useEffect(() => {
+    if (!taskIsRunning || !Number.isFinite(runningSegmentStartMs)) {
+      return;
+    }
+    const id = globalThis.setInterval(() => {
+      setLapsNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(id);
+  }, [taskIsRunning, runningSegmentStartMs, task.id]);
+
+  useEffect(() => {
+    setNoteDraft(typeof task.note === "string" ? task.note : "");
+  }, [task.id, task.note]);
+
+  useEffect(() => {
+    if (!isDone) {
+      finishAnimationPlayedRef.current = false;
+      return;
+    }
+    if (finishAnimationPlayedRef.current) {
+      return;
+    }
+    const endMs =
+      typeof task.endTime === "string" ? Date.parse(task.endTime) : Number.NaN;
+    if (!Number.isFinite(endMs)) {
+      return;
+    }
+    if (Math.abs(Date.now() - endMs) > 2600) {
+      return;
+    }
+    finishAnimationPlayedRef.current = true;
+    setFinishCelebrate(true);
+    const timer = globalThis.setTimeout(() => setFinishCelebrate(false), 750);
+    return () => globalThis.clearTimeout(timer);
+  }, [task.id, isDone, task.endTime]);
+
   useEffect(() => {
     const st = typeof task.startTime === "string" ? task.startTime.trim() : "";
     const parsed = st ? new Date(st) : null;
@@ -316,14 +538,19 @@ export function TaskSessionLiveCard({
   }, [task.id, task.startTime]);
 
   useEffect(() => {
-    const et = typeof task.endTime === "string" ? task.endTime.trim() : "";
+    const et =
+      typeof task.endTime === "string" && task.endTime.trim() !== ""
+        ? task.endTime.trim()
+        : typeof task.scheduledEndAt === "string"
+        ? task.scheduledEndAt.trim()
+        : "";
     const parsed = et ? new Date(et) : null;
     if (!parsed || Number.isNaN(parsed.getTime())) {
       setTaskEndDraft("");
       return;
     }
     setTaskEndDraft(formatDatetimeLocalValue(parsed));
-  }, [task.id, task.endTime]);
+  }, [task.id, task.endTime, task.scheduledEndAt]);
 
   useEffect(() => {
     setOptimisticLiveBaseMs(null);
@@ -334,20 +561,54 @@ export function TaskSessionLiveCard({
   }, [task.id, task.durationMs, task.endTime]);
 
   useEffect(() => {
-    if (!smoothTaskTimer) {
+    let totalSeconds = Math.max(0, Math.floor((task.durationMs ?? 0) / 1000));
+    // Préremplissage lisible : au-delà d'une heure, on neutralise les secondes.
+    if (totalSeconds >= 3600) {
+      totalSeconds = Math.floor(totalSeconds / 60) * 60;
+    }
+    const h = Math.floor(totalSeconds / 3600);
+    const m = Math.floor((totalSeconds % 3600) / 60);
+    const s = totalSeconds % 60;
+    setManualHours(String(h));
+    setManualMinutes(String(m));
+    setManualSeconds(String(s));
+  }, [task.id, task.durationMs]);
+
+  useEffect(() => {
+    if (!smoothTaskTimer || !deriveLiveTimerFromStartTime || temporalPlanned) {
       setDerivedLiveBaseMs(null);
       return;
     }
-    const startMs =
-      typeof task.startTime === "string"
-        ? Date.parse(task.startTime)
+    const baseDurationMs = Math.max(0, task.durationMs ?? 0);
+    const hasSubtaskRunning =
+      typeof task.activeSubtaskTimerId === "string" &&
+      task.activeSubtaskTimerId.trim() !== "";
+    const segmentRaw = hasSubtaskRunning
+      ? task.subtaskTimerStartedAt
+      : task.mainTimerSegmentStartedAt;
+    const segmentStartMs =
+      typeof segmentRaw === "string"
+        ? Date.parse(segmentRaw)
+        : typeof segmentRaw === "number" && Number.isFinite(segmentRaw)
+        ? segmentRaw
         : Number.NaN;
-    if (!Number.isFinite(startMs)) {
+    if (!Number.isFinite(segmentStartMs)) {
       setDerivedLiveBaseMs(null);
       return;
     }
-    setDerivedLiveBaseMs(Math.max(0, Date.now() - startMs));
-  }, [smoothTaskTimer, task.startTime, task.id]);
+    setDerivedLiveBaseMs(
+      baseDurationMs + Math.max(0, Date.now() - segmentStartMs),
+    );
+  }, [
+    deriveLiveTimerFromStartTime,
+    smoothTaskTimer,
+    task.durationMs,
+    task.activeSubtaskTimerId,
+    task.subtaskTimerStartedAt,
+    task.mainTimerSegmentStartedAt,
+    task.id,
+    temporalPlanned,
+  ]);
 
   useEffect(() => {
     if (titleEditing && titleInputRef.current) {
@@ -375,8 +636,9 @@ export function TaskSessionLiveCard({
     const nextName = parsed.name.trim() || parsed.tags[0] || trimmed;
     const mergedTagsNext = mergeTagsForDisplay(trimmed, mergedTags);
     const projUp = resolveProjectForTaskUpdate(trimmed);
+    const persUp = resolvePersonalProjectForTaskUpdate(trimmed);
     const resolvedProject =
-      projUp !== undefined ? projUp : (task.project ?? null);
+      projUp !== undefined ? projUp : task.project ?? null;
     const tagsFiltered = filterTaskTagsForProject(
       mergedTagsNext,
       resolvedProject,
@@ -393,6 +655,9 @@ export function TaskSessionLiveCard({
     if (projUp !== undefined) {
       body.project = projUp;
     }
+    if (persUp !== undefined) {
+      body.personalProject = persUp;
+    }
     void post(body);
   }, [titleDraft, titleDraftSource, task.id, mergedTags, inspectingId, post]);
 
@@ -406,9 +671,8 @@ export function TaskSessionLiveCard({
     void post({
       type: "finishTask",
       taskId: task.id,
-      shouldCommit,
     });
-  }, [post, task.id, shouldCommit]);
+  }, [post, task.id]);
 
   const requestFinishTask = useCallback(() => {
     if (isDone) {
@@ -438,25 +702,26 @@ export function TaskSessionLiveCard({
     if (nextIso === task.startTime) {
       return;
     }
-    if (smoothTaskTimer) {
-      setOptimisticLiveBaseMs(Math.max(0, Date.now() - nextMs));
-    }
-    const body: Record<string, unknown> = {
-      type: "setTaskStartTime",
-      taskId: task.id,
-      startTime: nextIso,
-    };
-    if (inspectingId) {
-      body.sessionId = inspectingId;
+    const endMsRaw =
+      typeof task.endTime === "string" ? Date.parse(task.endTime) : Number.NaN;
+    if (Number.isFinite(endMsRaw) && nextMs > endMsRaw) {
+      return;
     }
-    void post(body);
+    setPendingTimingEdit({
+      kind: "start",
+      nextIso,
+      startMs: nextMs,
+      endMs: Number.isFinite(endMsRaw) ? endMsRaw : null,
+    });
+    setTimingAdjustMode("keep");
+    setTimingAdjustOpen(true);
   }, [
     canEditTaskStartTime,
     taskStartDraft,
     task.startTime,
     task.id,
     inspectingId,
-    post,
+    task.endTime,
     smoothTaskTimer,
   ]);
 
@@ -476,27 +741,76 @@ export function TaskSessionLiveCard({
       return;
     }
     const nextIso = new Date(endMs).toISOString();
-    if (nextIso === task.endTime) {
+    if (nextIso === (task.endTime ?? task.scheduledEndAt)) {
+      return;
+    }
+    setPendingTimingEdit({
+      kind: "end",
+      nextIso,
+      startMs,
+      endMs,
+    });
+    setTimingAdjustMode("keep");
+    setTimingAdjustOpen(true);
+  }, [
+    canEditTaskEndTime,
+    taskEndDraft,
+    task.startTime,
+    task.endTime,
+    task.id,
+    inspectingId,
+  ]);
+
+  const confirmTimingAdjust = useCallback(() => {
+    const edit = pendingTimingEdit;
+    if (!edit) {
+      setTimingAdjustOpen(false);
       return;
     }
-    setOptimisticDoneDurationMin((endMs - startMs) / 60000);
     const body: Record<string, unknown> = {
-      type: "setTaskEndTime",
+      type: edit.kind === "start" ? "setTaskStartTime" : "setTaskEndTime",
       taskId: task.id,
-      endTime: nextIso,
+      durationAdjustMode: timingAdjustMode,
+      ...(edit.kind === "start"
+        ? { startTime: edit.nextIso }
+        : { endTime: edit.nextIso }),
     };
+    if (timingAdjustMode === "manual") {
+      const h = Math.max(0, Math.floor(Number(manualHours) || 0));
+      const m = Math.max(0, Math.floor(Number(manualMinutes) || 0));
+      const s = Math.max(0, Math.floor(Number(manualSeconds) || 0));
+      body.manualDurationMs = (h * 3600 + m * 60 + s) * 1000;
+    }
     if (inspectingId) {
       body.sessionId = inspectingId;
     }
+    if (
+      edit.kind === "start" &&
+      smoothTaskTimer &&
+      timingAdjustMode === "from_bounds"
+    ) {
+      setOptimisticLiveBaseMs(Math.max(0, Date.now() - edit.startMs));
+    }
+    if (
+      edit.kind === "end" &&
+      timingAdjustMode === "from_bounds" &&
+      edit.endMs !== null
+    ) {
+      setOptimisticDoneDurationMin((edit.endMs - edit.startMs) / 60000);
+    }
+    setTimingAdjustOpen(false);
+    setPendingTimingEdit(null);
     void post(body);
   }, [
-    canEditTaskEndTime,
-    taskEndDraft,
-    task.startTime,
-    task.endTime,
-    task.id,
     inspectingId,
+    manualHours,
+    manualMinutes,
+    manualSeconds,
+    pendingTimingEdit,
     post,
+    smoothTaskTimer,
+    task.id,
+    timingAdjustMode,
   ]);
 
   const shellBase =
@@ -518,18 +832,54 @@ export function TaskSessionLiveCard({
     variant === "plain"
       ? "hover:bg-zinc-200/60 dark:hover:bg-zinc-800/40"
       : "hover:bg-zinc-200/70 dark:hover:bg-zinc-800/40";
+  const titleMainClass = temporalPlanned
+    ? variant === "plain"
+      ? "text-sky-900 dark:text-sky-100"
+      : "text-sky-950 dark:text-sky-50"
+    : isDone
+    ? titleDoneClass
+    : titleActiveClass;
+  const templateBtnClass = isAlreadyTemplate
+    ? "inline-flex h-10 w-10 items-center justify-center rounded-lg border border-emerald-400/70 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700/70 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-900/55"
+    : "inline-flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800";
+  const templateBtnLabel = isAlreadyTemplate
+    ? t.taskAlreadyTemplateBtn
+    : t.taskSaveTemplateBtn;
 
   return (
     <>
-      <div id={anchorId} className={shellClass}>
+      <div
+        id={anchorId}
+        className={[
+          shellClass,
+          temporalPlanned
+            ? "border-sky-400/85 bg-sky-50/80 dark:border-sky-500/55 dark:bg-sky-950/35"
+            : "",
+          taskIsRunning && !temporalPlanned
+            ? "kronosys-task-running-pulse"
+            : "",
+          taskIsPaused ? "kronosys-task-paused-blink" : "",
+          finishCelebrate ? "kronosys-task-finish-celebrate" : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
         {trimmedProject ? (
           <div className="mb-1.5 flex min-w-0 justify-start sm:mb-2">
             <span
-              className={`${PROJECT_CHIP_APPLIED_CLASS} inline-flex items-center gap-1 max-w-full truncate pr-1`}
-              title={formatProjectDisplay(trimmedProject)}
+              className={`${
+                isPersonalProject
+                  ? PROJECT_CHIP_APPLIED_PERSONAL_CLASS
+                  : PROJECT_CHIP_APPLIED_CLASS
+              } inline-flex items-center gap-1 max-w-full truncate pr-1`}
+              title={formatProjectDisplay(trimmedProject, {
+                personal: isPersonalProject,
+              })}
             >
               <span className="truncate">
-                {formatProjectDisplay(trimmedProject)}
+                {formatProjectDisplay(trimmedProject, {
+                  personal: isPersonalProject,
+                })}
               </span>
               <button
                 type="button"
@@ -541,6 +891,7 @@ export function TaskSessionLiveCard({
                     name: task.name,
                     tags: task.tags ?? [],
                     project: null,
+                    personalProject: false,
                   };
                   if (inspectingId) {
                     body.sessionId = inspectingId;
@@ -600,9 +951,7 @@ export function TaskSessionLiveCard({
                 aria-label={t.activeTaskTitleEditHint}
               >
                 <div
-                  className={`flex h-full min-h-0 min-w-0 flex-1 flex-nowrap items-center overflow-x-auto overflow-y-hidden ${TASK_ACTIVE_TITLE_READ_CLASS} ${
-                    isDone ? titleDoneClass : titleActiveClass
-                  }`}
+                  className={`flex h-full min-h-0 min-w-0 flex-1 flex-nowrap items-center overflow-x-auto overflow-y-hidden ${TASK_ACTIVE_TITLE_READ_CLASS} ${titleMainClass}`}
                 >
                   <span className="whitespace-nowrap">
                     {titleDisplay || "—"}
@@ -611,26 +960,54 @@ export function TaskSessionLiveCard({
               </div>
             )}
           </div>
-          {!isDone && !isInspecting ? (
+          {!isDone &&
+          !temporalPlanned &&
+          (!isInspecting || showLiveTimerWhenInspecting) ? (
             <span
               className="shrink-0 self-center font-mono text-sm font-semibold tabular-nums tracking-tight text-emerald-700 dark:text-emerald-400"
-              aria-live={smoothTaskTimer ? "polite" : "off"}
+              aria-live={smoothTaskTimer ? "polite" : undefined}
               title={formatStopwatchMs(liveTaskStopwatchMs)}
             >
               {formatStopwatchMs(liveTaskStopwatchMs)}
             </span>
           ) : null}
-          {isInspecting ? (
-            <button
-              type="button"
-              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 text-zinc-600 hover:border-red-600/60 hover:bg-red-50 hover:text-red-800 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-red-800/70 dark:hover:bg-red-950/45 dark:hover:text-red-300"
-              title={t.taskDeleteBtn}
-              aria-label={t.taskDeleteBtn}
-              onClick={() => confirmDeleteTask(task.id)}
-            >
-              <Trash2 size={20} />
-            </button>
-          ) : (
+          {showTaskActionButtons && isInspecting ? (
+            <div className="flex h-10 shrink-0 items-center gap-1">
+              <button
+                type="button"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
+                title={t.taskDuplicateTooltip}
+                aria-label={t.taskDuplicateBtn}
+                onClick={() => onDuplicateTask(task)}
+              >
+                <Copy size={18} />
+              </button>
+              {onSaveAsTemplate ? (
+                <button
+                  type="button"
+                  className={templateBtnClass}
+                  title={templateBtnLabel}
+                  aria-label={templateBtnLabel}
+                  onClick={() => onSaveAsTemplate(task)}
+                >
+                  {isAlreadyTemplate ? (
+                    <Bookmark size={18} />
+                  ) : (
+                    <Save size={18} />
+                  )}
+                </button>
+              ) : null}
+              <button
+                type="button"
+                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 text-zinc-600 hover:border-red-600/60 hover:bg-red-50 hover:text-red-800 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-red-800/70 dark:hover:bg-red-950/45 dark:hover:text-red-300"
+                title={t.taskDeleteBtn}
+                aria-label={t.taskDeleteBtn}
+                onClick={() => confirmDeleteTask(task.id)}
+              >
+                <Trash2 size={20} />
+              </button>
+            </div>
+          ) : showTaskActionButtons ? (
             <div className="flex h-10 shrink-0 items-center gap-1">
               {!isDone && showKronoFocusTaskActions ? (
                 <button
@@ -647,30 +1024,6 @@ export function TaskSessionLiveCard({
                   <Timer size={20} />
                 </button>
               ) : null}
-              <button
-                type="button"
-                role="switch"
-                disabled={isDone}
-                aria-checked={shouldCommit ? "true" : "false"}
-                aria-label={
-                  shouldCommit
-                    ? t.commitOnFinishToggleAriaOn
-                    : t.commitOnFinishToggleAriaOff
-                }
-                title={t.commitOnFinishHint}
-                onClick={() => {
-                  if (!isDone) {
-                    setShouldCommit((v) => !v);
-                  }
-                }}
-                className={
-                  shouldCommit
-                    ? tbEmeraldIcon
-                    : "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-zinc-300 bg-zinc-100/80 text-zinc-600 transition-colors hover:bg-zinc-200/80 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:bg-zinc-900/40 dark:text-zinc-500 dark:hover:bg-zinc-800/50 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900"
-                }
-              >
-                <GitCommit size={18} strokeWidth={2} aria-hidden />
-              </button>
               {pausePlayMode === null ? (
                 <div className="h-10 w-10 shrink-0" aria-hidden />
               ) : (
@@ -706,6 +1059,30 @@ export function TaskSessionLiveCard({
               >
                 <CheckCircle2 size={20} />
               </button>
+              <button
+                type="button"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
+                title={t.taskDuplicateTooltip}
+                aria-label={t.taskDuplicateBtn}
+                onClick={() => onDuplicateTask(task)}
+              >
+                <Copy size={18} />
+              </button>
+              {onSaveAsTemplate ? (
+                <button
+                  type="button"
+                  className={templateBtnClass}
+                  title={templateBtnLabel}
+                  aria-label={templateBtnLabel}
+                  onClick={() => onSaveAsTemplate(task)}
+                >
+                  {isAlreadyTemplate ? (
+                    <Bookmark size={18} />
+                  ) : (
+                    <Save size={18} />
+                  )}
+                </button>
+              ) : null}
               <button
                 type="button"
                 className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-300 text-zinc-600 hover:border-red-600/60 hover:bg-red-50 hover:text-red-800 dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-red-800/70 dark:hover:bg-red-950/45 dark:hover:text-red-300"
@@ -716,11 +1093,11 @@ export function TaskSessionLiveCard({
                 <Trash2 size={20} />
               </button>
             </div>
-          )}
+          ) : null}
         </div>
 
         {showDoneTimingRow || canEditTaskStartTime || canEditTaskEndTime ? (
-          <div aria-label={doneTimingAria || undefined}>
+          <div className="mt-1.5" aria-label={doneTimingAria || undefined}>
             <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2">
               <TaskTimingFieldRow
                 label={t.archiveTaskStartLabel}
@@ -739,11 +1116,13 @@ export function TaskSessionLiveCard({
                 draftValue={taskEndDraft}
                 onDraftChange={setTaskEndDraft}
                 onDraftBlur={applyTaskEndTimeEdit}
+                defaultTimeMode="next-half-hour"
+                alertClassName={taskEndAlertClassName}
                 lang={lang}
                 t={t}
               />
               {durationLabel ? (
-                <div className="mt-2 flex min-w-0 flex-wrap items-center gap-2 text-[0.7rem] leading-snug text-zinc-600 dark:text-zinc-400 sm:mt-0">
+                <div className="inline-flex min-w-0 items-center gap-2 whitespace-nowrap text-[0.7rem] leading-[1.35] text-zinc-600 dark:text-zinc-400">
                   <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
                     {t.taskTimingDurationLabel}
                   </span>
@@ -753,40 +1132,99 @@ export function TaskSessionLiveCard({
                 </div>
               ) : null}
             </div>
-             <div className="mt-3">
-          <div className="-mx-0.5 flex w-full min-w-0 flex-wrap items-start gap-x-2 gap-y-1.5 px-0.5 pb-0.5">
-            {mergedTags.length > 0 ? (
-              <TagPills
-                variant="applied"
-                differentiateProjectScopedTags
-                className="flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1 gap-y-0.5"
-                tags={mergedTags}
-                defaultTagBucketLabel={t.taskTagDefaultBucket}
-                onRemove={(tagToRemove) => {
-                  const nextTags = mergedTags.filter(
-                    (t) => normalizeTagKey(t) !== normalizeTagKey(tagToRemove),
-                  );
-                  const filteredTags = filterTaskTagsForProject(
-                    nextTags,
-                    task.project ?? null,
-                  );
-                  const body: Record<string, unknown> = {
-                    type: "updateTask",
-                    taskId: task.id,
-                    name: task.name,
-                    tags: filteredTags,
-                  };
-                  if (task.project !== undefined) {
-                    body.project = task.project;
-                  }
-                  if (inspectingId) {
-                    body.sessionId = inspectingId;
-                  }
-                  void post(body);
-                }}
-              />
-            ) : null}
+            <div className="mt-3">
+              <div className="-mx-0.5 flex w-full min-w-0 flex-wrap items-start gap-x-2 gap-y-1.5 px-0.5 pb-0.5">
+                {mergedTags.length > 0 ? (
+                  <TagPills
+                    variant="applied"
+                    differentiateProjectScopedTags
+                    className="flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1 gap-y-0.5"
+                    tags={mergedTags}
+                    defaultTagBucketLabel={t.taskTagDefaultBucket}
+                    taskProject={task.project ?? null}
+                    taskPersonalProject={task.personalProject === true}
+                    onRemove={(tagToRemove) => {
+                      const nextTags = mergedTags.filter(
+                        (t) =>
+                          normalizeTagKey(t) !== normalizeTagKey(tagToRemove),
+                      );
+                      const filteredTags = filterTaskTagsForProject(
+                        nextTags,
+                        task.project ?? null,
+                      );
+                      const body: Record<string, unknown> = {
+                        type: "updateTask",
+                        taskId: task.id,
+                        name: task.name,
+                        tags: filteredTags,
+                      };
+                      if (task.project !== undefined) {
+                        body.project = task.project;
+                      }
+                      if (task.personalProject === true) {
+                        body.personalProject = true;
+                      }
+                      if (inspectingId) {
+                        body.sessionId = inspectingId;
+                      }
+                      void post(body);
+                    }}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </div>
+        ) : null}
+        {taskTimerLaps.length > 0 ? (
+          <div className="mt-3 rounded-lg border border-zinc-200/80 bg-zinc-50/80 p-2.5 dark:border-zinc-700/70 dark:bg-zinc-900/35">
+            <div className="mb-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+              {lang === "fr" ? "Laps de suivi" : "Tracking laps"}
+            </div>
+            <div className="space-y-1">
+              {taskTimerLaps.map((lap) => (
+                <div
+                  key={lap.id}
+                  className="flex min-w-0 items-center justify-between gap-2 text-[0.72rem] leading-tight text-zinc-700 dark:text-zinc-300"
+                >
+                  <span className="shrink-0 tabular-nums text-zinc-500 dark:text-zinc-400">
+                    #{lap.index}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate tabular-nums">
+                    {lap.startLabel} - {lap.endLabel}
+                  </span>
+                  <span className="shrink-0 tabular-nums font-medium text-zinc-900 dark:text-zinc-100">
+                    {lap.durationLabel}
+                  </span>
+                </div>
+              ))}
+            </div>
           </div>
+        ) : null}
+        <div className="mt-3">
+          <textarea
+            className="w-full rounded-lg border border-zinc-300 bg-white/90 px-3 py-2 text-sm text-zinc-800 outline-none transition focus:border-violet-500 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100"
+            placeholder={t.taskNotePlaceholder}
+            value={noteDraft}
+            onChange={(e) => setNoteDraft(e.target.value)}
+            onBlur={() => {
+              if (
+                noteDraft === (typeof task.note === "string" ? task.note : "")
+              ) {
+                return;
+              }
+              const body: Record<string, unknown> = {
+                type: "updateTask",
+                taskId: task.id,
+                note: noteDraft,
+              };
+              if (inspectingId) {
+                body.sessionId = inspectingId;
+              }
+              void post(body);
+            }}
+            rows={3}
+            aria-label={t.taskNoteLabel}
+          />
         </div>
         <TaskSubtasksBlock
           taskId={task.id}
@@ -794,15 +1232,12 @@ export function TaskSessionLiveCard({
           subtasks={task.subtasks}
           enableSubtaskTimer={!isInspecting && !isDone}
           activeSubtaskTimerId={task.activeSubtaskTimerId}
-          allowAddSubtasks={!isDone}
+          allowAddSubtasks={allowAddSubtasks && !isDone}
           subtasksReadOnly={isDone}
           t={t}
           post={post}
         />
       </div>
-    ) : null}
-    </div>
-
 
       <DashboardConfirmModal
         open={finishOpenSubtasksWarnOpen}
@@ -827,6 +1262,86 @@ export function TaskSessionLiveCard({
           runFinishTask();
         }}
       />
+      <DashboardConfirmModal
+        open={timingAdjustOpen}
+        title={t.taskTimingAdjustModalTitle}
+        message={t.taskTimingAdjustModalMessage}
+        cancelLabel={t.dialogCancelBtn}
+        confirmLabel={t.dialogConfirmBtn}
+        onCancel={() => {
+          setTimingAdjustOpen(false);
+          setPendingTimingEdit(null);
+        }}
+        onConfirm={confirmTimingAdjust}
+        extra={
+          <div className="space-y-3 text-sm">
+            <label className="flex items-start gap-2">
+              <input
+                type="radio"
+                name={`kronosys-task-timing-adjust-mode-${timingAdjustRadioGroupId}`}
+                checked={timingAdjustMode === "keep"}
+                onChange={() => setTimingAdjustMode("keep")}
+              />
+              <span>{t.taskTimingAdjustKeepDuration}</span>
+            </label>
+            <label className="flex items-start gap-2">
+              <input
+                type="radio"
+                name={`kronosys-task-timing-adjust-mode-${timingAdjustRadioGroupId}`}
+                checked={timingAdjustMode === "manual"}
+                onChange={() => setTimingAdjustMode("manual")}
+              />
+              <span>{t.taskTimingAdjustManualDuration}</span>
+            </label>
+            {timingAdjustMode === "manual" ? (
+              <div className="grid grid-cols-3 gap-2">
+                <label className="text-xs">
+                  {t.taskTimingAdjustHours}
+                  <input
+                    type="number"
+                    min={0}
+                    value={manualHours}
+                    onChange={(e) => setManualHours(e.target.value)}
+                    className="mt-1 w-full rounded border border-zinc-300 px-2 py-1 dark:border-zinc-600 dark:bg-zinc-900"
+                  />
+                </label>
+                <label className="text-xs">
+                  {t.taskTimingAdjustMinutes}
+                  <input
+                    type="number"
+                    min={0}
+                    max={59}
+                    value={manualMinutes}
+                    onChange={(e) => setManualMinutes(e.target.value)}
+                    className="mt-1 w-full rounded border border-zinc-300 px-2 py-1 dark:border-zinc-600 dark:bg-zinc-900"
+                  />
+                </label>
+                <label className="text-xs">
+                  {t.taskTimingAdjustSeconds}
+                  <input
+                    type="number"
+                    min={0}
+                    max={59}
+                    value={manualSeconds}
+                    onChange={(e) => setManualSeconds(e.target.value)}
+                    className="mt-1 w-full rounded border border-zinc-300 px-2 py-1 dark:border-zinc-600 dark:bg-zinc-900"
+                  />
+                </label>
+              </div>
+            ) : null}
+            <label className="flex items-start gap-2">
+              <input
+                type="radio"
+                name={`kronosys-task-timing-adjust-mode-${timingAdjustRadioGroupId}`}
+                checked={timingAdjustMode === "from_bounds"}
+                onChange={() => setTimingAdjustMode("from_bounds")}
+                disabled={pendingTimingEdit?.endMs === null}
+              />
+              <span>{t.taskTimingAdjustFromBounds}</span>
+            </label>
+          </div>
+        }
+      />
     </>
   );
 }