@nextclaw/ui 0.26.4 → 0.27.0

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -12,12 +12,12 @@ describe('PwaShellThemeManager', () => {
     document.body.style.backgroundColor = '';
   });
 
-  it('applies default work shell colors when no theme is selected', () => {
+  it('applies plain paper shell colors when no theme is selected', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
-    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
   });
 
   it('applies natural shell colors explicitly', () => {

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -2,10 +2,13 @@ import {
   DEFAULT_UI_THEME,
   getThemeAppearance,
   normalizeTheme,
+  resolveTheme,
   type UiTheme,
 } from '@/shared/lib/theme';
 
-const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
+const PWA_SHELL_THEME_COLORS: Record<Exclude<UiTheme, 'default'>, string> = {
+  'paper-ink': '#FAF8F4',
+  'plain-paper': '#FAF8F4',
   natural: '#FAF9F7',
   work: '#FFFFFF',
   minimal: '#FFFFFF',
@@ -25,10 +28,12 @@ export class PwaShellThemeManager {
       return;
     }
 
-    const themeColor = PWA_SHELL_THEME_COLORS[theme];
+    const themeColor = PWA_SHELL_THEME_COLORS[resolveTheme(theme)];
     this.updateThemeMeta(themeColor);
     this.updateSurfaceBackgrounds(themeColor);
-    document.documentElement.style.colorScheme = getThemeAppearance(theme);
+    const appearance = getThemeAppearance(theme);
+    document.documentElement.style.colorScheme = appearance;
+    document.querySelector('meta[name="color-scheme"]')?.setAttribute('content', appearance);
   };
 
   syncCurrentTheme = () => {

package/src/features/right-panel-resources/components/__tests__/page-resource-icon.test.tsx

@@ -44,9 +44,9 @@ describe("resource icon precedence", () => {
     );
     expect(view.container.textContent).toBe("✎");
     view.rerender(<PageResourceIcon uri="https://example.com" />);
-    expect(view.container.querySelector(".lucide-globe")).not.toBeNull();
+    expect(view.container.childElementCount).toBe(0);
     view.rerender(<PageResourceIcon uri="nextclaw://unknown/item" />);
-    expect(view.container.querySelector(".lucide-link2")).not.toBeNull();
+    expect(view.container.childElementCount).toBe(0);
   });
   it("uses Panel object identity for its installed icon and falls back to the application icon", () => {
     const view = render(<PageResourceIcon uri="nextclaw://objects/panel-app/source%3Anotes" />);
@@ -64,4 +64,15 @@ describe("resource icon precedence", () => {
     );
     expect(view.container.querySelector(".lucide-github")).not.toBeNull();
   });
+  it.each([
+    "/workspace/frontmatter-test.md",
+    "./frontmatter-test.md",
+    "frontmatter-test.md:12:3",
+    "file:///workspace/frontmatter-test.md#L12",
+    "nextclaw://workspace-file?path=%2Fworkspace%2Ffrontmatter-test.md",
+  ])("shows Markdown identity for %s", (uri) => {
+    const view = render(<PageResourceIcon uri={uri} />);
+    expect(view.container.querySelector('[data-file-type-icon="markdown"]')).not.toBeNull();
+    expect(view.container.querySelector('.lucide-link2')).toBeNull();
+  });
 });

package/src/features/right-panel-resources/components/page-resource-icon.tsx

@@ -22,7 +22,6 @@ import {
   Github,
   Globe,
   LayoutDashboard,
-  Link2,
   MessageSquare,
   PanelsTopLeft,
   Plus,
@@ -44,7 +43,7 @@ const RESOURCE_ICONS = {
   app: AppWindow,
   docs: BookOpen,
   website: Globe,
-  generic: Link2,
+  generic: null,
   page: PanelsTopLeft,
   overview: LayoutDashboard,
   "child-sessions": GitBranch,
@@ -94,7 +93,8 @@ function resourceTypeIcon(
   if (
     uri.startsWith("nextclaw://workspace-file") ||
     uri.startsWith("file:") ||
-    uri.startsWith("nextclaw://file/")
+    uri.startsWith("nextclaw://file/") ||
+    (!/^[a-z][a-z0-9+.-]*:/i.test(uri.replace(/:\d+(?::\d+)?$/, "")) && /\.[a-z0-9]{1,16}(?::\d+(?::\d+)?)?(?:[?#]|$)/i.test(uri))
   )
     return "file";
   if (
@@ -104,7 +104,7 @@ function resourceTypeIcon(
   )
     return "app";
   if (uri.startsWith("nextclaw://docs")) return "docs";
-  return /^https?:/.test(uri) ? "website" : "generic";
+  return "generic";
 }
 
 function appIcon(value?: string): DocBrowserDockIcon | undefined {
@@ -222,20 +222,28 @@ function ResourceIcon({
         {specific.value}
       </span>
     );
-  let pathname = uri;
+  let pathname = uri.replace(/:\d+(?::\d+)?$/, "");
   try {
-    pathname = new URL(uri).searchParams.get("path") ?? new URL(uri).pathname;
+    const url = new URL(pathname);
+    pathname = url.searchParams.get("path") ?? url.pathname;
   } catch {
     /* Local file link. */
   }
+  pathname = pathname.split(/[?#]/, 1)[0].replace(/:\d+(?::\d+)?$/, "");
+  try {
+    pathname = decodeURIComponent(pathname);
+  } catch {
+    /* Keep malformed percent escapes as literal file name characters. */
+  }
   if (
     resourceTypeIcon(uri, appId) === "file" &&
-    /\.[a-z0-9]{1,8}(?:[?#]|$)/i.test(pathname)
+    /\.[a-z0-9]{1,16}$/i.test(pathname)
   )
     return <FileTypeIcon fileName={pathname} size="compact" />;
   const Icon =
     (specific?.type === "builtin" && BUILTIN_ICONS[specific.name]) ||
     RESOURCE_ICONS[resourceTypeIcon(uri, appId)];
+  if (!Icon) return null;
   return (
     <Icon
       aria-hidden="true"

package/src/features/right-panel-resources/configs/right-panel-resource-routes.config.ts

@@ -198,7 +198,7 @@ export const RIGHT_PANEL_RESOURCE_ROUTE_DEFINITIONS: RightPanelResourceRouteDefi
         historyPolicy: 'managed',
         kind: RIGHT_PANEL_APPS_TAB_KIND,
         resourceUri: url,
-        title: url === RIGHT_PANEL_APPS_URL ? t('appsTitle') : t('serviceAppsTitle'),
+        title: t('appsTitle'),
         url,
       };
     },

package/src/features/right-panel-resources/index.ts

@@ -1,4 +1,7 @@
 export {
+  createRightPanelAppsUrl,
+  getRightPanelAppsTabFromUrl,
+  type RightPanelAppsTab,
   createChatUiResourceReferenceFromTab,
   createPanelAppContentPath,
   createPanelAppResourceUri,

package/src/features/right-panel-resources/utils/__tests__/right-panel-resource-route-resolver.utils.test.ts

@@ -2,6 +2,11 @@ import { describe, expect, it } from 'vitest';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 
 describe('RightPanelResourceRouteResolver', () => {
+  it('preserves the app marketplace through resource normalization', () => {
+    expect(new RightPanelResourceRouteResolver().resolve('nextclaw://apps?tab=marketplace')).toMatchObject({
+      kind: 'apps', dedupeKey: 'apps', url: 'nextclaw://apps?tab=marketplace', resourceUri: 'nextclaw://apps?tab=marketplace',
+    });
+  });
   it.each(['cron-job', 'inbox-delivery', 'skill', 'agent', 'project'])('resolves %s as an object, not an unsupported website', (type) => {
     const uri = 'nextclaw://objects/' + type + '/' + encodeURIComponent('workspace:项目/对象');
     expect(new RightPanelResourceRouteResolver().resolve(uri)).toMatchObject({ kind: 'system-object', url: uri, resourceUri: uri });

package/src/features/right-panel-resources/utils/right-panel-resource-uri.utils.ts

@@ -42,15 +42,16 @@ export function createChatUiResourceReferenceFromTab(
   });
 }
 
-export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps';
+export type RightPanelAppsTab = 'apps' | 'panel-apps' | 'service-apps' | 'marketplace';
 
 const DEFAULT_RIGHT_PANEL_APPS_TAB: RightPanelAppsTab = 'apps';
 
 function isRightPanelAppsTab(value: unknown): value is RightPanelAppsTab {
-  return value === 'apps' || value === 'panel-apps' || value === 'service-apps';
+  return value === 'apps' || value === 'panel-apps' || value === 'service-apps' || value === 'marketplace';
 }
 
 export function createRightPanelAppsUrl(tab: RightPanelAppsTab = DEFAULT_RIGHT_PANEL_APPS_TAB): string {
+  if (tab === 'marketplace') return `${RIGHT_PANEL_APPS_URL}?tab=marketplace`;
   if (tab === 'panel-apps') return RIGHT_PANEL_PANEL_APPS_URL;
   if (tab === 'service-apps') return RIGHT_PANEL_SERVICE_APPS_URL;
   return RIGHT_PANEL_APPS_URL;

package/src/features/service-apps/components/service-action-row.tsx

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { useState } from "react";
 import type {
   AgentProfileView,
@@ -73,7 +74,7 @@ export function ServiceActionRow({
                 <ShieldPlus className="h-3.5 w-3.5" />
               </button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-56 rounded-xl p-1.5">
+            <PopoverContent align="end" variant="menu">
               <div className="px-2 py-1.5 text-[11px] font-medium text-muted-foreground">
                 {t("serviceAppsGrantToAgent")}
               </div>
@@ -85,9 +86,9 @@ export function ServiceActionRow({
                     onGrantAgent(action.id, agent.id);
                     setAgentMenuOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}
                 >
-                  <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                  <Bot className="h-4 w-4 shrink-0 text-muted-foreground" />
                   <span className="min-w-0 truncate">
                     {agent.displayName?.trim() || agent.id}
                   </span>

package/src/features/service-apps/components/service-app-delete-dialog.tsx

@@ -51,11 +51,11 @@ export function ServiceAppDeleteDialog({
       onOpenChange={(nextOpen) => !deletePending && onOpenChange(nextOpen)}
     >
       <DialogContent
-        className="max-w-md [&>:last-child]:hidden"
+        className="max-w-md"
         onEscapeKeyDown={(event) => deletePending && event.preventDefault()}
         onInteractOutside={(event) => deletePending && event.preventDefault()}
       >
-        <DialogHeader>
+        <DialogHeader showClose={false}>
           <DialogTitle>{t("serviceAppsDeleteConfirmTitle")}</DialogTitle>
           <DialogDescription>
             {t("serviceAppsDeleteConfirmDescription")} {appTitle}

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { PageResourceActionItems } from "@/features/right-panel-resources";
 import { pageResourceFromSystemObject } from "@/features/right-panel-resources";
 import { useState } from "react";
@@ -380,15 +381,15 @@ function ServiceAppMenuItem({
     <button
       type="button"
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50",
+        ACTION_MENU_ITEM_CLASS,
         destructive
-          ? "text-destructive hover:bg-destructive/10"
-          : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
+          ? ACTION_FEEDBACK.destructive
+          : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
       disabled={disabled}
       onClick={onClick}
     >
-      <Icon className="h-4 w-4 shrink-0" />
+      <Icon className={cn("h-4 w-4 shrink-0", !destructive && "text-muted-foreground")} />
       <span>{label}</span>
     </button>
   );

package/src/features/settings/components/config/provider-model-suggestions-panel.tsx

@@ -101,7 +101,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
               />
             </div>
           ) : null}
-          <div className='custom-scrollbar max-h-44 overflow-y-auto overscroll-contain'>
+          <div className='custom-scrollbar max-h-44 overflow-y-auto'>
             {visibleModels.map((modelName) => (
               <label
                 key={modelName}

package/src/features/settings/pages/providers-config-page.tsx

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { useMemo, useState } from 'react';
 import { KeyRound, MoreVertical, Plus, Search, Trash2 } from 'lucide-react';
 import {
@@ -307,10 +308,10 @@ export function ProvidersConfigPage() {
                             <MoreVertical className='h-4 w-4' />
                           </button>
                         </PopoverTrigger>
-                        <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>
+                        <PopoverContent variant='menu' align='end' onClick={(event) => event.stopPropagation()}>
                           <button
                             type='button'
-                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-destructive/10'
+                            className={`${ACTION_MENU_ITEM_CLASS} ${ACTION_FEEDBACK.destructive}`}
                             onClick={() => setProviderToDelete(provider.providerId)}
                           >
                             <Trash2 className='h-4 w-4' />

package/src/index.css

@@ -93,27 +93,35 @@
     background: hsl(var(--gray-400) / 0.48);
   }
 
-  .doc-browser-tab-scrollbar {
+  .compact-tab-scrollbar {
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--gray-300) / 0.34) transparent;
+    scrollbar-color: var(--tab-scrollbar-thumb, hsl(var(--gray-300) / 0.34)) transparent;
   }
 
-  .doc-browser-tab-scrollbar::-webkit-scrollbar {
+  /* Native thin scrollbars override pixel sizes and may expand on hover. */
+  @supports selector(::-webkit-scrollbar) {
+    .compact-tab-scrollbar {
+      scrollbar-width: auto;
+      scrollbar-color: auto;
+    }
+  }
+
+  .compact-tab-scrollbar::-webkit-scrollbar {
     width: 2px;
     height: 2px;
   }
 
-  .doc-browser-tab-scrollbar::-webkit-scrollbar-track {
+  .compact-tab-scrollbar::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--gray-300) / 0.34);
+  .compact-tab-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--tab-scrollbar-thumb, hsl(var(--gray-300) / 0.34));
     border-radius: 999px;
   }
 
-  .doc-browser-tab-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--gray-400) / 0.44);
+  .compact-tab-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--tab-scrollbar-thumb-hover, hsl(var(--gray-400) / 0.44));
   }
 
   /* ========================================
@@ -680,6 +688,32 @@
   --md-table-head-bg: rgba(191, 219, 254, 0.16);
 }
 
+:root[data-theme="paper-ink"] .chat-markdown-user {
+  --md-text: hsl(var(--primary-foreground));
+  --md-muted: hsl(42 20% 80%);
+  --md-border: hsl(42 20% 80% / 0.24);
+  --md-link: hsl(45 42% 84%);
+  --md-inline-code-bg: hsl(45 20% 90% / 0.1);
+  --md-inline-code-color: hsl(var(--primary-foreground));
+  --md-blockquote-border: hsl(45 30% 80% / 0.5);
+  --md-blockquote-bg: hsl(45 20% 90% / 0.06);
+  --md-table-head-bg: hsl(45 20% 90% / 0.08);
+}
+
+:root[data-theme="plain-paper"] .chat-markdown-user,
+:root[data-theme="plain-paper"] .chat-markdown-assistant,
+:root[data-theme="paper-ink"] .chat-markdown-assistant {
+  --md-text: hsl(var(--foreground));
+  --md-muted: hsl(var(--gray-600));
+  --md-border: hsl(var(--border));
+  --md-link: hsl(var(--link-foreground));
+  --md-inline-code-bg: hsl(var(--gray-200) / 0.5);
+  --md-inline-code-color: hsl(var(--gray-800));
+  --md-blockquote-border: hsl(var(--brand-400) / 0.5);
+  --md-blockquote-bg: hsl(var(--brand-100) / 0.4);
+  --md-table-head-bg: hsl(var(--gray-200) / 0.4);
+}
+
 :root[data-theme="work"] .chat-markdown-assistant {
   --md-link: #1f73c9;
   --md-border: rgba(0, 0, 0, 0.11);

package/src/platforms/mobile/components/__tests__/mobile-app-shell.test.tsx

@@ -31,6 +31,15 @@ function renderShell(pathname: string) {
 }
 
 describe("MobileAppShell", () => {
+  it("lets inbox details own their reading chrome and restores navigation on the list", () => {
+    const detail = renderShell("/inbox/report-1");
+    expect(screen.queryByTestId("mobile-bottom-nav")).toBeNull();
+    expect(screen.queryByTestId("mobile-topbar")).toBeNull();
+    detail.unmount();
+    renderShell("/inbox");
+    expect(screen.getByTestId("mobile-bottom-nav")).toBeTruthy();
+    expect(screen.getByTestId("mobile-topbar")).toBeTruthy();
+  });
   it("shows the bottom navigation on the chat list route", () => {
     const { shell } = renderShell("/chat");
 

package/src/platforms/mobile/components/mobile-app-shell.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from "react";
 import {
   isChatSessionDetailRoute,
+  isInboxDetailRoute,
   isMainWorkspaceRoute,
 } from "@/app/configs/app-navigation.config";
 import { MobileBottomNav } from "@/platforms/mobile/components/mobile-bottom-nav";
@@ -32,8 +33,9 @@ export function MobileAppShell({
   children,
 }: MobileAppShellProps) {
   const isMainRoute = isMainWorkspaceRoute(pathname);
-  const showTopbar = pathname !== '/chat' && !isChatSessionDetailRoute(pathname);
-  const showBottomNav = !isChatSessionDetailRoute(pathname);
+  const ownsDetailChrome = isChatSessionDetailRoute(pathname) || isInboxDetailRoute(pathname);
+  const showTopbar = pathname !== '/chat' && !ownsDetailChrome;
+  const showBottomNav = !ownsDetailChrome;
 
   return (
     <div className="flex h-[100svh] flex-col bg-background font-sans text-foreground supports-[height:100dvh]:h-[100dvh]">

package/src/platforms/mobile/components/mobile-topbar.tsx

@@ -6,8 +6,8 @@ import { IconActionButton } from "@/shared/components/ui/actions/icon-action-but
 
 export function MobileTopbar({ leadingInset }: { leadingInset?: string }) {
   const navigate = useNavigate();
-  const { pathname } = useLocation();
-  const routeMeta = resolveMobileRouteMeta(pathname, t);
+  const { pathname, state } = useLocation();
+  const routeMeta = resolveMobileRouteMeta(pathname, t, typeof state?.returnTo === 'string' ? state.returnTo : undefined);
 
   return (
     <header

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -112,7 +112,7 @@ export function DocBrowserTabStrip({
             <span className="truncate">{current?.title || t('docBrowserTabUntitled')}</span><ChevronDown className="h-4 w-4 shrink-0" />
           </button>
         </PopoverTrigger>
-        <PopoverContent align="start" className="max-h-[70dvh] w-72 overflow-y-auto p-1">
+        <PopoverContent align="start" variant="menu" className="max-h-[70dvh]">
           <ContextMenuItems groups={mobileGroups} onClose={() => setMobileMenuOpen(false)} />
           {mobileToolbar}
         </PopoverContent>
@@ -126,7 +126,7 @@ export function DocBrowserTabStrip({
       tabs={compactTabs}
       actions={actions}
       className="flex h-10 min-w-0 flex-1 gap-1 border-0 bg-transparent px-0 select-none"
-      scrollClassName="doc-browser-tab-scrollbar flex h-full max-md:h-11 max-md:basis-full items-center gap-0.5"
+      scrollClassName="flex h-full max-md:h-11 max-md:basis-full items-center gap-0.5"
       tabsClassName="items-center gap-0.5"
       actionsClassName="h-full max-md:h-11 max-md:w-full items-center gap-0.5"
       tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 max-md:min-h-11 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"

package/src/shared/components/path-picker/server-path-picker-dialog.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, type ComponentProps } from 'react';
 import { Search } from 'lucide-react';
 import { useServerPathBrowse } from '@/shared/hooks/use-server-path-browse';
 import { useServerPathCreateDirectory } from '@/shared/hooks/use-server-path-create-directory';
@@ -25,6 +25,7 @@ type ServerPathPickerDialogProps = {
   defaultWorkspacePath?: string | null;
   isSaving: boolean;
   onOpenChange: (open: boolean) => void;
+  onCloseAutoFocus?: ComponentProps<typeof DialogContent>['onCloseAutoFocus'];
   onConfirm: (path: string) => Promise<void> | void;
   title: string;
   description?: string;
@@ -57,6 +58,7 @@ export function ServerPathPickerDialog({
   defaultWorkspacePath,
   isSaving,
   onOpenChange,
+  onCloseAutoFocus,
   onConfirm,
   title,
   description,
@@ -79,8 +81,8 @@ export function ServerPathPickerDialog({
         onOpenChange(nextOpen);
       }}
     >
-      <DialogContent className="max-h-[92vh] overflow-hidden p-0 sm:h-[44rem] sm:max-w-5xl sm:grid-rows-[auto_minmax(0,1fr)]">
-        <DialogHeader className="border-b border-border px-5 py-4 pr-12">
+      <DialogContent onCloseAutoFocus={onCloseAutoFocus} className="max-h-[92vh] overflow-hidden p-0 sm:h-[44rem] sm:max-w-5xl sm:grid-rows-[auto_minmax(0,1fr)]">
+        <DialogHeader className="border-b border-border px-5 py-4">
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription className={description ? undefined : 'sr-only'}>
             {description ?? title}

package/src/shared/components/ui/__tests__/dialog.test.tsx

@@ -1,12 +1,48 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { t } from '@/shared/lib/i18n';
 import {
   Dialog,
   DialogContent,
+  DialogHeader,
+  DialogDescription,
+  DialogTrigger,
   DialogTitle,
 } from '@/shared/components/ui/dialog';
 
 describe('Dialog', () => {
+  it('keeps header actions separate from closing and restores trigger focus', async () => {
+    const onAction = vi.fn();
+    const user = userEvent.setup();
+    render(<Dialog>
+      <DialogTrigger>Open report</DialogTrigger>
+      <DialogContent>
+        <DialogHeader actions={<button onClick={onAction}>Next report</button>}>
+          <DialogTitle>A long report title</DialogTitle>
+          <DialogDescription>Report summary</DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>);
+    await user.click(screen.getByRole('button', { name: 'Open report' }));
+    expect(screen.getAllByRole('button', { name: t('close') })).toHaveLength(1);
+    await user.click(screen.getByRole('button', { name: 'Next report' }));
+    expect(onAction).toHaveBeenCalledOnce();
+    expect(screen.getByRole('dialog')).toBeTruthy();
+    await user.click(screen.getByRole('button', { name: t('close') }));
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Open report' }));
+  });
+
+  it('supports explicit confirmation-only headers', () => {
+    render(<Dialog open><DialogContent><DialogHeader showClose={false}>
+      <DialogTitle>Confirm deletion</DialogTitle>
+      <DialogDescription>Choose an action below.</DialogDescription>
+    </DialogHeader></DialogContent></Dialog>);
+    expect(screen.queryByRole('button', { name: t('close') })).toBeNull();
+    expect(screen.getByRole('heading', { name: 'Confirm deletion' })).toBeTruthy();
+  });
+
   it('renders modal layers above floating panels', () => {
     render(
       <Dialog open>

package/src/shared/components/ui/actions/action-feedback.ts

@@ -1,8 +1 @@
-/** Neutral actions share one theme color across icon and menu surfaces. */
-export const ACTION_MENU_ITEM_CLASS = 'flex min-h-8 w-full items-center gap-2 rounded-lg px-2.5 py-1 text-left text-[13px] leading-5 font-medium outline-none transition-colors disabled:pointer-events-none disabled:opacity-45';
-
-export const ACTION_FEEDBACK = {
-  icon: 'hover:before:bg-[var(--interaction-hover)] active:before:bg-[var(--interaction-hover)] disabled:hover:before:bg-transparent disabled:active:before:bg-transparent',
-  item: 'hover:bg-[var(--interaction-hover)] focus-visible:bg-[var(--interaction-hover)] active:bg-[var(--interaction-hover)] disabled:hover:bg-transparent disabled:active:bg-transparent',
-  destructive: 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10 disabled:hover:bg-transparent',
-} as const;
+export { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@nextclaw/agent-chat-ui';

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -44,7 +44,7 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
       size = 'md',
       tone = 'default',
       tooltip,
-      tooltipSide = 'bottom',
+      tooltipSide,
       ...buttonProps
     },
     ref

package/src/shared/components/ui/confirm-dialog.tsx

@@ -48,14 +48,13 @@ export const ConfirmDialog = ({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="[&>:last-child]:hidden"
         onOpenAutoFocus={(event) => {
           event.preventDefault();
           confirmButtonRef.current?.focus();
         }}
         onCloseAutoFocus={(event) => event.preventDefault()}
       >
-        <DialogHeader>
+        <DialogHeader showClose={false}>
           <DialogTitle>{title}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>

package/src/shared/components/ui/context-menu/context-menu-items.tsx

@@ -5,8 +5,8 @@ import { cn } from "@/shared/lib/utils";
 import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import type { ContextMenuGroup, ContextMenuItem } from "./context-menu";
 
-export const CONTEXT_MENU_SURFACE_CLASS =
-  "w-max min-w-52 max-w-[min(18rem,calc(100vw-16px))] overflow-y-auto rounded-xl border border-border/40 bg-popover p-1 text-popover-foreground shadow-floating outline-none";
+import { ACTION_MENU_SURFACE_CLASS as CONTEXT_MENU_SURFACE_CLASS } from '@nextclaw/agent-chat-ui';
+export { CONTEXT_MENU_SURFACE_CLASS };
 
 function MenuItemContent({ item }: { item: ContextMenuItem }) {
   return <>

package/src/shared/components/ui/dialog.tsx

@@ -4,6 +4,8 @@ import { X } from "lucide-react"
 
 import { cn } from "@/shared/lib/utils"
 import { deferEscapeToNestedMenu } from './context-menu/context-menu';
+import { IconActionButton } from './actions/icon-action-button';
+import { t } from '@/shared/lib/i18n';
 
 const Dialog = DialogPrimitive.Root
 
@@ -49,10 +51,6 @@ const DialogContent = React.forwardRef<
       }}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-1 top-1 flex h-11 w-11 items-center justify-center rounded-lg opacity-70 transition-all duration-fast hover:bg-[var(--interaction-hover)] hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none sm:right-4 sm:top-4 sm:h-6 sm:w-6">
-        <X className="h-4 w-4 text-muted-foreground" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ))
@@ -60,15 +58,39 @@ DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
+  children,
+  actions,
+  showClose = true,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement> & {
+  actions?: React.ReactNode;
+  showClose?: boolean;
+}) => (
   <div
+    data-slot="dialog-header"
     className={cn(
-      "flex flex-col space-y-2 pr-7 text-left",
+      "grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3 text-left",
       className
     )}
     {...props}
-  />
+  >
+    <div className="min-w-0 space-y-2 break-words">{children}</div>
+    <div className="flex shrink-0 items-center gap-2" data-slot="dialog-header-controls">
+      {actions ? <div className="flex items-center gap-1" data-slot="dialog-header-actions">{actions}</div> : null}
+      {showClose ? (
+        <div className={cn("flex shrink-0", actions && "pl-2")}>
+          <DialogPrimitive.Close asChild>
+            <IconActionButton
+              size="sm"
+              label={t('close')}
+              icon={<X className="h-4 w-4" />}
+              className="max-md:h-11 max-md:w-11"
+            />
+          </DialogPrimitive.Close>
+        </div>
+      ) : null}
+    </div>
+  </div>
 )
 DialogHeader.displayName = "DialogHeader"