@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/SelectedSessionSidebarBlock.tsx

@@ -0,0 +1,630 @@
+"use client";
+
+import type { RefObject } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { CheckCircle2, 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 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 { useSmoothStopwatchDisplayMs } from "@/components/dashboard/useSmoothStopwatchMs";
+import {
+  KronosysDatetimePopoverField,
+  formatDatetimeLocalValue,
+} from "@/components/dashboard/KronosysDatetimePopoverField";
+import { formatIsoInstantShort } from "@/lib/formatIsoShort";
+import { DEFAULT_DASHBOARD_TIME_ZONE } from "@/lib/dashboardTimeZone";
+
+type SessionMetricsShape = {
+  sessionId?: string;
+  sessionName?: string;
+  archived?: boolean;
+  /** Session en pause (collecte) : la durée murale ne progresse pas tant que la session est en pause. */
+  isPaused?: boolean;
+  /** 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;
+  sessionEndReasonKind?: string;
+  sessionEndReasonNote?: string;
+  sessionDurationMinutes?: number;
+  codingMinutesSession?: number;
+  activeMinutes?: number;
+  totalEvents?: number;
+  tasks?: Array<{
+    id?: string;
+    isDone?: boolean;
+    manualTaskTimerPaused?: boolean;
+  }>;
+  activeTasks?: Array<{
+    id?: string;
+    isDone?: boolean;
+    manualTaskTimerPaused?: boolean;
+  }>;
+  activeTask?: {
+    id?: string;
+    isDone?: boolean;
+    manualTaskTimerPaused?: boolean;
+  } | null;
+  linesWrittenTotal?: number;
+  linesWrittenHuman?: number;
+  linesWrittenAi?: number;
+  locByLanguage?: Array<[string, number]>;
+  codingSignalsByLanguage?: Array<[string, number]>;
+};
+
+export function SelectedSessionSidebarBlock({
+  lang,
+  t,
+  sessionCurrent,
+  columnArchiveId,
+  sessionName,
+  setSessionName,
+  sessionNameInputRef,
+  sessionNameFieldActiveRef,
+  sessionNameRowFocused,
+  setSessionNameRowFocused,
+  post,
+  headerSessionLabel,
+  headerSessionDuration,
+  headerSessionStart,
+  displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
+  use24HourClock = true,
+  headerCoding,
+  headerActive,
+  headerTasks,
+  archivedBadge,
+  trackCodeMetrics,
+  showIdeCodeTimingMetrics,
+  gitStats,
+  liveSessionId,
+  onEndLiveSession,
+  sessionDurationAlertThresholdMinutes,
+  allowSessionStartTimeEdit = true,
+  allowSessionEndTimeEdit = true,
+}: {
+  lang: Lang;
+  t: DashboardStrings;
+  sessionCurrent: SessionMetricsShape | undefined;
+  columnArchiveId: string | null;
+  sessionName: string;
+  setSessionName: (v: string) => void;
+  sessionNameInputRef: RefObject<HTMLInputElement | null>;
+  sessionNameFieldActiveRef: RefObject<boolean>;
+  sessionNameRowFocused: boolean;
+  setSessionNameRowFocused: (v: boolean) => void;
+  post: (body: Record<string, unknown>) => Promise<unknown>;
+  headerSessionLabel: string;
+  headerSessionDuration: string;
+  headerSessionStart: string;
+  /** Fuseau IANA pour l’affichage de `startAt` (paramètres tableau de bord). */
+  displayTimeZone?: string;
+  /** Format 12 h / 24 h pour `startAt` (paramètres tableau de bord). */
+  use24HourClock?: boolean;
+  headerCoding: string;
+  headerActive: string;
+  headerTasks: string;
+  archivedBadge: string;
+  trackCodeMetrics: boolean;
+  /** Temps de codage / temps actif : afficher seulement en profil développeur avec métriques code. */
+  showIdeCodeTimingMetrics: boolean;
+  gitStats: GitRepoStatisticsPayload | undefined;
+  /** Identifiant de la session en cours ; sert à n’afficher le bouton de fin que sur la session live. */
+  liveSessionId?: string;
+  /** Terminer la session en cours (même flux que la liste des sessions). */
+  onEndLiveSession?: () => void;
+  /** Minutes murales : au-delà de ce seuil, la durée de session s’affiche en alerte (rouge, clignotement lent). */
+  sessionDurationAlertThresholdMinutes: number;
+  /** Option `dashboardAllowSessionStartTimeEdit` : correction du début de session. */
+  allowSessionStartTimeEdit?: boolean;
+  /** Option `dashboardAllowSessionEndTimeEdit` : correction de la fin de session (terminée). */
+  allowSessionEndTimeEdit?: boolean;
+}) {
+  const liveSid =
+    typeof sessionCurrent?.sessionId === "string"
+      ? sessionCurrent.sessionId.trim()
+      : "";
+  const hasSessionContext = columnArchiveId !== null || liveSid !== "";
+  const liveSidNorm =
+    typeof liveSessionId === "string" ? liveSessionId.trim() : "";
+  const showEndLiveSession =
+    typeof onEndLiveSession === "function" &&
+    columnArchiveId === null &&
+    liveSidNorm !== "" &&
+    liveSid === liveSidNorm &&
+    sessionCurrent?.archived !== true;
+  const [optimisticSessionWallMinutes, setOptimisticSessionWallMinutes] =
+    useState<number | null>(null);
+  const [derivedSessionWallMinutes, setDerivedSessionWallMinutes] = useState<
+    number | null
+  >(null);
+  const [sessionEndDraft, setSessionEndDraft] = useState("");
+
+  const sessionWallMinutes =
+    optimisticSessionWallMinutes !== null
+      ? optimisticSessionWallMinutes
+      : derivedSessionWallMinutes !== null
+        ? derivedSessionWallMinutes
+        : (sessionCurrent?.sessionDurationMinutes ?? 0);
+  const sessionEnded =
+    typeof sessionCurrent?.endAt === "string" &&
+    sessionCurrent.endAt.trim() !== "";
+  const wallClockMsBase = useMemo(
+    () => Math.max(0, Math.floor(sessionWallMinutes * 60_000)),
+    [sessionWallMinutes],
+  );
+  /** Affichage fluide à la seconde (ou mieux) pour la session live affichée, entre deux rafraîchissements API. */
+  const smoothSessionWall =
+    columnArchiveId === null &&
+    liveSidNorm !== "" &&
+    liveSid === liveSidNorm &&
+    sessionCurrent?.archived !== true &&
+    !sessionEnded &&
+    sessionCurrent?.isPaused !== true;
+  const sessionWallDisplayMs = useSmoothStopwatchDisplayMs(
+    wallClockMsBase,
+    smoothSessionWall,
+  );
+  const sessionWallDisplayMinutes = sessionWallDisplayMs / 60_000;
+  const threshold = Math.max(1, sessionDurationAlertThresholdMinutes);
+  const sessionDurationOverThreshold = sessionWallDisplayMinutes >= threshold;
+  const taskCounts = countSessionTasksForSidebar(sessionCurrent);
+  const endReasonLine = sessionCurrent
+    ? formatSessionEndReasonLine(
+        t,
+        sessionCurrent.sessionEndReasonKind,
+        sessionCurrent.sessionEndReasonNote,
+      )
+    : null;
+  const inspectingArchive = columnArchiveId !== null;
+  const showSessionEndReason =
+    Boolean(endReasonLine) && (sessionEnded || inspectingArchive);
+  const inspectingLiveRunning =
+    columnArchiveId !== null &&
+    liveSidNorm !== "" &&
+    columnArchiveId === liveSidNorm &&
+    liveSid === liveSidNorm &&
+    !sessionEnded;
+  let targetSessionEndReasonId = "";
+  if (typeof columnArchiveId === "string" && columnArchiveId.trim() !== "") {
+    targetSessionEndReasonId = columnArchiveId.trim();
+  } else if (typeof sessionCurrent?.sessionId === "string") {
+    targetSessionEndReasonId = sessionCurrent.sessionId.trim();
+  }
+  const canEditSessionEndReason =
+    hasSessionContext &&
+    targetSessionEndReasonId !== "" &&
+    !inspectingLiveRunning &&
+    (sessionEnded || inspectingArchive);
+  const canEditSessionStartTime =
+    allowSessionStartTimeEdit &&
+    hasSessionContext &&
+    typeof sessionCurrent?.startAt === "string" &&
+    sessionCurrent.startAt.trim() !== "";
+  const canEditSessionEndTime =
+    allowSessionEndTimeEdit &&
+    hasSessionContext &&
+    sessionEnded &&
+    typeof sessionCurrent?.startAt === "string" &&
+    sessionCurrent.startAt.trim() !== "" &&
+    typeof sessionCurrent?.endAt === "string" &&
+    sessionCurrent.endAt.trim() !== "";
+  const [sessionStartDraft, setSessionStartDraft] = useState("");
+
+  useEffect(() => {
+    const raw =
+      typeof sessionCurrent?.startAt === "string"
+        ? sessionCurrent.startAt.trim()
+        : "";
+    const parsed = raw ? new Date(raw) : null;
+    if (!parsed || Number.isNaN(parsed.getTime())) {
+      setSessionStartDraft("");
+      return;
+    }
+    setSessionStartDraft(formatDatetimeLocalValue(parsed));
+  }, [sessionCurrent?.sessionId, sessionCurrent?.startAt]);
+
+  useEffect(() => {
+    const raw =
+      typeof sessionCurrent?.endAt === "string"
+        ? sessionCurrent.endAt.trim()
+        : "";
+    const parsed = raw ? new Date(raw) : null;
+    if (!parsed || Number.isNaN(parsed.getTime())) {
+      setSessionEndDraft("");
+      return;
+    }
+    setSessionEndDraft(formatDatetimeLocalValue(parsed));
+  }, [sessionCurrent?.sessionId, sessionCurrent?.endAt]);
+
+  useEffect(() => {
+    setOptimisticSessionWallMinutes(null);
+  }, [
+    sessionCurrent?.sessionId,
+    sessionCurrent?.sessionDurationMinutes,
+    sessionCurrent?.endAt,
+  ]);
+
+  useEffect(() => {
+    const startMs =
+      typeof sessionCurrent?.startAt === "string"
+        ? Date.parse(sessionCurrent.startAt)
+        : Number.NaN;
+    if (!Number.isFinite(startMs)) {
+      setDerivedSessionWallMinutes(null);
+      return;
+    }
+    const endMs =
+      typeof sessionCurrent?.endAt === "string"
+        ? Date.parse(sessionCurrent.endAt)
+        : Number.NaN;
+    if (Number.isFinite(endMs) && endMs >= startMs) {
+      setDerivedSessionWallMinutes((endMs - startMs) / 60000);
+      return;
+    }
+    if (smoothSessionWall) {
+      setDerivedSessionWallMinutes(Math.max(0, (Date.now() - startMs) / 60000));
+      return;
+    }
+    setDerivedSessionWallMinutes(null);
+  }, [sessionCurrent?.startAt, sessionCurrent?.endAt, smoothSessionWall]);
+
+  const applySessionStartTimeEdit = () => {
+    if (!canEditSessionStartTime) {
+      return;
+    }
+    const startMs = Date.parse(sessionStartDraft);
+    if (!Number.isFinite(startMs)) {
+      return;
+    }
+    const startAt = new Date(startMs).toISOString();
+    if (startAt === sessionCurrent?.startAt) {
+      return;
+    }
+    if (smoothSessionWall) {
+      setOptimisticSessionWallMinutes(
+        Math.max(0, (Date.now() - startMs) / 60000),
+      );
+    }
+    void post({
+      type: "setSessionStartTime",
+      sessionId: targetSessionEndReasonId,
+      startAt,
+    });
+  };
+
+  const applySessionEndTimeEdit = () => {
+    if (!canEditSessionEndTime || !sessionCurrent) {
+      return;
+    }
+    const endMs = Date.parse(sessionEndDraft);
+    if (!Number.isFinite(endMs)) {
+      return;
+    }
+    const startMs = Date.parse(String(sessionCurrent.startAt));
+    if (!Number.isFinite(startMs) || endMs < startMs) {
+      return;
+    }
+    const endAt = new Date(endMs).toISOString();
+    if (endAt === sessionCurrent.endAt) {
+      return;
+    }
+    setOptimisticSessionWallMinutes(Math.max(0, (endMs - startMs) / 60000));
+    void post({
+      type: "setSessionEndTime",
+      sessionId: targetSessionEndReasonId,
+      endAt,
+    });
+  };
+
+  const sessionStartFormatted = useMemo(() => {
+    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 sessionCreatedFormatted = useMemo(() => {
+    const raw =
+      typeof sessionCurrent?.createdAt === "string" && sessionCurrent.createdAt.trim() !== ""
+        ? sessionCurrent.createdAt.trim()
+        : typeof sessionCurrent?.startAt === "string"
+          ? sessionCurrent.startAt.trim()
+          : "";
+    if (!raw) {
+      return null;
+    }
+    return formatIsoInstantShort(raw, lang, displayTimeZone, 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";
+
+  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>
+        <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+          {t.selectedSessionSidebarTitle}
+        </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">
+              <input
+                ref={sessionNameInputRef}
+                id="kronosys-session-name-sidebar"
+                aria-label={headerSessionLabel}
+                className="min-w-0 flex-1 border-0 border-b border-zinc-300/90 bg-transparent py-1 text-sm font-medium text-zinc-800 outline-none transition placeholder:text-zinc-400 hover:border-zinc-400 focus:border-violet-500/80 focus:ring-0 dark:border-zinc-600/80 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:hover:border-zinc-500"
+                placeholder={sessionNameFallback}
+                value={sessionName}
+                onChange={(e) => setSessionName(e.target.value)}
+                onFocus={() => {
+                  sessionNameFieldActiveRef.current = true;
+                  setSessionNameRowFocused(true);
+                }}
+                onBlur={async (e) => {
+                  const name = e.currentTarget.value;
+                  try {
+                    if (columnArchiveId) {
+                      await post({
+                        type: "setSessionName",
+                        name,
+                        sessionId: columnArchiveId,
+                      });
+                    } else {
+                      await post({ type: "setSessionName", name });
+                    }
+                  } finally {
+                    sessionNameFieldActiveRef.current = false;
+                    setSessionNameRowFocused(false);
+                  }
+                }}
+              />
+              {!sessionNameRowFocused ? (
+                <button
+                  type="button"
+                  className="shrink-0 rounded-md p-1 text-violet-600 transition hover:bg-violet-100 dark:text-violet-400/95 dark:hover:bg-violet-950/35 dark:hover:text-violet-300"
+                  aria-label={
+                    lang === "fr"
+                      ? "Modifier le nom de la session"
+                      : "Edit session name"
+                  }
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    const el = sessionNameInputRef.current;
+                    if (!el) {
+                      return;
+                    }
+                    el.focus();
+                    queueMicrotask(() => el.select());
+                  }}
+                >
+                  <Pencil size={16} strokeWidth={2.25} aria-hidden />
+                </button>
+              ) : null}
+            </div>
+            {sessionCurrent?.archived ? (
+              <span className="shrink-0 rounded border border-zinc-300 px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
+                {archivedBadge}
+              </span>
+            ) : null}
+          </div>
+        ) : (
+          <p className="mt-3 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+            {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}
+              </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>
+          </div>
+          {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">
+                  <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
+                    {headerCoding}
+                  </span>
+                  <InlineMetricHelpTrigger
+                    ariaLabel={t.statsMetricCodingTimeHelpAria}
+                    body={t.statsMetricCodingTimeHelpBody}
+                  />
+                </div>
+                <div className="text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
+                  {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">
+                  <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
+                    {headerActive}
+                  </span>
+                  <InlineMetricHelpTrigger
+                    ariaLabel={t.statsMetricActiveTimeHelpAria}
+                    body={t.statsMetricActiveTimeHelpBody}
+                  />
+                </div>
+                <div className="text-xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
+                  {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">
+              <span className="text-[0.65rem] uppercase text-zinc-500 dark:text-zinc-500">
+                {headerTasks}
+              </span>
+              <InlineMetricHelpTrigger
+                ariaLabel={t.statsMetricTasksHelpAria}
+                body={t.statsMetricTasksHelpBody}
+                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="flex items-baseline justify-between gap-2">
+                <span className="min-w-0 shrink text-zinc-500 dark:text-zinc-400">
+                  {t.statsTasksRowRunning}
+                </span>
+                <span className="shrink-0 tabular-nums font-semibold text-zinc-900 dark:text-zinc-100">
+                  {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.statsTasksRowPausedList}
+                </span>
+                <span className="shrink-0 tabular-nums font-semibold text-zinc-900 dark:text-zinc-100">
+                  {taskCounts.pausedList}
+                </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.statsTasksRowCompleted}
+                </span>
+                <span className="shrink-0 tabular-nums font-semibold text-zinc-900 dark:text-zinc-100">
+                  {taskCounts.completed}
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+      ) : null}
+
+      {canEditSessionStartTime ? (
+        <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}
+            />
+          </div>
+        </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}
+          </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>
+      ) : 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>
+        </div>
+      ) : null}
+    </div>
+  );
+}