@nextclaw/ui 0.12.9 → 0.12.10

package/src/components/chat/ChatSidebar.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { SelectItem } from '@/components/ui/select';
 import { ChatSidebarSessionItem } from '@/components/chat/chat-sidebar-session-item';
+import { ChatSessionTypeOptionItem } from '@/components/chat/chat-session-type-option-item';
 import { ChatSidebarListModeSwitch } from '@/components/chat/chat-sidebar-list-mode-switch';
 import {
   ChatSidebarProjectGroups,
@@ -130,16 +131,6 @@ function sessionTitle(session: SessionEntryView): string {
   return chunks[chunks.length - 1] || session.key;
 }
 
-function resolveSessionTypeStatusText(option: {
-  ready?: boolean;
-  reasonMessage?: string | null;
-}): string {
-  if (option.ready === false) {
-    return option.reasonMessage?.trim() || t('statusSetup');
-  }
-  return t('statusReady');
-}
-
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
@@ -347,38 +338,23 @@ export function ChatSidebar() {
                   <ChevronDown className="h-4 w-4" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="end" className="w-64 p-2">
-                <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+              <PopoverContent
+                align="end"
+                className="w-56 rounded-2xl border border-gray-200/80 bg-white p-1.5 shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+              >
+                <div className="px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400">
                   {t('chatSessionTypeLabel')}
                 </div>
-                <div className="mt-1 space-y-1">
+                <div className="space-y-1">
                   {nonDefaultSessionTypeOptions.map((option) => (
-                    <button
+                    <ChatSessionTypeOptionItem
                       key={option.value}
-                      type="button"
-                      onClick={() => {
+                      option={option}
+                      onSelect={() => {
                         presenter.chatSessionListManager.createSession(option.value);
                         setIsCreateMenuOpen(false);
                       }}
-                      className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
-                    >
-                      <div className="flex items-center justify-between gap-3">
-                        <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
-                        <span
-                          className={cn(
-                            'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
-                            option.ready === false
-                              ? 'bg-amber-100 text-amber-800'
-                              : 'bg-emerald-100 text-emerald-700'
-                          )}
-                        >
-                          {option.ready === false ? t('statusSetup') : t('statusReady')}
-                        </span>
-                      </div>
-                      <div className="mt-0.5 text-[11px] text-gray-500">
-                        {resolveSessionTypeStatusText(option)}
-                      </div>
-                    </button>
+                    />
                   ))}
                 </div>
               </PopoverContent>

package/src/components/chat/chat-conversation-panel.test.tsx

@@ -269,6 +269,23 @@ describe("ChatConversationPanel", () => {
     expect(screen.queryByText("Engineer")).toBeNull();
   });
 
+  it("renders a fuller loading skeleton before provider state settles", () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        isProviderStateResolved: false,
+      },
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.getByTestId("chat-conversation-skeleton")).toBeTruthy();
+    expect(
+      screen.getAllByTestId("chat-conversation-skeleton-bubble"),
+    ).toHaveLength(4);
+    expect(screen.queryByTestId("chat-input-bar")).toBeNull();
+  });
+
   it("keeps the message area clean while a session history is hydrating", () => {
     useChatThreadStore.setState({
       snapshot: {
@@ -495,5 +512,8 @@ describe("ChatSessionWorkspacePanel", () => {
     expect(screen.getByTestId("workspace-file-preview").textContent).toBe(
       "README.md",
     );
+    expect(screen.getByTestId("workspace-tabs-bar").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
   });
 });

package/src/components/chat/chat-conversation-panel.tsx

@@ -9,35 +9,93 @@ import {
 import { ChatWelcome } from "@/components/chat/ChatWelcome";
 import { ChatSessionWorkspacePanel } from "@/components/chat/chat-session-workspace-panel";
 import { AgentAvatar } from "@/components/common/AgentAvatar";
+import { SessionContextIconNode } from "@/components/common/session-context-icon";
 import { usePresenter } from "@/components/chat/presenter/chat-presenter-context";
 import { ChatSessionHeaderActions } from "@/components/chat/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/components/chat/session-header/chat-session-project-badge";
 import { useChatInputStore } from "@/components/chat/stores/chat-input.store";
 import { useChatThreadStore } from "@/components/chat/stores/chat-thread.store";
+import { Skeleton } from "@/components/ui/skeleton";
 import { resolveAgentRuntimeSessionType } from "@/components/chat/useChatSessionTypeState";
 import { t } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
+const CHAT_CONVERSATION_SKELETON_BUBBLES = [
+  {
+    key: "hero",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[78%] h-32 rounded-[30px]",
+  },
+  {
+    key: "follow-up",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[62%] h-24 rounded-[28px]",
+  },
+  {
+    key: "reply",
+    alignmentClassName: "justify-end",
+    bubbleClassName: "max-w-[70%] h-24 rounded-[28px]",
+  },
+  {
+    key: "detail",
+    alignmentClassName: "justify-start",
+    bubbleClassName: "max-w-[88%] h-36 rounded-[30px]",
+  },
+] as const;
+
 function ChatConversationSkeleton() {
   return (
-    <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+    <section
+      data-testid="chat-conversation-skeleton"
+      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
+    >
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
-        <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-          <div className="space-y-4">
-            <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
-            <div className="h-24 w-[78%] animate-pulse rounded-2xl bg-gray-200/80" />
-            <div className="h-20 w-[62%] animate-pulse rounded-2xl bg-gray-200/80" />
-            <div className="h-28 w-[84%] animate-pulse rounded-2xl bg-gray-200/80" />
+        <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
+          <div className="flex flex-1 flex-col gap-8">
+            <div className="space-y-6">
+              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
+              <div className="space-y-5">
+                {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
+                  <div
+                    key={bubble.key}
+                    className={cn("flex w-full", bubble.alignmentClassName)}
+                  >
+                    <Skeleton
+                      data-testid="chat-conversation-skeleton-bubble"
+                      className={cn(
+                        "w-full bg-gray-200/80",
+                        bubble.bubbleClassName,
+                      )}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
+                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
+              </div>
+              <div className="hidden justify-end sm:flex">
+                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <div className="border-t border-gray-200/80 bg-white p-4">
         <div className="mx-auto w-full max-w-[min(1120px,100%)]">
-          <div className="rounded-2xl border border-gray-200 bg-white shadow-card p-4">
-            <div className="h-16 w-full animate-pulse rounded-xl bg-gray-200/80" />
-            <div className="mt-3 flex items-center justify-between">
-              <div className="h-8 w-36 animate-pulse rounded-lg bg-gray-200/80" />
-              <div className="h-8 w-20 animate-pulse rounded-lg bg-gray-200/80" />
+          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
+            <div className="px-4 py-2.5">
+              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
+            </div>
+            <div className="flex items-center justify-between gap-3 px-3 pb-3">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
+                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
+                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
+              </div>
+              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
             </div>
           </div>
         </div>
@@ -130,7 +188,19 @@ function ChatConversationHeader({
           {sessionHeaderTitle}
         </span>
         {snapshot.sessionTypeLabel ? (
-          <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+            {snapshot.sessionTypeIcon?.src ? (
+              <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
+                <SessionContextIconNode
+                  icon={{
+                    kind: "runtime-image",
+                    src: snapshot.sessionTypeIcon.src,
+                    alt: snapshot.sessionTypeIcon.alt ?? null,
+                    name: snapshot.sessionTypeLabel
+                  }}
+                />
+              </span>
+            ) : null}
             {snapshot.sessionTypeLabel}
           </span>
         ) : null}

package/src/components/chat/chat-page-shell.tsx

@@ -1,12 +1,12 @@
-import { useEffect } from 'react';
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import { ChatSidebar } from '@/components/chat/ChatSidebar';
-import { ChatConversationPanel } from '@/components/chat/chat-conversation-panel';
-import { AgentsPage } from '@/components/agents/AgentsPage';
-import { CronConfig } from '@/components/config/CronConfig';
-import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
+import { useEffect } from "react";
+import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ChatSidebar } from "@/components/chat/ChatSidebar";
+import { ChatConversationPanel } from "@/components/chat/chat-conversation-panel";
+import { AgentsPage } from "@/components/agents/agents-page";
+import { CronConfig } from "@/components/config/CronConfig";
+import { MarketplacePage } from "@/components/marketplace/marketplace-page";
 
-export type MainPanelView = 'chat' | 'cron' | 'skills' | 'agents';
+export type MainPanelView = "chat" | "cron" | "skills" | "agents";
 
 export type ChatPageProps = {
   view: MainPanelView;
@@ -32,7 +32,7 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
   } = params;
 
   useEffect(() => {
-    if (view !== 'chat') {
+    if (view !== "chat") {
       return;
     }
     if (routeSessionKey) {
@@ -45,7 +45,13 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
       setSelectedSessionKey(null);
       resetStreamState();
     }
-  }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
+  }, [
+    resetStreamState,
+    routeSessionKey,
+    selectedSessionKey,
+    setSelectedSessionKey,
+    view,
+  ]);
 
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
@@ -62,17 +68,17 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
     <div className="h-full flex">
       <ChatSidebar />
 
-      {view === 'chat' ? (
+      {view === "chat" ? (
         <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-          {view === 'cron' ? (
+          {view === "cron" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
                 <CronConfig />
               </div>
             </div>
-          ) : view === 'agents' ? (
+          ) : view === "agents" ? (
             <div className="h-full overflow-auto custom-scrollbar">
               <div className="mx-auto w-full max-w-[min(1180px,100%)] px-6 py-5">
                 <AgentsPage />

package/src/components/chat/chat-session-type-option-item.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSessionTypeOptionItem } from "@/components/chat/chat-session-type-option-item";
+
+describe("ChatSessionTypeOptionItem", () => {
+  it("renders a runtime icon image when the session type option provides an app resource URI", () => {
+    render(
+      <ChatSessionTypeOptionItem
+        option={{
+          value: "codex",
+          label: "Codex",
+          icon: {
+            kind: "image",
+            src: "app://runtime-icons/codex-openai.svg",
+            alt: "Codex",
+          },
+          ready: true,
+        }}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    const runtimeIcon = screen.getByRole("img", { name: "Codex logo" });
+    expect(runtimeIcon.getAttribute("src")).toBe("/runtime-icons/codex-openai.svg");
+  });
+
+  it("keeps ready options visually compact without repeating helper copy", () => {
+    render(
+      <ChatSessionTypeOptionItem
+        option={{
+          value: "claude",
+          label: "Claude",
+          icon: {
+            kind: "image",
+            src: "app://runtime-icons/claude.ico",
+            alt: "Claude",
+          },
+          ready: true,
+        }}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(screen.getAllByText("Ready")).toHaveLength(1);
+  });
+});

package/src/components/chat/chat-session-type-option-item.tsx

@@ -0,0 +1,68 @@
+import type { ChatInputSnapshot } from "@/components/chat/stores/chat-input.store";
+import { SessionContextIconNode } from "@/components/common/session-context-icon";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+export function ChatSessionTypeOptionItem(props: {
+  option: SessionTypeOption;
+  onSelect: () => void;
+}) {
+  const { option, onSelect } = props;
+  const helperText =
+    option.ready === false
+      ? option.reasonMessage?.trim() || t("statusSetup")
+      : null;
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className="w-full rounded-2xl px-3 py-2.5 text-left transition-colors hover:bg-gray-50"
+    >
+      <div className="flex items-start gap-3">
+        <div className="flex min-w-0 flex-1 items-start gap-2.5">
+          {option.icon?.src ? (
+            <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center pt-0.5">
+              <SessionContextIconNode
+                icon={{
+                  kind: "runtime-image",
+                  src: option.icon.src,
+                  alt: option.icon.alt ?? null,
+                  name: option.label,
+                }}
+              />
+            </span>
+          ) : null}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center justify-between gap-3">
+              <div className="truncate text-[13px] font-semibold text-gray-900">
+                {option.label}
+              </div>
+              <span
+                className={cn(
+                  "inline-flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
+                  option.ready === false ? "text-amber-700" : "text-emerald-600",
+                )}
+              >
+                <span
+                  className={cn(
+                    "h-1.5 w-1.5 rounded-full",
+                    option.ready === false ? "bg-amber-500" : "bg-emerald-500",
+                  )}
+                />
+                {option.ready === false ? t("statusSetup") : t("statusReady")}
+              </span>
+            </div>
+            {helperText ? (
+              <div className="mt-1 pr-4 text-[11px] leading-4 text-gray-500">
+                {helperText}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

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

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ChatSessionWorkspaceFilePreview } from "@/components/chat/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/components/chat/stores/chat-thread.store";
+import { t } from "@/lib/i18n";
 
 const serverPathReadMock = vi.fn();
 
@@ -88,4 +89,90 @@ describe("ChatSessionWorkspaceFilePreview", () => {
       "workspace",
     );
   });
+
+  it("does not repeat the preview badge inside the workspace header", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/example.ts",
+        text: "const answer = 42;\n",
+        truncated: false,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({ viewMode: "preview" })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+    expect(screen.getByTitle("/tmp/example.ts")).toBeTruthy();
+    expect(screen.getByText("tmp")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+  });
+
+  it("renders project-relative breadcrumbs when the file is inside the workspace", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/workspace/src/example.ts",
+        text: "const answer = 42;\n",
+        truncated: false,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({ viewMode: "preview" })}
+        sessionProjectRoot="/tmp/workspace"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("workspace")).toBeTruthy();
+    expect(screen.getByText("src")).toBeTruthy();
+    expect(screen.getByText("example.ts")).toBeTruthy();
+    expect(
+      screen.getByTestId("workspace-file-breadcrumb-scroll").className,
+    ).toContain("py-1.5");
+    expect(screen.getByTestId("workspace-file-breadcrumbs").className).toContain(
+      "workspace-horizontal-scrollbar",
+    );
+  });
+
+  it("keeps line and truncation metadata without the duplicated type badge", () => {
+    serverPathReadMock.mockReturnValue({
+      isLoading: false,
+      error: null,
+      data: {
+        kind: "text",
+        resolvedPath: "/tmp/example.ts",
+        text: "const answer = 42;\n",
+        truncated: true,
+      },
+    });
+
+    render(
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile({
+          viewMode: "preview",
+          line: 12,
+          column: 4,
+        })}
+        sessionProjectRoot="/tmp"
+        onFileOpen={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText("L12:4")).toBeTruthy();
+    expect(screen.getByText(t("chatWorkspacePreviewTruncated"))).toBeTruthy();
+    expect(screen.queryByText(t("chatWorkspacePreview"))).toBeNull();
+  });
 });

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

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

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

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