{props.block.tools.map((tool) => {
- const filePath = getInputStringAny(tool.tool.input, ['file_path', 'path', 'file', 'filePath', 'notebook_path'])
- const resolvedPath = filePath ? resolveDisplayPath(filePath, props.metadata) : null
return (
- {resolvedPath && resolvedPath !== '' ? (
-
- {basename(resolvedPath)}
-
- ) : null}
)
diff --git a/web/src/components/ToolCard/groupedPresentation.test.ts b/web/src/components/ToolCard/groupedPresentation.test.ts
new file mode 100644
index 00000000..71bcee6c
--- /dev/null
+++ b/web/src/components/ToolCard/groupedPresentation.test.ts
@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest'
+import { en, zhCN } from '@/lib/locales'
+import type { ToolCallBlock } from '@/chat/types'
+import type { ToolGroupBlock } from '@/chat/toolGroups'
+import { formatGroupedHeaderSubtitle, formatGroupedHeaderTitle, formatGroupedRowLabel, inferGroupedSummaryIntent } from '@/components/ToolCard/groupedPresentation'
+
+type Dict = Record
+
+function makeTranslator(dict: Dict) {
+ return (key: string, params?: Record) => {
+ const template = dict[key] ?? key
+ if (!params) return template
+ return template.replace(/\{(\w+)\}/g, (match, token) => {
+ const value = params[token]
+ return value === undefined ? match : String(value)
+ })
+ }
+}
+
+function makeTool(id: string, name: string, input: unknown = {}): ToolCallBlock {
+ return {
+ kind: 'tool-call',
+ id,
+ localId: null,
+ createdAt: 1,
+ invokedAt: null,
+ tool: {
+ id,
+ name,
+ state: 'completed',
+ input,
+ createdAt: 1,
+ startedAt: 1,
+ completedAt: 2,
+ description: null,
+ result: null,
+ permission: undefined,
+ },
+ children: [],
+ }
+}
+
+function makeGroup(tools: ToolCallBlock[]): ToolGroupBlock {
+ return {
+ kind: 'tool-group',
+ id: 'tool-group:test',
+ createdAt: 1,
+ invokedAt: null,
+ firstToolId: tools[0].id,
+ lastToolId: tools[tools.length - 1].id,
+ tools,
+ defaultOpen: false,
+ historyState: 'complete',
+ needsOlderHistory: false,
+ summary: {
+ totalTools: tools.length,
+ countsByKind: {
+ read: tools.filter((tool) => tool.tool.name === 'Read').length,
+ search: tools.filter((tool) => tool.tool.name === 'Grep' || tool.tool.name === 'Glob').length,
+ command: tools.filter((tool) => tool.tool.name === 'Bash' || tool.tool.name === 'CodexBash' || tool.tool.name === 'shell_command').length,
+ mutation: tools.filter((tool) => tool.tool.name === 'Edit' || tool.tool.name === 'Write' || tool.tool.name === 'MultiEdit').length,
+ web: tools.filter((tool) => tool.tool.name === 'WebFetch' || tool.tool.name === 'WebSearch').length,
+ other: 0,
+ },
+ fileTargets: [],
+ commandTargets: [],
+ searchTargets: [],
+ urlTargets: [],
+ otherTargets: [],
+ errorCount: 0,
+ runningCount: 0,
+ pendingCount: 0,
+ },
+ }
+}
+
+const tEn = makeTranslator(en as Dict)
+const tZh = makeTranslator(zhCN as Dict)
+
+describe('inferGroupedSummaryIntent', () => {
+ it('treats file inspection shell commands as inspect-files intent', () => {
+ const tool = makeTool('shell-1', 'shell_command', { command: 'Get-ChildItem src -Recurse' })
+ expect(inferGroupedSummaryIntent(tool)).toBe('inspect-files')
+ })
+
+ it('treats content search shell commands as search-content intent', () => {
+ const tool = makeTool('shell-2', 'Bash', { command: 'rg "TodoWrite" web/src' })
+ expect(inferGroupedSummaryIntent(tool)).toBe('search-content')
+ })
+})
+
+describe('formatGroupedRowLabel', () => {
+ it('returns a friendly english label without leaking raw shell command text', () => {
+ const tool = makeTool('shell-3', 'shell_command', { command: 'Get-ChildItem src -Recurse' })
+ const label = formatGroupedRowLabel(tool, tEn)
+
+ expect(label).toBe('Inspect project files')
+ expect(label).not.toContain('Get-ChildItem')
+ expect(label).not.toContain('src')
+ })
+
+ it('returns a friendly chinese label for command execution', () => {
+ const tool = makeTool('shell-4', 'Bash', { command: 'bun run build:web' })
+ expect(formatGroupedRowLabel(tool, tZh)).toBe('执行项目命令')
+ })
+})
+
+describe('formatGroupedHeaderTitle', () => {
+ it('adds a +n suffix for grouped file inspection activity', () => {
+ const group = makeGroup([
+ makeTool('shell-1', 'shell_command', { command: 'Get-ChildItem src -Recurse' }),
+ makeTool('shell-2', 'shell_command', { command: 'Get-Content package.json' }),
+ makeTool('shell-3', 'shell_command', { command: 'dir web' }),
+ makeTool('shell-4', 'shell_command', { command: 'ls docs' }),
+ makeTool('shell-5', 'shell_command', { command: 'cat README.md' }),
+ ])
+
+ expect(formatGroupedHeaderTitle(group, tZh)).toBe('检查项目文件 +4')
+ })
+})
+
+describe('formatGroupedHeaderSubtitle', () => {
+ it('keeps the aggregate counter line short and localized', () => {
+ const group = makeGroup([
+ makeTool('shell-1', 'shell_command', { command: 'bun run build:web' }),
+ makeTool('shell-2', 'shell_command', { command: 'bun run test' }),
+ ])
+
+ expect(formatGroupedHeaderSubtitle(group, tEn)).toBe('Run 2')
+ expect(formatGroupedHeaderSubtitle(group, tZh)).toBe('执行 2')
+ })
+})
diff --git a/web/src/components/ToolCard/groupedPresentation.ts b/web/src/components/ToolCard/groupedPresentation.ts
new file mode 100644
index 00000000..ceb04a04
--- /dev/null
+++ b/web/src/components/ToolCard/groupedPresentation.ts
@@ -0,0 +1,139 @@
+import type { ToolGroupBlock } from '@/chat/toolGroups'
+import type { ToolCallBlock } from '@/chat/types'
+import { getInputStringAny } from '@/lib/toolInputUtils'
+
+type Translator = (key: string, params?: Record) => string
+
+export type GroupedSummaryIntent =
+ | 'inspect-files'
+ | 'search-content'
+ | 'run-project-command'
+ | 'modify-files'
+ | 'open-web'
+ | 'generic-command'
+ | 'generic-tool'
+
+const FILE_INSPECTION_COMMAND_RE = /\b(get-childitem|ls|dir|get-content|cat|type|tree)\b/i
+const CONTENT_SEARCH_COMMAND_RE = /\b(rg|grep|select-string|findstr)\b/i
+
+function getCommandText(input: unknown): string | null {
+ const direct = getInputStringAny(input, ['command', 'cmd'])
+ if (direct) return direct
+
+ if (!input || typeof input !== 'object') return null
+ const command = (input as { command?: unknown }).command
+ if (!Array.isArray(command)) return null
+
+ const parts = command.filter((part): part is string => typeof part === 'string' && part.length > 0)
+ return parts.length > 0 ? parts.join(' ') : null
+}
+
+function getIntentLabel(intent: GroupedSummaryIntent, t: Translator): string {
+ switch (intent) {
+ case 'inspect-files':
+ return t('toolGroup.friendly.inspectFiles')
+ case 'search-content':
+ return t('toolGroup.friendly.searchContent')
+ case 'run-project-command':
+ return t('toolGroup.friendly.runCommands')
+ case 'modify-files':
+ return t('toolGroup.friendly.editFiles')
+ case 'open-web':
+ return t('toolGroup.friendly.openWeb')
+ case 'generic-command':
+ return t('toolGroup.friendly.genericCommand')
+ default:
+ return t('toolGroup.friendly.genericTool')
+ }
+}
+
+export function inferGroupedSummaryIntent(tool: ToolCallBlock): GroupedSummaryIntent {
+ const toolName = tool.tool.name
+ const command = getCommandText(tool.tool.input)
+
+ if (toolName === 'Read' || toolName === 'LS' || toolName === 'NotebookRead') {
+ return 'inspect-files'
+ }
+ if (toolName === 'Grep' || toolName === 'Glob') {
+ return 'search-content'
+ }
+ if (toolName === 'Edit' || toolName === 'MultiEdit' || toolName === 'Write' || toolName === 'NotebookEdit' || toolName === 'CodexPatch' || toolName === 'CodexDiff') {
+ return 'modify-files'
+ }
+ if (toolName === 'WebFetch' || toolName === 'WebSearch') {
+ return 'open-web'
+ }
+
+ if (toolName === 'Bash' || toolName === 'CodexBash' || toolName === 'shell_command') {
+ if (command && FILE_INSPECTION_COMMAND_RE.test(command)) {
+ return 'inspect-files'
+ }
+ if (command && CONTENT_SEARCH_COMMAND_RE.test(command)) {
+ return 'search-content'
+ }
+ return 'run-project-command'
+ }
+
+ return 'generic-tool'
+}
+
+function getPrimaryIntent(block: ToolGroupBlock): GroupedSummaryIntent {
+ const counts = new Map()
+ const order: GroupedSummaryIntent[] = []
+
+ for (const tool of block.tools) {
+ const intent = inferGroupedSummaryIntent(tool)
+ if (!counts.has(intent)) {
+ order.push(intent)
+ }
+ counts.set(intent, (counts.get(intent) ?? 0) + 1)
+ }
+
+ let primary: GroupedSummaryIntent = 'generic-tool'
+ let maxCount = -1
+
+ for (const intent of order) {
+ const count = counts.get(intent) ?? 0
+ if (count > maxCount) {
+ primary = intent
+ maxCount = count
+ }
+ }
+
+ return primary
+}
+
+export function formatGroupedHeaderTitle(block: ToolGroupBlock, t: Translator): string {
+ const label = getIntentLabel(getPrimaryIntent(block), t)
+ const extraCount = block.tools.length - 1
+ return extraCount > 0 ? `${label} +${extraCount}` : label
+}
+
+export function formatGroupedHeaderSubtitle(block: ToolGroupBlock, t: Translator): string | null {
+ const parts: string[] = []
+
+ if (block.summary.countsByKind.command > 0) {
+ parts.push(t('toolGroup.summary.command', { n: block.summary.countsByKind.command }))
+ }
+ if (block.summary.countsByKind.search > 0) {
+ parts.push(t('toolGroup.summary.search', { n: block.summary.countsByKind.search }))
+ }
+ if (block.summary.countsByKind.read > 0) {
+ parts.push(t('toolGroup.summary.read', { n: block.summary.countsByKind.read }))
+ }
+ if (block.summary.countsByKind.mutation > 0) {
+ parts.push(t('toolGroup.summary.mutation', { n: block.summary.countsByKind.mutation }))
+ }
+ if (block.summary.countsByKind.web > 0) {
+ parts.push(t('toolGroup.summary.web', { n: block.summary.countsByKind.web }))
+ }
+ if (block.summary.countsByKind.other > 0) {
+ parts.push(t('toolGroup.summary.other', { n: block.summary.countsByKind.other }))
+ }
+
+ return parts.length > 0 ? parts.join(' · ') : null
+}
+
+export function formatGroupedRowLabel(tool: ToolCallBlock, t: Translator): string {
+ return getIntentLabel(inferGroupedSummaryIntent(tool), t)
+}
diff --git a/web/src/hooks/useChatSurfaceColors.test.ts b/web/src/hooks/useChatSurfaceColors.test.ts
new file mode 100644
index 00000000..43d2ebff
--- /dev/null
+++ b/web/src/hooks/useChatSurfaceColors.test.ts
@@ -0,0 +1,84 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import {
+ getChatSurfaceColorPickerValue,
+ getToolGroupBackgroundPreference,
+ getUserMessageBackgroundPreference,
+ initializeChatSurfaceColors,
+ toPresetChatSurfaceColorPreference,
+ useChatSurfaceColors,
+} from '@/hooks/useChatSurfaceColors'
+
+describe('useChatSurfaceColors', () => {
+ beforeEach(() => {
+ localStorage.clear()
+ document.documentElement.removeAttribute('data-theme')
+ document.documentElement.style.removeProperty('--app-tool-group-bg')
+ document.documentElement.style.removeProperty('--app-chat-user-surface-bg')
+ })
+
+ afterEach(() => {
+ vi.restoreAllMocks()
+ })
+
+ it('falls back to default when storage is missing or invalid', () => {
+ localStorage.setItem('hapi-tool-group-bg', 'preset:invalid')
+ localStorage.setItem('hapi-user-message-bg', 'custom:not-a-color')
+
+ expect(getToolGroupBackgroundPreference()).toBe('default')
+ expect(getUserMessageBackgroundPreference()).toBe('default')
+ })
+
+ it('stores preset and custom preferences using stable string values', () => {
+ const { result } = renderHook(() => useChatSurfaceColors())
+
+ act(() => {
+ result.current.setToolGroupBackground(toPresetChatSurfaceColorPreference('soft-blue'))
+ result.current.setUserMessageBackground('custom:#88cc44')
+ })
+
+ expect(localStorage.getItem('hapi-tool-group-bg')).toBe('preset:soft-blue')
+ expect(localStorage.getItem('hapi-user-message-bg')).toBe('custom:#88cc44')
+ expect(result.current.toolGroupBackground).toBe('preset:soft-blue')
+ expect(result.current.userMessageBackground).toBe('custom:#88cc44')
+ })
+
+ it('applies root css variables only for non-default preferences', () => {
+ const { result } = renderHook(() => useChatSurfaceColors())
+
+ expect(document.documentElement.style.getPropertyValue('--app-tool-group-bg')).toBe('')
+ expect(document.documentElement.style.getPropertyValue('--app-chat-user-surface-bg')).toBe('')
+
+ act(() => {
+ result.current.setToolGroupBackground('preset:soft-green')
+ result.current.setUserMessageBackground('custom:#88cc44')
+ })
+
+ expect(document.documentElement.style.getPropertyValue('--app-tool-group-bg')).toMatch(/^#/)
+ expect(document.documentElement.style.getPropertyValue('--app-chat-user-surface-bg')).toMatch(/^#/)
+
+ act(() => {
+ result.current.setToolGroupBackground('default')
+ result.current.setUserMessageBackground('default')
+ })
+
+ expect(document.documentElement.style.getPropertyValue('--app-tool-group-bg')).toBe('')
+ expect(document.documentElement.style.getPropertyValue('--app-chat-user-surface-bg')).toBe('')
+ })
+
+ it('reapplies stored values during initialization', () => {
+ localStorage.setItem('hapi-tool-group-bg', 'preset:soft-yellow')
+ localStorage.setItem('hapi-user-message-bg', 'custom:#88cc44')
+
+ initializeChatSurfaceColors()
+
+ expect(document.documentElement.style.getPropertyValue('--app-tool-group-bg')).toMatch(/^#/)
+ expect(document.documentElement.style.getPropertyValue('--app-chat-user-surface-bg')).toMatch(/^#/)
+ })
+
+ it('returns a valid picker value for default, preset, and custom preferences', () => {
+ expect(getChatSurfaceColorPickerValue('default')).toBe('#f2f4f6')
+ expect(getChatSurfaceColorPickerValue('preset:soft-blue')).toBe('#7db7ff')
+ expect(getChatSurfaceColorPickerValue('custom:#88cc44')).toBe('#88cc44')
+ })
+})
diff --git a/web/src/hooks/useChatSurfaceColors.ts b/web/src/hooks/useChatSurfaceColors.ts
new file mode 100644
index 00000000..f4402f16
--- /dev/null
+++ b/web/src/hooks/useChatSurfaceColors.ts
@@ -0,0 +1,263 @@
+import { useCallback, useEffect, useState } from 'react'
+
+type ThemeMode = 'light' | 'dark'
+type SurfaceKey = 'tool-group' | 'user-message'
+
+export type ChatSurfaceColorPreset = 'default' | 'soft-blue' | 'soft-green' | 'soft-yellow'
+export type ChatSurfaceColorPreference = 'default' | 'preset:soft-blue' | 'preset:soft-green' | 'preset:soft-yellow' | `custom:#${string}`
+
+export const DEFAULT_CHAT_SURFACE_COLOR_PREFERENCE: ChatSurfaceColorPreference = 'default'
+
+const TOOL_GROUP_BG_STORAGE_KEY = 'hapi-tool-group-bg'
+const USER_MESSAGE_BG_STORAGE_KEY = 'hapi-user-message-bg'
+const TOOL_GROUP_BG_CSS_VAR = '--app-tool-group-bg'
+const USER_MESSAGE_BG_CSS_VAR = '--app-chat-user-surface-bg'
+const DEFAULT_PICKER_COLOR = '#f2f4f6'
+
+const PRESET_ACCENTS: Record, string> = {
+ 'soft-blue': '#7db7ff',
+ 'soft-green': '#8fd19e',
+ 'soft-yellow': '#f0d77a',
+}
+
+const THEME_BASES: Record> = {
+ light: {
+ 'tool-group': '#f2f4f6',
+ 'user-message': '#f2f4f6',
+ },
+ dark: {
+ 'tool-group': '#2b2f34',
+ 'user-message': '#2b2f34',
+ },
+}
+
+let initialized = false
+
+function isBrowser(): boolean {
+ return typeof window !== 'undefined' && typeof document !== 'undefined'
+}
+
+function safeGetItem(key: string): string | null {
+ if (!isBrowser()) return null
+ try {
+ return localStorage.getItem(key)
+ } catch {
+ return null
+ }
+}
+
+function safeSetItem(key: string, value: string): void {
+ if (!isBrowser()) return
+ try {
+ localStorage.setItem(key, value)
+ } catch {
+ // Ignore storage errors
+ }
+}
+
+function safeRemoveItem(key: string): void {
+ if (!isBrowser()) return
+ try {
+ localStorage.removeItem(key)
+ } catch {
+ // Ignore storage errors
+ }
+}
+
+function isHexColor(value: string): boolean {
+ return /^#[0-9a-f]{6}$/i.test(value)
+}
+
+function normalizeHexColor(value: string): string | null {
+ const normalized = value.trim().toLowerCase()
+ return isHexColor(normalized) ? normalized : null
+}
+
+function parseChatSurfaceColorPreference(raw: string | null): ChatSurfaceColorPreference {
+ if (raw === 'default' || raw === 'preset:soft-blue' || raw === 'preset:soft-green' || raw === 'preset:soft-yellow') {
+ return raw
+ }
+
+ if (typeof raw === 'string' && raw.startsWith('custom:')) {
+ const normalized = normalizeHexColor(raw.slice('custom:'.length))
+ if (normalized) {
+ return `custom:${normalized}` as ChatSurfaceColorPreference
+ }
+ }
+
+ return DEFAULT_CHAT_SURFACE_COLOR_PREFERENCE
+}
+
+function getThemeMode(): ThemeMode {
+ if (!isBrowser()) return 'light'
+ return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+ const normalized = hex.replace('#', '')
+ return [
+ Number.parseInt(normalized.slice(0, 2), 16),
+ Number.parseInt(normalized.slice(2, 4), 16),
+ Number.parseInt(normalized.slice(4, 6), 16),
+ ]
+}
+
+function clampChannel(value: number): number {
+ return Math.max(0, Math.min(255, value))
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+ return `#${[r, g, b]
+ .map((channel) => clampChannel(channel).toString(16).padStart(2, '0'))
+ .join('')}`
+}
+
+function mixHex(base: string, accent: string, ratio: number): string {
+ const [br, bg, bb] = hexToRgb(base)
+ const [ar, ag, ab] = hexToRgb(accent)
+ return rgbToHex(
+ Math.round(br + (ar - br) * ratio),
+ Math.round(bg + (ag - bg) * ratio),
+ Math.round(bb + (ab - bb) * ratio),
+ )
+}
+
+function getAccentColor(pref: ChatSurfaceColorPreference): string | null {
+ if (pref === 'default') return null
+ if (pref.startsWith('preset:')) {
+ return PRESET_ACCENTS[pref.slice('preset:'.length) as keyof typeof PRESET_ACCENTS] ?? null
+ }
+ return normalizeHexColor(pref.slice('custom:'.length))
+}
+
+function resolveSurfaceColor(pref: ChatSurfaceColorPreference, theme: ThemeMode, surface: SurfaceKey): string | null {
+ const accent = getAccentColor(pref)
+ if (!accent) return null
+
+ const base = THEME_BASES[theme][surface]
+ const ratio = pref.startsWith('custom:') ? (theme === 'dark' ? 0.22 : 0.34) : (theme === 'dark' ? 0.2 : 0.3)
+ return mixHex(base, accent, ratio)
+}
+
+function readStoredToolGroupBackground(): ChatSurfaceColorPreference {
+ return parseChatSurfaceColorPreference(safeGetItem(TOOL_GROUP_BG_STORAGE_KEY))
+}
+
+function readStoredUserMessageBackground(): ChatSurfaceColorPreference {
+ return parseChatSurfaceColorPreference(safeGetItem(USER_MESSAGE_BG_STORAGE_KEY))
+}
+
+function applyChatSurfaceVariables(): void {
+ if (!isBrowser()) return
+
+ const theme = getThemeMode()
+ const rootStyle = document.documentElement.style
+ const toolGroupColor = resolveSurfaceColor(readStoredToolGroupBackground(), theme, 'tool-group')
+ const userMessageColor = resolveSurfaceColor(readStoredUserMessageBackground(), theme, 'user-message')
+
+ if (toolGroupColor) rootStyle.setProperty(TOOL_GROUP_BG_CSS_VAR, toolGroupColor)
+ else rootStyle.removeProperty(TOOL_GROUP_BG_CSS_VAR)
+
+ if (userMessageColor) rootStyle.setProperty(USER_MESSAGE_BG_CSS_VAR, userMessageColor)
+ else rootStyle.removeProperty(USER_MESSAGE_BG_CSS_VAR)
+}
+
+function writePreference(key: string, value: ChatSurfaceColorPreference): void {
+ if (value === DEFAULT_CHAT_SURFACE_COLOR_PREFERENCE) {
+ safeRemoveItem(key)
+ } else {
+ safeSetItem(key, value)
+ }
+ applyChatSurfaceVariables()
+}
+
+export function getChatSurfaceColorPresetOptions(): ReadonlyArray<{ value: ChatSurfaceColorPreset; labelKey: string }> {
+ return [
+ { value: 'default', labelKey: 'settings.chat.surfaceColor.default' },
+ { value: 'soft-blue', labelKey: 'settings.chat.surfaceColor.softBlue' },
+ { value: 'soft-green', labelKey: 'settings.chat.surfaceColor.softGreen' },
+ { value: 'soft-yellow', labelKey: 'settings.chat.surfaceColor.softYellow' },
+ ]
+}
+
+export function toPresetChatSurfaceColorPreference(preset: ChatSurfaceColorPreset): ChatSurfaceColorPreference {
+ return preset === 'default' ? 'default' : (`preset:${preset}` as ChatSurfaceColorPreference)
+}
+
+export function toCustomChatSurfaceColorPreference(value: string): ChatSurfaceColorPreference {
+ const normalized = normalizeHexColor(value) ?? DEFAULT_PICKER_COLOR
+ return `custom:${normalized}` as ChatSurfaceColorPreference
+}
+
+export function getToolGroupBackgroundPreference(): ChatSurfaceColorPreference {
+ return readStoredToolGroupBackground()
+}
+
+export function getUserMessageBackgroundPreference(): ChatSurfaceColorPreference {
+ return readStoredUserMessageBackground()
+}
+
+export function getChatSurfaceColorPickerValue(pref: ChatSurfaceColorPreference): string {
+ return getAccentColor(pref) ?? DEFAULT_PICKER_COLOR
+}
+
+export function initializeChatSurfaceColors(): void {
+ if (!isBrowser()) return
+
+ applyChatSurfaceVariables()
+
+ if (initialized) return
+ initialized = true
+
+ window.addEventListener('storage', applyChatSurfaceVariables)
+
+ const themeObserver = new MutationObserver(() => {
+ applyChatSurfaceVariables()
+ })
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['data-theme'],
+ })
+}
+
+export function useChatSurfaceColors(): {
+ toolGroupBackground: ChatSurfaceColorPreference
+ userMessageBackground: ChatSurfaceColorPreference
+ setToolGroupBackground: (value: ChatSurfaceColorPreference) => void
+ setUserMessageBackground: (value: ChatSurfaceColorPreference) => void
+} {
+ const [toolGroupBackground, setToolGroupBackgroundState] = useState(getToolGroupBackgroundPreference)
+ const [userMessageBackground, setUserMessageBackgroundState] = useState(getUserMessageBackgroundPreference)
+
+ useEffect(() => {
+ if (!isBrowser()) return
+
+ const onStorage = (event: StorageEvent) => {
+ if (event.key !== TOOL_GROUP_BG_STORAGE_KEY && event.key !== USER_MESSAGE_BG_STORAGE_KEY) {
+ return
+ }
+ setToolGroupBackgroundState(readStoredToolGroupBackground())
+ setUserMessageBackgroundState(readStoredUserMessageBackground())
+ }
+
+ window.addEventListener('storage', onStorage)
+ return () => window.removeEventListener('storage', onStorage)
+ }, [])
+
+ const setToolGroupBackground = useCallback((value: ChatSurfaceColorPreference) => {
+ setToolGroupBackgroundState(value)
+ writePreference(TOOL_GROUP_BG_STORAGE_KEY, value)
+ }, [])
+
+ const setUserMessageBackground = useCallback((value: ChatSurfaceColorPreference) => {
+ setUserMessageBackgroundState(value)
+ writePreference(USER_MESSAGE_BG_STORAGE_KEY, value)
+ }, [])
+
+ return {
+ toolGroupBackground,
+ userMessageBackground,
+ setToolGroupBackground,
+ setUserMessageBackground,
+ }
+}
diff --git a/web/src/index.css b/web/src/index.css
index ac15c345..d874750a 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -15,10 +15,12 @@
--app-dialog-bg: #ffffff;
--app-chat-user-bg: #f2f4f6;
+ --app-chat-user-surface-bg: var(--app-chat-user-bg);
--app-chat-user-fg: #24292f;
--app-chat-user-chip-bg: #DBEAFE;
--app-chat-user-chip-fg: #1447E6;
--app-tool-card-bg: #f2f4f6;
+ --app-tool-group-bg: var(--app-tool-card-bg);
--app-tool-card-hover-bg: #e9edf2;
--app-tool-card-accent: #7b8491;
--app-tool-card-muted-action-fg: #aeb4bd;
@@ -93,10 +95,12 @@
--app-dialog-bg: #202226;
--app-chat-user-bg: #2b2f34;
+ --app-chat-user-surface-bg: var(--app-chat-user-bg);
--app-chat-user-fg: #f5f7fa;
--app-chat-user-chip-bg: rgba(37, 99, 235, 0.22);
--app-chat-user-chip-fg: #93c5fd;
--app-tool-card-bg: #2b2f34;
+ --app-tool-group-bg: var(--app-tool-card-bg);
--app-tool-card-hover-bg: #343a41;
--app-tool-card-accent: #b8c0cb;
--app-tool-card-muted-action-fg: #7f8792;
diff --git a/web/src/lib/locales/en.ts b/web/src/lib/locales/en.ts
index 7dbb870b..64fad028 100644
--- a/web/src/lib/locales/en.ts
+++ b/web/src/lib/locales/en.ts
@@ -284,11 +284,18 @@ export default {
'toolGroup.summary.search': 'Search {n}',
'toolGroup.summary.web': 'Web {n}',
'toolGroup.summary.other': 'Tool {n}',
+ 'toolGroup.friendly.inspectFiles': 'Inspect project files',
+ 'toolGroup.friendly.searchContent': 'Search project content',
+ 'toolGroup.friendly.runCommands': 'Run project commands',
+ 'toolGroup.friendly.editFiles': 'Edit project files',
+ 'toolGroup.friendly.openWeb': 'Browse web content',
+ 'toolGroup.friendly.genericCommand': 'Run command',
+ 'toolGroup.friendly.genericTool': 'Use tool',
'toolGroup.badge.running': '{n} running',
'toolGroup.badge.pending': '{n} pending',
'toolGroup.badge.error': '{n} error',
'toolGroup.badge.fileTargets': '{n} files',
- 'toolGroup.toolCount': '{n} tool calls',
+ 'toolGroup.toolCount': '{n} actions',
'toolGroup.loadingOlderHistory': 'Loading earlier tool activity…',
'toolGroup.historyUnavailable': 'Earlier tool activity is unavailable.',
'toolGroup.rowStatus.running': 'Running',
@@ -372,6 +379,13 @@ export default {
'settings.chat.terminalToolDisplay': 'Terminal Tool Cards',
'settings.chat.terminalToolDisplay.compact': 'Compact (command only)',
'settings.chat.terminalToolDisplay.detailed': 'Detailed (show output preview)',
+ 'settings.chat.groupedToolBackground': 'Grouped Tool Use Background',
+ 'settings.chat.userMessageBackground': 'User Message Background',
+ 'settings.chat.surfaceColor.default': 'Default color',
+ 'settings.chat.surfaceColor.softBlue': 'Soft blue',
+ 'settings.chat.surfaceColor.softGreen': 'Soft green',
+ 'settings.chat.surfaceColor.softYellow': 'Soft yellow',
+ 'settings.chat.surfaceColor.custom': 'Custom color',
'settings.voice.title': 'Voice Assistant',
'settings.voice.language': 'Voice Language',
'settings.voice.autoDetect': 'Auto-detect',
diff --git a/web/src/lib/locales/zh-CN.ts b/web/src/lib/locales/zh-CN.ts
index 47313c84..1141a9d6 100644
--- a/web/src/lib/locales/zh-CN.ts
+++ b/web/src/lib/locales/zh-CN.ts
@@ -286,11 +286,18 @@ export default {
'toolGroup.summary.search': '搜索 {n}',
'toolGroup.summary.web': '访问 {n}',
'toolGroup.summary.other': '工具 {n}',
+ 'toolGroup.friendly.inspectFiles': '检查项目文件',
+ 'toolGroup.friendly.searchContent': '搜索项目内容',
+ 'toolGroup.friendly.runCommands': '执行项目命令',
+ 'toolGroup.friendly.editFiles': '修改项目文件',
+ 'toolGroup.friendly.openWeb': '浏览网页内容',
+ 'toolGroup.friendly.genericCommand': '执行命令',
+ 'toolGroup.friendly.genericTool': '使用工具',
'toolGroup.badge.running': '运行中 {n}',
'toolGroup.badge.pending': '等待中 {n}',
'toolGroup.badge.error': '错误 {n}',
'toolGroup.badge.fileTargets': '{n} 文件',
- 'toolGroup.toolCount': '{n} 次 tool use',
+ 'toolGroup.toolCount': '{n} 次操作',
'toolGroup.loadingOlderHistory': '正在补加载更早的工具活动…',
'toolGroup.historyUnavailable': '更早的工具活动已不可用。',
'toolGroup.rowStatus.running': '运行中',
@@ -374,6 +381,13 @@ export default {
'settings.chat.terminalToolDisplay': '终端工具卡片',
'settings.chat.terminalToolDisplay.compact': '简洁（仅命令）',
'settings.chat.terminalToolDisplay.detailed': '详细（显示输出预览）',
+ 'settings.chat.groupedToolBackground': '聚合 Tool Use 背景',
+ 'settings.chat.userMessageBackground': '用户消息背景',
+ 'settings.chat.surfaceColor.default': '默认颜色',
+ 'settings.chat.surfaceColor.softBlue': '柔和蓝',
+ 'settings.chat.surfaceColor.softGreen': '柔和绿',
+ 'settings.chat.surfaceColor.softYellow': '柔和黄',
+ 'settings.chat.surfaceColor.custom': '自定义颜色',
'settings.voice.title': '语音助手',
'settings.voice.language': '语音语言',
'settings.voice.autoDetect': '自动检测',
diff --git a/web/src/routes/settings/index.test.tsx b/web/src/routes/settings/index.test.tsx
index 96758832..c3d2a000 100644
--- a/web/src/routes/settings/index.test.tsx
+++ b/web/src/routes/settings/index.test.tsx
@@ -51,6 +51,24 @@ vi.mock('@/hooks/useTerminalToolDisplayMode', () => ({
],
}))
+vi.mock('@/hooks/useChatSurfaceColors', () => ({
+ useChatSurfaceColors: () => ({
+ toolGroupBackground: 'default',
+ userMessageBackground: 'preset:soft-blue',
+ setToolGroupBackground: vi.fn(),
+ setUserMessageBackground: vi.fn(),
+ }),
+ getChatSurfaceColorPresetOptions: () => [
+ { value: 'default', labelKey: 'settings.chat.surfaceColor.default' },
+ { value: 'soft-blue', labelKey: 'settings.chat.surfaceColor.softBlue' },
+ { value: 'soft-green', labelKey: 'settings.chat.surfaceColor.softGreen' },
+ { value: 'soft-yellow', labelKey: 'settings.chat.surfaceColor.softYellow' },
+ ],
+ getChatSurfaceColorPickerValue: () => '#7db7ff',
+ toPresetChatSurfaceColorPreference: (value: string) => value === 'default' ? 'default' : `preset:${value}`,
+ toCustomChatSurfaceColorPreference: (value: string) => `custom:${value}`,
+}))
+
// Mock useTheme hook
vi.mock('@/hooks/useTheme', () => ({
useAppearance: () => ({ appearance: 'system', setAppearance: vi.fn() }),
@@ -172,6 +190,17 @@ describe('SettingsPage', () => {
expect(screen.getAllByText('Compact (command only)').length).toBeGreaterThanOrEqual(1)
})
+ it('renders grouped tool and user message background settings', () => {
+ renderWithProviders()
+ expect(screen.getAllByText('Grouped Tool Use Background').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByText('User Message Background').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByText('Default color').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByText('Soft blue').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByText('Soft green').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByText('Soft yellow').length).toBeGreaterThanOrEqual(1)
+ expect(screen.getAllByLabelText('Custom color').length).toBeGreaterThanOrEqual(2)
+ })
+
it('uses correct i18n keys for the Enter Key setting', () => {
const spyT = renderWithSpyT()
const calledKeys = spyT.mock.calls.map((call) => call[0])
@@ -180,5 +209,8 @@ describe('SettingsPage', () => {
expect(calledKeys).toContain('settings.chat.enterBehavior.send')
expect(calledKeys).toContain('settings.chat.terminalToolDisplay')
expect(calledKeys).toContain('settings.chat.terminalToolDisplay.compact')
+ expect(calledKeys).toContain('settings.chat.groupedToolBackground')
+ expect(calledKeys).toContain('settings.chat.userMessageBackground')
+ expect(calledKeys).toContain('settings.chat.surfaceColor.default')
})
})
diff --git a/web/src/routes/settings/index.tsx b/web/src/routes/settings/index.tsx
index 1dced931..a3e6d00a 100644
--- a/web/src/routes/settings/index.tsx
+++ b/web/src/routes/settings/index.tsx
@@ -6,6 +6,15 @@ import { getFontScaleOptions, useFontScale, type FontScale } from '@/hooks/useFo
import { getTerminalFontSizeOptions, useTerminalFontSize, type TerminalFontSize } from '@/hooks/useTerminalFontSize'
import { getComposerEnterBehaviorOptions, useComposerEnterBehavior, type ComposerEnterBehavior } from '@/hooks/useComposerEnterBehavior'
import { getTerminalToolDisplayModeOptions, useTerminalToolDisplayMode, type TerminalToolDisplayMode } from '@/hooks/useTerminalToolDisplayMode'
+import {
+ getChatSurfaceColorPickerValue,
+ getChatSurfaceColorPresetOptions,
+ toCustomChatSurfaceColorPreference,
+ toPresetChatSurfaceColorPreference,
+ useChatSurfaceColors,
+ type ChatSurfaceColorPreference,
+ type ChatSurfaceColorPreset,
+} from '@/hooks/useChatSurfaceColors'
import { useAppearance, getAppearanceOptions, type AppearancePreference } from '@/hooks/useTheme'
import { PROTOCOL_VERSION } from '@hapi/protocol'
@@ -73,6 +82,63 @@ function ChevronDownIcon(props: { className?: string }) {
)
}
+function ChatSurfaceColorControl(props: {
+ label: string
+ preference: ChatSurfaceColorPreference
+ onPresetChange: (preset: ChatSurfaceColorPreset) => void
+ onCustomChange: (value: string) => void
+ t: (key: string) => string
+}) {
+ const presetOptions = getChatSurfaceColorPresetOptions()
+ const pickerValue = getChatSurfaceColorPickerValue(props.preference)
+ const isCustomSelected = props.preference.startsWith('custom:')
+
+ return (
+
+
{props.label}
+
+ {presetOptions.map((option) => {
+ const selected = props.preference === toPresetChatSurfaceColorPreference(option.value)
+ const swatchColor = getChatSurfaceColorPickerValue(toPresetChatSurfaceColorPreference(option.value))
+ return (
+
+ )
+ })}
+
+
+ {props.t('settings.chat.surfaceColor.custom')}
+
+
+