11 files changed, 511 insertions, 3 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);
+}
diff --git a/src/main/claude/index.ts b/src/main/claude/index.ts
index 8971844..30a0f57 100644
--- a/src/main/claude/index.ts
+++ b/src/main/claude/index.ts
@@ -4,6 +4,7 @@ import { getPhaseConfig, getNextPhase, getArtifactFilename } from "./phases";
 import type { Phase, UserPermissionMode } from "./phases";
 import { getProject } from "../db/projects";
 import { updateSession } from "../db/sessions";
+import { getSetting } from "../db/settings";
 import { autoCommitTurn } from "../git";
 import fs from "node:fs";
 import path from "node:path";
@@ -44,10 +45,14 @@ export async function sendMessage({
   const sessionDir = getSessionDir(project.path, session.id);
   ensureDir(sessionDir);
 
+  // Load any custom system prompt for this phase (null → use default)
+  const customSystemPrompt = getSetting(`systemPrompt.${session.phase}`) ?? undefined;
+
   const phaseConfig = getPhaseConfig(
     session.phase as Phase,
     sessionDir,
-    session.permission_mode as UserPermissionMode
+    session.permission_mode as UserPermissionMode,
+    customSystemPrompt
   );
 
   const q = query({
diff --git a/src/main/claude/phases.ts b/src/main/claude/phases.ts
index 89e7c22..a1cbba1 100644
--- a/src/main/claude/phases.ts
+++ b/src/main/claude/phases.ts
@@ -160,11 +160,20 @@ When complete, summarize what was done and any follow-up tasks.`,
 export function getPhaseConfig(
   phase: Phase,
   artifactDir: string,
-  userPermissionMode?: UserPermissionMode
+  userPermissionMode?: UserPermissionMode,
+  customSystemPrompt?: string
 ): PhaseConfig {
   const template = phaseConfigTemplates[phase];
+
+  // If a custom prompt is provided, substitute the {{artifactDir}} placeholder.
+  // Otherwise use the default template function (existing behaviour).
+  const systemPrompt =
+    customSystemPrompt !== undefined
+      ? customSystemPrompt.replace(/\{\{artifactDir\}\}/g, artifactDir)
+      : template.systemPrompt(artifactDir);
+
   const config: PhaseConfig = {
-    systemPrompt: template.systemPrompt(artifactDir),
+    systemPrompt,
     tools: template.tools,
     permissionMode: template.permissionMode,
     initialMessage: template.initialMessage,
@@ -175,6 +184,15 @@ export function getPhaseConfig(
   return config;
 }
 
+/**
+ * Returns the default system prompt for a phase with "{{artifactDir}}" as a
+ * literal placeholder — the same format used when storing a custom prompt in
+ * the settings DB. Used by the Settings UI to display the default text.
+ */
+export function getDefaultSystemPromptTemplate(phase: Phase): string {
+  return phaseConfigTemplates[phase].systemPrompt("{{artifactDir}}");
+}
+
 export function getPhaseInitialMessage(phase: Phase): string {
   return phaseConfigTemplates[phase].initialMessage;
 }
diff --git a/src/main/db/schema.ts b/src/main/db/schema.ts
index 39ee567..4c24c6a 100644
--- a/src/main/db/schema.ts
+++ b/src/main/db/schema.ts
@@ -30,6 +30,11 @@ export function initSchema(db: Database.Database) {
       created_at INTEGER NOT NULL DEFAULT (unixepoch())
     );
 
+    CREATE TABLE IF NOT EXISTS settings (
+      key   TEXT PRIMARY KEY,
+      value TEXT NOT NULL
+    );
+
     CREATE INDEX IF NOT EXISTS idx_sessions_project ON sessions(project_id);
     CREATE INDEX IF NOT EXISTS idx_messages_session ON messages(session_id);
   `);
diff --git a/src/main/db/settings.ts b/src/main/db/settings.ts
new file mode 100644
index 0000000..1f86a9a
--- /dev/null
+++ b/src/main/db/settings.ts
@@ -0,0 +1,28 @@
+import { getDb } from "./index";
+
+export function getSetting(key: string): string | null {
+  const row = getDb()
+    .prepare("SELECT value FROM settings WHERE key = ?")
+    .get(key) as { value: string } | undefined;
+  return row ? row.value : null;
+}
+
+export function getSettings(keys: string[]): Record<string, string | null> {
+  const result: Record<string, string | null> = {};
+  for (const key of keys) {
+    result[key] = getSetting(key);
+  }
+  return result;
+}
+
+export function setSetting(key: string, value: string): void {
+  getDb()
+    .prepare("INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)")
+    .run(key, value);
+}
+
+export function deleteSetting(key: string): void {
+  getDb()
+    .prepare("DELETE FROM settings WHERE key = ?")
+    .run(key);
+}
diff --git a/src/main/ipc/handlers.ts b/src/main/ipc/handlers.ts
index 774eb63..bc7d78d 100644
--- a/src/main/ipc/handlers.ts
+++ b/src/main/ipc/handlers.ts
@@ -2,8 +2,10 @@ import { ipcMain, dialog, type BrowserWindow } from "electron";
 import * as projects from "../db/projects";
 import * as sessions from "../db/sessions";
 import * as claude from "../claude";
+import * as settingsDb from "../db/settings";
 import { createSessionBranch, ensureGitIgnore } from "../git";
 import type { UserPermissionMode } from "../claude/phases";
+import { getDefaultSystemPromptTemplate } from "../claude/phases";
 
 export function registerIpcHandlers(mainWindow: BrowserWindow): void {
   // Projects
@@ -155,6 +157,24 @@ export function registerIpcHandlers(mainWindow: BrowserWindow): void {
     claude.writeClaudeMd(projectPath, content);
   });
 
+  // Settings
+  ipcMain.handle("settings:get", (_, keys: string[]) =>
+    settingsDb.getSettings(keys)
+  );
+  ipcMain.handle("settings:set", (_, key: string, value: string) =>
+    settingsDb.setSetting(key, value)
+  );
+  ipcMain.handle("settings:delete", (_, key: string) =>
+    settingsDb.deleteSetting(key)
+  );
+
+  // Returns default prompt text (with {{artifactDir}} placeholder) for all phases
+  ipcMain.handle("settings:getDefaultPrompts", () => ({
+    research:  getDefaultSystemPromptTemplate("research"),
+    plan:      getDefaultSystemPromptTemplate("plan"),
+    implement: getDefaultSystemPromptTemplate("implement"),
+  }));
+
   // Dialogs
   ipcMain.handle("dialog:selectDirectory", async () => {
     const result = await dialog.showOpenDialog(mainWindow, {
diff --git a/src/main/preload.ts b/src/main/preload.ts
index 299a1b5..52e947b 100644
--- a/src/main/preload.ts
+++ b/src/main/preload.ts
@@ -54,6 +54,12 @@ export interface ClaudeFlowAPI {
     callback: (sessionId: string, message: SDKMessage) => void
   ) => () => void;
 
+  // Settings
+  getSettings: (keys: string[]) => Promise<Record<string, string | null>>;
+  setSetting: (key: string, value: string) => Promise<void>;
+  deleteSetting: (key: string) => Promise<void>;
+  getDefaultSystemPrompts: () => Promise<Record<"research" | "plan" | "implement", string>>;
+
   // Dialogs
   selectDirectory: () => Promise<string | null>;
 }
@@ -110,6 +116,12 @@ const api: ClaudeFlowAPI = {
     return () => ipcRenderer.removeListener("claude:message", handler);
   },
 
+  // Settings
+  getSettings: (keys) => ipcRenderer.invoke("settings:get", keys),
+  setSetting: (key, value) => ipcRenderer.invoke("settings:set", key, value),
+  deleteSetting: (key) => ipcRenderer.invoke("settings:delete", key),
+  getDefaultSystemPrompts: () => ipcRenderer.invoke("settings:getDefaultPrompts"),
+
   // Dialogs
   selectDirectory: async () => {
     const result = await ipcRenderer.invoke("dialog:selectDirectory");