feat: Thread optional `phase` param into `db/sessions.ts::cre… (+7 more)

- ✅ Thread optional `phase` param into `db/sessions.ts::createSession()`
- ✅ Thread optional `phase` param into `ipc/handlers.ts` sessions:create handler
- ✅ Thread optional `phase` param into `preload.ts` createSession API
- ✅ Update Plan phase system prompt to gracefully handle missing research.md
- ✅ Update Implement phase system prompt to gracefully handle missing plan.md
- ✅ Create `renderer/src/components/NewSessionModal.tsx`
- ✅ Update `App.tsx`: add modal state, split handler, add modal JSX
- ✅ Add modal CSS to `globals.css`

3 files changed, 214 insertions, 17 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index f5368b3..2ec66f6 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -117,6 +117,11 @@ export function DocumentPane({
 }: DocumentPaneProps) {
   const [isEditing, setIsEditing] = useState(false);
 
+  // Always exit edit mode when the pane becomes read-only.
+  useEffect(() => {
+    if (disabled) setIsEditing(false);
+  }, [disabled]);
+
   if (showOnboarding) {
     return (
       <div className="document-pane">
@@ -206,9 +211,13 @@ export function DocumentPane({
     <div className="document-pane">
       <div className="document-header">
         <span>{filename}</span>
-        <button onClick={() => setIsEditing(!isEditing)}>
-          {isEditing ? "Preview" : "Edit"}
-        </button>
+        {disabled ? (
+          <span className="badge badge-readonly">Read-only</span>
+        ) : (
+          <button onClick={() => setIsEditing(!isEditing)}>
+            {isEditing ? "Preview" : "Edit"}
+          </button>
+        )}
       </div>
 
       {isEditing ? (
diff --git a/renderer/src/components/NewSessionModal.tsx b/renderer/src/components/NewSessionModal.tsx
new file mode 100644
index 0000000..ad5dae9
--- /dev/null
+++ b/renderer/src/components/NewSessionModal.tsx
@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import type { Phase } from "../types";
+
+interface NewSessionModalProps {
+  onConfirm: (phase: Phase) => void;
+  onCancel: () => void;
+}
+
+const phaseOptions: { phase: Phase; label: string; description: string }[] = [
+  { phase: "research",  label: "Research",  description: "Understand the codebase and requirements" },
+  { phase: "plan",      label: "Plan",      description: "Create a detailed implementation strategy" },
+  { phase: "implement", label: "Implement", description: "Execute the implementation plan" },
+];
+
+export function NewSessionModal({ onConfirm, onCancel }: NewSessionModalProps) {
+  const [selected, setSelected] = useState<Phase>("research");
+
+  // Close on Escape
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+
+  return (
+    <div className="modal-backdrop" onClick={onCancel}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+
+        <div className="modal-header">
+          <span className="modal-title">New Session</span>
+          <button className="modal-close" onClick={onCancel}>×</button>
+        </div>
+
+        <div className="modal-body">
+          <p className="modal-prompt">Choose where to start</p>
+          <div className="phase-cards">
+            {phaseOptions.map(({ phase, label, description }) => (
+              <button
+                key={phase}
+                className={`phase-card${selected === phase ? " selected" : ""}`}
+                onClick={() => setSelected(phase)}
+              >
+                <span className="phase-card-label">{label}</span>
+                <span className="phase-card-desc">{description}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="modal-footer">
+          <button className="modal-btn-secondary" onClick={onCancel}>Cancel</button>
+          <button className="modal-btn-primary" onClick={() => onConfirm(selected)}>
+            Create
+          </button>
+        </div>
+
+      </div>
+    </div>
+  );
+}
diff --git a/renderer/src/components/settings/ModelSettings.tsx b/renderer/src/components/settings/ModelSettings.tsx
index ecfc12c..f0cbda5 100644
--- a/renderer/src/components/settings/ModelSettings.tsx
+++ b/renderer/src/components/settings/ModelSettings.tsx
@@ -1,21 +1,61 @@
 import React, { useState, useEffect } from "react";
+import type { Phase } from "../../types";
 
 const api = window.api;
 
+const PHASES: Phase[] = ["research", "plan", "implement"];
+const PHASE_LABELS: Record<Phase, string> = {
+  research: "Research",
+  plan: "Plan",
+  implement: "Implement",
+};
+
 export function ModelSettings() {
-  // null = not yet loaded from DB
+  // ── Global default ───────────────────────────────────────────
   const [model, setModel] = useState<string | null>(null);
   const [draft, setDraft] = useState("");
   const [saveStatus, setSaveStatus] = useState<"idle" | "saved">("idle");
 
+  // ── Per-phase overrides ──────────────────────────────────────
+  const [phaseModels, setPhaseModels] = useState<Record<Phase, string | null>>({
+    research: null,
+    plan: null,
+    implement: null,
+  });
+  const [phaseDrafts, setPhaseDrafts] = useState<Record<Phase, string>>({
+    research: "",
+    plan: "",
+    implement: "",
+  });
+  const [phaseStatus, setPhaseStatus] = useState<Record<Phase, "idle" | "saved">>({
+    research: "idle",
+    plan: "idle",
+    implement: "idle",
+  });
+
   useEffect(() => {
-    api.getSettings(["model"]).then((settings) => {
-      const saved = settings["model"] ?? "";
-      setModel(saved);
-      setDraft(saved);
-    });
+    api
+      .getSettings(["model", "model.research", "model.plan", "model.implement"])
+      .then((settings) => {
+        const saved = settings["model"] ?? "";
+        setModel(saved);
+        setDraft(saved);
+
+        const pm: Record<Phase, string | null> = {
+          research: settings["model.research"],
+          plan: settings["model.plan"],
+          implement: settings["model.implement"],
+        };
+        setPhaseModels(pm);
+        setPhaseDrafts({
+          research: pm.research ?? "",
+          plan: pm.plan ?? "",
+          implement: pm.implement ?? "",
+        });
+      });
   }, []);
 
+  // ── Global handlers ──────────────────────────────────────────
   const handleSave = async () => {
     const trimmed = draft.trim();
     if (trimmed) {
@@ -37,6 +77,34 @@ export function ModelSettings() {
     setTimeout(() => setSaveStatus("idle"), 1500);
   };
 
+  // ── Per-phase handlers ───────────────────────────────────────
+  const handlePhaseSave = async (phase: Phase) => {
+    const trimmed = phaseDrafts[phase].trim();
+    if (trimmed) {
+      await api.setSetting(`model.${phase}`, trimmed);
+      setPhaseModels((prev) => ({ ...prev, [phase]: trimmed }));
+    } else {
+      await api.deleteSetting(`model.${phase}`);
+      setPhaseModels((prev) => ({ ...prev, [phase]: null }));
+    }
+    setPhaseStatus((prev) => ({ ...prev, [phase]: "saved" }));
+    setTimeout(
+      () => setPhaseStatus((prev) => ({ ...prev, [phase]: "idle" })),
+      1500
+    );
+  };
+
+  const handlePhaseReset = async (phase: Phase) => {
+    await api.deleteSetting(`model.${phase}`);
+    setPhaseModels((prev) => ({ ...prev, [phase]: null }));
+    setPhaseDrafts((prev) => ({ ...prev, [phase]: "" }));
+    setPhaseStatus((prev) => ({ ...prev, [phase]: "saved" }));
+    setTimeout(
+      () => setPhaseStatus((prev) => ({ ...prev, [phase]: "idle" })),
+      1500
+    );
+  };
+
   if (model === null) {
     return (
       <div style={{ color: "var(--text-secondary)", fontSize: 12 }}>
@@ -49,10 +117,11 @@ export function ModelSettings() {
 
   return (
     <div>
-      <div className="settings-section-title">Model</div>
+      {/* ── Global default ──────────────────────────────────── */}
+      <div className="settings-section-title">Default Model</div>
       <div className="settings-section-desc">
-        Claude model to use for all phases. Leave blank to use the SDK&apos;s
-        default model. Takes effect on the next message sent in any session.
+        Fallback model used for all phases unless a per-phase override is set.
+        Leave blank to use the SDK&apos;s built-in default.
       </div>
 
       <div className="settings-toggle-row">
@@ -60,7 +129,7 @@ export function ModelSettings() {
           className="settings-model-input"
           type="text"
           value={draft}
-          placeholder="Default (e.g. claude-sonnet-4-5)"
+          placeholder="e.g. claude-sonnet-4-5"
           onChange={(e) => {
             setDraft(e.target.value);
             setSaveStatus("idle");
@@ -75,7 +144,7 @@ export function ModelSettings() {
       <div className="settings-actions">
         {model && (
           <button className="btn-secondary" onClick={handleReset}>
-            Reset to Default
+            Reset
           </button>
         )}
         <button
@@ -85,9 +154,68 @@ export function ModelSettings() {
         >
           {saveStatus === "saved" ? "Saved \u2713" : "Save"}
         </button>
-        {model && (
-          <span className="settings-custom-badge">custom</span>
-        )}
+        {model && <span className="settings-custom-badge">custom</span>}
+      </div>
+
+      {/* ── Per-phase overrides ─────────────────────────────── */}
+      <div className="settings-section-title" style={{ marginTop: 24 }}>
+        Phase Overrides
+      </div>
+      <div className="settings-section-desc">
+        Use a different model for a specific phase. Leave blank to inherit the
+        default above. Takes effect on the next message in any session.
+      </div>
+
+      <div className="settings-phase-model-list">
+        {PHASES.map((phase) => {
+          const saved = phaseModels[phase];
+          const phaseDirty = phaseDrafts[phase].trim() !== (saved ?? "");
+
+          return (
+            <div key={phase} className="settings-phase-model-row">
+              <span className="settings-phase-model-label">
+                {PHASE_LABELS[phase]}
+              </span>
+              <input
+                className="settings-model-input"
+                type="text"
+                value={phaseDrafts[phase]}
+                placeholder={model ? `Inherits: ${model}` : "Inherits default"}
+                onChange={(e) => {
+                  setPhaseDrafts((prev) => ({
+                    ...prev,
+                    [phase]: e.target.value,
+                  }));
+                  setPhaseStatus((prev) => ({ ...prev, [phase]: "idle" }));
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handlePhaseSave(phase);
+                }}
+                spellCheck={false}
+              />
+              <div className="settings-phase-model-actions">
+                {saved && (
+                  <button
+                    className="btn-secondary"
+                    onClick={() => handlePhaseReset(phase)}
+                  >
+                    Reset
+                  </button>
+                )}
+                <button
+                  className="btn-primary"
+                  onClick={() => handlePhaseSave(phase)}
+                  disabled={!phaseDirty}
+                >
+                  {phaseStatus[phase] === "saved" ? "Saved \u2713" : "Save"}
+                </button>
+                {saved && (
+                  <span className="settings-custom-badge">custom</span>
+                )}
+              </div>
+            </div>
+          );
+        })}
       </div>
     </div>
   );