3 files changed, 36 insertions, 33 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 5fb3dd1..b53184b 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -487,22 +487,7 @@ export function App() {
     setMessages([]);
     setDocumentContent("");
     setOriginalContent("");
-
-    // For sessions that start beyond research, kick off Claude immediately
-    // with the same message used when advancing into that phase via Submit.
-    if (phase === "plan" || phase === "implement") {
-      const initialMsg =
-        phase === "plan"
-          ? "Create a detailed implementation plan based on the research."
-          : "Begin implementing the plan.";
-      setLoadingBySession((prev) => ({ ...prev, [session.id]: true }));
-      try {
-        await api.sendMessage(session.id, initialMsg);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to start session");
-        setLoadingBySession((prev) => ({ ...prev, [session.id]: false }));
-      }
-    }
+    // User starts the conversation — no auto-send for manually-chosen phases.
   };
 
   const handleDeleteProject = async (id: string) => {
@@ -552,8 +537,6 @@ export function App() {
     <div className="app">
       <Header
         selectedSession={selectedSession}
-        theme={theme}
-        onToggleTheme={handleToggleTheme}
         gitBranch={selectedSession?.git_branch ?? null}
         onOpenSettings={() => setShowSettings(true)}
         viewPhase={viewPhase}
@@ -661,7 +644,11 @@ export function App() {
       />
 
       {showSettings && (
-        <SettingsPage onClose={() => setShowSettings(false)} />
+        <SettingsPage
+          onClose={() => setShowSettings(false)}
+          theme={theme}
+          onToggleTheme={handleToggleTheme}
+        />
       )}
 
       {showNewSessionModal && (
diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index 4e193e8..84b9135 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -3,12 +3,8 @@ import type { Session, Phase } from "../types";
 
 const api = window.api;
 
-type Theme = "dark" | "light";
-
 interface HeaderProps {
   selectedSession: Session | null;
-  theme: Theme;
-  onToggleTheme: () => void;
   gitBranch: string | null;
   onOpenSettings: () => void;
   viewPhase: Phase;
@@ -25,8 +21,6 @@ const phases: Phase[] = ["research", "plan", "implement"];
 
 export function Header({
   selectedSession,
-  theme,
-  onToggleTheme,
   gitBranch,
   onOpenSettings,
   viewPhase,
@@ -103,11 +97,6 @@ export function Header({
           </button>
         )}
 
-        {/* ── Theme toggle ── */}
-        <button className="theme-toggle" onClick={onToggleTheme}>
-          {theme === "dark" ? "[light]" : "[dark]"}
-        </button>
-
         {/* ── Maximize toggle ── */}
         <button
           className="maximize-btn"
diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
index 7d06547..0c0c2e8 100644
--- a/renderer/src/components/SettingsPage.tsx
+++ b/renderer/src/components/SettingsPage.tsx
@@ -4,15 +4,18 @@ import { GitSettings } from "./settings/GitSettings";
 import { ModelSettings } from "./settings/ModelSettings";
 import { McpSettings } from "./settings/McpSettings";
 
-type SettingsSection = "model" | "mcp" | "system-prompts" | "git";
+type Theme = "dark" | "light";
+type SettingsSection = "appearance" | "model" | "mcp" | "system-prompts" | "git";
 
 interface SettingsPageProps {
   onClose: () => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }
 
-export function SettingsPage({ onClose }: SettingsPageProps) {
+export function SettingsPage({ onClose, theme, onToggleTheme }: SettingsPageProps) {
   const [activeSection, setActiveSection] =
-    useState<SettingsSection>("model");
+    useState<SettingsSection>("appearance");
 
   return (
     <div className="settings-overlay">
@@ -35,6 +38,14 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
         <nav className="settings-nav">
           <button
             className={`settings-nav-item${
+              activeSection === "appearance" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("appearance")}
+          >
+            Appearance
+          </button>
+          <button
+            className={`settings-nav-item${
               activeSection === "model" ? " active" : ""
             }`}
             onClick={() => setActiveSection("model")}
@@ -69,6 +80,22 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
 
         {/* Content */}
         <div className="settings-content">
+          {activeSection === "appearance" && (
+            <div>
+              <div className="settings-section-title">Theme</div>
+              <div className="settings-section-desc">
+                Choose between light and dark mode.
+              </div>
+              <div className="settings-toggle-row">
+                <span className="settings-toggle-label">
+                  {theme === "dark" ? "Dark" : "Light"}
+                </span>
+                <button className="btn-secondary" onClick={onToggleTheme}>
+                  Switch to {theme === "dark" ? "Light" : "Dark"} mode
+                </button>
+              </div>
+            </div>
+          )}
           {activeSection === "model" && <ModelSettings />}
           {activeSection === "mcp" && <McpSettings />}
           {activeSection === "system-prompts" && <SystemPromptsSettings />}