@nextclaw/ui 0.12.5 → 0.12.7

package/src/api/raw-client.ts

@@ -25,6 +25,31 @@ function inferNonJsonHint(endpoint: string, status: number): string | undefined
   return undefined;
 }
 
+function formatUnknownFetchError(error: unknown): {
+  summary: string;
+  details: Record<string, unknown>;
+} {
+  if (error instanceof Error) {
+    const name = error.name?.trim() || 'Error';
+    const message = error.message?.trim() || 'Unknown error';
+    return {
+      summary: `${name}: ${message}`,
+      details: {
+        errorName: name,
+        errorMessage: message,
+        ...(error.stack?.trim() ? { errorStack: error.stack.trim() } : {})
+      }
+    };
+  }
+  return {
+    summary: String(error ?? 'Unknown error'),
+    details: {
+      errorName: 'NonError',
+      errorMessage: String(error ?? 'Unknown error')
+    }
+  };
+}
+
 export async function requestRawApiResponse<T>(
   endpoint: string,
   options: RequestInit = {}
@@ -32,14 +57,32 @@ export async function requestRawApiResponse<T>(
   const url = `${API_BASE}${endpoint}`;
   const method = (options.method || 'GET').toUpperCase();
 
-  const response = await fetch(url, {
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-      ...options.headers
-    },
-    ...options
-  });
+  let response: Response;
+  try {
+    response = await fetch(url, {
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers
+      },
+      ...options
+    });
+  } catch (error) {
+    const formatted = formatUnknownFetchError(error);
+    return {
+      ok: false,
+      error: {
+        code: 'NETWORK_ERROR',
+        message: `Fetch failed on ${method} ${endpoint} | ${formatted.summary}`,
+        details: {
+          method,
+          endpoint,
+          url,
+          ...formatted.details
+        }
+      }
+    };
+  }
 
   const text = await response.text();
   let data: ApiResponse<T> | null = null;

package/src/components/chat/ChatConversationPanel.test.tsx

@@ -3,7 +3,9 @@ import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatChildSessionPanel } from "@/components/chat/chat-child-session-panel";
 import { ChatConversationPanel } from "@/components/chat/ChatConversationPanel";
+import type { ResolvedChildSessionTab } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
 import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
