feat: **1. `src/main/db/schema.ts`** — add `settings` table … (+10 more)

- ✅ **1. `src/main/db/schema.ts`** — add `settings` table to `initSchema`
- ✅ **2. `src/main/db/settings.ts`** — create file with `getSetting`, `getSettings`, `setSetting`, `deleteSetting`
- ✅ **3. `src/main/claude/phases.ts`** — add `customSystemPrompt?` param to `getPhaseConfig`; add `getDefaultSystemPromptTemplate` export
- ✅ **4. `src/main/claude/index.ts`** — import `getSetting`; load custom prompt in `sendMessage`; pass to `getPhaseConfig`
- ✅ **5. `src/main/ipc/handlers.ts`** — import `settingsDb` + `getDefaultSystemPromptTemplate`; register `settings:get`, `settings:set`, `settings:delete`, `settings:getDefaultPrompts`
- ✅ **6. `src/main/preload.ts`** — add `getSettings`, `setSetting`, `deleteSetting`, `getDefaultSystemPrompts` to interface + api object
- ✅ **7. `renderer/src/styles/globals.css`** — append all new CSS rules
- ✅ **8. `renderer/src/components/settings/SystemPromptsSettings.tsx`** — create file (new directory)
- ✅ **9. `renderer/src/components/SettingsPage.tsx`** — create file
- ✅ **10. `renderer/src/components/Header.tsx`** — add `onOpenSettings` prop + ⚙ button
- ✅ **11. `renderer/src/App.tsx`** — add `showSettings` state; import + render `<SettingsPage>`; pass `onOpenSettings` to Header

1 files changed, 51 insertions, 0 deletions

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>
+  );
+}