zidane-ui 9.0.4 → 9.1.3

package/src/git/BranchMenu.tsx

@@ -1,981 +0,0 @@
-/**
- * The git switcher: pull requests and branches, to jump between them.
- *
- *   WAITING ON YOU 2                          (your review is requested)
- *     #131  Terminal tab reorder                         +210 −40
- *           [⎇ feat/terminal-tabs] [alex] [1d] [✕ failing] [changes]
- *   YOURS 1
- *   OTHER PULL REQUESTS                       (the most recent)
- *   BRANCHES                                  (local, most recent first)
- *     fix/drawer-jump                                    +38 −12
- *           [↑2 ↓5] [3h]
- *
- * Each row's facts are small chips with a mini icon, not a run of dotted
- * text; in a narrow menu the least useful chips step aside first, and the
- * menu itself never outgrows the window.
- *
- * The pull requests that need you come first. Each section shows a few rows
- * until you search or ask for more, so a repository with hundreds of open
- * pull requests stays a short list; typing searches every open one (the
- * loaded ones filter at once while the search runs) and branches by name. A
- * branch with an open pull request is listed once, under it. Arrow keys walk
- * every row across sections, Enter picks. Picking a branch (or a pull request
- * whose branch is here) switches to it; one from elsewhere is checked out by
- * number. Row actions: open the pull request, copy the branch name. A branch
- * another worktree holds says where, and offers that worktree's chat when
- * there is one (`resolveChat`). A typed name that is no branch here (nor any
- * pull request's) can be started: as a branch of this checkout, or (`worktree`
- * offered) as a new worktree.
- *
- * Lists are cached per folder (`switcherCacheOf`), so a reopened menu is
- * instant while it refreshes. A host that cannot reach pull requests gets a
- * note in their place.
- *
- * Footer: "Start a worktree…" moves this (local, idle) session into a new git
- * worktree, keeping the conversation. The branch field starts on the
- * suggested name; uncommitted changes stay in this checkout. Shown only while
- * `worktree` is offered and the host can start one.
- *
- * Reads `GitHost.branches` and `checkout` (without both it renders nothing),
- * `pullRequests`, `createBranch`, `startWorktree` and `subscribeRefs` when
- * present.
- */
-import {
-  memo,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactNode,
-  type RefObject,
-} from 'react';
-
-import { relativeTime } from '../chat/headless/session-list';
-import { CopyButton } from '../components/CopyButton';
-import { FloatingSurface } from '../components/floating/FloatingSurface';
-import { IconButton } from '../components/IconButton';
-import { MenuNote } from '../components/Menu';
-import { Tooltip } from '../components/Tooltip';
-import { useGitHost, useGitLabels } from './GitProvider';
-import { environmentKindIcon } from './headless/environment';
-import type { GitBranch, GitCheckoutTarget, GitPullRequest } from './headless/host';
-import { gitErrorText, type GitLabels } from './headless/labels';
-import {
-  ageIsDuration,
-  clockTime,
-  compactCount,
-  readPullRequests,
-  switcherCacheOf,
-  switcherCreates,
-  switcherKey,
-  switcherSections,
-  type SwitcherEntry,
-  type SwitcherSectionId,
-} from './headless/switcher';
-
-/** Typing settles this long before the host is asked to search. */
-const SEARCH_MS = 250;
-
-/** The worktree a session can be moved into: the Worktree environment kind, as its host offers it. */
-export interface BranchMenuWorktree {
-  /** It can be started now. */
-  available: boolean;
-  /** Why it cannot, when it cannot. */
-  reason?: string;
-  /** The branch name a new worktree takes when none is typed. */
-  suggestedBranch?: string;
-}
-
-/** Props for {@link BranchMenu}. */
-export interface BranchMenuProps {
-  /** Whether the menu is shown. */
-  open: boolean;
-  /** The control the menu opens from. */
-  anchorRef: RefObject<HTMLElement | null>;
-  /** The checkout. */
-  cwd: string;
-  /** The session the checkout belongs to (the host refuses a switch while its agent runs). */
-  sessionId: string | null;
-  /** The current branch, `null` when HEAD is detached. */
-  current: string | null;
-  /** Closes the menu (an outside press, Esc, a pick of the current row). */
-  onClose: () => void;
-  /** A switch, a new branch or a worktree move went through. */
-  onSwitched: () => void;
-  /** The worktree this session can move into. Absent: no "Start a worktree". */
-  worktree?: BranchMenuWorktree;
-  /** The chat to offer among the chats of a worktree that holds a picked branch. Absent: none offered. */
-  resolveChat?: (chats: readonly string[]) => string | undefined;
-  /** Opens a chat offered by `resolveChat`. */
-  onOpenChat?: (chatId: string) => void;
-  /** Extra classes on the menu surface. */
-  className?: string;
-  /** Inline styles on the menu surface. */
-  style?: CSSProperties;
-}
-
-const SECTION_LABEL: Record<SwitcherSectionId, keyof GitLabels> = {
-  review: 'gitSectionReview',
-  mine: 'gitSectionMine',
-  other: 'gitSectionOther',
-  branches: 'gitSectionBranches',
-};
-
-/* eslint-disable react-hooks/refs, react-hooks/set-state-in-effect, react-hooks/immutability, react-hooks/purity --
-   the desktop app's switcher as it was: latest-value refs behind the shared row handlers, a reset on each
-   opening, an Enter queued until the branches arrive, and a clock rounded to the minute for the row memo. */
-/**
- * Renders the branch and pull request switcher, anchored to `anchorRef`. See the module doc.
- *
- * @param props - Component props.
- */
-export function BranchMenu({
-  open,
-  anchorRef,
-  cwd,
-  sessionId,
-  current,
-  onClose,
-  onSwitched,
-  worktree,
-  resolveChat,
-  onOpenChat,
-  className,
-  style,
-}: BranchMenuProps) {
-  const host = useGitHost();
-  const labels = useGitLabels();
-  const [branches, setBranches] = useState<readonly GitBranch[] | null>(null);
-  /** undefined while the first answer is on its way; null when the host cannot reach pull requests. */
-  const [prs, setPrs] = useState<readonly GitPullRequest[] | null | undefined>(undefined);
-  /** The host's answer for a query (every open pull request, not just the loaded ones). */
-  const [search, setSearch] = useState<{ q: string; list: readonly GitPullRequest[] | null } | null>(null);
-  /** GitHub rate-limited the list: when it resumes. */
-  const [rateLimitedUntil, setRateLimitedUntil] = useState<number | null>(null);
-  const [query, setQuery] = useState('');
-  const [expanded, setExpanded] = useState<ReadonlySet<SwitcherSectionId>>(new Set());
-  const [active, setActive] = useState(0);
-  const [error, setError] = useState<string | null>(null);
-  // The branch picked is checked out in another worktree that has a chat: offered, not jumped to.
-  const [elsewhere, setElsewhere] = useState<{ branch: string; worktree: string; chat: string } | null>(null);
-  const [busy, setBusy] = useState<string | null>(null);
-  // Enter pressed before the branches arrived: picked once they do.
-  const [pendingEnter, setPendingEnter] = useState(false);
-  const surfaceRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  // Only the keyboard scrolls the list to the highlight: hovering (or opening) never moves it.
-  const scrollToActive = useRef(false);
-  // "Start a worktree…": the branch typed, `null` while the field is closed.
-  const [worktreeBranch, setWorktreeBranch] = useState<string | null>(null);
-  const worktreeOpen = useRef(false);
-  worktreeOpen.current = worktreeBranch !== null;
-  const worktreeInputRef = useRef<HTMLInputElement>(null);
-
-  const offered = host?.branches && host.checkout ? host : null;
-  const offerWorktree = worktree && sessionId && host?.startWorktree ? worktree : undefined;
-
-  // Reopened during its exit, the surface keeps the list's element and its scroll: opening starts at the top.
-  useLayoutEffect(() => {
-    if (open && listRef.current) listRef.current.scrollTop = 0;
-  }, [open]);
-
-  // The bar re-renders on every refresh; only opening resets the menu.
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  useEffect(() => {
-    if (!open || !offered) return undefined;
-    const cache = switcherCacheOf(offered);
-    setQuery('');
-    setSearch(null);
-    setExpanded(new Set());
-    setActive(0);
-    setError(null);
-    setElsewhere(null);
-    setPendingEnter(false);
-    setWorktreeBranch(null);
-    setBranches(cache.branches(cwd) ?? null);
-    setPrs(offered.pullRequests ? (cache.hasPullRequests(cwd) ? cache.pullRequests(cwd) : undefined) : []);
-    let live = true;
-    const load = (fresh: boolean) => {
-      void offered.branches!(cwd)
-        .then((list) => {
-          cache.setBranches(cwd, list);
-          if (live) setBranches(list);
-        })
-        // Not a repository any more, git gone: an empty list rather than a spinner forever.
-        .catch(() => {
-          if (live) setBranches((current) => current ?? []);
-        });
-      if (!offered.pullRequests) return;
-      void offered
-        .pullRequests({ cwd, fresh })
-        .catch(() => ({ kind: 'unavailable' }) as const)
-        .then((result) => {
-          const { list, retryAt } = readPullRequests(result);
-          cache.setPullRequests(cwd, list);
-          if (live) {
-            setPrs(list);
-            setRateLimitedUntil(retryAt);
-          }
-        });
-    };
-    load(false);
-    // Open while the repository moves (a fetch, a push, a new branch): the lists follow.
-    const offRefs = offered.subscribeRefs?.(cwd, () => load(true));
-    requestAnimationFrame(() => inputRef.current?.focus());
-    const onPointer = (e: PointerEvent) => {
-      const t = e.target as Node | null;
-      if (t && !anchorRef.current?.contains(t) && !surfaceRef.current?.contains(t)) onCloseRef.current();
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
-      e.preventDefault();
-      e.stopPropagation();
-      // Esc in the worktree field steps back to the list; the next one closes.
-      if (worktreeOpen.current) {
-        setWorktreeBranch(null);
-        inputRef.current?.focus();
-        return;
-      }
-      onCloseRef.current();
-    };
-    document.addEventListener('pointerdown', onPointer, true);
-    document.addEventListener('keydown', onKey, true);
-    return () => {
-      live = false;
-      offRefs?.();
-      document.removeEventListener('pointerdown', onPointer, true);
-      document.removeEventListener('keydown', onKey, true);
-    };
-  }, [open, cwd, anchorRef, offered]);
-
-  const q = query.trim().toLowerCase();
-  const noPrs = prs === null || !offered?.pullRequests;
-  // Search every open pull request once typing settles (not when they can't be reached). Keyed on
-  // "can they be reached", not the list: the loaded list refreshing mustn't re-send the same search.
-  useEffect(() => {
-    if (!open || !q || noPrs || !offered?.pullRequests) return undefined;
-    let live = true;
-    const t = setTimeout(() => {
-      void offered.pullRequests!({ cwd, search: q })
-        .catch(() => ({ kind: 'unavailable' }) as const)
-        .then((result) => {
-          const { list, retryAt } = readPullRequests(result);
-          if (!live) return;
-          // A rate-limited search falls back to the loaded list, and says why.
-          setSearch({ q, list: retryAt === null ? list : null });
-          if (retryAt !== null) setRateLimitedUntil(retryAt);
-        });
-    }, SEARCH_MS);
-    return () => {
-      live = false;
-      clearTimeout(t);
-    };
-  }, [open, cwd, q, noPrs, offered]);
-  const searched = search !== null && search.q === q && search.list !== null;
-  // An answer for this query is on its way (a failed search falls back to the loaded list, quietly).
-  const searching = q !== '' && !noPrs && prs !== undefined && search?.q !== q;
-
-  // Sections in order, each capped unless searching or expanded; the keyboard walks what's shown.
-  const sections = useMemo(
-    () => switcherSections({ prs, branches, searched: searched ? search!.list : null, query: q, expanded }),
-    [prs, branches, search, searched, q, expanded],
-  );
-  // A typed name no branch here or pull request carries: offered to start, after the matches.
-  const typed = query.trim();
-  const canCreateBranch = Boolean(offered?.createBranch);
-  const canStartWorktree = offerWorktree?.available === true;
-  const creates = useMemo(
-    () => switcherCreates({ typed, current, branches, prs, searched: search?.list, canCreateBranch, canStartWorktree }),
-    [typed, branches, prs, search, current, canCreateBranch, canStartWorktree],
-  );
-  const entries = useMemo(() => [...sections.flatMap((sec) => sec.shown), ...creates], [sections, creates]);
-  const activeIndex = Math.min(active, Math.max(0, entries.length - 1));
-
-  useEffect(() => {
-    if (!scrollToActive.current) return;
-    scrollToActive.current = false;
-    listRef.current?.querySelector('[data-active]')?.scrollIntoView({ block: 'nearest' });
-  }, [activeIndex, entries]);
-
-  useEffect(() => {
-    if (!pendingEnter || branches === null) return;
-    setPendingEnter(false);
-    if (entries[activeIndex]) void pick(entries[activeIndex]);
-    // `pick` is recreated per render; the flag and the list are what matter.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pendingEnter, branches, entries]);
-
-  const isCurrent = (e: SwitcherEntry) =>
-    current !== null &&
-    e.kind !== 'create' &&
-    (e.kind === 'branch' ? e.row.name === current : !e.pr.fork && e.pr.branch === current);
-
-  const pick = async (entry: SwitcherEntry) => {
-    if (busy || !offered) return onClose();
-    if (entry.kind === 'create')
-      return entry.worktree ? startWorktree(entry.name, switcherKey(entry)) : createBranch(entry.name);
-    if (isCurrent(entry)) return onClose();
-    const target: GitCheckoutTarget =
-      entry.kind === 'branch'
-        ? { branch: entry.row.name }
-        : entry.pr.local
-          ? { branch: entry.pr.branch }
-          : { pullRequest: entry.pr.number };
-    setBusy(switcherKey(entry));
-    setError(null);
-    setElsewhere(null);
-    const result = await offered.checkout!(cwd, target, sessionId);
-    setBusy(null);
-    if (result.ok) return onSwitched();
-    const chat = result.worktree ? resolveChat?.(result.worktree.chats) : undefined;
-    if (!chat || !result.worktree) return setError(gitErrorText(result.error, labels));
-    setElsewhere({
-      branch: entry.kind === 'branch' ? entry.row.name : entry.pr.branch,
-      worktree: result.worktree.path,
-      chat,
-    });
-  };
-
-  const createBranch = async (name: string) => {
-    if (!offered?.createBranch) return;
-    setBusy(switcherKey({ kind: 'create', name, worktree: false }));
-    setError(null);
-    setElsewhere(null);
-    const result = await offered.createBranch(cwd, name, sessionId);
-    setBusy(null);
-    if (result.ok) onSwitched();
-    else setError(gitErrorText(result.error, labels));
-  };
-
-  const startWorktree = async (typedBranch?: string, busyKey = 'worktree') => {
-    if (!sessionId || !offerWorktree || !host?.startWorktree || busy) return;
-    const branch = typedBranch ?? (worktreeBranch?.trim() || offerWorktree.suggestedBranch);
-    setBusy(busyKey);
-    setElsewhere(null);
-    setError(null);
-    try {
-      const result = await host.startWorktree(sessionId, branch || undefined);
-      if (result.ok) onSwitched();
-      else setError(gitErrorText(result.error, labels));
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  // Shared by every row (by index), so hovering re-renders only the two rows whose highlight moved.
-  const pickRef = useRef(pick);
-  pickRef.current = pick;
-  const entriesRef = useRef(entries);
-  entriesRef.current = entries;
-  const rowHandlers = useMemo(
-    () => ({
-      hover: (i: number) => setActive((prev) => (prev === i ? prev : i)),
-      pick: (i: number) => {
-        const entry = entriesRef.current[i];
-        if (entry) void pickRef.current(entry);
-      },
-    }),
-    [],
-  );
-
-  // Fits a small window: never wider than it, never taller than about half of it.
-  const [viewport, setViewport] = useState(() => (typeof window === 'undefined' ? 1024 : window.innerWidth));
-  useEffect(() => {
-    if (!open) return undefined;
-    const onResize = () => setViewport(window.innerWidth);
-    onResize();
-    window.addEventListener('resize', onResize);
-    return () => window.removeEventListener('resize', onResize);
-  }, [open]);
-  const width = Math.max(260, Math.min(400, viewport - 16));
-
-  if (!offered) return null;
-
-  // To the minute: row ages don't move faster, and a fresh `now` per render would defeat the row memo.
-  const now = Math.floor(Date.now() / 60_000) * 60_000;
-  let index = 0;
-
-  return (
-    <FloatingSurface
-      ref={surfaceRef}
-      open={open}
-      anchor={{ element: anchorRef.current }}
-      side="top"
-      align="start"
-      offset={6}
-      width={width}
-      aria-label={labels.gitMenuLabel}
-      data-testid="git-branch-menu"
-      {...(className ? { className } : {})}
-      {...(style ? { style } : {})}
-    >
-      <div className="p-1 pb-0">
-        <input
-          ref={inputRef}
-          value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setActive(0);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-              e.preventDefault();
-              const step = e.key === 'ArrowDown' ? 1 : -1;
-              scrollToActive.current = true;
-              setActive(Math.max(0, Math.min(entries.length - 1, activeIndex + step)));
-              return;
-            }
-            if (e.key !== 'Enter') return;
-            e.preventDefault();
-            if (branches === null) setPendingEnter(true);
-            else if (entries[activeIndex]) void pick(entries[activeIndex]);
-          }}
-          placeholder={labels.gitSearchPlaceholder}
-          aria-label={labels.gitSearchLabel}
-          aria-activedescendant={entries[activeIndex] ? `git-switch-${activeIndex}` : undefined}
-          className="zg-well w-full h-7 px-2.5 text-zg-label placeholder:text-[var(--zg-text-subtle)]"
-        />
-      </div>
-      {error && (
-        <MenuNote icon="i-ph-warning" className="text-[var(--zg-danger)]">
-          {error}
-        </MenuNote>
-      )}
-      {elsewhere && (
-        <MenuNote icon={environmentKindIcon('worktree')}>
-          <span className="flex items-center gap-2 min-w-0">
-            <span className="truncate" title={elsewhere.worktree}>
-              {labels.gitCheckedOutElsewhere(elsewhere.branch, elsewhere.worktree)}
-            </span>
-            {onOpenChat && (
-              <button
-                type="button"
-                data-testid="git-open-worktree-chat"
-                className="shrink-0 text-[var(--zg-accent)] hover:underline"
-                onClick={() => {
-                  onClose();
-                  onOpenChat(elsewhere.chat);
-                }}
-              >
-                {labels.gitOpenWorktreeChat}
-              </button>
-            )}
-          </span>
-        </MenuNote>
-      )}
-      <div
-        ref={listRef}
-        role="menu"
-        aria-label={labels.gitListLabel}
-        className="flex flex-col px-1 pb-1 max-h-[min(400px,55vh)] overflow-y-auto"
-      >
-        {prs === undefined && !q && (
-          <Section label={labels.gitSectionPullRequests} first>
-            <PrPlaceholder />
-            <PrPlaceholder />
-          </Section>
-        )}
-        {sections.map((sec, si) => (
-          <Section
-            key={sec.id}
-            label={labels[SECTION_LABEL[sec.id]] as string}
-            count={sec.id === 'other' && !q ? undefined : sec.all.length}
-            attention={sec.id === 'review'}
-            first={si === 0 && prs !== undefined}
-          >
-            {sec.shown.map((entry) => {
-              const i = index++;
-              const common = {
-                id: `git-switch-${i}`,
-                index: i,
-                active: i === activeIndex,
-                current: isCurrent(entry),
-                busy: busy === switcherKey(entry),
-                disabled: busy !== null,
-                labels,
-                onHover: rowHandlers.hover,
-                onPick: rowHandlers.pick,
-              };
-              return entry.kind === 'pr' ? (
-                <PrRow key={switcherKey(entry)} pr={entry.pr} now={now} {...common} />
-              ) : entry.kind === 'branch' ? (
-                <BranchRow key={switcherKey(entry)} row={entry.row} now={now} {...common} />
-              ) : null;
-            })}
-            {sec.hidden > 0 && (
-              <button
-                type="button"
-                data-testid={`git-more-${sec.id}`}
-                className="zg-menu-row zg-press-subtle text-zg-meta text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]"
-                data-size="sm"
-                onClick={() => setExpanded((prev) => new Set(prev).add(sec.id))}
-              >
-                <span aria-hidden className="i-ph-caret-down text-zg-meta w-4 shrink-0" />
-                {labels.gitMore(sec.hidden)}
-                {sec.id === 'other' && (
-                  <span className="ml-auto inline-flex items-center gap-1 text-[var(--zg-text-subtle)]">
-                    <span aria-hidden className="i-ph-magnifying-glass text-zg-meta" />
-                    {labels.gitMoreSearchHint}
-                  </span>
-                )}
-              </button>
-            )}
-          </Section>
-        ))}
-        {creates.length > 0 && (
-          <div className={sections.length > 0 ? 'mt-1 pt-1 border-t border-[var(--zg-hairline)]' : ''}>
-            {creates.map((entry) => {
-              if (entry.kind !== 'create') return null;
-              const i = index++;
-              return (
-                <CreateRow
-                  key={switcherKey(entry)}
-                  id={`git-switch-${i}`}
-                  index={i}
-                  active={i === activeIndex}
-                  current={false}
-                  busy={busy === switcherKey(entry)}
-                  disabled={busy !== null}
-                  now={now}
-                  labels={labels}
-                  onHover={rowHandlers.hover}
-                  onPick={rowHandlers.pick}
-                  name={entry.name}
-                  worktree={entry.worktree}
-                />
-              );
-            })}
-          </div>
-        )}
-        {searching && <MenuNote icon="i-ph-magnifying-glass">{labels.gitSearching}</MenuNote>}
-        {prs === null && !q && <MenuNote icon="i-ph-git-pull-request">{labels.gitNoGh}</MenuNote>}
-        {rateLimitedUntil !== null && rateLimitedUntil > Date.now() && (
-          <MenuNote icon="i-ph-warning-circle">{labels.gitRateLimited(clockTime(rateLimitedUntil))}</MenuNote>
-        )}
-        {branches === null ? (
-          <MenuNote>{labels.gitLoadingBranches}</MenuNote>
-        ) : (
-          entries.length === 0 && !searching && <MenuNote>{labels.gitNoMatches}</MenuNote>
-        )}
-      </div>
-      {offerWorktree && (
-        <div className="px-1 pb-1 border-t border-[var(--zg-hairline)]" data-testid="git-worktree-footer">
-          {worktreeBranch === null ? (
-            <button
-              type="button"
-              data-testid="git-start-worktree"
-              className="zg-menu-row zg-press-subtle w-full mt-1 text-zg-label disabled:opacity-zg-disabled"
-              data-size="sm"
-              disabled={!offerWorktree.available || busy !== null}
-              title={offerWorktree.available ? undefined : offerWorktree.reason}
-              onClick={() => {
-                setWorktreeBranch(offerWorktree.suggestedBranch ?? '');
-                requestAnimationFrame(() => worktreeInputRef.current?.select());
-              }}
-            >
-              <span aria-hidden className={`${environmentKindIcon('worktree')} text-zg-ui w-4 shrink-0`} />
-              {labels.gitStartWorktree}
-              <span className="ml-auto text-zg-meta text-[var(--zg-text-subtle)]">{labels.gitMovesThisChat}</span>
-            </button>
-          ) : (
-            <form
-              className="flex items-center gap-1.5 mt-1"
-              onSubmit={(e) => {
-                e.preventDefault();
-                void startWorktree();
-              }}
-            >
-              <span
-                aria-hidden
-                className={`${environmentKindIcon('worktree')} text-zg-ui w-4 shrink-0 ml-2 text-[var(--zg-text-muted)]`}
-              />
-              <input
-                ref={worktreeInputRef}
-                value={worktreeBranch}
-                onChange={(e) => setWorktreeBranch(e.target.value)}
-                placeholder={offerWorktree.suggestedBranch ?? labels.gitWorktreeBranchPlaceholder}
-                aria-label={labels.gitWorktreeBranchLabel}
-                data-testid="git-worktree-branch"
-                disabled={busy !== null}
-                className="zg-well zg-meta flex-1 min-w-0 h-7 px-2.5 text-zg-label placeholder:text-[var(--zg-text-subtle)]"
-              />
-              {busy === 'worktree' ? (
-                <span className="zg-arc shrink-0 mr-2" aria-label={labels.gitStartingWorktree} />
-              ) : (
-                <IconButton size="xs" icon="i-ph-arrow-right" label={labels.gitStartTheWorktree} type="submit" />
-              )}
-            </form>
-          )}
-        </div>
-      )}
-    </FloatingSurface>
-  );
-}
-/* eslint-enable react-hooks/refs, react-hooks/set-state-in-effect, react-hooks/immutability, react-hooks/purity */
-
-/**
- * A section of the switcher: its label stays pinned while its rows scroll
- * under it; a hairline sets it apart from the one above.
- */
-function Section({
-  label,
-  count,
-  attention = false,
-  first = false,
-  children,
-}: {
-  label: string;
-  count?: number;
-  attention?: boolean;
-  first?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <div role="group" aria-label={label} className={first ? '' : 'mt-1 border-t border-[var(--zg-hairline)]'}>
-      <div className="sticky top-0 z-[1] flex items-center gap-2 px-2 pt-2 pb-1 bg-[var(--zg-overlay)]">
-        <span className="zg-section-label">{label}</span>
-        {count !== undefined && (
-          <span
-            data-testid="git-section-count"
-            className={`zg-meta text-zg-badge ${attention ? 'text-[var(--zg-accent)]' : 'text-[var(--zg-text-subtle)]'}`}
-          >
-            {count}
-          </span>
-        )}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-interface RowProps {
-  id: string;
-  /** Position in the keyboard order: the handlers are shared by every row, so rows stay memoised. */
-  index: number;
-  active: boolean;
-  current: boolean;
-  busy: boolean;
-  disabled: boolean;
-  now: number;
-  labels: GitLabels;
-  onHover: (index: number) => void;
-  onPick: (index: number) => void;
-}
-
-/** A switcher row: the menu row's look, as a div so it can hold its own action buttons. */
-function Row({
-  id,
-  index,
-  active,
-  current,
-  busy,
-  disabled,
-  labels,
-  onHover,
-  onPick,
-  label,
-  icon,
-  title,
-  meta,
-  size,
-  actions,
-  testId,
-}: Omit<RowProps, 'now'> & {
-  label: string;
-  icon: ReactNode;
-  title: ReactNode;
-  meta: ReactNode;
-  size: ReactNode;
-  actions: ReactNode;
-  testId: string;
-}) {
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus -- the search field keeps focus and drives the rows (arrows, Enter, aria-activedescendant)
-    <div
-      id={id}
-      role="menuitemradio"
-      aria-checked={current}
-      aria-disabled={disabled || undefined}
-      aria-label={label}
-      data-testid={testId}
-      data-size="lg"
-      data-active={active ? '' : undefined}
-      className="zg-git-row zg-menu-row group cursor-pointer"
-      // A pointer that moved, not rows scrolling under a resting one (that would steal the keyboard's highlight).
-      onPointerMove={() => onHover(index)}
-      onClick={() => {
-        if (!disabled) onPick(index);
-      }}
-    >
-      <span className="shrink-0 inline-flex items-center justify-center w-4 mt-0.5">{icon}</span>
-      <span className="zg-git-row-body flex-1 min-w-0 flex flex-col gap-1">
-        <span className="flex items-baseline gap-2 min-w-0">
-          {title}
-          <span className="zg-git-row-size ml-auto shrink-0 pl-2 zg-meta text-zg-meta inline-flex items-center gap-1.5 self-center">
-            {size}
-            {busy ? (
-              <span className="zg-arc shrink-0" aria-label={labels.gitRowSwitching} />
-            ) : (
-              current && (
-                <span className="i-ph-check text-zg-ui text-[var(--zg-accent)]" aria-label={labels.gitRowCurrent} />
-              )
-            )}
-          </span>
-        </span>
-        {/* The facts, as chips on one line; the actions float over its end when shown (the chips fade under them). */}
-        <span className="relative flex min-w-0">
-          {/* Wraps onto a hidden second line: a chip that doesn't fit drops out whole, never half cut. */}
-          <span className="zg-git-row-meta flex-1 flex flex-wrap items-center gap-1 min-w-0 h-[18px] overflow-hidden">
-            {meta}
-          </span>
-          {/* Clicks on the actions stay theirs: they never pick the row. */}
-          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-          <span
-            className="zg-git-row-actions absolute inset-y-0 right-0 inline-flex items-center gap-0.5"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {actions}
-          </span>
-        </span>
-      </span>
-    </div>
-  );
-}
-
-type ChipTone = 'success' | 'danger' | 'warn' | 'accent';
-
-/**
- * One fact about a row: a mini icon and a word or two, set into the menu like
- * a track. `kind` lets the narrow layouts drop the least useful chips first
- * (`styles/git.css`, `.zg-git-chip`); `tone` colours only what carries a verdict.
- */
-function Chip({
-  kind,
-  icon,
-  tone,
-  mono = false,
-  label,
-  children,
-}: {
-  kind: string;
-  icon: string;
-  tone?: ChipTone;
-  mono?: boolean;
-  label?: string;
-  children: ReactNode;
-}) {
-  return (
-    <span className="zg-git-chip" data-chip={kind} data-tone={tone} aria-label={label}>
-      <span aria-hidden className={`${icon} zg-git-chip-icon`} />
-      <span className={`truncate ${mono ? 'zg-meta text-inherit' : ''}`}>{children}</span>
-    </span>
-  );
-}
-
-const CHECKS: Record<NonNullable<GitPullRequest['checks']>, { icon: string; tone: ChipTone }> = {
-  pass: { icon: 'i-ph-check-circle', tone: 'success' },
-  fail: { icon: 'i-ph-x-circle', tone: 'danger' },
-  pending: { icon: 'i-ph-circle-dashed', tone: 'warn' },
-};
-
-function Diff({ added, removed }: { added: number; removed: number }) {
-  return (
-    <>
-      <span className={added > 0 ? 'text-zg-success' : 'text-[var(--zg-text-subtle)]'}>+{compactCount(added)}</span>
-      <span className={removed > 0 ? 'text-zg-danger' : 'text-[var(--zg-text-subtle)]'}>−{compactCount(removed)}</span>
-    </>
-  );
-}
-
-const PrRow = memo(function PrRow({ pr, now, ...row }: RowProps & { pr: GitPullRequest }) {
-  const { labels } = row;
-  // In order of importance: a row too narrow for them all drops chips from the end.
-  const meta = (
-    <>
-      <Chip kind="branch" icon="i-ph-git-branch" mono label={labels.gitBranchChipLabel(pr.branch)}>
-        {pr.branch}
-      </Chip>
-      {pr.checks && (
-        <Chip
-          kind="checks"
-          icon={CHECKS[pr.checks].icon}
-          tone={CHECKS[pr.checks].tone}
-          label={labels.gitChecksLabel(pr.checks)}
-        >
-          {labels.gitChecksText(pr.checks)}
-        </Chip>
-      )}
-      {pr.review === 'approved' && (
-        <Chip kind="review" icon="i-ph-seal-check" tone="success">
-          {labels.gitApproved}
-        </Chip>
-      )}
-      {pr.review === 'changes' && (
-        <Chip kind="review" icon="i-ph-arrow-u-up-left" tone="danger">
-          {labels.gitChangesRequested}
-        </Chip>
-      )}
-      {pr.group !== 'mine' && pr.author && (
-        <Chip kind="author" icon="i-ph-user" label={labels.gitAuthorLabel(pr.author)}>
-          {pr.author}
-        </Chip>
-      )}
-      <Chip
-        kind="age"
-        icon="i-ph-clock"
-        label={labels.gitUpdatedAge(relativeTime(pr.updatedAt, now), ageIsDuration(pr.updatedAt, now))}
-      >
-        {relativeTime(pr.updatedAt, now)}
-      </Chip>
-      {pr.draft && (
-        <Chip kind="draft" icon="i-ph-pencil-simple-line">
-          {labels.gitDraft}
-        </Chip>
-      )}
-      {pr.fork && (
-        <Chip kind="fork" icon="i-ph-git-fork">
-          {labels.gitFork}
-        </Chip>
-      )}
-      {pr.local && (
-        <Chip kind="local" icon="i-ph-laptop" label={labels.gitLocalLabel}>
-          {labels.gitLocal}
-        </Chip>
-      )}
-    </>
-  );
-
-  return (
-    <Row
-      {...row}
-      testId="git-pr-row"
-      label={`#${pr.number} ${pr.title}`}
-      icon={
-        <span
-          aria-hidden
-          className={`i-ph-git-pull-request text-zg-ui ${pr.draft ? 'text-[var(--zg-text-subtle)]' : 'text-zg-success'}`}
-        />
-      }
-      title={
-        <>
-          <span className="zg-meta text-[var(--zg-text-muted)] shrink-0">#{pr.number}</span>
-          <span className="truncate font-medium">{pr.title}</span>
-        </>
-      }
-      meta={meta}
-      size={<Diff added={pr.additions} removed={pr.deletions} />}
-      actions={
-        <>
-          <Tooltip label={labels.gitOpenOnGitHub} portal side="top">
-            <IconButton
-              size="xs"
-              icon="i-ph-arrow-square-out"
-              label={labels.gitOpenPullRequest(pr.number)}
-              title=""
-              onClick={() => window.open(pr.url, '_blank')}
-            />
-          </Tooltip>
-          <CopyButton text={pr.branch} label={labels.gitCopyBranch} />
-        </>
-      }
-    />
-  );
-});
-
-const BranchRow = memo(function BranchRow({ row: b, now, ...row }: RowProps & { row: GitBranch }) {
-  const { labels } = row;
-  const drift = b.stats && (b.stats.ahead > 0 || b.stats.behind > 0) ? b.stats : null;
-  const meta = (
-    <>
-      {b.isDefault && (
-        <Chip kind="default" icon="i-ph-house-line" tone="accent">
-          {labels.gitDefaultBranch}
-        </Chip>
-      )}
-      {drift && (
-        <Chip kind="drift" icon="i-ph-git-commit" mono label={labels.gitDriftLabel(drift.ahead, drift.behind)}>
-          {[drift.ahead > 0 ? `↑${drift.ahead}` : '', drift.behind > 0 ? `↓${drift.behind}` : '']
-            .filter(Boolean)
-            .join(' ')}
-        </Chip>
-      )}
-      <Chip
-        kind="age"
-        icon="i-ph-clock"
-        label={labels.gitLastCommitAge(relativeTime(b.updatedAt, now), ageIsDuration(b.updatedAt, now))}
-      >
-        {relativeTime(b.updatedAt, now)}
-      </Chip>
-    </>
-  );
-  return (
-    <Row
-      {...row}
-      testId="git-branch-row"
-      label={b.name}
-      icon={<span aria-hidden className="i-ph-git-branch text-zg-ui text-[var(--zg-text-muted)]" />}
-      title={<span className="zg-meta truncate text-[var(--zg-text)]">{b.name}</span>}
-      meta={meta}
-      size={b.stats && (b.stats.added > 0 || b.stats.removed > 0) ? <Diff {...b.stats} /> : null}
-      actions={<CopyButton text={b.name} label={labels.gitCopyBranch} />}
-    />
-  );
-});
-
-/** Start the typed name: a new branch here, or a new worktree this chat moves into. */
-const CreateRow = memo(function CreateRow({
-  name,
-  worktree,
-  now: _now,
-  ...row
-}: RowProps & { name: string; worktree: boolean }) {
-  const { labels } = row;
-  return (
-    <Row
-      {...row}
-      testId={worktree ? 'git-create-worktree' : 'git-create-branch'}
-      label={worktree ? labels.gitStartWorktreeLabel(name) : labels.gitStartBranchLabel(name)}
-      icon={
-        <span
-          aria-hidden
-          className={`${worktree ? environmentKindIcon('worktree') : 'i-ph-plus'} text-zg-ui text-[var(--zg-text-muted)]`}
-        />
-      }
-      title={
-        <>
-          <span className="shrink-0">{worktree ? labels.gitStartAsWorktree : labels.gitStartBranch}</span>
-          <span className="zg-meta truncate text-[var(--zg-text)]">{name}</span>
-        </>
-      }
-      meta={
-        worktree ? (
-          <Chip kind="new" icon="i-ph-arrow-bend-up-right">
-            {labels.gitMovesThisChat}
-          </Chip>
-        ) : (
-          <Chip kind="new" icon="i-ph-git-branch">
-            {labels.gitFromHere}
-          </Chip>
-        )
-      }
-      size={null}
-      actions={null}
-    />
-  );
-});
-
-function PrPlaceholder() {
-  return (
-    <div aria-hidden className="zg-menu-row" data-size="lg">
-      <span className="shrink-0 w-4" />
-      <span className="flex-1 flex flex-col gap-1.5 py-0.5">
-        <span className="h-2.5 w-3/5 rounded-full bg-[var(--zg-track)]" />
-        <span className="h-2 w-2/5 rounded-full bg-[var(--zg-track)] opacity-70" />
-      </span>
-    </div>
-  );
-}