@nightkatana/kronosys-app 1.0.0-beta.0

package/README.md

@@ -0,0 +1,81 @@
+# Kronosys — application Next.js
+
+Stack : **Next 16** (App Router), **React 19**, **Tailwind 4**, **better-sqlite3** (SQLite côté serveur Node), **mongodb** (optionnel).
+
+**Guide utilisateur** : dans l’app, **`/guide`** (icône *Livre* à côté de Rapports / Paramètres) — mêmes thèmes, navigation, recherche de rubriques. Dépôt : [`docs/USER_GUIDE.md`](docs/USER_GUIDE.md) (aligné) — règle projet [`.cursor/rules/kronosys-user-guide.mdc`](.cursor/rules/kronosys-user-guide.mdc).
+
+## Scripts
+
+| Commande | Effet |
+| --- | --- |
+| `npm run dev` | `next dev` sur le port **5555** |
+| `npm run build` / `npm run start` | Production |
+| `npm run test` | Vitest |
+| `npm run test:coverage` | Vitest avec couverture LCOV pour SonarQube Cloud |
+| `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…`) |
+
+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.
+
+Le projet déclare ses versions Node / npm avec **Volta** (`package.json` → `volta`) afin d’obtenir le même outillage localement et en automatisation.
+
+## CI/CD GitLab et SonarQube Cloud
+
+Le pipeline GitLab (`.gitlab-ci.yml`) exécute lint, audit SCA minimal avec `npm audit`, tests Vitest avec couverture, E2E Playwright, build Next, puis l’analyse **SonarQube Cloud**. La clé projet et l’organisation sont versionnées dans `sonar-project.properties`; le token Sonar ne doit jamais être commité.
+
+L’audit `npm audit --audit-level=moderate` est non bloquant au départ afin de garder le signal visible pendant le traitement des vulnérabilités transitives déjà présentes.
+
+- `SONAR_TOKEN` : token SonarQube Cloud.
+
+## API
+
+- `GET /api/health` — vérifie l’accès SQLite
+- `GET /api/state` — stub ; à remplacer par l’état complet (sessions, tâches, …)
+
+## Variables d’environnement
+
+- **`TRACE_DATA_DIR`** — répertoire des données (défaut : emplacement utilisateur type XDG / macOS / Windows). Si elle est définie, elle prime sur toute autre règle (y compris l’isolation dev / prod).
+- **`KRONOSYS_DEV_USE_PROD_DATA`** — si non vide / `1` / `true` / `on` / `yes`, le serveur lancé en **`NODE_ENV=development`** (`next dev`) utilise le même segment de chemin que la production (`v4`) au lieu du répertoire isolé `v4-dev`. Raccourci côté script ; l’équivalent se configure dans l’app : **Paramètres → Général** (bloc *Mode développement*), enregistrement avec **Enregistrer** (un petit fichier sur le disque sert aussi au prochain démarrage).
+
+## Installation (`npm install`)
+
+Le paquet **n’est pas « cassé »** : l’installation peut échouer si **l’environnement** ne remplit pas les conditions ci‑dessous (souvent **plusieurs** à la fois, Linux comme Windows).
+
+### 1. Module natif `better-sqlite3`
+
+SQLite passe par **`better-sqlite3`** (binaire précompilé ou compilation `node-gyp`).
+
+- **Node** : préférer une **LTS x64** (**20 ou 22**), voir `engines` dans `package.json`.
+- **Windows** : outils natifs Node (assistant d’installation) et, si compilation : **Visual Studio 2022** ou *Build Tools* avec **Développement Desktop en C++**.
+- **Linux / WSL** : si compilation, paquets type `build-essential` / chaîne de build usuelle pour les modules natifs.
+
+### 2. TLS (proxy d’entreprise, inspection HTTPS)
+
+Si le log parle de **`SELF_SIGNED_CERT_IN_CHAIN`** ou d’échec de téléchargement (**prebuild**, **headers** `nodejs.org`), ce n’est pas un défaut du paquet Kronosys : Node n’accepte pas la chaîne de certificats imposée par l’environnement.
+
+**Piste simple** (Node récent, magasin de certificats du système) :
+
+```bash
+export NODE_OPTIONS='--use-system-ca'
+npm install
+```
+
+Sinon : `NODE_EXTRA_CA_CERTS` pointant vers le PEM racine de l’organisation, ou `npm config set cafile …` (voir documentation interne).
+
+### 3. Où lancer `npm install`
+
+À la racine du dépôt **`apps/kronosys`**, ou dans le dossier décompressé du ZIP qui contient **`package.json`** (et éventuellement le `.tgz`), pas en mélangeant une install partielle à la main d’une seule dépendance.
+
+## 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 :
+
+```bash
+npm publish --access public
+```
+
+Le script `prepublishOnly` lance `npm run build`. Pour inspecter le contenu du paquet : `npm pack --dry-run`.

