@nextclaw/ui 0.15.3 → 0.15.5

package/src/features/chat/stores/chat-thread.store.ts

@@ -8,8 +8,14 @@ import type {
 } from '@/shared/lib/api';
 import {
   normalizePersistedWorkspaceFileTab,
+  retainWorkspaceFileTabs,
   toPersistedWorkspaceFileTab,
 } from '@/features/chat/features/workspace/utils/chat-workspace-file-tab-persistence.utils';
+import {
+  CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
+  normalizeChatWorkspacePanelWidth,
+} from '@/features/chat/features/workspace/utils/chat-workspace-panel-layout.utils';
+import { createWorkspaceNavigationEntryFromSnapshot } from '@/features/chat/features/workspace/utils/chat-thread-workspace-session.utils';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -44,9 +50,21 @@ export type ChatWorkspaceFileTab = {
   fullLines?: ChatFileOperationLineViewModel[];
 };
 
+export type ChatWorkspacePanelKind =
+  | 'overview'
+  | 'child-sessions'
+  | 'child-session'
+  | 'side-chat-draft'
+  | 'project-files'
+  | 'file'
+  | 'cron';
+
 export type ChatWorkspaceNavigationEntry =
+  | { kind: 'overview' }
+  | { kind: 'child-sessions' }
   | { kind: 'child-session'; key: string }
   | { kind: 'side-chat-draft'; key: string }
+  | { kind: 'project-files' }
   | { kind: 'file'; key: string }
   | { kind: 'cron' };
 
@@ -69,14 +87,16 @@ export type ChatThreadSnapshot = {
   parentSessionKey?: string | null;
   parentSessionLabel?: string | null;
   workspacePanelParentKey?: string | null;
-  activeWorkspacePanelKind?: "child-session" | "side-chat-draft" | "file" | "cron" | null;
+  activeWorkspacePanelKind?: ChatWorkspacePanelKind | null;
   childSessionTabs: ChatChildSessionTab[];
   activeChildSessionKey?: string | null;
   activeSideChatDraft?: ChatWorkspaceSideChatDraft | null;
   workspaceFileTabs: ChatWorkspaceFileTab[];
   activeWorkspaceFileKey?: string | null;
+  closedWorkspaceTabEntries: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistory: ChatWorkspaceNavigationEntry[];
   workspaceNavigationHistoryIndex: number;
+  workspacePanelWidth: number;
   contextWindow?: SessionContextWindowView | null;
 };
 
@@ -96,8 +116,10 @@ type PersistedChatThreadStore = {
     activeChildSessionKey?: unknown;
     workspaceFileTabs?: unknown;
     activeWorkspaceFileKey?: unknown;
+    closedWorkspaceTabEntries?: unknown;
     workspaceNavigationHistory?: unknown;
     workspaceNavigationHistoryIndex?: unknown;
+    workspacePanelWidth?: unknown;
   };
 };
 
@@ -108,11 +130,13 @@ type PersistedChatWorkspaceSnapshot = Pick<
   | 'activeChildSessionKey'
   | 'workspaceFileTabs'
   | 'activeWorkspaceFileKey'
+  | 'closedWorkspaceTabEntries'
   | 'workspaceNavigationHistory'
   | 'workspaceNavigationHistoryIndex'
+  | 'workspacePanelWidth'
 >;
 
-type PersistedWorkspacePanelKind = 'child-session' | 'file' | 'cron';
+type PersistedWorkspacePanelKind = Exclude<ChatWorkspacePanelKind, 'side-chat-draft'>;
 
 const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeLabel: null,
@@ -139,8 +163,10 @@ const initialSnapshot: ChatThreadSnapshot = {
   activeSideChatDraft: null,
   workspaceFileTabs: [],
   activeWorkspaceFileKey: null,
+  closedWorkspaceTabEntries: [],
   workspaceNavigationHistory: [],
   workspaceNavigationHistoryIndex: 0,
+  workspacePanelWidth: CHAT_WORKSPACE_PANEL_DEFAULT_WIDTH,
   contextWindow: null
 };
 
