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

package/README.md

@@ -12,11 +12,38 @@ Stack : **Next 16** (App Router), **React 19**, **Tailwind 4**, **better-sqlite3
 | `npm run build` / `npm run start` | Production |
 | `npm run test` | Vitest |
 | `npm run test:coverage` | Vitest avec couverture LCOV pour SonarQube Cloud |
+| `npm run test:e2e` | Playwright — voir **Tests E2E** ci‑dessous ; démarre Next sur **5555** si besoin (`playwright.config.mjs`) |
+| `npm run test:e2e:install` | Télécharge Chromium, Chrome Headless Shell et ffmpeg pour la version installée de Playwright |
+| `npm run test:e2e:podman` | E2E dans une image Ubuntu officielle Playwright via Podman (voir ci‑dessous) |
 | `npm run hooks:install` | Installe Husky et active les hooks Git du dépôt |
 | `npm run release:dry` | Simule bump semver + `CHANGELOG.md` + tag (aucune écriture) |
 | `npm run release` | Bump `package.json` / `package-lock.json`, met à jour le journal, commit, tag `v…` |
 | `npm run release:first` | Une fois : journal complet pour la version courante **sans** bump (puis tag `v…`) |
 
+### Tests E2E (Playwright)
+
+Après **`npm install`** ou une mise à jour de **`@playwright/test`**, exécuter une fois :
+
+```bash
+npm run test:e2e:install
+```
+
+Sans cela, les tests échouent souvent avec **`Executable doesn't exist`** ou **`browserType.launch`** : Playwright doit télécharger **Chromium**, **Chrome Headless Shell** (utilisé pour le projet « chromium ») et **ffmpeg**.
+
+Sous **Fedora**, ne pas utiliser `npx playwright install-deps` (script prévu pour Debian/Ubuntu). Si la validation « host » bloque le téléchargement :  
+`PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=1 npm run test:e2e:install`.
+
+Sous **Fedora** (ou si les binaires Playwright hôtent sur un fallback Ubuntu pénible), on peut lancer les E2E dans la **même image** que le pipeline GitLab (Ubuntu Noble, navigateurs inclus) avec **Podman** :
+
+```bash
+npm run test:e2e:podman
+```
+
+(équivalent : `bash scripts/e2e-podman.sh` — exécute `npm ci` puis `npm run test:e2e` *dans* le conteneur : ne pas réutiliser le `node_modules` de l’hôte).  
+Image par défaut : `mcr.microsoft.com/playwright:v1.59.1-noble` (voir `PLAYWRIGHT_IMAGE=…` pour surcharger). Le montage utilise le suffixe **`:Z`** pour SELinux.
+
+En cas de conflit avec un `.next` déjà présent sur l’hôte (autre `next dev`), le script utilise un **volume Podman** pour `/work/.next` (`kronosys-e2e-dot-next` par défaut, surcharge avec `PODMAN_E2E_NEXT_VOLUME`). Pour repartir à zéro : `podman volume rm kronosys-e2e-dot-next`.
+
 Les messages de commit doivent suivre les [Conventional Commits](https://www.conventionalcommits.org/) (`feat`, `fix`, etc.) pour que le journal regroupe correctement **nouveautés**, **corrections** et autres rubriques. Après `npm run release`, pousser avec `git push --follow-tags`. Si le dépôt n’a pas encore de tag pour la dernière entrée du `CHANGELOG.md`, créez `git tag vX.Y.Z <commit>` avant le prochain `release`, sinon l’historique serait dupliqué (voir l’en-tête du journal). Sur **GitHub**, le workflow **Release** crée une **GitHub Release** à chaque tag `v*.*.*`. Sur **GitLab**, créez une release à partir du même tag (interface ou `glab release create`) en réutilisant la section extraite : `bash scripts/extract-changelog-for-tag.sh CHANGELOG.md X.Y.Z`.
 
 Depuis la **racine** du monorepo : `npm run dev` délègue ici.
@@ -72,7 +99,7 @@ Sinon : `NODE_EXTRA_CA_CERTS` pointant vers le PEM racine de l’organisation, o
 
 ## Publication npm (`@nightkatana/kronosys-app`)
 
-La version est définie dans `package.json` (actuellement **0.1.0**). Avant la première publication : créer le scope **@nightkatana** sur [npmjs.com](https://www.npmjs.com/) si besoin, puis `npm login`. Depuis ce dossier :
+La version est définie dans `package.json` (référence actuelle : **`1.0.0-beta.21`**). Avant la première publication : créer le scope **@nightkatana** sur [npmjs.com](https://www.npmjs.com/) si besoin, puis `npm login`. Depuis ce dossier :
 
 ```bash
 npm publish --access public

package/app/api/action/route.ts

@@ -1,16 +1,52 @@
 import { NextResponse } from "next/server";
 
 import { dispatchKronosysAction } from "@/server/actionDispatch";
+import { clearUserActionLogs, logUserAction } from "@/server/userActionLog";
 
 export const runtime = "nodejs";
 
+function badRequest(error: string, status = 400) {
+  return NextResponse.json({ ok: false, error }, { status });
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 export async function POST(req: Request) {
-  let body: Record<string, unknown> = {};
+  let parsedBody: unknown;
   try {
-    body = (await req.json()) as Record<string, unknown>;
+    parsedBody = await req.json();
   } catch {
-    return NextResponse.json({ ok: false, error: "Invalid JSON" }, { status: 400 });
+    return badRequest("invalid_json");
+  }
+  if (!isRecord(parsedBody)) {
+    return badRequest("invalid_action_request");
   }
+  const actionType = typeof parsedBody.type === "string" ? parsedBody.type.trim() : "";
+  if (!actionType) {
+    return badRequest("missing_action_type");
+  }
+  const body = parsedBody;
   const out = await dispatchKronosysAction(body);
+  try {
+    if (actionType === "clearHistory") {
+      clearUserActionLogs();
+      return NextResponse.json({ ok: out.ok, result: out.result ?? {} });
+    }
+    const sourceIp =
+      req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+      req.headers.get("x-real-ip") ||
+      null;
+    const userAgent = req.headers.get("user-agent");
+    logUserAction({
+      actionType,
+      ok: out.ok,
+      body,
+      context: { sourceIp, userAgent },
+    });
+  } catch {
+    /* ignore logging failure */
+  }
   return NextResponse.json({ ok: out.ok, result: out.result ?? {} });
 }

package/app/api/action-logs/route.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+
+import { readUserActionLogs } from "@/server/userActionLog";
+
+export const runtime = "nodejs";
+
+function parsePositiveInt(raw: string | null, fallback: number): number {
+  if (!raw) {
+    return fallback;
+  }
+  const n = Number.parseInt(raw, 10);
+  if (!Number.isFinite(n)) {
+    return fallback;
+  }
+  return n;
+}
+
+export function GET(req: Request) {
+  const url = new URL(req.url);
+  const limit = parsePositiveInt(url.searchParams.get("limit"), 100);
+  const offset = parsePositiveInt(url.searchParams.get("offset"), 0);
+  const logs = readUserActionLogs(limit, offset);
+  return NextResponse.json({ ok: true, logs });
+}

package/app/api/backup/route.ts

@@ -27,7 +27,7 @@ export function GET(req: Request) {
 
   if (format === "sqlite") {
     try {
-      getSqlite().pragma("wal_checkpoint(TRUNCATE)");
+      getSqlite().exec("PRAGMA wal_checkpoint(TRUNCATE);");
     } catch {
       /* ignore */
     }

package/app/api/restore/route.ts

@@ -0,0 +1,145 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { NextResponse } from "next/server";
+
+import type { KronosysUpdatePayload } from "@/lib/kronosysApi";
+import { ensureDataDirectory } from "@/lib/dataDir";
+import { getSqlite, resetSqliteConnection } from "@/server/db";
+import { writePayload } from "@/server/payloadStore";
+
+export const runtime = "nodejs";
+
+const DB_NAME = "kronosys.sqlite";
+const MAX_UPLOAD_BYTES = 64 * 1024 * 1024;
+
+function badRequest(error: string, extra?: Record<string, unknown>, status = 400) {
+  return NextResponse.json({ ok: false, error, ...(extra ?? {}) }, { status });
+}
+
+function nowStamp(): string {
+  return new Date().toISOString().replace(/\.\d{3}Z$/, "Z").replaceAll(":", "-");
+}
+
+function isRecord(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+function validatePayloadShape(v: unknown): v is KronosysUpdatePayload {
+  if (!isRecord(v)) {
+    return false;
+  }
+  return typeof v.viewType === "string" && v.viewType.trim().length > 0;
+}
+
+function cleanSqliteSidecars(dbPath: string): void {
+  for (const ext of [".wal", ".shm"]) {
+    const p = `${dbPath}${ext}`;
+    try {
+      if (fs.existsSync(p)) {
+        fs.unlinkSync(p);
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+function restoreFromSqliteBuffer(buf: Buffer): { backupPath: string | null } {
+  const dir = ensureDataDirectory();
+  const dbPath = path.join(dir, DB_NAME);
+  const tmpPath = `${dbPath}.restore-tmp`;
+  const backupPath = `${dbPath}.pre-restore-${nowStamp()}.bak`;
+  let createdBackup: string | null = null;
+
+  resetSqliteConnection();
+  if (fs.existsSync(dbPath)) {
+    fs.copyFileSync(dbPath, backupPath);
+    createdBackup = backupPath;
+  }
+  cleanSqliteSidecars(dbPath);
+  fs.writeFileSync(tmpPath, buf);
+  fs.renameSync(tmpPath, dbPath);
+
+  try {
+    const db = getSqlite();
+    db.exec("PRAGMA integrity_check;");
+    db.exec("SELECT 1;");
+  } catch (error) {
+    resetSqliteConnection();
+    if (createdBackup && fs.existsSync(createdBackup)) {
+      fs.copyFileSync(createdBackup, dbPath);
+    }
+    throw error;
+  }
+
+  return { backupPath: createdBackup };
+}
+
+export async function POST(req: Request) {
+  const ctype = req.headers.get("content-type") ?? "";
+  const isMultipart = ctype.toLowerCase().includes("multipart/form-data");
+  if (!isMultipart) {
+    return badRequest("unsupported_content_type", undefined, 415);
+  }
+
+  let form: FormData;
+  try {
+    form = await req.formData();
+  } catch {
+    return badRequest("invalid_form_data");
+  }
+  const file = form.get("file");
+  const formatField = form.get("format");
+  const formatRaw =
+    typeof formatField === "string" ? formatField.trim().toLowerCase() : "";
+  if (!(file instanceof File)) {
+    return badRequest("file_required");
+  }
+  if (file.size <= 0 || file.size > MAX_UPLOAD_BYTES) {
+    return badRequest("invalid_file_size", { maxBytes: MAX_UPLOAD_BYTES });
+  }
+
+  const lowerName = file.name.toLowerCase();
+  let format: "json" | "sqlite";
+  if (formatRaw === "json" || formatRaw === "sqlite") {
+    format = formatRaw;
+  } else {
+    format = lowerName.endsWith(".json") ? "json" : "sqlite";
+  }
+
+  if (format === "json") {
+    const text = await file.text();
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      return badRequest("invalid_json");
+    }
+    if (!validatePayloadShape(parsed)) {
+      return badRequest("invalid_kronosys_payload");
+    }
+    writePayload(parsed);
+    return NextResponse.json({ ok: true, restored: "json" });
+  }
+
+  const bytes = await file.arrayBuffer();
+  const buf = Buffer.from(bytes);
+  if (buf.length < 1024) {
+    return badRequest("sqlite_too_small");
+  }
+  const header = buf.subarray(0, 16).toString("utf8");
+  if (!header.startsWith("SQLite format 3")) {
+    return badRequest("invalid_sqlite_file");
+  }
+
+  try {
+    const { backupPath } = restoreFromSqliteBuffer(buf);
+    return NextResponse.json({ ok: true, restored: "sqlite", backupPath });
+  } catch (error) {
+    const detail = error instanceof Error ? error.message : String(error);
+    return NextResponse.json(
+      { ok: false, error: "restore_failed", detail },
+      { status: 500 },
+    );
+  }
+}

package/app/changelog/page.tsx

@@ -3,7 +3,9 @@
 import { Suspense, useMemo } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
+import ReactMarkdown, { type Components } from "react-markdown";
 import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import { AppShellHeaderWallClock } from "@/components/dashboard/AppShellHeaderWallClock";
 import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
 import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
 import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
@@ -18,6 +20,55 @@ import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
 
 type LiveShape = { language?: string };
 
+type ChangelogItemGroup = {
+  heading: string;
+  items: string[];
+};
+
+const CHANGELOG_MARKDOWN_COMPONENTS: Components = {
+  p: ({ children }) => <span>{children}</span>,
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      className="text-violet-700 underline decoration-violet-400/80 underline-offset-2 hover:text-violet-900 dark:text-violet-300 dark:decoration-violet-500/60 dark:hover:text-violet-200"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ),
+  code: ({ children }) => (
+    <code className="rounded bg-zinc-200/70 px-1 py-0.5 font-mono text-[0.82em] dark:bg-zinc-700/80">
+      {children}
+    </code>
+  ),
+};
+
+function groupChangelogItems(items: string[]): ChangelogItemGroup[] {
+  const groups: ChangelogItemGroup[] = [];
+  const indexByHeading = new Map<string, number>();
+  const fallbackHeading = "Notes";
+
+  for (const raw of items) {
+    const item = raw.trim();
+    const m = /^([^—:]+)\s*[—:]\s*(.+)$/u.exec(item);
+    const heading = m?.[1]?.trim() || fallbackHeading;
+    const content = m?.[2]?.trim() || item;
+    if (!content) {
+      continue;
+    }
+    const existingIndex = indexByHeading.get(heading);
+    if (existingIndex !== undefined) {
+      groups[existingIndex].items.push(content);
+      continue;
+    }
+    indexByHeading.set(heading, groups.length);
+    groups.push({ heading, items: [content] });
+  }
+
+  return groups;
+}
+
 function ChangelogBody() {
   const searchParams = useSearchParams();
   const dashboardSessionNavId = searchParams.get("session");
@@ -55,6 +106,7 @@ function ChangelogBody() {
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-1.5">
+            <AppShellHeaderWallClock lang={lang} dt={dt} />
             <ThemeToggle lang={lang} />
             <PageRefreshButton
               title={dt.pageRefreshTitle}
@@ -90,11 +142,26 @@ function ChangelogBody() {
                 <h2 className="text-base font-semibold text-zinc-900 dark:text-zinc-100">
                   v{entry.version}
                 </h2>
-                <ul className="mt-3 list-inside list-disc space-y-1.5 text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
-                  {entry.items.map((item) => (
-                    <li key={item}>{item}</li>
+                <div className="mt-3 space-y-3">
+                  {groupChangelogItems(entry.items).map((group) => (
+                    <div key={group.heading} className="space-y-1.5">
+                      <h3 className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                        {group.heading}
+                      </h3>
+                      <ul className="list-inside list-disc space-y-1.5 text-sm leading-relaxed text-zinc-700 dark:text-zinc-300">
+                        {group.items.map((item) => (
+                          <li key={`${group.heading}:${item}`}>
+                            <ReactMarkdown
+                              components={CHANGELOG_MARKDOWN_COMPONENTS}
+                            >
+                              {item}
+                            </ReactMarkdown>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
                   ))}
-                </ul>
+                </div>
               </section>
             ))
           )}

package/app/globals.css

@@ -48,6 +48,20 @@ body {
   color: var(--foreground);
 }
 
+@keyframes kronosys-route-transition-in-kf {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.kronosys-route-transition-in {
+  animation: kronosys-route-transition-in-kf 170ms ease-out both;
+  will-change: opacity;
+}
+
 /* Minuteur focus : clignotement sous 5 min (travail / longue pause), accent violet sous 30 s */
 @keyframes kronosys-krono-focus-blink {
   0%,
@@ -83,6 +97,32 @@ html.dark .kronosys-session-duration-alert {
   color: rgb(248 113 113);
 }
 
+/* Fin planifiée imminente (sessions/tâches): clignotement progressif avant échéance. */
+@keyframes kronosys-end-time-alert-blink-kf {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.42;
+  }
+}
+
+.kronosys-end-time-alert-slow {
+  color: rgb(220 38 38);
+  animation: kronosys-end-time-alert-blink-kf 2.2s ease-in-out infinite;
+}
+
+.kronosys-end-time-alert-fast {
+  color: rgb(220 38 38);
+  animation: kronosys-end-time-alert-blink-kf 0.95s ease-in-out infinite;
+}
+
+html.dark .kronosys-end-time-alert-slow,
+html.dark .kronosys-end-time-alert-fast {
+  color: rgb(248 113 113);
+}
+
 /* Saisie tâche « passé » : exactement deux assombrissements (pas de 3e pic dû au easing) */
 @keyframes kronosys-past-datetime-blink-twice-kf {
   0%,
@@ -187,11 +227,76 @@ html.dark .kronosys-datetime-popover select option {
   transform-origin: center center;
 }
 
+/* Tâche en pause : halo ambre léger (minuteur arrêté) */
+@keyframes kronosys-task-paused-ring-kf {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px rgb(234 179 8 / 0.28),
+      0 0 12px -4px rgb(234 179 8 / 0.12);
+  }
+  50% {
+    box-shadow:
+      0 0 0 3px rgb(234 179 8 / 0.42),
+      0 0 18px -2px rgb(234 179 8 / 0.22);
+  }
+}
+
+.kronosys-task-paused-blink {
+  animation: kronosys-task-paused-ring-kf 1.75s ease-in-out infinite;
+}
+
+/* Tâche lancée : pulse léger tant que le minuteur roule */
+@keyframes kronosys-task-running-pulse-kf {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 1px rgb(16 185 129 / 0.22),
+      0 0 10px -5px rgb(16 185 129 / 0.1);
+  }
+  50% {
+    box-shadow:
+      0 0 0 2px rgb(16 185 129 / 0.36),
+      0 0 18px -4px rgb(16 185 129 / 0.18);
+  }
+}
+
+.kronosys-task-running-pulse {
+  animation: kronosys-task-running-pulse-kf 2.2s ease-in-out infinite;
+}
+
+/* Tâche terminée : pulse unique vert (succès) */
+@keyframes kronosys-task-finish-celebrate-kf {
+  0% {
+    box-shadow: 0 0 0 0 rgb(16 185 129 / 0);
+    transform: scale(1);
+  }
+  45% {
+    box-shadow:
+      0 0 0 4px rgb(16 185 129 / 0.35),
+      0 0 20px -4px rgb(16 185 129 / 0.28);
+    transform: scale(1.012);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgb(16 185 129 / 0);
+    transform: scale(1);
+  }
+}
+
+.kronosys-task-finish-celebrate {
+  animation: kronosys-task-finish-celebrate-kf 0.7s ease-out 1 both;
+  transform-origin: center center;
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto !important;
   }
 
+  .kronosys-route-transition-in {
+    animation: none;
+  }
+
   .kronosys-krono-focus-time-blink {
     animation: none;
     opacity: 1;
@@ -203,8 +308,30 @@ html.dark .kronosys-datetime-popover select option {
     transform: none;
   }
 
+  .kronosys-end-time-alert-slow,
+  .kronosys-end-time-alert-fast {
+    animation: none;
+    opacity: 1;
+  }
+
   .kronosys-past-datetime-blink-twice {
     animation: none;
     opacity: 1;
   }
+
+  .kronosys-task-paused-blink {
+    animation: none;
+    box-shadow: none;
+  }
+
+  .kronosys-task-running-pulse {
+    animation: none;
+    box-shadow: none;
+  }
+
+  .kronosys-task-finish-celebrate {
+    animation: none;
+    transform: none;
+    box-shadow: none;
+  }
 }