@nextclaw/ui 0.15.1 → 0.15.2

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

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+
+describe('IconActionButton', () => {
+  it('applies compact size and strong tone classes for nested hover surfaces', () => {
+    render(
+      <IconActionButton
+        size="sm"
+        tone="strong"
+        icon={<span data-testid="icon" />}
+        label="Pin"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'Pin' });
+    expect(button.className).toContain('h-6');
+    expect(button.className).toContain('w-6');
+    expect(button.className).toContain('p-1');
+    expect(button.className).toContain('hover:bg-black/10');
+  });
+
+  it('defaults to medium size and soft accent hover', () => {
+    render(
+      <IconActionButton
+        icon={<span data-testid="icon" />}
+        label="More"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'More' });
+    expect(button.className).toContain('h-7');
+    expect(button.className).toContain('w-7');
+    expect(button.className).toContain('hover:bg-accent');
+  });
+});

package/src/shared/components/ui/actions/form-actions.tsx

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/shared/lib/utils';
+
+type FormActionsProps = HTMLAttributes<HTMLDivElement> & {
+  align?: 'start' | 'end' | 'between';
+};
+
+export function FormActions({
+  align = 'end',
+  className,
+  ...props
+}: FormActionsProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-wrap items-center gap-2',
+        align === 'start' && 'justify-start',
+        align === 'end' && 'justify-end',
+        align === 'between' && 'justify-between',
+        className,
+      )}
+      {...props}
+    />
+  );
+}

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

@@ -7,16 +7,35 @@ import {
 } from '@/shared/components/ui/tooltip';
 import { cn } from '@/shared/lib/utils';
 
+type IconActionButtonSize = 'sm' | 'md' | 'lg';
+type IconActionButtonTone = 'default' | 'strong';
+
 type IconActionButtonProps = Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   'children' | 'type'
 > & {
   icon: React.ReactNode;
   label: string;
+  size?: IconActionButtonSize;
+  /** default: soft accent hover. strong: denser gray hover for nested hover surfaces. */
+  tone?: IconActionButtonTone;
   tooltip?: string | false | null;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
 };
 
