@nextclaw/ui 0.11.0 → 0.11.2

package/src/components/chat/adapters/chat-message.adapter.ts

@@ -1,32 +1,33 @@
 import {
   stringifyUnknown,
   summarizeToolArgs,
-  type ToolCard
-} from '@/lib/chat-message';
+  type ToolCard,
+} from "@/lib/chat-message";
 import type {
   ChatMessageRole,
   ChatMessageViewModel,
-  ChatToolPartViewModel
-} from '@nextclaw/agent-chat-ui';
+  ChatToolPartViewModel,
+} from "@nextclaw/agent-chat-ui";
 
 export type ChatMessagePartSource =
   | {
-      type: 'text';
+      type: "text";
       text: string;
     }
   | {
-      type: 'file';
+      type: "file";
       mimeType: string;
       data: string;
       url?: string;
       name?: string;
+      sizeBytes?: number;
     }
   | {
-      type: 'reasoning';
+      type: "reasoning";
       reasoning: string;
     }
   | {
-      type: 'tool-invocation';
+      type: "tool-invocation";
       toolInvocation: {
         status?: string;
         toolName: string;
@@ -34,6 +35,7 @@ export type ChatMessagePartSource =
         parsedArgs?: unknown;
         result?: unknown;
         error?: string;
+        cancelled?: boolean;
         toolCallId?: string;
       };
     }