+import { useChatSessionListStore } from "@/components/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
 
 const mocks = vi.hoisted(() => ({
@@ -21,12 +23,13 @@ const mocks = vi.hoisted(() => ({
       parentSessionKey: "parent-session-1",
       title: "北京天气",
       agentId: "weather",
+      updatedAt: "2026-04-10T09:00:00.000Z",
       sessionTypeLabel: "Codex",
       preferredModel: "openai/gpt-5.3-codex",
       projectName: "project-alpha",
       projectRoot: "/Users/demo/project-alpha",
     },
-  ],
+  ] as ResolvedChildSessionTab[],
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -79,6 +82,19 @@ vi.mock("@/components/chat/presenter/chat-presenter-context", () => ({
       selectSession: vi.fn(),
       createSession: mocks.createSession,
       setSelectedAgentId: mocks.setSelectedAgentId,
+      markSessionRead: (
+        sessionKey: string | null | undefined,
+        updatedAt: string | null | undefined,
+      ) =>
+        sessionKey
+          ? useChatSessionListStore.getState().markSessionRead(
+              sessionKey,
+              updatedAt,
+            )
+          : undefined,
+      hydrateReadWatermarks: (
+        entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+      ) => useChatSessionListStore.getState().hydrateReadWatermarks(entries),
     },
     chatInputManager: {
       setPendingSessionType: mocks.setPendingSessionType,
@@ -175,6 +191,13 @@ describe("ChatConversationPanel", () => {
         activeChildSessionKey: null,
       },
     });
+    useChatSessionListStore.setState({
+      readUpdatedAtBySessionKey: {},
+      hasHydratedReadWatermarks: false,
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+      },
+    });
   });
 
   it("shows the draft session type in the conversation header", () => {
@@ -275,6 +298,7 @@ describe("ChatChildSessionPanel", () => {
         parentSessionKey: "parent-session-1",
         title: "北京天气",
         agentId: "weather",
+        updatedAt: "2026-04-10T09:00:00.000Z",
         sessionTypeLabel: "Codex",
         preferredModel: "openai/gpt-5.3-codex",
         projectName: "project-alpha",
@@ -320,6 +344,7 @@ describe("ChatChildSessionPanel", () => {
         parentSessionKey: "parent-session-1",
         title: "北京天气",
         agentId: "weather",
+        updatedAt: "2026-04-10T09:00:00.000Z",
         sessionTypeLabel: "Codex",
         preferredModel: "openai/gpt-5.3-codex",
         projectName: "project-alpha",
@@ -330,6 +355,7 @@ describe("ChatChildSessionPanel", () => {
         parentSessionKey: "parent-session-1",
         title: "上海天气",
         agentId: "weather",
+        updatedAt: "2026-04-10T09:05:00.000Z",
         sessionTypeLabel: "Claude Code",
         preferredModel: "anthropic/claude-sonnet-4",
         projectName: "project-beta",
@@ -373,4 +399,138 @@ describe("ChatChildSessionPanel", () => {
     expect(tabButtons[0]?.getAttribute("aria-pressed")).toBe("true");
     expect(tabButtons[1]?.getAttribute("aria-pressed")).toBe("false");
   });
+
+  it("shows an unread dot for inactive child tabs until the user opens them", () => {
+    mocks.resolvedChildTabs = [
+      {
+        sessionKey: "child-session-1",
+        parentSessionKey: "parent-session-1",
+        title: "北京天气",
+        agentId: "weather",
+        updatedAt: "2026-04-10T09:00:00.000Z",
+        sessionTypeLabel: "Codex",
+        preferredModel: "openai/gpt-5.3-codex",
+        projectName: "project-alpha",
+        projectRoot: "/Users/demo/project-alpha",
+      },
+      {
+        sessionKey: "child-session-2",
+        parentSessionKey: "parent-session-1",
+        title: "上海天气",
+        agentId: "weather",
+        updatedAt: "2026-04-10T09:05:00.000Z",
+        runStatus: "running",
+        sessionTypeLabel: "Claude Code",
+        preferredModel: "anthropic/claude-sonnet-4",
+        projectName: "project-beta",
+        projectRoot: "/Users/demo/project-beta",
+      },
+    ];
+
+    const { rerender } = render(
+      <ChatChildSessionPanel
+        tabs={[
+          {
+            sessionKey: "child-session-1",
+            parentSessionKey: "parent-session-1",
+            label: "北京天气",
+            agentId: "weather",
+          },
+          {
+            sessionKey: "child-session-2",
+            parentSessionKey: "parent-session-1",
+            label: "上海天气",
+            agentId: "weather",
+          },
+        ]}
+        activeSessionKey="child-session-1"
+        onSelectSession={vi.fn()}
+        onClose={vi.fn()}
+        onBackToParent={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.queryByLabelText("Session has unread updates"),
+    ).toBeNull();
+
+    mocks.resolvedChildTabs = [
+      {
+        sessionKey: "child-session-1",
+        parentSessionKey: "parent-session-1",
+        title: "北京天气",
+        agentId: "weather",
+        updatedAt: "2026-04-10T09:00:00.000Z",
+        sessionTypeLabel: "Codex",
+        preferredModel: "openai/gpt-5.3-codex",
+        projectName: "project-alpha",
+        projectRoot: "/Users/demo/project-alpha",
+      },
+      {
+        sessionKey: "child-session-2",
+        parentSessionKey: "parent-session-1",
+        title: "上海天气",
+        agentId: "weather",
+        updatedAt: "2026-04-10T09:05:00.000Z",
+        sessionTypeLabel: "Claude Code",
+        preferredModel: "anthropic/claude-sonnet-4",
+        projectName: "project-beta",
+        projectRoot: "/Users/demo/project-beta",
+      },
+    ];
+
+    rerender(
+      <ChatChildSessionPanel
+        tabs={[
+          {
+            sessionKey: "child-session-1",
+            parentSessionKey: "parent-session-1",
+            label: "北京天气",
+            agentId: "weather",
+          },
+          {
+            sessionKey: "child-session-2",
+            parentSessionKey: "parent-session-1",
+            label: "上海天气",
+            agentId: "weather",
+          },
+        ]}
+        activeSessionKey="child-session-1"
+        onSelectSession={vi.fn()}
+        onClose={vi.fn()}
+        onBackToParent={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByLabelText("Session has unread updates"),
+    ).toBeTruthy();
+
+    rerender(
+      <ChatChildSessionPanel
+        tabs={[
+          {
+            sessionKey: "child-session-1",
+            parentSessionKey: "parent-session-1",
+            label: "北京天气",
+            agentId: "weather",
+          },
+          {
+            sessionKey: "child-session-2",
+            parentSessionKey: "parent-session-1",
+            label: "上海天气",
+            agentId: "weather",
+          },
+        ]}
+        activeSessionKey="child-session-2"
+        onSelectSession={vi.fn()}
+        onClose={vi.fn()}
+        onBackToParent={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.queryByLabelText("Session has unread updates"),
+    ).toBeNull();
+  });
 });

package/src/components/chat/ChatSidebar.test.tsx

@@ -18,8 +18,11 @@ const mocks = vi.hoisted(() => ({
   isLoading: false
 }));
 
-function createSessionItem(session: NcpSessionListItemView['session']): NcpSessionListItemView {
-  return { session };
+function createSessionItem(
+  session: NcpSessionListItemView['session'],
+  runStatus?: NcpSessionListItemView['runStatus'],
+): NcpSessionListItemView {
+  return { session, runStatus };
 }
 
 vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
@@ -28,7 +31,12 @@ vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
       createSession: mocks.createSession,
       setQuery: mocks.setQuery,
       setListMode: mocks.setListMode,
-      selectSession: mocks.selectSession
+      selectSession: mocks.selectSession,
+      markSessionRead: (sessionKey: string | null | undefined, updatedAt: string | null | undefined) =>
+        sessionKey ? useChatSessionListStore.getState().markSessionRead(sessionKey, updatedAt) : undefined,
+      hydrateReadWatermarks: (
+        entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+      ) => useChatSessionListStore.getState().hydrateReadWatermarks(entries)
     }
   })
 }));
@@ -124,10 +132,13 @@ function resetSidebarTestState() {
     }
   });
   useChatSessionListStore.setState({
+    readUpdatedAtBySessionKey: {},
+    hasHydratedReadWatermarks: false,
     snapshot: {
       ...useChatSessionListStore.getState().snapshot,
       query: '',
-      listMode: 'time-first'
+      listMode: 'time-first',
+      selectedSessionKey: null
     }
   });
 }
@@ -496,4 +507,98 @@ describe('ChatSidebar session item interactions', () => {
     expect(screen.queryByDisplayValue('Should Not Persist')).toBeNull();
     expect(screen.getByText('Cancelable Label')).not.toBeNull();
   });
+
+  it('shows an unread dot only after a non-active session finishes its newer update', () => {
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:ncp-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Current Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }),
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:05:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1
+      }, 'running')
+    ];
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'session:ncp-1'
+      }
+    });
+
+    const { rerender } = render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+
+    mocks.sessionItems = [
+      mocks.sessionItems[0]!,
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:06:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      }, 'running')
+    ];
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+
+    mocks.sessionItems = [
+      mocks.sessionItems[0]!,
+      createSessionItem({
+        key: 'session:ncp-2',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:06:00.000Z',
+        label: 'Background Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText('Session has unread updates')).toBeTruthy();
+
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'session:ncp-2'
+      }
+    });
+
+    rerender(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Session has unread updates')).toBeNull();
+  });
 });

