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

package/app/reporting/page.tsx

@@ -48,11 +48,13 @@ import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
 import {
   appShellHeaderClassName,
   appShellHeaderTitleMetaRowClassName,
-  appShellHeaderToolbarClassName,
 } from "@/lib/appShellHeaderClasses";
-import { AppShellCommandCenterPlaceholder } from "@/components/dashboard/AppShellCommandCenterPlaceholder";
+import { AppShellHeaderToolbarLayout } from "@/components/dashboard/AppShellHeaderToolbarLayout";
+import { AppShellToolbarCommandCenter } from "@/components/dashboard/AppShellToolbarCommandCenter";
 import { AppShellHeaderSessionMeta } from "@/components/dashboard/AppShellHeaderSessionMeta";
 import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
+import { AppShellHeaderKronoFocus } from "@/components/dashboard/AppShellHeaderKronoFocus";
+import { AppShellHeaderUtilityRibbon } from "@/components/dashboard/AppShellHeaderUtilityRibbon";
 import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
 import {
   reportingPresetDay,
@@ -65,7 +67,7 @@ import {
   ReportingPageTocDesktop,
   ReportingPageTocMobile,
 } from "@/components/dashboard/ReportingPageToc";
-import { reportingStrings } from "@/lib/reportingStrings";
+import { reportingNav, reportingStrings } from "@/lib/reportingStrings";
 import { trackCodeMetricsFromCfg } from "@/lib/usageProfile";
 import {
   addDaysYmd,
@@ -85,7 +87,7 @@ 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 { AppShellToolbarRouteNav } from "@/components/dashboard/AppShellToolbarRouteNav";
 import {
   calendarDateKeyInTimeZone,
   readDashboardTimeZoneFromCfg,
@@ -102,6 +104,8 @@ import {
 } from "@/components/dashboard/TaskSessionLiveCard";
 import { useReportingInteractionState } from "@/components/dashboard/useReportingInteractionState";
 
+type ReportingMainViewTab = "billing" | "rhythm" | "advanced";
+
 type LiveShape = { language?: string };
 type ReportingTaskInspectScope = {
   kind: "tag" | "project";
@@ -177,7 +181,7 @@ function reportingArchivedExcludedRichText(
   return (
     <>
       {template.slice(0, i)}
-      <strong className="font-semibold text-amber-50 tabular-nums">
+      <strong className="font-semibold text-amber-900 tabular-nums dark:text-amber-50">
         {label}
       </strong>
       {template.slice(i + marker.length)}
@@ -268,7 +272,7 @@ function StackedTaskBars({
             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"
+              className="flex h-[100px] w-full flex-col justify-end rounded-t bg-zinc-200/90 dark:bg-zinc-800/80"
               title={`${label}: ${b} / ${a}`}
             >
               {donePx > 0 ? (
@@ -415,7 +419,7 @@ function ReportingFilteredBadge({
   }
   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"
+      className="inline-flex shrink-0 items-center rounded border border-amber-400/50 bg-amber-100/90 px-1.5 py-px text-[0.65rem] font-semibold uppercase tracking-wide text-amber-900 dark:border-amber-500/35 dark:bg-amber-950/40 dark:text-amber-200/90"
       title={titleText}
     >
       {label}
@@ -432,6 +436,10 @@ function ReportingContent() {
   const [dateFrom, setDateFrom] = useState("");
   const [dateTo, setDateTo] = useState("");
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  /** Grille « temps par projet » : `work` = jetons @ (défaut) ; `personal` = temps `!` (`personalProject`). */
+  const [projectMinutesScope, setProjectMinutesScope] = useState<
+    "work" | "personal"
+  >("work");
   const [workspaceSnapBusy, setWorkspaceSnapBusy] = useState(false);
   const {
     weekStartsOn,
@@ -453,6 +461,8 @@ function ReportingContent() {
     portalReady,
     taskInspectModalRef,
   } = useReportingInteractionState<ReportingTaskInspectScope>();
+  const [reportingViewTab, setReportingViewTab] =
+    useState<ReportingMainViewTab>("billing");
 
   useEffect(() => {
     if (!taskInspectScope || !portalReady) {
@@ -559,6 +569,14 @@ function ReportingContent() {
     return await refresh({ routerInvalidate: true });
   }, [refresh]);
 
+  const postHeaderAction = useCallback(
+    async (body: Record<string, unknown>) => {
+      await postKronosysAction(body);
+      await refresh({ routerInvalidate: true });
+    },
+    [refresh],
+  );
+
   const reportLocale = lang === "fr" ? "fr-CA" : "en-CA";
   const tagDescriptions = (payload?.tagDescriptions ?? {}) as Record<
     string,
@@ -738,6 +756,7 @@ function ReportingContent() {
       dateToFilter,
       reportTimeZone,
       taskDefaultTagBucketEnabled,
+      projectMinutesScope,
     );
   }, [
     mergedSessions,
@@ -746,8 +765,14 @@ function ReportingContent() {
     dateToFilter,
     reportTimeZone,
     taskDefaultTagBucketEnabled,
+    projectMinutesScope,
   ]);
 
+  const projectNameCellToneClass =
+    projectMinutesScope === "personal"
+      ? "text-rose-800 dark:text-rose-200/90"
+      : "text-sky-800 dark:text-sky-200/90";
+
   const projectWeekCalendarRows = useMemo(
     () => buildProjectWeekCalendarRows(projectTaskMinutesByDay, weekStartsOn),
     [projectTaskMinutesByDay, weekStartsOn],
@@ -947,6 +972,13 @@ function ReportingContent() {
       if (!projectKeyLower) {
         continue;
       }
+      const tagLedgerPersonal = row.tagKey.trim().toLowerCase().startsWith("!");
+      if (projectMinutesScope === "work" && tagLedgerPersonal) {
+        continue;
+      }
+      if (projectMinutesScope === "personal" && !tagLedgerPersonal) {
+        continue;
+      }
       const bucketKey = `${row.weekStart}:::${projectKeyLower}`;
       const list = byWeekProject.get(bucketKey) ?? [];
       list.push(row);
@@ -961,7 +993,7 @@ function ReportingContent() {
       );
     }
     return byWeekProject;
-  }, [tagWeekCalendarRowsVisible]);
+  }, [tagWeekCalendarRowsVisible, projectMinutesScope]);
 
   const projectCalendarWeekGroups = useMemo(() => {
     const byWeek = new Map<string, ProjectWeekCalendarRow[]>();
@@ -1132,7 +1164,7 @@ function ReportingContent() {
     return (
       <button
         type="button"
-        className={`${className} underline decoration-dotted underline-offset-2 hover:text-violet-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60`}
+        className={`${className} underline decoration-dotted underline-offset-2 hover:text-violet-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 dark:hover:text-violet-200`}
         onClick={(event) => {
           const rect = event.currentTarget.getBoundingClientRect();
           openTaskInspectScope(scope, {
@@ -1334,6 +1366,66 @@ function ReportingContent() {
       tagWeekCalendarRows.length > 0 ||
       projectWeekCalendarRows.length > 0);
 
+  const syncReportingTourTab = useCallback(
+    (step: number) => {
+      if (!reportingTourOpen) {
+        return;
+      }
+      if (!hasReportingChartData) {
+        if (step === 2) {
+          setReportingViewTab("advanced");
+        }
+        return;
+      }
+      if (step <= 1) {
+        setReportingViewTab("billing");
+      } else if (step === 2) {
+        setReportingViewTab("advanced");
+      } else if (step === 3) {
+        setReportingViewTab("rhythm");
+      } else if (step <= 5) {
+        setReportingViewTab("billing");
+      }
+    },
+    [reportingTourOpen, hasReportingChartData],
+  );
+
+  useEffect(() => {
+    const applyHash = () => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      const id = window.location.hash.slice(1);
+      if (!id) {
+        return;
+      }
+      const toAdvanced = new Set([
+        "report-workspace-snapshot",
+        "report-summary-kpis",
+        "report-closure-by-kind",
+        "report-loc-metrics",
+        "report-daily-table",
+      ]);
+      const toRhythm = new Set([
+        "report-chart-sessions",
+        "report-chart-tasks",
+        "report-chart-task-time",
+        "report-chart-session-wall",
+      ]);
+      const toBilling = new Set(["report-tag-time", "report-projects"]);
+      if (toAdvanced.has(id)) {
+        setReportingViewTab("advanced");
+      } else if (toRhythm.has(id)) {
+        setReportingViewTab("rhythm");
+      } else if (toBilling.has(id)) {
+        setReportingViewTab("billing");
+      }
+    };
+    applyHash();
+    window.addEventListener("hashchange", applyHash);
+    return () => window.removeEventListener("hashchange", applyHash);
+  }, []);
+
   useEffect(() => {
     if (!payload || !agg) {
       return;
@@ -1348,44 +1440,59 @@ function ReportingContent() {
     }
   }, [payload, agg, searchParams, stripReportingTourReplayParam]);
 
-  const reportingTocEntries = (() => {
+  const reportingTocEntries = useMemo(() => {
     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) {
+      if (trackCodeMetrics) {
+        rows.push({
+          id: "report-workspace-snapshot",
+          label: t.workspaceSnapshotTitle,
+        });
+      }
       return rows;
     }
-    rows.push({ id: "report-summary-kpis", label: t.tocSummaryKpis });
-    rows.push({ id: "report-closure-by-kind", label: t.tocClosureBreakdown });
-    if (trackCodeMetrics) {
-      rows.push({ id: "report-loc-metrics", label: t.tocLocSection });
-    }
-    if (!hasReportingChartData) {
-      return rows;
-    }
-    if (navigableWeekStarts.length > 1) {
+    rows.push({ id: "reporting-view-tabs", label: t.tocViewTabs });
+    if (hasReportingChartData && 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 },
     );
+    if (hasReportingChartData) {
+      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 },
+      );
+    }
+    rows.push(
+      { id: "report-summary-kpis", label: t.tocSummaryKpis },
+      { id: "report-closure-by-kind", label: t.tocClosureBreakdown },
+    );
+    if (trackCodeMetrics) {
+      rows.push({ id: "report-loc-metrics", label: t.tocLocSection });
+      rows.push({
+        id: "report-workspace-snapshot",
+        label: t.workspaceSnapshotTitle,
+      });
+    }
     return rows;
-  })();
+  }, [
+    payload,
+    agg,
+    trackCodeMetrics,
+    hasReportingChartData,
+    navigableWeekStarts.length,
+    t,
+  ]);
 
   return (
     <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
@@ -1414,46 +1521,61 @@ function ReportingContent() {
           </div>
           <AppShellHeaderSessionMeta payload={payload} dt={dt} />
         </div>
-        <div className="flex w-full justify-end">
-          <div className={appShellHeaderToolbarClassName}>
-            <AppShellHeaderWallClock lang={lang} dt={dt} />
-            <AppShellCommandCenterPlaceholder />
-            <AppShellRouteNav
+        <AppShellHeaderToolbarLayout
+          leading={
+            <>
+              <AppShellHeaderWallClock lang={lang} dt={dt} />
+              <AppShellHeaderKronoFocus
+                payload={payload}
+                dt={dt}
+                post={postHeaderAction}
+              />
+              <AppShellToolbarCommandCenter
+                dt={dt}
+                lang={lang}
+                dashboardSessionNavId={dashboardSessionNavId}
+                onManualRefresh={handleManualRefresh}
+              />
+            </>
+          }
+          nav={
+            <AppShellToolbarRouteNav
               current="reporting"
-              labels={{
-                dashboard: t.dashboard,
-                reporting: t.reporting,
-                settings: t.settings,
-                logs: t.logs,
-                guide: t.guide,
-              }}
+              labels={reportingNav(lang)}
               navAriaLabel={dt.appShellRouteNavAria}
               dashboardSessionId={dashboardSessionNavId}
-              reserveGlobalPauseSlot
-            />
-            <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)}
+              dt={dt}
             />
-          </div>
-        </div>
+          }
+          trailing={
+            <AppShellHeaderUtilityRibbon
+              ariaLabel={dt.appShellUtilityToolbarGroupAria}
+            >
+              <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)}
+              />
+            </AppShellHeaderUtilityRibbon>
+          }
+        />
       </header>
 
       <div className="w-full px-5 py-8 sm:px-8 lg:px-10 xl:px-12">
@@ -1483,12 +1605,14 @@ function ReportingContent() {
 
         {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"
+            className="mb-8 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-900 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-100"
             role="alert"
           >
-            <strong className="block text-red-200">API</strong>
+            <strong className="block text-red-800 dark:text-red-200">
+              API
+            </strong>
             {headerApiError}
-            <pre className="mt-2 overflow-x-auto text-xs text-red-200/80">
+            <pre className="mt-2 overflow-x-auto text-xs text-red-800/90 dark:text-red-200/80">
               {error}
             </pre>
           </div>
@@ -1511,10 +1635,10 @@ function ReportingContent() {
               />
               <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"
+                className="mb-10 scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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">
+                  <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400">
                     {t.filtersTitle}
                   </h2>
                   <InlineMetricHelpTrigger
@@ -1555,7 +1679,7 @@ function ReportingContent() {
                       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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-inner shadow-zinc-900/[0.03] dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:shadow-none"
                     />
                   </label>
                   <label className="flex flex-col gap-1 text-xs text-zinc-500">
@@ -1564,12 +1688,12 @@ function ReportingContent() {
                       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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-inner shadow-zinc-900/[0.03] dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 dark:shadow-none"
                     />
                   </label>
                   <button
                     type="button"
-                    className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
+                    className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
                     onClick={() => {
                       const p = reportingPresetDay();
                       setDateFrom(p.from);
@@ -1580,7 +1704,7 @@ function ReportingContent() {
                   </button>
                   <button
                     type="button"
-                    className="rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800"
+                    className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
                     onClick={() => {
                       setDateFrom("");
                       setDateTo("");
@@ -1600,7 +1724,7 @@ function ReportingContent() {
                   <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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
                       onClick={() => {
                         const p = reportingPresetDay();
                         setDateFrom(p.from);
@@ -1611,7 +1735,7 @@ function ReportingContent() {
                     </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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
                       onClick={() => {
                         const p = reportingPresetWeek();
                         setDateFrom(p.from);
@@ -1622,7 +1746,7 @@ function ReportingContent() {
                     </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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
                       onClick={() => {
                         const p = reportingPresetMonth();
                         setDateFrom(p.from);
@@ -1633,7 +1757,7 @@ function ReportingContent() {
                     </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"
+                      className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:border-zinc-400 hover:bg-zinc-100 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
                       onClick={() => {
                         const p = reportingPresetYear();
                         setDateFrom(p.from);
@@ -1669,8 +1793,8 @@ function ReportingContent() {
                             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"
+                                ? "border-violet-500 bg-violet-200/90 text-violet-900 dark:bg-violet-600/30 dark:text-violet-100"
+                                : "border-zinc-300 bg-white text-zinc-600 hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-400 dark:hover:border-zinc-500"
                             }`}
                           >
                             {formatTagDisplay(tag)}
@@ -1684,7 +1808,7 @@ function ReportingContent() {
                   <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"
+                    className="rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:border-zinc-400 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
                     onClick={() => {
                       setDateFrom("");
                       setDateTo("");
@@ -1696,14 +1820,14 @@ function ReportingContent() {
                 </div>
               </section>
 
-              {trackCodeMetrics ? (
+              {trackCodeMetrics && !agg ? (
                 <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"
+                  className="mb-10 scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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">
+                      <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400">
                         {t.workspaceSnapshotTitle}
                       </h2>
                       <InlineMetricHelpTrigger
@@ -1714,7 +1838,7 @@ function ReportingContent() {
                     <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"
+                      className="shrink-0 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
                       onClick={() => void refreshWorkspaceSnapshot()}
                     >
                       {workspaceSnapBusy
@@ -1755,7 +1879,7 @@ function ReportingContent() {
                                   body={t.metricHelpWsTotalLinesBody}
                                 />
                               </div>
-                              <div className="tabular-nums text-lg font-semibold text-zinc-100">
+                              <div className="tabular-nums text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                                 {ws.totalLines}
                               </div>
                             </div>
@@ -1769,7 +1893,7 @@ function ReportingContent() {
                                   body={t.metricHelpWsFileCountBody}
                                 />
                               </div>
-                              <div className="tabular-nums text-lg font-semibold text-zinc-100">
+                              <div className="tabular-nums text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                                 {ws.fileCount}
                               </div>
                             </div>
@@ -1779,7 +1903,7 @@ function ReportingContent() {
                           ) : (
                             <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">
+                                <thead className="border-b border-zinc-200 text-xs uppercase text-zinc-500 dark:border-zinc-800">
                                   <tr>
                                     <th className="py-2 pr-3 font-medium">
                                       <div className="flex min-h-5 items-center gap-0.5">
@@ -1823,17 +1947,17 @@ function ReportingContent() {
                                   {ws.byLanguage.map((row) => (
                                     <tr
                                       key={row.languageId}
-                                      className="border-b border-zinc-800/80 last:border-0"
+                                      className="border-b border-zinc-200/90 last:border-0 dark:border-zinc-800/80"
                                     >
                                       <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">
+                                      <td className="py-2 pr-3 tabular-nums text-zinc-800 dark: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-2 min-w-[4rem] flex-1 overflow-hidden rounded bg-zinc-200 dark:bg-zinc-800">
                                             <div
                                               className="h-full rounded bg-sky-600/85"
                                               style={{
@@ -1859,7 +1983,7 @@ function ReportingContent() {
                       );
                     }
                     return (
-                      <p className="mt-4 text-sm text-amber-200/90">
+                      <p className="mt-4 text-sm text-amber-800 dark:text-amber-200/90">
                         {ws.reason === "no_workspace"
                           ? t.workspaceSnapshotNoWorkspace
                           : ws.reason === "empty"
@@ -1871,7 +1995,7 @@ function ReportingContent() {
                   {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"
+                      className="rounded-lg border border-amber-500/40 bg-amber-50 px-3 py-2.5 text-sm leading-relaxed text-amber-950 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-100/95"
                     >
                       {reportingArchivedExcludedRichText(
                         t.reportingArchivedExcludedAside,
@@ -1884,259 +2008,156 @@ function ReportingContent() {
 
               {agg && (
                 <>
-                  <section
-                    id="report-summary-kpis"
-                    className="mb-10 scroll-mt-28 flex flex-col gap-3"
+                  <div
+                    id="reporting-view-tabs"
+                    className="mb-8 flex flex-wrap gap-2 border-b border-zinc-200 pb-4 dark:border-zinc-700/80"
+                    role="tablist"
+                    aria-label={t.reportingViewTabGroupAria}
                   >
-                    <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>
-                    <div
-                      id="report-closure-by-kind"
-                      className="mt-4 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4"
+                    <button
+                      type="button"
+                      role="tab"
+                      id="reporting-tab-billing"
+                      aria-selected={reportingViewTab === "billing"}
+                      className={`rounded-lg border px-3 py-2 text-sm font-medium transition ${
+                        reportingViewTab === "billing"
+                          ? "border-violet-500 bg-violet-100 text-violet-900 dark:bg-violet-950/40 dark:text-violet-100"
+                          : "border-zinc-300 bg-zinc-50 text-zinc-600 hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-600 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                      }`}
+                      onClick={() => setReportingViewTab("billing")}
+                    >
+                      {t.reportingViewTabBilling}
+                    </button>
+                    <button
+                      type="button"
+                      role="tab"
+                      id="reporting-tab-rhythm"
+                      aria-selected={reportingViewTab === "rhythm"}
+                      className={`rounded-lg border px-3 py-2 text-sm font-medium transition ${
+                        reportingViewTab === "rhythm"
+                          ? "border-violet-500 bg-violet-100 text-violet-900 dark:bg-violet-950/40 dark:text-violet-100"
+                          : "border-zinc-300 bg-zinc-50 text-zinc-600 hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-600 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                      }`}
+                      onClick={() => setReportingViewTab("rhythm")}
+                    >
+                      {t.reportingViewTabRhythm}
+                    </button>
+                    <button
+                      type="button"
+                      role="tab"
+                      id="reporting-tab-advanced"
+                      aria-selected={reportingViewTab === "advanced"}
+                      className={`rounded-lg border px-3 py-2 text-sm font-medium transition ${
+                        reportingViewTab === "advanced"
+                          ? "border-violet-500 bg-violet-100 text-violet-900 dark:bg-violet-950/40 dark:text-violet-100"
+                          : "border-zinc-300 bg-zinc-50 text-zinc-600 hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-600 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-200"
+                      }`}
+                      onClick={() => setReportingViewTab("advanced")}
+                    >
+                      {t.reportingViewTabAdvanced}
+                    </button>
+                  </div>
+                  {hasReportingChartData && navigableWeekStarts.length > 1 ? (
+                    <section
+                      id="report-week-nav"
+                      className="mb-8 scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none p-4 sm:p-5"
+                      aria-label={t.weekNavAriaLabel}
                     >
-                      <div className="mb-3 flex flex-wrap items-center gap-2">
-                        <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
-                          {t.closureBreakdownTitle}
-                        </h3>
+                      <div className="mb-2 flex flex-wrap items-center gap-2">
+                        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400">
+                          {t.tocWeekNav}
+                        </h2>
                         <ReportingFilteredBadge
                           active={reportingFiltersActive}
                           label={t.sectionFilteredBadge}
                           titleText={t.sectionFilteredBadgeTitle}
                         />
-                        <InlineMetricHelpTrigger
-                          ariaLabel={t.metricHelpClosureBreakdownAria}
-                          body={t.metricHelpClosureBreakdownBody}
-                        />
                       </div>
-                      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
-                        {REPORTING_SESSION_CLOSURE_DISPLAY_ORDER.map(
-                          (closureKey) => {
-                            const count =
-                              agg.sessionCountByClosureKind[closureKey] ?? 0;
-                            return (
-                              <div
-                                key={closureKey}
-                                className="rounded-lg border border-zinc-800/80 bg-zinc-950/40 p-3"
-                              >
-                                <div className="text-xs uppercase text-zinc-500">
-                                  {reportingClosureKindLabels[closureKey]}
-                                </div>
-                                <div className="mt-1 text-xl font-semibold tabular-nums text-zinc-100">
-                                  {count}
-                                </div>
-                              </div>
-                            );
-                          },
-                        )}
+                      <div 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-300 bg-white px-3 py-2 text-sm text-zinc-800 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-200 dark:hover:bg-zinc-800"
+                            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-900 dark:text-zinc-100">
+                            {formatWeekRangeLabel(
+                              navigableWeekStarts[chartWeekNavIndexSafe],
+                              reportLocale,
+                            )}
+                          </span>
+                          <button
+                            type="button"
+                            className="inline-flex items-center gap-1 rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-800 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-200 dark:hover:bg-zinc-800"
+                            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>
-                    </div>
+                    </section>
+                  ) : null}
+                  {!hasReportingChartData ? (
+                    <p className="mb-6 text-sm text-zinc-500">
+                      {t.noRowsInRange}
+                    </p>
+                  ) : null}
+                  <div
+                    id="report-view-panel-billing"
+                    role="tabpanel"
+                    aria-labelledby="reporting-tab-billing"
+                    className={
+                      reportingViewTab !== "billing"
+                        ? "hidden"
+                        : "mb-10 space-y-6"
+                    }
+                  >
+                    <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                      {t.reportingViewBillingIntro}
+                    </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"
+                        className="rounded-lg border border-amber-500/40 bg-amber-50 px-3 py-2.5 text-sm leading-relaxed text-amber-950 dark:border-amber-500/40 dark:bg-amber-950/30 dark:text-amber-100/95"
                       >
                         {reportingArchivedExcludedRichText(
                           t.reportingArchivedExcludedAside,
@@ -2144,76 +2165,29 @@ function ReportingContent() {
                         )}
                       </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 className="rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none p-4 sm:max-w-md">
+                      <div className="flex min-h-5 items-center gap-0.5">
+                        <span className="text-xs uppercase text-zinc-500">
+                          {t.summaryTaskTimeRecorded}
+                        </span>
+                        <InlineMetricHelpTrigger
+                          ariaLabel={t.metricHelpTaskTimeAria}
+                          body={t.metricHelpTaskTimeBody}
                         />
                       </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 className="mt-1 text-2xl font-semibold tabular-nums">
+                        {formatDuration(agg.taskMinutesTotal)}
                       </div>
-                      <div className="grid gap-6 lg:grid-cols-2">
-                        <div>
+                    </div>
+                    {hasReportingChartData ? (
+                      <>
+                        <section
+                          id="report-tag-time"
+                          className="mt-10 scroll-mt-28 space-y-8 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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.locByLanguageSectionTitle}
+                            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-200">
+                              {t.tagTimeSectionTitle}
                             </h3>
                             <ReportingFilteredBadge
                               active={reportingFiltersActive}
@@ -2221,679 +2195,166 @@ function ReportingContent() {
                               titleText={t.sectionFilteredBadgeTitle}
                             />
                             <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpLocByLangTitleAria}
-                              body={t.metricHelpLocByLangTitleBody}
+                              ariaLabel={t.metricHelpTagTimeSectionAria}
+                              body={t.metricHelpTagTimeSectionBody}
                             />
                           </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}
-                      <div className="mb-10 grid grid-cols-1 gap-4 md:grid-cols-2">
-                        <section
-                          id="report-chart-sessions"
-                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                        >
-                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                            <h3 className="text-sm font-semibold text-zinc-200">
-                              {t.chartSessionsPerDay}
-                            </h3>
-                            <ReportingFilteredBadge
-                              active={reportingFiltersActive}
-                              label={t.sectionFilteredBadge}
-                              titleText={t.sectionFilteredBadgeTitle}
-                            />
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.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>
+                          <p className="text-xs text-zinc-500">
+                            {t.tagTimeSectionHint}
+                          </p>
 
-                        <section
-                          id="report-chart-tasks"
-                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                        >
-                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                            <h3 className="text-sm font-semibold text-zinc-200">
-                              {t.chartTasksByStatusPerDay}
-                            </h3>
-                            <ReportingFilteredBadge
-                              active={reportingFiltersActive}
-                              label={t.sectionFilteredBadge}
-                              titleText={t.sectionFilteredBadgeTitle}
-                            />
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpChartTasksAria}
-                              body={t.metricHelpChartTasksBody}
-                            />
-                          </div>
-                          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-zinc-500">
-                            <div className="inline-flex items-center gap-1">
-                              <span className="mr-0.5 inline-block h-2 w-2 shrink-0 rounded-sm bg-emerald-600" />
-                              {t.legendDone}
+                          <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-600 dark:text-zinc-400">
+                                {t.tagTimeByWeekTitle}
+                              </h4>
                               <InlineMetricHelpTrigger
-                                ariaLabel={t.metricHelpLegendDoneAria}
-                                body={t.metricHelpLegendDoneBody}
+                                ariaLabel={t.metricHelpTagTimeWeekTableAria}
+                                body={t.metricHelpTagTimeWeekTableBody}
                               />
-                            </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}
+                                ariaLabel={t.metricHelpTagWeekCalendarAria}
+                                body={t.metricHelpTagWeekCalendarBody}
                               />
                             </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="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                        >
-                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                            <h3 className="text-sm font-semibold text-zinc-200">
-                              {t.chartTaskTimePerDay}
-                            </h3>
-                            <ReportingFilteredBadge
-                              active={reportingFiltersActive}
-                              label={t.sectionFilteredBadge}
-                              titleText={t.sectionFilteredBadgeTitle}
-                            />
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpChartTaskTimeAria}
-                              body={t.metricHelpChartTaskTimeBody}
-                            />
-                          </div>
-                          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
-                            <span>{t.summaryTaskTimeRecorded}</span>
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpTaskTimeAria}
-                              body={t.metricHelpTaskTimeBody}
-                            />
-                          </div>
-                          <div className="mt-4">
-                            <MiniBars
-                              days={reportingDayKeys}
-                              values={agg.taskMinutesByDay}
-                              max={peakTaskMinutes}
-                              className="bg-sky-500/90"
-                              undatedLabel={t.undatedLabel}
-                              valueTitle={(m) => formatDuration(m)}
-                            />
-                          </div>
-                        </section>
-
-                        <section
-                          id="report-chart-session-wall"
-                          className="scroll-mt-28 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 sm:p-6"
-                        >
-                          <div className="flex min-h-6 flex-wrap items-center gap-x-2 gap-y-1">
-                            <h3 className="text-sm font-semibold text-zinc-200">
-                              {t.chartSessionWallPerDay}
-                            </h3>
-                            <ReportingFilteredBadge
-                              active={reportingFiltersActive}
-                              label={t.sectionFilteredBadge}
-                              titleText={t.sectionFilteredBadgeTitle}
-                            />
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpChartSessionWallAria}
-                              body={t.metricHelpChartSessionWallBody}
-                            />
-                          </div>
-                          <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
-                            <span>{t.summarySessionWallClock}</span>
-                            <InlineMetricHelpTrigger
-                              ariaLabel={t.metricHelpSessionWallSummaryAria}
-                              body={t.metricHelpSessionWallSummaryBody}
-                            />
-                          </div>
-                          <div className="mt-4">
-                            <MiniBars
-                              days={reportingDayKeys}
-                              values={agg.sessionWallClockMinutesByDay}
-                              max={peakSessionWallMinutes}
-                              className="bg-fuchsia-500/85"
-                              undatedLabel={t.undatedLabel}
-                              valueTitle={(m) => formatDuration(m)}
-                            />
-                          </div>
-                        </section>
-                      </div>
 
-                      <section
-                        id="report-daily-table"
-                        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>
+                            <fieldset className="rounded-lg border border-zinc-200/90 bg-zinc-50/90 dark:border-zinc-800/90 dark: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.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.tableTaskTimeNonConcurrent}</span>
-                                </div>
-                              </th>
-                              <th className="px-4 py-3 font-medium tabular-nums">
-                                <div className="flex min-h-5 items-center gap-0.5">
-                                  <span>{t.tableSessionCoding}</span>
-                                  <InlineMetricHelpTrigger
-                                    align="end"
-                                    ariaLabel={t.metricHelpTblSessionCodingAria}
-                                    body={t.metricHelpTblSessionCodingBody}
+                                    ariaLabel={t.metricHelpTagWeekStartsOnAria}
+                                    body={t.metricHelpTagWeekStartsOnBody}
                                   />
-                                </div>
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {reportingDayKeys.map((d) => (
-                              <tr
-                                key={d}
-                                className="border-b border-zinc-800/80 last:border-0"
+                                </span>
+                              </legend>
+                              <div
+                                className="mt-2 flex flex-wrap gap-2"
+                                role="radiogroup"
+                                aria-label={t.tagWeekStartsOnLegend}
                               >
-                                <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-cyan-300/90">
-                                  {formatMinutesCell(
-                                    agg.nonConcurrentTaskMinutesByDay[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-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>
+                                {(
+                                  [
+                                    ["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-100 text-violet-900 dark:bg-violet-950/50 dark:text-violet-200"
+                                        : "border-zinc-300 bg-white text-zinc-600 hover:border-zinc-400 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-600 dark: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}
+                            {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-800 dark: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-800 dark: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-200/80 dark:border-zinc-800/80">
+                                        <table className="w-full min-w-[28rem] text-left text-sm">
+                                          <thead className="border-b border-zinc-200 bg-zinc-100/80 dark:border-zinc-800 dark: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-700 dark: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>
-                                            ))}
-                                            <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) => {
+                                            </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"
+                                                    className="border-b border-zinc-200/90 last:border-0 dark:border-zinc-800/70"
                                                   >
                                                     <ReportingTagNameCell
                                                       tagKey={row.tagKey}
@@ -2907,7 +2368,7 @@ function ReportingContent() {
                                                       descriptions={
                                                         tagDescriptions
                                                       }
-                                                      className="px-2 py-2 pl-3 text-violet-200/90"
+                                                      className="px-2 py-2 pl-3 text-violet-800 dark:text-violet-200/90"
                                                     />
                                                     {row.slots.map(
                                                       (mins, i) => {
@@ -2919,7 +2380,7 @@ function ReportingContent() {
                                                         return (
                                                           <td
                                                             key={dateKey}
-                                                            className="px-1 py-2 text-center tabular-nums text-zinc-200"
+                                                            className="px-1 py-2 text-center tabular-nums text-zinc-800 dark:text-zinc-200"
                                                             title={dateKey}
                                                           >
                                                             {mins > 0
@@ -2940,14 +2401,14 @@ function ReportingContent() {
                                                                         t.undatedLabel,
                                                                       ),
                                                                   },
-                                                                  "text-zinc-200",
+                                                                  "text-zinc-800 dark:text-zinc-200",
                                                                 )
                                                               : "—"}
                                                           </td>
                                                         );
                                                       },
                                                     )}
-                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-950 dark:text-zinc-100">
                                                       {renderReportingDurationButton(
                                                         row.total,
                                                         {
@@ -2965,13 +2426,13 @@ function ReportingContent() {
                                                               reportLocale,
                                                             ),
                                                         },
-                                                        "text-zinc-100",
+                                                        "text-zinc-950 dark:text-zinc-100",
                                                       )}
                                                     </td>
                                                   </tr>
                                                 );
                                               }
-                                              const rollupKey = `${weekStart}:::${block.projectKeyLower}`;
+                                              const rollupKey = `${weekStart}:::${block.rollupStableKey}`;
                                               const open =
                                                 tagWeekRollupOpenKeys.has(
                                                   rollupKey,
@@ -2983,8 +2444,8 @@ function ReportingContent() {
                                                 ) ?? "";
                                               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">
+                                                  <tr className="border-b border-zinc-200/90 bg-zinc-100/70 dark:border-zinc-800/70 dark:bg-zinc-900/40">
+                                                    <td className="px-2 py-2 pl-3 align-top text-violet-800 dark:text-violet-200/90">
                                                       <div className="flex items-start gap-1.5">
                                                         <button
                                                           type="button"
@@ -2996,7 +2457,7 @@ function ReportingContent() {
                                                           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"
+                                                          className="mt-0.5 shrink-0 rounded p-0.5 text-zinc-500 transition hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                                                           onClick={() =>
                                                             toggleTagWeekRollup(
                                                               rollupKey,
@@ -3016,7 +2477,6 @@ function ReportingContent() {
                                                         <div className="min-w-0">
                                                           <div className="flex flex-wrap items-baseline gap-x-1.5 font-medium">
                                                             <span>
-                                                              @
                                                               {
                                                                 block.displayProject
                                                               }
@@ -3048,7 +2508,7 @@ function ReportingContent() {
                                                         return (
                                                           <td
                                                             key={dateKey}
-                                                            className="px-1 py-2 text-center tabular-nums text-zinc-200"
+                                                            className="px-1 py-2 text-center tabular-nums text-zinc-800 dark:text-zinc-200"
                                                             title={dateKey}
                                                           >
                                                             {mins > 0
@@ -3056,7 +2516,8 @@ function ReportingContent() {
                                                                   mins,
                                                                   {
                                                                     kind: "project",
-                                                                    title: `@${block.displayProject}`,
+                                                                    title:
+                                                                      block.displayProject,
                                                                     dayKey:
                                                                       dateKey,
                                                                     projectKey:
@@ -3067,19 +2528,20 @@ function ReportingContent() {
                                                                         t.undatedLabel,
                                                                       ),
                                                                   },
-                                                                  "text-zinc-200",
+                                                                  "text-zinc-800 dark:text-zinc-200",
                                                                 )
                                                               : "—"}
                                                           </td>
                                                         );
                                                       },
                                                     )}
-                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
+                                                    <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-950 dark:text-zinc-100">
                                                       {renderReportingDurationButton(
                                                         block.parentTotal,
                                                         {
                                                           kind: "project",
-                                                          title: `@${block.displayProject}`,
+                                                          title:
+                                                            block.displayProject,
                                                           weekStart:
                                                             block.weekStart,
                                                           projectKey:
@@ -3091,7 +2553,7 @@ function ReportingContent() {
                                                               reportLocale,
                                                             ),
                                                         },
-                                                        "text-zinc-100",
+                                                        "text-zinc-950 dark:text-zinc-100",
                                                       )}
                                                     </td>
                                                   </tr>
@@ -3100,7 +2562,7 @@ function ReportingContent() {
                                                         (child) => (
                                                           <tr
                                                             key={`${weekStart}\0${child.tagKey}`}
-                                                            className="border-b border-zinc-800/55 bg-zinc-950/30"
+                                                            className="border-b border-zinc-200/80 bg-zinc-50/90 dark:border-zinc-800/55 dark:bg-zinc-950/30"
                                                           >
                                                             <ReportingTagNameCell
                                                               tagKey={
@@ -3116,7 +2578,7 @@ function ReportingContent() {
                                                               descriptions={
                                                                 tagDescriptions
                                                               }
-                                                              className="px-2 py-2 pl-10 text-violet-200/85"
+                                                              className="px-2 py-2 pl-10 text-violet-800 dark:text-violet-200/85"
                                                             />
                                                             {child.slots.map(
                                                               (mins, i) => {
@@ -3130,7 +2592,7 @@ function ReportingContent() {
                                                                     key={
                                                                       dateKey
                                                                     }
-                                                                    className="px-1 py-2 text-center tabular-nums text-zinc-300/95"
+                                                                    className="px-1 py-2 text-center tabular-nums text-zinc-700 dark:text-zinc-300/95"
                                                                     title={
                                                                       dateKey
                                                                     }
@@ -3153,14 +2615,14 @@ function ReportingContent() {
                                                                                 t.undatedLabel,
                                                                               ),
                                                                           },
-                                                                          "text-zinc-300/95",
+                                                                          "text-zinc-700 dark:text-zinc-300/95",
                                                                         )
                                                                       : "—"}
                                                                   </td>
                                                                 );
                                                               },
                                                             )}
-                                                            <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-200">
+                                                            <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-800 dark:text-zinc-200">
                                                               {renderReportingDurationButton(
                                                                 child.total,
                                                                 {
@@ -3179,7 +2641,7 @@ function ReportingContent() {
                                                                       reportLocale,
                                                                     ),
                                                                 },
-                                                                "text-zinc-200",
+                                                                "text-zinc-800 dark:text-zinc-200",
                                                               )}
                                                             </td>
                                                           </tr>
@@ -3188,379 +2650,1398 @@ function ReportingContent() {
                                                     : null}
                                                 </Fragment>
                                               );
-                                            },
-                                          )}
-                                        </tbody>
-                                      </table>
+                                            })}
+                                          </tbody>
+                                        </table>
+                                      </div>
                                     </div>
-                                  </div>
-                                ),
-                              )}
+                                  ),
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        </section>
+
+                        <section
+                          id="report-projects"
+                          className="mt-10 scroll-mt-28 space-y-4 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-900 dark: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>
+
+                          <fieldset className="rounded-lg border border-zinc-200/90 bg-zinc-50/90 dark:border-zinc-800/90 dark:bg-zinc-950/30 p-3">
+                            <legend className="px-1 text-xs text-zinc-500">
+                              {t.projectScopeLegend}
+                            </legend>
+                            <div
+                              className="mt-2 flex flex-wrap gap-2"
+                              role="radiogroup"
+                              aria-label={t.projectScopeGroupAria}
+                            >
+                              <button
+                                type="button"
+                                role="radio"
+                                aria-checked={projectMinutesScope === "work"}
+                                onClick={() => setProjectMinutesScope("work")}
+                                className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                                  projectMinutesScope === "work"
+                                    ? "border-violet-500/80 bg-violet-100 text-violet-900 dark:bg-violet-950/50 dark:text-violet-200"
+                                    : "border-zinc-300 bg-white text-zinc-600 hover:border-zinc-400 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-200"
+                                }`}
+                              >
+                                {t.projectScopeWork}
+                              </button>
+                              <button
+                                type="button"
+                                role="radio"
+                                aria-checked={
+                                  projectMinutesScope === "personal"
+                                }
+                                onClick={() =>
+                                  setProjectMinutesScope("personal")
+                                }
+                                className={`rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
+                                  projectMinutesScope === "personal"
+                                    ? "border-rose-500/70 bg-rose-100 text-rose-900 dark:bg-rose-950/40 dark:text-rose-200"
+                                    : "border-zinc-300 bg-white text-zinc-600 hover:border-zinc-400 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-400 dark:hover:border-zinc-600 dark:hover:text-zinc-200"
+                                }`}
+                              >
+                                {t.projectScopePersonal}
+                              </button>
                             </div>
-                          )}
-                        </div>
-                      </section>
+                          </fieldset>
+
+                          <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-600 dark: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-800 dark: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-800 dark: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-200/80 dark:border-zinc-800/80">
+                                      <table className="w-full min-w-[28rem] text-left text-sm">
+                                        <thead className="border-b border-zinc-200 bg-zinc-100/80 dark:border-zinc-800 dark: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-700 dark: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) => {
+                                            const projectKeyLower =
+                                              normalizeProjectKey(
+                                                row.projectKey,
+                                              ).toLowerCase();
+                                            const breakdownKey = `${weekStart}:::${projectKeyLower}`;
+                                            const childTagRows =
+                                              projectScopedTagRowsByWeekProject.get(
+                                                breakdownKey,
+                                              ) ?? [];
+                                            const canExpand =
+                                              childTagRows.length > 0;
+                                            const isOpen =
+                                              canExpand &&
+                                              projectWeekTagBreakdownOpenKeys.has(
+                                                breakdownKey,
+                                              );
+                                            const rowTitle =
+                                              row.displayProject ||
+                                              row.projectKey;
+                                            const rowProjectDescription =
+                                              reportingProjectDescriptionLine(
+                                                row.projectKey,
+                                                projectDescriptions,
+                                              ) ?? "";
+                                            return (
+                                              <Fragment
+                                                key={`${weekStart}\0${row.projectKey}`}
+                                              >
+                                                <tr className="border-b border-zinc-200/90 last:border-0 dark:border-zinc-800/70">
+                                                  {canExpand ? (
+                                                    <td
+                                                      className={`align-top px-2 py-2 pl-3 ${projectNameCellToneClass}`}
+                                                    >
+                                                      <div className="flex items-start gap-1.5">
+                                                        <button
+                                                          type="button"
+                                                          aria-expanded={isOpen}
+                                                          aria-label={
+                                                            t.tagWeekScopedRollupToggleAria
+                                                          }
+                                                          className="mt-0.5 shrink-0 rounded p-0.5 text-zinc-500 transition hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+                                                          onClick={() =>
+                                                            toggleProjectWeekTagBreakdown(
+                                                              breakdownKey,
+                                                            )
+                                                          }
+                                                        >
+                                                          <ChevronRight
+                                                            className={`size-4 transition-transform duration-200 ${
+                                                              isOpen
+                                                                ? "rotate-90"
+                                                                : ""
+                                                            }`}
+                                                            strokeWidth={2}
+                                                            aria-hidden
+                                                          />
+                                                        </button>
+                                                        <div className="min-w-0">
+                                                          <div>
+                                                            {row.projectKey ===
+                                                            ""
+                                                              ? t.projectUnassigned
+                                                              : row.displayProject ||
+                                                                row.projectKey}
+                                                          </div>
+                                                          {rowProjectDescription ? (
+                                                            <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
+                                                              {
+                                                                rowProjectDescription
+                                                              }
+                                                            </p>
+                                                          ) : null}
+                                                          <p className="mt-1 text-[0.65rem] font-normal tabular-nums text-zinc-500">
+                                                            {
+                                                              childTagRows.length
+                                                            }{" "}
+                                                            {lang === "fr"
+                                                              ? "étiquette(s) liée(s)"
+                                                              : "linked tag(s)"}
+                                                          </p>
+                                                        </div>
+                                                      </div>
+                                                    </td>
+                                                  ) : (
+                                                    <ReportingProjectNameCell
+                                                      projectKey={
+                                                        row.projectKey
+                                                      }
+                                                      displayLabel={
+                                                        row.displayProject ||
+                                                        row.projectKey
+                                                      }
+                                                      unassignedLabel={
+                                                        t.projectUnassigned
+                                                      }
+                                                      descriptions={
+                                                        projectDescriptions
+                                                      }
+                                                      className={`px-2 py-2 pl-3 ${projectNameCellToneClass}`}
+                                                    />
+                                                  )}
+                                                  {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-800 dark:text-zinc-200"
+                                                        title={dateKey}
+                                                      >
+                                                        {mins > 0
+                                                          ? renderReportingDurationButton(
+                                                              mins,
+                                                              {
+                                                                kind: "project",
+                                                                title: rowTitle,
+                                                                dayKey: dateKey,
+                                                                projectKey:
+                                                                  row.projectKey,
+                                                                sourceLabel:
+                                                                  dayLabel(
+                                                                    dateKey,
+                                                                    t.undatedLabel,
+                                                                  ),
+                                                              },
+                                                              "text-zinc-800 dark:text-zinc-200",
+                                                            )
+                                                          : "—"}
+                                                      </td>
+                                                    );
+                                                  })}
+                                                  <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-950 dark:text-zinc-100">
+                                                    {renderReportingDurationButton(
+                                                      row.total,
+                                                      {
+                                                        kind: "project",
+                                                        title: rowTitle,
+                                                        weekStart:
+                                                          row.weekStart,
+                                                        projectKey:
+                                                          row.projectKey,
+                                                        sourceLabel:
+                                                          weekRangeLabelForSource(
+                                                            row.weekStart,
+                                                            lang,
+                                                            reportLocale,
+                                                          ),
+                                                      },
+                                                      "text-zinc-950 dark:text-zinc-100",
+                                                    )}
+                                                  </td>
+                                                </tr>
+                                                {isOpen
+                                                  ? childTagRows.map(
+                                                      (child) => (
+                                                        <tr
+                                                          key={`${weekStart}\0${row.projectKey}\0${child.tagKey}`}
+                                                          className="border-b border-zinc-200/80 bg-zinc-50/90 dark:border-zinc-800/55 dark: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-800 dark: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-700 dark:text-zinc-300/95"
+                                                                  title={
+                                                                    dateKey
+                                                                  }
+                                                                >
+                                                                  {mins > 0
+                                                                    ? renderReportingDurationButton(
+                                                                        mins,
+                                                                        {
+                                                                          kind: "tag",
+                                                                          title:
+                                                                            child.displayTag ||
+                                                                            child.tagKey,
+                                                                          dayKey:
+                                                                            dateKey,
+                                                                          tagKey:
+                                                                            child.tagKey,
+                                                                          sourceLabel:
+                                                                            dayLabel(
+                                                                              dateKey,
+                                                                              t.undatedLabel,
+                                                                            ),
+                                                                        },
+                                                                        "text-zinc-700 dark:text-zinc-300/95",
+                                                                      )
+                                                                    : "—"}
+                                                                </td>
+                                                              );
+                                                            },
+                                                          )}
+                                                          <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-800 dark:text-zinc-200">
+                                                            {renderReportingDurationButton(
+                                                              child.total,
+                                                              {
+                                                                kind: "tag",
+                                                                title:
+                                                                  child.displayTag ||
+                                                                  child.tagKey,
+                                                                weekStart:
+                                                                  child.weekStart,
+                                                                tagKey:
+                                                                  child.tagKey,
+                                                                sourceLabel:
+                                                                  weekRangeLabelForSource(
+                                                                    child.weekStart,
+                                                                    lang,
+                                                                    reportLocale,
+                                                                  ),
+                                                              },
+                                                              "text-zinc-800 dark:text-zinc-200",
+                                                            )}
+                                                          </td>
+                                                        </tr>
+                                                      ),
+                                                    )
+                                                  : null}
+                                              </Fragment>
+                                            );
+                                          })}
+                                        </tbody>
+                                      </table>
+                                    </div>
+                                  </div>
+                                ),
+                              )}
+                            </div>
+                          )}
+                        </section>
+                      </>
+                    ) : null}
+                  </div>
+                  <div
+                    id="report-view-panel-rhythm"
+                    role="tabpanel"
+                    aria-labelledby="reporting-tab-rhythm"
+                    className={
+                      reportingViewTab !== "rhythm"
+                        ? "hidden"
+                        : "mb-10 space-y-6"
+                    }
+                  >
+                    {hasReportingChartData ? (
+                      <>
+                        <div className="mb-10 grid grid-cols-1 gap-4 md:grid-cols-2">
+                          <section
+                            id="report-chart-sessions"
+                            className="scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-900 dark: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="scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-900 dark: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="scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-900 dark:text-zinc-200">
+                                {t.chartTaskTimePerDay}
+                              </h3>
+                              <ReportingFilteredBadge
+                                active={reportingFiltersActive}
+                                label={t.sectionFilteredBadge}
+                                titleText={t.sectionFilteredBadgeTitle}
+                              />
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpChartTaskTimeAria}
+                                body={t.metricHelpChartTaskTimeBody}
+                              />
+                            </div>
+                            <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
+                              <span>{t.summaryTaskTimeRecorded}</span>
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpTaskTimeAria}
+                                body={t.metricHelpTaskTimeBody}
+                              />
+                            </div>
+                            <div className="mt-4">
+                              <MiniBars
+                                days={reportingDayKeys}
+                                values={agg.taskMinutesByDay}
+                                max={peakTaskMinutes}
+                                className="bg-sky-500/90"
+                                undatedLabel={t.undatedLabel}
+                                valueTitle={(m) => formatDuration(m)}
+                              />
+                            </div>
+                          </section>
+
+                          <section
+                            id="report-chart-session-wall"
+                            className="scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-900 dark:text-zinc-200">
+                                {t.chartSessionWallPerDay}
+                              </h3>
+                              <ReportingFilteredBadge
+                                active={reportingFiltersActive}
+                                label={t.sectionFilteredBadge}
+                                titleText={t.sectionFilteredBadgeTitle}
+                              />
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpChartSessionWallAria}
+                                body={t.metricHelpChartSessionWallBody}
+                              />
+                            </div>
+                            <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-zinc-500">
+                              <span>{t.summarySessionWallClock}</span>
+                              <InlineMetricHelpTrigger
+                                ariaLabel={t.metricHelpSessionWallSummaryAria}
+                                body={t.metricHelpSessionWallSummaryBody}
+                              />
+                            </div>
+                            <div className="mt-4">
+                              <MiniBars
+                                days={reportingDayKeys}
+                                values={agg.sessionWallClockMinutesByDay}
+                                max={peakSessionWallMinutes}
+                                className="bg-fuchsia-500/85"
+                                undatedLabel={t.undatedLabel}
+                                valueTitle={(m) => formatDuration(m)}
+                              />
+                            </div>
+                          </section>
+                        </div>
+                      </>
+                    ) : null}
+                  </div>
+                  <div
+                    id="report-view-panel-advanced"
+                    role="tabpanel"
+                    aria-labelledby="reporting-tab-advanced"
+                    className={
+                      reportingViewTab !== "advanced"
+                        ? "hidden"
+                        : "mb-10 space-y-10"
+                    }
+                  >
+                    {trackCodeMetrics ? (
+                      <>
+                        <section
+                          id="report-workspace-snapshot"
+                          className="mb-10 scroll-mt-28 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-600 dark: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-300 bg-white px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-transparent dark:text-zinc-300 dark:hover:bg-zinc-800"
+                              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-900 dark: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-900 dark: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-200 text-xs uppercase text-zinc-500 dark:border-zinc-800">
+                                          <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-200/90 last:border-0 dark:border-zinc-800/80"
+                                            >
+                                              <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-800 dark: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-200 dark: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-800 dark:text-amber-200/90">
+                                {ws.reason === "no_workspace"
+                                  ? t.workspaceSnapshotNoWorkspace
+                                  : ws.reason === "empty"
+                                  ? ws.message || t.workspaceSnapshotEmpty
+                                  : ws.message || t.workspaceSnapshotError}
+                              </p>
+                            );
+                          })()}
+                        </section>
+                      </>
+                    ) : null}
+                    <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-600 dark: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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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>
+                      <div
+                        id="report-closure-by-kind"
+                        className="mt-4 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none p-4"
+                      >
+                        <div className="mb-3 flex flex-wrap items-center gap-2">
+                          <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                            {t.closureBreakdownTitle}
+                          </h3>
+                          <ReportingFilteredBadge
+                            active={reportingFiltersActive}
+                            label={t.sectionFilteredBadge}
+                            titleText={t.sectionFilteredBadgeTitle}
+                          />
+                          <InlineMetricHelpTrigger
+                            ariaLabel={t.metricHelpClosureBreakdownAria}
+                            body={t.metricHelpClosureBreakdownBody}
+                          />
+                        </div>
+                        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+                          {REPORTING_SESSION_CLOSURE_DISPLAY_ORDER.map(
+                            (closureKey) => {
+                              const count =
+                                agg.sessionCountByClosureKind[closureKey] ?? 0;
+                              return (
+                                <div
+                                  key={closureKey}
+                                  className="rounded-lg border border-zinc-200/80 bg-zinc-100/70 dark:border-zinc-800/80 dark:bg-zinc-950/40 p-3"
+                                >
+                                  <div className="text-xs uppercase text-zinc-500">
+                                    {reportingClosureKindLabels[closureKey]}
+                                  </div>
+                                  <div className="mt-1 text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
+                                    {count}
+                                  </div>
+                                </div>
+                              );
+                            },
+                          )}
+                        </div>
+                      </div>
+                    </section>
+                    {trackCodeMetrics ? (
                       <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"
+                        id="report-loc-metrics"
+                        className="mb-10 scroll-mt-28 space-y-4 rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none 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>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400">
+                            {t.tocLocSection}
+                          </h2>
                           <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}
+                          {t.locMetricsHint}
                         </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 className="grid gap-3 sm:grid-cols-3">
+                          <div className="rounded-lg border border-zinc-200/80 bg-zinc-100/70 dark:border-zinc-800/80 dark: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-900 dark:text-zinc-100">
+                              {agg.linesWrittenTotalSum}
+                            </div>
+                          </div>
+                          <div className="rounded-lg border border-zinc-200/80 bg-zinc-100/70 dark:border-zinc-800/80 dark: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-200/80 bg-zinc-100/70 dark:border-zinc-800/80 dark: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>
-
-                        {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 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-900 dark: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-200 text-xs uppercase text-zinc-500 dark:border-zinc-800">
+                                  <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-200/90 last:border-0 dark:border-zinc-800/80"
+                                    >
+                                      <td className="py-2 pr-3 font-mono text-xs text-zinc-400">
+                                        {lang}
+                                      </td>
+                                      <td className="py-2 tabular-nums text-zinc-800 dark:text-zinc-200">
+                                        {n}
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+                            )}
                           </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) => {
-                                          const projectKeyLower =
-                                            normalizeProjectKey(
-                                              row.projectKey,
-                                            ).toLowerCase();
-                                          const breakdownKey = `${weekStart}:::${projectKeyLower}`;
-                                          const childTagRows =
-                                            projectScopedTagRowsByWeekProject.get(
-                                              breakdownKey,
-                                            ) ?? [];
-                                          const canExpand =
-                                            childTagRows.length > 0;
-                                          const isOpen =
-                                            canExpand &&
-                                            projectWeekTagBreakdownOpenKeys.has(
-                                              breakdownKey,
-                                            );
-                                          const rowTitle =
-                                            row.displayProject ||
-                                            row.projectKey;
-                                          const rowProjectDescription =
-                                            reportingProjectDescriptionLine(
-                                              row.projectKey,
-                                              projectDescriptions,
-                                            ) ?? "";
-                                          return (
-                                            <Fragment
-                                              key={`${weekStart}\0${row.projectKey}`}
-                                            >
-                                              <tr className="border-b border-zinc-800/70 last:border-0">
-                                                {canExpand ? (
-                                                  <td className="align-top px-2 py-2 pl-3 text-sky-200/90">
-                                                    <div className="flex items-start gap-1.5">
-                                                      <button
-                                                        type="button"
-                                                        aria-expanded={isOpen}
-                                                        aria-label={
-                                                          t.tagWeekScopedRollupToggleAria
-                                                        }
-                                                        className="mt-0.5 shrink-0 rounded p-0.5 text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
-                                                        onClick={() =>
-                                                          toggleProjectWeekTagBreakdown(
-                                                            breakdownKey,
-                                                          )
-                                                        }
-                                                      >
-                                                        <ChevronRight
-                                                          className={`size-4 transition-transform duration-200 ${
-                                                            isOpen
-                                                              ? "rotate-90"
-                                                              : ""
-                                                          }`}
-                                                          strokeWidth={2}
-                                                          aria-hidden
-                                                        />
-                                                      </button>
-                                                      <div className="min-w-0">
-                                                        <div>
-                                                          {row.projectKey === ""
-                                                            ? t.projectUnassigned
-                                                            : row.displayProject ||
-                                                              row.projectKey}
-                                                        </div>
-                                                        {rowProjectDescription ? (
-                                                          <p className="mt-1 max-w-[min(22rem,55vw)] whitespace-pre-line text-[0.65rem] font-normal leading-snug text-zinc-500">
-                                                            {
-                                                              rowProjectDescription
-                                                            }
-                                                          </p>
-                                                        ) : null}
-                                                        <p className="mt-1 text-[0.65rem] font-normal tabular-nums text-zinc-500">
-                                                          {childTagRows.length}{" "}
-                                                          {lang === "fr"
-                                                            ? "étiquette(s) liée(s)"
-                                                            : "linked tag(s)"}
-                                                        </p>
-                                                      </div>
-                                                    </div>
-                                                  </td>
-                                                ) : (
-                                                  <ReportingProjectNameCell
-                                                    projectKey={row.projectKey}
-                                                    displayLabel={
-                                                      row.displayProject ||
-                                                      row.projectKey
-                                                    }
-                                                    unassignedLabel={
-                                                      t.projectUnassigned
-                                                    }
-                                                    descriptions={
-                                                      projectDescriptions
-                                                    }
-                                                    className="px-2 py-2 pl-3 text-sky-200/90"
-                                                  />
-                                                )}
-                                                {row.slots.map((mins, i) => {
-                                                  const dateKey = addDaysYmd(
-                                                    row.weekStart,
-                                                    i,
-                                                  );
-                                                  return (
-                                                    <td
-                                                      key={dateKey}
-                                                      className="px-1 py-2 text-center tabular-nums text-zinc-200"
-                                                      title={dateKey}
-                                                    >
-                                                      {mins > 0
-                                                        ? renderReportingDurationButton(
-                                                            mins,
-                                                            {
-                                                              kind: "project",
-                                                              title: rowTitle,
-                                                              dayKey: dateKey,
-                                                              projectKey:
-                                                                row.projectKey,
-                                                              sourceLabel:
-                                                                dayLabel(
-                                                                  dateKey,
-                                                                  t.undatedLabel,
-                                                                ),
-                                                            },
-                                                            "text-zinc-200",
-                                                          )
-                                                        : "—"}
-                                                    </td>
-                                                  );
-                                                })}
-                                                <td className="px-2 py-2 pr-3 text-center tabular-nums font-semibold text-zinc-100">
-                                                  {renderReportingDurationButton(
-                                                    row.total,
-                                                    {
-                                                      kind: "project",
-                                                      title: rowTitle,
-                                                      weekStart: row.weekStart,
-                                                      projectKey:
-                                                        row.projectKey,
-                                                      sourceLabel:
-                                                        weekRangeLabelForSource(
-                                                          row.weekStart,
-                                                          lang,
-                                                          reportLocale,
-                                                        ),
-                                                    },
-                                                    "text-zinc-100",
-                                                  )}
-                                                </td>
-                                              </tr>
-                                              {isOpen
-                                                ? childTagRows.map((child) => (
-                                                    <tr
-                                                      key={`${weekStart}\0${row.projectKey}\0${child.tagKey}`}
-                                                      className="border-b border-zinc-800/55 bg-zinc-950/30"
-                                                    >
-                                                      <ReportingTagNameCell
-                                                        tagKey={child.tagKey}
-                                                        displayLabel={
-                                                          child.displayTag ||
-                                                          child.tagKey
-                                                        }
-                                                        untaggedLabel={
-                                                          t.tagTimeUntagged
-                                                        }
-                                                        descriptions={
-                                                          tagDescriptions
-                                                        }
-                                                        className="px-2 py-2 pl-10 text-violet-200/85"
-                                                      />
-                                                      {child.slots.map(
-                                                        (mins, i) => {
-                                                          const dateKey =
-                                                            addDaysYmd(
-                                                              child.weekStart,
-                                                              i,
-                                                            );
-                                                          return (
-                                                            <td
-                                                              key={dateKey}
-                                                              className="px-1 py-2 text-center tabular-nums text-zinc-300/95"
-                                                              title={dateKey}
-                                                            >
-                                                              {mins > 0
-                                                                ? renderReportingDurationButton(
-                                                                    mins,
-                                                                    {
-                                                                      kind: "tag",
-                                                                      title:
-                                                                        child.displayTag ||
-                                                                        child.tagKey,
-                                                                      dayKey:
-                                                                        dateKey,
-                                                                      tagKey:
-                                                                        child.tagKey,
-                                                                      sourceLabel:
-                                                                        dayLabel(
-                                                                          dateKey,
-                                                                          t.undatedLabel,
-                                                                        ),
-                                                                    },
-                                                                    "text-zinc-300/95",
-                                                                  )
-                                                                : "—"}
-                                                            </td>
-                                                          );
-                                                        },
-                                                      )}
-                                                      <td className="px-2 py-2 pr-3 text-center tabular-nums font-medium text-zinc-200">
-                                                        {renderReportingDurationButton(
-                                                          child.total,
-                                                          {
-                                                            kind: "tag",
-                                                            title:
-                                                              child.displayTag ||
-                                                              child.tagKey,
-                                                            weekStart:
-                                                              child.weekStart,
-                                                            tagKey:
-                                                              child.tagKey,
-                                                            sourceLabel:
-                                                              weekRangeLabelForSource(
-                                                                child.weekStart,
-                                                                lang,
-                                                                reportLocale,
-                                                              ),
-                                                          },
-                                                          "text-zinc-200",
-                                                        )}
-                                                      </td>
-                                                    </tr>
-                                                  ))
-                                                : null}
-                                            </Fragment>
-                                          );
-                                        })}
-                                      </tbody>
-                                    </table>
-                                  </div>
-                                </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-900 dark: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-200 text-xs uppercase text-zinc-500 dark:border-zinc-800">
+                                  <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-200/90 last:border-0 dark:border-zinc-800/80"
+                                      >
+                                        <td className="py-2 pr-3 font-mono text-xs text-zinc-400">
+                                          {lang}
+                                        </td>
+                                        <td className="py-2 tabular-nums text-zinc-800 dark:text-zinc-200">
+                                          {n}
+                                        </td>
+                                      </tr>
+                                    ),
+                                  )}
+                                </tbody>
+                              </table>
                             )}
                           </div>
-                        )}
+                        </div>
                       </section>
-                    </>
-                  )}
+                    ) : null}
+                    {hasReportingChartData ? (
+                      <section
+                        id="report-daily-table"
+                        className="scroll-mt-28 overflow-x-auto rounded-xl border border-zinc-200 bg-white/95 shadow-sm shadow-zinc-900/[0.06] dark:border-zinc-800 dark:bg-zinc-900/50 dark:shadow-none"
+                      >
+                        <div className="flex flex-wrap items-center gap-2 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+                          <h3 className="text-sm font-semibold text-zinc-900 dark: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-200 text-xs uppercase text-zinc-500 dark:border-zinc-800">
+                            <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.tableTaskTimeNonConcurrent}</span>
+                                </div>
+                              </th>
+                              <th className="px-4 py-3 font-medium tabular-nums">
+                                <div className="flex min-h-5 items-center gap-0.5">
+                                  <span>{t.tableSessionCoding}</span>
+                                  <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-200/90 last:border-0 dark:border-zinc-800/80"
+                              >
+                                <td className="px-4 py-2.5 text-zinc-900 dark:text-zinc-200">
+                                  {dayLabel(d, t.undatedLabel)}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-zinc-700 dark:text-zinc-300">
+                                  {agg.sessionsByDay[d] ?? 0}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-fuchsia-800 dark:text-fuchsia-300/90">
+                                  {formatMinutesCell(
+                                    agg.sessionWallClockMinutesByDay[d],
+                                  )}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-emerald-800 dark:text-emerald-400/90">
+                                  {agg.tasksByDayDone[d] ?? 0}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-amber-800 dark:text-amber-400/90">
+                                  {agg.tasksByDayActive[d] ?? 0}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-sky-800 dark:text-sky-300/90">
+                                  {formatMinutesCell(agg.taskMinutesByDay[d])}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-cyan-800 dark:text-cyan-300/90">
+                                  {formatMinutesCell(
+                                    agg.nonConcurrentTaskMinutesByDay[d],
+                                  )}
+                                </td>
+                                <td className="px-4 py-2.5 tabular-nums text-zinc-700 dark:text-zinc-300">
+                                  {formatMinutesCell(
+                                    agg.sessionCodingMinutesByDay[d],
+                                  )}
+                                </td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </section>
+                    ) : null}
+                  </div>
                 </>
               )}
             </div>
@@ -3614,7 +4095,7 @@ function ReportingContent() {
               ) : null}
               <div
                 ref={taskInspectModalRef}
-                className="max-h-[72vh] overflow-hidden rounded-xl border border-zinc-700 bg-zinc-900 shadow-2xl"
+                className="max-h-[72vh] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-2xl dark:border-zinc-700 dark:bg-zinc-900"
                 style={
                   taskInspectPlacement
                     ? {
@@ -3634,15 +4115,15 @@ function ReportingContent() {
                       }
                 }
               >
-                <div className="flex items-center justify-between gap-3 border-b border-zinc-700 px-4 py-3">
+                <div className="flex items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3 dark:border-zinc-700">
                   <div className="min-w-0">
-                    <h2 className="min-w-0 truncate text-sm font-semibold text-zinc-100 sm:text-base">
+                    <h2 className="min-w-0 truncate text-sm font-semibold text-zinc-900 sm:text-base dark:text-zinc-100">
                       {lang === "fr"
                         ? `Détails des tâches - ${taskInspectScope.title}`
                         : `Task details - ${taskInspectScope.title}`}
                     </h2>
                     {taskInspectScope.sourceLabel ? (
-                      <p className="mt-0.5 truncate text-[0.7rem] text-zinc-400">
+                      <p className="mt-0.5 truncate text-[0.7rem] text-zinc-600 dark:text-zinc-400">
                         {lang === "fr"
                           ? `Source : ${
                               taskInspectScope.kind === "tag"
@@ -3659,7 +4140,7 @@ function ReportingContent() {
                   </div>
                   <button
                     type="button"
-                    className="rounded border border-zinc-600 px-2 py-1 text-xs text-zinc-200 hover:bg-zinc-800"
+                    className="rounded border border-zinc-300 px-2 py-1 text-xs text-zinc-800 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
                     onClick={() => {
                       setTaskInspectScope(null);
                       setTaskInspectAnchor(null);
@@ -3698,7 +4179,7 @@ function ReportingContent() {
                       ))}
                     </div>
                   ) : (
-                    <p className="text-sm text-zinc-400">
+                    <p className="text-sm text-zinc-600 dark:text-zinc-400">
                       {lang === "fr"
                         ? "Aucune tâche correspondante pour ce segment de temps."
                         : "No matching tasks for this time segment."}
@@ -3713,6 +4194,7 @@ function ReportingContent() {
       <ReportingTour
         open={reportingTourOpen}
         onOpenChange={setReportingTourOpen}
+        onStepChange={syncReportingTourTab}
         dt={dt}
         hasReportingChartData={hasReportingChartData}
       />