@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/TaskSessionLiveCard.tsx

@@ -0,0 +1,832 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Timer,
+  Play,
+  Pause,
+  CheckCircle2,
+  Trash2,
+  GitCommit,
+} from "lucide-react";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { formatIsoInstantShort } from "@/lib/formatIsoShort";
+import { DEFAULT_DASHBOARD_TIME_ZONE } from "@/lib/dashboardTimeZone";
+import {
+  filterTaskTagsForProject,
+  formatDuration,
+  formatStopwatchMs,
+  formatProjectDisplay,
+  mergeTagsForDisplay,
+  normalizeTagKey,
+  parseTaskWithAutoTags,
+  resolveProjectForTaskUpdate,
+  taskTitleEditBaseline,
+  taskTitleForDisplay,
+} from "@/lib/taskParsing";
+import { TagPills } from "./TagPills";
+import { tbEmeraldIcon } from "@/lib/translucentButtonClasses";
+import {
+  PROJECT_CHIP_APPLIED_CLASS,
+  TASK_ACTIVE_TITLE_EDIT_INPUT_CLASS,
+  TASK_ACTIVE_TITLE_READ_CLASS,
+} from "./taskFieldStyles";
+import { TaskSubtasksBlock } from "./TaskSubtasksBlock";
+import { DashboardConfirmModal } from "./DashboardSimpleModal";
+import { useSmoothStopwatchDisplayMs } from "./useSmoothStopwatchMs";
+import {
+  KronosysDatetimePopoverField,
+  formatDatetimeLocalValue,
+} from "./KronosysDatetimePopoverField";
+
+const FINISH_TASK_SUBTASKS_WARN_STORAGE_KEY =
+  "kronosys_finish_task_subtasks_warn_dismiss_v1";
+
+function readFinishSubtasksWarnDismissed(): boolean {
+  try {
+    return (
+      globalThis.localStorage?.getItem(
+        FINISH_TASK_SUBTASKS_WARN_STORAGE_KEY,
+      ) === "1"
+    );
+  } catch {
+    return false;
+  }
+}
+
+function persistFinishSubtasksWarnDismissed(): void {
+  try {
+    globalThis.localStorage?.setItem(
+      FINISH_TASK_SUBTASKS_WARN_STORAGE_KEY,
+      "1",
+    );
+  } catch {
+    /* quota / navigation privée */
+  }
+}
+
+const DONE_TITLE_READ_CLASS =
+  "text-zinc-500 line-through decoration-zinc-400/[0.35] decoration-[1.5px] dark:text-zinc-300 dark:decoration-zinc-500/[0.35]";
+
+const DONE_TITLE_PLAIN_CLASS =
+  "text-zinc-500 line-through decoration-zinc-400/[0.35] decoration-[1.5px] dark:text-zinc-400 dark:decoration-zinc-500/[0.35]";
+
+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. */
+const TASK_CARD_SHELL_PLAIN_CLASS =
+  "rounded-none border-0 bg-transparent py-4 shadow-none first:pt-2 dark:bg-transparent";
+
+export type TaskSessionLiveCardTask = {
+  id: string;
+  name: string;
+  durationMs: number;
+  isDone: boolean;
+  /** Début du suivi ou de l’entrée passée (ISO 8601), si connu. */
+  startTime?: string;
+  /** Fin du suivi ou de l’entrée passée (ISO 8601), si connu. */
+  endTime?: string;
+  tags?: string[];
+  project?: string | null;
+  subtasks?: Array<{
+    id: string;
+    title: string;
+    done: boolean;
+    durationMs?: number;
+  }>;
+  activeSubtaskTimerId?: string;
+};
+
+function TaskTimingFieldRow({
+  label,
+  displayValue,
+  editable,
+  draftValue,
+  onDraftChange,
+  onDraftBlur,
+  lang,
+  t,
+}: {
+  label: string;
+  displayValue: string | null;
+  editable: boolean;
+  draftValue: string;
+  onDraftChange: (next: string) => void;
+  onDraftBlur: () => void;
+  lang: Lang;
+  t: DashboardStrings;
+}) {
+  if (!editable && !displayValue) {
+    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">
+      <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+        {label}
+      </span>
+      {editable ? (
+        <>
+          <KronosysDatetimePopoverField
+            value={draftValue}
+            onChange={onDraftChange}
+            onBlur={onDraftBlur}
+            aria-label={label}
+            lang={lang}
+            t={t}
+          />
+        </>
+      ) : (
+        <span className="min-w-0 tabular-nums text-zinc-800 dark:text-zinc-200">
+          {displayValue}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function resolvedDoneTaskDurationMinutes(
+  task: TaskSessionLiveCardTask,
+): number | null {
+  const ms = task.durationMs;
+  if (typeof ms === "number" && Number.isFinite(ms) && ms > 0) {
+    return ms / 60000;
+  }
+  const st =
+    typeof task.startTime === "string"
+      ? new Date(task.startTime).getTime()
+      : Number.NaN;
+  const en =
+    typeof task.endTime === "string"
+      ? new Date(task.endTime).getTime()
+      : Number.NaN;
+  if (Number.isFinite(st) && Number.isFinite(en) && en >= st) {
+    return (en - st) / 60000;
+  }
+  return null;
+}
+
+export function TaskSessionLiveCard({
+  task,
+  lang,
+  displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
+  use24HourClock = true,
+  isInspecting,
+  inspectingId,
+  knownTags,
+  knownProjects,
+  post,
+  t,
+  confirmDeleteTask,
+  kronoFocusIsRunningOrPaused,
+  showKronoFocusTaskActions = true,
+  startKronoFocusFromTask,
+  pausePlayMode,
+  onPausePlay,
+  anchorId,
+  variant = "card",
+  allowTaskStartTimeEdit = true,
+  allowTaskEndTimeEdit = true,
+}: {
+  task: TaskSessionLiveCardTask;
+  lang: Lang;
+  displayTimeZone?: string;
+  use24HourClock?: boolean;
+  isInspecting: boolean;
+  inspectingId: string | null;
+  knownTags: string[];
+  knownProjects: string[];
+  post: (body: Record<string, unknown>) => Promise<void>;
+  t: DashboardStrings;
+  confirmDeleteTask: (taskId: string) => void;
+  kronoFocusIsRunningOrPaused: boolean;
+  /** Bouton « démarrer le KronoFocus » sur les tâches non terminées (paramètre tableau de bord). */
+  showKronoFocusTaskActions?: boolean;
+  startKronoFocusFromTask: () => void;
+  /** `null` : tâche terminée (pas de pause / reprise). */
+  pausePlayMode: "pause" | "resume" | null;
+  onPausePlay: () => void;
+  /** Ex. `kronosys-active-task-<id>` pour ancre KronoFocus. */
+  anchorId?: string;
+  /** `plain` : sans bordure ni fond (ex. tâches au minuteur). */
+  variant?: "card" | "plain";
+  /** Option `dashboardAllowTaskStartTimeEdit` : correction du `startTime`. */
+  allowTaskStartTimeEdit?: boolean;
+  /** Option `dashboardAllowTaskEndTimeEdit` : correction du `endTime` (tâches terminées). */
+  allowTaskEndTimeEdit?: boolean;
+}) {
+  const [shouldCommit, setShouldCommit] = useState(false);
+  const [finishOpenSubtasksWarnOpen, setFinishOpenSubtasksWarnOpen] =
+    useState(false);
+  const [dontRemindOpenSubtasksFinish, setDontRemindOpenSubtasksFinish] =
+    useState(false);
+  const [titleEditing, setTitleEditing] = useState(false);
+  const [titleDraft, setTitleDraft] = useState("");
+  const [taskStartDraft, setTaskStartDraft] = useState("");
+  const [optimisticLiveBaseMs, setOptimisticLiveBaseMs] = useState<
+    number | null
+  >(null);
+  const [derivedLiveBaseMs, setDerivedLiveBaseMs] = useState<number | null>(
+    null,
+  );
+  const [taskEndDraft, setTaskEndDraft] = useState("");
+  const [optimisticDoneDurationMin, setOptimisticDoneDurationMin] = useState<
+    number | null
+  >(null);
+  const titleInputRef = useRef<HTMLInputElement>(null);
+  const skipTitleBlurCommitRef = useRef(false);
+
+  const mergedTags = mergeTagsForDisplay(task.name, task.tags);
+  const trimmedProject = task.project?.trim() ?? "";
+  /** 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 taskStopwatchBaseMs =
+    optimisticLiveBaseMs !== null
+      ? optimisticLiveBaseMs
+      : derivedLiveBaseMs !== null
+        ? derivedLiveBaseMs
+        : Math.max(0, task.durationMs ?? 0);
+  const liveTaskStopwatchMs = useSmoothStopwatchDisplayMs(
+    taskStopwatchBaseMs,
+    smoothTaskTimer,
+  );
+
+  const startFmt =
+    typeof task.startTime === "string"
+      ? formatIsoInstantShort(
+          task.startTime,
+          lang,
+          displayTimeZone,
+          use24HourClock,
+        )
+      : null;
+  const endFmt =
+    typeof task.endTime === "string"
+      ? formatIsoInstantShort(
+          task.endTime,
+          lang,
+          displayTimeZone,
+          use24HourClock,
+        )
+      : null;
+  const durationMinResolved = isDone
+    ? optimisticDoneDurationMin !== null
+      ? optimisticDoneDurationMin
+      : resolvedDoneTaskDurationMinutes(task)
+    : null;
+  const durationLabel =
+    durationMinResolved !== null ? formatDuration(durationMinResolved) : null;
+  const showDoneTimingRow =
+    isDone && (startFmt !== null || endFmt !== null || durationLabel !== null);
+  const canEditTaskStartTime =
+    allowTaskStartTimeEdit &&
+    typeof task.startTime === "string" &&
+    task.startTime.trim() !== "";
+  const canEditTaskEndTime =
+    allowTaskEndTimeEdit &&
+    isDone &&
+    typeof task.startTime === "string" &&
+    task.startTime.trim() !== "" &&
+    typeof task.endTime === "string" &&
+    task.endTime.trim() !== "";
+  const doneTimingAria = [
+    startFmt ? `${t.archiveTaskStartLabel} ${startFmt}` : "",
+    endFmt ? `${t.archiveTaskEndLabel} ${endFmt}` : "",
+    durationLabel ? `${t.taskTimingDurationLabel} ${durationLabel}` : "",
+  ]
+    .filter(Boolean)
+    .join(", ");
+
+  useEffect(() => {
+    setTitleEditing(false);
+  }, [task.id]);
+
+  useEffect(() => {
+    const st = typeof task.startTime === "string" ? task.startTime.trim() : "";
+    const parsed = st ? new Date(st) : null;
+    if (!parsed || Number.isNaN(parsed.getTime())) {
+      setTaskStartDraft("");
+      return;
+    }
+    setTaskStartDraft(formatDatetimeLocalValue(parsed));
+  }, [task.id, task.startTime]);
+
+  useEffect(() => {
+    const et = typeof task.endTime === "string" ? task.endTime.trim() : "";
+    const parsed = et ? new Date(et) : null;
+    if (!parsed || Number.isNaN(parsed.getTime())) {
+      setTaskEndDraft("");
+      return;
+    }
+    setTaskEndDraft(formatDatetimeLocalValue(parsed));
+  }, [task.id, task.endTime]);
+
+  useEffect(() => {
+    setOptimisticLiveBaseMs(null);
+  }, [task.id, task.durationMs]);
+
+  useEffect(() => {
+    setOptimisticDoneDurationMin(null);
+  }, [task.id, task.durationMs, task.endTime]);
+
+  useEffect(() => {
+    if (!smoothTaskTimer) {
+      setDerivedLiveBaseMs(null);
+      return;
+    }
+    const startMs =
+      typeof task.startTime === "string"
+        ? Date.parse(task.startTime)
+        : Number.NaN;
+    if (!Number.isFinite(startMs)) {
+      setDerivedLiveBaseMs(null);
+      return;
+    }
+    setDerivedLiveBaseMs(Math.max(0, Date.now() - startMs));
+  }, [smoothTaskTimer, task.startTime, task.id]);
+
+  useEffect(() => {
+    if (titleEditing && titleInputRef.current) {
+      const el = titleInputRef.current;
+      el.focus();
+      el.select();
+    }
+  }, [titleEditing]);
+
+  const beginEditTitle = useCallback(() => {
+    setTitleDraft(titleDraftSource);
+    setTitleEditing(true);
+  }, [titleDraftSource]);
+
+  const commitTitleEdit = useCallback(() => {
+    const trimmed = titleDraft.trim();
+    setTitleEditing(false);
+    if (trimmed === "") {
+      return;
+    }
+    if (trimmed === titleDraftSource) {
+      return;
+    }
+    const parsed = parseTaskWithAutoTags(trimmed);
+    const nextName = parsed.name.trim() || parsed.tags[0] || trimmed;
+    const mergedTagsNext = mergeTagsForDisplay(trimmed, mergedTags);
+    const projUp = resolveProjectForTaskUpdate(trimmed);
+    const resolvedProject =
+      projUp !== undefined ? projUp : (task.project ?? null);
+    const tagsFiltered = filterTaskTagsForProject(
+      mergedTagsNext,
+      resolvedProject,
+    );
+    const body: Record<string, unknown> = {
+      type: "updateTask",
+      taskId: task.id,
+      name: nextName,
+      tags: tagsFiltered,
+    };
+    if (inspectingId) {
+      body.sessionId = inspectingId;
+    }
+    if (projUp !== undefined) {
+      body.project = projUp;
+    }
+    void post(body);
+  }, [titleDraft, titleDraftSource, task.id, mergedTags, inspectingId, post]);
+
+  const cancelTitleEdit = useCallback(() => {
+    skipTitleBlurCommitRef.current = true;
+    setTitleDraft(titleDraftSource);
+    setTitleEditing(false);
+  }, [titleDraftSource]);
+
+  const runFinishTask = useCallback(() => {
+    void post({
+      type: "finishTask",
+      taskId: task.id,
+      shouldCommit,
+    });
+  }, [post, task.id, shouldCommit]);
+
+  const requestFinishTask = useCallback(() => {
+    if (isDone) {
+      return;
+    }
+    const subs = task.subtasks;
+    const openCount = Array.isArray(subs)
+      ? subs.filter((s) => !s.done).length
+      : 0;
+    if (openCount > 0 && !readFinishSubtasksWarnDismissed()) {
+      setDontRemindOpenSubtasksFinish(false);
+      setFinishOpenSubtasksWarnOpen(true);
+      return;
+    }
+    runFinishTask();
+  }, [isDone, task.subtasks, runFinishTask]);
+
+  const applyTaskStartTimeEdit = useCallback(() => {
+    if (!canEditTaskStartTime) {
+      return;
+    }
+    const nextMs = Date.parse(taskStartDraft);
+    if (!Number.isFinite(nextMs)) {
+      return;
+    }
+    const nextIso = new Date(nextMs).toISOString();
+    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;
+    }
+    void post(body);
+  }, [
+    canEditTaskStartTime,
+    taskStartDraft,
+    task.startTime,
+    task.id,
+    inspectingId,
+    post,
+    smoothTaskTimer,
+  ]);
+
+  const applyTaskEndTimeEdit = useCallback(() => {
+    if (!canEditTaskEndTime) {
+      return;
+    }
+    const endMs = Date.parse(taskEndDraft);
+    if (!Number.isFinite(endMs)) {
+      return;
+    }
+    const startMs =
+      typeof task.startTime === "string"
+        ? Date.parse(task.startTime)
+        : Number.NaN;
+    if (!Number.isFinite(startMs) || endMs < startMs) {
+      return;
+    }
+    const nextIso = new Date(endMs).toISOString();
+    if (nextIso === task.endTime) {
+      return;
+    }
+    setOptimisticDoneDurationMin((endMs - startMs) / 60000);
+    const body: Record<string, unknown> = {
+      type: "setTaskEndTime",
+      taskId: task.id,
+      endTime: nextIso,
+    };
+    if (inspectingId) {
+      body.sessionId = inspectingId;
+    }
+    void post(body);
+  }, [
+    canEditTaskEndTime,
+    taskEndDraft,
+    task.startTime,
+    task.endTime,
+    task.id,
+    inspectingId,
+    post,
+  ]);
+
+  const shellBase =
+    variant === "plain" ? TASK_CARD_SHELL_PLAIN_CLASS : TASK_CARD_SHELL_CLASS;
+  const shellClass = anchorId ? `scroll-mt-24 ${shellBase}` : shellBase;
+
+  const titleUnderline =
+    variant === "plain"
+      ? "border-b border-zinc-300 dark:border-zinc-600"
+      : "border-b border-zinc-300 bg-transparent dark:border-zinc-600";
+  /** Carte claire : pas de `text-white` (illisible sur zinc-100). */
+  const titleActiveClass =
+    variant === "plain"
+      ? "text-zinc-900 dark:text-zinc-100"
+      : "text-zinc-950 dark:text-zinc-50";
+  const titleDoneClass =
+    variant === "plain" ? DONE_TITLE_PLAIN_CLASS : DONE_TITLE_READ_CLASS;
+  const titleHitClass =
+    variant === "plain"
+      ? "hover:bg-zinc-200/60 dark:hover:bg-zinc-800/40"
+      : "hover:bg-zinc-200/70 dark:hover:bg-zinc-800/40";
+
+  return (
+    <>
+      <div id={anchorId} className={shellClass}>
+        {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)}
+            >
+              <span className="truncate">
+                {formatProjectDisplay(trimmedProject)}
+              </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={() => {
+                  const body: Record<string, unknown> = {
+                    type: "updateTask",
+                    taskId: task.id,
+                    name: task.name,
+                    tags: task.tags ?? [],
+                    project: null,
+                  };
+                  if (inspectingId) {
+                    body.sessionId = inspectingId;
+                  }
+                  void post(body);
+                }}
+              >
+                <span className="text-[0.65rem] font-bold leading-none">×</span>
+              </button>
+            </span>
+          </div>
+        ) : null}
+        <div className="flex min-h-10 items-center gap-2 sm:gap-3">
+          <div
+            className={`flex h-10 min-w-0 flex-1 bg-transparent ${titleUnderline}`}
+          >
+            {titleEditing ? (
+              <input
+                ref={titleInputRef}
+                type="text"
+                className={TASK_ACTIVE_TITLE_EDIT_INPUT_CLASS}
+                value={titleDraft}
+                onChange={(e) => setTitleDraft(e.target.value)}
+                onBlur={() => {
+                  if (skipTitleBlurCommitRef.current) {
+                    skipTitleBlurCommitRef.current = false;
+                    return;
+                  }
+                  commitTitleEdit();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    skipTitleBlurCommitRef.current = true;
+                    commitTitleEdit();
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    cancelTitleEdit();
+                  }
+                }}
+                aria-label={t.activeTaskTitleInputAria}
+              />
+            ) : (
+              <div
+                role="button"
+                tabIndex={0}
+                className={`flex h-full min-h-10 min-w-0 flex-1 cursor-pointer items-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-zinc-500/40 ${titleHitClass}`}
+                onClick={() => beginEditTitle()}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    beginEditTitle();
+                  }
+                }}
+                title={t.activeTaskTitleEditHint}
+                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
+                  }`}
+                >
+                  <span className="whitespace-nowrap">
+                    {titleDisplay || "—"}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+          {!isDone && !isInspecting ? (
+            <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"}
+              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>
+          ) : (
+            <div className="flex h-10 shrink-0 items-center gap-1">
+              {!isDone && showKronoFocusTaskActions ? (
+                <button
+                  type="button"
+                  className={`inline-flex h-10 w-10 items-center justify-center rounded-lg ${
+                    kronoFocusIsRunningOrPaused
+                      ? "border border-violet-500/55 bg-violet-100 text-violet-900 hover:bg-violet-200/90 dark:border-violet-500/55 dark:bg-violet-950/45 dark:text-violet-200 dark:hover:bg-violet-900/55"
+                      : "border border-violet-500/45 bg-violet-50 text-violet-900 hover:bg-violet-100/90 dark:border-violet-600/45 dark:bg-violet-950/30 dark:text-violet-200 dark:hover:bg-violet-900/40"
+                  }`}
+                  title={t.startKronoFocusFromActiveTask}
+                  aria-label={t.startKronoFocusFromActiveTask}
+                  onClick={() => void startKronoFocusFromTask()}
+                >
+                  <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 />
+              ) : (
+                <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={
+                    pausePlayMode === "pause" ? t.pauseTaskBtn : t.resumeTaskBtn
+                  }
+                  aria-label={
+                    pausePlayMode === "pause" ? t.pauseTaskBtn : t.resumeTaskBtn
+                  }
+                  onClick={onPausePlay}
+                >
+                  {pausePlayMode === "pause" ? (
+                    <Pause size={20} />
+                  ) : (
+                    <Play size={20} className="ml-px" />
+                  )}
+                </button>
+              )}
+              <button
+                type="button"
+                disabled={isDone}
+                className={tbEmeraldIcon}
+                title={t.finishTaskBtn}
+                aria-label={t.finishTaskBtn}
+                onClick={() => {
+                  if (!isDone) {
+                    requestFinishTask();
+                  }
+                }}
+              >
+                <CheckCircle2 size={20} />
+              </button>
+              <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"
+                title={t.taskDeleteBtn}
+                aria-label={t.taskDeleteBtn}
+                onClick={() => confirmDeleteTask(task.id)}
+              >
+                <Trash2 size={20} />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {showDoneTimingRow || canEditTaskStartTime || canEditTaskEndTime ? (
+          <div aria-label={doneTimingAria || undefined}>
+            <div className="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2">
+              <TaskTimingFieldRow
+                label={t.archiveTaskStartLabel}
+                displayValue={startFmt}
+                editable={canEditTaskStartTime}
+                draftValue={taskStartDraft}
+                onDraftChange={setTaskStartDraft}
+                onDraftBlur={applyTaskStartTimeEdit}
+                lang={lang}
+                t={t}
+              />
+              <TaskTimingFieldRow
+                label={t.archiveTaskEndLabel}
+                displayValue={endFmt}
+                editable={canEditTaskEndTime}
+                draftValue={taskEndDraft}
+                onDraftChange={setTaskEndDraft}
+                onDraftBlur={applyTaskEndTimeEdit}
+                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">
+                  <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+                    {t.taskTimingDurationLabel}
+                  </span>
+                  <span className="tabular-nums text-zinc-800 dark:text-zinc-200">
+                    {durationLabel}
+                  </span>
+                </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>
+        </div>
+        <TaskSubtasksBlock
+          taskId={task.id}
+          sessionId={inspectingId}
+          subtasks={task.subtasks}
+          enableSubtaskTimer={!isInspecting && !isDone}
+          activeSubtaskTimerId={task.activeSubtaskTimerId}
+          allowAddSubtasks={!isDone}
+          subtasksReadOnly={isDone}
+          t={t}
+          post={post}
+        />
+      </div>
+    ) : null}
+    </div>
+
+
+      <DashboardConfirmModal
+        open={finishOpenSubtasksWarnOpen}
+        title={t.finishTaskOpenSubtasksWarnTitle}
+        message={t.finishTaskOpenSubtasksWarnBody}
+        cancelLabel={t.dialogCancelBtn}
+        confirmLabel={t.finishTaskBtn}
+        dismissCheckbox={{
+          label: t.sessionArchiveDontShowAgain,
+          checked: dontRemindOpenSubtasksFinish,
+          onChange: setDontRemindOpenSubtasksFinish,
+        }}
+        onCancel={() => {
+          setFinishOpenSubtasksWarnOpen(false);
+          setDontRemindOpenSubtasksFinish(false);
+        }}
+        onConfirm={() => {
+          if (dontRemindOpenSubtasksFinish) {
+            persistFinishSubtasksWarnDismissed();
+          }
+          setFinishOpenSubtasksWarnOpen(false);
+          runFinishTask();
+        }}
+      />
+    </>
+  );
+}