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

package/components/dashboard/AppShellCommandCenterPlaceholder.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+/**
+ * Réserve la même largeur que {@link DashboardCommandCenter} lorsque la palette n’est pas
+ * disponible sur une route (navigation stable entre pages).
+ */
+export function AppShellCommandCenterPlaceholder() {
+  return (
+    <div
+      className="invisible pointer-events-none flex shrink-0 items-center gap-1.5"
+      aria-hidden
+    >
+      <div className="inline-flex h-10 w-[9.5rem] max-w-[min(42vw,11rem)] shrink-0 items-center rounded-lg px-2 sm:w-44 sm:max-w-none sm:px-2.5" />
+      <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg" />
+    </div>
+  );
+}

package/components/dashboard/AppShellHeaderSessionMeta.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { Clock, FolderOpen, Globe, User } from "lucide-react";
+import { useMemo } from "react";
+import type {
+  KronosysUpdatePayload,
+  WorkspaceCodeSnapshotPayload,
+} from "@/lib/kronosysApi";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { readDashboardUse24HourClockFromCfg } from "@/lib/dashboardClockFormat";
+import { readDashboardTimeZoneFromCfg } from "@/lib/dashboardTimeZone";
+import { workspaceFolderPathStrings } from "@/lib/legacyEditorPayloadKeys";
+import { showWorkspaceFoldersEmptyMessage } from "@/lib/usageProfile";
+import { HeaderIntegrationBadges } from "@/components/dashboard/HeaderIntegrationBadges";
+
+export function AppShellHeaderSessionMeta({
+  payload,
+  dt,
+  domId,
+}: Readonly<{
+  payload: KronosysUpdatePayload | null | undefined;
+  dt: DashboardStrings;
+  /** Ancre optionnelle (ex. visite guidée du tableau de bord). */
+  domId?: string;
+}>) {
+  const cfg = payload?.cfg as Record<string, unknown> | undefined;
+
+  const dashboardDisplayTimeZone = useMemo(
+    () => readDashboardTimeZoneFromCfg(cfg),
+    [cfg],
+  );
+  const dashboardUse24HourClock = useMemo(
+    () => readDashboardUse24HourClockFromCfg(cfg),
+    [cfg],
+  );
+
+  const resolvedWorkspaceRoots = useMemo(() => {
+    const top = workspaceFolderPathStrings(payload);
+    if (top.length > 0) {
+      return top;
+    }
+    const fromCfg = workspaceFolderPathStrings(cfg);
+    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, cfg]);
+
+  const gitIdentity = payload?.gitIdentity as
+    | {
+        gitUserName?: unknown;
+        gitUserEmail?: unknown;
+        gitAccountLogin?: unknown;
+      }
+    | undefined;
+  const gitUserName =
+    typeof gitIdentity?.gitUserName === "string"
+      ? gitIdentity.gitUserName.trim()
+      : "";
+  const gitUserEmail =
+    typeof gitIdentity?.gitUserEmail === "string"
+      ? gitIdentity.gitUserEmail.trim()
+      : "";
+  const gitAccountLogin =
+    typeof gitIdentity?.gitAccountLogin === "string"
+      ? gitIdentity.gitAccountLogin.trim()
+      : "";
+
+  const gitContextLine = [
+    gitUserName || null,
+    gitUserEmail || null,
+    gitAccountLogin || null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  const showWorkspaceFoldersEmpty = showWorkspaceFoldersEmptyMessage(
+    payload,
+    resolvedWorkspaceRoots.length,
+  );
+
+  const mongoEnabled = cfg?.mongodbEnabled === true;
+  const mongoRemoteStatus = payload?.remoteStatus as
+    | "connected"
+    | "failed"
+    | "pending"
+    | undefined;
+  const mongoConnected = mongoEnabled && mongoRemoteStatus === "connected";
+  const localPersistenceDriver =
+    typeof cfg?.localPersistenceDriver === "string" &&
+    cfg.localPersistenceDriver.trim().toLowerCase() === "json"
+      ? "json"
+      : "sqlite";
+
+  const showHeaderUserRow =
+    Boolean(payload) &&
+    Boolean(
+      gitContextLine ||
+        showWorkspaceFoldersEmpty ||
+        resolvedWorkspaceRoots.length > 0 ||
+        cfg,
+    );
+
+  const headerClockShort = dashboardUse24HourClock
+    ? dt.headerClockFormat24Short
+    : dt.headerClockFormat12Short;
+  const headerDisplayPrefsTitle = dt.headerDisplayRegionTitle
+    .replace("{timeZone}", dashboardDisplayTimeZone)
+    .replace("{clock}", headerClockShort);
+
+  if (!showHeaderUserRow) {
+    return null;
+  }
+
+  return (
+    <div
+      id={domId}
+      className="min-w-0 shrink-0 sm:max-w-[min(100%,36rem)] sm:justify-self-end"
+    >
+      <div className="flex min-w-0 flex-col items-stretch gap-1.5 text-xs text-zinc-600 sm:items-end sm:text-right dark:text-zinc-400">
+        {gitContextLine ? (
+          <p
+            className="flex max-w-full items-center gap-x-2 sm:justify-end"
+            title={gitContextLine}
+          >
+            <User
+              className="shrink-0 text-zinc-500 dark:text-zinc-500"
+              size={14}
+              aria-hidden
+            />
+            <span className="min-w-0 max-w-[min(100%,48rem)] truncate font-medium text-zinc-800 dark:text-zinc-300">
+              {gitContextLine}
+            </span>
+          </p>
+        ) : null}
+        <p
+          className="flex max-w-full flex-wrap items-center gap-x-1.5 sm:justify-end"
+          title={headerDisplayPrefsTitle}
+        >
+          <Globe
+            className="shrink-0 text-zinc-500 dark:text-zinc-500"
+            size={14}
+            aria-hidden
+          />
+          <span className="min-w-0 max-w-[min(100%,48rem)] break-all font-mono text-[0.7rem] font-medium text-zinc-800 dark:text-zinc-300">
+            {dashboardDisplayTimeZone}
+          </span>
+          <span className="text-zinc-400/70 dark:text-zinc-600" aria-hidden>
+            ·
+          </span>
+          <Clock
+            className="shrink-0 text-zinc-500 dark:text-zinc-500"
+            size={14}
+            aria-hidden
+          />
+          <span className="shrink-0 font-medium text-zinc-800 dark:text-zinc-300">
+            {headerClockShort}
+          </span>
+        </p>
+        {showWorkspaceFoldersEmpty ? (
+          <p className="flex max-w-full items-start gap-x-2 sm:justify-end">
+            <FolderOpen
+              className="mt-0.5 shrink-0 text-zinc-500 dark:text-zinc-500"
+              size={14}
+              aria-hidden
+            />
+            <span className="min-w-0 max-w-[min(100%,48rem)] break-words font-medium text-zinc-800 sm:text-right dark:text-zinc-300">
+              {dt.workspaceFoldersEmpty ?? "—"}
+            </span>
+          </p>
+        ) : resolvedWorkspaceRoots.length > 0 ? (
+          resolvedWorkspaceRoots.map((p) => (
+            <p
+              key={p}
+              className="flex max-w-full items-start gap-x-2 sm:justify-end"
+            >
+              <FolderOpen
+                className="mt-0.5 shrink-0 text-zinc-500 dark:text-zinc-500"
+                size={14}
+                aria-hidden
+              />
+              <span className="min-w-0 max-w-[min(100%,48rem)] break-all font-medium text-zinc-800 sm:text-right dark:text-zinc-300">
+                {p}
+              </span>
+            </p>
+          ))
+        ) : null}
+        {cfg ? (
+          <div className="flex w-full min-w-0 sm:justify-end">
+            <HeaderIntegrationBadges
+              t={dt}
+              localPersistenceDriver={localPersistenceDriver}
+              mongoConnected={mongoConnected}
+              mongoEnabled={mongoEnabled}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/components/dashboard/AppShellHeaderWallClock.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Clock } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import type { DashboardStrings, Lang } from "@/lib/dashboardCopy";
+import { formatAppShellWallClock } from "@/lib/formatAppShellWallClock";
+
+export function AppShellHeaderWallClock({
+  lang,
+  dt,
+}: Readonly<{
+  lang: Lang;
+  dt: DashboardStrings;
+}>) {
+  const { payload } = useKronosysPayload();
+  const cfg = payload?.cfg as Record<string, unknown> | undefined;
+  const [now, setNow] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setNow(new Date());
+    const id = globalThis.setInterval(() => setNow(new Date()), 1000);
+    return () => globalThis.clearInterval(id);
+  }, []);
+
+  const { display, ariaDatetime, timeZone } = useMemo(
+    () => formatAppShellWallClock(now ?? new Date(0), cfg, lang),
+    [now, cfg, lang],
+  );
+
+  const aria = dt.headerWallClockAriaLabel
+    .replace("{timeZone}", timeZone)
+    .replace("{datetime}", ariaDatetime);
+
+  return (
+    <time
+      suppressHydrationWarning
+      dateTime={now ? now.toISOString() : ""}
+      className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-lg border border-zinc-300 bg-white px-2.5 font-mono text-sm tabular-nums text-zinc-800 shadow-sm dark:border-zinc-600 dark:bg-zinc-800/90 dark:text-zinc-100"
+      title={aria}
+      aria-label={aria}
+    >
+      <Clock
+        size={16}
+        strokeWidth={2}
+        className="shrink-0 text-zinc-500 dark:text-zinc-400"
+        aria-hidden
+      />
+      <span className="whitespace-nowrap" suppressHydrationWarning>
+        {now ? display : "--:--:--"}
+      </span>
+    </time>
+  );
+}

package/components/dashboard/AppShellLiveSessionDrawer.tsx

@@ -3,22 +3,44 @@
 import Link from "next/link";
 import { useLayoutEffect, useMemo, useState } from "react";
 import { usePathname } from "next/navigation";
-import { Check, ChevronLeft, ChevronRight, Circle, LayoutDashboard, Timer } from "lucide-react";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+  LayoutDashboard,
+  Timer,
+} from "lucide-react";
 import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
 import { useSmoothStopwatchDisplayMs } from "@/components/dashboard/useSmoothStopwatchMs";
 import { useKronoFocusLiveSeconds } from "@/components/dashboard/useKronoFocusLiveSeconds";
-import { dashboardStrings, type DashboardStrings, type Lang } from "@/lib/dashboardCopy";
-import { formatStopwatchMs, formatWallDurationMs, taskTitleForDisplay } from "@/lib/taskParsing";
+import {
+  dashboardStrings,
+  type DashboardStrings,
+  type Lang,
+} from "@/lib/dashboardCopy";
+import {
+  formatStopwatchMs,
+  formatWallDurationMs,
+  taskTitleForDisplay,
+} from "@/lib/taskParsing";
 import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+import { isTaskDisplayPlanned } from "@/lib/temporalDisplayPlanned";
 
 type LiveTask = {
   id?: string;
   name?: string;
   isDone?: boolean;
   manualTaskTimerPaused?: boolean;
+  startTime?: string;
   activeSubtaskTimerId?: string;
   durationMs?: number;
-  subtasks?: Array<{ id?: string; title?: string; done?: boolean; durationMs?: number }>;
+  subtasks?: Array<{
+    id?: string;
+    title?: string;
+    done?: boolean;
+    durationMs?: number;
+  }>;
 };
 
 type LiveShape = {
@@ -41,7 +63,10 @@ type LiveShape = {
   };
 };
 
-function kfPhaseLabel(dt: DashboardStrings, mode: "work" | "break" | "longBreak" | undefined): string {
+function kfPhaseLabel(
+  dt: DashboardStrings,
+  mode: "work" | "break" | "longBreak" | undefined,
+): string {
   if (mode === "break") {
     return dt.breakMode;
   }
@@ -57,7 +82,9 @@ function kfCountdownHMS(totalSec: number): string {
   const h = Math.floor(s / 3600);
   const m = Math.floor((s % 3600) / 60);
   const sec = s % 60;
-  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(
+    sec,
+  ).padStart(2, "0")}`;
 }
 
 function truncateDrawerLabel(s: string, max: number): string {
@@ -76,9 +103,15 @@ function runningTasksFromLive(live: LiveShape | undefined): LiveTask[] {
     Array.isArray(live.activeTasks) && live.activeTasks.length > 0
       ? live.activeTasks
       : live.activeTask
-        ? [live.activeTask]
-        : [];
-  return raw.filter((t) => t && !t.isDone && !t.manualTaskTimerPaused);
+      ? [live.activeTask]
+      : [];
+  return raw.filter(
+    (t) =>
+      t &&
+      !t.isDone &&
+      !t.manualTaskTimerPaused &&
+      !isTaskDisplayPlanned(t, Date.now()),
+  );
 }
 
 function subtaskTitleFor(task: LiveTask, subId: string): string | undefined {
@@ -108,22 +141,38 @@ function DrawerSubtaskRow({
     <li className="flex min-w-0 items-baseline justify-between gap-1.5 py-0.5">
       <span className="flex min-w-0 items-center gap-1">
         {done ? (
-          <Check className="size-3 shrink-0 text-emerald-600 dark:text-emerald-400" strokeWidth={2.5} aria-hidden />
+          <Check
+            className="size-3 shrink-0 text-emerald-600 dark:text-emerald-400"
+            strokeWidth={2.5}
+            aria-hidden
+          />
         ) : (
           <Circle
-            className={`size-2.5 shrink-0 ${isTracking ? "text-emerald-600 dark:text-emerald-400" : "text-zinc-400 dark:text-zinc-500"}`}
+            className={`size-2.5 shrink-0 ${
+              isTracking
+                ? "text-emerald-600 dark:text-emerald-400"
+                : "text-zinc-400 dark:text-zinc-500"
+            }`}
             strokeWidth={2}
             aria-hidden
           />
         )}
         <span
-          className={`min-w-0 truncate ${done ? "text-zinc-500 line-through dark:text-zinc-500" : "text-zinc-700 dark:text-zinc-300"}`}
+          className={`min-w-0 truncate ${
+            done
+              ? "text-zinc-500 line-through dark:text-zinc-500"
+              : "text-zinc-700 dark:text-zinc-300"
+          }`}
         >
           {label || "—"}
         </span>
       </span>
       <span
-        className={`shrink-0 font-mono tabular-nums tracking-tight ${isTracking ? "font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-500 dark:text-zinc-400"}`}
+        className={`shrink-0 font-mono tabular-nums tracking-tight ${
+          isTracking
+            ? "font-semibold text-emerald-700 dark:text-emerald-400"
+            : "text-zinc-500 dark:text-zinc-400"
+        }`}
       >
         {timeStr}
       </span>
@@ -141,7 +190,9 @@ function DrawerRunningTaskRow({
   subtaskTrackingLabel: string;
   dashboardT: DashboardStrings;
 }>) {
-  const title = taskTitleForDisplay(typeof task.name === "string" ? task.name : "");
+  const title = taskTitleForDisplay(
+    typeof task.name === "string" ? task.name : "",
+  );
   const subId = String(task.activeSubtaskTimerId ?? "").trim();
   const subTitle = subId ? subtaskTitleFor(task, subId) : undefined;
   const baseMs = Math.max(0, Math.floor(Number(task.durationMs) || 0));
@@ -155,9 +206,15 @@ function DrawerRunningTaskRow({
   return (
     <li className="min-w-0 text-xs leading-snug">
       <div className="flex min-w-0 items-baseline justify-between gap-2">
-        <span className="min-w-0 truncate font-medium text-zinc-800 dark:text-zinc-200">{title}</span>
+        <span className="min-w-0 truncate font-medium text-zinc-800 dark:text-zinc-200">
+          {title}
+        </span>
         <span
-          className={`shrink-0 font-mono text-xs tabular-nums tracking-tight ${smoothMain ? "font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-600 dark:text-zinc-400"}`}
+          className={`shrink-0 font-mono text-xs tabular-nums tracking-tight ${
+            smoothMain
+              ? "font-semibold text-emerald-700 dark:text-emerald-400"
+              : "text-zinc-600 dark:text-zinc-400"
+          }`}
           aria-live={smoothMain ? "polite" : "off"}
         >
           {timeStr}
@@ -171,7 +228,11 @@ function DrawerRunningTaskRow({
           {subs.map((st) => {
             const sid = String(st.id ?? "").trim();
             return (
-              <DrawerSubtaskRow key={sid || String(st.title)} sub={st} isTracking={subId !== "" && subId === sid} />
+              <DrawerSubtaskRow
+                key={sid || String(st.title)}
+                sub={st}
+                isTracking={subId !== "" && subId === sid}
+              />
             );
           })}
         </ul>
@@ -194,33 +255,40 @@ export function AppShellLiveSessionDrawer() {
   const lang: Lang = live?.language === "fr" ? "fr" : "en";
   const dt = dashboardStrings(lang);
 
-  const liveSid = typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
+  const liveSid =
+    typeof live?.sessionId === "string" ? live.sessionId.trim() : "";
   const hasLiveSession = liveSid !== "" && live?.archived !== true;
   const show = !onDashboardHome && Boolean(payload) && hasLiveSession;
 
   const sessionWallMinutes = live?.sessionDurationMinutes ?? 0;
   const wallClockMsBase = useMemo(
     () => Math.max(0, Math.floor(sessionWallMinutes * 60_000)),
-    [sessionWallMinutes]
+    [sessionWallMinutes],
   );
-  const sessionEnded = typeof live?.endAt === "string" && live.endAt.trim() !== "";
+  const sessionEnded =
+    typeof live?.endAt === "string" && live.endAt.trim() !== "";
   const smoothSessionWall =
     liveSid !== "" &&
     live?.archived !== true &&
     !sessionEnded &&
     live?.isPaused !== true;
-  const sessionWallDisplayMs = useSmoothStopwatchDisplayMs(wallClockMsBase, smoothSessionWall);
+  const sessionWallDisplayMs = useSmoothStopwatchDisplayMs(
+    wallClockMsBase,
+    smoothSessionWall,
+  );
 
   const runningTasks = useMemo(() => runningTasksFromLive(live), [live]);
   const kf = live?.kronoFocus;
   const kfSecs = useKronoFocusLiveSeconds(
     kf?.timeLeftSeconds ?? 0,
     kf?.status ?? "idle",
-    kf?.kronoFocusDeadlineAtMs
+    kf?.kronoFocusDeadlineAtMs,
   );
   const kfActive = kf?.status === "running" || kf?.status === "paused";
   const kfLinkedName =
-    typeof kf?.linkedTaskName === "string" && kf.linkedTaskName.trim() !== "" ? kf.linkedTaskName.trim() : "";
+    typeof kf?.linkedTaskName === "string" && kf.linkedTaskName.trim() !== ""
+      ? kf.linkedTaskName.trim()
+      : "";
   const hasActivity =
     runningTasks.length > 0 || live?.isPaused === true || kfActive;
 
@@ -268,14 +336,32 @@ export function AppShellLiveSessionDrawer() {
           type="button"
           className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800/80"
           onClick={() => setCollapsed((c) => !c)}
-          title={collapsed ? dt.appShellLiveDrawerExpand : dt.appShellLiveDrawerCollapse}
+          title={
+            collapsed
+              ? dt.appShellLiveDrawerExpand
+              : dt.appShellLiveDrawerCollapse
+          }
           aria-expanded={collapsed === false}
-          aria-label={collapsed ? dt.appShellLiveDrawerExpand : dt.appShellLiveDrawerCollapse}
+          aria-label={
+            collapsed
+              ? dt.appShellLiveDrawerExpand
+              : dt.appShellLiveDrawerCollapse
+          }
         >
           {collapsed ? (
-            <ChevronLeft size={18} strokeWidth={2} className="shrink-0" aria-hidden />
+            <ChevronLeft
+              size={18}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
           ) : (
-            <ChevronRight size={18} strokeWidth={2} className="shrink-0" aria-hidden />
+            <ChevronRight
+              size={18}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
           )}
         </button>
         {!collapsed ? (
@@ -296,7 +382,12 @@ export function AppShellLiveSessionDrawer() {
           className="flex min-h-0 flex-1 flex-col items-center gap-1 border-t border-zinc-200 px-0.5 py-2 dark:border-zinc-700"
           aria-label={dt.kronoFocusTitle}
         >
-          <Timer className="shrink-0 text-violet-600 dark:text-violet-400" size={16} strokeWidth={2} aria-hidden />
+          <Timer
+            className="shrink-0 text-violet-600 dark:text-violet-400"
+            size={16}
+            strokeWidth={2}
+            aria-hidden
+          />
           <span
             className="w-full max-w-[2.75rem] break-all text-center font-mono text-[0.58rem] font-semibold leading-tight tracking-tight text-violet-800 tabular-nums dark:text-violet-200"
             aria-live="polite"
@@ -332,27 +423,41 @@ export function AppShellLiveSessionDrawer() {
               </p>
               {kfLinkedName ? (
                 <p className="mt-1.5 min-w-0 text-[0.65rem] leading-snug text-zinc-600 dark:text-zinc-400">
-                  <span className="font-medium text-zinc-500 dark:text-zinc-500">{dt.kronoFocusLinkedTaskIntro}</span>{" "}
-                  <span className="break-words">{truncateDrawerLabel(kfLinkedName, 120)}</span>
+                  <span className="font-medium text-zinc-500 dark:text-zinc-500">
+                    {dt.kronoFocusLinkedTaskIntro}
+                  </span>{" "}
+                  <span className="break-words">
+                    {truncateDrawerLabel(kfLinkedName, 120)}
+                  </span>
                 </p>
               ) : null}
             </section>
           ) : null}
 
           <div className="min-w-0">
-            <p className="truncate font-medium text-zinc-900 dark:text-zinc-50">{sessionLabel}</p>
+            <p className="truncate font-medium text-zinc-900 dark:text-zinc-50">
+              {sessionLabel}
+            </p>
             <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">
-              <span className="font-medium text-zinc-500 dark:text-zinc-500">{dt.appShellLiveDrawerWallClock}</span>
+              <span className="font-medium text-zinc-500 dark:text-zinc-500">
+                {dt.appShellLiveDrawerWallClock}
+              </span>
               {" · "}
               <span
-                className={`tabular-nums ${smoothSessionWall ? "font-mono font-semibold text-emerald-700 dark:text-emerald-400" : "text-zinc-600 dark:text-zinc-400"}`}
+                className={`tabular-nums ${
+                  smoothSessionWall
+                    ? "font-mono font-semibold text-emerald-700 dark:text-emerald-400"
+                    : "text-zinc-600 dark:text-zinc-400"
+                }`}
                 aria-live={smoothSessionWall ? "polite" : "off"}
               >
                 {wallLabel}
               </span>
             </p>
             {live?.isPaused === true ? (
-              <p className="mt-1 text-xs font-medium text-amber-700 dark:text-amber-300">{dt.appShellLiveDrawerSessionPaused}</p>
+              <p className="mt-1 text-xs font-medium text-amber-700 dark:text-amber-300">
+                {dt.appShellLiveDrawerSessionPaused}
+              </p>
             ) : null}
           </div>
 
@@ -361,17 +466,23 @@ export function AppShellLiveSessionDrawer() {
               {dt.appShellLiveDrawerTasksHeading}
             </p>
             {runningTasks.length === 0 ? (
-              <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-500">{dt.appShellLiveDrawerNoRunningTasks}</p>
+              <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-500">
+                {dt.appShellLiveDrawerNoRunningTasks}
+              </p>
             ) : (
               <ul className="mt-1.5 space-y-2">
                 {runningTasks.map((t) => {
                   const id = typeof t.id === "string" ? t.id : "";
-                  const title = taskTitleForDisplay(typeof t.name === "string" ? t.name : "");
+                  const title = taskTitleForDisplay(
+                    typeof t.name === "string" ? t.name : "",
+                  );
                   return (
                     <DrawerRunningTaskRow
                       key={id || title}
                       task={t}
-                      subtaskTrackingLabel={dt.appShellLiveDrawerSubtaskTracking}
+                      subtaskTrackingLabel={
+                        dt.appShellLiveDrawerSubtaskTracking
+                      }
                       dashboardT={dt}
                     />
                   );
@@ -384,7 +495,12 @@ export function AppShellLiveSessionDrawer() {
             href={dashHref}
             className="mt-auto inline-flex items-center justify-center gap-2 rounded-lg border border-violet-400/60 bg-violet-50 px-3 py-2 text-xs font-medium text-violet-950 hover:bg-violet-100/90 dark:border-violet-600/50 dark:bg-violet-950/40 dark:text-violet-100 dark:hover:bg-violet-900/50"
           >
-            <LayoutDashboard size={16} strokeWidth={2} className="shrink-0" aria-hidden />
+            <LayoutDashboard
+              size={16}
+              strokeWidth={2}
+              className="shrink-0"
+              aria-hidden
+            />
             {dt.appShellLiveDrawerOpenDashboard}
           </Link>
         </div>