@dsh-cove/dsh-web-all 0.0.0-stage → 0.4.3

package/src/client/conversation/git-graph/api.ts

@@ -0,0 +1,85 @@
+/**
+ * Browser client for the host /git/* routes: typed JSON envelope calls plus
+ * the SSE change subscription. Same-origin relative fetch (the page and the
+ * routes share the webserver).
+ * @module dsh-git-graph/client/api
+ */
+
+import { subscribeSharedEvents } from './sse-leader.ts'
+import type {
+  BranchesView, GitError, GraphView, RepoStatus,
+} from '../../../core/git-graph/protocol.ts'
+
+/** One /git envelope response. */
+export type ApiResult<T> =
+  | { ok: true; value: T }
+  | { ok: false; error: GitError }
+
+/** Transport failure (fetch threw or the response was not JSON). */
+const TRANSPORT_ERROR: GitError = { code: 'internal', message: 'git route unavailable' }
+
+/** POST one JSON payload and decode the envelope; never throws. */
+async function post<T>(path: string, payload: Record<string, unknown>): Promise<ApiResult<T>> {
+  let response: Response
+  try {
+    response = await fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+  } catch {
+    return { ok: false, error: TRANSPORT_ERROR }
+  }
+  try {
+    const envelope = await response.json() as unknown
+    if (typeof envelope !== 'object' || envelope === null) return { ok: false, error: TRANSPORT_ERROR }
+    const record = envelope as Record<string, unknown>
+    if (record.ok === true) return { ok: true, value: record.value as T }
+    return { ok: false, error: (record.error as GitError | undefined) ?? TRANSPORT_ERROR }
+  } catch {
+    return { ok: false, error: TRANSPORT_ERROR }
+  }
+}
+
+/** Typed git operations over the wire. */
+export class GitApi {
+  /** The repository snapshot (null: not a git repository / not a workspace). */
+  status(path: string): Promise<ApiResult<RepoStatus | null>> {
+    return post('/git/status', { path })
+  }
+
+  /** Local branch list with the current branch marked. */
+  branches(path: string): Promise<ApiResult<BranchesView | null>> {
+    return post('/git/branches', { path })
+  }
+
+  /** Workspace-level `git switch --no-guess <branch>` (host guards first). */
+  switchBranch(path: string, branch: string): Promise<ApiResult<{ branch: string }>> {
+    return post('/git/switch', { path, branch })
+  }
+
+  /** `git switch --no-guess -c <name>` from the current HEAD. */
+  createBranch(path: string, name: string): Promise<ApiResult<{ branch: string }>> {
+    return post('/git/create-branch', { path, name })
+  }
+
+  /** Topo-ordered commit graph across branches/tags/remotes. */
+  graph(path: string, limit?: number): Promise<ApiResult<GraphView | null>> {
+    return post('/git/graph', limit === undefined ? { path } : { path, limit })
+  }
+}
+
+/**
+ * Subscribe to host-pushed branch-state changes for one workspace path (the
+ * host polls the workspace while a subscriber is connected). Reconnects are
+ * handled by the EventSource; the caller re-subscribes when the path changes.
+ * @param path - workspace root to watch.
+ * @param onChange - fired on every pushed change.
+ * @returns the disposer closing the stream.
+ */
+export function subscribeChanges(path: string, onChange: () => void): () => void {
+  // The stream is shared browser-wide through the cross-tab leader relay
+  // (issue #383): two tabs of the same workspace must not pin two SSE
+  // connections against the per-origin HTTP pool.
+  return subscribeSharedEvents(`/git/events?path=${encodeURIComponent(path)}`, 'change', () => { onChange() })
+}

package/src/client/conversation/git-graph/branch-chip.tsx

