@nextclaw/ui 0.10.0 → 0.10.1

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -1,5 +1,10 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChatInputBar } from '@nextclaw/agent-chat-ui';
+import {
+  DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT,
+  DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES,
+  readFilesAsNcpDraftAttachments
+} from '@nextclaw/ncp-react';
 import {
   buildChatSlashItems,
   buildModelStateHint,
@@ -14,6 +19,7 @@ import { usePresenter } from '@/components/chat/presenter/chat-presenter-context
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
 
 function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
   return {
@@ -70,6 +76,7 @@ export function ChatInputBarContainer() {
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const officialSkillBadgeLabel = useMemo(() => {
     // Keep memo reactive to locale switches even though `t` is imported as a stable function.
@@ -102,6 +109,7 @@ export function ChatInputBarContainer() {
   const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
   const inputDisabled =
     ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
   const textareaPlaceholder = isModelOptionsLoading
     ? ''
     : hasModelOptions
@@ -122,6 +130,33 @@ export function ChatInputBarContainer() {
       ? t('chatStopPreparing')
       : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
 
+  const showAttachmentError = useCallback((reason: 'unsupported-type' | 'too-large' | 'read-failed') => {
+    if (reason === 'unsupported-type') {
+      toast.error(t('chatInputImageUnsupported'));
+      return;
+    }
+    if (reason === 'too-large') {
+      toast.error(
+        t('chatInputImageTooLarge').replace('{maxMb}', String(DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES / (1024 * 1024)))
+      );
+      return;
+    }
+    toast.error(t('chatInputImageReadFailed'));
+  }, []);
+
+  const handleFilesAdd = useCallback(async (files: File[]) => {
+    if (!attachmentSupported || files.length === 0) {
+      return;
+    }
+    const result = await readFilesAsNcpDraftAttachments(files);
+    if (result.attachments.length > 0) {
+      presenter.chatInputManager.addAttachments?.(result.attachments);
+    }
+    if (result.rejected.length > 0) {
+      showAttachmentError(result.rejected[0].reason);
+    }
+  }, [attachmentSupported, presenter.chatInputManager, showAttachmentError]);
+
   const toolbarSelects = [
     buildModelToolbarSelect({
       modelOptions: modelRecords,
@@ -160,60 +195,86 @@ export function ChatInputBarContainer() {
   });
 
   return (
-    <ChatInputBar
-      composer={{
-        nodes: snapshot.composerNodes,
-        placeholder: textareaPlaceholder,
-        disabled: inputDisabled,
-        onNodesChange: presenter.chatInputManager.setComposerNodes,
-        onSlashQueryChange: setSlashQuery
-      }}
-      slashMenu={{
-        isLoading: snapshot.isSkillsLoading,
-        items: slashItems,
-        texts: {
-          slashLoadingLabel: t('chatSlashLoading'),
-          slashSectionLabel: t('chatSlashSectionSkills'),
-          slashEmptyLabel: t('chatSlashNoResult'),
-          slashHintLabel: t('chatSlashHint'),
-          slashSkillHintLabel: t('chatSlashSkillHint')
-        }
-      }}
-      hint={buildModelStateHint({
-        isModelOptionsLoading,
-        isModelOptionsEmpty,
-        onGoToProviders: presenter.chatInputManager.goToProviders,
-        texts: {
-          noModelOptionsLabel: t('chatModelNoOptions'),
-          configureProviderLabel: t('chatGoConfigureProvider')
-        }
-      })}
-      toolbar={{
-        selects: toolbarSelects,
-        accessories: [
-          {
-            key: 'attach',
-            label: t('chatInputAttach'),
-            icon: 'paperclip',
-            iconOnly: true,
-            disabled: true,
-            tooltip: t('chatInputAttachComingSoon')
+    <>
+      <ChatInputBar
+        composer={{
+          nodes: snapshot.composerNodes,
+          placeholder: textareaPlaceholder,
+          disabled: inputDisabled,
+          onNodesChange: presenter.chatInputManager.setComposerNodes,
+          ...(attachmentSupported ? { onFilesAdd: handleFilesAdd } : {}),
+          onSlashQueryChange: setSlashQuery
+        }}
+        slashMenu={{
+          isLoading: snapshot.isSkillsLoading,
+          items: slashItems,
+          texts: {
+            slashLoadingLabel: t('chatSlashLoading'),
+            slashSectionLabel: t('chatSlashSectionSkills'),
+            slashEmptyLabel: t('chatSlashNoResult'),
+            slashHintLabel: t('chatSlashHint'),
+            slashSkillHintLabel: t('chatSlashSkillHint')
           }
-        ],
-        skillPicker,
-        actions: {
-          sendError: snapshot.sendError,
-          isSending: snapshot.isSending,
-          canStopGeneration: snapshot.canStopGeneration,
-          sendDisabled: snapshot.draft.trim().length === 0 || !hasModelOptions || snapshot.sessionTypeUnavailable,
-          stopDisabled: !snapshot.canStopGeneration,
-          stopHint: resolvedStopHint,
-          sendButtonLabel: t('chatSend'),
-          stopButtonLabel: t('chatStop'),
-          onSend: presenter.chatInputManager.send,
-          onStop: presenter.chatInputManager.stop
-        }
-      }}
-    />
+        }}
+        hint={buildModelStateHint({
+          isModelOptionsLoading,
+          isModelOptionsEmpty,
+          onGoToProviders: presenter.chatInputManager.goToProviders,
+          texts: {
+            noModelOptionsLabel: t('chatModelNoOptions'),
+            configureProviderLabel: t('chatGoConfigureProvider')
+          }
+        })}
+        toolbar={{
+          selects: toolbarSelects,
+          accessories: [
+            {
+              key: 'attach',
+              label: t('chatInputAttach'),
+              icon: 'paperclip',
+              iconOnly: true,
+              disabled: !attachmentSupported || inputDisabled || snapshot.isSending,
+              ...(attachmentSupported
+                ? {
+                    onClick: () => fileInputRef.current?.click()
+                  }
+                : {
+                    tooltip: t('chatInputAttachComingSoon')
+                  })
+            }
+          ],
+          skillPicker,
+          actions: {
+            sendError: snapshot.sendError,
+            isSending: snapshot.isSending,
+            canStopGeneration: snapshot.canStopGeneration,
+            sendDisabled:
+              (snapshot.draft.trim().length === 0 && snapshot.attachments.length === 0) ||
+              !hasModelOptions ||
+              snapshot.sessionTypeUnavailable,
+            stopDisabled: !snapshot.canStopGeneration,
+            stopHint: resolvedStopHint,
+            sendButtonLabel: t('chatSend'),
+            stopButtonLabel: t('chatStop'),
+            onSend: presenter.chatInputManager.send,
+            onStop: presenter.chatInputManager.stop
+          }
+        }}
+      />
+      {attachmentSupported ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT}
+          multiple
+          className="hidden"
+          onChange={async (event) => {
+            const files = Array.from(event.target.files ?? []);
+            event.currentTarget.value = '';
+            await handleFilesAdd(files);
+          }}
+        />
+      ) : null}
+    </>
   );
 }

package/src/components/chat/containers/chat-message-list.container.tsx

@@ -48,6 +48,8 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
           toolResultLabel: t("chatToolResult"),
           toolNoOutputLabel: t("chatToolNoOutput"),
           toolOutputLabel: t("chatToolOutput"),
+          imageAttachmentLabel: t("chatImageAttachment"),
+          fileAttachmentLabel: t("chatFileAttachment"),
           unknownPartLabel: t("chatUnknownPart"),
         },
       }),

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -33,7 +33,22 @@ describe('ChatSessionListManager', () => {
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
     expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
   });
+
+  it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.selectSession('session-2');
+
+    expect(uiManager.goToSession).toHaveBeenCalledWith('session-2');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+  });
 });

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -62,13 +62,11 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     this.streamActionsManager.resetStreamState();
-    this.setSelectedSessionKey(null);
     useChatInputStore.getState().setSnapshot({ pendingSessionType: nextSessionType });
     this.uiManager.goToChatRoot();
   };
 
   selectSession = (sessionKey: string) => {
-    this.setSelectedSessionKey(sessionKey);
     this.uiManager.goToSession(sessionKey);
   };
 