package/src/components/chat/ChatSidebar.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { SessionEntryView } from '@/api/types';
 import { Button } from '@/components/ui/button';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -17,7 +17,10 @@ import { useChatSessionLabel } from '@/components/chat/hooks/use-chat-session-la
 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';
-import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import {
+  shouldShowUnreadSessionIndicator,
+  useChatSessionListStore
+} from '@/components/chat/stores/chat-session-list.store';
 import { useAgents } from '@/hooks/agents/useAgents';
 import { getSessionProjectName } from '@/lib/session-project/session-project.utils';
 import { cn } from '@/lib/utils';
@@ -143,6 +146,50 @@ const navItems = [
   { target: '/agents', label: () => t('agentsPageTitle'), icon: Bot },
 ];
 
+function useChatSessionUnreadState(
+  items: readonly NcpSessionListItemView[],
+  selectedSessionKey: string | null,
+  markSessionRead: (sessionKey: string | null | undefined, updatedAt: string | null | undefined) => void,
+  hydrateReadWatermarks: (
+    entries: readonly { sessionKey: string; updatedAt: string | null | undefined }[],
+  ) => void,
+): Record<string, string> {
+  const readUpdatedAtBySessionKey = useChatSessionListStore((state) => state.readUpdatedAtBySessionKey);
+  const hasHydratedReadWatermarks = useChatSessionListStore((state) => state.hasHydratedReadWatermarks);
+
+  useEffect(() => {
+    const syncHydratedReadWatermarks = () => {
+      if (hasHydratedReadWatermarks || items.length === 0) {
+        return;
+      }
+      hydrateReadWatermarks(
+        items.map(({ session }) => ({
+          sessionKey: session.key,
+          updatedAt: session.updatedAt
+        }))
+      );
+    };
+    syncHydratedReadWatermarks();
+  }, [hasHydratedReadWatermarks, hydrateReadWatermarks, items]);
+
+  useEffect(() => {
+    const syncSelectedSessionReadState = () => {
+      if (!selectedSessionKey) {
+        return;
+      }
+      const selectedItem = items.find(({ session }) => session.key === selectedSessionKey);
+      if (!selectedItem) {
+        return;
+      }
+      const { session: selectedSession } = selectedItem;
+      markSessionRead(selectedSession.key, selectedSession.updatedAt);
+    };
+    syncSelectedSessionReadState();
+  }, [items, markSessionRead, selectedSessionKey]);
+
+  return readUpdatedAtBySessionKey;
+}
+
 export function ChatSidebar() {
   const presenter = usePresenter();
   const docBrowser = useDocBrowser();
@@ -164,7 +211,6 @@ export function ChatSidebar() {
     () => new Map((agentsQuery.data?.agents ?? []).map((agent) => [agent.id, agent])),
     [agentsQuery.data?.agents]
   );
-
   const sortedItems = useMemo(() => sortSessionItemsByUpdatedAtDesc(items), [items]);
   const groups = useMemo(() => groupSessionsByDate(sortedItems), [sortedItems]);
   const projectGroups = useMemo(() => groupSessionsByProject(sortedItems), [sortedItems]);
@@ -174,24 +220,26 @@ export function ChatSidebar() {
     [defaultSessionType, inputSnapshot.sessionTypeOptions]
   );
   const isProjectFirstView = listSnapshot.listMode === 'project-first';
-
+  const readUpdatedAtBySessionKey = useChatSessionUnreadState(
+    items,
+    listSnapshot.selectedSessionKey,
+    presenter.chatSessionListManager.markSessionRead,
+    presenter.chatSessionListManager.hydrateReadWatermarks,
+  );
   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() ?? '';
@@ -211,9 +259,14 @@ export function ChatSidebar() {
       setSavingSessionKey(null);
     }
   };
