@nightkatana/kronosys-app 1.0.0-beta.0

package/app/settings/page.tsx

@@ -0,0 +1,3518 @@
+"use client";
+
+import {
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import {
+  postKronosysAction,
+  type WorkspaceCodeSnapshotPayload,
+} from "@/lib/kronosysApi";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import {
+  dashboardStrings,
+  sessionTaskCountNoun,
+  type Lang,
+} from "@/lib/dashboardCopy";
+import type { SessionListEntry } from "@/components/dashboard/SessionListPanel";
+import {
+  MongoMirrorSyncLine,
+  type MongoMirrorSyncPayload,
+} from "@/components/dashboard/MongoMirrorSyncLine";
+import {
+  DashboardAlertModal,
+  DashboardConfirmModal,
+} from "@/components/dashboard/DashboardSimpleModal";
+import { reportingNav } from "@/lib/reportingStrings";
+import { settingsCopy, type SettingsCopy } from "@/lib/settingsCopy";
+import {
+  appShellHeaderClassName,
+  appShellHeaderToolRowClassName,
+} from "@/lib/appShellHeaderClasses";
+import { workspaceFolderPathStrings } from "@/lib/legacyEditorPayloadKeys";
+import { showWorkspaceFoldersEmptyMessage } from "@/lib/usageProfile";
+import { readDashboardUse24HourClockFromCfg } from "@/lib/dashboardClockFormat";
+import {
+  DASHBOARD_TIME_ZONE_SELECT_OPTIONS,
+  isValidIanaTimeZone,
+  readDashboardTimeZoneFromCfg,
+} from "@/lib/dashboardTimeZone";
+import { DEFAULT_WORKSPACE_LOC_EXCLUDED_DIRECTORY_NAMES } from "@/lib/workspaceLocDefaults";
+import { LanguageMenu } from "@/components/dashboard/LanguageMenu";
+import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
+import { AppShellRouteNav } from "@/components/dashboard/AppShellRouteNav";
+import { SettingsTagsProjectsSection } from "@/components/dashboard/SettingsTagsProjectsSection";
+import { SettingsTour } from "@/components/dashboard/SettingsTour";
+import { resetGitIdentityBannerDismissed } from "@/lib/dashboardGitIdentityBannerStorage";
+import { resetDashboardLangPreference } from "@/lib/dashboardLangStorage";
+import {
+  isSettingsTourCompleted,
+  resetDashboardTour,
+  resetSettingsTour,
+} from "@/lib/dashboardTourStorage";
+import {
+  writeDashboardColumnHintsClosed,
+  writeDashboardColumnHintsDismissed,
+} from "@/lib/dashboardColumnHintsStorage";
+import { KronosysTimePopoverField } from "@/components/dashboard/KronosysTimePopoverField";
+import { Search } from "lucide-react";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+type LiveShape = { language?: string };
+
+type SettingsForm = {
+  usageProfile: string;
+  enabled: boolean;
+  autoStart: boolean;
+  showWelcomeOnStartup: boolean;
+  anonymizePaths: boolean;
+  flushIntervalSeconds: number;
+  heartbeatIntervalSeconds: number;
+  maxBufferedEvents: number;
+  historyStoragePath: string;
+  localPersistenceDriver: string;
+  historyPartition: string;
+  sessionExportFormat: string;
+  csvDelimiter: string;
+  sessionStartMode: string;
+  autoGitSync: boolean;
+  gitRemoteUrl: string;
+  /** Origine GitLab API (vide = GitLab.com après résolution). */
+  gitlabApiBaseUrl: string;
+  mongodbEnabled: boolean;
+  mongodbDatabaseName: string;
+  mongodbCollectionName: string;
+  mongodbHost: string;
+  mongodbPort: number;
+  mongodbUsername: string;
+  mongodbAuthSource: string;
+  localApiPort: number;
+  dashboardWebUrl: string;
+  /** Fuseau IANA pour dates tableau de bord et rapports. */
+  dashboardDisplayTimeZone: string;
+  /** `true` : affichage 24 h ; `false` : 12 h (AM/PM). */
+  dashboardUse24HourClock: boolean;
+  /** Seuil d’alerte (heures) pour la durée murale affichée dans le tableau de bord. */
+  dashboardSessionDurationAlertHours: number;
+  dashboardShowKronoFocusInHeader: boolean;
+  dashboardShowKronoFocusInTaskOps: boolean;
+  /** Lorsque `false`, les tâches sans # ne reçoivent pas l’étiquette réservée `default`. */
+  taskDefaultTagBucketEnabled: boolean;
+  dashboardAllowTaskStartTimeEdit: boolean;
+  dashboardAllowSessionStartTimeEdit: boolean;
+  dashboardAllowTaskEndTimeEdit: boolean;
+  dashboardAllowSessionEndTimeEdit: boolean;
+  /** `next dev` : partager le coffre `v4` avec la production (sinon `v4-dev`). */
+  developmentUseProductionData: boolean;
+  workspaceLocExcludedDirsText: string;
+  workspaceLocExcludedPathPatternsText: string;
+  scheduleEnabled: boolean;
+  scheduleDays: number[];
+  scheduleStartTime: string;
+  scheduleEndTime: string;
+  scheduleCreateDailySession: boolean;
+  scheduleTransferTasks: boolean;
+  schedulePauseTasks: boolean;
+  plannedSessions: {
+    id: string;
+    name: string;
+    days: number[];
+    startTime: string;
+    endTime: string;
+    createSession: boolean;
+    transferTasks: boolean;
+    pauseTasks: boolean;
+    tagsText: string;
+    project: string;
+  }[];
+};
+
+function cfgToForm(cfg: Record<string, unknown> | undefined): SettingsForm {
+  const num = (v: unknown, fallback: number) =>
+    typeof v === "number" && Number.isFinite(v) ? v : fallback;
+  const bool = (v: unknown, fallback: boolean) =>
+    typeof v === "boolean" ? v : fallback;
+  const str = (v: unknown, fallback: string) =>
+    typeof v === "string" ? v : fallback;
+  const part = str(cfg?.historyPartition, "daily");
+  const partition = ["daily", "weekly", "monthly"].includes(part)
+    ? part
+    : "daily";
+  const fmtRaw = str(cfg?.sessionExportFormat, "json");
+  const fmt = ["json", "csv", "jiraTable", "sap"].includes(fmtRaw)
+    ? fmtRaw
+    : "json";
+  const modeRaw = str(cfg?.sessionStartMode, "continue");
+  const mode = ["continue", "new"].includes(modeRaw) ? modeRaw : "continue";
+  const profileRaw = str(cfg?.usageProfile, "manager");
+  const usageProfile = profileRaw === "developer" ? "developer" : "manager";
+  const locDirsLines = (() => {
+    const v = cfg?.workspaceLocExcludedDirectoryNames;
+    if (!Array.isArray(v)) {
+      return [...DEFAULT_WORKSPACE_LOC_EXCLUDED_DIRECTORY_NAMES].join("\n");
+    }
+    return v
+      .map((x) => String(x).trim())
+      .filter(Boolean)
+      .join("\n");
+  })();
+  const locPatsLines = (() => {
+    const v = cfg?.workspaceLocExcludedPathPatterns;
+    if (!Array.isArray(v)) {
+      return "";
+    }
+    return v
+      .map((x) => String(x).trim())
+      .filter(Boolean)
+      .join("\n");
+  })();
+  const scheduleDaysRaw = cfg?.scheduleDays;
+  const scheduleDays = Array.isArray(scheduleDaysRaw)
+    ? (scheduleDaysRaw.filter((x) => typeof x === "number") as number[])
+    : [1, 2, 3, 4, 5];
+  const rawPlannedSessions = Array.isArray(cfg?.plannedSessions)
+    ? cfg.plannedSessions
+    : [];
+  const plannedSessions = rawPlannedSessions.map((psRaw: unknown) => {
+    const ps =
+      typeof psRaw === "object" && psRaw !== null
+        ? (psRaw as Record<string, unknown>)
+        : {};
+    return {
+      id: str(ps.id, Math.random().toString(36).slice(2, 11)),
+      name: str(ps.name, ""),
+      days: Array.isArray(ps.days)
+        ? ps.days.filter((x: unknown) => typeof x === "number")
+        : [],
+      startTime: str(ps.startTime, "10:00"),
+      endTime: str(ps.endTime, "11:00"),
+      createSession: bool(ps.createSession, true),
+      transferTasks: bool(ps.transferTasks, true),
+      pauseTasks: bool(ps.pauseTasks, true),
+      tagsText: Array.isArray(ps.tags) ? ps.tags.join(", ") : "",
+      project: str(ps.project, ""),
+    };
+  });
+  return {
+    usageProfile,
+    enabled: bool(cfg?.enabled, true),
+    autoStart: bool(cfg?.autoStart, true),
+    showWelcomeOnStartup: bool(cfg?.showWelcomeOnStartup, true),
+    anonymizePaths: bool(cfg?.anonymizePaths, false),
+    flushIntervalSeconds: num(cfg?.flushIntervalSeconds, 15),
+    heartbeatIntervalSeconds: num(cfg?.heartbeatIntervalSeconds, 120),
+    maxBufferedEvents: num(cfg?.maxBufferedEvents, 500),
+    historyStoragePath: str(cfg?.historyStoragePath, ""),
+    localPersistenceDriver:
+      str(cfg?.localPersistenceDriver, "sqlite") === "json" ? "json" : "sqlite",
+    historyPartition: partition,
+    sessionExportFormat: fmt,
+    csvDelimiter: str(cfg?.csvDelimiter, ","),
+    sessionStartMode: mode,
+    autoGitSync: bool(cfg?.autoGitSync, false),
+    gitRemoteUrl: str(cfg?.gitRemoteUrl, ""),
+    gitlabApiBaseUrl: str(cfg?.gitlabApiBaseUrl, ""),
+    mongodbEnabled: bool(cfg?.mongodbEnabled, false),
+    mongodbDatabaseName: str(cfg?.mongodbDatabaseName, "kronosys"),
+    mongodbCollectionName: str(cfg?.mongodbCollectionName, "sessions"),
+    mongodbHost: str(cfg?.mongodbHost, "127.0.0.1"),
+    mongodbPort: num(cfg?.mongodbPort, 27017),
+    mongodbUsername: str(cfg?.mongodbUsername, ""),
+    mongodbAuthSource: str(cfg?.mongodbAuthSource, "admin"),
+    localApiPort: num(cfg?.localApiPort, 5566),
+    dashboardWebUrl: str(cfg?.dashboardWebUrl, "http://kronosys:5555"),
+    dashboardDisplayTimeZone: readDashboardTimeZoneFromCfg(cfg),
+    dashboardUse24HourClock: readDashboardUse24HourClockFromCfg(cfg),
+    dashboardSessionDurationAlertHours: Math.min(
+      Math.max(num(cfg?.dashboardSessionDurationAlertHours, 24), 1),
+      8760,
+    ),
+    dashboardShowKronoFocusInHeader: bool(
+      cfg?.dashboardShowKronoFocusInHeader,
+      true,
+    ),
+    dashboardShowKronoFocusInTaskOps: bool(
+      cfg?.dashboardShowKronoFocusInTaskOps,
+      true,
+    ),
+    taskDefaultTagBucketEnabled: bool(cfg?.taskDefaultTagBucketEnabled, true),
+    dashboardAllowTaskStartTimeEdit: bool(
+      cfg?.dashboardAllowTaskStartTimeEdit,
+      true,
+    ),
+    dashboardAllowSessionStartTimeEdit: bool(
+      cfg?.dashboardAllowSessionStartTimeEdit,
+      true,
+    ),
+    dashboardAllowTaskEndTimeEdit: bool(
+      cfg?.dashboardAllowTaskEndTimeEdit,
+      true,
+    ),
+    dashboardAllowSessionEndTimeEdit: bool(
+      cfg?.dashboardAllowSessionEndTimeEdit,
+      true,
+    ),
+    developmentUseProductionData: bool(
+      cfg?.developmentUseProductionData,
+      false,
+    ),
+    workspaceLocExcludedDirsText: locDirsLines,
+    workspaceLocExcludedPathPatternsText: locPatsLines,
+    scheduleEnabled: bool(cfg?.scheduleEnabled, false),
+    scheduleDays,
+    scheduleStartTime: str(cfg?.scheduleStartTime, "09:00"),
+    scheduleEndTime: str(cfg?.scheduleEndTime, "17:00"),
+    scheduleCreateDailySession: bool(cfg?.scheduleCreateDailySession, true),
+    scheduleTransferTasks: bool(cfg?.scheduleTransferTasks, true),
+    schedulePauseTasks: bool(cfg?.schedulePauseTasks, true),
+    plannedSessions,
+  };
+}
+
+function inputClass(disabled?: boolean) {
+  return `w-full max-w-md rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 ${
+    disabled ? "opacity-50" : ""
+  }`;
+}
+
+function textareaClass(disabled?: boolean) {
+  return `w-full max-w-xl min-h-[9rem] rounded-lg border border-zinc-300 bg-white px-3 py-2 font-mono text-xs leading-relaxed text-zinc-900 outline-none ring-violet-500/30 focus:ring-2 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 ${
+    disabled ? "opacity-50" : ""
+  }`;
+}
+
+function splitLinesToWorkspaceLocDirs(text: string): string[] {
+  return [
+    ...new Set(
+      text
+        .split("\n")
+        .map((l) => l.trim())
+        .filter(
+          (s) =>
+            s.length > 0 &&
+            s.length <= 256 &&
+            !s.includes("/") &&
+            !s.includes("\\"),
+        ),
+    ),
+  ].slice(0, 500);
+}
+
+function splitLinesToPathPatterns(text: string): string[] {
+  return [
+    ...new Set(
+      text
+        .split("\n")
+        .map((l) => l.trim().replace(/\\/g, "/"))
+        .filter((s) => s.length > 0 && s.length <= 512),
+    ),
+  ].slice(0, 200);
+}
+
+function Field({
+  label,
+  description,
+  children,
+}: {
+  label: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  const uid = useId();
+  const labelId = `${uid}-label`;
+  const descId = `${uid}-desc`;
+  return (
+    <div
+      role="group"
+      aria-labelledby={labelId}
+      aria-describedby={descId}
+      className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:gap-6"
+    >
+      <div className="min-w-0 shrink-0 sm:w-52">
+        <div
+          id={labelId}
+          className="text-sm font-medium text-zinc-800 dark:text-zinc-200"
+        >
+          {label}
+        </div>
+        <p
+          id={descId}
+          className="mt-0.5 text-xs leading-snug text-zinc-600 dark:text-zinc-500"
+        >
+          {description}
+        </p>
+      </div>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+function Toggle({
+  checked,
+  onChange,
+  disabled,
+  ariaLabel,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+  ariaLabel: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked ? "true" : "false"}
+      aria-label={ariaLabel}
+      disabled={disabled}
+      className={`relative h-7 w-12 shrink-0 rounded-full transition ${
+        checked ? "bg-violet-600" : "bg-zinc-700"
+      } ${disabled ? "opacity-50" : ""}`}
+      onClick={() => onChange(!checked)}
+    >
+      <span
+        className={`absolute top-0.5 left-0.5 h-6 w-6 rounded-full bg-white transition ${
+          checked ? "translate-x-5" : "translate-x-0"
+        }`}
+      />
+    </button>
+  );
+}
+
+function SettingsCheckbox({
+  checked,
+  onChange,
+  disabled,
+  ariaLabel,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+  ariaLabel: string;
+}) {
+  return (
+    <input
+      type="checkbox"
+      checked={checked}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.checked)}
+      aria-label={ariaLabel}
+      className={`h-4 w-4 shrink-0 rounded border border-zinc-400 bg-white text-violet-600 accent-violet-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/70 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-zinc-600 dark:bg-zinc-950 dark:focus-visible:ring-offset-zinc-950 ${
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+      }`}
+    />
+  );
+}
+
+const SETTINGS_SECTION_SCROLL =
+  "scroll-mt-24 space-y-6 border-b border-zinc-200 pb-10 last:border-b-0 last:pb-4 dark:border-zinc-800";
+
+const ARCHIVED_SESSIONS_PAGE_SIZE = 10;
+
+function archivedTaskCount(s: SessionListEntry): number {
+  const listed = s.tasks?.length ?? 0;
+  const nActive =
+    Array.isArray(s.activeTasks) && s.activeTasks.length > 0
+      ? s.activeTasks.length
+      : s.activeTask
+        ? 1
+        : 0;
+  return listed + nActive;
+}
+
+function tocMatch(filter: string, ...parts: string[]): boolean {
+  const q = filter.trim().toLowerCase();
+  if (!q) return true;
+  return parts.join(" ").toLowerCase().includes(q);
+}
+
+function SettingsToc({
+  s,
+  filter,
+  showDevDataInGeneral,
+}: {
+  s: SettingsCopy;
+  filter: string;
+  showDevDataInGeneral: boolean;
+}) {
+  const linkClass =
+    "rounded text-zinc-700 underline-offset-2 hover:text-violet-700 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500/80 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:text-zinc-300 dark:hover:text-violet-300 dark:focus-visible:ring-offset-zinc-950";
+  const m = (...parts: string[]) => tocMatch(filter, ...parts);
+
+  const showUsage = m(s.sectionUsageProfile, "settings-usage-profile");
+  const showGeneral = m(
+    s.sectionGeneral,
+    "settings-general",
+    "général",
+    "general",
+    "v4",
+    "v4-dev",
+    "next",
+    "dev",
+    "sqlite",
+    "données",
+    "data",
+    "développement",
+    "development",
+  );
+  const showSchedule = m(
+    s.sectionSchedule,
+    "settings-schedule",
+    "schedule",
+    "horaire",
+    "travail",
+    "weekday",
+    "automatique",
+  );
+  const showPlannedSessions = m(
+    s.sectionPlannedSessions,
+    "settings-planned-sessions",
+    "planned",
+    "planifi",
+    "récurrent",
+    "recurring",
+  );
+  const showPrivacy = m(s.sectionPrivacy, "settings-privacy");
+  const showKronoFocus = m(
+    s.sectionKronoFocus,
+    "settings-kronoFocus",
+    "kronoFocus",
+  );
+  const showTaskTags = m(
+    s.sectionTaskTags,
+    "settings-task-tags",
+    "task",
+    "tag",
+    "étiquette",
+    "default",
+    "défaut",
+    "bucket",
+  );
+  const showCollection = m(
+    s.sectionCollection,
+    "settings-collection",
+    "buffer",
+  );
+  const showHistory = m(s.sectionHistory, "settings-history");
+  const showTagsGlobal =
+    m(s.sectionTagsProjects, "settings-tags-projects") ||
+    m(s.tocSubTagsGlobal, "settings-tags-global");
+  const showTagsProjects =
+    m(s.sectionTagsProjects, "settings-tags-projects") ||
+    m(s.tocSubTagsProjects, "settings-tags-saved-projects");
+  const showTagsByProject =
+    m(s.sectionTagsProjects, "settings-tags-projects") ||
+    m(s.tocSubTagsByProject, "settings-tags-by-project");
+  const showTagsBlock = showTagsGlobal || showTagsProjects || showTagsByProject;
+  const showDanger = m(s.sectionDangerZone, "settings-danger-zone");
+  const showArchived = m(
+    s.sectionArchivedSessions,
+    "settings-archived-sessions",
+    "archived",
+  );
+  const showExport = m(s.sectionExport, "settings-export");
+  const showGit =
+    m(s.sectionGit, "settings-git", "gitlab") ||
+    m(
+      s.tocSubGitIdentity,
+      "settings-git-identity",
+      "author",
+      "identity",
+      "forge",
+    );
+  const showMongoConn =
+    m(s.sectionMongo, "settings-mongo", "mongodb") ||
+    m(s.sectionMongoConnection, "settings-mongo-connection");
+  const showMongoBlock = showMongoConn;
+  const showWorkspaceLoc = m(
+    s.sectionWorkspaceLoc,
+    "settings-workspace-loc",
+    "snapshot",
+    "reporting",
+  );
+  const showWebTour =
+    m(s.sectionWeb, "settings-web", "dashboard", "api") ||
+    m(s.tocSubDashboardTour, "settings-dashboard-tour") ||
+    m(s.tocSubReportingTour, "settings-reporting-tour") ||
+    m(
+      s.tocSubDashboardColumnHints,
+      "settings-dashboard-column-hints",
+      "column",
+      "colonnes",
+      "three",
+      "trois",
+    ) ||
+    m(
+      s.dashboardDisplayTimeZone,
+      "fuseau",
+      "timezone",
+      "time zone",
+      "iana",
+      "horaire",
+    ) ||
+    m(
+      s.dashboardClockFormat,
+      "12h",
+      "12 h",
+      "24h",
+      "24 h",
+      "am/pm",
+      "horloge",
+      "clock format",
+      "heure",
+    );
+  const showWebDuration =
+    m(s.sectionWeb, "settings-web", "dashboard", "api") ||
+    m(
+      s.tocSubSessionDurationAlert,
+      "settings-session-duration-alert",
+      "duration",
+    );
+  const showWebBlock = showWebTour || showWebDuration;
+  const showLicenses = m(
+    s.licensesPageLink,
+    "/licenses",
+    "license",
+    "licence",
+    "third-party",
+    "notices",
+    "logiciels",
+  );
+
+  const anyVisible =
+    showUsage ||
+    showGeneral ||
+    showSchedule ||
+    showPlannedSessions ||
+    showPrivacy ||
+    showKronoFocus ||
+    showTaskTags ||
+    showCollection ||
+    showHistory ||
+    showTagsBlock ||
+    showDanger ||
+    showArchived ||
+    showExport ||
+    showGit ||
+    showMongoBlock ||
+    showWorkspaceLoc ||
+    showWebBlock ||
+    showLicenses;
+
+  const subListClass =
+    "mt-1.5 ml-2 space-y-1 border-l border-zinc-700 pl-3 dark:border-zinc-600";
+
+  return (
+    <nav
+      aria-label={s.tocNavAriaLabel}
+      className="rounded-xl border border-zinc-200 bg-zinc-50/90 p-4 dark:border-zinc-800 dark:bg-zinc-900/40"
+    >
+      <p className="mb-3 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+        {s.tocHeading}
+      </p>
+      {filter.trim() && !anyVisible ? (
+        <p className="text-sm text-zinc-600 dark:text-zinc-400" role="status">
+          {s.tocSearchNoResults}
+        </p>
+      ) : (
+        <ul className="space-y-2 text-sm">
+          {showUsage ? (
+            <li>
+              <a href="#settings-usage-profile" className={linkClass}>
+                {s.sectionUsageProfile}
+              </a>
+            </li>
+          ) : null}
+          {showGeneral ? (
+            <li>
+              <a href="#settings-general" className={linkClass}>
+                {s.sectionGeneral}
+              </a>
+              {showDevDataInGeneral ? (
+                <ul className={subListClass}>
+                  <li>
+                    <a href="#settings-dev-data" className={linkClass}>
+                      {s.devDataBlockTitle}
+                    </a>
+                  </li>
+                </ul>
+              ) : null}
+            </li>
+          ) : null}
+          {showSchedule ? (
+            <li>
+              <a href="#settings-schedule" className={linkClass}>
+                {s.sectionSchedule}
+              </a>
+            </li>
+          ) : null}
+          {showPlannedSessions ? (
+            <li>
+              <a href="#settings-planned-sessions" className={linkClass}>
+                {s.sectionPlannedSessions}
+              </a>
+            </li>
+          ) : null}
+          {showPrivacy ? (
+            <li>
+              <a href="#settings-privacy" className={linkClass}>
+                {s.sectionPrivacy}
+              </a>
+            </li>
+          ) : null}
+          {showKronoFocus ? (
+            <li>
+              <a href="#settings-kronoFocus" className={linkClass}>
+                {s.sectionKronoFocus}
+              </a>
+            </li>
+          ) : null}
+          {showTaskTags ? (
+            <li>
+              <a href="#settings-task-tags" className={linkClass}>
+                {s.sectionTaskTags}
+              </a>
+            </li>
+          ) : null}
+          {showCollection ? (
+            <li>
+              <a href="#settings-collection" className={linkClass}>
+                {s.sectionCollection}
+              </a>
+            </li>
+          ) : null}
+          {showHistory ? (
+            <li>
+              <a href="#settings-history" className={linkClass}>
+                {s.sectionHistory}
+              </a>
+            </li>
+          ) : null}
+          {showExport ? (
+            <li>
+              <a href="#settings-export" className={linkClass}>
+                {s.sectionExport}
+              </a>
+            </li>
+          ) : null}
+          {showTagsBlock ? (
+            <li>
+              <a href="#settings-tags-projects" className={linkClass}>
+                {s.sectionTagsProjects}
+              </a>
+              {showTagsGlobal || showTagsProjects || showTagsByProject ? (
+                <ul className={subListClass}>
+                  {showTagsGlobal ? (
+                    <li>
+                      <a href="#settings-tags-global" className={linkClass}>
+                        {s.tocSubTagsGlobal}
+                      </a>
+                    </li>
+                  ) : null}
+                  {showTagsProjects ? (
+                    <li>
+                      <a
+                        href="#settings-tags-saved-projects"
+                        className={linkClass}
+                      >
+                        {s.tocSubTagsProjects}
+                      </a>
+                    </li>
+                  ) : null}
+                  {showTagsByProject ? (
+                    <li>
+                      <a href="#settings-tags-by-project" className={linkClass}>
+                        {s.tocSubTagsByProject}
+                      </a>
+                    </li>
+                  ) : null}
+                </ul>
+              ) : null}
+            </li>
+          ) : null}
+          {showGit ? (
+            <li>
+              <a href="#settings-git" className={linkClass}>
+                {s.sectionGit}
+              </a>
+              <ul className="mt-1.5 ml-2 space-y-1 border-l border-zinc-700 pl-3">
+                <li>
+                  <a href="#settings-git-identity" className={linkClass}>
+                    {s.tocSubGitIdentity}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          ) : null}
+          {showMongoBlock ? (
+            <li>
+              <a href="#settings-mongo" className={linkClass}>
+                {s.sectionMongo}
+              </a>
+              {showMongoConn ? (
+                <ul className="mt-1.5 ml-2 space-y-1 border-l border-zinc-700 pl-3">
+                  <li>
+                    <a href="#settings-mongo-connection" className={linkClass}>
+                      {s.sectionMongoConnection}
+                    </a>
+                  </li>
+                </ul>
+              ) : null}
+            </li>
+          ) : null}
+          {showWorkspaceLoc ? (
+            <li>
+              <a href="#settings-workspace-loc" className={linkClass}>
+                {s.sectionWorkspaceLoc}
+              </a>
+            </li>
+          ) : null}
+          {showWebBlock ? (
+            <li>
+              <a href="#settings-web" className={linkClass}>
+                {s.sectionWeb}
+              </a>
+              {showWebTour || showWebDuration ? (
+                <ul className={subListClass}>
+                  {showWebTour ? (
+                    <>
+                      <li>
+                        <a
+                          href="#settings-dashboard-tour"
+                          className={linkClass}
+                        >
+                          {s.tocSubDashboardTour}
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          href="#settings-dashboard-column-hints"
+                          className={linkClass}
+                        >
+                          {s.tocSubDashboardColumnHints}
+                        </a>
+                      </li>
+                      <li>
+                        <a
+                          href="#settings-reporting-tour"
+                          className={linkClass}
+                        >
+                          {s.tocSubReportingTour}
+                        </a>
+                      </li>
+                    </>
+                  ) : null}
+                  {showWebDuration ? (
+                    <li>
+                      <a
+                        href="#settings-session-duration-alert"
+                        className={linkClass}
+                      >
+                        {s.tocSubSessionDurationAlert}
+                      </a>
+                    </li>
+                  ) : null}
+                </ul>
+              ) : null}
+            </li>
+          ) : null}
+          {showArchived ? (
+            <li>
+              <a href="#settings-archived-sessions" className={linkClass}>
+                {s.sectionArchivedSessions}
+              </a>
+            </li>
+          ) : null}
+          {showDanger ? (
+            <li>
+              <a href="#settings-danger-zone" className={linkClass}>
+                {s.sectionDangerZone}
+              </a>
+            </li>
+          ) : null}
+          {showLicenses ? (
+            <li>
+              <Link href="/licenses" className={linkClass}>
+                {s.licensesPageLink}
+              </Link>
+            </li>
+          ) : null}
+        </ul>
+      )}
+    </nav>
+  );
+}
+
+function SettingsPageContent() {
+  const glabSuggestDescId = useId();
+  const tocSearchFieldId = useId();
+  const {
+    payload,
+    error,
+    refresh: refreshKronosys,
+    getLatestPayload,
+  } = useKronosysPayload();
+  const [form, setForm] = useState<SettingsForm | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [settingsAck, setSettingsAck] = useState<"save" | "reset" | null>(null);
+  const [resetDefaultsConfirmOpen, setResetDefaultsConfirmOpen] =
+    useState(false);
+  const [resetDefaultsBusy, setResetDefaultsBusy] = useState(false);
+  const [mongoUriDraft, setMongoUriDraft] = useState("");
+  const [mongoUriSaving, setMongoUriSaving] = useState(false);
+  const [mongoPasswordDraft, setMongoPasswordDraft] = useState("");
+  const [mongoPasswordSaving, setMongoPasswordSaving] = useState(false);
+  const [mongoTestBusy, setMongoTestBusy] = useState(false);
+  const [glabRepoBusy, setGlabRepoBusy] = useState(false);
+  const [gitlabTokenDraft, setGitlabTokenDraft] = useState("");
+  const [gitlabTokenSaving, setGitlabTokenSaving] = useState(false);
+  const [gitlabTestBusy, setGitlabTestBusy] = useState(false);
+  const [gitlabTestFeedback, setGitlabTestFeedback] = useState<{
+    tone: "ok" | "bad" | "warn";
+    text: string;
+  } | null>(null);
+  const [gitIdName, setGitIdName] = useState("");
+  const [gitIdEmail, setGitIdEmail] = useState("");
+  const [gitIdLogin, setGitIdLogin] = useState("");
+  const [gitIdentitySaving, setGitIdentitySaving] = useState(false);
+  const [gitIdentitySavedFlash, setGitIdentitySavedFlash] = useState(false);
+  const [columnHintsRestoreFlash, setColumnHintsRestoreFlash] = useState(false);
+  const [mongoTestFeedback, setMongoTestFeedback] = useState<{
+    tone: "ok" | "bad" | "warn";
+    text: string;
+  } | null>(null);
+  const [mongoResyncBusy, setMongoResyncBusy] = useState(false);
+  const [settingsDialogAlert, setSettingsDialogAlert] = useState<string | null>(
+    null,
+  );
+  const [mongoResyncConfirmOpen, setMongoResyncConfirmOpen] = useState(false);
+  const [archivedSessionsPage, setArchivedSessionsPage] = useState(0);
+  const [archivedRestoreBusyId, setArchivedRestoreBusyId] = useState<
+    string | null
+  >(null);
+  const [clearHistoryConfirmOpen, setClearHistoryConfirmOpen] = useState(false);
+  const [clearHistoryBusy, setClearHistoryBusy] = useState(false);
+  const [settingsTocFilter, setSettingsTocFilter] = useState("");
+  const [settingsTourOpen, setSettingsTourOpen] = useState(false);
+
+  useEffect(() => {
+    if (payload && !isSettingsTourCompleted()) {
+      setSettingsTourOpen(true);
+    }
+  }, [payload]);
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+
+  const refresh = useCallback(
+    async (options?: {
+      preserveForm?: boolean;
+      routerInvalidate?: boolean;
+    }): Promise<boolean> => {
+      const ok = await refreshKronosys({
+        routerInvalidate: options?.routerInvalidate === true,
+      });
+      if (ok && options?.preserveForm !== true) {
+        const p = getLatestPayload();
+        if (p) {
+          setForm(cfgToForm(p.cfg as Record<string, unknown> | undefined));
+        }
+      }
+      return ok;
+    },
+    [getLatestPayload, refreshKronosys],
+  );
+
+  const settingsFormBootstrappedRef = useRef(false);
+  useEffect(() => {
+    if (!payload || settingsFormBootstrappedRef.current) {
+      return;
+    }
+    settingsFormBootstrappedRef.current = true;
+    setForm(cfgToForm(payload.cfg as Record<string, unknown> | undefined));
+  }, [payload]);
+
+  useEffect(() => {
+    if (gitIdentitySaving) {
+      return;
+    }
+    const g = payload?.gitIdentity;
+    setGitIdName(typeof g?.gitUserName === "string" ? g.gitUserName : "");
+    setGitIdEmail(typeof g?.gitUserEmail === "string" ? g.gitUserEmail : "");
+    setGitIdLogin(
+      typeof g?.gitAccountLogin === "string" ? g.gitAccountLogin : "",
+    );
+  }, [payload?.gitIdentity, gitIdentitySaving]);
+
+  const saveGitIdentity = useCallback(async () => {
+    setGitIdentitySaving(true);
+    try {
+      await postKronosysAction({
+        type: "setGitIdentity",
+        gitUserName: gitIdName,
+        gitUserEmail: gitIdEmail,
+        gitAccountLogin: gitIdLogin,
+      });
+      await refresh({ preserveForm: true });
+      setGitIdentitySavedFlash(true);
+      window.setTimeout(() => setGitIdentitySavedFlash(false), 3500);
+    } catch (e: unknown) {
+      setSettingsDialogAlert(e instanceof Error ? e.message : String(e));
+    } finally {
+      setGitIdentitySaving(false);
+    }
+  }, [gitIdEmail, gitIdLogin, gitIdName, refresh]);
+
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const nav = reportingNav(lang);
+  const s: SettingsCopy = settingsCopy(lang);
+  const ddr = payload?.devDataRuntime;
+  const showDevDataInGeneral = ddr?.isNextDevelopment === true;
+  const formLocked = saving || resetDefaultsBusy;
+  const dt = dashboardStrings(lang);
+  const handleManualRefresh = useCallback(async () => {
+    return await refresh({ routerInvalidate: true, preserveForm: true });
+  }, [refresh]);
+
+  const restoreDashboardColumnHintsPreference = useCallback(() => {
+    writeDashboardColumnHintsDismissed(false);
+    writeDashboardColumnHintsClosed(false);
+    setColumnHintsRestoreFlash(true);
+    window.setTimeout(() => setColumnHintsRestoreFlash(false), 3500);
+  }, []);
+
+  const dangerClearHistoryModalExtra = useMemo(
+    () => (
+      <div
+        className={`space-y-3 rounded-lg border border-zinc-200 bg-zinc-50/90 p-3 text-zinc-800 dark:border-zinc-600 dark:bg-zinc-900/50 dark:text-zinc-200 ${
+          clearHistoryBusy ? "pointer-events-none opacity-50" : ""
+        }`}
+      >
+        <p className="text-xs font-medium leading-snug">
+          {s.dangerClearHistoryBackupIntro}
+        </p>
+        <ul className="space-y-2.5 text-sm">
+          <li>
+            <a
+              href="/api/backup?format=json"
+              download
+              className="font-medium text-violet-700 underline decoration-violet-400 underline-offset-2 hover:text-violet-600 dark:text-violet-300 dark:hover:text-violet-200"
+            >
+              {s.dangerClearHistoryBackupJson}
+            </a>
+            <p className="mt-0.5 text-[11px] leading-relaxed text-zinc-500 dark:text-zinc-400">
+              {s.dangerClearHistoryBackupJsonHint}
+            </p>
+          </li>
+          <li>
+            <a
+              href="/api/backup?format=csv"
+              download
+              className="font-medium text-violet-700 underline decoration-violet-400 underline-offset-2 hover:text-violet-600 dark:text-violet-300 dark:hover:text-violet-200"
+            >
+              {s.dangerClearHistoryBackupCsvZip}
+            </a>
+            <p className="mt-0.5 text-[11px] leading-relaxed text-zinc-500 dark:text-zinc-400">
+              {s.dangerClearHistoryBackupCsvZipHint}
+            </p>
+          </li>
+          <li>
+            <a
+              href="/api/backup?format=sqlite"
+              download
+              className="font-medium text-violet-700 underline decoration-violet-400 underline-offset-2 hover:text-violet-600 dark:text-violet-300 dark:hover:text-violet-200"
+            >
+              {s.dangerClearHistoryBackupSqlite}
+            </a>
+            <p className="mt-0.5 text-[11px] leading-relaxed text-zinc-500 dark:text-zinc-400">
+              {s.dangerClearHistoryBackupSqliteHint}
+            </p>
+          </li>
+        </ul>
+      </div>
+    ),
+    [s, clearHistoryBusy],
+  );
+  const historyArchivedSorted = useMemo(() => {
+    const raw = (payload?.historyArchived || []) as SessionListEntry[];
+    return [...raw].sort((a, b) => {
+      const ta = Date.parse(a.savedAt || a.startAt || "") || 0;
+      const tb = Date.parse(b.savedAt || b.startAt || "") || 0;
+      return tb - ta;
+    });
+  }, [payload?.historyArchived]);
+  const archivedTotal = historyArchivedSorted.length;
+  const maxArchivedPage = Math.max(
+    0,
+    Math.ceil(archivedTotal / ARCHIVED_SESSIONS_PAGE_SIZE) - 1,
+  );
+  const archivedPage = Math.min(archivedSessionsPage, maxArchivedPage);
+  const archivedSliceStart = archivedPage * ARCHIVED_SESSIONS_PAGE_SIZE;
+  const archivedPageRows = historyArchivedSorted.slice(
+    archivedSliceStart,
+    archivedSliceStart + ARCHIVED_SESSIONS_PAGE_SIZE,
+  );
+  const archivedRangeTo =
+    archivedTotal === 0
+      ? 0
+      : Math.min(archivedSliceStart + archivedPageRows.length, archivedTotal);
+
+  useEffect(() => {
+    setArchivedSessionsPage((p) => Math.min(p, maxArchivedPage));
+  }, [maxArchivedPage]);
+
+  useEffect(() => {
+    if (!form || !payload) {
+      return;
+    }
+    if (
+      typeof window === "undefined" ||
+      window.location.hash !== "#settings-archived-sessions"
+    ) {
+      return;
+    }
+    const el = document.getElementById("settings-archived-sessions");
+    if (!el) {
+      return;
+    }
+    const t = window.setTimeout(() => {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 80);
+    return () => window.clearTimeout(t);
+  }, [form, payload]);
+
+  const cfgRaw = payload?.cfg as Record<string, unknown> | undefined;
+  const mongoUriConfigured = cfgRaw?.mongodbUriConfigured === true;
+  const mongoManualUriConfigured = cfgRaw?.mongodbManualUriConfigured === true;
+  const mongoPasswordConfigured = cfgRaw?.mongodbPasswordConfigured === true;
+  const mongoRemoteStatus = payload?.remoteStatus as
+    | "connected"
+    | "failed"
+    | "pending"
+    | undefined;
+  const mongoMirrorSavedOn = cfgRaw?.mongodbEnabled === true;
+  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 showWorkspaceFoldersEmpty = showWorkspaceFoldersEmptyMessage(
+    payload,
+    resolvedWorkspaceRoots.length,
+  );
+  const suggestGlabRemoteRepo = cfgRaw?.suggestGlabRemoteRepo === true;
+  const gitlabTokenStoredFlag = cfgRaw?.gitlabTokenStored === true;
+  const gitlabTokenFromEnvFlag = cfgRaw?.gitlabTokenFromEnv === true;
+  const gitlabApiVerifiedFlag = cfgRaw?.gitlabApiVerified === true;
+  const gitlabCanAttemptTest =
+    gitlabTokenDraft.trim().length > 0 || gitlabTokenFromEnvFlag;
+  const gitlabTokenStatusText = gitlabTokenStoredFlag
+    ? s.gitlabTokenStoredYes
+    : gitlabTokenFromEnvFlag
+      ? s.gitlabTokenFromEnvYes
+      : s.gitlabTokenNone;
+
+  const headerApiError =
+    lang === "fr"
+      ? "Impossible de joindre l’API locale Kronosys (127.0.0.1:5566 par défaut). Vérifiez que le serveur tourne."
+      : "Cannot reach the local Kronosys API (default 127.0.0.1:5566). Make sure the server is running.";
+
+  const postLang = async (next: Lang) => {
+    await postKronosysAction({ type: "setLanguage", lang: next });
+    await refresh();
+  };
+
+  const onSave = async () => {
+    if (!form) {
+      return;
+    }
+    setSaving(true);
+    setSettingsAck(null);
+    try {
+      const uriTrim = mongoUriDraft.trim();
+      if (uriTrim.length > 0) {
+        const uriRes = await postKronosysAction({
+          type: "setMongoDbConnectionUri",
+          uri: uriTrim,
+        });
+        const uriErr = uriRes.result?.settingsError;
+        if (uriErr) {
+          setSettingsDialogAlert(
+            typeof uriErr === "string" ? uriErr : String(uriErr),
+          );
+          return;
+        }
+      }
+      const passTrim = mongoPasswordDraft.trim();
+      if (passTrim.length > 0) {
+        const passRes = await postKronosysAction({
+          type: "setMongoDbPassword",
+          password: passTrim,
+        });
+        const passErr = passRes.result?.settingsError;
+        if (passErr) {
+          setSettingsDialogAlert(
+            typeof passErr === "string" ? passErr : String(passErr),
+          );
+          return;
+        }
+      }
+      const gitlabTokTrim = gitlabTokenDraft.trim();
+      if (gitlabTokTrim.length > 0) {
+        const tokRes = await postKronosysAction({
+          type: "setGitlabToken",
+          token: gitlabTokTrim,
+        });
+        const tokErr = tokRes.result?.settingsError;
+        if (tokErr) {
+          setSettingsDialogAlert(
+            typeof tokErr === "string" ? tokErr : String(tokErr),
+          );
+          return;
+        }
+      }
+      const {
+        workspaceLocExcludedDirsText,
+        workspaceLocExcludedPathPatternsText,
+        plannedSessions,
+        ...formRest
+      } = form;
+      const res = await postKronosysAction({
+        type: "updateKronosysSettings",
+        settings: {
+          ...formRest,
+          workspaceLocExcludedDirectoryNames: splitLinesToWorkspaceLocDirs(
+            workspaceLocExcludedDirsText,
+          ),
+          workspaceLocExcludedPathPatterns: splitLinesToPathPatterns(
+            workspaceLocExcludedPathPatternsText,
+          ),
+          plannedSessions: plannedSessions.map((ps) => {
+            const { tagsText, ...rest } = ps;
+            return {
+              ...rest,
+              tags: tagsText
+                .split(",")
+                .map((t) => t.trim())
+                .filter(Boolean),
+            };
+          }),
+        },
+      });
+      const err = res.result?.settingsError;
+      if (err) {
+        setSettingsDialogAlert(typeof err === "string" ? err : String(err));
+        return;
+      }
+      setMongoUriDraft("");
+      setMongoPasswordDraft("");
+      setGitlabTokenDraft("");
+      setSettingsAck("save");
+      await refresh();
+      setTimeout(() => setSettingsAck(null), 4000);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const pickStorage = async () => {
+    await postKronosysAction({ type: "pickStoragePath" });
+    await refresh();
+  };
+
+  const saveGitlabToken = async (token: string) => {
+    const t = token.trim();
+    if (t.length === 0) {
+      return;
+    }
+    setGitlabTokenSaving(true);
+    try {
+      const res = await postKronosysAction({
+        type: "setGitlabToken",
+        token: t,
+      });
+      const err = res.result?.settingsError;
+      if (err) {
+        setSettingsDialogAlert(typeof err === "string" ? err : String(err));
+        return;
+      }
+      setGitlabTokenDraft("");
+      setGitlabTestFeedback(null);
+      await refresh({ preserveForm: true });
+    } finally {
+      setGitlabTokenSaving(false);
+    }
+  };
+
+  const clearGitlabTokenSetting = async () => {
+    setGitlabTokenSaving(true);
+    try {
+      const res = await postKronosysAction({
+        type: "setGitlabToken",
+        token: "",
+      });
+      const err = res.result?.settingsError;
+      if (err) {
+        setSettingsDialogAlert(typeof err === "string" ? err : String(err));
+        return;
+      }
+      setGitlabTokenDraft("");
+      setGitlabTestFeedback(null);
+      await refresh({ preserveForm: true });
+    } finally {
+      setGitlabTokenSaving(false);
+    }
+  };
+
+  const testGitlabConnection = async (copy: SettingsCopy) => {
+    setGitlabTestBusy(true);
+    setGitlabTestFeedback(null);
+    try {
+      const res = await postKronosysAction({
+        type: "testGitlabConnection",
+        token: gitlabTokenDraft.trim(),
+        lang,
+        gitlabApiBaseUrl: form?.gitlabApiBaseUrl?.trim() ?? "",
+      });
+      const gt = res.result?.gitlabConnectionTest;
+      await refresh({ preserveForm: true });
+      if (gt?.outcome === "connected") {
+        setGitlabTestFeedback({ tone: "ok", text: copy.gitlabTestOk });
+      } else if (gt?.outcome === "failed") {
+        if (gt.reason === "no_token") {
+          setGitlabTestFeedback({ tone: "bad", text: copy.gitlabTestNoToken });
+        } else {
+          const extra =
+            typeof gt.message === "string" && gt.message.trim()
+              ? ` (${gt.message.trim()})`
+              : "";
+          setGitlabTestFeedback({
+            tone: "bad",
+            text: `${copy.gitlabTestFail}${extra}`,
+          });
+        }
+      } else {
+        setGitlabTestFeedback({
+          tone: "bad",
+          text: copy.gitlabTestErrorGeneric,
+        });
+      }
+    } catch {
+      setGitlabTestFeedback({ tone: "bad", text: copy.gitlabTestErrorGeneric });
+    } finally {
+      setGitlabTestBusy(false);
+    }
+  };
+
+  const createGlabRemoteWithGlab = async () => {
+    setGlabRepoBusy(true);
+    try {
+      const res = await postKronosysAction({ type: "createGlabRemoteRepo" });
+      const cr = res.result?.glabRepoCreate;
+      if (cr && cr.ok === false && cr.error) {
+        setSettingsDialogAlert(cr.error);
+        return;
+      }
+      await refresh();
+    } finally {
+      setGlabRepoBusy(false);
+    }
+  };
+
+  const saveMongoUri = async (uri: string) => {
+    setMongoUriSaving(true);
+    try {
+      const res = await postKronosysAction({
+        type: "setMongoDbConnectionUri",
+        uri,
+      });
+      const err = res.result?.settingsError;
+      if (err) {
+        setSettingsDialogAlert(typeof err === "string" ? err : String(err));
+        return;
+      }
+      setMongoUriDraft("");
+      await refresh({ preserveForm: true });
+    } finally {
+      setMongoUriSaving(false);
+    }
+  };
+
+  const saveMongoPassword = async (password: string) => {
+    setMongoPasswordSaving(true);
+    try {
+      const res = await postKronosysAction({
+        type: "setMongoDbPassword",
+        password,
+      });
+      const err = res.result?.settingsError;
+      if (err) {
+        setSettingsDialogAlert(typeof err === "string" ? err : String(err));
+        return;
+      }
+      setMongoPasswordDraft("");
+      await refresh({ preserveForm: true });
+    } finally {
+      setMongoPasswordSaving(false);
+    }
+  };
+
+  const testMongoConnection = async (
+    copy: SettingsCopy,
+    draft: SettingsForm,
+  ) => {
+    setMongoTestBusy(true);
+    setMongoTestFeedback(null);
+    try {
+      const res = await postKronosysAction({
+        type: "testMongoDbConnection",
+        settings: {
+          mongodbEnabled: draft.mongodbEnabled,
+          mongodbDatabaseName: draft.mongodbDatabaseName,
+          mongodbCollectionName: draft.mongodbCollectionName,
+          mongodbHost: draft.mongodbHost,
+          mongodbPort: draft.mongodbPort,
+          mongodbUsername: draft.mongodbUsername,
+          mongodbAuthSource: draft.mongodbAuthSource,
+        },
+      });
+      const outcome = res.result?.mongoConnectionTest?.outcome;
+      await refresh({ preserveForm: true });
+      if (outcome === "connected") {
+        setMongoTestFeedback({ tone: "ok", text: copy.mongoTestOk });
+      } else if (outcome === "failed") {
+        setMongoTestFeedback({ tone: "bad", text: copy.mongoTestFail });
+      } else if (outcome === "disabled") {
+        setMongoTestFeedback({ tone: "warn", text: copy.mongoTestDisabled });
+      }
+    } catch {
+      setMongoTestFeedback({ tone: "bad", text: copy.mongoTestErrorGeneric });
+    } finally {
+      setMongoTestBusy(false);
+    }
+  };
+
+  const openMongoResyncConfirm = useCallback(() => {
+    setMongoResyncConfirmOpen(true);
+  }, []);
+
+  const executeMongoResync = useCallback(async () => {
+    setMongoResyncConfirmOpen(false);
+    const copy = settingsCopy(lang);
+    setMongoResyncBusy(true);
+    try {
+      const res = await postKronosysAction({ type: "resyncMongoMirror" });
+      const mr = res.result?.mongoResync;
+      await refresh({ preserveForm: true });
+      if (mr && mr.ok === true) {
+        setSettingsDialogAlert(
+          copy.mongoResyncDone
+            .replace("{upserted}", String(mr.upserted))
+            .replace("{failed}", String(mr.failed)),
+        );
+      } else if (mr && mr.ok === false) {
+        if (mr.reason === "disabled") {
+          setSettingsDialogAlert(copy.mongoResyncDisabled);
+        } else if (mr.reason === "unsupported") {
+          setSettingsDialogAlert(copy.mongoResyncUnsupported);
+        } else if (mr.reason === "failed") {
+          setSettingsDialogAlert(
+            copy.mongoResyncErrorDetail.replace("{detail}", String(mr.message)),
+          );
+        } else {
+          setSettingsDialogAlert(copy.mongoResyncErrorGeneric);
+        }
+      } else {
+        setSettingsDialogAlert(copy.mongoResyncErrorGeneric);
+      }
+    } catch (e: unknown) {
+      const detail = e instanceof Error ? e.message : String(e);
+      setSettingsDialogAlert(
+        copy.mongoResyncErrorDetail.replace("{detail}", detail),
+      );
+    } finally {
+      setMongoResyncBusy(false);
+    }
+  }, [lang, refresh]);
+
+  const update = <K extends keyof SettingsForm>(
+    key: K,
+    value: SettingsForm[K],
+  ) => {
+    setForm((prev) => (prev ? { ...prev, [key]: value } : prev));
+  };
+
+  const restoreArchivedSession = async (sessionId: string) => {
+    setArchivedRestoreBusyId(sessionId);
+    try {
+      const res = await postKronosysAction({
+        type: "archiveSession",
+        sessionId,
+        archived: false,
+      });
+      const op = res.result?.sessionOp;
+      if (op && !op.ok && op.message) {
+        setSettingsDialogAlert(
+          typeof op.message === "string" ? op.message : String(op.message),
+        );
+      }
+      await refresh({ preserveForm: true });
+    } finally {
+      setArchivedRestoreBusyId(null);
+    }
+  };
+
+  const clearHistory = useCallback(async () => {
+    setClearHistoryBusy(true);
+    try {
+      await postKronosysAction({ type: "clearHistory" });
+      resetDashboardTour();
+      resetDashboardLangPreference();
+      resetGitIdentityBannerDismissed();
+      await refresh({ preserveForm: true });
+      setClearHistoryConfirmOpen(false);
+      router.push("/?tour=replay");
+    } catch (e: unknown) {
+      setSettingsDialogAlert(e instanceof Error ? e.message : String(e));
+    } finally {
+      setClearHistoryBusy(false);
+    }
+  }, [refresh, router]);
+
+  const applyResetToDefaults = useCallback(async () => {
+    setResetDefaultsBusy(true);
+    setSettingsAck(null);
+    try {
+      await postKronosysAction({ type: "resetKronosysSettings" });
+      resetGitIdentityBannerDismissed();
+      setMongoUriDraft("");
+      setMongoPasswordDraft("");
+      setGitlabTokenDraft("");
+      setSettingsAck("reset");
+      await refresh();
+      setTimeout(() => setSettingsAck(null), 4000);
+    } catch (e: unknown) {
+      setSettingsDialogAlert(e instanceof Error ? e.message : String(e));
+    } finally {
+      setResetDefaultsBusy(false);
+    }
+  }, [refresh]);
+
+  return (
+    <div className="min-h-screen bg-zinc-100 text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100">
+      <header className={appShellHeaderClassName}>
+        <div className={appShellHeaderToolRowClassName}>
+          <div className="flex min-w-0 flex-col gap-1">
+            <Link
+              href={withDashboardSessionParam("/", dashboardSessionNavId)}
+              className="w-fit text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+            >
+              Kronosys
+            </Link>
+            <p className="flex flex-wrap items-center gap-x-2 text-xs font-medium leading-snug text-zinc-500 dark:text-zinc-400">
+              <span>{dt.brandTagline}</span>
+              <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+                ·
+              </span>
+              <AppVersionStamp ariaLabelTemplate={dt.appVersionAriaLabel} />
+            </p>
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <AppShellRouteNav
+              current="settings"
+              labels={nav}
+              navAriaLabel={dt.appShellRouteNavAria}
+              dashboardSessionId={dashboardSessionNavId}
+            />
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={handleManualRefresh}
+            />
+            <LanguageMenu
+              lang={lang}
+              labelEn="English"
+              labelFr="Français"
+              menuHeading={lang === "fr" ? "Langue" : "Language"}
+              triggerAriaLabel={
+                lang === "fr" ? "Langue de l’interface" : "Interface language"
+              }
+              onSelect={(next) => void postLang(next)}
+            />
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-[1920px] px-5 py-8 sm:px-8 lg:px-10 xl:px-12 2xl:px-14">
+        <div id="settings-tour-anchor-intro" className="scroll-mt-32">
+          <h1 className="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
+            {s.title}
+          </h1>
+          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+            {s.subtitle}
+          </p>
+        </div>
+        <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-500">
+          {s.openIdeSettings}
+        </p>
+
+        {error && (
+          <div
+            className="mt-6 rounded-lg border border-red-900/60 bg-red-950/40 px-4 py-3 text-sm text-red-100"
+            role="alert"
+          >
+            <strong className="block text-red-200">API</strong>
+            {headerApiError}
+            <pre className="mt-2 overflow-x-auto text-xs text-red-200/80">
+              {error}
+            </pre>
+          </div>
+        )}
+
+        {!form && !error && (
+          <p className="mt-8 text-sm text-zinc-500">{s.loading}</p>
+        )}
+
+        {form ? (
+          <div className="mt-8 lg:grid lg:grid-cols-[minmax(0,13rem)_minmax(0,1fr)] lg:items-start lg:gap-10">
+            <aside className="mb-8 lg:sticky lg:top-6 lg:mb-0 lg:self-start">
+              <div className="mb-4">
+                <label htmlFor={tocSearchFieldId} className="sr-only">
+                  {s.tocSearchAriaLabel}
+                </label>
+                <div className="relative">
+                  <Search
+                    className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-zinc-400 dark:text-zinc-500"
+                    aria-hidden
+                  />
+                  <input
+                    id={tocSearchFieldId}
+                    type="search"
+                    value={settingsTocFilter}
+                    onChange={(e) => setSettingsTocFilter(e.target.value)}
+                    placeholder={s.tocSearchPlaceholder}
+                    className="w-full rounded-lg border border-zinc-300 bg-white py-2 pl-9 pr-3 text-sm text-zinc-900 outline-none ring-violet-500/30 placeholder:text-zinc-400 focus:ring-2 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+                  />
+                </div>
+              </div>
+              <SettingsToc
+                s={s}
+                filter={settingsTocFilter}
+                showDevDataInGeneral={showDevDataInGeneral}
+              />
+            </aside>
+            <div className="min-w-0 space-y-10">
+              <div className="flex flex-wrap items-center gap-3">
+                <button
+                  type="button"
+                  disabled={formLocked}
+                  className="rounded-lg bg-violet-600 px-4 py-2 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+                  onClick={() => void onSave()}
+                >
+                  {saving ? s.saving : s.save}
+                </button>
+                <button
+                  type="button"
+                  disabled={formLocked}
+                  className="rounded-lg border border-zinc-600 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                  onClick={() => void refresh()}
+                >
+                  {s.reload}
+                </button>
+                <button
+                  type="button"
+                  disabled={formLocked}
+                  className="rounded-lg border border-zinc-500 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-200 disabled:opacity-50 dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                  onClick={() => setResetDefaultsConfirmOpen(true)}
+                >
+                  {resetDefaultsBusy ? s.resettingDefaults : s.resetToDefaults}
+                </button>
+                {settingsAck === "save" ? (
+                  <span className="text-sm text-emerald-400">{s.savedOk}</span>
+                ) : settingsAck === "reset" ? (
+                  <span className="text-sm text-emerald-400">
+                    {s.resetDefaultsDone}
+                  </span>
+                ) : null}
+              </div>
+
+              <section
+                id="settings-usage-profile"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionUsageProfile}
+                </h2>
+                <Field label={s.usageProfile} description={s.usageProfileDesc}>
+                  <select
+                    className={inputClass(formLocked)}
+                    value={form.usageProfile}
+                    onChange={(e) => update("usageProfile", e.target.value)}
+                    disabled={formLocked}
+                    aria-label={s.usageProfile}
+                  >
+                    <option value="developer" disabled>
+                      {s.profileDeveloper}{" "}
+                      {lang === "fr" ? "(Désactivé)" : "(Disabled)"}
+                    </option>
+                    <option value="manager">{s.profileManager}</option>
+                  </select>
+                </Field>
+              </section>
+
+              <section
+                id="settings-general"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionGeneral}
+                </h2>
+                <Field label={s.enabled} description={s.enabledDesc}>
+                  <Toggle
+                    checked={form.enabled}
+                    onChange={(v) => update("enabled", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.enabled}
+                  />
+                </Field>
+                <Field label={s.autoStart} description={s.autoStartDesc}>
+                  <Toggle
+                    checked={form.autoStart}
+                    onChange={(v) => update("autoStart", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.autoStart}
+                  />
+                </Field>
+                <Field label={s.showWelcome} description={s.showWelcomeDesc}>
+                  <Toggle
+                    checked={form.showWelcomeOnStartup}
+                    onChange={(v) => update("showWelcomeOnStartup", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.showWelcome}
+                  />
+                </Field>
+                {showDevDataInGeneral && ddr ? (
+                  <div
+                    id="settings-dev-data"
+                    className="scroll-mt-24 space-y-4 border-t border-zinc-200 pt-6 dark:border-zinc-800"
+                  >
+                    <h3 className="text-sm font-semibold text-zinc-800 dark:text-zinc-200">
+                      {s.devDataBlockTitle}
+                    </h3>
+                    <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                      {s.devDataIntro}
+                    </p>
+                    {ddr.traceDataDirOverride ? (
+                      <p
+                        className="text-sm text-amber-700 dark:text-amber-300/90"
+                        role="status"
+                      >
+                        {s.devDataTraceOverride}
+                      </p>
+                    ) : null}
+                    {ddr.envForcesProductionData &&
+                    !ddr.traceDataDirOverride ? (
+                      <p
+                        className="text-sm text-amber-700 dark:text-amber-300/90"
+                        role="status"
+                      >
+                        {s.devDataEnvOverride}
+                      </p>
+                    ) : null}
+                    {ddr.dataDirectoryResolutionMismatch ? (
+                      <p
+                        className="text-sm text-amber-700 dark:text-amber-300/90"
+                        role="status"
+                      >
+                        {s.devDataRestartHint}
+                      </p>
+                    ) : null}
+                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
+                      <div className="min-w-0 sm:max-w-md">
+                        <div className="text-sm font-medium text-zinc-800 dark:text-zinc-200">
+                          {s.devDataUseProdLabel}
+                        </div>
+                        <p className="mt-0.5 text-xs leading-snug text-zinc-600 dark:text-zinc-500">
+                          {s.devDataUseProdDesc}
+                        </p>
+                      </div>
+                      <Toggle
+                        checked={
+                          ddr.envForcesProductionData ||
+                          form.developmentUseProductionData
+                        }
+                        onChange={(v) =>
+                          update("developmentUseProductionData", v)
+                        }
+                        disabled={
+                          formLocked ||
+                          ddr.traceDataDirOverride ||
+                          ddr.envForcesProductionData
+                        }
+                        ariaLabel={s.devDataUseProdLabel}
+                      />
+                    </div>
+                    <div className="space-y-2 rounded-lg border border-zinc-200 bg-zinc-50/80 p-3 text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900/50 dark:text-zinc-300">
+                      <div>
+                        <div className="mb-0.5 font-medium text-zinc-500 dark:text-zinc-500">
+                          {s.devDataActivePath}
+                        </div>
+                        <div className="break-all font-mono text-[0.7rem] leading-relaxed">
+                          {ddr.activeDataDirectory}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="mb-0.5 font-medium text-zinc-500 dark:text-zinc-500">
+                          {s.devDataPreferredPath}
+                        </div>
+                        <div className="break-all font-mono text-[0.7rem] leading-relaxed">
+                          {ddr.preferredDataDirectory}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="mb-0.5 font-medium text-zinc-500 dark:text-zinc-500">
+                          {s.devDataProdPath}
+                        </div>
+                        <div className="break-all font-mono text-[0.7rem] leading-relaxed">
+                          {ddr.productionDataDirectory}
+                        </div>
+                      </div>
+                      <div>
+                        <div className="mb-0.5 font-medium text-zinc-500 dark:text-zinc-500">
+                          {s.devDataPrefsFile}
+                        </div>
+                        <div className="break-all font-mono text-[0.7rem] leading-relaxed">
+                          {ddr.preferencesFilePath}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+              </section>
+
+              <section
+                id="settings-schedule"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionSchedule}
+                </h2>
+                <Field
+                  label={s.scheduleEnabled}
+                  description={s.scheduleEnabledDesc}
+                >
+                  <Toggle
+                    checked={form.scheduleEnabled}
+                    onChange={(v) => update("scheduleEnabled", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.scheduleEnabled}
+                  />
+                </Field>
+                {form.scheduleEnabled && (
+                  <>
+                    <Field
+                      label={s.scheduleDays}
+                      description={s.scheduleDaysDesc}
+                    >
+                      <div className="flex flex-wrap items-center gap-2">
+                        {[1, 2, 3, 4, 5, 6, 7].map((day) => {
+                          const isSelected = form.scheduleDays.includes(day);
+                          const label =
+                            lang === "fr"
+                              ? ["L", "M", "M", "J", "V", "S", "D"][day - 1]
+                              : ["M", "T", "W", "T", "F", "S", "S"][day - 1];
+                          return (
+                            <button
+                              key={day}
+                              type="button"
+                              disabled={formLocked}
+                              onClick={() => {
+                                const newDays = isSelected
+                                  ? form.scheduleDays.filter((d) => d !== day)
+                                  : [...form.scheduleDays, day].sort(
+                                      (a, b) => a - b,
+                                    );
+                                update("scheduleDays", newDays);
+                              }}
+                              className={`flex h-8 w-8 items-center justify-center rounded-md border text-sm font-medium transition-colors ${
+                                isSelected
+                                  ? "border-violet-600 bg-violet-600 text-white hover:bg-violet-500"
+                                  : "border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                              }`}
+                            >
+                              {label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </Field>
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                      <Field label={s.scheduleStartTime} description="">
+                        <KronosysTimePopoverField
+                          value={form.scheduleStartTime}
+                          onChange={(v) => update("scheduleStartTime", v)}
+                          disabled={formLocked}
+                          aria-label={s.scheduleStartTime}
+                          lang={lang}
+                          use24HourClock={form.dashboardUse24HourClock}
+                          t={s}
+                        />
+                      </Field>
+                      <Field label={s.scheduleEndTime} description="">
+                        <KronosysTimePopoverField
+                          value={form.scheduleEndTime}
+                          onChange={(v) => update("scheduleEndTime", v)}
+                          disabled={formLocked}
+                          aria-label={s.scheduleEndTime}
+                          lang={lang}
+                          use24HourClock={form.dashboardUse24HourClock}
+                          t={s}
+                        />
+                      </Field>
+                    </div>
+                    <Field
+                      label={s.scheduleCreateDailySession}
+                      description={s.scheduleCreateDailySessionDesc}
+                    >
+                      <Toggle
+                        checked={form.scheduleCreateDailySession}
+                        onChange={(v) =>
+                          update("scheduleCreateDailySession", v)
+                        }
+                        disabled={formLocked}
+                        ariaLabel={s.scheduleCreateDailySession}
+                      />
+                    </Field>
+                    <Field
+                      label={s.scheduleTransferTasks}
+                      description={s.scheduleTransferTasksDesc}
+                    >
+                      <Toggle
+                        checked={form.scheduleTransferTasks}
+                        onChange={(v) => update("scheduleTransferTasks", v)}
+                        disabled={formLocked}
+                        ariaLabel={s.scheduleTransferTasks}
+                      />
+                    </Field>
+                    <Field
+                      label={s.schedulePauseTasks}
+                      description={s.schedulePauseTasksDesc}
+                    >
+                      <Toggle
+                        checked={form.schedulePauseTasks}
+                        onChange={(v) => update("schedulePauseTasks", v)}
+                        disabled={formLocked}
+                        ariaLabel={s.schedulePauseTasks}
+                      />
+                    </Field>
+                  </>
+                )}
+              </section>
+
+              <section
+                id="settings-planned-sessions"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionPlannedSessions}
+                </h2>
+                <p className="mt-1 text-xs leading-relaxed text-zinc-500">
+                  {s.plannedSessionsIntro}
+                </p>
+
+                <div className="mt-6 flex flex-col gap-4">
+                  {form.plannedSessions.map((ps, idx) => (
+                    <div
+                      key={ps.id}
+                      className="rounded-lg border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
+                    >
+                      <div className="mb-4 flex items-center justify-between">
+                        <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                          {s.plannedSessionName} {idx + 1}
+                        </h3>
+                        <button
+                          type="button"
+                          disabled={formLocked}
+                          onClick={() => {
+                            update(
+                              "plannedSessions",
+                              form.plannedSessions.filter((_, i) => i !== idx),
+                            );
+                          }}
+                          className="text-xs text-red-600 hover:text-red-500 disabled:opacity-50 dark:text-red-400"
+                        >
+                          {s.plannedSessionRemove}
+                        </button>
+                      </div>
+
+                      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                        <Field label={s.plannedSessionName} description="">
+                          <input
+                            type="text"
+                            className={inputClass(formLocked)}
+                            value={ps.name}
+                            onChange={(e) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = {
+                                ...copy[idx],
+                                name: e.target.value,
+                              };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                          />
+                        </Field>
+                        <Field label={s.scheduleDays} description="">
+                          <div className="flex flex-wrap items-center gap-2">
+                            {[1, 2, 3, 4, 5, 6, 7].map((day) => {
+                              const isSelected = ps.days.includes(day);
+                              const label =
+                                lang === "fr"
+                                  ? ["L", "M", "M", "J", "V", "S", "D"][day - 1]
+                                  : ["M", "T", "W", "T", "F", "S", "S"][
+                                      day - 1
+                                    ];
+                              return (
+                                <button
+                                  key={day}
+                                  type="button"
+                                  disabled={formLocked}
+                                  onClick={() => {
+                                    const newDays = isSelected
+                                      ? ps.days.filter((d) => d !== day)
+                                      : [...ps.days, day].sort((a, b) => a - b);
+                                    const copy = [...form.plannedSessions];
+                                    copy[idx] = { ...copy[idx], days: newDays };
+                                    update("plannedSessions", copy);
+                                  }}
+                                  className={`flex h-7 w-7 items-center justify-center rounded border text-xs font-medium transition-colors ${
+                                    isSelected
+                                      ? "border-violet-600 bg-violet-600 text-white hover:bg-violet-500"
+                                      : "border-zinc-300 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:bg-zinc-800"
+                                  }`}
+                                >
+                                  {label}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </Field>
+                        <Field label={s.scheduleStartTime} description="">
+                          <KronosysTimePopoverField
+                            value={ps.startTime}
+                            onChange={(v) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = { ...copy[idx], startTime: v };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            aria-label={s.scheduleStartTime}
+                            lang={lang}
+                            use24HourClock={form.dashboardUse24HourClock}
+                            t={s}
+                          />
+                        </Field>
+                        <Field label={s.scheduleEndTime} description="">
+                          <KronosysTimePopoverField
+                            value={ps.endTime}
+                            onChange={(v) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = { ...copy[idx], endTime: v };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            aria-label={s.scheduleEndTime}
+                            lang={lang}
+                            use24HourClock={form.dashboardUse24HourClock}
+                            t={s}
+                          />
+                        </Field>
+                        <Field label={s.plannedSessionProject} description="">
+                          <input
+                            type="text"
+                            className={inputClass(formLocked)}
+                            value={ps.project}
+                            onChange={(e) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = {
+                                ...copy[idx],
+                                project: e.target.value,
+                              };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            placeholder="e.g. Deep work"
+                          />
+                        </Field>
+                        <Field label={s.plannedSessionTags} description="">
+                          <input
+                            type="text"
+                            className={inputClass(formLocked)}
+                            value={ps.tagsText}
+                            onChange={(e) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = {
+                                ...copy[idx],
+                                tagsText: e.target.value,
+                              };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            placeholder="e.g. meeting, frontend"
+                          />
+                        </Field>
+                      </div>
+
+                      <div className="mt-6 flex flex-col gap-4 border-t border-zinc-100 pt-4 dark:border-zinc-800">
+                        <Field
+                          label={s.scheduleCreateDailySession}
+                          description=""
+                        >
+                          <Toggle
+                            checked={ps.createSession}
+                            onChange={(v) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = { ...copy[idx], createSession: v };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            ariaLabel={s.scheduleCreateDailySession}
+                          />
+                        </Field>
+                        <Field label={s.scheduleTransferTasks} description="">
+                          <Toggle
+                            checked={ps.transferTasks}
+                            onChange={(v) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = { ...copy[idx], transferTasks: v };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            ariaLabel={s.scheduleTransferTasks}
+                          />
+                        </Field>
+                        <Field label={s.schedulePauseTasks} description="">
+                          <Toggle
+                            checked={ps.pauseTasks}
+                            onChange={(v) => {
+                              const copy = [...form.plannedSessions];
+                              copy[idx] = { ...copy[idx], pauseTasks: v };
+                              update("plannedSessions", copy);
+                            }}
+                            disabled={formLocked}
+                            ariaLabel={s.schedulePauseTasks}
+                          />
+                        </Field>
+                      </div>
+                    </div>
+                  ))}
+
+                  <button
+                    type="button"
+                    onClick={() => {
+                      update("plannedSessions", [
+                        ...form.plannedSessions,
+                        {
+                          id: Math.random().toString(36).slice(2, 11),
+                          name: "",
+                          days: [1, 2, 3, 4, 5],
+                          startTime: "10:00",
+                          endTime: "11:00",
+                          createSession: true,
+                          transferTasks: true,
+                          pauseTasks: true,
+                          tagsText: "",
+                          project: "",
+                        },
+                      ]);
+                    }}
+                    disabled={formLocked}
+                    className="w-fit rounded-lg border border-dashed border-zinc-300 px-4 py-2 text-sm font-medium text-zinc-600 hover:border-violet-500 hover:text-violet-600 disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-violet-500 dark:hover:text-violet-400"
+                  >
+                    + {s.plannedSessionAdd}
+                  </button>
+                </div>
+              </section>
+
+              <section
+                id="settings-privacy"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionPrivacy}
+                </h2>
+                <Field
+                  label={s.anonymizePaths}
+                  description={s.anonymizePathsDesc}
+                >
+                  <Toggle
+                    checked={form.anonymizePaths}
+                    onChange={(v) => update("anonymizePaths", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.anonymizePaths}
+                  />
+                </Field>
+              </section>
+
+              <section
+                id="settings-kronoFocus"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionKronoFocus}
+                </h2>
+                <Field
+                  label={s.kronoFocusShowInHeader}
+                  description={s.kronoFocusShowInHeaderDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardShowKronoFocusInHeader}
+                    onChange={(v) =>
+                      update("dashboardShowKronoFocusInHeader", v)
+                    }
+                    disabled={formLocked}
+                    ariaLabel={s.kronoFocusShowInHeader}
+                  />
+                </Field>
+                <Field
+                  label={s.kronoFocusShowInTaskOps}
+                  description={s.kronoFocusShowInTaskOpsDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardShowKronoFocusInTaskOps}
+                    onChange={(v) =>
+                      update("dashboardShowKronoFocusInTaskOps", v)
+                    }
+                    disabled={formLocked}
+                    ariaLabel={s.kronoFocusShowInTaskOps}
+                  />
+                </Field>
+              </section>
+
+              <section
+                id="settings-task-tags"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionTaskTags}
+                </h2>
+                <Field
+                  label={s.taskDefaultTagBucketEnabled}
+                  description={s.taskDefaultTagBucketEnabledDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.taskDefaultTagBucketEnabled}
+                    onChange={(v) => update("taskDefaultTagBucketEnabled", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.taskDefaultTagBucketEnabled}
+                  />
+                </Field>
+                <Field
+                  label={s.dashboardAllowTaskStartTimeEdit}
+                  description={s.dashboardAllowTaskStartTimeEditDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardAllowTaskStartTimeEdit}
+                    onChange={(v) =>
+                      update("dashboardAllowTaskStartTimeEdit", v)
+                    }
+                    disabled={formLocked}
+                    ariaLabel={s.dashboardAllowTaskStartTimeEdit}
+                  />
+                </Field>
+                <Field
+                  label={s.dashboardAllowSessionStartTimeEdit}
+                  description={s.dashboardAllowSessionStartTimeEditDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardAllowSessionStartTimeEdit}
+                    onChange={(v) =>
+                      update("dashboardAllowSessionStartTimeEdit", v)
+                    }
+                    disabled={formLocked}
+                    ariaLabel={s.dashboardAllowSessionStartTimeEdit}
+                  />
+                </Field>
+                <Field
+                  label={s.dashboardAllowTaskEndTimeEdit}
+                  description={s.dashboardAllowTaskEndTimeEditDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardAllowTaskEndTimeEdit}
+                    onChange={(v) => update("dashboardAllowTaskEndTimeEdit", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.dashboardAllowTaskEndTimeEdit}
+                  />
+                </Field>
+                <Field
+                  label={s.dashboardAllowSessionEndTimeEdit}
+                  description={s.dashboardAllowSessionEndTimeEditDesc}
+                >
+                  <SettingsCheckbox
+                    checked={form.dashboardAllowSessionEndTimeEdit}
+                    onChange={(v) =>
+                      update("dashboardAllowSessionEndTimeEdit", v)
+                    }
+                    disabled={formLocked}
+                    ariaLabel={s.dashboardAllowSessionEndTimeEdit}
+                  />
+                </Field>
+              </section>
+
+              <section
+                id="settings-collection"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionCollection}
+                </h2>
+                <Field
+                  label={s.flushInterval}
+                  description={s.flushIntervalDesc}
+                >
+                  <input
+                    type="number"
+                    min={5}
+                    max={3600}
+                    className={inputClass(formLocked)}
+                    value={form.flushIntervalSeconds}
+                    onChange={(e) =>
+                      update("flushIntervalSeconds", Number(e.target.value))
+                    }
+                    disabled={formLocked}
+                  />
+                </Field>
+                <Field
+                  label={s.heartbeatInterval}
+                  description={s.heartbeatIntervalDesc}
+                >
+                  <input
+                    type="number"
+                    min={30}
+                    max={86400}
+                    className={inputClass(formLocked)}
+                    value={form.heartbeatIntervalSeconds}
+                    onChange={(e) =>
+                      update("heartbeatIntervalSeconds", Number(e.target.value))
+                    }
+                    disabled={formLocked}
+                  />
+                </Field>
+                <Field label={s.maxBuffered} description={s.maxBufferedDesc}>
+                  <input
+                    type="number"
+                    min={100}
+                    max={100000}
+                    className={inputClass(formLocked)}
+                    value={form.maxBufferedEvents}
+                    onChange={(e) =>
+                      update("maxBufferedEvents", Number(e.target.value))
+                    }
+                    disabled={formLocked}
+                  />
+                </Field>
+              </section>
+
+              <section
+                id="settings-history"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionHistory}
+                </h2>
+                <p className="text-xs leading-relaxed text-zinc-500">
+                  {s.historyLocalFirstHint}
+                </p>
+                <Field label={s.historyPath} description={s.historyPathDesc}>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <input
+                      type="text"
+                      className={`${inputClass(formLocked)} max-w-xl flex-1`}
+                      value={form.historyStoragePath}
+                      onChange={(e) =>
+                        update("historyStoragePath", e.target.value)
+                      }
+                      disabled={formLocked}
+                      autoComplete="off"
+                    />
+                    <button
+                      type="button"
+                      className="shrink-0 rounded-lg border border-zinc-600 px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                      disabled={formLocked}
+                      onClick={() => void pickStorage()}
+                    >
+                      {s.pickStorageFolder}
+                    </button>
+                  </div>
+                </Field>
+                <Field
+                  label={s.localPersistenceDriver}
+                  description={s.localPersistenceDriverDesc}
+                >
+                  <select
+                    className={inputClass(formLocked)}
+                    value={form.localPersistenceDriver}
+                    onChange={(e) =>
+                      update("localPersistenceDriver", e.target.value)
+                    }
+                    disabled={formLocked}
+                    aria-label={s.localPersistenceDriver}
+                  >
+                    <option value="json">{s.persistenceDriverJson}</option>
+                    <option value="sqlite">{s.persistenceDriverSqlite}</option>
+                  </select>
+                  <p className="mt-2 max-w-xl text-xs text-zinc-500 dark:text-zinc-400">
+                    {s.localPersistenceReloadHint}
+                  </p>
+                </Field>
+                <Field
+                  label={s.historyPartition}
+                  description={s.historyPartitionDesc}
+                >
+                  <select
+                    className={inputClass(formLocked)}
+                    value={form.historyPartition}
+                    onChange={(e) => update("historyPartition", e.target.value)}
+                    disabled={formLocked}
+                  >
+                    <option value="daily">{s.partitionDaily}</option>
+                    <option value="weekly">{s.partitionWeekly}</option>
+                    <option value="monthly">{s.partitionMonthly}</option>
+                  </select>
+                </Field>
+                <Field
+                  label={s.sessionStartMode}
+                  description={s.sessionStartModeDesc}
+                >
+                  <select
+                    className={inputClass(formLocked)}
+                    value={form.sessionStartMode}
+                    onChange={(e) => update("sessionStartMode", e.target.value)}
+                    disabled={formLocked}
+                  >
+                    <option value="continue">{s.modeContinue}</option>
+                    <option value="new">{s.modeNew}</option>
+                  </select>
+                </Field>
+              </section>
+
+              <section id="settings-export" className={SETTINGS_SECTION_SCROLL}>
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionExport}
+                </h2>
+                <Field label={s.exportFormat} description={s.exportFormatDesc}>
+                  <select
+                    className={inputClass(formLocked)}
+                    value={form.sessionExportFormat}
+                    onChange={(e) =>
+                      update("sessionExportFormat", e.target.value)
+                    }
+                    disabled={formLocked}
+                  >
+                    <option value="json">{s.fmtJson}</option>
+                    <option value="csv">{s.fmtCsv}</option>
+                    <option value="jiraTable">{s.fmtJira}</option>
+                    <option value="sap">{s.fmtSap}</option>
+                  </select>
+                </Field>
+                <Field label={s.csvDelimiter} description={s.csvDelimiterDesc}>
+                  <input
+                    type="text"
+                    maxLength={4}
+                    className={inputClass(formLocked)}
+                    value={form.csvDelimiter}
+                    onChange={(e) => update("csvDelimiter", e.target.value)}
+                    disabled={formLocked}
+                  />
+                </Field>
+              </section>
+
+              {payload ? (
+                <SettingsTagsProjectsSection
+                  s={s}
+                  lang={lang}
+                  payload={payload}
+                  saving={formLocked}
+                  refresh={refresh}
+                />
+              ) : null}
+
+              <section id="settings-git" className={SETTINGS_SECTION_SCROLL}>
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionGit}
+                </h2>
+                <div
+                  id="settings-git-identity"
+                  className="scroll-mt-24 space-y-4 rounded-lg border border-zinc-200 bg-zinc-50/80 p-4 dark:border-zinc-700/80 dark:bg-zinc-950/40"
+                >
+                  <div>
+                    <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                      {s.gitIdentitySubheading}
+                    </h3>
+                    <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">
+                      {s.gitIdentityIntro}
+                    </p>
+                  </div>
+                  <Field
+                    label={s.gitIdentityNameLabel}
+                    description={s.gitIdentityNameDesc}
+                  >
+                    <input
+                      type="text"
+                      className={inputClass(formLocked || gitIdentitySaving)}
+                      value={gitIdName}
+                      onChange={(e) => setGitIdName(e.target.value)}
+                      disabled={formLocked || gitIdentitySaving}
+                      autoComplete="name"
+                      spellCheck={false}
+                    />
+                  </Field>
+                  <Field
+                    label={s.gitIdentityEmailLabel}
+                    description={s.gitIdentityEmailDesc}
+                  >
+                    <input
+                      type="email"
+                      className={inputClass(formLocked || gitIdentitySaving)}
+                      value={gitIdEmail}
+                      onChange={(e) => setGitIdEmail(e.target.value)}
+                      disabled={formLocked || gitIdentitySaving}
+                      autoComplete="email"
+                      spellCheck={false}
+                    />
+                  </Field>
+                  <Field
+                    label={s.gitIdentityLoginLabel}
+                    description={s.gitIdentityLoginDesc}
+                  >
+                    <input
+                      type="text"
+                      className={inputClass(formLocked || gitIdentitySaving)}
+                      value={gitIdLogin}
+                      onChange={(e) => setGitIdLogin(e.target.value)}
+                      disabled={formLocked || gitIdentitySaving}
+                      autoComplete="username"
+                      spellCheck={false}
+                    />
+                  </Field>
+                  <div className="flex flex-wrap items-center gap-3">
+                    <button
+                      type="button"
+                      className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+                      disabled={formLocked || gitIdentitySaving}
+                      onClick={() => void saveGitIdentity()}
+                    >
+                      {gitIdentitySaving
+                        ? s.gitIdentitySaving
+                        : s.gitIdentitySave}
+                    </button>
+                    {gitIdentitySavedFlash ? (
+                      <span className="text-sm text-emerald-600 dark:text-emerald-400">
+                        {s.gitIdentitySavedFlash}
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+                <Field label={s.autoGitSync} description={s.autoGitSyncDesc}>
+                  <Toggle
+                    checked={form.autoGitSync}
+                    onChange={(v) => update("autoGitSync", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.autoGitSync}
+                  />
+                </Field>
+                <Field
+                  label={s.gitlabInstanceUrl}
+                  description={s.gitlabInstanceUrlDesc}
+                >
+                  <input
+                    type="url"
+                    className={inputClass(formLocked)}
+                    value={form.gitlabApiBaseUrl}
+                    onChange={(e) => update("gitlabApiBaseUrl", e.target.value)}
+                    disabled={formLocked}
+                    autoComplete="off"
+                    spellCheck={false}
+                    placeholder="https://gitlab.com"
+                    aria-label={s.gitlabInstanceUrl}
+                  />
+                  <p className="mt-1.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+                    {s.gitlabTest401Help}
+                  </p>
+                </Field>
+                <Field label={s.gitlabToken} description={s.gitlabTokenDesc}>
+                  <p className="mb-2 text-xs text-zinc-400">
+                    {gitlabTokenStatusText}
+                  </p>
+                  <input
+                    type="password"
+                    className={inputClass(
+                      formLocked || gitlabTokenSaving || glabRepoBusy,
+                    )}
+                    value={gitlabTokenDraft}
+                    onChange={(e) => setGitlabTokenDraft(e.target.value)}
+                    disabled={formLocked || gitlabTokenSaving || glabRepoBusy}
+                    autoComplete="off"
+                    spellCheck={false}
+                    placeholder={gitlabTokenStoredFlag ? "••••••••" : ""}
+                    aria-label={s.gitlabToken}
+                  />
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        gitlabTokenSaving ||
+                        glabRepoBusy ||
+                        gitlabTokenDraft.trim().length === 0
+                      }
+                      title={
+                        gitlabTokenDraft.trim().length === 0
+                          ? s.gitlabTokenSaveNeedValue
+                          : undefined
+                      }
+                      onClick={() => void saveGitlabToken(gitlabTokenDraft)}
+                    >
+                      {gitlabTokenSaving ? s.saving : s.gitlabTokenSave}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        gitlabTokenSaving ||
+                        glabRepoBusy ||
+                        !gitlabTokenStoredFlag
+                      }
+                      onClick={() => void clearGitlabTokenSetting()}
+                    >
+                      {s.gitlabTokenClear}
+                    </button>
+                  </div>
+                  {gitlabTokenStoredFlag &&
+                  gitlabTokenDraft.trim() === "" &&
+                  !gitlabTokenFromEnvFlag ? (
+                    <p className="mt-2 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400">
+                      {s.gitlabTestPasteStoredHint}
+                    </p>
+                  ) : null}
+                  <div className="mt-3 flex flex-wrap items-center gap-2">
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        gitlabTokenSaving ||
+                        glabRepoBusy ||
+                        gitlabTestBusy ||
+                        !gitlabCanAttemptTest
+                      }
+                      aria-label={s.gitlabTestConnectionAria}
+                      onClick={() => void testGitlabConnection(s)}
+                    >
+                      {gitlabTestBusy
+                        ? s.gitlabTestRunning
+                        : s.gitlabTestConnection}
+                    </button>
+                  </div>
+                  {gitlabTestFeedback ? (
+                    <p
+                      className={
+                        gitlabTestFeedback.tone === "ok"
+                          ? "mt-2 text-sm text-emerald-600 dark:text-emerald-400"
+                          : gitlabTestFeedback.tone === "warn"
+                            ? "mt-2 text-sm text-amber-600 dark:text-amber-400"
+                            : "mt-2 text-sm text-red-600 dark:text-red-400"
+                      }
+                    >
+                      {gitlabTestFeedback.text}
+                    </p>
+                  ) : null}
+                  {gitlabTokenStoredFlag || gitlabTokenFromEnvFlag ? (
+                    <p
+                      className={
+                        gitlabApiVerifiedFlag
+                          ? "mt-2 text-xs text-emerald-600 dark:text-emerald-400"
+                          : "mt-2 text-xs text-zinc-500 dark:text-zinc-400"
+                      }
+                    >
+                      {gitlabApiVerifiedFlag
+                        ? s.gitlabApiVerifiedYes
+                        : s.gitlabApiVerifiedNo}
+                    </p>
+                  ) : null}
+                </Field>
+                {suggestGlabRemoteRepo ? (
+                  <div className="max-w-md rounded-lg border border-violet-500/35 bg-violet-950/25 px-3 py-3 text-sm text-zinc-200">
+                    <p
+                      id={glabSuggestDescId}
+                      className="leading-snug text-zinc-300"
+                    >
+                      {s.glabRemoteSuggest}
+                    </p>
+                    <button
+                      type="button"
+                      className="mt-3 w-fit rounded-lg border border-violet-500/60 bg-violet-600/20 px-3 py-1.5 text-sm text-violet-100 hover:bg-violet-600/35 disabled:opacity-50"
+                      disabled={formLocked || glabRepoBusy || gitlabTokenSaving}
+                      aria-label={s.glabRemoteCreate}
+                      aria-describedby={glabSuggestDescId}
+                      onClick={() => void createGlabRemoteWithGlab()}
+                    >
+                      {glabRepoBusy ? s.glabRemoteCreating : s.glabRemoteCreate}
+                    </button>
+                  </div>
+                ) : null}
+                <Field label={s.gitRemoteUrl} description={s.gitRemoteUrlDesc}>
+                  <input
+                    type="text"
+                    className={inputClass(formLocked)}
+                    value={form.gitRemoteUrl}
+                    onChange={(e) => update("gitRemoteUrl", e.target.value)}
+                    disabled={formLocked}
+                    autoComplete="off"
+                  />
+                </Field>
+              </section>
+
+              <section id="settings-mongo" className={SETTINGS_SECTION_SCROLL}>
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionMongo}
+                </h2>
+                <Field label={s.mongoEnabled} description={s.mongoEnabledDesc}>
+                  <Toggle
+                    checked={form.mongodbEnabled}
+                    onChange={(v) => update("mongodbEnabled", v)}
+                    disabled={formLocked}
+                    ariaLabel={s.mongoEnabled}
+                  />
+                </Field>
+                <Field
+                  label={s.mongoDatabase}
+                  description={s.mongoDatabaseDesc}
+                >
+                  <input
+                    type="text"
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbDatabaseName}
+                    onChange={(e) =>
+                      update("mongodbDatabaseName", e.target.value)
+                    }
+                    disabled={formLocked || !form.mongodbEnabled}
+                    autoComplete="off"
+                    spellCheck={false}
+                    aria-label={s.mongoDatabase}
+                  />
+                </Field>
+                <Field
+                  label={s.mongoCollection}
+                  description={s.mongoCollectionDesc}
+                >
+                  <input
+                    type="text"
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbCollectionName}
+                    onChange={(e) =>
+                      update("mongodbCollectionName", e.target.value)
+                    }
+                    disabled={formLocked || !form.mongodbEnabled}
+                    autoComplete="off"
+                    spellCheck={false}
+                    aria-label={s.mongoCollection}
+                  />
+                </Field>
+
+                <div
+                  id="settings-mongo-connection"
+                  className="scroll-mt-24 border-t border-zinc-800 pt-6"
+                >
+                  <h3 className="text-sm font-medium text-zinc-200">
+                    {s.sectionMongoConnection}
+                  </h3>
+                  <p className="mt-1 text-xs leading-relaxed text-zinc-500">
+                    {s.mongoConnectionIntro}
+                  </p>
+                  {form.mongodbEnabled ? (
+                    <>
+                      <p className="mt-3 text-xs text-zinc-500">
+                        {s.mongoRemoteStatus}:{" "}
+                        {mongoRemoteStatus === "connected"
+                          ? s.mongoStatusConnected
+                          : mongoRemoteStatus === "failed"
+                            ? s.mongoStatusFailed
+                            : s.mongoStatusPending}
+                        {" · "}
+                        {mongoUriConfigured ? (
+                          <span className="text-emerald-400/90">
+                            {s.mongoConnectionResolvableYes}
+                          </span>
+                        ) : (
+                          <span className="text-amber-400/90">
+                            {s.mongoConnectionResolvableNo}
+                          </span>
+                        )}
+                      </p>
+                      <div className="mt-3 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+                        <button
+                          type="button"
+                          className="w-fit rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-200 hover:bg-zinc-800 disabled:opacity-50"
+                          disabled={
+                            formLocked ||
+                            mongoTestBusy ||
+                            mongoUriSaving ||
+                            mongoPasswordSaving
+                          }
+                          aria-label={s.mongoTestConnectionAria}
+                          onClick={() => void testMongoConnection(s, form)}
+                        >
+                          {mongoTestBusy
+                            ? s.mongoTestRunning
+                            : s.mongoTestConnection}
+                        </button>
+                        {mongoTestFeedback ? (
+                          <p
+                            role="status"
+                            className={`text-sm ${
+                              mongoTestFeedback.tone === "ok"
+                                ? "text-emerald-400"
+                                : mongoTestFeedback.tone === "warn"
+                                  ? "text-amber-400"
+                                  : "text-red-300"
+                            }`}
+                          >
+                            {mongoTestFeedback.text}
+                          </p>
+                        ) : null}
+                      </div>
+                      <p className="mt-2 max-w-xl text-xs text-zinc-500">
+                        {s.mongoTestUsesSavedConfigHint}
+                      </p>
+                      <div className="mt-4 border-t border-zinc-800 pt-4">
+                        <h4 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                          {s.mongoSyncSectionTitle}
+                        </h4>
+                        <MongoMirrorSyncLine
+                          t={dt}
+                          sync={
+                            payload?.mongoMirrorSync as
+                              | MongoMirrorSyncPayload
+                              | undefined
+                          }
+                          mongoEnabled={mongoMirrorSavedOn}
+                        />
+                        <section
+                          className="mt-2 space-y-1 border-t border-zinc-800/80 pt-2"
+                          aria-labelledby="settings-kronosys-workspace-paths"
+                        >
+                          <p
+                            id="settings-kronosys-workspace-paths"
+                            className="text-[11px] font-medium text-zinc-500"
+                          >
+                            {s.workspaceFoldersLabel}
+                          </p>
+                          {showWorkspaceFoldersEmpty ? (
+                            <p className="text-[11px] text-zinc-500">
+                              {s.workspaceFoldersEmpty}
+                            </p>
+                          ) : resolvedWorkspaceRoots.length > 0 ? (
+                            <ul className="list-none space-y-1 font-mono text-[11px] leading-snug text-zinc-400">
+                              {resolvedWorkspaceRoots.map((p) => (
+                                <li key={p} className="break-all">
+                                  {p}
+                                </li>
+                              ))}
+                            </ul>
+                          ) : null}
+                        </section>
+                        <button
+                          type="button"
+                          className="mt-3 rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-200 hover:bg-zinc-800 disabled:opacity-50"
+                          disabled={
+                            formLocked ||
+                            mongoResyncBusy ||
+                            mongoTestBusy ||
+                            mongoUriSaving ||
+                            mongoPasswordSaving ||
+                            !mongoMirrorSavedOn
+                          }
+                          aria-label={s.mongoResyncAriaLabel}
+                          onClick={() => openMongoResyncConfirm()}
+                        >
+                          {mongoResyncBusy
+                            ? s.mongoResyncRunning
+                            : s.mongoResyncButton}
+                        </button>
+                        <p className="mt-2 max-w-xl text-xs text-zinc-500">
+                          {s.mongoResyncHint}
+                        </p>
+                      </div>
+                    </>
+                  ) : null}
+                </div>
+
+                <Field label={s.mongoHost} description={s.mongoHostDesc}>
+                  <input
+                    type="text"
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbHost}
+                    onChange={(e) => update("mongodbHost", e.target.value)}
+                    disabled={formLocked || !form.mongodbEnabled}
+                    autoComplete="off"
+                    spellCheck={false}
+                    aria-label={s.mongoHost}
+                  />
+                </Field>
+                <Field label={s.mongoPort} description={s.mongoPortDesc}>
+                  <input
+                    type="number"
+                    min={1}
+                    max={65535}
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbPort}
+                    onChange={(e) =>
+                      update("mongodbPort", Number(e.target.value))
+                    }
+                    disabled={formLocked || !form.mongodbEnabled}
+                    aria-label={s.mongoPort}
+                  />
+                </Field>
+                <Field label={s.mongoUser} description={s.mongoUserDesc}>
+                  <input
+                    type="text"
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbUsername}
+                    onChange={(e) => update("mongodbUsername", e.target.value)}
+                    disabled={formLocked || !form.mongodbEnabled}
+                    autoComplete="off"
+                    spellCheck={false}
+                    aria-label={s.mongoUser}
+                  />
+                </Field>
+                <Field
+                  label={s.mongoAuthSource}
+                  description={s.mongoAuthSourceDesc}
+                >
+                  <input
+                    type="text"
+                    className={inputClass(formLocked || !form.mongodbEnabled)}
+                    value={form.mongodbAuthSource}
+                    onChange={(e) =>
+                      update("mongodbAuthSource", e.target.value)
+                    }
+                    disabled={formLocked || !form.mongodbEnabled}
+                    autoComplete="off"
+                    spellCheck={false}
+                    aria-label={s.mongoAuthSource}
+                  />
+                </Field>
+                <Field
+                  label={s.mongoPassword}
+                  description={s.mongoPasswordDesc}
+                >
+                  <p className="mb-2 text-xs text-zinc-400">
+                    {mongoPasswordConfigured
+                      ? s.mongoPasswordConfiguredYes
+                      : s.mongoPasswordConfiguredNo}
+                  </p>
+                  <input
+                    type="password"
+                    className={inputClass(
+                      formLocked ||
+                        mongoPasswordSaving ||
+                        mongoUriSaving ||
+                        !form.mongodbEnabled,
+                    )}
+                    value={mongoPasswordDraft}
+                    onChange={(e) => setMongoPasswordDraft(e.target.value)}
+                    disabled={
+                      formLocked ||
+                      mongoPasswordSaving ||
+                      mongoUriSaving ||
+                      !form.mongodbEnabled
+                    }
+                    autoComplete="new-password"
+                    placeholder={mongoPasswordConfigured ? "••••••••" : ""}
+                    aria-label={s.mongoPassword}
+                  />
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        mongoPasswordSaving ||
+                        mongoUriSaving ||
+                        !form.mongodbEnabled
+                      }
+                      onClick={() => void saveMongoPassword(mongoPasswordDraft)}
+                    >
+                      {mongoPasswordSaving ? s.saving : s.mongoPasswordSave}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        mongoPasswordSaving ||
+                        mongoUriSaving ||
+                        !form.mongodbEnabled
+                      }
+                      onClick={() => void saveMongoPassword("")}
+                    >
+                      {s.mongoPasswordClear}
+                    </button>
+                  </div>
+                </Field>
+
+                <Field
+                  label={s.mongoManualUri}
+                  description={s.mongoManualUriDesc}
+                >
+                  <p className="mb-2 text-xs text-zinc-400">
+                    {mongoManualUriConfigured
+                      ? s.mongoUriConfiguredYes
+                      : s.mongoUriConfiguredNo}
+                  </p>
+                  <input
+                    type="password"
+                    className={inputClass(
+                      formLocked ||
+                        mongoUriSaving ||
+                        mongoPasswordSaving ||
+                        !form.mongodbEnabled,
+                    )}
+                    value={mongoUriDraft}
+                    onChange={(e) => setMongoUriDraft(e.target.value)}
+                    disabled={
+                      formLocked ||
+                      mongoUriSaving ||
+                      mongoPasswordSaving ||
+                      !form.mongodbEnabled
+                    }
+                    autoComplete="off"
+                    placeholder={mongoManualUriConfigured ? "••••••••" : ""}
+                    aria-label={s.mongoUri}
+                  />
+                  <p className="mt-1 text-xs text-zinc-500">{s.mongoUriDesc}</p>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    <button
+                      type="button"
+                      className="rounded-lg bg-violet-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-violet-500 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        mongoUriSaving ||
+                        mongoPasswordSaving ||
+                        !form.mongodbEnabled
+                      }
+                      onClick={() => void saveMongoUri(mongoUriDraft)}
+                    >
+                      {mongoUriSaving ? s.saving : s.mongoUriSave}
+                    </button>
+                    <button
+                      type="button"
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
+                      disabled={
+                        formLocked ||
+                        mongoUriSaving ||
+                        mongoPasswordSaving ||
+                        !form.mongodbEnabled
+                      }
+                      onClick={() => void saveMongoUri("")}
+                    >
+                      {s.mongoUriClear}
+                    </button>
+                  </div>
+                </Field>
+              </section>
+
+              <section
+                id="settings-workspace-loc"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionWorkspaceLoc}
+                </h2>
+                {form.usageProfile === "manager" ? (
+                  <p className="mt-2 text-sm text-zinc-500">
+                    {s.workspaceLocSectionHiddenManager}
+                  </p>
+                ) : (
+                  <>
+                    <Field
+                      label={s.workspaceLocExcludedDirs}
+                      description={s.workspaceLocExcludedDirsDesc}
+                    >
+                      <textarea
+                        className={textareaClass(formLocked)}
+                        value={form.workspaceLocExcludedDirsText}
+                        onChange={(e) =>
+                          update("workspaceLocExcludedDirsText", e.target.value)
+                        }
+                        disabled={formLocked}
+                        spellCheck={false}
+                        aria-label={s.workspaceLocExcludedDirs}
+                      />
+                    </Field>
+                    <Field
+                      label={s.workspaceLocExcludedPatterns}
+                      description={s.workspaceLocExcludedPatternsDesc}
+                    >
+                      <textarea
+                        className={textareaClass(formLocked)}
+                        value={form.workspaceLocExcludedPathPatternsText}
+                        onChange={(e) =>
+                          update(
+                            "workspaceLocExcludedPathPatternsText",
+                            e.target.value,
+                          )
+                        }
+                        disabled={formLocked}
+                        spellCheck={false}
+                        aria-label={s.workspaceLocExcludedPatterns}
+                      />
+                    </Field>
+                  </>
+                )}
+              </section>
+
+              <section id="settings-web" className={SETTINGS_SECTION_SCROLL}>
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionWeb}
+                </h2>
+
+                <div className="flex flex-col gap-8 mb-10">
+                  <Field
+                    label={s.dashboardDisplayTimeZone}
+                    description={s.dashboardDisplayTimeZoneDesc}
+                  >
+                    <select
+                      className={inputClass(formLocked)}
+                      value={form.dashboardDisplayTimeZone}
+                      onChange={(e) =>
+                        update("dashboardDisplayTimeZone", e.target.value)
+                      }
+                      disabled={formLocked}
+                    >
+                      {DASHBOARD_TIME_ZONE_SELECT_OPTIONS.map((opt) => (
+                        <option key={opt.id} value={opt.id}>
+                          {lang === "fr" ? opt.labelFr : opt.labelEn}
+                        </option>
+                      ))}
+                    </select>
+                  </Field>
+
+                  <Field
+                    label={s.dashboardClockFormat}
+                    description={s.dashboardClockFormatDesc}
+                  >
+                    <div className="flex flex-wrap items-center gap-4">
+                      <label className="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
+                        <input
+                          type="radio"
+                          name="dashboardUse24HourClock"
+                          checked={form.dashboardUse24HourClock === false}
+                          onChange={() =>
+                            update("dashboardUse24HourClock", false)
+                          }
+                          disabled={formLocked}
+                          className="h-4 w-4 accent-violet-600"
+                        />
+                        {s.dashboardClock12hOption}
+                      </label>
+                      <label className="flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300">
+                        <input
+                          type="radio"
+                          name="dashboardUse24HourClock"
+                          checked={form.dashboardUse24HourClock === true}
+                          onChange={() =>
+                            update("dashboardUse24HourClock", true)
+                          }
+                          disabled={formLocked}
+                          className="h-4 w-4 accent-violet-600"
+                        />
+                        {s.dashboardClock24hOption}
+                      </label>
+                    </div>
+                  </Field>
+                </div>
+                <div
+                  id="settings-dashboard-tour"
+                  className="scroll-mt-24 mb-8 rounded-xl border border-zinc-200 bg-zinc-50/80 p-4 dark:border-zinc-700 dark:bg-zinc-900/50"
+                >
+                  <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    {s.dashboardTourBlockTitle}
+                  </h3>
+                  <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                    {s.dashboardTourBlockIntro}
+                  </p>
+                  <Link
+                    href="/?tour=replay"
+                    className="mt-4 inline-flex items-center justify-center rounded-lg border border-violet-500/50 bg-violet-500/10 px-4 py-2 text-sm font-medium text-violet-800 transition hover:border-violet-500/75 hover:bg-violet-500/18 dark:border-violet-400/45 dark:bg-violet-600/20 dark:text-violet-100 dark:hover:border-violet-400/60 dark:hover:bg-violet-600/30"
+                  >
+                    {s.dashboardTourReplayLinkLabel}
+                  </Link>
+                  <button
+                    type="button"
+                    className="mt-4 ml-3 inline-flex items-center justify-center rounded-lg border border-zinc-500/50 bg-zinc-500/10 px-4 py-2 text-sm font-medium text-zinc-800 transition hover:border-zinc-500/75 hover:bg-zinc-500/18 dark:border-zinc-400/45 dark:bg-zinc-600/20 dark:text-zinc-100 dark:hover:border-zinc-400/60 dark:hover:bg-zinc-600/30"
+                    onClick={() => {
+                      resetDashboardTour();
+                      resetSettingsTour();
+                      setSettingsTourOpen(true);
+                    }}
+                  >
+                    {dt.tourUndismissBtn}
+                  </button>
+                </div>
+                <div
+                  id="settings-dashboard-column-hints"
+                  className="scroll-mt-24 mb-8 rounded-xl border border-zinc-200 bg-zinc-50/80 p-4 dark:border-zinc-700 dark:bg-zinc-900/50"
+                >
+                  <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    {s.dashboardColumnHintsBlockTitle}
+                  </h3>
+                  <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                    {s.dashboardColumnHintsBlockIntro}
+                  </p>
+                  <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2">
+                    <button
+                      type="button"
+                      className="inline-flex items-center justify-center rounded-lg border border-zinc-500/50 bg-zinc-500/10 px-4 py-2 text-sm font-medium text-zinc-800 transition hover:border-zinc-500/75 hover:bg-zinc-500/18 dark:border-zinc-400/45 dark:bg-zinc-600/20 dark:text-zinc-100 dark:hover:border-zinc-400/60 dark:hover:bg-zinc-600/30"
+                      onClick={restoreDashboardColumnHintsPreference}
+                    >
+                      {s.dashboardColumnHintsRestoreBtn}
+                    </button>
+                    {columnHintsRestoreFlash ? (
+                      <span
+                        className="text-sm text-emerald-600 dark:text-emerald-400"
+                        role="status"
+                      >
+                        {s.dashboardColumnHintsRestoreDone}
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+                <div
+                  id="settings-reporting-tour"
+                  className="scroll-mt-24 mb-8 rounded-xl border border-zinc-200 bg-zinc-50/80 p-4 dark:border-zinc-700 dark:bg-zinc-900/50"
+                >
+                  <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+                    {s.reportingTourBlockTitle}
+                  </h3>
+                  <p className="mt-2 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+                    {s.reportingTourBlockIntro}
+                  </p>
+                  <Link
+                    href="/reporting?tour=replay"
+                    className="mt-4 inline-flex items-center justify-center rounded-lg border border-violet-500/50 bg-violet-500/10 px-4 py-2 text-sm font-medium text-violet-800 transition hover:border-violet-500/75 hover:bg-violet-500/18 dark:border-violet-400/45 dark:bg-violet-600/20 dark:text-violet-100 dark:hover:border-violet-400/60 dark:hover:bg-violet-600/30"
+                  >
+                    {s.reportingTourReplayLinkLabel}
+                  </Link>
+                </div>
+                <Field label={s.localApiPort} description={s.localApiPortDesc}>
+                  <input
+                    type="number"
+                    min={1024}
+                    max={65535}
+                    className={inputClass(formLocked)}
+                    value={form.localApiPort}
+                    onChange={(e) =>
+                      update("localApiPort", Number(e.target.value))
+                    }
+                    disabled={formLocked}
+                  />
+                  <p className="mt-2 text-xs text-amber-200/80">
+                    {s.hintPortRestart}
+                  </p>
+                </Field>
+                <Field
+                  label={s.dashboardWebUrl}
+                  description={s.dashboardWebUrlDesc}
+                >
+                  <input
+                    type="url"
+                    className={inputClass(formLocked)}
+                    value={form.dashboardWebUrl}
+                    onChange={(e) => update("dashboardWebUrl", e.target.value)}
+                    disabled={formLocked}
+                  />
+                  <p className="mt-2 text-xs text-zinc-500">
+                    {s.hintDashboardUrl}
+                  </p>
+                </Field>
+                <div
+                  id="settings-session-duration-alert"
+                  className="scroll-mt-24"
+                >
+                  <Field
+                    label={s.dashboardSessionDurationAlertHours}
+                    description={s.dashboardSessionDurationAlertHoursDesc}
+                  >
+                    <input
+                      type="number"
+                      min={1}
+                      max={8760}
+                      className={inputClass(formLocked)}
+                      value={form.dashboardSessionDurationAlertHours}
+                      onChange={(e) =>
+                        update(
+                          "dashboardSessionDurationAlertHours",
+                          Number(e.target.value),
+                        )
+                      }
+                      disabled={formLocked}
+                      aria-label={s.dashboardSessionDurationAlertHours}
+                    />
+                  </Field>
+                </div>
+              </section>
+
+              <section
+                id="settings-archived-sessions"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  {s.sectionArchivedSessions}
+                </h2>
+                <p className="text-xs leading-relaxed text-zinc-500">
+                  {s.archivedSessionsIntro}
+                </p>
+                <ul className="mt-4 divide-y divide-zinc-800 rounded-lg border border-zinc-800">
+                  {archivedTotal === 0 ? (
+                    <li className="px-3 py-8 text-center text-sm text-zinc-500">
+                      {dt.archivesEmpty}
+                    </li>
+                  ) : (
+                    archivedPageRows.map((sess) => {
+                      const label =
+                        sess.sessionName?.trim() || sess.sessionId.slice(0, 8);
+                      const n = archivedTaskCount(sess);
+                      const busy = archivedRestoreBusyId === sess.sessionId;
+                      return (
+                        <li
+                          key={sess.sessionId}
+                          className="flex items-center justify-between gap-2 px-3 py-2.5 hover:bg-zinc-800/40"
+                        >
+                          <div className="min-w-0 flex-1">
+                            <div className="truncate font-medium text-zinc-200">
+                              {label}
+                            </div>
+                            <div className="text-[0.7rem] text-zinc-500">
+                              {n} {sessionTaskCountNoun(n, dt, lang)}
+                            </div>
+                          </div>
+                          <button
+                            type="button"
+                            disabled={busy || formLocked}
+                            className="shrink-0 rounded-lg border border-violet-600/50 px-3 py-1.5 text-sm text-violet-200 hover:bg-violet-950/40 disabled:cursor-not-allowed disabled:opacity-50"
+                            onClick={() =>
+                              void restoreArchivedSession(sess.sessionId)
+                            }
+                          >
+                            {dt.sessionRestoreBtn}
+                          </button>
+                        </li>
+                      );
+                    })
+                  )}
+                </ul>
+                {archivedTotal > ARCHIVED_SESSIONS_PAGE_SIZE ? (
+                  <nav
+                    className="mt-3 flex flex-wrap items-center justify-between gap-2"
+                    aria-label={s.archivesPaginationNavAria}
+                  >
+                    <button
+                      type="button"
+                      disabled={archivedPage <= 0 || formLocked}
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                      onClick={() =>
+                        setArchivedSessionsPage((p) => Math.max(0, p - 1))
+                      }
+                    >
+                      {s.archivesPaginationPrev}
+                    </button>
+                    <span className="text-xs tabular-nums text-zinc-500">
+                      {s.archivesPaginationRange
+                        .replace(
+                          "{from}",
+                          String(
+                            archivedTotal === 0 ? 0 : archivedSliceStart + 1,
+                          ),
+                        )
+                        .replace("{to}", String(archivedRangeTo))
+                        .replace("{total}", String(archivedTotal))}
+                    </span>
+                    <button
+                      type="button"
+                      disabled={archivedPage >= maxArchivedPage || formLocked}
+                      className="rounded-lg border border-zinc-600 px-3 py-1.5 text-sm text-zinc-300 hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-40"
+                      onClick={() =>
+                        setArchivedSessionsPage((p) =>
+                          Math.min(maxArchivedPage, p + 1),
+                        )
+                      }
+                    >
+                      {s.archivesPaginationNext}
+                    </button>
+                  </nav>
+                ) : archivedTotal > 0 ? (
+                  <p className="mt-2 text-xs tabular-nums text-zinc-500">
+                    {s.archivesPaginationRange
+                      .replace("{from}", String(archivedSliceStart + 1))
+                      .replace("{to}", String(archivedRangeTo))
+                      .replace("{total}", String(archivedTotal))}
+                  </p>
+                ) : null}
+              </section>
+
+              <section
+                id="settings-danger-zone"
+                className={SETTINGS_SECTION_SCROLL}
+              >
+                <h2 className="text-xs font-semibold uppercase tracking-wide text-red-700 dark:text-red-400/95">
+                  {s.sectionDangerZone}
+                </h2>
+                <div className="max-w-xl rounded-xl border border-red-300/90 bg-red-50/80 p-4 dark:border-red-900/55 dark:bg-red-950/30">
+                  <h3 className="text-sm font-semibold text-red-900 dark:text-red-200">
+                    {s.dangerClearHistoryTitle}
+                  </h3>
+                  <p className="mt-2 text-xs leading-relaxed text-red-900/85 dark:text-red-200/85">
+                    {s.dangerClearHistoryBodyIntro}
+                  </p>
+                  <ul className="mt-2 list-disc space-y-1.5 pl-5 text-xs leading-relaxed text-red-900/85 dark:text-red-200/85">
+                    {s.dangerClearHistoryBodyBullets.map((line) => (
+                      <li key={line}>{line}</li>
+                    ))}
+                  </ul>
+                  <p className="mt-2 text-xs leading-relaxed text-red-900/85 dark:text-red-200/85">
+                    {s.dangerClearHistoryBodyAfterList1}
+                  </p>
+                  <p className="mt-2 text-xs leading-relaxed text-red-900/85 dark:text-red-200/85">
+                    {s.dangerClearHistoryBodyAfterList2}
+                  </p>
+                  <button
+                    type="button"
+                    className="mt-4 rounded-lg border border-red-600/80 bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500 dark:border-red-500 dark:bg-red-800/90 dark:hover:bg-red-700"
+                    onClick={() => setClearHistoryConfirmOpen(true)}
+                  >
+                    {s.dangerClearHistoryButton}
+                  </button>
+                </div>
+              </section>
+            </div>
+          </div>
+        ) : null}
+      </main>
+      <DashboardAlertModal
+        open={settingsDialogAlert !== null}
+        message={settingsDialogAlert ?? ""}
+        okLabel={s.dialogOkBtn}
+        onClose={() => setSettingsDialogAlert(null)}
+      />
+      <DashboardConfirmModal
+        open={mongoResyncConfirmOpen}
+        message={s.mongoResyncConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        onCancel={() => setMongoResyncConfirmOpen(false)}
+        onConfirm={() => void executeMongoResync()}
+      />
+      <DashboardConfirmModal
+        open={clearHistoryConfirmOpen}
+        title={s.dangerClearHistoryTitle}
+        message={s.dangerClearHistoryConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        confirmVariant="danger"
+        extra={dangerClearHistoryModalExtra}
+        pending={clearHistoryBusy}
+        typeToConfirm={{
+          expected: s.dangerClearHistoryConfirmPhrase,
+          instruction: s.dangerClearHistoryTypeInstruction.replace(
+            "{phrase}",
+            s.dangerClearHistoryConfirmPhrase,
+          ),
+          label: s.dangerClearHistoryTypeFieldLabel,
+          inputAriaLabel: s.dangerClearHistoryTypeInputAria,
+        }}
+        onCancel={() => {
+          if (!clearHistoryBusy) {
+            setClearHistoryConfirmOpen(false);
+          }
+        }}
+        onConfirm={() => {
+          void clearHistory();
+        }}
+      />
+      <DashboardConfirmModal
+        open={resetDefaultsConfirmOpen}
+        title={s.resetToDefaults}
+        message={s.resetToDefaultsConfirm}
+        cancelLabel={s.dialogCancelBtn}
+        confirmLabel={s.dialogConfirmBtn}
+        onCancel={() => {
+          if (!resetDefaultsBusy) {
+            setResetDefaultsConfirmOpen(false);
+          }
+        }}
+        onConfirm={() => {
+          setResetDefaultsConfirmOpen(false);
+          void applyResetToDefaults();
+        }}
+      />
+      <ScrollToTopFab ariaLabel={s.scrollToTopAria} />
+      <SettingsTour
+        open={settingsTourOpen}
+        onOpenChange={setSettingsTourOpen}
+        dt={dt}
+      />
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-zinc-100 px-6 py-10 text-sm text-zinc-500 dark:bg-zinc-900">
+          Kronosys…
+        </div>
+      }
+    >
+      <SettingsPageContent />
+    </Suspense>
+  );
+}