@cat-factory/app 0.196.1 → 0.197.0

package/app/utils/tutorial.ts

@@ -0,0 +1,192 @@
+import type { NavGates } from '~/modular/nav-contributions'
+
+/**
+ * In-app tutorial tours: the pure data model + geometry, shared by the tour catalog
+ * (`modular/tutorial-tours.ts`), the tutorial store, and the coach-mark overlay
+ * (`components/tutorial/TutorialOverlay.vue`).
+ *
+ * A tour is DATA, not components: an ordered list of steps, each pointing at an existing
+ * on-screen control by its `data-testid` and carrying i18n keys for what to tell the user.
+ * That keeps tours declarative (a consumer deployment contributes its own through the
+ * `tutorialTours` slot via `registerAppModule`, exactly like nav items) and keeps the whole
+ * runtime — anchor tracking, tooltip placement, advance handling — in ONE overlay component
+ * that every tour shares.
+ */
+
+/** How a step advances to the next one. */
+export type TutorialAdvance =
+  /** The user reads and presses the tooltip's Next button (the default). */
+  | 'next'
+  /**
+   * The user clicks the highlighted control itself — the "now click this" steps. The
+   * tooltip shows a click hint instead of a Next button, so the app reacts to the real
+   * click (opening the real modal, creating the real task) and the tour follows along.
+   */
+  | 'target-click'
+
+/** Preferred tooltip side relative to the anchor; the overlay falls back when it can't fit. */
+export type TutorialPlacement = 'top' | 'bottom' | 'left' | 'right'
+
+export interface TutorialStep {
+  /** Stable id, unique within the tour (progress display + specs key off it). */
+  id: string
+  /**
+   * `data-testid` of the control this step points at. Absent = a centered card (intro /
+   * wrap-up steps). Reusing the e2e anchor vocabulary is deliberate: those ids are already
+   * the stable, behaviour-neutral way to name a control, and a tour stop is the same kind
+   * of consumer as a spec.
+   *
+   * A target names a KIND of control, not one instance: where several are on screen (one
+   * `task-card` per task, one `frame-add-task` per service) the first VISIBLE match wins,
+   * which may not be the one the user just produced. That is accepted rather than worked
+   * around — a tour teaches an affordance, and every match demonstrates the same one — so
+   * step copy must read correctly against any of them ("this is a task card", not "this is
+   * the task you just made").
+   */
+  target?: string
+  /**
+   * Fallback `data-testid`s tried in order when {@link target} is absent from the DOM —
+   * for controls that render under a different id in some states (e.g. a frame's add-task
+   * button on an empty frame).
+   */
+  altTargets?: readonly string[]
+  titleKey: string
+  bodyKey: string
+  placement?: TutorialPlacement
+  /** Defaults to `'next'`. */
+  advanceOn?: TutorialAdvance
+  /**
+   * How long the overlay waits for the target to appear before SKIPPING the step
+   * (ms, default {@link DEFAULT_TARGET_WAIT_MS}). A missing anchor is expected, not an
+   * error: the control may be RBAC-hidden, tier-hidden, or simply not part of this
+   * deployment, and a tour must degrade to the steps that do apply. Steps whose target
+   * only appears after the previous step's click (inside a just-opened modal) may need a
+   * longer wait.
+   */
+  waitForTargetMs?: number
+}
+
+export interface TutorialTour {
+  /** Stable id; completion is persisted against it, so renaming one resets its state. */
+  id: string
+  titleKey: string
+  descriptionKey: string
+  icon?: string
+  /** Sort key in the tour list; ties break on `id` so the order is deterministic. */
+  order: number
+  /**
+   * Availability gate over the same reactive {@link NavGates} the nav catalog uses, so a
+   * tour about a surface the caller can't reach (no board write, no GitHub) never shows.
+   * Absent = always offered.
+   */
+  when?: (gates: NavGates) => boolean
+  steps: readonly TutorialStep[]
+}
+
+/** How long the overlay polls for a step's anchor before auto-skipping the step. */
+export const DEFAULT_TARGET_WAIT_MS = 4000
+
+/** How often the overlay re-queries / re-measures its anchor (canvas pans, panels open). */
+export const TARGET_TRACK_INTERVAL_MS = 150
+
+/** Deterministic tour-list order: `order`, then `id`. */
+export function sortTours(tours: readonly TutorialTour[]): TutorialTour[] {
+  return [...tours].sort((a, b) => a.order - b.order || a.id.localeCompare(b.id))
+}
+
+/** A DOMRect-shaped box, structurally typed so the geometry below is unit-testable. */
+export interface TutorialRect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface CoachMarkLayout {
+  top: number
+  left: number
+  /** The side actually used (a preferred side that doesn't fit falls back), or centered. */
+  placement: TutorialPlacement | 'center'
+}
+
+/** Gap between the anchor's highlight ring and the tooltip card. */
+const TOOLTIP_GAP = 12
+/** Minimum distance the tooltip keeps from the viewport edges. */
+const VIEWPORT_MARGIN = 8
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), Math.max(min, max))
+
+/**
+ * Where the tooltip card goes for a given anchor. Pure geometry so the fallback rules are
+ * pinned by unit tests rather than eyeballed:
+ *
+ *  - no anchor ⇒ centered (intro / wrap-up steps);
+ *  - the preferred side is used when the card fits between anchor and viewport edge,
+ *    otherwise sides are tried `bottom → top → right → left`;
+ *  - nothing fits (tiny viewport) ⇒ the bottom position, clamped — partially covering the
+ *    anchor beats disappearing off-screen;
+ *  - the cross-axis is centered on the anchor and clamped to the viewport margin.
+ */
+export function computeCoachMarkLayout(
+  target: TutorialRect | null,
+  tooltip: { width: number; height: number },
+  viewport: { width: number; height: number },
+  preferred?: TutorialPlacement,
+): CoachMarkLayout {
+  if (!target) {
+    return {
+      top: Math.max(VIEWPORT_MARGIN, (viewport.height - tooltip.height) / 2),
+      left: Math.max(VIEWPORT_MARGIN, (viewport.width - tooltip.width) / 2),
+      placement: 'center',
+    }
+  }
+
+  const fits: Record<TutorialPlacement, boolean> = {
+    top: target.top - TOOLTIP_GAP - tooltip.height >= VIEWPORT_MARGIN,
+    bottom:
+      target.top + target.height + TOOLTIP_GAP + tooltip.height <=
+      viewport.height - VIEWPORT_MARGIN,
+    left: target.left - TOOLTIP_GAP - tooltip.width >= VIEWPORT_MARGIN,
+    right:
+      target.left + target.width + TOOLTIP_GAP + tooltip.width <= viewport.width - VIEWPORT_MARGIN,
+  }
+  const fallbackOrder: TutorialPlacement[] = ['bottom', 'top', 'right', 'left']
+  const placement =
+    preferred && fits[preferred]
+      ? preferred
+      : (fallbackOrder.find((side) => fits[side]) ?? 'bottom')
+
+  const centeredLeft = target.left + target.width / 2 - tooltip.width / 2
+  const centeredTop = target.top + target.height / 2 - tooltip.height / 2
+  const maxLeft = viewport.width - tooltip.width - VIEWPORT_MARGIN
+  const maxTop = viewport.height - tooltip.height - VIEWPORT_MARGIN
+
+  switch (placement) {
+    case 'top':
+      return {
+        top: target.top - TOOLTIP_GAP - tooltip.height,
+        left: clamp(centeredLeft, VIEWPORT_MARGIN, maxLeft),
+        placement,
+      }
+    case 'bottom':
+      return {
+        // Clamped: this is also the "nothing fits" fallback, where overlap is accepted.
+        top: clamp(target.top + target.height + TOOLTIP_GAP, VIEWPORT_MARGIN, maxTop),
+        left: clamp(centeredLeft, VIEWPORT_MARGIN, maxLeft),
+        placement,
+      }
+    case 'left':
+      return {
+        top: clamp(centeredTop, VIEWPORT_MARGIN, maxTop),
+        left: target.left - TOOLTIP_GAP - tooltip.width,
+        placement,
+      }
+    case 'right':
+      return {
+        top: clamp(centeredTop, VIEWPORT_MARGIN, maxTop),
+        left: target.left + target.width + TOOLTIP_GAP,
+        placement,
+      }
+  }
+}

