From d44d0f61e4026da35c0d1a4acb87ba71ed6cd599 Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sun, 1 Mar 2026 08:31:52 -0800
Subject: feat(settings): add configurable model selection

- Add Model settings section with free-text input for model override
- Pass configured model through to SDK query() calls
- Display active model badge in ActionBar next to token usage
- Seed model state from DB on mount, update from system:init events
- Empty/unset value uses SDK default (no breaking change)
---
 renderer/src/App.tsx                               | 15 +++-
 renderer/src/components/ActionBar.tsx              |  9 +++
 renderer/src/components/SettingsPage.tsx           | 14 +++-
 renderer/src/components/settings/ModelSettings.tsx | 94 ++++++++++++++++++++++
 renderer/src/styles/globals.css                    | 29 +++++++
 5 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 renderer/src/components/settings/ModelSettings.tsx

(limited to 'renderer/src')

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 36d3a82..b2cd168 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -59,6 +59,7 @@ export function App() {
   });
   const [error, setError] = useState<string | null>(null);
   const [showSettings, setShowSettings] = useState(false);
+  const [activeModel, setActiveModel] = useState<string | null>(null);
 
   const [theme, setTheme] = useState<Theme>(
     () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
@@ -147,9 +148,14 @@ export function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedSession, isLoading]);
 
-  // Load projects on mount
+  // Load projects and initial model setting on mount
   useEffect(() => {
     api.listProjects().then(setProjects);
+    // Seed the model badge from the DB so it shows before any query fires.
+    // system:init will overwrite this with the SDK-resolved name once a query runs.
+    api.getSettings(["model"]).then((s) => {
+      if (s["model"]) setActiveModel(s["model"]);
+    });
   }, []);
 
   // Load sessions when project changes
@@ -209,6 +215,12 @@ export function App() {
         );
       }
 
+      // ── Model resolved by SDK ────────────────────────────────────────
+      // SDKSystemMessage (subtype "init") contains the actual model in use.
+      if (msg.type === "system" && msg.subtype === "init") {
+        setActiveModel((msg as { model?: string }).model ?? null);
+      }
+
       // ── Result (success or error) ────────────────────────────────────
       // Always clear loading state on any result subtype so error results
       // don't leave the UI stuck in the loading/thinking state.
@@ -498,6 +510,7 @@ export function App() {
           }
         }}
         disabled={!selectedSession}