@@ -163,7 +189,14 @@ function normalizeHistoryIndex(value: unknown, maxIndex: number): number {
 function isWorkspacePanelKind(
   value: unknown,
 ): value is PersistedWorkspacePanelKind {
-  return value === 'child-session' || value === 'file' || value === 'cron';
+  return (
+    value === 'overview' ||
+    value === 'child-sessions' ||
+    value === 'child-session' ||
+    value === 'project-files' ||
+    value === 'file' ||
+    value === 'cron'
+  );
 }
 
 function normalizePersistedWorkspaceNavigationEntry(
@@ -172,8 +205,13 @@ function normalizePersistedWorkspaceNavigationEntry(
   if (!isRecord(value)) {
     return null;
   }
-  if (value.kind === 'cron') {
-    return { kind: 'cron' };
+  if (
+    value.kind === 'overview' ||
+    value.kind === 'child-sessions' ||
+    value.kind === 'project-files' ||
+    value.kind === 'cron'
+  ) {
+    return { kind: value.kind };
   }
   const key = normalizeOptionalString(value.key);
   if (!key || (value.kind !== 'child-session' && value.kind !== 'file')) {
@@ -185,50 +223,31 @@ function normalizePersistedWorkspaceNavigationEntry(
   };
 }
 
-function createWorkspaceNavigationEntryFromSnapshot({
-  activeChildSessionKey,
-  activeWorkspaceFileKey,
-  activeWorkspacePanelKind,
-}: {
-  activeWorkspacePanelKind: ChatThreadSnapshot['activeWorkspacePanelKind'];
-  activeChildSessionKey: string | null;
-  activeWorkspaceFileKey: string | null;
-}): ChatWorkspaceNavigationEntry | null {
-  if (activeWorkspacePanelKind === 'cron') {
-    return { kind: 'cron' };
-  }
-  if (activeWorkspacePanelKind === 'child-session' && activeChildSessionKey) {
-    return {
-      kind: 'child-session',
-      key: activeChildSessionKey,
-    };
-  }
-  if (activeWorkspacePanelKind === 'file' && activeWorkspaceFileKey) {
-    return {
-      kind: 'file',
-      key: activeWorkspaceFileKey,
-    };
-  }
-  return null;
-}
-
 function normalizePersistedWorkspaceSnapshot(
   value: unknown,
 ): PersistedChatWorkspaceSnapshot | null {
   if (!isRecord(value)) {
     return null;
   }
-  const workspaceFileTabs = Array.isArray(value.workspaceFileTabs)
+  const workspacePanelParentKey = normalizeOptionalString(value.workspacePanelParentKey);
+  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const normalizedWorkspaceFileTabs = Array.isArray(value.workspaceFileTabs)
     ? value.workspaceFileTabs
       .map(normalizePersistedWorkspaceFileTab)
       .filter((tab): tab is ChatWorkspaceFileTab => tab !== null)
-      .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
     : [];
-  const activeWorkspaceFileKey = normalizeOptionalString(value.activeWorkspaceFileKey);
+  const workspaceFileTabs = retainWorkspaceFileTabs(
+    normalizedWorkspaceFileTabs,
+    activeWorkspaceFileKey,
+    CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+  );
+  const sessionWorkspaceFileTabs = workspaceFileTabs.filter(
+    (tab) => tab.parentSessionKey === workspacePanelParentKey,
+  );
   const resolvedActiveWorkspaceFileKey =
-    activeWorkspaceFileKey && workspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
+    activeWorkspaceFileKey && sessionWorkspaceFileTabs.some((tab) => tab.key === activeWorkspaceFileKey)
       ? activeWorkspaceFileKey
-      : workspaceFileTabs[0]?.key ?? null;
+      : sessionWorkspaceFileTabs[0]?.key ?? null;
   const activeWorkspacePanelKind = isWorkspacePanelKind(value.activeWorkspacePanelKind)
     ? value.activeWorkspacePanelKind
     : null;
@@ -237,9 +256,17 @@ function normalizePersistedWorkspaceSnapshot(
       ? null
       : activeWorkspacePanelKind;
   const activeChildSessionKey = normalizeOptionalString(value.activeChildSessionKey);
+  const closedWorkspaceTabEntries = Array.isArray(value.closedWorkspaceTabEntries)
+    ? value.closedWorkspaceTabEntries
+      .map(normalizePersistedWorkspaceNavigationEntry)
+      .filter((entry): entry is ChatWorkspaceNavigationEntry =>
+        entry !== null && entry.kind !== 'overview',
+      )
+    : [];
   const fallbackHistoryEntry = createWorkspaceNavigationEntryFromSnapshot({
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
     activeChildSessionKey,
+    activeSideChatDraft: null,
     activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
   });
   const normalizedNavigationHistory = Array.isArray(value.workspaceNavigationHistory)
@@ -265,13 +292,17 @@ function normalizePersistedWorkspaceSnapshot(
       : 0;
 
   return {
-    workspacePanelParentKey: normalizeOptionalString(value.workspacePanelParentKey),
+    workspacePanelParentKey,
     activeWorkspacePanelKind: resolvedActiveWorkspacePanelKind,
     activeChildSessionKey,
     workspaceFileTabs,
     activeWorkspaceFileKey: resolvedActiveWorkspaceFileKey,
+    closedWorkspaceTabEntries,
     workspaceNavigationHistory,
     workspaceNavigationHistoryIndex,
+    workspacePanelWidth: normalizeChatWorkspacePanelWidth(
+      value.workspacePanelWidth,
+    ),
   };
 }
 
@@ -309,12 +340,18 @@ export const useChatThreadStore = create<ChatThreadStore>()(
                 ? null
                 : state.snapshot.activeWorkspacePanelKind,
             activeChildSessionKey: state.snapshot.activeChildSessionKey,
-            workspaceFileTabs: state.snapshot.workspaceFileTabs
-              .slice(-CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS)
+            workspaceFileTabs: retainWorkspaceFileTabs(
+              state.snapshot.workspaceFileTabs,
+              state.snapshot.activeWorkspaceFileKey,
+              CHAT_THREAD_MAX_PERSISTED_WORKSPACE_FILE_TABS,
+            )
               .map(toPersistedWorkspaceFileTab),
             activeWorkspaceFileKey: state.snapshot.activeWorkspaceFileKey,
+            closedWorkspaceTabEntries: state.snapshot.closedWorkspaceTabEntries
+              .filter((entry) => entry.kind !== 'overview' && entry.kind !== 'side-chat-draft'),
             workspaceNavigationHistory,
             workspaceNavigationHistoryIndex,
+            workspacePanelWidth: state.snapshot.workspacePanelWidth,
           }
         };
       },

package/src/features/chat/types/chat-input-bar.types.ts

@@ -11,6 +11,8 @@ export type ChatSkillRecord = {
   key: string;
   label: string;
   scopeLabel?: string;
+  groupKey?: string;
+  groupLabel?: string;
   description?: string;
   descriptionZh?: string;
   badgeLabel?: string;

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -1,25 +1,42 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { beforeEach, describe, expect, it } from 'vitest';
-import { AppearanceSettingsPage } from '@/features/settings/pages/appearance-settings-page';
-import { useSideDockStore } from '@/features/side-dock';
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { AppearanceSettingsPage } from "@/features/settings/pages/appearance-settings-page";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { useSideDockStore } from "@/features/side-dock";
 
-describe('AppearanceSettingsPage', () => {
+describe("AppearanceSettingsPage", () => {
   beforeEach(() => {
     window.localStorage.clear();
+    useChatMessageLayoutStore.getState().setLayout("card");
     useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
   });
 
-  it('reopens the SideDock from the appearance settings switch', () => {
+  it("reopens the SideDock from the appearance settings switch", () => {
     useSideDockStore.getState().setVisible(false);
 
     render(<AppearanceSettingsPage />);
 
-    const visibilitySwitch = screen.getByRole('switch', { name: 'Show SideDock' });
-    expect(visibilitySwitch.getAttribute('aria-checked')).toBe('false');
+    const visibilitySwitch = screen.getByRole("switch", {
+      name: "Show SideDock",
+    });
+    expect(visibilitySwitch.getAttribute("aria-checked")).toBe("false");
 
     fireEvent.click(visibilitySwitch);
 
     expect(useSideDockStore.getState().isVisible).toBe(true);
   });
+
+  it("switches the chat message layout from appearance settings", () => {
+    render(<AppearanceSettingsPage />);
+
+    const cardOption = screen.getByRole("radio", { name: /^Cards/ });
+    const flatOption = screen.getByRole("radio", { name: /^Flat/ });
+    expect(cardOption.getAttribute("aria-checked")).toBe("true");
+
+    fireEvent.click(flatOption);
+
+    expect(flatOption.getAttribute("aria-checked")).toBe("true");
+    expect(useChatMessageLayoutStore.getState().layout).toBe("flat");
+  });
 });

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -1,33 +1,112 @@
-import { Palette } from 'lucide-react';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
-import { SettingRow } from '@/shared/components/settings/setting-row';
-import { Card, CardContent, CardHeader, CardTitle } from '@/shared/components/ui/card';
-import { Switch } from '@/shared/components/ui/switch';
-import { useSideDockStore } from '@/features/side-dock';
-import { t } from '@/shared/lib/i18n';
+import type { ChatMessageLayout } from "@nextclaw/agent-chat-ui";
+import { Check, Palette } from "lucide-react";
+import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
+import { useChatMessageLayoutStore } from "@/features/chat";
+import { SettingRow } from "@/shared/components/settings/setting-row";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+import { Switch } from "@/shared/components/ui/switch";
+import { useSideDockStore } from "@/features/side-dock";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+const CHAT_MESSAGE_LAYOUT_OPTIONS: Array<{
+  value: ChatMessageLayout;
+  labelKey: string;
+  descriptionKey: string;
+}> = [
+  {
+    value: "card",
+    labelKey: "chatMessageLayoutCard",
+    descriptionKey: "chatMessageLayoutCardDescription",
+  },
+  {
+    value: "flat",
+    labelKey: "chatMessageLayoutFlat",
+    descriptionKey: "chatMessageLayoutFlatDescription",
+  },
+];
 
 export function AppearanceSettingsPage() {
+  const messageLayout = useChatMessageLayoutStore((state) => state.layout);
+  const setMessageLayout = useChatMessageLayoutStore(
+    (state) => state.setLayout,
+  );
   const isSideDockVisible = useSideDockStore((state) => state.isVisible);
   const setSideDockVisible = useSideDockStore((state) => state.setVisible);
 
   return (
     <PageLayout>
-      <PageHeader title={t('appearance')} />
+      <PageHeader title={t("appearance")} />
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Palette className="h-4 w-4" />
-            {t('appearance')}
+            {t("appearance")}
           </CardTitle>
         </CardHeader>
-        <CardContent>
+        <CardContent className="space-y-4">
+          <SettingRow
+            title={t("chatMessageLayoutTitle")}
+            description={t("chatMessageLayoutDescription")}
+          >
+            <div
+              role="radiogroup"
+              aria-label={t("chatMessageLayoutTitle")}
+              className="grid gap-2 sm:grid-cols-2"
+            >
+              {CHAT_MESSAGE_LAYOUT_OPTIONS.map((option) => {
+                const selected = option.value === messageLayout;
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={selected}
+                    onClick={() => setMessageLayout(option.value)}
+                    className={cn(
+                      "flex min-w-0 items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+                      selected
+                        ? "border-primary/35 bg-primary/5 text-foreground"
+                        : "border-border bg-card text-muted-foreground hover:border-border/80 hover:bg-muted/45 hover:text-foreground",
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
+                        selected
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-border bg-background",
+                      )}
+                    >
+                      {selected ? (
+                        <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                      ) : null}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block text-sm font-medium">
+                        {t(option.labelKey)}
+                      </span>
+                      <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                        {t(option.descriptionKey)}
+                      </span>
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </SettingRow>
           <SettingRow
-            title={t('sideDockVisibilityTitle')}
-            description={t('sideDockVisibilityDescription')}
+            title={t("sideDockVisibilityTitle")}
+            description={t("sideDockVisibilityDescription")}
             control={
               <Switch
                 id="appearance-side-dock-visible"
-                aria-label={t('sideDockVisibilityTitle')}
+                aria-label={t("sideDockVisibilityTitle")}
                 checked={isSideDockVisible}
                 onCheckedChange={setSideDockVisible}
               />

package/src/index.css

@@ -736,11 +736,16 @@
 .chat-markdown h5,
 .chat-markdown h6 {
   margin: 0.2rem 0 0;
+  padding-bottom: 0.5em;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: -0.01em;
 }
 
+.chat-markdown :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-top: 0;
+}
+
 .chat-markdown h1 {
   font-size: 1.22rem;
 }
@@ -1338,9 +1343,38 @@
 }
 
 .chat-markdown img {
+  display: block;
+  width: auto;
+  max-width: min(100%, 32rem);
+  height: auto;
+}
+
+.chat-markdown [data-chat-message-image-preview] {
+  margin-block: 0.72rem;
+}
+
+.chat-markdown [data-chat-message-image-preview]:first-child,
+.chat-markdown [data-chat-message-image-preview]
+  + [data-chat-message-image-preview] {
+  margin-top: 0;
+}
+
+.chat-markdown [data-chat-message-image-preview]:last-child {
+  margin-bottom: 0;
+}
+
+.chat-markdown [data-chat-image-row="three-column"] {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: start;
+  gap: 0.72rem;
+}
+
+.chat-markdown
+  [data-chat-image-row="three-column"]
+  > [data-chat-message-image-preview] {
   max-width: 100%;
-  border-radius: 0.75rem;
-  border: 1px solid var(--md-border);
+  margin: 0;
 }
 
 .chat-markdown blockquote {

package/src/shared/components/__tests__/file-type-icon.test.tsx

@@ -0,0 +1,61 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { FileTypeIcon } from "@/shared/components/file-type-icon";
+
+function readIcon(container: HTMLElement, name: string): SVGElement {
+  const icon = container.querySelector<SVGElement>(
+    `[data-file-type-icon="${name}"]`,
+  );
+  expect(icon).not.toBeNull();
+  expect(icon?.innerHTML).not.toContain("undefined");
+  expect(icon?.childElementCount).toBeGreaterThan(0);
+  return icon!;
+}
+
+describe("FileTypeIcon", () => {
+  it("renders recognizable SVG icons for common file types", () => {
+    const { container } = render(
+      <>
+        <FileTypeIcon fileName="src/app.tsx" />
+        <FileTypeIcon fileName="scripts/setup.js" />
+        <FileTypeIcon fileName="docs/guide.md" />
+        <FileTypeIcon fileName="assets/hero.png" />
+        <FileTypeIcon fileName="reports/data.xlsx" />
+      </>,
+    );
+
+    expect(readIcon(container, "react-typescript").tagName).toBe("svg");
+    expect(readIcon(container, "javascript").tagName).toBe("svg");
+    expect(readIcon(container, "markdown").tagName).toBe("svg");
+    expect(readIcon(container, "image").tagName).toBe("svg");
+    expect(readIcon(container, "excel").tagName).toBe("svg");
+  });
+
+  it("recognizes editor-style special file names", () => {
+    const { container } = render(
+      <>
+        <FileTypeIcon fileName="package.json" />
+        <FileTypeIcon fileName="Dockerfile" />
+        <FileTypeIcon fileName=".env.local" />
+        <FileTypeIcon fileName="vitest.unit.config.ts" />
+        <FileTypeIcon fileName="PHOTO.JPEG" />
+      </>,
+    );
+
+    expect(readIcon(container, "npm")).toBeTruthy();
+    expect(readIcon(container, "docker")).toBeTruthy();
+    expect(readIcon(container, "dotenv")).toBeTruthy();
+    expect(readIcon(container, "vitest")).toBeTruthy();
+    expect(readIcon(container, "image")).toBeTruthy();
+  });
+
+  it("uses the neutral SVG fallback and compact size predictably", () => {
+    const { container } = render(
+      <FileTypeIcon fileName="artifact.customtype" size="compact" />,
+    );
+
+    const fallback = readIcon(container, "default");
+    expect(fallback.classList.contains("h-3.5")).toBe(true);
+    expect(fallback.getAttribute("aria-hidden")).toBe("true");
+  });
+});

package/src/shared/components/common/__tests__/brand-header.test.tsx

@@ -100,7 +100,7 @@ describe('BrandHeader', () => {
     expect(version).toBeTruthy();
     expect(screen.getAllByText('v0.18.11')).toHaveLength(1);
     await user.hover(version);
-    expect(await screen.findAllByText('v0.18.11')).toHaveLength(2);
+    expect((await screen.findByRole('tooltip')).textContent).toBe('v0.18.11');
     expect(screen.getByText('下载 50%')).toBeTruthy();
     expect(screen.queryByRole('button', { name: '更新' })).toBeNull();
   });
@@ -145,6 +145,7 @@ describe('BrandHeader', () => {
   });
 
   it('shows a warning icon with the blocked update reason instead of a visible failure label', async () => {
+    const user = userEvent.setup();
     useRuntimeUpdateStore.setState({
       supported: true,
       initialized: true,
@@ -180,13 +181,19 @@ describe('BrandHeader', () => {
     const issueIcon = screen.getByLabelText('更新被阻塞');
 
     expect(issueIcon.textContent).toBe('!');
-    expect(issueIcon.getAttribute('title')).toContain('更新被阻塞');
-    expect(issueIcon.getAttribute('title')).toContain('根因：缺少更新签名公钥，无法验证更新包来源');
-    expect(issueIcon.getAttribute('title')).toContain('Runtime bundle updates require a configured update public key.');
-    expect(issueIcon.getAttribute('title')).toContain('Set NEXTCLAW_UPDATE_BUNDLE_PUBLIC_KEY');
+    expect(issueIcon.hasAttribute('title')).toBe(false);
+
+    await user.hover(issueIcon);
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip.textContent).toContain('更新被阻塞');
+    expect(tooltip.textContent).toContain('根因：缺少更新签名公钥，无法验证更新包来源');
+    expect(tooltip.textContent).toContain('Runtime bundle updates require a configured update public key.');
+    expect(tooltip.textContent).toContain('Set NEXTCLAW_UPDATE_BUNDLE_PUBLIC_KEY');
   });
 
   it('uses the failed update wording only for failed snapshots', async () => {
+    const user = userEvent.setup();
     useRuntimeUpdateStore.setState({
       supported: true,
       initialized: true,
@@ -221,8 +228,11 @@ describe('BrandHeader', () => {
     const issueIcon = screen.getByLabelText('更新失败');
 
     expect(issueIcon.textContent).toBe('!');
-    expect(issueIcon.getAttribute('title')).toContain('更新失败');
-    expect(issueIcon.getAttribute('title')).toContain('runtime bundle sha256 mismatch');
+    await user.hover(issueIcon);
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip.textContent).toContain('更新失败');
+    expect(tooltip.textContent).toContain('runtime bundle sha256 mismatch');
     expect(screen.queryByText('更新被阻塞')).toBeNull();
   });
 });