package/i18n/locales/de.json

@@ -2132,7 +2132,8 @@
         "sandbox": "Sandbox öffnen",
         "shortcuts": "Tastenkürzel",
         "bugHunt": "Fehlerjagd",
-        "toggleUiMode": "Oberflächenmodus wechseln"
+        "toggleUiMode": "Oberflächenmodus wechseln",
+        "tutorial": "Tour starten"
       },
       "keywords": {
         "newPipeline": "pipeline agents chain",
@@ -2154,7 +2155,8 @@
         "sandbox": "sandbox prompt model test experiment judge fixture benchmark evaluate",
         "shortcuts": "keyboard shortcuts keys hotkeys cheatsheet help",
         "bugHunt": "fehler bug jagd triage backlog tracker nicht zugewiesen",
-        "toggleUiMode": "oberfläche modus einfach erweitert anzeigen ausblenden"
+        "toggleUiMode": "oberfläche modus einfach erweitert anzeigen ausblenden",
+        "tutorial": "tutorial tour einführung hilfe onboarding lernen grundlagen"
       }
     },
     "shortcuts": {
@@ -5906,5 +5908,90 @@
       "titleAny": "cat-factory mit Ihren Repositorys verbinden",
       "intro": "cat-factory funktioniert, indem es Pull Requests in Ihren Repositorys öffnet. Verbinden Sie Ihren Repository-Anbieter, um fortzufahren."
     }
