@nextclaw/ui 0.12.9 → 0.12.10

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/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-chat-page.tsx

@@ -304,6 +304,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     currentAgent,
     parentSession,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     currentChildSessionTabs,
   } = useNcpChatDerivedState({
     sessionKey,
@@ -340,6 +341,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     isSkillsLoading: sessionSkillsQuery.isLoading,
     sessionTypeUnavailableMessage,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     sessionKey,
     currentAgentId,
     currentAgent,

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

@@ -316,6 +316,7 @@ describe('adaptNcpMessageToUiMessage tool rendering', () => {
       },
     });
   });
+
 });
 
 describe('readNcpSessionPreferredThinking', () => {

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -151,6 +151,9 @@ function parseSessionContext(sessionKey: string): { channel?: string; type?: str
 }
 
 function mapToolStatus(part: Extract<NcpMessagePart, { type: 'tool-invocation' }>): ToolInvocationStatus {
+  if (part.state === 'cancelled') {
+    return ToolInvocationStatus.CANCELLED;
+  }
   if (part.state === 'result') {
     return ToolInvocationStatus.RESULT;
   }

package/src/components/chat/ncp/page/ncp-chat-derived-state.ts

@@ -11,6 +11,7 @@ import type { NcpChatPresenter } from '@/components/chat/ncp/ncp-chat.presenter'
 import type { UseHydratedNcpAgentResult } from '@nextclaw/ncp-react';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import type { ChatChildSessionTab } from '@/components/chat/stores/chat-thread.store';
+import type { ChatSessionTypeOption } from '@/components/chat/useChatSessionTypeState';
 import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
 
 function buildChildSessionTabs(params: {
@@ -40,7 +41,7 @@ export function useNcpChatDerivedState(params: {
   parentSessionId: string | null;
   sessionSummaries: NcpSessionSummaryView[];
   selectedSessionType: string;
-  sessionTypeOptions: Array<{ value: string; label: string }>;
+  sessionTypeOptions: ChatSessionTypeOption[];
 }) {
   const {
     availableAgents,
@@ -68,9 +69,11 @@ export function useNcpChatDerivedState(params: {
       ) ?? null;
     return parentSummary ? adaptNcpSessionSummary(parentSummary) : null;
   }, [parentSessionId, sessionSummaries]);
+  const currentSessionTypeOption =
+    sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null;
   const currentSessionTypeLabel =
-    sessionTypeOptions.find((option) => option.value === selectedSessionType)
-      ?.label ?? resolveSessionTypeLabel(selectedSessionType);
+    currentSessionTypeOption?.label ?? resolveSessionTypeLabel(selectedSessionType);
+  const currentSessionTypeIcon = currentSessionTypeOption?.icon ?? null;
   const currentChildSessionTabs = useMemo(
     () =>
       buildChildSessionTabs({
@@ -86,6 +89,7 @@ export function useNcpChatDerivedState(params: {
     currentAgent,
     parentSession,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     currentChildSessionTabs,
   };
 }
@@ -99,7 +103,7 @@ export function useNcpChatSnapshotSync(params: {
   lastSendError: string | null;
   isSending: boolean;
   modelOptions: ChatModelOption[];
-  sessionTypeOptions: Array<{ value: string; label: string }>;
+  sessionTypeOptions: ChatSessionTypeOption[];
   selectedSessionType: string;
   canEditSessionType: boolean;
   sessionTypeUnavailable: boolean;
@@ -107,6 +111,7 @@ export function useNcpChatSnapshotSync(params: {
   isSkillsLoading: boolean;
   sessionTypeUnavailableMessage: string | null;
   currentSessionTypeLabel: string;
+  currentSessionTypeIcon: ChatSessionTypeOption['icon'];
   sessionKey: string;
   currentAgentId: string;
   currentAgent: AgentProfileView | null;
@@ -145,6 +150,7 @@ export function useNcpChatSnapshotSync(params: {
       sessionTypeUnavailable: params.sessionTypeUnavailable,
       sessionTypeUnavailableMessage: params.sessionTypeUnavailableMessage,
       sessionTypeLabel: params.currentSessionTypeLabel,
+      sessionTypeIcon: params.currentSessionTypeIcon,
       sessionKey: params.sessionKey,
       agentId: params.currentAgentId,
       agentDisplayName: params.currentAgent?.displayName ?? null,

package/src/components/chat/stores/chat-input.store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { SessionSkillEntryView, ThinkingLevel } from '@/api/types';
+import type { SessionSkillEntryView, SessionTypeIconView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
 
@@ -24,6 +24,7 @@ export type ChatInputSnapshot = {
   sessionTypeOptions: Array<{
     value: string;
     label: string;
+    icon?: SessionTypeIconView | null;
     ready?: boolean;
     reason?: string | null;
     reasonMessage?: string | null;

package/src/components/chat/stores/chat-thread.store.ts

@@ -3,7 +3,7 @@ import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import type { AgentProfileView } from '@/api/types';
+import type { AgentProfileView, SessionTypeIconView } from '@/api/types';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -35,6 +35,7 @@ export type ChatThreadSnapshot = {
   sessionTypeUnavailable: boolean;
   sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
+  sessionTypeIcon?: SessionTypeIconView | null;
   sessionKey: string | null;
   agentId?: string | null;
   agentDisplayName?: string | null;
@@ -70,6 +71,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeUnavailable: false,
   sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
+  sessionTypeIcon: null,
   sessionKey: null,
   agentId: null,
   agentDisplayName: null,

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
+import type {
+  AgentProfileView,
+  ChatSessionTypeOptionView,
+  SessionEntryView,
+  SessionTypeIconView
+} from '@/api/types';
 import { t } from '@/lib/i18n';
 
 export const DEFAULT_SESSION_TYPE = 'native';
@@ -8,6 +13,7 @@ export const DEFAULT_SESSION_TYPE = 'native';
 export type ChatSessionTypeOption = {
   value: string;
   label: string;
+  icon: SessionTypeIconView | null;
   ready: boolean;
   reason?: string | null;
   reasonMessage?: string | null;
@@ -71,6 +77,7 @@ export function buildSessionTypeOptions(
     deduped.set(value, {
       value,
       label: option.label?.trim() || resolveSessionTypeLabel(value),
+      icon: option.icon ?? null,
       ready: option.ready ?? true,
       reason: option.reason ?? null,
       reasonMessage: option.reasonMessage ?? null,
@@ -83,6 +90,7 @@ export function buildSessionTypeOptions(
     deduped.set(DEFAULT_SESSION_TYPE, {
       value: DEFAULT_SESSION_TYPE,
       label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      icon: null,
       ready: true,
       reason: null,
       reasonMessage: null,
@@ -129,6 +137,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
       options.push({
         value: currentSessionType,
         label: resolveSessionTypeLabel(currentSessionType),
+        icon: null,
         ready: true,
         reason: null,
         reasonMessage: null,

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

@@ -0,0 +1,86 @@
+import { Fragment } from "react";
+import { ChevronRight, FileCode2, FolderTree } from "lucide-react";
+import type { WorkspaceFileBreadcrumbViewModel } from "@/lib/session-project/workspace-file-breadcrumb";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+function WorkspaceBreadcrumbMetaChip({
+  tone = "neutral",
+  value,
+}: {
+  tone?: "neutral" | "warning";
+  value: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 items-center rounded-sm border px-1.5 text-[10px] font-medium leading-none",
+        tone === "warning"
+          ? "border-amber-200 bg-amber-50 text-amber-700"
+          : "border-gray-200 bg-gray-50 text-gray-500",
+      )}
+    >
+      {value}
+    </span>
+  );
+}
+
+export function ChatSessionWorkspaceFileBreadcrumbs({
+  breadcrumb,
+}: {
+  breadcrumb: WorkspaceFileBreadcrumbViewModel;
+}) {
+  return (
+    <div
+      data-testid="workspace-file-breadcrumbs"
+      title={breadcrumb.fullPath}
+      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/80 bg-gray-50/55"
+    >
+      <div
+        data-testid="workspace-file-breadcrumb-scroll"
+        className="flex min-w-max items-center gap-2.5 px-3 py-1.5"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-1 pr-1">
+          {breadcrumb.segments.map((segment, index) => (
+            <Fragment key={segment.key}>
+              <span
+                className={cn(
+                  "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none",
+                  segment.kind === "workspace"
+                    ? "bg-primary/8 text-primary"
+                    : segment.isCurrent
+                      ? "bg-gray-200/70 text-gray-900"
+                      : "text-gray-500",
+                )}
+              >
+                {segment.kind === "workspace" ? (
+                  <FolderTree className="h-3 w-3 shrink-0" />
+                ) : segment.isCurrent ? (
+                  <FileCode2 className="h-3 w-3 shrink-0" />
+                ) : null}
+                <span>{segment.label}</span>
+              </span>
+              {index < breadcrumb.segments.length - 1 ? (
+                <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
+              ) : null}
+            </Fragment>
+          ))}
+        </div>
+
+        {breadcrumb.locationLabel || breadcrumb.truncated ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+            {breadcrumb.locationLabel ? (
+              <WorkspaceBreadcrumbMetaChip value={breadcrumb.locationLabel} />
+            ) : null}
+            {breadcrumb.truncated ? (
+              <WorkspaceBreadcrumbMetaChip
+                tone="warning"
+                value={t("chatWorkspacePreviewTruncated")}
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/common/BrandHeader.tsx

@@ -1,5 +1,6 @@
 import { useAppMeta } from '@/hooks/useConfig';
 import type { ReactNode } from 'react';
+import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
 
 type BrandHeaderProps = {
   className?: string;
@@ -10,6 +11,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   const { data } = useAppMeta();
   const productName = data?.name ?? 'NextClaw';
   const productVersion = data?.productVersion?.trim();
+  const resolvedSuffix = suffix ?? <RuntimeStatusEntry />;
 
   return (
     <div className={className ?? 'flex items-center gap-2.5'}>
@@ -19,7 +21,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
       <div className="flex items-baseline gap-2 min-w-0">
         <span className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
         {productVersion ? <span className="text-[13px] font-medium text-gray-500">v{productVersion}</span> : null}
-        {suffix ? <span className="inline-flex items-center shrink-0">{suffix}</span> : null}
+        {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
       </div>
     </div>
   );

package/src/components/common/session-context-icon.tsx

@@ -1,4 +1,5 @@
 import { type SessionContextIcon } from '@/lib/session-context.utils';
+import { resolveAppResourceUri } from '@/lib/app-resource-uri';
 import { LogoBadge } from '@/components/common/LogoBadge';
 import { getChannelLogo } from '@/lib/logos';
 import { cn } from '@/lib/utils';
@@ -8,6 +9,18 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
   if (icon.kind === 'channel-logo') {
     return <ChannelLogoIcon channel={icon.channel} className={className} />;
   }
+  if (icon.kind === 'runtime-image') {
+    const runtimeIconSrc = resolveAppResourceUri(icon.src);
+    return (
+      <LogoBadge
+        name={icon.name?.trim() || icon.alt?.trim() || 'runtime'}
+        src={runtimeIconSrc ?? undefined}
+        className={cn('h-[1.125rem] w-[1.125rem]', className)}
+        imgClassName="h-full w-full object-contain"
+        fallback={<Bot className={cn('h-3 w-3 text-gray-500', className)} />}
+      />
+    );
+  }
   if (icon.icon === 'heartbeat') {
     return <HeartPulse className={cn('h-3.5 w-3.5', className)} />;
   }
@@ -22,8 +35,8 @@ function ChannelLogoIcon(
     <LogoBadge
       name={channel}
       src={logoSrc}
-      className={cn('h-4 w-4 rounded-[4px] border border-gray-200/80 bg-white', className)}
-      imgClassName="h-3 w-3 object-contain"
+      className={cn('h-[1.125rem] w-[1.125rem]', className)}
+      imgClassName="h-full w-full object-contain"
       fallback={<Bot className="h-3 w-3 text-gray-500" />}
     />
   );

package/src/components/common/{TagInput.tsx → tag-input.tsx}

@@ -1,7 +1,8 @@
-import { useState } from 'react';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
+import { useState } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { t } from "@/lib/i18n";
+import { TagChip } from "@/components/ui/tag-chip";
 
 interface TagInputProps {
   value: string[];
@@ -10,15 +11,20 @@ interface TagInputProps {
   placeholder?: string;
 }
 
-export function TagInput({ value, onChange, className, placeholder = '' }: TagInputProps) {
-  const [input, setInput] = useState('');
+export function TagInput({
+  value,
+  onChange,
+  className,
+  placeholder = "",
+}: TagInputProps) {
+  const [input, setInput] = useState("");
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input.trim()) {
+    if (e.key === "Enter" && input.trim()) {
       e.preventDefault();
       onChange([...value, input.trim()]);
-      setInput('');
-    } else if (e.key === 'Backspace' && !input && value.length > 0) {
+      setInput("");
+    } else if (e.key === "Backspace" && !input && value.length > 0) {
       onChange(value.slice(0, -1));
     }
   };
@@ -28,21 +34,23 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
   };
 
   return (
-    <div className={cn('flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]', className)}>
+    <div
+      className={cn(
+        "flex min-h-[42px] flex-wrap gap-2 rounded-xl border border-gray-200/80 bg-white p-2",
+        className,
+      )}
+    >
       {value.map((tag, index) => (
-        <span
-          key={index}
-          className="inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm"
-        >
+        <TagChip key={index} tone="info" className="gap-1 px-2 py-1 text-sm">
           {tag}
           <button
             type="button"
             onClick={() => removeTag(index)}
-            className="hover:text-red-300 transition-colors"
+            className="transition-colors hover:text-rose-200"
           >
             <X className="h-3 w-3" />
           </button>
-        </span>
+        </TagChip>
       ))}
       <input
         type="text"
@@ -50,7 +58,7 @@ export function TagInput({ value, onChange, className, placeholder = '' }: TagIn
         onChange={(e) => setInput(e.target.value)}
         onKeyDown={handleKeyDown}
         className="flex-1 outline-none min-w-[100px] bg-transparent text-sm"
-        placeholder={placeholder || t('enterTag')}
+        placeholder={placeholder || t("enterTag")}
       />
     </div>
   );