fix(chat): retarde le fallback custom→TUI tant que le catalogue agents/profiles est stale (#149)

Cause racine restante après le fix de la course au premier chargement : le
garde-fou de LayoutGrid retombait sur `tui` dès que agents/profiles semblaient
indisponibles, y compris quand le cache était simplement stale (refresh en
cours), écrasant silencieusement la préférence custom. Le fallback n'agit
désormais qu'une fois le catalogue confirmé à jour.

QA verte : LayoutGrid.chat.test.tsx (7 tests), src/features/layout (16
fichiers, 130 tests), cas ciblé "stale catalog refresh".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/features/layout/LayoutGrid.tsx

@@ -360,55 +360,64 @@ function LeafView({
   // simply not passed to the terminal.
   const { portal, overlay } = useWritePortal(projectId, agent ?? null);
 
-  // Load the project's agents for the dropdown.
+  // Load the project's agents for the dropdown and for the pinned
+  // agent->profile correlation. The catalogue can change after this cell has
+  // mounted (agent creation/profile hot-swap), so the loader is reusable by the
+  // event refreshes below.
   const [agents, setAgents] = useState<Agent[]>([]);
   const [agentsLoaded, setAgentsLoaded] = useState(false);
-  useEffect(() => {
-    setAgentsLoaded(false);
+  const agentsRequestRef = useRef(0);
+  const refreshAgents = useCallback((markLoading = false): void => {
+    const request = ++agentsRequestRef.current;
+    if (markLoading) setAgentsLoaded(false);
     if (!agentGateway) {
+      setAgents([]);
       setAgentsLoaded(true);
       return;
     }
-    let cancelled = false;
     agentGateway.listAgents(projectId).then((list) => {
-      if (!cancelled) {
+      if (agentsRequestRef.current === request) {
         setAgents(list);
         setAgentsLoaded(true);
       }
     }).catch(() => {
-      if (!cancelled) setAgentsLoaded(true);
+      if (agentsRequestRef.current === request) setAgentsLoaded(true);
       /* ignore — dropdown stays empty */
     });
-    return () => { cancelled = true; };
   }, [agentGateway, projectId]);
+  useEffect(() => {
+    refreshAgents(true);
+  }, [refreshAgents]);
 
   const [profiles, setProfiles] = useState<AgentProfile[]>([]);
   const [profilesLoaded, setProfilesLoaded] = useState(false);
-  useEffect(() => {
-    setProfilesLoaded(false);
+  const profilesRequestRef = useRef(0);
+  const refreshProfiles = useCallback((markLoading = false): void => {
+    const request = ++profilesRequestRef.current;
+    if (markLoading) setProfilesLoaded(false);
     if (!profileGateway) {
+      setProfiles([]);
       setProfilesLoaded(true);
       return;
     }
-    let cancelled = false;
     profileGateway
       .listProfiles()
       .then((list) => {
-        if (!cancelled) {
+        if (profilesRequestRef.current === request) {
           setProfiles(list);
           setProfilesLoaded(true);
         }
       })
       .catch(() => {
-        if (!cancelled) {
+        if (profilesRequestRef.current === request) {
           setProfiles([]);
           setProfilesLoaded(true);
         }
       });
-    return () => {
-      cancelled = true;
-    };
   }, [profileGateway]);
+  useEffect(() => {
+    refreshProfiles(true);
+  }, [refreshProfiles]);
   const cellModeStorageKey = `idea.agent-cell-mode.${projectId}.${id}`;
   const [cellMode, setCellModeState] = useState<AgentCellMode>(() => {
     if (typeof window === "undefined") return "tui";
@@ -508,10 +517,46 @@ function LeafView({
       agentGateway?.cancelAgentChat &&
       agentGateway?.closeAgentChat,
   );
+  useEffect(() => {
+    if (!agentId) return;
+    refreshAgents();
+  }, [agentId, refreshAgents]);
+  useEffect(() => {
+    if (!pinnedAgent?.profileId) return;
+    refreshProfiles();
+  }, [pinnedAgent?.profileId, refreshProfiles]);
+  useEffect(() => {
+    if (!system || !agentId) return;
+    let unsubscribe: (() => void) | undefined;
+    let cancelled = false;
+    void system
+      .onDomainEvent((event) => {
+        if (event.type !== "agentProfileChanged" || event.agentId !== agentId) return;
+        refreshAgents();
+        refreshProfiles();
+      })
+      .then((un) => {
+        if (cancelled) un();
+        else unsubscribe = un;
+      });
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  }, [agentId, refreshAgents, refreshProfiles, system]);
   useEffect(() => {
     if (!agentsLoaded || !profilesLoaded) return;
-    if (!customCliAvailable && cellMode !== "tui") setCellMode("tui");
-  }, [agentsLoaded, cellMode, customCliAvailable, profilesLoaded, setCellMode]);
+    if (cellMode !== "custom") return;
+    if (pinnedAgent && pinnedProfile && !customCliAvailable) setCellMode("tui");
+  }, [
+    agentsLoaded,
+    cellMode,
+    customCliAvailable,
+    pinnedAgent,
+    pinnedProfile,
+    profilesLoaded,
+    setCellMode,
+  ]);
   const modelServerStatus = statusForAgent(pinnedAgent);
   const modelServerOverlay = modelServerOverlayText(modelServerStatus);
   // F2 — download progress (bar/%/bytes/source) when the status carries it; null