+  },
+  "tutorial": {
+    "prompt": {
+      "title": "Eine kurze Tour machen?",
+      "intro": "Geführte Touren zeigen dir die App direkt auf diesem Bildschirm: Sie heben die echten Bedienelemente hervor und sagen dir, was du anklicken sollst.",
+      "start": "Starten",
+      "restart": "Wiederholen",
+      "completed": "Abgeschlossen",
+      "decline": "Nein danke",
+      "later": "Vielleicht später",
+      "empty": "Für deine Rolle auf diesem Board sind noch keine Touren verfügbar."
+    },
+    "overlay": {
+      "next": "Weiter",
+      "back": "Zurück",
+      "skip": "Tour beenden",
+      "done": "Fertig",
+      "progress": "Schritt {current} von {total}",
+      "ariaLabel": "Tutorial-Schritt",
+      "abridged": "1 Schritt wurde übersprungen: dieses Element gehört nicht zu diesem Board. | {count} Schritte wurden übersprungen: diese Elemente gehören nicht zu diesem Board.",
+      "searching": "Suche das hervorgehobene Element...",
+      "clickHint": "Klicke auf das hervorgehobene Element, um fortzufahren"
+    },
+    "tours": {
+      "boardBasics": {
+        "title": "Board-Grundlagen",
+        "description": "Orientierung: das Board, die Seitenleiste und die Befehlspalette.",
+        "steps": {
+          "welcome": {
+            "title": "Willkommen!",
+            "body": "Das ist dein Delivery-Board: Hier planst du Arbeit, Agenten übernehmen sie, und du prüfst die Ergebnisse. Diese kurze Tour zeigt dir die wichtigsten Bedienelemente."
+          },
+          "canvas": {
+            "title": "Das Board",
+            "body": "Services, Module und Aufgaben liegen auf dieser Fläche. Ziehe zum Verschieben, scrolle zum Zoomen und klicke auf eine Karte, um Details zu sehen."
+          },
+          "sidebar": {
+            "title": "Die Seitenleiste",
+            "body": "Alles Weitere findest du hier: Pipelines erstellen, Repositories und Integrationen verbinden, Workspace-Einstellungen."
+          },
+          "commandBar": {
+            "title": "Die Befehlspalette",
+            "body": "Der schnellste Weg zu jeder Aktion: öffnen und lostippen. Von dort kannst du dieses Tutorial jederzeit neu starten."
+          },
+          "toolbar": {
+            "title": "Board-Steuerung",
+            "body": "Mit diesen Steuerelementen zoomst du hinein und heraus oder bringst das ganze Board ins Bild."
+          },
+          "finish": {
+            "title": "Das war die Übersicht",
+            "body": "Jetzt kennst du dich aus. Probiere die nächste Tour, um deine erste Aufgabe zu erstellen und auszuführen, oder komm später über die Befehlspalette zurück."
+          }
+        }
+      },
+      "firstTask": {
+        "title": "Erstelle deine erste Aufgabe",
+        "description": "Füge einem Service eine Aufgabe hinzu und sieh zu, wie sie auf dem Board erscheint.",
+        "steps": {
+          "intro": {
+            "title": "Lass uns eine Aufgabe erstellen",
+            "body": "Eine Aufgabe beschreibt ein gewünschtes Ergebnis; eine Agenten-Pipeline liefert es. Diese Tour führt dich Schritt für Schritt durch das Erstellen einer echten Aufgabe."
+          },
+          "addTask": {
+            "title": "Aufgabe hinzufügen",
+            "body": "Jeder Service-Rahmen hat einen Hinzufügen-Button in seiner Kopfzeile."
+          },
+          "describe": {
+            "title": "Beschreibe das Ergebnis",
+            "body": "Gib der Aufgabe einen kurzen Titel, der sagt, was am Ende erreicht sein soll. Normale Sprache genügt."
+          },
+          "create": {
+            "title": "Erstelle die Aufgabe",
+            "body": "Wenn die Beschreibung passt, erstelle die Aufgabe."
+          },
+          "card": {
+            "title": "Aufgabenkarten",
+            "body": "Das ist eine Aufgabenkarte. Von ihr aus startest du die Pipeline, verfolgst den Fortschritt und öffnest Ergebnisse."
+          },
+          "finish": {
+            "title": "Gut gemacht",
+            "body": "Das ist der Kernablauf: Aufgabe beschreiben, ausführen, Ergebnis prüfen. Entdecke die weiteren Touren, wann immer du magst."
+          }
+        }
+      }
+    }
   }
 }