@@ -0,0 +1,354 @@
+/**
+ * The git branch selector chip for blank sessions. It mounts in the selector
+ * context hole (`conversation.input.selector.context`) beside the official
+ * workspace selector. On shells that dropped the hole, it uses
+ * `conversation.input.dock` only for the blank-session hero phase and lifts
+ * itself into the official hero chip row. It is intentionally absent while a
+ * session is running.
+ * @module dsh-git-graph/client/chips/BranchChip
+ */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { IconBranchOutline16 } from '../../ui-icons.ts'
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+// DSH 0.2 declares the seat's standard hooks by module augmentation
+// (`GlobalStandardProps`, an empty merge target in ui-slots); the session one
+// contributes `useSessions`. Type-only: the value comes from the seat props.
+import type {} from '@deepseek-ai/dsh-client-ui-session/client'
+import type { BranchesView, GraphView, RepoStatus, SwitchResult } from '../../../core/git-graph/protocol.ts'
+import type { GitGraphKey } from './locales.ts'
+import { Chip, cx } from './chip.tsx'
+import { heroPlacementIn, heroRowFor, shouldProbeInFlow } from './hero-seat.ts'
+import { BranchPopover } from './branch-popover.tsx'
+import { CreateBranchDialog } from './create-branch-dialog.tsx'
+import { GraphDialog } from './graph-dialog.tsx'
+import css from './git-graph.module.css'
+
+/**
+ * The verb face the conversation position module injects into the chip.
+ *
+ * Both branch verbs are the lane path: choosing an existing branch or naming a
+ * new one creates/attaches its worktree and moves this conversation onto it.
+ * That move rides the `uiWorkspace` client service, never a seat prop — the
+ * `conversation.input.dock` seat is rendered with `{ session, input }` only.
+ */
+export interface GitGraphInjected {
+  repoStatus: (sessionId: string | undefined) => Promise<RepoStatus | null>
+  branches: (sessionId: string | undefined) => Promise<BranchesView | null>
+  switchBranch: (sessionId: string | undefined, branch: string) => Promise<SwitchResult>
+  createBranch: (sessionId: string | undefined, branch: string) => Promise<SwitchResult>
+  graph: (sessionId: string | undefined, limit?: number) => Promise<GraphView | null>
+  subscribeChanges: (sessionId: string | undefined, onChange: () => void) => () => void
+}
+
+/**
+ * Full props of the branch chip: the official dock seat's runtime share + the
+ * session identity injected by the seat (`inject(sessionId)`) + the git-graph
+ * inject face + the locale seat. 0.2 has no selector-context seat, so the chip
+ * lives in `conversation.input.dock` only.
+ */
+export type BranchChipProps =
+  PropsRuntime<'conversation.input.dock'>
+  & { sessionId?: string }
+  & GitGraphInjected
+  & { t: import('@deepseek-ai/dsh-client-ui-slots').Translate<GitGraphKey> }
+
+/** Minimum gap between window-focus git refetches (ms). */
+export const FOCUS_REFRESH_MIN_MS = 5_000
+
+const SKIN_CENTER_BODY_ATTR = 'data-dsh-skin-center'
+const DARK_THEME_BODY_ATTR = 'data-ds-dark-theme'
+const DSH_BODY_ATTR_PREFIX = 'data-dsh-'
+
+/** Whether a body attribute belongs to an applied skin rather than the skin center shell. */
+function hasAppliedSkinBodyAttr(name: string): boolean {
+  return name.startsWith(DSH_BODY_ATTR_PREFIX) && name !== SKIN_CENTER_BODY_ATTR
+}
+
+/** Whether the page is using the unskinned stock light theme. */
+function readStockLightTheme(): boolean {
+  if (typeof document === 'undefined') return false
+  const body = document.body
+  if (!body.hasAttribute(SKIN_CENTER_BODY_ATTR) || body.hasAttribute(DARK_THEME_BODY_ATTR)) return false
+  return !body.getAttributeNames().some(hasAppliedSkinBodyAttr)
+}
+
+/** Track stock-light theme changes from body attributes. */
+function useStockLightTheme(): boolean {
+  const [stockLightTheme, setStockLightTheme] = useState(readStockLightTheme)
+
+  useEffect(() => {
+    const update = (): void => { setStockLightTheme(readStockLightTheme()) }
+    update()
+    if (typeof document === 'undefined' || typeof MutationObserver !== 'function') return undefined
+    const observer = new MutationObserver(update)
+    observer.observe(document.body, { attributes: true })
+    return () => { observer.disconnect() }
+  }, [])
+
+  return stockLightTheme
+}
+
+/**
+ * The right edge of the rightmost painted descendant of `root`, excluding
+ * `root` itself. The hero row's direct children can be display:contents
+ * slot outlets, so the visible chip boundary must be found by walking.
+ */
+function paintedRight(root: Element): number | null {
+  let right: number | null = null
+  const visit = (node: Element): void => {
+    if (node !== root) {
+      const rect = node.getBoundingClientRect()
+      if (rect.width > 0 && rect.height > 0) {
+        right = right === null ? rect.right : Math.max(right, rect.right)
+      }
+    }
+    for (const child of Array.from(node.children)) visit(child)
+  }
+  visit(root)
+  return right
+}
+
+/**
+ * Coalesce repeated placement updates into one animation-frame callback so
+ * observer bursts in the same frame measure only once. When the environment
+ * provides no requestAnimationFrame, updates run synchronously instead.
+ */
+function frameScheduler(update: () => void): { schedule: () => void, cancel: () => void } {
+  let pending = false
+  let frame: number | null = null
+  const flush = (): void => {
+    pending = false
+    frame = null
+    update()
+  }
+  return {
+    schedule: () => {
+      if (pending) return
+      pending = true
+      if (typeof requestAnimationFrame === 'function') {
+        frame = requestAnimationFrame(flush)
+      } else {
+        flush()
+      }
+    },
+    cancel: () => {
+      pending = false
+      if (frame !== null) cancelAnimationFrame(frame)
+      frame = null
+    },
+  }
+}
+
+/**
+ * The git branch selector chip for blank sessions.
+ * @param props - the composed entry props of whichever seat it mounted in.
+ */
+export function BranchChip(props: BranchChipProps) {
+  const sessionId = props.sessionId
+  // Blank-session flag from the standard session list. The selector never
+  // throws for a missing session id / row, so the hook can stay mounted
+  // while the session baseline is still loading.
+  const blankSession = props.useSessions((state): boolean => {
+    if (sessionId === undefined) return false
+    const sessions = state as { byId?: Record<string, { blank?: boolean }> }
+    return sessions.byId?.[sessionId]?.blank === true
+  })
+  // The dock seat carries the composer snapshot. It exposes the selector
+  // only in the blank hero phase; the session-maybe context seat uses the
+  // session baseline's blank flag instead.
+  const dockSeat = 'session' in props && 'input' in props
+  const sessionSnapshot = dockSeat ? props.session as unknown as { composerPhase?: string; shellPhase?: string; openState?: string } : undefined
+  const phaseBlank = sessionSnapshot?.shellPhase === 'blank' || sessionSnapshot?.composerPhase === 'blank'
+  // The 0.2 dock hands the seat only { session, input }: the hero phase is
+  // computed on the official side and never reaches the seat, so the session
+  // list's blank flag is the reliable show/hide signal. Placement is decided
+  // from the DOM instead — when the dock row sits directly under the official
+  // hero chip row, the chip is lifted into that row (see the layout effect
+  // below); otherwise it stays in flow inside the dock row.
+  const phaseHero = phaseBlank && (sessionSnapshot?.openState === 'open' || blankSession === true)
+  const showBranchSelector = blankSession === true || phaseHero
+  const stockLightTheme = useStockLightTheme()
+
+  /** Repository state: undefined = loading, null = not a repository, else the snapshot. */
+  const [repo, setRepo] = useState<RepoStatus | null | undefined>(undefined)
+  /** Fresh branch list, fetched when the branch popover opens. */
+  const [branchesView, setBranchesView] = useState<BranchesView | null>(null)
+  const [branchOpen, setBranchOpen] = useState(false)
+  const [createOpen, setCreateOpen] = useState(false)
+  const [graphOpen, setGraphOpen] = useState(false)
+  /** Measured hero-row placement against the anchor's containing block; null while the chip stays in flow. */
+  const [heroPlacement, setHeroPlacement] = useState<{ left: number, top: number } | null>(null)
+  const anchorRef = useRef<HTMLDivElement | null>(null)
+  /** Hero seat: a measured placement means the chip is lifted into the official hero chip row. */
+  const heroLift = heroPlacement !== null
+
+  // Hero placement: the shell renders the dock as its own row between the
+  // official hero chip row and the composer card. The chip belongs *in* that
+  // row, immediately after its rightmost painted chip (the agent-preset seat),
+  // on the official 28px transparent pill recipe. The row is found
+  // structurally and measured after a synchronous probe that takes the anchor
+  // out of flow: dropping the dock row resizes the vertically centred composer
+  // stack, so only the settled layout is the one to match. Offsets are taken
+  // against the anchor's own containing block — the composer stack is static,
+  // so stack-relative numbers land hundreds of pixels away from the row.
+  useLayoutEffect(() => {
+    const anchor = anchorRef.current
+    const heroRow = showBranchSelector && anchor !== null ? heroRowFor(anchor) : null
+    const outlet = anchor?.parentElement ?? null
+    const stack = outlet?.parentElement ?? null
+    if (anchor === null || outlet === null || stack === null || heroRow === null) {
+      setHeroPlacement(null)
+      return
+    }
+    const measure = (): void => {
+      const block = anchor.offsetParent ?? document.documentElement
+      const blockRect = block.getBoundingClientRect()
+      const rowRect = heroRow.getBoundingClientRect()
+      if (blockRect.width <= 0 || rowRect.width <= 0 || rowRect.height <= 0) return
+      const right = paintedRight(heroRow)
+      if (right === null) return
+      const { left, top } = heroPlacementIn(
+        { left: blockRect.left, top: blockRect.top, clientLeft: block.clientLeft, clientTop: block.clientTop },
+        { top: rowRect.top, height: rowRect.height },
+        right,
+      )
+      setHeroPlacement(previous => {
+        if (previous !== null && Math.abs(previous.left - left) < 0.5 && Math.abs(previous.top - top) < 0.5) return previous
+        return { left, top }
+      })
+    }
+    const probe = shouldProbeInFlow(anchor)
+    if (probe) {
+      anchor.style.position = 'absolute'
+      anchor.style.visibility = 'hidden'
+    }
+    measure()
+    if (probe) {
+      anchor.style.position = ''
+      anchor.style.visibility = ''
+    }
+    const scheduler = frameScheduler(measure)
+    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(scheduler.schedule)
+    for (const target of [anchor, outlet, stack, heroRow]) observer?.observe(target)
+    window.addEventListener('resize', scheduler.schedule)
+    return () => {
+      scheduler.cancel()
+      observer?.disconnect()
+      window.removeEventListener('resize', scheduler.schedule)
+    }
+  }, [showBranchSelector, sessionId, repo !== undefined && repo !== null])
+
+  const refetch = useCallback(() => {
+    let live = true
+    props.repoStatus(sessionId)
+      .then((status) => { if (live) setRepo(status) })
+      .catch(() => { if (live) setRepo(null) })
+    return () => { live = false }
+  }, [props.repoStatus, sessionId])
+
+  // Blank-session data stays fresh through the initial load, host-pushed
+  // changes, and a throttled focus refresh. Active sessions never subscribe
+  // or start a Git status round trip.
+  const lastFocusRefetch = useRef(0)
+  useEffect(() => {
+    if (!showBranchSelector) return undefined
+    return refetch()
+  }, [showBranchSelector, refetch])
+  useEffect(() => {
+    if (!showBranchSelector) return undefined
+    const unsubscribe = props.subscribeChanges(sessionId, () => { refetch() })
+    const onFocus = (): void => {
+      const now = Date.now()
+      if (now - lastFocusRefetch.current < FOCUS_REFRESH_MIN_MS) return
+      lastFocusRefetch.current = now
+      refetch()
+    }
+    window.addEventListener('focus', onFocus)
+    return () => {
+      unsubscribe()
+      window.removeEventListener('focus', onFocus)
+    }
+  }, [showBranchSelector, props.subscribeChanges, sessionId, refetch])
+
+  const closeCreate = (): void => {
+    setCreateOpen(false)
+    refetch()
+  }
+
+  // Fetch the fresh branch list each time the popover opens. All hooks stay
+  // above the data-gated returns so the hook order is stable while `repo`
+  // settles from undefined (loading) to a snapshot.
+  useEffect(() => {
+    if (!showBranchSelector || !branchOpen) return undefined
+    let live = true
+    setBranchesView(null)
+    props.branches(sessionId).then((view) => { if (live) setBranchesView(view) })
+    return () => { live = false }
+  }, [showBranchSelector, branchOpen, props.branches, sessionId])
+
+  // Active sessions intentionally expose no branch-selection control. Loading
+  // and non-repository workspaces likewise render no dead control.
+  if (!showBranchSelector || repo === undefined || repo === null) return null
+
+  const openBranchPopover = (): void => {
+    setBranchOpen(open => !open)
+  }
+
+  return (
+    <div
+      ref={anchorRef}
+      data-gitgraph-chip-anchor
+      data-dsh-plugin="git-graph"
+      data-dsh-part="chip"
+      data-gitgraph-stock-light={stockLightTheme || undefined}
+      className={cx(css.anchor, heroLift && css.anchorHero)}
+      style={heroLift && heroPlacement !== null
+        ? { left: `${heroPlacement.left}px`, top: `${heroPlacement.top}px`, paddingLeft: 0 }
+        : undefined}
+    >
+      <div className={css.chipWrap}>
+        <Chip
+          hero={heroLift}
+          icon={<IconBranchOutline16 size={heroLift ? 16 : 14} />}
+          label={repo.branch === '' ? props.t('branch.detached') : repo.branch}
+          ariaLabel={props.t('chip.aria.branch')}
+          open={branchOpen}
+          onClick={openBranchPopover}
+        />
+        {branchOpen && branchesView !== null && (
+          <BranchPopover
+            hero={heroLift}
+            view={branchesView}
+            onSwitch={(branch) => props.switchBranch(sessionId, branch)}
+            onSwitched={refetch}
+            onCreate={() => {
+              setBranchOpen(false)
+              setCreateOpen(true)
+            }}
+            onGraph={() => {
+              setBranchOpen(false)
+              setGraphOpen(true)
+            }}
+            onClose={() => { setBranchOpen(false) }}
+            t={props.t}
+          />
+        )}
+      </div>
+      {createOpen && (
+        <CreateBranchDialog
+          onCreate={(name) => props.createBranch(sessionId, name)}
+          onClose={closeCreate}
+          t={props.t}
+        />
+      )}
+      {graphOpen && (
+        <GraphDialog
+          graph={(limit) => props.graph(sessionId, limit)}
+          onClose={() => { setGraphOpen(false) }}
+          t={props.t}
+        />
+      )}
+    </div>
+  )
+}

