@nextclaw/ui 0.26.5 → 0.27.1

package/index.html

@@ -17,7 +17,7 @@
     html,
     body,
     #root {
-      background: #ffffff;
+      background: #faf8f4;
     }
 
     html[data-theme="minimal"],
@@ -80,71 +80,20 @@
       background: #fefcf6;
     }
   </style>
-  <script>
-    (() => {
-      const storageKey = 'nextclaw.ui.theme';
-      const storedTheme = window.localStorage.getItem(storageKey);
-      const themeColors = {
-        natural: '#FAF9F7',
-        work: '#FFFFFF',
-        minimal: '#FFFFFF',
-        warm: '#FAF8F4',
-        cool: '#F8FAFC',
-        dawn: '#FAF7F4',
-        graphite: '#F8F8F7',
-        night: '#101318',
-        charcoal: '#1C1C1C',
-        island: '#FBF8ED',
-        probe: '#FEFCF6'
-      };
-      const themeAppearances = {
-        natural: 'light',
-        work: 'light',
-        minimal: 'light',
-        warm: 'light',
-        cool: 'light',
-        dawn: 'light',
-        graphite: 'light',
-        night: 'dark',
-        charcoal: 'dark',
-        island: 'light',
-        probe: 'light'
-      };
-      const legacyThemeAliases = {
-        leaf: 'warm'
-      };
-      const normalizedStoredTheme = typeof storedTheme === 'string' && Object.prototype.hasOwnProperty.call(legacyThemeAliases, storedTheme)
-        ? legacyThemeAliases[storedTheme]
-        : storedTheme;
-      const nextTheme = Object.prototype.hasOwnProperty.call(themeColors, normalizedStoredTheme)
-        ? normalizedStoredTheme
-        : 'work';
-      if (storedTheme !== nextTheme) {
-        window.localStorage.setItem(storageKey, nextTheme);
-      }
-      if (nextTheme === 'island') {
-        const islandBackgroundPreload = document.createElement('link');
-        islandBackgroundPreload.rel = 'preload';
-        islandBackgroundPreload.as = 'image';
-        islandBackgroundPreload.href = '/themes/island/island-atmosphere-7a037243.webp';
-        islandBackgroundPreload.fetchPriority = 'high';
-        document.head.appendChild(islandBackgroundPreload);
-      }
-      const themeColor = themeColors[nextTheme];
-      const themeAppearance = themeAppearances[nextTheme];
-      document.documentElement.setAttribute('data-theme', nextTheme);
-      document.documentElement.setAttribute('data-theme-appearance', themeAppearance);
-      document.documentElement.style.backgroundColor = themeColor;
-      document.documentElement.style.colorScheme = themeAppearance;
-      const themeMeta = document.querySelector('meta[name="theme-color"]');
-      if (themeMeta) {
-        themeMeta.setAttribute('content', themeColor);
-      }
-      const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
-      if (colorSchemeMeta) {
-        colorSchemeMeta.setAttribute('content', themeAppearance);
-      }
-    })();
+  <script type="module">
+    import { initializeTheme, resolveTheme } from '/src/shared/lib/theme/index.ts';
+    import { pwaShellThemeManager } from '/src/features/pwa/managers/pwa-shell-theme.manager.ts';
+
+    const theme = initializeTheme();
+    pwaShellThemeManager.syncTheme(theme);
+    if (resolveTheme(theme) === 'island') {
+      const preload = document.createElement('link');
+      preload.rel = 'preload';
+      preload.as = 'image';
+      preload.href = '/themes/island/island-atmosphere-7a037243.webp';
+      preload.fetchPriority = 'high';
+      document.head.appendChild(preload);
+    }
   </script>
   <script>
     (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.26.5",
+  "version": "0.27.1",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -35,13 +35,13 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/client-sdk": "0.12.9",
+    "@nextclaw/agent-chat-ui": "0.12.2",
     "@nextclaw/ncp": "0.11.2",
-    "@nextclaw/agent-chat-ui": "0.12.0",
-    "@nextclaw/ncp-http-agent-client": "0.4.25",
+    "@nextclaw/client-sdk": "0.12.11",
+    "@nextclaw/ncp-http-agent-client": "0.4.26",
     "@nextclaw/ncp-react": "0.5.30",
     "@nextclaw/ncp-toolkit": "0.6.27",
-    "@nextclaw/shared": "0.8.2"
+    "@nextclaw/shared": "0.8.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/app/styles/design-system.css

@@ -65,6 +65,8 @@
 
       /* Foreground (Text) */
       --foreground: var(--gray-800);
+      --welcome-title-foreground: var(--foreground);
+      --welcome-title-weight: 600;
       --foreground-secondary: var(--gray-700);
       --foreground-tertiary: var(--gray-500);
       --foreground-muted: var(--gray-400);
@@ -94,6 +96,13 @@
       --sidebar-interaction-hover: hsl(var(--gray-200) / 0.6);
       --sidebar-interaction-selection: hsl(var(--gray-200) / 0.8);
       --sidebar-segment-selection: hsl(var(--gray-200) / 0.7);
+      --sidebar-create-background: hsl(var(--primary) / 0.1);
+      --sidebar-create-hover: hsl(var(--primary) / 0.15);
+      --sidebar-create-foreground: hsl(var(--primary));
+      --sidebar-create-hover-foreground: hsl(var(--accent-foreground));
+      --sidebar-create-radius: 0.5rem;
+      --sidebar-create-weight: 500;
+      --sidebar-create-shadow: none;
       /* Mobile conversation rows retain their separate paper surface. */
       --session-interaction-hover: hsl(var(--background) / 0.65);
       --session-interaction-selection: hsl(var(--background) / 0.9);
@@ -394,7 +403,9 @@
 }
 
 @layer base {
-   :root[data-theme="warm"] {
+   :root[data-theme="warm"],
+   :root[data-theme="plain-paper"],
+   :root[data-theme="paper-ink"] {
       /* ========================================
        BRAND COLORS (Paper Taupe)
        ======================================== */
@@ -466,6 +477,79 @@
 }
 
 @layer base {
+   :root[data-theme="paper-ink"] {
+      /* Warm paper and olive ink with restrained contrast. */
+      --brand-50: 70 15% 95%;
+      --brand-100: 75 13% 90%;
+      --brand-200: 85 12% 80%;
+      --brand-300: 100 10% 65%;
+      --brand-400: 88 13% 44%;
+      --brand-500: 86 14% 32%;
+      --brand-600: 86 15% 27%;
+      --brand-700: 86 15% 22%;
+      --brand-800: 86 13% 16%;
+      --brand-900: 86 11% 10%;
+      --primary-foreground: 42 35% 94%;
+      --welcome-title-foreground: 105 4% 32%;
+      --welcome-title-weight: 500;
+      --gray-700: 45 8% 27%;
+      --gray-800: 45 9% 18%;
+      --gray-900: 45 10% 11%;
+      --accent: 70 12% 90%;
+      --link-foreground: 86 16% 29%;
+      --link-foreground-hover: 86 16% 23%;
+      --sidebar-create-background: hsl(38 27% 90%);
+      --sidebar-create-hover: hsl(38 25% 87%);
+      --sidebar-create-foreground: hsl(var(--brand-500));
+      --sidebar-create-hover-foreground: hsl(var(--brand-600));
+      --sidebar-create-radius: 0.5rem;
+      --sidebar-create-weight: 400;
+      --sidebar-create-shadow: none;
+   }
+
+   :root[data-theme="paper-ink"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--brand-500));
+      border-color: transparent;
+      color: hsl(var(--primary-foreground));
+   }
+
+   :root[data-theme="plain-paper"] {
+      /* Paper, tea-gray washes and soft graphite: one warm neutral family. */
+      --brand-50: 38 25% 95%;
+      --brand-100: 36 22% 91%;
+      --brand-200: 34 17% 83%;
+      --brand-300: 32 12% 70%;
+      --brand-400: 30 8% 51%;
+      --brand-500: 28 7% 35%;
+      --brand-600: 28 8% 29%;
+      --brand-700: 28 8% 24%;
+      --brand-800: 28 7% 18%;
+      --brand-900: 28 6% 12%;
+      --gray-700: 30 6% 28%;
+      --gray-800: 30 5% 22%;
+      --gray-900: 30 5% 14%;
+      --primary-foreground: 40 38% 97%;
+      --welcome-title-foreground: 30 5% 33%;
+      --welcome-title-weight: 500;
+      --accent: 36 20% 91%;
+      --border: 35 18% 86%;
+      --card-border: var(--border);
+      --input-border: var(--border);
+      --link-foreground: 28 18% 34%;
+      --link-foreground-hover: 28 18% 26%;
+      --sidebar-create-background: hsl(36 22% 90%);
+      --sidebar-create-hover: hsl(36 20% 87%);
+      --sidebar-create-foreground: hsl(var(--brand-600));
+      --sidebar-create-hover-foreground: hsl(var(--brand-700));
+      --sidebar-create-weight: 400;
+   }
+
+   :root[data-theme="plain-paper"] .nextclaw-chat-message-user {
+      background-color: hsl(var(--brand-100));
+      border-color: transparent;
+      color: hsl(var(--foreground));
+   }
+
    :root[data-theme="cool"] {
       /* ========================================
        BRAND COLORS (Mist Blue)

package/src/app/styles/island-theme.css

@@ -304,7 +304,7 @@
 
   :root[data-theme="island"]
     [data-theme-surface="doc-browser"]
-    .doc-browser-tab-scrollbar {
+    .compact-tab-scrollbar {
     background-color: transparent;
   }
 
@@ -446,20 +446,22 @@
   :root[data-theme="island"]
     :is(
       .custom-scrollbar,
-      .workspace-horizontal-scrollbar,
-      .doc-browser-tab-scrollbar
+      .workspace-horizontal-scrollbar
     ) {
     scrollbar-color: hsl(var(--brand-400) / 0.35) transparent;
   }
 
   :root[data-theme="island"] .custom-scrollbar::-webkit-scrollbar-thumb,
   :root[data-theme="island"]
-    .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb,
-  :root[data-theme="island"]
-    .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb {
+    .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb {
     background: hsl(var(--brand-400) / 0.3);
   }
 
+  :root[data-theme="island"] .compact-tab-scrollbar {
+    --tab-scrollbar-thumb: hsl(var(--brand-400) / 0.3);
+    --tab-scrollbar-thumb-hover: hsl(var(--brand-400) / 0.4);
+  }
+
   @media (max-width: 760px) {
     :root[data-theme="island"] [data-theme-surface="app-shell"] {
       background-image: none;

package/src/features/agents/components/__tests__/agents-page.test.tsx

@@ -10,6 +10,7 @@ import {
 import { setLanguage } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
+  openResource: vi.fn(),
   createAgent: vi.fn(),
   updateAgent: vi.fn(),
   deleteAgent: vi.fn(),
@@ -99,6 +100,7 @@ const mocks = vi.hoisted(() => ({
     },
   },
 }));
+vi.mock("@/app/components/app-presenter-provider", () => ({ useAppPresenter: () => ({ pageResourceManager: { open: mocks.openResource } }) }));
 const persistStorage = new Map<string, unknown>();
 
 function createPersistStorage() {
@@ -290,18 +292,19 @@ describe("AgentsPage", () => {
   it("separates read-only details from editing and keeps advanced config collapsed until requested", async () => {
     const user = userEvent.setup();
 
-    renderAgentsPage();
+    const view = renderAgentsPage();
 
     await user.click(screen.getAllByRole("button", { name: "更多操作" })[1]);
     await user.click(screen.getByRole("button", { name: "查看详情" }));
+    expect(mocks.openResource).toHaveBeenCalled();
+    view.rerender(<MemoryRouter><AgentsPage resourceId="researcher" /></MemoryRouter>);
 
     expect(screen.getByText("身份")).toBeTruthy();
     expect(screen.getByText("上下文窗口大小")).toBeTruthy();
     expect(screen.getByText("128,000")).toBeTruthy();
     expect(screen.queryByRole("button", { name: "保存编辑" })).toBeNull();
-    const detailsDialog = screen.getByText("身份").closest("[role='dialog']");
-    expect(detailsDialog?.className).toContain("sm:max-w-2xl");
-    expect(detailsDialog?.className).toContain("bg-popover");
+    const detailsDialog = screen.getByTestId("agent-detail");
+    expect(screen.queryByRole("dialog")).toBeNull();
     const detailLists = Array.from(detailsDialog?.querySelectorAll("dl") ?? []);
     expect(detailLists.length).toBeGreaterThan(0);
     expect(
@@ -327,7 +330,7 @@ describe("AgentsPage", () => {
         (term) => {
           const item = term.parentElement;
           return Boolean(
-            item?.className.includes("grid-cols-[10rem_minmax(0,1fr)]") &&
+            item?.className.includes("grid-cols-[minmax(0,30%)_minmax(0,1fr)]") &&
               !item.className.includes("space-y"),
           );
         },

package/src/features/agents/components/agent-details-dialog.tsx

@@ -20,6 +20,8 @@ import { Bot, Brain, Gauge, Pencil, Sparkles, type LucideIcon } from "lucide-rea
 type AgentDefaultsView = ConfigView["agents"]["defaults"];
 
 type AgentDetailsDialogProps = {
+  embedded?: boolean;
+  onChat?: (agent: AgentProfileView) => void;
   agent: AgentProfileView | null;
   defaults?: AgentDefaultsView;
   runtimeOptions: { value: string; label: string }[];
@@ -32,6 +34,8 @@ type AgentDetailsDialogProps = {
 const numberFormatter = new Intl.NumberFormat();
 
 export function AgentDetailsDialog({
+  embedded = false,
+  onChat,
   agent,
   defaults,
   runtimeOptions,
@@ -70,12 +74,15 @@ export function AgentDetailsDialog({
   );
   const models = resolveRecordValue(agent.models, defaults?.models);
 
-  return (
-    <Dialog open={agent !== null} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">
+  const content = (
+    <>
         <div className="shrink-0 px-5 pb-3 pt-5">
-          <DialogHeader className="text-left">
-            <div className="flex min-w-0 items-center gap-3 pr-7">
+          <DialogHeader
+            showClose={!embedded}
+            className="items-center"
+            actions={<PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />}
+          >
+            <div className="flex min-w-0 items-center gap-3">
               <AgentAvatar
                 agentId={agent.id}
                 displayName={agent.displayName}
@@ -90,7 +97,6 @@ export function AgentDetailsDialog({
                   @{agent.id}
                 </DialogDescription>
               </div>
-              <PageResourceActionsMenu page={pageResourceFromSystemObject('agent', agent.id, agent.displayName || agent.id)} />
             </div>
           </DialogHeader>
         </div>
@@ -111,13 +117,11 @@ export function AgentDetailsDialog({
             <DetailItem
               label={t("agentsDetailsFieldDescription")}
               value={agent.description?.trim() || t("agentsDetailsEmptyValue")}
-              wide
             />
             <DetailItem
               label={t("agentsDetailsFieldWorkspace")}
               value={agent.workspace ?? t("agentsDetailsUnsetValue")}
               mono
-              wide
             />
           </DetailSection>
 
@@ -184,13 +188,14 @@ export function AgentDetailsDialog({
           </DetailSection>
         </div>
         <DialogFooter className="shrink-0 px-5 pb-4 pt-2">
-          <Button
+          {!embedded && <Button
             type="button"
             variant="ghost"
             onClick={() => onOpenChange(false)}
           >
             {t("cancel")}
-          </Button>
+          </Button>}
+          {onChat && <Button onClick={() => onChat(agent)}>{t("agentsCardStartChat")}</Button>}
           <Button
             type="button"
             variant="primary"
@@ -201,9 +206,13 @@ export function AgentDetailsDialog({
             {t("agentsDetailsEditAction")}
           </Button>
         </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    </>
   );
+  return <Dialog open={!embedded && agent !== null} onOpenChange={onOpenChange}>
+    {embedded ? <div className="flex h-full min-h-0 flex-col" data-testid="agent-detail">{content}</div> : (
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-popover p-0 sm:max-h-[720px] sm:max-w-2xl">{content}</DialogContent>
+    )}
+  </Dialog>;
 }
 
 type DetailSource = "default" | "override";
@@ -320,7 +329,7 @@ function DetailSection(props: {
         <Icon className="h-3.5 w-3.5 text-muted-foreground" />
         {title}
       </h3>
-      <dl className="grid min-w-0 gap-x-6 gap-y-2.5 pl-5 sm:grid-cols-2">
+      <dl className="grid min-w-0 gap-y-2.5 pl-5">
         {children}
       </dl>
     </section>
@@ -333,7 +342,6 @@ function DetailItem(props: {
   source?: DetailSource;
   mono?: boolean;
   prewrap?: boolean;
-  wide?: boolean;
 }) {
   const {
     label,
@@ -341,7 +349,6 @@ function DetailItem(props: {
     source,
     mono = false,
     prewrap = false,
-    wide = false,
   } = props;
 
   const isStructuredValue = prewrap && value.trim().startsWith("{");
@@ -350,12 +357,11 @@ function DetailItem(props: {
   return (
     <div
       className={cn(
-        "grid min-w-0 grid-cols-1 sm:grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-1",
-        (wide || isStructuredValue) && "sm:col-span-2",
+        "grid min-w-0 grid-cols-[minmax(0,30%)_minmax(0,1fr)] items-baseline gap-x-3 gap-y-1",
       )}
     >
       <dt className="flex min-w-0 items-baseline leading-5">
-        <span className="whitespace-nowrap text-xs font-medium text-muted-foreground">
+        <span className="text-xs font-medium text-muted-foreground">
           {label}
         </span>
       </dt>

package/src/features/agents/components/agents-page.tsx

@@ -48,6 +48,8 @@ import {
   Trash2,
 } from "lucide-react";
 import { toast } from "sonner";
+import { useAppPresenter } from "@/app/components/app-presenter-provider";
+import { useNavigate } from "react-router-dom";
 
 const AGENT_CREATION_PROMPT =
   "请直接创建一个默认示例 Agent，不要问我问题。创建完成后，简单告诉我它能做什么。";
@@ -200,19 +202,19 @@ function AgentListCard(props: {
               <AgentActionMenuItem
                 icon={Eye}
                 label={t("agentsViewDetailsAction")}
-                onClick={onView}
+                onClick={() => { setMenuOpen(false); onView(); }}
               />
               <AgentActionMenuItem
                 icon={Pencil}
                 label={t("agentsEditAction")}
-                onClick={onEdit}
+                onClick={() => { setMenuOpen(false); onEdit(); }}
                 disabled={updatePending}
               />
               {!agent.builtIn ? (
                 <AgentActionMenuItem
                   icon={Trash2}
                   label={t("agentsRemoveAction")}
-                  onClick={onDelete}
+                  onClick={() => { setMenuOpen(false); onDelete(); }}
                   disabled={deletePending}
                   destructive
                 />
@@ -245,7 +247,9 @@ function AgentListCard(props: {
   );
 }
 
-export function AgentsPage() {
+export function AgentsPage({ resourceId }: { resourceId?: string } = {}) {
+  const app = useAppPresenter();
+  const navigate = useNavigate();
   const presenter = usePresenter();
   const agentsQuery = useAgents();
   const configQuery = useConfig();
@@ -254,9 +258,6 @@ export function AgentsPage() {
   const sessionTypesQuery = useNcpChatSessionTypes();
   const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
-  const [viewingAgent, setViewingAgent] = useState<AgentProfileView | null>(
-    null,
-  );
   const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(
     null,
   );
@@ -300,7 +301,7 @@ export function AgentsPage() {
   const agentDefaults = configQuery.data?.agents.defaults;
 
   const handleStartView = (agent: AgentProfileView) => {
-    setViewingAgent(agent);
+    app.pageResourceManager.open(pageResourceFromSystemObject("agent", agent.id, agent.displayName || agent.id), "default", navigate);
   };
 
   const handleStartEdit = (agent: AgentProfileView) => {
@@ -340,6 +341,23 @@ export function AgentsPage() {
     );
   };
 
+  const editDialog = <AgentEditDialog
+    agent={editingAgent} pending={updateAgent.isPending} providerCatalog={providerCatalog}
+    runtimeOptions={runtimeOptions} defaultRuntime={defaultRuntime}
+    onOpenChange={(open) => { if (!open && !updateAgent.isPending) setEditingAgent(null); }}
+    onSubmit={handleUpdate} />;
+  if (resourceId) {
+    const agent = agents.find((item) => item.id === resourceId) ?? null;
+    if (agentsQuery.isPending) return <p role="status" className="p-4">{t("loading")}</p>;
+    if (agentsQuery.isError) return <div className="p-4"><p role="alert">{t("resourceLoadFailed")}</p><button onClick={() => void agentsQuery.refetch()}>{t("resourceRetry")}</button></div>;
+    if (!agent) return <p role="alert" className="p-4">{t(agentsQuery.isError ? "resourceLoadFailed" : "resourceNotFound")}</p>;
+    return <>
+      <AgentDetailsDialog embedded agent={agent} defaults={agentDefaults} runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime} defaultRuntimeLabel={defaultRuntimeLabel}
+        onOpenChange={() => {}} onEdit={handleStartEdit} onChat={startChatWithAgent} />
+      {editDialog}
+    </>;
+  }
   return (
     <PageLayout className="space-y-6">
       <PageHeader
@@ -408,36 +426,7 @@ export function AgentsPage() {
         )}
       </div>
 
-      <AgentDetailsDialog
-        agent={viewingAgent}
-        defaults={agentDefaults}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        defaultRuntimeLabel={defaultRuntimeLabel}
-        onOpenChange={(open) => {
-          if (!open) {
-            setViewingAgent(null);
-          }
-        }}
-        onEdit={(agent) => {
-          setViewingAgent(null);
-          setEditingAgent(agent);
-        }}
-      />
-
-      <AgentEditDialog
-        agent={editingAgent}
-        pending={updateAgent.isPending}
-        providerCatalog={providerCatalog}
-        runtimeOptions={runtimeOptions}
-        defaultRuntime={defaultRuntime}
-        onOpenChange={(open) => {
-          if (!open && !updateAgent.isPending) {
-            setEditingAgent(null);
-          }
-        }}
-        onSubmit={handleUpdate}
-      />
+      {editDialog}
     </PageLayout>
   );
 }

package/src/features/app-data/components/app-retained-data-section.tsx

@@ -12,7 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/shared/components/ui/dialog';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { SkeletonContent } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppRetainedDataSection({
@@ -57,7 +57,7 @@ export function AppRetainedDataSection({
           {t('appDataRetainedDescription')}
         </p>
       </div>
-      {isLoading ? <Skeleton className="h-28 w-full rounded-xl" /> : null}
+      {isLoading ? <div role="status" aria-label={t('appPackagesLoading')}><SkeletonContent /></div> : null}
       {error ? (
         <div role="alert" className="rounded-xl border border-destructive/20 bg-destructive/5 px-3 py-2.5 text-xs text-destructive">
           {error instanceof Error ? error.message : t('appDataLoadFailed')}
@@ -113,13 +113,13 @@ export function AppRetainedDataSection({
 
       <Dialog open={Boolean(selected)} onOpenChange={(open) => !open && closeDialog()}>
         <DialogContent
-          className="max-w-md [&>:last-child]:hidden"
+          className="max-w-md"
           onEscapeKeyDown={(event) => deletion.isPending && event.preventDefault()}
           onInteractOutside={(event) => deletion.isPending && event.preventDefault()}
         >
           {selected ? (
             <>
-              <DialogHeader>
+              <DialogHeader showClose={false}>
                 <DialogTitle>{t('appDataDeleteTitle')}</DialogTitle>
                 <DialogDescription>{t('appDataDeleteDescription')}</DialogDescription>
               </DialogHeader>

package/src/features/apps/components/__tests__/app-marketplace-catalog.test.tsx

@@ -92,7 +92,7 @@ describe('AppMarketplaceCatalog compatibility actions', () => {
     expect(onSelect).toHaveBeenCalledWith('rust-todo');
   });
 
-  it('does not project a persisted terminal failure back into a compatible card', () => {
+  it('shows the latest failure while allowing a compatible app to be installed again', () => {
     setLanguage('zh');
     const onInstall = vi.fn();
 
@@ -147,7 +147,7 @@ describe('AppMarketplaceCatalog compatibility actions', () => {
       </TooltipProvider>,
     );
 
-    expect(screen.queryByText('persisted registry failure')).toBeNull();
+    expect(screen.getByRole('alert').textContent).toBe('persisted registry failure');
     expect(screen.queryByRole('button', { name: '重试' })).toBeNull();
     const installButton = screen.getByRole('button', { name: '安装应用' });
     expect((installButton as HTMLButtonElement).disabled).toBe(false);