package/src/components/chat/managers/chat-thread.manager.ts

@@ -78,7 +78,6 @@ export class ChatThreadManager {
     try {
       await deleteSessionApi(selectedSessionKey);
       this.streamActionsManager.resetStreamState();
-      useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
       this.uiManager.goToChatRoot({ replace: true });
       await this.actions.refetchSessions();
     } finally {

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { NcpHttpAgentClientEndpoint } from '@nextclaw/ncp-http-agent-client';
-import { useHydratedNcpAgent, type NcpConversationSeed } from '@nextclaw/ncp-react';
+import {
+  buildNcpRequestEnvelope,
+  useHydratedNcpAgent,
+  type NcpConversationSeed
+} from '@nextclaw/ncp-react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { API_BASE } from '@/api/api-base';
 import { fetchNcpSessionMessages } from '@/api/ncp-session';
@@ -186,29 +190,25 @@ export function NcpChatPage({ view }: ChatPageProps) {
           sessionType: payload.sessionType,
           requestedSkills: payload.requestedSkills
         });
+        const envelope = buildNcpRequestEnvelope({
+          sessionId: payload.sessionKey,
+          text: payload.message,
+          attachments: payload.attachments,
+          metadata
+        });
+        if (!envelope) {
+          return;
+        }
         try {
           void sessionsQuery.refetch();
-          await agent.send({
-            sessionId: payload.sessionKey,
-            message: {
-              id: `user-${Date.now().toString(36)}`,
-              sessionId: payload.sessionKey,
-              role: 'user',
-              status: 'final',
-              parts: [{ type: 'text', text: payload.message }],
-              timestamp: new Date().toISOString(),
-              ...(Object.keys(metadata).length > 0 ? { metadata } : {})
-            },
-            ...(Object.keys(metadata).length > 0 ? { metadata } : {})
-          });
+          await agent.send(envelope);
           await sessionsQuery.refetch();
         } catch (error) {
           if (payload.restoreDraftOnError) {
             if (payload.composerNodes && payload.composerNodes.length > 0) {
-              presenter.chatInputManager.setComposerNodes((currentNodes) =>
-                currentNodes.length === 1 && currentNodes[0]?.type === 'text' && currentNodes[0].text.length === 0
-                  ? payload.composerNodes ?? currentNodes
-                  : currentNodes
+              presenter.chatInputManager.restoreComposerState?.(
+                payload.composerNodes,
+                payload.attachments ?? []
               );
             } else {
               presenter.chatInputManager.setDraft((currentDraft) =>

package/src/components/chat/ncp/ncp-app-client-fetch.test.ts

@@ -1,25 +1,25 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createNcpAppClientFetch } from '@/components/chat/ncp/ncp-app-client-fetch';
 
-const mocks = vi.hoisted(() => ({
-  request: vi.fn(),
-  openStream: vi.fn()
-}));
-
-vi.mock('@/transport', () => ({
-  appClient: {
-    request: mocks.request,
-    openStream: mocks.openStream
-  }
-}));
+const fetchMock = vi.fn<typeof fetch>();
 
 describe('ncp-app-client-fetch', () => {
   beforeEach(() => {
-    mocks.request.mockReset();
-    mocks.openStream.mockReset();
+    fetchMock.mockReset();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
   });
 
-  it('routes JSON requests through appClient.request', async () => {
-    mocks.request.mockResolvedValue({ stopped: true });
+  it('keeps native fetch semantics and only injects credentials', async () => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: {
+        'content-type': 'application/json'
+      }
+    }));
     const fetchImpl = createNcpAppClientFetch();
 
     const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/abort', {
@@ -31,22 +31,40 @@ describe('ncp-app-client-fetch', () => {
       body: JSON.stringify({ sessionId: 's1' })
     });
 
-    expect(mocks.request).toHaveBeenCalledWith({
+    expect(fetchMock).toHaveBeenCalledWith('http://127.0.0.1:55667/api/ncp/agent/abort', {
       method: 'POST',
-      path: '/api/ncp/agent/abort',
-      body: { sessionId: 's1' }
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ sessionId: 's1' }),
+      credentials: 'include'
     });
     expect(response.ok).toBe(true);
+    expect(await response.json()).toEqual({ ok: true });
   });
 
-  it('re-encodes appClient stream events as SSE frames', async () => {
-    mocks.openStream.mockImplementation(({ onEvent }) => {
-      onEvent({ name: 'ncp-event', payload: { type: 'message.chunk', payload: { text: 'hello' } } });
-      return {
-        finished: Promise.resolve(undefined),
-        cancel: vi.fn()
-      };
-    });
+  it('does not synthesize fake HTTP 500 responses for fetch failures', async () => {
+    fetchMock.mockRejectedValue(new Error('Failed to fetch'));
+    const fetchImpl = createNcpAppClientFetch();
+
+    await expect(fetchImpl('http://127.0.0.1:55667/api/ncp/agent/abort', {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ sessionId: 's1' })
+    })).rejects.toThrow('Failed to fetch');
+  });
+
+  it('preserves native SSE request headers', async () => {
+    fetchMock.mockResolvedValue(new Response('event: ncp-event\ndata: {"ok":true}\n\n', {
+      status: 200,
+      headers: {
+        'content-type': 'text/event-stream'
+      }
+    }));
     const fetchImpl = createNcpAppClientFetch();
 
     const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/stream?sessionId=s1', {
@@ -55,15 +73,14 @@ describe('ncp-app-client-fetch', () => {
         accept: 'text/event-stream'
       }
     });
-    const text = await response.text();
 
-    expect(mocks.openStream).toHaveBeenCalledWith({
+    expect(fetchMock).toHaveBeenCalledWith('http://127.0.0.1:55667/api/ncp/agent/stream?sessionId=s1', {
       method: 'GET',
-      path: '/api/ncp/agent/stream?sessionId=s1',
-      signal: undefined,
-      onEvent: expect.any(Function)
+      headers: {
+        accept: 'text/event-stream'
+      },
+      credentials: 'include'
     });
-    expect(text).toContain('event: ncp-event');
-    expect(text).toContain('"text":"hello"');
+    expect(await response.text()).toContain('event: ncp-event');
   });
 });

package/src/components/chat/ncp/ncp-app-client-fetch.ts

@@ -1,127 +1,9 @@
-import { API_BASE } from '@/api/api-base';
-import { appClient } from '@/transport';
-
 type FetchLike = typeof fetch;
 
 export function createNcpAppClientFetch(): FetchLike {
-  return async (input, init) => {
-    const request = toRequestSnapshot(input, init);
-    if (isSseRequest(request)) {
-      return createSseResponse(request);
-    }
-
-    try {
-      const data = await appClient.request<unknown>({
-        method: request.method,
-        path: request.path,
-        ...(request.body !== undefined ? { body: request.body } : {})
-      });
-      return new Response(JSON.stringify(data ?? {}), {
-        status: 200,
-        headers: {
-          'content-type': 'application/json'
-        }
-      });
-    } catch (error) {
-      return new Response(error instanceof Error ? error.message : String(error), {
-        status: 500,
-        headers: {
-          'content-type': 'text/plain; charset=utf-8'
-        }
-      });
-    }
-  };
-}
-
-type RequestSnapshot = {
-  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-  path: string;
-  body?: unknown;
-  signal?: AbortSignal;
-  headers: Headers;
-};
-
-function toRequestSnapshot(input: URL | string | Request, init?: RequestInit): RequestSnapshot {
-  const request = input instanceof Request ? input : null;
-  const url = new URL(
-    typeof input === 'string'
-      ? input
-      : input instanceof URL
-        ? input.toString()
-        : input.url,
-    API_BASE
-  );
-  const headers = new Headers(init?.headers ?? request?.headers);
-  const method = ((init?.method ?? request?.method ?? 'GET').toUpperCase()) as RequestSnapshot['method'];
-  return {
-    method,
-    path: `${url.pathname}${url.search}`,
-    body: parseRequestBody(init?.body),
-    signal: init?.signal ?? request?.signal ?? undefined,
-    headers
-  };
-}
-
-function parseRequestBody(body: BodyInit | null | undefined): unknown {
-  if (body === undefined || body === null) {
-    return undefined;
-  }
-  if (typeof body === 'string') {
-    try {
-      return JSON.parse(body);
-    } catch {
-      return body;
-    }
-  }
-  return body;
-}
-
-function isSseRequest(request: RequestSnapshot): boolean {
-  const accept = request.headers.get('accept')?.toLowerCase() ?? '';
-  return accept.includes('text/event-stream');
-}
-
-function createSseResponse(request: RequestSnapshot): Response {
-  const encoder = new TextEncoder();
-  let session: ReturnType<typeof appClient.openStream<unknown>> | null = null;
-
-  const stream = new ReadableStream<Uint8Array>({
-    start(controller) {
-      session = appClient.openStream<unknown>({
-        method: request.method === 'GET' ? 'GET' : 'POST',
-        path: request.path,
-        ...(request.body !== undefined ? { body: request.body } : {}),
-        signal: request.signal,
-        onEvent: (event) => {
-          controller.enqueue(encoder.encode(encodeSseFrame(event.name, event.payload)));
-        }
-      });
-
-      void session.finished
-        .then(() => {
-          controller.close();
-        })
-        .catch((error) => {
-          controller.enqueue(encoder.encode(encodeSseFrame('error', {
-            message: error instanceof Error ? error.message : String(error)
-          })));
-          controller.close();
-        });
-    },
-    cancel() {
-      session?.cancel();
-    }
-  });
-
-  return new Response(stream, {
-    status: 200,
-    headers: {
-      'content-type': 'text/event-stream'
-    }
-  });
-}
-
-function encodeSseFrame(event: string, payload: unknown): string {
-  const data = payload === undefined ? '' : JSON.stringify(payload);
-  return `event: ${event}\ndata: ${data}\n\n`;
+  return (input, init) =>
+    fetch(input, {
+      credentials: 'include',
+      ...init
+    });
 }

package/src/components/chat/ncp/ncp-chat-input.manager.ts

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { SetStateAction } from 'react';
 import type { ThinkingLevel } from '@/api/types';
 import { updateNcpSession } from '@/api/ncp-session';
@@ -7,6 +8,8 @@ import {
   createInitialChatComposerNodes,
   deriveChatComposerDraft,
   deriveSelectedSkillsFromComposer,
+  pruneComposerAttachments,
+  syncComposerAttachments,
   syncComposerSkills
 } from '@/components/chat/chat-composer-state';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -48,13 +51,47 @@ export class NcpChatInputManager {
     left.length === right.length && left.every((value, index) => value === right[index]);
 
   private syncComposerSnapshot = (nodes: ChatComposerNode[]) => {
+    const currentAttachments = useChatInputStore.getState().snapshot.attachments;
+    const attachments = pruneComposerAttachments(nodes, currentAttachments);
     useChatInputStore.getState().setSnapshot({
       composerNodes: nodes,
+      attachments,
       draft: deriveChatComposerDraft(nodes),
       selectedSkills: deriveSelectedSkillsFromComposer(nodes)
     });
   };
 
+  private syncComposerSnapshotWithAttachments = (
+    nodes: ChatComposerNode[],
+    attachments: NcpDraftAttachment[]
+  ) => {
+    useChatInputStore.getState().setSnapshot({
+      composerNodes: nodes,
+      attachments,
+      draft: deriveChatComposerDraft(nodes),
+      selectedSkills: deriveSelectedSkillsFromComposer(nodes)
+    });
+  };
+
+  private dedupeAttachments = (attachments: NcpDraftAttachment[]): NcpDraftAttachment[] => {
+    const seen = new Set<string>();
+    const output: NcpDraftAttachment[] = [];
+    for (const attachment of attachments) {
+      const signature = [
+        attachment.name,
+        attachment.mimeType,
+        String(attachment.sizeBytes),
+        attachment.contentBase64,
+      ].join(':');
+      if (seen.has(signature)) {
+        continue;
+      }
+      seen.add(signature);
+      output.push(attachment);
+    }
+    return output;
+  };
+
   syncSnapshot = (patch: Partial<ChatInputSnapshot>) => {
     if (!this.hasSnapshotChanges(patch)) {
       return;
@@ -88,6 +125,22 @@ export class NcpChatInputManager {
     this.syncComposerSnapshot(value);
   };
 
+  addAttachments = (attachments: NcpDraftAttachment[]) => {
+    if (attachments.length === 0) {
+      return;
+    }
+    const snapshot = useChatInputStore.getState().snapshot;
+    const nextAttachments = this.dedupeAttachments([...snapshot.attachments, ...attachments]);
+    const nextNodes = syncComposerAttachments(snapshot.composerNodes, nextAttachments);
+    this.syncComposerSnapshotWithAttachments(nextNodes, nextAttachments);
+  };
+
+  restoreComposerState = (nodes: ChatComposerNode[], attachments: NcpDraftAttachment[]) => {
+    const nextAttachments = this.dedupeAttachments(attachments);
+    const nextNodes = syncComposerAttachments(nodes, nextAttachments);
+    this.syncComposerSnapshotWithAttachments(nextNodes, nextAttachments);
+  };
+
   setPendingSessionType = (next: SetStateAction<string>) => {
     const prev = useChatInputStore.getState().snapshot.pendingSessionType;
     const value = this.resolveUpdateValue(prev, next);
@@ -101,7 +154,8 @@ export class NcpChatInputManager {
     const inputSnapshot = useChatInputStore.getState().snapshot;
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
     const message = inputSnapshot.draft.trim();
-    if (!message) {
+    const attachments = inputSnapshot.attachments;
+    if (!message && attachments.length === 0) {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
@@ -119,6 +173,7 @@ export class NcpChatInputManager {
       thinkingLevel: inputSnapshot.selectedThinkingLevel ?? undefined,
       stopSupported: true,
       requestedSkills,
+      attachments,
       restoreDraftOnError: true,
       composerNodes
     });