+        modelName={activeModel}
       />
 
       {showSettings && (
diff --git a/renderer/src/components/ActionBar.tsx b/renderer/src/components/ActionBar.tsx
index 22f34b4..d270583 100644
--- a/renderer/src/components/ActionBar.tsx
+++ b/renderer/src/components/ActionBar.tsx
@@ -11,6 +11,7 @@ interface ActionBarProps {
   onSubmit: () => void;
   onPermissionModeChange: (mode: PermissionMode) => void;
   disabled: boolean;
+  modelName?: string | null;
 }
 
 export function ActionBar({
@@ -23,6 +24,7 @@ export function ActionBar({
   onSubmit,
   onPermissionModeChange,
   disabled,
+  modelName,
 }: ActionBarProps) {
   const totalTokens = tokenUsage.inputTokens + tokenUsage.outputTokens;
   const maxTokens = 200000;
@@ -52,6 +54,13 @@ export function ActionBar({
           </span>
         </div>
 
+        {/* ── Model badge ── */}
+        {modelName && (
+          <span className="model-badge" title="Active model">
+            {modelName}
+          </span>
+        )}
+
         {phase === "implement" && (
           <label className="permission-toggle">
             <input
diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
index 9ebde44..d3ff4bf 100644
--- a/renderer/src/components/SettingsPage.tsx
+++ b/renderer/src/components/SettingsPage.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { SystemPromptsSettings } from "./settings/SystemPromptsSettings";
 import { GitSettings } from "./settings/GitSettings";
+import { ModelSettings } from "./settings/ModelSettings";
 
-type SettingsSection = "system-prompts" | "git";
+type SettingsSection = "model" | "system-prompts" | "git";
 
 interface SettingsPageProps {
   onClose: () => void;
@@ -10,7 +11,7 @@ interface SettingsPageProps {
 
 export function SettingsPage({ onClose }: SettingsPageProps) {
   const [activeSection, setActiveSection] =
-    useState<SettingsSection>("system-prompts");
+    useState<SettingsSection>("model");
 
   return (
     <div className="settings-overlay">
@@ -31,6 +32,14 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
       <div className="settings-body">
         {/* Side nav */}
         <nav className="settings-nav">
+          <button
+            className={`settings-nav-item${
+              activeSection === "model" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("model")}
+          >
+            Model
+          </button>
           <button
             className={`settings-nav-item${
               activeSection === "system-prompts" ? " active" : ""
@@ -51,6 +60,7 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
 
         {/* Content */}
         <div className="settings-content">
+          {activeSection === "model" && <ModelSettings />}
           {activeSection === "system-prompts" && <SystemPromptsSettings />}
           {activeSection === "git" && <GitSettings />}
         </div>
diff --git a/renderer/src/components/settings/ModelSettings.tsx b/renderer/src/components/settings/ModelSettings.tsx
new file mode 100644
index 0000000..ecfc12c
--- /dev/null
+++ b/renderer/src/components/settings/ModelSettings.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from "react";
+
+const api = window.api;
+
+export function ModelSettings() {
+  // null = not yet loaded from DB
+  const [model, setModel] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saved">("idle");
+
+  useEffect(() => {
+    api.getSettings(["model"]).then((settings) => {
+      const saved = settings["model"] ?? "";
+      setModel(saved);
+      setDraft(saved);
+    });
+  }, []);
+
+  const handleSave = async () => {
+    const trimmed = draft.trim();
+    if (trimmed) {
+      await api.setSetting("model", trimmed);
+      setModel(trimmed);
+    } else {
+      await api.deleteSetting("model");
+      setModel("");
+    }
+    setSaveStatus("saved");
+    setTimeout(() => setSaveStatus("idle"), 1500);
+  };
+
+  const handleReset = async () => {
+    await api.deleteSetting("model");
+    setModel("");
+    setDraft("");
+    setSaveStatus("saved");
+    setTimeout(() => setSaveStatus("idle"), 1500);
+  };
+
+  if (model === null) {
+    return (
+      <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  const isDirty = draft.trim() !== model;
+
+  return (
+    <div>
+      <div className="settings-section-title">Model</div>
+      <div className="settings-section-desc">
+        Claude model to use for all phases. Leave blank to use the SDK&apos;s
+        default model. Takes effect on the next message sent in any session.
+      </div>
+
+      <div className="settings-toggle-row">
+        <input
+          className="settings-model-input"
+          type="text"
+          value={draft}
+          placeholder="Default (e.g. claude-sonnet-4-5)"
+          onChange={(e) => {
+            setDraft(e.target.value);
+            setSaveStatus("idle");
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSave();
+          }}
+          spellCheck={false}
+        />
+      </div>
+
+      <div className="settings-actions">
+        {model && (
+          <button className="btn-secondary" onClick={handleReset}>
+            Reset to Default
+          </button>
+        )}
+        <button
+          className="btn-primary"
+          onClick={handleSave}
+          disabled={!isDirty}
+        >
+          {saveStatus === "saved" ? "Saved \u2713" : "Save"}
+        </button>
+        {model && (
+          <span className="settings-custom-badge">custom</span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 7a8ae45..0db62c2 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -621,6 +621,17 @@ html[data-theme="light"] .chat-input input:focus {
   color: var(--text-secondary);
 }
 
+.model-badge {
+  font-size: 11px;
+  font-family: var(--font-mono, monospace);
+  color: var(--text-secondary);
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  white-space: nowrap;
+  user-select: none;
+}
+
 .permission-toggle {
   display: flex;
   align-items: center;
@@ -953,6 +964,24 @@ html[data-theme="light"] .settings-textarea:focus {
   border-color: var(--warning);
 }
 
+/* ── Model Input ─────────────────────────────────────────────── */
+.settings-model-input {
+  width: 100%;
+  padding: 6px 8px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: var(--font-mono, monospace);
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.settings-model-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
 /* ── Settings Actions Row ────────────────────────────────────── */
 .settings-actions {
   display: flex;
-- 
cgit v1.2.3