-
   const renderSessionItem = ({ session, runStatus }: NcpSessionListItemView) => {
     const active = listSnapshot.selectedSessionKey === session.key;
+    const showUnreadDot = shouldShowUnreadSessionIndicator({
+      active,
+      updatedAt: session.updatedAt,
+      readUpdatedAt: readUpdatedAtBySessionKey[session.key],
+      runStatus,
+    });
     const context = resolveSessionContextView(session, inputSnapshot.sessionTypeOptions);
     const isEditing = editingSessionKey === session.key;
     const isSaving = savingSessionKey === session.key;
@@ -222,6 +275,7 @@ export function ChatSidebar() {
         key={session.key}
         session={session}
         active={active}
+        showUnreadDot={showUnreadDot}
         runStatus={runStatus}
         context={context}
         title={sessionTitle(session)}
@@ -239,7 +293,6 @@ export function ChatSidebar() {
       />
     );
   };
-
   return (
     <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
       <div className="px-5 pt-5 pb-3">

package/src/components/chat/chat-child-session-panel.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { ArrowLeft, Loader2, X } from "lucide-react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import { ChatMessageListContainer } from "@/components/chat/containers/chat-message-list.container";
@@ -7,6 +7,11 @@ import {
   type ResolvedChildSessionTab,
 } from "@/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view";
 import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+import {
+  shouldShowUnreadSessionIndicator,
+  useChatSessionListStore,
+} from "@/components/chat/stores/chat-session-list.store";
+import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import type { ChatChildSessionTab } from "@/components/chat/stores/chat-thread.store";
 import { AgentIdentityAvatar } from "@/components/common/agent-identity";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -122,16 +127,35 @@ export function ChatChildSessionPanel({
   onBackToParent,
   onToolAction,
 }: ChatChildSessionPanelProps) {
+  const presenter = usePresenter();
   const resolvedTabs = useNcpChildSessionTabsView(tabs);
+  const readUpdatedAtBySessionKey = useChatSessionListStore(
+    (state) => state.readUpdatedAtBySessionKey,
+  );
   const activeTab =
     resolvedTabs.find((tab) => tab.sessionKey === activeSessionKey) ??
     resolvedTabs[0] ??
     null;
+  const activeTabSessionKey = activeTab?.sessionKey ?? null;
+  const activeTabUpdatedAt = activeTab?.updatedAt?.trim() ?? null;
   const hasParentSession = resolvedTabs.some((tab) =>
     Boolean(tab.parentSessionKey),
   );
   const shouldShowTabs = resolvedTabs.length > 1;
 
+  useEffect(() => {
+    const syncActiveTabReadState = () => {
+      if (!activeTabSessionKey || !activeTabUpdatedAt) {
+        return;
+      }
+      presenter.chatSessionListManager.markSessionRead(
+        activeTabSessionKey,
+        activeTabUpdatedAt,
+      );
+    };
+    syncActiveTabReadState();
+  }, [activeTabSessionKey, activeTabUpdatedAt, presenter]);
+
   if (!activeTab) {
     return null;
   }
@@ -178,23 +202,37 @@ export function ChatChildSessionPanel({
             <div className="mt-3 overflow-x-auto custom-scrollbar">
               <Tabs value={activeSessionKey} onValueChange={onSelectSession}>
                 <TabsList className="h-auto min-w-max justify-start gap-1.5 rounded-none bg-transparent p-0 text-gray-500">
-                  {resolvedTabs.map((tab) => (
-                    <TabsTrigger
-                      key={tab.sessionKey}
-                      value={tab.sessionKey}
-                      className="gap-2 rounded-full border border-gray-200/80 bg-white/85 px-2.5 py-1.5 text-xs font-medium text-gray-600 shadow-none hover:border-primary/30 hover:text-primary data-[state=active]:border-primary/30 data-[state=active]:bg-primary-50/70 data-[state=active]:text-primary data-[state=active]:shadow-sm"
-                    >
-                      {tab.agentId ? (
-                        <AgentIdentityAvatar
-                          agentId={tab.agentId}
-                          className="h-4 w-4 shrink-0"
-                        />
-                      ) : null}
-                      <span className="max-w-[132px] truncate">
-                        {tab.title}
-                      </span>
-                    </TabsTrigger>
-                  ))}
+                  {resolvedTabs.map((tab) => {
+                    const showUnreadDot = shouldShowUnreadSessionIndicator({
+                      active: tab.sessionKey === activeSessionKey,
+                      updatedAt: tab.updatedAt,
+                      readUpdatedAt: readUpdatedAtBySessionKey[tab.sessionKey],
+                      runStatus: tab.runStatus,
+                    });
+                    return (
+                      <TabsTrigger
+                        key={tab.sessionKey}
+                        value={tab.sessionKey}
+                        className="gap-2 rounded-full border border-gray-200/80 bg-white/85 px-2.5 py-1.5 text-xs font-medium text-gray-600 shadow-none hover:border-primary/30 hover:text-primary data-[state=active]:border-primary/30 data-[state=active]:bg-primary-50/70 data-[state=active]:text-primary data-[state=active]:shadow-sm"
+                      >
+                        {tab.agentId ? (
+                          <AgentIdentityAvatar
+                            agentId={tab.agentId}
+                            className="h-4 w-4 shrink-0"
+                          />
+                        ) : null}
+                        <span className="max-w-[132px] truncate">
+                          {tab.title}
+                        </span>
+                        {showUnreadDot ? (
+                          <span
+                            aria-label={t("chatSessionUnread")}
+                            className="h-2 w-2 shrink-0 rounded-full bg-primary"
+                          />
+                        ) : null}
+                      </TabsTrigger>
+                    );
+                  })}
                 </TabsList>
               </Tabs>
             </div>