@nextclaw/ui 0.12.4 → 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/hooks/use-chat-session-project.test.tsx

@@ -71,7 +71,7 @@ describe('useChatSessionProject', () => {
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
-  it('persists to the server and mirrors the updated project override locally for an existing session', async () => {
+  it('persists to the server without reusing the draft override state for an existing session', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -88,12 +88,12 @@ describe('useChatSessionProject', () => {
       successMessage: 'Project directory updated',
     });
     expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: '/tmp/project-beta',
-      pendingProjectRootSessionKey: 'session-1',
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: null,
     });
   });
 
-  it('persists clearing to the server and keeps the cleared override until session state catches up', async () => {
+  it('persists clearing to the server without keeping a session-scoped local override', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -111,7 +111,7 @@ describe('useChatSessionProject', () => {
     });
     expect(useChatInputStore.getState().snapshot).toMatchObject({
       pendingProjectRoot: null,
-      pendingProjectRootSessionKey: 'session-1',
+      pendingProjectRootSessionKey: null,
     });
   });
 });

package/src/components/chat/hooks/use-chat-session-project.ts

@@ -31,10 +31,5 @@ export function useChatSessionProject() {
       patch: { projectRoot: params.projectRoot },
       successMessage,
     });
-
-    useChatInputStore.getState().setSnapshot({
-      pendingProjectRoot: params.projectRoot,
-      pendingProjectRootSessionKey: params.sessionKey,
-    });
   };
 }

package/src/components/chat/hooks/use-chat-session-update.test.tsx

@@ -0,0 +1,75 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { useChatSessionUpdate } from '@/components/chat/hooks/use-chat-session-update';
+
+const mocks = vi.hoisted(() => ({
+  updateNcpSession: vi.fn(),
+  upsertNcpSessionSummaryInQueryClient: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/api/ncp-session', () => ({
+  updateNcpSession: (...args: unknown[]) => mocks.updateNcpSession(...args),
+}));
+
+vi.mock('@/api/ncp-session-query-cache', () => ({
+  upsertNcpSessionSummaryInQueryClient: (...args: unknown[]) =>
+    mocks.upsertNcpSessionSummaryInQueryClient(...args),
+}));
+
+function createWrapper(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('useChatSessionUpdate', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('updates the session summary and invalidates the matching session skills queries', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
+    const updatedSession = {
+      sessionId: 'session-1',
+      updatedAt: '2026-04-09T00:00:00.000Z',
+      status: 'idle',
+      metadata: { project_root: '/tmp/project-alpha' },
+    };
+    mocks.updateNcpSession.mockResolvedValue(updatedSession);
+
+    const { result } = renderHook(() => useChatSessionUpdate(), {
+      wrapper: createWrapper(queryClient),
+    });
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'session-1',
+        patch: { projectRoot: '/tmp/project-alpha' },
+        successMessage: 'Project directory updated',
+      });
+    });
+
+    expect(mocks.updateNcpSession).toHaveBeenCalledWith('session-1', {
+      projectRoot: '/tmp/project-alpha',
+    });
+    expect(mocks.upsertNcpSessionSummaryInQueryClient).toHaveBeenCalledWith(
+      queryClient,
+      updatedSession,
+    );
+    expect(invalidateQueriesSpy).toHaveBeenCalledWith({
+      queryKey: ['ncp-session-skills', 'session-1'],
+    });
+    expect(toast.success).toHaveBeenCalledWith('Project directory updated');
+  });
+});

package/src/components/chat/hooks/use-chat-session-update.ts

@@ -15,10 +15,12 @@ export function useChatSessionUpdate() {
   const queryClient = useQueryClient();
 
   return async (params: UpdateChatSessionParams): Promise<void> => {
+    const { sessionKey, patch, successMessage } = params;
     try {
-      const updated = await updateNcpSession(params.sessionKey, params.patch);
+      const updated = await updateNcpSession(sessionKey, patch);
       upsertNcpSessionSummaryInQueryClient(queryClient, updated);
-      toast.success(params.successMessage ?? t('configSavedApplied'));
+      await queryClient.invalidateQueries({ queryKey: ['ncp-session-skills', sessionKey] });
+      toast.success(successMessage ?? t('configSavedApplied'));
     } catch (error) {
       toast.error(
         t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)),

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

@@ -15,9 +15,12 @@ describe('ChatSessionListManager', () => {
       }
     });
     useChatSessionListStore.setState({
+      readUpdatedAtBySessionKey: {},
+      hasHydratedReadWatermarks: false,
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
         selectedSessionKey: 'session-1',
+        draftSessionKey: 'draft-root-1',
         listMode: 'time-first'
       }
     });
@@ -25,7 +28,7 @@ describe('ChatSessionListManager', () => {
 
   it('applies the requested session type when creating a session', () => {
     const uiManager = {
-      goToChatRoot: vi.fn()
+      goToSession: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
     const streamActionsManager = {
       resetStreamState: vi.fn()
@@ -35,8 +38,9 @@ describe('ChatSessionListManager', () => {
     manager.createSession('codex');
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
-    expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(uiManager.goToSession).toHaveBeenCalledWith('draft-root-1');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatSessionListStore.getState().snapshot.draftSessionKey).not.toBe('draft-root-1');
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
     expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
@@ -44,7 +48,7 @@ describe('ChatSessionListManager', () => {
 
   it('hydrates the draft project root when creating a session inside a project group', () => {
     const uiManager = {
-      goToChatRoot: vi.fn()
+      goToSession: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
     const streamActionsManager = {
       resetStreamState: vi.fn()
@@ -54,7 +58,45 @@ describe('ChatSessionListManager', () => {
     manager.createSession('native', '/tmp/project-alpha');
 
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBe('/tmp/project-alpha');
-    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-root-1');
+  });
+
+  it('promotes the current root draft when send flow needs a concrete session key', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: null,
+        draftSessionKey: 'draft-root-2'
+      }
+    });
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    const sessionKey = manager.ensureDraftSession('native');
+
+    expect(sessionKey).toBe('draft-root-2');
+    expect(uiManager.goToSession).toHaveBeenCalledWith('draft-root-2');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+  });
+
+  it('does not eagerly replace the old selected session before the route finishes switching', () => {
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.createSession('native', '/tmp/project-alpha');
+
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-root-1');
   });
 
   it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {
@@ -82,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);
+  });
 });