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`

3 files changed, 71 insertions, 0 deletions

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 19f6284..ecbb5b2 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -360,6 +360,7 @@ export function App() {
         onRenameSession={handleRenameSession}
         theme={theme}
         onToggleTheme={handleToggleTheme}
+        gitBranch={selectedSession?.git_branch ?? null}
       />
 
       <div className="main-content">
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]"}
diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index f141538..9d37742 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -179,6 +179,39 @@ html[data-theme="light"] .session-rename-input {
   color: white;
 }
 
+/* ── Branch Badge ────────────────────────────────────────────── */
+.branch-badge {
+  padding: 3px 10px;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.branch-badge:hover:not(:disabled) {
+  background: var(--border);
+  color: var(--text-primary);
+  border-color: var(--accent);
+}
+
+.branch-badge.branch-copied {
+  background: var(--success);
+  border-color: var(--success);
+  color: white;
+}
+
+.branch-badge.branch-unavailable {
+  border-style: dashed;
+  opacity: 0.5;
+  cursor: default;
+}
+
 /* ── Main Content ─────────────────────────────────────────────── */
 .main-content {
   flex: 1;