feat: add advanced runtime and interface settings

Author: voidstackloop

app/src/llamacpp-manager.ts

@@ -38,7 +38,13 @@ const modelCache = new Map<string, LlamaModel>();
 const modelLoads = new Map<string, Promise<LlamaModel>>();
 const modelLastUsed = new Map<string, number>();
 const activeModelUsers = new Map<string, number>();
-const MAX_CACHED_MODELS = 2;
+let maxCachedModels = 2;
+
+export function setModelCacheLimit(limit: number): void {
+    if (!Number.isFinite(limit)) return;
+    maxCachedModels = Math.max(1, Math.min(Math.floor(limit), 8));
+    void evictIdleModels();
+}
 
 function modelCacheKey(modelPath: string, gpuLayers?: number): string {
     return `${modelPath}\0${gpuLayers ?? "auto"}`;
@@ -139,7 +145,7 @@ async function loadModel(modelPath: string, gpuLayers?: number): Promise<LlamaMo
 }
 
 async function evictIdleModels(protectedKey?: string): Promise<void> {
-    while (modelCache.size > MAX_CACHED_MODELS) {
+    while (modelCache.size > maxCachedModels) {
         const candidate = [...modelCache.keys()]
             .filter((key) => key !== protectedKey && (activeModelUsers.get(key) ?? 0) === 0)
             .sort((a, b) => (modelLastUsed.get(a) ?? 0) - (modelLastUsed.get(b) ?? 0))[0];

app/src/main.ts

@@ -395,6 +395,7 @@ function registerIpcHandlers(): void {
     ipcMain.handle("settings:save", (_event: IpcMainInvokeEvent, partial) => {
         const saved = settingsStore.saveSettings(partial);
         if (partial.ollamaHost !== undefined) ollama.setHost(saved.ollamaHost);
+        if (partial.llamaCppMaxCachedModels !== undefined) llamacpp.setModelCacheLimit(saved.llamaCppMaxCachedModels ?? 2);
         if (partial.keybindings !== undefined) {
             setupMenu(() => mainWindow, () => checkForUpdatesManually(() => mainWindow), saved.keybindings);
         }
@@ -750,6 +751,7 @@ app.whenReady().then(async () => {
     ollama.setHost(settingsStore.getSettings().ollamaHost);
     ollama.setModelsDir(settingsStore.getSettings().modelsDir);
     await ollama.start();
+    llamacpp.setModelCacheLimit(settingsStore.getSettings().llamaCppMaxCachedModels ?? 2);
     await llamacpp.setGpuBackend(settingsStore.getSettings().llamaCppGpuBackend ?? "auto");
     setupAutoUpdater(() => mainWindow);
     void connectEnabledMcpServers();

app/src/settings-store.ts

@@ -54,6 +54,10 @@ export interface AppSettings {
     promptPresets: PromptPreset[];
     theme: "light" | "dark" | "system";
     language: "en" | "tr";
+    uiDensity?: "comfortable" | "compact";
+    reduceMotion?: boolean;
+    agentMaxSteps?: number;
+    llamaCppMaxCachedModels?: number;
     // Text-to-speech: which browser/OS voice to use (voiceURI from
     // speechSynthesis.getVoices(), chosen client-side) and whether assistant
     // responses should be read aloud automatically as they finish.
@@ -106,6 +110,10 @@ const DEFAULTS: AppSettings = {
     promptPresets: [],
     theme: "system",
     language: "en",
+    uiDensity: "comfortable",
+    reduceMotion: false,
+    agentMaxSteps: 25,
+    llamaCppMaxCachedModels: 2,
 };
 
 function filePath(): string {

frontend/src/components/layout.tsx

@@ -540,11 +540,23 @@ export default function Layout() {
 
     useEffect(() => {
         if (!hasApi) return;
+        const applyDisplaySettings = (s: { uiDensity?: string; reduceMotion?: boolean }) => {
+            const root = document.documentElement;
+            root.classList.toggle("density-compact", s.uiDensity === "compact");
+            root.classList.toggle("reduce-motion", s.reduceMotion === true);
+        };
         window.api.settings.get().then((s) => {
             setShowOnboarding(!s.onboardingComplete);
             setKeybindings({ ...DEFAULT_KEYBINDINGS, ...s.keybindings });
+            applyDisplaySettings(s);
         });
-        return subscribeKeybindings(setKeybindings);
+        const onDisplaySettings = (event: Event) => applyDisplaySettings((event as CustomEvent).detail);
+        window.addEventListener("app:display-settings", onDisplaySettings);
+        const unsubscribe = subscribeKeybindings(setKeybindings);
+        return () => {
+            unsubscribe();
+            window.removeEventListener("app:display-settings", onDisplaySettings);
+        };
     }, [hasApi]);
 
     const query = search.trim().toLowerCase();

frontend/src/index.css

@@ -158,6 +158,21 @@
 
 * { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--muted-foreground) 35%, transparent) transparent; }
 
+.density-compact {
+  font-size: 14px;
+  --radius: 0.625rem;
+}
+.density-compact [data-slot="button"] { min-height: 1.75rem; }
+.density-compact [data-slot="input"] { height: 1.875rem; }
+.reduce-motion *,
+.reduce-motion *::before,
+.reduce-motion *::after {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
 .prose-chat p {
   margin: 0 0 0.5em;
 }

frontend/src/pages/Chat.tsx

@@ -163,7 +163,7 @@ const DIAGRAM_PROMPT_PRESETS: DiagramPromptPreset[] = [
 // Caps how many automatic tool-result -> model-continuation round trips can
 // happen for a single user turn, so a model that keeps calling tools without
 // ever producing a final answer can't loop indefinitely.
-const AGENT_MAX_STEPS = 25;
+const DEFAULT_AGENT_MAX_STEPS = 25;
 
 function buildMessageContent(text: string, attachments: Attachment[], ragContent = "") {
     const fileBlocks = attachments
@@ -395,6 +395,7 @@ export default function Chat() {
     const [pendingCustomProvider, setPendingCustomProvider] = useState<ProviderId | null>(null);
     const [customModelInput, setCustomModelInput] = useState("");
     const [settings, setSettings] = useState<AppSettings | null>(null);
+    const agentMaxSteps = Math.max(5, Math.min(settings?.agentMaxSteps ?? DEFAULT_AGENT_MAX_STEPS, 100));
     const [messages, setMessages] = useState<ChatMessage[]>([]);
     const [input, setInput] = useState("");
     const [attachments, setAttachments] = useState<Attachment[]>([]);
@@ -959,12 +960,12 @@ export default function Chat() {
     // (e.g. read a file, then act on what it found) without the user having
     // to prompt again.
     function continueAfterTools(updatedMessages: ChatMessage[]) {
-        if (agentStepCount >= AGENT_MAX_STEPS) {
+        if (agentStepCount >= agentMaxSteps) {
             setMessages((m) => [
                 ...m,
                 {
                     role: "assistant",
-                    content: `⚠️ Reached the agent step limit (${AGENT_MAX_STEPS}) for this turn. Send another message to let it continue.`,
+                    content: `⚠️ Reached the agent step limit (${agentMaxSteps}) for this turn. Send another message to let it continue.`,
                 },
             ]);
             return;
@@ -1408,7 +1409,7 @@ export default function Chat() {
                 )}
                 {agentStepCount > 0 && (
                     <span className="text-xs text-muted-foreground" title={t.agentStepTooltip}>
-                        {t.agentStep} {agentStepCount}/{AGENT_MAX_STEPS}
+                        {t.agentStep} {agentStepCount}/{agentMaxSteps}
                     </span>
                 )}
                 {agentMode && agentWorkspace && (

frontend/src/pages/Settings.tsx

@@ -84,6 +84,16 @@ import { cn } from "@/lib/utils";
 
 type SettingsTab = "general" | "models" | "integrations" | "chat" | "voice" | "automation" | "data";
 
+const SETTINGS_SEARCH_ITEMS: { tab: SettingsTab; label: string; keywords: string }[] = [
+    { tab: "general", label: "Appearance, density & motion", keywords: "theme color compact comfortable animation reduced motion language server gpu cache" },
+    { tab: "models", label: "Models & hardware", keywords: "ollama hugging face download vram recommendation gguf" },
+    { tab: "integrations", label: "Accounts, providers & MCP", keywords: "github hugging face api key custom gpu backend figma mcp" },
+    { tab: "chat", label: "Chat & agent behavior", keywords: "prompt temperature context tokens agent steps tool calls" },
+    { tab: "voice", label: "Voice & speech", keywords: "microphone transcription tts read aloud voice" },
+    { tab: "automation", label: "Automation", keywords: "scheduled task interval prompt" },
+    { tab: "data", label: "Data, activity & diagnostics", keywords: "export import logs memory activity clear" },
+];
+
 // Ollama pulls Hugging Face GGUF models via a "hf.co/user/repo[:quant]" model
 // name — accept a pasted full URL or the "huggingface.co/" host too, rather
 // than making the user hand-edit what they copied from their browser.
@@ -132,6 +142,7 @@ export default function Settings() {
     const [hasApi, setHasApi] = useState(true);
     const [search, setSearch] = useState("");
     const [activeTab, setActiveTab] = useState<SettingsTab>("general");
+    const [settingsQuery, setSettingsQuery] = useState("");
     const [openaiKeyInput, setOpenaiKeyInput] = useState("");
     const [anthropicKeyInput, setAnthropicKeyInput] = useState("");
     const [openaiKeySet, setOpenaiKeySet] = useState(false);
@@ -638,6 +649,9 @@ export default function Settings() {
         const merged = { ...settings, ...partial };
         setSettings(merged);
         await window.api.settings.save(partial);
+        if (partial.uiDensity !== undefined || partial.reduceMotion !== undefined) {
+            window.dispatchEvent(new CustomEvent("app:display-settings", { detail: merged }));
+        }
     }
 
     async function addMlxModel() {
@@ -843,11 +857,23 @@ export default function Settings() {
     return (
         <ScrollArea className="h-full bg-background/25">
             <div className="mx-auto max-w-5xl px-4 pb-20 pt-16 sm:px-6 md:pt-8 2xl:max-w-6xl">
-                <div className="mb-8 flex items-center gap-3">
-                    <span className="flex size-10 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-sm"><Settings2 className="size-5" /></span>
-                    <div><h1 className="text-2xl font-semibold tracking-tight">{t.settings}</h1><p className="mt-0.5 text-xs text-muted-foreground">Configure models, integrations, automation, and your workspace.</p></div>
+                <div className="mb-8 flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
+                    <div className="flex items-center gap-3"><span className="flex size-10 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-sm"><Settings2 className="size-5" /></span>
+                    <div><h1 className="text-2xl font-semibold tracking-tight">{t.settings}</h1><p className="mt-0.5 text-xs text-muted-foreground">Configure models, integrations, automation, and your workspace.</p></div></div>
+                    <div className="relative w-full sm:w-72">
+                        <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                        <Input value={settingsQuery} onChange={(e) => setSettingsQuery(e.target.value)} placeholder="Search settings…" className="h-10 rounded-xl bg-card pl-9 shadow-sm" aria-label="Search settings" />
+                    </div>
                 </div>
 
+                {settingsQuery.trim() && (
+                    <div className="surface-glass shadow-soft mb-6 grid gap-2 rounded-2xl border border-border/70 p-3 sm:grid-cols-2">
+                        {SETTINGS_SEARCH_ITEMS.filter((item) => `${item.label} ${item.keywords}`.toLowerCase().includes(settingsQuery.trim().toLowerCase())).map((item) => (
+                            <button key={item.tab} onClick={() => { setActiveTab(item.tab); setSettingsQuery(""); }} className="rounded-xl border border-transparent p-3 text-left text-sm font-medium transition-colors hover:border-primary/20 hover:bg-primary/5">{item.label}<span className="mt-0.5 block text-xs font-normal text-muted-foreground">Open {item.tab} settings</span></button>
+                        ))}
+                    </div>
+                )}
+
                 <Tabs
                     value={activeTab}
                     onValueChange={(v) => setActiveTab(v as SettingsTab)}
@@ -990,6 +1016,17 @@ export default function Settings() {
                                         );
                                     })()}
                                 </SettingsRow>
+                                <SettingsRow label="Warm model cache" description="Maximum llama.cpp model variants retained in RAM/VRAM. Lower values save memory; higher values make model switching faster.">
+                                    <Select value={String(settings.llamaCppMaxCachedModels ?? 2)} onValueChange={(v) => saveSettings({ llamaCppMaxCachedModels: Number(v) })}>
+                                        <SelectTrigger size="sm" className="w-44"><SelectValue /></SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="1">1 model · minimum memory</SelectItem>
+                                            <SelectItem value="2">2 models · balanced</SelectItem>
+                                            <SelectItem value="3">3 models · faster switching</SelectItem>
+                                            <SelectItem value="4">4 models · workstation</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </SettingsRow>
                                 <SettingsRow label={t.modelsDir} stacked>
                                     <div className="flex flex-wrap items-center gap-2">
                                         <span className="truncate rounded border border-border bg-muted px-2 py-1 font-mono text-xs">
@@ -1116,6 +1153,17 @@ export default function Settings() {
                                     ))}
                                 </div>
                             </SettingsRow>
+                            <SettingsRow label="Interface density" description="Choose how much information fits on screen.">
+                                <Select value={settings?.uiDensity ?? "comfortable"} onValueChange={(v) => saveSettings({ uiDensity: v as "comfortable" | "compact" })}>
+                                    <SelectTrigger size="sm" className="w-40"><SelectValue /></SelectTrigger>
+                                    <SelectContent><SelectItem value="comfortable">Comfortable</SelectItem><SelectItem value="compact">Compact</SelectItem></SelectContent>
+                                </Select>
+                            </SettingsRow>
+                            <SettingsRow label="Reduce motion" description="Minimize animations and smooth transitions for accessibility.">
+                                <button type="button" role="switch" aria-checked={settings?.reduceMotion ?? false} onClick={() => saveSettings({ reduceMotion: !(settings?.reduceMotion ?? false) })} className={cn("relative h-6 w-11 rounded-full transition-colors", settings?.reduceMotion ? "bg-primary" : "bg-muted")}>
+                                    <span className={cn("absolute top-0.5 size-5 rounded-full bg-white shadow-sm transition-transform", settings?.reduceMotion ? "translate-x-5" : "translate-x-0.5")} />
+                                </button>
+                            </SettingsRow>
                         </SettingsSection>
 
                         <SettingsSection title={t.language} className="mt-8">
@@ -2196,6 +2244,25 @@ export default function Settings() {
                                     </SettingsRow>
                                 </SettingsSection>
 
+                                <SettingsSection title="Agent runtime" description="Control how independently Agent Mode can work before returning control to you." className="mt-8">
+                                    <SettingsRow label="Maximum tool steps per turn" description="Stops runaway tool loops. Larger values suit long repository analysis; smaller values provide more frequent checkpoints.">
+                                        <Input type="number" min={5} max={100} step={5} value={settings.agentMaxSteps ?? 25} onChange={(e) => saveSettings({ agentMaxSteps: Math.max(5, Math.min(Number(e.target.value), 100)) })} className="w-24" aria-label="Maximum agent tool steps" />
+                                    </SettingsRow>
+                                    <SettingsRow label="Recommended profile" stacked>
+                                        <div className="grid gap-2 sm:grid-cols-3">
+                                            {[
+                                                { label: "Cautious", value: 10, note: "Frequent user review" },
+                                                { label: "Balanced", value: 25, note: "Best default" },
+                                                { label: "Autonomous", value: 50, note: "Long coding tasks" },
+                                            ].map((profile) => (
+                                                <button key={profile.label} onClick={() => saveSettings({ agentMaxSteps: profile.value })} className={cn("rounded-xl border p-3 text-left transition-colors", (settings.agentMaxSteps ?? 25) === profile.value ? "border-primary/40 bg-primary/5" : "border-border hover:bg-muted/50")}>
+                                                    <span className="block text-sm font-medium">{profile.label}</span><span className="mt-0.5 block text-xs text-muted-foreground">{profile.value} steps · {profile.note}</span>
+                                                </button>
+                                            ))}
+                                        </div>
+                                    </SettingsRow>
+                                </SettingsSection>
+
                                 <SettingsSection
                                     title={t.promptLibrary}
                                     description={t.promptLibraryVariablesHint}

frontend/src/types/electron.d.ts

@@ -211,6 +211,10 @@ export interface AppSettings {
   promptPresets: PromptPreset[];
   theme: "light" | "dark" | "system";
   language: "en" | "tr";
+  uiDensity?: "comfortable" | "compact";
+  reduceMotion?: boolean;
+  agentMaxSteps?: number;
+  llamaCppMaxCachedModels?: number;
   ttsVoiceURI?: string;
   ttsAutoRead?: boolean;
   mcpServers?: McpServerConfig[];