From dc4156fec54a8efdab84834fe2f5bc90120e32c1 Mon Sep 17 00:00:00 2001
From: bndw <ben@bdw.to>
Date: Sat, 28 Feb 2026 20:22:12 -0800
Subject: feat: Complete 7 tasks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ✅ 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`
---
 renderer/src/components/Header.tsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

(limited to 'renderer/src/components/Header.tsx')

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]"}
-- 
cgit v1.2.3

