@nightkatana/kronosys-app 1.0.0-beta.0

package/app/page.tsx

@@ -0,0 +1,1610 @@
+"use client";
+
+import {
+  Suspense,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Clock, FolderOpen, Globe, Plus, User, X } from "lucide-react";
+import { HeaderIntegrationBadges } from "@/components/dashboard/HeaderIntegrationBadges";
+import {
+  postKronosysAction,
+  type GitRepoStatisticsPayload,
+  type KronosysUpdatePayload,
+  type WorkspaceCodeSnapshotPayload,
+} from "@/lib/kronosysApi";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import { appShellHeaderClassName } from "@/lib/appShellHeaderClasses";
+import { dashboardColumnTitleRowClassName } from "@/lib/dashboardColumnChrome";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import {
+  readDashboardLangUserChosen,
+  readStoredDashboardLang,
+  writeDashboardLangUserChosen,
+  writeStoredDashboardLang,
+} from "@/lib/dashboardLangStorage";
+import {
+  readGitIdentityBannerDismissed,
+  writeGitIdentityBannerDismissed,
+} from "@/lib/dashboardGitIdentityBannerStorage";
+import {
+  readDashboardDetachedUrlHintDismissed,
+  writeDashboardDetachedUrlHintDismissed,
+} from "@/lib/dashboardDetachedUrlHintStorage";
+import { settingsCopy } from "@/lib/settingsCopy";
+import { reportingNav } from "@/lib/reportingStrings";
+import {
+  pathnameWithUpdatedSessionQuery,
+  withDashboardSessionParam,
+} from "@/lib/dashboardSessionNav";
+import type { EndLiveSessionWarningFlags } from "@/lib/sessionEndWarnings";
+import {
+  formatEndLiveSessionModalIntro,
+  getEndLiveSessionWarningFlags,
+} from "@/lib/sessionEndWarnings";
+import { KronoFocusPanel } from "@/components/dashboard/KronoFocusPanel";
+import { TaskFocusPanel } from "@/components/dashboard/TaskFocusPanel";
+import { DeleteSessionModal } from "@/components/dashboard/DeleteSessionModal";
+import {
+  DashboardAlertModal,
+  DashboardConfirmModal,
+} from "@/components/dashboard/DashboardSimpleModal";
+import {
+  SessionListPanel,
+  type SessionListEntry,
+} from "@/components/dashboard/SessionListPanel";
+import { SettingsTagsProjectsSection } from "@/components/dashboard/SettingsTagsProjectsSection";
+import { InlineMetricHelpTrigger } from "@/components/dashboard/InlineMetricHelpTrigger";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+import { SelectedSessionSidebarBlock } from "@/components/dashboard/SelectedSessionSidebarBlock";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
+import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { DashboardColumnHintsBanner } from "@/components/dashboard/DashboardColumnHintsBanner";
+import {
+  DashboardCommandCenter,
+  type DashboardCommandHandlers,
+} from "@/components/dashboard/DashboardCommandCenter";
+import { DashboardLoadingOverlay } from "@/components/dashboard/DashboardLoadingOverlay";
+import { DashboardSuspenseFallback } from "@/components/dashboard/DashboardSuspenseFallback";
+import { DashboardLangGateModal } from "@/components/dashboard/DashboardLangGateModal";
+import { GitIdentityQuickSetupModal } from "@/components/dashboard/GitIdentityQuickSetupModal";
+import { DashboardTour } from "@/components/dashboard/DashboardTour";
+import { isDashboardTourCompleted } from "@/lib/dashboardTourStorage";
+import { workspaceFolderPathStrings } from "@/lib/legacyEditorPayloadKeys";
+import { mergeLiveSessionIntoHistory } from "@/lib/sessionListMerge";
+import {
+  showIdeLinkedCodeTimingMetrics,
+  showWorkspaceFoldersEmptyMessage,
+  trackCodeMetricsFromCfg,
+} from "@/lib/usageProfile";
+import { buildDashboardQuickSearchItems } from "@/lib/dashboardQuickSearch";
+import { readDashboardUse24HourClockFromCfg } from "@/lib/dashboardClockFormat";
+import { readDashboardTimeZoneFromCfg } from "@/lib/dashboardTimeZone";
+import { NewSessionScopeModal } from "@/components/dashboard/NewSessionScopeModal";
+import { useKronosysPackageVersion } from "@/components/KronosysPackageVersionProvider";
+
+type LiveTaskShape = {
+  id: string;
+  name?: string;
+  isDone?: boolean;
+  manualTaskTimerPaused?: boolean;
+  subtasks?: Array<{ done?: boolean }>;
+};
+
+type LiveShape = {
+  sessionId?: string;
+  sessionName?: string;
+  archived?: boolean;
+  endAt?: string | null;
+  sessionEndReasonKind?: string;
+  sessionEndReasonNote?: string;
+  /** Avertissement lié au périmètre de session (max horloge, calendrier, etc.). */
+  sessionScopeNotice?: { kind: "alert" | "info"; message: string } | null;
+  /** Session en pause (collecte / minuteurs). */
+  isPaused?: boolean;
+  /** Horodatage immuable de création de la session (ISO 8601). */
+  createdAt?: string | null;
+  /** Instant de création / début officiel de la session (ISO 8601). */
+  startAt?: string | null;
+  /** Temps écoulé (horloge murale) depuis le premier événement tracé dans la session. */
+  sessionDurationMinutes?: number;
+  codingMinutesSession?: number;
+  activeMinutes?: number;
+  totalEvents?: number;
+  language?: string;
+  activeTasks?: LiveTaskShape[];
+  activeTask?: LiveTaskShape | null;
+  tasks?: LiveTaskShape[];
+  kronoFocus?: {
+    mode: "work" | "break" | "longBreak";
+    status: "idle" | "running" | "paused";
+    timeLeftSeconds: number;
+    /** Horodatage fin de phase (ms) — décompte côté API serveur. */
+    kronoFocusDeadlineAtMs?: number;
+    workDurationSeconds?: number;
+    shortBreakDurationSeconds?: number;
+    longBreakDurationSeconds?: number;
+    linkedTaskId?: string;
+    linkedTaskName?: string;
+  };
+  linesWrittenTotal?: number;
+  linesWrittenHuman?: number;
+  linesWrittenAi?: number;
+  locByLanguage?: Array<[string, number]>;
+  codingSignalsByLanguage?: Array<[string, number]>;
+};
+
+type UrlSessionResolution =
+  | { mode: "none" }
+  | { mode: "loading" }
+  | { mode: "ok"; id: string }
+  | { mode: "invalid" };
+
+function resolveUrlSession(
+  urlParam: string | null,
+  payload: KronosysUpdatePayload | null,
+  live: LiveShape | undefined,
+  history: SessionListEntry[],
+  historyArchived: SessionListEntry[],
+): UrlSessionResolution {
+  if (!urlParam) {
+    return { mode: "none" };
+  }
+  if (!payload) {
+    return { mode: "loading" };
+  }
+  const liveSid =
+    typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+  if (
+    (liveSid !== "" && urlParam === liveSid) ||
+    history.some((s) => s.sessionId === urlParam) ||
+    historyArchived.some((s) => s.sessionId === urlParam)
+  ) {
+    return { mode: "ok", id: urlParam };
+  }
+  return { mode: "invalid" };
+}
+
+function DashboardHome() {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+  const urlParam = searchParams.get("session");
+  const { payload, error, refresh } = useKronosysPayload();
+  const [sessionName, setSessionName] = useState("");
+  /** Évite d’écraser la saisie à chaque poll API (refresh toutes les 2 s). */
+  const sessionNameFieldActiveRef = useRef(false);
+  const sessionNameInputRef = useRef<HTMLInputElement>(null);
+  /** Session à répercuter sur les `router.push` (command center) ; lu au moment du clic. */
+  const dashboardNavSessionRef = useRef<string | undefined>(undefined);
+  const [sessionNameRowFocused, setSessionNameRowFocused] = useState(false);
+  const liveSessionIdSyncedRef = useRef<string | undefined>(undefined);
+  const viewedSessionForNameRef = useRef<string | undefined>(undefined);
+  const [deleteSessionId, setDeleteSessionId] = useState<string | null>(null);
+  const [mongoPushBusyId, setMongoPushBusyId] = useState<string | null>(null);
+  const [homeDialogAlert, setHomeDialogAlert] = useState<string | null>(null);
+  const [archiveConfirmSessionId, setArchiveConfirmSessionId] = useState<
+    string | null
+  >(null);
+  const [archiveDismissChecked, setArchiveDismissChecked] = useState(false);
+  const [endLiveSessionConfirmFlags, setEndLiveSessionConfirmFlags] =
+    useState<EndLiveSessionWarningFlags | null>(null);
+  const [endSessionReasonKind, setEndSessionReasonKind] = useState<string>("");
+  const [endSessionReasonNote, setEndSessionReasonNote] = useState("");
+  const [tourOpen, setTourOpen] = useState(false);
+  const [newSessionModalOpen, setNewSessionModalOpen] = useState(false);
+  const [gitBannerDismissed, setGitBannerDismissed] = useState(false);
+  const [gitIdentitySetupModalOpen, setGitIdentitySetupModalOpen] =
+    useState(false);
+  const [detachedUrlHintDismissed, setDetachedUrlHintDismissed] =
+    useState(false);
+  const [updateChangelogModalOpen, setUpdateChangelogModalOpen] =
+    useState(false);
+  const packageVersion = useKronosysPackageVersion();
+
+  useEffect(() => {
+    setGitBannerDismissed(readGitIdentityBannerDismissed());
+  }, []);
+
+  useEffect(() => {
+    setDetachedUrlHintDismissed(readDashboardDetachedUrlHintDismissed());
+  }, []);
+
+  useEffect(() => {
+    if (typeof globalThis.window === "undefined") {
+      return;
+    }
+    const key = "kronosys_last_seen_package_version_v1";
+    try {
+      const previous = globalThis.localStorage.getItem(key);
+      if (!previous) {
+        globalThis.localStorage.setItem(key, packageVersion);
+        return;
+      }
+      if (previous !== packageVersion) {
+        setUpdateChangelogModalOpen(true);
+      }
+    } catch {
+      // ignore localStorage unavailability
+    }
+  }, [packageVersion]);
+
+  useEffect(() => {
+    if (archiveConfirmSessionId !== null) {
+      setArchiveDismissChecked(false);
+    }
+  }, [archiveConfirmSessionId]);
+
+  const live = payload?.current as LiveShape | undefined;
+  const historyArchived = (payload?.historyArchived ||
+    []) as SessionListEntry[];
+  const history = useMemo(() => {
+    if (!payload) {
+      return [] as SessionListEntry[];
+    }
+    const raw = (payload.history || []) as SessionListEntry[];
+    return mergeLiveSessionIntoHistory(raw, live);
+  }, [payload, live]);
+  const urlResolution = resolveUrlSession(
+    urlParam,
+    payload,
+    live,
+    history,
+    historyArchived,
+  );
+  const sessionQueryMode = Boolean(urlParam);
+  const isDetachedUrlTab = urlResolution.mode === "ok";
+  const liveSidForUrlHint =
+    typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+  const urlSessionFocusId =
+    urlResolution.mode === "ok" ? urlResolution.id.trim() : "";
+  const detachedUrlHintExplainsArchive =
+    isDetachedUrlTab &&
+    urlSessionFocusId !== "" &&
+    urlSessionFocusId !== liveSidForUrlHint;
+  const showDetachedUrlHintBanner =
+    detachedUrlHintExplainsArchive && !detachedUrlHintDismissed;
+
+  const inspectingId = payload?.inspectingSessionId as
+    | string
+    | null
+    | undefined;
+  const columnArchiveId =
+    isDetachedUrlTab && urlResolution.id !== live?.sessionId
+      ? urlResolution.id
+      : (inspectingId ?? null);
+  const viewingSession = columnArchiveId
+    ? ((history.find((s) => s.sessionId === columnArchiveId) ||
+        historyArchived.find((s) => s.sessionId === columnArchiveId)) as
+        | LiveShape
+        | undefined)
+    : undefined;
+  const sessionCurrent = (viewingSession ?? live) as LiveShape | undefined;
+  const isInspecting = Boolean(columnArchiveId);
+
+  useEffect(() => {
+    if (!payload) {
+      return;
+    }
+    if (sessionNameFieldActiveRef.current) {
+      return;
+    }
+
+    const liveCur = payload.current as LiveShape | undefined;
+    const mergedHistory = mergeLiveSessionIntoHistory(
+      (payload.history || []) as SessionListEntry[],
+      liveCur,
+    );
+    const histArch = (payload.historyArchived || []) as SessionListEntry[];
+
+    if (columnArchiveId) {
+      const vs =
+        mergedHistory.find((s) => s.sessionId === columnArchiveId) ||
+        histArch.find((s) => s.sessionId === columnArchiveId);
+      const serverName = vs?.sessionName;
+      if (columnArchiveId !== viewedSessionForNameRef.current) {
+        viewedSessionForNameRef.current = columnArchiveId;
+        sessionNameFieldActiveRef.current = false;
+        setSessionName(typeof serverName === "string" ? serverName : "");
+        return;
+      }
+      if (typeof serverName === "string") {
+        setSessionName(serverName);
+      }
+      return;
+    }
+
+    viewedSessionForNameRef.current = undefined;
+    const sid = liveCur?.sessionId;
+    const serverName = liveCur?.sessionName;
+
+    if (sid !== liveSessionIdSyncedRef.current) {
+      liveSessionIdSyncedRef.current = sid;
+      sessionNameFieldActiveRef.current = false;
+      setSessionName(typeof serverName === "string" ? serverName : "");
+      return;
+    }
+
+    if (typeof serverName === "string") {
+      setSessionName(serverName);
+    }
+  }, [payload, columnArchiveId]);
+
+  const hasPayload = Boolean(payload);
+  const serverLang: Lang = live?.language === "fr" ? "fr" : "en";
+  /** Langue affichée : état local mis à jour par le sélecteur initial, le menu ou la synchro post-visite. */
+  const [uiLang, setUiLang] = useState<Lang>("en");
+  const [langGateOpen, setLangGateOpen] = useState(false);
+
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const userChosen = readDashboardLangUserChosen();
+    const tourDone = isDashboardTourCompleted();
+    if (!userChosen && !tourDone) {
+      setLangGateOpen(true);
+      return;
+    }
+    const stored = readStoredDashboardLang();
+    if (stored) {
+      setUiLang(stored);
+    }
+  }, []);
+
+  const lang: Lang = uiLang;
+  const dt = dashboardStrings(lang);
+  const tagProjSettingsCopy = settingsCopy(lang);
+  const nav = reportingNav(lang);
+  const handleManualRefresh = useCallback(async () => {
+    return await refresh({ routerInvalidate: true });
+  }, [refresh]);
+
+  /** Pendant la barrière de langue, aligner l’arrière-plan sur la langue du navigateur sans écrire le stockage. */
+  useEffect(() => {
+    if (!hasPayload || !langGateOpen) {
+      return;
+    }
+    setUiLang(serverLang);
+  }, [hasPayload, serverLang, langGateOpen]);
+
+  /** Après la visite guidée, conserver la langue choisie pour le tableau de bord. */
+  useEffect(() => {
+    if (!hasPayload) {
+      return;
+    }
+    if (!isDashboardTourCompleted()) {
+      return;
+    }
+    writeStoredDashboardLang(serverLang);
+    setUiLang(serverLang);
+  }, [hasPayload, serverLang]);
+
+  const stripTourReplayParam = useCallback(() => {
+    if (searchParams.get("tour") !== "replay") {
+      return;
+    }
+    const next = new URLSearchParams(searchParams.toString());
+    next.delete("tour");
+    const q = next.toString();
+    router.replace(q ? `${pathname}?${q}` : pathname);
+  }, [pathname, router, searchParams]);
+
+  useEffect(() => {
+    if (!hasPayload) {
+      return;
+    }
+    if (langGateOpen) {
+      return;
+    }
+    if (searchParams.get("tour") === "replay") {
+      setTourOpen(true);
+      stripTourReplayParam();
+      return;
+    }
+    if (!isDashboardTourCompleted()) {
+      setTourOpen(true);
+    }
+  }, [hasPayload, langGateOpen, searchParams, stripTourReplayParam]);
+
+  useEffect(() => {
+    const sid =
+      typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+    if (!sid || live?.archived === true) {
+      return;
+    }
+    const t = dashboardStrings(lang);
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = t.beforeUnloadLiveSessionMessage;
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [lang, live?.sessionId, live?.archived]);
+
+  const header =
+    lang === "fr"
+      ? {
+          title: "Kronosys",
+          apiError:
+            "Impossible de charger l’état Kronosys (API /api/state). Vérifiez que le serveur Next tourne et les permissions du fichier SQLite.",
+          session: "Nom de la session",
+          sessionDuration: "Durée de session",
+          sessionStart: "Début de session",
+          coding: "Temps de codage",
+          active: "Temps actif",
+          tasks: "Tâches",
+          newSession: "Nouvelle session",
+          en: "English",
+          fr: "Français",
+        }
+      : {
+          title: "Kronosys",
+          apiError:
+            "Cannot load Kronosys state (/api/state). Ensure the Next server is running and the SQLite data directory is writable.",
+          session: "Session name",
+          sessionDuration: "Session duration",
+          sessionStart: "Session start",
+          coding: "Coding time",
+          active: "Active time",
+          tasks: "Tasks",
+          newSession: "New session",
+          en: "English",
+          fr: "Français",
+        };
+
+  const post = useCallback(
+    async (body: Record<string, unknown>) => {
+      const res = await postKronosysAction(body);
+      await refresh();
+      const op = res.result?.sessionOp;
+      if (op && !op.ok) {
+        if (op.message) {
+          setHomeDialogAlert(op.message);
+        }
+        if (typeof op.revertedName === "string") {
+          setSessionName(op.revertedName);
+        }
+      }
+      return res;
+    },
+    [refresh],
+  );
+
+  const completeLangGate = useCallback(
+    (next: Lang) => {
+      writeStoredDashboardLang(next);
+      writeDashboardLangUserChosen();
+      setUiLang(next);
+      setLangGateOpen(false);
+      void post({ type: "setLanguage", lang: next });
+    },
+    [post],
+  );
+
+  const handlePushSessionToMongo = useCallback(
+    async (sessionId: string) => {
+      setMongoPushBusyId(sessionId);
+      try {
+        const res = await postKronosysAction({
+          type: "pushSessionToMongo",
+          sessionId,
+        });
+        await refresh();
+        const p = res.result?.pushSessionToMongo;
+        if (p && !p.ok) {
+          const msg =
+            p.error === "disabled"
+              ? dt.sessionMongoPushFailedDisabled
+              : p.error === "not_found"
+                ? dt.sessionMongoPushFailedNotFound
+                : p.error === "uri_incomplete"
+                  ? dt.sessionMongoPushFailedUri
+                  : dt.sessionMongoPushFailedMongo;
+          setHomeDialogAlert(msg);
+        }
+      } catch {
+        setHomeDialogAlert(dt.sessionMongoPushFailedMongo);
+      } finally {
+        setMongoPushBusyId(null);
+      }
+    },
+    [dt, refresh],
+  );
+
+  const deleteMoveTargets =
+    deleteSessionId !== null
+      ? history
+          .filter((s) => s.sessionId !== deleteSessionId)
+          .map((s) => ({
+            id: s.sessionId,
+            label: s.sessionName?.trim() || s.sessionId.slice(0, 8),
+          }))
+      : [];
+
+  const confirmArchiveSession = useCallback(
+    (sessionId: string) => {
+      if (payload?.dismissArchiveSessionConfirm === true) {
+        void post({ type: "archiveSession", sessionId, archived: true });
+        return;
+      }
+      setArchiveConfirmSessionId(sessionId);
+    },
+    [payload?.dismissArchiveSessionConfirm, post],
+  );
+
+  const handleDeleteConfirm = useCallback(
+    async (opts: { moveTasksToSessionId?: string }) => {
+      if (!deleteSessionId) {
+        return;
+      }
+      await post({
+        type: "deleteHistorySession",
+        sessionId: deleteSessionId,
+        moveTasksToSessionId: opts.moveTasksToSessionId,
+      });
+      setDeleteSessionId(null);
+    },
+    [deleteSessionId, post],
+  );
+
+  const postVoid = useCallback(
+    async (body: Record<string, unknown>) => {
+      await post(body);
+    },
+    [post],
+  );
+
+  const handleRequestEndLiveSession = useCallback(() => {
+    const flags = getEndLiveSessionWarningFlags(live);
+    setEndSessionReasonKind("");
+    setEndSessionReasonNote("");
+    setEndLiveSessionConfirmFlags(flags);
+  }, [live]);
+
+  const canEndLiveSessionShortcut =
+    typeof live?.sessionId === "string" &&
+    live.sessionId.trim() !== "" &&
+    live.archived !== true;
+
+  const commandHandlers = useMemo(
+    (): DashboardCommandHandlers => ({
+      newSession: () => setNewSessionModalOpen(true),
+      refresh: () => void handleManualRefresh(),
+      openReporting: () =>
+        void router.push(
+          withDashboardSessionParam(
+            "/reporting",
+            dashboardNavSessionRef.current,
+          ),
+        ),
+      openSettings: () =>
+        void router.push(
+          withDashboardSessionParam(
+            "/settings",
+            dashboardNavSessionRef.current,
+          ),
+        ),
+      openUserGuide: () =>
+        void router.push(
+          withDashboardSessionParam("/guide", dashboardNavSessionRef.current),
+        ),
+      focusSessions: () =>
+        document.getElementById("dashboard-col-sessions")?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        }),
+      focusTasks: () =>
+        document.getElementById("dashboard-col-tasks")?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        }),
+      focusTags: () =>
+        document.getElementById("dashboard-col-tags")?.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        }),
+      toggleLang: () =>
+        void post({ type: "setLanguage", lang: lang === "fr" ? "en" : "fr" }),
+      endLiveSession: canEndLiveSessionShortcut
+        ? () => void handleRequestEndLiveSession()
+        : undefined,
+    }),
+    [
+      canEndLiveSessionShortcut,
+      handleManualRefresh,
+      handleRequestEndLiveSession,
+      lang,
+      post,
+      router,
+    ],
+  );
+
+  const cancelEndLiveSessionConfirm = useCallback(() => {
+    setEndLiveSessionConfirmFlags(null);
+    setEndSessionReasonKind("");
+    setEndSessionReasonNote("");
+  }, []);
+
+  const confirmEndLiveSession = useCallback(() => {
+    const kind = endSessionReasonKind;
+    const note = endSessionReasonNote.trim();
+    setEndLiveSessionConfirmFlags(null);
+    setEndSessionReasonKind("");
+    setEndSessionReasonNote("");
+    void post({
+      type: "endLiveSession",
+      ...(kind === "planned" ||
+      kind === "early" ||
+      kind === "overrun" ||
+      kind === "other"
+        ? { sessionEndReasonKind: kind }
+        : {}),
+      ...(note.length > 0 ? { sessionEndReasonNote: note } : {}),
+    });
+  }, [post, endSessionReasonKind, endSessionReasonNote]);
+
+  const handleSelectSession = useCallback(
+    async (sessionId: string) => {
+      if (sessionQueryMode) {
+        const liveSid =
+          typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+        const pickLive = sessionId === liveSid;
+        router.replace(
+          pathnameWithUpdatedSessionQuery(
+            pathname,
+            searchParams.toString(),
+            pickLive ? null : sessionId,
+          ),
+        );
+        if (pickLive) {
+          await postKronosysAction({ type: "inspectSession", sessionId: null });
+          await postKronosysAction({ type: "setPaused", paused: false });
+        }
+        await refresh();
+        return;
+      }
+      if (sessionId === live?.sessionId) {
+        await postKronosysAction({ type: "inspectSession", sessionId: null });
+        await postKronosysAction({ type: "setPaused", paused: false });
+      } else {
+        await postKronosysAction({ type: "inspectSession", sessionId });
+      }
+      await refresh();
+    },
+    [
+      live?.sessionId,
+      pathname,
+      refresh,
+      router,
+      searchParams,
+      sessionQueryMode,
+    ],
+  );
+
+  const scrollToSessionInList = useCallback((sessionId: string) => {
+    document.getElementById("dashboard-col-sessions")?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+    globalThis.requestAnimationFrame(() => {
+      document.getElementById(`kronosys-session-${sessionId}`)?.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      });
+    });
+  }, []);
+
+  const focusTasksColumnForSearch = useCallback(() => {
+    document.getElementById("dashboard-col-tasks")?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+  }, []);
+
+  const scrollToTaskInPanel = useCallback((taskId: string) => {
+    const el =
+      document.getElementById(`kronosys-active-task-${taskId}`) ??
+      document.getElementById(`kronosys-task-${taskId}`);
+    el?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, []);
+
+  const sessionDurationAlertThresholdMinutes = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardSessionDurationAlertHours;
+    const h = typeof raw === "number" && Number.isFinite(raw) ? raw : 24;
+    const clamped = Math.min(Math.max(h, 1), 8760);
+    return Math.round(clamped * 60);
+  }, [payload?.cfg]);
+
+  const dashboardShowKronoFocusInHeader = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardShowKronoFocusInHeader;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardShowKronoFocusInTaskOps = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardShowKronoFocusInTaskOps;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardAllowTaskStartTimeEdit = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardAllowTaskStartTimeEdit;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardAllowSessionStartTimeEdit = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardAllowSessionStartTimeEdit;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardAllowTaskEndTimeEdit = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardAllowTaskEndTimeEdit;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardAllowSessionEndTimeEdit = useMemo(() => {
+    const raw = (payload?.cfg as Record<string, unknown> | undefined)
+      ?.dashboardAllowSessionEndTimeEdit;
+    return raw !== false;
+  }, [payload?.cfg]);
+
+  const dashboardDisplayTimeZone = useMemo(
+    () => readDashboardTimeZoneFromCfg(payload?.cfg as Record<string, unknown> | undefined),
+    [payload?.cfg]
+  );
+  const dashboardUse24HourClock = useMemo(
+    () => readDashboardUse24HourClockFromCfg(payload?.cfg as Record<string, unknown> | undefined),
+    [payload?.cfg]
+  );
+
+  const quickSearchItems = useMemo(
+    () =>
+      buildDashboardQuickSearchItems({
+        history,
+        historyArchived,
+        sessionCurrent: sessionCurrent as
+          | Record<string, unknown>
+          | null
+          | undefined,
+        dt,
+        liveSearchContext:
+          live &&
+          typeof live.sessionId === "string" &&
+          live.sessionId.trim() !== ""
+            ? {
+                sessionId: live.sessionId.trim(),
+                sessionPaused: live.isPaused === true,
+              }
+            : null,
+        onSelectSession: (id) => {
+          void handleSelectSession(id);
+        },
+        scrollToSession: scrollToSessionInList,
+        focusTasksColumn: focusTasksColumnForSearch,
+        scrollToTask: scrollToTaskInPanel,
+      }),
+    [
+      dt,
+      focusTasksColumnForSearch,
+      handleSelectSession,
+      history,
+      historyArchived,
+      live,
+      scrollToSessionInList,
+      scrollToTaskInPanel,
+      sessionCurrent,
+    ],
+  );
+
+  const handleResumeActiveSession = useCallback(async () => {
+    if (sessionQueryMode) {
+      router.replace(
+        pathnameWithUpdatedSessionQuery(
+          pathname,
+          searchParams.toString(),
+          null,
+        ),
+      );
+    }
+    await postKronosysAction({ type: "inspectSession", sessionId: null });
+    await postKronosysAction({ type: "setPaused", paused: false });
+    await refresh();
+  }, [pathname, refresh, router, searchParams, sessionQueryMode]);
+
+  const openSessionInNewTab = useCallback(
+    (sessionId: string) => {
+      const url = `${globalThis.location.origin}${pathname}?session=${encodeURIComponent(sessionId)}`;
+      globalThis.open(url, "_blank", "noopener,noreferrer");
+    },
+    [pathname],
+  );
+
+  const selectedSessionId =
+    urlResolution.mode === "ok"
+      ? urlResolution.id
+      : urlResolution.mode === "loading" && urlParam
+        ? urlParam
+        : urlResolution.mode === "invalid"
+          ? live?.sessionId
+          : (inspectingId ?? live?.sessionId);
+
+  const trimmedSelectedSessionId =
+    typeof selectedSessionId === "string" ? selectedSessionId.trim() : "";
+  dashboardNavSessionRef.current =
+    trimmedSelectedSessionId !== "" ? trimmedSelectedSessionId : undefined;
+
+  const gitIdentity = payload?.gitIdentity;
+  const gitUserName =
+    typeof gitIdentity?.gitUserName === "string"
+      ? gitIdentity.gitUserName.trim()
+      : "";
+  const gitUserEmail =
+    typeof gitIdentity?.gitUserEmail === "string"
+      ? gitIdentity.gitUserEmail.trim()
+      : "";
+  const gitAccountLogin =
+    typeof gitIdentity?.gitAccountLogin === "string"
+      ? gitIdentity.gitAccountLogin.trim()
+      : "";
+  const gitContextLine = [
+    gitUserName || null,
+    gitUserEmail || null,
+    gitAccountLogin || null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  const hasGitIdentityConfigured = Boolean(
+    gitUserName || gitUserEmail || gitAccountLogin,
+  );
+  const showGitIdentityBanner =
+    Boolean(payload) && !hasGitIdentityConfigured && !gitBannerDismissed;
+
+  const dismissGitIdentityBanner = useCallback(() => {
+    writeGitIdentityBannerDismissed();
+    setGitBannerDismissed(true);
+  }, []);
+
+  const dismissDetachedUrlHint = useCallback(() => {
+    writeDashboardDetachedUrlHintDismissed();
+    setDetachedUrlHintDismissed(true);
+  }, []);
+
+  const acknowledgePackageVersion = useCallback(() => {
+    if (typeof globalThis.window === "undefined") {
+      return;
+    }
+    try {
+      globalThis.localStorage.setItem(
+        "kronosys_last_seen_package_version_v1",
+        packageVersion,
+      );
+    } catch {
+      // ignore localStorage unavailability
+    }
+  }, [packageVersion]);
+
+  /** Après effacement des données ou retrait de la clé localStorage, resynchroniser si l’identité Git est encore vide. */
+  useEffect(() => {
+    if (!payload || hasGitIdentityConfigured) {
+      return;
+    }
+    setGitBannerDismissed(readGitIdentityBannerDismissed());
+  }, [
+    payload,
+    hasGitIdentityConfigured,
+    gitUserName,
+    gitUserEmail,
+    gitAccountLogin,
+  ]);
+
+  const cfg = payload?.cfg as Record<string, unknown> | undefined;
+  const trackCodeMetrics = trackCodeMetricsFromCfg(cfg);
+  const mongoEnabled = cfg?.mongodbEnabled === true;
+  const mongoRemoteStatus = payload?.remoteStatus as
+    | "connected"
+    | "failed"
+    | "pending"
+    | undefined;
+  const mongoConnected = mongoEnabled && mongoRemoteStatus === "connected";
+  const localPersistenceDriver =
+    typeof cfg?.localPersistenceDriver === "string" &&
+    cfg.localPersistenceDriver.trim().toLowerCase() === "json"
+      ? "json"
+      : "sqlite";
+  const mongoPushEnabled = mongoConnected;
+
+  /** Chemins workspace : payload, puis cfg, puis instantané LOC. */
+  const resolvedWorkspaceRoots = useMemo(() => {
+    const top = workspaceFolderPathStrings(payload);
+    if (top.length > 0) {
+      return top;
+    }
+    const cfgObj = payload?.cfg as Record<string, unknown> | undefined;
+    const fromCfg = workspaceFolderPathStrings(cfgObj);
+    if (fromCfg.length > 0) {
+      return fromCfg;
+    }
+    const snap = payload?.workspaceCodeSnapshot as
+      | WorkspaceCodeSnapshotPayload
+      | undefined;
+    if (snap?.ok === true) {
+      const w = snap.workspaceFolder?.trim();
+      if (w) {
+        return [w];
+      }
+    }
+    return [];
+  }, [payload]);
+
+  const gitStats = payload?.gitStats as GitRepoStatisticsPayload | undefined;
+
+  const showWorkspaceFoldersEmpty = showWorkspaceFoldersEmptyMessage(
+    payload,
+    resolvedWorkspaceRoots.length,
+  );
+  const showIdeCodeTimingMetrics = showIdeLinkedCodeTimingMetrics(payload, cfg);
+
+  const showHeaderUserRow =
+    Boolean(payload) &&
+    Boolean(
+      gitContextLine ||
+      showWorkspaceFoldersEmpty ||
+      resolvedWorkspaceRoots.length > 0 ||
+      cfg,
+    );
+  const headerClockShort = dashboardUse24HourClock
+    ? dt.headerClockFormat24Short
+    : dt.headerClockFormat12Short;
+  const headerDisplayPrefsTitle = dt.headerDisplayRegionTitle
+    .replace("{timeZone}", dashboardDisplayTimeZone)
+    .replace("{clock}", headerClockShort);
+
+  return (
+    <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
+      <header className={appShellHeaderClassName}>
+        <div className="mb-3 flex w-full flex-col gap-3 sm:mb-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
+          <div id="dashboard-tour-anchor-intro" className="min-w-0 shrink-0">
+            <div className="flex min-w-0 flex-col gap-1">
+              <h1 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
+                {header.title}
+              </h1>
+              <p className="flex flex-wrap items-center gap-x-2 text-xs font-medium leading-snug text-zinc-500 dark:text-zinc-400">
+                <span>{dt.brandTagline}</span>
+                <span
+                  className="text-zinc-400/70 dark:text-zinc-600"
+                  aria-hidden
+                >
+                  ·
+                </span>
+                <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+              </p>
+            </div>
+          </div>
+          <div
+            id="dashboard-tour-anchor-user-storage"
+            className="min-w-0 shrink-0 sm:max-w-[min(100%,36rem)] sm:justify-self-end"
+          >
+            {showHeaderUserRow ? (
+              <div className="flex min-w-0 flex-col items-stretch gap-1.5 text-xs text-zinc-600 sm:items-end sm:text-right dark:text-zinc-400">
+                {gitContextLine ? (
+                  <p
+                    className="flex max-w-full items-center gap-x-2 sm:justify-end"
+                    title={gitContextLine}
+                  >
+                    <User
+                      className="shrink-0 text-zinc-500 dark:text-zinc-500"
+                      size={14}
+                      aria-hidden
+                    />
+                    <span className="min-w-0 max-w-[min(100%,48rem)] truncate font-medium text-zinc-800 dark:text-zinc-300">
+                      {gitContextLine}
+                    </span>
+                  </p>
+                ) : null}
+                <p className="flex max-w-full flex-wrap items-center gap-x-1.5 sm:justify-end" title={headerDisplayPrefsTitle}>
+                  <Globe className="shrink-0 text-zinc-500 dark:text-zinc-500" size={14} aria-hidden />
+                  <span className="min-w-0 max-w-[min(100%,48rem)] break-all font-mono text-[0.7rem] font-medium text-zinc-800 dark:text-zinc-300">
+                    {dashboardDisplayTimeZone}
+                  </span>
+                  <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                    ·
+                  </span>
+                  <Clock className="shrink-0 text-zinc-500 dark:text-zinc-500" size={14} aria-hidden />
+                  <span className="shrink-0 font-medium text-zinc-800 dark:text-zinc-300">{headerClockShort}</span>
+                </p>
+                {showWorkspaceFoldersEmpty ? (
+                  <p className="flex max-w-full items-start gap-x-2 sm:justify-end">
+                    <FolderOpen
+                      className="mt-0.5 shrink-0 text-zinc-500 dark:text-zinc-500"
+                      size={14}
+                      aria-hidden
+                    />
+                    <span className="min-w-0 max-w-[min(100%,48rem)] break-words font-medium text-zinc-800 sm:text-right dark:text-zinc-300">
+                      {dt.workspaceFoldersEmpty ?? "—"}
+                    </span>
+                  </p>
+                ) : resolvedWorkspaceRoots.length > 0 ? (
+                  resolvedWorkspaceRoots.map((p) => (
+                    <p
+                      key={p}
+                      className="flex max-w-full items-start gap-x-2 sm:justify-end"
+                    >
+                      <FolderOpen
+                        className="mt-0.5 shrink-0 text-zinc-500 dark:text-zinc-500"
+                        size={14}
+                        aria-hidden
+                      />
+                      <span className="min-w-0 max-w-[min(100%,48rem)] break-all font-medium text-zinc-800 sm:text-right dark:text-zinc-300">
+                        {p}
+                      </span>
+                    </p>
+                  ))
+                ) : null}
+                {cfg ? (
+                  <div className="flex w-full min-w-0 sm:justify-end">
+                    <HeaderIntegrationBadges
+                      t={dt}
+                      localPersistenceDriver={localPersistenceDriver}
+                      mongoConnected={mongoConnected}
+                      mongoEnabled={mongoEnabled}
+                    />
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div className="grid w-full grid-cols-1 gap-3 xl:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] xl:items-center xl:gap-x-6 xl:gap-y-0">
+          <div className="flex flex-wrap items-center justify-between gap-4 xl:contents">
+            <div
+              className="hidden min-w-0 xl:col-start-1 xl:row-start-1 xl:block"
+              aria-hidden
+            />
+            <div
+              id="dashboard-tour-anchor-app-toolbar"
+              className="flex h-10 shrink-0 flex-wrap items-center justify-end gap-1.5 xl:col-start-3 xl:row-start-1 xl:justify-self-end"
+            >
+              <DashboardCommandCenter
+                dt={dt}
+                handlers={commandHandlers}
+                searchItems={quickSearchItems}
+                toolbarDomId="dashboard-tour-command-center"
+              />
+              <AppShellRouteNav
+                current="dashboard"
+                labels={nav}
+                navAriaLabel={dt.appShellRouteNavAria}
+                dashboardSessionId={selectedSessionId}
+              />
+              <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={header.en}
+                labelFr={header.fr}
+                menuHeading={lang === "fr" ? "Langue" : "Language"}
+                triggerAriaLabel={
+                  lang === "fr" ? "Langue de l’interface" : "Interface language"
+                }
+                onSelect={(next) => {
+                  writeStoredDashboardLang(next);
+                  writeDashboardLangUserChosen();
+                  setUiLang(next);
+                  void post({ type: "setLanguage", lang: next });
+                }}
+              />
+            </div>
+          </div>
+          {payload && live && dashboardShowKronoFocusInHeader ? (
+            <div
+              id="dashboard-tour-anchor-kronoFocus-header"
+              className="min-w-0 w-full xl:col-start-2 xl:row-start-1 xl:flex xl:h-10 xl:w-max xl:max-w-[min(100vw-10rem,52rem)] xl:items-center xl:justify-self-center"
+            >
+              <KronoFocusPanel
+                variant="headerBar"
+                kronoFocus={live.kronoFocus}
+                liveActiveTaskIds={
+                  Array.isArray(live.activeTasks) && live.activeTasks.length > 0
+                    ? live.activeTasks
+                        .map((t) => t.id)
+                        .filter(
+                          (id): id is string =>
+                            typeof id === "string" && id.length > 0,
+                        )
+                    : live.activeTask?.id
+                      ? [live.activeTask.id]
+                      : undefined
+                }
+                t={dt}
+                post={postVoid}
+                viewingArchive={isInspecting}
+              />
+            </div>
+          ) : null}
+        </div>
+      </header>
+
+      <div className="mx-auto w-full max-w-[1920px] px-5 pt-5 pb-8 sm:px-8 sm:pt-6 sm:pb-10 lg:px-12 lg:pt-7 lg:pb-11 xl:px-14 xl:pt-7 xl:pb-12">
+        {error && (
+          <div
+            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-800 dark:text-red-200">
+              API
+            </strong>
+            {header.apiError}
+            <pre className="mt-2 overflow-x-auto text-xs text-red-800/90 dark:text-red-200/80">
+              {error}
+            </pre>
+          </div>
+        )}
+
+        {urlResolution.mode === "invalid" && payload && (
+          <div
+            className="mb-6 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-800/60 dark:bg-amber-950/35 dark:text-amber-100"
+            role="status"
+          >
+            {dt.detachedSessionInvalidUrl}
+          </div>
+        )}
+
+        {showDetachedUrlHintBanner ? (
+          <div
+            className="mb-6 flex gap-3 rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900/60 dark:text-zinc-300"
+            role="note"
+          >
+            <p className="min-w-0 flex-1 leading-snug">
+              {dt.detachedSessionUrlHint}
+            </p>
+            <button
+              type="button"
+              className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-zinc-300 text-zinc-600 hover:bg-zinc-200/90 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800/80"
+              onClick={dismissDetachedUrlHint}
+              title={dt.detachedSessionUrlHintDismiss}
+              aria-label={dt.detachedSessionUrlHintDismiss}
+            >
+              <X size={16} strokeWidth={2} aria-hidden />
+            </button>
+          </div>
+        ) : null}
+
+        {live?.sessionScopeNotice &&
+        live.archived !== true &&
+        typeof live.sessionId === "string" &&
+        live.sessionId.trim() !== "" ? (
+          <div
+            className={`mb-6 rounded-lg border px-4 py-3 text-sm ${
+              live.sessionScopeNotice.kind === "alert"
+                ? "border-red-400/70 bg-red-950/40 text-red-100"
+                : "border-amber-400/70 bg-amber-950/35 text-amber-100"
+            }`}
+            role="status"
+            aria-label={dt.sessionScopeNoticeAria}
+          >
+            {live.sessionScopeNotice.message}
+          </div>
+        ) : null}
+
+        {payload && (
+          <>
+            <div id="dashboard-tour-anchor-column-hints">
+              <DashboardColumnHintsBanner dt={dt} />
+            </div>
+            {showGitIdentityBanner ? (
+              <div id="dashboard-tour-anchor-git-identity-banner">
+                <div
+                  className="mb-6 flex flex-col gap-3 rounded-lg border border-violet-300/80 bg-violet-50/90 px-4 py-3 text-sm text-violet-950 dark:border-violet-700/50 dark:bg-violet-950/35 dark:text-violet-100"
+                  role="region"
+                  aria-label={dt.gitIdentityBannerAria}
+                >
+                  <p className="leading-snug">{dt.gitIdentityBannerBody}</p>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <button
+                      type="button"
+                      className="inline-flex rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-2 focus-visible:ring-offset-violet-50 dark:focus-visible:ring-offset-violet-950"
+                      onClick={() => setGitIdentitySetupModalOpen(true)}
+                    >
+                      {dt.gitIdentityBannerConfigure}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-violet-400/70 px-3 py-1.5 text-sm text-violet-900 hover:bg-violet-100/80 dark:border-violet-600/60 dark:text-violet-100 dark:hover:bg-violet-900/40"
+                      onClick={dismissGitIdentityBanner}
+                    >
+                      {dt.gitIdentityBannerDismiss}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+            <div className="grid w-full grid-cols-1 gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(0,2.25fr)_minmax(0,1fr)] xl:items-start xl:gap-x-6 2xl:gap-x-10">
+              <div
+                id="dashboard-col-sessions"
+                className="flex min-w-0 flex-col xl:sticky xl:top-8 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto xl:pb-6 xl:pr-3 [scrollbar-gutter:stable] 2xl:pr-4"
+              >
+                <div className="w-full min-w-0">
+                  <div className="mx-auto flex w-full max-w-md flex-col gap-8 sm:max-w-lg xl:mx-0 xl:max-w-none">
+                    <div
+                      className={`min-w-0 ${dashboardColumnTitleRowClassName}`}
+                    >
+                      <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+                        {dt.sessionsColumnTitle}
+                      </h2>
+                      <InlineMetricHelpTrigger
+                        ariaLabel={dt.sessionsColumnHelpAria}
+                        body={dt.sessionsColumnHelpBody}
+                        preserveLineBreaks
+                      />
+                      <button
+                        type="button"
+                        className="inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-zinc-300 bg-white text-zinc-700 shadow-sm transition hover:border-violet-400/70 hover:bg-violet-50 hover:text-violet-800 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:border-zinc-600 dark:bg-zinc-800/80 dark:text-zinc-200 dark:hover:border-violet-500/50 dark:hover:bg-violet-950/40 dark:hover:text-violet-200 dark:focus-visible:ring-violet-400/45 dark:focus-visible:ring-offset-zinc-900"
+                        title={header.newSession}
+                        aria-label={header.newSession}
+                        onClick={() => setNewSessionModalOpen(true)}
+                      >
+                        <Plus
+                          size={20}
+                          strokeWidth={2.25}
+                          className="shrink-0"
+                          aria-hidden
+                        />
+                      </button>
+                    </div>
+
+                    <SelectedSessionSidebarBlock
+                      lang={lang}
+                      t={dt}
+                      sessionCurrent={sessionCurrent}
+                      columnArchiveId={columnArchiveId}
+                      sessionName={sessionName}
+                      setSessionName={setSessionName}
+                      sessionNameInputRef={sessionNameInputRef}
+                      sessionNameFieldActiveRef={sessionNameFieldActiveRef}
+                      sessionNameRowFocused={sessionNameRowFocused}
+                      setSessionNameRowFocused={setSessionNameRowFocused}
+                      post={post}
+                      headerSessionLabel={header.session}
+                      headerSessionDuration={header.sessionDuration}
+                      headerSessionStart={header.sessionStart}
+                      displayTimeZone={dashboardDisplayTimeZone}
+                      use24HourClock={dashboardUse24HourClock}
+                      headerCoding={header.coding}
+                      headerActive={header.active}
+                      headerTasks={header.tasks}
+                      archivedBadge={dt.archivedBadge}
+                      trackCodeMetrics={trackCodeMetrics}
+                      showIdeCodeTimingMetrics={showIdeCodeTimingMetrics}
+                      gitStats={gitStats}
+                      liveSessionId={live?.sessionId}
+                      onEndLiveSession={() =>
+                        void handleRequestEndLiveSession()
+                      }
+                      sessionDurationAlertThresholdMinutes={
+                        sessionDurationAlertThresholdMinutes
+                      }
+                      allowSessionStartTimeEdit={
+                        dashboardAllowSessionStartTimeEdit
+                      }
+                      allowSessionEndTimeEdit={dashboardAllowSessionEndTimeEdit}
+                    />
+
+                    <SessionListPanel
+                      sessions={history}
+                      lang={lang}
+                      displayTimeZone={dashboardDisplayTimeZone}
+                      use24HourClock={dashboardUse24HourClock}
+                      liveSessionId={live?.sessionId}
+                      selectedSessionId={selectedSessionId}
+                      t={dt}
+                      onSelectSession={(id) => void handleSelectSession(id)}
+                      onOpenSessionInNewTab={openSessionInNewTab}
+                      onEndLiveSession={() =>
+                        void handleRequestEndLiveSession()
+                      }
+                      onArchiveSession={confirmArchiveSession}
+                      onDeleteSession={(id) => setDeleteSessionId(id)}
+                      onOpenArchives={() =>
+                        void router.push(
+                          withDashboardSessionParam(
+                            "/settings#settings-archived-sessions",
+                            selectedSessionId,
+                          ),
+                        )
+                      }
+                      archivedCount={historyArchived.length}
+                      mongoPushEnabled={mongoPushEnabled}
+                      onPushSessionToMongo={(id) =>
+                        void handlePushSessionToMongo(id)
+                      }
+                      pushingSessionId={mongoPushBusyId}
+                      sessionDurationAlertThresholdMinutes={
+                        sessionDurationAlertThresholdMinutes
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div
+                id="dashboard-col-tasks"
+                className="min-w-0 space-y-8 border-zinc-200 xl:border-x xl:border-zinc-200/90 xl:px-5 2xl:px-8 dark:border-zinc-700/80"
+              >
+                <div className={`min-w-0 ${dashboardColumnTitleRowClassName}`}>
+                  <h2 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
+                    {dt.rightColumnTitle}
+                  </h2>
+                  <InlineMetricHelpTrigger
+                    ariaLabel={dt.tasksColumnSubtitleHelpAria}
+                    body={dt.tasksColumnSubtitle}
+                  />
+                </div>
+
+                <TaskFocusPanel
+                  payload={payload}
+                  lang={lang}
+                  t={dt}
+                  refresh={refresh}
+                  urlFocusedSessionId={
+                    isDetachedUrlTab ? urlResolution.id : undefined
+                  }
+                  liveSessionId={live?.sessionId}
+                  displayTimeZone={dashboardDisplayTimeZone}
+                  use24HourClock={dashboardUse24HourClock}
+                  onResumeActiveSession={handleResumeActiveSession}
+                  showKronoFocusInTaskOps={dashboardShowKronoFocusInTaskOps}
+                  allowTaskStartTimeEdit={dashboardAllowTaskStartTimeEdit}
+                  allowTaskEndTimeEdit={dashboardAllowTaskEndTimeEdit}
+                />
+              </div>
+
+              <aside
+                id="dashboard-col-tags"
+                className="flex min-w-0 flex-col xl:sticky xl:top-8 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto xl:pb-6 xl:pl-3 [scrollbar-gutter:stable] 2xl:pl-4"
+                aria-labelledby="dashboard-tags-projects-heading"
+              >
+                <div className={`min-w-0 ${dashboardColumnTitleRowClassName}`}>
+                  <h2
+                    id="dashboard-tags-projects-heading"
+                    className="text-lg font-semibold text-zinc-900 dark:text-zinc-100"
+                  >
+                    {dt.tagsProjectsColumnTitle}
+                  </h2>
+                  <InlineMetricHelpTrigger
+                    ariaLabel={dt.tagsProjectsColumnHelpAria}
+                    body={`${dt.tagsProjectsColumnIntro}\n\n${dt.tagsProjectsColumnHelpBody}`}
+                    preserveLineBreaks
+                    panelClassName="w-[min(calc(100vw-2rem),24rem)]"
+                  />
+                </div>
+                <div className="mt-5 min-w-0">
+                  <SettingsTagsProjectsSection
+                    variant="dashboard"
+                    s={tagProjSettingsCopy}
+                    lang={lang}
+                    payload={payload}
+                    saving={false}
+                    refresh={refresh}
+                  />
+                </div>
+              </aside>
+            </div>
+          </>
+        )}
+
+        {!payload && !error ? (
+          <DashboardLoadingOverlay
+            ariaLabel={dt.dashboardLoadingAriaLabel}
+            message={dt.dashboardLoadingMessage}
+          />
+        ) : null}
+
+        <NewSessionScopeModal
+          open={newSessionModalOpen}
+          lang={lang}
+          t={dt}
+          onCancel={() => setNewSessionModalOpen(false)}
+          onConfirm={(sessionScope) => {
+            setNewSessionModalOpen(false);
+            void post({ type: "newSession", sessionScope });
+          }}
+        />
+        <DashboardAlertModal
+          open={homeDialogAlert !== null}
+          message={homeDialogAlert ?? ""}
+          okLabel={dt.dialogOkBtn}
+          onClose={() => setHomeDialogAlert(null)}
+        />
+        <DashboardConfirmModal
+          open={updateChangelogModalOpen}
+          title={lang === "fr" ? "Mise à jour détectée" : "Update detected"}
+          message={
+            lang === "fr"
+              ? `Kronosys a été mis à jour vers la version v${packageVersion}. Voulez-vous ouvrir le CHANGELOG usager maintenant?`
+              : `Kronosys was updated to version v${packageVersion}. Do you want to open the user-facing CHANGELOG now?`
+          }
+          cancelLabel={lang === "fr" ? "Plus tard" : "Later"}
+          confirmLabel={
+            lang === "fr" ? "Ouvrir le CHANGELOG" : "Open CHANGELOG"
+          }
+          onCancel={() => {
+            acknowledgePackageVersion();
+            setUpdateChangelogModalOpen(false);
+          }}
+          onConfirm={() => {
+            acknowledgePackageVersion();
+            setUpdateChangelogModalOpen(false);
+            void router.push(
+              withDashboardSessionParam(
+                "/changelog",
+                dashboardNavSessionRef.current,
+              ),
+            );
+          }}
+        />
+        <DashboardConfirmModal
+          open={endLiveSessionConfirmFlags !== null}
+          title={dt.sessionEndLiveConfirmTitle}
+          message={
+            endLiveSessionConfirmFlags
+              ? formatEndLiveSessionModalIntro(endLiveSessionConfirmFlags, dt)
+              : ""
+          }
+          cancelLabel={dt.dialogCancelBtn}
+          confirmLabel={dt.sessionEndLiveConfirmBtn}
+          onCancel={cancelEndLiveSessionConfirm}
+          onConfirm={confirmEndLiveSession}
+          extra={
+            endLiveSessionConfirmFlags ? (
+              <div className="space-y-3 text-left text-sm text-zinc-700 dark:text-zinc-300">
+                <p className="text-[0.8rem] leading-snug text-zinc-600 dark:text-zinc-400">
+                  {dt.sessionEndReasonModalHint}
+                </p>
+                <fieldset className="space-y-2 border-0 p-0">
+                  <legend className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+                    {dt.sessionEndReasonFieldsetLegend}
+                  </legend>
+                  {(
+                    [
+                      ["", dt.sessionEndReasonSkip],
+                      ["planned", dt.sessionEndReasonPlanned],
+                      ["early", dt.sessionEndReasonEarly],
+                      ["overrun", dt.sessionEndReasonOverrun],
+                      ["other", dt.sessionEndReasonOther],
+                    ] as const
+                  ).map(([value, label]) => (
+                    <label
+                      key={value || "skip"}
+                      className="flex cursor-pointer items-start gap-2 rounded-md py-0.5 pr-1 hover:bg-zinc-100/80 dark:hover:bg-zinc-800/50"
+                    >
+                      <input
+                        type="radio"
+                        name="kronosys-session-end-reason"
+                        className="mt-1 size-4 shrink-0 border-zinc-300 text-violet-600 focus:ring-violet-500/50 dark:border-zinc-600"
+                        checked={endSessionReasonKind === value}
+                        onChange={() => setEndSessionReasonKind(value)}
+                      />
+                      <span className="leading-snug">{label}</span>
+                    </label>
+                  ))}
+                </fieldset>
+                <label className="block">
+                  <span className="sr-only">{dt.sessionEndReasonNoteAria}</span>
+                  <textarea
+                    className="mt-1 w-full min-h-[4rem] resize-y rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-violet-500/70 focus:outline-none focus:ring-2 focus:ring-violet-500/25 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+                    rows={3}
+                    maxLength={500}
+                    value={endSessionReasonNote}
+                    onChange={(e) => setEndSessionReasonNote(e.target.value)}
+                    placeholder={dt.sessionEndReasonNotePlaceholder}
+                    aria-label={dt.sessionEndReasonNoteAria}
+                  />
+                </label>
+              </div>
+            ) : null
+          }
+        />
+        <DashboardConfirmModal
+          open={archiveConfirmSessionId !== null}
+          message={dt.sessionArchiveConfirm}
+          cancelLabel={dt.dialogCancelBtn}
+          confirmLabel={dt.dialogConfirmBtn}
+          dismissCheckbox={{
+            label: dt.sessionArchiveDontShowAgain,
+            checked: archiveDismissChecked,
+            onChange: setArchiveDismissChecked,
+          }}
+          onCancel={() => {
+            setArchiveConfirmSessionId(null);
+            setArchiveDismissChecked(false);
+          }}
+          onConfirm={async () => {
+            const id = archiveConfirmSessionId;
+            const saveDismiss = archiveDismissChecked;
+            setArchiveConfirmSessionId(null);
+            setArchiveDismissChecked(false);
+            if (id) {
+              await post({
+                type: "archiveSession",
+                sessionId: id,
+                archived: true,
+                ...(saveDismiss ? { dismissArchiveConfirm: true } : {}),
+              });
+            }
+          }}
+        />
+        <DeleteSessionModal
+          open={deleteSessionId !== null}
+          sessionLabel={
+            deleteSessionId
+              ? history
+                  .find((s) => s.sessionId === deleteSessionId)
+                  ?.sessionName?.trim() || deleteSessionId.slice(0, 8)
+              : ""
+          }
+          moveTargets={deleteMoveTargets}
+          t={dt}
+          onClose={() => setDeleteSessionId(null)}
+          onConfirm={handleDeleteConfirm}
+        />
+        <DashboardLangGateModal
+          open={langGateOpen}
+          onSelect={completeLangGate}
+        />
+        <GitIdentityQuickSetupModal
+          open={gitIdentitySetupModalOpen}
+          onClose={() => setGitIdentitySetupModalOpen(false)}
+          dt={dt}
+          s={tagProjSettingsCopy}
+          initialGitIdentity={payload?.gitIdentity}
+          onSave={async (fields) => {
+            await post({
+              type: "setGitIdentity",
+              gitUserName: fields.gitUserName,
+              gitUserEmail: fields.gitUserEmail,
+              gitAccountLogin: fields.gitAccountLogin,
+            });
+          }}
+        />
+        <DashboardTour
+          open={tourOpen}
+          onOpenChange={setTourOpen}
+          dt={dt}
+          kronoFocusTourStep={Boolean(
+            payload && live && dashboardShowKronoFocusInHeader,
+          )}
+          gitIdentityBannerTourStep={showGitIdentityBanner}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<DashboardSuspenseFallback />}>
+      <DashboardHome />
+    </Suspense>
+  );
+}