@nextclaw/ui 0.12.5 → 0.12.6

package/src/components/chat/chat-sidebar-session-item.tsx

@@ -13,6 +13,7 @@ import { Check, Pencil, X } from 'lucide-react';
 type ChatSidebarSessionItemProps = {
   session: SessionEntryView;
   active: boolean;
+  showUnreadDot: boolean;
   runStatus?: SessionRunStatus;
   context: SessionContextView;
   title: string;
@@ -29,32 +30,180 @@ type ChatSidebarSessionItemProps = {
   onCancel: () => void;
 };
 
-export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
-  const {
-    session,
-    active,
-    runStatus,
-    context,
-    title,
-    agentId,
-    agentLabel,
-    agentAvatarUrl,
-    isEditing,
-    draftLabel,
-    isSaving,
-    onSelect,
-    onStartEditing,
-    onDraftLabelChange,
-    onSave,
-    onCancel
-  } = props;
+type ChatSidebarSessionEditingViewProps = Pick<
+  ChatSidebarSessionItemProps,
+  'session' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+>;
 
+function ChatSidebarSessionEditingView({
+  session,
+  draftLabel,
+  isSaving,
+  onDraftLabelChange,
+  onSave,
+  onCancel
+}: ChatSidebarSessionEditingViewProps) {
+  return (
+    <div className="space-y-2">
+      <Input
+        value={draftLabel}
+        onChange={(event) => onDraftLabelChange(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            void onSave();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            onCancel();
+          }
+        }}
+        placeholder={t('sessionsLabelPlaceholder')}
+        className="h-8 rounded-lg border-gray-300 bg-white text-xs"
+        autoFocus
+        disabled={isSaving}
+      />
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0 text-[11px] text-gray-400 truncate">{session.key}</div>
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
+            onClick={() => void onSave()}
+            disabled={isSaving}
+            aria-label={t('save')}
+          >
+            <Check className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
+            onClick={onCancel}
+            disabled={isSaving}
+            aria-label={t('cancel')}
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type ChatSidebarSessionDisplayViewProps = Omit<
+  ChatSidebarSessionItemProps,
+  'isEditing' | 'draftLabel' | 'isSaving' | 'onDraftLabelChange' | 'onSave' | 'onCancel'
+>;
+
+function ChatSidebarSessionDisplayView({
+  session,
+  active,
+  showUnreadDot,
+  runStatus,
+  context,
+  title,
+  agentId,
+  agentLabel,
+  agentAvatarUrl,
+  onSelect,
+  onStartEditing
+}: ChatSidebarSessionDisplayViewProps) {
   const iconTone = active ? 'text-gray-700' : 'text-gray-500';
   const normalizedAgentId = agentId?.trim() ?? '';
   const shouldShowAgentAvatar = Boolean(
     normalizedAgentId && normalizedAgentId.toLowerCase() !== 'main',
   );
 
+  return (
+    <div className="group/session relative">
+      <button type="button" onClick={onSelect} className="w-full text-left">
+        <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 pr-8">
+          <span className="flex min-w-0 items-center gap-1.5">
+            {shouldShowAgentAvatar ? (
+              <AgentAvatar
+                agentId={normalizedAgentId}
+                displayName={agentLabel}
+                avatarUrl={agentAvatarUrl}
+                className="h-5 w-5 shrink-0"
+              />
+            ) : null}
+            <span className="truncate font-medium">{title}</span>
+            {context.label ? (
+              <span
+                className={cn(
+                  'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
+                  active
+                    ? 'border-gray-300 bg-white/80 text-gray-700'
+                    : 'border-gray-200 bg-gray-100 text-gray-500'
+                )}
+              >
+                {context.label}
+              </span>
+            ) : null}
+            {context.icon ? (
+              <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center">
+                <SessionContextIconNode icon={context.icon} className={iconTone} />
+              </span>
+            ) : null}
+          </span>
+          <span className="inline-flex shrink-0 items-center justify-end gap-1.5">
+            {showUnreadDot ? (
+              <span
+                aria-label={t('chatSessionUnread')}
+                className="h-2 w-2 rounded-full bg-primary"
+              />
+            ) : null}
+            <span className="inline-flex h-3.5 w-3.5 items-center justify-center">
+              {runStatus ? <SessionRunBadge status={runStatus} /> : null}
+            </span>
+          </span>
+        </div>
+        <div className="mt-0.5 text-[11px] text-gray-400 truncate">
+          {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
+        </div>
+      </button>
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          onStartEditing();
+        }}
+        className={cn(
+          'absolute right-0 top-0 inline-flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 transition-all hover:bg-white hover:text-gray-900',
+          active
+            ? 'opacity-100'
+            : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
+        )}
+        aria-label={t('edit')}
+      >
+        <Pencil className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
+
+export function ChatSidebarSessionItem({
+  session,
+  active,
+  showUnreadDot,
+  runStatus,
+  context,
+  title,
+  agentId,
+  agentLabel,
+  agentAvatarUrl,
+  isEditing,
+  draftLabel,
+  isSaving,
+  onSelect,
+  onStartEditing,
+  onDraftLabelChange,
+  onSave,
+  onCancel
+}: ChatSidebarSessionItemProps) {
   return (
     <div
       className={cn(
@@ -65,109 +214,28 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
       )}
     >
       {isEditing ? (
-        <div className="space-y-2">
-          <Input
-            value={draftLabel}
-            onChange={(event) => onDraftLabelChange(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                event.preventDefault();
-                void onSave();
-              } else if (event.key === 'Escape') {
-                event.preventDefault();
-                onCancel();
-              }
-            }}
-            placeholder={t('sessionsLabelPlaceholder')}
-            className="h-8 rounded-lg border-gray-300 bg-white text-xs"
-            autoFocus
-            disabled={isSaving}
-          />
-          <div className="flex items-center justify-between gap-2">
-            <div className="min-w-0 text-[11px] text-gray-400 truncate">{session.key}</div>
-            <div className="flex items-center gap-1">
-              <Button
-                type="button"
-                size="icon"
-                variant="ghost"
-                className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
-                onClick={() => void onSave()}
-                disabled={isSaving}
-                aria-label={t('save')}
-              >
-                <Check className="h-3.5 w-3.5" />
-              </Button>
-              <Button
-                type="button"
-                size="icon"
-                variant="ghost"
-                className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
-                onClick={onCancel}
-                disabled={isSaving}
-                aria-label={t('cancel')}
-              >
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          </div>
-        </div>
+        <ChatSidebarSessionEditingView
+          session={session}
+          draftLabel={draftLabel}
+          isSaving={isSaving}
+          onDraftLabelChange={onDraftLabelChange}
+          onSave={onSave}
+          onCancel={onCancel}
+        />
       ) : (
-        <div className="group/session relative">
-          <button type="button" onClick={onSelect} className="w-full text-left">
-            <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5 pr-8">
-              <span className="flex min-w-0 items-center gap-1.5">
-                {shouldShowAgentAvatar ? (
-                  <AgentAvatar
-                    agentId={normalizedAgentId}
-                    displayName={agentLabel}
-                    avatarUrl={agentAvatarUrl}
-                    className="h-5 w-5 shrink-0"
-                  />
-                ) : null}
-                <span className="truncate font-medium">{title}</span>
-                {context.label ? (
-                  <span
-                    className={cn(
-                      'shrink-0 rounded-full border px-1.5 py-0.5 text-[10px] font-semibold leading-none',
-                      active
-                        ? 'border-gray-300 bg-white/80 text-gray-700'
-                        : 'border-gray-200 bg-gray-100 text-gray-500'
-                    )}
-                  >
-                    {context.label}
-                  </span>
-                ) : null}
-                {context.icon ? (
-                  <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center">
-                    <SessionContextIconNode icon={context.icon} className={iconTone} />
-                  </span>
-                ) : null}
-              </span>
-              <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-                {runStatus ? <SessionRunBadge status={runStatus} /> : null}
-              </span>
-            </div>
-            <div className="mt-0.5 text-[11px] text-gray-400 truncate">
-              {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
-            </div>
-          </button>
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation();
-              onStartEditing();
-            }}
-            className={cn(
-              'absolute right-0 top-0 inline-flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 transition-all hover:bg-white hover:text-gray-900',
-              active
-                ? 'opacity-100'
-                : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
-            )}
-            aria-label={t('edit')}
-          >
-            <Pencil className="h-3.5 w-3.5" />
-          </button>
-        </div>
+        <ChatSidebarSessionDisplayView
+          session={session}
+          active={active}
+          showUnreadDot={showUnreadDot}
+          runStatus={runStatus}
+          context={context}
+          title={title}
+          agentId={agentId}
+          agentLabel={agentLabel}
+          agentAvatarUrl={agentAvatarUrl}
+          onSelect={onSelect}
+          onStartEditing={onStartEditing}
+        />
       )}
     </div>
   );

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

@@ -4,18 +4,19 @@ import { beforeEach, expect, it, vi } from "vitest";
 import { ChatMessageListContainer } from "./chat-message-list.container";
 
 const captures = vi.hoisted(() => ({
-  renders: [] as Array<{ messages: unknown[] }>,
+  renders: [] as Array<{ messages: unknown[]; texts?: Record<string, unknown> }>,
+  language: "en",
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", () => ({
-  ChatMessageList: (props: { messages: unknown[] }) => {
+  ChatMessageList: (props: { messages: unknown[]; texts?: Record<string, unknown> }) => {
     captures.renders.push(props);
     return <div data-testid="chat-message-list" />;
   },
 }));
 
 vi.mock("@/components/providers/I18nProvider", () => ({
-  useI18n: () => ({ language: "en" }),
+  useI18n: () => ({ language: captures.language }),
 }));
 
 vi.mock("@/lib/i18n", () => ({
@@ -25,6 +26,7 @@ vi.mock("@/lib/i18n", () => ({
 
 beforeEach(() => {
   captures.renders = [];
+  captures.language = "en";
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -144,3 +146,19 @@ it("adapts persisted inline token metadata into rich message parts", () => {
     ],
   });
 });
+
+it("passes localized attachment card texts to the shared chat UI", () => {
+  captures.language = "zh";
+
+  render(<ChatMessageListContainer messages={[]} isSending={false} />);
+
+  expect(captures.renders[captures.renders.length - 1]?.texts).toMatchObject({
+    attachmentOpenLabel: "chatAttachmentOpen",
+    attachmentAttachedLabel: "chatAttachmentAttached",
+    attachmentCategoryLabels: {
+      archive: "chatAttachmentCategoryArchive",
+      pdf: "chatAttachmentCategoryPdf",
+      generic: "chatAttachmentCategoryGeneric",
+    },
+  });
+});

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

@@ -65,6 +65,20 @@ function buildChatMessageTexts(language: string) {
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
     typingLabel: t("chatTyping"),
+    attachmentOpenLabel: t("chatAttachmentOpen"),
+    attachmentAttachedLabel: t("chatAttachmentAttached"),
+    attachmentCategoryLabels: {
+      archive: t("chatAttachmentCategoryArchive"),
+      audio: t("chatAttachmentCategoryAudio"),
+      code: t("chatAttachmentCategoryCode"),
+      data: t("chatAttachmentCategoryData"),
+      document: t("chatAttachmentCategoryDocument"),
+      generic: t("chatAttachmentCategoryGeneric"),
+      image: t("chatAttachmentCategoryImage"),
+      pdf: t("chatAttachmentCategoryPdf"),
+      sheet: t("chatAttachmentCategorySheet"),
+      video: t("chatAttachmentCategoryVideo"),
+    },
   };
 }
 

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

@@ -15,6 +15,8 @@ describe('ChatSessionListManager', () => {
       }
     });
     useChatSessionListStore.setState({
+      readUpdatedAtBySessionKey: {},
+      hasHydratedReadWatermarks: false,
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
         selectedSessionKey: 'session-1',
@@ -122,4 +124,36 @@ describe('ChatSessionListManager', () => {
     expect(useChatSessionListStore.getState().snapshot.listMode).toBe('project-first');
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
   });
+
+  it('marks a session as read through the session list owner boundary', () => {
+    const manager = new ChatSessionListManager(
+      {} as ConstructorParameters<typeof ChatSessionListManager>[0],
+      {} as ConstructorParameters<typeof ChatSessionListManager>[1]
+    );
+
+    manager.markSessionRead('session-2', '2026-04-10T10:00:00.000Z');
+
+    expect(useChatSessionListStore.getState().readUpdatedAtBySessionKey['session-2']).toBe(
+      '2026-04-10T10:00:00.000Z'
+    );
+  });
+
+  it('hydrates the initial unread baseline through the session list owner boundary', () => {
+    const manager = new ChatSessionListManager(
+      {} as ConstructorParameters<typeof ChatSessionListManager>[0],
+      {} as ConstructorParameters<typeof ChatSessionListManager>[1]
+    );
+
+    manager.hydrateReadWatermarks([
+      {
+        sessionKey: 'session-2',
+        updatedAt: '2026-04-10T10:00:00.000Z'
+      }
+    ]);
+
+    expect(useChatSessionListStore.getState().readUpdatedAtBySessionKey['session-2']).toBe(
+      '2026-04-10T10:00:00.000Z'
+    );
+    expect(useChatSessionListStore.getState().hasHydratedReadWatermarks).toBe(true);
+  });
 });

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

@@ -46,6 +46,19 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ listMode: value });
   };
 
+  markSessionRead = (sessionKey: string | null | undefined, updatedAt: string | null | undefined) => {
+    if (!sessionKey) {
+      return;
+    }
+    useChatSessionListStore.getState().markSessionRead(sessionKey, updatedAt);
+  };
+
+  hydrateReadWatermarks = (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => {
+    useChatSessionListStore.getState().hydrateReadWatermarks(entries);
+  };
+
   createSession = (sessionType?: string, projectRoot?: string | null): string => {
     const { snapshot } = useChatInputStore.getState();
     const { snapshot: sessionListSnapshot } = useChatSessionListStore.getState();

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

@@ -55,7 +55,7 @@ describe('ncp-app-client-fetch', () => {
         'content-type': 'application/json'
       },
       body: JSON.stringify({ sessionId: 's1' })
-    })).rejects.toThrow('Failed to fetch');
+    })).rejects.toThrow('NCP fetch failed for POST http://127.0.0.1:55667/api/ncp/agent/abort: Error: Failed to fetch');
   });
 
   it('preserves native SSE request headers', async () => {

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

@@ -1,9 +1,49 @@
 type FetchLike = typeof fetch;
 
+function formatFetchTarget(input: RequestInfo | URL): string {
+  if (typeof input === 'string') {
+    return input;
+  }
+  if (input instanceof URL) {
+    return input.toString();
+  }
+  return input.url;
+}
+
+function formatUnknownFetchError(error: unknown): string {
+  if (error instanceof Error) {
+    const name = error.name?.trim();
+    const message = error.message?.trim();
+    if (name && message) {
+      return `${name}: ${message}`;
+    }
+    return message || name || 'Unknown Error';
+  }
+  return String(error ?? 'Unknown error');
+}
+
+function createErrorWithCause(message: string, cause: unknown): Error {
+  const error = new Error(message) as Error & { cause?: unknown };
+  if (cause !== undefined) {
+    error.cause = cause;
+  }
+  return error;
+}
+
 export function createNcpAppClientFetch(): FetchLike {
-  return (input, init) =>
-    fetch(input, {
-      credentials: 'include',
-      ...init
-    });
+  return async (input, init) => {
+    try {
+      return await fetch(input, {
+        credentials: 'include',
+        ...init
+      });
+    } catch (error) {
+      const method = (init?.method || 'GET').toUpperCase();
+      const target = formatFetchTarget(input);
+      throw createErrorWithCause(
+        `NCP fetch failed for ${method} ${target}: ${formatUnknownFetchError(error)}`,
+        error
+      );
+    }
+  };
 }

package/src/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view.ts

@@ -5,12 +5,15 @@ import { adaptNcpSessionSummaries } from "@/components/chat/ncp/ncp-session-adap
 import { resolveSessionTypeLabel } from "@/components/chat/useChatSessionTypeState";
 import type { ChatChildSessionTab } from "@/components/chat/stores/chat-thread.store";
 import { useNcpSessions } from "@/hooks/useConfig";
+import type { SessionRunStatus } from "@/lib/session-run-status";
 
 export type ResolvedChildSessionTab = {
   sessionKey: string;
   parentSessionKey: string | null;
   title: string;
   agentId: string | null;
+  updatedAt: string | null;
+  runStatus?: SessionRunStatus;
   sessionTypeLabel: string | null;
   preferredModel: string | null;
   projectName: string | null;
@@ -34,24 +37,34 @@ export function useNcpChildSessionTabsView(
   tabs: readonly ChatChildSessionTab[],
 ): ResolvedChildSessionTab[] {
   const sessionsQuery = useNcpSessions({ limit: 200 });
+  const summaries = useMemo(
+    () => sessionsQuery.data?.sessions ?? [],
+    [sessionsQuery.data?.sessions],
+  );
 
   const sessionByKey = useMemo(() => {
-    const sessions = adaptNcpSessionSummaries(
-      sessionsQuery.data?.sessions ?? [],
-    );
+    const sessions = adaptNcpSessionSummaries(summaries);
     return new Map(sessions.map((session) => [session.key, session]));
-  }, [sessionsQuery.data?.sessions]);
+  }, [summaries]);
+
+  const summaryByKey = useMemo(
+    () => new Map(summaries.map((summary) => [summary.sessionId, summary])),
+    [summaries],
+  );
 
   return useMemo(
     () =>
       tabs.map((tab) => {
         const session = sessionByKey.get(tab.sessionKey) ?? null;
+        const summary = summaryByKey.get(tab.sessionKey) ?? null;
         const agentId = tab.agentId?.trim() || session?.agentId || null;
         return {
           sessionKey: tab.sessionKey,
           parentSessionKey: tab.parentSessionKey,
           title: resolveChildSessionTitle(tab, session),
           agentId,
+          updatedAt: session?.updatedAt ?? null,
+          runStatus: summary?.status === "running" ? "running" : undefined,
           sessionTypeLabel: session?.sessionType
             ? resolveSessionTypeLabel(session.sessionType)
             : null,
@@ -60,6 +73,6 @@ export function useNcpChildSessionTabsView(
           projectRoot: session?.projectRoot?.trim() || null,
         };
       }),
-    [sessionByKey, tabs],
+    [sessionByKey, summaryByKey, tabs],
   );
 }