@nextclaw/ui 0.26.5 → 0.27.0

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/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"
 

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

@@ -21,8 +21,11 @@ const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { variant?: 'default' | 'menu' }
->(({ className, variant = 'default', sideOffset = 8, align = 'start', collisionPadding = 12, style, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    variant?: 'default' | 'menu';
+    matchTriggerWidth?: boolean;
+  }
+>(({ className, variant = 'default', matchTriggerWidth = false, sideOffset = 8, align = 'start', collisionPadding = 12, style, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
@@ -35,7 +38,15 @@ const PopoverContent = React.forwardRef<
         className,
         variant === 'menu' && CONTEXT_MENU_SURFACE_CLASS
       )}
-      style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}
+      style={{
+        maxHeight: POPOVER_CONTENT_MAX_HEIGHT,
+        ...(matchTriggerWidth && {
+          width: 'var(--radix-popover-trigger-width)',
+          minWidth: 0,
+          maxWidth: 'var(--radix-popover-content-available-width)',
+        }),
+        ...style,
+      }}
       {...props}
       onEscapeKeyDown={(event) => {
         if (!deferEscapeToNestedMenu(event)) props.onEscapeKeyDown?.(event);

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -204,7 +204,7 @@ function CompactTabLabelButton({
     <TooltipProvider delayDuration={250}>
       <Tooltip>
         <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent side="bottom" className="text-xs">
+        <TooltipContent className="text-xs">
           {tooltip}
         </TooltipContent>
       </Tooltip>
@@ -287,7 +287,7 @@ export function CompactTabStrip({
     >
       <div
         className={cn(
-          "flex min-w-0 flex-1 items-stretch overflow-x-auto overflow-y-hidden",
+          "compact-tab-scrollbar flex min-w-0 flex-1 items-stretch overflow-x-auto overflow-y-hidden",
           scrollClassName,
         )}
         onPointerDown={onScrollPointerDown}

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

@@ -27,12 +27,13 @@ TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 const TooltipContent = React.forwardRef<
     React.ElementRef<typeof TooltipPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, side = 'top', sideOffset = 4, ...props }, ref) => (
     <TooltipPrimitive.Portal>
         <TooltipPrimitive.Content
             ref={ref}
             data-theme-overlay="tooltip"
             sideOffset={sideOffset}
+            side={side}
             className={cn(
                 'z-[var(--z-tooltip,10150)] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
                 className

package/src/shared/components/workbench/__tests__/workbench-surface.test.tsx

@@ -13,6 +13,27 @@ beforeEach(() => {
   });
 });
 
+it("keeps more actions immediately before close across window states", () => {
+  render(<WorkbenchSurface id="resource" manager={manager} title="A long session title"
+    onClose={vi.fn()} onOpenMain={vi.fn()} moreActions={<button>More actions</button>}>
+    <textarea aria-label="Draft" />
+  </WorkbenchSurface>);
+  const assertOrder = () => {
+    const toolbar = screen.getByRole("button", { name: "More actions" }).parentElement!;
+    const buttons = within(toolbar).getAllByRole("button");
+    expect(buttons.slice(-2).map((button) => button.getAttribute("aria-label") || button.textContent))
+      .toEqual(["More actions", "Close view"]);
+  };
+  assertOrder();
+  fireEvent.click(screen.getByRole("button", { name: "Float view group" }));
+  assertOrder();
+  fireEvent.click(screen.getByRole("button", { name: "Collapse view" }));
+  assertOrder();
+  fireEvent.click(screen.getByRole("button", { name: "Expand view" }));
+  expect(screen.getByTitle("A long session title")).toBeTruthy();
+  assertOrder();
+});
+
 it("retains the exact input and iframe nodes through every presentation transition and hiding", () => {
   const props = {
     id: "resource",

package/src/shared/components/workbench/workbench-surface-toolbar.tsx

@@ -7,6 +7,7 @@ import {
   PictureInPicture2,
   X,
 } from "lucide-react";
+import type { ReactNode } from "react";
 import { IconActionButton, IconActionGroup } from "@/shared/components/ui/actions/icon-action-button";
 import { t } from "@/shared/lib/i18n";
 import type { WorkbenchSurfaceState } from "./types/workbench-surface.types";
@@ -21,6 +22,7 @@ export function WorkbenchSurfaceToolbar({
   onClose,
   closeLabel,
   onOpenMain,
+  moreActions,
 }: {
   state: WorkbenchSurfaceState;
   compact: boolean;
@@ -31,6 +33,7 @@ export function WorkbenchSurfaceToolbar({
   onClose: () => void;
   closeLabel: string;
   onOpenMain?: () => void;
+  moreActions?: ReactNode;
 }) {
   return (
     <IconActionGroup
@@ -90,6 +93,7 @@ export function WorkbenchSurfaceToolbar({
           onClick={onMaximize}
         />
       )}
+      {moreActions}
       <IconActionButton
         size="sm"
         icon={<X className="h-4 w-4" />}

package/src/shared/components/workbench/workbench-surface.tsx

@@ -22,6 +22,7 @@ type WorkbenchSurfaceProps = {
   title: string;
   children: ReactNode;
   navigation?: ReactNode;
+  moreActions?: ReactNode;
   icon?: ReactNode;
   onClose: () => void;
   closeLabel?: string;
@@ -67,6 +68,7 @@ export function WorkbenchSurface({
   title,
   icon,
   navigation,
+  moreActions,
   children,
   onClose,
   closeLabel = t("workbenchCloseView"),
@@ -290,7 +292,7 @@ export function WorkbenchSurface({
           )}
         >
           {icon}
-          <span className="truncate">{title}</span>
+          <span className="truncate" title={title}>{title}</span>
         </span>
         <WorkbenchSurfaceToolbar
           state={state}
@@ -308,6 +310,7 @@ export function WorkbenchSurface({
           onClose={close}
           closeLabel={closeLabel}
           onOpenMain={onOpenMain}
+          moreActions={moreActions}
         />
       </header>
       <div

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -362,7 +362,7 @@
   "chatRuntimeInitializationFailed": "Chat startup failed. Please retry in a moment or inspect the service logs.",
   "chatInputPlaceholder": "Type a message, / for commands, apps or skills, @ for files, folders, projects or panel apps, Enter to send, Shift + Enter for newline",
   "chatInputPlaceholderCompact": "Message NextClaw...",
-  "chatWelcomeInputPlaceholder": "Describe what you want to get done…",
+  "chatWelcomeInputPlaceholder": "Share what you want to do, or what’s on your mind…",
   "chatInputHint": "Multi-turn context is preserved in the current session.",
   "chatSlashSection": "Slash menu",
   "chatSlashSectionCommands": "Commands",
@@ -609,6 +609,7 @@
   "chatMessageCopied": "Copied",
   "chatMermaidDiagram": "Diagram",
   "chatMarkdownFrontmatter": "Document properties",
+  "chatMarkdownDetails": "Details",
   "chatMermaidExpand": "Expand diagram",
   "chatMermaidLoading": "Rendering diagram…",
   "chatMermaidRenderError": "Diagram could not be rendered; showing source instead",
@@ -653,7 +654,7 @@
   "chatPanelDock": "Dock to right sidebar",
   "chatPanelOpen": "Chat in right sidebar",
   "chatPanelUnavailable": "This conversation cannot be opened. Open it again from the conversation list.",
-  "chatWelcomeTitle": "What would you like to get done?",
+  "chatWelcomeTitle": "Where shall we start today?",
   "chatWelcomeContextLabel": "Task context",
   "chatWelcomeProjectPickerLabel": "Choose working directory",
   "chatWelcomeProjectPickerPlaceholder": "Choose working directory",
@@ -662,12 +663,17 @@
   "chatWelcomeProjectNoRecent": "No recent projects yet",
   "chatWelcomeProjectOpenFolder": "Open folder",
   "chatWelcomeSessionTypePickerLabel": "Choose session type",
-  "chatWelcomeSuggestion1Label": "Review this project",
+  "chatWelcomeSuggestion1Label": "Move this project forward",
+  "chatWelcomeContinueLabel": "Pick up where you left off",
+  "chatWelcomeContinueHint": "Return to the original conversation with its context",
+  "chatWelcomeDismissContinue": "Hide this conversation suggestion for now",
+  "chatWelcomeOpenStartLabel": "Talk about how I’ve been",
+  "chatWelcomeOpenStartPrompt": "I'd like to talk about how things have been lately. Listen to what I have been experiencing and what matters to me. We can take our time without rushing into advice or a task list.",
   "chatWelcomeSuggestion1Prompt": "Help me understand this project and propose the next three concrete things we should build.",
-  "chatWelcomeSuggestion2Label": "Find useful skills",
-  "chatWelcomeSuggestion2Prompt": "Review the skills that would be useful for this project and recommend which ones I should enable first.",
-  "chatWelcomeSuggestion3Label": "Create a scheduled task",
-  "chatWelcomeSuggestion3Prompt": "Help me design a scheduled automation for this project, including the trigger, message, and safety checks.",
+  "chatWelcomeSuggestion2Label": "Help me think through an idea",
+  "chatWelcomeSuggestion2Prompt": "I have an idea that is still taking shape. Hear me out, then help me explore its possibilities, open questions, and potential directions.",
+  "chatWelcomeSuggestion3Label": "Start something together",
+  "chatWelcomeSuggestion3Prompt": "There is something I would like us to work on together. Let me explain what I have in mind and what materials I have, then we can decide where to begin.",
   "chatSkillsPickerTitle": "Skills",
   "chatSkillsPickerEmpty": "No skills installed",
   "chatSkillsPickerSearchPlaceholder": "Search skills",

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -1,4 +1,5 @@
 {
+  "close": "Close",
   "refresh": "Refresh",
   "chat": "Chat",
   "model": "Model",
@@ -100,7 +101,10 @@
   "language": "Language",
   "theme": "Theme",
   "themeNatural": "Natural",
-  "themeWork": "Default",
+  "themeDefault": "Default",
+  "themePaperInk": "Paper & Ink",
+  "themePlainPaper": "Plain Paper",
+  "themeWork": "Soft White",
   "themeMinimal": "Minimal",
   "themeWarm": "Paper",
   "themeCool": "Mist",

package/src/shared/lib/i18n/locales/en-US/doc-browser.json

@@ -38,9 +38,13 @@
   "appPackagesNoDataYet": "No data yet",
   "appPackagesLoadFailed": "Failed to load apps",
   "appPackagesRefresh": "Refresh apps",
+  "appPackagesOpen": "Open",
+  "appPackagesDetails": "App details",
+  "appPackagesMarketplaceSource": "Browse app marketplace",
+  "appPackagesCustomSource": "Install from a source",
   "appPackagesBrowse": "Add apps",
-  "appPackagesMarketplaceTitle": "Add apps",
-  "appPackagesMarketplaceDescription": "Choose apps that fit the way you use NextClaw. You can keep browsing or leave while an install continues.",
+  "appPackagesMarketplaceTitle": "App marketplace",
+  "appPackagesMarketplaceDescription": "Discover apps that make your everyday work easier.",
   "appPackagesMarketplaceSearch": "Search apps, features, or tags",
   "appPackagesMarketplaceLoading": "Loading the app marketplace…",
   "appPackagesMarketplaceLoadMore": "Load more",
@@ -75,7 +79,6 @@
   "appPackagesAllPlatforms": "All platforms",
   "appPackagesPlatformOnly": "{platforms} only",
   "appPackagesUnavailableOnDevice": "Unavailable on this device",
-  "appPackagesUnavailable": "Unavailable",
   "appPackagesTemporarilyUnavailable": "Temporarily unavailable",
   "appPackagesCompatibilityUnknown": "Compatibility could not be confirmed",
   "appPackagesCompatibilityUnknownReason": "NextClaw could not confirm whether this app supports this device. Refresh and try again.",
@@ -104,7 +107,7 @@
   "appPackagesFilterAll": "All",
   "appPackagesFilterPersonal": "Personal",
   "appPackagesFilterLocal": "Local-first",
-  "appPackagesBackToMarketplace": "Back to apps",
+  "appPackagesBackToMarketplace": "Back to marketplace",
   "appPackagesAboutApp": "About this app",
   "appPackagesPanelsAdded": "App views",
   "appPackagesServicesAdded": "Local services",
@@ -211,5 +214,7 @@
   "appPackagesDocumentAccessChooseDescription": "Choose the folder this app may access.",
   "appPackagesDocumentAccessPath": "Granted folder",
   "appPackagesDocumentAccessWriteWarning": "Read and write access lets this app modify the original files in this folder. You can revoke it from the app card at any time.",
-  "appPackagesDocumentAccessReadHint": "Read-only access lets this app view the folder but not modify files through this mount."
+  "appPackagesDocumentAccessReadHint": "Read-only access lets this app view the folder but not modify files through this mount.",
+  "appPackagesViewInstalled": "View installed",
+  "appPackagesClearSearch": "Clear search"
 }

package/src/shared/lib/i18n/locales/en-US/inbox.json

@@ -20,6 +20,7 @@
   "inboxRestore": "Restore",
   "inboxDelete": "Delete",
   "inboxContinueChat": "Continue in chat",
+  "inboxContinueChatCompact": "Continue",
   "inboxDeleteTitle": "Delete this item?",
   "inboxDeleteDescription": "It cannot be recovered from Inbox. Any chat already created will remain.",
   "inboxDeleteConfirm": "Delete",