diff --git a/packages/ui/src/components/settings-screen.tsx b/packages/ui/src/components/settings-screen.tsx
index 48fe45d1..f3776cbd 100644
--- a/packages/ui/src/components/settings-screen.tsx
+++ b/packages/ui/src/components/settings-screen.tsx
@@ -45,7 +45,6 @@ export const SettingsScreen: Component = () => {
{t("settings.title")}
- {t("settings.description")}
diff --git a/packages/ui/src/components/settings/appearance-settings-section.tsx b/packages/ui/src/components/settings/appearance-settings-section.tsx
index e8e5df25..7a634160 100644
--- a/packages/ui/src/components/settings/appearance-settings-section.tsx
+++ b/packages/ui/src/components/settings/appearance-settings-section.tsx
@@ -1,7 +1,10 @@
-import type { Component } from "solid-js"
-import { Check, Laptop, Moon, Sun } from "lucide-solid"
+import { Select } from "@kobalte/core/select"
+import { createEffect, createMemo, createSignal, For, type Component } from "solid-js"
+import { Check, ChevronDown, Laptop, Moon, Sun } from "lucide-solid"
import { useI18n } from "../../lib/i18n"
import { useTheme, type ThemeMode } from "../../lib/theme"
+import { useConfig } from "../../stores/preferences"
+import { getBehaviorSettings, type BehaviorSetting } from "../../lib/settings/behavior-registry"
const themeModeOptions: Array<{ value: ThemeMode; icon: typeof Laptop }> = [
{ value: "system", icon: Laptop },
@@ -12,6 +15,200 @@ const themeModeOptions: Array<{ value: ThemeMode; icon: typeof Laptop }> = [
export const AppearanceSettingsSection: Component = () => {
const { t } = useI18n()
const { themeMode, setThemeMode } = useTheme()
+ const {
+ preferences,
+ updatePreferences,
+ toggleShowThinkingBlocks,
+ toggleKeyboardShortcutHints,
+ toggleShowTimelineTools,
+ toggleUsageMetrics,
+ toggleAutoCleanupBlankSessions,
+ togglePromptSubmitOnEnter,
+ setDiffViewMode,
+ setToolOutputExpansion,
+ setDiagnosticsExpansion,
+ setThinkingBlocksExpansion,
+ setToolInputsVisibility,
+ } = useConfig()
+
+ const behaviorSettings = createMemo(() =>
+ getBehaviorSettings({
+ preferences,
+ updatePreferences,
+ toggleShowThinkingBlocks,
+ toggleKeyboardShortcutHints,
+ toggleShowTimelineTools,
+ toggleUsageMetrics,
+ toggleAutoCleanupBlankSessions,
+ togglePromptSubmitOnEnter,
+ setDiffViewMode,
+ setToolOutputExpansion,
+ setDiagnosticsExpansion,
+ setThinkingBlocksExpansion,
+ setToolInputsVisibility,
+ }),
+ )
+
+ const [overrides, setOverrides] = createSignal