package/app/api/action/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from "next/server";
+
+import { dispatchKronosysAction } from "@/server/actionDispatch";
+
+export const runtime = "nodejs";
+
+export async function POST(req: Request) {
+  let body: Record<string, unknown> = {};
+  try {
+    body = (await req.json()) as Record<string, unknown>;
+  } catch {
+    return NextResponse.json({ ok: false, error: "Invalid JSON" }, { status: 400 });
+  }
+  const out = await dispatchKronosysAction(body);
+  return NextResponse.json({ ok: out.ok, result: out.result ?? {} });
+}

package/app/api/backup/route.ts

@@ -0,0 +1,84 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { NextResponse } from "next/server";
+
+import {
+  buildCsvBackupPart,
+  buildCsvBackupZipSync,
+  csvBackupFilename,
+  csvBackupZipFilename,
+  isCsvBackupTable,
+} from "@/lib/backupCsvExport";
+import { ensureDataDirectory } from "@/lib/dataDir";
+import { getSqlite } from "@/server/db";
+import { readPayload } from "@/server/payloadStore";
+
+export const runtime = "nodejs";
+
+const DB_NAME = "kronosys.sqlite";
+
+function fileStamp(): string {
+  return new Date().toISOString().replace(/\.\d{3}Z$/, "Z").replace(/:/g, "-");
+}
+
+export function GET(req: Request) {
+  const format = new URL(req.url).searchParams.get("format") ?? "json";
+  const stamp = fileStamp();
+
+  if (format === "sqlite") {
+    try {
+      getSqlite().pragma("wal_checkpoint(TRUNCATE)");
+    } catch {
+      /* ignore */
+    }
+    const filePath = path.join(ensureDataDirectory(), DB_NAME);
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ ok: false, error: "sqlite_missing" }, { status: 404 });
+    }
+    const buf = fs.readFileSync(filePath);
+    return new NextResponse(buf, {
+      headers: {
+        "Content-Type": "application/vnd.sqlite3",
+        "Content-Disposition": `attachment; filename="kronosys-backup-${stamp}.sqlite"`,
+      },
+    });
+  }
+
+  const payload = readPayload();
+
+  if (format === "csv-zip" || format === "csv_zip") {
+    const zipBytes = buildCsvBackupZipSync(payload, stamp);
+    return new NextResponse(Buffer.from(zipBytes), {
+      headers: {
+        "Content-Type": "application/zip",
+        "Content-Disposition": `attachment; filename="${csvBackupZipFilename(stamp)}"`,
+      },
+    });
+  }
+
+  if (format === "csv") {
+    const tableRaw = new URL(req.url).searchParams.get("table") ?? "sessions";
+    if (!isCsvBackupTable(tableRaw)) {
+      return NextResponse.json({ ok: false, error: "unknown_csv_table" }, { status: 400 });
+    }
+    const body = buildCsvBackupPart(tableRaw, payload);
+    return new NextResponse(body, {
+      headers: {
+        "Content-Type": "text/csv; charset=utf-8",
+        "Content-Disposition": `attachment; filename="${csvBackupFilename(tableRaw, stamp)}"`,
+      },
+    });
+  }
+
+  if (format !== "json") {
+    return NextResponse.json({ ok: false, error: "unknown_format" }, { status: 400 });
+  }
+
+  const body = JSON.stringify(payload, null, 2);
+  return new NextResponse(body, {
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+      "Content-Disposition": `attachment; filename="kronosys-state-${stamp}.json"`,
+    },
+  });
+}

package/app/api/health/route.ts

@@ -0,0 +1,22 @@
+import { NextResponse } from "next/server";
+
+import { readKronosysPackageVersion } from "@/lib/readKronosysPackageVersion";
+import { readPayload } from "@/server/payloadStore";
+import { getSqlite } from "@/server/db";
+
+export const runtime = "nodejs";
+
+export function GET() {
+  try {
+    getSqlite().prepare("SELECT 1 as ok").get();
+    readPayload();
+    return NextResponse.json({
+      ok: true,
+      service: "kronosys-next",
+      version: readKronosysPackageVersion(),
+      sqlite: true,
+    });
+  } catch (e) {
+    return NextResponse.json({ ok: false, error: String(e) }, { status: 500 });
+  }
+}

package/app/api/state/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+import { getDevDataRuntimeInfo } from "@/lib/devDataRuntimeInfo";
+import { readPayload } from "@/server/payloadStore";
+
+export const runtime = "nodejs";
+
+export function GET(req: Request) {
+  const url = new URL(req.url);
+  const view = url.searchParams.get("view") === "sidebar" ? "sidebar" : "dashboard";
+  const payload = readPayload();
+  return NextResponse.json(
+    {
+      type: "updateData",
+      payload: {
+        ...payload,
+        viewType: view,
+        devDataRuntime: getDevDataRuntimeInfo(),
+      },
+    },
+    {
+      headers: {
+        "Cache-Control": "no-store, no-cache, must-revalidate, max-age=0",
+      },
+    },
+  );
+}

