1 files changed, 60 insertions, 0 deletions

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