zidane-ui 9.1.1 → 9.1.3

package/src/chat/sidebar/sidebar-live.tsx

@@ -1,666 +0,0 @@
-/**
- * What a sidebar row says about its session beyond the title, from the
- * app's live signals:
- *
- *   - the status dot: this window's run and pending asks, the run that ended
- *     while the session was not open, and the daemon's presence;
- *   - line 1, trailing: while a run goes, what it is doing (thinking,
- *     writing, the tool call in the transcript's words) under a shimmer and
- *     for how long; "Needs you" while it waits on an approval or a question;
- *     at rest, how long ago it was active;
- *   - line 2, when the session has some: the remote host, the project (a
- *     favorite), the environment, then one badge per artifact kind that
- *     gives one (commits, pull requests, extension kinds), each with a card
- *     listing the artifacts behind it.
- *
- * Numbers roll when they change, a badge whose kind grew pops and sweeps
- * the row once, and line 2 grows in the first time.
- *
- * Where those signals come from is the app's: hand its hooks and stores to
- * {@link createSidebarLive} once, at module scope, as for `createPaletteRows`.
- */
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useState,
-  type MouseEvent,
-  type NamedExoticComponent,
-  type ReactNode,
-} from 'react';
-import {
-  sessionBadgeTarget,
-  type ExtensionSessionBadge,
-  type ExtensionSessionBadgeCardRow,
-  type RunEstimateView,
-  type SessionBadgeEntry,
-} from 'zidane/chat/pure';
-import type { SessionEnvironmentSummary } from 'zidane/chat';
-
-import { HoverCard, type HoverCardTriggerProps } from '../../components/floating/HoverCard';
-import { useLinkRouter } from '../../extensions/links';
-import { useMinuteTick } from '../../hooks/useMinuteTick';
-import { RollingText } from '../../motion/roll';
-import { syncShimmer } from '../../motion/shimmer';
-import { HeldWidth } from '../../motion/size';
-import { Crossfade, useCadencedValue } from '../../motion/swap';
-import type { SessionPresence } from '../../machines/headless/presence';
-import { badgeColorStyle, badgeToneClass } from '../../session/ArtifactRowChips';
-import { HostBadge } from '../HostBadge';
-import { StatusDot, type SessionDotState } from '../StatusDot';
-import type { HostView } from '../headless/hosts';
-import { formatElapsedShort, relativeTime } from '../headless/session-list';
-import { activityLabel, type SessionActivityStore } from '../headless/sidebar/activity';
-import type { RunEstimatesStore } from '../headless/sidebar/estimates';
-import type { SessionBadgesEntry, SessionBadgesStore } from '../headless/sidebar/badges';
-import { deriveDotState } from '../headless/sidebar/dot-state';
-import { RunEstimateChip, useRunEstimate } from '../RunEstimateChip';
-import { useBadgeMenu } from '../transcript/BadgeMenu';
-import { useChatLabels } from '../useChatLabels';
-import { EnvironmentChip, ProjectChip, type RowProject } from './RowChips';
-import { useSessionActivity } from './useSessionActivity';
-import { useSessionBadges } from './useSessionBadges';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** A state shows at least this long, so a quick tool call does not flicker by. */
-const STATE_HOLD_MS = 500;
-/** How long a new commit or pull request reads as new (the badge pop, the row sweep). */
-export const ARRIVAL_MS = 1600;
-
-/**
- * True while `at` (an arrival stamp, `Date.now()`; 0 for none) is under `ARRIVAL_MS` old. Read from the
- * clock at render, so it is already true on the render that brings the arrival; a timer re-renders once it
- * is over.
- *
- * @param at - The arrival stamp.
- */
-export function useArrival(at: number): boolean {
-  const [, expire] = useReducer((n: number) => n + 1, 0);
-  useEffect(() => {
-    const left = ARRIVAL_MS - (Date.now() - at);
-    if (left <= 0) return undefined;
-    const t = window.setTimeout(expire, left);
-    return () => window.clearTimeout(t);
-  }, [at]);
-  // eslint-disable-next-line react-hooks/purity -- read at render so the arrival shows on the render that brings it
-  return Date.now() - at < ARRIVAL_MS;
-}
-
-/** Where a badge's panel opens: the badge's kind and, for one row of its card, that artifact. */
-export interface SidebarBadgeFocus {
-  /** The badge's artifact kind. */
-  kind: string;
-  /** One artifact of it. */
-  uri?: string;
-}
-
-/** The app's live signals the rows read. Each `use…` member is a hook, called once per row that needs it. */
-export interface SidebarLiveOptions {
-  /** Whether this window sees the session's run going. */
-  useRunning: (sessionId: string) => boolean;
-  /** The run's elapsed seconds, ticking every `intervalMs` while `live`. */
-  useRunElapsedSec: (sessionId: string, live: boolean, intervalMs: number) => number;
-  /** An approval, plan or question of this window waits on the user. Absent: never. */
-  usePending?: (sessionId: string) => boolean;
-  /** How the run that ended while the session was not open ended. Absent: never. */
-  useNotification?: (sessionId: string) => 'completed' | 'error' | null;
-  /** The daemon's presence for the session. Absent: none. */
-  usePresence?: (sessionId: string) => Pick<SessionPresence, 'attention' | 'running' | 'windows'> | null;
-  /** A remote host by id, for its chip. Absent: no host chip. */
-  useHost?: (hostId: string | undefined) => HostView | undefined;
-  /** What each session's run is doing (`createSessionActivity`). */
-  activity: SessionActivityStore;
-  /** How long each session's run has left (`createRunEstimates`): shown instead of the elapsed time while known. Absent: the elapsed time. */
-  estimates?: RunEstimatesStore;
-  /** Each session's artifact badges (`createSessionBadges`). */
-  badges: SessionBadgesStore;
-  /** Opens a badge's panel (`badge.panel`, else the app's default) focused on it. Absent: a badge click only selects the row. */
-  openBadge?: (sessionId: string, panel: string | undefined, focus: SidebarBadgeFocus) => void;
-}
-
-/** Props of the trailing slot ({@link SidebarLive.RowMeta}). */
-export interface SidebarRowMetaProps {
-  /** The session. */
-  sessionId: string;
-  /** Its last activity (ms). */
-  updatedAt: number;
-  /** Run details on: what the run does; off: "Working". */
-  details: boolean;
-}
-
-/** Props of the badge line ({@link SidebarLive.RowArtifacts}). */
-export interface SidebarRowArtifactsProps {
-  /** The session. */
-  sessionId: string;
-  /** Read and show its artifact badges (run details and artifacts on). */
-  enabled: boolean;
-  /** Hears whether a badge just arrived (the row sweeps). */
-  onArrival: (fresh: boolean) => void;
-  /** Selects the row (a badge click opens the chat too). */
-  onSelect?: (sessionId: string) => void;
-  /** The chat's folder: which extensions' badge actions apply. */
-  cwd?: string;
-  /** A remote host's session: its name leads the line, whatever `enabled` says. */
-  hostId?: string;
-  /** Shown first, whatever `enabled` says (it is not an artifact). */
-  project?: RowProject;
-  /** Where the session runs when not here, after the project (not an artifact either). */
-  environment?: SessionEnvironmentSummary;
-  /**
-   * Where a badge's card opens: beside the row, top-aligned with it (`'beside'`, the sidebar: never over the
-   * rows below), or under the badge itself (`'below'`, a wide list where the row's edge is far away).
-   * @default 'beside'
-   */
-  cards?: BadgeCardPlacement;
-}
-
-/** Where a row badge's card opens ({@link SidebarRowArtifactsProps.cards}). */
-export type BadgeCardPlacement = 'beside' | 'below';
-
-/** The live row parts {@link createSidebarLive} returns. */
-export interface SidebarLive {
-  /** A session's dot state (a hook). */
-  useSessionDotState: (sessionId: string) => SessionDotState;
-  /** A session's live dot; `override` forces a state (previews). */
-  SessionStatusDot: NamedExoticComponent<{ sessionId: string; override?: SessionDotState }>;
-  /** Line 1's trailing slot. */
-  RowMeta: NamedExoticComponent<SidebarRowMetaProps>;
-  /** Line 2: the badges, when the session has some. */
-  RowArtifacts: NamedExoticComponent<SidebarRowArtifactsProps>;
-}
-
-const never = (): false => false;
-const none = (): null => null;
-const noHost = (): undefined => undefined;
-
-/** Open what a badge (or one row of its card) stands for: its panel, or with ⌘ / ctrl its link. */
-type OpenBadge = (event: MouseEvent, target: { uri?: string; href?: string }) => void;
-/** Right-click: the badge menu for the badge, or for one row of its card. */
-type MenuBadge = (event: MouseEvent, row?: ExtensionSessionBadgeCardRow) => void;
-
-/** How long ago `at` was, kept current by the shared minute tick (its own component: the tick re-renders this text only). */
-function Ago({ at, className }: { at: number; className: string }) {
-  useMinuteTick();
-  // eslint-disable-next-line react-hooks/purity -- the minute tick re-renders it
-  return <span className={className}>{relativeTime(at, Date.now())}</span>;
-}
-
-/** A number in the badge text that rolls when it changes: the text around the first occurrence of `count`. */
-function BadgeText({ badge }: { badge: ExtensionSessionBadge }) {
-  const at = badge.count !== undefined ? badge.text.indexOf(String(badge.count)) : -1;
-  if (badge.count === undefined || at === -1) return <span>{badge.text}</span>;
-  const n = String(badge.count);
-  return (
-    <span className="inline-flex items-baseline whitespace-pre">
-      {badge.text.slice(0, at)}
-      <RollingText text={n} value={badge.count} />
-      {badge.text.slice(at + n.length)}
-    </span>
-  );
-}
-
-function BadgeChip({
-  badge,
-  fresh,
-  testId,
-  triggerProps,
-  onOpen,
-  onMenu,
-}: {
-  badge: ExtensionSessionBadge;
-  fresh: boolean;
-  testId: string;
-  triggerProps?: HoverCardTriggerProps;
-  onOpen: OpenBadge;
-  onMenu?: MenuBadge;
-}) {
-  return (
-    // Inside the row's select button: the badge selects the chat itself, then opens its panel.
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <span
-      {...triggerProps}
-      data-testid={testId}
-      data-fresh={fresh ? '' : undefined}
-      title={badge.card ? undefined : badge.title}
-      onClick={(e) => onOpen(e, badge.href ? { href: badge.href } : {})}
-      onContextMenu={onMenu ? (e) => onMenu(e) : undefined}
-      className="zg-row-badge zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 rounded-zg-sm whitespace-nowrap cursor-pointer"
-    >
-      {badge.icon?.gui && (
-        <span
-          aria-hidden
-          className={`${badge.icon.gui} text-zg-meta ${badgeToneClass(badge.tone)}`}
-          style={badgeColorStyle(badge.color)}
-        />
-      )}
-      <BadgeText badge={badge} />
-      {badge.detail && (
-        <span data-testid={`${testId}-detail`} className="min-w-0 max-w-[16ch] truncate text-[var(--zg-text-subtle)]">
-          {badge.detail}
-        </span>
-      )}
-      {badge.more !== undefined && badge.more > 0 && (
-        <span className="inline-flex items-baseline text-[var(--zg-text-subtle)]">
-          +<RollingText text={String(badge.more)} value={badge.more} />
-        </span>
-      )}
-    </span>
-  );
-}
-
-function CardList({ title, count, children }: { title: string; count: number; children: ReactNode }) {
-  return (
-    <div className="flex flex-col py-1 max-h-[320px]">
-      <div className="flex items-baseline justify-between px-3 pt-1.5 pb-1">
-        <span className="zg-section-label">{title}</span>
-        <span className="zg-meta">{count}</span>
-      </div>
-      <ul className="m-0 p-1 list-none overflow-y-auto">{children}</ul>
-    </div>
-  );
-}
-
-/** One line of a card: opens the badge's panel on it; a link (⌘ / ctrl-click) when the artifact has one. */
-function CardRow({
-  row,
-  onOpen,
-  onMenu,
-}: {
-  row: ExtensionSessionBadgeCardRow;
-  onOpen: OpenBadge;
-  onMenu?: MenuBadge;
-}) {
-  const onContextMenu = onMenu ? (e: MouseEvent) => onMenu(e, row) : undefined;
-  const className =
-    'flex items-baseline gap-2 min-w-0 px-2 py-1.5 rounded-zg-md text-zg-label leading-4 text-[var(--zg-text)] no-underline';
-  const body = (
-    <>
-      {row.icon?.gui && (
-        <span
-          aria-hidden
-          className={`${row.icon.gui} shrink-0 text-zg-label translate-y-[2px] ${badgeToneClass(row.tone)}`}
-          style={badgeColorStyle(row.color)}
-        />
-      )}
-      {row.lead && (
-        <span className={`zg-meta shrink-0 ${row.icon?.gui ? '' : badgeToneClass(row.tone)}`}>{row.lead}</span>
-      )}
-      <span className="min-w-0 flex-1 truncate">{row.title}</span>
-      {row.trailing && <span className="zg-meta shrink-0 max-w-[7rem] truncate">{row.trailing}</span>}
-    </>
-  );
-  return (
-    <li>
-      {row.href ? (
-        <a
-          href={row.href}
-          target="_blank"
-          rel="noreferrer"
-          className={`${className} hover:bg-[var(--zg-row-hover)]`}
-          onClick={(e) => onOpen(e, { ...(row.uri ? { uri: row.uri } : {}), href: row.href! })}
-          onContextMenu={onContextMenu}
-        >
-          {body}
-        </a>
-      ) : (
-        <button
-          type="button"
-          className={`${className} w-full text-left bg-transparent border-0 cursor-pointer hover:bg-[var(--zg-row-hover)]`}
-          onClick={(e) => onOpen(e, row.uri ? { uri: row.uri } : {})}
-          onContextMenu={onContextMenu}
-        >
-          {body}
-        </button>
-      )}
-    </li>
-  );
-}
-
-/** A badge's sidebar row, which its card is positioned against. */
-function rowOf(trigger: HTMLElement): HTMLElement | null {
-  return trigger.closest<HTMLElement>('[data-session-id]');
-}
-
-function SessionBadge({
-  entry,
-  grewAt,
-  cards,
-  onOpen: open,
-  onMenu: menu,
-}: {
-  entry: SessionBadgeEntry;
-  grewAt: number;
-  cards: BadgeCardPlacement;
-  onOpen: (entry: SessionBadgeEntry, uri?: string) => void;
-  onMenu?: (event: MouseEvent, entry: SessionBadgeEntry, row?: ExtensionSessionBadgeCardRow) => void;
-}) {
-  const onMenu: MenuBadge | undefined = menu ? (event, row) => menu(event, entry, row) : undefined;
-  const fresh = useArrival(grewAt);
-  const links = useLinkRouter();
-  const { badge } = entry;
-  const testId = `row-badge-${entry.kind}`;
-  const onOpen: OpenBadge = (event, target) => {
-    event.stopPropagation();
-    if ((event.metaKey || event.ctrlKey) && target.href) {
-      event.preventDefault();
-      void links.open(target.href, { source: 'badge', event });
-      return;
-    }
-    event.preventDefault();
-    open(entry, target.uri);
-  };
-  if (!badge.card || badge.card.rows.length === 0)
-    return <BadgeChip badge={badge} fresh={fresh} testId={testId} onOpen={onOpen} {...(onMenu ? { onMenu } : {})} />;
-  const card = badge.card;
-  return (
-    <HoverCard
-      ariaLabel={card.title}
-      testId={`${testId}-card`}
-      width={340}
-      // Beside the sidebar, top-aligned with the row: never over the rows below. In a wide list: under the badge.
-      side={cards === 'below' ? 'bottom' : 'right'}
-      align="start"
-      {...(cards === 'below' ? {} : { anchorTo: rowOf })}
-      trigger={(props) => (
-        <BadgeChip
-          badge={badge}
-          fresh={fresh}
-          testId={testId}
-          triggerProps={props}
-          onOpen={onOpen}
-          {...(onMenu ? { onMenu } : {})}
-        />
-      )}
-    >
-      <CardList title={card.title} count={card.rows.length}>
-        {card.rows.map((row, i) => (
-          <CardRow
-            key={`${i}:${row.lead ?? ''}:${row.title}`}
-            row={row}
-            onOpen={onOpen}
-            {...(onMenu ? { onMenu } : {})}
-          />
-        ))}
-      </CardList>
-    </HoverCard>
-  );
-}
-
-/**
- * The badges' line, mounted when the session has some. It grows open when it mounts for an arrival (the
- * first badge coming in while the row is on screen); a session that already had some shows them at once.
- */
-function BadgeLine({
-  entry,
-  host,
-  project,
-  environment,
-  fresh,
-  cards,
-  onOpen,
-  onMenu,
-}: {
-  cards: BadgeCardPlacement;
-  entry: SessionBadgesEntry | null;
-  host: HostView | undefined;
-  project: RowProject | undefined;
-  environment: SessionEnvironmentSummary | undefined;
-  fresh: boolean;
-  onOpen: (entry: SessionBadgeEntry, uri?: string) => void;
-  onMenu?: (event: MouseEvent, entry: SessionBadgeEntry, row?: ExtensionSessionBadgeCardRow) => void;
-}) {
-  const [growIn] = useState(fresh);
-  return (
-    <div className="zg-row-extra" data-grow={growIn ? '' : undefined}>
-      {/*
-       * One line of badges that scrolls sideways when they outgrow the row (a
-       * trackpad swipe, or shift + wheel; the list keeps the plain wheel). No
-       * scrollbar: an edge fades while there is more past it.
-       */}
-      <div className="zg-badge-strip zg-no-scrollbar zg-scroll-fade-x pt-1" data-testid="row-artifacts">
-        {host && <HostBadge host={host} icon />}
-        {project && <ProjectChip project={project} />}
-        <EnvironmentChip environment={environment} />
-        {entry?.badges.map((b) => (
-          <SessionBadge
-            key={b.kind}
-            entry={b}
-            grewAt={entry.grewAt[b.kind] ?? 0}
-            cards={cards}
-            onOpen={onOpen}
-            {...(onMenu ? { onMenu } : {})}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Builds the sidebar rows' live parts over the app's signals. Call it once, at module scope: the returned
- * components keep their identity, so the rows' memo holds.
- *
- * @param options - The app's hooks and stores.
- */
-export function createSidebarLive(options: SidebarLiveOptions): SidebarLive {
-  const {
-    useRunning,
-    useRunElapsedSec,
-    activity: activityStore,
-    badges: badgesStore,
-    openBadge,
-    estimates: estimatesStore,
-  } = options;
-  const usePending = options.usePending ?? never;
-  const useNotification = options.useNotification ?? none;
-  const usePresence = options.usePresence ?? none;
-  const useHost = options.useHost ?? noHost;
-
-  /** Each session's last elapsed second while its run clock ran (`Elapsed`). */
-  const lastElapsed = new Map<string, number>();
-
-  function useSessionDotState(sessionId: string): SessionDotState {
-    const running = useRunning(sessionId);
-    const pending = usePending(sessionId);
-    const notification = useNotification(sessionId);
-    const presence = usePresence(sessionId);
-    return deriveDotState({ pending, running, notification, presence });
-  }
-
-  function SessionStatusDotInner({ sessionId, override }: { sessionId: string; override?: SessionDotState }) {
-    const live = useSessionDotState(sessionId);
-    return <StatusDot state={override ?? live} />;
-  }
-
-  /**
-   * The elapsed time on its own, so its ticks re-render only this text (once a second: the row never shows
-   * less). Holds its last value once the run's clock stops: the line fading out at run end reads `12s`.
-   */
-  function Elapsed({ sessionId }: { sessionId: string }) {
-    // The session's own state, not "rendered, so running": the copy fading out
-    // at run end mounts after the run ended, and must not start its clock again.
-    const live = useRunning(sessionId);
-    const elapsed = useRunElapsedSec(sessionId, live, 1000);
-    // Per session, not per instance: the fading copy is a fresh mount.
-    if (live) lastElapsed.set(sessionId, elapsed);
-    const shown = live ? elapsed : (lastElapsed.get(sessionId) ?? elapsed);
-    return (
-      <RollingText
-        text={formatElapsedShort(shown)}
-        value={shown}
-        className="zg-meta shrink-0 text-[var(--zg-text-subtle)]"
-      />
-    );
-  }
-
-  /** The session's own run's estimate, while the host estimated it (`undefined` without an estimates store). */
-  function useSessionEstimate(sessionId: string): RunEstimateView | undefined {
-    return useRunEstimate(estimatesStore ? sessionId : undefined, undefined, estimatesStore);
-  }
-
-  /** The run's time: what it has left while the host estimated it, else how long it has gone. */
-  function RunTime({ sessionId }: { sessionId: string }) {
-    const estimate = useSessionEstimate(sessionId);
-    return estimate ? <EstimateChip estimate={estimate} /> : <Elapsed sessionId={sessionId} />;
-  }
-
-  /**
-   * The estimate chip. Its tooltip says how long the run has gone, read from the run's start when the
-   * tooltip shows: the row renders when the chip's text changes, not every second.
-   */
-  function EstimateChip({ estimate }: { estimate: RunEstimateView }) {
-    const labels = useChatLabels();
-    const { startedAt } = estimate;
-    const detail = useCallback(
-      () => labels.runningFor(formatElapsedShort(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)))),
-      [labels, startedAt],
-    );
-    return <RunEstimateChip estimate={estimate} detail={detail} />;
-  }
-
-  /**
-   * The trailing slot as it was before run details: an accent dot and "Working" (and the time left, while
-   * the host estimated the run), else the relative time.
-   */
-  function PlainMeta({ sessionId, running, updatedAt }: { sessionId: string; running: boolean; updatedAt: number }) {
-    const labels = useSidebarLabels();
-    const estimate = useSessionEstimate(sessionId);
-    return running ? (
-      // `items-baseline` with a `self-center` dot: the label supplies the baseline the row aligns on.
-      <span className="zg-row-meta shrink-0 inline-flex items-baseline gap-1 text-zg-meta leading-4 font-medium text-[var(--zg-accent)]">
-        <span aria-hidden className="self-center w-1.5 h-1.5 rounded-full bg-[var(--zg-accent)]" />
-        {labels.rowWorking}
-        {estimate && <EstimateChip estimate={estimate} />}
-      </span>
-    ) : (
-      <Ago at={updatedAt} className="zg-row-meta zg-meta shrink-0 leading-4" />
-    );
-  }
-
-  function LiveMeta({ sessionId, running, updatedAt }: { sessionId: string; running: boolean; updatedAt: number }) {
-    const labels = useSidebarLabels();
-    const dot = useSessionDotState(sessionId);
-    const activity = useSessionActivity(activityStore, sessionId);
-    const needsYou = dot === 'pending' || dot === 'attention';
-    // Shown only while the session runs: an entry whose run end this window missed says nothing.
-    // A compaction on its own (`/compact`) is the one state outside a run.
-    const compacting = !running && activity?.phase === 'compacting' && !activity.run;
-    const live = running || compacting;
-    // One object per activity, held together: the tooltip always names what the label says.
-    const label = useMemo(
-      () => (activity ? activityLabel(activity, labels) : { text: labels.rowRunning }),
-      [activity, labels],
-    );
-    const shown = useCadencedValue<{ text: string; title?: string }>(label, STATE_HOLD_MS);
-    const mode = needsYou ? 'needs' : live ? 'live' : 'idle';
-
-    return (
-      /*
-       * The slot holds its width while a mode lasts (`HeldWidth`): a label
-       * changing every half second never moves the title beside it, and a
-       * longer one makes room by easing, not snapping. Both crossfades hold
-       * to the right edge, so the line on show stays put as the outgoing one
-       * leaves. The label truncates at its cap; the elapsed time stays whole.
-       */
-      <span className="zg-row-meta min-w-0 inline-flex justify-end">
-        <HeldWidth holdKey={mode}>
-          <Crossfade activeKey={mode} variant="text" align="end" className="min-w-0">
-            {mode === 'needs' ? (
-              <span className="text-zg-meta leading-4 font-medium text-zg-warn" data-testid="row-state">
-                {labels.rowNeedsYou}
-              </span>
-            ) : mode === 'live' ? (
-              <span className="inline-flex items-baseline gap-1.5 min-w-0 text-zg-meta leading-4" title={shown.title}>
-                <Crossfade activeKey={shown.text} variant="text" align="end" settle className="min-w-0 max-w-[8.5rem]">
-                  <span ref={syncShimmer} className="zg-shimmer block truncate font-medium" data-testid="row-state">
-                    {shown.text}
-                  </span>
-                </Crossfade>
-                {running && <RunTime sessionId={sessionId} />}
-              </span>
-            ) : (
-              <Ago at={updatedAt} className="zg-meta leading-4" />
-            )}
-          </Crossfade>
-        </HeldWidth>
-      </span>
-    );
-  }
-
-  /**
-   * Line 1's trailing slot. With run details (the default), what the run is doing and for how long, or
-   * "Needs you"; without, "Working". Fades out on hover / focus-within (`.zg-row-meta`) so it never fights
-   * the 3-dots trigger.
-   */
-  function RowMetaInner({ sessionId, updatedAt, details }: SidebarRowMetaProps) {
-    const running = useRunning(sessionId);
-    return details ? (
-      <LiveMeta sessionId={sessionId} running={running} updatedAt={updatedAt} />
-    ) : (
-      <PlainMeta sessionId={sessionId} running={running} updatedAt={updatedAt} />
-    );
-  }
-
-  /**
-   * Line 2: the session's badges (commits, pull requests, extension kinds), when it has some. A badge click
-   * selects the chat (`onSelect`) and opens the badge's panel focused on it.
-   */
-  function RowArtifactsInner({
-    sessionId,
-    enabled,
-    onArrival,
-    onSelect,
-    cwd,
-    hostId,
-    project,
-    environment,
-    cards = 'beside',
-  }: SidebarRowArtifactsProps) {
-    const openMenu = useBadgeMenu();
-    const host = useHost(hostId);
-    const server = hostId && host?.kind === 'server' ? host : undefined;
-    const onMenu = useMemo(
-      () =>
-        openMenu
-          ? (event: MouseEvent, badge: SessionBadgeEntry, row?: ExtensionSessionBadgeCardRow) =>
-              openMenu(event, sessionBadgeTarget(sessionId, badge, row), cwd ?? '')
-          : undefined,
-      [openMenu, sessionId, cwd],
-    );
-    const entry = useSessionBadges(badgesStore, sessionId, enabled);
-    const onOpen = useCallback(
-      (badge: SessionBadgeEntry, uri?: string) => {
-        openBadge?.(sessionId, badge.badge.panel, { kind: badge.kind, ...(uri ? { uri } : {}) });
-        onSelect?.(sessionId);
-      },
-      [sessionId, onSelect],
-    );
-    const fresh = useArrival(Math.max(0, ...Object.values(entry?.grewAt ?? {})));
-    useEffect(() => {
-      onArrival(fresh);
-    }, [fresh, onArrival]);
-    if (!server && !project && !environment && (!entry || entry.badges.length === 0)) return null;
-    return (
-      <BadgeLine
-        entry={entry}
-        host={server}
-        project={project}
-        environment={environment}
-        fresh={fresh}
-        cards={cards}
-        onOpen={onOpen}
-        {...(onMenu ? { onMenu } : {})}
-      />
-    );
-  }
-
-  const SessionStatusDot = memo(SessionStatusDotInner);
-  SessionStatusDot.displayName = 'SessionStatusDot';
-  const RowMeta = memo(RowMetaInner);
-  RowMeta.displayName = 'RowMeta';
-  const RowArtifacts = memo(RowArtifactsInner);
-  RowArtifacts.displayName = 'RowArtifacts';
-  return { useSessionDotState, SessionStatusDot, RowMeta, RowArtifacts };
-}

package/src/chat/sidebar/use-main-session.ts

@@ -1,32 +0,0 @@
-/**
- * The orchestration Main session (`ChatHost.sessions.main`): turning the
- * `orchestration` setting on creates it at once (pinned in the sidebar the
- * moment the toggle flips, not activated: the host's `onChanged` refreshes
- * the list), and the returned opener jumps to it (⌃⇧M), creating it when
- * missing. Off, or a host without it: the opener does nothing.
- */
-import { useCallback, useEffect } from 'react';
-
-import { useChatHost } from '../ChatProvider';
-
-/**
- * Creates the Main when orchestration turns on and returns its opener.
- *
- * @param enabled - The `orchestration` setting.
- * @param open - Opens a session by id.
- * @returns Opens the Main (a no-op while `enabled` is false).
- */
-export function useMainSession(enabled: boolean, open: (sessionId: string) => void): () => void {
-  const main = useChatHost().sessions?.main;
-  useEffect(() => {
-    if (enabled && main) void main().catch(() => undefined);
-  }, [enabled, main]);
-  return useCallback(() => {
-    if (!enabled || !main) return;
-    void main()
-      .then((sessionId) => {
-        if (sessionId) open(sessionId);
-      })
-      .catch(() => undefined);
-  }, [enabled, main, open]);
-}