package/i18n/locales/en.json

@@ -2154,7 +2154,8 @@
         "sandbox": "Open Sandbox",
         "shortcuts": "Keyboard shortcuts",
         "bugHunt": "Bug hunt",
-        "toggleUiMode": "Switch interface mode"
+        "toggleUiMode": "Switch interface mode",
+        "tutorial": "Take a tour"
       },
       "keywords": {
         "newPipeline": "pipeline agents chain",
@@ -2176,7 +2177,8 @@
         "sandbox": "sandbox prompt model test experiment judge fixture benchmark evaluate",
         "shortcuts": "keyboard shortcuts keys hotkeys cheatsheet help",
         "bugHunt": "bug hunt triage backlog issue tracker unassigned",
-        "toggleUiMode": "interface mode basic advanced simple expert show hide"
+        "toggleUiMode": "interface mode basic advanced simple expert show hide",
+        "tutorial": "tutorial onboarding tour guide help learn basics"
       }
     },
     "shortcuts": {
@@ -6110,5 +6112,93 @@
       "titleAny": "Connect cat-factory to your repositories",
       "intro": "cat-factory works by opening pull requests on your repositories. Connect your repository host to continue."
     }
+  },
+  "tutorial": {
+    "prompt": {
+      "title": "Take a quick tour?",
+      "intro": "Guided tours walk you through the app right on this screen: they highlight the actual controls and tell you what to click.",
+      "start": "Start",
+      "restart": "Repeat",
+      "completed": "Completed",
+      "decline": "No thanks",
+      "later": "Maybe later",
+      "empty": "No tours are available for your role on this board yet."
+    },
+    "overlay": {
+      "next": "Next",
+      "back": "Back",
+      "skip": "End tour",
+      "done": "Finish",
+      "progress": "Step {current} of {total}",
+      "ariaLabel": "Tutorial step",
+      "abridged": "1 step was skipped: that control is not part of this board. | {count} steps were skipped: those controls are not part of this board.",
+      "@abridged": {
+        "description": "Shown on a tour's final card when steps were skipped. Needs the plural forms of the target language (pl/uk take three: one | few | many); {count} is the number of skipped steps."
+      },
+      "searching": "Looking for the highlighted control...",
+      "clickHint": "Click the highlighted control to continue"
+    },
+    "tours": {
+      "boardBasics": {
+        "title": "Board basics",
+        "description": "Find your way around: the board, the sidebar, and the command palette.",
+        "steps": {
+          "welcome": {
+            "title": "Welcome!",
+            "body": "This is your delivery board: you plan work here, agents pick it up, and you review the results. This short tour points out the main controls."
+          },
+          "canvas": {
+            "title": "The board",
+            "body": "Services, modules, and tasks live on this canvas. Drag to pan, scroll to zoom, and click any card to inspect it."
+          },
+          "sidebar": {
+            "title": "The sidebar",
+            "body": "Everything else lives here: building pipelines, connecting repositories and integrations, and workspace settings."
+          },
+          "commandBar": {
+            "title": "The command palette",
+            "body": "The fastest way to reach any action: open it and start typing. You can restart this tutorial from there at any time."
+          },
+          "toolbar": {
+            "title": "Board controls",
+            "body": "Zoom in and out or fit the whole board into view with these controls."
+          },
+          "finish": {
+            "title": "That's the layout",
+            "body": "You know your way around now. Try the next tour to create and run your first task, or come back later via the command palette."
+          }
+        }
+      },
+      "firstTask": {
+        "title": "Create your first task",
+        "description": "Add a task to a service and see it appear on the board.",
+        "steps": {
+          "intro": {
+            "title": "Let's create a task",
+            "body": "A task describes an outcome you want; an agent pipeline delivers it. This tour walks you through creating one for real."
+          },
+          "addTask": {
+            "title": "Add a task",
+            "body": "Every service frame has an add button in its header."
+          },
+          "describe": {
+            "title": "Describe the outcome",
+            "body": "Give the task a short title that says what should be true when it is done. Plain language is fine."
+          },
+          "create": {
+            "title": "Create it",
+            "body": "When the description feels right, create the task."
+          },
+          "card": {
+            "title": "Task cards",
+            "body": "This is a task card. From one you can start the pipeline, watch progress, and open the results."
+          },
+          "finish": {
+            "title": "Nice work",
+            "body": "That is the core loop: describe a task, run it, review the result. Explore the other tours whenever you like."
+          }
+        }
+      }
+    }
   }
 }

