3 files changed, 200 insertions, 0 deletions

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index fc0289d..3a530d3 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -18,6 +18,7 @@ interface HeaderProps {
   theme: Theme;
   onToggleTheme: () => void;
   gitBranch: string | null;
+  onOpenSettings: () => void;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -43,6 +44,7 @@ export function Header({
   theme,
   onToggleTheme,
   gitBranch,
+  onOpenSettings,
 }: HeaderProps) {
   const handleDeleteProject = () => {
     if (!selectedProject || !onDeleteProject) return;
@@ -222,6 +224,11 @@ export function Header({
         <button className="theme-toggle" onClick={onToggleTheme}>
           {theme === "dark" ? "[light]" : "[dark]"}
         </button>
+
+        {/* ── Settings button ── */}
+        <button className="settings-btn" onClick={onOpenSettings} title="Settings">
+          &#9881;
+        </button>
       </div>
     </header>
   );
diff --git a/renderer/src/components/SettingsPage.tsx b/renderer/src/components/SettingsPage.tsx
new file mode 100644
index 0000000..5267665
--- /dev/null
+++ b/renderer/src/components/SettingsPage.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { SystemPromptsSettings } from "./settings/SystemPromptsSettings";
+
+type SettingsSection = "system-prompts";
+
+interface SettingsPageProps {
+  onClose: () => void;
+}
+
+export function SettingsPage({ onClose }: SettingsPageProps) {
+  const [activeSection, setActiveSection] =
+    useState<SettingsSection>("system-prompts");
+
+  return (
+    <div className="settings-overlay">
+      {/* Header — matches the main app header height/style */}
+      <div className="settings-header">
+        <div className="settings-header-left">
+          <span className="settings-title">\u2699 Settings</span>
+        </div>
+        <button
+          className="settings-close"
+          onClick={onClose}
+          title="Close settings"
+        >
+          \u00d7
+        </button>
+      </div>
+
+      <div className="settings-body">
+        {/* Side nav */}
+        <nav className="settings-nav">
+          <button
+            className={`settings-nav-item${
+              activeSection === "system-prompts" ? " active" : ""
+            }`}
+            onClick={() => setActiveSection("system-prompts")}
+          >
+            System Prompts
+          </button>
+          {/* Future sections added here */}
+        </nav>
+
+        {/* Content */}
+        <div className="settings-content">
+          {activeSection === "system-prompts" && <SystemPromptsSettings />}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/settings/SystemPromptsSettings.tsx b/renderer/src/components/settings/SystemPromptsSettings.tsx
new file mode 100644
index 0000000..a0c6a22
--- /dev/null
+++ b/renderer/src/components/settings/SystemPromptsSettings.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from "react";
+import type { Phase } from "../../types";
+
+const PHASES: Phase[] = ["research", "plan", "implement"];
+const PHASE_LABELS: Record<Phase, string> = {
+  research: "Research",
+  plan: "Plan",
+  implement: "Implement",
+};
+
+const api = window.api;
+
+export function SystemPromptsSettings() {
+  const [activePhase, setActivePhase] = useState<Phase>("research");
+  // Hardcoded default text per phase (fetched once from main process)
+  const [defaults, setDefaults] = useState<Record<Phase, string> | null>(null);
+  // What is currently saved in the DB per phase (null = not customized)
+  const [saved, setSaved] = useState<Record<Phase, string | null>>({
+    research: null,
+    plan: null,
+    implement: null,
+  });
+  // Live textarea content per phase — initialised to saved ?? default on load
+  const [texts, setTexts] = useState<Record<Phase, string>>({
+    research: "",
+    plan: "",
+    implement: "",
+  });
+  const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "saved">("idle");
+
+  useEffect(() => {
+    Promise.all([
+      api.getDefaultSystemPrompts(),
+      api.getSettings([
+        "systemPrompt.research",
+        "systemPrompt.plan",
+        "systemPrompt.implement",
+      ]),
+    ]).then(([defs, settings]) => {
+      const d = defs as Record<Phase, string>;
+      const s: Record<Phase, string | null> = {
+        research: settings["systemPrompt.research"],
+        plan: settings["systemPrompt.plan"],
+        implement: settings["systemPrompt.implement"],
+      };
+      setDefaults(d);
+      setSaved(s);
+      setTexts({
+        research:  s.research  ?? d.research,
+        plan:      s.plan      ?? d.plan,
+        implement: s.implement ?? d.implement,
+      });
+    });
+  }, []);
+
+  if (!defaults) {
+    return (
+      <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
+        Loading...
+      </div>
+    );
+  }
+
+  const currentText  = texts[activePhase];
+  const isCustomized = saved[activePhase] !== null;
+  // Dirty = textarea differs from what is in DB (or from default if not customized)
+  const isDirty      = currentText !== (saved[activePhase] ?? defaults[activePhase]);
+
+  const handleChange = (val: string) => {
+    setTexts(prev => ({ ...prev, [activePhase]: val }));
+    setSaveStatus("idle");
+  };
+
+  const handleSave = async () => {
+    setSaveStatus("saving");
+    await api.setSetting(`systemPrompt.${activePhase}`, currentText);
+    setSaved(prev => ({ ...prev, [activePhase]: currentText }));
+    setSaveStatus("saved");
+    setTimeout(() => setSaveStatus("idle"), 2000);
+  };
+
+  const handleReset = async () => {
+    await api.deleteSetting(`systemPrompt.${activePhase}`);
+    setSaved(prev => ({ ...prev, [activePhase]: null }));
+    setTexts(prev => ({ ...prev, [activePhase]: defaults[activePhase] }));
+    setSaveStatus("idle");
+  };
+
+  return (
+    <div>
+      <div className="settings-section-title">System Prompts</div>
+      <div className="settings-section-desc">
+        Customize the instructions sent to Claude at the start of each workflow
+        phase. Changes take effect on the next message sent in any session.
+      </div>
+
+      <div className="settings-tabs">
+        {PHASES.map(phase => (
+          <button
+            key={phase}
+            className={`settings-tab${activePhase === phase ? " active" : ""}`}
+            onClick={() => setActivePhase(phase)}
+          >
+            {PHASE_LABELS[phase]}
+            {saved[phase] !== null ? " \u25cf" : ""}
+          </button>
+        ))}
+      </div>
+
+      <textarea
+        className={`settings-textarea${isCustomized ? " is-custom" : ""}`}
+        value={currentText}
+        onChange={e => handleChange(e.target.value)}
+        spellCheck={false}
+      />
+
+      <div className="settings-actions">
+        {isCustomized && (
+          <button className="btn-secondary" onClick={handleReset}>
+            Reset to Default
+          </button>
+        )}
+        <button
+          className="btn-primary"
+          onClick={handleSave}
+          disabled={saveStatus === "saving" || !isDirty}
+        >
+          {saveStatus === "saving"
+            ? "Saving\u2026"
+            : saveStatus === "saved"
+            ? "Saved \u2713"
+            : "Save"}
+        </button>
+        {(isCustomized || isDirty) && (
+          <span className="settings-custom-badge">
+            {isDirty ? "unsaved" : "custom"}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}