@nextclaw/ui 0.15.2 → 0.15.3

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -108,7 +108,7 @@ export function ChatSidebarUtilityMenu({
           <button
             type="button"
             aria-label={t("settingsMenu")}
-            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+            className="flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors duration-base hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <Settings className="h-4 w-4 shrink-0 text-muted-foreground/70" />
             <span className="min-w-0 flex-1 text-left">{t("settings")}</span>

package/src/features/chat/features/conversation/components/session-queued-input-rows.tsx

@@ -44,7 +44,7 @@ function QueuedInputIconButton({
             aria-label={label}
             disabled={disabled}
             onClick={onClick}
-            className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:text-muted-foreground/50"
+            className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:text-muted-foreground/50"
           >
             {children}
           </button>

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

@@ -9,6 +9,8 @@ const captures = vi.hoisted(() => ({
     messages: unknown[];
     onToolAction?: (action: unknown) => void;
     onFileOpen?: (action: unknown) => void;
+    onAttachmentOpen?: (file: unknown) => void;
+    onInlineTokenClick?: (token: unknown) => void;
     renderInlineDisplay?: (display: unknown) => unknown;
     renderPanelAppCard?: (panelApp: unknown) => unknown;
     texts?: Record<string, unknown>;
@@ -16,6 +18,7 @@ const captures = vi.hoisted(() => ({
   language: "en",
   openFilePreview: vi.fn(),
   handleToolAction: vi.fn(),
+  showContent: vi.fn(),
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
@@ -26,6 +29,7 @@ vi.mock("@nextclaw/agent-chat-ui", async (importOriginal) => {
       messages: unknown[];
       onToolAction?: (action: unknown) => void;
       onFileOpen?: (action: unknown) => void;
+      onAttachmentOpen?: (file: unknown) => void;
       renderInlineDisplay?: (display: unknown) => unknown;
       renderPanelAppCard?: (panelApp: unknown) => unknown;
       texts?: Record<string, unknown>;
@@ -42,6 +46,9 @@ vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
       openFilePreview: captures.openFilePreview,
       handleToolAction: captures.handleToolAction,
     },
+    chatUiManager: {
+      showContent: captures.showContent,
+    },
   }),
 }));
 
@@ -59,6 +66,7 @@ beforeEach(() => {
   captures.language = "en";
   captures.openFilePreview.mockReset();
   captures.handleToolAction.mockReset();
+  captures.showContent.mockReset();
 });
 
 it("reuses adapted message references when the source message object is unchanged", () => {
@@ -300,6 +308,41 @@ it("wires markdown file link actions to the workspace file preview manager", ()
   expect(captures.openFilePreview).toHaveBeenCalledWith(action);
 });
 
+it("opens message attachments in the workspace file preview", () => {
+  const message = {
+    id: "assistant-attachment",
+    sessionId: "session-1",
+    role: "assistant",
+    status: "final",
+    timestamp: "2026-03-31T10:05:00.000Z",
+    parts: [
+      {
+        type: "file",
+        name: "spec.pdf",
+        mimeType: "application/pdf",
+        contentBase64: "cGRm",
+      },
+    ],
+  } satisfies NcpMessage;
+
+  render(<ChatMessageListContainer messages={[message]} isSending={false} />);
+  captures.renders[captures.renders.length - 1]?.onAttachmentOpen?.({
+    label: "spec.pdf",
+    mimeType: "application/pdf",
+    dataUrl: "data:application/pdf;base64,cGRm",
+    isImage: false,
+  });
+
+  expect(captures.openFilePreview).toHaveBeenCalledWith({
+    path: "spec.pdf",
+    label: "spec.pdf",
+    viewMode: "preview",
+    contentUrl: "data:application/pdf;base64,cGRm",
+    mimeType: "application/pdf",
+  });
+  expect(captures.showContent).not.toHaveBeenCalled();
+});
+
 it("renders context inheritance as a divider without repeating inherited messages", () => {
   const inheritedMessage = {
     id: "child-session:inherited:1",
@@ -387,7 +430,7 @@ it("keeps Hermes tool invocation parts as tool cards instead of flattening them
   });
 });
 
-it("passes localized attachment card texts to the shared chat UI", () => {
+it("passes localized message presentation texts to the shared chat UI", () => {
   captures.language = "zh";
 
   render(<ChatMessageListContainer messages={[]} isSending={false} />);
@@ -400,6 +443,24 @@ it("passes localized attachment card texts to the shared chat UI", () => {
       pdf: "chatAttachmentCategoryPdf",
       generic: "chatAttachmentCategoryGeneric",
     },
+    reasoningCharacterCountTemplates: {
+      inProgress: "chatReasoningInProgressCharacterCount",
+      completed: "chatReasoningCompletedCharacterCount",
+    },
+    toolStatusLabels: {
+      terminal: {
+        running: "chatToolTerminalRunning",
+        success: "chatToolTerminalSuccess",
+        error: "chatToolTerminalError",
+        cancelled: "chatToolTerminalCancelled",
+      },
+      fileEdit: {
+        running: "chatToolFileEditRunning",
+        success: "chatToolFileEditSuccess",
+        error: "chatToolFileEditError",
+        cancelled: "chatToolFileEditCancelled",
+      },
+    },
   });
 });
 

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

@@ -1,7 +1,8 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import type { NcpMessage } from "@nextclaw/ncp";
 import {
   type ChatInlineDisplayViewModel,
+  type ChatInlineTokenViewModel,
   type ChatMessageViewModel,
   ChatMessageList,
 } from "@nextclaw/agent-chat-ui";
@@ -23,6 +24,7 @@ import {
 } from "@/features/chat/features/session/utils/ncp-session-context-metadata.utils";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
 import { ChatInlinePanelAppCard } from "@/features/chat/features/message/components/chat-inline-panel-app-card";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useI18n } from "@/app/components/i18n-provider";
 import { formatDateTime, t } from "@/shared/lib/i18n";
 
@@ -342,6 +344,48 @@ export function ChatMessageListContainer({
     () => buildTimelineItems({ rawMessages, messages }),
     [messages, rawMessages],
   );
+  const sessionSkillsQuery = useChatQueryStore((state) => state.snapshot.sessionSkillsQuery);
+  const handleInlineTokenClick = useCallback(
+    (token: ChatInlineTokenViewModel) => {
+      if (token.kind !== "skill") {
+        return;
+      }
+      const skillKey = token.key.trim();
+      if (!skillKey) {
+        return;
+      }
+      const records = sessionSkillsQuery?.data?.records ?? [];
+      const matched = records.find((record) => record.ref === skillKey || record.name === skillKey);
+      const skillPath = matched?.path?.trim();
+      if (!skillPath) {
+        return;
+      }
+      presenter.chatThreadManager.openFilePreview({
+        path: skillPath,
+        label: token.label || matched?.name || skillKey,
+        viewMode: "preview",
+        previewViewer: "rendered",
+      });
+    },
+    [presenter.chatThreadManager, sessionSkillsQuery],
+  );
+  const handleAttachmentOpen = useCallback(
+    (file: { label: string; mimeType: string; dataUrl?: string; sizeBytes?: number; isImage: boolean }) => {
+      const contentUrl = file.dataUrl?.trim();
+      if (!contentUrl) {
+        return;
+      }
+      const label = file.label.trim() || "attachment";
+      presenter.chatThreadManager.openFilePreview({
+        path: label,
+        label,
+        viewMode: "preview",
+        contentUrl,
+        mimeType: file.mimeType,
+      });
+    },
+    [presenter.chatThreadManager],
+  );
   return (
     <div className={className}>
       {timelineItems.map((item, index) =>
@@ -358,6 +402,8 @@ export function ChatMessageListContainer({
             texts={messageTexts}
             onToolAction={presenter.chatThreadManager.handleToolAction}
             onFileOpen={presenter.chatThreadManager.openFilePreview}
+            onAttachmentOpen={handleAttachmentOpen}
+            onInlineTokenClick={handleInlineTokenClick}
             renderInlineDisplay={renderChatInlineDisplay}
             renderToolAgent={(agentId) => (
               <AgentIdentityAvatar

package/src/features/chat/features/message/utils/__tests__/chat-message-process-summary.utils.test.ts

@@ -18,7 +18,7 @@ const baseAssistantMessage = {
       toolCallId: "tool-1",
       toolName: "exec_command",
       state: "result",
-      args: "{\"cmd\":\"git status\"}",
+      args: '{"cmd":"git status"}',
       result: "clean",
     },
     {
@@ -56,4 +56,14 @@ describe("buildChatMessageProcessSummary", () => {
       label: "Processed 3m 51s",
     });
   });
+
+  it("stays free of tool-activity semantics", () => {
+    const summary = buildChatMessageProcessSummary({
+      message: baseAssistantMessage,
+      processedLabel: "Processed",
+    });
+    expect(summary?.label).toBe("Processed");
+    expect(summary?.label.toLowerCase()).not.toContain("bash");
+    expect(summary?.label.toLowerCase()).not.toContain("read");
+  });
 });

package/src/features/chat/features/message/utils/__tests__/chat-message-texts.utils.test.ts

@@ -0,0 +1,23 @@
+import { expect, it, vi } from "vitest";
+import { buildChatMessageTexts } from "@/features/chat/features/message/utils/chat-message-texts.utils";
+
+vi.mock("@/shared/lib/i18n", () => ({
+  t: (key: string) => key,
+}));
+
+it("provides localized status keys for built-in tool categories", () => {
+  expect(buildChatMessageTexts("zh").toolStatusLabels?.builtIn).toMatchObject({
+    directory: {
+      running: "chatToolDirectoryRunning",
+      success: "chatToolDirectorySuccess",
+      error: "chatToolDirectoryError",
+      cancelled: "chatToolDirectoryCancelled",
+    },
+    memory: {
+      running: "chatToolMemoryRunning",
+      success: "chatToolMemorySuccess",
+      error: "chatToolMemoryError",
+      cancelled: "chatToolMemoryCancelled",
+    },
+  });
+});

package/src/features/chat/features/message/utils/chat-message-process-summary.utils.ts

@@ -68,6 +68,11 @@ function formatLifecycleDuration(message: NcpMessage): string | null {
   return `${seconds}s`;
 }
 
+/**
+ * Outer process collapse only.
+ * Tool activity grouping is a separate layer over consecutive tool-cards
+ * and must not be mixed into this summary.
+ */
 export function buildChatMessageProcessSummary({
   message,
   processedLabel,

package/src/features/chat/features/message/utils/chat-message-texts.utils.ts

@@ -32,6 +32,71 @@ export function buildChatMessageAdapterTexts(
   };
 }
 
+function buildBuiltInToolStatusLabels() {
+  return {
+    directory: {
+      running: t("chatToolDirectoryRunning"),
+      success: t("chatToolDirectorySuccess"),
+      error: t("chatToolDirectoryError"),
+      cancelled: t("chatToolDirectoryCancelled"),
+    },
+    web: {
+      running: t("chatToolWebRunning"),
+      success: t("chatToolWebSuccess"),
+      error: t("chatToolWebError"),
+      cancelled: t("chatToolWebCancelled"),
+    },
+    message: {
+      running: t("chatToolMessageRunning"),
+      success: t("chatToolMessageSuccess"),
+      error: t("chatToolMessageError"),
+      cancelled: t("chatToolMessageCancelled"),
+    },
+    session: {
+      running: t("chatToolSessionRunning"),
+      success: t("chatToolSessionSuccess"),
+      error: t("chatToolSessionError"),
+      cancelled: t("chatToolSessionCancelled"),
+    },
+    agent: {
+      running: t("chatToolAgentRunning"),
+      success: t("chatToolAgentSuccess"),
+      error: t("chatToolAgentError"),
+      cancelled: t("chatToolAgentCancelled"),
+    },
+    memory: {
+      running: t("chatToolMemoryRunning"),
+      success: t("chatToolMemorySuccess"),
+      error: t("chatToolMemoryError"),
+      cancelled: t("chatToolMemoryCancelled"),
+    },
+    schedule: {
+      running: t("chatToolScheduleRunning"),
+      success: t("chatToolScheduleSuccess"),
+      error: t("chatToolScheduleError"),
+      cancelled: t("chatToolScheduleCancelled"),
+    },
+    system: {
+      running: t("chatToolSystemRunning"),
+      success: t("chatToolSystemSuccess"),
+      error: t("chatToolSystemError"),
+      cancelled: t("chatToolSystemCancelled"),
+    },
+    image: {
+      running: t("chatToolImageRunning"),
+      success: t("chatToolImageSuccess"),
+      error: t("chatToolImageError"),
+      cancelled: t("chatToolImageCancelled"),
+    },
+    display: {
+      running: t("chatToolDisplayRunning"),
+      success: t("chatToolDisplaySuccess"),
+      error: t("chatToolDisplayError"),
+      cancelled: t("chatToolDisplayCancelled"),
+    },
+  };
+}
+
 export function buildChatMessageTexts(
   language: string,
 ): ChatMessageTexts {
@@ -42,8 +107,41 @@ export function buildChatMessageTexts(
     copyMessageLabel: t("chatMessageCopy"),
     copiedMessageLabel: t("chatMessageCopied"),
     typingLabel: t("chatTyping"),
+    reasoningCharacterCountTemplates: {
+      inProgress: t("chatReasoningInProgressCharacterCount"),
+      completed: t("chatReasoningCompletedCharacterCount"),
+    },
+    toolStatusLabels: {
+      terminal: {
+        running: t("chatToolTerminalRunning"),
+        success: t("chatToolTerminalSuccess"),
+        error: t("chatToolTerminalError"),
+        cancelled: t("chatToolTerminalCancelled"),
+      },
+      fileRead: {
+        running: t("chatToolFileReadRunning"),
+        success: t("chatToolFileReadSuccess"),
+        error: t("chatToolFileReadError"),
+        cancelled: t("chatToolFileReadCancelled"),
+      },
+      fileEdit: {
+        running: t("chatToolFileEditRunning"),
+        success: t("chatToolFileEditSuccess"),
+        error: t("chatToolFileEditError"),
+        cancelled: t("chatToolFileEditCancelled"),
+      },
+      search: {
+        running: t("chatToolSearchRunning"),
+        success: t("chatToolSearchSuccess"),
+        error: t("chatToolSearchError"),
+        cancelled: t("chatToolSearchCancelled"),
+      },
+      builtIn: buildBuiltInToolStatusLabels(),
+    },
     attachmentOpenLabel: t("chatAttachmentOpen"),
     attachmentAttachedLabel: t("chatAttachmentAttached"),
+    attachmentExpandLabel: t("chatAttachmentExpand"),
+    attachmentCloseLabel: t("chatAttachmentClosePreview"),
     attachmentCategoryLabels: {
       archive: t("chatAttachmentCategoryArchive"),
       audio: t("chatAttachmentCategoryAudio"),
@@ -56,5 +154,45 @@ export function buildChatMessageTexts(
       sheet: t("chatAttachmentCategorySheet"),
       video: t("chatAttachmentCategoryVideo"),
     },
+    toolActivitySegmentTemplates: {
+      read: {
+        one: t("chatToolActivityReadOne"),
+        other: t("chatToolActivityReadOther"),
+      },
+      edit: {
+        one: t("chatToolActivityEditOne"),
+        other: t("chatToolActivityEditOther"),
+      },
+      directory: {
+        one: t("chatToolActivityDirectoryOne"),
+        other: t("chatToolActivityDirectoryOther"),
+      },
+      search: {
+        one: t("chatToolActivitySearchOne"),
+        other: t("chatToolActivitySearchOther"),
+      },
+      bash: {
+        one: t("chatToolActivityBashOne"),
+        other: t("chatToolActivityBashOther"),
+      },
+      web: {
+        one: t("chatToolActivityWebOne"),
+        other: t("chatToolActivityWebOther"),
+      },
+      agent: {
+        one: t("chatToolActivityAgentOne"),
+        other: t("chatToolActivityAgentOther"),
+      },
+      panel: {
+        one: t("chatToolActivityPanelOne"),
+        other: t("chatToolActivityPanelOther"),
+      },
+      other: {
+        one: t("chatToolActivityOtherOne"),
+        other: t("chatToolActivityOtherOther"),
+      },
+    },
+    toolActivityFailedLabel: t("chatProcessSummaryFailed"),
+    toolActivityCancelledLabel: t("chatProcessSummaryCancelled"),
   };
 }

package/src/features/chat/features/session/components/chat-sidebar-project-groups.tsx

@@ -64,7 +64,7 @@ export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
                     ? 'chatSidebarExpandProject'
                     : 'chatSidebarCollapseProject',
                 )}
-                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                className="flex h-full w-full min-w-0 items-center gap-1.5 pr-14 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() =>
                   presenter.chatSessionListManager.toggleProjectCollapsed(
                     group.projectRoot,

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -40,7 +40,7 @@ import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (
@@ -111,7 +111,7 @@ function ChatSessionSwitchItem({
       type="button"
       aria-current={active ? "page" : undefined}
       className={cn(
-        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
           ? "bg-accent text-accent-foreground"
           : "text-popover-foreground hover:bg-accent/70",

package/src/features/chat/features/welcome/components/chat-welcome-project-picker.tsx

@@ -49,7 +49,7 @@ export function ChatWelcomeProjectPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (

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

@@ -167,6 +167,11 @@ function mockWorkspaceBreadcrumbBrowseTree() {
 beforeEach(() => {
   serverPathReadMock.mockReset();
   serverPathBrowseMock.mockReset();
+  serverPathReadMock.mockReturnValue({
+    isLoading: false,
+    error: null,
+    data: null,
+  });
   serverPathBrowseMock.mockReturnValue({
     isLoading: false,
     error: new Error("server path must point to a directory"),
@@ -175,6 +180,68 @@ beforeEach(() => {
 });
 
 describe("ChatSessionWorkspaceFilePreview rendering", () => {
+  it("renders attachment content URLs as workspace-native media previews", () => {
+    renderWorkspaceFilePreview({
+      file: {
+        key: "attachment-image",
+        path: "photo.png",
+        label: "photo.png",
+        viewMode: "preview",
+        contentUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Fphoto",
+        mimeType: "image/png",
+      },
+    });
+
+    expect(serverPathReadMock).toHaveBeenCalledWith(
+      expect.objectContaining({ enabled: false }),
+    );
+    expect(serverPathBrowseMock).toHaveBeenCalledWith(
+      expect.objectContaining({ enabled: false }),
+    );
+    const image = screen.getByTestId("workspace-content-image");
+    expect(image.getAttribute("src")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Fphoto",
+    );
+    expect(image.getAttribute("alt")).toBe("photo.png");
+  });
+
+  it("offers download and system open actions for unsupported office attachments", () => {
+    renderWorkspaceFilePreview({
+      file: {
+        key: "attachment-docx",
+        path: "overview.zh-CN.docx",
+        label: "overview.zh-CN.docx",
+        viewMode: "preview",
+        contentUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+        mimeType:
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      },
+    });
+
+    expect(screen.getByTestId("workspace-content-unsupported")).toBeTruthy();
+    expect(
+      screen.getByTestId("workspace-content-unsupported").textContent,
+    ).toContain("overview.zh-CN.docx");
+    expect(screen.getByText(t("chatWorkspacePreviewUnsupported"))).toBeTruthy();
+    expect(screen.getByText(t("chatWorkspacePreviewUnsupportedHint"))).toBeTruthy();
+
+    const download = screen.getByRole("link", {
+      name: t("chatWorkspacePreviewDownload"),
+    });
+    expect(download.getAttribute("href")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+    );
+    expect(download.getAttribute("download")).toBe("overview.zh-CN.docx");
+
+    const openExternally = screen.getByRole("link", {
+      name: t("chatWorkspacePreviewOpenExternally"),
+    });
+    expect(openExternally.getAttribute("href")).toBe(
+      "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2Foverview",
+    );
+    expect(openExternally.getAttribute("target")).toBe("_blank");
+  });
+
   it("renders preview files inside a full-height workspace code surface", () => {
     mockTextRead();
     renderWorkspaceFilePreview();

package/src/features/chat/features/workspace/components/chat-session-workspace-directory-browser.tsx

@@ -81,7 +81,7 @@ export function ChatSessionWorkspaceDirectoryBrowser({
             type="button"
             aria-label={buildDirectoryEntryLabel(entry)}
             className={cn(
-              "flex h-8 w-full min-w-0 items-center gap-2 rounded-sm px-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              "flex h-8 w-full min-w-0 items-center gap-2 rounded-sm px-2 text-left text-sm text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
               entry.hidden ? "opacity-65" : null,
             )}
             onClick={() => openEntry(entry)}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumb-browser.tsx

@@ -67,7 +67,7 @@ export function WorkspaceBreadcrumbBrowser({
             <Fragment key={breadcrumb.path}>
               <button
                 type="button"
-                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() => onBrowsePathChange(breadcrumb.path)}
               >
                 {breadcrumb.label}
@@ -97,7 +97,7 @@ export function WorkspaceBreadcrumbBrowser({
                 key={entry.path}
                 type="button"
                 className={cn(
-                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   entry.hidden ? "opacity-65" : null,
                 )}
                 onClick={() => openEntry(entry)}

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

@@ -48,7 +48,7 @@ function WorkspaceBreadcrumbSegmentButton({
           type="button"
           aria-current={segment.isCurrent ? "page" : undefined}
           className={cn(
-            "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
             segment.kind === "workspace"
               ? "bg-primary/8 text-primary hover:bg-primary/12"
               : segment.isCurrent