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

package/components/dashboard/SelectedSessionSidebarBlock.tsx

@@ -2,17 +2,20 @@
 
 import type { RefObject } from "react";
 import { useEffect, useMemo, useState } from "react";
-import { CheckCircle2, Pencil } from "lucide-react";
+import { CheckCircle2, ChevronDown, LayoutGrid, Pencil } from "lucide-react";
 import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
 import { SessionLocMetricsSection } from "@/components/dashboard/SessionLocMetricsSection";
 import { WorkspaceGitRepoCard } from "@/components/dashboard/WorkspaceGitRepoCard";
 import { formatDuration, formatWallDurationMs } from "@/lib/taskParsing";
-import { tbEmeraldIcon } from "@/lib/translucentButtonClasses";
+import { tbEmeraldIcon, tbVioletIcon } from "@/lib/translucentButtonClasses";
 import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
 import type { GitRepoStatisticsPayload } from "@/lib/kronosysApi";
 import { formatSessionEndReasonLine } from "@/lib/sessionEndReason";
 import { SessionEndReasonEditor } from "@/components/dashboard/SessionEndReasonEditor";
-import { countSessionTasksForSidebar } from "@/lib/sessionTaskSidebarStats";
+import {
+  countSessionTasksForSidebar,
+  getSessionTaskTimerBreakdown,
+} from "@/lib/sessionTaskSidebarStats";
 import { useSmoothStopwatchDisplayMs } from "@/components/dashboard/useSmoothStopwatchMs";
 import {
   KronosysDatetimePopoverField,
@@ -27,31 +30,62 @@ type SessionMetricsShape = {
   archived?: boolean;
   /** Session en pause (collecte) : la durée murale ne progresse pas tant que la session est en pause. */
   isPaused?: boolean;
+  /** Contexte de pause globale sur la session live (présent tant que la reprise globale n’a pas eu lieu). */
+  globalPauseContext?: unknown;
   /** Horodatage immuable de création de la session ; repli : `startAt` pour les anciennes données. */
   createdAt?: string | null;
   /** Début officiel de la session (ISO 8601), aligné sur l’historique / la liste. */
   startAt?: string | null;
   endAt?: string | null;
+  scheduledEndAt?: string | null;
   sessionEndReasonKind?: string;
   sessionEndReasonNote?: string;
+  sessionNote?: string;
   sessionDurationMinutes?: number;
   codingMinutesSession?: number;
   activeMinutes?: number;
   totalEvents?: number;
   tasks?: Array<{
     id?: string;
+    name?: string;
+    startTime?: string;
+    endTime?: string;
+    durationMs?: number;
+    project?: string | null;
     isDone?: boolean;
     manualTaskTimerPaused?: boolean;
+    subtasks?: Array<{ id?: string; durationMs?: number }>;
+    activeSubtaskTimerId?: string | null;
+    subtaskTimerStartedAt?: string | number;
+    mainTimerSegmentStartedAt?: string | null;
   }>;
   activeTasks?: Array<{
     id?: string;
+    name?: string;
+    startTime?: string;
+    endTime?: string;
+    durationMs?: number;
+    project?: string | null;
     isDone?: boolean;
     manualTaskTimerPaused?: boolean;
+    subtasks?: Array<{ id?: string; durationMs?: number }>;
+    activeSubtaskTimerId?: string | null;
+    subtaskTimerStartedAt?: string | number;
+    mainTimerSegmentStartedAt?: string | null;
   }>;
   activeTask?: {
     id?: string;
+    name?: string;
+    startTime?: string;
+    endTime?: string;
+    durationMs?: number;
+    project?: string | null;
     isDone?: boolean;
     manualTaskTimerPaused?: boolean;
+    subtasks?: Array<{ id?: string; durationMs?: number }>;
+    activeSubtaskTimerId?: string | null;
+    subtaskTimerStartedAt?: string | number;
+    mainTimerSegmentStartedAt?: string | null;
   } | null;
   linesWrittenTotal?: number;
   linesWrittenHuman?: number;
@@ -89,6 +123,9 @@ export function SelectedSessionSidebarBlock({
   sessionDurationAlertThresholdMinutes,
   allowSessionStartTimeEdit = true,
   allowSessionEndTimeEdit = true,
+  onOpenTaskGantt,
+  /** Cadre plein largeur (défaut) ou contenu plat pour modale élargie (moins de hauteur, grille horizontale). */
+  surface = "card",
 }: {
   lang: Lang;
   t: DashboardStrings;
@@ -126,6 +163,9 @@ export function SelectedSessionSidebarBlock({
   allowSessionStartTimeEdit?: boolean;
   /** Option `dashboardAllowSessionEndTimeEdit` : correction de la fin de session (terminée). */
   allowSessionEndTimeEdit?: boolean;
+  /** Ouvre la modale Gantt pour la session affichée dans cette carte. */
+  onOpenTaskGantt: () => void;
+  surface?: "card" | "modalEmbed";
 }) {
   const liveSid =
     typeof sessionCurrent?.sessionId === "string"
@@ -146,13 +186,17 @@ export function SelectedSessionSidebarBlock({
     number | null
   >(null);
   const [sessionEndDraft, setSessionEndDraft] = useState("");
+  const [sessionNoteDraft, setSessionNoteDraft] = useState("");
+  const [sessionClosureExpanded, setSessionClosureExpanded] = useState(false);
+  const [blinkNowMs, setBlinkNowMs] = useState(() => Date.now());
+  const [statsNowMs, setStatsNowMs] = useState(() => Date.now());
 
   const sessionWallMinutes =
     optimisticSessionWallMinutes !== null
       ? optimisticSessionWallMinutes
       : derivedSessionWallMinutes !== null
-        ? derivedSessionWallMinutes
-        : (sessionCurrent?.sessionDurationMinutes ?? 0);
+      ? derivedSessionWallMinutes
+      : sessionCurrent?.sessionDurationMinutes ?? 0;
   const sessionEnded =
     typeof sessionCurrent?.endAt === "string" &&
     sessionCurrent.endAt.trim() !== "";
@@ -175,7 +219,11 @@ export function SelectedSessionSidebarBlock({
   const sessionWallDisplayMinutes = sessionWallDisplayMs / 60_000;
   const threshold = Math.max(1, sessionDurationAlertThresholdMinutes);
   const sessionDurationOverThreshold = sessionWallDisplayMinutes >= threshold;
-  const taskCounts = countSessionTasksForSidebar(sessionCurrent);
+  const taskCounts = countSessionTasksForSidebar(sessionCurrent, statsNowMs);
+  const taskTimerBreakdown = getSessionTaskTimerBreakdown(
+    sessionCurrent,
+    statsNowMs,
+  );
   const endReasonLine = sessionCurrent
     ? formatSessionEndReasonLine(
         t,
@@ -203,6 +251,10 @@ export function SelectedSessionSidebarBlock({
     targetSessionEndReasonId !== "" &&
     !inspectingLiveRunning &&
     (sessionEnded || inspectingArchive);
+  const hasSessionClosureBox =
+    hasSessionContext &&
+    (canEditSessionEndReason ||
+      (showSessionEndReason && Boolean(endReasonLine)));
   const canEditSessionStartTime =
     allowSessionStartTimeEdit &&
     hasSessionContext &&
@@ -211,11 +263,8 @@ export function SelectedSessionSidebarBlock({
   const canEditSessionEndTime =
     allowSessionEndTimeEdit &&
     hasSessionContext &&
-    sessionEnded &&
     typeof sessionCurrent?.startAt === "string" &&
-    sessionCurrent.startAt.trim() !== "" &&
-    typeof sessionCurrent?.endAt === "string" &&
-    sessionCurrent.endAt.trim() !== "";
+    sessionCurrent.startAt.trim() !== "";
   const [sessionStartDraft, setSessionStartDraft] = useState("");
 
   useEffect(() => {
@@ -235,6 +284,8 @@ export function SelectedSessionSidebarBlock({
     const raw =
       typeof sessionCurrent?.endAt === "string"
         ? sessionCurrent.endAt.trim()
+        : typeof sessionCurrent?.scheduledEndAt === "string"
+        ? sessionCurrent.scheduledEndAt.trim()
         : "";
     const parsed = raw ? new Date(raw) : null;
     if (!parsed || Number.isNaN(parsed.getTime())) {
@@ -242,7 +293,19 @@ export function SelectedSessionSidebarBlock({
       return;
     }
     setSessionEndDraft(formatDatetimeLocalValue(parsed));
-  }, [sessionCurrent?.sessionId, sessionCurrent?.endAt]);
+  }, [
+    sessionCurrent?.sessionId,
+    sessionCurrent?.endAt,
+    sessionCurrent?.scheduledEndAt,
+  ]);
+
+  useEffect(() => {
+    setSessionNoteDraft(
+      typeof sessionCurrent?.sessionNote === "string"
+        ? sessionCurrent.sessionNote
+        : "",
+    );
+  }, [sessionCurrent?.sessionId, sessionCurrent?.sessionNote]);
 
   useEffect(() => {
     setOptimisticSessionWallMinutes(null);
@@ -252,6 +315,11 @@ export function SelectedSessionSidebarBlock({
     sessionCurrent?.endAt,
   ]);
 
+  useEffect(() => {
+    // Par défaut: bloc de clôture replié à chaque changement de session.
+    setSessionClosureExpanded(false);
+  }, [sessionCurrent?.sessionId, columnArchiveId]);
+
   useEffect(() => {
     const startMs =
       typeof sessionCurrent?.startAt === "string"
@@ -276,6 +344,24 @@ export function SelectedSessionSidebarBlock({
     setDerivedSessionWallMinutes(null);
   }, [sessionCurrent?.startAt, sessionCurrent?.endAt, smoothSessionWall]);
 
+  useEffect(() => {
+    const hasScheduledEnd =
+      typeof sessionCurrent?.scheduledEndAt === "string" &&
+      sessionCurrent.scheduledEndAt.trim() !== "";
+    if (!hasScheduledEnd || sessionEnded) {
+      return;
+    }
+    const interval = globalThis.setInterval(() => {
+      setBlinkNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(interval);
+  }, [sessionCurrent?.scheduledEndAt, sessionEnded, sessionCurrent?.sessionId]);
+
+  useEffect(() => {
+    const id = globalThis.setInterval(() => setStatsNowMs(Date.now()), 1000);
+    return () => globalThis.clearInterval(id);
+  }, []);
+
   const applySessionStartTimeEdit = () => {
     if (!canEditSessionStartTime) {
       return;
@@ -288,6 +374,13 @@ export function SelectedSessionSidebarBlock({
     if (startAt === sessionCurrent?.startAt) {
       return;
     }
+    const endWallMs =
+      typeof sessionCurrent?.endAt === "string"
+        ? Date.parse(sessionCurrent.endAt)
+        : Number.NaN;
+    if (Number.isFinite(endWallMs) && startMs > endWallMs) {
+      return;
+    }
     if (smoothSessionWall) {
       setOptimisticSessionWallMinutes(
         Math.max(0, (Date.now() - startMs) / 60000),
@@ -313,7 +406,7 @@ export function SelectedSessionSidebarBlock({
       return;
     }
     const endAt = new Date(endMs).toISOString();
-    if (endAt === sessionCurrent.endAt) {
+    if (endAt === (sessionCurrent.endAt ?? sessionCurrent.scheduledEndAt)) {
       return;
     }
     setOptimisticSessionWallMinutes(Math.max(0, (endMs - startMs) / 60000));
@@ -325,42 +418,165 @@ export function SelectedSessionSidebarBlock({
   };
 
   const sessionStartFormatted = useMemo(() => {
-    const raw = typeof sessionCurrent?.startAt === "string" ? sessionCurrent.startAt.trim() : "";
+    const raw =
+      typeof sessionCurrent?.startAt === "string"
+        ? sessionCurrent.startAt.trim()
+        : "";
     if (!raw) {
       return null;
     }
     return formatIsoInstantShort(raw, lang, displayTimeZone, use24HourClock);
   }, [sessionCurrent?.startAt, displayTimeZone, lang, use24HourClock]);
+  const sessionEndFormatted = useMemo(() => {
+    const raw =
+      typeof sessionCurrent?.endAt === "string"
+        ? sessionCurrent.endAt.trim()
+        : typeof sessionCurrent?.scheduledEndAt === "string"
+        ? sessionCurrent.scheduledEndAt.trim()
+        : "";
+    if (!raw) {
+      return null;
+    }
+    return formatIsoInstantShort(raw, lang, displayTimeZone, use24HourClock);
+  }, [
+    sessionCurrent?.endAt,
+    sessionCurrent?.scheduledEndAt,
+    displayTimeZone,
+    lang,
+    use24HourClock,
+  ]);
   const sessionCreatedFormatted = useMemo(() => {
     const raw =
-      typeof sessionCurrent?.createdAt === "string" && sessionCurrent.createdAt.trim() !== ""
+      typeof sessionCurrent?.createdAt === "string" &&
+      sessionCurrent.createdAt.trim() !== ""
         ? sessionCurrent.createdAt.trim()
         : typeof sessionCurrent?.startAt === "string"
-          ? sessionCurrent.startAt.trim()
-          : "";
+        ? sessionCurrent.startAt.trim()
+        : "";
     if (!raw) {
       return null;
     }
     return formatIsoInstantShort(raw, lang, displayTimeZone, use24HourClock);
-  }, [sessionCurrent?.createdAt, sessionCurrent?.startAt, displayTimeZone, lang, use24HourClock]);
+  }, [
+    sessionCurrent?.createdAt,
+    sessionCurrent?.startAt,
+    displayTimeZone,
+    lang,
+    use24HourClock,
+  ]);
   const sessionNameFallback =
     liveSid !== ""
       ? sessionCreatedFormatted
         ? `${liveSid.slice(0, 8)} · ${sessionCreatedFormatted}`
         : liveSid.slice(0, 8)
       : lang === "fr"
-        ? "Nom de la session"
-        : "Session name";
+      ? "Nom de la session"
+      : "Session name";
+  const scheduledSessionEndMs =
+    typeof sessionCurrent?.scheduledEndAt === "string" &&
+    sessionCurrent.scheduledEndAt.trim() !== ""
+      ? Date.parse(sessionCurrent.scheduledEndAt)
+      : Number.NaN;
+  const sessionRemainingMs = Number.isFinite(scheduledSessionEndMs)
+    ? scheduledSessionEndMs - blinkNowMs
+    : Number.NaN;
+  let sessionEndAlertClassName = "";
+  if (
+    !sessionEnded &&
+    Number.isFinite(sessionRemainingMs) &&
+    sessionRemainingMs > 0
+  ) {
+    if (sessionRemainingMs <= 5 * 60_000) {
+      sessionEndAlertClassName = "kronosys-end-time-alert-fast";
+    } else if (sessionRemainingMs <= 15 * 60_000) {
+      sessionEndAlertClassName = "kronosys-end-time-alert-slow";
+    }
+  }
+
+  /** Session live au premier plan : pas d’archive / pas d’onglet détaché sur une autre session. */
+  const isLiveSessionSidebar = hasSessionContext && columnArchiveId === null;
+
+  const globalPauseActive =
+    isLiveSessionSidebar &&
+    sessionCurrent &&
+    typeof sessionCurrent === "object" &&
+    "globalPauseContext" in sessionCurrent &&
+    (sessionCurrent as Record<string, unknown>).globalPauseContext != null;
+  const sessionWallPausedLive =
+    isLiveSessionSidebar &&
+    sessionCurrent?.archived !== true &&
+    sessionCurrent?.isPaused === true;
+
+  let sessionSidebarHeading = t.selectedSessionSidebarTitleIdle;
+  if (hasSessionContext) {
+    sessionSidebarHeading = isLiveSessionSidebar
+      ? t.selectedSessionSidebarTitleLive
+      : t.selectedSessionSidebarTitle;
+  }
+
+  const isModalEmbed = surface === "modalEmbed";
+  const timingStartLabel = lang === "fr" ? "Début" : "Start";
+  const timingDurationLabel = lang === "fr" ? "Durée" : "Duration";
+  const timingTrackedTotalLabel =
+    lang === "fr" ? "Total minuté (tâches)" : "Tracked total (tasks)";
+  const timingEndLabel = lang === "fr" ? "Fin" : "End";
+  const metricCellClass = isModalEmbed
+    ? "w-full min-w-0"
+    : "w-full max-w-[11rem] sm:max-w-none";
+  const tasksCellClass = isModalEmbed
+    ? "w-full min-w-0"
+    : "w-full max-w-[13rem] sm:max-w-none";
+  const metricsSectionClass = [
+    "grid rounded-lg border border-zinc-200 bg-zinc-50/80 p-3 dark:border-zinc-700/80 dark:bg-zinc-900/35",
+    isModalEmbed
+      ? showIdeCodeTimingMetrics
+        ? "grid-cols-2 gap-2 text-left md:grid-cols-3 md:gap-3"
+        : "grid-cols-2 gap-2 text-left"
+      : showIdeCodeTimingMetrics
+      ? "justify-items-center gap-3 text-center sm:grid-cols-3"
+      : "justify-items-center gap-3 text-center sm:grid-cols-2",
+  ].join(" ");
+
+  const rootSurfaceClass = isModalEmbed
+    ? "flex min-w-0 flex-col gap-3 rounded-none border-0 bg-transparent p-0 text-left shadow-none sm:gap-4 dark:bg-transparent"
+    : "flex min-w-0 flex-col gap-5 rounded-xl border border-zinc-200 bg-white/90 p-5 text-center shadow-sm sm:p-6 dark:border-zinc-800 dark:bg-zinc-800/40 dark:shadow-none";
 
   return (
-    <div className="flex min-w-0 flex-col gap-5 rounded-xl border border-zinc-200 bg-white/90 p-5 text-center shadow-sm sm:p-6 dark:border-zinc-800 dark:bg-zinc-800/40 dark:shadow-none">
+    <div className={rootSurfaceClass}>
       <div>
-        <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
-          {t.selectedSessionSidebarTitle}
+        <h2
+          className={`${
+            isLiveSessionSidebar
+              ? "text-xs font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400"
+              : "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
+          } ${
+            isModalEmbed ? "text-left" : ""
+          } flex flex-wrap items-center gap-x-2 gap-y-1`}
+        >
+          <span>{sessionSidebarHeading}</span>
+          {globalPauseActive ? (
+            <span className="rounded-md border border-amber-600/55 bg-amber-950/55 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-amber-100 shadow-sm dark:border-amber-500/45 dark:bg-amber-950/65 dark:text-amber-50">
+              {t.selectedSessionSidebarPausedBadgeGlobal}
+            </span>
+          ) : sessionWallPausedLive ? (
+            <span className="rounded-md border border-amber-600/55 bg-amber-950/55 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-amber-100 shadow-sm dark:border-amber-500/45 dark:bg-amber-950/65 dark:text-amber-50">
+              {t.selectedSessionSidebarPausedBadgeSession}
+            </span>
+          ) : null}
         </h2>
         {hasSessionContext ? (
-          <div className="mt-2 flex min-w-0 flex-wrap items-center justify-center gap-x-2 gap-y-1">
-            <div className="flex min-w-0 max-w-full flex-1 basis-48 items-center justify-center gap-1.5 sm:max-w-md">
+          <div
+            className={`mt-2 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 ${
+              isModalEmbed ? "justify-start" : "justify-center"
+            }`}
+          >
+            <div
+              className={`flex min-w-0 max-w-full flex-1 basis-48 gap-1.5 sm:max-w-md ${
+                isModalEmbed
+                  ? "items-center justify-start"
+                  : "items-center justify-center"
+              }`}
+            >
               <input
                 ref={sessionNameInputRef}
                 id="kronosys-session-name-sidebar"
@@ -425,51 +641,161 @@ export function SelectedSessionSidebarBlock({
             {t.selectedSessionIdleHint}
           </p>
         )}
-        {hasSessionContext && sessionStartFormatted ? (
-          <p className="mt-2 flex flex-wrap items-center justify-center gap-x-1.5 gap-y-0.5 text-center text-[0.7rem] leading-tight text-zinc-600 dark:text-zinc-400">
-            <span className="font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-              {headerSessionStart}
-            </span>
-            <span className="font-mono font-medium text-zinc-800 dark:text-zinc-200">{sessionStartFormatted}</span>
-          </p>
-        ) : null}
-      </div>
-
-      {hasSessionContext ? (
-        <section className="grid justify-items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50/80 p-3 text-center sm:grid-cols-2 dark:border-zinc-700/80 dark:bg-zinc-900/35">
-          <div className="w-full max-w-[11rem] sm:max-w-none">
-            <div className="flex min-h-5 items-center justify-center gap-0.5">
-              <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
-                {headerSessionDuration}
+        {hasSessionContext ? (
+          <section className="mt-3 space-y-2 rounded-lg border border-zinc-200 bg-zinc-50/90 p-3 text-left text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
+            <div className="flex min-w-0 items-center gap-2 text-sm">
+              <span className="w-20 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
+                {timingStartLabel}
+              </span>
+              {canEditSessionStartTime ? (
+                <div className="min-w-0 flex-1">
+                  <KronosysDatetimePopoverField
+                    value={sessionStartDraft}
+                    onChange={setSessionStartDraft}
+                    onBlur={applySessionStartTimeEdit}
+                    aria-label={timingStartLabel}
+                    lang={lang}
+                    t={t}
+                  />
+                </div>
+              ) : (
+                <span className="min-w-0 flex-1 font-mono font-medium text-zinc-800 dark:text-zinc-200">
+                  {sessionStartFormatted ?? "—"}
+                </span>
+              )}
+            </div>
+            <div className="flex min-w-0 items-center gap-2 text-sm">
+              <span className="w-20 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
+                {timingEndLabel}
+              </span>
+              {canEditSessionEndTime ? (
+                <div className={`min-w-0 flex-1 ${sessionEndAlertClassName}`}>
+                  <KronosysDatetimePopoverField
+                    value={sessionEndDraft}
+                    onChange={setSessionEndDraft}
+                    onBlur={applySessionEndTimeEdit}
+                    aria-label={timingEndLabel}
+                    lang={lang}
+                    defaultTimeMode="next-half-hour"
+                    t={t}
+                  />
+                </div>
+              ) : (
+                <span
+                  className={`min-w-0 flex-1 font-mono font-medium text-zinc-800 dark:text-zinc-200 ${sessionEndAlertClassName}`}
+                >
+                  {sessionEndFormatted ?? "—"}
+                </span>
+              )}
+            </div>
+            <div className="flex min-w-0 items-center gap-2 text-sm">
+              <span className="w-20 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
+                {timingDurationLabel}
+              </span>
+              <span
+                className={`min-w-0 flex-1 font-semibold tabular-nums ${
+                  sessionDurationOverThreshold
+                    ? "kronosys-session-duration-alert"
+                    : "text-zinc-900 dark:text-zinc-100"
+                }`}
+                title={
+                  sessionDurationOverThreshold
+                    ? lang === "fr"
+                      ? `Durée murale au seuil d’alerte ou au-delà (${Math.round(
+                          threshold / 60,
+                        )} h — Paramètres)`
+                      : `Wall-clock duration at or past alert threshold (${Math.round(
+                          threshold / 60,
+                        )} h — Settings)`
+                    : undefined
+                }
+              >
+                {smoothSessionWall
+                  ? formatWallDurationMs(sessionWallDisplayMs)
+                  : formatDuration(sessionWallDisplayMinutes)}
               </span>
               <InlineMetricHelpTrigger
                 ariaLabel={t.statsMetricSessionDurationHelpAria}
                 body={t.statsMetricSessionDurationHelpBody}
               />
             </div>
-            <div
-              className={`text-xl font-semibold tabular-nums ${
-                sessionDurationOverThreshold
-                  ? "kronosys-session-duration-alert"
-                  : "text-zinc-900 dark:text-zinc-100"
-              }`}
-              title={
-                sessionDurationOverThreshold
-                  ? lang === "fr"
-                    ? `Durée murale au seuil d’alerte ou au-delà (${Math.round(threshold / 60)} h — Paramètres)`
-                    : `Wall-clock duration at or past alert threshold (${Math.round(threshold / 60)} h — Settings)`
-                  : undefined
-              }
-            >
-              {smoothSessionWall
-                ? formatWallDurationMs(sessionWallDisplayMs)
-                : formatDuration(sessionWallDisplayMinutes)}
+            <div className="flex min-w-0 items-start gap-2 text-sm">
+              <span className="w-20 shrink-0 font-medium text-zinc-500 dark:text-zinc-400">
+                {timingTrackedTotalLabel}
+              </span>
+              <div className="min-w-0 flex-1 space-y-0.5 font-medium tabular-nums text-zinc-800 dark:text-zinc-200">
+                <div>
+                  {lang === "fr"
+                    ? `${taskTimerBreakdown.taskCount} tâche${
+                        taskTimerBreakdown.taskCount > 1 ? "s" : ""
+                      } (${formatWallDurationMs(
+                        taskTimerBreakdown.taskTimersTotalMs,
+                      )})`
+                    : `${taskTimerBreakdown.taskCount} task${
+                        taskTimerBreakdown.taskCount > 1 ? "s" : ""
+                      } (${formatWallDurationMs(
+                        taskTimerBreakdown.taskTimersTotalMs,
+                      )})`}
+                </div>
+                <div>
+                  {lang === "fr"
+                    ? `${taskTimerBreakdown.subtaskCount} sous-tâche${
+                        taskTimerBreakdown.subtaskCount > 1 ? "s" : ""
+                      } (${formatWallDurationMs(
+                        taskTimerBreakdown.subtaskTimersTotalMs,
+                      )})`
+                    : `${taskTimerBreakdown.subtaskCount} subtask${
+                        taskTimerBreakdown.subtaskCount > 1 ? "s" : ""
+                      } (${formatWallDurationMs(
+                        taskTimerBreakdown.subtaskTimersTotalMs,
+                      )})`}
+                </div>
+              </div>
             </div>
-          </div>
+            <div className="space-y-1 text-sm">
+              <label
+                htmlFor="kronosys-session-note"
+                className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500"
+              >
+                {t.sessionNoteLabel}
+              </label>
+              <textarea
+                id="kronosys-session-note"
+                className="w-full rounded-lg border border-zinc-300 bg-white/90 px-3 py-2 text-sm text-zinc-800 outline-none transition focus:border-violet-500 dark:border-zinc-700 dark:bg-zinc-900/70 dark:text-zinc-100"
+                placeholder={t.sessionNotePlaceholder}
+                value={sessionNoteDraft}
+                onChange={(e) => setSessionNoteDraft(e.target.value)}
+                onBlur={() => {
+                  if (
+                    sessionNoteDraft === (sessionCurrent?.sessionNote ?? "")
+                  ) {
+                    return;
+                  }
+                  void post({
+                    type: "setSessionNote",
+                    sessionId: targetSessionEndReasonId,
+                    note: sessionNoteDraft,
+                  });
+                }}
+                rows={3}
+              />
+            </div>
+          </section>
+        ) : null}
+      </div>
+
+      {hasSessionContext ? (
+        <section className={metricsSectionClass}>
           {showIdeCodeTimingMetrics ? (
             <>
-              <div className="w-full max-w-[11rem] sm:max-w-none">
-                <div className="flex min-h-5 items-center justify-center gap-0.5">
+              <div className={metricCellClass}>
+                <div
+                  className={`flex min-h-5 gap-0.5 ${
+                    isModalEmbed
+                      ? "items-center justify-start"
+                      : "items-center justify-center"
+                  }`}
+                >
                   <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
                     {headerCoding}
                   </span>
@@ -478,12 +804,22 @@ export function SelectedSessionSidebarBlock({
                     body={t.statsMetricCodingTimeHelpBody}
                   />
                 </div>
-                <div className="text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
+                <div
+                  className={`text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100 ${
+                    isModalEmbed ? "text-left" : ""
+                  }`}
+                >
                   {formatDuration(sessionCurrent?.codingMinutesSession ?? 0)}
                 </div>
               </div>
-              <div className="w-full max-w-[11rem] sm:max-w-none">
-                <div className="flex min-h-5 items-center justify-center gap-0.5">
+              <div className={metricCellClass}>
+                <div
+                  className={`flex min-h-5 gap-0.5 ${
+                    isModalEmbed
+                      ? "items-center justify-start"
+                      : "items-center justify-center"
+                  }`}
+                >
                   <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
                     {headerActive}
                   </span>
@@ -492,14 +828,24 @@ export function SelectedSessionSidebarBlock({
                     body={t.statsMetricActiveTimeHelpBody}
                   />
                 </div>
-                <div className="text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
+                <div
+                  className={`text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100 ${
+                    isModalEmbed ? "text-left" : ""
+                  }`}
+                >
                   {formatDuration(sessionCurrent?.activeMinutes ?? 0)}
                 </div>
               </div>
             </>
           ) : null}
-          <div className="w-full max-w-[13rem] sm:max-w-none">
-            <div className="flex min-h-5 items-center justify-center gap-0.5">
+          <div className={tasksCellClass}>
+            <div
+              className={`flex min-h-5 gap-0.5 ${
+                isModalEmbed
+                  ? "items-center justify-start"
+                  : "items-center justify-center"
+              }`}
+            >
               <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
                 {headerTasks}
               </span>
@@ -509,7 +855,13 @@ export function SelectedSessionSidebarBlock({
                 align="end"
               />
             </div>
-            <div className="mx-auto mt-1 w-full max-w-[12.5rem] space-y-1 text-left text-[0.7rem] leading-tight text-zinc-800 dark:text-zinc-200">
+            <div
+              className={`mt-1 w-full space-y-1 text-[0.7rem] leading-tight text-zinc-800 dark:text-zinc-200 ${
+                isModalEmbed
+                  ? "max-w-none text-left"
+                  : "mx-auto max-w-[12.5rem] text-left"
+              }`}
+            >
               <div className="flex items-baseline justify-between gap-2">
                 <span className="min-w-0 shrink text-zinc-500 dark:text-zinc-400">
                   {t.statsTasksRowRunning}
@@ -518,6 +870,14 @@ export function SelectedSessionSidebarBlock({
                   {taskCounts.running}
                 </span>
               </div>
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="min-w-0 shrink text-zinc-500 dark:text-zinc-400">
+                  {t.statsTasksRowPlanned}
+                </span>
+                <span className="shrink-0 tabular-nums font-semibold text-zinc-900 dark:text-zinc-100">
+                  {taskCounts.planned}
+                </span>
+              </div>
               <div className="flex items-baseline justify-between gap-2">
                 <span className="min-w-0 shrink text-zinc-500 dark:text-zinc-400">
                   {t.statsTasksRowPausedList}
@@ -539,90 +899,100 @@ export function SelectedSessionSidebarBlock({
         </section>
       ) : null}
 
-      {canEditSessionStartTime ? (
+      {hasSessionClosureBox ? (
         <div className="rounded-lg border border-zinc-200 bg-zinc-50/90 px-3 py-2.5 text-left text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
-          <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-            {t.sessionStartTimeEditSectionTitle}
-          </div>
-          <div className="mt-2 flex min-w-0 flex-wrap items-center gap-2">
-            <KronosysDatetimePopoverField
-              value={sessionStartDraft}
-              onChange={setSessionStartDraft}
-              onBlur={applySessionStartTimeEdit}
-              aria-label={t.sessionStartTimeEditSectionTitle}
-              lang={lang}
-              t={t}
-            />
-          </div>
-        </div>
-      ) : null}
-
-      {canEditSessionEndTime ? (
-        <div className="rounded-lg border border-zinc-200 bg-zinc-50/90 px-3 py-2.5 text-left text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
-          <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-            {t.sessionEndTimeEditSectionTitle}
-          </div>
-          <div className="mt-2 flex min-w-0 flex-wrap items-center gap-2">
-            <KronosysDatetimePopoverField
-              value={sessionEndDraft}
-              onChange={setSessionEndDraft}
-              onBlur={applySessionEndTimeEdit}
-              aria-label={t.sessionEndTimeEditSectionTitle}
-              lang={lang}
-              t={t}
+          <button
+            type="button"
+            className="flex w-full items-center justify-between gap-2 rounded-md text-left hover:text-zinc-900 dark:hover:text-zinc-100"
+            aria-expanded={sessionClosureExpanded}
+            onClick={() => setSessionClosureExpanded((v) => !v)}
+          >
+            <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+              {t.selectedSessionEndReasonTitle}
+            </div>
+            <ChevronDown
+              size={16}
+              className={`shrink-0 text-zinc-500 transition-transform dark:text-zinc-400 ${
+                sessionClosureExpanded ? "rotate-180" : ""
+              }`}
+              aria-hidden
             />
-          </div>
+          </button>
+          {sessionClosureExpanded ? (
+            canEditSessionEndReason ? (
+              <div className="mt-2">
+                <SessionEndReasonEditor
+                  t={t}
+                  radioGroupName="kronosys-session-end-reason-edit-sidebar"
+                  sessionId={targetSessionEndReasonId}
+                  initialKind={sessionCurrent?.sessionEndReasonKind}
+                  initialNote={sessionCurrent?.sessionEndReasonNote}
+                  post={post}
+                />
+              </div>
+            ) : showSessionEndReason && endReasonLine ? (
+              <p className="mt-2 whitespace-pre-wrap text-[0.75rem] leading-snug">
+                {endReasonLine}
+              </p>
+            ) : null
+          ) : null}
         </div>
       ) : null}
 
-      {hasSessionContext && canEditSessionEndReason ? (
-        <div className="rounded-lg border border-zinc-200 bg-zinc-50/90 px-3 py-2.5 text-left text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
-          <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-            {t.selectedSessionEndReasonTitle}
-          </div>
-          <div className="mt-2">
-            <SessionEndReasonEditor
-              t={t}
-              radioGroupName="kronosys-session-end-reason-edit-sidebar"
-              sessionId={targetSessionEndReasonId}
-              initialKind={sessionCurrent?.sessionEndReasonKind}
-              initialNote={sessionCurrent?.sessionEndReasonNote}
-              post={post}
-            />
-          </div>
-        </div>
-      ) : hasSessionContext && showSessionEndReason && endReasonLine ? (
-        <div className="rounded-lg border border-zinc-200 bg-zinc-50/90 px-3 py-2.5 text-left text-[0.75rem] leading-snug text-zinc-700 dark:border-zinc-700/80 dark:bg-zinc-900/40 dark:text-zinc-300">
-          <div className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
-            {t.selectedSessionEndReasonTitle}
+      {isModalEmbed && trackCodeMetrics ? (
+        <div className="grid gap-3 md:grid-cols-2 md:items-start">
+          {hasSessionContext ? (
+            <div className="min-w-0 text-left">
+              <SessionLocMetricsSection session={sessionCurrent ?? {}} t={t} />
+            </div>
+          ) : null}
+          <div className="min-w-0 text-left">
+            <WorkspaceGitRepoCard git={gitStats} t={t} lang={lang} />
           </div>
-          <p className="mt-1 whitespace-pre-wrap">{endReasonLine}</p>
-        </div>
-      ) : null}
-
-      {hasSessionContext && trackCodeMetrics ? (
-        <div className="text-left">
-          <SessionLocMetricsSection session={sessionCurrent ?? {}} t={t} />
-        </div>
-      ) : null}
-
-      {trackCodeMetrics ? (
-        <div className="text-left">
-          <WorkspaceGitRepoCard git={gitStats} t={t} lang={lang} />
         </div>
+      ) : !isModalEmbed ? (
+        <>
+          {hasSessionContext && trackCodeMetrics ? (
+            <div className="text-left">
+              <SessionLocMetricsSection session={sessionCurrent ?? {}} t={t} />
+            </div>
+          ) : null}
+          {trackCodeMetrics ? (
+            <div className="text-left">
+              <WorkspaceGitRepoCard git={gitStats} t={t} lang={lang} />
+            </div>
+          ) : null}
+        </>
       ) : null}
 
-      {showEndLiveSession ? (
-        <div className="flex justify-end">
-          <button
-            type="button"
-            className={tbEmeraldIcon}
-            aria-label={t.sessionEndLiveAria}
-            title={`${t.sessionEndLiveSidebarBtn} — ${t.sessionEndLiveTitle}`}
-            onClick={() => onEndLiveSession?.()}
-          >
-            <CheckCircle2 size={20} aria-hidden />
-          </button>
+      {hasSessionContext || showEndLiveSession ? (
+        <div
+          className={`flex gap-2 ${
+            isModalEmbed ? "justify-start" : "justify-end"
+          }`}
+        >
+          {hasSessionContext ? (
+            <button
+              type="button"
+              className={tbVioletIcon}
+              aria-label={t.selectedSessionSidebarTimelineIconAria}
+              title={t.selectedSessionSidebarTimelineIconTooltip}
+              onClick={() => onOpenTaskGantt()}
+            >
+              <LayoutGrid size={20} aria-hidden />
+            </button>
+          ) : null}
+          {showEndLiveSession ? (
+            <button
+              type="button"
+              className={tbEmeraldIcon}
+              aria-label={t.sessionEndLiveAria}
+              title={`${t.sessionEndLiveSidebarBtn} — ${t.sessionEndLiveTitle}`}
+              onClick={() => onEndLiveSession?.()}
+            >
+              <CheckCircle2 size={20} aria-hidden />
+            </button>
+          ) : null}
         </div>
       ) : null}
     </div>