feat(eleves+chat): QR code, partage par code (page /e), date au survol

- Espace élève : bouton « QR code » → modale plein écran (QR + « Scannez pour
  rejoindre »). Toggle « Masquer le code » : partage un lien sans le token
  (/e) + affiche le code à saisir. Nouvelle page /e (saisie du code, responsive).
- Fix : la saisie du code depuis /e renvoyait « Lien invalide » (une requête
  annulée — double-effet React/navigation client — était traitée comme une
  erreur). On ignore désormais AbortError dans l'espace élève.
- Chat : date d'envoi affichée au survol d'un message (createdAt remonté depuis
  la base → métadonnées → MessageItem), masquée pour l'élève.
- Indicateur de Cadre en haut du fil fondu dans le fond (canvas + accent-soft) ;
  composer aligné sur le fond ; saisie épurée.
- Dépendance : qrcode.react (génération du QR côté client, souveraine).

Author: loan-talvat

apps/api/src/services/chat-stream.ts

@@ -98,7 +98,7 @@ export function streamChatResponse(
     messageMetadata: ({ part }) => {
       if (part.type !== 'finish') return undefined;
       totalTokens = part.totalUsage.totalTokens;
-      return { totalTokens, sources: opts.sources };
+      return { totalTokens, sources: opts.sources, createdAt: new Date().toISOString() };
     },
     onFinish: async ({ messages: finalMessages }) => {
       try {

apps/api/src/services/conversations.ts

@@ -20,6 +20,7 @@ export interface StoredMessageRow {
   role: string;
   parts: Array<Record<string, unknown>>;
   metadata: Record<string, unknown> | null;
+  createdAt: Date;
 }
 
 function toSummary(row: Conversation): ConversationSummaryRow {
@@ -151,6 +152,7 @@ export async function getMessages(
       role: messages.role,
       parts: messages.parts,
       metadata: messages.metadata,
+      createdAt: messages.createdAt,
     })
     .from(messages)
     .where(eq(messages.conversationId, conversationId))

apps/web/app/_components/access-detail.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { QRCodeSVG } from 'qrcode.react';
 import { useEffect, useState } from 'react';
 import type { AccessDetailDTO } from '@/lib/types';
 import {
@@ -9,11 +10,53 @@ import {
   ExternalLinkIcon,
   PlusIcon,
   PowerIcon,
+  QrIcon,
   SparkIcon,
   TrashIcon,
+  XIcon,
 } from './icons';
 import { SupervisionDrawer } from './supervision-drawer';
 
+/** Modale plein écran : QR code de l'accès + consigne « Scannez ». */
+function QrModal({ url, code, onClose }: { url: string; code?: string; onClose: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6">
+      <button type="button" aria-label="Fermer" onClick={onClose} className="absolute inset-0" />
+      <div className="relative z-10 w-full max-w-md animate-pop-in rounded-card bg-surface p-7 text-center shadow-pop">
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Fermer"
+          className="absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-button text-muted-foreground transition-colors hover:bg-surface-muted hover:text-foreground"
+        >
+          <XIcon className="size-5" />
+        </button>
+        <h2 className="font-display text-2xl font-bold tracking-tight">Scannez pour rejoindre</h2>
+        <p className="mt-1 text-sm text-muted-foreground">Avec l’appareil photo du téléphone.</p>
+        {/* Fond blanc requis pour la lisibilité du QR code (contraste). */}
+        <div className="mx-auto mt-5 w-fit rounded-2xl bg-white p-4 shadow-card">
+          <QRCodeSVG value={url} size={232} marginSize={1} className="h-auto w-[min(60vw,232px)]" />
+        </div>
+        {code ? (
+          <p className="mt-5 text-sm text-muted-foreground">
+            Puis saisissez le code&nbsp;:{' '}
+            <span className="font-mono font-bold tracking-wider text-foreground">{code}</span>
+          </p>
+        ) : null}
+        <code className="mt-3 block truncate text-xs text-muted-foreground">{url}</code>
+      </div>
+    </div>
+  );
+}
+
 function CopyLinkButton({ url }: { url: string }) {
   const [copied, setCopied] = useState(false);
   return (
@@ -55,12 +98,16 @@ export function AccessDetail({
   const [origin, setOrigin] = useState('');
   const [newName, setNewName] = useState('');
   const [supervising, setSupervising] = useState<{ id: string; name: string } | null>(null);
+  const [qrOpen, setQrOpen] = useState(false);
+  const [hideCode, setHideCode] = useState(false);
 
   useEffect(() => {
     setOrigin(window.location.origin);
   }, []);
 
-  const link = `${origin}/e/${access.token}`;
+  // `hideCode` : on partage un lien sans le code (`/e`) ; l'élève saisit le code.
+  const baseLink = `${origin}/e`;
+  const link = hideCode ? baseLink : `${origin}/e/${access.token}`;
 
   return (
     <div className="animate-fade-in space-y-5">
@@ -126,27 +173,66 @@ export function AccessDetail({
       </section>
 
       <section className="rounded-card border border-border bg-surface p-5 shadow-card">
-        <h3 className="text-sm font-bold">Lien d’accès élève</h3>
-        <p className="mt-0.5 text-xs text-muted-foreground">
-          Partagez ce lien avec vos élèves. Ils choisissent leur prénom et discutent avec
-          l’assistant <em>sous ce Cadre</em>. (Données fictives — préfiguration d’un compte élève.)
-        </p>
-        {access.active ? (
-          <div className="mt-3 flex flex-wrap items-center gap-2">
-            <code className="min-w-0 flex-1 truncate rounded-button border border-border bg-surface-muted px-3 py-2 font-mono text-sm">
-              {link}
-            </code>
-            <CopyLinkButton url={link} />
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1.5 rounded-button border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-muted"
-            >
-              Ouvrir
-              <ExternalLinkIcon className="size-3.5" />
-            </a>
+        <div className="flex flex-wrap items-start justify-between gap-2">
+          <div className="min-w-0">
+            <h3 className="text-sm font-bold">Lien d’accès élève</h3>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Partagez ce lien avec vos élèves. Ils choisissent leur prénom et discutent avec
+              l’assistant <em>sous ce Cadre</em>.
+            </p>
           </div>
+          <button
+            type="button"
+            aria-pressed={hideCode}
+            onClick={() => setHideCode((v) => !v)}
+            title="Partager un lien sans le code : l’élève saisit le code lui-même."
+            className={`inline-flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${
+              hideCode
+                ? 'border-accent/40 bg-accent-soft text-accent'
+                : 'border-border text-muted-foreground hover:bg-surface-muted hover:text-foreground'
+            }`}
+          >
+            {hideCode ? <CheckIcon className="size-3.5" /> : null}
+            Masquer le code
+          </button>
+        </div>
+        {access.active ? (
+          <>
+            <div className="mt-3 flex flex-wrap items-center gap-2">
+              <code className="min-w-0 flex-1 truncate rounded-button border border-border bg-surface-muted px-3 py-2 font-mono text-sm">
+                {link}
+              </code>
+              <CopyLinkButton url={link} />
+              <a
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-button border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-muted"
+              >
+                Ouvrir
+                <ExternalLinkIcon className="size-3.5" />
+              </a>
+              <button
+                type="button"
+                onClick={() => setQrOpen(true)}
+                aria-label="Afficher le QR code"
+                title="Afficher le QR code"
+                className="inline-flex items-center gap-1.5 rounded-button border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-surface-muted"
+              >
+                <QrIcon className="size-4" />
+                QR code
+              </button>
+            </div>
+            {hideCode ? (
+              <p className="mt-2 rounded-button bg-surface-muted px-3 py-2 text-xs text-muted-foreground">
+                Les élèves vont sur <span className="font-mono text-foreground">{baseLink}</span>{' '}
+                puis saisissent le code&nbsp;:{' '}
+                <span className="font-mono font-bold tracking-wider text-foreground">
+                  {access.token}
+                </span>
+              </p>
+            ) : null}
+          </>
         ) : (
           <p className="mt-3 rounded-button border border-dashed border-border bg-surface-muted px-3 py-2.5 text-sm text-muted-foreground">
             Lien désactivé — réactivez l’espace pour le partager à nouveau.
@@ -237,6 +323,14 @@ export function AccessDetail({
           onClose={() => setSupervising(null)}
         />
       ) : null}
+
+      {qrOpen && access.active ? (
+        <QrModal
+          url={link}
+          code={hideCode ? access.token : undefined}
+          onClose={() => setQrOpen(false)}
+        />
+      ) : null}
     </div>
   );
 }

apps/web/app/_components/chat-panel.tsx

@@ -37,7 +37,7 @@ export function ChatPanel({
           id: m.id,
           role: m.role,
           parts: m.parts,
-          metadata: m.metadata ?? undefined,
+          metadata: { ...(m.metadata ?? {}), createdAt: m.createdAt },
         })) as unknown as UIMessage[];
         setState({
           kind: 'ready',

apps/web/app/_components/chat-thread.tsx

@@ -116,17 +116,17 @@ export function ChatThread({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex-1 overflow-y-auto">
+      <div className="relative flex-1 overflow-y-auto">
+        {activeFramework ? (
+          <div className="pointer-events-none sticky top-0 z-10 flex justify-center bg-gradient-to-b from-canvas via-canvas/85 to-transparent px-4 pt-3 pb-5">
+            <span className="pointer-events-auto inline-flex items-center gap-1.5 rounded-full bg-accent-soft px-3 py-1 text-xs font-medium text-accent">
+              <SparkIcon className="size-3.5" />
+              Cadre&nbsp;: {activeFramework.name}
+            </span>
+          </div>
+        ) : null}
         <div className="mx-auto max-w-3xl px-4 pb-4">
-          {activeFramework ? (
-            <div className="sticky top-0 z-10 -mx-4 flex justify-center bg-background/80 px-4 py-2.5 backdrop-blur">
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/90 px-3 py-1 text-xs font-medium text-muted-foreground shadow-card">
-                <SparkIcon className="size-3.5 text-accent" />
-                Cadre&nbsp;: <span className="text-foreground">{activeFramework.name}</span>
-              </span>
-            </div>
-          ) : null}
-          <div className={`space-y-7 ${activeFramework ? 'pt-4' : 'pt-8'}`}>
+          <div className={`space-y-7 ${activeFramework ? 'pt-2' : 'pt-8'}`}>
             {messages.length === 0 ? (
               <EmptyState onPick={(text) => sendMessage({ text })} />
             ) : (

apps/web/app/_components/composer.tsx

@@ -164,7 +164,7 @@ export function Composer({
   const model = MODEL_OPTIONS[modelTier];
 
   return (
-    <div className="bg-background/80 backdrop-blur-sm">
+    <div className="bg-canvas">
       <div className="mx-auto max-w-3xl px-4 pt-3 pb-4">
         <form
           onSubmit={(e) => {

apps/web/app/_components/icons.tsx

@@ -255,6 +255,17 @@ export function PowerIcon(props: IconProps) {
   );
 }
 
+export function QrIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="3" y="3" width="7" height="7" rx="1" />
+      <rect x="14" y="3" width="7" height="7" rx="1" />
+      <rect x="3" y="14" width="7" height="7" rx="1" />
+      <path d="M14 14h3v3M21 17v4h-4M21 14v.01M17 21v.01" />
+    </Svg>
+  );
+}
+
 export function LockIcon(props: IconProps) {
   return (
     <Svg {...props}>

apps/web/app/_components/message-item.tsx

@@ -22,6 +22,14 @@ function partsToText(message: UIMessage): string {
     .join('');
 }
 
+/** Date d'envoi formatée proprement (ex. « 1 juin 2026 à 14:32 »). */
+function formatDate(iso?: string): string | null {
+  if (!iso) return null;
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return null;
+  return new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long', timeStyle: 'short' }).format(d);
+}
+
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
   const copy = async () => {
@@ -56,25 +64,30 @@ export function MessageItem({
   variant?: MessageVariant;
 }) {
   const text = partsToText(message);
-  const metadata = message.metadata as { totalTokens?: number; sources?: ChatSource[] } | undefined;
-  const tokens = metadata?.totalTokens;
+  const metadata = message.metadata as { sources?: ChatSource[]; createdAt?: string } | undefined;
   const sources = metadata?.sources ?? [];
   // L'élève ne voit ni les sources ni les métadonnées : interface épurée.
   const showSources = variant !== 'student' && !streaming && sources.length > 0;
   const showMeta = variant !== 'student' && !streaming && Boolean(text);
+  const dateLabel = variant !== 'student' ? formatDate(metadata?.createdAt) : null;
 
   if (message.role === 'user') {
     return (
-      <div className="flex animate-rise-in justify-end">
+      <div className="group flex animate-rise-in flex-col items-end">
         <div className="max-w-[82%] whitespace-pre-wrap rounded-card rounded-tr-sm bg-accent-soft px-4 py-2.5 text-[0.95rem] leading-relaxed text-foreground shadow-card">
           {text}
         </div>
+        {dateLabel ? (
+          <time className="mt-1 px-1 text-[0.7rem] text-muted-foreground/70 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+            {dateLabel}
+          </time>
+        ) : null}
       </div>
     );
   }
 
   return (
-    <div className="flex animate-rise-in gap-3">
+    <div className="group flex animate-rise-in gap-3">
       <div
         aria-hidden
         className="mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground shadow-card"
@@ -122,8 +135,10 @@ export function MessageItem({
         {showMeta ? (
           <div className="mt-1.5 flex items-center gap-2">
             <CopyButton text={text} />
-            {typeof tokens === 'number' ? (
-              <span className="text-xs text-muted-foreground/80">· {tokens} tokens</span>
+            {dateLabel ? (
+              <time className="text-xs text-muted-foreground/60 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
+                · {dateLabel}
+              </time>
             ) : null}
           </div>
         ) : null}

apps/web/app/_components/student-chat-thread.tsx

@@ -121,7 +121,7 @@ export function StudentChatThread({
         </div>
       </div>
 
-      <div className="bg-background/80 backdrop-blur-sm">
+      <div className="bg-canvas">
         <div className="mx-auto max-w-2xl px-4 pt-3 pb-4">
           <form
             onSubmit={(e) => {

apps/web/app/_components/student-space.tsx

@@ -42,7 +42,7 @@ function StudentChatPanel({
           id: m.id,
           role: m.role,
           parts: m.parts,
-          metadata: m.metadata ?? undefined,
+          metadata: { ...(m.metadata ?? {}), createdAt: m.createdAt },
         })) as unknown as UIMessage[];
         setState({ kind: 'ready', messages: ui });
       })
@@ -97,9 +97,14 @@ export function StudentSpace({ token }: { token: string }) {
         } catch {
           /* localStorage indisponible */
         }
+        setLoadingAccess(false);
       })
-      .catch(() => setNotFound(true))
-      .finally(() => setLoadingAccess(false));
+      .catch((err: unknown) => {
+        // Une requête annulée (navigation client / double-effet dev) n'est pas une erreur.
+        if (err instanceof DOMException && err.name === 'AbortError') return;
+        setNotFound(true);
+        setLoadingAccess(false);
+      });
     return () => controller.abort();
   }, [token]);