1 files changed, 99 insertions, 0 deletions

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
new file mode 100644
index 0000000..3dcbba9
--- /dev/null
+++ b/renderer/src/components/Header.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import type { Project, Session, Phase } from "../types";
+
+interface HeaderProps {
+  projects: Project[];
+  sessions: Session[];
+  selectedProject: Project | null;
+  selectedSession: Session | null;
+  onSelectProject: (project: Project | null) => void;
+  onSelectSession: (session: Session | null) => void;
+  onCreateProject: () => void;
+  onCreateSession: () => void;
+}
+
+const phaseLabels: Record<Phase, string> = {
+  research: "Research",
+  plan: "Plan",
+  implement: "Implement",
+};
+
+const phases: Phase[] = ["research", "plan", "implement"];
+
+export function Header({
+  projects,
+  sessions,
+  selectedProject,
+  selectedSession,
+  onSelectProject,
+  onSelectSession,
+  onCreateProject,
+  onCreateSession,
+}: HeaderProps) {
+  return (
+    <header className="header">
+      <div className="header-left">
+        <select
+          value={selectedProject?.id || ""}
+          onChange={(e) => {
+            const project = projects.find((p) => p.id === e.target.value);
+            onSelectProject(project || null);
+            onSelectSession(null);
+          }}
+        >
+          <option value="">Select Project...</option>
+          {projects.map((p) => (
+            <option key={p.id} value={p.id}>
+              {p.name}
+            </option>
+          ))}
+        </select>
+        <button onClick={onCreateProject}>+ Project</button>
+
+        {selectedProject && (
+          <>
+            <select
+              value={selectedSession?.id || ""}
+              onChange={(e) => {
+                const session = sessions.find((s) => s.id === e.target.value);
+                onSelectSession(session || null);
+              }}
+            >
+              <option value="">Select Session...</option>
+              {sessions.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name}
+                </option>
+              ))}
+            </select>
+            <button onClick={onCreateSession}>+ Session</button>
+          </>
+        )}
+      </div>
+
+      <div className="header-right">
+        {selectedSession && (
+          <div className="phase-indicator">
+            {phases.map((phase) => {
+              const phaseIndex = phases.indexOf(phase);
+              const currentIndex = phases.indexOf(selectedSession.phase);
+              const isComplete = phaseIndex < currentIndex;
+              const isActive = phase === selectedSession.phase;
+
+              return (
+                <span
+                  key={phase}
+                  className={`phase-step ${isActive ? "active" : ""} ${
+                    isComplete ? "complete" : ""
+                  }`}
+                >
+                  {phaseLabels[phase]}
+                </span>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}