diff --git a/docs/configuration.md b/docs/configuration.md
index 0ea3d032..11c13c45 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -12,7 +12,8 @@ Settings are organized into tabs:
| Tab | Contents |
|-----|----------|
-| **General** | Font family and size, terminal width, log level and buffer, max output lines, shell configuration, input send behavior, default toggles (history, thinking), automatic tab naming, power management, updates, privacy, context warnings, usage stats, document graph, storage location |
+| **General** | Font family and size, terminal width, log level and buffer, shell configuration, input send behavior, default toggles (history, thinking), automatic tab naming, power management, updates, privacy, usage stats, storage location |
+| **Display** | Max output lines per response, document graph settings, context window warnings |
| **Shortcuts** | Customize keyboard shortcuts (see [Keyboard Shortcuts](./keyboard-shortcuts)) |
| **Themes** | Dark, light, and vibe mode themes, custom theme builder with import/export |
| **Notifications** | OS notifications, custom command notifications, toast notification duration |
diff --git a/docs/context-management.md b/docs/context-management.md
index 345bc53a..1dcade07 100644
--- a/docs/context-management.md
+++ b/docs/context-management.md
@@ -105,7 +105,7 @@ For best results, **compact your context before reaching 60-70% usage** — don'
### Configuring Warnings
-Customize warning thresholds in **Settings** (`Cmd+,` / `Ctrl+,`) → **General** → **Context Window Warnings**:
+Customize warning thresholds in **Settings** (`Cmd+,` / `Ctrl+,`) → **Display** → **Context Window Warnings**:

diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index 25fd2d73..2b8e3526 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -272,7 +272,7 @@ interface SettingsModalProps {
setCrashReportingEnabled: (value: boolean) => void;
customAICommands: CustomAICommand[];
setCustomAICommands: (commands: CustomAICommand[]) => void;
- initialTab?: 'general' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh';
+ initialTab?: 'general' | 'display' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh';
hasNoAgents?: boolean;
onThemeImportError?: (message: string) => void;
onThemeImportSuccess?: (message: string) => void;
@@ -314,7 +314,7 @@ export const SettingsModal = memo(function SettingsModal(props: SettingsModalPro
} = useSettings();
const [activeTab, setActiveTab] = useState<
- 'general' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh'
+ 'general' | 'display' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh'
>('general');
const [systemFonts, setSystemFonts] = useState([]);
const [customFonts, setCustomFonts] = useState([]);
@@ -468,10 +468,10 @@ export const SettingsModal = memo(function SettingsModal(props: SettingsModalPro
const handleTabNavigation = (e: KeyboardEvent) => {
const tabs: Array<
- 'general' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh'
+ 'general' | 'display' | 'llm' | 'shortcuts' | 'theme' | 'notifications' | 'aicommands' | 'ssh'
> = FEATURE_FLAGS.LLM_SETTINGS
- ? ['general', 'llm', 'shortcuts', 'theme', 'notifications', 'aicommands', 'ssh']
- : ['general', 'shortcuts', 'theme', 'notifications', 'aicommands', 'ssh'];
+ ? ['general', 'display', 'llm', 'shortcuts', 'theme', 'notifications', 'aicommands', 'ssh']
+ : ['general', 'display', 'shortcuts', 'theme', 'notifications', 'aicommands', 'ssh'];
const currentIndex = tabs.indexOf(activeTab);
if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === '[') {
@@ -877,6 +877,15 @@ export const SettingsModal = memo(function SettingsModal(props: SettingsModalPro
{activeTab === 'general' && General}
+
{FEATURE_FLAGS.LLM_SETTINGS && (
- {/* Max Output Lines */}
-
-
-
-
- Long outputs will be collapsed into a scrollable window. Set to "All" to always
- show full output.
-
-
-
{/* Default Shell */}
- {/* Document Graph Settings */}
-
-
-
- Document Graph
-
- Beta
-
-
-
- {/* Show External Links */}
-
-
-
- Show external links by default
-
-
- Display external website links as nodes. Can be toggled in the graph view.
-
-
-
-
-
- {/* Max Nodes */}
-
-
- Maximum nodes to display
-
-
- setDocumentGraphMaxNodes(Number(e.target.value))}
- className="flex-1 h-2 rounded-lg appearance-none cursor-pointer"
- style={{
- background: `linear-gradient(to right, ${theme.colors.accent} 0%, ${theme.colors.accent} ${((documentGraphMaxNodes - 50) / 950) * 100}%, ${theme.colors.bgActivity} ${((documentGraphMaxNodes - 50) / 950) * 100}%, ${theme.colors.bgActivity} 100%)`,
- }}
- />
-
- {documentGraphMaxNodes}
-
-
-
- Limits initial graph size for performance. Use "Load more" to show
- additional nodes.
-
-
-
-
-
{/* Settings Storage Location */}
@@ -2314,6 +2042,291 @@ export const SettingsModal = memo(function SettingsModal(props: SettingsModalPro
)}
+ {activeTab === 'display' && (
+
+ {/* Max Output Lines */}
+
+
+ Max Output Lines per Response
+
+
+
+ Long outputs will be collapsed into a scrollable window. Set to "All" to always
+ show full output.
+
+
+
+ {/* Document Graph Settings */}
+
+
+
+ Document Graph
+
+ Beta
+
+
+
+ {/* Show External Links */}
+
+
+
+ Show external links by default
+
+
+ Display external website links as nodes. Can be toggled in the graph view.
+
+
+
+
+
+ {/* Max Nodes */}
+
+
+ Maximum nodes to display
+
+
+ setDocumentGraphMaxNodes(Number(e.target.value))}
+ className="flex-1 h-2 rounded-lg appearance-none cursor-pointer"
+ style={{
+ background: `linear-gradient(to right, ${theme.colors.accent} 0%, ${theme.colors.accent} ${((documentGraphMaxNodes - 50) / 950) * 100}%, ${theme.colors.bgActivity} ${((documentGraphMaxNodes - 50) / 950) * 100}%, ${theme.colors.bgActivity} 100%)`,
+ }}
+ />
+
+ {documentGraphMaxNodes}
+
+
+
+ Limits initial graph size for performance. Use "Load more" to show
+ additional nodes.
+
+
+
+
+
+ {/* Context Window Warnings */}
+
+
+
+ Context Window Warnings
+
+
+ {/* Enable/Disable Toggle */}
+
+ updateContextManagementSettings({
+ contextWarningsEnabled: !contextManagementSettings.contextWarningsEnabled,
+ })
+ }
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ updateContextManagementSettings({
+ contextWarningsEnabled: !contextManagementSettings.contextWarningsEnabled,
+ });
+ }
+ }}
+ >
+
+
+ Show context consumption warnings
+
+
+ Display warning banners when context window usage reaches configurable
+ thresholds
+
+
+
+
+
+ {/* Threshold Sliders (ghosted when disabled) */}
+
+ {/* Yellow Warning Threshold */}
+
+
+
+
+ Yellow warning threshold
+
+
+ {contextManagementSettings.contextWarningYellowThreshold}%
+
+
+
{
+ const newYellow = Number(e.target.value);
+ // Validation: ensure yellow < red by at least 10%
+ if (newYellow >= contextManagementSettings.contextWarningRedThreshold) {
+ // Bump red threshold up
+ updateContextManagementSettings({
+ contextWarningYellowThreshold: newYellow,
+ contextWarningRedThreshold: Math.min(95, newYellow + 10),
+ });
+ } else {
+ updateContextManagementSettings({
+ contextWarningYellowThreshold: newYellow,
+ });
+ }
+ }}
+ className="w-full h-2 rounded-lg appearance-none cursor-pointer"
+ style={{
+ background: `linear-gradient(to right, #eab308 0%, #eab308 ${((contextManagementSettings.contextWarningYellowThreshold - 30) / 60) * 100}%, ${theme.colors.bgActivity} ${((contextManagementSettings.contextWarningYellowThreshold - 30) / 60) * 100}%, ${theme.colors.bgActivity} 100%)`,
+ }}
+ />
+
+
+ {/* Red Warning Threshold */}
+
+
+
+
+ Red warning threshold
+
+
+ {contextManagementSettings.contextWarningRedThreshold}%
+
+
+
{
+ const newRed = Number(e.target.value);
+ // Validation: ensure red > yellow by at least 10%
+ if (newRed <= contextManagementSettings.contextWarningYellowThreshold) {
+ // Bump yellow threshold down
+ updateContextManagementSettings({
+ contextWarningRedThreshold: newRed,
+ contextWarningYellowThreshold: Math.max(30, newRed - 10),
+ });
+ } else {
+ updateContextManagementSettings({ contextWarningRedThreshold: newRed });
+ }
+ }}
+ className="w-full h-2 rounded-lg appearance-none cursor-pointer"
+ style={{
+ background: `linear-gradient(to right, #ef4444 0%, #ef4444 ${((contextManagementSettings.contextWarningRedThreshold - 50) / 45) * 100}%, ${theme.colors.bgActivity} ${((contextManagementSettings.contextWarningRedThreshold - 50) / 45) * 100}%, ${theme.colors.bgActivity} 100%)`,
+ }}
+ />
+
+
+
+
+
+ )}
+
{activeTab === 'llm' && FEATURE_FLAGS.LLM_SETTINGS && (