@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/TaskFocusPanel.tsx

@@ -0,0 +1,1261 @@
+"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 { postKronosysAction } from "@/lib/kronosysApi";
+import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import {
+  buildStartTaskFromDraft,
+  formatProjectDisplay,
+  mergeTagsForDisplay,
+  parseTaskWithAutoTags,
+  removeProjectFromDraft,
+  removeSavedTagFromDraft,
+} from "@/lib/taskParsing";
+import { TagPills } from "./TagPills";
+import {
+  PROJECT_CHIP_APPLIED_CLASS,
+  TASK_FOCUS_LAUNCHER_INPUT_ROW_CLASS,
+} from "./taskFieldStyles";
+import { KronosysDatetimePopoverField } from "./KronosysDatetimePopoverField";
+import { TaskSessionLiveCard } from "./TaskSessionLiveCard";
+import { IssuePickerModal, type RemoteIssue } from "./IssuePickerModal";
+import {
+  DashboardAlertModal,
+  DashboardConfirmModal,
+  DashboardTriActionModal,
+} from "./DashboardSimpleModal";
+import {
+  tbVioletIcon,
+  tbVioletToggleOff,
+  tbVioletToggleOn,
+} from "@/lib/translucentButtonClasses";
+import { InlineMetricHelpTrigger } from "./InlineMetricHelpTrigger";
+import {
+  readConcurrentTaskStartPreference,
+  writeConcurrentTaskStartPreference,
+  type ConcurrentTaskStartPreference,
+} from "@/lib/concurrentTaskStartPreference";
+import { mergeLiveSessionIntoHistory } from "@/lib/sessionListMerge";
+import { formatSessionEndReasonLine } from "@/lib/sessionEndReason";
+import type { SessionListEntry } from "@/components/dashboard/SessionListPanel";
+import { SessionEndReasonEditor } from "@/components/dashboard/SessionEndReasonEditor";
+import { useDashboardToast } from "@/components/dashboard/DashboardToastProvider";
+
+type TaskEntryMode = "realtime" | "past";
+
+type TaskRow = {
+  id: string;
+  name: string;
+  durationMs: number;
+  isDone: boolean;
+  startTime?: string;
+  endTime?: string;
+  tags?: string[];
+  project?: string | null;
+  subtasks?: Array<{
+    id: string;
+    title: string;
+    done: boolean;
+    durationMs?: number;
+  }>;
+  manualTaskTimerPaused?: boolean;
+  activeSubtaskTimerId?: string;
+};
+
+type SessionShape = {
+  sessionId?: string;
+  sessionName?: string;
+  isPaused?: boolean;
+  /** Présent et non vide lorsque la session a été clôturée (instantané d’historique). */
+  endAt?: string | null;
+  sessionEndReasonKind?: string;
+  sessionEndReasonNote?: string;
+  activeTasks?: TaskRow[];
+  activeTask?: TaskRow | null;
+  tasks?: TaskRow[];
+};
+
+function runningTasksFromSession(
+  session: SessionShape | null | undefined,
+): TaskRow[] {
+  if (!session) {
+    return [];
+  }
+  const raw =
+    Array.isArray(session.activeTasks) && session.activeTasks.length > 0
+      ? session.activeTasks
+      : session.activeTask
+        ? [session.activeTask]
+        : [];
+  return raw.filter((t) => t && !t.isDone && !t.manualTaskTimerPaused);
+}
+
+type LiveSessionShape = SessionShape & {
+  kronoFocus?: { status?: "idle" | "running" | "paused" };
+};
+
+export function TaskFocusPanel({
+  payload,
+  lang,
+  t,
+  refresh,
+  urlFocusedSessionId,
+  liveSessionId,
+  displayTimeZone,
+  use24HourClock,
+  onResumeActiveSession,
+  showKronoFocusInTaskOps = true,
+  allowTaskStartTimeEdit = true,
+  allowTaskEndTimeEdit = true,
+}: {
+  payload: KronosysUpdatePayload;
+  lang: Lang;
+  t: DashboardStrings;
+  refresh: () => Promise<boolean | void>;
+  /** Onglet `?session=` : id affiché (live ou archive), prioritaire sur `inspectingSessionId`. */
+  urlFocusedSessionId?: string;
+  liveSessionId?: string;
+  displayTimeZone: string;
+  use24HourClock: boolean;
+  /** Retour à la session active (réinitialise l’URL si `?session=`). */
+  onResumeActiveSession?: () => Promise<void>;
+  /** Option `dashboardShowKronoFocusInTaskOps` : boutons Krono Focus dans la colonne tâches. */
+  showKronoFocusInTaskOps?: boolean;
+  /** Option `dashboardAllowTaskStartTimeEdit` : correction de l'heure de début des tâches. */
+  allowTaskStartTimeEdit?: boolean;
+  /** Option `dashboardAllowTaskEndTimeEdit` : correction de l'heure de fin des tâches terminées. */
+  allowTaskEndTimeEdit?: boolean;
+}) {
+  const live = payload.current as SessionShape | undefined;
+  const history = useMemo(
+    () =>
+      mergeLiveSessionIntoHistory(
+        (payload.history || []) as SessionListEntry[],
+        live,
+      ) as SessionShape[],
+    [payload.history, live],
+  );
+  const historyArchivedList = (payload.historyArchived || []) as SessionShape[];
+  const payloadInspect =
+    (payload.inspectingSessionId as string | null | undefined) ?? null;
+  const liveId = liveSessionId ?? live?.sessionId;
+  const hasLiveSession = typeof liveId === "string" && liveId.length > 0;
+
+  let archiveColumnId: string | null = null;
+  if (urlFocusedSessionId !== undefined) {
+    if (urlFocusedSessionId && urlFocusedSessionId !== liveId) {
+      archiveColumnId = urlFocusedSessionId;
+    }
+  } else if (payloadInspect) {
+    archiveColumnId = payloadInspect;
+  }
+
+  const knownTags = (payload.knownTags || []) as string[];
+  const knownProjects = (payload.knownProjects || []) as string[];
+  const viewingSession = archiveColumnId
+    ? (history.find((s) => s.sessionId === archiveColumnId) ??
+      historyArchivedList.find((s) => s.sessionId === archiveColumnId) ??
+      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;
+  /** 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 taskSessionForBuckets = viewingSession ?? live;
+  /** Tâches live au minuteur (hors archive). */
+  const runningTasks = !isInspecting ? runningTasksFromSession(live) : [];
+  const runningTaskIds = useMemo(
+    () => new Set(runningTasks.map((t) => String(t.id))),
+    [runningTasks],
+  );
+  /**
+   * `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 ».
+   */
+  const mergedTasksForBuckets = useMemo(() => {
+    const sess = taskSessionForBuckets;
+    if (!sess) {
+      return [] as TaskRow[];
+    }
+    const map = new Map<string, TaskRow>();
+    const base = Array.isArray(sess.tasks) ? (sess.tasks as TaskRow[]) : [];
+    for (const t of base) {
+      if (t?.id) {
+        map.set(String(t.id), t);
+      }
+    }
+    const stack: TaskRow[] =
+      Array.isArray(sess.activeTasks) && sess.activeTasks.length > 0
+        ? [...(sess.activeTasks as TaskRow[])]
+        : sess.activeTask
+          ? [sess.activeTask as TaskRow]
+          : [];
+    for (const t of stack) {
+      if (t?.id) {
+        map.set(String(t.id), t);
+      }
+    }
+    return [...map.values()];
+  }, [taskSessionForBuckets]);
+
+  /**
+   * Bandeau TRACKING : uniquement si la collecte n’est pas en pause session
+   * (sinon le minuteur de suivi n’est pas actif, mais l’interpolation locale faisait défiler l’horloge).
+   */
+  const trackingActive =
+    !isInspecting && runningTasks.length > 0 && !isPauseState;
+
+  const { pausedTasks, completedTasks } = useMemo(() => {
+    const paused: TaskRow[] = [];
+    const completed: TaskRow[] = [];
+    for (const t of mergedTasksForBuckets) {
+      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]);
+  const pausedTasksDisplay = [...pausedTasks].reverse();
+  const completedTasksDisplay = [...completedTasks].reverse();
+  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;
+
+  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 [taskEntryMode, setTaskEntryMode] = useState<TaskEntryMode>("realtime");
+  const [pastStartLocal, setPastStartLocal] = useState("");
+  const [pastEndLocal, setPastEndLocal] = useState("");
+  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 [concurrentStartModalOpen, setConcurrentStartModalOpen] =
+    useState(false);
+  const [rememberConcurrentStart, setRememberConcurrentStart] = useState(false);
+  const rememberConcurrentRef = useRef(false);
+  const pendingLiveStartRef = useRef<{
+    name: string;
+    tags: string[];
+    project?: string;
+    startKronoFocus: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    rememberConcurrentRef.current = rememberConcurrentStart;
+  }, [rememberConcurrentStart]);
+
+  useEffect(() => {
+    if (!showKronoFocusInTaskOps) {
+      setStartKronoFocusWithTask(false);
+    }
+  }, [showKronoFocusInTaskOps]);
+
+  const post = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const { pushToast } = useDashboardToast();
+
+  const startKronoFocusFromTask = useCallback(async () => {
+    const timer = (live as LiveSessionShape | undefined)?.kronoFocus;
+    const st = timer?.status;
+    if (st === "running" || st === "paused") {
+      setKronoFocusResetConfirmOpen(true);
+      return;
+    }
+    await post({ type: "startKronoFocus", linkToActiveTask: true });
+  }, [live, post]);
+
+  const executeKronoFocusResetAndStart = useCallback(async () => {
+    setKronoFocusResetConfirmOpen(false);
+    await post({ type: "resetKronoFocus" });
+    await post({ type: "startKronoFocus", linkToActiveTask: true });
+  }, [post]);
+
+  const titleParsed = parseTaskWithAutoTags(taskInput);
+  const mergedDraftTags = mergeTagsForDisplay(taskInput, []);
+  const mergedDraftProject = titleParsed.project;
+
+  const handleRemoveDraftTag = useCallback((tag: string) => {
+    setTaskInput((prev) => {
+      const regex = new RegExp(`(^|\\s)#${tag}(?=\\s|$)`, "gi");
+      return prev.replace(regex, " ").replace(/\s+/g, " ").trim();
+    });
+  }, []);
+
+  const handleRemoveDraftProject = useCallback(() => {
+    setTaskInput((prev) => {
+      const regex = /(^|\s)@[\w.-]+(?=\s|$)/gi;
+      return prev.replace(regex, " ").replace(/\s+/g, " ").trim();
+    });
+  }, []);
+
+  const confirmDeleteTask = useCallback((taskId: string) => {
+    setDeleteTaskConfirmId(taskId);
+  }, []);
+
+  const clearTaskEntryForm = useCallback(() => {
+    setTaskInput("");
+    setStartKronoFocusWithTask(false);
+  }, []);
+
+  const resolveConcurrentAndStartLive = useCallback(
+    async (mode: ConcurrentTaskStartPreference, persistPreference: boolean) => {
+      const draft = pendingLiveStartRef.current;
+      if (!draft || !live) {
+        setConcurrentStartModalOpen(false);
+        return;
+      }
+      if (persistPreference) {
+        writeConcurrentTaskStartPreference(mode);
+      }
+      const running = runningTasksFromSession(live);
+      try {
+        if (mode !== "parallel") {
+          for (const t of running) {
+            if (mode === "pause") {
+              await postKronosysAction({
+                type: "setTaskTimerPaused",
+                taskId: t.id,
+                paused: true,
+              });
+            } else {
+              await postKronosysAction({
+                type: "finishTask",
+                taskId: t.id,
+                shouldCommit: false,
+              });
+            }
+          }
+        }
+        await post({
+          type: "startTask",
+          name: draft.name,
+          startKronoFocus: draft.startKronoFocus,
+          tags: draft.tags,
+          ...(draft.project ? { project: draft.project } : {}),
+        });
+      } catch (error) {
+        pushToast(
+          typeof error === "string"
+            ? error
+            : error instanceof Error
+              ? error.message
+              : "Failed to resolve concurrent tasks",
+        );
+        pendingLiveStartRef.current = null;
+        setConcurrentStartModalOpen(false);
+        setRememberConcurrentStart(false);
+        return;
+      }
+      pendingLiveStartRef.current = null;
+      setConcurrentStartModalOpen(false);
+      setRememberConcurrentStart(false);
+      clearTaskEntryForm();
+    },
+    [live, post, clearTaskEntryForm, pushToast],
+  );
+
+  const submitStartTask = useCallback(async () => {
+    const hasDraft = taskInput.trim().length > 0;
+    if (!hasDraft) {
+      return;
+    }
+    const payloadStart = buildStartTaskFromDraft(taskInput, [], undefined);
+    if (
+      !payloadStart.name.trim() &&
+      payloadStart.tags.length === 0 &&
+      !payloadStart.project
+    ) {
+      return;
+    }
+    const body = {
+      name: payloadStart.name,
+      tags: payloadStart.tags,
+      ...(payloadStart.project ? { project: payloadStart.project } : {}),
+      startKronoFocus: showKronoFocusInTaskOps && startKronoFocusWithTask,
+    };
+    if (!isInspecting && !hasLiveSession) {
+      pushToast(t.taskStartAutoSessionToast);
+      await post({ type: "newSession", sessionScope: undefined });
+      await post({
+        type: "startTask",
+        name: body.name,
+        startKronoFocus: body.startKronoFocus,
+        tags: body.tags,
+        ...(body.project ? { project: body.project } : {}),
+      });
+      clearTaskEntryForm();
+      return;
+    }
+    if (!isInspecting && hasLiveSession && live) {
+      const running = runningTasksFromSession(live);
+      if (running.length > 0) {
+        const pref = readConcurrentTaskStartPreference();
+        pendingLiveStartRef.current = body;
+        if (pref === "pause") {
+          void resolveConcurrentAndStartLive("pause", false);
+          return;
+        }
+        if (pref === "finish") {
+          void resolveConcurrentAndStartLive("finish", false);
+          return;
+        }
+        if (pref === "parallel") {
+          void resolveConcurrentAndStartLive("parallel", false);
+          return;
+        }
+        setRememberConcurrentStart(false);
+        setConcurrentStartModalOpen(true);
+        return;
+      }
+    }
+    await post({
+      type: "startTask",
+      name: body.name,
+      startKronoFocus: body.startKronoFocus,
+      tags: body.tags,
+      ...(body.project ? { project: body.project } : {}),
+    });
+    clearTaskEntryForm();
+  }, [
+    clearTaskEntryForm,
+    hasLiveSession,
+    isInspecting,
+    live,
+    post,
+    pushToast,
+    resolveConcurrentAndStartLive,
+    showKronoFocusInTaskOps,
+    startKronoFocusWithTask,
+    t.taskStartAutoSessionToast,
+    taskInput,
+  ]);
+
+  const cancelConcurrentStartModal = useCallback(() => {
+    pendingLiveStartRef.current = null;
+    setRememberConcurrentStart(false);
+    setConcurrentStartModalOpen(false);
+  }, []);
+
+  const retroTargetSessionId = inspectingId ?? live?.sessionId;
+
+  const submitAddHistoricalTask = useCallback(() => {
+    if (!retroTargetSessionId) {
+      return;
+    }
+    const nameRaw = taskInput;
+    const hasDraft = nameRaw.trim().length > 0;
+    if (!hasDraft) {
+      return;
+    }
+    const startMs = pastStartLocal.trim()
+      ? new Date(pastStartLocal).getTime()
+      : NaN;
+    const endMs = pastEndLocal.trim() ? new Date(pastEndLocal).getTime() : NaN;
+    if (
+      !Number.isFinite(startMs) ||
+      !Number.isFinite(endMs) ||
+      endMs <= startMs
+    ) {
+      setAlertMessage(t.archiveTaskDatetimeRangeInvalid);
+      return;
+    }
+    const durationMs = Math.round(endMs - startMs);
+    const payloadStart = buildStartTaskFromDraft(nameRaw, [], undefined);
+    if (
+      !payloadStart.name.trim() &&
+      payloadStart.tags.length === 0 &&
+      !payloadStart.project
+    ) {
+      return;
+    }
+    void post({
+      type: "addHistoricalTask",
+      sessionId: retroTargetSessionId,
+      name: payloadStart.name,
+      tags: payloadStart.tags,
+      durationMs,
+      startTime: new Date(startMs).toISOString(),
+      endTime: new Date(endMs).toISOString(),
+      ...(payloadStart.project ? { project: payloadStart.project } : {}),
+    });
+    setTaskInput("");
+    setPastStartLocal("");
+    setPastEndLocal("");
+  }, [
+    pastEndLocal,
+    pastStartLocal,
+    post,
+    retroTargetSessionId,
+    t.archiveTaskDatetimeRangeInvalid,
+    t.archiveTaskDatetimeRangeInvalid,
+    taskInput,
+  ]);
+
+  const pastRangeValid =
+    pastStartLocal.trim() !== "" &&
+    pastEndLocal.trim() !== "" &&
+    Number.isFinite(new Date(pastStartLocal).getTime()) &&
+    Number.isFinite(new Date(pastEndLocal).getTime()) &&
+    new Date(pastEndLocal).getTime() > new Date(pastStartLocal).getTime();
+
+  const canSubmitPast = !!taskInput.trim() && pastRangeValid;
+
+  /** Début + fin sur une seule ligne (scroll horizontal si besoin), contenu centré dans la zone. */
+  const pastDateTimeRow = (
+    <div className="flex min-w-0 max-w-full flex-nowrap items-center justify-center gap-x-2 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:thin] sm:gap-x-3 [&::-webkit-scrollbar]:h-1">
+      <label className="flex shrink-0 items-center gap-1.5">
+        <span className="whitespace-nowrap text-[0.6rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+          {t.archiveTaskStartLabel}
+        </span>
+        <KronosysDatetimePopoverField
+          value={pastStartLocal}
+          onChange={setPastStartLocal}
+          aria-label={t.archiveTaskStartLabel}
+          lang={lang}
+          t={t}
+        />
+      </label>
+      <label className="flex shrink-0 items-center gap-1.5">
+        <span className="whitespace-nowrap text-[0.6rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+          {t.archiveTaskEndLabel}
+        </span>
+        <KronosysDatetimePopoverField
+          value={pastEndLocal}
+          onChange={setPastEndLocal}
+          aria-label={t.archiveTaskEndLabel}
+          lang={lang}
+          t={t}
+        />
+      </label>
+    </div>
+  );
+
+  const pastDatetimeRowInspecting = (
+    <div className="flex w-full min-w-0 justify-center">
+      <div className="kronosys-past-datetime-blink-twice min-w-0 max-w-full">
+        {pastDateTimeRow}
+      </div>
+    </div>
+  );
+
+  const taskFormTagSection =
+    mergedDraftTags.length > 0 ? (
+      <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">
+        <TagPills
+          variant="applied"
+          className="flex min-w-0 max-w-full flex-wrap items-baseline gap-x-1 gap-y-0.5"
+          differentiateProjectScopedTags
+          tags={mergedDraftTags}
+          onRemove={handleRemoveDraftTag}
+          defaultTagBucketLabel={t.taskTagDefaultBucket}
+        />
+      </div>
+    ) : null;
+
+  const resumeLiveSession = async () => {
+    if (onResumeActiveSession) {
+      await onResumeActiveSession();
+      return;
+    }
+    await post({ type: "inspectSession", sessionId: null });
+    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
+    : "realtime";
+
+  return (
+    <section id="kronosys-task-focus" className="scroll-mt-24">
+      {isInspecting && (
+        <section
+          className="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.historyInspectBannerAria}
+        >
+          <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">
+                {historyBannerTitle}
+              </strong>
+              <div className="mt-1 break-all text-xs font-normal text-amber-300/75">
+                {t.inspectingLabel} {viewingSessionLabel}
+              </div>
+            </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 resumeLiveSession()}
+          >
+            {t.resumeBtn}
+          </button>
+        </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}
+              />
+            </div>
+          ) : null}
+        </div>
+      ) : 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" ? (
+                    <div className="kronosys-past-datetime-blink-twice min-w-0 max-w-full">
+                      {pastDateTimeRow}
+                    </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}
+                  {!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()}
+                      >
+                        <Ticket size={15} />
+                      </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)]"
+                    />
+                  </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}
+                      <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>
+                  {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)}
+                      >
+                        <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>
+                    </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
+                      }
+                      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
+                      }
+                    />
+                    <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}
+                          <button
+                            type="button"
+                            className={tbVioletIcon}
+                            disabled={!taskInput.trim()}
+                            title={t.startTaskBtn}
+                            aria-label={t.startTaskBtn}
+                            onClick={() => void submitStartTask()}
+                          >
+                            <Play
+                              size={22}
+                              className="ml-0.5"
+                              fill="currentColor"
+                              aria-hidden
+                            />
+                          </button>
+                        </>
+                      ) : (
+                        <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>
+                  </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>
+              </div>
+              <div className="divide-y divide-zinc-200/80 dark:divide-zinc-700/80">
+                {runningTasks.map((task) => (
+                  <TaskSessionLiveCard
+                    key={task.id}
+                    variant="plain"
+                    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="pause"
+                    onPausePlay={() =>
+                      void post({
+                        type: "setTaskTimerPaused",
+                        taskId: task.id,
+                        paused: true,
+                      })
+                    }
+                    anchorId={`kronosys-active-task-${task.id}`}
+                    allowTaskStartTimeEdit={allowTaskStartTimeEdit}
+                    allowTaskEndTimeEdit={allowTaskEndTimeEdit}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </>
+      </div>
+
+      {showTaskListBuckets ? (
+        <div className="mt-8 space-y-10">
+          {showSessionTaskCountBadge ? (
+            <div className="flex justify-end">
+              <span className="rounded-full border border-zinc-600 px-2 py-0.5 text-xs text-zinc-400">
+                {mergedTasksForBuckets.length}
+              </span>
+            </div>
+          ) : null}
+
+          {showPausedTaskSection ? (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {t.tasksPausedHeading}
+                </h4>
+                <span className="rounded-full border border-zinc-600/80 px-2 py-0.5 text-[0.65rem] text-zinc-500">
+                  {pausedTasksDisplay.length}
+                </span>
+              </div>
+              <div className="space-y-3">
+                {pausedTasksDisplay.map((task) => (
+                  <TaskSessionLiveCard
+                    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}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {showCompletedTaskSection ? (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {t.tasksCompletedHeading}
+                </h4>
+                <span className="rounded-full border border-zinc-600/80 px-2 py-0.5 text-[0.65rem] text-zinc-500">
+                  {completedTasksDisplay.length}
+                </span>
+              </div>
+              <div className="space-y-3">
+                {completedTasksDisplay.map((task) => (
+                  <TaskSessionLiveCard
+                    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}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </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 ?? ""}
+        okLabel={t.dialogOkBtn}
+        onClose={() => setAlertMessage(null)}
+      />
+      <DashboardConfirmModal
+        open={kronoFocusResetConfirmOpen}
+        message={t.startKronoFocusFromTaskConfirm}
+        cancelLabel={t.dialogCancelBtn}
+        confirmLabel={t.dialogConfirmBtn}
+        onCancel={() => setKronoFocusResetConfirmOpen(false)}
+        onConfirm={executeKronoFocusResetAndStart}
+      />
+      <DashboardConfirmModal
+        open={deleteTaskConfirmId !== null}
+        message={t.taskDeleteConfirm}
+        cancelLabel={t.dialogCancelBtn}
+        confirmLabel={t.dialogConfirmBtn}
+        confirmVariant="danger"
+        onCancel={() => setDeleteTaskConfirmId(null)}
+        onConfirm={() => {
+          const id = deleteTaskConfirmId;
+          setDeleteTaskConfirmId(null);
+          if (id) {
+            void post({
+              type: "deleteTask",
+              taskId: id,
+              sessionId: inspectingId,
+            });
+          }
+        }}
+      />
+      <DashboardTriActionModal
+        open={concurrentStartModalOpen}
+        title={t.taskConcurrentTrackingConflictTitle}
+        message={t.taskConcurrentTrackingConflictMessage}
+        dismissLabel={t.dialogCancelBtn}
+        tertiaryLabel={t.taskConcurrentTrackingConflictParallelBtn}
+        secondaryLabel={t.taskConcurrentTrackingConflictPauseBtn}
+        primaryLabel={t.taskConcurrentTrackingConflictFinishBtn}
+        primaryVariant="danger"
+        dismissCheckbox={{
+          label: t.taskConcurrentTrackingDontShowAgain,
+          checked: rememberConcurrentStart,
+          onChange: setRememberConcurrentStart,
+        }}
+        onDismiss={cancelConcurrentStartModal}
+        onTertiary={() =>
+          void resolveConcurrentAndStartLive(
+            "parallel",
+            rememberConcurrentRef.current,
+          )
+        }
+        onSecondary={() =>
+          void resolveConcurrentAndStartLive(
+            "pause",
+            rememberConcurrentRef.current,
+          )
+        }
+        onPrimary={() =>
+          void resolveConcurrentAndStartLive(
+            "finish",
+            rememberConcurrentRef.current,
+          )
+        }
+      />
+    </section>
+  );
+}