@nextclaw/ui 0.12.9 → 0.12.11

package/src/components/chat/chat-session-workspace-file-preview.tsx

@@ -8,12 +8,14 @@ import {
   FileOperationCodeSurface,
 } from "@nextclaw/agent-chat-ui";
 import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "@/components/chat/workspace/chat-session-workspace-file-breadcrumbs";
 import { useServerPathRead } from "@/hooks/server-path/use-server-path-read";
 import {
   buildLineDiff,
   buildPreviewLines,
 } from "@/components/chat/adapters/file-operation/line-builder";
 import { t } from "@/lib/i18n";
+import { buildWorkspaceFileBreadcrumb } from "@/lib/session-project/workspace-file-breadcrumb";
 import { cn } from "@/lib/utils";
 
 function inferPreviewKind(params: {
@@ -118,44 +120,6 @@ function WorkspaceFilePreviewStatus({
   );
 }
 
-function WorkspaceFileHeader({
-  file,
-  resolvedPath,
-  truncated,
-}: {
-  file: ChatWorkspaceFileTab;
-  resolvedPath: string;
-  truncated: boolean;
-}) {
-  return (
-    <div className="border-b border-gray-200/80 px-4 py-3">
-      <div
-        title={resolvedPath}
-        className="truncate font-mono text-[12px] font-medium text-gray-700"
-      >
-        {resolvedPath}
-      </div>
-      <div className="mt-2 flex flex-wrap items-center gap-2">
-        <span className="rounded border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-gray-500">
-          {file.viewMode === "diff"
-            ? t("chatWorkspaceDiff")
-            : t("chatWorkspacePreview")}
-        </span>
-        {typeof file.line === "number" ? (
-          <span className="rounded border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-medium text-gray-500">
-            {`L${file.line}${typeof file.column === "number" ? `:${file.column}` : ""}`}
-          </span>
-        ) : null}
-        {truncated ? (
-          <span className="rounded border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-medium text-amber-700">
-            {t("chatWorkspacePreviewTruncated")}
-          </span>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
 function WorkspaceDiffBody({
   diffBlock,
 }: {
@@ -280,14 +244,21 @@ export function ChatSessionWorkspaceFilePreview({
   }, [file.line, file.path, isPreviewMode, previewQuery.data?.resolvedPath, previewText]);
   const resolvedPath = previewQuery.data?.resolvedPath ?? file.path;
   const isTruncated = Boolean(previewQuery.data?.truncated);
+  const breadcrumb = useMemo(
+    () =>
+      buildWorkspaceFileBreadcrumb({
+        path: resolvedPath,
+        sessionProjectRoot,
+        line: file.line,
+        column: file.column,
+        truncated: isTruncated,
+      }),
+    [file.column, file.line, isTruncated, resolvedPath, sessionProjectRoot],
+  );
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-white">
-      <WorkspaceFileHeader
-        file={file}
-        resolvedPath={resolvedPath}
-        truncated={isTruncated}
-      />
+      <ChatSessionWorkspaceFileBreadcrumbs breadcrumb={breadcrumb} />
 
       <div className="flex-1 min-h-0 overflow-hidden">
         {file.viewMode === "diff" ? (

package/src/components/chat/chat-session-workspace-panel-nav.tsx

@@ -186,8 +186,14 @@ export function WorkspaceTabsBar({
   tabs: readonly WorkspaceTabViewModel[];
 }) {
   return (
-    <div className="overflow-x-auto border-b border-gray-200/70 bg-gray-50/85 custom-scrollbar">
-      <div className="flex min-w-max items-stretch">
+    <div
+      data-testid="workspace-tabs-bar"
+      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/70 bg-gray-50/85"
+    >
+      <div
+        data-testid="workspace-tabs-scroll"
+        className="flex min-w-max items-stretch"
+      >
         {tabs.map((tab) => (
           <WorkspaceTabItem key={tab.key} tab={tab} />
         ))}

package/src/components/chat/chat-sidebar-project-groups.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState, type ReactNode } from 'react';
 import { Plus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
 import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { t } from '@/lib/i18n';
-import { cn } from '@/lib/utils';
 
 export type ChatSidebarProjectGroup = {
   projectRoot: string;
@@ -34,16 +34,6 @@ function resolveProjectGroupDefaultSessionType(
   return sessionTypeOptions[0]?.value ?? defaultSessionType;
 }
 
-function resolveSessionTypeStatusText(option: {
-  ready?: boolean;
-  reasonMessage?: string | null;
-}): string {
-  if (option.ready === false) {
-    return option.reasonMessage?.trim() || t('statusSetup');
-  }
-  return t('statusReady');
-}
-
 export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
   const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
   const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
@@ -91,38 +81,23 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                       <Plus className="h-3.5 w-3.5" />
                     </Button>
                   </PopoverTrigger>
-                  <PopoverContent align="end" className="w-64 p-2">
-                    <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+                  <PopoverContent
+                    align="end"
+                    className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+                  >
+                    <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
                       {t('chatSessionTypeLabel')}
                     </div>
-                    <div className="mt-1 space-y-1">
+                    <div className="space-y-1">
                       {sessionTypeOptions.map((option) => (
-                        <button
+                        <ChatSessionTypeOptionItem
                           key={`${group.projectRoot}:${option.value}`}
-                          type="button"
-                          onClick={() => {
+                          option={option}
+                          onSelect={() => {
                             onCreateSession(option.value, group.projectRoot);
                             setOpenProjectRoot(null);
                           }}
-                          className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
-                        >
-                          <div className="flex items-center justify-between gap-3">
-                            <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
-                            <span
-                              className={cn(
-                                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
-                                option.ready === false
-                                  ? 'bg-amber-100 text-amber-800'
-                                  : 'bg-emerald-100 text-emerald-700'
-                              )}
-                            >
-                              {option.ready === false ? t('statusSetup') : t('statusReady')}
-                            </span>
-                          </div>
-                          <div className="mt-0.5 text-[11px] text-gray-500">
-                            {resolveSessionTypeStatusText(option)}
-                          </div>
-                        </button>
+                        />
                       ))}
                     </div>
                   </PopoverContent>

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

@@ -16,6 +16,13 @@ import {
   type ChatThinkingLevel
 } from '@/components/chat/adapters/chat-input-bar.adapter';
 import { deriveSelectedSkillsFromComposer } from '@/components/chat/chat-composer-state';
+import {
+  hasNcpChatModelOptions,
+  isNcpChatComposerDisabled,
+  isNcpChatModelOptionsEmpty,
+  isNcpChatModelOptionsLoading,
+  isNcpChatSendDisabled,
+} from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import {
   CHAT_RECENT_MODELS_MIN_OPTIONS,
@@ -27,6 +34,7 @@ import {
 } from '@/components/chat/chat-recent-skills.manager';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatRuntimeAvailability } from '@/features/system-status';
 import type { SessionSkillEntryView } from '@/api/types';
 import { t } from '@/lib/i18n';
 import { toast } from 'sonner';
@@ -83,11 +91,13 @@ export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
+  const runtimeAvailability = useChatRuntimeAvailability();
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
   const inputBarRef = useRef<ChatInputBarHandle | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const skillScopeLabels = useMemo<Record<'builtin' | 'project' | 'workspace', string>>(() => {
+    void language;
     return {
       builtin: t('chatSkillScopeBuiltin'),
       project: t('chatSkillScopeProject'),
@@ -96,6 +106,7 @@ export function ChatInputBarContainer() {
   }, [language]);
   const slashTexts = useMemo(
     () => {
+      void language;
       return {
         slashSkillSubtitle: t('chatSlashTypeSkill'),
         slashSkillSpecLabel: t('chatSlashSkillSpec'),
@@ -124,17 +135,14 @@ export function ChatInputBarContainer() {
     minAvailableCount: CHAT_RECENT_SKILLS_MIN_OPTIONS
   });
 
-  const hasModelOptions = modelRecords.length > 0;
-  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
-  const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
-  const inputDisabled =
-    ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const hasModelOptions = hasNcpChatModelOptions(snapshot);
+  const isModelOptionsLoading = isNcpChatModelOptionsLoading(snapshot);
+  const isModelOptionsEmpty = isNcpChatModelOptionsEmpty(snapshot);
+  const inputDisabled = isNcpChatComposerDisabled(snapshot);
   const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
-  const textareaPlaceholder = isModelOptionsLoading
-    ? ''
-    : hasModelOptions
-      ? t('chatInputPlaceholder')
-      : t('chatModelNoOptions');
+  const textareaPlaceholder = isModelOptionsEmpty
+    ? t('chatModelNoOptions')
+    : t('chatInputPlaceholder');
   const recentModelsLabel = t('chatPickerRecentModels');
   const allModelsLabel = t('chatPickerAllModels');
   const recentSkillsLabel = t('chatPickerRecent');
@@ -298,10 +306,14 @@ export function ChatInputBarContainer() {
           ],
           skillPicker,
           actions: {
-            sendError: snapshot.sendError,
+            sendError: runtimeAvailability.isBlocked ? null : snapshot.sendError,
             isSending: snapshot.isSending,
             canStopGeneration: snapshot.canStopGeneration,
-            sendDisabled: !hasSendableDraft || !hasModelOptions || snapshot.sessionTypeUnavailable,
+            sendDisabled: isNcpChatSendDisabled({
+              snapshot,
+              hasSendableDraft,
+              isRuntimeBlocked: runtimeAvailability.isBlocked,
+            }),
             stopDisabled: !snapshot.canStopGeneration,
             stopHint: resolvedStopHint,
             sendButtonLabel: t('chatSend'),

package/src/components/chat/{ChatSidebar.test.tsx → containers/chat-sidebar.test.tsx}

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ChatSidebar } from '@/components/chat/ChatSidebar';
+import { ChatSidebar } from '@/components/chat/containers/chat-sidebar';
 import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
@@ -107,9 +107,10 @@ vi.mock('@/components/providers/ThemeProvider', () => ({
   })
 }));
 
-vi.mock('@/stores/ui.store', () => ({
-  useUiStore: (selector: (state: { connectionStatus: string }) => unknown) =>
-    selector({ connectionStatus: 'connected' })
+vi.mock('@/features/system-status', () => ({
+  useSystemStatus: () => ({
+    connectionStatus: 'connected'
+  })
 }));
 
 function resetSidebarTestState() {

package/src/components/chat/{ChatSidebar.tsx → containers/chat-sidebar.tsx}

@@ -7,13 +7,14 @@ import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
+import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
 import { ChatSidebarListModeSwitch } from '@/components/chat/chat-sidebar-list-mode-switch';
 import {
   ChatSidebarProjectGroups,
   type ChatSidebarProjectGroup
 } from '@/components/chat/chat-sidebar-project-groups';
 import { resolveSessionContextView } from '@/lib/session-context.utils';
-import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
+import { useChatSidebarSessionLabelEditor } from '@/components/chat/hooks/use-chat-sidebar-session-label-editor';
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -30,7 +31,7 @@ import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { useDocBrowser } from '@/components/doc-browser';
 import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
-import { useUiStore } from '@/stores/ui.store';
+import { useSystemStatus } from '@/features/system-status';
 import {
   AlarmClock,
   Bot,
@@ -130,16 +131,6 @@ function sessionTitle(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
-function resolveSessionTypeStatusText(option: {
-  ready?: boolean;
-  reasonMessage?: string | null;
-}): string {
-  if (option.ready === false) {
-    return option.reasonMessage?.trim() || t('statusSetup');
-  }
-  return t('statusReady');
-}
-
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
@@ -178,22 +169,17 @@ function useChatSessionUnreadState(
 
   return optimisticReadAtBySessionKey;
 }
-
 export function ChatSidebar() {
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
   const [isCreateMenuOpen, setIsCreateMenuOpen] = useState(false);
-  const [editingSessionKey, setEditingSessionKey] = useState<string | null>(null);
-  const [draftLabel, setDraftLabel] = useState('');
-  const [savingSessionKey, setSavingSessionKey] = useState<string | null>(null);
   const inputSnapshot = useChatInputStore((state) => state.snapshot);
   const listSnapshot = useChatSessionListStore((state) => state.snapshot);
-  const connectionStatus = useUiStore((state) => state.connectionStatus);
+  const systemStatus = useSystemStatus();
   const agentsQuery = useAgents();
   const { isLoading, items } = useNcpSessionListView();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
-  const updateSessionLabel = useChatSessionLabel();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
   const agentsById = useMemo(
@@ -230,39 +216,20 @@ export function ChatSidebar() {
     listSnapshot.selectedSessionKey,
     presenter.chatSessionListManager.markSessionRead,
   );
+  const {
+    editingSessionKey,
+    draftLabel,
+    savingSessionKey,
+    setDraftLabel,
+    startEditingSessionLabel,
+    cancelEditingSessionLabel,
+    saveSessionLabel,
+  } = useChatSidebarSessionLabelEditor();
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
     setLanguage(nextLang);
     window.location.reload();
   };
-  const startEditingSessionLabel = (session: SessionEntryView) => {
-    setEditingSessionKey(session.key);
-    setDraftLabel(session.label?.trim() ?? '');
-  };
-  const cancelEditingSessionLabel = () => {
-    setEditingSessionKey(null);
-    setDraftLabel('');
-    setSavingSessionKey(null);
-  };
-  const saveSessionLabel = async (session: SessionEntryView) => {
-    const normalizedLabel = draftLabel.trim();
-    const currentLabel = session.label?.trim() ?? '';
-    if (normalizedLabel === currentLabel) {
-      cancelEditingSessionLabel();
-      return;
-    }
-
-    setSavingSessionKey(session.key);
-    try {
-      await updateSessionLabel({
-        sessionKey: session.key,
-        label: normalizedLabel || null
-      });
-      cancelEditingSessionLabel();
-    } catch {
-      setSavingSessionKey(null);
-    }
-  };
   const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
     const active = listSnapshot.selectedSessionKey === session.key;
     const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
@@ -315,7 +282,7 @@ export function ChatSidebar() {
       <div className="px-5 pt-5 pb-3">
         <BrandHeader
           className="flex items-center gap-2.5 min-w-0"
-          suffix={<StatusBadge status={connectionStatus} />}
+          suffix={<StatusBadge status={systemStatus.connectionStatus} />}
         />
       </div>
 
@@ -347,38 +314,23 @@ export function ChatSidebar() {
                   <ChevronDown className="h-4 w-4" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-64 p-2">
-                <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+              <PopoverContent
+                align="end"
+                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+              >
+                <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
                   {t('chatSessionTypeLabel')}
                 </div>
-                <div className="mt-1 space-y-1">
+                <div className="space-y-1">
                   {nonDefaultSessionTypeOptions.map((option) => (
-                    <button
+                    <ChatSessionTypeOptionItem
                       key={option.value}
-                      type="button"
-                      onClick={() => {
+                      option={option}
+                      onSelect={() => {
                         presenter.chatSessionListManager.createSession(option.value);
                         setIsCreateMenuOpen(false);
                       }}
-                      className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
-                    >
-                      <div className="flex items-center justify-between gap-3">
-                        <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
-                        <span
-                          className={cn(
-                            'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
-                            option.ready === false
-                              ? 'bg-amber-100 text-amber-800'
-                              : 'bg-emerald-100 text-emerald-700'
-                          )}
-                        >
-                          {option.ready === false ? t('statusSetup') : t('statusReady')}
-                        </span>
-                      </div>
-                      <div className="mt-0.5 text-[11px] text-gray-500">
-                        {resolveSessionTypeStatusText(option)}
-                      </div>
-                    </button>
+                    />
                   ))}
                 </div>
               </PopoverContent>

package/src/components/chat/hooks/use-chat-sidebar-session-label-editor.ts

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-label';
+
+export function useChatSidebarSessionLabelEditor() {
+  const updateSessionLabel = useChatSessionLabel();
+  const [editingSessionKey, setEditingSessionKey] = useState<string | null>(null);
+  const [draftLabel, setDraftLabel] = useState('');
+  const [savingSessionKey, setSavingSessionKey] = useState<string | null>(null);
+
+  const startEditingSessionLabel = (session: SessionEntryView) => {
+    setEditingSessionKey(session.key);
+    setDraftLabel(session.label?.trim() ?? '');
+  };
+  const cancelEditingSessionLabel = () => {
+    setEditingSessionKey(null);
+    setDraftLabel('');
+    setSavingSessionKey(null);
+  };
+  const saveSessionLabel = async (session: SessionEntryView) => {
+    const normalizedLabel = draftLabel.trim();
+    const currentLabel = session.label?.trim() ?? '';
+    if (normalizedLabel === currentLabel) {
+      cancelEditingSessionLabel();
+      return;
+    }
+
+    setSavingSessionKey(session.key);
+    try {
+      await updateSessionLabel({
+        sessionKey: session.key,
+        label: normalizedLabel || null,
+      });
+      cancelEditingSessionLabel();
+    } catch {
+      setSavingSessionKey(null);
+    }
+  };
+
+  return {
+    editingSessionKey,
+    draftLabel,
+    savingSessionKey,
+    setDraftLabel,
+    startEditingSessionLabel,
+    cancelEditingSessionLabel,
+    saveSessionLabel,
+  };
+}

package/src/components/chat/ncp/__tests__/ncp-session-adapter.cancelled-tool.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { adaptChatMessage } from '@/components/chat/adapters/chat-message.adapter';
+import { adaptNcpMessageToUiMessage } from '../ncp-session-adapter';
+
+const texts = {
+  roleLabels: {
+    user: 'User',
+    assistant: 'Assistant',
+    tool: 'Tool',
+    system: 'System',
+    fallback: 'Message',
+  },
+  reasoningLabel: 'Reasoning',
+  toolCallLabel: 'Tool Call',
+  toolResultLabel: 'Tool Result',
+  toolInputLabel: 'Input',
+  toolNoOutputLabel: 'No output',
+  toolOutputLabel: 'Output',
+  toolStatusPreparingLabel: 'Preparing',
+  toolStatusRunningLabel: 'Running',
+  toolStatusCompletedLabel: 'Completed',
+  toolStatusFailedLabel: 'Failed',
+  toolStatusCancelledLabel: 'Cancelled',
+  imageAttachmentLabel: 'Image',
+  fileAttachmentLabel: 'File',
+  unknownPartLabel: 'Unknown',
+};
+
+describe('adaptNcpMessageToUiMessage cancelled tools', () => {
+  it('renders cancelled tool invocations as cancelled cards', () => {
+    const uiMessage = adaptNcpMessageToUiMessage({
+      id: 'ncp-message-tool-cancelled-1',
+      sessionId: 'ncp-session-1',
+      role: 'assistant',
+      status: 'final',
+      timestamp: '2026-04-01T00:00:00.000Z',
+      parts: [
+        {
+          type: 'tool-invocation',
+          toolCallId: 'tool-cancelled-1',
+          toolName: 'write_file',
+          state: 'cancelled',
+          args: JSON.stringify({
+            path: 'src/app.ts',
+            content: 'hello',
+          }),
+        },
+      ],
+    });
+
+    const adapted = adaptChatMessage(
+      {
+        id: uiMessage.id,
+        role: uiMessage.role,
+        meta: {
+          timestamp: uiMessage.meta?.timestamp,
+          status: uiMessage.meta?.status,
+        },
+        parts: uiMessage.parts as never,
+      },
+      {
+        formatTimestamp: (value) => value ?? '',
+        texts,
+      },
+    );
+
+    expect(adapted.parts[0]).toMatchObject({
+      type: 'tool-card',
+      card: {
+        toolName: 'write_file',
+        statusTone: 'cancelled',
+        statusLabel: 'Cancelled',
+        titleLabel: 'Tool Result',
+      },
+    });
+  });
+});

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

@@ -1,3 +1,5 @@
+import { systemStatusManager } from '@/features/system-status';
+
 type FetchLike = typeof fetch;
 
 function formatFetchTarget(input: RequestInfo | URL): string {
@@ -38,6 +40,7 @@ export function createNcpAppClientFetch(): FetchLike {
         ...init
       });
     } catch (error) {
+      systemStatusManager.reportTransportFailure(formatUnknownFetchError(error));
       const method = (init?.method || 'GET').toUpperCase();
       const target = formatFetchTarget(input);
       throw createErrorWithCause(

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

@@ -21,10 +21,12 @@ import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-s
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
+import { isNcpChatSendDisabled } from '@/components/chat/chat-input/ncp-chat-input-availability.utils';
 import { chatRecentModelsManager } from '@/components/chat/chat-recent-models.manager';
 import { chatRecentSkillsManager } from '@/components/chat/chat-recent-skills.manager';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState';
+import { systemStatusManager } from '@/features/system-status';
 
 export class NcpChatInputManager {
   private readonly sessionPreferenceSync = new ChatSessionPreferenceSync(updateNcpSession);
@@ -139,7 +141,7 @@ export class NcpChatInputManager {
     if (attachments.length === 0) {
       return [];
     }
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const existingSignatures = new Set(snapshot.attachments.map(this.buildAttachmentSignature));
     const nextAttachments = this.dedupeAttachments([...snapshot.attachments, ...attachments]);
     const insertedAttachments = nextAttachments.filter(
@@ -173,12 +175,18 @@ export class NcpChatInputManager {
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
     const threadSnapshot = useChatThreadStore.getState().snapshot;
     const message = inputSnapshot.draft.trim();
-    const attachments = inputSnapshot.attachments;
+    const { attachments } = inputSnapshot;
     const parts = deriveNcpMessagePartsFromComposer(inputSnapshot.composerNodes, attachments);
     const hasSendableContent = parts.some(
       (part) => part.type !== 'text' || part.text.trim().length > 0
     );
-    if (!hasSendableContent) {
+    if (
+      isNcpChatSendDisabled({
+        snapshot: inputSnapshot,
+        hasSendableDraft: hasSendableContent,
+        isRuntimeBlocked: systemStatusManager.isChatInteractionBlocked(),
+      })
+    ) {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
@@ -237,7 +245,7 @@ export class NcpChatInputManager {
   };
 
   setSelectedSkills = (next: SetStateAction<string[]>) => {
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const { selectedSkills: prev } = snapshot;
     const value = this.resolveUpdateValue(prev, next);
     if (this.isSameStringArray(value, prev)) {
@@ -292,7 +300,7 @@ export class NcpChatInputManager {
   };
 
   private reconcileThinkingForModel = (model: string): void => {
-    const snapshot = useChatInputStore.getState().snapshot;
+    const { snapshot } = useChatInputStore.getState();
     const modelOption = snapshot.modelOptions.find((option) => option.value === model);
     const { selectedThinkingLevel } = snapshot;
     const nextThinking = this.resolveThinkingForModel(modelOption, selectedThinkingLevel);