sparkdesign 0.3.1 → 0.3.3

package/README.md

@@ -1,8 +1,10 @@
 # Spark Design
 
-现代化 React 设计系统，支持双维度主题（颜色 theme + 布局 scale），5 种内置布局风格，提供 Foundation 基础组件与 Chat 对话流组件，可扩展颜色主题。
+现代化 React 设计系统，支持双维度主题（颜色 theme + 布局 scale），5 种内置布局风格，提供 Basic 基础组件与 Chat 对话流组件，可扩展颜色主题。
 
-**当前版本**：`0.2.4`（[变更说明](docs/NPM发布指南.md)）
+**当前版本**：`0.3.1`（[变更说明](docs/NPM发布指南.md)）
+
+> 🌟 **纯新手？** 查看 [快速上手指南-新手版](docs/快速上手指南-新手版.md)，一步步带你跑起来！
 
 > 以下为**安装与使用说明**；仓库结构、开发脚本与贡献方式见文末 [仓库与开发](#仓库与开发)。
 
@@ -13,7 +15,7 @@
 - **内置颜色主题**：light / dark
 - **CSS 变量驱动**：组件仅用 token，覆盖变量即可定制
 - **Tailwind 友好**：类名与设计 token 映射，无硬编码色值
-- **组件分层**：Foundation 原子组件 + Chat 对话组件，开箱即用
+- **组件分层**：Basic 原子组件 + Chat 对话组件，开箱即用
 
 ## 两种使用方式
 
@@ -224,7 +226,7 @@ function App() {
 
 | 分层 | 说明 | 示例 |
 |------|------|------|
-| **Foundation** | 原子级 UI 组件 | Button, IconButton, Tooltip, Select, DropdownMenu, Tabs, Toast, Tag, Progress, Avatar, Table, Slider, Pagination, Collapse, Resizable, Scrollbar, Skeleton, Spinner, Kbd, EllipsisText, Switch, Toggle, ToggleGroup, RadioGroup, AlertDialog, OptionList … |
+| **Basic** | 原子级 UI 组件 | Button, IconButton, Tooltip, Select, DropdownMenu, Tabs, Toast, Tag, Progress, Avatar, Table, Slider, Pagination, Collapse, Resizable, Scrollbar, Skeleton, Spinner, Kbd, EllipsisText, Switch, Toggle, ToggleGroup, RadioGroup, AlertDialog, OptionList … |
 | **Chat** | 对话流相关组件 | ChatInput, SendButton, Request, Response, FileCard, FileAttachment, ImageAttachment, FolderButton, ReasoningStep, ToolInvocationCard, PermissionCard, MarkdownBody, GenerationStatusBar, ThinkingIndicator, ImageGenerating, RelatedPrompts, SuggestionPart, SidebarMenu … |
 
 完整导出见 [src/components/index.ts](src/components/index.ts)。图标通过 `IconsProvider` / `useIcon` 注入，可替换为 Lucide、Remix 等，见 [图标自定义说明](docs/图标自定义说明.md)。
@@ -269,7 +271,7 @@ src/
 ├── index.css       # dev 模式 CSS 入口
 ├── lib.css         # 库构建 CSS 入口（@tailwindcss/cli）
 ├── tokens/         # theme.css、scale.css
-├── components/     # foundation/、chat/
+├── components/     # basic/、chat/
 └── lib/            # 工具与 ThemeStyleProvider
 ```
 

package/cli/dist/utils/tokens.js

@@ -10,6 +10,41 @@
 import path from 'node:path';
 import fs from 'fs-extra';
 const TOKEN_MARKER = 'Spark Design tokens';
+/** 辅助函数：读取文件，不存在则返回空字符串 */
+async function readFileIfExists(filePath) {
+    if (await fs.pathExists(filePath)) {
+        return fs.readFile(filePath, 'utf-8');
+    }
+    return '';
+}
+/** 辅助函数：读取 scale 目录下的所有文件并内联 */
+async function readScaleContents(registryRoot) {
+    const scaleDir = path.join(registryRoot, 'tokens', 'scale');
+    const scaleLegacy = path.join(registryRoot, 'tokens', 'scale.css');
+    // 新结构：读取 scale/ 目录
+    if (await fs.pathExists(scaleDir)) {
+        const configContent = await readFileIfExists(path.join(scaleDir, 'config.css'));
+        const computedContent = await readFileIfExists(path.join(scaleDir, 'computed.css'));
+        const presetsDir = path.join(scaleDir, 'presets');
+        const compactContent = await readFileIfExists(path.join(presetsDir, 'compact.css'));
+        const softContent = await readFileIfExists(path.join(presetsDir, 'soft.css'));
+        const sharpContent = await readFileIfExists(path.join(presetsDir, 'sharp.css'));
+        const denseContent = await readFileIfExists(path.join(presetsDir, 'dense.css'));
+        return [configContent, computedContent, compactContent, softContent, sharpContent, denseContent]
+            .filter(Boolean)
+            .join('\n\n');
+    }
+    // 兼容旧结构：读取单文件 scale.css
+    if (await fs.pathExists(scaleLegacy)) {
+        const content = await fs.readFile(scaleLegacy, 'utf-8');
+        // 如果是 @import 入口，跳过
+        if (content.includes('@import "./scale/')) {
+            return '';
+        }
+        return content;
+    }
+    return '';
+}
 /** 项目里是否已有 token（入口 CSS 内联了变量、或已 import qoder-tokens.css） */
 export async function projectHasTokens(cwd) {
     const candidates = [
@@ -30,12 +65,19 @@ export async function projectHasTokens(cwd) {
     }
     return false;
 }
-/** 仅 init 使用：把 theme+scale+scrollbar-utility 注入到用户入口 CSS（globals.css / index.css） */
+/** 仅 init 使用：把 tokens 注入到用户入口 CSS（globals.css / index.css） */
 export async function ensureDesignTokens(cwd, registryRoot) {
+    // 新结构：使用 index.css 统一入口
+    const indexPath = path.join(registryRoot, 'tokens', 'index.css');
+    // 兼容旧结构
     const themePath = path.join(registryRoot, 'tokens', 'theme.css');
     const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
     const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
-    if (!(await fs.pathExists(themePath)) || !(await fs.pathExists(scalePath))) {
+    const themesDir = path.join(registryRoot, 'tokens', 'themes');
+    // 检查是否有可用的 tokens 文件
+    const hasNewStructure = await fs.pathExists(indexPath);
+    const hasLegacyStructure = (await fs.pathExists(themePath)) && (await fs.pathExists(scalePath));
+    if (!hasNewStructure && !hasLegacyStructure) {
         return null;
     }
     if (await projectHasTokens(cwd)) {
@@ -49,13 +91,34 @@ export async function ensureDesignTokens(cwd, registryRoot) {
         cssEntry = path.join(cwd, 'src', 'index.css');
         await fs.ensureDir(path.dirname(cssEntry));
     }
-    const themeContent = await fs.readFile(themePath, 'utf-8');
-    const scaleContent = await fs.readFile(scalePath, 'utf-8');
-    const scrollbarContent = (await fs.pathExists(scrollbarPath))
-        ? await fs.readFile(scrollbarPath, 'utf-8')
-        : '';
-    const tokensBlock = `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
-        (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    let tokensBlock;
+    if (hasNewStructure && (await fs.pathExists(themesDir))) {
+        // 新结构：读取拆分的主题文件并内联
+        const scaleContent = await readScaleContents(registryRoot);
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
+        const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        tokensBlock = `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n` +
+            `${scaleContent}\n\n` +
+            `${lightContent}\n\n` +
+            `${darkContent}\n\n` +
+            `${lightParchmentContent}\n\n` +
+            `${darkParchmentContent}\n` +
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    else {
+        // 兼容旧结构
+        const themeContent = await fs.readFile(themePath, 'utf-8');
+        const scaleContent = await fs.readFile(scalePath, 'utf-8');
+        const scrollbarContent = (await fs.pathExists(scrollbarPath))
+            ? await fs.readFile(scrollbarPath, 'utf-8')
+            : '';
+        tokensBlock =
+            `/* ${TOKEN_MARKER} - 由 npx sparkdesign init 写入，驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+                (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
     const existing = (await fs.pathExists(cssEntry)) ? await fs.readFile(cssEntry, 'utf-8') : '';
     const newContent = tokensBlock + (existing ? '\n' + existing : '');
     await fs.writeFile(cssEntry, newContent, 'utf-8');
@@ -64,23 +127,46 @@ export async function ensureDesignTokens(cwd, registryRoot) {
 const DEDICATED_TOKENS_FILE = 'qoder-tokens.css';
 /** 仅 add 使用：在 src 下生成独立 token 文件，不修改用户入口。若已存在则不覆盖。返回路径及是否本次创建。 */
 export async function writeQoderTokensFile(cwd, registryRoot) {
+    const indexPath = path.join(registryRoot, 'tokens', 'index.css');
     const themePath = path.join(registryRoot, 'tokens', 'theme.css');
     const scalePath = path.join(registryRoot, 'tokens', 'scale.css');
     const scrollbarPath = path.join(registryRoot, 'tokens', 'scrollbar-utility.css');
+    const themesDir = path.join(registryRoot, 'tokens', 'themes');
     const targetPath = path.join(cwd, 'src', DEDICATED_TOKENS_FILE);
     if (await fs.pathExists(targetPath)) {
         return { path: targetPath, created: false };
     }
-    if (!(await fs.pathExists(themePath)) || !(await fs.pathExists(scalePath))) {
+    const hasNewStructure = await fs.pathExists(indexPath);
+    const hasLegacyStructure = (await fs.pathExists(themePath)) && (await fs.pathExists(scalePath));
+    if (!hasNewStructure && !hasLegacyStructure) {
         return { path: targetPath, created: false };
     }
-    const themeContent = await fs.readFile(themePath, 'utf-8');
-    const scaleContent = await fs.readFile(scalePath, 'utf-8');
-    const scrollbarContent = (await fs.pathExists(scrollbarPath))
-        ? await fs.readFile(scrollbarPath, 'utf-8')
-        : '';
-    const content = `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
-        (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    let content;
+    if (hasNewStructure && (await fs.pathExists(themesDir))) {
+        // 新结构：读取拆分的主题文件并内联
+        const scaleContent = await readScaleContents(registryRoot);
+        const lightContent = await readFileIfExists(path.join(themesDir, 'light-qoder.css'));
+        const darkContent = await readFileIfExists(path.join(themesDir, 'dark-qoder.css'));
+        const lightParchmentContent = await readFileIfExists(path.join(themesDir, 'light-parchment.css'));
+        const darkParchmentContent = await readFileIfExists(path.join(themesDir, 'dark-parchment.css'));
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        content = `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n` +
+            `${scaleContent}\n\n` +
+            `${lightContent}\n\n` +
+            `${darkContent}\n\n` +
+            `${lightParchmentContent}\n\n` +
+            `${darkParchmentContent}\n` +
+            (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
+    else {
+        // 兼容旧结构
+        const themeContent = await fs.readFile(themePath, 'utf-8');
+        const scaleContent = await fs.readFile(scalePath, 'utf-8');
+        const scrollbarContent = await readFileIfExists(scrollbarPath);
+        content =
+            `/* ${TOKEN_MARKER} - 在应用入口 import 此文件以驱动组件样式 */\n${scaleContent}\n\n${themeContent}\n` +
+                (scrollbarContent ? `\n${scrollbarContent}\n` : '');
+    }
     await fs.ensureDir(path.dirname(targetPath));
     await fs.writeFile(targetPath, content, 'utf-8');
     return { path: targetPath, created: true };

package/cli/registry/basic/button.test.tsx

@@ -0,0 +1,333 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { Button } from './button'
+import { createRef } from 'react'
+
+describe('Button', () => {
+  // ============================================================
+  // 渲染测试
+  // ============================================================
+  describe('渲染', () => {
+    it('应正确渲染 children 文本', () => {
+      render(<Button>点击我</Button>)
+      expect(screen.getByRole('button')).toHaveTextContent('点击我')
+    })
+
+    it('应渲染为原生 button 元素', () => {
+      render(<Button>按钮</Button>)
+      expect(screen.getByRole('button').tagName).toBe('BUTTON')
+    })
+
+    it('应设置正确的 displayName', () => {
+      expect(Button.displayName).toBe('Button')
+    })
+  })
+
+  // ============================================================
+  // Variant 变体测试
+  // ============================================================
+  describe('variant 变体', () => {
+    it('默认应使用 ghost 变体', () => {
+      render(<Button>Ghost</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-transparent')
+    })
+
+    it('variant="primary" 应应用主色样式', () => {
+      render(<Button variant="primary">Primary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-primary')
+    })
+
+    it('variant="secondary" 应应用次级样式', () => {
+      render(<Button variant="secondary">Secondary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-bg-highlight')
+    })
+
+    it('variant="tertiary" 应应用三级样式', () => {
+      render(<Button variant="tertiary">Tertiary</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-fill-secondary')
+    })
+
+    it('variant="text" 应应用纯文字样式', () => {
+      render(<Button variant="text">Text</Button>)
+      expect(screen.getByRole('button')).toHaveClass('bg-transparent')
+      expect(screen.getByRole('button')).toHaveClass('text-text-secondary')
+    })
+  })
+
+  // ============================================================
+  // Size 尺寸测试
+  // ============================================================
+  describe('size 尺寸', () => {
+    it('默认应使用 md 尺寸', () => {
+      render(<Button>Medium</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-9')
+    })
+
+    it('size="sm" 应应用小尺寸样式', () => {
+      render(<Button size="sm">Small</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-7')
+      expect(screen.getByRole('button')).toHaveClass('text-xs')
+    })
+
+    it('size="md" 应应用中等尺寸样式', () => {
+      render(<Button size="md">Medium</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-9')
+      expect(screen.getByRole('button')).toHaveClass('text-sm')
+    })
+
+    it('size="lg" 应应用大尺寸样式', () => {
+      render(<Button size="lg">Large</Button>)
+      expect(screen.getByRole('button')).toHaveClass('h-11')
+      expect(screen.getByRole('button')).toHaveClass('text-base')
+    })
+  })
+
+  // ============================================================
+  // Rounded 圆角测试
+  // ============================================================
+  describe('rounded 圆角', () => {
+    it('默认应使用 square 圆角', () => {
+      render(<Button>Square</Button>)
+      expect(screen.getByRole('button')).toHaveClass('rounded')
+      expect(screen.getByRole('button')).not.toHaveClass('rounded-full')
+    })
+
+    it('rounded="pill" 应应用全圆角样式', () => {
+      render(<Button rounded="pill">Pill</Button>)
+      expect(screen.getByRole('button')).toHaveClass('rounded-full')
+    })
+  })
+
+  // ============================================================
+  // textButton 模式测试
+  // ============================================================
+  describe('textButton 模式', () => {
+    it('textButton=true 应移除高度和内边距', () => {
+      render(<Button textButton>Text Only</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('h-auto')
+      expect(button).toHaveClass('px-0')
+    })
+
+    it('textButton=true 应强制使用 text 变体样式', () => {
+      render(<Button textButton variant="primary">Text</Button>)
+      const button = screen.getByRole('button')
+      // 即使传入 primary，textButton 也会覆盖为 text 变体
+      expect(button).toHaveClass('bg-transparent')
+    })
+
+    it('textButton 应保留正确的字体大小', () => {
+      const { rerender } = render(<Button textButton size="sm">SM</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-xs')
+
+      rerender(<Button textButton size="md">MD</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-sm')
+
+      rerender(<Button textButton size="lg">LG</Button>)
+      expect(screen.getByRole('button')).toHaveClass('text-base')
+    })
+  })
+
+  // ============================================================
+  // 图标测试
+  // ============================================================
+  describe('图标', () => {
+    it('应渲染 prefixIcon', () => {
+      render(
+        <Button prefixIcon={<span data-testid="prefix">←</span>}>
+          有前置图标
+        </Button>
+      )
+      expect(screen.getByTestId('prefix')).toBeInTheDocument()
+      expect(screen.getByTestId('prefix')).toHaveTextContent('←')
+    })
+
+    it('应渲染 suffixIcon', () => {
+      render(
+        <Button suffixIcon={<span data-testid="suffix">→</span>}>
+          有后置图标
+        </Button>
+      )
+      expect(screen.getByTestId('suffix')).toBeInTheDocument()
+      expect(screen.getByTestId('suffix')).toHaveTextContent('→')
+    })
+
+    it('应同时渲染前后置图标', () => {
+      render(
+        <Button
+          prefixIcon={<span data-testid="prefix">←</span>}
+          suffixIcon={<span data-testid="suffix">→</span>}
+        >
+          双图标
+        </Button>
+      )
+      expect(screen.getByTestId('prefix')).toBeInTheDocument()
+      expect(screen.getByTestId('suffix')).toBeInTheDocument()
+    })
+
+    it('无图标时不应渲染图标包裹元素', () => {
+      const { container } = render(<Button>无图标</Button>)
+      // 检查没有图标包裹的 span 元素
+      const iconWrappers = container.querySelectorAll('button > span.inline-flex')
+      expect(iconWrappers).toHaveLength(0)
+    })
+  })
+
+  // ============================================================
+  // 交互测试
+  // ============================================================
+  describe('交互', () => {
+    it('点击时应触发 onClick 回调', () => {
+      const handleClick = vi.fn()
+      render(<Button onClick={handleClick}>点击</Button>)
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+    it('多次点击应触发相应次数的回调', () => {
+      const handleClick = vi.fn()
+      render(<Button onClick={handleClick}>点击</Button>)
+
+      const button = screen.getByRole('button')
+      fireEvent.click(button)
+      fireEvent.click(button)
+      fireEvent.click(button)
+
+      expect(handleClick).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  // ============================================================
+  // Disabled 状态测试
+  // ============================================================
+  describe('disabled 状态', () => {
+    it('disabled=true 应设置 disabled 属性', () => {
+      render(<Button disabled>禁用</Button>)
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('disabled 时应应用禁用样式', () => {
+      render(<Button disabled>禁用</Button>)
+      expect(screen.getByRole('button')).toHaveClass('disabled:opacity-50')
+      expect(screen.getByRole('button')).toHaveClass('disabled:cursor-not-allowed')
+    })
+
+    it('disabled 时点击不应触发 onClick', () => {
+      const handleClick = vi.fn()
+      render(<Button disabled onClick={handleClick}>禁用</Button>)
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+
+    it('默认不应禁用', () => {
+      render(<Button>正常</Button>)
+      expect(screen.getByRole('button')).not.toBeDisabled()
+    })
+  })
+
+  // ============================================================
+  // Ref 转发测试
+  // ============================================================
+  describe('ref 转发', () => {
+    it('应正确转发 ref 到 button 元素', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Button ref={ref}>带 Ref</Button>)
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it('ref.current 应指向渲染的 button', () => {
+      const ref = createRef<HTMLButtonElement>()
+      render(<Button ref={ref}>带 Ref</Button>)
+
+      expect(ref.current).toBe(screen.getByRole('button'))
+    })
+
+    it('callback ref 应被正确调用', () => {
+      const callbackRef = vi.fn()
+      render(<Button ref={callbackRef}>Callback Ref</Button>)
+
+      expect(callbackRef).toHaveBeenCalled()
+      expect(callbackRef.mock.calls[0][0]).toBeInstanceOf(HTMLButtonElement)
+    })
+  })
+
+  // ============================================================
+  // className 覆盖测试
+  // ============================================================
+  describe('className 覆盖', () => {
+    it('应合并自定义 className', () => {
+      render(<Button className="custom-class">自定义类</Button>)
+      expect(screen.getByRole('button')).toHaveClass('custom-class')
+    })
+
+    it('自定义 className 应与默认类名共存', () => {
+      render(<Button className="my-custom" variant="primary">合并类</Button>)
+      const button = screen.getByRole('button')
+      expect(button).toHaveClass('my-custom')
+      expect(button).toHaveClass('bg-primary')
+    })
+  })
+
+  // ============================================================
+  // 原生属性透传测试
+  // ============================================================
+  describe('原生属性透传', () => {
+    it('应透传 type 属性', () => {
+      render(<Button type="submit">提交</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+    })
+
+    it('应透传 aria-label 属性', () => {
+      render(<Button aria-label="关闭按钮">×</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('aria-label', '关闭按钮')
+    })
+
+    it('应透传 data-* 属性', () => {
+      render(<Button data-testid="my-button">测试</Button>)
+      expect(screen.getByTestId('my-button')).toBeInTheDocument()
+    })
+
+    it('应透传 id 属性', () => {
+      render(<Button id="unique-button">ID 按钮</Button>)
+      expect(screen.getByRole('button')).toHaveAttribute('id', 'unique-button')
+    })
+  })
+
+  // ============================================================
+  // 组合场景测试
+  // ============================================================
+  describe('组合场景', () => {
+    it('应支持所有 props 组合', () => {
+      const handleClick = vi.fn()
+      render(
+        <Button
+          variant="primary"
+          size="lg"
+          rounded="pill"
+          prefixIcon={<span>🚀</span>}
+          suffixIcon={<span>✨</span>}
+          onClick={handleClick}
+          className="extra-class"
+          data-testid="combo-button"
+        >
+          组合按钮
+        </Button>
+      )
+
+      const button = screen.getByTestId('combo-button')
+      expect(button).toHaveClass('bg-primary')
+      expect(button).toHaveClass('h-11')
+      expect(button).toHaveClass('rounded-full')
+      expect(button).toHaveClass('extra-class')
+      expect(button).toHaveTextContent('🚀')
+      expect(button).toHaveTextContent('组合按钮')
+      expect(button).toHaveTextContent('✨')
+
+      fireEvent.click(button)
+      expect(handleClick).toHaveBeenCalled()
+    })
+  })
+})

package/cli/registry/chat/{question-part.tsx → ask-user-part.tsx}

@@ -5,7 +5,7 @@ import { QuestionnaireLine, ArrowDownSLine } from '../basic/icons-inline'
 
 const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0 text-text-secondary'
 
-export interface QuestionPartProps {
+export interface AskUserPartProps {
   title?: string
   question: string
   skipText?: string
@@ -22,7 +22,7 @@ export interface QuestionPartProps {
 
 const defaultHeaderIcon = <QuestionnaireLine className={ICON_CLASS} />
 
-export function QuestionPart({
+export function AskUserPart({
   title = 'Initializing agent…',
   question,
   skipText = 'Skip ⌘⌫',
@@ -34,7 +34,7 @@ export function QuestionPart({
   collapsible = true,
   className,
   headerIcon,
-}: QuestionPartProps) {
+}: AskUserPartProps) {
   return (
     <CollapsibleCard
       headerIcon={headerIcon ?? defaultHeaderIcon}
@@ -67,4 +67,4 @@ export function QuestionPart({
   )
 }
 
-QuestionPart.displayName = 'QuestionPart'
+AskUserPart.displayName = 'AskUserPart'

package/cli/registry/chat/{browser-use-part.tsx → browser-action-part.tsx}

@@ -12,12 +12,12 @@ import { GlobalLine, WarningLine, Forbid2Line } from '../basic/icons-inline'
 
 const ICON_CLASS = 'w-[var(--font-size-sm)] h-[var(--font-size-sm)] shrink-0'
 
-export type BrowserUseStatus = 'normal' | 'failed' | 'skipped'
+export type BrowserActionStatus = 'normal' | 'failed' | 'skipped'
 
-export interface BrowserUsePartProps {
+export interface BrowserActionPartProps {
   description?: string
   content?: string
-  status?: BrowserUseStatus
+  status?: BrowserActionStatus
   onRun?: () => void
   onSkip?: () => void
   onViewDetail?: () => void
@@ -83,7 +83,7 @@ function BrowserFooter({
   )
 }
 
-export function BrowserUsePart({
+export function BrowserActionPart({
   description,
   content,
   status = 'normal',
@@ -97,7 +97,7 @@ export function BrowserUsePart({
   normalIcon,
   failedIcon,
   skippedIcon,
-}: BrowserUsePartProps) {
+}: BrowserActionPartProps) {
   const [askValue, setAskValue] = useState('Ask every time')
 
   const handleAskChange = (value: string) => {
@@ -163,4 +163,4 @@ export function BrowserUsePart({
   )
 }
 
-BrowserUsePart.displayName = 'BrowserUsePart'
+BrowserActionPart.displayName = 'BrowserActionPart'

package/cli/registry/chat/{suggestion-part.tsx → hint-banner.tsx}

@@ -10,7 +10,7 @@ import {
 import { CloseLine, ArrowDownSLine, WarningLine, SparklingLine } from '../basic/icons-inline'
 import { Scrollbar } from '../basic/scrollbar'
 
-export interface SuggestionPartProps {
+export interface HintBannerProps {
   type?: 'wiki' | 'credits'
   title?: string
   description?: string
@@ -36,7 +36,7 @@ const closeClass = 'h-3.5 w-3.5'
 const arrowClass = 'h-3 w-3'
 const suggestionClass = 'h-4 w-4'
 
-export function SuggestionPart({
+export function HintBanner({
   type = 'wiki',
   title,
   description,
@@ -52,7 +52,7 @@ export function SuggestionPart({
   suggestionIcon,
   dataStyle,
   dataTheme,
-}: SuggestionPartProps) {
+}: HintBannerProps) {
   const isCreditsType = type === 'credits'
   const defaultClose = closeIcon ?? <CloseLine className={closeClass} />
   const defaultArrow = arrowDownSIcon ?? <ArrowDownSLine className={arrowClass} />
@@ -162,4 +162,4 @@ export function SuggestionPart({
   )
 }
 
-SuggestionPart.displayName = 'SuggestionPart'
+HintBanner.displayName = 'HintBanner'