zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/InteractionToolBody.tsx

@@ -1,193 +0,0 @@
-/**
- * The expanded body of a `present_plan`, `ask_user` or `todowrite` call,
- * rendered the way the Inbox and Todos panels render it instead of as JSON:
- * the plan's Markdown and steps with the decision taken, the questions with
- * the answers given, the todo list as that call set it.
- *
- * Reads the call's own input and its result (the serialized response:
- * `{ decision, comment }` / `{ answers, instructions }`). Anything it cannot
- * read falls back to `null`, and the caller shows the raw panels.
- */
-import type { AnswerValue, PlanPayload, PlanStep, QuestionPayload, TodoStatus } from 'zidane/chat';
-
-import type { ChatLabels } from '../headless/labels';
-import { AnsweredQuestions, PlanBody } from '../interactions';
-import { TodoListView } from '../../session/TodoList';
-import { useChatLabels } from '../useChatLabels';
-import { ProseMarkdown } from './ProseMarkdown';
-
-/** The call an {@link InteractionToolBody} draws. */
-export interface InteractionTool {
-  /** The tool's name (`present_plan`, `ask_user`, `todowrite`). */
-  name: string;
-  /** The call's id. */
-  id: string;
-  /** The call's arguments as the model sent them. */
-  rawInput?: Record<string, unknown>;
-  /** The call's result text (the serialized response); `null` while waiting. */
-  result: string | null;
-  /** Whether it succeeded; `null` while it runs. */
-  ok: boolean | null;
-}
-
-/**
- * The tools this body knows how to render.
- *
- * @param tool - The call's name and arguments.
- */
-export function hasInteractionBody(tool: Pick<InteractionTool, 'name' | 'rawInput'>): boolean {
-  if (!tool.rawInput) return false;
-  if (tool.name === 'present_plan') return typeof tool.rawInput.plan === 'string';
-  if (tool.name === 'ask_user') return Array.isArray(tool.rawInput.questions);
-  if (tool.name === 'todowrite') return Array.isArray(tool.rawInput.todos);
-  return false;
-}
-
-function parseResult(result: string | null): Record<string, unknown> | null {
-  if (!result) return null;
-  try {
-    const parsed: unknown = JSON.parse(result);
-    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? (parsed as Record<string, unknown>) : null;
-  } catch {
-    return null;
-  }
-}
-
-/**
- * The plan as the tool saw it. The row carries the model's raw arguments, and
- * models sometimes send `steps` as a JSON string that tool validation parses
- * before `execute`; parse it the same way and keep only well-formed steps.
- */
-function parsePlan(input: Record<string, unknown>): PlanPayload {
-  let raw = input.steps;
-  if (typeof raw === 'string') {
-    try {
-      raw = JSON.parse(raw);
-    } catch {
-      raw = undefined;
-    }
-  }
-  const steps: PlanStep[] = [];
-  for (const step of Array.isArray(raw) ? raw : []) {
-    if (!step || typeof step !== 'object') continue;
-    const { id, title, description } = step as Record<string, unknown>;
-    if (typeof id !== 'string' || typeof title !== 'string') continue;
-    steps.push({ id, title, ...(typeof description === 'string' ? { description } : {}) });
-  }
-  return {
-    title: typeof input.title === 'string' ? input.title : '',
-    plan: input.plan as string,
-    ...(steps.length > 0 ? { steps } : {}),
-  };
-}
-
-const DECISION: Record<string, { label: keyof ChatLabels; icon: string; tone: string }> = {
-  approve: { label: 'interactionApproved', icon: 'i-ph-check-circle-fill', tone: 'text-zg-success' },
-  revise: { label: 'interactionRevise', icon: 'i-ph-arrow-counter-clockwise', tone: 'text-zg-warn' },
-  reject: { label: 'interactionRejected', icon: 'i-ph-x-circle-fill', tone: 'text-zg-danger' },
-};
-
-/** A one-line outcome under an interaction: what the user decided, or that it is still waiting. */
-function Outcome({ icon, tone, label, note }: { icon: string; tone: string; label: string; note?: string }) {
-  return (
-    <div className="zg-tray flex flex-col gap-1.5 rounded-zg-md px-2.5 py-2">
-      <div className={`flex items-center gap-2 text-zg-ui font-medium ${tone}`}>
-        <span aria-hidden className={`${icon} text-zg-body shrink-0`} />
-        {label}
-      </div>
-      {note && (
-        <div className="pl-[22px] text-zg-ui leading-5 text-[var(--zg-text)] whitespace-pre-wrap zg-pretty">{note}</div>
-      )}
-    </div>
-  );
-}
-
-function waiting(tool: InteractionTool, label: string) {
-  return tool.ok === null ? (
-    <Outcome icon="i-ph-hourglass-medium" tone="text-[var(--zg-text-muted)]" label={label} />
-  ) : null;
-}
-
-/** Props for {@link InteractionToolBody}. */
-export interface InteractionToolBodyProps {
-  /** The call. */
-  tool: InteractionTool;
-}
-
-/**
- * The expanded body of a `present_plan`, `ask_user` or `todowrite` call (see the module comment); `null` for any other.
- *
- * @param props - The {@link InteractionToolBodyProps}.
- */
-export function InteractionToolBody({ tool }: InteractionToolBodyProps) {
-  const labels = useChatLabels();
-  if (!hasInteractionBody(tool)) return null;
-  const input = tool.rawInput!;
-  const response = parseResult(tool.result);
-
-  if (tool.name === 'present_plan') {
-    const payload = parsePlan(input);
-    const decision = typeof response?.decision === 'string' ? DECISION[response.decision] : undefined;
-    const comment = typeof response?.comment === 'string' ? response.comment : undefined;
-    return (
-      <div className="flex flex-col gap-3" data-testid="plan-body">
-        {payload.title && (
-          <div className="text-zg-ui font-semibold text-[var(--zg-text)] zg-balance">{payload.title}</div>
-        )}
-        <PlanBody payload={payload} Markdown={ProseMarkdown} />
-        {decision ? (
-          <Outcome icon={decision.icon} tone={decision.tone} label={labels[decision.label] as string} note={comment} />
-        ) : (
-          (waiting(tool, labels.interactionWaitingDecision) ??
-          (tool.result ? (
-            <Outcome icon="i-ph-minus-circle" tone="text-[var(--zg-text-muted)]" label={tool.result} />
-          ) : null))
-        )}
-      </div>
-    );
-  }
-
-  if (tool.name === 'ask_user') {
-    const payload = input as unknown as QuestionPayload;
-    const answers =
-      response?.answers && typeof response.answers === 'object'
-        ? (response.answers as Record<string, AnswerValue>)
-        : null;
-    const instructions = typeof response?.instructions === 'string' ? response.instructions : undefined;
-    return (
-      <div className="flex flex-col gap-3" data-testid="questions-body">
-        <AnsweredQuestions
-          payload={payload}
-          answers={answers ?? {}}
-          instructions={instructions}
-          id={tool.id}
-          Markdown={ProseMarkdown}
-        />
-        {!answers &&
-          (waiting(tool, labels.interactionWaitingAnswers) ??
-            (tool.result ? (
-              <Outcome
-                icon="i-ph-minus-circle"
-                tone="text-[var(--zg-text-muted)]"
-                label={labels.interactionDismissed}
-              />
-            ) : null))}
-      </div>
-    );
-  }
-
-  const todos = (input.todos as { id?: unknown; content?: unknown; status?: unknown }[])
-    .filter((t) => typeof t.content === 'string')
-    .map((t, i) => ({
-      id: typeof t.id === 'string' ? t.id : String(i),
-      content: t.content as string,
-      status: (['pending', 'in_progress', 'completed', 'cancelled'].includes(t.status as string)
-        ? t.status
-        : 'pending') as TodoStatus,
-    }));
-  return (
-    <div data-testid="todos-body">
-      <TodoListView items={todos} />
-    </div>
-  );
-}

