zidane-ui 9.0.4 → 9.1.3

package/src/git/SyncChip.tsx

@@ -1,275 +0,0 @@
-/**
- * The git bar's ahead / behind chip, and Sync.
- *
- *   - The branch has a remote copy: `↑` to push, `↓` to pull. A click syncs
- *     (`GitHost.sync`: pull, merging, then push). Level with it, the chip is
- *     a quiet sync glyph, so news on the remote is still one click away.
- *   - No remote copy yet: commits ahead of the default branch, and a click
- *     publishes the branch.
- *   - Neither (detached, no remote, a host without `sync`): the counts, not
- *     clickable.
- *
- * `confirm` asks first, in a popover on the chip whose "Don't ask again"
- * calls `onConfirmChange(false)`. A sync that fails says why in the same
- * popover, until clicked away; one that works needs no word, the counts
- * roll to nothing as the bar refreshes. Disabled while the agent works.
- */
-import { useEffect, useRef, useState, type CSSProperties } from 'react';
-
-import { BTN_SECONDARY, buttonClass } from '../components/button';
-import { FloatingSurface } from '../components/floating/FloatingSurface';
-import { Tooltip } from '../components/Tooltip';
-import { RollingText } from '../motion/roll';
-import type { GitStatus } from './headless/host';
-import { gitErrorText } from './headless/labels';
-import { syncAction, syncSummary, syncTooltip } from './headless/sync';
-import { useGitHost, useGitLabels } from './GitProvider';
-
-/** The git bar's quiet item: a chip that only lifts on hover. */
-export const GIT_BAR_ITEM =
-  'zg-press-subtle inline-flex items-center gap-1 h-5 px-1.5 -mx-1.5 rounded-full border-0 bg-transparent text-inherit ' +
-  'enabled:cursor-pointer enabled:hover:bg-[var(--zg-row-hover)] enabled:hover:text-[var(--zg-text)] disabled:cursor-default ' +
-  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]';
-const ITEM = GIT_BAR_ITEM.replace('gap-1 ', 'gap-2 ');
-
-type Popover = { kind: 'confirm' } | { kind: 'error'; message: string } | null;
-
-/** Props for {@link SyncChip}. */
-export interface SyncChipProps {
-  /** The checkout's status. */
-  status: GitStatus;
-  /** The checkout. */
-  cwd: string;
-  /** The session working in it (the host may refuse while it runs). */
-  sessionId: string | null;
-  /** The agent is working: the chip is disabled. */
-  running: boolean;
-  /** Called after every sync, worked or not (refresh the status). */
-  onSynced: () => Promise<void> | void;
-  /**
-   * Ask before syncing.
-   * @default true
-   */
-  confirm?: boolean;
-  /** "Don't ask again" was ticked at a confirmed sync. Absent: no such checkbox. */
-  onConfirmChange?: (confirm: boolean) => void;
-  /** Extra class names for the root. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-/**
- * The ahead / behind counts of a checkout, and the sync (or publish) a click runs. Renders nothing when there is
- * neither a count nor an action.
- *
- * @param props - The {@link SyncChipProps}.
- */
-export function SyncChip({
-  status,
-  cwd,
-  sessionId,
-  running,
-  onSynced,
-  confirm = true,
-  onConfirmChange,
-  className,
-  style,
-}: SyncChipProps) {
-  const host = useGitHost();
-  const labels = useGitLabels();
-  const action = host?.sync ? syncAction(status) : null;
-  const [busy, setBusy] = useState(false);
-  const [popover, setPopover] = useState<Popover>(null);
-  const [dontAsk, setDontAsk] = useState(false);
-  const chipRef = useRef<HTMLButtonElement>(null);
-  const surfaceRef = useRef<HTMLDivElement>(null);
-  const confirmRef = useRef<HTMLButtonElement>(null);
-
-  const counts = status.ahead > 0 || status.behind > 0;
-  const level = status.upstream !== null && !counts;
-
-  // A run starting, or the folder changing, closes the popover.
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- a run starting closes the popover
-    if (running) setPopover(null);
-  }, [running]);
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- another folder closes the popover
-  useEffect(() => setPopover(null), [cwd]);
-
-  useEffect(() => {
-    if (!popover) return undefined;
-    if (popover.kind === 'confirm') requestAnimationFrame(() => confirmRef.current?.focus());
-    const onPointer = (e: PointerEvent) => {
-      const t = e.target as Node | null;
-      if (t && !chipRef.current?.contains(t) && !surfaceRef.current?.contains(t)) setPopover(null);
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
-      e.preventDefault();
-      e.stopPropagation();
-      setPopover(null);
-      chipRef.current?.focus();
-    };
-    document.addEventListener('pointerdown', onPointer, true);
-    document.addEventListener('keydown', onKey, true);
-    return () => {
-      document.removeEventListener('pointerdown', onPointer, true);
-      document.removeEventListener('keydown', onKey, true);
-    };
-  }, [popover]);
-
-  if (!action && !counts) return null;
-
-  const sync = async () => {
-    setPopover(null);
-    if (dontAsk) onConfirmChange?.(false);
-    setBusy(true);
-    try {
-      const result = await host!.sync!(cwd, sessionId).catch((err: unknown) => ({
-        ok: false as const,
-        error: { code: 'failed' as const, message: err instanceof Error ? err.message : String(err) },
-      }));
-      if (!result.ok) setPopover({ kind: 'error', message: gitErrorText(result.error, labels) });
-    } finally {
-      setBusy(false);
-      void onSynced();
-    }
-  };
-
-  const onClick = () => {
-    if (popover) {
-      setPopover(null);
-      return;
-    }
-    if (!confirm) void sync();
-    else {
-      setDontAsk(false);
-      setPopover({ kind: 'confirm' });
-    }
-  };
-
-  const face = (
-    <span className="zg-meta inline-flex items-center gap-2 text-inherit">
-      {busy ? (
-        <span aria-hidden className="i-ph-arrows-clockwise animate-spin text-zg-label" />
-      ) : action === 'publish' ? (
-        <span aria-hidden className="i-ph-cloud-arrow-up text-zg-label" />
-      ) : (
-        level && <span aria-hidden className="i-ph-arrows-clockwise text-zg-label" />
-      )}
-      {status.ahead > 0 && (
-        <span className="inline-flex items-center" aria-label={labels.gitAhead(status.ahead)}>
-          ↑<RollingText text={String(status.ahead)} value={status.ahead} />
-        </span>
-      )}
-      {status.behind > 0 && (
-        <span className="inline-flex items-center" aria-label={labels.gitBehind(status.behind)}>
-          ↓<RollingText text={String(status.behind)} value={status.behind} />
-        </span>
-      )}
-    </span>
-  );
-
-  const label = syncTooltip(status, action, { running, busy }, labels);
-  return (
-    <span className={`zg-git-drift shrink-0 inline-flex${className ? ` ${className}` : ''}`} style={style}>
-      <Tooltip side="top" portal label={label}>
-        {action ? (
-          <button
-            ref={chipRef}
-            type="button"
-            data-testid="git-drift"
-            data-busy={busy || undefined}
-            className={ITEM}
-            disabled={running || busy}
-            aria-label={label}
-            aria-haspopup="dialog"
-            aria-expanded={popover !== null}
-            onClick={onClick}
-          >
-            {face}
-          </button>
-        ) : (
-          <span data-testid="git-drift" className="inline-flex">
-            {face}
-          </span>
-        )}
-      </Tooltip>
-      <FloatingSurface
-        ref={surfaceRef}
-        open={popover !== null}
-        // eslint-disable-next-line react-hooks/refs -- the chip is mounted whenever the popover opens (a click on it)
-        anchor={{ element: chipRef.current }}
-        side="top"
-        align="start"
-        offset={6}
-        width={280}
-        role="dialog"
-        aria-label={action === 'publish' ? labels.gitPublishDialog : labels.gitSyncDialog}
-        data-testid="git-sync-popover"
-      >
-        {popover?.kind === 'confirm' && (
-          <div className="flex flex-col gap-3 p-3 text-zg-label leading-[1.45] text-[var(--zg-text)]">
-            <div className="flex flex-col gap-1">
-              <span className="font-medium">
-                {action === 'publish' ? labels.gitPublishBranch(status.branch) : labels.gitSyncWith(status.upstream)}
-              </span>
-              <span className="text-[var(--zg-text-muted)] zg-pretty">
-                {syncSummary(status, labels)}
-                {status.changes.files > 0 ? labels.gitSyncKeepsChanges : ''}
-              </span>
-            </div>
-            <div className="flex items-center gap-2">
-              {onConfirmChange ? (
-                <button
-                  type="button"
-                  role="checkbox"
-                  aria-checked={dontAsk}
-                  onClick={() => setDontAsk((v) => !v)}
-                  className="zg-press-subtle inline-flex items-center gap-1.5 mr-auto border-0 bg-transparent p-0 text-zg-meta text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] cursor-pointer"
-                >
-                  <span
-                    aria-hidden
-                    className={`w-3.5 h-3.5 rounded-zg-xs shrink-0 flex items-center justify-center transition-colors ${
-                      dontAsk
-                        ? 'bg-[var(--zg-accent-fill)]'
-                        : 'bg-[var(--zg-track)] shadow-[inset_0_0_0_1px_var(--zg-border-strong)]'
-                    }`}
-                  >
-                    {dontAsk && <span className="i-ph-check-bold text-zg-badge text-zg-accent-fill-fg" />}
-                  </span>
-                  {labels.gitDontAskAgain}
-                </button>
-              ) : (
-                <span className="mr-auto" />
-              )}
-              <button type="button" className={BTN_SECONDARY} onClick={() => setPopover(null)}>
-                {labels.gitSyncCancel}
-              </button>
-              <button
-                ref={confirmRef}
-                type="button"
-                data-testid="git-sync-confirm"
-                className={buttonClass({ variant: 'solid', size: 'sm' })}
-                onClick={() => void sync()}
-              >
-                {action === 'publish' ? labels.gitPublish : labels.gitSync}
-              </button>
-            </div>
-          </div>
-        )}
-        {popover?.kind === 'error' && (
-          <div
-            role="alert"
-            data-testid="git-sync-error"
-            className="flex items-start gap-2 p-3 text-zg-label leading-[1.45] text-[var(--zg-text)]"
-          >
-            <span aria-hidden className="i-ph-warning text-zg-ui shrink-0 mt-[2px] text-zg-danger" />
-            <span className="min-w-0 zg-pretty">{popover.message}</span>
-          </div>
-        )}
-      </FloatingSurface>
-    </span>
-  );
-}

