4 files changed, 206 insertions, 5 deletions

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index 3a530d3..1d954ec 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import type { Project, Session, Phase } from "../types";
 
+const api = window.api;
+
 type Theme = "dark" | "light";
 
 interface HeaderProps {
@@ -86,6 +88,16 @@ export function Header({
     setIsRenamingSession(false);
   };
 
+  // ── Maximize ─────────────────────────────────────────────────
+  const [isMaximized, setIsMaximized] = useState(false);
+
+  useEffect(() => {
+    // Returns the unsubscribe function; React cleanup calls it on unmount.
+    // On macOS, clicking the native green traffic light also fires this,
+    // keeping the glyph accurate when native controls are used.
+    return api.onWindowMaximized(setIsMaximized);
+  }, []);
+
   // ── Branch copy ──────────────────────────────────────────────
   const [copied, setCopied] = useState(false);
 
@@ -225,6 +237,15 @@ export function Header({
           {theme === "dark" ? "[light]" : "[dark]"}
         </button>
 
+        {/* ── Maximize toggle ── */}
+        <button
+          className="maximize-btn"
+          onClick={() => api.toggleMaximize()}
+          title={isMaximized ? "Restore window" : "Maximize window"}
+        >
+          {isMaximized ? '⊡' : '□'}
+        </button>
+
         {/* ── Settings button ── */}
         <button className="settings-btn" onClick={onOpenSettings} title="Settings">
           &#9881;
diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
index 5267665..9ebde44 100644
--- a/renderer/src/components/SettingsPage.tsx
+++ b/renderer/src/components/SettingsPage.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { SystemPromptsSettings } from "./settings/SystemPromptsSettings";
+import { GitSettings } from "./settings/GitSettings";
 
-type SettingsSection = "system-prompts";
+type SettingsSection = "system-prompts" | "git";
 
 interface SettingsPageProps {
   onClose: () => void;
@@ -16,14 +17,14 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
       {/* Header — matches the main app header height/style */}
       <div className="settings-header">
         <div className="settings-header-left">
-          <span className="settings-title">\u2699 Settings</span>
+          <span className="settings-title">{'⚙'} Settings</span>
         </div>
         <button
           className="settings-close"
           onClick={onClose}
           title="Close settings"
         >
-          \u00d7
+          {'×'}
         </button>
       </div>
 
@@ -38,12 +39,20 @@ export function SettingsPage({ onClose }: SettingsPageProps) {
           >
             System Prompts
           </button>
-          {/* Future sections added here */}
+          <button
+            className={`settings-nav-item${
+              activeSection === "git" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("git")}
+          >
+            Git
+          </button>
         </nav>
 
         {/* Content */}
         <div className="settings-content">
           {activeSection === "system-prompts" && <SystemPromptsSettings />}
+          {activeSection === "git" && <GitSettings />}
         </div>
       </div>
     </div>
diff --git a/renderer/src/components/settings/GitSettings.tsx b/renderer/src/components/settings/GitSettings.tsx
new file mode 100644
index 0000000..0ec9875
--- /dev/null
+++ b/renderer/src/components/settings/GitSettings.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+
+const api = window.api;
+
+export function GitSettings() {
+  // null = setting not yet loaded; true/false = loaded value
+  const [branchingEnabled, setBranchingEnabled] = useState<boolean | null>(null);
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saved">("idle");
+
+  useEffect(() => {
+    api.getSettings(["git.branchingEnabled"]).then((settings) => {
+      // Key absent or any value other than "true" → false (opt-in default)
+      setBranchingEnabled(settings["git.branchingEnabled"] === "true");
+    });
+  }, []);
+
+  const handleToggle = async (enabled: boolean) => {
+    setBranchingEnabled(enabled);
+    if (enabled) {
+      await api.setSetting("git.branchingEnabled", "true");
+    } else {
+      await api.deleteSetting("git.branchingEnabled");
+    }
+    setSaveStatus("saved");
+    setTimeout(() => setSaveStatus("idle"), 1500);
+  };
+
+  if (branchingEnabled === null) {
+    return (
+      <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="settings-section-title">Git</div>
+      <div className="settings-section-desc">
+        Configure how Claude Flow interacts with your project's git repository
+        during the implement phase.
+      </div>
+
+      <div className="settings-toggle-row">
+        <label className="settings-toggle-label" htmlFor="git-branching-toggle">
+          <span className="settings-toggle-text">
+            <strong>Create a branch per session</strong>
+            <span className="settings-toggle-hint">
+              When enabled, Claude Flow checks out a new{" "}
+              <code>claude-flow/&lt;name&gt;-&lt;id&gt;</code> branch when
+              entering the implement phase. When disabled, commits land on
+              your current branch.
+            </span>
+          </span>
+          <span
+            className={`settings-toggle${branchingEnabled ? " on" : ""}`}
+            role="switch"
+            aria-checked={branchingEnabled}
+            id="git-branching-toggle"
+            tabIndex={0}
+            onClick={() => handleToggle(!branchingEnabled)}
+            onKeyDown={(e) => {
+              if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                handleToggle(!branchingEnabled);
+              }
+            }}
+          />
+        </label>
+        {saveStatus === "saved" && (
+          <span className="settings-custom-badge" style={{ color: "var(--accent)" }}>
+            saved ✓
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 61a37c0..8e43f3a 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -905,3 +905,96 @@ html[data-theme="light"] .settings-textarea:focus {
   background: var(--bg-tertiary);
   color: var(--text-primary);
 }
+
+/* ── Settings Toggle Row ─────────────────────────────────────── */
+.settings-toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.settings-toggle-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  cursor: pointer;
+  flex: 1;
+}
+
+.settings-toggle-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.settings-toggle-hint {
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.settings-toggle-hint code {
+  font-family: monospace;
+  background: var(--bg-tertiary);
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+
+/* The pill toggle switch */
+.settings-toggle {
+  flex-shrink: 0;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--border);
+  position: relative;
+  cursor: pointer;
+  transition: background 0.2s;
+  outline-offset: 2px;
+}
+
+.settings-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+}
+
+.settings-toggle::after {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: transform 0.2s, background 0.2s;
+}
+
+.settings-toggle.on {
+  background: var(--accent);
+}
+
+.settings-toggle.on::after {
+  transform: translateX(16px);
+  background: #fff;
+}
+
+/* ── Header Maximize Button ──────────────────────────────────── */
+.maximize-btn {
+  padding: 5px 8px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-family: inherit;
+  transition: background 0.15s, color 0.15s;
+}
+
+.maximize-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}