+const SIZE_CLASS: Record<IconActionButtonSize, string> = {
+  sm: 'h-6 w-6 rounded-md p-1',
+  md: 'h-7 w-7 rounded-md p-1.5',
+  lg: 'h-8 w-8 rounded-lg p-1.5',
+};
+
+const TONE_CLASS: Record<IconActionButtonTone, string> = {
+  default:
+    'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+  strong:
+    'text-muted-foreground hover:bg-black/10 hover:text-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+};
+
 const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonProps>(
   (
     {
@@ -24,6 +43,8 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
       disabled = false,
       icon,
       label,
+      size = 'md',
+      tone = 'default',
       tooltip,
       tooltipSide = 'bottom',
       ...buttonProps
@@ -38,8 +59,9 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
         disabled={disabled}
         aria-label={label}
         className={cn(
-          'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
-          'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
+          'inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
+          SIZE_CLASS[size],
+          TONE_CLASS[tone],
           className
         )}
       >
@@ -63,3 +85,4 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
 IconActionButton.displayName = 'IconActionButton';
 
 export { IconActionButton };
+export type { IconActionButtonProps, IconActionButtonSize, IconActionButtonTone };

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

@@ -3,13 +3,21 @@ import { cn } from '@/shared/lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { hover?: boolean }
->(({ className, hover = true, ...props }, ref) => (
+  React.HTMLAttributes<HTMLDivElement> & {
+    hover?: boolean;
+    /** Flat settings-style surface: light border, no shadow. */
+    surface?: 'raised' | 'flat';
+  }
+>(({ className, hover = true, surface = 'raised', ...props }, ref) => (
   <div
     ref={ref}
     className={cn(
-      'rounded-2xl border border-border bg-card text-card-foreground shadow-card transition-all duration-base',
-      hover && 'hover:border-primary/25 hover:shadow-card-hover',
+      'rounded-2xl border bg-card text-card-foreground transition-colors duration-base',
+      surface === 'raised'
+        ? 'border-border shadow-card'
+        : 'border-border/75 shadow-none',
+      hover && surface === 'raised' && 'hover:border-primary/25 hover:shadow-card-hover',
+      hover && surface === 'flat' && 'hover:bg-muted/40',
       className
     )}
     {...props}

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

@@ -147,11 +147,12 @@ function CompactTabItem({
       <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />
       {tab.onClose && tab.closePlacement !== "leading-hover" ? (
         <IconActionButton
+          size="sm"
+          tone="strong"
           icon={<X className="h-3 w-3" />}
           label={tab.closeLabel ?? ""}
           tooltip={tab.closeLabel ?? null}
           onClick={(event) => closeCompactTab(event, tab.onClose!)}
-          className="h-5 w-5 rounded p-0.5 hover:bg-black/10"
         />
       ) : null}
     </div>

package/src/shared/hooks/use-server-path-browse.ts

@@ -1,19 +1,41 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchServerPathBrowse } from '@/shared/lib/api';
 
+export function buildServerPathBrowseQueryKey(params: {
+  path?: string | null;
+  basePath?: string | null;
+  includeFiles?: boolean;
+}) {
+  return [
+    'server-path-browse',
+    params.path?.trim() ?? '',
+    params.basePath?.trim() ?? '',
+    params.includeFiles ?? false,
+  ] as const;
+}
+
 export function useServerPathBrowse(params: {
   path?: string | null;
+  basePath?: string | null;
   includeFiles?: boolean;
   enabled?: boolean;
 }) {
+  const { basePath, enabled, includeFiles, path } = params;
+  const normalizedPath = path?.trim() ?? '';
+  const normalizedBasePath = basePath?.trim() ?? '';
   return useQuery({
-    queryKey: ['server-path-browse', params.path ?? null, params.includeFiles ?? false],
+    queryKey: buildServerPathBrowseQueryKey({
+      path: normalizedPath,
+      basePath: normalizedBasePath,
+      includeFiles,
+    }),
     queryFn: () =>
       fetchServerPathBrowse({
-        path: params.path,
-        includeFiles: params.includeFiles,
+        path: normalizedPath,
+        basePath: normalizedBasePath,
+        includeFiles,
       }),
-    enabled: params.enabled ?? true,
+    enabled: enabled ?? true,
     staleTime: 0,
   });
 }

package/src/shared/hooks/use-server-path-read.ts

@@ -1,6 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchServerPathRead } from '@/shared/lib/api';
 
+export function buildServerPathReadQueryKey(params: {
+  path?: string | null;
+  basePath?: string | null;
+}) {
+  return ['server-path-read', params.path?.trim() ?? '', params.basePath ?? null] as const;
+}
+
 export function useServerPathRead(params: {
   path?: string | null;
   basePath?: string | null;
@@ -8,7 +15,10 @@ export function useServerPathRead(params: {
 }) {
   const normalizedPath = params.path?.trim() ?? '';
   return useQuery({
-    queryKey: ['server-path-read', normalizedPath, params.basePath ?? null],
+    queryKey: buildServerPathReadQueryKey({
+      path: normalizedPath,
+      basePath: params.basePath,
+    }),
     queryFn: () =>
       fetchServerPathRead({
         path: normalizedPath,

package/src/shared/lib/api/utils/server-path.utils.ts

@@ -17,6 +17,7 @@ function encodeServerPathSegments(path: string): string {
 
 export async function fetchServerPathBrowse(params?: {
   path?: string | null;
+  basePath?: string | null;
   includeFiles?: boolean;
 }): Promise<ServerPathBrowseView> {
   return await nextclawClient.serverPaths.browse(params);

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

@@ -41,6 +41,9 @@
   "chatChildSessionEmpty": "No child session messages yet.",
   "chatWorkspaceBack": "Back in workspace",
   "chatWorkspaceForward": "Forward in workspace",
+  "chatWorkspaceRefreshFile": "Refresh preview",
+  "chatWorkspaceMaximizePanel": "Maximize workspace panel",
+  "chatWorkspaceRestorePanel": "Restore workspace panel",
   "chatWorkspaceClosePanel": "Close workspace panel",
   "chatWorkspaceSideChatDraftTitle": "Side chat",
   "chatWorkspaceSideChatDraftSubtitle": "This draft will inherit the parent session context when you send the first message.",
@@ -49,7 +52,13 @@
   "chatWorkspacePreview": "Preview",
   "chatWorkspaceDiff": "Diff",
   "chatWorkspaceCloseFile": "Close file",
+  "chatWorkspaceLoadingPreview": "Loading preview…",
   "chatWorkspaceLoadingFile": "Loading file…",
+  "chatWorkspaceLoadingDirectory": "Loading directory…",
+  "chatWorkspaceOpenDirectory": "Open directory",
+  "chatWorkspaceOpenFile": "Open file",
+  "chatWorkspaceDirectoryEmpty": "This directory is empty.",
+  "chatWorkspaceDirectoryLoadFailed": "Failed to load directory",
   "chatWorkspacePreviewUnsupported": "This file is not supported in the sidebar preview yet.",
   "chatWorkspacePreviewEmpty": "No file content is available for preview.",
   "chatWorkspaceDiffEmpty": "No diff content is available.",
@@ -199,6 +208,13 @@
   "chatSidebarYesterday": "Yesterday",
   "chatSidebarPrevious7Days": "Previous 7 Days",
   "chatSidebarOlder": "Older",
+  "chatSidebarPinned": "Pinned",
+  "chatSidebarPinSession": "Pin session",
+  "chatSidebarUnpinSession": "Unpin session",
+  "chatSidebarPinProject": "Pin project",
+  "chatSidebarUnpinProject": "Unpin project",
+  "chatSidebarExpandProject": "Expand project",
+  "chatSidebarCollapseProject": "Collapse project",
   "chatSidebarProjectViewEmpty": "No project conversations yet",
   "chatWelcomeTitle": "Hello, how can I help you?",
   "chatWelcomeSubtitle": "Describe the goal, choose the project context, and let NextClaw take it from there.",

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

@@ -11,6 +11,8 @@
   "marketplace": "Marketplace",
   "advanced": "Advanced",
   "settings": "Settings",
+  "settingsGroupBasic": "Basic Configuration",
+  "settingsGroupAdvanced": "Advanced Configuration",
   "appearance": "Appearance",
   "settingsMenu": "Settings menu",
   "sidebarCollapse": "Collapse sidebar",
@@ -41,6 +43,7 @@
   "language": "Language",
   "theme": "Theme",
   "themeNatural": "Natural",
+  "themeWork": "Default",
   "themeMinimal": "Minimal",
   "themeWarm": "Paper",
   "themeCool": "Mist",

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

@@ -65,6 +65,8 @@
   "serviceAppsLoading": "Loading service apps...",
   "serviceAppsLoadFailed": "Failed to load service apps",
   "serviceAppsEmpty": "No service apps yet",
+  "serviceAppsEmptyTitle": "No service apps",
+  "serviceAppsEmptyDescription": "Service apps expose local runtimes and actions that panel apps can call.",
   "serviceAppsRefresh": "Refresh service apps",
   "serviceAppsDiscoverActions": "Connect and discover actions",
   "serviceAppsDiscoverActionsHint": "Connect to the service app runtime and discover its available actions.",
@@ -84,6 +86,9 @@
   "serviceAppsStatusHint_running": "The service app runtime is connected and ready for action discovery or invocation.",
   "serviceAppsStatusHint_failed": "The runtime connection failed; check the error or disconnect and try again.",
   "serviceAppsStatusHint_stopped": "The service app is stopped.",
+  "serviceAppsActionsSection": "Actions",
+  "serviceAppsActionsEmpty": "No actions discovered yet",
+  "serviceAppsDetails": "Runtime details",
   "serviceAppsGrantedTo": "Granted to",
   "serviceAppsRevokeGrant": "Revoke grant",
   "serviceAppsRuntimeState_matched": "Matched",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -41,6 +41,9 @@
   "chatChildSessionEmpty": "子会话还没有消息。",
   "chatWorkspaceBack": "工作区后退",
   "chatWorkspaceForward": "工作区前进",
+  "chatWorkspaceRefreshFile": "刷新预览",
+  "chatWorkspaceMaximizePanel": "最大化工作区侧栏",
+  "chatWorkspaceRestorePanel": "还原工作区侧栏",
   "chatWorkspaceClosePanel": "关闭工作区侧栏",
   "chatWorkspaceSideChatDraftTitle": "Side chat",
   "chatWorkspaceSideChatDraftSubtitle": "发送第一条消息后，会继承父会话上下文并创建真实 child 会话。",
@@ -49,7 +52,13 @@
   "chatWorkspacePreview": "预览",
   "chatWorkspaceDiff": "Diff",
   "chatWorkspaceCloseFile": "关闭文件",
+  "chatWorkspaceLoadingPreview": "正在加载预览…",
   "chatWorkspaceLoadingFile": "正在加载文件…",
+  "chatWorkspaceLoadingDirectory": "正在加载目录…",
+  "chatWorkspaceOpenDirectory": "打开目录",
+  "chatWorkspaceOpenFile": "打开文件",
+  "chatWorkspaceDirectoryEmpty": "这个目录为空。",
+  "chatWorkspaceDirectoryLoadFailed": "读取目录失败",
   "chatWorkspacePreviewUnsupported": "该文件暂不支持在侧栏预览。",
   "chatWorkspacePreviewEmpty": "当前没有可显示的文件内容。",
   "chatWorkspaceDiffEmpty": "当前没有可显示的 diff 内容。",
@@ -199,6 +208,13 @@
   "chatSidebarYesterday": "昨天",
   "chatSidebarPrevious7Days": "近 7 天",
   "chatSidebarOlder": "更早",
+  "chatSidebarPinned": "已置顶",
+  "chatSidebarPinSession": "置顶会话",
+  "chatSidebarUnpinSession": "取消置顶会话",
+  "chatSidebarPinProject": "置顶项目",
+  "chatSidebarUnpinProject": "取消置顶项目",
+  "chatSidebarExpandProject": "展开项目",
+  "chatSidebarCollapseProject": "收起项目",
   "chatSidebarProjectViewEmpty": "还没有绑定项目的会话",
   "chatWelcomeTitle": "你好，有什么可以帮你的吗？",
   "chatWelcomeSubtitle": "描述目标，选择项目上下文，让 NextClaw 接住这次任务。",

package/src/shared/lib/i18n/locales/zh-CN/core.json

@@ -11,6 +11,8 @@
   "marketplace": "市场",
   "advanced": "高级",
   "settings": "设置",
+  "settingsGroupBasic": "基础配置",
+  "settingsGroupAdvanced": "高级配置",
   "appearance": "外观",
   "settingsMenu": "设置菜单",
   "sidebarCollapse": "收起侧边栏",
@@ -41,6 +43,7 @@
   "language": "语言",
   "theme": "主题",
   "themeNatural": "自然",
+  "themeWork": "默认",
   "themeMinimal": "简白",
   "themeWarm": "纸暖",
   "themeCool": "雾蓝",

package/src/shared/lib/i18n/locales/zh-CN/doc-browser.json

@@ -65,6 +65,8 @@
   "serviceAppsLoading": "加载服务应用中...",
   "serviceAppsLoadFailed": "服务应用加载失败",
   "serviceAppsEmpty": "暂无服务应用",
+  "serviceAppsEmptyTitle": "暂无服务应用",
+  "serviceAppsEmptyDescription": "服务应用提供本地运行时与动作，供面板应用调用。",
   "serviceAppsRefresh": "刷新服务应用",
   "serviceAppsDiscoverActions": "连接并发现动作",
   "serviceAppsDiscoverActionsHint": "连接服务应用运行时，并发现它当前可用的动作。",
@@ -84,6 +86,9 @@
   "serviceAppsStatusHint_running": "服务应用运行时已连接，可用于发现或调用动作。",
   "serviceAppsStatusHint_failed": "运行时连接失败，请查看错误信息或断开连接后重试。",
   "serviceAppsStatusHint_stopped": "服务应用已停止。",
+  "serviceAppsActionsSection": "动作",
+  "serviceAppsActionsEmpty": "尚未发现动作",
+  "serviceAppsDetails": "运行时详情",
   "serviceAppsGrantedTo": "已授权给",
   "serviceAppsRevokeGrant": "撤销授权",
   "serviceAppsRuntimeState_matched": "已匹配",

package/src/shared/lib/session-project/workspace-file-breadcrumb.utils.ts

@@ -131,12 +131,13 @@ function readRelativeSegments(params: {
 function buildSegmentsFromLabels(params: {
   labels: string[];
   basePath?: string | null;
+  currentKind?: "file" | "directory";
   leading?: WorkspaceFileBreadcrumbSegmentViewModel | null;
 }): WorkspaceFileBreadcrumbSegmentViewModel[] {
-  const { basePath = null, labels, leading = null } = params;
+  const { basePath = null, currentKind = "file", labels, leading = null } = params;
   const items = labels.map<WorkspaceFileBreadcrumbSegmentViewModel>(
     (label, index) => {
-      const kind = index === labels.length - 1 ? "file" : "directory";
+      const kind = index === labels.length - 1 ? currentKind : "directory";
       const path = joinPathSegments(basePath, labels.slice(0, index + 1));
       return {
         key: `${index}:${label}`,
@@ -167,12 +168,13 @@ function buildLocationLabel(params: {
 
 export function buildWorkspaceFileBreadcrumb(params: {
   path: string;
+  kind?: "file" | "directory";
   sessionProjectRoot: string | null;
   line?: number | null;
   column?: number | null;
   truncated: boolean;
 }): WorkspaceFileBreadcrumbViewModel {
-  const { column, line, path, sessionProjectRoot, truncated } = params;
+  const { column, kind = "file", line, path, sessionProjectRoot, truncated } = params;
   const fullPath = path.trim();
   const relativeSegments =
     sessionProjectRoot?.trim() && fullPath
@@ -192,6 +194,7 @@ export function buildWorkspaceFileBreadcrumb(params: {
     segments = buildSegmentsFromLabels({
       labels: relativeSegments,
       basePath: workspacePath,
+      currentKind: kind,
       leading: {
         key: `workspace:${workspaceLabel}`,
         label: workspaceLabel,
@@ -207,6 +210,7 @@ export function buildWorkspaceFileBreadcrumb(params: {
     segments = buildSegmentsFromLabels({
       labels,
       basePath: rootPath,
+      currentKind: kind,
       leading: prefix
         ? {
             key: `root:${prefix}`,
@@ -225,9 +229,9 @@ export function buildWorkspaceFileBreadcrumb(params: {
       {
         key: "file:unknown",
         label: fullPath || "file",
-        kind: "file",
+        kind,
         path: fullPath,
-        browsePath: readParentPath(fullPath),
+        browsePath: kind === "directory" ? fullPath : readParentPath(fullPath),
         isCurrent: true,
       },
     ];

package/src/shared/lib/theme/index.test.ts

@@ -0,0 +1,21 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  DEFAULT_UI_THEME,
+  resolveInitialTheme,
+  THEME_OPTIONS,
+} from './index';
+
+describe('ui theme defaults', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('uses the default theme when no preference is saved', () => {
+    expect(DEFAULT_UI_THEME).toBe('work');
+    expect(resolveInitialTheme()).toBe(DEFAULT_UI_THEME);
+  });
+
+  it('lists the default theme first', () => {
+    expect(THEME_OPTIONS[0]?.value).toBe(DEFAULT_UI_THEME);
+  });
+});

package/src/shared/lib/theme/index.ts

@@ -1,5 +1,6 @@
 export type UiTheme =
   | 'natural'
+  | 'work'
   | 'minimal'
   | 'warm'
   | 'cool'
@@ -16,9 +17,10 @@ type UiThemeDefinition = {
 };
 
 const THEME_STORAGE_KEY = 'nextclaw.ui.theme';
-const DEFAULT_THEME: UiTheme = 'natural';
+export const DEFAULT_UI_THEME: UiTheme = 'work';
 
 const THEME_DEFINITIONS: readonly UiThemeDefinition[] = [
+  { value: 'work', labelKey: 'themeWork', appearance: 'light' },
   { value: 'night', labelKey: 'themeNight', appearance: 'dark' },
   { value: 'natural', labelKey: 'themeNatural', appearance: 'light' },
   { value: 'minimal', labelKey: 'themeMinimal', appearance: 'light' },
@@ -59,13 +61,13 @@ export function getThemeAppearance(theme: UiTheme): UiThemeAppearance {
 }
 
 class UiThemeOwner {
-  private activeTheme: UiTheme = DEFAULT_THEME;
+  private activeTheme: UiTheme = DEFAULT_UI_THEME;
   private initialized = false;
   private readonly listeners = new Set<(theme: UiTheme) => void>();
 
   resolveInitialTheme = (): UiTheme => {
     if (typeof window === 'undefined') {
-      return DEFAULT_THEME;
+      return DEFAULT_UI_THEME;
     }
 
     try {
@@ -78,7 +80,7 @@ class UiThemeOwner {
       // ignore storage failures
     }
 
-    return DEFAULT_THEME;
+    return DEFAULT_UI_THEME;
   };
 
   initializeTheme = (): UiTheme => {

package/src/vite-env.d.ts

@@ -7,6 +7,8 @@ export {};
 interface ImportMetaEnv {
   readonly VITE_API_BASE?: string;
   readonly VITE_DEV_PROXY_API_BASE?: string;
+  readonly VITE_NEXTCLAW_DOCS_BASE_URL?: string;
+  readonly VITE_NEXTCLAW_DOCS_CN_BASE_URL?: string;
 }
 
 interface ImportMeta {