@@ -63,8 +65,15 @@ export type ChatMessageAdapterTexts = {
   reasoningLabel: string;
   toolCallLabel: string;
   toolResultLabel: string;
+  toolInputLabel: string;
+  toolCallIdLabel: string;
   toolNoOutputLabel: string;
   toolOutputLabel: string;
+  toolStatusPreparingLabel: string;
+  toolStatusRunningLabel: string;
+  toolStatusCompletedLabel: string;
+  toolStatusFailedLabel: string;
+  toolStatusCancelledLabel: string;
   imageAttachmentLabel: string;
   fileAttachmentLabel: string;
   unknownPartLabel: string;
@@ -73,91 +82,114 @@ export type ChatMessageAdapterTexts = {
 const INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
+  return typeof value === "object" && value !== null;
 }
 
 function readOptionalString(value: unknown): string | null {
-  if (typeof value !== 'string') {
+  if (typeof value !== "string") {
     return null;
   }
   const trimmed = value.trim();
   return trimmed.length > 0 ? trimmed : null;
 }
 
+function readOptionalNumber(value: unknown): number | null {
+  if (typeof value === "number" && Number.isFinite(value) && value >= 0) {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+}
+
 function extractAssetFileView(
   value: unknown,
-  texts: ChatMessageAdapterTexts
-):
-  | {
-      type: 'file';
-      file: {
-        label: string;
-        mimeType: string;
-        dataUrl: string;
-        isImage: boolean;
-      };
-    }
-  | null {
+  texts: ChatMessageAdapterTexts,
+): {
+  type: "file";
+  file: {
+    label: string;
+    mimeType: string;
+    dataUrl: string;
+    sizeBytes?: number;
+    isImage: boolean;
+  };
+} | null {
   if (!isRecord(value)) {
     return null;
   }
   const assetCandidate = isRecord(value.asset)
     ? value.asset
-    : Array.isArray(value.assets) && value.assets.length > 0 && isRecord(value.assets[0])
+    : Array.isArray(value.assets) &&
+        value.assets.length > 0 &&
+        isRecord(value.assets[0])
       ? value.assets[0]
       : null;
   if (!assetCandidate) {
     return null;
   }
   const url = readOptionalString(assetCandidate.url);
-  const mimeType = readOptionalString(assetCandidate.mimeType) ?? 'application/octet-stream';
+  const mimeType =
+    readOptionalString(assetCandidate.mimeType) ?? "application/octet-stream";
+  const sizeBytes = readOptionalNumber(assetCandidate.sizeBytes);
   if (!url) {
     return null;
   }
   const label =
     readOptionalString(assetCandidate.name) ??
-    (mimeType.startsWith('image/') ? texts.imageAttachmentLabel : texts.fileAttachmentLabel);
+    (mimeType.startsWith("image/")
+      ? texts.imageAttachmentLabel
+      : texts.fileAttachmentLabel);
   return {
-    type: 'file',
+    type: "file",
     file: {
       label,
       mimeType,
       dataUrl: url,
-      isImage: mimeType.startsWith('image/')
-    }
+      ...(sizeBytes != null ? { sizeBytes } : {}),
+      isImage: mimeType.startsWith("image/"),
+    },
   };
 }
 
-function isTextPart(part: ChatMessagePartSource): part is Extract<ChatMessagePartSource, { type: 'text' }> {
-  return part.type === 'text' && typeof part.text === 'string';
+function isTextPart(
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "text" }> {
+  return part.type === "text" && typeof part.text === "string";
 }
 
 function isReasoningPart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'reasoning' }> {
-  return part.type === 'reasoning' && typeof part.reasoning === 'string';
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "reasoning" }> {
+  return part.type === "reasoning" && typeof part.reasoning === "string";
 }
 
 function isFilePart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'file' }> {
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "file" }> {
   return (
-    part.type === 'file' &&
-    typeof part.mimeType === 'string' &&
-    typeof part.data === 'string'
+    part.type === "file" &&
+    typeof part.mimeType === "string" &&
+    typeof part.data === "string"
   );
 }
 
 function isToolInvocationPart(
-  part: ChatMessagePartSource
-): part is Extract<ChatMessagePartSource, { type: 'tool-invocation' }> {
-  if (part.type !== 'tool-invocation') {
+  part: ChatMessagePartSource,
+): part is Extract<ChatMessagePartSource, { type: "tool-invocation" }> {
+  if (part.type !== "tool-invocation") {
     return false;
   }
   if (!isRecord(part.toolInvocation)) {
     return false;
   }
-  return typeof part.toolInvocation.toolName === 'string';
+  return typeof part.toolInvocation.toolName === "string";
 }
 
 function resolveMessageTimestamp(message: ChatMessageSource): string {
@@ -170,33 +202,38 @@ function resolveMessageTimestamp(message: ChatMessageSource): string {
 
 function resolveRoleLabel(
   role: string,
-  texts: ChatMessageAdapterTexts['roleLabels']
+  texts: ChatMessageAdapterTexts["roleLabels"],
 ): string {
-  if (role === 'user') {
+  if (role === "user") {
     return texts.user;
   }
-  if (role === 'assistant') {
+  if (role === "assistant") {
     return texts.assistant;
   }
-  if (role === 'tool') {
+  if (role === "tool") {
     return texts.tool;
   }
-  if (role === 'system') {
+  if (role === "system") {
     return texts.system;
   }
   return texts.fallback;
 }
 
 function resolveUiRole(role: string): ChatMessageRole {
-  if (role === 'user' || role === 'assistant' || role === 'tool' || role === 'system') {
+  if (
+    role === "user" ||
+    role === "assistant" ||
+    role === "tool" ||
+    role === "system"
+  ) {
     return role;
   }
-  return 'message';
+  return "message";
 }
 
 function buildToolCard(
-  toolCard: ToolCard,
-  texts: ChatMessageAdapterTexts
+  toolCard: ToolCardViewSource,
+  texts: ChatMessageAdapterTexts,
 ): ChatToolPartViewModel {
   return {
     kind: toolCard.kind,
@@ -204,9 +241,75 @@ function buildToolCard(
     summary: toolCard.detail,
     output: toolCard.text,
     hasResult: Boolean(toolCard.hasResult),
-    titleLabel: toolCard.kind === 'call' ? texts.toolCallLabel : texts.toolResultLabel,
+    statusTone: toolCard.statusTone,
+    statusLabel: toolCard.statusLabel,
+    titleLabel:
+      toolCard.kind === "call" ? texts.toolCallLabel : texts.toolResultLabel,
+    inputLabel: texts.toolInputLabel,
     outputLabel: texts.toolOutputLabel,
-    emptyLabel: texts.toolNoOutputLabel
+    emptyLabel: texts.toolNoOutputLabel,
+    callIdLabel: texts.toolCallIdLabel,
+    callId: toolCard.callId,
+  };
+}
+
+type ToolCardViewSource = ToolCard & {
+  statusTone: ChatToolPartViewModel["statusTone"];
+  statusLabel: string;
+};
+
+function resolveToolCardStatus(params: {
+  status?: string;
+  error?: string;
+  cancelled?: boolean;
+  result?: unknown;
+  texts: ChatMessageAdapterTexts;
+}): Pick<
+  ChatToolPartViewModel,
+  "kind" | "hasResult" | "statusTone" | "statusLabel"
+> {
+  const rawStatus =
+    typeof params.status === "string" ? params.status.trim().toLowerCase() : "";
+  const hasError =
+    typeof params.error === "string" && params.error.trim().length > 0;
+  const isCancelled = params.cancelled === true || rawStatus === "cancelled";
+  if (isCancelled) {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "cancelled",
+      statusLabel: params.texts.toolStatusCancelledLabel,
+    };
+  }
+  if (hasError || rawStatus === "error") {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "error",
+      statusLabel: params.texts.toolStatusFailedLabel,
+    };
+  }
+  if (rawStatus === "result" || params.result != null) {
+    return {
+      kind: "result",
+      hasResult: true,
+      statusTone: "success",
+      statusLabel: params.texts.toolStatusCompletedLabel,
+    };
+  }
+  if (rawStatus === "partial-call") {
+    return {
+      kind: "call",
+      hasResult: false,
+      statusTone: "running",
+      statusLabel: params.texts.toolStatusPreparingLabel,
+    };
+  }
+  return {
+    kind: "call",
+    hasResult: false,
+    statusTone: "running",
+    statusLabel: params.texts.toolStatusRunningLabel,
   };
 }
 
@@ -238,8 +341,8 @@ export function adaptChatMessages(params: {
             return null;
           }
           return {
-            type: 'markdown' as const,
-            text
+            type: "markdown" as const,
+            text,
           };
         }
         if (isReasoningPart(part)) {
@@ -248,66 +351,80 @@ export function adaptChatMessages(params: {
             return null;
           }
           return {
-            type: 'reasoning' as const,
+            type: "reasoning" as const,
             text,
-            label: params.texts.reasoningLabel
+            label: params.texts.reasoningLabel,
           };
         }
         if (isFilePart(part)) {
-          const isImage = part.mimeType.startsWith('image/');
+          const isImage = part.mimeType.startsWith("image/");
+          const sizeBytes = readOptionalNumber(part.sizeBytes);
           return {
-            type: 'file' as const,
+            type: "file" as const,
             file: {
               label:
-                typeof part.name === 'string' && part.name.trim()
+                typeof part.name === "string" && part.name.trim()
                   ? part.name.trim()
                   : isImage
                     ? params.texts.imageAttachmentLabel
                     : params.texts.fileAttachmentLabel,
               mimeType: part.mimeType,
               dataUrl:
-                typeof part.url === 'string' && part.url.trim().length > 0
+                typeof part.url === "string" && part.url.trim().length > 0
                   ? part.url.trim()
                   : `data:${part.mimeType};base64,${part.data}`,
-              isImage
-            }
+              ...(sizeBytes != null ? { sizeBytes } : {}),
+              isImage,
+            },
           };
         }
         if (isToolInvocationPart(part)) {
           const invocation = part.toolInvocation;
-          const assetFileView = extractAssetFileView(invocation.result, params.texts);
+          const assetFileView = extractAssetFileView(
+            invocation.result,
+            params.texts,
+          );
           if (assetFileView) {
             return assetFileView;
           }
-          const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+          const statusView = resolveToolCardStatus({
+            status: invocation.status,
+            error: invocation.error,
+            cancelled: invocation.cancelled,
+            result: invocation.result,
+            texts: params.texts,
+          });
+          const detail = summarizeToolArgs(
+            invocation.parsedArgs ?? invocation.args,
+          );
           const rawResult =
-            typeof invocation.error === 'string' && invocation.error.trim()
+            typeof invocation.error === "string" && invocation.error.trim()
               ? invocation.error.trim()
               : invocation.result != null
                 ? stringifyUnknown(invocation.result).trim()
-                : '';
-          const hasResult =
-            invocation.status === 'result' || invocation.status === 'error' || invocation.status === 'cancelled';
-          const card: ToolCard = {
-            kind: hasResult ? 'result' : 'call',
+                : "";
+          const card: ToolCardViewSource = {
+            kind: statusView.kind,
             name: invocation.toolName,
             detail,
             text: rawResult || undefined,
             callId: invocation.toolCallId || undefined,
-            hasResult
+            hasResult: statusView.hasResult,
+            statusTone: statusView.statusTone,
+            statusLabel: statusView.statusLabel,
           };
           return {
-            type: 'tool-card' as const,
-            card: buildToolCard(card, params.texts)
+            type: "tool-card" as const,
+            card: buildToolCard(card, params.texts),
           };
         }
         return {
-          type: 'unknown' as const,
+          type: "unknown" as const,
           label: params.texts.unknownPartLabel,
-          rawType: typeof part.type === 'string' ? part.type : 'unknown',
-          text: stringifyUnknown(part)
+          rawType: typeof part.type === "string" ? part.type : "unknown",
+          text: stringifyUnknown(part),
         };
       })
-      .filter((part) => part !== null)
+      .filter((part) => part !== null),
   }));
 }

package/src/components/chat/chat-attachment-upload-limit.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi } from 'vitest';
+import {
+  DEFAULT_NCP_ATTACHMENT_MAX_BYTES,
+  uploadFilesAsNcpDraftAttachments
+} from '../../../../ncp-packages/nextclaw-ncp-react/src/attachments/ncp-attachments.ts';
+
+describe('ncp attachment upload limit', () => {
+  it('accepts files larger than the previous 10MB cap', async () => {
+    expect(DEFAULT_NCP_ATTACHMENT_MAX_BYTES).toBe(200 * 1024 * 1024);
+
+    const file = new File([new Uint8Array(12 * 1024 * 1024)], 'large-image.png', {
+      type: 'image/png'
+    });
+    const uploadBatch = vi.fn(async (files: File[]) =>
+      files.map((entry) => ({
+        id: entry.name,
+        name: entry.name,
+        mimeType: entry.type,
+        sizeBytes: entry.size,
+        assetUri: `asset://store/${entry.name}`,
+      }))
+    );
+
+    const result = await uploadFilesAsNcpDraftAttachments([file], {
+      uploadBatch
+    });
+
+    expect(result.rejected).toEqual([]);
+    expect(uploadBatch).toHaveBeenCalledOnce();
+    expect(uploadBatch).toHaveBeenCalledWith([file]);
+    expect(result.attachments).toEqual([
+      {
+        id: 'large-image.png',
+        name: 'large-image.png',
+        mimeType: 'image/png',
+        sizeBytes: 12 * 1024 * 1024,
+        assetUri: 'asset://store/large-image.png',
+      }
+    ]);
+  });
+});

package/src/components/chat/chat-session-display.ts

@@ -0,0 +1,9 @@
+import type { SessionEntryView } from '@/api/types';
+
+export function sessionDisplayName(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(':');
+  return chunks[chunks.length - 1] || session.key;
+}

package/src/components/chat/chat-session-label.service.ts

@@ -1,12 +1,9 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
-import { updateSession } from '@/api/config';
 import { updateNcpSession } from '@/api/ncp-session';
-import type { ChatChain } from '@/components/chat/chat-chain';
 import { t } from '@/lib/i18n';
 
 type UpdateChatSessionLabelParams = {
-  chatChain: ChatChain;
   sessionKey: string;
   label: string | null;
 };
@@ -16,15 +13,9 @@ export function useChatSessionLabelService() {
 
   return async (params: UpdateChatSessionLabelParams): Promise<void> => {
     try {
-      if (params.chatChain === 'ncp') {
-        await updateNcpSession(params.sessionKey, { label: params.label });
-        queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
-        queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', params.sessionKey] });
-      } else {
-        await updateSession(params.sessionKey, { label: params.label });
-        queryClient.invalidateQueries({ queryKey: ['sessions'] });
-        queryClient.invalidateQueries({ queryKey: ['session-history', params.sessionKey] });
-      }
+      await updateNcpSession(params.sessionKey, { label: params.label });
+      queryClient.invalidateQueries({ queryKey: ['ncp-sessions'] });
+      queryClient.invalidateQueries({ queryKey: ['ncp-session-messages', params.sessionKey] });
       toast.success(t('configSavedApplied'));
     } catch (error) {
       toast.error(t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)));

package/src/components/chat/chat-session-preference-sync.test.ts

@@ -1,19 +1,16 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { updateSession } from '@/api/config';
+import { updateNcpSession } from '@/api/ncp-session';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 
-vi.mock('@/api/config', () => ({
-  updateSession: vi.fn(async () => ({
-    key: 'session-1',
-    totalMessages: 0,
-    totalEvents: 0,
-    sessionType: 'native',
-    sessionTypeMutable: false,
-    metadata: {},
-    messages: [],
-    events: []
+vi.mock('@/api/ncp-session', () => ({
+  updateNcpSession: vi.fn(async () => ({
+    sessionId: 'session-1',
+    messageCount: 0,
+    updatedAt: new Date().toISOString(),
+    status: 'idle',
+    metadata: {}
   }))
 }));
 
@@ -50,10 +47,10 @@ describe('ChatSessionPreferenceSync', () => {
       }
     }));
 
-    const sync = new ChatSessionPreferenceSync(updateSession);
+    const sync = new ChatSessionPreferenceSync(updateNcpSession);
     sync.syncSelectedSessionPreferences();
     await vi.waitFor(() => {
-      expect(updateSession).toHaveBeenCalledWith('session-1', {
+      expect(updateNcpSession).toHaveBeenCalledWith('session-1', {
         preferredModel: 'openai/gpt-5',
         preferredThinking: 'high'
       });

package/src/components/chat/chat-stream/types.ts

@@ -1,18 +1,9 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpMessagePart } from '@nextclaw/ncp';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import type {
-  ChatRunView,
-  ChatTurnStreamDeltaEvent,
-  ChatTurnStreamReadyEvent,
-  ChatTurnStreamSessionEvent,
-  SessionMessageView,
-  ThinkingLevel
-} from '@/api/types';
+import type { ThinkingLevel } from '@/api/types';
 
 export type SendMessageParams = {
-  runId?: string;
   message: string;
   sessionKey: string;
   agentId: string;
@@ -28,58 +19,14 @@ export type SendMessageParams = {
   composerNodes?: ChatComposerNode[];
 };
 
-export type ActiveRunState = {
-  localRunId: number;
+export type ResumeRunParams = {
   sessionKey: string;
-  agentId?: string;
-  backendRunId?: string;
-  backendStopSupported: boolean;
-  backendStopReason?: string;
-};
-
-export type StreamReadyPayload = {
-  sessionKey: string;
-  runId?: string;
-  stopSupported?: boolean;
-  stopReason?: string;
-  requestedAt?: string;
-};
-
-export type StreamReadyEvent = ChatTurnStreamReadyEvent;
-export type StreamDeltaEvent = ChatTurnStreamDeltaEvent;
-export type StreamSessionEvent = ChatTurnStreamSessionEvent;
-
-export type NextbotAgentRunMetadata =
-  | {
-      driver: 'nextbot-stream';
-      mode: 'send';
-      payload: SendMessageParams;
-      requestedSkills: string[];
-    }
-  | {
-      driver: 'nextbot-stream';
-      mode: 'resume';
-      runId: string;
-      fromEventIndex?: number;
-      sessionKey?: string;
-      agentId?: string;
-      stopSupported?: boolean;
-      stopReason?: string;
-    };
-
-export type UseChatStreamControllerParams = {
-  selectedSessionKeyRef: MutableRefObject<string | null>;
-  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
-  setDraft: Dispatch<SetStateAction<string>>;
-  setComposerNodes: Dispatch<SetStateAction<ChatComposerNode[]>>;
-  refetchSessions: () => Promise<unknown>;
-  refetchHistory: () => Promise<unknown>;
 };
 
 export type ChatStreamActions = {
   sendMessage: (payload: SendMessageParams) => Promise<void>;
   stopCurrentRun: () => Promise<void>;
-  resumeRun: (run: ChatRunView) => Promise<void>;
+  resumeRun: (run: ResumeRunParams) => Promise<void>;
   resetStreamState: () => void;
-  applyHistoryMessages: (messages: SessionMessageView[], options?: { isLoading?: boolean }) => void;
+  applyHistoryMessages: (messages: unknown[], options?: { isLoading?: boolean }) => void;
 };

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

@@ -46,8 +46,15 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
           reasoningLabel: t("chatReasoning"),
           toolCallLabel: t("chatToolCall"),
           toolResultLabel: t("chatToolResult"),
+          toolInputLabel: t("chatToolInput"),
+          toolCallIdLabel: t("chatToolCallId"),
           toolNoOutputLabel: t("chatToolNoOutput"),
           toolOutputLabel: t("chatToolOutput"),
+          toolStatusPreparingLabel: t("chatToolStatusPreparing"),
+          toolStatusRunningLabel: t("chatToolStatusRunning"),
+          toolStatusCompletedLabel: t("chatToolStatusCompleted"),
+          toolStatusFailedLabel: t("chatToolStatusFailed"),
+          toolStatusCancelledLabel: t("chatToolStatusCancelled"),
           imageAttachmentLabel: t("chatImageAttachment"),
           fileAttachmentLabel: t("chatFileAttachment"),
           unknownPartLabel: t("chatUnknownPart"),