feat(web): indicateur de Cadre en haut du fil + section Documents verrouillée à la création

loan-talvat · loan-talvat · commit fa1598e6025d · 2026-06-01T16:10:19.000+02:00
- Conversation : bandeau discret « Cadre : &lt;nom&gt; » collé en haut du fil (réactif
  au sélecteur, masqué s'il n'y a pas de Cadre) → on sait toujours dans quel mode
  la conversation tourne.
- Éditeur de Cadre : pendant la création, la section « Documents de référence »
  est affichée mais floutée/désactivée avec un cadenas et le message
  « Enregistrez d'abord le cadre » (au lieu de n'apparaître qu'après création).
diff --git a/apps/web/app/_components/chat-thread.tsx b/apps/web/app/_components/chat-thread.tsx
@@ -14,7 +14,7 @@ import {
 import type { DocumentDTO, FrameworkDTO } from '@/lib/types';
 import { Composer } from './composer';
 import { EmptyState } from './empty-state';
-import { RefreshIcon } from './icons';
+import { RefreshIcon, SparkIcon } from './icons';
 import { MessageItem } from './message-item';
 
 /**
@@ -112,44 +112,55 @@ export function ChatThread({
 
   const busy = status === 'submitted' || status === 'streaming';
   const lastIndex = messages.length - 1;
+  const activeFramework = frameworks.find((f) => f.id === frameworkId) ?? null;
 
   return (
     <div className="flex h-full min-h-0 flex-col">
       <div className="flex-1 overflow-y-auto">
-        <div className="mx-auto max-w-3xl space-y-7 px-4 pt-8 pb-4">
-          {messages.length === 0 ? (
-            <EmptyState onPick={(text) => sendMessage({ text })} />
-          ) : (
-            messages.map((message, index) => (
-              <MessageItem
-                key={message.id}
-                message={message}
-                streaming={busy && index === lastIndex && message.role === 'assistant'}
-              />
-            ))
-          )}
-
-          {error ? (
-            <div
-              role="alert"
-              className="flex flex-wrap items-center gap-3 rounded-card border border-danger/30 bg-danger/10 px-4 py-3 text-sm"
-            >
-              <span className="text-foreground">{error.message || fr.errors.generic}</span>
-              <button
-                type="button"
-                onClick={() => {
-                  clearError();
-                  regenerate();
-                }}
-                className="inline-flex items-center gap-1.5 rounded-button border border-border bg-surface px-2.5 py-1.5 font-medium transition-colors hover:bg-surface-muted"
-              >
-                <RefreshIcon className="size-4" />
-                {fr.common.retry}
-              </button>
+        <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'}`}>
+            {messages.length === 0 ? (
+              <EmptyState onPick={(text) => sendMessage({ text })} />
+            ) : (
+              messages.map((message, index) => (
+                <MessageItem
+                  key={message.id}
+                  message={message}
+                  streaming={busy && index === lastIndex && message.role === 'assistant'}
+                />
+              ))
+            )}
+
+            {error ? (
+              <div
+                role="alert"
+                className="flex flex-wrap items-center gap-3 rounded-card border border-danger/30 bg-danger/10 px-4 py-3 text-sm"
+              >
+                <span className="text-foreground">{error.message || fr.errors.generic}</span>
+                <button
+                  type="button"
+                  onClick={() => {
+                    clearError();
+                    regenerate();
+                  }}
+                  className="inline-flex items-center gap-1.5 rounded-button border border-border bg-surface px-2.5 py-1.5 font-medium transition-colors hover:bg-surface-muted"
+                >
+                  <RefreshIcon className="size-4" />
+                  {fr.common.retry}
+                </button>
+              </div>
+            ) : null}
 
-          <div ref={bottomRef} />
+            <div ref={bottomRef} />
+          </div>
         </div>
       </div>
 
diff --git a/apps/web/app/_components/documents-panel.tsx b/apps/web/app/_components/documents-panel.tsx
@@ -3,16 +3,26 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { deleteDocument, listDocuments, uploadDocument } from '@/lib/api';
 import type { DocumentDTO } from '@/lib/types';
-import { PlusIcon, SpinnerIcon, TrashIcon } from './icons';
+import { LockIcon, PlusIcon, SpinnerIcon, TrashIcon } from './icons';
 
 function formatSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} o`;
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} Ko`;
   return `${(bytes / 1024 / 1024).toFixed(1)} Mo`;
 }
 
-/** Documents de référence rattachés à un Cadre : dépôt, liste, suppression. */
-export function DocumentsPanel({ frameworkId }: { frameworkId: string }) {
+/**
+ * Documents de référence rattachés à un Cadre : dépôt, liste, suppression.
+ * `locked` (pendant la création d'un Cadre, avant son enregistrement) : la
+ * section reste visible mais floutée/désactivée, avec un message explicatif.
+ */
+export function DocumentsPanel({
+  frameworkId,
+  locked = false,
+}: {
+  frameworkId?: string;
+  locked?: boolean;
+}) {
   const [documents, setDocuments] = useState<DocumentDTO[]>([]);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
@@ -21,21 +31,26 @@ export function DocumentsPanel({ frameworkId }: { frameworkId: string }) {
 
   const refresh = useCallback(
     async (signal?: AbortSignal) => {
+      if (!frameworkId) return;
       setDocuments(await listDocuments(frameworkId, signal));
     },
     [frameworkId],
   );
 
   useEffect(() => {
+    if (locked || !frameworkId) {
+      setLoading(false);
+      return;
+    }
     const controller = new AbortController();
     refresh(controller.signal)
       .catch(() => undefined)
       .finally(() => setLoading(false));
     return () => controller.abort();
-  }, [refresh]);
+  }, [refresh, locked, frameworkId]);
 
   const onFiles = async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
+    if (!files || files.length === 0 || !frameworkId) return;
     setError(null);
     setUploading(true);
     try {
@@ -62,61 +77,94 @@ export function DocumentsPanel({ frameworkId }: { frameworkId: string }) {
         sources.
       </p>
 
-      <div className="mt-4">
-        <input
-          ref={inputRef}
-          type="file"
-          accept=".pdf,.txt,.md,.markdown,application/pdf,text/plain,text/markdown"
-          multiple
-          className="sr-only"
-          onChange={(e) => onFiles(e.target.files)}
-        />
-        <button
-          type="button"
-          onClick={() => inputRef.current?.click()}
-          disabled={uploading}
-          className="inline-flex items-center gap-1.5 rounded-button border border-border bg-surface px-3 py-2 text-sm font-medium transition-colors hover:border-accent hover:bg-surface-muted disabled:opacity-60"
+      <div className="relative mt-4">
+        <div
+          aria-hidden={locked || undefined}
+          className={locked ? 'pointer-events-none select-none blur-[3px] opacity-50' : undefined}
         >
-          {uploading ? <SpinnerIcon className="size-4" /> : <PlusIcon className="size-4" />}
-          {uploading ? 'Analyse en cours…' : 'Déposer un document'}
-        </button>
-      </div>
+          <input
+            ref={inputRef}
+            type="file"
+            accept=".pdf,.txt,.md,.markdown,application/pdf,text/plain,text/markdown"
+            multiple
+            disabled={locked}
+            className="sr-only"
+            onChange={(e) => onFiles(e.target.files)}
+          />
+          <button
+            type="button"
+            onClick={() => inputRef.current?.click()}
+            disabled={uploading || locked}
+            className="inline-flex items-center gap-1.5 rounded-button border border-border bg-surface px-3 py-2 text-sm font-medium transition-colors hover:border-accent hover:bg-surface-muted disabled:opacity-60"
+          >
+            {uploading ? <SpinnerIcon className="size-4" /> : <PlusIcon className="size-4" />}
+            {uploading ? 'Analyse en cours…' : 'Déposer un document'}
+          </button>
 
-      {error ? (
-        <p role="alert" className="mt-2 text-sm text-danger">
-          {error}
-        </p>
-      ) : null}
+          {error ? (
+            <p role="alert" className="mt-2 text-sm text-danger">
+              {error}
+            </p>
+          ) : null}
 
-      <div className="mt-3">
-        {loading ? (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <SpinnerIcon className="size-4" /> Chargement…
-          </div>
-        ) : documents.length === 0 ? (
-          <p className="text-sm text-muted-foreground">Aucun document pour ce cadre.</p>
-        ) : (
-          <ul className="divide-y divide-border">
-            {documents.map((document) => (
-              <li key={document.id} className="flex items-center justify-between gap-3 py-2">
-                <div className="min-w-0">
-                  <p className="truncate text-sm font-medium">{document.filename}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {formatSize(document.sizeBytes)} · {document.chunkCount} passage(s)
-                  </p>
+          {locked ? (
+            // Aperçu factice (squelette) pour donner à voir la section à venir.
+            <ul className="mt-3 divide-y divide-border">
+              {['•••••••••.pdf', '••••••.txt'].map((label) => (
+                <li key={label} className="flex items-center justify-between gap-3 py-2">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">{label}</p>
+                    <p className="text-xs text-muted-foreground">— · — passage(s)</p>
+                  </div>
+                  <TrashIcon className="size-4 text-muted-foreground" />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <div className="mt-3">
+              {loading ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <SpinnerIcon className="size-4" /> Chargement…
                 </div>
-                <button
-                  type="button"
-                  onClick={() => onDelete(document.id)}
-                  aria-label={`Supprimer ${document.filename}`}
-                  className="inline-flex size-8 shrink-0 items-center justify-center rounded-button text-muted-foreground hover:bg-surface-muted hover:text-danger"
-                >
-                  <TrashIcon className="size-4" />
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
+              ) : documents.length === 0 ? (
+                <p className="text-sm text-muted-foreground">Aucun document pour ce cadre.</p>
+              ) : (
+                <ul className="divide-y divide-border">
+                  {documents.map((document) => (
+                    <li key={document.id} className="flex items-center justify-between gap-3 py-2">
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium">{document.filename}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {formatSize(document.sizeBytes)} · {document.chunkCount} passage(s)
+                        </p>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => onDelete(document.id)}
+                        aria-label={`Supprimer ${document.filename}`}
+                        className="inline-flex size-8 shrink-0 items-center justify-center rounded-button text-muted-foreground hover:bg-surface-muted hover:text-danger"
+                      >
+                        <TrashIcon className="size-4" />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+        </div>
+
+        {locked ? (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 rounded-card bg-surface/55 text-center">
+            <span className="inline-flex size-9 items-center justify-center rounded-full bg-surface-muted text-muted-foreground shadow-card">
+              <LockIcon className="size-4" />
+            </span>
+            <p className="text-sm font-semibold text-foreground">Enregistrez d’abord le cadre</p>
+            <p className="max-w-xs text-xs text-muted-foreground">
+              Vous pourrez ensuite y ajouter des documents de référence.
+            </p>
+          </div>
+        ) : null}
       </div>
     </section>
   );
diff --git a/apps/web/app/_components/icons.tsx b/apps/web/app/_components/icons.tsx
@@ -255,6 +255,15 @@ export function PowerIcon(props: IconProps) {
   );
 }
 
+export function LockIcon(props: IconProps) {
+  return (
+    <Svg {...props}>
+      <rect x="4" y="11" width="16" height="10" rx="2" />
+      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+    </Svg>
+  );
+}
+
 export function MicIcon(props: IconProps) {
   return (
     <Svg {...props}>
diff --git a/apps/web/app/cadres/page.tsx b/apps/web/app/cadres/page.tsx
@@ -185,7 +185,9 @@ export default function CadresPage() {
                   onSave={handleSave}
                   onCancel={handleCancel}
                   documentsSlot={
-                    !creating && activeFramework ? (
+                    creating ? (
+                      <DocumentsPanel locked />
+                    ) : activeFramework ? (
                       <DocumentsPanel key={activeFramework.id} frameworkId={activeFramework.id} />
                     ) : undefined
                   }