package/app/changelog/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { Suspense, useMemo } from "react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { AppVersionStamp } from "@/components/dashboard/AppVersionStamp";
+import { ThemeToggle } from "@/components/dashboard/ThemeToggle";
+import { PageRefreshButton } from "@/components/dashboard/PageRefreshButton";
+import { ScrollToTopFab } from "@/components/dashboard/ScrollToTopFab";
+import { useKronosysPayload } from "@/components/KronosysPayloadProvider";
+import {
+  appShellHeaderClassName,
+  appShellHeaderToolRowClassName,
+} from "@/lib/appShellHeaderClasses";
+import { changelogBundle } from "@/lib/changelogCopy";
+import { dashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { withDashboardSessionParam } from "@/lib/dashboardSessionNav";
+
+type LiveShape = { language?: string };
+
+function ChangelogBody() {
+  const searchParams = useSearchParams();
+  const dashboardSessionNavId = searchParams.get("session");
+  const { payload, refresh } = useKronosysPayload();
+  const live = payload?.current as LiveShape | undefined;
+  const lang: Lang = live?.language === "fr" ? "fr" : "en";
+  const dt = dashboardStrings(lang);
+  const c = useMemo(() => changelogBundle(lang), [lang]);
+
+  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">
+            <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+              <Link
+                href={withDashboardSessionParam("/", dashboardSessionNavId)}
+                className="text-xl font-semibold tracking-tight text-zinc-900 hover:text-violet-700 dark:text-zinc-100 dark:hover:text-violet-300"
+              >
+                Kronosys
+              </Link>
+              <span className="text-zinc-400 dark:text-zinc-600" aria-hidden>
+                /
+              </span>
+              <span className="text-lg font-medium text-zinc-700 dark:text-zinc-300">
+                {c.title}
+              </span>
+            </div>
+            <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">
+            <ThemeToggle lang={lang} />
+            <PageRefreshButton
+              title={dt.pageRefreshTitle}
+              ariaLabel={dt.pageRefreshAriaLabel}
+              inlineMessages={{
+                loading: dt.pageRefreshProgressLabel,
+                success: dt.pageRefreshDoneToast,
+                error: dt.pageRefreshFailedToast,
+              }}
+              onRefresh={async () => {
+                return await refresh({ routerInvalidate: true });
+              }}
+            />
+          </div>
+        </div>
+      </header>
+
+      <main className="mx-auto w-full max-w-3xl px-5 pb-16 pt-6 sm:px-8 lg:px-10">
+        <p className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
+          {c.subtitle}
+        </p>
+        <div className="mt-8 space-y-6">
+          {c.entries.length === 0 ? (
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">
+              {c.empty}
+            </p>
+          ) : (
+            c.entries.map((entry) => (
+              <section
+                key={entry.version}
+                className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-800/60"
+              >
+                <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>
+                  ))}
+                </ul>
+              </section>
+            ))
+          )}
+        </div>
+      </main>
+      <ScrollToTopFab
+        ariaLabel={lang === "fr" ? "Retour en haut de la page" : "Back to top"}
+      />
+    </div>
+  );
+}
+
+export default function ChangelogPage() {
+  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>
+      }
+    >
+      <ChangelogBody />
+    </Suspense>
+  );
+}

package/app/globals.css