package/src/client/conversation/git-graph/branch-popover.tsx

@@ -0,0 +1,185 @@
+/**
+ * The branch picker popover: searchable local branch list with the current
+ * branch checked, the dirtiness line, switch feedback (success/error), and
+ * the footer flows (create branch / Git graph).
+ * @module dsh-git-graph/client/chips/BranchPopover
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { IconBranchOutline16, IconCheckOutline14, IconSearchOutline16 } from '../../ui-icons.ts'
+import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
+import type { BranchesView, SwitchResult } from '../../../core/git-graph/protocol.ts'
+import type { GitGraphKey } from './locales.ts'
+import { errorMessage } from './error-copy.ts'
+import { cx, Backdrop } from './chip.tsx'
+import css from './git-graph.module.css'
+
+/** Props of the branch picker popover. */
+export interface BranchPopoverProps {
+  view: BranchesView
+  /** Workspace-level switch verb; resolves to a stable git error on rejection. */
+  onSwitch: (branch: string) => Promise<SwitchResult>
+  /** Fired after a successful switch (the owner refetches its status). */
+  onSwitched: () => void
+  /** Open the create-branch dialog. */
+  onCreate: () => void
+  /** Open the Git graph panel. */
+  onGraph: () => void
+  /** Close the popover (backdrop / after a successful switch). */
+  onClose: () => void
+  t: Translate<GitGraphKey>
+  /** Open downward from the official hero row (the default opens upward from the dock row). */
+  hero?: boolean
+}
+
+/** How long the success notice stays before the popover closes itself. */
+const SUCCESS_DISMISS_MS = 900
+/** The prepared-worktree notice carries an instruction, so it stays longer. */
+const WORKTREE_READY_DISMISS_MS = 6_000
+
+/**
+ * The branch picker popover.
+ * @param props - see {@link BranchPopoverProps}.
+ */
+export function BranchPopover({ view, onSwitch, onSwitched, onCreate, onGraph, onClose, t, hero = false }: BranchPopoverProps) {
+  const [query, setQuery] = useState('')
+  const [pending, setPending] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+  const dismissTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  // Tooltip state for long branch names: first hover needs a 500ms dwell,
+  // once shown, switching items shows immediately; leaving resets the dwell.
+  const [tipReadyName, setTipReadyName] = useState<string | null>(null)
+  const [tipActive, setTipActive] = useState(false)
+  const [tipDir, setTipDir] = useState<'up' | 'down'>('up')
+  const tipTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => () => {
+    if (dismissTimer.current !== undefined) clearTimeout(dismissTimer.current)
+    if (tipTimer.current !== undefined) clearTimeout(tipTimer.current)
+  }, [])
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    if (needle === '') return view.branches
+    return view.branches.filter(branch => branch.name.toLowerCase().includes(needle))
+  }, [view.branches, query])
+
+  const switchTo = (branch: string): void => {
+    if (pending !== null) return
+    setPending(branch)
+    setError(null)
+    setSuccess(null)
+    void onSwitch(branch).then((result) => {
+      if (result.ok) {
+        onSwitched()
+        // Two honest outcomes: the conversation now runs in the branch's
+        // worktree, or the worktree was prepared and the user picks it in the
+        // workspace selector. Saying "switched" in the second case would be a
+        // lie the user would act on, in the wrong directory.
+        setSuccess(result.opened
+          ? t('toast.switchSuccess', { branchName: result.branch })
+          : t('toast.worktreeReady', { branchName: result.branch }))
+        // The prepared-worktree notice explains where to go next, so it stays
+        // long enough to read instead of flashing for the switch animation.
+        dismissTimer.current = setTimeout(onClose, result.opened ? SUCCESS_DISMISS_MS : WORKTREE_READY_DISMISS_MS)
+        return
+      }
+      setError(errorMessage(result.error, t))
+    }).finally(() => { setPending(null) })
+  }
+
+  return (
+    <>
+      <Backdrop onClose={onClose} />
+      <div className={cx(css.popover, hero && css.popoverHero)} role="listbox" aria-label={t('branch.search')} data-gitgraph-popover data-dsh-plugin="git-graph">
+        <div className={css.searchBox}>
+          <IconSearchOutline16 size={14} />
+          <input
+            className={css.searchInput}
+            value={query}
+            onChange={(event) => { setQuery(event.target.value) }}
+            placeholder={t('branch.search')}
+            autoFocus
+          />
+        </div>
+        {view.dirtyFiles > 0
+          && <div className={css.dirty}>{t('branch.dirty', { count: view.dirtyFiles })}</div>}
+        <div
+          className={css.list}
+          onMouseLeave={() => {
+            // Leaving the whole list resets the instant-handoff state, so
+            // moving between items keeps the bubble immediate while leaving
+            // the popover re-arms the dwell threshold.
+            if (tipTimer.current !== undefined) {
+              clearTimeout(tipTimer.current)
+              tipTimer.current = undefined
+            }
+            setTipActive(false)
+            setTipReadyName(null)
+          }}
+        >
+          {filtered.length === 0
+            ? <div className={css.empty}>{t('branch.empty')}</div>
+            : filtered.map(branch => (
+              <button
+                type="button"
+                key={branch.name}
+                className={cx(css.item, branch.current && css.itemActive)}
+                onClick={() => { switchTo(branch.name) }}
+                role="option"
+                aria-selected={branch.current}
+                title={branch.current ? t('branch.currentHint') : branch.name}
+                data-tip={branch.name.length > 18 ? branch.name : ''}
+                data-tip-ready={branch.name === tipReadyName ? 'true' : ''}
+                aria-label={branch.name}
+                data-tip-dir={tipDir}
+                onMouseEnter={(event) => {
+                  if (tipTimer.current !== undefined) clearTimeout(tipTimer.current)
+                  // Viewport-aware flip: near the top of the scroll list the
+                  // bubble would be clipped above — flip it below instead.
+                  const list = event.currentTarget.parentElement
+                  if (list !== null) {
+                    const itemTop = event.currentTarget.getBoundingClientRect().top
+                    const listTop = list.getBoundingClientRect().top
+                    setTipDir(itemTop - listTop < 56 ? 'down' : 'up')
+                  }
+                  if (tipActive) {
+                    setTipReadyName(branch.name)
+                  } else {
+                    tipTimer.current = setTimeout(() => {
+                      setTipActive(true)
+                      setTipReadyName(branch.name)
+                    }, 500)
+                  }
+                }}
+                // A branch already checked out in the main worktree cannot
+                // have a lane of its own (git refuses two checkouts of one
+                // branch), so the row that would only ever fail is disabled
+                // with the reason instead of surfacing git's English fatal.
+                disabled={pending !== null || branch.current}
+              >
+                <IconBranchOutline16 size={14} />
+                <span className={css.itemText}>
+                  <span className={css.itemName} title={branch.name}>{branch.name}</span>
+                </span>
+                {branch.current && <IconCheckOutline14 className={css.check} size={14} />}
+              </button>
+            ))}
+        </div>
+        {success !== null && <div className={cx(css.notice, css.noticeOk)}>{success}</div>}
+        {error !== null && <div className={css.notice}>{error}</div>}
+        <div className={css.footer}>
+          <button type="button" className={css.footerItem} onClick={onCreate}>
+            <IconBranchOutline16 size={14} />
+            {t('branch.create')}
+          </button>
+          <button type="button" className={css.footerItem} onClick={onGraph}>
+            <IconBranchOutline16 size={14} />
+            {t('branch.graph')}
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/client/conversation/git-graph/chip.tsx

@@ -0,0 +1,47 @@
+/**
+ * The shared chip button: one pill in the context row above the input.
+ * @module dsh-git-graph/client/chips/Chip
+ */
+
+import type { ReactNode } from 'react'
+import { IconChevronDownOutline14 } from '../../ui-icons.ts'
+import css from './git-graph.module.css'
+
+/** Join conditional class names (the dependency-free clsx stand-in). */
+export function cx(...parts: ReadonlyArray<string | false | null | undefined>): string {
+  return parts.filter((part): part is string => typeof part === 'string' && part !== '').join(' ')
+}
+
+/** Props of one context chip. */
+export interface ChipProps {
+  icon: ReactNode
+  label: string
+  ariaLabel: string
+  open: boolean
+  onClick: () => void
+  /** The official hero-row seat style (transparent 28px pill beside the preset chip). */
+  hero?: boolean
+}
+
+/** The pill button shared by the project and branch chips. */
+export function Chip({ icon, label, ariaLabel, open, onClick, hero = false }: ChipProps) {
+  return (
+    <button
+      type="button"
+      data-gitgraph-chip
+      className={cx(css.chip, open && css.chipOpen, hero && css.chipHero)}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      aria-expanded={open}
+    >
+      {icon}
+      <span className={css.chipLabel} title={label}>{label}</span>
+      <IconChevronDownOutline14 className={css.chipChevron} size={12} />
+    </button>
+  )
+}
+
+/** Full-screen transparent backdrop closing the open popover/dialog on click. */
+export function Backdrop({ onClose }: { onClose: () => void }) {
+  return <div className={css.backdrop} onClick={onClose} />
+}