feat(web): chat text contrast slider with live preview in Typography

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.

[dascapytal1559]

What Changed

A Chat text contrast slider in Settings → Appearance → Typography, controlling the tone of agent reply text in the web client.

• The scale reads as the text's strength: 80% (default) reproduces the current foreground/80 exactly — no visual change for any existing install.
• 100% renders full foreground in light mode and pure white in dark mode; between is a color-mix interpolation.
• A sample line under the slider is styled by the same CSS variable the slider drives, so the tone previews live while dragging.

Mechanically: one chatTextContrast client setting in contracts (int 80–100, default 80), synced to a --chat-text-contrast CSS variable from the root route, consumed via a derived --chat-markdown-foreground color by the chat markdown root and collapsed details bodies. The slider row follows the existing glass-opacity pattern (reset, settings search, restore-defaults sweep). User message bubbles keep their own message-foreground. 7 files, +153/−2; no dependency changes. Mobile has its own native markdown theming and is deliberately untouched.

Why

Chat body text renders at foreground/80, which composites to ~#c6c6c6 over dark backgrounds. Over long reading sessions that tone gets genuinely tiring — but bumping it for everyone would repaint every install, and taste differs. A bounded slider whose default is pixel-identical to today's rendering lets people who feel this pick their tone without changing anything for anyone else.

I understand new features are usually unwelcome here — this one is deliberately tiny and default-preserving, but if it's not something you want, feel free to close, or I'm happy to convert it into a discussion instead.

UI Changes

The setting with its live sample (dark mode). Dragging previews the tone immediately:

Agent reply before/after, captured through the real slider → settings → CSS variable path. Computed colors verified: 80% → srgb(.96 .96 .96 / 0.8) (identical to current foreground/80 rendering, so this is the "before"), 90% → srgb(.98 .98 .98 / 0.9), 100% → srgb(1 1 1).

80% — before / default:

100% — pure white:

The settings row in place:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Built by Claude Fable 5 in Claude Code.

🤖 Generated with Claude Code

---

Note

Low Risk
Appearance-only client setting with default 80 matching current rendering; no auth, data, or API changes.

Overview
Adds a Chat text contrast control (80–100%, default 80) so users can brighten agent reply markdown without changing the look for existing installs at the default.

The setting is persisted in contracts as chatTextContrast, synced from the root route to --chat-text-contrast (mapped to a 0–100% mix progress), and applied via a new --chat-markdown-foregroundcolor-mix in global CSS. ChatMarkdown and collapsible details bodies switch from fixed text-foreground/80 to that variable.

Settings → Appearance → Typography gets a slider row (reset, restore-defaults, search) with a live preview sample. Contract tests cover validation and defaults.

^{Reviewed by Cursor Bugbot for commit a50dc7e. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add chat text contrast slider with live preview to Typography settings

• Adds a chatTextContrast integer setting (range 80–100, default 80) to ClientSettingsSchema and ClientSettingsPatch in settings.ts.
• Introduces --chat-text-contrast and --chat-markdown-foreground CSS variables in index.css; chat markdown text color now blends between 80% and 100% foreground opacity based on the setting.
• Adds ChatTextContrastSync to the root tree in __root.tsx to keep the CSS variable in sync with the stored setting without a page reload.
• Renders a slider with numeric output, reset button, and live preview paragraph in the Typography section of SettingsPanels.tsx; restoring defaults also resets this value.
• Makes the setting discoverable via settings search under "Chat text contrast" navigating to /settings/appearance.

^{Macroscope summarized a50dc7e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cb232cb4-07e8-4cb0-8cb5-f3fd2b4fc35f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

UI consistency review: one behavioral regression in the settings restore flow, plus one minor durable-contract note on the CSS variable mapping. The --chat-markdown-foreground token, its @variant dark override, and the text-(--chat-markdown-foreground) call sites otherwise look consistent with the existing theme/token ownership (custom themes keep working because --foreground is redefined on the same html element the variable is declared on).

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7eda866. Configure here.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR introduces a new user-facing feature (chat text contrast slider with live preview), adding new settings, CSS variables, and UI components. New features that introduce user-facing behavior warrant human review regardless of implementation quality.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

UI consistency review of the chat text contrast setting. The two findings from the previous run (missing settings.chatTextContrast memo dependency, and the re-derived contrast range in __root.tsx) are resolved. One remaining consistency note on the duplicated slider control.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

This reproduces the glass-opacity slider control verbatim (AppearanceSettingsPanel, lines ~989-1057): same value-chip classes, same settings-slider min-w-0 flex-1 input, same --settings-slider-progress / --settings-slider-fill-offset math, and the same clamp-on-change guard. With two call sites the geometry can now drift — a chip padding or fill-offset fix has to be applied in both places, and only one of them owns the .settings-slider contract in index.css.

Consider extracting a small shared control (e.g. SettingsPercentSlider({ id, label, min, max, step, value, onChange }) in settingsLayout.tsx) that owns the chip, the slider element, and the progress/offset variables, and have both rows render it with only their labels and bounds at the call site.

^{Posted via Macroscope — UI Consistency}

[dascapytal1559]

Declining for this PR, deliberately: the row mirrors the glass-opacity control precisely because that inline pattern is the existing precedent in AppearanceSettingsPanel, and extracting a shared SettingsPercentSlider would mean refactoring the existing glass-opacity row inside a feature PR — widening a change that upstream guidelines want small, focused, and additive. The drift risk is real but bounded (two call sites, both owned by the same file's conventions). Happy to do the extraction as a tiny follow-up PR, or fold it into this one if a maintainer prefers that trade.

[macroscopeapp]

Sorry, I'm unable to act on this request because you do not have permissions within this repository.

[t3dotgg]

Note

🤖 GPT-5.6 Sol responding on behalf of Theo

Closing this PR after an automated pass over open pull requests. The appearance contrast control already shipped in #7906.