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

package/app/reporting/page.tsx

@@ -9,6 +9,7 @@ import {
   useMemo,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -18,9 +19,11 @@ import {
 } from "@/lib/kronosysApi";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import {
+  DEFAULT_FALLBACK_TASK_TAG,
   formatDuration,
   formatTagDisplay,
   isFallbackTaskTagKey,
+  parseProjectScopedTag,
   normalizeProjectKey,
   normalizeTagKey,
   readTaskDefaultTagBucketEnabled,
@@ -33,15 +36,23 @@ import {
   aggregateTagTaskMinutesByDayAndWeek,
   buildTagFilterSet,
   mergeSessionsFromPayload,
+  collectTasksDeduped,
+  dayInRange,
+  taskCountsTowardArchivedSessionReporting,
+  taskMatchesTags,
   sortedDayKeys,
+  REPORTING_SESSION_CLOSURE_DISPLAY_ORDER,
   type ReportingTagTimeDayRow,
-  type ReportingTagTimeWeekRow,
 } from "@/lib/reportingAggregate";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import {
   appShellHeaderClassName,
-  appShellHeaderToolRowClassName,
+  appShellHeaderTitleMetaRowClassName,
+  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
+import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
+import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
 import {
   reportingPresetDay,
@@ -62,7 +73,6 @@ import {
   buildTagWeekCalendarRows,
   formatWeekRangeLabel,
   localWeekStartKeyFromDayKey,
-  readWeekStartsOnFromStorage,
   type ReportingWeekStartsOn,
   weekdayDateColumnHeaders,
   writeWeekStartsOnToStorage,
@@ -70,29 +80,85 @@ import {
   type TagWeekCalendarRow,
 } from "@/lib/reportingWeekLayout";
 import { computeReportingNonFinalFlags } from "@/lib/reportingNonFinalIndicators";
-import {
-  buildTagWeekDisplayBlocks,
-  groupTagDayRowsForDisplay,
-} from "@/lib/reportingTagWeekBreakdown";
+import { buildTagWeekDisplayBlocks } from "@/lib/reportingTagWeekBreakdown";
 import { ReportingTour } from "@/components/dashboard/ReportingTour";
 import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
 import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
-import { readDashboardTimeZoneFromCfg } from "@/lib/dashboardTimeZone";
+import {
+  calendarDateKeyInTimeZone,
+  readDashboardTimeZoneFromCfg,
+} from "@/lib/dashboardTimeZone";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
 import {
   isReportingTourCompleted,
   resetReportingTour,
 } from "@/lib/dashboardTourStorage";
+import {
+  TaskSessionLiveCard,
+  type TaskSessionLiveCardTask,
+} from "@/components/dashboard/TaskSessionLiveCard";
+import { useReportingInteractionState } from "@/components/dashboard/useReportingInteractionState";
 
 type LiveShape = { language?: string };
+type ReportingTaskInspectScope = {
+  kind: "tag" | "project";
+  title: string;
+  dayKey?: string;
+  weekStart?: string;
+  tagKey?: string;
+  projectKey?: string;
+  sourceLabel?: string;
+};
+
+type ReportingTaskDetail = {
+  sessionId: string;
+  task: TaskSessionLiveCardTask;
+  pausePlayMode: "pause" | "resume" | null;
+  dayKey: string;
+  weekStart: string | null;
+  tagKeys: string[];
+  projectKey: string;
+};
+
+function taskTagKeysForReporting(
+  tags: string[] | undefined,
+  defaultTagBucketEnabled: boolean,
+): string[] {
+  const keys = (tags ?? [])
+    .map((raw) => normalizeTagKey(String(raw)).toLowerCase())
+    .filter(Boolean);
+  if (keys.length > 0) {
+    return [...new Set(keys)];
+  }
+  return defaultTagBucketEnabled ? [DEFAULT_FALLBACK_TASK_TAG] : [""];
+}
 
 function dayLabel(key: string, undated: string): string {
   return key === UNDATED_KEY ? undated : key;
 }
 
+function weekRangeLabelForSource(
+  weekStart: string,
+  lang: Lang,
+  locale: string,
+): string {
+  const start = new Date(`${weekStart}T00:00:00`);
+  if (Number.isNaN(start.getTime())) {
+    return weekStart;
+  }
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+  const fmt = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+  });
+  const prefix = lang === "fr" ? "Semaine" : "Week";
+  return `${prefix} ${fmt.format(start)} - ${fmt.format(end)}`;
+}
+
 function formatMinutesCell(minutes: number | undefined): string {
   const m = minutes ?? 0;
   return m > 0 ? formatDuration(m) : "—";
@@ -367,46 +433,64 @@ function ReportingContent() {
   const [dateTo, setDateTo] = useState("");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [workspaceSnapBusy, setWorkspaceSnapBusy] = useState(false);
-  const [weekStartsOn, setWeekStartsOn] =
-    useState<ReportingWeekStartsOn>("monday");
-  /** `-1` = afficher la dernière semaine avec données (pas d’éclair incorrect au chargement). */
-  const [chartWeekNavIndex, setChartWeekNavIndex] = useState(-1);
-  /** Clés `semaine:::projet` pour les lignes @projet regroupant plusieurs `projet#code`. */
-  const [tagWeekRollupOpenKeys, setTagWeekRollupOpenKeys] = useState<
-    Set<string>
-  >(() => new Set<string>());
-  const [tagDayRollupOpenKeys, setTagDayRollupOpenKeys] = useState<Set<string>>(
-    () => new Set<string>(),
-  );
-  const [reportingTourOpen, setReportingTourOpen] = useState(false);
-
-  const toggleTagWeekRollup = useCallback((key: string) => {
-    setTagWeekRollupOpenKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      return next;
-    });
-  }, []);
+  const {
+    weekStartsOn,
+    setWeekStartsOn,
+    chartWeekNavIndex,
+    setChartWeekNavIndex,
+    tagWeekRollupOpenKeys,
+    toggleTagWeekRollup,
+    projectWeekTagBreakdownOpenKeys,
+    toggleProjectWeekTagBreakdown,
+    reportingTourOpen,
+    setReportingTourOpen,
+    taskInspectScope,
+    setTaskInspectScope,
+    taskInspectAnchor,
+    setTaskInspectAnchor,
+    taskInspectModalRect,
+    setTaskInspectModalRect,
+    portalReady,
+    taskInspectModalRef,
+  } = useReportingInteractionState<ReportingTaskInspectScope>();
 
-  const toggleTagDayRollup = useCallback((key: string) => {
-    setTagDayRollupOpenKeys((prev) => {
-      const next = new Set(prev);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
+  useEffect(() => {
+    if (!taskInspectScope || !portalReady) {
+      setTaskInspectModalRect(null);
+      return;
+    }
+    const updateRect = () => {
+      const node = taskInspectModalRef.current;
+      if (!node) {
+        return;
       }
-      return next;
-    });
-  }, []);
+      const rect = node.getBoundingClientRect();
+      setTaskInspectModalRect({
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+      });
+    };
+    const raf = globalThis.requestAnimationFrame(updateRect);
+    const onResize = () => updateRect();
+    globalThis.addEventListener("resize", onResize);
+    return () => {
+      globalThis.cancelAnimationFrame(raf);
+      globalThis.removeEventListener("resize", onResize);
+    };
+  }, [portalReady, taskInspectScope]);
 
   useEffect(() => {
-    setWeekStartsOn(readWeekStartsOnFromStorage());
-  }, []);
+    if (!taskInspectScope) {
+      return;
+    }
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [taskInspectScope]);
 
   const persistWeekStartsOn = useCallback((v: ReportingWeekStartsOn) => {
     setWeekStartsOn(v);
@@ -433,6 +517,14 @@ function ReportingContent() {
     [refresh],
   );
 
+  const postReportingTaskAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh();
+    },
+    [refresh],
+  );
+
   const stripReportingTourReplayParam = useCallback(() => {
     if (searchParams.get("tour") !== "replay") {
       return;
@@ -447,6 +539,22 @@ function ReportingContent() {
   const lang: Lang = live?.language === "fr" ? "fr" : "en";
   const t = reportingStrings(lang);
   const dt = dashboardStrings(lang);
+  const reportingClosureKindLabels = useMemo(
+    () => ({
+      planned: dt.sessionEndReasonPlanned,
+      early: dt.sessionEndReasonEarly,
+      overrun: dt.sessionEndReasonOverrun,
+      other: dt.sessionEndReasonOther,
+      unspecified: t.closureBreakdownUnspecified,
+    }),
+    [
+      dt.sessionEndReasonPlanned,
+      dt.sessionEndReasonEarly,
+      dt.sessionEndReasonOverrun,
+      dt.sessionEndReasonOther,
+      t.closureBreakdownUnspecified,
+    ],
+  );
   const handleManualRefresh = useCallback(async () => {
     return await refresh({ routerInvalidate: true });
   }, [refresh]);
@@ -469,6 +577,15 @@ function ReportingContent() {
       (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }),
     );
   }, [payload?.knownTags]);
+  const knownProjects = useMemo(() => {
+    const raw = payload?.knownProjects;
+    if (!Array.isArray(raw)) {
+      return [] as string[];
+    }
+    return [...new Set(raw.map((x) => String(x)).filter(Boolean))].sort(
+      (a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }),
+    );
+  }, [payload?.knownProjects]);
 
   const taskDefaultTagBucketEnabled = useMemo(
     () => readTaskDefaultTagBucketEnabled(payload?.cfg),
@@ -476,46 +593,67 @@ function ReportingContent() {
   );
 
   const reportTimeZone = useMemo(
-    () => readDashboardTimeZoneFromCfg(payload?.cfg as Record<string, unknown> | undefined),
-    [payload?.cfg]
+    () =>
+      readDashboardTimeZoneFromCfg(
+        payload?.cfg as Record<string, unknown> | undefined,
+      ),
+    [payload?.cfg],
   );
 
   const tagSet = useMemo(() => buildTagFilterSet(selectedTags), [selectedTags]);
+  const mergedSessions = useMemo(
+    () => (payload ? mergeSessionsFromPayload(payload) : []),
+    [payload],
+  );
 
   const reportingFiltersActive = useMemo(
     () => Boolean(dateFrom.trim() || dateTo.trim() || selectedTags.length > 0),
     [dateFrom, dateTo, selectedTags],
   );
+  const dateFromFilter = dateFrom.trim() || null;
+  const dateToFilter = dateTo.trim() || null;
 
   const agg = useMemo(() => {
-    if (!payload) {
+    if (mergedSessions.length === 0) {
       return null;
     }
-    const sessions = mergeSessionsFromPayload(payload);
     return aggregateReporting(
-      sessions,
+      mergedSessions,
       tagSet,
-      dateFrom.trim() || null,
-      dateTo.trim() || null,
+      dateFromFilter,
+      dateToFilter,
       reportTimeZone,
       taskDefaultTagBucketEnabled,
     );
-  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+  }, [
+    mergedSessions,
+    tagSet,
+    dateFromFilter,
+    dateToFilter,
+    reportTimeZone,
+    taskDefaultTagBucketEnabled,
+  ]);
 
   const archivedExcludedTaskMinutes = useMemo(() => {
-    if (!payload) {
+    if (mergedSessions.length === 0) {
       return 0;
     }
-    const sessions = mergeSessionsFromPayload(payload);
     return aggregateArchivedExcludedTaskMinutes(
-      sessions,
+      mergedSessions,
       tagSet,
-      dateFrom.trim() || null,
-      dateTo.trim() || null,
+      dateFromFilter,
+      dateToFilter,
       reportTimeZone,
       taskDefaultTagBucketEnabled,
     );
-  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+  }, [
+    mergedSessions,
+    tagSet,
+    dateFromFilter,
+    dateToFilter,
+    reportTimeZone,
+    taskDefaultTagBucketEnabled,
+  ]);
 
   const reportingNonFinal = useMemo(
     () =>
@@ -558,29 +696,26 @@ function ReportingContent() {
     [dayKeys],
   );
 
-  const tagTimeSplit = useMemo((): {
-    byDay: ReportingTagTimeDayRow[];
-    byWeek: ReportingTagTimeWeekRow[];
-  } => {
-    if (!payload) {
-      return { byDay: [], byWeek: [] };
+  const tagTimeSplit = useMemo((): { byDay: ReportingTagTimeDayRow[] } => {
+    if (mergedSessions.length === 0) {
+      return { byDay: [] };
     }
-    const sessions = mergeSessionsFromPayload(payload);
-    return aggregateTagTaskMinutesByDayAndWeek(
-      sessions,
+    const { byDay } = aggregateTagTaskMinutesByDayAndWeek(
+      mergedSessions,
       tagSet,
-      dateFrom.trim() || null,
-      dateTo.trim() || null,
+      dateFromFilter,
+      dateToFilter,
       reportTimeZone,
       weekStartsOn,
       t.tagTimeUntagged,
       taskDefaultTagBucketEnabled,
     );
+    return { byDay };
   }, [
-    payload,
+    mergedSessions,
     tagSet,
-    dateFrom,
-    dateTo,
+    dateFromFilter,
+    dateToFilter,
     reportTimeZone,
     weekStartsOn,
     t.tagTimeUntagged,
@@ -593,19 +728,25 @@ function ReportingContent() {
   );
 
   const projectTaskMinutesByDay = useMemo(() => {
-    if (!payload) {
+    if (mergedSessions.length === 0) {
       return [];
     }
-    const sessions = mergeSessionsFromPayload(payload);
     return aggregateProjectTaskMinutesByDay(
-      sessions,
+      mergedSessions,
       tagSet,
-      dateFrom.trim() || null,
-      dateTo.trim() || null,
+      dateFromFilter,
+      dateToFilter,
       reportTimeZone,
       taskDefaultTagBucketEnabled,
     );
-  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+  }, [
+    mergedSessions,
+    tagSet,
+    dateFromFilter,
+    dateToFilter,
+    reportTimeZone,
+    taskDefaultTagBucketEnabled,
+  ]);
 
   const projectWeekCalendarRows = useMemo(
     () => buildProjectWeekCalendarRows(projectTaskMinutesByDay, weekStartsOn),
@@ -790,6 +931,38 @@ function ReportingContent() {
     return projectWeekCalendarRows.filter((r) => r.weekStart === ws);
   }, [projectWeekCalendarRows, navigableWeekStarts, chartWeekNavIndexSafe]);
 
+  const projectScopedTagRowsByWeekProject = useMemo(() => {
+    const byWeekProject = new Map<string, TagWeekCalendarRow[]>();
+    for (const row of tagWeekCalendarRowsVisible) {
+      if (isFallbackTaskTagKey(row.tagKey)) {
+        continue;
+      }
+      const scoped = parseProjectScopedTag(row.tagKey);
+      if (!scoped) {
+        continue;
+      }
+      const projectKeyLower = normalizeProjectKey(
+        scoped.projectKey,
+      ).toLowerCase();
+      if (!projectKeyLower) {
+        continue;
+      }
+      const bucketKey = `${row.weekStart}:::${projectKeyLower}`;
+      const list = byWeekProject.get(bucketKey) ?? [];
+      list.push(row);
+      byWeekProject.set(bucketKey, list);
+    }
+    for (const [bucketKey, rows] of byWeekProject) {
+      byWeekProject.set(
+        bucketKey,
+        [...rows].sort((a, b) =>
+          normalizeTagKey(a.tagKey).localeCompare(normalizeTagKey(b.tagKey)),
+        ),
+      );
+    }
+    return byWeekProject;
+  }, [tagWeekCalendarRowsVisible]);
+
   const projectCalendarWeekGroups = useMemo(() => {
     const byWeek = new Map<string, ProjectWeekCalendarRow[]>();
     for (const r of projectWeekCalendarRowsVisible) {
@@ -812,6 +985,133 @@ function ReportingContent() {
     });
   }, [projectWeekCalendarRowsVisible]);
 
+  const reportingTaskDetails = useMemo(() => {
+    const list: ReportingTaskDetail[] = [];
+    const unbounded = !dateFromFilter && !dateToFilter;
+    for (const s of mergedSessions) {
+      const sessionId =
+        typeof s.sessionId === "string" ? s.sessionId.trim() : "";
+      if (!sessionId) {
+        continue;
+      }
+      const allTasks = collectTasksDeduped(s);
+      const matching = allTasks.filter((task) =>
+        taskMatchesTags(task, tagSet, taskDefaultTagBucketEnabled),
+      );
+      if (tagSet.size > 0 && matching.length === 0) {
+        continue;
+      }
+      for (const task of matching) {
+        if (
+          !taskCountsTowardArchivedSessionReporting(task) &&
+          s.archived === true
+        ) {
+          continue;
+        }
+        const taskDayRaw = calendarDateKeyInTimeZone(
+          task.endTime ?? task.startTime,
+          reportTimeZone,
+        );
+        if (
+          !unbounded &&
+          !dayInRange(taskDayRaw, dateFromFilter, dateToFilter)
+        ) {
+          continue;
+        }
+        const dayKey = taskDayRaw ?? (unbounded ? UNDATED_KEY : null);
+        if (!dayKey) {
+          continue;
+        }
+        const minutes = (task.durationMs ?? 0) / 60000;
+        if (minutes <= 0) {
+          continue;
+        }
+        const projectRaw =
+          typeof task.project === "string" ? task.project.trim() : "";
+        const projectKey = projectRaw
+          ? normalizeProjectKey(projectRaw).toLowerCase()
+          : "";
+        const weekStart =
+          dayKey !== UNDATED_KEY
+            ? localWeekStartKeyFromDayKey(dayKey, weekStartsOn)
+            : null;
+        const taskRecord = task as Record<string, unknown>;
+        const rawTaskName =
+          typeof taskRecord.name === "string" ? taskRecord.name.trim() : "";
+        const taskName =
+          rawTaskName || (lang === "fr" ? "Tâche sans titre" : "Untitled task");
+        list.push({
+          sessionId,
+          pausePlayMode:
+            task.isDone === true
+              ? null
+              : task.manualTaskTimerPaused === true
+              ? "resume"
+              : "pause",
+          dayKey,
+          weekStart,
+          projectKey,
+          tagKeys: taskTagKeysForReporting(
+            task.tags,
+            taskDefaultTagBucketEnabled,
+          ),
+          task: {
+            id: String(task.id ?? `${sessionId}-${dayKey}-${list.length}`),
+            name: taskName,
+            durationMs: Math.max(0, Number(task.durationMs ?? 0)),
+            isDone: task.isDone === true,
+            startTime: task.startTime,
+            endTime: task.endTime,
+            tags: task.tags ?? [],
+            project: task.project ?? null,
+          },
+        });
+      }
+    }
+    return list;
+  }, [
+    dateFromFilter,
+    dateToFilter,
+    lang,
+    mergedSessions,
+    reportTimeZone,
+    tagSet,
+    taskDefaultTagBucketEnabled,
+    weekStartsOn,
+  ]);
+
+  const taskInspectList = useMemo(() => {
+    if (!taskInspectScope) {
+      return [];
+    }
+    return reportingTaskDetails.filter((entry) => {
+      if (taskInspectScope.dayKey && entry.dayKey !== taskInspectScope.dayKey) {
+        return false;
+      }
+      if (
+        taskInspectScope.weekStart &&
+        entry.weekStart !== taskInspectScope.weekStart
+      ) {
+        return false;
+      }
+      if (taskInspectScope.kind === "project") {
+        return entry.projectKey === (taskInspectScope.projectKey ?? "");
+      }
+      return entry.tagKeys.includes(taskInspectScope.tagKey ?? "");
+    });
+  }, [reportingTaskDetails, taskInspectScope]);
+
+  const openTaskInspectScope = useCallback(
+    (
+      scope: ReportingTaskInspectScope,
+      anchor: { x: number; y: number } | null,
+    ) => {
+      setTaskInspectScope(scope);
+      setTaskInspectAnchor(anchor);
+    },
+    [],
+  );
+
   const toggleTag = (tag: string) => {
     const key = normalizeTagKey(tag).toLowerCase();
     setSelectedTags((prev) => {
@@ -823,6 +1123,201 @@ function ReportingContent() {
     });
   };
 
+  const renderReportingDurationButton = (
+    minutes: number,
+    scope: ReportingTaskInspectScope,
+    className: string,
+  ) => {
+    const label = formatDuration(minutes);
+    return (
+      <button
+        type="button"
+        className={`${className} underline decoration-dotted underline-offset-2 hover:text-violet-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60`}
+        onClick={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect();
+          openTaskInspectScope(scope, {
+            x: rect.left + rect.width / 2,
+            y: rect.bottom,
+          });
+        }}
+        title={
+          lang === "fr" ? `Voir les tâches (${label})` : `View tasks (${label})`
+        }
+      >
+        {label}
+      </button>
+    );
+  };
+
+  const taskInspectPlacement = useMemo(() => {
+    if (!taskInspectAnchor) {
+      return null;
+    }
+    const viewportWidth = globalThis.innerWidth;
+    const viewportHeight = globalThis.innerHeight;
+    const preferredPanelWidth = Math.min(
+      760,
+      Math.max(320, viewportWidth - 32),
+    );
+    const estimatedPanelHeight = Math.min(
+      Math.max(300, viewportHeight * 0.72),
+      viewportHeight - 32,
+    );
+    const margin = 16;
+    const offset = 72;
+    const sourceSafeZoneX = 72;
+    const sourceSafeZoneY = 36;
+    const minPanelWidth = 220;
+    const spaceRight = viewportWidth - margin - (taskInspectAnchor.x + offset);
+    const spaceLeft = taskInspectAnchor.x - margin - offset;
+    const placeRight = spaceRight >= spaceLeft;
+    const availableSideSpace = placeRight
+      ? Math.max(0, spaceRight)
+      : Math.max(0, spaceLeft);
+    let panelWidth = Math.min(preferredPanelWidth, availableSideSpace);
+    if (panelWidth < minPanelWidth) {
+      const otherSideSpace = placeRight
+        ? Math.max(0, spaceLeft)
+        : Math.max(0, spaceRight);
+      panelWidth = Math.min(
+        preferredPanelWidth,
+        Math.max(minPanelWidth, otherSideSpace),
+      );
+    }
+    const clampLeft = (value: number) =>
+      Math.max(margin, Math.min(value, viewportWidth - panelWidth - margin));
+    const clampTop = (value: number) =>
+      Math.max(
+        margin,
+        Math.min(value, viewportHeight - estimatedPanelHeight - margin),
+      );
+    const rawLeft = placeRight
+      ? taskInspectAnchor.x + offset
+      : taskInspectAnchor.x - panelWidth - offset;
+    let adjustedLeft = clampLeft(rawLeft);
+    const overlapsSourceX =
+      adjustedLeft <= taskInspectAnchor.x + sourceSafeZoneX &&
+      taskInspectAnchor.x - sourceSafeZoneX <= adjustedLeft + panelWidth;
+    if (overlapsSourceX) {
+      const fallbackLeft = placeRight
+        ? taskInspectAnchor.x - panelWidth - offset
+        : taskInspectAnchor.x + offset;
+      adjustedLeft = clampLeft(fallbackLeft);
+    }
+    const centeredTop = clampTop(
+      taskInspectAnchor.y - estimatedPanelHeight / 2,
+    );
+    const sourceBandTop = taskInspectAnchor.y - sourceSafeZoneY;
+    const sourceBandBottom = taskInspectAnchor.y + sourceSafeZoneY;
+    const candidatesTop = [
+      centeredTop,
+      clampTop(sourceBandBottom + offset),
+      clampTop(sourceBandTop - estimatedPanelHeight - offset),
+    ];
+    const nonOverlapTop = candidatesTop.filter((top) => {
+      const modalTop = top;
+      const modalBottom = top + estimatedPanelHeight;
+      return !(modalTop <= sourceBandBottom && sourceBandTop <= modalBottom);
+    });
+    const pool = nonOverlapTop.length > 0 ? nonOverlapTop : candidatesTop;
+    let adjustedTop = pool[0];
+    let bestTopScore = Number.POSITIVE_INFINITY;
+    for (const top of pool) {
+      const score = Math.abs(top - centeredTop);
+      if (score < bestTopScore) {
+        bestTopScore = score;
+        adjustedTop = top;
+      }
+    }
+    return {
+      left: adjustedLeft,
+      top: adjustedTop,
+      width: panelWidth,
+      height: estimatedPanelHeight,
+    };
+  }, [taskInspectAnchor]);
+  const taskInspectPlacementTop = useMemo(() => {
+    if (!taskInspectPlacement) {
+      return null;
+    }
+    if (!taskInspectModalRect) {
+      return taskInspectPlacement.top;
+    }
+    const viewportHeight = globalThis.innerHeight;
+    const margin = 16;
+    const overflowBottom =
+      taskInspectModalRect.top +
+      taskInspectModalRect.height -
+      (viewportHeight - margin);
+    const overflowTop = margin - taskInspectModalRect.top;
+    let nextTop =
+      taskInspectPlacement.top -
+      Math.max(0, overflowBottom) +
+      Math.max(0, overflowTop);
+    const maxTop = Math.max(
+      margin,
+      viewportHeight - taskInspectModalRect.height - margin,
+    );
+    nextTop = Math.max(margin, Math.min(nextTop, maxTop));
+    return nextTop;
+  }, [taskInspectModalRect, taskInspectPlacement]);
+  const taskInspectConnector = useMemo(() => {
+    if (!taskInspectAnchor || !taskInspectPlacement) {
+      return null;
+    }
+    const modalLeft = taskInspectModalRect?.left ?? taskInspectPlacement.left;
+    const modalTop = taskInspectModalRect?.top ?? taskInspectPlacement.top;
+    const modalWidth =
+      taskInspectModalRect?.width ?? taskInspectPlacement.width;
+    const modalHeight =
+      taskInspectModalRect?.height ?? taskInspectPlacement.height;
+    const modalRight = modalLeft + modalWidth;
+    const modalBottom = modalTop + modalHeight;
+    const inset = 14;
+    const anchors = [
+      // Coins
+      { x: modalLeft + inset, y: modalTop + inset },
+      { x: modalRight - inset, y: modalTop + inset },
+      { x: modalRight - inset, y: modalBottom - inset },
+      { x: modalLeft + inset, y: modalBottom - inset },
+      // Milieux des côtés
+      { x: modalLeft + modalWidth / 2, y: modalTop + inset },
+      { x: modalRight - inset, y: modalTop + modalHeight / 2 },
+      { x: modalLeft + modalWidth / 2, y: modalBottom - inset },
+      { x: modalLeft + inset, y: modalTop + modalHeight / 2 },
+    ];
+    let startX = anchors[0].x;
+    let startY = anchors[0].y;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const anchor of anchors) {
+      const d = Math.hypot(
+        anchor.x - taskInspectAnchor.x,
+        anchor.y - taskInspectAnchor.y,
+      );
+      if (d < bestDistance) {
+        bestDistance = d;
+        startX = anchor.x;
+        startY = anchor.y;
+      }
+    }
+    const dx = startX - taskInspectAnchor.x;
+    const dy = startY - taskInspectAnchor.y;
+    const length = Math.hypot(dx, dy);
+    const sourceGap = 14;
+    const ux = length > 0 ? dx / length : 0;
+    const uy = length > 0 ? dy / length : 0;
+    const lineStartX = taskInspectAnchor.x + ux * sourceGap;
+    const lineStartY = taskInspectAnchor.y + uy * sourceGap;
+    return {
+      startX,
+      startY,
+      lineStartX,
+      lineStartY,
+      length: Math.max(0, length - sourceGap),
+      angleRad: Math.atan2(dy, dx),
+    };
+  }, [taskInspectAnchor, taskInspectModalRect, taskInspectPlacement]);
+
   const headerApiError =
     lang === "fr"
       ? "Impossible de joindre l’API locale Kronosys (127.0.0.1:5566 par défaut). Vérifiez que le serveur tourne."
@@ -870,6 +1365,7 @@ function ReportingContent() {
       return rows;
     }
     rows.push({ id: "report-summary-kpis", label: t.tocSummaryKpis });
+    rows.push({ id: "report-closure-by-kind", label: t.tocClosureBreakdown });
     if (trackCodeMetrics) {
       rows.push({ id: "report-loc-metrics", label: t.tocLocSection });
     }
@@ -894,7 +1390,7 @@ function ReportingContent() {
   return (
     <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
       <header className={appShellHeaderClassName}>
-        <div className={appShellHeaderToolRowClassName}>
+        <div className={appShellHeaderTitleMetaRowClassName}>
           <div className="flex min-w-0 flex-col gap-1">
             <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
               <Link
@@ -916,17 +1412,24 @@ function ReportingContent() {
               <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
             </p>
           </div>
-          <div className="flex flex-wrap items-center gap-1.5">
+          <AppShellHeaderSessionMeta payload={payload} dt={dt} />
+        </div>
+        <div className="flex w-full justify-end">
+          <div className={appShellHeaderToolbarClassName}>
+            <AppShellHeaderWallClock lang={lang} dt={dt} />
+            <AppShellCommandCenterPlaceholder />
             <AppShellRouteNav
               current="reporting"
               labels={{
                 dashboard: t.dashboard,
                 reporting: t.reporting,
                 settings: t.settings,
+                logs: t.logs,
                 guide: t.guide,
               }}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
+              reserveGlobalPauseSlot
             />
             <ThemeToggle lang={lang} />
             <PageRefreshButton
@@ -1365,17 +1868,17 @@ function ReportingContent() {
                       </p>
                     );
                   })()}
-                {archivedExcludedTaskMinutes > 1e-9 ? (
-                  <div
-                    role="status"
-                    className="rounded-lg border border-amber-600/45 bg-amber-950/30 px-3 py-2.5 text-sm leading-relaxed text-amber-100/95 dark:border-amber-500/40"
-                  >
-                    {reportingArchivedExcludedRichText(
-                      t.reportingArchivedExcludedAside,
-                      archivedExcludedTaskMinutes
-                    )}
-                  </div>
-                ) : null}
+                  {archivedExcludedTaskMinutes > 1e-9 ? (
+                    <div
+                      role="status"
+                      className="rounded-lg border border-amber-600/45 bg-amber-950/30 px-3 py-2.5 text-sm leading-relaxed text-amber-100/95 dark:border-amber-500/40"
+                    >
+                      {reportingArchivedExcludedRichText(
+                        t.reportingArchivedExcludedAside,
+                        archivedExcludedTaskMinutes,
+                      )}
+                    </div>
+                  ) : null}
                 </section>
               ) : null}
 
@@ -1584,10 +2087,52 @@ function ReportingContent() {
                         <div className="mt-1 text-2xl font-semibold tabular-nums">
                           {agg.assiduityAverageLateMinutesWhenLate == null
                             ? "—"
-                            : formatDuration(agg.assiduityAverageLateMinutesWhenLate)}
+                            : formatDuration(
+                                agg.assiduityAverageLateMinutesWhenLate,
+                              )}
                         </div>
                       </div>
                     </div>
+                    <div
+                      id="report-closure-by-kind"
+                      className="mt-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4"
+                    >
+                      <div className="mb-3 flex flex-wrap items-center gap-2">
+                        <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                          {t.closureBreakdownTitle}
+                        </h3>
+                        <ReportingFilteredBadge
+                          active={reportingFiltersActive}
+                          label={t.sectionFilteredBadge}
+                          titleText={t.sectionFilteredBadgeTitle}
+                        />
+                        <InlineMetricHelpTrigger
+                          ariaLabel={t.metricHelpClosureBreakdownAria}
+                          body={t.metricHelpClosureBreakdownBody}
+                        />
+                      </div>
+                      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+                        {REPORTING_SESSION_CLOSURE_DISPLAY_ORDER.map(
+                          (closureKey) => {
+                            const count =
+                              agg.sessionCountByClosureKind[closureKey] ?? 0;
+                            return (
+                              <div
+                                key={closureKey}
+                                className="rounded-lg border border-zinc-800/80 bg-zinc-950/40 p-3"
+                              >
+                                <div className="text-xs uppercase text-zinc-500">
+                                  {reportingClosureKindLabels[closureKey]}
+                                </div>
+                                <div className="mt-1 text-xl font-semibold tabular-nums text-zinc-100">
+                                  {count}
+                                </div>
+                              </div>
+                            );
+                          },
+                        )}
+                      </div>
+                    </div>
                     {archivedExcludedTaskMinutes > 1e-9 ? (
                       <div
                         role="status"
@@ -1886,162 +2431,164 @@ function ReportingContent() {
                           </div>
                         </section>
                       ) : null}
-                      <section
-                        id="report-chart-sessions"
-                        className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                      >
-                        <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                          <h3 className="text-sm font-semibold text-zinc-200">
-                            {t.chartSessionsPerDay}
-                          </h3>
-                          <ReportingFilteredBadge
-                            active={reportingFiltersActive}
-                            label={t.sectionFilteredBadge}
-                            titleText={t.sectionFilteredBadgeTitle}
-                          />
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpChartSessionsAria}
-                            body={t.metricHelpChartSessionsBody}
-                          />
-                        </div>
-                        <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
-                          <span>{t.legendSessions}</span>
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpLegendSessionsAria}
-                            body={t.metricHelpLegendSessionsBody}
-                          />
-                        </div>
-                        <div className="mt-4">
-                          <MiniBars
-                            days={reportingDayKeys}
-                            values={agg.sessionsByDay}
-                            max={peak}
-                            className="bg-violet-500/90"
-                            undatedLabel={t.undatedLabel}
-                          />
-                        </div>
-                      </section>
-
-                      <section
-                        id="report-chart-tasks"
-                        className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                      >
-                        <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                          <h3 className="text-sm font-semibold text-zinc-200">
-                            {t.chartTasksByStatusPerDay}
-                          </h3>
-                          <ReportingFilteredBadge
-                            active={reportingFiltersActive}
-                            label={t.sectionFilteredBadge}
-                            titleText={t.sectionFilteredBadgeTitle}
-                          />
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpChartTasksAria}
-                            body={t.metricHelpChartTasksBody}
-                          />
-                        </div>
-                        <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-zinc-500">
-                          <div className="inline-flex items-center gap-1">
-                            <span className="mr-0.5 inline-block h-2 w-2 shrink-0 rounded-sm bg-emerald-600" />
-                            {t.legendDone}
+                      <div className="mb-10 grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <section
+                          id="report-chart-sessions"
+                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                        >
+                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
+                            <h3 className="text-sm font-semibold text-zinc-200">
+                              {t.chartSessionsPerDay}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
                             <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpLegendDoneAria}
-                              body={t.metricHelpLegendDoneBody}
+                              ariaLabel={t.metricHelpChartSessionsAria}
+                              body={t.metricHelpChartSessionsBody}
                             />
                           </div>
-                          <div className="inline-flex items-center gap-1">
-                            <span className="mr-0.5 inline-block h-2 w-2 shrink-0 rounded-sm bg-amber-500" />
-                            {t.legendActive}
+                          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
+                            <span>{t.legendSessions}</span>
                             <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpLegendActiveAria}
-                              body={t.metricHelpLegendActiveBody}
+                              ariaLabel={t.metricHelpLegendSessionsAria}
+                              body={t.metricHelpLegendSessionsBody}
                             />
                           </div>
-                        </div>
-                        <div className="mt-4">
-                          <StackedTaskBars
-                            days={reportingDayKeys}
-                            done={agg.tasksByDayDone}
-                            active={agg.tasksByDayActive}
-                            max={peakTasks}
-                            undatedLabel={t.undatedLabel}
-                          />
-                        </div>
-                      </section>
+                          <div className="mt-4">
+                            <MiniBars
+                              days={reportingDayKeys}
+                              values={agg.sessionsByDay}
+                              max={peak}
+                              className="bg-violet-500/90"
+                              undatedLabel={t.undatedLabel}
+                            />
+                          </div>
+                        </section>
 
-                      <section
-                        id="report-chart-task-time"
-                        className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                      >
-                        <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                          <h3 className="text-sm font-semibold text-zinc-200">
-                            {t.chartTaskTimePerDay}
-                          </h3>
-                          <ReportingFilteredBadge
-                            active={reportingFiltersActive}
-                            label={t.sectionFilteredBadge}
-                            titleText={t.sectionFilteredBadgeTitle}
-                          />
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpChartTaskTimeAria}
-                            body={t.metricHelpChartTaskTimeBody}
-                          />
-                        </div>
-                        <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
-                          <span>{t.summaryTaskTimeRecorded}</span>
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpTaskTimeAria}
-                            body={t.metricHelpTaskTimeBody}
-                          />
-                        </div>
-                        <div className="mt-4">
-                          <MiniBars
-                            days={reportingDayKeys}
-                            values={agg.taskMinutesByDay}
-                            max={peakTaskMinutes}
-                            className="bg-sky-500/90"
-                            undatedLabel={t.undatedLabel}
-                            valueTitle={(m) => formatDuration(m)}
-                          />
-                        </div>
-                      </section>
+                        <section
+                          id="report-chart-tasks"
+                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                        >
+                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
+                            <h3 className="text-sm font-semibold text-zinc-200">
+                              {t.chartTasksByStatusPerDay}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpChartTasksAria}
+                              body={t.metricHelpChartTasksBody}
+                            />
+                          </div>
+                          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-zinc-500">
+                            <div className="inline-flex items-center gap-1">
+                              <span className="mr-0.5 inline-block h-2 w-2 shrink-0 rounded-sm bg-emerald-600" />
+                              {t.legendDone}
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpLegendDoneAria}
+                                body={t.metricHelpLegendDoneBody}
+                              />
+                            </div>
+                            <div className="inline-flex items-center gap-1">
+                              <span className="mr-0.5 inline-block h-2 w-2 shrink-0 rounded-sm bg-amber-500" />
+                              {t.legendActive}
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpLegendActiveAria}
+                                body={t.metricHelpLegendActiveBody}
+                              />
+                            </div>
+                          </div>
+                          <div className="mt-4">
+                            <StackedTaskBars
+                              days={reportingDayKeys}
+                              done={agg.tasksByDayDone}
+                              active={agg.tasksByDayActive}
+                              max={peakTasks}
+                              undatedLabel={t.undatedLabel}
+                            />
+                          </div>
+                        </section>
 
-                      <section
-                        id="report-chart-session-wall"
-                        className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                      >
-                        <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                          <h3 className="text-sm font-semibold text-zinc-200">
-                            {t.chartSessionWallPerDay}
-                          </h3>
-                          <ReportingFilteredBadge
-                            active={reportingFiltersActive}
-                            label={t.sectionFilteredBadge}
-                            titleText={t.sectionFilteredBadgeTitle}
-                          />
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpChartSessionWallAria}
-                            body={t.metricHelpChartSessionWallBody}
-                          />
-                        </div>
-                        <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
-                          <span>{t.summarySessionWallClock}</span>
-                          <InlineMetricHelpTrigger
-                            ariaLabel={t.metricHelpSessionWallSummaryAria}
-                            body={t.metricHelpSessionWallSummaryBody}
-                          />
-                        </div>
-                        <div className="mt-4">
-                          <MiniBars
-                            days={reportingDayKeys}
-                            values={agg.sessionWallClockMinutesByDay}
-                            max={peakSessionWallMinutes}
-                            className="bg-fuchsia-500/85"
-                            undatedLabel={t.undatedLabel}
-                            valueTitle={(m) => formatDuration(m)}
-                          />
-                        </div>
-                      </section>
+                        <section
+                          id="report-chart-task-time"
+                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                        >
+                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
+                            <h3 className="text-sm font-semibold text-zinc-200">
+                              {t.chartTaskTimePerDay}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpChartTaskTimeAria}
+                              body={t.metricHelpChartTaskTimeBody}
+                            />
+                          </div>
+                          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
+                            <span>{t.summaryTaskTimeRecorded}</span>
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpTaskTimeAria}
+                              body={t.metricHelpTaskTimeBody}
+                            />
+                          </div>
+                          <div className="mt-4">
+                            <MiniBars
+                              days={reportingDayKeys}
+                              values={agg.taskMinutesByDay}
+                              max={peakTaskMinutes}
+                              className="bg-sky-500/90"
+                              undatedLabel={t.undatedLabel}
+                              valueTitle={(m) => formatDuration(m)}
+                            />
+                          </div>
+                        </section>
+
+                        <section
+                          id="report-chart-session-wall"
+                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                        >
+                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
+                            <h3 className="text-sm font-semibold text-zinc-200">
+                              {t.chartSessionWallPerDay}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpChartSessionWallAria}
+                              body={t.metricHelpChartSessionWallBody}
+                            />
+                          </div>
+                          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
+                            <span>{t.summarySessionWallClock}</span>
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpSessionWallSummaryAria}
+                              body={t.metricHelpSessionWallSummaryBody}
+                            />
+                          </div>
+                          <div className="mt-4">
+                            <MiniBars
+                              days={reportingDayKeys}
+                              values={agg.sessionWallClockMinutesByDay}
+                              max={peakSessionWallMinutes}
+                              className="bg-fuchsia-500/85"
+                              undatedLabel={t.undatedLabel}
+                              valueTitle={(m) => formatDuration(m)}
+                            />
+                          </div>
+                        </section>
+                      </div>
 
                       <section
                         id="report-daily-table"
