chore: readable compose up

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/deploy.yml

@@ -20,4 +20,4 @@ jobs:
           DB_VOLUME_PATH: ${{ variables.DB_VOLUME_PATH }}
         run: |
           if [ -n "${DB_VOLUME_PATH}" ]; then mkdir -p "$DB_VOLUME_PATH"; fi
-          docker compose up -d --build
+          BUILDKIT_PROGRESS=plain docker compose up -d --build

docker-compose.dev.yml

@@ -1,6 +1,6 @@
 # Dev avec hot reload (source montée)
 services:
-  app:
+  iag-dev-evaluator:
     build:
       context: .
       dockerfile: Dockerfile.dev

docker-compose.yml

@@ -1,5 +1,5 @@
 services:
-  app:
+  iag-dev-evaluator:
     build: .
     ports:
       - "3044:3000"

prisma/seed.ts

@@ -120,6 +120,22 @@ const RUBRICS: Record<string, string> = {
     "1:Pas de réflexion — aucune idée de comment contribuer au partage;2:Passif — ouvert à partager si sollicité;3:Contributeur ponctuel — partage ses pratiques de temps en temps;4:Multiplicateur — anime des retours d'expérience, documente ses outils;5:Levier d'équipe — impulse une dynamique de diffusion, produit des ressources réutilisables",
 };
 
+const RUBRICS_V2: Record<string, string> = {
+  ...RUBRICS,
+  prompts:
+    "1:Vague — instructions floues ou incomplètes, l'IA doit deviner l'intention, résultats aléatoires;2:Clair — instructions compréhensibles avec une intention explicite, adapte le niveau de détail à la tâche;3:Précis — donne du contexte utile, précise les contraintes et le résultat attendu, ajuste selon les réponses;4:Méthodique — sait trouver et réutiliser des prompts efficaces, adapte sa formulation selon l'outil et la tâche;5:Maîtrise — spécification \"verrouillée\" : périmètre + définitions + hypothèses + priorités en cas de conflit + critères de sortie/acceptation, minimise l'interprétation et la variabilité des réponses",
+  conception:
+    "1:Code direct — pas de phase conception, passage direct au code;2:Conception informelle — réflexion mentale ou notes rapides, pas de formalisation;3:Conception assistée — IA pour esquisser des designs, SDD ou schémas;4:Mode plan structuré — IA utilisée pour explorer options, challenger, documenter les décisions;5:Conception maîtrisée — boucle conception-validation itérative, alternatives comparées et trade-offs explicites avant de coder",
+  iteration:
+    "1:One-shot — une seule tentative, pas de retry si le résultat est insuffisant;2:Quelques itérations — 2-3 essais manuels, reformulation si la première réponse échoue;3:Itératif — retry systématique avec reformulation ciblée, sait identifier ce qui ne va pas pour corriger le tir;4:Planifié — découpage en étapes avant de commencer, chaque étape traitée et validée avant la suivante;5:IA sparring partner — dialogue continu avec l'IA pour explorer, affiner, challenger les réponses",
+  evaluation:
+    "1:Acceptation — acceptation des sorties sans vérification significative;2:Relecture superficielle — lecture rapide, pas de critères explicites;3:Vérif fonctionnelle — tests manuels ou automatisés, vérification du comportement;4:Regard archi — évaluation de la maintenabilité, cohérence avec les patterns existants;5:Vigilance avancée — détection active des hallucinations et erreurs subtiles, vérification croisée avec d'autres sources, checklist personnelle de contrôle",
+  alignment:
+    "1:Hors standards — code généré souvent non conforme, rework systématique;2:Rework fréquent — modifications régulières nécessaires pour aligner le code aux standards;3:Globalement aligné — code généralement conforme, ajustements mineurs, NFR basiques (logs, erreurs) pris en compte;4:Proactif — rules ou instructions dédiées pour respecter standards, archi et NFR (perf, sécurité, observabilité);5:Intégré — NFR systématiquement couverts, garde-fous automatisés (rules, linters, templates), peu ou pas de rework",
+  cost_control:
+    "1:Inconscient — pas de visibilité sur les coûts, usage sans limite;2:Aware — conscience des coûts, consulte sa consommation de temps en temps;3:Attentif — choisit le modèle selon la tâche (léger pour le simple, puissant pour le complexe), limite le contexte inutile;4:Économe — optimise activement ses usages (taille du contexte, regroupement de requêtes, évite les générations inutiles);5:Exemplaire — pratiques de sobriété maîtrisées, sait arbitrer coût vs qualité, partage ses astuces d'optimisation",
+};
+
 // Réponses réalistes par dimension et score (justification + exemples observés)
 const DEMO_RESPONSES: Record<
   string,