package/i18n/locales/es.json

@@ -2072,7 +2072,8 @@
         "sandbox": "Abrir el entorno de pruebas",
         "shortcuts": "Atajos de teclado",
         "bugHunt": "Caza de errores",
-        "toggleUiMode": "Cambiar el modo de interfaz"
+        "toggleUiMode": "Cambiar el modo de interfaz",
+        "tutorial": "Hacer un recorrido"
       },
       "keywords": {
         "newPipeline": "canalización agentes cadena pipeline",
@@ -2094,7 +2095,8 @@
         "sandbox": "entorno de pruebas prompt modelo prueba experimento juez fixture benchmark evaluar",
         "shortcuts": "atajos teclado teclas ayuda",
         "bugHunt": "error bug caza triaje backlog incidencias sin asignar",
-        "toggleUiMode": "interfaz modo básico avanzado mostrar ocultar"
+        "toggleUiMode": "interfaz modo básico avanzado mostrar ocultar",
+        "tutorial": "tutorial recorrido guía ayuda aprender introducción"
       }
     },
     "integrationsHub": {
@@ -5894,5 +5896,90 @@
       "titleAny": "Conecta cat-factory con tus repositorios",
       "intro": "cat-factory funciona abriendo solicitudes de incorporación de cambios en tus repositorios. Conecta tu proveedor de repositorios para continuar."
     }
