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

package/components/dashboard/TaskFocusPanel.tsx

@@ -1,8 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Timer, Play, Pause, Ticket, Zap, History } from "lucide-react";
-import { TRACE_ISSUE_SEARCH_CLIENT_TIMEOUT_MS } from "@/lib/gitlabIssueSearch";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type MutableRefObject,
+} from "react";
+import { Timer, Play, Pause, Zap, History } from "lucide-react";
 import { postKronosysAction } from "@/lib/kronosysApi";
 import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
 import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
@@ -10,18 +16,23 @@ import {
   buildStartTaskFromDraft,
   formatProjectDisplay,
   mergeTagsForDisplay,
+  normalizeProjectKey,
+  normalizeTagKey,
   parseTaskWithAutoTags,
-  removeProjectFromDraft,
-  removeSavedTagFromDraft,
+  taskTitleForDisplay,
 } from "@/lib/taskParsing";
+import { isTaskDisplayPlanned } from "@/lib/temporalDisplayPlanned";
 import { TagPills } from "./TagPills";
 import {
   PROJECT_CHIP_APPLIED_CLASS,
+  PROJECT_CHIP_APPLIED_PERSONAL_CLASS,
   TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS,
 } from "./taskFieldStyles";
-import { KronosysDatetimePopoverField } from "./KronosysDatetimePopoverField";
+import {
+  KronosysDatetimePopoverField,
+  formatDatetimeLocalValue,
+} from "./KronosysDatetimePopoverField";
 import { TaskSessionLiveCard } from "./TaskSessionLiveCard";
