@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/GeminiLiveOverlay.tsx

@@ -1,7 +1,12 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import { Mic, MicOff, PhoneOff, Volume2 } from 'lucide-react'
+import { VoicePoweredOrb } from './ui/voice-powered-orb'
+import { Button } from './ui/button'
+import './GeminiLiveOverlay.css'
 
-interface GeminiLiveOverlayProps {
-  status: 'listening' | 'speaking' | 'thinking' | 'paused'
+export interface GeminiLiveOverlayProps {
+  status: 'connecting' | 'listening' | 'speaking' | 'thinking' | 'paused' | 'error'
   userTranscript: string
   assistantTranscript: string
   isPaused: boolean
@@ -10,119 +15,98 @@ interface GeminiLiveOverlayProps {
   voice: string
   voices: readonly string[]
   onChangeVoice: (voice: string) => void
+  analyserRef?: RefObject<AnalyserNode | null>
 }
-
 const STATUS_LABEL: Record<GeminiLiveOverlayProps['status'], string> = {
-  listening: 'Listening',
-  speaking: 'Speaking',
-  thinking: 'Thinking',
-  paused: 'Paused'
+  connecting: 'Connecting', listening: 'Listening', speaking: 'Speaking',
+  thinking: 'Thinking', paused: 'Microphone paused', error: 'Connection unavailable',
+}
+const STATUS_HINT: Record<GeminiLiveOverlayProps['status'], string> = {
+  connecting: 'Opening your microphone and Live session…',
+  listening: 'Speak naturally. Mint is listening.',
+  speaking: 'Mint is speaking. You can interrupt at any time.',
+  thinking: 'Waiting for Mint’s response…',
+  paused: 'Resume the microphone when you’re ready.',
+  error: 'End this call and try again when you’re ready.',
 }
 
 export default function GeminiLiveOverlay({
-  status,
-  userTranscript,
-  assistantTranscript,
-  isPaused,
-  onTogglePause,
-  onEndCall,
-  voice,
-  voices,
-  onChangeVoice
+  status, userTranscript, assistantTranscript, isPaused, onTogglePause, onEndCall,
+  voice, voices, onChangeVoice, analyserRef,
 }: GeminiLiveOverlayProps) {
   const [voicePickerOpen, setVoicePickerOpen] = useState(false)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const endCall = useRef(onEndCall)
+  endCall.current = onEndCall
+  // The decorative orb must not own a microphone in this call surface.
+  const emptyAnalyser = useRef<AnalyserNode | null>(null)
+  useEffect(() => {
+    const previousFocus = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    const dialog = dialogRef.current!
+    dialog.querySelector<HTMLButtonElement>('[data-call-control]:not(:disabled), [aria-label="End Live conversation"]')?.focus()
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') { event.preventDefault(); endCall.current(); return }
+      if (event.key !== 'Tab') return
+      const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button:not(:disabled), [tabindex="0"]'))
+      const first = controls[0], last = controls[controls.length - 1]
+      if (event.shiftKey && (document.activeElement === first || !dialog.contains(document.activeElement))) {
+        event.preventDefault(); last?.focus()
+      } else if (!event.shiftKey && (document.activeElement === last || !dialog.contains(document.activeElement))) {
+        event.preventDefault(); first?.focus()
+      }
+    }
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      document.body.style.overflow = previousOverflow
+      previousFocus?.focus({ preventScroll: true })
+    }
+  }, [])
 
-  return (
-    <div className="gemini-live-overlay" role="dialog" aria-modal="true" aria-label="Gemini Live conversation">
+  const dialog = (
+    <div ref={dialogRef} className="gemini-live-overlay live-orb-dialog" role="dialog" aria-modal="true" aria-label="Gemini Live conversation" data-status={status}>
       <div className="gemini-live-card">
-        <span className="gemini-live-badge">Gemini Live</span>
-        <div className={`gemini-live-orb ${status}`} aria-hidden="true" />
-        <div className="gemini-live-status">{STATUS_LABEL[status]}</div>
-        <div className="gemini-live-transcript">
-          {userTranscript || assistantTranscript ? (
-            <>
-              {userTranscript && (
-                <p className="gemini-live-transcript-line">
-                  <span className="gemini-live-transcript-speaker">You:</span> {userTranscript}
-                </p>
-              )}
-              {assistantTranscript && (
-                <p className="gemini-live-transcript-line">
-                  <span className="gemini-live-transcript-speaker">Mint:</span> {assistantTranscript}
-                </p>
-              )}
-            </>
-          ) : (
-            'Say something to get started...'
-          )}
+        <header className="live-orb-header">
+          <span className="gemini-live-badge">Gemini Live</span>
+          <h2>Live conversation</h2>
+        </header>
+        <div className="live-orb-stage">
+          <VoicePoweredOrb hue={0} animate={status !== 'paused' && status !== 'error'} enableVoiceControl={status === 'listening' || status === 'speaking' || status === 'thinking'} analyserRef={analyserRef ?? emptyAnalyser} />
+        </div>
+        <div className="live-orb-state">
+          <div className="gemini-live-status" role="status">{STATUS_LABEL[status]}</div>
+          <p>{STATUS_HINT[status]}</p>
+        </div>
+        <div className="gemini-live-transcript" aria-label="Conversation transcript" tabIndex={0}>
+          {userTranscript || assistantTranscript ? <>
+            {userTranscript && <p className="gemini-live-transcript-line"><span className="gemini-live-transcript-speaker">You</span>{userTranscript}</p>}
+            {assistantTranscript && <p className="gemini-live-transcript-line"><span className="gemini-live-transcript-speaker">Mint</span>{assistantTranscript}</p>}
+          </> : <p className="live-orb-empty">{status === 'connecting' ? 'Your conversation will appear here.' : status === 'error' ? 'No conversation yet.' : 'Say something to get started…'}</p>}
         </div>
-
         <div className="gemini-live-voice-picker">
-          <button
-            type="button"
-            className="gemini-live-voice-btn"
-            onClick={() => setVoicePickerOpen((open) => !open)}
-            title="Change voice"
-            aria-expanded={voicePickerOpen}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M11 5 6 9H2v6h4l5 4V5z" />
-              <path d="M15.5 8.5a5 5 0 0 1 0 7" />
-            </svg>
-            <span>{voice}</span>
-          </button>
-          {voicePickerOpen && (
-            <div className="gemini-live-voice-menu" role="listbox">
-              {voices.map((voiceName) => (
-                <button
-                  key={voiceName}
-                  type="button"
-                  role="option"
-                  aria-selected={voiceName === voice}
-                  className={`gemini-live-voice-option ${voiceName === voice ? 'active' : ''}`}
-                  onClick={() => {
-                    setVoicePickerOpen(false)
-                    if (voiceName !== voice) onChangeVoice(voiceName)
-                  }}
-                >
-                  {voiceName}
-                </button>
-              ))}
-            </div>
-          )}
+          <Button type="button" variant="ghost" className="gemini-live-voice-btn" aria-label="Change voice" aria-expanded={voicePickerOpen} aria-haspopup="listbox" onClick={() => setVoicePickerOpen(open => !open)}>
+            <Volume2 size={16} aria-hidden="true" /><span>{voice}</span>
+          </Button>
+          {voicePickerOpen && <div className="gemini-live-voice-menu" role="listbox" aria-label="Live voice">
+            {voices.map(voiceName => <button key={voiceName} type="button" role="option" aria-selected={voiceName === voice} data-voice={voiceName} className={`gemini-live-voice-option ${voiceName === voice ? 'active' : ''}`} onClick={() => {
+              setVoicePickerOpen(false)
+              if (voiceName !== voice) onChangeVoice(voiceName)
+            }}>{voiceName}</button>)}
+          </div>}
         </div>
-
         <div className="gemini-live-controls">
-          <button
-            type="button"
-            className="gemini-live-btn"
-            onClick={onTogglePause}
-            title={isPaused ? 'Resume' : 'Pause'}
-          >
-            {isPaused ? (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M8 5v14l11-7z" />
-              </svg>
-            ) : (
-              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                <rect x="6" y="5" width="4" height="14" rx="1" />
-                <rect x="14" y="5" width="4" height="14" rx="1" />
-              </svg>
-            )}
-          </button>
-          <button
-            type="button"
-            className="gemini-live-btn gemini-live-end"
-            onClick={onEndCall}
-            title="End Live conversation"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
+          <Button type="button" data-call-control variant="secondary" size="lg" className="gemini-live-btn" onClick={onTogglePause} disabled={status === 'connecting' || status === 'error'} aria-label={isPaused ? 'Resume microphone' : 'Pause microphone'} aria-pressed={isPaused}>
+            {isPaused ? <Mic size={18} aria-hidden="true" /> : <MicOff size={18} aria-hidden="true" />}<span>{isPaused ? 'Resume' : 'Pause mic'}</span>
+          </Button>
+          <Button type="button" variant="destructive" size="lg" className="gemini-live-btn gemini-live-end" onClick={onEndCall} aria-label="End Live conversation">
+            <PhoneOff size={18} aria-hidden="true" /><span>End call</span>
+          </Button>
         </div>
       </div>
     </div>
   )
+  // Escape chat layout containment (transforms, filters and clipped panels).
+  return typeof document === 'undefined' ? dialog : createPortal(dialog, document.body)
 }

package/src/renderer/shared/components/GitBranchSelector.tsx

@@ -0,0 +1,442 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from 'react'
+import { workspacePlatform } from '../platform'
+import type { GitBranchChangeOutcome, GitBranchInfo } from '../types'
+
+type MenuView = 'branches' | 'create' | 'graph'
+type MenuDirection = 'up' | 'down'
+
+interface GitBranchSelectorProps {
+  workspacePath: string
+  disabled?: boolean
+  onBranchChanged?: () => void
+}
+
+function errorMessage(reason: unknown): string {
+  if (reason instanceof Error) return reason.message
+  if (typeof reason === 'string') return reason
+  return 'Git could not complete that action.'
+}
+
+export default function GitBranchSelector({ workspacePath, disabled = false, onBranchChanged }: GitBranchSelectorProps) {
+  const [info, setInfo] = useState<GitBranchInfo | null>(null)
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [error, setError] = useState('')
+  const [switchingBranch, setSwitchingBranch] = useState('')
+  const [menuView, setMenuView] = useState<MenuView>('branches')
+  const [newBranchName, setNewBranchName] = useState('')
+  const [graphLines, setGraphLines] = useState<string[]>([])
+  const [graphLoading, setGraphLoading] = useState(false)
+  const [menuDirection, setMenuDirection] = useState<MenuDirection>('up')
+  const [menuAlignment, setMenuAlignment] = useState<'left' | 'right'>('left')
+  const [menuMaxHeight, setMenuMaxHeight] = useState(480)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const wasDisabledRef = useRef(disabled)
+
+  const refresh = useCallback(async () => {
+    if (!workspacePath.trim()) {
+      setInfo(null)
+      return
+    }
+    try {
+      const nextInfo = await workspacePlatform.getGitBranchInfo(workspacePath)
+      setInfo(nextInfo)
+      setError('')
+    } catch (reason) {
+      setInfo(null)
+      setError(errorMessage(reason))
+    }
+  }, [workspacePath])
+
+  useEffect(() => {
+    let cancelled = false
+    if (!workspacePath.trim()) {
+      setInfo(null)
+      setOpen(false)
+      return
+    }
+    workspacePlatform.getGitBranchInfo(workspacePath)
+      .then((nextInfo) => {
+        if (cancelled) return
+        setInfo(nextInfo)
+        setError('')
+      })
+      .catch((reason) => {
+        if (cancelled) return
+        setInfo(null)
+        setError(errorMessage(reason))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [workspacePath])
+
+  useEffect(() => {
+    if (!open) return
+    const closeOnOutsidePointer = (event: MouseEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+    document.addEventListener('mousedown', closeOnOutsidePointer)
+    window.addEventListener('keydown', closeOnEscape)
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsidePointer)
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [open])
+
+  useEffect(() => {
+    const handleWindowFocus = () => refresh()
+    window.addEventListener('focus', handleWindowFocus)
+    return () => window.removeEventListener('focus', handleWindowFocus)
+  }, [refresh])
+
+  useEffect(() => {
+    if (disabled) {
+      setOpen(false)
+    } else if (wasDisabledRef.current) {
+      refresh()
+    }
+    wasDisabledRef.current = disabled
+  }, [disabled, refresh])
+
+  const visibleBranches = useMemo(() => {
+    if (!info) return []
+    const normalizedQuery = query.trim().toLocaleLowerCase()
+    const matching = normalizedQuery
+      ? info.branches.filter((branch) => branch.toLocaleLowerCase().includes(normalizedQuery))
+      : info.branches
+    return [...matching].sort((left, right) => {
+      if (left === info.currentBranch) return -1
+      if (right === info.currentBranch) return 1
+      return left.localeCompare(right)
+    })
+  }, [info, query])
+
+  const visibleRemoteBranches = useMemo(() => {
+    if (!info) return []
+    const normalizedQuery = query.trim().toLocaleLowerCase()
+    return info.remoteBranches.filter((remoteBranch) => {
+      const localName = remoteBranch.split('/').slice(1).join('/')
+      if (info.branches.includes(localName)) return false
+      return !normalizedQuery || remoteBranch.toLocaleLowerCase().includes(normalizedQuery)
+    })
+  }, [info, query])
+
+  if (!info?.isRepository) {
+    if (!error) return null
+    return (
+      <div className="git-branch-selector is-error">
+        <button
+          type="button"
+          className="git-branch-trigger"
+          onClick={refresh}
+          title={`${error} Select to retry.`}
+          aria-label="Git branch unavailable. Retry"
+        >
+          <span className="git-branch-name">Git unavailable</span>
+        </button>
+      </div>
+    )
+  }
+
+  const branchLabel = info.currentBranch || (info.detachedHead ? `Detached ${info.detachedHead}` : 'No branch')
+
+  const applyBranchResult = (nextInfo: GitBranchInfo) => {
+    setInfo(nextInfo)
+    setOpen(false)
+    setQuery('')
+    setMenuView('branches')
+  }
+
+  const executeBranchChange = async (
+    description: string,
+    change: (confirmedDirtyWorkspace: boolean) => Promise<GitBranchChangeOutcome>,
+  ) => {
+    let outcome = await change(false)
+    if (outcome.status === 'confirmation_required') {
+      const confirmed = window.confirm(
+        `This workspace has uncommitted changes. ${description} Git will stop if the changes conflict.`,
+      )
+      if (!confirmed) return
+      outcome = await change(true)
+    }
+    if (outcome.status === 'confirmation_required') {
+      throw new Error('Workspace confirmation was not accepted.')
+    }
+    applyBranchResult(outcome.info)
+    onBranchChanged?.()
+  }
+
+  const handleSwitch = async (branch: string) => {
+    if (branch === info.currentBranch || switchingBranch) {
+      setOpen(false)
+      return
+    }
+    try {
+      setError('')
+      setSwitchingBranch(branch)
+      await executeBranchChange(
+        `Switch from ${branchLabel} to ${branch}?`,
+        (confirmed) => workspacePlatform.switchGitBranch(workspacePath, branch, confirmed),
+      )
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      setSwitchingBranch('')
+    }
+  }
+
+  const handleRemoteCheckout = async (remoteBranch: string) => {
+    if (switchingBranch) return
+    try {
+      setError('')
+      setSwitchingBranch(remoteBranch)
+      await executeBranchChange(
+        `Check out ${remoteBranch}?`,
+        (confirmed) => workspacePlatform.checkoutRemoteGitBranch(workspacePath, remoteBranch, confirmed),
+      )
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      setSwitchingBranch('')
+    }
+  }
+
+  const handleCreateBranch = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const branch = newBranchName.trim()
+    if (!branch || switchingBranch) return
+    try {
+      setError('')
+      setSwitchingBranch(branch)
+      await executeBranchChange(
+        `Create and switch to ${branch}?`,
+        (confirmed) => workspacePlatform.createGitBranch(workspacePath, branch, confirmed),
+      )
+      setNewBranchName('')
+    } catch (reason) {
+      setError(errorMessage(reason))
+    } finally {
+      setSwitchingBranch('')
+    }
+  }
+
+  const loadGraph = async () => {
+    try {
+      setError('')
+      setGraphLoading(true)
+      setGraphLines(await workspacePlatform.getGitGraph(workspacePath))
+    } catch (reason) {
+      setGraphLines([])
+      setError(errorMessage(reason))
+    } finally {
+      setGraphLoading(false)
+    }
+  }
+
+  const positionMenu = (preferredHeight: number, preferredWidth = 320) => {
+    const triggerRect = triggerRef.current?.getBoundingClientRect()
+    if (!triggerRect) return
+    const viewportPadding = 16
+    const panelRect = rootRef.current?.closest('.conversation-panel')?.getBoundingClientRect()
+    const leftEdge = Math.max(viewportPadding, panelRect?.left ?? viewportPadding)
+    const rightEdge = Math.min(window.innerWidth - viewportPadding, panelRect?.right ?? window.innerWidth - viewportPadding)
+    const availableRight = Math.max(0, rightEdge - triggerRect.left)
+    const availableLeft = Math.max(0, triggerRect.right - leftEdge)
+    const menuWidth = Math.min(preferredWidth, window.innerWidth - viewportPadding * 2)
+    setMenuAlignment(availableRight >= menuWidth || availableRight >= availableLeft ? 'left' : 'right')
+    const availableAbove = Math.max(0, triggerRect.top - viewportPadding)
+    const availableBelow = Math.max(0, window.innerHeight - triggerRect.bottom - viewportPadding)
+    const direction: MenuDirection = availableAbove >= preferredHeight || availableAbove >= availableBelow
+      ? 'up'
+      : 'down'
+    setMenuDirection(direction)
+    setMenuMaxHeight(Math.max(180, direction === 'up' ? availableAbove : availableBelow))
+  }
+
+  const openGraph = () => {
+    positionMenu(420, window.innerWidth <= 1100 ? 320 : 540)
+    setMenuView('graph')
+    loadGraph()
+  }
+
+  return (
+    <div className="git-branch-selector" ref={rootRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className="git-branch-trigger"
+        onClick={() => {
+          setOpen((current) => {
+            if (!current) {
+              positionMenu(360)
+            }
+            return !current
+          })
+          setQuery('')
+          setError('')
+          setMenuView('branches')
+        }}
+        disabled={disabled || Boolean(switchingBranch)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls="workspace-branch-menu"
+        title={`${branchLabel}${info.isDirty ? ' — uncommitted changes' : ''}`}
+      >
+        <svg className="git-branch-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <circle cx="6" cy="5" r="2" />
+          <circle cx="18" cy="6" r="2" />
+          <circle cx="6" cy="19" r="2" />
+          <path d="M6 7v10M8 7c2 4 8 1 8-1" />
+        </svg>
+        <span className="git-branch-name">{switchingBranch || branchLabel}</span>
+        {info.isDirty && <span className="git-branch-dirty" aria-label="Uncommitted changes" />}
+        <svg className="git-branch-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className={`git-branch-menu ${menuView === 'graph' ? 'is-graph' : ''} ${menuDirection === 'down' ? 'opens-down' : ''} ${menuAlignment === 'right' ? 'align-right' : ''}`}
+          id="workspace-branch-menu"
+          role="dialog"
+          style={{ maxHeight: `${menuMaxHeight}px` }}
+          aria-label={menuView === 'graph' ? 'Git graph' : menuView === 'create' ? 'Create branch' : 'Choose branch'}
+        >
+          {menuView === 'branches' && (
+            <>
+              <label className="git-branch-search">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+                  <circle cx="11" cy="11" r="7" />
+                  <path d="m20 20-4-4" />
+                </svg>
+                <input
+                  autoFocus
+                  aria-label="Search branches"
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="Search branches"
+                />
+              </label>
+              <div className="git-branch-menu-heading">Local branches</div>
+              <div className="git-branch-list" role="listbox" aria-label="Local branches">
+                {visibleBranches.map((branch) => {
+                  const selected = branch === info.currentBranch
+                  return (
+                    <button
+                      key={branch}
+                      type="button"
+                      className="git-branch-option"
+                      role="option"
+                      aria-selected={selected}
+                      disabled={Boolean(switchingBranch)}
+                      onClick={() => handleSwitch(branch)}
+                    >
+                      <span className="git-branch-option-icon" aria-hidden="true">⑂</span>
+                      <span>{branch}</span>
+                      {selected && (
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                          <path d="m5 12 4 4L19 6" />
+                        </svg>
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+              {visibleRemoteBranches.length > 0 && (
+                <>
+                  <div className="git-branch-menu-heading">Remote branches</div>
+                  <div className="git-branch-list is-remote" role="listbox" aria-label="Remote branches">
+                    {visibleRemoteBranches.map((remoteBranch) => (
+                      <button
+                        key={remoteBranch}
+                        type="button"
+                        className="git-branch-option"
+                        role="option"
+                        aria-selected="false"
+                        disabled={Boolean(switchingBranch)}
+                        onClick={() => handleRemoteCheckout(remoteBranch)}
+                        title={`Create a local tracking branch from ${remoteBranch}`}
+                      >
+                        <span className="git-branch-option-icon" aria-hidden="true">⇄</span>
+                        <span>{remoteBranch}</span>
+                        <span className="git-branch-track-label">Track</span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              )}
+              {visibleBranches.length === 0 && visibleRemoteBranches.length === 0 && (
+                <div className="git-branch-empty">No matching branches</div>
+              )}
+              <div className="git-branch-actions">
+                <button type="button" onClick={() => { setMenuView('create'); setError('') }}>
+                  <span aria-hidden="true">＋</span>
+                  Create branch
+                </button>
+                <button type="button" onClick={openGraph}>
+                  <span aria-hidden="true">⑂</span>
+                  Git graph
+                </button>
+              </div>
+            </>
+          )}
+
+          {menuView === 'create' && (
+            <form className="git-branch-create" onSubmit={handleCreateBranch}>
+              <div className="git-branch-view-header">
+                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">←</button>
+                <strong>Create branch</strong>
+              </div>
+              <label htmlFor="new-git-branch-name">Branch name</label>
+              <input
+                id="new-git-branch-name"
+                autoFocus
+                value={newBranchName}
+                onChange={(event) => setNewBranchName(event.target.value)}
+                placeholder="feature/branch-name"
+                spellCheck="false"
+                autoComplete="off"
+              />
+              <p>Creates the branch from <strong>{branchLabel}</strong> and switches to it.</p>
+              <button className="git-branch-create-submit" type="submit" disabled={!newBranchName.trim() || Boolean(switchingBranch)}>
+                {switchingBranch ? 'Creating…' : 'Create and switch'}
+              </button>
+            </form>
+          )}
+
+          {menuView === 'graph' && (
+            <div className="git-graph-view">
+              <div className="git-branch-view-header">
+                <button type="button" onClick={() => { setMenuView('branches'); setError('') }} aria-label="Back to branches">←</button>
+                <strong>Git graph</strong>
+                <button type="button" className="git-graph-refresh" onClick={loadGraph} disabled={graphLoading}>Refresh</button>
+              </div>
+              {graphLoading ? (
+                <div className="git-graph-state">Reading repository history…</div>
+              ) : error ? null : graphLines.length > 0 ? (
+                <pre className="git-graph-output" tabIndex={0}>{graphLines.join('\n')}</pre>
+              ) : (
+                <div className="git-graph-state">No commits yet</div>
+              )}
+            </div>
+          )}
+
+          {error && (
+            <div className="git-branch-error" role="alert">
+              <span>{error}</span>
+              {menuView === 'graph' && <button type="button" onClick={loadGraph}>Retry</button>}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}