package/src/chat/transcript/LazyRow.tsx

@@ -1,311 +0,0 @@
-/**
- * A transcript row that mounts its content on approach.
- *
- * `content-visibility: auto` already skips layout and paint for offscreen
- * rows, but React still RENDERS every one: parsing its markdown, building
- * its DOM. Without this, a page of history prepending (a couple hundred
- * rows at once) would be one long frame, and the DOM of a long session
- * would grow with rows the user never looked at. Until a row comes within `MARGIN` of the viewport it is
- * an empty box at its estimated height; once mounted it stays mounted
- * (expanded state, selection and the browser's remembered size survive).
- *
- * The tail of the transcript mounts eagerly so opening a session paints
- * real rows on the first frame, and ⌘F search mounts everything while a
- * needle is active (it walks the DOM's text, `useTranscriptSearch`).
- * Height corrections when a row mounts above the view are absorbed by the
- * scroller's anchoring (`useStickToBottom`), like a row's first paint.
- *
- * Two distances. Rows entering the far margin queue up, and each frame
- * mounts the nearest until `BUDGET_MS` is spent: a flick that brings twenty
- * rows into the margin spreads them over a few frames. Rows within a
- * viewport of the view mount at once, whatever the budget: a row must never
- * reach the screen as a blank placeholder, nor change height in view (the
- * view would reflow under the reader). Rows mounted from the queue tell
- * their content (`useBackgroundMount`) so long text may reveal over a few
- * frames; rows mounted near the view render whole.
- */
-import {
-  createContext,
-  type CSSProperties,
-  type ReactNode,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from 'react';
-import { flushSync } from 'react-dom';
-
-import { scrollRootOf } from '../../hooks/useNearViewport';
-
-/** Far enough ahead that a fast flick finds rows mounted before they arrive. */
-const MARGIN = '2500px 0px';
-/** Within this, a row mounts right away. */
-const NEAR_MARGIN = '100% 0px';
-/** Main-thread time a frame may spend mounting rows ahead of the view. */
-const BUDGET_MS = 6;
-
-const queue = new Map<Element, Mount>();
-let pumpScheduled = false;
-/** Per scroll root: the far (queue) and near (mount now) observers. */
-const observersByRoot = new WeakMap<Element | Document, [IntersectionObserver, IntersectionObserver]>();
-const observedBy = new WeakMap<Element, [IntersectionObserver, IntersectionObserver]>();
-
-function mountNow(targets: Element[]): void {
-  const mounts: Mount[] = [];
-  for (const target of targets) {
-    const mount = pendingMounts.get(target);
-    if (!mount) continue;
-    forget(target);
-    mounts.push(mount);
-  }
-  if (mounts.length > 0) flushSync(() => mounts.forEach((mount) => mount(false)));
-}
-
-function lazyObservers(root: Element | null): [IntersectionObserver, IntersectionObserver] {
-  const key = root ?? document;
-  const hit = observersByRoot.get(key);
-  if (hit) return hit;
-  const far = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (!entry.isIntersecting) continue;
-        const mount = pendingMounts.get(entry.target);
-        if (mount) queue.set(entry.target, mount);
-      }
-      schedulePump();
-    },
-    { root, rootMargin: MARGIN },
-  );
-  const near = new IntersectionObserver(
-    (entries) => mountNow(entries.filter((entry) => entry.isIntersecting).map((entry) => entry.target)),
-    { root, rootMargin: NEAR_MARGIN },
-  );
-  const pair: [IntersectionObserver, IntersectionObserver] = [far, near];
-  observersByRoot.set(key, pair);
-  return pair;
-}
-
-function forget(target: Element): void {
-  pendingMounts.delete(target);
-  queue.delete(target);
-  const pair = observedBy.get(target);
-  observedBy.delete(target);
-  pair?.[0].unobserve(target);
-  pair?.[1].unobserve(target);
-}
-
-/** `background`: mounted from the queue, ahead of the view. */
-type Mount = (background: boolean) => void;
-
-/** Observed rows and how to mount them; moved into `queue` once they enter the margin. */
-const pendingMounts = new WeakMap<Element, Mount>();
-
-/**
- * Mount a lazy row's content now, wherever it is: a view putting its place
- * back (`useStickToBottom`'s `restorePosition`) lands on rows it never
- * came near. A row already mounted, or not a lazy row, is left alone. Call
- * it outside React's render and effects: it commits synchronously.
- *
- * @param row - The row's element, the wrapper `LazyRow` renders.
- */
-export function mountRowNow(row: Element): void {
-  mountNow([row]);
-}
-
-function schedulePump(): void {
-  if (pumpScheduled || queue.size === 0) return;
-  pumpScheduled = true;
-  // Right after the next paint: the work lands between frames, on a clean layout.
-  requestAnimationFrame(() => setTimeout(pump, 0));
-}
-
-/**
- * Distance from the visible part of the row's scroll root (0 = in view), and that view's height.
- * `views` keeps each root's top and bottom for one pump: a root is measured once, not per row.
- */
-function distanceToView(el: Element, views: Map<Element | null, readonly [number, number]>): [number, number] {
-  const r = el.getBoundingClientRect();
-  const root = scrollRootOf(el);
-  let view = views.get(root);
-  if (!view) {
-    const rect = root?.getBoundingClientRect();
-    view = rect ? [rect.top, rect.bottom] : [0, window.innerHeight];
-    views.set(root, view);
-  }
-  const [top, bottom] = view;
-  const distance = r.bottom >= top && r.top <= bottom ? 0 : r.top > bottom ? r.top - bottom : top - r.bottom;
-  return [distance, bottom - top];
-}
-
-function pump(): void {
-  pumpScheduled = false;
-  const views = new Map<Element | null, readonly [number, number]>();
-  const order = [...queue.keys()]
-    .filter((el) => el.isConnected)
-    .map((el) => [el, ...distanceToView(el, views)] as const)
-    .sort((a, b) => a[1] - b[1]);
-  // Within a viewport: now, whatever the budget (the near observer may not have reported yet).
-  const isNear = ([, distance, view]: readonly [Element, number, number]) => distance <= view;
-  mountNow(order.filter(isNear).map(([el]) => el));
-  const start = performance.now();
-  for (const entry of order) {
-    if (isNear(entry)) continue;
-    const el = entry[0];
-    if (performance.now() - start > BUDGET_MS) break;
-    const mount = queue.get(el);
-    forget(el);
-    if (mount) flushSync(() => mount(true));
-  }
-  for (const el of queue.keys()) if (!el.isConnected) queue.delete(el);
-  schedulePump();
-}
-
-/** How many active searches want every row mounted; any one is enough. */
-let forceHolds = 0;
-const subscribers = new Set<() => void>();
-
-/** Every lazy row mounts while held (and stays mounted after release). Returns the release. */
-export function holdForceMountRows(): () => void {
-  forceHolds++;
-  if (forceHolds === 1) for (const notify of subscribers) notify();
-  let released = false;
-  return () => {
-    if (released) return;
-    released = true;
-    forceHolds--;
-    if (forceHolds === 0) for (const notify of subscribers) notify();
-  };
-}
-
-function subscribe(notify: () => void): () => void {
-  subscribers.add(notify);
-  return () => subscribers.delete(notify);
-}
-
-const getForced = () => forceHolds > 0;
-
-/** Returns whether every lazy row must be mounted now, for example while a search needle is active. */
-export function useForceMountRows(): boolean {
-  return useSyncExternalStore(subscribe, getForced, getForced);
-}
-
-/**
- * True while the transcript is first painting a conversation (switching to
- * it, or its history landing). Rows mounted then were already there: they
- * must not play their enter animation.
- */
-export const TranscriptSettling = createContext<() => boolean>(() => false);
-
-/** Props for {@link CvRow}. */
-export interface CvRowProps {
-  /** Inline style for the row's wrapper, usually its content-visibility sizing. */
-  style: CSSProperties;
-  /** The row's content. */
-  children: ReactNode;
-  /** The select-turn stop the row belongs to. Set only in select mode; makes the row a hover and click target. */
-  'data-stop'?: string;
-  /** Marks the row as part of the selected stop, so the select cursor can find it. */
-  'data-sel'?: string;
-  /** The row's id (`Row.id`): how a view that left the transcript finds its place again (`useStickToBottom`'s `restorePosition`). */
-  'data-row'?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * Renders a transcript row that is always mounted, such as a row inside an open fold or a subagent block.
- *
- * @param props - Row props: `style`, `children`, the select-mode data attributes and the row's id.
- */
-export function CvRow({ style, children, className, ...rest }: CvRowProps) {
-  const settling = useContext(TranscriptSettling);
-  const [quiet] = useState(settling);
-  return (
-    <div
-      className={['zg-cv-row', className].filter(Boolean).join(' ')}
-      style={style}
-      data-quiet={quiet ? '' : undefined}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
-
-const BackgroundMount = createContext(false);
-
-/** True inside a row mounted ahead of the view, where content may render over a few frames. */
-export function useBackgroundMount(): boolean {
-  return useContext(BackgroundMount);
-}
-
-/** Props for {@link LazyRow}. */
-export interface LazyRowProps {
-  /** Mounts the content at once instead of waiting for the row to approach. Used for the tail of the transcript. */
-  eager: boolean;
-  /** Height in pixels of the placeholder box before the content mounts. */
-  estimatePx: number;
-  /** Inline style for the row's wrapper, usually its content-visibility sizing. */
-  style: CSSProperties;
-  /** The row's content. */
-  children: ReactNode;
-  /** The select-turn stop the row belongs to. Set only in select mode; makes the row a hover and click target. */
-  'data-stop'?: string;
-  /** Marks the row as part of the selected stop, so the select cursor can find it. */
-  'data-sel'?: string;
-  /** The row's id (`Row.id`): how a view that left the transcript finds its place again (`useStickToBottom`'s `restorePosition`). */
-  'data-row'?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-}
-
-/**
- * Renders a transcript row that mounts its content only when it nears the viewport. Until then it is an empty box at its estimated height; once mounted it stays mounted.
- *
- * @param props - Row props: `eager`, `estimatePx`, `style`, `children`, the select-mode data attributes and the row's id.
- */
-export function LazyRow({ eager, estimatePx, style, children, className, ...rest }: LazyRowProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const force = useForceMountRows();
-  const [near, setNear] = useState(eager);
-  const [background, setBackground] = useState(false);
-  // Mounted from the queue (history arriving as you scroll) or with the
-  // conversation itself, not as a new row: no enter animation.
-  const settling = useContext(TranscriptSettling);
-  const [quiet] = useState(() => !eager || settling());
-  // Sticky: a row mounted by search stays mounted when the needle clears.
-  if (force && !near) setNear(true);
-  const mounted = near || force;
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || mounted) return undefined;
-    if (typeof IntersectionObserver === 'undefined') {
-      setNear(true);
-      return undefined;
-    }
-    const pair = lazyObservers(scrollRootOf(el));
-    const [far, close] = pair;
-    observedBy.set(el, pair);
-    pendingMounts.set(el, (bg) => {
-      setBackground(bg);
-      setNear(true);
-    });
-    far.observe(el);
-    close.observe(el);
-    return () => forget(el);
-  }, [mounted]);
-  return (
-    <div
-      ref={ref}
-      className={['zg-cv-row', className].filter(Boolean).join(' ')}
-      style={mounted ? style : { ...style, height: estimatePx }}
-      data-lazy={mounted ? undefined : ''}
-      data-quiet={quiet ? '' : undefined}
-      {...rest}
-    >
-      {mounted ? <BackgroundMount.Provider value={background}>{children}</BackgroundMount.Provider> : null}
-    </div>
-  );
-}