-import { IssuePickerModal, type RemoteIssue } from "./IssuePickerModal";
 import {
   DashboardAlertModal,
   DashboardConfirmModal,
@@ -38,23 +49,60 @@ import {
   writeConcurrentTaskStartPreference,
   type ConcurrentTaskStartPreference,
 } from "@/lib/concurrentTaskStartPreference";
+import {
+  isPlannedBoundaryConflictModalOpen,
+  setConcurrentTaskStartConflictModalOpen,
+} from "@/lib/kronosysDashboardModalGates";
 import { mergeLiveSessionIntoHistory } from "@/lib/sessionListMerge";
-import { formatSessionEndReasonLine } from "@/lib/sessionEndReason";
+import {
+  buildTaskTemplateSignature,
+  formatTaskTemplateDatalistLabel,
+  formatTaskTemplateDraftLine,
+  parseTaskTemplatesFromPayload,
+} from "@/lib/taskTemplateDraft";
 import type { SessionListEntry } from "@/components/dashboard/SessionListPanel";
-import { SessionEndReasonEditor } from "@/components/dashboard/SessionEndReasonEditor";
 import { useDashboardToast } from "@/components/dashboard/DashboardToastProvider";
-
 type TaskEntryMode = "realtime" | "past";
+const TASK_DELETE_ANIM_MS = 170;
+const SAVE_TEMPLATE_MARKER_RE = /(^|\s)##(?=\s|$)/g;
+
+function parseDraftTemplateMarker(raw: string): {
+  normalizedDraft: string;
+  saveAsTemplate: boolean;
+} {
+  const hasMarker = SAVE_TEMPLATE_MARKER_RE.test(raw);
+  SAVE_TEMPLATE_MARKER_RE.lastIndex = 0;
+  if (!hasMarker) {
+    return { normalizedDraft: raw.trim(), saveAsTemplate: false };
+  }
+  const cleaned = raw
+    .replace(SAVE_TEMPLATE_MARKER_RE, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  if (cleaned.length > 0) {
+    return { normalizedDraft: cleaned, saveAsTemplate: true };
+  }
+  // Cas explicite demandé: "##" seul déclenche aussi la sauvegarde template.
+  return { normalizedDraft: raw.trim(), saveAsTemplate: true };
+}
 
 type TaskRow = {
   id: string;
   name: string;
+  note?: string;
   durationMs: number;
   isDone: boolean;
   startTime?: string;
   endTime?: string;
+  scheduledEndAt?: string;
+  taskTimerLaps?: Array<{
+    startTime?: string;
+    endTime?: string;
+    durationMs?: number;
+  }>;
   tags?: string[];
   project?: string | null;
+  personalProject?: boolean;
   subtasks?: Array<{
     id: string;
     title: string;
@@ -63,6 +111,9 @@ type TaskRow = {
   }>;
   manualTaskTimerPaused?: boolean;
   activeSubtaskTimerId?: string;
+  subtaskTimerStartedAt?: string | number;
+  mainTimerSegmentStartedAt?: string | null;
+  taskCurrentLapStartedAt?: string | number | null;
 };
 
 type SessionShape = {
@@ -78,6 +129,33 @@ type SessionShape = {
   tasks?: TaskRow[];
 };
 
+/** Aligné sur l’arrondi d’affichage des ajustements de durée (TaskSessionLiveCard). */
+function pastEntrySecondsToManualFieldParts(totalSeconds: number): {
+  h: string;
+  m: string;
+  s: string;
+} {
+  let ts = Math.max(0, Math.floor(totalSeconds));
+  if (ts >= 3600) {
+    ts = Math.floor(ts / 60) * 60;
+  }
+  const h = Math.floor(ts / 3600);
+  const m = Math.floor((ts % 3600) / 60);
+  const s = ts % 60;
+  return { h: String(h), m: String(m), s: String(s) };
+}
+
+function parsePastManualDurationMs(
+  hours: string,
+  minutes: string,
+  seconds: string,
+): number {
+  const h = Math.max(0, Math.floor(Number(hours) || 0));
+  const m = Math.max(0, Math.floor(Number(minutes) || 0));
+  const s = Math.max(0, Math.floor(Number(seconds) || 0));
+  return (h * 3600 + m * 60 + s) * 1000;
+}
+
 function runningTasksFromSession(
   session: SessionShape | null | undefined,
 ): TaskRow[] {
@@ -88,8 +166,8 @@ function runningTasksFromSession(
     Array.isArray(session.activeTasks) && session.activeTasks.length > 0
       ? session.activeTasks
       : session.activeTask
-        ? [session.activeTask]
-        : [];
+      ? [session.activeTask]
+      : [];
   return raw.filter((t) => t && !t.isDone && !t.manualTaskTimerPaused);
 }
 
@@ -110,6 +188,7 @@ export function TaskFocusPanel({
   showKronoFocusInTaskOps = true,
   allowTaskStartTimeEdit = true,
   allowTaskEndTimeEdit = true,
+  taskLauncherApplyDraftRef,
 }: {
   payload: KronosysUpdatePayload;
   lang: Lang;
@@ -128,6 +207,8 @@ export function TaskFocusPanel({
   allowTaskStartTimeEdit?: boolean;
   /** Option `dashboardAllowTaskEndTimeEdit` : correction de l'heure de fin des tâches terminées. */
   allowTaskEndTimeEdit?: boolean;
+  /** Remplissage du champ nouvelle tâche depuis la recherche rapide (modèles). */
+  taskLauncherApplyDraftRef?: MutableRefObject<((text: string) => void) | null>;
 }) {
   const live = payload.current as SessionShape | undefined;
   const history = useMemo(
@@ -155,48 +236,51 @@ export function TaskFocusPanel({
 
   const knownTags = (payload.knownTags || []) as string[];
   const knownProjects = (payload.knownProjects || []) as string[];
+  const knownPersonalProjects = (
+    ((payload as Record<string, unknown>).knownPersonalProjects || []) as string[]
+  ).filter((x) => typeof x === "string" && x.trim().length > 0);
   const viewingSession = archiveColumnId
-    ? (history.find((s) => s.sessionId === archiveColumnId) ??
+    ? history.find((s) => s.sessionId === archiveColumnId) ??
       historyArchivedList.find((s) => s.sessionId === archiveColumnId) ??
-      null)
+      null
     : null;
   const sessionCurrent = viewingSession ?? live;
   const isInspecting = !!viewingSession;
   const inspectingId = archiveColumnId;
   const isPauseState = !!live?.isPaused;
-  const inspectSessionEndReasonLine = viewingSession
-    ? formatSessionEndReasonLine(
-        t,
-        viewingSession.sessionEndReasonKind,
-        viewingSession.sessionEndReasonNote,
-      )
-    : null;
+  /** Pause globale : bandeau mural distinct (icône navigation). */
+  const globalPauseContextActive = Boolean(
+    live &&
+      typeof live === "object" &&
+      "globalPauseContext" in live &&
+      (live as { globalPauseContext?: unknown }).globalPauseContext,
+  );
   /** Session passée **terminée** : on n’affiche que les entrées marquées terminées (pas de blocs en cours / en pause). */
   const inspectingEndedSession =
     isInspecting &&
     typeof viewingSession?.endAt === "string" &&
     viewingSession.endAt.trim() !== "";
-  const inspectingLiveRunning =
-    isInspecting &&
-    typeof archiveColumnId === "string" &&
-    typeof liveId === "string" &&
-    archiveColumnId === liveId &&
-    hasLiveSession &&
-    !inspectingEndedSession;
-  const sessionEndReasonEditSid =
-    typeof viewingSession?.sessionId === "string"
-      ? viewingSession.sessionId.trim()
-      : "";
-  const canEditInspectSessionEndReason =
-    isInspecting && !inspectingLiveRunning && sessionEndReasonEditSid !== "";
+
+  const [bucketNowMs, setBucketNowMs] = useState(() => Date.now());
 
   const taskSessionForBuckets = viewingSession ?? live;
-  /** Tâches live au minuteur (hors archive). */
-  const runningTasks = !isInspecting ? runningTasksFromSession(live) : [];
+  /** Tâches live sur la pile (minuteur non en pause manuelle), avant filtre « planifié ». */
+  const runningTasksRaw = !isInspecting ? runningTasksFromSession(live) : [];
+  const runningTasks = useMemo(
+    () => runningTasksRaw.filter((t) => !isTaskDisplayPlanned(t, bucketNowMs)),
+    [runningTasksRaw, bucketNowMs],
+  );
   const runningTaskIds = useMemo(
     () => new Set(runningTasks.map((t) => String(t.id))),
     [runningTasks],
   );
+
+  useEffect(() => {
+    const id = globalThis.setInterval(() => {
+      setBucketNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(id);
+  }, []);
   /**
    * `tasks` + pile `activeTasks` / `activeTask` (dédoublonné par id, la pile l’emporte).
    * Sinon une tâche uniquement sur la pile — après pause concurrente — n’apparaît ni « en cours » ni « en pause ».
@@ -217,8 +301,8 @@ export function TaskFocusPanel({
       Array.isArray(sess.activeTasks) && sess.activeTasks.length > 0
         ? [...(sess.activeTasks as TaskRow[])]
         : sess.activeTask
-          ? [sess.activeTask as TaskRow]
-          : [];
+        ? [sess.activeTask as TaskRow]
+        : [];
     for (const t of stack) {
       if (t?.id) {
         map.set(String(t.id), t);
@@ -234,69 +318,190 @@ export function TaskFocusPanel({
   const trackingActive =
     !isInspecting && runningTasks.length > 0 && !isPauseState;
 
-  const { pausedTasks, completedTasks } = useMemo(() => {
+  const { plannedTasks, pausedTasks, completedTasks } = useMemo(() => {
+    const planned: TaskRow[] = [];
     const paused: TaskRow[] = [];
     const completed: TaskRow[] = [];
     for (const t of mergedTasksForBuckets) {
-      if (t.isDone) {
+      if (isTaskDisplayPlanned(t, bucketNowMs)) {
+        planned.push(t);
+      } else if (t.isDone) {
         completed.push(t);
       } else if (!inspectingEndedSession && !runningTaskIds.has(String(t.id))) {
         paused.push(t);
       }
     }
-    return { pausedTasks: paused, completedTasks: completed };
-  }, [mergedTasksForBuckets, inspectingEndedSession, runningTaskIds]);
+    return {
+      plannedTasks: planned,
+      pausedTasks: paused,
+      completedTasks: completed,
+    };
+  }, [
+    mergedTasksForBuckets,
+    inspectingEndedSession,
+    runningTaskIds,
+    bucketNowMs,
+  ]);
   const pausedTasksDisplay = [...pausedTasks].reverse();
+  const plannedTasksDisplay = [...plannedTasks].reverse();
   const completedTasksDisplay = [...completedTasks].reverse();
+  const showPlannedTaskSection = plannedTasksDisplay.length > 0;
   const showPausedTaskSection =
     !inspectingEndedSession && pausedTasksDisplay.length > 0;
   const showCompletedTaskSection = completedTasksDisplay.length > 0;
   const showTaskListBuckets =
     (isInspecting || hasLiveSession) &&
-    (showPausedTaskSection || showCompletedTaskSection);
-  /** Pastille « total » seulement quand les deux colonnes sont visibles (évite le doublon avec un seul bloc). */
-  const showSessionTaskCountBadge =
-    !inspectingEndedSession &&
-    showPausedTaskSection &&
-    showCompletedTaskSection;
+    (showPlannedTaskSection ||
+      showPausedTaskSection ||
+      showCompletedTaskSection);
+  const bucketSectionsCount =
+    Number(showPlannedTaskSection) +
+    Number(showPausedTaskSection) +
+    Number(showCompletedTaskSection);
+  /** Pastille « total » lorsqu’au moins deux blocs de tâches sont visibles (évite le doublon avec un seul bloc). */
+  const showSessionTaskCountBadge = bucketSectionsCount >= 2;
+  const canAddHistoricalTaskToInspectingSession =
+    isInspecting && !!inspectingId;
+  const showTaskEntryControls =
+    !inspectingEndedSession || canAddHistoricalTaskToInspectingSession;
 
   const kronoFocusStatus = (live as LiveSessionShape | undefined)?.kronoFocus
     ?.status;
   const kronoFocusIsRunningOrPaused =
     kronoFocusStatus === "running" || kronoFocusStatus === "paused";
 
-  const glCfg = payload.cfg as Record<string, unknown> | undefined;
-  /** Jeton configuré : afficher l’import ; l’API refuse la recherche sans jeton valide (et message si connexion non testée). */
-  const showRemoteIssueImport =
-    glCfg?.gitlabTokenStored === true || glCfg?.gitlabTokenFromEnv === true;
-
   const [taskInput, setTaskInput] = useState("");
+  const [taskNoteInput, setTaskNoteInput] = useState("");
+  const [debouncedTemplateQuery, setDebouncedTemplateQuery] = useState("");
   const [taskEntryMode, setTaskEntryMode] = useState<TaskEntryMode>("realtime");
   const [pastStartLocal, setPastStartLocal] = useState("");
   const [pastEndLocal, setPastEndLocal] = useState("");
+  const [pastManualHours, setPastManualHours] = useState("0");
+  const [pastManualMinutes, setPastManualMinutes] = useState("0");
+  const [pastManualSeconds, setPastManualSeconds] = useState("0");
+  const pendingPastDurationMsRef = useRef<number | null>(null);
   const [startKronoFocusWithTask, setStartKronoFocusWithTask] = useState(false);
-  const [issuePickerOpen, setIssuePickerOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState<string | null>(null);
   const [kronoFocusResetConfirmOpen, setKronoFocusResetConfirmOpen] =
     useState(false);
   const [deleteTaskConfirmId, setDeleteTaskConfirmId] = useState<string | null>(
     null,
   );
+  const [deletingTaskIds, setDeletingTaskIds] = useState<Set<string>>(
+    () => new Set(),
+  );
   const [concurrentStartModalOpen, setConcurrentStartModalOpen] =
     useState(false);
   const [rememberConcurrentStart, setRememberConcurrentStart] = useState(false);
+  const [taskListVisibleSessionId, setTaskListVisibleSessionId] = useState<
+    string | null
+  >(null);
+  const [taskListEnterSessionId, setTaskListEnterSessionId] = useState<
+    string | null
+  >(null);
   const rememberConcurrentRef = useRef(false);
   const pendingLiveStartRef = useRef<{
     name: string;
     tags: string[];
     project?: string;
+    personalProject?: boolean;
+    note: string;
     startKronoFocus: boolean;
+    saveAsTemplate: boolean;
   } | null>(null);
 
   useEffect(() => {
     rememberConcurrentRef.current = rememberConcurrentStart;
   }, [rememberConcurrentStart]);
 
+  useEffect(() => {
+    setConcurrentTaskStartConflictModalOpen(concurrentStartModalOpen);
+    return () => setConcurrentTaskStartConflictModalOpen(false);
+  }, [concurrentStartModalOpen]);
+
+  useEffect(() => {
+    const targetSessionId =
+      typeof sessionCurrent?.sessionId === "string" &&
+      sessionCurrent.sessionId.trim() !== ""
+        ? sessionCurrent.sessionId.trim()
+        : null;
+    if (!targetSessionId) {
+      setTaskListVisibleSessionId(null);
+      setTaskListEnterSessionId(null);
+      return;
+    }
+    setTaskListVisibleSessionId(targetSessionId);
+    setTaskListEnterSessionId(null);
+    let raf1 = 0;
+    let raf2 = 0;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() =>
+        setTaskListEnterSessionId(targetSessionId),
+      );
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [sessionCurrent?.sessionId]);
+
+  useEffect(() => {
+    if (!taskLauncherApplyDraftRef) {
+      return;
+    }
+    taskLauncherApplyDraftRef.current = (text: string) => {
+      setTaskInput(text);
+      globalThis.requestAnimationFrame(() => {
+        document.getElementById("kronosys-task-launcher-input")?.focus();
+      });
+    };
+    return () => {
+      taskLauncherApplyDraftRef.current = null;
+    };
+  }, [taskLauncherApplyDraftRef]);
+
+  useEffect(() => {
+    const t = globalThis.setTimeout(() => {
+      setDebouncedTemplateQuery(taskInput.trim().toLowerCase());
+    }, 220);
+    return () => globalThis.clearTimeout(t);
+  }, [taskInput]);
+
+  useEffect(() => {
+    const startMs = pastStartLocal.trim()
+      ? new Date(pastStartLocal).getTime()
+      : NaN;
+    const endMs = pastEndLocal.trim() ? new Date(pastEndLocal).getTime() : NaN;
+    const pending = pendingPastDurationMsRef.current;
+    if (
+      pending !== null &&
+      Number.isFinite(startMs) &&
+      Number.isFinite(endMs) &&
+      endMs > startMs
+    ) {
+      pendingPastDurationMsRef.current = null;
+      const spanMs = endMs - startMs;
+      const capped = Math.min(Math.max(0, pending), spanMs);
+      const parts = pastEntrySecondsToManualFieldParts(capped / 1000);
+      setPastManualHours(parts.h);
+      setPastManualMinutes(parts.m);
+      setPastManualSeconds(parts.s);
+      return;
+    }
+    if (
+      !Number.isFinite(startMs) ||
+      !Number.isFinite(endMs) ||
+      endMs <= startMs
+    ) {
+      return;
+    }
+    const spanSec = Math.floor((endMs - startMs) / 1000);
+    const parts = pastEntrySecondsToManualFieldParts(spanSec);
+    setPastManualHours(parts.h);
+    setPastManualMinutes(parts.m);
+    setPastManualSeconds(parts.s);
+  }, [pastStartLocal, pastEndLocal]);
+
   useEffect(() => {
     if (!showKronoFocusInTaskOps) {
       setStartKronoFocusWithTask(false);
@@ -332,6 +537,113 @@ export function TaskFocusPanel({
   const titleParsed = parseTaskWithAutoTags(taskInput);
   const mergedDraftTags = mergeTagsForDisplay(taskInput, []);
   const mergedDraftProject = titleParsed.project;
+  const mergedDraftPersonalProject = titleParsed.personalProject;
+  const taskTemplates = useMemo(
+    () =>
+      parseTaskTemplatesFromPayload(
+        (payload as Record<string, unknown>).taskTemplates,
+      ),
+    [payload],
+  );
+  const filteredTaskTemplates = useMemo(() => {
+    const q = debouncedTemplateQuery;
+    const rows =
+      q.length === 0
+        ? taskTemplates
+        : taskTemplates.filter((tpl) => {
+            const bag = [tpl.name, ...tpl.tags, tpl.project ?? ""]
+              .join(" ")
+              .toLowerCase();
+            return bag.includes(q);
+          });
+    return rows.slice(0, 20);
+  }, [debouncedTemplateQuery, taskTemplates]);
+  const taskTemplateSignatureSet = useMemo(() => {
+    const signatures = new Set<string>();
+    for (const tpl of taskTemplates) {
+      signatures.add(
+        buildTaskTemplateSignature({
+          name: tpl.name,
+          tags: tpl.tags,
+          project: tpl.project,
+          personalProject: tpl.personalProject === true,
+        }),
+      );
+    }
+    return signatures;
+  }, [taskTemplates]);
+  const isTaskAlreadyTemplate = useCallback(
+    (task: TaskRow) =>
+      taskTemplateSignatureSet.has(
+        buildTaskTemplateSignature({
+          name: task.name,
+          tags: mergeTagsForDisplay(task.name, task.tags ?? []),
+          project:
+            typeof task.project === "string" && task.project.trim()
+              ? task.project
+              : null,
+          personalProject: task.personalProject === true,
+        }),
+      ),
+    [taskTemplateSignatureSet],
+  );
+  const saveTaskAsTemplate = useCallback(
+    async (task: TaskRow) => {
+      const title = taskTitleForDisplay(task.name).trim();
+      const tagParts = (task.tags ?? []).map(
+        (tag) => `#${normalizeTagKey(tag)}`,
+      );
+      const project =
+        typeof task.project === "string" && task.project.trim()
+          ? formatProjectDisplay(task.project, {
+              personal: task.personalProject === true,
+            })
+          : "";
+      const draftString = [title, ...tagParts, project]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+      const draft = buildStartTaskFromDraft(draftString, [], undefined);
+      if (!draft.name.trim() && draft.tags.length === 0 && !draft.project) {
+        return;
+      }
+      await post({
+        type: "saveTaskTemplate",
+        name: draft.name,
+        tags: draft.tags,
+        ...(draft.project ? { project: draft.project } : {}),
+        ...(draft.project
+          ? { personalProject: draft.personalProject === true }
+          : {}),
+      });
+      pushToast(t.taskTemplateSavedToast);
+    },
+    [post, pushToast, t.taskTemplateSavedToast],
+  );
+
+  const saveDraftAsTemplate = useCallback(
+    async (draft: {
+      name: string;
+      tags: string[];
+      project?: string;
+      personalProject?: boolean;
+    }) => {
+      if (!draft.name.trim() && draft.tags.length === 0 && !draft.project) {
+        return;
+      }
+      await post({
+        type: "saveTaskTemplate",
+        name: draft.name,
+        tags: draft.tags,
+        ...(draft.project ? { project: draft.project } : {}),
+        ...(draft.project
+          ? { personalProject: draft.personalProject === true }
+          : {}),
+      });
+      pushToast(t.taskTemplateSavedToast);
+    },
+    [post, pushToast, t.taskTemplateSavedToast],
+  );
 
   const handleRemoveDraftTag = useCallback((tag: string) => {
     setTaskInput((prev) => {
@@ -342,20 +654,90 @@ export function TaskFocusPanel({
 
   const handleRemoveDraftProject = useCallback(() => {
     setTaskInput((prev) => {
-      const regex = /(^|\s)@[\w.-]+(?=\s|$)/gi;
-      return prev.replace(regex, " ").replace(/\s+/g, " ").trim();
+      let s = prev.replace(/(^|\s)@[^\s@#]+(?:#[^\s#]+)?(?=\s|$)/gi, " ");
+      s = s.replace(/(^|\s)![^\s!#]+(?:#[^\s#]+)?(?=\s|$)/gi, " ");
+      return s.replace(/\s+/g, " ").trim();
     });
   }, []);
 
-  const confirmDeleteTask = useCallback((taskId: string) => {
-    setDeleteTaskConfirmId(taskId);
-  }, []);
+  const confirmDeleteTask = useCallback(
+    (taskId: string) => {
+      if (deletingTaskIds.has(taskId)) {
+        return;
+      }
+      setDeleteTaskConfirmId(taskId);
+    },
+    [deletingTaskIds],
+  );
+
+  useEffect(() => {
+    const visibleTaskIds = new Set(
+      mergedTasksForBuckets.map((task) => String(task.id)),
+    );
+    setDeletingTaskIds((prev) => {
+      if (prev.size === 0) {
+        return prev;
+      }
+      const next = new Set<string>();
+      for (const id of prev) {
+        if (visibleTaskIds.has(id)) {
+          next.add(id);
+        }
+      }
+      return next.size === prev.size ? prev : next;
+    });
+  }, [mergedTasksForBuckets]);
 
   const clearTaskEntryForm = useCallback(() => {
     setTaskInput("");
+    setTaskNoteInput("");
     setStartKronoFocusWithTask(false);
   }, []);
 
+  const duplicateTaskToDraft = useCallback(
+    (task: TaskRow) => {
+      const targetSessionId = inspectingId ?? live?.sessionId;
+      const title = taskTitleForDisplay(task.name).trim();
+      const tags = (task.tags ?? []).map((tag) => `#${normalizeTagKey(tag)}`);
+      const project =
+        typeof task.project === "string" && task.project.trim()
+          ? formatProjectDisplay(task.project, {
+              personal: task.personalProject === true,
+            })
+          : "";
+      const nextInput = [title, ...tags, project]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+      setTaskInput(nextInput);
+      setTaskNoteInput(typeof task.note === "string" ? task.note : "");
+      if (
+        typeof task.startTime === "string" &&
+        task.startTime.trim() &&
+        typeof task.endTime === "string" &&
+        task.endTime.trim() &&
+        targetSessionId
+      ) {
+        const start = new Date(task.startTime);
+        const end = new Date(task.endTime);
+        if (!Number.isNaN(start.getTime()) && !Number.isNaN(end.getTime())) {
+          const spanMs = Math.max(0, end.getTime() - start.getTime());
+          const durRaw =
+            typeof task.durationMs === "number" &&
+            Number.isFinite(task.durationMs)
+              ? task.durationMs
+              : spanMs;
+          pendingPastDurationMsRef.current =
+            spanMs > 0 ? Math.min(Math.max(0, durRaw), spanMs) : spanMs;
+          setTaskEntryMode("past");
+          setPastStartLocal(formatDatetimeLocalValue(start));
+          setPastEndLocal(formatDatetimeLocalValue(end));
+        }
+      }
+    },
+    [inspectingId, live?.sessionId],
+  );
+
   const resolveConcurrentAndStartLive = useCallback(
     async (mode: ConcurrentTaskStartPreference, persistPreference: boolean) => {
       const draft = pendingLiveStartRef.current;
@@ -380,7 +762,6 @@ export function TaskFocusPanel({
               await postKronosysAction({
                 type: "finishTask",
                 taskId: t.id,
-                shouldCommit: false,
               });
             }
           }
@@ -390,15 +771,20 @@ export function TaskFocusPanel({
           name: draft.name,
           startKronoFocus: draft.startKronoFocus,
           tags: draft.tags,
+          note: draft.note,
           ...(draft.project ? { project: draft.project } : {}),
+          ...(draft.personalProject ? { personalProject: true } : {}),
         });
+        if (draft.saveAsTemplate) {
+          await saveDraftAsTemplate(draft);
+        }
       } catch (error) {
         pushToast(
           typeof error === "string"
             ? error
             : error instanceof Error
-              ? error.message
-              : "Failed to resolve concurrent tasks",
+            ? error.message
+            : "Failed to resolve concurrent tasks",
         );
         pendingLiveStartRef.current = null;
         setConcurrentStartModalOpen(false);
@@ -410,15 +796,20 @@ export function TaskFocusPanel({
       setRememberConcurrentStart(false);
       clearTaskEntryForm();
     },
-    [live, post, clearTaskEntryForm, pushToast],
+    [live, post, clearTaskEntryForm, pushToast, saveDraftAsTemplate],
   );
 
   const submitStartTask = useCallback(async () => {
-    const hasDraft = taskInput.trim().length > 0;
+    const draftControl = parseDraftTemplateMarker(taskInput);
+    const hasDraft = draftControl.normalizedDraft.length > 0;
     if (!hasDraft) {
       return;
     }
-    const payloadStart = buildStartTaskFromDraft(taskInput, [], undefined);
+    const payloadStart = buildStartTaskFromDraft(
+      draftControl.normalizedDraft,
+      [],
+      undefined,
+    );
     if (
       !payloadStart.name.trim() &&
       payloadStart.tags.length === 0 &&
@@ -430,7 +821,10 @@ export function TaskFocusPanel({
       name: payloadStart.name,
       tags: payloadStart.tags,
       ...(payloadStart.project ? { project: payloadStart.project } : {}),
+      ...(payloadStart.personalProject ? { personalProject: true } : {}),
       startKronoFocus: showKronoFocusInTaskOps && startKronoFocusWithTask,
+      saveAsTemplate: draftControl.saveAsTemplate,
+      note: taskNoteInput,
     };
     if (!isInspecting && !hasLiveSession) {
       pushToast(t.taskStartAutoSessionToast);
@@ -440,14 +834,23 @@ export function TaskFocusPanel({
         name: body.name,
         startKronoFocus: body.startKronoFocus,
         tags: body.tags,
+        note: body.note,
         ...(body.project ? { project: body.project } : {}),
+        ...(body.personalProject ? { personalProject: true } : {}),
       });
+      if (body.saveAsTemplate) {
+        await saveDraftAsTemplate(body);
+      }
       clearTaskEntryForm();
       return;
     }
     if (!isInspecting && hasLiveSession && live) {
       const running = runningTasksFromSession(live);
       if (running.length > 0) {
+        if (isPlannedBoundaryConflictModalOpen()) {
+          pushToast(t.taskStartBlockedByPlannedBoundaryConflict);
+          return;
+        }
         const pref = readConcurrentTaskStartPreference();
         pendingLiveStartRef.current = body;
         if (pref === "pause") {
@@ -472,8 +875,13 @@ export function TaskFocusPanel({
       name: body.name,
       startKronoFocus: body.startKronoFocus,
       tags: body.tags,
+      note: body.note,
       ...(body.project ? { project: body.project } : {}),
+      ...(body.personalProject ? { personalProject: true } : {}),
     });
+    if (body.saveAsTemplate) {
+      await saveDraftAsTemplate(body);
+    }
     clearTaskEntryForm();
   }, [
     clearTaskEntryForm,
@@ -483,9 +891,11 @@ export function TaskFocusPanel({
     post,
     pushToast,
     resolveConcurrentAndStartLive,
+    saveDraftAsTemplate,
     showKronoFocusInTaskOps,
     startKronoFocusWithTask,
     t.taskStartAutoSessionToast,
+    t.taskStartBlockedByPlannedBoundaryConflict,
     taskInput,
   ]);
 
@@ -518,7 +928,16 @@ export function TaskFocusPanel({
       setAlertMessage(t.archiveTaskDatetimeRangeInvalid);
       return;
     }
-    const durationMs = Math.round(endMs - startMs);
+    const spanMs = Math.round(endMs - startMs);
+    const durationMs = parsePastManualDurationMs(
+      pastManualHours,
+      pastManualMinutes,
+      pastManualSeconds,
+    );
+    if (durationMs <= 0 || durationMs > spanMs) {
+      setAlertMessage(t.archiveTaskManualDurationInvalid);
+      return;
+    }
     const payloadStart = buildStartTaskFromDraft(nameRaw, [], undefined);
     if (
       !payloadStart.name.trim() &&
@@ -532,22 +951,32 @@ export function TaskFocusPanel({
       sessionId: retroTargetSessionId,
       name: payloadStart.name,
       tags: payloadStart.tags,
+      note: taskNoteInput,
       durationMs,
       startTime: new Date(startMs).toISOString(),
       endTime: new Date(endMs).toISOString(),
       ...(payloadStart.project ? { project: payloadStart.project } : {}),
+      ...(payloadStart.personalProject ? { personalProject: true } : {}),
     });
     setTaskInput("");
+    setTaskNoteInput("");
     setPastStartLocal("");
     setPastEndLocal("");
+    setPastManualHours("0");
+    setPastManualMinutes("0");
+    setPastManualSeconds("0");
   }, [
     pastEndLocal,
+    pastManualHours,
+    pastManualMinutes,
+    pastManualSeconds,
     pastStartLocal,
     post,
     retroTargetSessionId,
     t.archiveTaskDatetimeRangeInvalid,
-    t.archiveTaskDatetimeRangeInvalid,
+    t.archiveTaskManualDurationInvalid,
     taskInput,
+    taskNoteInput,
   ]);
 
   const pastRangeValid =
@@ -557,7 +986,22 @@ export function TaskFocusPanel({
     Number.isFinite(new Date(pastEndLocal).getTime()) &&
     new Date(pastEndLocal).getTime() > new Date(pastStartLocal).getTime();
 
-  const canSubmitPast = !!taskInput.trim() && pastRangeValid;
+  const pastManualDurationMs = parsePastManualDurationMs(
+    pastManualHours,
+    pastManualMinutes,
+    pastManualSeconds,
+  );
+  const spanMsPast = pastRangeValid
+    ? Math.round(
+        new Date(pastEndLocal).getTime() - new Date(pastStartLocal).getTime(),
+      )
+    : 0;
+  const pastManualDurationValid =
+    pastRangeValid &&
+    pastManualDurationMs > 0 &&
+    pastManualDurationMs <= spanMsPast;
+
+  const canSubmitPast = !!taskInput.trim() && pastManualDurationValid;
 
   /** Début + fin sur une seule ligne (scroll horizontal si besoin), contenu centré dans la zone. */
   const pastDateTimeRow = (
@@ -583,17 +1027,63 @@ export function TaskFocusPanel({
           onChange={setPastEndLocal}
           aria-label={t.archiveTaskEndLabel}
           lang={lang}
+          defaultTimeMode="next-half-hour"
           t={t}
         />
       </label>
     </div>
   );
 
+  const pastTimerDurationRow = (
+    <div className="mx-auto w-max max-w-full space-y-1">
+      <div className="text-center text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+        {t.archiveTaskTimerDurationLabel}
+      </div>
+      <div className="flex flex-wrap items-end justify-center gap-x-2 gap-y-1">
+        <label className="flex w-[3.25rem] shrink-0 flex-col text-xs">
+          {t.taskTimingAdjustHours}
+          <input
+            type="number"
+            min={0}
+            value={pastManualHours}
+            onChange={(e) => setPastManualHours(e.target.value)}
+            className="mt-1 w-full min-w-0 rounded border border-zinc-300 px-1.5 py-1 text-center tabular-nums dark:border-zinc-600 dark:bg-zinc-900"
+          />
+        </label>
+        <label className="flex w-[3.25rem] shrink-0 flex-col text-xs">
+          {t.taskTimingAdjustMinutes}
+          <input
+            type="number"
+            min={0}
+            max={59}
+            value={pastManualMinutes}
+            onChange={(e) => setPastManualMinutes(e.target.value)}
+            className="mt-1 w-full min-w-0 rounded border border-zinc-300 px-1.5 py-1 text-center tabular-nums dark:border-zinc-600 dark:bg-zinc-900"
+          />
+        </label>
+        <label className="flex w-[3.25rem] shrink-0 flex-col text-xs">
+          {t.taskTimingAdjustSeconds}
+          <input
+            type="number"
+            min={0}
+            max={59}
+            value={pastManualSeconds}
+            onChange={(e) => setPastManualSeconds(e.target.value)}
+            className="mt-1 w-full min-w-0 rounded border border-zinc-300 px-1.5 py-1 text-center tabular-nums dark:border-zinc-600 dark:bg-zinc-900"
+          />
+        </label>
+      </div>
+    </div>
+  );
+
   const pastDatetimeRowInspecting = (
-    <div className="flex w-full min-w-0 justify-center">
+    <div className="flex w-full min-w-0 flex-col items-center gap-3">
       <div className="kronosys-past-datetime-blink-twice min-w-0 max-w-full">
         {pastDateTimeRow}
       </div>
+      <div className="kronosys-past-datetime-blink-twice w-full max-w-full">
+        {pastTimerDurationRow}
+      </div>
     </div>
   );
 
@@ -620,58 +1110,16 @@ export function TaskFocusPanel({
     await post({ type: "setPaused", paused: false });
   };
 
+  const resumeLiveSessionWall = async () => {
+    await post({ type: "setPaused", paused: false });
+  };
+
   const historyBannerTitle = isPauseState
     ? t.pausedNote
     : t.viewingHistoryBannerTitle;
   const viewingSessionLabel =
     sessionCurrent?.sessionName?.trim() || sessionCurrent?.sessionId || "—";
 
-  const fetchGitlabIssues = useCallback(
-    async (query: string) => {
-      const glCfg = payload.cfg as Record<string, unknown> | undefined;
-      const base =
-        typeof glCfg?.gitlabApiBaseUrl === "string"
-          ? glCfg.gitlabApiBaseUrl.trim()
-          : "";
-      try {
-        const res = await postKronosysAction(
-          {
-            type: "fetchRemoteIssues",
-            lang,
-            search: query,
-            gitlabApiBaseUrl: base,
-          },
-          { signal: AbortSignal.timeout(TRACE_ISSUE_SEARCH_CLIENT_TIMEOUT_MS) },
-        );
-        const err = res.result?.remoteIssuesError;
-        if (err) {
-          return {
-            issues: [] as RemoteIssue[],
-            error: typeof err === "string" ? err : String(err),
-          };
-        }
-        const list = res.result?.remoteIssues;
-        return { issues: Array.isArray(list) ? (list as RemoteIssue[]) : [] };
-      } catch (e) {
-        const aborted =
-          e instanceof Error &&
-          (e.name === "AbortError" || e.name === "TimeoutError");
-        if (aborted) {
-          return {
-            issues: [] as RemoteIssue[],
-            error: t.issuePickerDashboardRequestTimeout,
-          };
-        }
-        throw e;
-      }
-    },
-    [lang, payload.cfg, t],
-  );
-
-  const onOpenGitlabIssuePicker = useCallback(() => {
-    setIssuePickerOpen(true);
-  }, []);
-
   const showTaskModeToggle = !!retroTargetSessionId;
   const effectiveTaskEntryMode: TaskEntryMode = showTaskModeToggle
     ? taskEntryMode
@@ -709,310 +1157,302 @@ export function TaskFocusPanel({
         </section>
       )}
 
-      {isInspecting &&
-      (inspectSessionEndReasonLine || canEditInspectSessionEndReason) ? (
-        <div className="mb-4 rounded-lg border border-zinc-200 bg-zinc-50/90 px-4 py-2.5 text-left text-sm text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
-          <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-            {t.selectedSessionEndReasonTitle}
-          </div>
-          {inspectSessionEndReasonLine ? (
-            <p className="mt-1 whitespace-pre-wrap leading-snug">
-              {inspectSessionEndReasonLine}
-            </p>
-          ) : null}
-          {canEditInspectSessionEndReason ? (
-            <div
-              className={
-                inspectSessionEndReasonLine
-                  ? "mt-3 border-t border-zinc-200 pt-3 dark:border-zinc-600/80"
-                  : "mt-2"
-              }
-            >
-              <SessionEndReasonEditor
-                t={t}
-                radioGroupName="kronosys-session-end-reason-edit-tasks"
-                sessionId={sessionEndReasonEditSid}
-                initialKind={viewingSession?.sessionEndReasonKind}
-                initialNote={viewingSession?.sessionEndReasonNote}
-                post={post}
-              />
+      {!isInspecting &&
+      hasLiveSession &&
+      isPauseState &&
+      !globalPauseContextActive ? (
+        <section
+          className="relative z-[41] mb-4 flex flex-col gap-3 rounded-lg border border-amber-800/55 bg-[#120d0a] px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+          aria-label={t.liveSessionWallPausedBannerAria}
+        >
+          <div className="flex min-w-0 items-start gap-2">
+            <Pause
+              className="mt-0.5 shrink-0 text-amber-400"
+              size={18}
+              aria-hidden
+            />
+            <div className="min-w-0">
+              <strong className="block text-sm text-amber-200">
+                {t.liveSessionWallPausedTitle}
+              </strong>
+              <p className="mt-1 text-xs font-normal leading-snug text-amber-300/85">
+                {t.liveSessionWallPausedDetail}
+              </p>
             </div>
-          ) : null}
-        </div>
+          </div>
+          <button
+            type="button"
+            className="shrink-0 rounded-lg border border-amber-800/60 bg-amber-950/50 px-3 py-1.5 text-sm font-medium text-amber-200 hover:bg-amber-950/70"
+            onClick={() => void resumeLiveSessionWall()}
+          >
+            {t.liveSessionResumeWallBtn}
+          </button>
+        </section>
       ) : null}
 
       <div className="space-y-6">
-        <>
-          {!inspectingEndedSession ? (
-            <>
-              <div className="mb-5 grid min-h-8 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2">
-                <span className="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide text-zinc-500">
-                  {t.taskTrackerTitle}
-                </span>
-                <div className="flex min-w-0 justify-center justify-self-stretch px-0.5 sm:px-1">
-                  {!isInspecting &&
-                  showTaskModeToggle &&
-                  effectiveTaskEntryMode === "past" ? (
+        {showTaskEntryControls ? (
+          <>
+            <div className="mb-5 grid min-h-8 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-2">
+              <span className="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide text-zinc-500">
+                {t.taskTrackerTitle}
+              </span>
+              <div className="flex min-w-0 justify-center justify-self-stretch px-0.5 sm:px-1">
+                {!isInspecting &&
+                showTaskModeToggle &&
+                effectiveTaskEntryMode === "past" ? (
+                  <div className="flex min-w-0 max-w-full flex-col items-center gap-2">
                     <div className="kronosys-past-datetime-blink-twice min-w-0 max-w-full">
                       {pastDateTimeRow}
                     </div>
-                  ) : null}
+                    <div className="kronosys-past-datetime-blink-twice w-full max-w-full">
+                      {pastTimerDurationRow}
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 sm:gap-3">
+                {!isInspecting && trackingActive ? (
+                  <div
+                    className="flex items-center gap-2 text-sm font-bold text-emerald-400"
+                    aria-live="polite"
+                  >
+                    <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-current" />
+                    <span className="whitespace-nowrap">
+                      {lang === "fr" ? "SUIVI" : "TRACKING"}
+                      {runningTasks.length > 1 ? (
+                        <span className="ml-1.5 font-mono text-xs font-semibold tabular-nums opacity-90">
+                          ({runningTasks.length})
+                        </span>
+                      ) : null}
+                    </span>
+                  </div>
+                ) : null}
+                {!isInspecting &&
+                showTaskModeToggle &&
+                effectiveTaskEntryMode === "past" ? (
+                  <InlineMetricHelpTrigger
+                    ariaLabel={t.archiveAddTaskIntroHelpAria}
+                    body={t.archiveAddTaskIntro}
+                    panelClassName="w-[min(calc(100vw-2rem),22rem)]"
+                  />
+                ) : null}
+              </div>
+            </div>
+
+            {isInspecting && inspectingId ? (
+              <div className="min-w-0 space-y-4">
+                <div className="flex justify-end">
+                  <InlineMetricHelpTrigger
+                    ariaLabel={t.archiveAddTaskIntroHelpAria}
+                    body={t.archiveAddTaskIntro}
+                    panelClassName="w-[min(calc(100vw-2rem),22rem)]"
+                  />
                 </div>
-                <div className="flex shrink-0 flex-wrap items-center justify-end gap-2 sm:gap-3">
-                  {!isInspecting && trackingActive ? (
-                    <div
-                      className="flex items-center gap-2 text-sm font-bold text-emerald-400"
-                      aria-live="polite"
+                {pastDatetimeRowInspecting}
+                {mergedDraftProject?.trim() ? (
+                  <div className="flex min-w-0 justify-start">
+                    <span
+                      className={`${
+                        mergedDraftPersonalProject === true
+                          ? PROJECT_CHIP_APPLIED_PERSONAL_CLASS
+                          : PROJECT_CHIP_APPLIED_CLASS
+                      } max-w-full truncate`}
+                      title={formatProjectDisplay(mergedDraftProject, {
+                        personal: mergedDraftPersonalProject === true,
+                      })}
                     >
-                      <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-current" />
-                      <span className="whitespace-nowrap">
-                        {lang === "fr" ? "SUIVI" : "TRACKING"}
-                        {runningTasks.length > 1 ? (
-                          <span className="ml-1.5 font-mono text-xs font-semibold tabular-nums opacity-90">
-                            ({runningTasks.length})
-                          </span>
-                        ) : null}
+                      {formatProjectDisplay(mergedDraftProject, {
+                        personal: mergedDraftPersonalProject === true,
+                      })}
+                    </span>
+                  </div>
+                ) : null}
+                <div className="flex min-h-10 min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
+                  <input
+                    id="kronosys-task-launcher-input"
+                    className={`${TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS} min-w-0 text-center sm:min-w-[12rem]`}
+                    placeholder={t.taskPlaceholderPast}
+                    value={taskInput}
+                    list="kronosys-task-templates"
+                    onChange={(e) => setTaskInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && canSubmitPast) {
+                        e.preventDefault();
+                        void submitAddHistoricalTask();
+                      }
+                    }}
+                    aria-label={t.taskPlaceholderPast}
+                  />
+                  <div className="flex h-10 shrink-0 items-center gap-1">
+                    <button
+                      type="button"
+                      className={tbVioletIcon}
+                      disabled={!canSubmitPast}
+                      title={t.archiveAddTaskBtn}
+                      aria-label={t.archiveAddTaskBtn}
+                      onClick={() => void submitAddHistoricalTask()}
+                    >
+                      <Play
+                        size={22}
+                        className="ml-0.5"
+                        fill="currentColor"
+                        aria-hidden
+                      />
+                    </button>
+                  </div>
+                </div>
+                <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={taskNoteInput}
+                  onChange={(e) => setTaskNoteInput(e.target.value)}
+                  rows={3}
+                  aria-label={t.taskNoteLabel}
+                />
+                {taskFormTagSection}
+              </div>
+            ) : (
+              <div className="min-w-0 space-y-4">
+                {mergedDraftProject?.trim() ? (
+                  <div className="flex min-w-0 justify-start">
+                    <span
+                      className={`${
+                        mergedDraftPersonalProject === true
+                          ? PROJECT_CHIP_APPLIED_PERSONAL_CLASS
+                          : PROJECT_CHIP_APPLIED_CLASS
+                      } inline-flex items-center gap-1 max-w-full truncate pr-1`}
+                      title={formatProjectDisplay(mergedDraftProject, {
+                        personal: mergedDraftPersonalProject === true,
+                      })}
+                    >
+                      <span className="truncate">
+                        {formatProjectDisplay(mergedDraftProject, {
+                          personal: mergedDraftPersonalProject === true,
+                        })}
                       </span>
-                    </div>
-                  ) : null}
-                  {!isInspecting &&
-                  showTaskModeToggle &&
-                  effectiveTaskEntryMode === "past" ? (
-                    <InlineMetricHelpTrigger
-                      ariaLabel={t.archiveAddTaskIntroHelpAria}
-                      body={t.archiveAddTaskIntro}
-                      panelClassName="w-[min(calc(100vw-2rem),22rem)]"
-                    />
-                  ) : null}
-                  {!isInspecting && showRemoteIssueImport ? (
-                    <div className="flex flex-wrap items-center gap-2">
                       <button
                         type="button"
-                        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-300 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-800 disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-                        title={t.importGitIssue}
-                        aria-label={t.importGitIssue}
-                        onClick={() => onOpenGitlabIssuePicker()}
+                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10"
+                        onClick={handleRemoveDraftProject}
                       >
-                        <Ticket size={15} />
+                        <span className="text-[0.65rem] font-bold leading-none">
+                          ×
+                        </span>
                       </button>
-                    </div>
-                  ) : null}
-                </div>
-              </div>
-
-              {isInspecting && inspectingId ? (
-                <div className="min-w-0 space-y-4">
-                  <div className="flex justify-end">
-                    <InlineMetricHelpTrigger
-                      ariaLabel={t.archiveAddTaskIntroHelpAria}
-                      body={t.archiveAddTaskIntro}
-                      panelClassName="w-[min(calc(100vw-2rem),22rem)]"
-                    />
+                    </span>
                   </div>
-                  {pastDatetimeRowInspecting}
-                  {mergedDraftProject?.trim() ? (
-                    <div className="flex min-w-0 justify-start">
-                      <span
-                        className={`${PROJECT_CHIP_APPLIED_CLASS} max-w-full truncate`}
-                        title={formatProjectDisplay(mergedDraftProject)}
-                      >
-                        {formatProjectDisplay(mergedDraftProject)}
-                      </span>
-                    </div>
-                  ) : null}
-                  <div className="flex min-h-10 min-w-0 flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-                    <input
-                      className={`${TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS} min-w-0 text-center sm:min-w-[12rem]`}
-                      placeholder={t.taskPlaceholderPast}
-                      value={taskInput}
-                      onChange={(e) => setTaskInput(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" && canSubmitPast) {
-                          e.preventDefault();
-                          void submitAddHistoricalTask();
-                        }
-                      }}
-                      aria-label={t.taskPlaceholderPast}
-                    />
-                    <div className="flex h-10 shrink-0 items-center gap-1">
-                      {showRemoteIssueImport ? (
-                        <button
-                          type="button"
-                          className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-300 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-800 disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-                          title={t.importGitIssue}
-                          aria-label={t.importGitIssue}
-                          onClick={() => onOpenGitlabIssuePicker()}
-                        >
-                          <Ticket size={15} />
-                        </button>
-                      ) : null}
+                ) : null}
+                <div className="flex min-h-10 min-w-0 items-center gap-2">
+                  {showTaskModeToggle ? (
+                    <div
+                      role="group"
+                      aria-label={t.taskEntryModeGroupAria}
+                      className="flex h-10 shrink-0 items-center gap-1"
+                    >
                       <button
                         type="button"
-                        className={tbVioletIcon}
-                        disabled={!canSubmitPast}
-                        title={t.archiveAddTaskBtn}
-                        aria-label={t.archiveAddTaskBtn}
-                        onClick={() => void submitAddHistoricalTask()}
+                        className={
+                          effectiveTaskEntryMode === "realtime"
+                            ? tbVioletToggleOn
+                            : tbVioletToggleOff
+                        }
+                        aria-pressed={effectiveTaskEntryMode === "realtime"}
+                        title={t.taskEntryModeRealtime}
+                        aria-label={t.taskEntryModeRealtime}
+                        onClick={() => setTaskEntryMode("realtime")}
                       >
-                        <Play
-                          size={22}
-                          className="ml-0.5"
-                          fill="currentColor"
-                          aria-hidden
-                        />
+                        <Zap size={18} strokeWidth={2.25} aria-hidden />
                       </button>
-                    </div>
-                  </div>
-                  {taskFormTagSection}
-                </div>
-              ) : (
-                <div className="min-w-0 space-y-4">
-                  {mergedDraftProject?.trim() ? (
-                    <div className="flex min-w-0 justify-start">
-                      <span
-                        className={`${PROJECT_CHIP_APPLIED_CLASS} inline-flex items-center gap-1 max-w-full truncate pr-1`}
-                        title={formatProjectDisplay(mergedDraftProject)}
+                      <button
+                        type="button"
+                        className={
+                          effectiveTaskEntryMode === "past"
+                            ? tbVioletToggleOn
+                            : tbVioletToggleOff
+                        }
+                        aria-pressed={effectiveTaskEntryMode === "past"}
+                        title={t.taskEntryModePast}
+                        aria-label={t.taskEntryModePast}
+                        onClick={() => setTaskEntryMode("past")}
                       >
-                        <span className="truncate">
-                          {formatProjectDisplay(mergedDraftProject)}
-                        </span>
-                        <button
-                          type="button"
-                          className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10"
-                          onClick={handleRemoveDraftProject}
-                        >
-                          <span className="text-[0.65rem] font-bold leading-none">
-                            ×
-                          </span>
-                        </button>
-                      </span>
+                        <History size={18} strokeWidth={2} aria-hidden />
+                      </button>
                     </div>
                   ) : null}
-                  <div className="flex min-h-10 min-w-0 items-center gap-2">
-                    {showTaskModeToggle ? (
-                      <div
-                        role="group"
-                        aria-label={t.taskEntryModeGroupAria}
-                        className="flex h-10 shrink-0 items-center gap-1"
-                      >
-                        <button
-                          type="button"
-                          className={
-                            effectiveTaskEntryMode === "realtime"
-                              ? tbVioletToggleOn
-                              : tbVioletToggleOff
-                          }
-                          aria-pressed={effectiveTaskEntryMode === "realtime"}
-                          title={t.taskEntryModeRealtime}
-                          aria-label={t.taskEntryModeRealtime}
-                          onClick={() => setTaskEntryMode("realtime")}
-                        >
-                          <Zap size={18} strokeWidth={2.25} aria-hidden />
-                        </button>
-                        <button
-                          type="button"
-                          className={
-                            effectiveTaskEntryMode === "past"
-                              ? tbVioletToggleOn
-                              : tbVioletToggleOff
-                          }
-                          aria-pressed={effectiveTaskEntryMode === "past"}
-                          title={t.taskEntryModePast}
-                          aria-label={t.taskEntryModePast}
-                          onClick={() => setTaskEntryMode("past")}
-                        >
-                          <History size={18} strokeWidth={2} aria-hidden />
-                        </button>
-                      </div>
-                    ) : null}
-                    <input
-                      className={`${TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS} min-w-0 flex-1 text-center`}
-                      placeholder={
-                        effectiveTaskEntryMode === "past"
-                          ? t.taskPlaceholderPast
-                          : t.taskPlaceholder
+                  <input
+                    id="kronosys-task-launcher-input"
+                    className={`${TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS} min-w-0 flex-1 text-center`}
+                    placeholder={
+                      effectiveTaskEntryMode === "past"
+                        ? t.taskPlaceholderPast
+                        : t.taskPlaceholder
+                    }
+                    value={taskInput}
+                    list="kronosys-task-templates"
+                    onChange={(e) => setTaskInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key !== "Enter") {
+                        return;
                       }
-                      value={taskInput}
-                      onChange={(e) => setTaskInput(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key !== "Enter") {
-                          return;
-                        }
-                        if (
-                          effectiveTaskEntryMode === "realtime" &&
-                          taskInput.trim()
-                        ) {
-                          e.preventDefault();
-                          void submitStartTask();
-                          return;
-                        }
-                        if (
-                          effectiveTaskEntryMode === "past" &&
-                          canSubmitPast &&
-                          retroTargetSessionId
-                        ) {
-                          e.preventDefault();
-                          void submitAddHistoricalTask();
-                        }
-                      }}
-                      aria-label={
-                        effectiveTaskEntryMode === "past"
-                          ? t.taskPlaceholderPast
-                          : t.taskPlaceholder
+                      if (
+                        effectiveTaskEntryMode === "realtime" &&
+                        taskInput.trim()
+                      ) {
+                        e.preventDefault();
+                        void submitStartTask();
+                        return;
                       }
-                    />
-                    <div className="flex h-10 shrink-0 items-center gap-1">
-                      {effectiveTaskEntryMode === "realtime" ? (
-                        <>
-                          {showKronoFocusInTaskOps ? (
-                            <button
-                              type="button"
-                              role="switch"
-                              aria-checked={
-                                startKronoFocusWithTask ? "true" : "false"
-                              }
-                              aria-label={
-                                startKronoFocusWithTask
-                                  ? t.startTaskWithKronoFocusToggleAriaOn
-                                  : t.startTaskWithKronoFocusToggleAriaOff
-                              }
-                              title={t.startTaskWithKronoFocus}
-                              onClick={() =>
-                                setStartKronoFocusWithTask((v) => !v)
-                              }
-                              className={`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors [&_svg]:shrink-0 ${
-                                startKronoFocusWithTask
-                                  ? "border-2 border-violet-500/65 bg-violet-500/12 text-violet-900 shadow-none hover:border-violet-500/80 hover:bg-violet-500/18 dark:border-violet-400/55 dark:bg-violet-600/22 dark:text-violet-100 dark:hover:border-violet-400/70 dark:hover:bg-violet-600/30"
-                                  : "border border-zinc-300 bg-white/80 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-400"
-                              } hover:bg-zinc-100/90 dark:hover:bg-zinc-800/40`}
-                            >
-                              <Timer size={20} strokeWidth={2} aria-hidden />
-                            </button>
-                          ) : null}
+                      if (
+                        effectiveTaskEntryMode === "past" &&
+                        canSubmitPast &&
+                        retroTargetSessionId
+                      ) {
+                        e.preventDefault();
+                        void submitAddHistoricalTask();
+                      }
+                    }}
+                    aria-label={
+                      effectiveTaskEntryMode === "past"
+                        ? t.taskPlaceholderPast
+                        : t.taskPlaceholder
+                    }
+                  />
+                  <div className="flex h-10 shrink-0 items-center gap-1">
+                    {effectiveTaskEntryMode === "realtime" ? (
+                      <>
+                        {showKronoFocusInTaskOps ? (
                           <button
                             type="button"
-                            className={tbVioletIcon}
-                            disabled={!taskInput.trim()}
-                            title={t.startTaskBtn}
-                            aria-label={t.startTaskBtn}
-                            onClick={() => void submitStartTask()}
+                            role="switch"
+                            aria-checked={
+                              startKronoFocusWithTask ? "true" : "false"
+                            }
+                            aria-label={
+                              startKronoFocusWithTask
+                                ? t.startTaskWithKronoFocusToggleAriaOn
+                                : t.startTaskWithKronoFocusToggleAriaOff
+                            }
+                            title={t.startTaskWithKronoFocus}
+                            onClick={() =>
+                              setStartKronoFocusWithTask((v) => !v)
+                            }
+                            className={`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors [&_svg]:shrink-0 ${
+                              startKronoFocusWithTask
+                                ? "border-2 border-violet-500/65 bg-violet-500/12 text-violet-900 shadow-none hover:border-violet-500/80 hover:bg-violet-500/18 dark:border-violet-400/55 dark:bg-violet-600/22 dark:text-violet-100 dark:hover:border-violet-400/70 dark:hover:bg-violet-600/30"
+                                : "border border-zinc-300 bg-white/80 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-950/50 dark:text-zinc-400"
+                            } hover:bg-zinc-100/90 dark:hover:bg-zinc-800/40`}
                           >
-                            <Play
-                              size={22}
-                              className="ml-0.5"
-                              fill="currentColor"
-                              aria-hidden
-                            />
+                            <Timer size={20} strokeWidth={2} aria-hidden />
                           </button>
-                        </>
-                      ) : (
+                        ) : null}
                         <button
                           type="button"
                           className={tbVioletIcon}
-                          disabled={!canSubmitPast || !retroTargetSessionId}
-                          title={t.archiveAddTaskBtn}
-                          aria-label={t.archiveAddTaskBtn}
-                          onClick={() => void submitAddHistoricalTask()}
+                          disabled={!taskInput.trim()}
+                          title={t.startTaskBtn}
+                          aria-label={t.startTaskBtn}
+                          onClick={() => void submitStartTask()}
                         >
                           <Play
                             size={22}
@@ -1021,30 +1461,78 @@ export function TaskFocusPanel({
                             aria-hidden
                           />
                         </button>
-                      )}
-                    </div>
+                      </>
+                    ) : (
+                      <button
+                        type="button"
+                        className={tbVioletIcon}
+                        disabled={!canSubmitPast || !retroTargetSessionId}
+                        title={t.archiveAddTaskBtn}
+                        aria-label={t.archiveAddTaskBtn}
+                        onClick={() => void submitAddHistoricalTask()}
+                      >
+                        <Play
+                          size={22}
+                          className="ml-0.5"
+                          fill="currentColor"
+                          aria-hidden
+                        />
+                      </button>
+                    )}
                   </div>
-                  {taskFormTagSection}
                 </div>
-              )}
-            </>
-          ) : null}
-
-          {!isInspecting && runningTasks.length > 0 ? (
-            <div className="min-w-0 pt-2">
-              <div className="mb-3 flex items-baseline justify-between gap-3">
-                <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
-                  {t.tasksRunningHeading}
-                </h3>
-                <span className="tabular-nums text-[0.7rem] font-medium text-emerald-600 dark:text-emerald-400/90">
-                  {runningTasks.length}
-                </span>
+                <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={taskNoteInput}
+                  onChange={(e) => setTaskNoteInput(e.target.value)}
+                  rows={3}
+                  aria-label={t.taskNoteLabel}
+                />
+                {taskFormTagSection}
               </div>
-              <div className="divide-y divide-zinc-200/80 dark:divide-zinc-700/80">
-                {runningTasks.map((task) => (
+            )}
+            <datalist id="kronosys-task-templates">
+              {filteredTaskTemplates.map((tpl) => (
+                <option key={tpl.id} value={formatTaskTemplateDraftLine(tpl)}>
+                  {formatTaskTemplateDatalistLabel(
+                    tpl,
+                    t.taskTemplateDatalistPrefix,
+                  )}
+                </option>
+              ))}
+            </datalist>
+          </>
+        ) : null}
+
+        {!isInspecting && runningTasks.length > 0 ? (
+          <div
+            className={`min-w-0 overflow-hidden pt-2 transition-[opacity,transform,max-height] duration-300 ease-out motion-reduce:transition-none ${
+              taskListVisibleSessionId !== null &&
+              taskListEnterSessionId === taskListVisibleSessionId
+                ? "max-h-[1000rem] translate-y-0 opacity-100"
+                : "max-h-0 translate-y-1 opacity-0"
+            }`}
+          >
+            <div className="mb-3 flex items-baseline justify-between gap-3">
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                {t.tasksRunningHeading}
+              </h3>
+              <span className="tabular-nums text-[0.7rem] font-medium text-emerald-600 dark:text-emerald-400/90">
+                {runningTasks.length}
+              </span>
+            </div>
+            <div className="space-y-3">
+              {runningTasks.map((task) => (
+                <div
+                  key={task.id}
+                  className={`transition-all duration-150 ease-out motion-reduce:transition-none ${
+                    deletingTaskIds.has(String(task.id))
+                      ? "pointer-events-none translate-y-1 scale-[0.985] opacity-0"
+                      : "translate-y-0 scale-100 opacity-100"
+                  }`}
+                >
                   <TaskSessionLiveCard
-                    key={task.id}
-                    variant="plain"
                     task={task}
                     lang={lang}
                     displayTimeZone={displayTimeZone}
@@ -1061,6 +1549,9 @@ export function TaskFocusPanel({
                     startKronoFocusFromTask={() =>
                       void startKronoFocusFromTask()
                     }
+                    onDuplicateTask={duplicateTaskToDraft}
+                    onSaveAsTemplate={(task) => void saveTaskAsTemplate(task)}
+                    isAlreadyTemplate={isTaskAlreadyTemplate(task)}
                     pausePlayMode="pause"
                     onPausePlay={() =>
                       void post({
@@ -1073,15 +1564,22 @@ export function TaskFocusPanel({
                     allowTaskStartTimeEdit={allowTaskStartTimeEdit}
                     allowTaskEndTimeEdit={allowTaskEndTimeEdit}
                   />
-                ))}
-              </div>
+                </div>
+              ))}
             </div>
-          ) : null}
-        </>
+          </div>
+        ) : null}
       </div>
 
       {showTaskListBuckets ? (
-        <div className="mt-8 space-y-10">
+        <div
+          className={`mt-8 space-y-10 overflow-hidden transition-[opacity,transform,max-height] duration-300 ease-out motion-reduce:transition-none ${
+            taskListVisibleSessionId !== null &&
+            taskListEnterSessionId === taskListVisibleSessionId
+              ? "max-h-[1000rem] translate-y-0 opacity-100"
+              : "max-h-0 translate-y-1 opacity-0"
+          }`}
+        >
           {showSessionTaskCountBadge ? (
             <div className="flex justify-end">
               <span className="rounded-full border border-zinc-600 px-2 py-0.5 text-xs text-zinc-400">
@@ -1090,6 +1588,86 @@ export function TaskFocusPanel({
             </div>
           ) : null}
 
+          {showPlannedTaskSection ? (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-300/90">
+                  {t.tasksPlannedHeading}
+                </h4>
+                <span className="rounded-full border border-sky-600/50 bg-sky-50/80 px-2 py-0.5 text-[0.65rem] text-sky-900 dark:border-sky-500/45 dark:bg-sky-950/40 dark:text-sky-200">
+                  {plannedTasksDisplay.length}
+                </span>
+              </div>
+              <div className="space-y-3">
+                {plannedTasksDisplay.map((task) => {
+                  const stackRow = runningTasksRaw.find(
+                    (r) => String(r.id) === String(task.id),
+                  );
+                  const pauseMode: "pause" | "resume" | null = task.isDone
+                    ? null
+                    : stackRow && !stackRow.manualTaskTimerPaused
+                    ? "pause"
+                    : "resume";
+                  return (
+                    <div
+                      key={task.id}
+                      className={`transition-all duration-150 ease-out motion-reduce:transition-none ${
+                        deletingTaskIds.has(String(task.id))
+                          ? "pointer-events-none translate-y-1 scale-[0.985] opacity-0"
+                          : "translate-y-0 scale-100 opacity-100"
+                      }`}
+                    >
+                      <TaskSessionLiveCard
+                        task={task}
+                        lang={lang}
+                        displayTimeZone={displayTimeZone}
+                        use24HourClock={use24HourClock}
+                        isInspecting={isInspecting}
+                        inspectingId={inspectingId}
+                        knownTags={knownTags}
+                        knownProjects={knownProjects}
+                        post={post}
+                        t={t}
+                        confirmDeleteTask={confirmDeleteTask}
+                        kronoFocusIsRunningOrPaused={
+                          kronoFocusIsRunningOrPaused
+                        }
+                        showKronoFocusTaskActions={showKronoFocusInTaskOps}
+                        startKronoFocusFromTask={() =>
+                          void startKronoFocusFromTask()
+                        }
+                        onDuplicateTask={duplicateTaskToDraft}
+                        onSaveAsTemplate={(task) =>
+                          void saveTaskAsTemplate(task)
+                        }
+                        isAlreadyTemplate={isTaskAlreadyTemplate(task)}
+                        pausePlayMode={pauseMode}
+                        temporalPlanned
+                        onPausePlay={() => {
+                          if (pauseMode === "pause") {
+                            void post({
+                              type: "setTaskTimerPaused",
+                              taskId: task.id,
+                              paused: true,
+                            });
+                          } else if (pauseMode === "resume") {
+                            void post({
+                              type: "resumePausedTask",
+                              taskId: task.id,
+                            });
+                          }
+                        }}
+                        anchorId={`kronosys-task-${task.id}`}
+                        allowTaskStartTimeEdit={allowTaskStartTimeEdit}
+                        allowTaskEndTimeEdit={allowTaskEndTimeEdit}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : null}
+
           {showPausedTaskSection ? (
             <div className="space-y-2">
               <div className="flex items-center justify-between gap-2">
@@ -1102,32 +1680,43 @@ export function TaskFocusPanel({
               </div>
               <div className="space-y-3">
                 {pausedTasksDisplay.map((task) => (
-                  <TaskSessionLiveCard
+                  <div
                     key={task.id}
-                    task={task}
-                    lang={lang}
-                    displayTimeZone={displayTimeZone}
-                    use24HourClock={use24HourClock}
-                    isInspecting={isInspecting}
-                    inspectingId={inspectingId}
-                    knownTags={knownTags}
-                    knownProjects={knownProjects}
-                    post={post}
-                    t={t}
-                    confirmDeleteTask={confirmDeleteTask}
-                    kronoFocusIsRunningOrPaused={kronoFocusIsRunningOrPaused}
-                    showKronoFocusTaskActions={showKronoFocusInTaskOps}
-                    startKronoFocusFromTask={() =>
-                      void startKronoFocusFromTask()
-                    }
-                    pausePlayMode="resume"
-                    onPausePlay={() =>
-                      void post({ type: "resumePausedTask", taskId: task.id })
-                    }
-                    anchorId={`kronosys-task-${task.id}`}
-                    allowTaskStartTimeEdit={allowTaskStartTimeEdit}
-                    allowTaskEndTimeEdit={allowTaskEndTimeEdit}
-                  />
+                    className={`transition-all duration-150 ease-out motion-reduce:transition-none ${
+                      deletingTaskIds.has(String(task.id))
+                        ? "pointer-events-none translate-y-1 scale-[0.985] opacity-0"
+                        : "translate-y-0 scale-100 opacity-100"
+                    }`}
+                  >
+                    <TaskSessionLiveCard
+                      task={task}
+                      lang={lang}
+                      displayTimeZone={displayTimeZone}
+                      use24HourClock={use24HourClock}
+                      isInspecting={isInspecting}
+                      inspectingId={inspectingId}
+                      knownTags={knownTags}
+                      knownProjects={knownProjects}
+                      post={post}
+                      t={t}
+                      confirmDeleteTask={confirmDeleteTask}
+                      kronoFocusIsRunningOrPaused={kronoFocusIsRunningOrPaused}
+                      showKronoFocusTaskActions={showKronoFocusInTaskOps}
+                      startKronoFocusFromTask={() =>
+                        void startKronoFocusFromTask()
+                      }
+                      onDuplicateTask={duplicateTaskToDraft}
+                      onSaveAsTemplate={(task) => void saveTaskAsTemplate(task)}
+                      isAlreadyTemplate={isTaskAlreadyTemplate(task)}
+                      pausePlayMode="resume"
+                      onPausePlay={() =>
+                        void post({ type: "resumePausedTask", taskId: task.id })
+                      }
+                      anchorId={`kronosys-task-${task.id}`}
+                      allowTaskStartTimeEdit={allowTaskStartTimeEdit}
+                      allowTaskEndTimeEdit={allowTaskEndTimeEdit}
+                    />
+                  </div>
                 ))}
               </div>
             </div>
@@ -1145,30 +1734,41 @@ export function TaskFocusPanel({
               </div>
               <div className="space-y-3">
                 {completedTasksDisplay.map((task) => (
-                  <TaskSessionLiveCard
+                  <div
                     key={task.id}
-                    task={task}
-                    lang={lang}
-                    displayTimeZone={displayTimeZone}
-                    use24HourClock={use24HourClock}
-                    isInspecting={isInspecting}
-                    inspectingId={inspectingId}
-                    knownTags={knownTags}
-                    knownProjects={knownProjects}
-                    post={post}
-                    t={t}
-                    confirmDeleteTask={confirmDeleteTask}
-                    kronoFocusIsRunningOrPaused={kronoFocusIsRunningOrPaused}
-                    showKronoFocusTaskActions={showKronoFocusInTaskOps}
-                    startKronoFocusFromTask={() =>
-                      void startKronoFocusFromTask()
-                    }
-                    pausePlayMode={null}
-                    onPausePlay={() => {}}
-                    anchorId={`kronosys-task-${task.id}`}
-                    allowTaskStartTimeEdit={allowTaskStartTimeEdit}
-                    allowTaskEndTimeEdit={allowTaskEndTimeEdit}
-                  />
+                    className={`transition-all duration-150 ease-out motion-reduce:transition-none ${
+                      deletingTaskIds.has(String(task.id))
+                        ? "pointer-events-none translate-y-1 scale-[0.985] opacity-0"
+                        : "translate-y-0 scale-100 opacity-100"
+                    }`}
+                  >
+                    <TaskSessionLiveCard
+                      task={task}
+                      lang={lang}
+                      displayTimeZone={displayTimeZone}
+                      use24HourClock={use24HourClock}
+                      isInspecting={isInspecting}
+                      inspectingId={inspectingId}
+                      knownTags={knownTags}
+                      knownProjects={knownProjects}
+                      post={post}
+                      t={t}
+                      confirmDeleteTask={confirmDeleteTask}
+                      kronoFocusIsRunningOrPaused={kronoFocusIsRunningOrPaused}
+                      showKronoFocusTaskActions={showKronoFocusInTaskOps}
+                      startKronoFocusFromTask={() =>
+                        void startKronoFocusFromTask()
+                      }
+                      onDuplicateTask={duplicateTaskToDraft}
+                      onSaveAsTemplate={(task) => void saveTaskAsTemplate(task)}
+                      isAlreadyTemplate={isTaskAlreadyTemplate(task)}
+                      pausePlayMode={null}
+                      onPausePlay={() => {}}
+                      anchorId={`kronosys-task-${task.id}`}
+                      allowTaskStartTimeEdit={allowTaskStartTimeEdit}
+                      allowTaskEndTimeEdit={allowTaskEndTimeEdit}
+                    />
+                  </div>
                 ))}
               </div>
             </div>
@@ -1176,19 +1776,6 @@ export function TaskFocusPanel({
         </div>
       ) : null}
 
-      {issuePickerOpen ? (
-        <IssuePickerModal
-          t={t}
-          fetchIssues={fetchGitlabIssues}
-          onClose={() => setIssuePickerOpen(false)}
-          onSelect={(issue) => {
-            const title = String(issue.title ?? "").trimEnd();
-            const suffix = `#${issue.number}`;
-            setTaskInput(title ? `${title}${suffix}` : suffix);
-            setIssuePickerOpen(false);
-          }}
-        />
-      ) : null}
       <DashboardAlertModal
         open={alertMessage !== null}
         message={alertMessage ?? ""}
@@ -1214,11 +1801,27 @@ export function TaskFocusPanel({
           const id = deleteTaskConfirmId;
           setDeleteTaskConfirmId(null);
           if (id) {
-            void post({
-              type: "deleteTask",
-              taskId: id,
-              sessionId: inspectingId,
+            setDeletingTaskIds((prev) => {
+              const next = new Set(prev);
+              next.add(String(id));
+              return next;
             });
+            globalThis.setTimeout(() => {
+              void post({
+                type: "deleteTask",
+                taskId: id,
+                sessionId: inspectingId,
+              }).finally(() => {
+                setDeletingTaskIds((prev) => {
+                  if (!prev.has(String(id))) {
+                    return prev;
+                  }
+                  const next = new Set(prev);
+                  next.delete(String(id));
+                  return next;
+                });
+              });
+            }, TASK_DELETE_ANIM_MS);
           }
         }}
       />