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

package/components/dashboard/PlannedTaskBoundaryConflictWatcher.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import { useDashboardToast } from "@/components/dashboard/DashboardToastProvider";
+import { DashboardTriActionModal } from "@/components/dashboard/DashboardSimpleModal";
+import { postKronosysAction } from "@/lib/kronosysApi";
+import {
+  readConcurrentTaskStartPreference,
+  writeConcurrentTaskStartPreference,
+  type ConcurrentTaskStartPreference,
+} from "@/lib/concurrentTaskStartPreference";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { readStoredDashboardLang } from "@/lib/dashboardLangStorage";
+import {
+  isConcurrentTaskStartConflictModalOpen,
+  setPlannedBoundaryConflictModalOpen,
+} from "@/lib/kronosysDashboardModalGates";
+import { dispatchPlannedBoundaryAttention } from "@/lib/plannedBoundaryAttention";
+import { detectPlannedBoundaryDisplayConflict } from "@/lib/plannedBoundaryConflict";
+import { isTaskDisplayPlanned } from "@/lib/temporalDisplayPlanned";
+
+type TaskRow = {
+  id: string;
+  isDone?: boolean;
+  manualTaskTimerPaused?: boolean;
+  startTime?: string;
+  endTime?: string;
+};
+
+type LiveSessionShape = {
+  sessionId?: string;
+  endAt?: string | null;
+  isPaused?: boolean;
+  language?: string;
+  globalPauseContext?: unknown;
+  activeTasks?: TaskRow[];
+  activeTask?: TaskRow | null;
+  tasks?: TaskRow[];
+};
+
+function runningTasksFromSession(
+  session: LiveSessionShape | null | undefined,
+): TaskRow[] {
+  if (!session) {
+    return [];
+  }
+  const raw =
+    Array.isArray(session.activeTasks) && session.activeTasks.length > 0
+      ? session.activeTasks
+      : session.activeTask
+      ? [session.activeTask]
+      : [];
+  return raw.filter((t) => t && !t.isDone && !t.manualTaskTimerPaused);
+}
+
+function displayRunningIds(
+  session: LiveSessionShape | null | undefined,
+  nowMs: number,
+): Set<string> {
+  return new Set(
+    runningTasksFromSession(session)
+      .filter((t) => !isTaskDisplayPlanned(t, nowMs))
+      .map((t) => String(t.id)),
+  );
+}
+
+function shouldDispatchAttention(pathname: string): boolean {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const offDashboard = pathname !== "/" && pathname !== "";
+  const hidden = document.visibilityState === "hidden";
+  return offDashboard || hidden;
+}
+
+export function PlannedTaskBoundaryConflictWatcher() {
+  const { payload, refresh, getLatestPayload } = useKronosysPayload();
+  const { pushToast } = useDashboardToast();
+  const pathname = usePathname() ?? "";
+  const [bucketNowMs, setBucketNowMs] = useState(() => Date.now());
+  const [boundaryModalOpen, setBoundaryModalOpen] = useState(false);
+  const [rememberBoundaryChoice, setRememberBoundaryChoice] = useState(false);
+  const rememberBoundaryRef = useRef(false);
+  const prevDisplayRunningIdsRef = useRef<Set<string> | null>(null);
+  const boundaryTargetsRef = useRef<string[]>([]);
+
+  useEffect(() => {
+    rememberBoundaryRef.current = rememberBoundaryChoice;
+  }, [rememberBoundaryChoice]);
+
+  useEffect(() => {
+    const id = globalThis.setInterval(() => {
+      setBucketNowMs(Date.now());
+    }, 1000);
+    return () => globalThis.clearInterval(id);
+  }, []);
+
+  const live = payload?.current as LiveSessionShape | undefined;
+  const storedLang = readStoredDashboardLang();
+  const serverLang: Lang = live?.language === "fr" ? "fr" : "en";
+  const lang: Lang = storedLang ?? serverLang;
+  const t = dashboardStrings(lang);
+
+  const syncPrevFromPayload = useCallback(() => {
+    const p = getLatestPayload();
+    const sess = p?.current as LiveSessionShape | undefined;
+    prevDisplayRunningIdsRef.current = displayRunningIds(sess, Date.now());
+  }, [getLatestPayload]);
+
+  const resolveBoundaryConflict = useCallback(
+    async (mode: ConcurrentTaskStartPreference, persistPreference: boolean) => {
+      if (persistPreference) {
+        writeConcurrentTaskStartPreference(mode);
+      }
+      const targets = boundaryTargetsRef.current;
+      setBoundaryModalOpen(false);
+      setRememberBoundaryChoice(false);
+      try {
+        if (mode !== "parallel") {
+          for (const taskId of targets) {
+            if (mode === "pause") {
+              await postKronosysAction({
+                type: "setTaskTimerPaused",
+                taskId,
+                paused: true,
+              });
+            } else {
+              await postKronosysAction({
+                type: "finishTask",
+                taskId,
+              });
+            }
+          }
+        }
+        await refresh();
+      } catch (error: unknown) {
+        pushToast(
+          typeof error === "string"
+            ? error
+            : error instanceof Error
+            ? error.message
+            : t.taskPlannedBoundaryConflictResolveError,
+        );
+      } finally {
+        syncPrevFromPayload();
+      }
+    },
+    [
+      pushToast,
+      refresh,
+      syncPrevFromPayload,
+      t.taskPlannedBoundaryConflictResolveError,
+    ],
+  );
+
+  const cancelBoundaryModal = useCallback(() => {
+    setBoundaryModalOpen(false);
+    setRememberBoundaryChoice(false);
+    syncPrevFromPayload();
+  }, [syncPrevFromPayload]);
+
+  useEffect(() => {
+    setPlannedBoundaryConflictModalOpen(boundaryModalOpen);
+    return () => setPlannedBoundaryConflictModalOpen(false);
+  }, [boundaryModalOpen]);
+
+  useEffect(() => {
+    if (boundaryModalOpen) {
+      return;
+    }
+    if (isConcurrentTaskStartConflictModalOpen()) {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+    if (!live || typeof live.sessionId !== "string" || !live.sessionId.trim()) {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+    if (live.endAt && String(live.endAt).trim() !== "") {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+    if (live.isPaused === true) {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+    if (live.globalPauseContext) {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+    if (payload?.inspectingSessionId) {
+      prevDisplayRunningIdsRef.current = displayRunningIds(live, bucketNowMs);
+      return;
+    }
+
+    const curr = displayRunningIds(live, bucketNowMs);
+    const prev = prevDisplayRunningIdsRef.current;
+    const { conflict, previousRunnerIds } =
+      detectPlannedBoundaryDisplayConflict(prev, curr);
+
+    if (!conflict) {
+      prevDisplayRunningIdsRef.current = curr;
+      return;
+    }
+
+    boundaryTargetsRef.current = previousRunnerIds;
+    const pref = readConcurrentTaskStartPreference();
+    if (pref === "pause") {
+      prevDisplayRunningIdsRef.current = curr;
+      void resolveBoundaryConflict("pause", false);
+      if (shouldDispatchAttention(pathname)) {
+        dispatchPlannedBoundaryAttention();
+      }
+      return;
+    }
+    if (pref === "finish") {
+      prevDisplayRunningIdsRef.current = curr;
+      void resolveBoundaryConflict("finish", false);
+      if (shouldDispatchAttention(pathname)) {
+        dispatchPlannedBoundaryAttention();
+      }
+      return;
+    }
+    if (pref === "parallel") {
+      prevDisplayRunningIdsRef.current = curr;
+      if (shouldDispatchAttention(pathname)) {
+        dispatchPlannedBoundaryAttention();
+      }
+      return;
+    }
+
+    setRememberBoundaryChoice(false);
+    setBoundaryModalOpen(true);
+    if (shouldDispatchAttention(pathname)) {
+      dispatchPlannedBoundaryAttention();
+    }
+  }, [
+    boundaryModalOpen,
+    bucketNowMs,
+    live,
+    payload?.inspectingSessionId,
+    pathname,
+    resolveBoundaryConflict,
+  ]);
+
+  return (
+    <DashboardTriActionModal
+      open={boundaryModalOpen}
+      title={t.taskPlannedBoundaryConflictTitle}
+      message={t.taskPlannedBoundaryConflictMessage}
+      dismissLabel={t.dialogCancelBtn}
+      tertiaryLabel={t.taskConcurrentTrackingConflictParallelBtn}
+      secondaryLabel={t.taskConcurrentTrackingConflictPauseBtn}
+      primaryLabel={t.taskConcurrentTrackingConflictFinishBtn}
+      primaryVariant="danger"
+      dismissCheckbox={{
+        label: t.taskConcurrentTrackingDontShowAgain,
+        checked: rememberBoundaryChoice,
+        onChange: setRememberBoundaryChoice,
+      }}
+      onDismiss={cancelBoundaryModal}
+      onTertiary={() =>
+        void resolveBoundaryConflict("parallel", rememberBoundaryRef.current)
+      }
+      onSecondary={() =>
+        void resolveBoundaryConflict("pause", rememberBoundaryRef.current)
+      }
+      onPrimary={() =>
+        void resolveBoundaryConflict("finish", rememberBoundaryRef.current)
+      }
+    />
+  );
+}

package/components/dashboard/ReportingTour.tsx

@@ -10,6 +10,7 @@ import {
   type CSSProperties,
 } from "react";
 import { createPortal } from "react-dom";
+import { postKronosysAction } from "@/lib/kronosysApi";
 import { markReportingTourCompleted } from "@/lib/dashboardTourStorage";
 import type { DashboardStrings } from "@/lib/dashboardCopy";
 
@@ -81,11 +82,14 @@ export function ReportingTour({
     if (hasReportingChartData) {
       s.push(
         { title: dt.reportingTourStep4Title, body: dt.reportingTourStep4Body },
-        { title: dt.reportingTourStep5Title, body: dt.reportingTourStep5Body }
+        { title: dt.reportingTourStep5Title, body: dt.reportingTourStep5Body },
       );
       sel.push(CHART_SELECTOR, TAG_TIME_SELECTOR);
     }
-    s.push({ title: dt.reportingTourStep6Title, body: dt.reportingTourStep6Body });
+    s.push({
+      title: dt.reportingTourStep6Title,
+      body: dt.reportingTourStep6Body,
+    });
     sel.push(TOC_LAYOUT_SELECTOR);
     return { selectors: sel, steps: s };
   }, [dt, hasReportingChartData]);
@@ -101,12 +105,22 @@ export function ReportingTour({
     }
   }, [open]);
 
-  const finish = useCallback(() => {
-    markReportingTourCompleted();
-    onOpenChange(false);
-  }, [onOpenChange]);
+  const finish = useCallback(
+    (reason: "skip" | "done" | "escape") => {
+      void postKronosysAction({
+        type: "tourInteraction",
+        tour: "reporting_spotlight",
+        action: reason,
+        stepIndex: step,
+        stepTotal: total,
+      }).catch(() => undefined);
+      markReportingTourCompleted();
+      onOpenChange(false);
+    },
+    [onOpenChange, step, total],
+  );
 
-  useEscapeDismiss(open, finish);
+  useEscapeDismiss(open, () => finish("escape"));
 
   const updateHoleFromDom = useCallback(() => {
     if (!open) {
@@ -128,7 +142,11 @@ export function ReportingTour({
     }
     const el = document.querySelector(selector);
     if (el instanceof HTMLElement) {
-      el.scrollIntoView({ block: "center", inline: "nearest", behavior: "auto" });
+      el.scrollIntoView({
+        block: "center",
+        inline: "nearest",
+        behavior: "auto",
+      });
     }
     updateHoleFromDom();
     const raf = requestAnimationFrame(updateHoleFromDom);
@@ -175,7 +193,10 @@ export function ReportingTour({
     const ph = panel?.getBoundingClientRect().height ?? 220;
 
     let top = hole.top + hole.height + TOOLTIP_GAP;
-    if (top + ph > vh - VIEW_MARGIN && hole.top - TOOLTIP_GAP - ph >= VIEW_MARGIN) {
+    if (
+      top + ph > vh - VIEW_MARGIN &&
+      hole.top - TOOLTIP_GAP - ph >= VIEW_MARGIN
+    ) {
       top = hole.top - TOOLTIP_GAP - ph;
     }
     top = Math.max(VIEW_MARGIN, Math.min(top, vh - ph - VIEW_MARGIN));
@@ -236,22 +257,46 @@ export function ReportingTour({
             <>
               <div
                 className="fixed bg-black/55"
-                style={{ top: 0, left: 0, width: vw, height: topH, zIndex: 210 }}
+                style={{
+                  top: 0,
+                  left: 0,
+                  width: vw,
+                  height: topH,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: bottomTop, left: 0, width: vw, height: bottomH, zIndex: 210 }}
+                style={{
+                  top: bottomTop,
+                  left: 0,
+                  width: vw,
+                  height: bottomH,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: t, left: 0, width: leftW, height: h, zIndex: 210 }}
+                style={{
+                  top: t,
+                  left: 0,
+                  width: leftW,
+                  height: h,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
                 className="fixed bg-black/55"
-                style={{ top: t, left: rightLeft, width: rightW, height: h, zIndex: 210 }}
+                style={{
+                  top: t,
+                  left: rightLeft,
+                  width: rightW,
+                  height: h,
+                  zIndex: 210,
+                }}
                 aria-hidden
               />
               <div
@@ -288,19 +333,31 @@ export function ReportingTour({
           <p className="text-xs font-medium uppercase tracking-wide text-violet-600 dark:text-violet-300">
             {progressLabel}
           </p>
-          <h2 id="reporting-tour-title" className="mt-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
+          <h2
+            id="reporting-tour-title"
+            className="mt-1 text-base font-semibold text-zinc-900 dark:text-zinc-100"
+          >
             {current.title}
           </h2>
         </div>
-        <div id="reporting-tour-body" className="max-h-[min(42vh,18rem)] overflow-y-auto px-4 py-3">
-          <p className="whitespace-pre-wrap text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">{current.body}</p>
+        <div
+          id="reporting-tour-body"
+          className="max-h-[min(42vh,18rem)] overflow-y-auto px-4 py-3"
+        >
+          <p className="whitespace-pre-wrap text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+            {current.body}
+          </p>
         </div>
         <div className="flex flex-wrap items-center justify-between gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
           <div className="flex gap-1.5" role="presentation" aria-hidden>
             {steps.map((_, i) => (
               <span
                 key={i}
-                className={`h-2 w-2 rounded-full ${i === step ? "bg-violet-500 dark:bg-violet-400" : "bg-zinc-300 dark:bg-zinc-600"}`}
+                className={`h-2 w-2 rounded-full ${
+                  i === step
+                    ? "bg-violet-500 dark:bg-violet-400"
+                    : "bg-zinc-300 dark:bg-zinc-600"
+                }`}
               />
             ))}
           </div>
@@ -308,17 +365,26 @@ export function ReportingTour({
             <button
               type="button"
               className="text-sm text-zinc-500 underline-offset-2 hover:text-zinc-800 hover:underline dark:text-zinc-400 dark:hover:text-zinc-200"
-              onClick={finish}
+              onClick={() => finish("skip")}
             >
               {dt.tourSkipBtn}
             </button>
             {step > 0 ? (
-              <button type="button" className={secondaryBtn} onClick={() => setStep((s) => Math.max(0, s - 1))}>
+              <button
+                type="button"
+                className={secondaryBtn}
+                onClick={() => setStep((s) => Math.max(0, s - 1))}
+              >
                 {dt.tourBackBtn}
               </button>
             ) : null}
             {last ? (
-              <button ref={primaryBtnRef} type="button" className={primaryBtn} onClick={finish}>
+              <button
+                ref={primaryBtnRef}
+                type="button"
+                className={primaryBtn}
+                onClick={() => finish("done")}
+              >
                 {dt.tourDoneBtn}
               </button>
             ) : (
@@ -335,7 +401,7 @@ export function ReportingTour({
         </div>
       </div>
     </>,
-    document.body
+    document.body,
   );
 
   return node;

package/components/dashboard/SavedProjectPicker.tsx

@@ -4,17 +4,21 @@ import { Fragment } from "react";
 import { formatProjectDisplay, normalizeProjectKey } from "@/lib/taskParsing";
 import {
   PROJECT_INLINE_SUGGEST,
+  PROJECT_INLINE_SUGGEST_PERSONAL,
+  PROJECT_INLINE_SUGGEST_PERSONAL_SELECTED,
   PROJECT_INLINE_SUGGEST_SELECTED,
 } from "./taskFieldStyles";
 import { useDescriptionPopoverAfterMs } from "./useDescriptionPopoverAfterMs";
 
 function SuggestedProjectButton({
   project,
+  personal,
   selected,
   onPick,
   description,
 }: {
   project: string;
+  personal?: boolean;
   selected: boolean;
   onPick: () => void;
   description: string | undefined;
@@ -22,9 +26,14 @@ function SuggestedProjectButton({
   const { hasDescription, triggerProps, popoverLayer, anchorWrapperProps } =
     useDescriptionPopoverAfterMs(description);
 
+  const baseSel = personal ? PROJECT_INLINE_SUGGEST_PERSONAL_SELECTED : PROJECT_INLINE_SUGGEST_SELECTED;
+  const baseUnsel = personal ? PROJECT_INLINE_SUGGEST_PERSONAL : PROJECT_INLINE_SUGGEST;
+  const ring = personal ? "focus-visible:ring-rose-500/35" : "focus-visible:ring-sky-500/35";
+  const ringUnsel = personal ? "focus-visible:ring-rose-500/30" : "focus-visible:ring-sky-500/30";
+
   const chipClass = selected
-    ? `${PROJECT_INLINE_SUGGEST_SELECTED} cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/35 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`
-    : `${PROJECT_INLINE_SUGGEST} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/30 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`;
+    ? `${baseSel} cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 ${ring} focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`
+    : `${baseUnsel} cursor-pointer focus-visible:outline-none focus-visible:ring-2 ${ringUnsel} focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900`;
 
   const btn = (
     <button
@@ -34,7 +43,7 @@ function SuggestedProjectButton({
       {...triggerProps}
       onClick={onPick}
     >
-      {formatProjectDisplay(project)}
+      {formatProjectDisplay(project, personal ? { personal: true } : undefined)}
     </button>
   );
 
@@ -58,6 +67,7 @@ export function SavedProjectPicker({
   onPickProject,
   projectDescriptions,
   noTopMargin,
+  personal,
 }: {
   knownProjects: string[];
   selectedProject?: string | null;
@@ -65,6 +75,8 @@ export function SavedProjectPicker({
   onPickProject: (name: string | null) => void;
   projectDescriptions?: Record<string, string>;
   noTopMargin?: boolean;
+  /** Liste de projets issus de `!` (styles rose). */
+  personal?: boolean;
 }) {
   const sel = selectedProject?.trim() ? normalizeProjectKey(selectedProject) : "";
   const selLower = sel.toLowerCase();
@@ -80,6 +92,7 @@ export function SavedProjectPicker({
             <SuggestedProjectButton
               key={p}
               project={p}
+              personal={personal}
               selected={on}
               description={projectDescriptions?.[normalizeProjectKey(p).toLowerCase()]}
               onPick={() => onPickProject(on ? null : p)}