@@ -2115,6 +2662,11 @@ function ReportingContent() {
                                   />
                                 </div>
                               </th>
+                              <th className="px-4 py-3 font-medium tabular-nums">
+                                <div className="flex min-h-5 items-center gap-0.5">
+                                  <span>{t.tableTaskTimeNonConcurrent}</span>
+                                </div>
+                              </th>
                               <th className="px-4 py-3 font-medium tabular-nums">
                                 <div className="flex min-h-5 items-center gap-0.5">
                                   <span>{t.tableSessionCoding}</span>
@@ -2153,6 +2705,11 @@ function ReportingContent() {
                                 <td className="px-4 py-2.5 tabular-nums text-sky-300/90">
                                   {formatMinutesCell(agg.taskMinutesByDay[d])}
                                 </td>
+                                <td className="px-4 py-2.5 tabular-nums text-cyan-300/90">
+                                  {formatMinutesCell(
+                                    agg.nonConcurrentTaskMinutesByDay[d],
+                                  )}
+                                </td>
                                 <td className="px-4 py-2.5 tabular-nums text-zinc-300">
                                   {formatMinutesCell(
                                     agg.sessionCodingMinutesByDay[d],
@@ -2186,196 +2743,6 @@ function ReportingContent() {
                           {t.tagTimeSectionHint}
                         </p>
 
-                        <div id="report-tag-time-day">
-                          <div className="flex min-h-6 items-center gap-0.5">
-                            <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-400">
-                              {t.tagTimeByDayTitle}
-                            </h4>
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpTagTimeDayTableAria}
-                              body={t.metricHelpTagTimeDayTableBody}
-                            />
-                          </div>
-                          {tagTimeSplit.byDay.length === 0 ? (
-                            <p className="mt-3 text-sm text-zinc-500">—</p>
-                          ) : (
-                            <div className="mt-3 overflow-x-auto">
-                              <table className="w-full min-w-[22rem] text-left text-sm">
-                                <thead className="border-b border-zinc-800 text-xs uppercase text-zinc-500">
-                                  <tr>
-                                    <th className="py-2 pr-3 font-medium">
-                                      <div className="flex min-h-5 items-center gap-0.5">
-                                        <span>{t.tagTimeColTag}</span>
-                                        <InlineMetricHelpTrigger
-                                          ariaLabel={
-                                            t.metricHelpTagTimeColTagAria
-                                          }
-                                          body={t.metricHelpTagTimeColTagBody}
-                                        />
-                                      </div>
-                                    </th>
-                                    <th className="py-2 pr-3 font-medium tabular-nums">
-                                      <div className="flex min-h-5 items-center gap-0.5">
-                                        <span>{t.tagTimeColDay}</span>
-                                        <InlineMetricHelpTrigger
-                                          ariaLabel={
-                                            t.metricHelpTagTimeColDayAria
-                                          }
-                                          body={t.metricHelpTagTimeColDayBody}
-                                        />
-                                      </div>
-                                    </th>
-                                    <th className="py-2 font-medium tabular-nums">
-                                      <div className="flex min-h-5 items-center gap-0.5">
-                                        <span>{t.tagTimeColMinutes}</span>
-                                        <InlineMetricHelpTrigger
-                                          align="end"
-                                          ariaLabel={
-                                            t.metricHelpTagTimeColMinutesAria
-                                          }
-                                          body={
-                                            t.metricHelpTagTimeColMinutesBody
-                                          }
-                                        />
-                                      </div>
-                                    </th>
-                                  </tr>
-                                </thead>
-                                <tbody>
-                                  {groupTagDayRowsForDisplay(
-                                    tagTimeSplit.byDay,
-                                  ).flatMap(({ day, blocks }) =>
-                                    blocks.flatMap((block) => {
-                                      if (block.kind === "leaf") {
-                                        const row = block.row;
-                                        return [
-                                          <tr
-                                            key={`${row.tagKey}\0${row.day}`}
-                                            className="border-b border-zinc-800/80 last:border-0"
-                                          >
-                                            <ReportingTagNameCell
-                                              tagKey={row.tagKey}
-                                              displayLabel={
-                                                row.displayTag || row.tagKey
-                                              }
-                                              untaggedLabel={t.tagTimeUntagged}
-                                              descriptions={tagDescriptions}
-                                              className="py-2 pr-3 text-violet-200/90"
-                                            />
-                                            <td className="py-2 pr-3 tabular-nums text-zinc-300">
-                                              {dayLabel(
-                                                row.day,
-                                                t.undatedLabel,
-                                              )}
-                                            </td>
-                                            <td className="py-2 tabular-nums text-zinc-200">
-                                              {formatDuration(row.minutes)}
-                                            </td>
-                                          </tr>,
-                                        ];
-                                      }
-                                      const rollupKey = `${day}:::${block.projectKeyLower}`;
-                                      const open =
-                                        tagDayRollupOpenKeys.has(rollupKey);
-                                      const rollupDesc =
-                                        reportingProjectDescriptionLine(
-                                          block.projectKeyLower,
-                                          projectDescriptions,
-                                        ) ?? "";
-                                      const rollupHead = (
-                                        <tr
-                                          key={`${rollupKey}-rollup`}
-                                          className="border-b border-zinc-800/80 bg-zinc-900/40"
-                                        >
-                                          <td className="py-2 pr-3 align-top text-violet-200/90">
-                                            <div className="flex items-start gap-1.5">
-                                              <button
-                                                type="button"
-                                                aria-expanded={
-                                                  open ? "true" : "false"
-                                                }
-                                                aria-label={
-                                                  t.tagWeekScopedRollupToggleAria
-                                                }
-                                                className="mt-0.5 shrink-0 rounded p-0.5 text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
-                                                onClick={() =>
-                                                  toggleTagDayRollup(rollupKey)
-                                                }
-                                              >
-                                                <ChevronRight
-                                                  className={`size-4 transition-transform duration-200 ${
-                                                    open ? "rotate-90" : ""
-                                                  }`}
-                                                  strokeWidth={2}
-                                                  aria-hidden
-                                                />
-                                              </button>
-                                              <div className="min-w-0">
-                                                <div className="flex flex-wrap items-baseline gap-x-1.5 font-medium">
-                                                  <span>
-                                                    @{block.displayProject}
-                                                  </span>
-                                                  <span className="text-[0.65rem] font-normal tabular-nums text-zinc-500">
-                                                    ({block.children.length})
-                                                  </span>
-                                                </div>
-                                                {rollupDesc ? (
-                                                  <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
-                                                    {rollupDesc}
-                                                  </p>
-                                                ) : null}
-                                              </div>
-                                            </div>
-                                          </td>
-                                          <td className="py-2 pr-3 tabular-nums text-zinc-300">
-                                            {dayLabel(day, t.undatedLabel)}
-                                          </td>
-                                          <td className="py-2 tabular-nums text-zinc-200">
-                                            {formatDuration(
-                                              block.parentMinutes,
-                                            )}
-                                          </td>
-                                        </tr>
-                                      );
-                                      if (!open) {
-                                        return [rollupHead];
-                                      }
-                                      return [
-                                        rollupHead,
-                                        ...block.children.map((child) => (
-                                          <tr
-                                            key={`${child.tagKey}\0${child.day}`}
-                                            className="border-b border-zinc-800/55 bg-zinc-950/30"
-                                          >
-                                            <ReportingTagNameCell
-                                              tagKey={child.tagKey}
-                                              displayLabel={
-                                                child.displayTag || child.tagKey
-                                              }
-                                              untaggedLabel={t.tagTimeUntagged}
-                                              descriptions={tagDescriptions}
-                                              className="py-2 pr-3 pl-8 text-violet-200/85"
-                                            />
-                                            <td className="py-2 pr-3 tabular-nums text-zinc-300/95">
-                                              {dayLabel(
-                                                child.day,
-                                                t.undatedLabel,
-                                              )}
-                                            </td>
-                                            <td className="py-2 tabular-nums text-zinc-300/95">
-                                              {formatDuration(child.minutes)}
-                                            </td>
-                                          </tr>
-                                        )),
-                                      ];
-                                    }),
-                                  )}
-                                </tbody>
-                              </table>
-                            </div>
-                          )}
-                        </div>
-
                         <div id="report-tag-time-week" className="space-y-4">
                           <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
                             <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-400">
@@ -2556,8 +2923,24 @@ function ReportingContent() {
                                                             title={dateKey}
                                                           >
                                                             {mins > 0
-                                                              ? formatDuration(
+                                                              ? renderReportingDurationButton(
                                                                   mins,
+                                                                  {
+                                                                    kind: "tag",
+                                                                    title:
+                                                                      row.displayTag ||
+                                                                      row.tagKey,
+                                                                    dayKey:
+                                                                      dateKey,
+                                                                    tagKey:
+                                                                      row.tagKey,
+                                                                    sourceLabel:
+                                                                      dayLabel(
+                                                                        dateKey,
+                                                                        t.undatedLabel,
+                                                                      ),
+                                                                  },
+                                                                  "text-zinc-200",
                                                                 )
                                                               : "—"}
                                                           </td>
@@ -2565,8 +2948,24 @@ function ReportingContent() {
                                                       },
                                                     )}
                                                     <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
-                                                      {formatDuration(
+                                                      {renderReportingDurationButton(
                                                         row.total,
+                                                        {
+                                                          kind: "tag",
+                                                          title:
+                                                            row.displayTag ||
+                                                            row.tagKey,
+                                                          weekStart:
+                                                            row.weekStart,
+                                                          tagKey: row.tagKey,
+                                                          sourceLabel:
+                                                            weekRangeLabelForSource(
+                                                              row.weekStart,
+                                                              lang,
+                                                              reportLocale,
+                                                            ),
+                                                        },
+                                                        "text-zinc-100",
                                                       )}
                                                     </td>
                                                   </tr>
@@ -2653,8 +3052,22 @@ function ReportingContent() {
                                                             title={dateKey}
                                                           >
                                                             {mins > 0
-                                                              ? formatDuration(
+                                                              ? renderReportingDurationButton(
                                                                   mins,
+                                                                  {
+                                                                    kind: "project",
+                                                                    title: `@${block.displayProject}`,
+                                                                    dayKey:
+                                                                      dateKey,
+                                                                    projectKey:
+                                                                      block.projectKeyLower,
+                                                                    sourceLabel:
+                                                                      dayLabel(
+                                                                        dateKey,
+                                                                        t.undatedLabel,
+                                                                      ),
+                                                                  },
+                                                                  "text-zinc-200",
                                                                 )
                                                               : "—"}
                                                           </td>
@@ -2662,8 +3075,23 @@ function ReportingContent() {
                                                       },
                                                     )}
                                                     <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
-                                                      {formatDuration(
+                                                      {renderReportingDurationButton(
                                                         block.parentTotal,
+                                                        {
+                                                          kind: "project",
+                                                          title: `@${block.displayProject}`,
+                                                          weekStart:
+                                                            block.weekStart,
+                                                          projectKey:
+                                                            block.projectKeyLower,
+                                                          sourceLabel:
+                                                            weekRangeLabelForSource(
+                                                              block.weekStart,
+                                                              lang,
+                                                              reportLocale,
+                                                            ),
+                                                        },
+                                                        "text-zinc-100",
                                                       )}
                                                     </td>
                                                   </tr>
@@ -2708,8 +3136,24 @@ function ReportingContent() {
                                                                     }
                                                                   >
                                                                     {mins > 0
-                                                                      ? formatDuration(
+                                                                      ? renderReportingDurationButton(
                                                                           mins,
+                                                                          {
+                                                                            kind: "tag",
+                                                                            title:
+                                                                              child.displayTag ||
+                                                                              child.tagKey,
+                                                                            dayKey:
+                                                                              dateKey,
+                                                                            tagKey:
+                                                                              child.tagKey,
+                                                                            sourceLabel:
+                                                                              dayLabel(
+                                                                                dateKey,
+                                                                                t.undatedLabel,
+                                                                              ),
+                                                                          },
+                                                                          "text-zinc-300/95",
                                                                         )
                                                                       : "—"}
                                                                   </td>
@@ -2717,8 +3161,25 @@ function ReportingContent() {
                                                               },
                                                             )}
                                                             <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-200">
-                                                              {formatDuration(
+                                                              {renderReportingDurationButton(
                                                                 child.total,
+                                                                {
+                                                                  kind: "tag",
+                                                                  title:
+                                                                    child.displayTag ||
+                                                                    child.tagKey,
+                                                                  weekStart:
+                                                                    child.weekStart,
+                                                                  tagKey:
+                                                                    child.tagKey,
+                                                                  sourceLabel:
+                                                                    weekRangeLabelForSource(
+                                                                      child.weekStart,
+                                                                      lang,
+                                                                      reportLocale,
+                                                                    ),
+                                                                },
+                                                                "text-zinc-200",
                                                               )}
                                                             </td>
                                                           </tr>
@@ -2856,45 +3317,239 @@ function ReportingContent() {
                                         </tr>
                                       </thead>
                                       <tbody>
-                                        {rows.map((row) => (
-                                          <tr
-                                            key={`${weekStart}\0${row.projectKey}`}
-                                            className="border-b border-zinc-800/70 last:border-0"
-                                          >
-                                            <ReportingProjectNameCell
-                                              projectKey={row.projectKey}
-                                              displayLabel={
-                                                row.displayProject ||
-                                                row.projectKey
-                                              }
-                                              unassignedLabel={
-                                                t.projectUnassigned
-                                              }
-                                              descriptions={projectDescriptions}
-                                              className="px-2 py-2 pl-3 text-sky-200/90"
-                                            />
-                                            {row.slots.map((mins, i) => {
-                                              const dateKey = addDaysYmd(
-                                                row.weekStart,
-                                                i,
-                                              );
-                                              return (
-                                                <td
-                                                  key={dateKey}
-                                                  className="px-1 py-2 text-center tabular-nums text-zinc-200"
-                                                  title={dateKey}
-                                                >
-                                                  {mins > 0
-                                                    ? formatDuration(mins)
-                                                    : "—"}
+                                        {rows.map((row) => {
+                                          const projectKeyLower =
+                                            normalizeProjectKey(
+                                              row.projectKey,
+                                            ).toLowerCase();
+                                          const breakdownKey = `${weekStart}:::${projectKeyLower}`;
+                                          const childTagRows =
+                                            projectScopedTagRowsByWeekProject.get(
+                                              breakdownKey,
+                                            ) ?? [];
+                                          const canExpand =
+                                            childTagRows.length > 0;
+                                          const isOpen =
+                                            canExpand &&
+                                            projectWeekTagBreakdownOpenKeys.has(
+                                              breakdownKey,
+                                            );
+                                          const rowTitle =
+                                            row.displayProject ||
+                                            row.projectKey;
+                                          const rowProjectDescription =
+                                            reportingProjectDescriptionLine(
+                                              row.projectKey,
+                                              projectDescriptions,
+                                            ) ?? "";
+                                          return (
+                                            <Fragment
+                                              key={`${weekStart}\0${row.projectKey}`}
+                                            >
+                                              <tr className="border-b border-zinc-800/70 last:border-0">
+                                                {canExpand ? (
+                                                  <td className="align-top px-2 py-2 pl-3 text-sky-200/90">
+                                                    <div className="flex items-start gap-1.5">
+                                                      <button
+                                                        type="button"
+                                                        aria-expanded={isOpen}
+                                                        aria-label={
+                                                          t.tagWeekScopedRollupToggleAria
+                                                        }
+                                                        className="mt-0.5 shrink-0 rounded p-0.5 text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+                                                        onClick={() =>
+                                                          toggleProjectWeekTagBreakdown(
+                                                            breakdownKey,
+                                                          )
+                                                        }
+                                                      >
+                                                        <ChevronRight
+                                                          className={`size-4 transition-transform duration-200 ${
+                                                            isOpen
+                                                              ? "rotate-90"
+                                                              : ""
+                                                          }`}
+                                                          strokeWidth={2}
+                                                          aria-hidden
+                                                        />
+                                                      </button>
+                                                      <div className="min-w-0">
+                                                        <div>
+                                                          {row.projectKey === ""
+                                                            ? t.projectUnassigned
+                                                            : row.displayProject ||
+                                                              row.projectKey}
+                                                        </div>
+                                                        {rowProjectDescription ? (
+                                                          <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
+                                                            {
+                                                              rowProjectDescription
+                                                            }
+                                                          </p>
+                                                        ) : null}
+                                                        <p className="mt-1 text-[0.65rem] font-normal tabular-nums text-zinc-500">
+                                                          {childTagRows.length}{" "}
+                                                          {lang === "fr"
+                                                            ? "étiquette(s) liée(s)"
+                                                            : "linked tag(s)"}
+                                                        </p>
+                                                      </div>
+                                                    </div>
+                                                  </td>
+                                                ) : (
+                                                  <ReportingProjectNameCell
+                                                    projectKey={row.projectKey}
+                                                    displayLabel={
+                                                      row.displayProject ||
+                                                      row.projectKey
+                                                    }
+                                                    unassignedLabel={
+                                                      t.projectUnassigned
+                                                    }
+                                                    descriptions={
+                                                      projectDescriptions
+                                                    }
+                                                    className="px-2 py-2 pl-3 text-sky-200/90"
+                                                  />
+                                                )}
+                                                {row.slots.map((mins, i) => {
+                                                  const dateKey = addDaysYmd(
+                                                    row.weekStart,
+                                                    i,
+                                                  );
+                                                  return (
+                                                    <td
+                                                      key={dateKey}
+                                                      className="px-1 py-2 text-center tabular-nums text-zinc-200"
+                                                      title={dateKey}
+                                                    >
+                                                      {mins > 0
+                                                        ? renderReportingDurationButton(
+                                                            mins,
+                                                            {
+                                                              kind: "project",
+                                                              title: rowTitle,
+                                                              dayKey: dateKey,
+                                                              projectKey:
+                                                                row.projectKey,
+                                                              sourceLabel:
+                                                                dayLabel(
+                                                                  dateKey,
+                                                                  t.undatedLabel,
+                                                                ),
+                                                            },
+                                                            "text-zinc-200",
+                                                          )
+                                                        : "—"}
+                                                    </td>
+                                                  );
+                                                })}
+                                                <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                                  {renderReportingDurationButton(
+                                                    row.total,
+                                                    {
+                                                      kind: "project",
+                                                      title: rowTitle,
+                                                      weekStart: row.weekStart,
+                                                      projectKey:
+                                                        row.projectKey,
+                                                      sourceLabel:
+                                                        weekRangeLabelForSource(
+                                                          row.weekStart,
+                                                          lang,
+                                                          reportLocale,
+                                                        ),
+                                                    },
+                                                    "text-zinc-100",
+                                                  )}
                                                 </td>
-                                              );
-                                            })}
-                                            <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
-                                              {formatDuration(row.total)}
-                                            </td>
-                                          </tr>
-                                        ))}
+                                              </tr>
+                                              {isOpen
+                                                ? childTagRows.map((child) => (
+                                                    <tr
+                                                      key={`${weekStart}\0${row.projectKey}\0${child.tagKey}`}
+                                                      className="border-b border-zinc-800/55 bg-zinc-950/30"
+                                                    >
+                                                      <ReportingTagNameCell
+                                                        tagKey={child.tagKey}
+                                                        displayLabel={
+                                                          child.displayTag ||
+                                                          child.tagKey
+                                                        }
+                                                        untaggedLabel={
+                                                          t.tagTimeUntagged
+                                                        }
+                                                        descriptions={
+                                                          tagDescriptions
+                                                        }
+                                                        className="px-2 py-2 pl-10 text-violet-200/85"
+                                                      />
+                                                      {child.slots.map(
+                                                        (mins, i) => {
+                                                          const dateKey =
+                                                            addDaysYmd(
+                                                              child.weekStart,
+                                                              i,
+                                                            );
+                                                          return (
+                                                            <td
+                                                              key={dateKey}
+                                                              className="px-1 py-2 text-center tabular-nums text-zinc-300/95"
+                                                              title={dateKey}
+                                                            >
+                                                              {mins > 0
+                                                                ? renderReportingDurationButton(
+                                                                    mins,
+                                                                    {
+                                                                      kind: "tag",
+                                                                      title:
+                                                                        child.displayTag ||
+                                                                        child.tagKey,
+                                                                      dayKey:
+                                                                        dateKey,
+                                                                      tagKey:
+                                                                        child.tagKey,
+                                                                      sourceLabel:
+                                                                        dayLabel(
+                                                                          dateKey,
+                                                                          t.undatedLabel,
+                                                                        ),
+                                                                    },
+                                                                    "text-zinc-300/95",
+                                                                  )
+                                                                : "—"}
+                                                            </td>
+                                                          );
+                                                        },
+                                                      )}
+                                                      <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-200">
+                                                        {renderReportingDurationButton(
+                                                          child.total,
+                                                          {
+                                                            kind: "tag",
+                                                            title:
+                                                              child.displayTag ||
+                                                              child.tagKey,
+                                                            weekStart:
+                                                              child.weekStart,
+                                                            tagKey:
+                                                              child.tagKey,
+                                                            sourceLabel:
+                                                              weekRangeLabelForSource(
+                                                                child.weekStart,
+                                                                lang,
+                                                                reportLocale,
+                                                              ),
+                                                          },
+                                                          "text-zinc-200",
+                                                        )}
+                                                      </td>
+                                                    </tr>
+                                                  ))
+                                                : null}
+                                            </Fragment>
+                                          );
+                                        })}
                                       </tbody>
                                     </table>
                                   </div>
@@ -2917,7 +3572,144 @@ function ReportingContent() {
           </div>
         )}
       </div>
+      <div
+        aria-hidden
+        className="pointer-events-none h-[45vh] min-h-44 max-h-80"
+      />
       <ScrollToTopFab ariaLabel={t.scrollToTopAria} />
+      {portalReady && taskInspectScope
+        ? createPortal(
+            <div
+              className="fixed inset-0 z-[140] bg-black/65 p-4"
+              role="dialog"
+              aria-modal="true"
+              aria-label={lang === "fr" ? "Détails des tâches" : "Task details"}
+              onClick={(e) => {
+                if (e.target === e.currentTarget) {
+                  setTaskInspectScope(null);
+                  setTaskInspectAnchor(null);
+                  setTaskInspectModalRect(null);
+                }
+              }}
+            >
+              {taskInspectAnchor && taskInspectConnector ? (
+                <>
+                  <div
+                    className="pointer-events-none fixed z-[141] size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-200/70 shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
+                    style={{
+                      left: `${taskInspectAnchor.x}px`,
+                      top: `${taskInspectAnchor.y}px`,
+                    }}
+                  />
+                  <div
+                    className="pointer-events-none fixed z-[141] h-px origin-left border-t border-dashed border-violet-200/45"
+                    style={{
+                      left: `${taskInspectConnector.lineStartX}px`,
+                      top: `${taskInspectConnector.lineStartY}px`,
+                      width: `${taskInspectConnector.length}px`,
+                      transform: `rotate(${taskInspectConnector.angleRad}rad)`,
+                    }}
+                  />
+                </>
+              ) : null}
+              <div
+                ref={taskInspectModalRef}
+                className="max-h-[72vh] overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-2xl"
+                style={
+                  taskInspectPlacement
+                    ? {
+                        position: "fixed" as const,
+                        left: `${taskInspectPlacement.left}px`,
+                        top: `${
+                          taskInspectPlacementTop ?? taskInspectPlacement.top
+                        }px`,
+                        width: `${taskInspectPlacement.width}px`,
+                      }
+                    : {
+                        position: "fixed" as const,
+                        left: "50%",
+                        top: "50%",
+                        width: "min(56rem, calc(100vw - 2rem))",
+                        transform: "translate(-50%, -50%)",
+                      }
+                }
+              >
+                <div className="flex items-center justify-between gap-3 border-b border-zinc-700 px-4 py-3">
+                  <div className="min-w-0">
+                    <h2 className="min-w-0 truncate text-sm font-semibold text-zinc-100 sm:text-base">
+                      {lang === "fr"
+                        ? `Détails des tâches - ${taskInspectScope.title}`
+                        : `Task details - ${taskInspectScope.title}`}
+                    </h2>
+                    {taskInspectScope.sourceLabel ? (
+                      <p className="mt-0.5 truncate text-[0.7rem] text-zinc-400">
+                        {lang === "fr"
+                          ? `Source : ${
+                              taskInspectScope.kind === "tag"
+                                ? "Étiquette"
+                                : "Projet"
+                            } - ${taskInspectScope.sourceLabel}`
+                          : `Source: ${
+                              taskInspectScope.kind === "tag"
+                                ? "Tag"
+                                : "Project"
+                            } - ${taskInspectScope.sourceLabel}`}
+                      </p>
+                    ) : null}
+                  </div>
+                  <button
+                    type="button"
+                    className="rounded border border-zinc-600 px-2 py-1 text-xs text-zinc-200 hover:bg-zinc-800"
+                    onClick={() => {
+                      setTaskInspectScope(null);
+                      setTaskInspectAnchor(null);
+                      setTaskInspectModalRect(null);
+                    }}
+                  >
+                    {lang === "fr" ? "Fermer" : "Close"}
+                  </button>
+                </div>
+                <div className="max-h-[calc(72vh-3.25rem)] overflow-y-auto p-4">
+                  {taskInspectList.length > 0 ? (
+                    <div className="space-y-3">
+                      {taskInspectList.map((entry) => (
+                        <TaskSessionLiveCard
+                          key={`${entry.sessionId}\0${entry.task.id}`}
+                          task={entry.task}
+                          lang={lang}
+                          isInspecting
+                          inspectingId={entry.sessionId}
+                          knownTags={tagKeys}
+                          knownProjects={knownProjects}
+                          post={postReportingTaskAction}
+                          t={dt}
+                          confirmDeleteTask={() => {}}
+                          kronoFocusIsRunningOrPaused={false}
+                          showKronoFocusTaskActions={false}
+                          startKronoFocusFromTask={() => {}}
+                          onDuplicateTask={() => {}}
+                          pausePlayMode={entry.pausePlayMode}
+                          onPausePlay={() => {}}
+                          showTaskActionButtons={false}
+                          allowAddSubtasks={false}
+                          showLiveTimerWhenInspecting
+                          deriveLiveTimerFromStartTime={false}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-sm text-zinc-400">
+                      {lang === "fr"
+                        ? "Aucune tâche correspondante pour ce segment de temps."
+                        : "No matching tasks for this time segment."}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
       <ReportingTour
         open={reportingTourOpen}
         onOpenChange={setReportingTourOpen}