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)

1 files changed, 14 insertions, 1 deletions

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 && (