feat: Complete 7 tasks

- ✅ Add `.branch-badge` CSS block to `globals.css` after `.phase-step.complete` rule
- ✅ Extend `HeaderProps` interface with `gitBranch: string | null`
- ✅ Add `gitBranch` to `Header` function destructure
- ✅ Add `copied` state and `handleCopyBranch` function inside `Header`
- ✅ Update session `<option>` text to append branch name / "git unavailable"
- ✅ Add branch badge button to `header-right` between phase indicator and theme toggle
- ✅ Pass `gitBranch={selectedSession?.git_branch ?? null}` to `<Header>` in `App.tsx`

1 files changed, 37 insertions, 0 deletions

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index a435519..e56264f 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -17,6 +17,7 @@ interface HeaderProps {
   onRenameSession?: (id: string, name: string) => void;
   theme: Theme;
   onToggleTheme: () => void;
+  gitBranch: string | null;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -41,6 +42,7 @@ export function Header({
   onRenameSession,
   theme,
   onToggleTheme,
+  gitBranch,
 }: HeaderProps) {
   const handleDeleteProject = () => {
     if (!selectedProject || !onDeleteProject) return;
@@ -82,6 +84,16 @@ export function Header({
     setIsRenamingSession(false);
   };
 
+  // ── Branch copy ──────────────────────────────────────────────
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyBranch = () => {
+    if (!gitBranch) return;
+    navigator.clipboard.writeText(gitBranch);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
   return (
     <header className="header">
       <div className="header-left">
@@ -140,6 +152,7 @@ export function Header({
                 {sessions.map((s) => (
                   <option key={s.id} value={s.id}>
                     {s.name}
+                    {s.git_branch ? ` · ${s.git_branch}` : " · git unavailable"}
                   </option>
                 ))}
               </select>
@@ -190,6 +203,30 @@ export function Header({
           </div>
         )}
 
+        {/* ── Branch badge ── */}
+        {selectedSession && (
+          <button
+            className={[
+              "branch-badge",
+              gitBranch ? "" : "branch-unavailable",
+              copied ? "branch-copied" : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            onClick={handleCopyBranch}
+            disabled={!gitBranch}
+            title={
+              gitBranch
+                ? copied
+                  ? "Copied!"
+                  : `Click to copy: ${gitBranch}`
+                : "Git unavailable for this session"
+            }
+          >
+            ⎇ {gitBranch ?? "git unavailable"}
+          </button>
+        )}
+
         {/* ── Theme toggle ── */}
         <button className="theme-toggle" onClick={onToggleTheme}>
           {theme === "dark" ? "[light]" : "[dark]"}