🤖 feat: add Settings Manager with Providers/Models/General sections

- Add SettingsModal with sidebar navigation between sections
- General section: theme toggle (light/dark)
- Providers section: configure API keys and base URLs per provider
- Models section: add/remove custom models per provider
- Command Palette integration: 'Open Settings', 'Settings: Providers', 'Settings: Models'
- New IPC channels: PROVIDERS_GET_CONFIG, PROVIDERS_SET_MODELS
- getConfig returns apiKeySet boolean (not the key value) for security

_Generated with mux_

Author: ibetitsmike

src/browser/App.stories.tsx

@@ -37,6 +37,8 @@ function setupMockAPI(options: {
     },
     providers: {
       setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
+      setModels: () => Promise.resolve({ success: true, data: undefined }),
+      getConfig: () => Promise.resolve({} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>),
       list: () => Promise.resolve([]),
     },
     workspace: {
@@ -543,6 +545,8 @@ export const ActiveWorkspaceWithChat: Story = {
           apiOverrides: {
             providers: {
               setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
+              setModels: () => Promise.resolve({ success: true, data: undefined }),
+              getConfig: () => Promise.resolve({} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>),
               list: () => Promise.resolve(["anthropic", "openai", "xai"]),
             },
             workspace: {

src/browser/App.tsx

@@ -34,6 +34,9 @@ import type { BranchListResult } from "@/common/types/ipc";
 import { useTelemetry } from "./hooks/useTelemetry";
 import { useStartWorkspaceCreation, getFirstProjectPath } from "./hooks/useStartWorkspaceCreation";
 
+import { SettingsProvider, useSettings } from "./contexts/SettingsContext";
+import { SettingsModal } from "./components/Settings/SettingsModal";
+
 const THINKING_LEVELS: ThinkingLevel[] = ["off", "low", "medium", "high"];
 
 function AppInner() {
@@ -50,6 +53,7 @@ function AppInner() {
     clearPendingWorkspaceCreation,
   } = useWorkspaceContext();
   const { theme, setTheme, toggleTheme } = useTheme();
+  const { open: openSettings } = useSettings();
   const setThemePreference = useCallback(
     (nextTheme: ThemeMode) => {
       setTheme(nextTheme);
@@ -412,6 +416,7 @@ function AppInner() {
     onOpenWorkspaceInTerminal: openWorkspaceInTerminal,
     onToggleTheme: toggleTheme,
     onSetTheme: setThemePreference,
+    onOpenSettings: openSettings,
   };
 
   useEffect(() => {
@@ -623,6 +628,7 @@ function AppInner() {
           onClose={closeProjectCreateModal}
           onSuccess={addProject}
         />
+        <SettingsModal />
       </div>
     </>
   );
@@ -631,9 +637,11 @@ function AppInner() {
 function App() {
   return (
     <ThemeProvider>
-      <CommandRegistryProvider>
-        <AppInner />
-      </CommandRegistryProvider>
+      <SettingsProvider>
+        <CommandRegistryProvider>
+          <AppInner />
+        </CommandRegistryProvider>
+      </SettingsProvider>
     </ThemeProvider>
   );
 }

src/browser/api.ts

@@ -233,6 +233,9 @@ const webApi: IPCApi = {
   providers: {
     setProviderConfig: (provider, keyPath, value) =>
       invokeIPC(IPC_CHANNELS.PROVIDERS_SET_CONFIG, provider, keyPath, value),
+    setModels: (provider, models) =>
+      invokeIPC(IPC_CHANNELS.PROVIDERS_SET_MODELS, provider, models),
+    getConfig: () => invokeIPC(IPC_CHANNELS.PROVIDERS_GET_CONFIG),
     list: () => invokeIPC(IPC_CHANNELS.PROVIDERS_LIST),
   },
   projects: {

src/browser/components/Settings/SettingsModal.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useCallback } from "react";
+import { Settings, Key, Cpu, X } from "lucide-react";
+import { useSettings } from "@/browser/contexts/SettingsContext";
+import { ModalOverlay } from "@/browser/components/Modal";
+import { matchesKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
+import { GeneralSection } from "./sections/GeneralSection";
+import { ProvidersSection } from "./sections/ProvidersSection";
+import { ModelsSection } from "./sections/ModelsSection";
+import type { SettingsSection } from "./types";
+
+const SECTIONS: SettingsSection[] = [
+  {
+    id: "general",
+    label: "General",
+    icon: <Settings className="h-4 w-4" />,
+    component: GeneralSection,
+  },
+  {
+    id: "providers",
+    label: "Providers",
+    icon: <Key className="h-4 w-4" />,
+    component: ProvidersSection,
+  },
+  {
+    id: "models",
+    label: "Models",
+    icon: <Cpu className="h-4 w-4" />,
+    component: ModelsSection,
+  },
+];
+
+export function SettingsModal() {
+  const { isOpen, close, activeSection, setActiveSection } = useSettings();
+
+  const handleClose = useCallback(() => {
+    close();
+  }, [close]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (matchesKeybind(e, KEYBINDS.CANCEL)) {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose]);
+
+  if (!isOpen) return null;
+
+  const currentSection = SECTIONS.find((s) => s.id === activeSection) ?? SECTIONS[0];
+  const SectionComponent = currentSection.component;
+
+  return (
+    <ModalOverlay role="presentation" onClick={handleClose}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="settings-title"
+        onClick={(e) => e.stopPropagation()}
+        className="bg-dark border-border flex h-[70vh] max-h-[600px] w-[90%] max-w-[800px] overflow-hidden rounded-lg border shadow-lg"
+      >
+        {/* Sidebar */}
+        <div className="border-border-medium flex w-48 shrink-0 flex-col border-r">
+          <div className="border-border-medium flex items-center justify-between border-b px-4 py-3">
+            <h2 id="settings-title" className="text-foreground text-sm font-semibold">
+              Settings
+            </h2>
+          </div>
+          <nav className="flex-1 overflow-y-auto p-2">
+            {SECTIONS.map((section) => (
+              <button
+                key={section.id}
+                type="button"
+                onClick={() => setActiveSection(section.id)}
+                className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                  activeSection === section.id
+                    ? "bg-accent/20 text-accent"
+                    : "text-muted hover:bg-hover hover:text-foreground"
+                }`}
+              >
+                {section.icon}
+                {section.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Content */}
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <div className="border-border-medium flex items-center justify-between border-b px-6 py-3">
+            <h3 className="text-foreground text-sm font-medium">{currentSection.label}</h3>
+            <button
+              type="button"
+              onClick={handleClose}
+              className="text-muted hover:text-foreground rounded p-1 transition-colors"
+              aria-label="Close settings"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="flex-1 overflow-y-auto p-6">
+            <SectionComponent />
+          </div>
+        </div>
+      </div>
+    </ModalOverlay>
+  );
+}

src/browser/components/Settings/index.ts

@@ -0,0 +1,2 @@
+export { SettingsModal } from "./SettingsModal";
+export { SettingsProvider, useSettings } from "@/browser/contexts/SettingsContext";

src/browser/components/Settings/sections/GeneralSection.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { MoonStar, SunMedium } from "lucide-react";
+import { useTheme } from "@/browser/contexts/ThemeContext";
+
+export function GeneralSection() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-foreground mb-4 text-sm font-medium">Appearance</h3>
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="text-foreground text-sm">Theme</div>
+            <div className="text-muted text-xs">Choose light or dark appearance</div>
+          </div>
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="border-border-medium bg-background-secondary hover:bg-hover flex h-9 items-center gap-2 rounded-md border px-3 text-sm transition-colors"
+          >
+            {theme === "light" ? (
+              <>
+                <SunMedium className="h-4 w-4" />
+                <span>Light</span>
+              </>
+            ) : (
+              <>
+                <MoonStar className="h-4 w-4" />
+                <span>Dark</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/browser/components/Settings/sections/ModelsSection.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import type { ProvidersConfigMap } from "../types";
+import { SUPPORTED_PROVIDERS } from "@/common/constants/providers";
+
+interface NewModelForm {
+  provider: string;
+  modelId: string;
+}
+
+export function ModelsSection() {
+  const [config, setConfig] = useState<ProvidersConfigMap>({});
+  const [newModel, setNewModel] = useState<NewModelForm>({ provider: "", modelId: "" });
+  const [saving, setSaving] = useState(false);
+
+  // Load config on mount
+  useEffect(() => {
+    void (async () => {
+      const cfg = await window.api.providers.getConfig();
+      setConfig(cfg);
+    })();
+  }, []);
+
+  // Get all custom models across providers
+  const getAllModels = (): Array<{ provider: string; modelId: string }> => {
+    const models: Array<{ provider: string; modelId: string }> = [];
+    for (const [provider, providerConfig] of Object.entries(config)) {
+      if (providerConfig.models) {
+        for (const modelId of providerConfig.models) {
+          models.push({ provider, modelId });
+        }
+      }
+    }
+    return models;
+  };
+
+  const handleAddModel = useCallback(async () => {
+    if (!newModel.provider || !newModel.modelId.trim()) return;
+
+    setSaving(true);
+    try {
+      const currentModels = config[newModel.provider]?.models ?? [];
+      const updatedModels = [...currentModels, newModel.modelId.trim()];
+
+      await window.api.providers.setModels(newModel.provider, updatedModels);
+
+      // Refresh config
+      const cfg = await window.api.providers.getConfig();
+      setConfig(cfg);
+      setNewModel({ provider: "", modelId: "" });
+    } finally {
+      setSaving(false);
+    }
+  }, [newModel, config]);
+
+  const handleRemoveModel = useCallback(
+    async (provider: string, modelId: string) => {
+      setSaving(true);
+      try {
+        const currentModels = config[provider]?.models ?? [];
+        const updatedModels = currentModels.filter((m) => m !== modelId);
+
+        await window.api.providers.setModels(provider, updatedModels);
+
+        // Refresh config
+        const cfg = await window.api.providers.getConfig();
+        setConfig(cfg);
+      } finally {
+        setSaving(false);
+      }
+    },
+    [config]
+  );
+
+  const allModels = getAllModels();
+
+  return (
+    <div className="space-y-4">
+      <p className="text-muted text-xs">
+        Add custom models to use with your providers. These will appear in the model selector.
+      </p>
+
+      {/* Add new model form */}
+      <div className="border-border-medium bg-background-secondary rounded-md border p-4">
+        <div className="mb-3 text-sm font-medium">Add Custom Model</div>
+        <div className="flex gap-2">
+          <select
+            value={newModel.provider}
+            onChange={(e) => setNewModel((prev) => ({ ...prev, provider: e.target.value }))}
+            className="bg-modal-bg border-border-medium focus:border-accent rounded border px-2 py-1.5 text-sm focus:outline-none"
+          >
+            <option value="">Select provider</option>
+            {SUPPORTED_PROVIDERS.map((p) => (
+              <option key={p} value={p}>
+                {p}
+              </option>
+            ))}
+          </select>
+          <input
+            type="text"
+            value={newModel.modelId}
+            onChange={(e) => setNewModel((prev) => ({ ...prev, modelId: e.target.value }))}
+            placeholder="model-id (e.g., gpt-4-turbo)"
+            className="bg-modal-bg border-border-medium focus:border-accent flex-1 rounded border px-2 py-1.5 font-mono text-xs focus:outline-none"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void handleAddModel();
+            }}
+          />
+          <button
+            type="button"
+            onClick={() => void handleAddModel()}
+            disabled={saving || !newModel.provider || !newModel.modelId.trim()}
+            className="bg-accent hover:bg-accent-dark disabled:bg-border-medium flex items-center gap-1 rounded px-3 py-1.5 text-sm text-white transition-colors disabled:cursor-not-allowed"
+          >
+            <Plus className="h-4 w-4" />
+            Add
+          </button>
+        </div>
+      </div>
+
+      {/* List of custom models */}
+      {allModels.length > 0 ? (
+        <div className="space-y-2">
+          <div className="text-muted text-xs font-medium tracking-wide uppercase">
+            Custom Models
+          </div>
+          {allModels.map(({ provider, modelId }) => (
+            <div
+              key={`${provider}-${modelId}`}
+              className="border-border-medium bg-background-secondary flex items-center justify-between rounded-md border px-4 py-2"
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-muted text-xs capitalize">{provider}</span>
+                <span className="text-foreground font-mono text-sm">{modelId}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => void handleRemoveModel(provider, modelId)}
+                disabled={saving}
+                className="text-muted hover:text-error p-1 transition-colors"
+                title="Remove model"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-muted py-8 text-center text-sm">
+          No custom models configured. Add one above to get started.
+        </div>
+      )}
+    </div>
+  );
+}