package/src/chat/transcript/PromptEcho.tsx

@@ -1,171 +0,0 @@
-import { useContext } from 'react';
-import { inferPromptRefs, splitPromptSegments, tidyPromptText, type PromptSegmentRef } from 'zidane/chat/pure';
-
-import { commandRef, urlRefs } from '../headless/badge-refs';
-import { chipForPath } from '../headless/file-chip';
-import { useChatLabels } from '../useChatLabels';
-import { BADGE_GLYPH, FileBadgeIcon, fileBadgeName, LinkBadge } from './badges';
-import { useBadgeMenu } from './BadgeMenu';
-import { ChipHover } from './ChipCard';
-import { CommandCard, SessionCard, SkillCard } from './ChipCards';
-import { MarkdownContext } from './markdown-context';
-import { PromptLines } from './prompt-lines';
-import { ReferenceChip } from './ReferenceText';
-import { useReferenceMatches } from './references';
-
-/**
- * A submitted prompt as typed: its lines as the composer lays them out
- * (`PromptLines`, the bubble keeps whitespace),
- * with the composer's badges around its references (files, skills, links,
- * and a command invocation's `/name`), so a prompt reads the same sent as
- * typed. Badges are atomic inline boxes, so wrapping leaves them whole.
- * An app's transcript `Prompt` slot.
- */
-export interface PromptEchoProps {
-  /** The prompt as sent. */
-  text: string;
-  /** What the composer marked in it (files, skills, links); inferred when absent. */
-  refs?: readonly PromptSegmentRef[];
-  /** A command invocation (`/fix conflicts now`): its command (`/fix conflicts`) is a badge. */
-  command?: boolean;
-  /**
-   * Reads a command's fixed arguments (`conflicts`), so `/fix conflicts` reads as one badge. A hook,
-   * called on every render: pass a stable one. Absent: the command name alone is the badge.
-   */
-  useCommandArgs?: (name: string | null) => ReadonlySet<string>;
-}
-
-const NO_ARGS: ReadonlySet<string> = new Set();
-const noCommandArgs = () => NO_ARGS;
-
-/**
- * A sent prompt with the composer's badges (see above).
- *
- * @param props - The {@link PromptEchoProps}.
- */
-export function PromptEcho({ text: raw, refs, command = false, useCommandArgs = noCommandArgs }: PromptEchoProps) {
-  // An event without refs (an older window's echo, an older replay) still gets its file chips.
-  const { text, refs: typed } = tidyPromptText(raw, refs && refs.length > 0 ? refs : inferPromptRefs(raw));
-  const commandName = command ? (/^\/([\w][\w:.-]*)/.exec(text)?.[1] ?? null) : null;
-  const args = useCommandArgs(commandName);
-  const name = commandName ? commandRef(text, args) : null;
-  const { cwd } = useContext(MarkdownContext);
-  // Extension references (a ticket id, an issue URL): tagged with their provider and key.
-  const references = useReferenceMatches(text, cwd, 'prompt').map((m) => ({
-    start: m.start,
-    end: m.end,
-    providerId: [m.providerId, m.key, m.placeholder ?? '', m.placeholderIcon?.gui ?? '']
-      .map((v) => `${REFERENCE_TAG}${v}`)
-      .join(''),
-  }));
-  // Overlaps resolve to the earlier ref (`splitPromptSegments`): a typed ref wins over a
-  // reference, a reference over a found link (the link badge stays its fallback).
-  const spans = [...(name ? [name] : []), ...typed, ...references, ...urlRefs(text)];
-  if (spans.length === 0) {
-    return <PromptLines items={[text]} />;
-  }
-
-  return (
-    <PromptLines
-      items={splitPromptSegments(text, spans).map((seg, idx) =>
-        // Index keys: segments are stable across renders because the upstream user-prompt event is append-only.
-        seg.kind === 'plain' ? (
-          seg.text
-        ) : (
-          <PromptBadge key={idx} text={seg.text} providerId={seg.providerId} cwd={cwd} />
-        ),
-      )}
-    />
-  );
-}
-
-/** Separates `ref`, the provider id and the key in a reference span's `providerId`. */
-const REFERENCE_TAG = '\u0000';
-
-function PromptBadge({ text, providerId, cwd }: { text: string; providerId: string; cwd: string | null }) {
-  const labels = useChatLabels();
-  const openMenu = useBadgeMenu();
-  if (providerId.startsWith(REFERENCE_TAG)) {
-    const [, id = '', key = '', placeholder = '', placeholderIcon = ''] = providerId.split(REFERENCE_TAG);
-    return (
-      <ReferenceChip
-        cwd={cwd}
-        providerId={id}
-        refKey={key}
-        text={text}
-        {...(placeholder ? { placeholder } : {})}
-        {...(placeholderIcon ? { placeholderIcon: { gui: placeholderIcon } } : {})}
-        fallback={/^https?:\/\//.test(text) ? <LinkBadge url={text} cwd={cwd} /> : <span>{text}</span>}
-      />
-    );
-  }
-  switch (providerId) {
-    case 'files': {
-      /*
-       * Sent as `@<full/path>` so the agent has the canonical reference;
-       * shown as the name, with the path on hover (the full path drowns a
-       * bubble, and the badge's role here is "what file").
-       */
-      const chip = chipForPath(text.replace(/^@/, ''));
-      const abs = chip.path.startsWith('/') ? chip.path : cwd ? `${cwd.replace(/\/$/, '')}/${chip.path}` : null;
-      return (
-        <span
-          className="zg-badge"
-          data-kind="file"
-          title={chip.path}
-          onContextMenu={
-            openMenu
-              ? (e) => openMenu(e, { kind: 'file', text: fileBadgeName(chip), ...(abs ? { href: abs } : {}) }, cwd)
-              : undefined
-          }
-        >
-          <FileBadgeIcon chip={chip} />
-          <span className="zg-badge-code">{fileBadgeName(chip)}</span>
-        </span>
-      );
-    }
-    case 'urls':
-      return <LinkBadge url={text} cwd={cwd} />;
-    case 'skills':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipSkill(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.skill}`} data-kind="skill">
-              {text}
-            </span>
-          )}
-        >
-          <SkillCard cwd={cwd} text={text} />
-        </ChipHover>
-      );
-    case 'commands':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipCommand(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.command}`} data-kind="command">
-              {text}
-            </span>
-          )}
-        >
-          <CommandCard cwd={cwd} text={text} />
-        </ChipHover>
-      );
-    case 'chats':
-      return (
-        <ChipHover
-          ariaLabel={labels.chipChat(text)}
-          trigger={(props) => (
-            <span {...props} className={`zg-badge ${BADGE_GLYPH.chat}`} data-kind="chat">
-              {text}
-            </span>
-          )}
-        >
-          <SessionCard token={text} />
-        </ChipHover>
-      );
-    default:
-      return <span className="zg-badge">{text}</span>;
-  }
-}