fix(web): passe le nodeId réel à la custom CLI au lieu d'un id fabriqué — #225

frontend/src/features/agents/CustomAgentChatView.tsx

@@ -44,7 +44,7 @@ export interface CustomAgentChatViewProps {
   profile: AgentProfile;
   cwd: string;
   layoutId?: string;
-  nodeId: string;
+  nodeId?: string;
   sessionId: string | null;
   conversationId: string | null;
   composerHeightPx?: number;
@@ -125,6 +125,11 @@ function describe(e: unknown): string {
   return String(e);
 }
 
+function describeOpenFailure(e: unknown, mobile: boolean): string {
+  if (!mobile) return describe(e);
+  return "Le CLI custom n'a pas pu démarrer. Vérifiez la configuration du profil ou utilisez la TUI native.";
+}
+
 function instrumentationError(e: unknown): Record<string, unknown> {
   if (e && typeof e === "object") {
     const err = e as GatewayError & { name?: string };
@@ -803,6 +808,7 @@ export function CustomAgentChatView({
   onSessionIdRef.current = onSessionId;
   const onConversationIdRef = useRef(onConversationId);
   onConversationIdRef.current = onConversationId;
+  const domId = nodeId ?? `agent-${agentId}`;
 
   const clampComposerHeight = useCallback(
     (heightPx: number): number => {
@@ -891,7 +897,7 @@ export function CustomAgentChatView({
   const slashPrefix = slashCommandPrefix(draft);
   const draftScope = useMemo<ChatDraftScope | null>(() => {
     if (explicitDraftScope) return explicitDraftScope;
-    return layoutId ? { projectId, layoutId, nodeId } : null;
+    return layoutId && nodeId ? { projectId, layoutId, nodeId } : null;
   }, [explicitDraftScope, layoutId, nodeId, projectId]);
   const currentConversationCacheKey = useMemo(
     () => conversationCacheKey(projectId, agentId, conversationId),
@@ -1173,7 +1179,7 @@ export function CustomAgentChatView({
             options.conversationId === undefined
               ? conversationId ?? undefined
               : options.conversationId ?? undefined,
-          nodeId,
+          ...(nodeId ? { nodeId } : {}),
         };
         console.debug("[ticket149] recoverStructuredSession:launchAgentChat:start", {
           timestamp: new Date().toISOString(),
@@ -1365,7 +1371,7 @@ export function CustomAgentChatView({
           sessionId: externalSessionId,
           error: instrumentationError(e),
         });
-        if (!cancelled) setError(describe(e));
+        if (!cancelled) setError(describeOpenFailure(e, mobile));
       } finally {
         if (!cancelled) setOpening(false);
       }
@@ -1384,6 +1390,7 @@ export function CustomAgentChatView({
     applyChatViewState,
     currentConversationCacheKey,
     conversationId,
+    mobile,
   ]);
 
   const canSend = useMemo(
@@ -1822,7 +1829,7 @@ export function CustomAgentChatView({
         <div
           role="dialog"
           aria-modal="true"
-          aria-labelledby={`profile-command-title-${nodeId}`}
+          aria-labelledby={`profile-command-title-${domId}`}
           className={cn(
             "border border-border bg-surface p-3 shadow-lg",
             mobile
@@ -1833,7 +1840,7 @@ export function CustomAgentChatView({
           <div className="flex min-w-0 items-start justify-between gap-3">
             <div className="min-w-0">
               <h2
-                id={`profile-command-title-${nodeId}`}
+                id={`profile-command-title-${domId}`}
                 className="text-sm font-semibold text-content"
               >
                 Changer de profil
@@ -1979,7 +1986,7 @@ export function CustomAgentChatView({
         )}
         {slashMenuOpen && slashCommands.length > 0 && (
           <div
-            id={`slash-command-menu-${nodeId}`}
+            id={`slash-command-menu-${domId}`}
             role="listbox"
             aria-label="suggestions commandes slash"
             className="max-h-48 overflow-y-auto rounded-md border border-border bg-surface py-1 shadow-lg"
@@ -1991,7 +1998,7 @@ export function CustomAgentChatView({
                 <button
                   key={command.name}
                   type="button"
-                  id={`slash-command-${nodeId}-${index}`}
+                  id={`slash-command-${domId}-${index}`}
                   role="option"
                   aria-selected={selected}
                   aria-disabled={!available}
@@ -2019,10 +2026,10 @@ export function CustomAgentChatView({
           <div className="relative flex min-w-0 flex-1">
             <textarea
               ref={composerRef}
-              aria-label={`message CLI custom ${nodeId}`}
-              aria-controls={slashMenuOpen ? `slash-command-menu-${nodeId}` : undefined}
+              aria-label={`message CLI custom ${domId}`}
+              aria-controls={slashMenuOpen ? `slash-command-menu-${domId}` : undefined}
               aria-activedescendant={
-                slashMenuOpen ? `slash-command-${nodeId}-${slashActiveIndex}` : undefined
+                slashMenuOpen ? `slash-command-${domId}-${slashActiveIndex}` : undefined
               }
               className={cn(
                 "min-h-10 flex-1 resize-none rounded-md border border-border bg-surface p-2 pr-7 text-sm text-content outline-none",
@@ -2069,7 +2076,7 @@ export function CustomAgentChatView({
             />
             <button
               type="button"
-              aria-label={`redimensionner le composer ${nodeId}`}
+              aria-label={`redimensionner le composer ${domId}`}
               title="Redimensionner le composer"
               className="absolute right-1.5 top-1.5 h-4 w-4 rounded-sm border border-border bg-raised text-[9px] leading-3 text-muted hover:text-content focus:border-primary focus:outline-none"
               style={{ cursor: "ns-resize" }}