zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/fold-attachments.tsx

@@ -1,221 +0,0 @@
-/**
- * Compact density's attachments strip, under the "Working" row: the images
- * the exchange's tool calls returned (`foldAttachments`), newest first.
- *
- *   [ newest ][ ... ][ ... ][ +N ]
- *
- * Up to {@link STRIP_SIZE} tiles. With more images, the last slot is the
- * count tile: it stands for every image the strip has no room for, covered
- * by the most recent of them.
- *
- * Motion (`Grow axis="x"`, the kit's motion vocabulary): a new image slides
- * in from the left while its slot widens, pushing the others right. The
- * tile pushed past the last slot slips under the count tile, whose number
- * rolls up and whose cover fades to the image it just took in. Images the
- * strip showed on its first render are already in place (a conversation
- * opening, a row scrolled back into view), so only later ones move. With
- * motion off, everything lands at once.
- *
- * Every tile opens the lightbox, which steps through all the images in the
- * strip's order: left to right, then on into the ones the count tile holds.
- * Cost: a tile shows a small thumbnail of its image, made once off the main
- * thread at low priority (`thumbnails.ts`), never the full image decoded at
- * 64px, which stalled scrolling past screenshots; the strip is a
- * containment boundary, so a tile's slide lays out the strip alone; the
- * fold hands it the same list until an image changes, so stream ticks skip
- * it; the lightbox's gallery is built on click. An image that fails to load
- * leaves the strip and the gallery, never a broken-image glyph.
- */
-import { memo, useMemo, useState, type CSSProperties } from 'react';
-
-import { type LightboxItem, useLightbox } from '../../components/Lightbox';
-import { Grow, GrowPresence } from '../../motion/grow';
-import { RollingText } from '../../motion/roll';
-import type { FoldAttachment } from '../headless/transcript/fold-attachments';
-import { useChatLabels } from '../useChatLabels';
-import { useTranscriptActions } from './actions';
-import { useThumbnail } from './thumbnails';
-
-/** A tile's side, in CSS pixels (`w-16 h-16`): what its thumbnail is made for. */
-const TILE_PX = 64;
-/** How many slots the strip has; with more images, the last one is the count tile. */
-const STRIP_SIZE = 4;
-const NO_FAILURES: ReadonlySet<string> = new Set();
-const NOTHING_HIDDEN: readonly FoldAttachment[] = [];
-
-/** A tile's button. The focus ring is inset: the sliding slot clips sideways. */
-const TILE =
-  'zg-tray zg-press-subtle relative block w-16 h-16 shrink-0 p-0 border-0 overflow-hidden rounded-zg-md cursor-zoom-in focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]';
-
-/**
- * The strip's slots: the images that get a tile, newest first, and the ones
- * the count tile stands for, newest first.
- *
- * @param images - The images on show, oldest first.
- */
-function stripLayout(images: readonly FoldAttachment[]): {
-  tiles: readonly FoldAttachment[];
-  hidden: readonly FoldAttachment[];
-} {
-  const newest = [...images].reverse();
-  if (newest.length <= STRIP_SIZE) return { tiles: newest, hidden: NOTHING_HIDDEN };
-  return { tiles: newest.slice(0, STRIP_SIZE - 1), hidden: newest.slice(STRIP_SIZE - 1) };
-}
-
-/** Props for {@link FoldAttachments}. */
-export interface FoldAttachmentsProps {
-  /** The images, oldest first (`foldAttachments`). New ones arrive at the end. */
-  attachments: readonly FoldAttachment[];
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the images an exchange's tool calls returned as a strip of thumbnails, newest first, the last slot counting the rest; every tile opens the lightbox. Renders nothing without images or when the app serves no tool media (`TranscriptActions.toolMediaUrl`).
- *
- * @param props - Component props: the `attachments` to show.
- */
-export const FoldAttachments = memo(({ attachments, className, style }: FoldAttachmentsProps) => {
-  const labels = useChatLabels();
-  const { toolMediaUrl } = useTranscriptActions();
-  const lightbox = useLightbox();
-  const [failed, setFailed] = useState(NO_FAILURES);
-  // What the first render showed is already in place: only images that arrive later slide in.
-  const [initial] = useState(() => ({
-    keys: new Set(attachments.map((a) => a.key)),
-    counted: attachments.length > STRIP_SIZE,
-  }));
-  const { tiles, hidden } = useMemo(
-    () => stripLayout(failed.size > 0 ? attachments.filter((a) => !failed.has(a.key)) : attachments),
-    [attachments, failed],
-  );
-  if (!toolMediaUrl || tiles.length === 0) return null;
-
-  const src = (a: FoldAttachment) => toolMediaUrl(a.callId, a.index);
-  const fail = (key: string) => setFailed((prev) => new Set(prev).add(key));
-  // The gallery follows the strip: left to right, then the images the count tile holds.
-  const open = (index: number, origin: HTMLElement) =>
-    lightbox.open(
-      [...tiles, ...hidden].map((a): LightboxItem => ({ key: a.key, name: a.label, src: src(a) })),
-      index,
-      origin,
-    );
-  const cover = hidden[0];
-
-  return (
-    <div
-      role="group"
-      aria-label={labels.toolAttachments}
-      className={['zg-fold-attachments flex', className].filter(Boolean).join(' ')}
-      style={style}
-      data-testid="fold-attachments"
-    >
-      <GrowPresence initial={false}>
-        {tiles.map((a, i) => (
-          // The gap is inside the slot, so it opens and closes with the tile.
-          <Grow key={a.key} axis="x" appear={!initial.keys.has(a.key)}>
-            <div className="pr-1.5">
-              <button
-                type="button"
-                aria-label={labels.viewAttachment(a.label)}
-                title={a.label}
-                onClick={(event) => open(i, event.currentTarget)}
-                className={TILE}
-              >
-                <TileImage src={src(a)} onError={() => fail(a.key)} />
-              </button>
-            </div>
-          </Grow>
-        ))}
-        {cover && (
-          <Grow key="more" axis="x" appear={!initial.counted}>
-            <CountTile
-              cover={cover}
-              count={hidden.length}
-              src={src(cover)}
-              onOpen={(origin) => open(tiles.length, origin)}
-              onError={() => fail(cover.key)}
-            />
-          </Grow>
-        )}
-      </GrowPresence>
-      {lightbox.element}
-    </div>
-  );
-});
-
-/** Props for {@link CountTile}. */
-interface CountTileProps {
-  /** The most recent image the tile stands for: its cover. */
-  cover: FoldAttachment;
-  /** How many images the tile stands for. */
-  count: number;
-  /** The cover's address. */
-  src: string;
-  /** Opens the lightbox on the cover, from the tile. */
-  onOpen: (origin: HTMLElement) => void;
-  /** The cover failed to load. */
-  onError: () => void;
-}
-
-/**
- * The strip's last slot: "+N" over the most recent image it stands for. The
- * number rolls as images are pushed in; a new cover fades in over the tray.
- */
-function CountTile({ cover, count, src, onOpen, onError }: CountTileProps) {
-  const labels = useChatLabels();
-  // The cover it mounted with is already there; each one pushed in after it fades in.
-  const [firstCover] = useState(cover.key);
-  return (
-    <button
-      type="button"
-      aria-label={labels.showMoreAttachments(count)}
-      onClick={(event) => onOpen(event.currentTarget)}
-      className={TILE}
-    >
-      <TileImage
-        key={cover.key}
-        src={src}
-        onError={onError}
-        className={cover.key === firstCover ? undefined : 'zg-fold-attachments-cover'}
-      />
-      <span
-        aria-hidden
-        data-testid="fold-attachments-more"
-        className="zg-scrim absolute inset-0 flex items-center justify-center text-sm font-medium tabular-nums text-white"
-      >
-        <RollingText text={labels.moreAttachments(count)} value={count} />
-      </span>
-    </button>
-  );
-}
-
-/** Props for {@link TileImage}. */
-interface TileImageProps {
-  /** The full image's address. */
-  src: string;
-  /** The image failed to load. */
-  onError: () => void;
-  /** Extra classes on the image. */
-  className?: string;
-}
-
-/**
- * A tile's image: its small thumbnail (`useThumbnail`), never the full image
- * decoded at 64px. Until the thumbnail is ready the tile shows its tray.
- */
-function TileImage({ src, onError, className }: TileImageProps) {
-  const thumbnail = useThumbnail(src, TILE_PX);
-  if (thumbnail === null) return null;
-  return (
-    <img
-      src={thumbnail}
-      alt=""
-      decoding="async"
-      onError={onError}
-      className={['block w-full h-full object-cover', className].filter(Boolean).join(' ')}
-    />
-  );
-}

package/src/chat/transcript/fold-status.tsx

@@ -1,112 +0,0 @@
-/**
- * The live work row's status (compact density's exchange fold, while its run
- * goes): "Retrying 2/3" during a provider retry, "Waiting for the model"
- * once nothing has moved on screen for `RUN_WAITING_DELAY_MS`, else the
- * fold's usual "Working". How long the status has lasted shows in a hairline
- * chip after the words, from `RUN_STATUS_TIME_MS`. Same rule and timing as
- * the TUI's live fold (`runFoldStatus` in `zidane/chat/pure`).
- *
- * The transcript hands the status to its live fold only, so the clock
- * re-renders that one header and every settled fold keeps its element.
- */
-import { memo, useEffect, useState, type CSSProperties } from 'react';
-import {
-  formatElapsed,
-  type LiveRunStatus,
-  RUN_STATUS_TIME_MS,
-  runFoldStatus,
-  type RunFoldStatus,
-  runStatusKey,
-} from 'zidane/chat/pure';
-
-import { RollingText } from '../../motion/roll';
-import { SmoothWidth } from '../../motion/size';
-import { Presence } from '../../motion/swap';
-
-/** How often the status clock ticks: often enough that the seconds read smoothly. */
-const TICK_MS = 250;
-
-/**
- * Time since `key` last changed, in ms, ticking while it is set; `null`
- * while it is `null` and until the first tick. A new key starts a new count.
- */
-function useSinceMs(key: string | null): number | null {
-  const [clock, setClock] = useState<{ key: string; elapsed: number } | null>(null);
-  useEffect(() => {
-    if (key === null) return undefined;
-    const since = Date.now();
-    const timer = setInterval(() => setClock({ key, elapsed: Date.now() - since }), TICK_MS);
-    return () => {
-      clearInterval(timer);
-      // The next status must not start from this one's clock.
-      setClock(null);
-    };
-  }, [key]);
-  return key !== null && clock?.key === key ? clock.elapsed : null;
-}
-
-/** The live fold's status and how long it has lasted. */
-export interface LiveFoldStatus {
-  /** What the run is doing, by the shared rule (`runFoldStatus`). */
-  status: RunFoldStatus;
-  /** Whole seconds the status has lasted, once that reaches `RUN_STATUS_TIME_MS`; `null` before and while working. */
-  elapsedSec: number | null;
-}
-
-const WORKING: LiveFoldStatus = { status: { kind: 'working' }, elapsedSec: null };
-
-/**
- * The live fold's status from its transcript's `LiveRunStatus`. Without one
- * (a settled fold, or a transcript not opted in) the fold is working.
- *
- * @param source - The live run's status, set on the transcript's live fold only.
- */
-export function useLiveFoldStatus(source: LiveRunStatus | undefined): LiveFoldStatus {
-  const sinceMs = useSinceMs(source ? runStatusKey(source) : null);
-  if (!source) return WORKING;
-  const status = runFoldStatus({ retry: source.retry, waitedMs: source.retry ? null : sinceMs });
-  if (status.kind === 'working') return WORKING;
-  return {
-    status,
-    elapsedSec: sinceMs !== null && sinceMs >= RUN_STATUS_TIME_MS ? Math.floor(sinceMs / 1000) : null,
-  };
-}
-
-/** Props for {@link FoldStatusTime}. */
-export interface FoldStatusTimeProps {
-  /** Whole seconds the status has lasted, or `null` to hide the chip. */
-  elapsedSec: number | null;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * How long the live fold's status has lasted, as a hairline chip after the
- * header's words (the chip of a settled fold's outcomes). The digits roll and
- * the chip eases to its width; it fades in when the time starts to show and
- * out with the status, keeping its last value through the exit.
- *
- * @param props - Component props.
- * @param props.elapsedSec - Whole seconds the status has lasted, or `null` to hide the chip.
- */
-export const FoldStatusTime = memo(function FoldStatusTime({ elapsedSec, className, style }: FoldStatusTimeProps) {
-  const [last, setLast] = useState(elapsedSec ?? 0);
-  if (elapsedSec !== null && elapsedSec !== last) setLast(elapsedSec);
-  const sec = elapsedSec ?? last;
-  return (
-    <Presence
-      show={elapsedSec !== null}
-      className={['shrink-0 self-center', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      {/* Out of the live region: a count read aloud every second is noise. */}
-      <span aria-hidden data-testid="fold-status-time" className="zg-fold-outcomes zg-meta tabular-nums px-1.5">
-        <SmoothWidth>
-          <RollingText text={formatElapsed(sec)} value={sec} />
-        </SmoothWidth>
-      </span>
-    </Presence>
-  );
-});

package/src/chat/transcript/fold-worker.tsx

@@ -1,160 +0,0 @@
-/**
- * A worker step of the exchange fold, opened: the task it was given (one
- * quiet step opening onto the task and the settings it ran with), then its
- * own progress folded like an exchange. Before it starts (every agent slot
- * taken), the task and a badge saying what it waits for.
- */
-import { useMemo, useState } from 'react';
-
-import { useStaysMounted } from '../../motion/collapse';
-import { clusterByOwner, foldWorkerRows, type Cluster, type FoldActionItem, type Row } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useModelName } from './actions';
-import { Caret } from './frame';
-import { useTranscriptRenderers } from './renderers';
-
-/** Props for {@link WorkerDetails}. */
-export interface WorkerDetailsProps {
-  /** The fold step for the worker. Its `workerRows` hold the worker's lifecycle markers and output. */
-  item: FoldActionItem;
-  /** Renders the worker's folded clusters with the transcript's row components. */
-  renderRows: (c: readonly Cluster[]) => React.ReactNode[];
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: React.CSSProperties;
-}
-
-/**
- * A worker, opened: what it was asked (the Task step, closed by default),
- * then its own progress folded like an exchange (`foldWorkerRows`): its
- * calls behind one "Working" row, earlier messages stacked behind one
- * group, its last message in full. No second "Agent" block: the fold line
- * above already is the agent.
- *
- * @param props - Component props: the worker `item` and `renderRows`.
- */
-export function WorkerDetails({ item, renderRows, className, style }: WorkerDetailsProps) {
-  const labels = useChatLabels();
-  const rows = item.workerRows ?? [];
-  const start = rows.find((r): r is Extract<Row, { kind: 'spawn-start' }> => r.kind === 'spawn-start');
-  const own = start?.childId ?? rows.map((r) => ('childId' in r ? r.childId : undefined)).find(Boolean);
-  const live = item.state === 'running';
-  const clusters = useMemo(
-    () => (own ? clusterByOwner(foldWorkerRows(rows, own, live)) : clusterByOwner(rows)),
-    [rows, own, live],
-  );
-  const input = item.tool?.rawInput;
-  const task = stringField(input, 'task') ?? start?.spawn?.prompt ?? start?.spawn?.task ?? start?.text ?? '';
-  return (
-    <div className={['flex flex-col', className].filter(Boolean).join(' ')} style={style}>
-      <TaskStep
-        task={task}
-        type={stringField(input, 'subagent_type')}
-        resume={stringField(input, 'resume')}
-        system={stringField(input, 'system')}
-      />
-      {item.waitingFor ? (
-        <span
-          data-testid="worker-waiting"
-          className="zg-track-chip self-start inline-flex items-center gap-1.5 h-[22px] px-2.5 text-xs text-[var(--zg-text-muted)]"
-        >
-          <span aria-hidden className="i-ph-pause-fill text-[10px] text-[var(--zg-text-subtle)]" />
-          {labels.waitingForSlot(item.waitingFor.max)}
-        </span>
-      ) : (
-        <div className="text-xs">{renderRows(clusters)}</div>
-      )}
-    </div>
-  );
-}
-
-function stringField(input: Record<string, unknown> | undefined, key: string): string | undefined {
-  const v = input?.[key];
-  return typeof v === 'string' && v.trim() !== '' ? v : undefined;
-}
-
-/**
- * What a worker was asked, as a step of its own: one quiet line, opening
- * onto the task as prose and the settings it ran with (model, type, whether
- * it resumes another worker, a replaced system prompt).
- */
-function TaskStep({
-  task,
-  model,
-  type,
-  resume,
-  system,
-}: {
-  task: string;
-  model?: string;
-  type?: string;
-  resume?: string;
-  system?: string;
-}) {
-  const labels = useChatLabels();
-  const modelName = useModelName();
-  const { Markdown } = useTranscriptRenderers();
-  const [open, setOpen] = useState(false);
-  const mounted = useStaysMounted(open);
-  const first = task.split('\n').find((line) => line.trim()) ?? '';
-  const settings: [string, string][] = [
-    ...(model ? ([[labels.workerModel, modelName(model)]] as [string, string][]) : []),
-    ...(type ? ([[labels.workerType, type]] as [string, string][]) : []),
-    ...(resume ? ([[labels.workerContinues, resume]] as [string, string][]) : []),
-    ...(system ? ([[labels.workerSystemPrompt, labels.workerSystemReplaced]] as [string, string][]) : []),
-  ];
-  return (
-    <div className="pb-1.5" data-testid="worker-task">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        aria-expanded={open}
-        className="group/action zg-disclosure zg-press-subtle flex items-center gap-3 w-fit max-w-full h-[22.4px] min-w-0 text-[14px] leading-[1.6] text-[var(--zg-text-muted)] -mx-1.5 px-1.5 rounded-[var(--zg-radius-sm)] text-left"
-      >
-        <span aria-hidden className="w-4 shrink-0 inline-flex items-center justify-center">
-          <span className="i-ph-note-blank text-[12px] text-[var(--zg-text-subtle)]" />
-        </span>
-        <span className="min-w-0 flex items-center gap-2">
-          <span className="shrink-0">{labels.spawnTask}</span>
-          {first && <span className="min-w-0 truncate text-[var(--zg-text-subtle)]">{first}</span>}
-          <Caret open={open} className="shrink-0" />
-        </span>
-      </button>
-      <div className="zg-collapsible" data-open={open}>
-        <div className="zg-collapsible-inner">
-          {mounted && (
-            <div className="pl-7 pt-1.5 pb-1 flex flex-col gap-2.5">
-              {/* The whole task; a long one scrolls in place instead of pushing the thread. */}
-              <div
-                data-testid="worker-task-body"
-                data-scroll-root=""
-                className="zg-tray rounded-[var(--zg-radius-md)] px-3 py-2 text-[13px] leading-relaxed text-[var(--zg-text)] max-h-[360px] overflow-y-auto overscroll-contain zg-scroll-fade-y"
-              >
-                <Markdown>{task}</Markdown>
-              </div>
-              {settings.length > 0 && (
-                <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
-                  {settings.map(([label, value]) => (
-                    <div key={label} className="contents">
-                      <dt className="text-[var(--zg-text-subtle)]">{label}</dt>
-                      <dd className="m-0 min-w-0 truncate text-[var(--zg-text-muted)]">{value}</dd>
-                    </div>
-                  ))}
-                </dl>
-              )}
-              {system && (
-                <details className="text-xs">
-                  <summary className="cursor-pointer text-[var(--zg-text-subtle)]">{labels.showSystemPrompt}</summary>
-                  <div className="mt-1.5 text-[13px] leading-relaxed text-[var(--zg-text-muted)]">
-                    <Markdown>{system}</Markdown>
-                  </div>
-                </details>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}