@nightkatana/kronosys-app 1.0.0-beta.0

package/app/reporting/page.tsx

@@ -0,0 +1,2943 @@
+"use client";
+
+import {
+  Fragment,
+  type ReactNode,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  postKronosysAction,
+  type WorkspaceCodeSnapshotPayload,
+} from "@/lib/kronosysApi";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import {
+  formatDuration,
+  formatTagDisplay,
+  isFallbackTaskTagKey,
+  normalizeProjectKey,
+  normalizeTagKey,
+  readTaskDefaultTagBucketEnabled,
+} from "@/lib/taskParsing";
+import {
+  UNDATED_KEY,
+  aggregateArchivedExcludedTaskMinutes,
+  aggregateReporting,
+  aggregateProjectTaskMinutesByDay,
+  aggregateTagTaskMinutesByDayAndWeek,
+  buildTagFilterSet,
+  mergeSessionsFromPayload,
+  sortedDayKeys,
+  type ReportingTagTimeDayRow,
+  type ReportingTagTimeWeekRow,
+} from "@/lib/reportingAggregate";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import {
+  appShellHeaderClassName,
+  appShellHeaderToolRowClassName,
+} from "@/lib/appShellHeaderClasses";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import {
+  reportingPresetDay,
+  reportingPresetMonth,
+  reportingPresetWeek,
+  reportingPresetYear,
+} from "@/lib/reportingDatePresets";
+import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
+import {
+  ReportingPageTocDesktop,
+  ReportingPageTocMobile,
+} from "@/components/dashboard/ReportingPageToc";
+import { reportingStrings } from "@/lib/reportingStrings";
+import { trackCodeMetricsFromCfg } from "@/lib/usageProfile";
+import {
+  addDaysYmd,
+  buildProjectWeekCalendarRows,
+  buildTagWeekCalendarRows,
+  formatWeekRangeLabel,
+  localWeekStartKeyFromDayKey,
+  readWeekStartsOnFromStorage,
+  type ReportingWeekStartsOn,
+  weekdayDateColumnHeaders,
+  writeWeekStartsOnToStorage,
+  type ProjectWeekCalendarRow,
+  type TagWeekCalendarRow,
+} from "@/lib/reportingWeekLayout";
+import { computeReportingNonFinalFlags } from "@/lib/reportingNonFinalIndicators";
+import {
+  buildTagWeekDisplayBlocks,
+  groupTagDayRowsForDisplay,
+} 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 { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+import {
+  isReportingTourCompleted,
+  resetReportingTour,
+} from "@/lib/dashboardTourStorage";
+
+type LiveShape = { language?: string };
+
+function dayLabel(key: string, undated: string): string {
+  return key === UNDATED_KEY ? undated : key;
+}
+
+function formatMinutesCell(minutes: number | undefined): string {
+  const m = minutes ?? 0;
+  return m > 0 ? formatDuration(m) : "—";
+}
+
+function reportingArchivedExcludedRichText(
+  template: string,
+  durationMinutes: number,
+): ReactNode {
+  const marker = "{duration}";
+  const i = template.indexOf(marker);
+  if (i < 0) {
+    return template;
+  }
+  const label = formatDuration(durationMinutes);
+  return (
+    <>
+      {template.slice(0, i)}
+      <strong className="font-semibold text-amber-50 tabular-nums">
+        {label}
+      </strong>
+      {template.slice(i + marker.length)}
+    </>
+  );
+}
+
+const BAR_TRACK_PX = 100;
+
+function MiniBars({
+  days,
+  values,
+  max,
+  className,
+  undatedLabel: undated,
+  valueTitle,
+}: {
+  days: string[];
+  values: Record<string, number>;
+  max: number;
+  className: string;
+  undatedLabel: string;
+  /** If set, used for the bar tooltip instead of the raw numeric value. */
+  valueTitle?: (value: number) => string;
+}) {
+  return (
+    <div className="flex items-end gap-1 overflow-x-auto pb-2">
+      {days.map((d) => {
+        const v = values[d] ?? 0;
+        const px = max > 0 ? Math.round((v / max) * BAR_TRACK_PX) : 0;
+        const label = dayLabel(d, undated);
+        const tip = valueTitle
+          ? `${label}: ${valueTitle(v)}`
+          : `${label}: ${v}`;
+        return (
+          <div
+            key={d}
+            className="flex w-8 shrink-0 flex-col items-center gap-1"
+          >
+            <div
+              className="flex h-[100px] w-full items-end justify-center"
+              title={tip}
+            >
+              <div
+                className={`w-full rounded-t ${className}`}
+                style={{ height: `${Math.max(px, v > 0 ? 3 : 0)}px` }}
+              />
+            </div>
+            <span
+              className="max-w-[2.5rem] truncate text-[0.6rem] text-zinc-500"
+              title={label}
+            >
+              {d === UNDATED_KEY ? "—" : d.slice(5).replace(/^-/, "")}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function StackedTaskBars({
+  days,
+  done,
+  active,
+  max,
+  undatedLabel: undated,
+}: {
+  days: string[];
+  done: Record<string, number>;
+  active: Record<string, number>;
+  max: number;
+  undatedLabel: string;
+}) {
+  return (
+    <div className="flex items-end gap-1 overflow-x-auto pb-2">
+      {days.map((d) => {
+        const a = active[d] ?? 0;
+        const b = done[d] ?? 0;
+        const sum = a + b;
+        const totalPx = max > 0 ? Math.round((sum / max) * BAR_TRACK_PX) : 0;
+        const activePx = sum > 0 ? Math.round((a / sum) * totalPx) : 0;
+        const donePx = sum > 0 ? totalPx - activePx : 0;
+        const label = dayLabel(d, undated);
+        return (
+          <div
+            key={d}
+            className="flex w-8 shrink-0 flex-col items-center gap-1"
+          >
+            <div
+              className="flex h-[100px] w-full flex-col justify-end rounded-t bg-zinc-800/80"
+              title={`${label}: ${b} / ${a}`}
+            >
+              {donePx > 0 ? (
+                <div
+                  className="w-full rounded-t bg-emerald-600/90"
+                  style={{ height: `${donePx}px` }}
+                />
+              ) : null}
+              {activePx > 0 ? (
+                <div
+                  className="w-full bg-amber-500/90"
+                  style={{ height: `${activePx}px` }}
+                />
+              ) : null}
+            </div>
+            <span
+              className="max-w-[2.5rem] truncate text-[0.6rem] text-zinc-500"
+              title={label}
+            >
+              {d === UNDATED_KEY ? "—" : d.slice(5).replace(/^-/, "")}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function reportingTagDescriptionLine(
+  tagKey: string,
+  descriptions: Record<string, string>,
+): string | null {
+  if (!tagKey.trim()) {
+    return null;
+  }
+  const k = normalizeTagKey(tagKey).toLowerCase();
+  const line = (
+    descriptions[k] ??
+    descriptions[normalizeTagKey(tagKey)] ??
+    ""
+  ).trim();
+  return line || null;
+}
+
+function reportingProjectDescriptionLine(
+  projectKey: string,
+  descriptions: Record<string, string>,
+): string | null {
+  if (!projectKey.trim()) {
+    return null;
+  }
+  const canon = normalizeProjectKey(projectKey);
+  const k = canon.toLowerCase();
+  const candidates = [
+    descriptions[k],
+    descriptions[canon],
+    descriptions[projectKey],
+    descriptions[projectKey.trim().toLowerCase()],
+  ];
+  for (const c of candidates) {
+    const line = (c ?? "").trim();
+    if (line) {
+      return line;
+    }
+  }
+  for (const [dk, val] of Object.entries(descriptions)) {
+    const line = (val ?? "").trim();
+    if (!line) {
+      continue;
+    }
+    if (normalizeProjectKey(dk).toLowerCase() === k) {
+      return line;
+    }
+  }
+  return null;
+}
+
+function ReportingTagNameCell({
+  tagKey,
+  displayLabel,
+  untaggedLabel,
+  descriptions,
+  className,
+}: {
+  tagKey: string;
+  displayLabel: string;
+  untaggedLabel: string;
+  descriptions: Record<string, string>;
+  /** Classes de la pastille / libellé principal. */
+  className: string;
+}) {
+  const desc = reportingTagDescriptionLine(tagKey, descriptions);
+  const label = isFallbackTaskTagKey(tagKey) ? untaggedLabel : displayLabel;
+  return (
+    <td className={`align-top ${className}`}>
+      <div>{label}</div>
+      {desc ? (
+        <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
+          {desc}
+        </p>
+      ) : null}
+    </td>
+  );
+}
+
+function ReportingProjectNameCell({
+  projectKey,
+  displayLabel,
+  unassignedLabel,
+  descriptions,
+  className,
+}: {
+  projectKey: string;
+  displayLabel: string;
+  unassignedLabel: string;
+  descriptions: Record<string, string>;
+  className: string;
+}) {
+  const desc = reportingProjectDescriptionLine(projectKey, descriptions);
+  const label = projectKey === "" ? unassignedLabel : displayLabel;
+  return (
+    <td className={`align-top ${className}`}>
+      <div>{label}</div>
+      {desc ? (
+        <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
+          {desc}
+        </p>
+      ) : null}
+    </td>
+  );
+}
+
+function ReportingFilteredBadge({
+  active,
+  label,
+  titleText,
+}: Readonly<{
+  active: boolean;
+  label: string;
+  titleText: string;
+}>) {
+  if (!active) {
+    return null;
+  }
+  return (
+    <span
+      className="inline-flex shrink-0 items-center rounded border border-amber-500/35 bg-amber-950/40 px-1.5 py-px text-[0.65rem] font-semibold uppercase tracking-wide text-amber-200/90"
+      title={titleText}
+    >
+      {label}
+    </span>
+  );
+}
+
+function ReportingContent() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+  const { payload, error, refresh } = useKronosysPayload();
+  const [dateFrom, setDateFrom] = useState("");
+  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 toggleTagDayRollup = useCallback((key: string) => {
+    setTagDayRollupOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    setWeekStartsOn(readWeekStartsOnFromStorage());
+  }, []);
+
+  const persistWeekStartsOn = useCallback((v: ReportingWeekStartsOn) => {
+    setWeekStartsOn(v);
+    writeWeekStartsOnToStorage(v);
+  }, []);
+
+  const refreshWorkspaceSnapshot = useCallback(async () => {
+    setWorkspaceSnapBusy(true);
+    try {
+      await postKronosysAction({ type: "refreshWorkspaceCodeSnapshot" });
+      await refresh();
+    } catch {
+      await refresh();
+    } finally {
+      setWorkspaceSnapBusy(false);
+    }
+  }, [refresh]);
+
+  const postLang = useCallback(
+    async (next: Lang) => {
+      await postKronosysAction({ type: "setLanguage", lang: next });
+      await refresh();
+    },
+    [refresh],
+  );
+
+  const stripReportingTourReplayParam = useCallback(() => {
+    if (searchParams.get("tour") !== "replay") {
+      return;
+    }
+    const next = new URLSearchParams(searchParams.toString());
+    next.delete("tour");
+    const q = next.toString();
+    router.replace(q ? `${pathname}?${q}` : pathname);
+  }, [pathname, router, searchParams]);
+
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const t = reportingStrings(lang);
+  const dt = dashboardStrings(lang);
+  const handleManualRefresh = useCallback(async () => {
+    return await refresh({ routerInvalidate: true });
+  }, [refresh]);
+
+  const reportLocale = lang === "fr" ? "fr-CA" : "en-CA";
+  const tagDescriptions = (payload?.tagDescriptions ?? {}) as Record<
+    string,
+    string
+  >;
+  const projectDescriptions = (payload?.projectDescriptions ?? {}) as Record<
+    string,
+    string
+  >;
+  const tagKeys = useMemo(() => {
+    const raw = payload?.knownTags;
+    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?.knownTags]);
+
+  const taskDefaultTagBucketEnabled = useMemo(
+    () => readTaskDefaultTagBucketEnabled(payload?.cfg),
+    [payload?.cfg],
+  );
+
+  const reportTimeZone = useMemo(
+    () => readDashboardTimeZoneFromCfg(payload?.cfg as Record<string, unknown> | undefined),
+    [payload?.cfg]
+  );
+
+  const tagSet = useMemo(() => buildTagFilterSet(selectedTags), [selectedTags]);
+
+  const reportingFiltersActive = useMemo(
+    () => Boolean(dateFrom.trim() || dateTo.trim() || selectedTags.length > 0),
+    [dateFrom, dateTo, selectedTags],
+  );
+
+  const agg = useMemo(() => {
+    if (!payload) {
+      return null;
+    }
+    const sessions = mergeSessionsFromPayload(payload);
+    return aggregateReporting(
+      sessions,
+      tagSet,
+      dateFrom.trim() || null,
+      dateTo.trim() || null,
+      reportTimeZone,
+      taskDefaultTagBucketEnabled,
+    );
+  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+
+  const archivedExcludedTaskMinutes = useMemo(() => {
+    if (!payload) {
+      return 0;
+    }
+    const sessions = mergeSessionsFromPayload(payload);
+    return aggregateArchivedExcludedTaskMinutes(
+      sessions,
+      tagSet,
+      dateFrom.trim() || null,
+      dateTo.trim() || null,
+      reportTimeZone,
+      taskDefaultTagBucketEnabled,
+    );
+  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+
+  const reportingNonFinal = useMemo(
+    () =>
+      computeReportingNonFinalFlags(
+        payload,
+        tagSet,
+        dateFrom,
+        dateTo,
+        agg?.tasksByDayActive,
+        reportTimeZone,
+        taskDefaultTagBucketEnabled,
+      ),
+    [
+      payload,
+      tagSet,
+      dateFrom,
+      dateTo,
+      agg?.tasksByDayActive,
+      reportTimeZone,
+      taskDefaultTagBucketEnabled,
+    ],
+  );
+
+  const dayKeys = useMemo(() => {
+    if (!agg) {
+      return [] as string[];
+    }
+    return sortedDayKeys(
+      agg.sessionsByDay,
+      agg.tasksByDayDone,
+      agg.tasksByDayActive,
+      agg.taskMinutesByDay,
+      agg.sessionCodingMinutesByDay,
+      agg.sessionWallClockMinutesByDay,
+    );
+  }, [agg]);
+
+  const chartStrictDayKeys = useMemo(
+    () => dayKeys.filter((d) => d !== UNDATED_KEY),
+    [dayKeys],
+  );
+
+  const tagTimeSplit = useMemo((): {
+    byDay: ReportingTagTimeDayRow[];
+    byWeek: ReportingTagTimeWeekRow[];
+  } => {
+    if (!payload) {
+      return { byDay: [], byWeek: [] };
+    }
+    const sessions = mergeSessionsFromPayload(payload);
+    return aggregateTagTaskMinutesByDayAndWeek(
+      sessions,
+      tagSet,
+      dateFrom.trim() || null,
+      dateTo.trim() || null,
+      reportTimeZone,
+      weekStartsOn,
+      t.tagTimeUntagged,
+      taskDefaultTagBucketEnabled,
+    );
+  }, [
+    payload,
+    tagSet,
+    dateFrom,
+    dateTo,
+    reportTimeZone,
+    weekStartsOn,
+    t.tagTimeUntagged,
+    taskDefaultTagBucketEnabled,
+  ]);
+
+  const tagWeekCalendarRows = useMemo(
+    () => buildTagWeekCalendarRows(tagTimeSplit.byDay, weekStartsOn),
+    [tagTimeSplit.byDay, weekStartsOn],
+  );
+
+  const projectTaskMinutesByDay = useMemo(() => {
+    if (!payload) {
+      return [];
+    }
+    const sessions = mergeSessionsFromPayload(payload);
+    return aggregateProjectTaskMinutesByDay(
+      sessions,
+      tagSet,
+      dateFrom.trim() || null,
+      dateTo.trim() || null,
+      reportTimeZone,
+      taskDefaultTagBucketEnabled,
+    );
+  }, [payload, tagSet, dateFrom, dateTo, reportTimeZone, taskDefaultTagBucketEnabled]);
+
+  const projectWeekCalendarRows = useMemo(
+    () => buildProjectWeekCalendarRows(projectTaskMinutesByDay, weekStartsOn),
+    [projectTaskMinutesByDay, weekStartsOn],
+  );
+
+  const navigableWeekStarts = useMemo(() => {
+    if (!agg) {
+      return [] as string[];
+    }
+    const set = new Set<string>();
+    for (const d of chartStrictDayKeys) {
+      const sw = agg.sessionWallClockMinutesByDay[d] ?? 0;
+      const sc = agg.sessionsByDay[d] ?? 0;
+      if (sw > 0 || sc > 0) {
+        const ws = localWeekStartKeyFromDayKey(d, weekStartsOn);
+        if (ws) {
+          set.add(ws);
+        }
+      }
+    }
+    if (set.size === 0) {
+      for (const r of tagWeekCalendarRows) {
+        set.add(r.weekStart);
+      }
+    }
+    if (set.size === 0) {
+      for (const r of projectWeekCalendarRows) {
+        set.add(r.weekStart);
+      }
+    }
+    return [...set].sort();
+  }, [
+    agg,
+    chartStrictDayKeys,
+    weekStartsOn,
+    tagWeekCalendarRows,
+    projectWeekCalendarRows,
+  ]);
+
+  const navigableWeeksKey = navigableWeekStarts.join("|");
+
+  useEffect(() => {
+    setChartWeekNavIndex(-1);
+  }, [navigableWeeksKey]);
+
+  const chartWeekNavIndexSafe =
+    navigableWeekStarts.length <= 1
+      ? 0
+      : chartWeekNavIndex < 0
+      ? navigableWeekStarts.length - 1
+      : Math.min(chartWeekNavIndex, navigableWeekStarts.length - 1);
+
+  const reportingDayKeys = useMemo(() => {
+    if (navigableWeekStarts.length > 1) {
+      const ws = navigableWeekStarts[chartWeekNavIndexSafe];
+      if (!ws) {
+        return dayKeys;
+      }
+      return [0, 1, 2, 3, 4, 5, 6].map((i) => addDaysYmd(ws, i));
+    }
+    const strict = dayKeys.filter((d) => d !== UNDATED_KEY);
+    if (strict.length > 0) {
+      return dayKeys;
+    }
+    if (navigableWeekStarts.length === 1) {
+      const ws = navigableWeekStarts[0];
+      if (ws) {
+        return [0, 1, 2, 3, 4, 5, 6].map((i) => addDaysYmd(ws, i));
+      }
+    }
+    return dayKeys;
+  }, [navigableWeekStarts, chartWeekNavIndexSafe, dayKeys]);
+
+  const peak = useMemo(() => {
+    if (!agg) {
+      return 1;
+    }
+    let m = 0;
+    for (const d of reportingDayKeys) {
+      if (d === UNDATED_KEY) {
+        continue;
+      }
+      const s = agg.sessionsByDay[d] ?? 0;
+      if (s > m) {
+        m = s;
+      }
+      const td = (agg.tasksByDayDone[d] ?? 0) + (agg.tasksByDayActive[d] ?? 0);
+      if (td > m) {
+        m = td;
+      }
+    }
+    return m || 1;
+  }, [agg, reportingDayKeys]);
+
+  const peakTasks = useMemo(() => {
+    if (!agg) {
+      return 1;
+    }
+    let m = 0;
+    for (const d of reportingDayKeys) {
+      if (d === UNDATED_KEY) {
+        continue;
+      }
+      const sum = (agg.tasksByDayDone[d] ?? 0) + (agg.tasksByDayActive[d] ?? 0);
+      if (sum > m) {
+        m = sum;
+      }
+    }
+    return m || 1;
+  }, [agg, reportingDayKeys]);
+
+  const peakTaskMinutes = useMemo(() => {
+    if (!agg) {
+      return 1;
+    }
+    let m = 0;
+    for (const d of reportingDayKeys) {
+      if (d === UNDATED_KEY) {
+        continue;
+      }
+      const v = agg.taskMinutesByDay[d] ?? 0;
+      if (v > m) {
+        m = v;
+      }
+    }
+    return m || 1;
+  }, [agg, reportingDayKeys]);
+
+  const peakSessionWallMinutes = useMemo(() => {
+    if (!agg) {
+      return 1;
+    }
+    let m = 0;
+    for (const d of reportingDayKeys) {
+      if (d === UNDATED_KEY) {
+        continue;
+      }
+      const v = agg.sessionWallClockMinutesByDay[d] ?? 0;
+      if (v > m) {
+        m = v;
+      }
+    }
+    return m || 1;
+  }, [agg, reportingDayKeys]);
+
+  const tagWeekCalendarRowsVisible = useMemo(() => {
+    if (navigableWeekStarts.length <= 1) {
+      return tagWeekCalendarRows;
+    }
+    const ws = navigableWeekStarts[chartWeekNavIndexSafe];
+    return tagWeekCalendarRows.filter((r) => r.weekStart === ws);
+  }, [tagWeekCalendarRows, navigableWeekStarts, chartWeekNavIndexSafe]);
+
+  const tagCalendarWeekGroups = useMemo(() => {
+    const byWeek = new Map<string, TagWeekCalendarRow[]>();
+    for (const r of tagWeekCalendarRowsVisible) {
+      const list = byWeek.get(r.weekStart) ?? [];
+      list.push(r);
+      byWeek.set(r.weekStart, list);
+    }
+    const weekOrder = [...byWeek.keys()].sort();
+    return weekOrder.map((weekStart) => {
+      const rows = [...(byWeek.get(weekStart) ?? [])].sort((a, b) => {
+        if (isFallbackTaskTagKey(a.tagKey) && !isFallbackTaskTagKey(b.tagKey)) {
+          return 1;
+        }
+        if (!isFallbackTaskTagKey(a.tagKey) && isFallbackTaskTagKey(b.tagKey)) {
+          return -1;
+        }
+        return a.tagKey.localeCompare(b.tagKey);
+      });
+      return { weekStart, rows };
+    });
+  }, [tagWeekCalendarRowsVisible]);
+
+  const projectWeekCalendarRowsVisible = useMemo(() => {
+    if (navigableWeekStarts.length <= 1) {
+      return projectWeekCalendarRows;
+    }
+    const ws = navigableWeekStarts[chartWeekNavIndexSafe];
+    return projectWeekCalendarRows.filter((r) => r.weekStart === ws);
+  }, [projectWeekCalendarRows, navigableWeekStarts, chartWeekNavIndexSafe]);
+
+  const projectCalendarWeekGroups = useMemo(() => {
+    const byWeek = new Map<string, ProjectWeekCalendarRow[]>();
+    for (const r of projectWeekCalendarRowsVisible) {
+      const list = byWeek.get(r.weekStart) ?? [];
+      list.push(r);
+      byWeek.set(r.weekStart, list);
+    }
+    const weekOrder = [...byWeek.keys()].sort();
+    return weekOrder.map((weekStart) => {
+      const rows = [...(byWeek.get(weekStart) ?? [])].sort((a, b) => {
+        if (a.projectKey === "" && b.projectKey !== "") {
+          return 1;
+        }
+        if (b.projectKey === "" && a.projectKey !== "") {
+          return -1;
+        }
+        return a.projectKey.localeCompare(b.projectKey);
+      });
+      return { weekStart, rows };
+    });
+  }, [projectWeekCalendarRowsVisible]);
+
+  const toggleTag = (tag: string) => {
+    const key = normalizeTagKey(tag).toLowerCase();
+    setSelectedTags((prev) => {
+      const has = prev.some((p) => normalizeTagKey(p).toLowerCase() === key);
+      if (has) {
+        return prev.filter((p) => normalizeTagKey(p).toLowerCase() !== key);
+      }
+      return [...prev, tag];
+    });
+  };
+
+  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."
+      : "Cannot reach the local Kronosys API (default 127.0.0.1:5566). Make sure the server is running.";
+
+  const trackCodeMetrics = trackCodeMetricsFromCfg(
+    payload ? (payload.cfg as Record<string, unknown> | undefined) : undefined,
+  );
+
+  const hasReportingChartData =
+    !!agg &&
+    (dayKeys.length > 0 ||
+      navigableWeekStarts.length > 1 ||
+      tagWeekCalendarRows.length > 0 ||
+      projectWeekCalendarRows.length > 0);
+
+  useEffect(() => {
+    if (!payload || !agg) {
+      return;
+    }
+    if (searchParams.get("tour") === "replay") {
+      setReportingTourOpen(true);
+      stripReportingTourReplayParam();
+      return;
+    }
+    if (!isReportingTourCompleted()) {
+      setReportingTourOpen(true);
+    }
+  }, [payload, agg, searchParams, stripReportingTourReplayParam]);
+
+  const reportingTocEntries = (() => {
+    if (!payload) {
+      return [] as { id: string; label: string }[];
+    }
+    const rows: { id: string; label: string }[] = [
+      { id: "report-filters", label: t.filtersTitle },
+    ];
+    if (trackCodeMetrics) {
+      rows.push({
+        id: "report-workspace-snapshot",
+        label: t.workspaceSnapshotTitle,
+      });
+    }
+    if (!agg) {
+      return rows;
+    }
+    rows.push({ id: "report-summary-kpis", label: t.tocSummaryKpis });
+    if (trackCodeMetrics) {
+      rows.push({ id: "report-loc-metrics", label: t.tocLocSection });
+    }
+    if (!hasReportingChartData) {
+      return rows;
+    }
+    if (navigableWeekStarts.length > 1) {
+      rows.push({ id: "report-week-nav", label: t.tocWeekNav });
+    }
+    rows.push(
+      { id: "report-chart-sessions", label: t.chartSessionsPerDay },
+      { id: "report-chart-tasks", label: t.chartTasksByStatusPerDay },
+      { id: "report-chart-task-time", label: t.chartTaskTimePerDay },
+      { id: "report-chart-session-wall", label: t.chartSessionWallPerDay },
+      { id: "report-daily-table", label: t.tocDailyTable },
+      { id: "report-tag-time", label: t.tocTagTimeSection },
+      { id: "report-projects", label: t.projectSectionTitle },
+    );
+    return rows;
+  })();
+
+  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="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
+                href={withDashboardSessionParam("/", dashboardSessionNavId)}
+                className="text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+              >
+                Kronosys
+              </Link>
+              <span className="text-zinc-400 dark:text-zinc-600">/</span>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {t.title}
+              </span>
+            </div>
+            <p className="flex flex-wrap items-center gap-x-2 text-xs font-medium leading-snug text-zinc-500 dark:text-zinc-400">
+              <span>{dt.brandTagline}</span>
+              <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                ·
+              </span>
+              <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <AppShellRouteNav
+              current="reporting"
+              labels={{
+                dashboard: t.dashboard,
+                reporting: t.reporting,
+                settings: t.settings,
+                guide: t.guide,
+              }}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+            />
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={handleManualRefresh}
+            />
+            <LanguageMenu
+              lang={lang}
+              labelEn="English"
+              labelFr="Français"
+              menuHeading={lang === "fr" ? "Langue" : "Language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
+              onSelect={(next) => void postLang(next)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <div className="w-full px-5 py-8 sm:px-8 lg:px-10 xl:px-12">
+        <div
+          id="reporting-tour-anchor-intro"
+          className="mb-8 scroll-mt-28 space-y-3 text-sm text-zinc-600 dark:text-zinc-500"
+        >
+          <p>{t.subtitle}</p>
+          <p className="text-zinc-500 dark:text-zinc-400">
+            {t.archivedSessionsReportingNote}
+          </p>
+          {payload ? (
+            <div className="pt-1">
+              <button
+                type="button"
+                className="rounded-lg border border-zinc-500/50 bg-zinc-500/10 px-3 py-2 text-sm font-medium text-zinc-800 transition hover:border-zinc-500/75 hover:bg-zinc-500/18 dark:border-zinc-400/45 dark:bg-zinc-600/20 dark:text-zinc-100 dark:hover:border-zinc-400/60 dark:hover:bg-zinc-600/30"
+                onClick={() => {
+                  resetReportingTour();
+                  setReportingTourOpen(true);
+                }}
+              >
+                {dt.tourUndismissBtn}
+              </button>
+            </div>
+          ) : null}
+        </div>
+
+        {error && (
+          <div
+            className="mb-8 rounded-lg border border-red-900/60 bg-red-950/40 px-4 py-3 text-sm text-red-100"
+            role="alert"
+          >
+            <strong className="block text-red-200">API</strong>
+            {headerApiError}
+            <pre className="mt-2 overflow-x-auto text-xs text-red-200/80">
+              {error}
+            </pre>
+          </div>
+        )}
+
+        {!payload && !error && (
+          <p className="text-sm text-zinc-500">{t.loading}</p>
+        )}
+
+        {payload && (
+          <div
+            id="reporting-tour-anchor-toc-layout"
+            className="lg:flex lg:items-start lg:gap-8 xl:gap-10"
+          >
+            <div className="min-w-0 flex-1">
+              <ReportingPageTocMobile
+                title={t.tocTitle}
+                ariaLabel={t.tocNavAria}
+                entries={reportingTocEntries}
+              />
+              <section
+                id="report-filters"
+                className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+              >
+                <div className="flex flex-wrap items-center gap-2 gap-y-2">
+                  <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                    {t.filtersTitle}
+                  </h2>
+                  <InlineMetricHelpTrigger
+                    ariaLabel={t.filtersHelpAriaLabel}
+                    body={t.filtersHelpBody}
+                    preserveLineBreaks
+                    panelClassName="w-[min(calc(100vw-2rem),24rem)]"
+                  />
+                  {(reportingNonFinal.sessionsNonFinal ||
+                    reportingNonFinal.projectsNonFinal ||
+                    reportingNonFinal.tagsNonFinal) && (
+                    <div className="flex min-w-0 max-w-full flex-wrap items-center gap-x-1.5 gap-y-1 border-l border-zinc-600/70 pl-2.5 dark:border-zinc-500/50">
+                      <span className="shrink-0 text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                        {t.reportingNonFinalLegend}
+                      </span>
+                      {reportingNonFinal.sessionsNonFinal ? (
+                        <span className="rounded border border-emerald-600/50 bg-emerald-950/40 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-emerald-700 dark:border-emerald-500/45 dark:bg-emerald-950/50 dark:text-emerald-400">
+                          {t.reportingNonFinalSessionsBadge}
+                        </span>
+                      ) : null}
+                      {reportingNonFinal.projectsNonFinal ? (
+                        <span className="rounded border border-emerald-600/50 bg-emerald-950/40 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-emerald-700 dark:border-emerald-500/45 dark:bg-emerald-950/50 dark:text-emerald-400">
+                          {t.reportingNonFinalProjectsBadge}
+                        </span>
+                      ) : null}
+                      {reportingNonFinal.tagsNonFinal ? (
+                        <span className="rounded border border-emerald-600/50 bg-emerald-950/40 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-emerald-700 dark:border-emerald-500/45 dark:bg-emerald-950/50 dark:text-emerald-400">
+                          {t.reportingNonFinalTagsBadge}
+                        </span>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
+                <div className="mt-4 flex flex-wrap items-end gap-4">
+                  <label className="flex flex-col gap-1 text-xs text-zinc-500">
+                    {t.dateFrom}
+                    <input
+                      type="date"
+                      value={dateFrom}
+                      onChange={(e) => setDateFrom(e.target.value)}
+                      className="rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100"
+                    />
+                  </label>
+                  <label className="flex flex-col gap-1 text-xs text-zinc-500">
+                    {t.dateTo}
+                    <input
+                      type="date"
+                      value={dateTo}
+                      onChange={(e) => setDateTo(e.target.value)}
+                      className="rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100"
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
+                    onClick={() => {
+                      const p = reportingPresetDay();
+                      setDateFrom(p.from);
+                      setDateTo(p.to);
+                    }}
+                  >
+                    {t.today}
+                  </button>
+                  <button
+                    type="button"
+                    className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
+                    onClick={() => {
+                      setDateFrom("");
+                      setDateTo("");
+                    }}
+                  >
+                    {t.clearDates}
+                  </button>
+                </div>
+                <div
+                  className="mt-4 flex flex-col gap-2"
+                  role="group"
+                  aria-label={t.presetPeriodLabel}
+                >
+                  <span className="text-xs font-medium text-zinc-500">
+                    {t.presetPeriodLabel}
+                  </span>
+                  <div className="flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800"
+                      onClick={() => {
+                        const p = reportingPresetDay();
+                        setDateFrom(p.from);
+                        setDateTo(p.to);
+                      }}
+                    >
+                      {t.presetDay}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800"
+                      onClick={() => {
+                        const p = reportingPresetWeek();
+                        setDateFrom(p.from);
+                        setDateTo(p.to);
+                      }}
+                    >
+                      {t.presetWeek}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800"
+                      onClick={() => {
+                        const p = reportingPresetMonth();
+                        setDateFrom(p.from);
+                        setDateTo(p.to);
+                      }}
+                    >
+                      {t.presetMonth}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800"
+                      onClick={() => {
+                        const p = reportingPresetYear();
+                        setDateFrom(p.from);
+                        setDateTo(p.to);
+                      }}
+                    >
+                      {t.presetYear}
+                    </button>
+                  </div>
+                  <p className="text-[0.65rem] leading-snug text-zinc-600">
+                    {t.presetPeriodHint}
+                  </p>
+                </div>
+                <p className="mt-3 text-xs text-zinc-500">{t.tagsHint}</p>
+                <div className="mt-2">
+                  <span className="text-xs font-medium uppercase text-zinc-500">
+                    {t.tagsLabel}
+                  </span>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    {tagKeys.length === 0 ? (
+                      <span className="text-sm text-zinc-500">—</span>
+                    ) : (
+                      tagKeys.map((tag) => {
+                        const on = selectedTags.some(
+                          (p) =>
+                            normalizeTagKey(p).toLowerCase() ===
+                            normalizeTagKey(tag).toLowerCase(),
+                        );
+                        return (
+                          <button
+                            key={tag}
+                            type="button"
+                            onClick={() => toggleTag(tag)}
+                            className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
+                              on
+                                ? "border-violet-500 bg-violet-600/30 text-violet-100"
+                                : "border-zinc-600 bg-zinc-950 text-zinc-400 hover:border-zinc-500"
+                            }`}
+                          >
+                            {formatTagDisplay(tag)}
+                          </button>
+                        );
+                      })
+                    )}
+                  </div>
+                </div>
+                <div className="mt-4 flex flex-wrap items-center gap-3">
+                  <button
+                    type="button"
+                    disabled={!reportingFiltersActive}
+                    className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:border-zinc-500 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                    onClick={() => {
+                      setDateFrom("");
+                      setDateTo("");
+                      setSelectedTags([]);
+                    }}
+                  >
+                    {t.resetAllFilters}
+                  </button>
+                </div>
+              </section>
+
+              {trackCodeMetrics ? (
+                <section
+                  id="report-workspace-snapshot"
+                  className="mb-10 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                >
+                  <div className="flex flex-wrap items-start justify-between gap-3">
+                    <div className="flex min-w-0 max-w-full items-center gap-1">
+                      <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                        {t.workspaceSnapshotTitle}
+                      </h2>
+                      <InlineMetricHelpTrigger
+                        ariaLabel={t.metricHelpWorkspaceTitleAria}
+                        body={t.metricHelpWorkspaceTitleBody}
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      disabled={workspaceSnapBusy}
+                      className="shrink-0 rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50"
+                      onClick={() => void refreshWorkspaceSnapshot()}
+                    >
+                      {workspaceSnapBusy
+                        ? t.workspaceSnapshotRefreshing
+                        : t.workspaceSnapshotRefresh}
+                    </button>
+                  </div>
+                  <p className="mt-2 text-xs text-zinc-500">
+                    {t.workspaceSnapshotIntro}
+                  </p>
+                  {(() => {
+                    const ws = payload.workspaceCodeSnapshot as
+                      | WorkspaceCodeSnapshotPayload
+                      | undefined;
+                    if (!ws) {
+                      return (
+                        <p className="mt-4 text-sm text-zinc-500">
+                          {t.workspaceSnapshotRefreshHint}
+                        </p>
+                      );
+                    }
+                    if (ws.ok) {
+                      return (
+                        <>
+                          <p className="mt-2 text-xs text-zinc-500">
+                            {ws.source === "git"
+                              ? t.workspaceSnapshotSourceGit
+                              : t.workspaceSnapshotSourceWalk}
+                          </p>
+                          <div className="mt-3 flex flex-wrap gap-6 text-sm">
+                            <div>
+                              <div className="flex min-h-5 items-center gap-0.5">
+                                <span className="text-xs uppercase text-zinc-500">
+                                  {t.workspaceSnapshotTotalLines}
+                                </span>
+                                <InlineMetricHelpTrigger
+                                  ariaLabel={t.metricHelpWsTotalLinesAria}
+                                  body={t.metricHelpWsTotalLinesBody}
+                                />
+                              </div>
+                              <div className="tabular-nums text-lg font-semibold text-zinc-100">
+                                {ws.totalLines}
+                              </div>
+                            </div>
+                            <div>
+                              <div className="flex min-h-5 items-center gap-0.5">
+                                <span className="text-xs uppercase text-zinc-500">
+                                  {t.workspaceSnapshotFileCount}
+                                </span>
+                                <InlineMetricHelpTrigger
+                                  ariaLabel={t.metricHelpWsFileCountAria}
+                                  body={t.metricHelpWsFileCountBody}
+                                />
+                              </div>
+                              <div className="tabular-nums text-lg font-semibold text-zinc-100">
+                                {ws.fileCount}
+                              </div>
+                            </div>
+                          </div>
+                          {ws.byLanguage.length === 0 ? (
+                            <p className="mt-4 text-sm text-zinc-500">—</p>
+                          ) : (
+                            <div className="mt-4 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.workspaceSnapshotColLang}
+                                        </span>
+                                        <InlineMetricHelpTrigger
+                                          ariaLabel={t.metricHelpWsColLangAria}
+                                          body={t.metricHelpWsColLangBody}
+                                        />
+                                      </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.workspaceSnapshotColLines}
+                                        </span>
+                                        <InlineMetricHelpTrigger
+                                          ariaLabel={t.metricHelpWsColLinesAria}
+                                          body={t.metricHelpWsColLinesBody}
+                                        />
+                                      </div>
+                                    </th>
+                                    <th className="py-2 font-medium">
+                                      <div className="flex min-h-5 items-center gap-0.5">
+                                        <span>
+                                          {t.workspaceSnapshotColPercent}
+                                        </span>
+                                        <InlineMetricHelpTrigger
+                                          align="end"
+                                          ariaLabel={
+                                            t.metricHelpWsColPercentAria
+                                          }
+                                          body={t.metricHelpWsColPercentBody}
+                                        />
+                                      </div>
+                                    </th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {ws.byLanguage.map((row) => (
+                                    <tr
+                                      key={row.languageId}
+                                      className="border-b border-zinc-800/80 last:border-0"
+                                    >
+                                      <td className="py-2 pr-3 font-mono text-xs text-zinc-400">
+                                        {row.languageId}
+                                      </td>
+                                      <td className="py-2 pr-3 tabular-nums text-zinc-200">
+                                        {row.lines}
+                                      </td>
+                                      <td className="py-2">
+                                        <div className="flex items-center gap-2">
+                                          <div className="h-2 min-w-[4rem] flex-1 overflow-hidden rounded bg-zinc-800">
+                                            <div
+                                              className="h-full rounded bg-sky-600/85"
+                                              style={{
+                                                width: `${Math.min(
+                                                  100,
+                                                  row.percent,
+                                                )}%`,
+                                              }}
+                                            />
+                                          </div>
+                                          <span className="w-14 shrink-0 tabular-nums text-zinc-400">
+                                            {row.percent.toFixed(1)}%
+                                          </span>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+                            </div>
+                          )}
+                        </>
+                      );
+                    }
+                    return (
+                      <p className="mt-4 text-sm text-amber-200/90">
+                        {ws.reason === "no_workspace"
+                          ? t.workspaceSnapshotNoWorkspace
+                          : ws.reason === "empty"
+                          ? ws.message || t.workspaceSnapshotEmpty
+                          : ws.message || t.workspaceSnapshotError}
+                      </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}
+                </section>
+              ) : null}
+
+              {agg && (
+                <>
+                  <section
+                    id="report-summary-kpis"
+                    className="mb-10 scroll-mt-28 flex flex-col gap-3"
+                  >
+                    <div className="flex flex-wrap items-center gap-2">
+                      <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                        {t.tocSummaryKpis}
+                      </h2>
+                      <ReportingFilteredBadge
+                        active={reportingFiltersActive}
+                        label={t.sectionFilteredBadge}
+                        titleText={t.sectionFilteredBadgeTitle}
+                      />
+                    </div>
+                    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summarySessionsInRange}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpSessionsAria}
+                            body={t.metricHelpSessionsBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.sessionCountContributing}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryTaskEvents}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpTaskRowsAria}
+                            body={t.metricHelpTaskRowsBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.taskCountContributing}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryKronoFocusCompleted}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpKronoFocusCompletedAria}
+                            body={t.metricHelpKronoFocusCompletedBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.kronoFocusSessionsCompleted}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryKronoFocusTasksUsed}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpKronoFocusTasksUsedAria}
+                            body={t.metricHelpKronoFocusTasksUsedBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.kronoFocusTasksUsedCount}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryKronoFocusCycles}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpKronoFocusCyclesAria}
+                            body={t.metricHelpKronoFocusCyclesBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.kronoFocusTaskCyclesSum}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryTaskTimeRecorded}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpTaskTimeAria}
+                            body={t.metricHelpTaskTimeBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {formatDuration(agg.taskMinutesTotal)}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summarySessionCoding}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpSessionCodingAria}
+                            body={t.metricHelpSessionCodingBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {formatDuration(agg.sessionCodingMinutesTotal)}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summarySessionActive}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpSessionActiveAria}
+                            body={t.metricHelpSessionActiveBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {formatDuration(agg.sessionActiveMinutesTotal)}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summarySessionWallClock}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpSessionWallSummaryAria}
+                            body={t.metricHelpSessionWallSummaryBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {formatDuration(agg.sessionWallClockMinutesTotal)}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryAssiduityWithReference}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpAssiduityRefAria}
+                            body={t.metricHelpAssiduityRefBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.assiduityReferenceSessionCount}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryAssiduityLateSessions}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpAssiduityLateCountAria}
+                            body={t.metricHelpAssiduityLateCountBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.assiduityLateSessionCount}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryAssiduityLateTotal}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpAssiduityLateTotalAria}
+                            body={t.metricHelpAssiduityLateTotalBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {formatDuration(agg.assiduityLateMinutesTotal)}
+                        </div>
+                      </div>
+                      <div className="rounded-xl border border-zinc-800 bg-zinc-900/50 p-4">
+                        <div className="flex min-h-5 items-center gap-0.5">
+                          <span className="text-xs uppercase text-zinc-500">
+                            {t.summaryAssiduityAvgLateWhenLate}
+                          </span>
+                          <InlineMetricHelpTrigger
+                            align="end"
+                            ariaLabel={t.metricHelpAssiduityAvgLateAria}
+                            body={t.metricHelpAssiduityAvgLateBody}
+                          />
+                        </div>
+                        <div className="mt-1 text-2xl font-semibold tabular-nums">
+                          {agg.assiduityAverageLateMinutesWhenLate == null
+                            ? "—"
+                            : formatDuration(agg.assiduityAverageLateMinutesWhenLate)}
+                        </div>
+                      </div>
+                    </div>
+                    {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>
+
+                  {trackCodeMetrics ? (
+                    <section
+                      id="report-loc-metrics"
+                      className="mb-10 scroll-mt-28 space-y-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
+                    >
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                          {t.tocLocSection}
+                        </h2>
+                        <ReportingFilteredBadge
+                          active={reportingFiltersActive}
+                          label={t.sectionFilteredBadge}
+                          titleText={t.sectionFilteredBadgeTitle}
+                        />
+                      </div>
+                      <p className="text-xs text-zinc-500">
+                        {t.locMetricsHint}
+                      </p>
+                      <div className="grid gap-3 sm:grid-cols-3">
+                        <div className="rounded-lg border border-zinc-800/80 bg-zinc-950/40 p-3">
+                          <div className="flex min-h-5 items-center gap-0.5">
+                            <span className="text-xs uppercase text-zinc-500">
+                              {t.summaryLinesWrittenTotal}
+                            </span>
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpLinesTotalAria}
+                              body={t.metricHelpLinesTotalBody}
+                            />
+                          </div>
+                          <div className="mt-1 text-xl font-semibold tabular-nums text-zinc-100">
+                            {agg.linesWrittenTotalSum}
+                          </div>
+                        </div>
+                        <div className="rounded-lg border border-zinc-800/80 bg-zinc-950/40 p-3">
+                          <div className="flex min-h-5 items-center gap-0.5">
+                            <span className="text-xs uppercase text-zinc-500">
+                              {t.summaryLinesWrittenHuman}
+                            </span>
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpLinesHumanAria}
+                              body={t.metricHelpLinesHumanBody}
+                            />
+                          </div>
+                          <div className="mt-1 text-xl font-semibold tabular-nums text-emerald-400/90">
+                            {agg.linesWrittenHumanSum}
+                          </div>
+                        </div>
+                        <div className="rounded-lg border border-zinc-800/80 bg-zinc-950/40 p-3">
+                          <div className="flex min-h-5 items-center gap-0.5">
+                            <span className="text-xs uppercase text-zinc-500">
+                              {t.summaryLinesWrittenAi}
+                            </span>
+                            <InlineMetricHelpTrigger
+                              align="end"
+                              ariaLabel={t.metricHelpLinesAiAria}
+                              body={t.metricHelpLinesAiBody}
+                            />
+                          </div>
+                          <div className="mt-1 text-xl font-semibold tabular-nums text-violet-400/90">
+                            {agg.linesWrittenAiSum}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="grid gap-6 lg:grid-cols-2">
+                        <div>
+                          <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.locByLanguageSectionTitle}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpLocByLangTitleAria}
+                              body={t.metricHelpLocByLangTitleBody}
+                            />
+                          </div>
+                          {agg.locByLanguageMerged.length === 0 ? (
+                            <p className="mt-3 text-sm text-zinc-500">—</p>
+                          ) : (
+                            <table className="mt-3 w-full min-w-[12rem] 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.locByLanguageColLang}</span>
+                                      <InlineMetricHelpTrigger
+                                        ariaLabel={
+                                          t.metricHelpAggLocColLangAria
+                                        }
+                                        body={t.metricHelpAggLocColLangBody}
+                                      />
+                                    </div>
+                                  </th>
+                                  <th className="py-2 font-medium tabular-nums">
+                                    <div className="flex min-h-5 items-center gap-0.5">
+                                      <span>{t.locByLanguageColLines}</span>
+                                      <InlineMetricHelpTrigger
+                                        align="end"
+                                        ariaLabel={
+                                          t.metricHelpAggLocColLinesAria
+                                        }
+                                        body={t.metricHelpAggLocColLinesBody}
+                                      />
+                                    </div>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {agg.locByLanguageMerged.map(([lang, n]) => (
+                                  <tr
+                                    key={lang}
+                                    className="border-b border-zinc-800/80 last:border-0"
+                                  >
+                                    <td className="py-2 pr-3 font-mono text-xs text-zinc-400">
+                                      {lang}
+                                    </td>
+                                    <td className="py-2 tabular-nums text-zinc-200">
+                                      {n}
+                                    </td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          )}
+                        </div>
+                        <div>
+                          <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.codingSignalsSectionTitle}
+                            </h3>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpCodingSignalsTitleAria}
+                              body={t.metricHelpCodingSignalsTitleBody}
+                            />
+                          </div>
+                          {agg.codingSignalsByLanguageMerged.length === 0 ? (
+                            <p className="mt-3 text-sm text-zinc-500">—</p>
+                          ) : (
+                            <table className="mt-3 w-full min-w-[12rem] 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.codingSignalsColLang}</span>
+                                      <InlineMetricHelpTrigger
+                                        ariaLabel={
+                                          t.metricHelpAggSigColLangAria
+                                        }
+                                        body={t.metricHelpAggSigColLangBody}
+                                      />
+                                    </div>
+                                  </th>
+                                  <th className="py-2 font-medium tabular-nums">
+                                    <div className="flex min-h-5 items-center gap-0.5">
+                                      <span>{t.codingSignalsColCount}</span>
+                                      <InlineMetricHelpTrigger
+                                        align="end"
+                                        ariaLabel={
+                                          t.metricHelpAggSigColCountAria
+                                        }
+                                        body={t.metricHelpAggSigColCountBody}
+                                      />
+                                    </div>
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {agg.codingSignalsByLanguageMerged.map(
+                                  ([lang, n]) => (
+                                    <tr
+                                      key={lang}
+                                      className="border-b border-zinc-800/80 last:border-0"
+                                    >
+                                      <td className="py-2 pr-3 font-mono text-xs text-zinc-400">
+                                        {lang}
+                                      </td>
+                                      <td className="py-2 tabular-nums text-zinc-200">
+                                        {n}
+                                      </td>
+                                    </tr>
+                                  ),
+                                )}
+                              </tbody>
+                            </table>
+                          )}
+                        </div>
+                      </div>
+                    </section>
+                  ) : null}
+
+                  {!hasReportingChartData ? (
+                    <p className="text-sm text-zinc-500">{t.noRowsInRange}</p>
+                  ) : (
+                    <>
+                      {navigableWeekStarts.length > 1 ? (
+                        <section
+                          id="report-week-nav"
+                          className="mb-8 scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-5"
+                          aria-label={t.weekNavAriaLabel}
+                        >
+                          <div className="mb-2 flex flex-wrap items-center gap-2">
+                            <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-400">
+                              {t.tocWeekNav}
+                            </h2>
+                            <ReportingFilteredBadge
+                              active={reportingFiltersActive}
+                              label={t.sectionFilteredBadge}
+                              titleText={t.sectionFilteredBadgeTitle}
+                            />
+                          </div>
+                          <div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center sm:justify-between">
+                            <p className="max-w-xl text-xs text-zinc-500">
+                              {t.weekNavHelpHint}
+                            </p>
+                            <div className="flex flex-wrap items-center justify-center gap-2 sm:justify-end">
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpWeekNavAria}
+                                body={t.metricHelpWeekNavBody}
+                              />
+                              <button
+                                type="button"
+                                className="inline-flex items-center gap-1 rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                                disabled={chartWeekNavIndexSafe <= 0}
+                                aria-label={t.weekNavPrev}
+                                onClick={() =>
+                                  setChartWeekNavIndex((i) => {
+                                    const cur =
+                                      i < 0
+                                        ? navigableWeekStarts.length - 1
+                                        : i;
+                                    return Math.max(0, cur - 1);
+                                  })
+                                }
+                              >
+                                <ChevronLeft
+                                  className="h-4 w-4 shrink-0"
+                                  aria-hidden
+                                />
+                                {t.weekNavPrev}
+                              </button>
+                              <span className="min-w-[10rem] px-2 text-center text-sm font-medium tabular-nums text-zinc-100">
+                                {formatWeekRangeLabel(
+                                  navigableWeekStarts[chartWeekNavIndexSafe],
+                                  reportLocale,
+                                )}
+                              </span>
+                              <button
+                                type="button"
+                                className="inline-flex items-center gap-1 rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                                disabled={
+                                  chartWeekNavIndexSafe >=
+                                  navigableWeekStarts.length - 1
+                                }
+                                aria-label={t.weekNavNext}
+                                onClick={() =>
+                                  setChartWeekNavIndex((i) => {
+                                    const cur =
+                                      i < 0
+                                        ? navigableWeekStarts.length - 1
+                                        : i;
+                                    return Math.min(
+                                      navigableWeekStarts.length - 1,
+                                      cur + 1,
+                                    );
+                                  })
+                                }
+                              >
+                                {t.weekNavNext}
+                                <ChevronRight
+                                  className="h-4 w-4 shrink-0"
+                                  aria-hidden
+                                />
+                              </button>
+                            </div>
+                          </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}
+                            <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-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-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-daily-table"
+                        className="scroll-mt-28 overflow-x-auto rounded-xl border border-zinc-800 bg-zinc-900/50"
+                      >
+                        <div className="flex flex-wrap items-center gap-2 border-b border-zinc-800 px-4 py-3">
+                          <h3 className="text-sm font-semibold text-zinc-200">
+                            {t.tocDailyTable}
+                          </h3>
+                          <ReportingFilteredBadge
+                            active={reportingFiltersActive}
+                            label={t.sectionFilteredBadge}
+                            titleText={t.sectionFilteredBadgeTitle}
+                          />
+                        </div>
+                        <table className="w-full min-w-[48rem] text-left text-sm">
+                          <thead className="border-b border-zinc-800 text-xs uppercase text-zinc-500">
+                            <tr>
+                              <th className="px-4 py-3 font-medium">
+                                <div className="flex min-h-5 items-center gap-0.5">
+                                  <span>{t.tableDay}</span>
+                                  <InlineMetricHelpTrigger
+                                    ariaLabel={t.metricHelpTblDayAria}
+                                    body={t.metricHelpTblDayBody}
+                                  />
+                                </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.tableSessions}</span>
+                                  <InlineMetricHelpTrigger
+                                    ariaLabel={t.metricHelpTblSessionsAria}
+                                    body={t.metricHelpTblSessionsBody}
+                                  />
+                                </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.tableSessionWall}</span>
+                                  <InlineMetricHelpTrigger
+                                    ariaLabel={t.metricHelpTblSessionWallAria}
+                                    body={t.metricHelpTblSessionWallBody}
+                                  />
+                                </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.tableDone}</span>
+                                  <InlineMetricHelpTrigger
+                                    ariaLabel={t.metricHelpTblDoneAria}
+                                    body={t.metricHelpTblDoneBody}
+                                  />
+                                </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.tableActive}</span>
+                                  <InlineMetricHelpTrigger
+                                    align="end"
+                                    ariaLabel={t.metricHelpTblActiveAria}
+                                    body={t.metricHelpTblActiveBody}
+                                  />
+                                </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.tableTaskTime}</span>
+                                  <InlineMetricHelpTrigger
+                                    ariaLabel={t.metricHelpTblTaskTimeAria}
+                                    body={t.metricHelpTblTaskTimeBody}
+                                  />
+                                </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>
+                                  <InlineMetricHelpTrigger
+                                    align="end"
+                                    ariaLabel={t.metricHelpTblSessionCodingAria}
+                                    body={t.metricHelpTblSessionCodingBody}
+                                  />
+                                </div>
+                              </th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {reportingDayKeys.map((d) => (
+                              <tr
+                                key={d}
+                                className="border-b border-zinc-800/80 last:border-0"
+                              >
+                                <td className="px-4 py-2.5 text-zinc-200">
+                                  {dayLabel(d, t.undatedLabel)}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-zinc-300">
+                                  {agg.sessionsByDay[d] ?? 0}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-fuchsia-300/90">
+                                  {formatMinutesCell(
+                                    agg.sessionWallClockMinutesByDay[d],
+                                  )}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-emerald-400/90">
+                                  {agg.tasksByDayDone[d] ?? 0}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-amber-400/90">
+                                  {agg.tasksByDayActive[d] ?? 0}
+                                </td>
+                                <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-zinc-300">
+                                  {formatMinutesCell(
+                                    agg.sessionCodingMinutesByDay[d],
+                                  )}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </section>
+
+                      <section
+                        id="report-tag-time"
+                        className="mt-10 scroll-mt-28 space-y-8 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.tagTimeSectionTitle}
+                          </h3>
+                          <ReportingFilteredBadge
+                            active={reportingFiltersActive}
+                            label={t.sectionFilteredBadge}
+                            titleText={t.sectionFilteredBadgeTitle}
+                          />
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpTagTimeSectionAria}
+                            body={t.metricHelpTagTimeSectionBody}
+                          />
+                        </div>
+                        <p className="text-xs text-zinc-500">
+                          {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">
+                              {t.tagTimeByWeekTitle}
+                            </h4>
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpTagTimeWeekTableAria}
+                              body={t.metricHelpTagTimeWeekTableBody}
+                            />
+                            <InlineMetricHelpTrigger
+                              ariaLabel={t.metricHelpTagWeekCalendarAria}
+                              body={t.metricHelpTagWeekCalendarBody}
+                            />
+                          </div>
+
+                          <fieldset className="rounded-lg border border-zinc-800/90 bg-zinc-950/30 p-3">
+                            <legend className="px-1 text-xs text-zinc-500">
+                              <span className="inline-flex flex-wrap items-center gap-1">
+                                {t.tagWeekStartsOnLegend}
+                                <InlineMetricHelpTrigger
+                                  ariaLabel={t.metricHelpTagWeekStartsOnAria}
+                                  body={t.metricHelpTagWeekStartsOnBody}
+                                />
+                              </span>
+                            </legend>
+                            <div
+                              className="mt-2 flex flex-wrap gap-2"
+                              role="radiogroup"
+                              aria-label={t.tagWeekStartsOnLegend}
+                            >
+                              {(
+                                [
+                                  ["monday", t.weekStartsMonday],
+                                  ["sunday", t.weekStartsSunday],
+                                  ["saturday", t.weekStartsSaturday],
+                                ] as const
+                              ).map(([value, label]) => (
+                                <button
+                                  key={value}
+                                  type="button"
+                                  role="radio"
+                                  aria-checked={weekStartsOn === value}
+                                  onClick={() => persistWeekStartsOn(value)}
+                                  className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                                    weekStartsOn === value
+                                      ? "border-violet-500/80 bg-violet-950/50 text-violet-200"
+                                      : "border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
+                                  }`}
+                                >
+                                  {label}
+                                </button>
+                              ))}
+                            </div>
+                          </fieldset>
+
+                          {tagWeekCalendarRows.length === 0 ? (
+                            <p className="text-sm text-zinc-500">—</p>
+                          ) : tagWeekCalendarRowsVisible.length === 0 ? (
+                            <div className="space-y-2 text-sm text-zinc-500">
+                              <p>{t.weekNavNoTagDataThisWeek}</p>
+                              {archivedExcludedTaskMinutes > 1e-9 ? (
+                                <p className="text-amber-200/90">
+                                  {reportingArchivedExcludedRichText(
+                                    t.reportingArchivedExcludedAside,
+                                    archivedExcludedTaskMinutes,
+                                  )}
+                                </p>
+                              ) : null}
+                            </div>
+                          ) : (
+                            <div className="space-y-8">
+                              {tagCalendarWeekGroups.map(
+                                ({ weekStart, rows }) => (
+                                  <div key={weekStart}>
+                                    <div className="mb-2 flex flex-wrap items-center gap-2">
+                                      <p className="text-sm font-medium text-zinc-300">
+                                        {formatWeekRangeLabel(
+                                          weekStart,
+                                          reportLocale,
+                                        )}
+                                      </p>
+                                      <InlineMetricHelpTrigger
+                                        ariaLabel={
+                                          t.metricHelpTagTimeColWeekAria
+                                        }
+                                        body={t.metricHelpTagTimeColWeekBody}
+                                      />
+                                    </div>
+                                    <div className="overflow-x-auto rounded-lg border border-zinc-800/80">
+                                      <table className="w-full min-w-[28rem] text-left text-sm">
+                                        <thead className="border-b border-zinc-800 bg-zinc-950/40 text-xs uppercase text-zinc-500">
+                                          <tr>
+                                            <th className="px-2 py-2 pl-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>
+                                            {weekdayDateColumnHeaders(
+                                              weekStart,
+                                              reportLocale,
+                                            ).map((col) => (
+                                              <th
+                                                key={col.dateKey}
+                                                className="px-1 py-2 text-center font-medium normal-case"
+                                                title={col.dateKey}
+                                              >
+                                                <div className="flex flex-col items-center gap-0.5 leading-tight">
+                                                  <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500">
+                                                    {col.weekdayShort}
+                                                  </span>
+                                                  <span className="text-[0.7rem] font-medium tabular-nums text-zinc-300">
+                                                    {col.calendarDateShort}
+                                                  </span>
+                                                </div>
+                                              </th>
+                                            ))}
+                                            <th className="px-2 py-2 pr-3 text-center font-medium">
+                                              <div className="flex min-h-5 items-center justify-center gap-0.5">
+                                                <span>
+                                                  {t.tagWeekSumColumn}
+                                                </span>
+                                                <InlineMetricHelpTrigger
+                                                  align="end"
+                                                  ariaLabel={
+                                                    t.metricHelpTagTimeColMinutesAria
+                                                  }
+                                                  body={
+                                                    t.metricHelpTagTimeColMinutesBody
+                                                  }
+                                                />
+                                              </div>
+                                            </th>
+                                          </tr>
+                                        </thead>
+                                        <tbody>
+                                          {buildTagWeekDisplayBlocks(rows).map(
+                                            (block) => {
+                                              if (block.kind === "leaf") {
+                                                const row = block.row;
+                                                return (
+                                                  <tr
+                                                    key={`${weekStart}\0${row.tagKey}`}
+                                                    className="border-b border-zinc-800/70 last:border-0"
+                                                  >
+                                                    <ReportingTagNameCell
+                                                      tagKey={row.tagKey}
+                                                      displayLabel={
+                                                        row.displayTag ||
+                                                        row.tagKey
+                                                      }
+                                                      untaggedLabel={
+                                                        t.tagTimeUntagged
+                                                      }
+                                                      descriptions={
+                                                        tagDescriptions
+                                                      }
+                                                      className="px-2 py-2 pl-3 text-violet-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,
+                                                                )
+                                                              : "—"}
+                                                          </td>
+                                                        );
+                                                      },
+                                                    )}
+                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                                      {formatDuration(
+                                                        row.total,
+                                                      )}
+                                                    </td>
+                                                  </tr>
+                                                );
+                                              }
+                                              const rollupKey = `${weekStart}:::${block.projectKeyLower}`;
+                                              const open =
+                                                tagWeekRollupOpenKeys.has(
+                                                  rollupKey,
+                                                );
+                                              const rollupDesc =
+                                                reportingProjectDescriptionLine(
+                                                  block.projectKeyLower,
+                                                  projectDescriptions,
+                                                ) ?? "";
+                                              return (
+                                                <Fragment key={rollupKey}>
+                                                  <tr className="border-b border-zinc-800/70 bg-zinc-900/40">
+                                                    <td className="px-2 py-2 pl-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={() =>
+                                                            toggleTagWeekRollup(
+                                                              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>
+                                                    {block.parentSlots.map(
+                                                      (mins, i) => {
+                                                        const dateKey =
+                                                          addDaysYmd(
+                                                            block.weekStart,
+                                                            i,
+                                                          );
+                                                        return (
+                                                          <td
+                                                            key={dateKey}
+                                                            className="px-1 py-2 text-center tabular-nums text-zinc-200"
+                                                            title={dateKey}
+                                                          >
+                                                            {mins > 0
+                                                              ? formatDuration(
+                                                                  mins,
+                                                                )
+                                                              : "—"}
+                                                          </td>
+                                                        );
+                                                      },
+                                                    )}
+                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                                      {formatDuration(
+                                                        block.parentTotal,
+                                                      )}
+                                                    </td>
+                                                  </tr>
+                                                  {open
+                                                    ? block.children.map(
+                                                        (child) => (
+                                                          <tr
+                                                            key={`${weekStart}\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
+                                                                      ? formatDuration(
+                                                                          mins,
+                                                                        )
+                                                                      : "—"}
+                                                                  </td>
+                                                                );
+                                                              },
+                                                            )}
+                                                            <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-200">
+                                                              {formatDuration(
+                                                                child.total,
+                                                              )}
+                                                            </td>
+                                                          </tr>
+                                                        ),
+                                                      )
+                                                    : null}
+                                                </Fragment>
+                                              );
+                                            },
+                                          )}
+                                        </tbody>
+                                      </table>
+                                    </div>
+                                  </div>
+                                ),
+                              )}
+                            </div>
+                          )}
+                        </div>
+                      </section>
+
+                      <section
+                        id="report-projects"
+                        className="mt-10 scroll-mt-28 space-y-4 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.projectSectionTitle}
+                          </h3>
+                          <ReportingFilteredBadge
+                            active={reportingFiltersActive}
+                            label={t.sectionFilteredBadge}
+                            titleText={t.sectionFilteredBadgeTitle}
+                          />
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpProjectTitleAria}
+                            body={t.metricHelpProjectTitleBody}
+                          />
+                        </div>
+                        <p className="text-xs text-zinc-500">
+                          {t.projectTableHint}
+                        </p>
+
+                        <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">
+                            {t.projectWeeklyCalendarTitle}
+                          </h4>
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpProjectCalendarAria}
+                            body={t.metricHelpProjectCalendarBody}
+                          />
+                        </div>
+
+                        {projectWeekCalendarRows.length === 0 ? (
+                          <p className="text-sm text-zinc-500">—</p>
+                        ) : projectWeekCalendarRowsVisible.length === 0 ? (
+                          <div className="space-y-2 text-sm text-zinc-500">
+                            <p>{t.weekNavNoProjectDataThisWeek}</p>
+                            {archivedExcludedTaskMinutes > 1e-9 ? (
+                              <p className="text-amber-200/90">
+                                {reportingArchivedExcludedRichText(
+                                  t.reportingArchivedExcludedAside,
+                                  archivedExcludedTaskMinutes,
+                                )}
+                              </p>
+                            ) : null}
+                          </div>
+                        ) : (
+                          <div className="space-y-8">
+                            {projectCalendarWeekGroups.map(
+                              ({ weekStart, rows }) => (
+                                <div key={weekStart}>
+                                  <div className="mb-2 flex flex-wrap items-center gap-2">
+                                    <p className="text-sm font-medium text-zinc-300">
+                                      {formatWeekRangeLabel(
+                                        weekStart,
+                                        reportLocale,
+                                      )}
+                                    </p>
+                                    <InlineMetricHelpTrigger
+                                      ariaLabel={t.metricHelpTagTimeColWeekAria}
+                                      body={t.metricHelpTagTimeColWeekBody}
+                                    />
+                                  </div>
+                                  <div className="overflow-x-auto rounded-lg border border-zinc-800/80">
+                                    <table className="w-full min-w-[28rem] text-left text-sm">
+                                      <thead className="border-b border-zinc-800 bg-zinc-950/40 text-xs uppercase text-zinc-500">
+                                        <tr>
+                                          <th className="px-2 py-2 pl-3 font-medium">
+                                            <div className="flex min-h-5 items-center gap-0.5">
+                                              <span>{t.projectColProject}</span>
+                                              <InlineMetricHelpTrigger
+                                                ariaLabel={
+                                                  t.metricHelpProjectColProjAria
+                                                }
+                                                body={
+                                                  t.metricHelpProjectColProjBody
+                                                }
+                                              />
+                                            </div>
+                                          </th>
+                                          {weekdayDateColumnHeaders(
+                                            weekStart,
+                                            reportLocale,
+                                          ).map((col) => (
+                                            <th
+                                              key={`proj-${col.dateKey}`}
+                                              className="px-1 py-2 text-center font-medium normal-case"
+                                              title={col.dateKey}
+                                            >
+                                              <div className="flex flex-col items-center gap-0.5 leading-tight">
+                                                <span className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500">
+                                                  {col.weekdayShort}
+                                                </span>
+                                                <span className="text-[0.7rem] font-medium tabular-nums text-zinc-300">
+                                                  {col.calendarDateShort}
+                                                </span>
+                                              </div>
+                                            </th>
+                                          ))}
+                                          <th className="px-2 py-2 pr-3 text-center font-medium">
+                                            <div className="flex min-h-5 items-center justify-center gap-0.5">
+                                              <span>{t.tagWeekSumColumn}</span>
+                                              <InlineMetricHelpTrigger
+                                                align="end"
+                                                ariaLabel={
+                                                  t.metricHelpProjectColTimeAria
+                                                }
+                                                body={
+                                                  t.metricHelpProjectColTimeBody
+                                                }
+                                              />
+                                            </div>
+                                          </th>
+                                        </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)
+                                                    : "—"}
+                                                </td>
+                                              );
+                                            })}
+                                            <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                              {formatDuration(row.total)}
+                                            </td>
+                                          </tr>
+                                        ))}
+                                      </tbody>
+                                    </table>
+                                  </div>
+                                </div>
+                              ),
+                            )}
+                          </div>
+                        )}
+                      </section>
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+            <ReportingPageTocDesktop
+              title={t.tocTitle}
+              ariaLabel={t.tocNavAria}
+              entries={reportingTocEntries}
+            />
+          </div>
+        )}
+      </div>
+      <ScrollToTopFab ariaLabel={t.scrollToTopAria} />
+      <ReportingTour
+        open={reportingTourOpen}
+        onOpenChange={setReportingTourOpen}
+        dt={dt}
+        hasReportingChartData={hasReportingChartData}
+      />
+    </div>
+  );
+}
+
+export default function ReportingPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-zinc-100 px-6 py-10 text-sm text-zinc-500 dark:bg-zinc-900">
+          Kronosys…
+        </div>
+      }
+    >
+      <ReportingContent />
+    </Suspense>
+  );
+}