({
diff --git a/src/renderer/src/hooks/zoom-routing.test.ts b/src/renderer/src/hooks/zoom-routing.test.ts
index 6aa3b2d1d6cc..370e229fb01c 100644
--- a/src/renderer/src/hooks/zoom-routing.test.ts
+++ b/src/renderer/src/hooks/zoom-routing.test.ts
@@ -209,6 +209,21 @@ describe('registerZoomIpcBridge', () => {
expect(zoom.setEditorFontZoomLevel).not.toHaveBeenCalled()
})
+ it('consumes menu chat zoom while matching without changing saved size or app zoom', async () => {
+ const zoom = await mountZoomBridge({
+ activeTabType: 'terminal',
+ activeElement: makeTarget({ chatClosest: true }),
+ nativeChatAppearance: { fontSize: 18, matchTerminalInterface: true }
+ })
+ zoom.fire('in')
+ zoom.fire('out')
+ zoom.fire('reset')
+ await vi.waitFor(() => expect(zoom.settings.nativeChatAppearance?.fontSize).toBe(18))
+ expect(zoom.updateSettings).not.toHaveBeenCalled()
+ expect(zoom.applyUIZoom).not.toHaveBeenCalled()
+ expect(zoom.setEditorFontZoomLevel).not.toHaveBeenCalled()
+ })
+
it('applies app zoom for an active browser tab', async () => {
const zoom = await mountZoomBridge({ activeTabType: 'browser' })
diff --git a/src/renderer/src/i18n/locales/en.json b/src/renderer/src/i18n/locales/en.json
index 9799868ab1f4..025930d80357 100644
--- a/src/renderer/src/i18n/locales/en.json
+++ b/src/renderer/src/i18n/locales/en.json
@@ -239,7 +239,8 @@
"contrast": "Contrast",
"contrastDescription": "How bright chat text is against the background. The right end matches the older, brighter look.",
"softer": "Softer",
- "sharper": "Sharper"
+ "sharper": "Sharper",
+ "terminalControlledHint": "Set by terminal interface."
}
},
"browser": {
diff --git a/src/renderer/src/i18n/locales/es.json b/src/renderer/src/i18n/locales/es.json
index e75c793ce29c..6a0f48988712 100644
--- a/src/renderer/src/i18n/locales/es.json
+++ b/src/renderer/src/i18n/locales/es.json
@@ -76,7 +76,8 @@
"contrast": "Contraste",
"contrastDescription": "Ajusta el brillo del texto del chat sobre el fondo. El extremo derecho recupera el aspecto anterior, más brillante.",
"softer": "Más suave",
- "sharper": "Más nítido"
+ "sharper": "Más nítido",
+ "terminalControlledHint": "Lo controla la interfaz del terminal."
}
},
"browser": {
diff --git a/src/renderer/src/i18n/locales/fr.json b/src/renderer/src/i18n/locales/fr.json
index fa1ee55338ae..31348a1415a0 100644
--- a/src/renderer/src/i18n/locales/fr.json
+++ b/src/renderer/src/i18n/locales/fr.json
@@ -175,7 +175,8 @@
"contrast": "Contraste",
"contrastDescription": "Ajuste la luminosité du texte du chat sur le fond. L’extrémité droite retrouve l’ancien aspect, plus lumineux.",
"softer": "Plus doux",
- "sharper": "Plus net"
+ "sharper": "Plus net",
+ "terminalControlledHint": "Défini par l’interface du terminal."
}
},
"browser": {
diff --git a/src/renderer/src/i18n/locales/ja.json b/src/renderer/src/i18n/locales/ja.json
index 562d369f5a7b..2aef0b26b436 100644
--- a/src/renderer/src/i18n/locales/ja.json
+++ b/src/renderer/src/i18n/locales/ja.json
@@ -76,7 +76,8 @@
"contrast": "コントラスト",
"contrastDescription": "背景に対するチャットの文字の明るさを調整します。右端にすると、以前の明るい表示になります。",
"softer": "柔らかく",
- "sharper": "くっきり"
+ "sharper": "くっきり",
+ "terminalControlledHint": "ターミナルの外観設定に従います。"
}
},
"browser": {
diff --git a/src/renderer/src/i18n/locales/ko.json b/src/renderer/src/i18n/locales/ko.json
index ab20cd4bcb84..7d7606537458 100644
--- a/src/renderer/src/i18n/locales/ko.json
+++ b/src/renderer/src/i18n/locales/ko.json
@@ -76,7 +76,8 @@
"contrast": "대비",
"contrastDescription": "배경에 대한 채팅 텍스트의 밝기를 조절합니다. 오른쪽 끝으로 이동하면 이전의 더 밝은 모습으로 표시됩니다.",
"softer": "부드럽게",
- "sharper": "선명하게"
+ "sharper": "선명하게",
+ "terminalControlledHint": "터미널 인터페이스 설정을 따릅니다."
}
},
"browser": {
diff --git a/src/renderer/src/i18n/locales/zh.json b/src/renderer/src/i18n/locales/zh.json
index 4a2a3a552c5f..d57d9cc52ef5 100644
--- a/src/renderer/src/i18n/locales/zh.json
+++ b/src/renderer/src/i18n/locales/zh.json
@@ -76,7 +76,8 @@
"contrast": "对比度",
"contrastDescription": "调整聊天文字相对于背景的亮度。滑到最右端可恢复以前更明亮的外观。",
"softer": "更柔和",
- "sharper": "更清晰"
+ "sharper": "更清晰",
+ "terminalControlledHint": "由终端界面设置。"
}
},
"browser": {
From 1b6a7a64fd38fcfa4184e3f3916f4b2fa4c2a3fc Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 6 Oct 2026 04:39:26 -0700
Subject: [PATCH 11/16] Verify terminal match controls on Chat settings page
---
.../settings/ChatSettingsSection.test.tsx | 21 +++++++++++++++++++
1 file changed, 21 insertions(+)
diff --git a/src/renderer/src/components/settings/ChatSettingsSection.test.tsx b/src/renderer/src/components/settings/ChatSettingsSection.test.tsx
index 9299cfca1d35..579cd20cfd34 100644
--- a/src/renderer/src/components/settings/ChatSettingsSection.test.tsx
+++ b/src/renderer/src/components/settings/ChatSettingsSection.test.tsx
@@ -144,4 +144,25 @@ describe('Chat settings page', () => {
expect(getSettingsScrollTarget(entry.targetSectionId ?? '', container)).toBeTruthy()
}
})
+
+ it.each([
+ ['Match terminal interface', 'chat-match-terminal-interface', 'switch'],
+ ['Contrast', 'chat-contrast', 'slider']
+ ])('searches %s and resolves its Chat deep link', (title, targetSectionId, role) => {
+ state.settingsSearchQuery = title
+ const { container } = renderChat(true)
+ expect(screen.getByRole(role, { name: title })).toBeTruthy()
+ const sections = buildSettingsNavigationMetadata({
+ isMac: true,
+ isWindows: false,
+ isWebClient: false,
+ experimentalStructuredNativeChat: true,
+ repos: []
+ })
+ const result = buildCmdJSettingsResults(sections).find(
+ (entry) => entry.sectionId === 'chat' && entry.title === title
+ )
+ expect(result?.targetSectionId).toBe(targetSectionId)
+ expect(getSettingsScrollTarget(targetSectionId, container)).toBeTruthy()
+ })
})
From 8dd4bca81623c417421432b399d7e8d472735090 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 6 Oct 2026 05:08:45 -0700
Subject: [PATCH 12/16] Share native chat appearance store selection
---
.../native-chat/NativeChatResolvedView.tsx | 13 +++----------
.../native-chat/NativeChatStructuredSession.tsx | 13 +++----------
.../native-chat/use-native-chat-row-typography.ts | 14 +++-----------
.../use-native-chat-store-appearance-style.ts | 13 +++++++++++++
4 files changed, 22 insertions(+), 31 deletions(-)
create mode 100644 src/renderer/src/components/native-chat/use-native-chat-store-appearance-style.ts
diff --git a/src/renderer/src/components/native-chat/NativeChatResolvedView.tsx b/src/renderer/src/components/native-chat/NativeChatResolvedView.tsx
index ceccc83231f8..dca8420460ad 100644
--- a/src/renderer/src/components/native-chat/NativeChatResolvedView.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatResolvedView.tsx
@@ -1,10 +1,6 @@
-import { useShallow } from 'zustand/react/shallow'
import { cn } from '@/lib/utils'
-import {
- NATIVE_CHAT_APPEARANCE_ROOT_CLASS,
- selectNativeChatAppearanceSettings,
- useNativeChatAppearanceStyle
-} from './native-chat-appearance-style'
+import { NATIVE_CHAT_APPEARANCE_ROOT_CLASS } from './native-chat-appearance-style'
+import { useNativeChatStoreAppearanceStyle } from './use-native-chat-store-appearance-style'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useNativeChatComposerRevealFocus } from './use-native-chat-composer-reveal-focus'
import { useAppStore } from '../../store'
@@ -317,10 +313,7 @@ export function NativeChatResolvedView({
// Only the focused conversation accepts chat text-size shortcuts.
useNativeChatFontSize(isConversation && isVisible && isFocusedGroup, rootRef)
- const appearanceSettings = useAppStore(
- useShallow((state) => selectNativeChatAppearanceSettings(state.settings))
- )
- const appearanceStyle = useNativeChatAppearanceStyle(appearanceSettings)
+ const appearanceStyle = useNativeChatStoreAppearanceStyle()
return (
selectNativeChatAppearanceSettings(state.settings))
- )
- const appearanceStyle = useNativeChatAppearanceStyle(appearanceSettings)
+ const appearanceStyle = useNativeChatStoreAppearanceStyle()
const imageRuntimeContext = useNativeChatImageRuntimeContext(props.tabId)
const { onLinkClick, linkActionRequest, closeLinkActions } = useNativeChatLinkActions(
fileLinkContext,
diff --git a/src/renderer/src/components/native-chat/use-native-chat-row-typography.ts b/src/renderer/src/components/native-chat/use-native-chat-row-typography.ts
index cd7e62244fe6..c640d5d58b8d 100644
--- a/src/renderer/src/components/native-chat/use-native-chat-row-typography.ts
+++ b/src/renderer/src/components/native-chat/use-native-chat-row-typography.ts
@@ -1,17 +1,9 @@
import { useCallback, useMemo, useState, type RefObject } from 'react'
import { useMeasuredWidth } from '../right-sidebar/right-sidebar-measured-width'
-import { useShallow } from 'zustand/react/shallow'
-import { useAppStore } from '../../store'
-import {
- nativeChatColumnWidthBucket,
- selectNativeChatAppearanceSettings,
- useNativeChatAppearanceStyle
-} from './native-chat-appearance-style'
+import { nativeChatColumnWidthBucket } from './native-chat-appearance-style'
+import { useNativeChatStoreAppearanceStyle } from './use-native-chat-store-appearance-style'
export function useNativeChatRowTypography(contentRef: RefObject) {
- const appearanceSettings = useAppStore(
- useShallow((state) => selectNativeChatAppearanceSettings(state.settings))
- )
const [columnWidthPx, setColumnWidthPx] = useState(null)
const commitWidth = useCallback((width: number | null) => {
setColumnWidthPx(nativeChatColumnWidthBucket(width))
@@ -24,7 +16,7 @@ export function useNativeChatRowTypography(contentRef: RefObject ({ lineHeightPx, charsPerLine }), [lineHeightPx, charsPerLine])
diff --git a/src/renderer/src/components/native-chat/use-native-chat-store-appearance-style.ts b/src/renderer/src/components/native-chat/use-native-chat-store-appearance-style.ts
new file mode 100644
index 000000000000..42f904dee321
--- /dev/null
+++ b/src/renderer/src/components/native-chat/use-native-chat-store-appearance-style.ts
@@ -0,0 +1,13 @@
+import { useShallow } from 'zustand/react/shallow'
+import { useAppStore } from '../../store'
+import {
+ selectNativeChatAppearanceSettings,
+ useNativeChatAppearanceStyle
+} from './native-chat-appearance-style'
+
+export function useNativeChatStoreAppearanceStyle(measuredColumnWidthPx?: number | null) {
+ const settings = useAppStore(
+ useShallow((state) => selectNativeChatAppearanceSettings(state.settings))
+ )
+ return useNativeChatAppearanceStyle(settings, measuredColumnWidthPx)
+}
From 9fcd7748715077b48372b4cfa3fb9150335584b4 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 6 Oct 2026 05:29:55 -0700
Subject: [PATCH 13/16] Align matched chat palette test with full-strength
foreground
---
.../native-chat-appearance-palette.test.ts | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/src/renderer/src/components/native-chat/native-chat-appearance-palette.test.ts b/src/renderer/src/components/native-chat/native-chat-appearance-palette.test.ts
index a7aaf2d109e2..b893277b3f26 100644
--- a/src/renderer/src/components/native-chat/native-chat-appearance-palette.test.ts
+++ b/src/renderer/src/components/native-chat/native-chat-appearance-palette.test.ts
@@ -70,15 +70,20 @@ describe('matching chat surfaces with opposite app schemes', () => {
const chat = createChat(appScheme, terminalScheme)
// These roles cover transcript payloads, question badges, inline completion menus and controls.
const matched = getComputedStyle(chat)
+ const terminalForegroundAtFullStrength = `${terminalScheme === 'light' ? '#000000' : '#ffffff'} 100%`
expect(chat.style.color).toBe('var(--foreground)')
- expect(matched.getPropertyValue('--foreground')).toContain(
- terminalScheme === 'light' ? '92%' : '90%'
+ expect(matched.getPropertyValue('--chat-foreground')).toContain(
+ terminalForegroundAtFullStrength
)
+ expect(matched.getPropertyValue('--chat-foreground-strong')).toContain(
+ terminalForegroundAtFullStrength
+ )
+ expect(matched.getPropertyValue('--foreground')).toContain(terminalForegroundAtFullStrength)
expect(matched.getPropertyValue('--muted')).toContain('7%')
expect(matched.getPropertyValue('--muted-foreground')).toContain('62%')
expect(matched.getPropertyValue('--popover')).toContain('4%')
expect(matched.getPropertyValue('--popover-foreground')).toContain(
- terminalScheme === 'light' ? '92%' : '90%'
+ terminalForegroundAtFullStrength
)
expect(matched.getPropertyValue('--accent')).toContain('9%')
expect(matched.getPropertyValue('--input')).toContain('7%')
From b8dd211c60a1b024821c77541d21871b9e84d915 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 6 Oct 2026 11:07:33 -0700
Subject: [PATCH 14/16] Keep tool-run header marks on the summary's first line
A wrapped two-line summary centered the leading icon, failure count, check,
and chevron between its lines. The header now top-aligns its items and gives
each mark a one-line-tall slot, so marks sit on line 1 and line 2 wraps under
the text.
---
.../NativeChatToolRun.appearance.test.tsx | 37 +++++++++++++
.../native-chat/NativeChatToolRun.tsx | 52 +++++++++++--------
.../NativeChatToolRunCallCounts.tsx | 17 +++---
3 files changed, 78 insertions(+), 28 deletions(-)
diff --git a/src/renderer/src/components/native-chat/NativeChatToolRun.appearance.test.tsx b/src/renderer/src/components/native-chat/NativeChatToolRun.appearance.test.tsx
index 1190f62c1fdf..3cd69b6c1b8c 100644
--- a/src/renderer/src/components/native-chat/NativeChatToolRun.appearance.test.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatToolRun.appearance.test.tsx
@@ -39,6 +39,7 @@ describe('tool-run summary in a matching chat', () => {
const failure = container.querySelector('[aria-label="Failed tool calls: 1"]')
expect(failure).toHaveTextContent('1 failed')
expect(failure).toHaveClass('shrink-0')
+ expect(failure?.parentElement).toHaveClass('flex', 'h-[1lh]', 'items-center')
})
it('keeps a long command available in the expanded detail', () => {
@@ -66,4 +67,40 @@ describe('tool-run summary in a matching chat', () => {
expect(container.querySelector('pre')).toHaveTextContent(command)
})
+
+ it.each([
+ ['wrapped', `QA inert command for display only: ${'x'.repeat(400)}`],
+ ['single-line', 'pnpm test']
+ ])('pins the marks to the first line of a %s summary', (_shape, command) => {
+ const { container } = render(
+
+ )
+
+ const header = screen.getByRole('button')
+ // Top-aligned in the summary's own type, so `1lh` is one summary line.
+ expect(header).toHaveClass('items-start', 'text-sm', 'leading-relaxed')
+ expect(header).toHaveClass('native-chat-message-text')
+ expect(header).not.toHaveClass('items-center')
+ const summary = container.querySelector('span.native-chat-message-text')
+ expect(summary?.parentElement).toBe(header)
+ expect(summary).toHaveClass('min-w-0', 'line-clamp-2')
+
+ const slots = Array.from(header.children).filter((child) => child !== summary)
+ expect(slots.length).toBeGreaterThanOrEqual(3)
+ for (const slot of slots) {
+ expect(slot).toHaveClass('flex', 'h-[1lh]', 'items-center')
+ }
+ // The icon leads, so a wrapped second line starts under the text, not under it.
+ expect(header.firstElementChild?.querySelector('svg')).toBeInTheDocument()
+ expect(header.children[1]).toBe(summary)
+ expect(header.querySelector('.lucide-check')?.parentElement).toHaveClass('h-[1lh]')
+ expect(header.querySelector('.lucide-chevron-right')?.parentElement).toHaveClass('h-[1lh]')
+ })
})
diff --git a/src/renderer/src/components/native-chat/NativeChatToolRun.tsx b/src/renderer/src/components/native-chat/NativeChatToolRun.tsx
index 4fe24b5102f3..cc5bbbe42bb7 100644
--- a/src/renderer/src/components/native-chat/NativeChatToolRun.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatToolRun.tsx
@@ -253,19 +253,23 @@ export function NativeChatToolRun({
// One element for the run's whole life. Live and settled are states of
// this button, not two buttons: a header that remounted as a call started
// and again as it ended lost its hover, its mark, and its count each time.
+ // It carries the summary's type so each `h-[1lh]` slot is one summary line
+ // tall: marks sit on line 1 and a wrapped line 2 starts under the text.
)}
{open && showsHeader ? (
diff --git a/src/renderer/src/components/native-chat/NativeChatToolRunCallCounts.tsx b/src/renderer/src/components/native-chat/NativeChatToolRunCallCounts.tsx
index ae2d0db4dfd3..a1cf8e7be953 100644
--- a/src/renderer/src/components/native-chat/NativeChatToolRunCallCounts.tsx
+++ b/src/renderer/src/components/native-chat/NativeChatToolRunCallCounts.tsx
@@ -47,13 +47,16 @@ export function NativeChatToolRunCallCounts({
/* Outside the truncating member list, so the one thing the reader cannot
afford to miss survives a pane too narrow to print it. Quiet text in the
header's own type, not a destructive tint or a swapped glyph: a tool error
- is routine work, and the line's own detail is one click away. */
- mark.label).join(', ')}
- className="shrink-0 font-sans text-xs tabular-nums text-chat-foreground-faint transition-colors group-hover/tool-run:text-chat-foreground"
- >
- ·
- {marks.map((mark) => mark.text).join(', ')}
+ is routine work, and the line's own detail is one click away. One header
+ line tall so it stays on a wrapped summary's first line. */
+
+ mark.label).join(', ')}
+ className="shrink-0 font-sans text-xs tabular-nums text-chat-foreground-faint transition-colors group-hover/tool-run:text-chat-foreground"
+ >
+ ·
+ {marks.map((mark) => mark.text).join(', ')}
+
)
}
From 04518c16290484f16e007fa6a5f0cdd6ec5f068c Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Tue, 6 Oct 2026 11:15:27 -0700
Subject: [PATCH 15/16] Explain terminal-matched chat controls on hover
While Match terminal interface is on, Contrast, Text size and Code text size
are disabled. Hovering any of them now shows a tooltip saying the chat is
matching the terminal interface and how to change it. Disabled controls drop
hover events, so an enabled wrapper carries the tooltip; with matching off the
controls render exactly as before.
---
.../AppearanceChatContrastControls.tsx | 35 +++++++++-----
.../settings/AppearanceChatSection.test.tsx | 47 ++++++++++++++++++-
.../settings/AppearanceChatSection.tsx | 3 ++
.../SettingsDisabledControlTooltip.tsx | 26 ++++++++++
.../settings/SettingsFormControls.tsx | 44 +++++++++--------
.../settings/chat-appearance-search.ts | 7 +++
src/renderer/src/i18n/locales/en.json | 3 +-
src/renderer/src/i18n/locales/es.json | 3 +-
src/renderer/src/i18n/locales/fr.json | 3 +-
src/renderer/src/i18n/locales/ja.json | 3 +-
src/renderer/src/i18n/locales/ko.json | 3 +-
src/renderer/src/i18n/locales/zh.json | 3 +-
12 files changed, 141 insertions(+), 39 deletions(-)
create mode 100644 src/renderer/src/components/settings/SettingsDisabledControlTooltip.tsx
diff --git a/src/renderer/src/components/settings/AppearanceChatContrastControls.tsx b/src/renderer/src/components/settings/AppearanceChatContrastControls.tsx
index c3c819d8bd08..64b3573bfd31 100644
--- a/src/renderer/src/components/settings/AppearanceChatContrastControls.tsx
+++ b/src/renderer/src/components/settings/AppearanceChatContrastControls.tsx
@@ -1,9 +1,14 @@
import { useState } from 'react'
import type { NativeChatAppearanceSettings } from '../../../../shared/native-chat-appearance-settings'
-import { chatTerminalControlledHint, getChatContrastEntriesByKey } from './chat-appearance-search'
+import {
+ chatTerminalControlledHint,
+ chatTerminalControlledTooltip,
+ getChatContrastEntriesByKey
+} from './chat-appearance-search'
import { translate } from '@/i18n/i18n'
import { Slider } from '../ui/slider'
import { SearchableSetting } from './SearchableSetting'
+import { SettingsDisabledControlTooltip } from './SettingsDisabledControlTooltip'
import { SettingsRow, SettingsSwitchRow } from './SettingsFormControls'
type ChatContrastControlsProps = {
@@ -68,18 +73,22 @@ function ChatContrastSlider({
{translate('settings.appearance.chat.softer', 'Softer')}
-
- setDraft({ savedContrast: contrast, value })}
- onValueCommit={([value]) => onChange({ contrast: value })}
- />
-
+
+
+ setDraft({ savedContrast: contrast, value })}
+ onValueCommit={([value]) => onChange({ contrast: value })}
+ />
+
+
{translate('settings.appearance.chat.sharper', 'Sharper')}
diff --git a/src/renderer/src/components/settings/AppearanceChatSection.test.tsx b/src/renderer/src/components/settings/AppearanceChatSection.test.tsx
index 927a7f35e6b9..25c592167973 100644
--- a/src/renderer/src/components/settings/AppearanceChatSection.test.tsx
+++ b/src/renderer/src/components/settings/AppearanceChatSection.test.tsx
@@ -4,6 +4,7 @@ import type { GlobalSettings } from '../../../../shared/global-settings-types'
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { getDefaultSettings } from '../../../../shared/constants'
+import { TooltipProvider } from '../ui/tooltip'
import { AppearanceChatSection } from './AppearanceChatSection'
import {
getChatAppearanceEntriesByKey,
@@ -176,7 +177,8 @@ describe('chat appearance settings controls', () => {
}
const updateSettings = persistInMock(settings)
const { rerender } = render(
-
+ ,
+ { wrapper: TooltipProvider }
)
expect(screen.getAllByText('Set by terminal interface.')).toHaveLength(3)
expect(screen.getByRole('spinbutton', { name: 'Text size' }).hasAttribute('disabled')).toBe(
@@ -218,4 +220,47 @@ describe('chat appearance settings controls', () => {
)
expect(screen.getByRole('radio', { name: 'Wide' }).getAttribute('aria-checked')).toBe('true')
})
+
+ const terminalTooltip =
+ 'Matching your terminal interface. Turn off Match terminal interface to change this.'
+ const controlledControls = [
+ ['spinbutton', 'Text size'],
+ ['spinbutton', 'Code text size'],
+ ['slider', 'Contrast']
+ ] as const
+
+ it.each(controlledControls)(
+ 'explains a matched %s "%s" on hover of its wrapper',
+ async (role, name) => {
+ const settings = {
+ ...getDefaultSettings('/tmp'),
+ nativeChatAppearance: { matchTerminalInterface: true }
+ }
+ render(
+ ,
+ { wrapper: TooltipProvider }
+ )
+ const trigger = screen.getByRole(role, { name }).closest('[data-slot="tooltip-trigger"]')
+ expect(trigger).not.toBeNull()
+ fireEvent.pointerMove(trigger!, { pointerType: 'mouse' })
+ expect((await screen.findByRole('tooltip')).textContent).toBe(terminalTooltip)
+ // Width stays editable and unexplained.
+ expect(
+ screen.getByRole('radio', { name: 'Wide' }).closest('[data-slot="tooltip-trigger"]')
+ ).toBeNull()
+ }
+ )
+
+ it('gives the controls no tooltip while matching is off', () => {
+ const settings = getDefaultSettings('/tmp')
+ render(, {
+ wrapper: TooltipProvider
+ })
+ for (const [role, name] of controlledControls) {
+ const control = screen.getByRole(role, { name })
+ expect(control.closest('[data-slot="tooltip-trigger"]')).toBeNull()
+ fireEvent.pointerMove(control, { pointerType: 'mouse' })
+ }
+ expect(screen.queryByRole('tooltip')).toBeNull()
+ })
})
diff --git a/src/renderer/src/components/settings/AppearanceChatSection.tsx b/src/renderer/src/components/settings/AppearanceChatSection.tsx
index 245e33858bc8..94e72ad91fd2 100644
--- a/src/renderer/src/components/settings/AppearanceChatSection.tsx
+++ b/src/renderer/src/components/settings/AppearanceChatSection.tsx
@@ -13,6 +13,7 @@ import { SearchableSetting } from './SearchableSetting'
import { NumberField, SettingsRow, SettingsSegmentedControl } from './SettingsFormControls'
import {
chatTerminalControlledHint,
+ chatTerminalControlledTooltip,
getChatAppearanceEntriesByKey,
getChatWidthOptions
} from './chat-appearance-search'
@@ -60,6 +61,7 @@ export function AppearanceChatSection({
value={appearance.fontSize}
defaultValue={matching ? undefined : 14}
disabled={matching}
+ disabledReason={chatTerminalControlledTooltip()}
min={12}
max={20}
integer
@@ -78,6 +80,7 @@ export function AppearanceChatSection({
value={appearance.codeFontSize}
defaultValue={matching ? undefined : 12}
disabled={matching}
+ disabledReason={chatTerminalControlledTooltip()}
min={10}
max={18}
integer
diff --git a/src/renderer/src/components/settings/SettingsDisabledControlTooltip.tsx b/src/renderer/src/components/settings/SettingsDisabledControlTooltip.tsx
new file mode 100644
index 000000000000..2228b6cd4c0d
--- /dev/null
+++ b/src/renderer/src/components/settings/SettingsDisabledControlTooltip.tsx
@@ -0,0 +1,26 @@
+import type React from 'react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
+
+/** Explains why a settings control is disabled; renders the control untouched without a reason. */
+export function SettingsDisabledControlTooltip({
+ reason,
+ children
+}: {
+ reason?: string
+ children: React.ReactNode
+}): React.JSX.Element {
+ if (!reason) {
+ return <>{children}
+ }
+ return (
+
+
+ {/* Disabled controls drop hover events, so an enabled wrapper carries the tooltip. */}
+ {children}
+
+
+ {reason}
+
+
+ )
+}
diff --git a/src/renderer/src/components/settings/SettingsFormControls.tsx b/src/renderer/src/components/settings/SettingsFormControls.tsx
index 300bdb992283..d7e276803de4 100644
--- a/src/renderer/src/components/settings/SettingsFormControls.tsx
+++ b/src/renderer/src/components/settings/SettingsFormControls.tsx
@@ -4,6 +4,7 @@ import { Input } from '../ui/input'
import { Label } from '../ui/label'
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'
import { Switch } from '../ui/switch'
+import { SettingsDisabledControlTooltip } from './SettingsDisabledControlTooltip'
import { normalizeColor } from '@/lib/terminal-theme'
import { cn } from '@/lib/utils'
import { translate } from '@/i18n/i18n'
@@ -276,6 +277,8 @@ type NumberFieldProps = {
suffix?: string
className?: string
disabled?: boolean
+ /** Hover explanation shown only while the field is disabled. */
+ disabledReason?: string
}
export function ColorField({
@@ -325,7 +328,8 @@ export function NumberField({
placeholder,
suffix,
className,
- disabled = false
+ disabled = false,
+ disabledReason
}: NumberFieldProps): React.JSX.Element {
const [draft, setDraft] = useState(Number.isFinite(value) ? String(value) : '')
const [prevValue, setPrevValue] = useState(value)
@@ -379,24 +383,26 @@ export function NumberField({
}
control={