@@ -0,0 +1,210 @@
+/* Paquet `tailwindcss` : dans `apps/dashboard-web/node_modules` (build) et à la racine du dépôt (dev Turbopack). */
+@import "tailwindcss";
+
+/* Thème piloté par la classe `dark` sur `<html>` (ThemeProvider), pas par le seul préférence système. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  /* Aligné sur le remap zinc clair (chaud, moins d’éblouissement). */
+  --background: oklch(93.8% 0.011 82);
+  --foreground: oklch(24.5% 0.014 285);
+}
+
+html.dark {
+  /* Zinc 900 — évite le noir absolu (#000 / zinc-950). */
+  --background: #18181b;
+  --foreground: #f4f4f5;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-rubik);
+  --font-mono: var(--font-geist-mono);
+}
+
+/*
+ * Thème clair : neutres plus chauds, moins de blanc pur et de zinc « froid ».
+ * S’applique uniquement sans `.dark` sur `<html>` ; le mode sombre garde la palette Tailwind par défaut.
+ */
+html:not(.dark) {
+  color-scheme: light;
+  --color-white: oklch(98.2% 0.004 85);
+  --color-zinc-50: oklch(97.2% 0.006 82);
+  --color-zinc-100: oklch(93.8% 0.011 82);
+  --color-zinc-200: oklch(88.5% 0.012 84);
+  --color-zinc-300: oklch(82% 0.014 84);
+  --color-zinc-400: oklch(68% 0.016 280);
+  --color-zinc-500: oklch(54% 0.018 285);
+  --color-zinc-600: oklch(44% 0.017 285);
+  --color-zinc-700: oklch(37% 0.014 285);
+  --color-zinc-800: oklch(30% 0.012 285);
+  --color-zinc-900: oklch(24.5% 0.014 285);
+  --color-zinc-950: oklch(18% 0.012 285);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+/* Minuteur focus : clignotement sous 5 min (travail / longue pause), accent violet sous 30 s */
+@keyframes kronosys-krono-focus-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+}
+
+.kronosys-krono-focus-time-blink {
+  animation: kronosys-krono-focus-blink 0.85s ease-in-out infinite;
+}
+
+/* Durée de session : au-delà du seuil paramétrable — rouge, clignotement lent */
+@keyframes kronosys-session-duration-alert-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+}
+
+.kronosys-session-duration-alert {
+  color: rgb(220 38 38);
+  animation: kronosys-session-duration-alert-blink 2.6s ease-in-out infinite;
+}
+
+html.dark .kronosys-session-duration-alert {
+  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%,
+  14% {
+    opacity: 1;
+  }
+  24% {
+    opacity: 0.14;
+  }
+  34% {
+    opacity: 1;
+  }
+  44% {
+    opacity: 0.14;
+  }
+  54%,
+  100% {
+    opacity: 1;
+  }
+}
+
+.kronosys-past-datetime-blink-twice {
+  animation: kronosys-past-datetime-blink-twice-kf 2.35s linear 1 both;
+}
+
+/* Popover date-heure (react-day-picker) : accent violet, aligné sur le tableau de bord */
+.kronosys-datetime-popover .rdp-root {
+  --rdp-accent-color: rgb(147 51 234);
+  --rdp-accent-background-color: rgb(147 51 234 / 0.14);
+  --rdp-day-height: 2.25rem;
+  --rdp-day-width: 2.25rem;
+  --rdp-day_button-height: 2.125rem;
+  --rdp-day_button-width: 2.125rem;
+  --rdp-day_button-border-radius: 0.5rem;
+  --rdp-selected-border: 2px solid rgb(147 51 234);
+  --rdp-today-color: rgb(109 40 217);
+  --rdp-nav-height: 2.25rem;
+  --rdp-nav_button-width: 2.25rem;
+  --rdp-nav_button-height: 2.25rem;
+}
+
+.kronosys-datetime-popover .rdp-selected .rdp-day_button {
+  background-color: var(--rdp-accent-color);
+  border-color: var(--rdp-accent-color);
+  color: #fafafa;
+}
+
+html.dark .kronosys-datetime-popover .rdp-root {
+  --rdp-accent-color: rgb(167 139 250);
+  --rdp-accent-background-color: rgb(139 92 246 / 0.22);
+  --rdp-selected-border: 2px solid rgb(167 139 250);
+  --rdp-today-color: rgb(196 181 253);
+}
+
+html.dark .kronosys-datetime-popover .rdp-selected .rdp-day_button {
+  color: rgb(24 24 27);
+}
+
+/* Listes natives heure / minutes : forcer le schéma sombre + fond lisible (sinon menu clair + texte illisible). */
+html.dark .kronosys-datetime-popover select {
+  color-scheme: dark;
+  background-color: rgb(39 39 42);
+  color: rgb(244 244 245);
+}
+
+html.dark .kronosys-datetime-popover select option {
+  background-color: rgb(24 24 27);
+  color: rgb(250 250 250);
+}
+
+.kronosys-datetime-popover select {
+  color-scheme: light;
+}
+
+/* Krono Focus : au démarrage (idle → running), deux clignotements + scale +5 % */
+@keyframes kronosys-krono-focus-start-pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  20% {
+    opacity: 0.28;
+    transform: scale(1.05);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  60% {
+    opacity: 0.28;
+    transform: scale(1.05);
+  }
+  80%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.kronosys-krono-focus-start-pulse {
+  animation: kronosys-krono-focus-start-pulse 0.85s ease-in-out 1 both;
+  transform-origin: center center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  .kronosys-krono-focus-time-blink {
+    animation: none;
+    opacity: 1;
+  }
+
+  .kronosys-krono-focus-start-pulse {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+
+  .kronosys-past-datetime-blink-twice {
+    animation: none;
+    opacity: 1;
+  }
+}

package/app/guide/layout.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Guide d’utilisation — Kronosys",
+  description:
+    "Aide intégrée : navigation, thème, sessions, tâches, KronoFocus, rapports et paramètres (Kronosys).",
+};
+
+export default function GuideLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return children;
+}