feat(web): passage en custom CLI sur version téléphone avec UI mobile adaptée — #224

frontend/src/features/agents/CustomAgentChatView.tsx

@@ -50,6 +50,8 @@ export interface CustomAgentChatViewProps {
   composerHeightPx?: number;
   composerDefaultHeightPx?: number;
   onComposerHeightPxChange?: (heightPx: number) => void;
+  draftScope?: ChatDraftScope | null;
+  mobile?: boolean;
   onSessionId: (sessionId: string | null) => void;
   onConversationId: (conversationId: string | null) => void;
 }
@@ -725,6 +727,8 @@ export function CustomAgentChatView({
   composerHeightPx = FALLBACK_COMPOSER_HEIGHT,
   composerDefaultHeightPx = FALLBACK_COMPOSER_HEIGHT,
   onComposerHeightPxChange,
+  draftScope: explicitDraftScope,
+  mobile = false,
   onSessionId,
   onConversationId,
 }: CustomAgentChatViewProps) {
@@ -774,8 +778,12 @@ export function CustomAgentChatView({
   const scrollbackChunkCountRef = useRef(
     sessionId ? (chatSessionViewCache.get(sessionId)?.chunkCount ?? 0) : 0,
   );
-  const detachAgentChatRef = useRef(agent.detachAgentChat);
-  detachAgentChatRef.current = agent.detachAgentChat;
+  const detachAgentChatRef = useRef<((sessionId: string) => Promise<void>) | undefined>(
+    agent.detachAgentChat ? (sid) => agent.detachAgentChat!(sid) : undefined,
+  );
+  detachAgentChatRef.current = agent.detachAgentChat
+    ? (sid) => agent.detachAgentChat!(sid)
+    : undefined;
   const slashQuerySeqRef = useRef(0);
   const draftSaveSeqRef = useRef(0);
   const interactionSeqRef = useRef(0);
@@ -881,10 +889,10 @@ export function CustomAgentChatView({
       agent.closeAgentChat,
   );
   const slashPrefix = slashCommandPrefix(draft);
-  const draftScope = useMemo<ChatDraftScope | null>(
-    () => (layoutId ? { projectId, layoutId, nodeId } : null),
-    [layoutId, nodeId, projectId],
-  );
+  const draftScope = useMemo<ChatDraftScope | null>(() => {
+    if (explicitDraftScope) return explicitDraftScope;
+    return layoutId ? { projectId, layoutId, nodeId } : null;
+  }, [explicitDraftScope, layoutId, nodeId, projectId]);
   const currentConversationCacheKey = useMemo(
     () => conversationCacheKey(projectId, agentId, conversationId),
     [agentId, conversationId, projectId],
@@ -1815,7 +1823,12 @@ export function CustomAgentChatView({
           role="dialog"
           aria-modal="true"
           aria-labelledby={`profile-command-title-${nodeId}`}
-          className="m-3 rounded-md border border-border bg-surface p-3 shadow-lg"
+          className={cn(
+            "border border-border bg-surface p-3 shadow-lg",
+            mobile
+              ? "fixed inset-x-0 bottom-0 z-40 m-0 rounded-t-md pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+              : "m-3 rounded-md",
+          )}
         >
           <div className="flex min-w-0 items-start justify-between gap-3">
             <div className="min-w-0">
@@ -1931,7 +1944,10 @@ export function CustomAgentChatView({
 
       <div
         data-testid="custom-agent-chat-composer"
-        className="flex shrink-0 flex-col gap-2 border-t border-border bg-raised/40 p-2"
+        className={cn(
+          "flex shrink-0 flex-col gap-2 border-t border-border bg-raised/40 p-2",
+          mobile && "pb-[max(0.5rem,env(safe-area-inset-bottom))]",
+        )}
       >
         {attachments.length > 0 && (
           <div className="flex min-w-0 flex-wrap gap-2">

frontend/src/features/agents/customCliEligibility.ts

@@ -0,0 +1,16 @@
+import type { AgentProfile } from "@/domain";
+import type { AgentGateway } from "@/ports";
+
+export function isCustomAgentCliAvailable(
+  profile: AgentProfile | null | undefined,
+  agentGateway: AgentGateway | null | undefined,
+): boolean {
+  return Boolean(
+    profile?.structuredAdapter &&
+      agentGateway?.launchAgentChat &&
+      agentGateway?.reattachAgentChat &&
+      agentGateway?.sendAgentChat &&
+      agentGateway?.cancelAgentChat &&
+      agentGateway?.closeAgentChat,
+  );
+}

frontend/src/features/agents/index.ts

@@ -25,3 +25,4 @@ export { useResumeProject } from "./useResumeProject";
 export type { ResumeProjectViewModel } from "./useResumeProject";
 export { CustomAgentChatView } from "./CustomAgentChatView";
 export type { CustomAgentChatViewProps } from "./CustomAgentChatView";
+export { isCustomAgentCliAvailable } from "./customCliEligibility";