@@ -407,6 +423,83 @@ const TEMPLATES_DATA = [
       },
     ],
   },
+  {
+    id: "full-15-v2",
+    name: "Full - 15 dimensions (V2)",
+    dimensions: [
+      {
+        id: "tools",
+        title: "Maîtrise individuelle de l'outillage",
+        rubric: RUBRICS_V2.tools,
+      },
+      { id: "prompts", title: "Clarté des prompts", rubric: RUBRICS_V2.prompts },
+      {
+        id: "conception",
+        title: "Conception & mode plan (SDD, design)",
+        rubric: RUBRICS_V2.conception,
+      },
+      {
+        id: "context",
+        title: "Gestion du contexte",
+        rubric: RUBRICS_V2.context,
+      },
+      {
+        id: "iteration",
+        title: "Capacité d'itération",
+        rubric: RUBRICS_V2.iteration,
+      },
+      {
+        id: "evaluation",
+        title: "Évaluation critique",
+        rubric: RUBRICS_V2.evaluation,
+      },
+      {
+        id: "exploration",
+        title: "Exploration & veille (workflows, astuces, pertinence)",
+        rubric: RUBRICS_V2.exploration,
+      },
+      {
+        id: "alignment",
+        title: "Alignement archi & standards",
+        rubric: RUBRICS_V2.alignment,
+      },
+      {
+        id: "quality_usage",
+        title: "Usage pour la qualité (tests, review)",
+        rubric: RUBRICS_V2.quality_usage,
+      },
+      {
+        id: "learning",
+        title: "Montée en compétence via IA",
+        rubric: RUBRICS_V2.learning,
+      },
+      {
+        id: "cost_control",
+        title: "Maîtrise des coûts",
+        rubric: RUBRICS_V2.cost_control,
+      },
+      {
+        id: "integration",
+        title: "[Optionnel] Intégration dans les pratiques d'équipe",
+        rubric: RUBRICS_V2.integration,
+      },
+      {
+        id: "impact",
+        title: "[Optionnel] Impact sur la delivery",
+        rubric: RUBRICS_V2.impact,
+      },
+      {
+        id: "accompagnement",
+        title: "[Optionnel] Accompagnement & besoins",
+        rubric: RUBRICS_V2.accompagnement,
+      },
+      {
+        id: "scaling",
+        title: "[Optionnel] Mise à l'échelle des compétences & outils",
+        rubric: RUBRICS_V2.scaling,
+      },
+    ],
+  },
 ];
 
 async function main() {
@@ -452,7 +545,7 @@ async function main() {
 
   // Upsert répondants (candidates) par nom : create si absent, update si existant. Ne vide pas les évaluations.
   const template = await prisma.template.findUnique({
-    where: { id: "full-15" },
+    where: { id: "full-15-v2" },
   });
   if (!template) throw new Error("Template not found");
 

src/actions/admin.ts

@@ -4,7 +4,6 @@ import { prisma } from "@/lib/db";
 import { requireAuth, type ActionResult } from "@/lib/action-helpers";
 import { revalidatePath } from "next/cache";
 
-export type { ActionResult };
 
 export async function setUserRole(userId: string, role: "admin" | "evaluator"): Promise<ActionResult> {
   const session = await requireAuth();

src/actions/evaluations.ts

@@ -5,7 +5,6 @@ import { getEvaluation } from "@/lib/server-data";
 import { requireAuth, requireEvaluationAccess, type ActionResult } from "@/lib/action-helpers";
 import { revalidatePath } from "next/cache";
 
-export type { ActionResult };
 
 export async function fetchEvaluation(id: string): Promise<ActionResult<Awaited<ReturnType<typeof getEvaluation>>>> {
   const session = await requireAuth();

src/actions/share.ts

@@ -4,7 +4,6 @@ import { prisma } from "@/lib/db";
 import { requireAuth, requireEvaluationAccess, type ActionResult } from "@/lib/action-helpers";
 import { revalidatePath } from "next/cache";
 
-export type { ActionResult };
 
 export async function addShare(evaluationId: string, userId: string): Promise<ActionResult> {
   const session = await requireAuth();

src/app/templates/page.tsx

@@ -0,0 +1,283 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { getTemplates } from "@/lib/server-data";
+import { parseRubric, parseQuestions } from "@/lib/export-utils";
+import { TemplateCompareSelects } from "@/components/TemplateCompareSelects";
+
+interface PageProps {
+  searchParams: Promise<{ mode?: string; left?: string; right?: string; diffs?: string }>;
+}
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type TemplateDimension = Awaited<ReturnType<typeof getTemplates>>[number]["dimensions"][number];
+type Template = Awaited<ReturnType<typeof getTemplates>>[number];
+
+// ── Sub-components (server) ───────────────────────────────────────────────────
+
+function DimensionAccordion({ dim, index }: { dim: TemplateDimension; index: number }) {
+  const rubricLabels = parseRubric(dim.rubric);
+  const questions = parseQuestions(dim.suggestedQuestions);
+
+  return (
+    <details className="group border-t border-zinc-200 dark:border-zinc-600 first:border-t-0">
+      <summary className="flex cursor-pointer list-none items-center justify-between px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-700/50 transition-colors [&::-webkit-details-marker]:hidden">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="font-mono text-xs text-zinc-400 tabular-nums w-5 shrink-0">{index + 1}.</span>
+          <span className="text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate">{dim.title}</span>
+        </div>
+        <span className="shrink-0 text-zinc-500 text-sm ml-2 group-open:hidden">+</span>
+        <span className="shrink-0 text-zinc-500 text-sm ml-2 hidden group-open:inline">−</span>
+      </summary>
+
+      <div className="px-4 pb-3 space-y-2 bg-zinc-50/50 dark:bg-zinc-700/20">
+        {questions.length > 0 && (
+          <div className="rounded bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 p-2.5">
+            <p className="mb-1.5 text-xs font-medium text-zinc-500">Questions suggérées</p>
+            <ol className="list-decimal list-inside space-y-1 text-sm text-zinc-700 dark:text-zinc-200">
+              {questions.map((q, i) => (
+                <li key={i}>{q}</li>
+              ))}
+            </ol>
+          </div>
+        )}
+        <div className="rounded bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-600 p-2.5 font-mono text-xs space-y-0.5">
+          {rubricLabels.map((label, i) => (
+            <div key={i} className="text-zinc-600 dark:text-zinc-300">
+              <span className="text-cyan-600 dark:text-cyan-400">{i + 1}</span> {label}
+            </div>
+          ))}
+        </div>
+      </div>
+    </details>
+  );
+}
+
+function ListView({ templates }: { templates: Template[] }) {
+  if (templates.length === 0) {
+    return (
+      <div className="py-12 text-center font-mono text-sm text-zinc-500">
+        Aucun template disponible.
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+      {templates.map((t) => (
+        <div
+          key={t.id}
+          className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 shadow-sm dark:shadow-none overflow-hidden"
+        >
+          <div className="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-700/30">
+            <h2 className="font-medium text-zinc-800 dark:text-zinc-100">{t.name}</h2>
+            <span className="font-mono text-xs text-zinc-500">{t.dimensions.length} dim.</span>
+          </div>
+          <div>
+            {t.dimensions.map((dim, i) => (
+              <DimensionAccordion key={dim.id} dim={dim} index={i} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function CompareView({
+  templates,
+  leftId,
+  rightId,
+  onlyDiffs,
+}: {
+  templates: Template[];
+  leftId: string;
+  rightId: string;
+  onlyDiffs: boolean;
+}) {
+  const leftTemplate = templates.find((t) => t.id === leftId);
+  const rightTemplate = templates.find((t) => t.id === rightId);
+
+  // Collect all unique slugs, preserving order
+  const slugOrder = new Map<string, number>();
+  for (const t of [leftTemplate, rightTemplate]) {
+    if (!t) continue;
+    for (const dim of t.dimensions) {
+      if (!slugOrder.has(dim.slug)) slugOrder.set(dim.slug, dim.orderIndex);
+    }
+  }
+  const slugs = Array.from(slugOrder.keys()).sort(
+    (a, b) => (slugOrder.get(a) ?? 0) - (slugOrder.get(b) ?? 0)
+  );
+
+  // Pre-compute diffs
+  const diffsBySlugs = new Map<string, number[]>();
+  let totalDiffDims = 0;
+  for (const slug of slugs) {
+    const l = leftTemplate?.dimensions.find((d) => d.slug === slug);
+    const r = rightTemplate?.dimensions.find((d) => d.slug === slug);
+    const ll = l ? parseRubric(l.rubric) : [];
+    const rl = r ? parseRubric(r.rubric) : [];
+    const diff = [0, 1, 2, 3, 4].filter((i) => ll[i] !== rl[i]);
+    diffsBySlugs.set(slug, diff);
+    if (diff.length > 0) totalDiffDims++;
+  }
+
+  const visibleSlugs = onlyDiffs ? slugs.filter((s) => (diffsBySlugs.get(s)?.length ?? 0) > 0) : slugs;
+
+  const base = `?mode=compare&left=${leftId}&right=${rightId}`;
+  const diffsHref = onlyDiffs ? base : `${base}&diffs=1`;
+
+  return (
+    <div>
+      {templates.length > 2 && (
+        <TemplateCompareSelects
+          templates={templates.map((t) => ({ id: t.id, name: t.name }))}
+          leftId={leftId}
+          rightId={rightId}
+          onlyDiffs={onlyDiffs}
+        />
+      )}
+
+      {/* Summary + filter */}
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <p className="font-mono text-xs text-zinc-500">
+          <span className="font-semibold text-amber-600 dark:text-amber-400">{totalDiffDims}</span>
+          {" / "}
+          {slugs.length} dimensions modifiées
+        </p>
+        <Link
+          href={diffsHref}
+          className={`rounded border px-2.5 py-1 font-mono text-xs transition-colors ${
+            onlyDiffs
+              ? "border-amber-400 bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400"
+              : "border-zinc-300 dark:border-zinc-600 text-zinc-500 dark:text-zinc-400 hover:border-zinc-400"
+          }`}
+        >
+          △ uniquement les différences
+        </Link>
+      </div>
+
+      {/* Column headers */}
+      <div className="grid grid-cols-2 gap-px mb-1">
+        <div className="rounded-t-lg bg-zinc-100 dark:bg-zinc-700/60 px-4 py-2 font-mono text-xs font-semibold text-zinc-600 dark:text-zinc-300">
+          {leftTemplate?.name ?? "—"}
+        </div>
+        <div className="rounded-t-lg bg-zinc-100 dark:bg-zinc-700/60 px-4 py-2 font-mono text-xs font-semibold text-zinc-600 dark:text-zinc-300">
+          {rightTemplate?.name ?? "—"}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {visibleSlugs.map((slug, idx) => {
+          const leftDim = leftTemplate?.dimensions.find((d) => d.slug === slug);
+          const rightDim = rightTemplate?.dimensions.find((d) => d.slug === slug);
+          const leftLabels = leftDim ? parseRubric(leftDim.rubric) : [];
+          const rightLabels = rightDim ? parseRubric(rightDim.rubric) : [];
+          const title = (leftDim ?? rightDim)?.title ?? slug;
+          const diffLevels = diffsBySlugs.get(slug) ?? [];
+          const hasDiff = diffLevels.length > 0;
+
+          return (
+            <div
+              key={slug}
+              className="rounded-lg border border-zinc-200 dark:border-zinc-600 overflow-hidden"
+            >
+              <div className="px-4 py-2 border-b border-zinc-200 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-700/50 flex items-center justify-between gap-2">
+                <span className="font-medium text-sm text-zinc-800 dark:text-zinc-100">
+                  <span className="font-mono text-xs text-zinc-400 mr-1.5 tabular-nums">{idx + 1}.</span>
+                  {title}
+                </span>
+                {hasDiff && (
+                  <span className="shrink-0 font-mono text-xs px-1.5 py-0.5 rounded bg-zinc-200 dark:bg-zinc-600 text-zinc-500 dark:text-zinc-400">
+                    {diffLevels.length} Δ
+                  </span>
+                )}
+              </div>
+              <div className="grid grid-cols-2 divide-x divide-zinc-200 dark:divide-zinc-600">
+                {[
+                  { dim: leftDim, labels: leftLabels },
+                  { dim: rightDim, labels: rightLabels },
+                ].map(({ dim, labels }, col) => (
+                  <div key={col} className="p-3 font-mono text-xs space-y-1">
+                    {dim ? (
+                      labels.map((label, i) => {
+                        const differs = diffLevels.includes(i);
+                        return (
+                          <div key={i} className="flex gap-2 px-1.5 py-1">
+                            <span className="shrink-0 font-bold tabular-nums text-cyan-600 dark:text-cyan-400">
+                              {i + 1}
+                            </span>
+                            <span className={`text-zinc-600 dark:text-zinc-300 ${differs ? "bg-cyan-100/70 dark:bg-cyan-900/30 rounded px-0.5" : ""}`}>
+                              {label}
+                            </span>
+                          </div>
+                        );
+                      })
+                    ) : (
+                      <span className="text-zinc-400 italic">absent</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
+export default async function TemplatesPage({ searchParams }: PageProps) {
+  const session = await auth();
+  if (!session?.user) redirect("/auth/login");
+
+  const { mode, left, right, diffs } = await searchParams;
+  const templates = await getTemplates();
+
+  const isCompare = mode === "compare";
+  const leftId = left ?? templates[0]?.id ?? "";
+  const rightId = right ?? templates[1]?.id ?? templates[0]?.id ?? "";
+  const onlyDiffs = diffs === "1";
+
+  const compareHref = `?mode=compare&left=${leftId}&right=${rightId}`;
+
+  return (
+    <div>
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <h1 className="font-mono text-lg font-medium text-zinc-800 dark:text-zinc-100">Templates</h1>
+        <div className="inline-flex rounded border border-zinc-200 dark:border-zinc-600 bg-zinc-50 dark:bg-zinc-800/50 p-0.5">
+          <Link
+            href="?mode=list"
+            className={`rounded px-2.5 py-1 font-mono text-xs transition-colors ${
+              !isCompare
+                ? "bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-100 shadow-sm"
+                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
+            }`}
+          >
+            liste
+          </Link>
+          <Link
+            href={compareHref}
+            className={`rounded px-2.5 py-1 font-mono text-xs transition-colors ${
+              isCompare
+                ? "bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-100 shadow-sm"
+                : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"
+            }`}
+          >
+            comparer
+          </Link>
+        </div>
+      </div>
+
+      {isCompare ? (
+        <CompareView templates={templates} leftId={leftId} rightId={rightId} onlyDiffs={onlyDiffs} />
+      ) : (
+        <ListView templates={templates} />
+      )}
+    </div>
+  );
+}

src/components/Header.tsx

@@ -28,6 +28,12 @@ export function Header({ session }: { session: Session | null }) {
               >
                 /new
               </Link>
+              <Link
+                href="/templates"
+                className="text-zinc-500 hover:text-cyan-600 dark:text-zinc-400 dark:hover:text-cyan-400 transition-colors"
+              >
+                /templates
+              </Link>
               {session.user.role === "admin" && (
                 <Link
                   href="/admin"

src/components/RadarChart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import {
   Radar,
   RadarChart as RechartsRadar,
@@ -43,10 +44,21 @@ const DARK = {
 
 export function RadarChart({ data, compact }: RadarChartProps) {
   const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    // Defer chart until client so ResponsiveContainer can measure parent (avoids width/height -1 on SSR)
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   const c = theme === "dark" ? DARK : LIGHT;
 
   if (data.length === 0) return null;
 
+  // ResponsiveContainer needs real DOM dimensions; avoid -1 on SSR
+  if (!mounted) {
+    return <div className={compact ? "h-28 w-full" : "h-72 w-full"} aria-hidden />;
+  }
+
   return (
     <div className={compact ? "h-28 w-full" : "h-72 w-full"}>
       <ResponsiveContainer width="100%" height="100%">

src/components/TemplateCompareSelects.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+interface TemplateOption {
+  id: string;
+  name: string;
+}
+
+const selectClass =
+  "rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-2 py-1 font-mono text-xs text-zinc-800 dark:text-zinc-100 focus:border-cyan-500 focus:outline-none";
+
+export function TemplateCompareSelects({
+  templates,
+  leftId,
+  rightId,
+  onlyDiffs,
+}: {
+  templates: TemplateOption[];
+  leftId: string;
+  rightId: string;
+  onlyDiffs: boolean;
+}) {
+  const router = useRouter();
+
+  const push = (left: string, right: string) => {
+    const params = new URLSearchParams({ mode: "compare", left, right });
+    if (onlyDiffs) params.set("diffs", "1");
+    router.push(`/templates?${params.toString()}`);
+  };
+
+  return (
+    <div className="mb-4 flex flex-wrap items-center gap-4">
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-xs text-zinc-500">Gauche :</span>
+        <select value={leftId} onChange={(e) => push(e.target.value, rightId)} className={selectClass}>
+          {templates.map((t) => (
+            <option key={t.id} value={t.id}>{t.name}</option>
+          ))}
+        </select>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="font-mono text-xs text-zinc-500">Droite :</span>
+        <select value={rightId} onChange={(e) => push(leftId, e.target.value)} className={selectClass}>
+          {templates.map((t) => (
+            <option key={t.id} value={t.id}>{t.name}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}

src/lib/server-data.ts

@@ -73,6 +73,7 @@ export const getTemplates = cache(async () => {
     include: {
       dimensions: { orderBy: { orderIndex: "asc" } },
     },
+    orderBy: { id: "desc" },
   });
   return templates;
 });