package/src/git/WherePicker.tsx

@@ -1,358 +0,0 @@
-/**
- * A new session's one "where" menu, next to Send. It answers two questions
- * in one place:
- *
- * - **Runs on**: this computer, a saved server (the session lives there and
- *   keeps running with the app closed), or a machine shared with the draft's
- *   host (the session stays on the host, the files and commands are on the
- *   machine). A server this computer also uses as a machine shows once, as
- *   the server (`hiddenMachines`).
- * - **Isolation** on that place: in the folder, a new worktree (with its
- *   branch), or a sandbox kind the host offers (Docker, E2B, Daytona…).
- *
- * It renders what it is given (the hosts, the draft host's kinds, the draft)
- * and reads no host. `WherePicker` is the pill and its popover; `WhereMenu`
- * is the menu alone, to place in a surface of your own.
- */
-import { useRef, type CSSProperties } from 'react';
-import type { EnvironmentDescriptor } from 'zidane/chat';
-import { isolationLabel, parseMachineKind } from 'zidane/chat/pure';
-
-import { hostReachable, hostStatusLabel, type HostView } from '../chat/headless/hosts';
-import { HostBadge } from '../chat/HostBadge';
-import { MetaChip } from '../components/Form';
-import { Popover } from '../components/floating/Popover';
-import { handleMenuKeyDown, MenuNote, MenuRow, MenuSection, MenuSeparator } from '../components/Menu';
-import { Tooltip } from '../components/Tooltip';
-import { useGitLabels } from './GitProvider';
-import {
-  environmentBaseKind,
-  environmentKindIcon,
-  machinesOf,
-  resolveDraftDescriptor,
-  type DraftEnvironment,
-  type EnvironmentMachine,
-} from './headless/environment';
-import type { GitLabels } from './headless/labels';
-
-const NO_NAMES: ReadonlySet<string> = new Set();
-
-/** Props for {@link WhereMenu}: what {@link WherePicker} shows, and how a pick closes it. */
-export interface WhereMenuProps {
-  /** This computer first, then the saved servers. */
-  hosts: readonly HostView[];
-  /** The draft's host. */
-  hostId: string;
-  /** Called with the host picked. */
-  onHostChange: (hostId: string) => void;
-  /** The draft host's environment kinds (`withMachines` applied). */
-  descriptors: readonly EnvironmentDescriptor[];
-  /** The draft's pick, `null` for the default. */
-  draft: DraftEnvironment | null;
-  /** Called with the draft's new pick. */
-  onChange: (next: DraftEnvironment) => void;
-  /** Machine names not to list (servers this computer also uses as machines, shown as servers). */
-  hiddenMachines?: ReadonlySet<string>;
-  /** Opens the environment settings. Absent: no settings row. */
-  onOpenSettings?: () => void;
-  /** Called after a pick that ends the choice (the popover closes). */
-  onClose?: () => void;
-  /** Extra classes on the menu. */
-  className?: string;
-  /** Inline styles on the menu. */
-  style?: CSSProperties;
-}
-
-/** Props for {@link WherePicker}. */
-export type WherePickerProps = Omit<WhereMenuProps, 'onClose'>;
-
-/** The pill's short word for the isolation; `undefined` for the plain folder. */
-function isolationShort(
-  descriptor: EnvironmentDescriptor,
-  branch: string | undefined,
-  labels: GitLabels,
-): string | undefined {
-  const base = environmentBaseKind(descriptor.kind);
-  if (base === 'local') return undefined;
-  if (base === 'worktree') return branch || labels.gitWorktreeShort;
-  return descriptor.label;
-}
-
-const placeIcon = (kind: 'local' | 'server' | 'machine') =>
-  kind === 'local' ? 'i-ph-laptop' : kind === 'server' ? 'i-ph-hard-drives' : 'i-ph-desktop-tower';
-
-/** What the draft resolves to: the place, the kinds there, the branch. */
-function resolveWhere(props: WhereMenuProps) {
-  const { hosts, hostId, descriptors, draft, hiddenMachines = NO_NAMES } = props;
-  const host = hosts.find((h) => h.id === hostId) ?? hosts[0];
-  const machines = machinesOf(descriptors, hiddenMachines);
-  const selected = resolveDraftDescriptor(descriptors, draft);
-  // A hidden machine's kind (a lent server picked before) does not hold the place.
-  const machine = selected?.machine && !hiddenMachines.has(selected.machine.name) ? selected.machine : undefined;
-  const isolations = descriptors.filter((d) => d.enabled && (machine ? d.machine?.id === machine.id : !d.machine));
-  const typedBranch = selected && draft?.kind === selected.kind ? draft.branch : '';
-  const branchLabel = selected?.takesBranch ? typedBranch.trim() || selected.suggestedBranch : undefined;
-  return { host, machines, selected, machine, isolations, typedBranch, branchLabel };
-}
-
-/** The "Runs on" help: one place per row, its icon, its name, what it means. */
-function RunsOnHelp({ labels }: { labels: GitLabels }) {
-  const rows = [
-    { icon: placeIcon('local'), name: labels.gitRunsOnLocal, fact: labels.gitRunsOnLocalFact },
-    { icon: placeIcon('server'), name: labels.gitRunsOnServer, fact: labels.gitRunsOnServerFact },
-    { icon: placeIcon('machine'), name: labels.gitRunsOnMachine, fact: labels.gitRunsOnMachineFact },
-  ];
-  return (
-    <span className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1.5 py-0.5">
-      {rows.map((row) => (
-        <span key={row.icon} className="contents">
-          <span aria-hidden className={`${row.icon} text-zg-ui mt-px text-[var(--zg-text-muted)]`} />
-          <span className="block">
-            <span className="block font-medium">{row.name}</span>
-            <span className="block text-[var(--zg-text-muted)]">{row.fact}</span>
-          </span>
-        </span>
-      ))}
-    </span>
-  );
-}
-
-/**
- * Renders the where menu: the places (hosts and machines), the isolation kinds there, the branch
- * field of a kind that takes one, and the settings row.
- *
- * @param props - Component props.
- */
-export function WhereMenu(props: WhereMenuProps) {
-  const { hosts, hostId, onHostChange, descriptors, onChange, onOpenSettings, onClose, className, style } = props;
-  const labels = useGitLabels();
-  const branchRef = useRef<HTMLInputElement | null>(null);
-  const { host, machines, selected, machine, isolations, typedBranch } = resolveWhere(props);
-  const close = () => onClose?.();
-  if (!host) return null;
-
-  const pickHost = (next: HostView) => {
-    if (next.id !== hostId) onHostChange(next.id);
-    // Back from a machine to the host itself: its own folder.
-    else if (machine) onChange({ kind: 'local', branch: '' });
-    close();
-  };
-  const pickMachine = (next: EnvironmentMachine) => {
-    const own = descriptors.filter((d) => d.machine?.id === next.id && d.enabled && d.available);
-    const kind = (own.find((d) => parseMachineKind(d.kind)?.base === 'local') ?? own[0])?.kind;
-    if (kind) onChange({ kind, branch: '' });
-    close();
-  };
-
-  return (
-    // The rows sit in one menu per section, so the help and the branch field stay outside any
-    // menu (a menu may hold only items); the arrows still move across every section.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div
-      role="group"
-      aria-label={labels.gitWhereLabel}
-      className={className ? `flex flex-col p-1 ${className}` : 'flex flex-col p-1'}
-      style={style}
-      onKeyDown={handleMenuKeyDown}
-    >
-      <MenuSection
-        label={labels.gitRunsOn}
-        trailing={
-          <Tooltip portal side="bottom" align="end" maxWidth={280} label={<RunsOnHelp labels={labels} />}>
-            <span
-              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- the help opens on focus, for keyboard users
-              tabIndex={0}
-              role="img"
-              data-testid="runs-on-help"
-              aria-label={labels.gitRunsOnHelpLabel}
-              className="i-ph-question text-zg-label text-[var(--zg-text-subtle)] hover:text-[var(--zg-text-muted)] cursor-help outline-none focus-visible:text-[var(--zg-text)]"
-            />
-          </Tooltip>
-        }
-      >
-        <div role="menu" aria-label={labels.gitRunsOn}>
-          {hosts.map((h) => (
-            <MenuRow
-              key={h.id}
-              size="lg"
-              role="menuitemradio"
-              checked={!machine && h.id === host.id}
-              disabled={!hostReachable(h)}
-              icon={<span aria-hidden className={placeIcon(h.kind)} />}
-              title={<HostBadge host={h} />}
-              description={
-                h.kind === 'local'
-                  ? labels.gitHostLocalDescription
-                  : hostReachable(h)
-                    ? labels.gitHostServerDescription
-                    : hostStatusLabel(h)
-              }
-              onClick={() => pickHost(h)}
-            />
-          ))}
-          {machines.map((m) => (
-            <MenuRow
-              key={m.id}
-              size="lg"
-              role="menuitemradio"
-              checked={machine?.id === m.id}
-              disabled={m.status !== 'online'}
-              icon={<span aria-hidden className={placeIcon('machine')} />}
-              title={
-                <>
-                  {m.name}
-                  <MetaChip tone={m.status === 'online' ? 'success' : 'muted'} className="font-normal ml-1.5">
-                    {labels.gitMachineStatus(m.status)}
-                  </MetaChip>
-                </>
-              }
-              description={
-                m.status === 'online' ? labels.gitMachineDescription(m.name) : labels.gitMachineOffline(m.name)
-              }
-              onClick={() => pickMachine(m)}
-            />
-          ))}
-        </div>
-      </MenuSection>
-
-      {isolations.length > 1 && (
-        <>
-          <MenuSeparator />
-          <MenuSection label={labels.gitIsolation}>
-            <div role="menu" aria-label={labels.gitIsolation}>
-              {isolations.map((descriptor) => {
-                const active = descriptor === selected;
-                return (
-                  <MenuRow
-                    key={descriptor.kind}
-                    role="menuitemradio"
-                    checked={active}
-                    disabled={!descriptor.available}
-                    icon={<span aria-hidden className={environmentKindIcon(descriptor.kind)} />}
-                    title={
-                      <>
-                        {isolationLabel(descriptor)}
-                        {descriptor.isDefault && (
-                          <span className="zg-meta font-normal ml-1.5">{labels.gitIsolationDefault}</span>
-                        )}
-                      </>
-                    }
-                    description={descriptor.available ? descriptor.description : descriptor.reason}
-                    onClick={() => {
-                      onChange({ kind: descriptor.kind, branch: active ? typedBranch : '' });
-                      if (descriptor.takesBranch) {
-                        requestAnimationFrame(() => branchRef.current?.focus());
-                      } else {
-                        close();
-                      }
-                    }}
-                  />
-                );
-              })}
-            </div>
-          </MenuSection>
-        </>
-      )}
-
-      {selected?.takesBranch && isolations.includes(selected) && (
-        <MenuSection label={labels.gitBranch}>
-          <div className="px-2 pb-1.5">
-            <input
-              ref={branchRef}
-              type="text"
-              value={typedBranch}
-              onChange={(event) => onChange({ kind: selected.kind, branch: event.target.value })}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                  event.preventDefault();
-                  close();
-                }
-              }}
-              placeholder={selected.suggestedBranch ?? labels.gitBranchPlaceholder}
-              aria-label={labels.gitBranch}
-              spellCheck={false}
-              className="zg-well w-full h-7 px-2 text-xs font-mono placeholder:text-[var(--zg-text-subtle)]"
-            />
-          </div>
-          <MenuNote className="!pt-0">{labels.gitBranchHint}</MenuNote>
-        </MenuSection>
-      )}
-
-      {selected?.note && isolations.includes(selected) && <MenuNote icon="i-ph-info">{selected.note}</MenuNote>}
-
-      {onOpenSettings && (
-        <>
-          <MenuSeparator />
-          <div role="menu" aria-label={labels.gitEnvironmentSettings}>
-            <MenuRow
-              role="menuitem"
-              icon={<span aria-hidden className="i-ph-gear-six" />}
-              title={labels.gitEnvironmentSettings}
-              onClick={() => {
-                close();
-                onOpenSettings();
-              }}
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-/**
- * Renders the where pill and its menu. Nothing when there is nothing to choose (one place, one way
- * to run there).
- *
- * @param props - Component props.
- */
-export function WherePicker(props: WherePickerProps) {
-  const { hosts, className, style } = props;
-  const labels = useGitLabels();
-  const { host, machines, selected, machine, isolations, branchLabel } = resolveWhere(props);
-
-  // Nothing to choose: one place, one way to run there.
-  if (!host || (hosts.length <= 1 && machines.length === 0 && isolations.length <= 1)) {
-    return null;
-  }
-
-  const placeName = machine ? machine.name : host.name;
-  const place = machine ? 'machine' : host.kind;
-  const shownIsolation = selected && isolations.includes(selected) ? selected : undefined;
-  const short = shownIsolation ? isolationShort(shownIsolation, branchLabel, labels) : undefined;
-
-  return (
-    <Popover
-      ariaLabel={labels.gitWhereLabel}
-      align="end"
-      width={320}
-      trigger={(triggerProps) => (
-        <span className={className ? `zg-segment shrink-0 ${className}` : 'zg-segment shrink-0'} style={style}>
-          <button
-            {...triggerProps}
-            type="button"
-            data-testid="where-picker"
-            title={labels.gitWhereTitle(
-              placeName,
-              shownIsolation ? isolationLabel(shownIsolation) : undefined,
-              branchLabel,
-            )}
-            className="zg-segment-item zg-press-subtle inline-flex items-center gap-1.5 h-6 pl-2.5 pr-2 rounded-full text-xs border-0 bg-transparent text-[var(--zg-text-muted)] cursor-pointer whitespace-nowrap"
-          >
-            <span aria-hidden className={`${placeIcon(place)} text-zg-meta shrink-0`} />
-            <span className="zg-pill-label max-w-[120px] truncate">{placeName}</span>
-            {short && shownIsolation && (
-              <MetaChip className="zg-pill-label">
-                <span aria-hidden className={`${environmentKindIcon(shownIsolation.kind)} text-zg-meta shrink-0`} />
-                <span className="max-w-[min(130px,14cqi)] truncate font-mono">{short}</span>
-              </MetaChip>
-            )}
-            <span aria-hidden className="zg-pill-label i-ph-caret-up-down text-zg-badge shrink-0 opacity-70" />
-          </button>
-        </span>
-      )}
-    >
-      {(close) => <WhereMenu {...props} className={undefined} style={undefined} onClose={close} />}
-    </Popover>
-  );
-}