5 files changed, 420 insertions, 0 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 74b1f91..7d75196 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -3,6 +3,7 @@ import { Header } from "./components/Header";
 import { DocumentPane } from "./components/DocumentPane";
 import { ChatPane } from "./components/ChatPane";
 import { ActionBar } from "./components/ActionBar";
+import { SettingsPage } from "./components/SettingsPage";
 import type { Project, Session, Message, Phase, TokenUsage } from "./types";
 import "./styles/globals.css";
 
@@ -56,6 +57,7 @@ export function App() {
     outputTokens: 0,
   });
   const [error, setError] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
 
   const [theme, setTheme] = useState<Theme>(
     () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
@@ -365,6 +367,7 @@ export function App() {
         theme={theme}
         onToggleTheme={handleToggleTheme}
         gitBranch={selectedSession?.git_branch ?? null}
+        onOpenSettings={() => setShowSettings(true)}
       />
 
       <div className="main-content">
@@ -413,6 +416,10 @@ export function App() {
         }}
         disabled={!selectedSession}
       />
+
+      {showSettings && (
+        <SettingsPage onClose={() => setShowSettings(false)} />
+      )}
     </div>
   );
 }
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>
+  );
+}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index ef0275e..61a37c0 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -692,3 +692,216 @@ html[data-theme="light"] .chat-input input:focus {
   border-left: 3px solid var(--accent);
   border-radius: 0 2px 2px 0;
 }
+
+/* ── Settings Overlay ────────────────────────────────────────── */
+.settings-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--bg-primary);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  -webkit-app-region: drag;
+}
+
+.settings-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  -webkit-app-region: no-drag;
+}
+
+.settings-title {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+}
+
+.settings-close {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 9px;
+  font-family: inherit;
+  -webkit-app-region: no-drag;
+  transition: background 0.15s;
+}
+
+.settings-close:hover {
+  background: var(--bg-tertiary);
+}
+
+.settings-body {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Settings Side Nav ───────────────────────────────────────── */
+.settings-nav {
+  width: 180px;
+  background: var(--bg-secondary);
+  border-right: 1px solid var(--border);
+  padding: 16px 0;
+  flex-shrink: 0;
+}
+
+.settings-nav-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  transition: background 0.1s, color 0.1s;
+}
+
+.settings-nav-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.settings-nav-item.active {
+  color: var(--text-primary);
+  border-left-color: var(--accent);
+  background: var(--bg-tertiary);
+}
+
+/* ── Settings Content Area ───────────────────────────────────── */
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 40px;
+  max-width: 860px;
+}
+
+.settings-section-title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.settings-section-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+/* ── Phase Tab Strip ─────────────────────────────────────────── */
+.settings-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 16px;
+}
+
+.settings-tab {
+  padding: 6px 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  transition: color 0.1s;
+}
+
+.settings-tab:hover {
+  color: var(--text-primary);
+}
+
+.settings-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* ── Prompt Textarea ─────────────────────────────────────────── */
+.settings-textarea {
+  width: 100%;
+  min-height: 420px;
+  padding: 14px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.7;
+  resize: vertical;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.settings-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
+}
+
+html[data-theme="light"] .settings-textarea:focus {
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+}
+
+.settings-textarea.is-custom {
+  border-color: var(--warning);
+}
+
+/* ── Settings Actions Row ────────────────────────────────────── */
+.settings-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.settings-custom-badge {
+  margin-left: auto;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--warning);
+}
+
+/* ── Header Settings Button ──────────────────────────────────── */
+.settings-btn {
+  padding: 5px 8px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+  transition: background 0.15s, color 0.15s;
+}
+
+.settings-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}