+  },
+  "tutorial": {
+    "prompt": {
+      "title": "¿Hacer un recorrido rápido?",
+      "intro": "Los recorridos guiados te muestran la aplicación directamente en esta pantalla: resaltan los controles reales y te dicen dónde hacer clic.",
+      "start": "Empezar",
+      "restart": "Repetir",
+      "completed": "Completado",
+      "decline": "No, gracias",
+      "later": "Quizás más tarde",
+      "empty": "Todavía no hay recorridos disponibles para tu rol en este tablero."
+    },
+    "overlay": {
+      "next": "Siguiente",
+      "back": "Atrás",
+      "skip": "Terminar recorrido",
+      "done": "Finalizar",
+      "progress": "Paso {current} de {total}",
+      "ariaLabel": "Paso del tutorial",
+      "abridged": "Se omitió 1 paso: ese control no forma parte de este tablero. | Se omitieron {count} pasos: esos controles no forman parte de este tablero.",
+      "searching": "Buscando el control resaltado...",
+      "clickHint": "Haz clic en el control resaltado para continuar"
+    },
+    "tours": {
+      "boardBasics": {
+        "title": "Conceptos básicos del tablero",
+        "description": "Orientación básica: el tablero, la barra lateral y la paleta de comandos.",
+        "steps": {
+          "welcome": {
+            "title": "Te damos la bienvenida",
+            "body": "Este es tu tablero de entrega: aquí planificas el trabajo, los agentes lo ejecutan y tú revisas los resultados. Este breve recorrido muestra los controles principales."
+          },
+          "canvas": {
+            "title": "El tablero",
+            "body": "Los servicios, módulos y tareas viven en este lienzo. Arrastra para desplazarte, usa la rueda para hacer zoom y haz clic en cualquier tarjeta para inspeccionarla."
+          },
+          "sidebar": {
+            "title": "La barra lateral",
+            "body": "Aquí está todo lo demás: crear canalizaciones, conectar repositorios e integraciones y los ajustes del espacio de trabajo."
+          },
+          "commandBar": {
+            "title": "La paleta de comandos",
+            "body": "La forma más rápida de llegar a cualquier acción: ábrela y empieza a escribir. Desde ahí puedes reiniciar este tutorial en cualquier momento."
+          },
+          "toolbar": {
+            "title": "Controles del tablero",
+            "body": "Con estos controles acercas, alejas o ajustas todo el tablero a la vista."
+          },
+          "finish": {
+            "title": "Eso es todo",
+            "body": "Ya sabes orientarte. Prueba el siguiente recorrido para crear y ejecutar tu primera tarea, o vuelve más tarde desde la paleta de comandos."
+          }
+        }
+      },
+      "firstTask": {
+        "title": "Crea tu primera tarea",
+        "description": "Añade una tarea a un servicio y mírala aparecer en el tablero.",
+        "steps": {
+          "intro": {
+            "title": "Vamos a crear una tarea",
+            "body": "Una tarea describe un resultado que quieres; una canalización de agentes lo entrega. Este recorrido te guía para crear una de verdad."
+          },
+          "addTask": {
+            "title": "Añadir una tarea",
+            "body": "Cada marco de servicio tiene un botón de añadir en su cabecera."
+          },
+          "describe": {
+            "title": "Describe el resultado",
+            "body": "Da a la tarea un título corto que diga qué debe cumplirse cuando esté terminada. El lenguaje normal es suficiente."
+          },
+          "create": {
+            "title": "Créala",
+            "body": "Cuando la descripción te convenza, crea la tarea."
+          },
+          "card": {
+            "title": "Tarjetas de tarea",
+            "body": "Esta es una tarjeta de tarea. Desde ella puedes iniciar la canalización, seguir el progreso y abrir los resultados."
+          },
+          "finish": {
+            "title": "Buen trabajo",
+            "body": "Ese es el ciclo principal: describir una tarea, ejecutarla y revisar el resultado. Explora los demás recorridos cuando quieras."
+          }
+        }
+      }
+    }
   }
 }

package/i18n/locales/fr.json

@@ -2072,7 +2072,8 @@
         "sandbox": "Ouvrir le bac à sable",
         "shortcuts": "Raccourcis clavier",
         "bugHunt": "Chasse aux bugs",
-        "toggleUiMode": "Changer le mode d'interface"
+        "toggleUiMode": "Changer le mode d'interface",
+        "tutorial": "Faire une visite guidée"
       },
       "keywords": {
         "newPipeline": "pipeline agents chaîne",
@@ -2094,7 +2095,8 @@
         "sandbox": "bac à sable prompt modèle test expérience juge fixture benchmark évaluer",
         "shortcuts": "raccourcis clavier touches aide",
         "bugHunt": "bug chasse tri backlog tickets non assignés",
-        "toggleUiMode": "interface mode simple avancé afficher masquer"
+        "toggleUiMode": "interface mode simple avancé afficher masquer",
+        "tutorial": "tutoriel visite guide aide apprendre découverte"
       }
     },
     "integrationsHub": {
@@ -5894,5 +5896,90 @@
       "titleAny": "Connecter cat-factory à vos dépôts",
       "intro": "cat-factory fonctionne en ouvrant des pull requests sur vos dépôts. Connectez votre hébergeur de dépôts pour continuer."
     }
+  },
+  "tutorial": {
+    "prompt": {
+      "title": "Faire une visite rapide ?",
+      "intro": "Les visites guidées vous montrent l'application directement à l'écran : elles mettent en évidence les vrais contrôles et vous indiquent où cliquer.",
+      "start": "Commencer",
+      "restart": "Refaire",
+      "completed": "Terminée",
+      "decline": "Non merci",
+      "later": "Peut-être plus tard",
+      "empty": "Aucune visite n'est encore disponible pour votre rôle sur ce tableau."
+    },
+    "overlay": {
+      "next": "Suivant",
+      "back": "Retour",
+      "skip": "Terminer la visite",
+      "done": "Terminer",
+      "progress": "Étape {current} sur {total}",
+      "ariaLabel": "Étape du tutoriel",
+      "abridged": "1 étape a été ignorée : ce contrôle ne fait pas partie de ce tableau. | {count} étapes ont été ignorées : ces contrôles ne font pas partie de ce tableau.",
+      "searching": "Recherche du contrôle mis en évidence...",
+      "clickHint": "Cliquez sur le contrôle mis en évidence pour continuer"
+    },
+    "tours": {
+      "boardBasics": {
+        "title": "Les bases du tableau",
+        "description": "Repérez-vous : le tableau, la barre latérale et la palette de commandes.",
+        "steps": {
+          "welcome": {
+            "title": "Bienvenue !",
+            "body": "Voici votre tableau de livraison : vous y planifiez le travail, les agents l'exécutent et vous vérifiez les résultats. Cette courte visite présente les principaux contrôles."
+          },
+          "canvas": {
+            "title": "Le tableau",
+            "body": "Les services, modules et tâches vivent sur ce canevas. Faites glisser pour vous déplacer, faites défiler pour zoomer et cliquez sur une carte pour l'inspecter."
+          },
+          "sidebar": {
+            "title": "La barre latérale",
+            "body": "Tout le reste se trouve ici : créer des pipelines, connecter des dépôts et des intégrations, et les paramètres de l'espace de travail."
+          },
+          "commandBar": {
+            "title": "La palette de commandes",
+            "body": "Le moyen le plus rapide d'atteindre n'importe quelle action : ouvrez-la et commencez à taper. Vous pouvez y relancer ce tutoriel à tout moment."
+          },
+          "toolbar": {
+            "title": "Contrôles du tableau",
+            "body": "Ces contrôles permettent de zoomer ou d'ajuster tout le tableau à la vue."
+          },
+          "finish": {
+            "title": "Voilà pour la disposition",
+            "body": "Vous savez maintenant vous repérer. Essayez la visite suivante pour créer et lancer votre première tâche, ou revenez plus tard via la palette de commandes."
+          }
+        }
+      },
+      "firstTask": {
+        "title": "Créez votre première tâche",
+        "description": "Ajoutez une tâche à un service et regardez-la apparaître sur le tableau.",
+        "steps": {
+          "intro": {
+            "title": "Créons une tâche",
+            "body": "Une tâche décrit un résultat souhaité ; un pipeline d'agents le livre. Cette visite vous guide pour en créer une pour de vrai."
+          },
+          "addTask": {
+            "title": "Ajouter une tâche",
+            "body": "Chaque cadre de service a un bouton d'ajout dans son en-tête."
+          },
+          "describe": {
+            "title": "Décrivez le résultat",
+            "body": "Donnez à la tâche un titre court qui dit ce qui doit être vrai une fois terminée. Un langage simple suffit."
+          },
+          "create": {
+            "title": "Créez-la",
+            "body": "Quand la description vous convient, créez la tâche."
+          },
+          "card": {
+            "title": "Cartes de tâche",
+            "body": "Voici une carte de tâche. Depuis une carte, vous pouvez lancer le pipeline, suivre la progression et ouvrir les résultats."
+          },
+          "finish": {
+            "title": "Bien joué",
+            "body": "C'est la boucle principale : décrire une tâche, la lancer, vérifier le résultat. Explorez les autres visites quand vous voulez."
+          }
+        }
+      }
+    }
   }
 }