zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/remark-refs.ts

@@ -1,176 +0,0 @@
-/**
- * remark plugin: turn `#123` and commit SHAs in prose into links with the
- * `zg-ref:` scheme (`zg-ref:number:123`, `zg-ref:sha:abc1234`). The `a`
- * renderer paints those as reference chips and resolves them against the
- * session repo's web base. Text inside links, inline code and code blocks
- * is left alone (those nodes aren't `text` children of prose).
- *
- * Dependency-free: walks mdast `children` arrays directly instead of
- * pulling in unist-util-visit / mdast-util-find-and-replace.
- */
-
-interface MdNode {
-  type: string;
-  value?: string;
-  url?: string;
-  children?: MdNode[];
-}
-
-/** `#123` not preceded by a word char or `/` (so `owner/repo#12` and `#hash` in code stay). */
-const NUMBER_RE = /(?<![\w/&])#(\d{1,7})\b/g;
-/** 7–40 hex chars containing at least one digit, standing alone (rules out words like `decade`). */
-const SHA_RE = /(?<![\w/.])(?=[0-9a-f]*\d)[0-9a-f]{7,40}(?![\w/])(?!\.\w)/g;
-
-/** Containers whose text children we should NOT rewrite. */
-const SKIP = new Set(['link', 'linkReference', 'inlineCode', 'code', 'heading', 'html']);
-
-/**
- * The remark plugin: `#123` and commit SHAs in prose become `zg-ref:` links (see the module comment).
- */
-export function remarkRefs() {
-  return (tree: MdNode) => {
-    visit(tree);
-  };
-}
-
-function visit(node: MdNode): void {
-  if (!node.children) {
-    return;
-  }
-  const next: MdNode[] = [];
-  for (const child of node.children) {
-    if (child.type === 'text' && typeof child.value === 'string') {
-      next.push(...splitText(child.value));
-    } else {
-      if (!SKIP.has(child.type)) {
-        visit(child);
-      }
-      next.push(child);
-    }
-  }
-  node.children = next;
-}
-
-/**
- * A `#123` or SHA found in plain text.
- */
-export interface RefMatch {
-  /** A number or a SHA. */
-  kind: 'number' | 'sha';
-  /** The number's digits, or the SHA. */
-  value: string;
-  /** Where it starts in the text. */
-  start: number;
-  /** Where it ends. */
-  end: number;
-}
-
-/**
- * The `#123`s and SHAs in a plain text, in order (outside markdown: receipts, titles).
- *
- * @param text - The text to scan.
- */
-export function findRefs(text: string): RefMatch[] {
-  const out: RefMatch[] = [];
-  for (const m of text.matchAll(NUMBER_RE)) {
-    out.push({ kind: 'number', value: m[1], start: m.index, end: m.index + m[0].length });
-  }
-  for (const m of text.matchAll(SHA_RE)) {
-    out.push({ kind: 'sha', value: m[0], start: m.index, end: m.index + m[0].length });
-  }
-  return out.sort((a, b) => a.start - b.start);
-}
-
-function splitText(text: string): MdNode[] {
-  const refs = findRefs(text);
-  if (refs.length === 0) {
-    return [{ type: 'text', value: text }];
-  }
-  const nodes: MdNode[] = [];
-  let cursor = 0;
-  for (const ref of refs) {
-    if (ref.start < cursor) {
-      continue; // overlapping match (a SHA inside a number span can't happen, but be safe)
-    }
-    if (ref.start > cursor) {
-      nodes.push({ type: 'text', value: text.slice(cursor, ref.start) });
-    }
-    nodes.push({
-      type: 'link',
-      url: `zg-ref:${ref.kind}:${ref.value}`,
-      children: [{ type: 'text', value: text.slice(ref.start, ref.end) }],
-    });
-    cursor = ref.end;
-  }
-  if (cursor < text.length) {
-    nodes.push({ type: 'text', value: text.slice(cursor) });
-  }
-  return nodes;
-}
-
-/**
- * A ref a `zg-ref:` link or inline code names.
- */
-export interface ParsedRef {
-  /** A number or a SHA. */
-  kind: 'number' | 'sha';
-  /** The number's digits, or the SHA. */
-  value: string;
-}
-
-/**
- * The ref a `zg-ref:` link names; `null` for any other URL.
- *
- * @param url - The link's URL.
- */
-export function parseRefUrl(url: string | undefined): ParsedRef | null {
-  if (!url?.startsWith('zg-ref:')) {
-    return null;
-  }
-  const [, kind, value] = url.split(':');
-  return (kind === 'number' || kind === 'sha') && value ? { kind, value } : null;
-}
-
-/**
- * The number of a text that is exactly `#N` (an issue or PR), else null.
- *
- * @param text - The text (`#123`).
- */
-export function numberRef(text: string): ParsedRef | null {
-  const m = /^#(\d{1,7})$/.exec(text);
-  return m ? { kind: 'number', value: m[1] } : null;
-}
-
-/**
- * Inline code that is exactly an issue or PR number or a SHA becomes a ref chip too.
- *
- * @param raw - The inline code's text.
- */
-export function classifyInlineRef(raw: string): ParsedRef | null {
-  const text = raw.trim();
-  const number = numberRef(text);
-  if (number) {
-    return number;
-  }
-  if (/^(?=[0-9a-f]*\d)[0-9a-f]{7,40}$/.test(text)) {
-    return { kind: 'sha', value: text };
-  }
-  return null;
-}
-
-/**
- * Where a ref leads on the repo's site (a PR or issue, a commit); `null` without a web base.
- *
- * @param ref - The ref.
- * @param webBase - The repo's web address.
- */
-export function refHref(ref: ParsedRef, webBase: string | null): string | null {
-  if (!webBase) {
-    return null;
-  }
-  if (ref.kind === 'sha') {
-    return `${webBase}/commit/${ref.value}`;
-  }
-  // A bare #N may be an issue or a PR; GitHub's /issues/N redirects to the PR when it is one.
-  return webBase.startsWith('https://github.com/') ? `${webBase}/issues/${ref.value}` : `${webBase}/pull/${ref.value}`;
-}

package/src/chat/transcript/renderer-slots.tsx

@@ -1,35 +0,0 @@
-/**
- * The renderer slots' context: what enclosing `TranscriptRenderersProvider`s
- * set, without the defaults. Apart from `renderers.tsx` (which fills the
- * gaps with the kit's markdown and highlighter) so a component that reads one
- * slot and brings its own fallback (`ApprovalBar`) loads neither.
- */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-import type { TranscriptRenderers } from './renderers';
-
-const TranscriptRenderersContext = createContext<Partial<TranscriptRenderers>>({});
-
-/** Props for {@link TranscriptRenderersProvider}. */
-export interface TranscriptRenderersProviderProps {
-  /** The slots to replace. Slots left out keep the enclosing provider's renderer, or the default. */
-  value: Partial<TranscriptRenderers>;
-  /** The transcript that reads the renderers. */
-  children: ReactNode;
-}
-
-/**
- * Overrides any subset of the slots; the rest keep the enclosing (or default) renderers.
- *
- * @param props - Provider props: the slots to override in `value` and the `children` that read them.
- */
-export function TranscriptRenderersProvider({ value, children }: TranscriptRenderersProviderProps) {
-  const parent = useContext(TranscriptRenderersContext);
-  const merged = useMemo(() => ({ ...parent, ...value }), [parent, value]);
-  return <TranscriptRenderersContext.Provider value={merged}>{children}</TranscriptRenderersContext.Provider>;
-}
-
-/** The slots the enclosing providers set, defaults left out. */
-export function useTranscriptRendererOverrides(): Partial<TranscriptRenderers> {
-  return useContext(TranscriptRenderersContext);
-}

package/src/chat/transcript/renderers.tsx

@@ -1,241 +0,0 @@
-/**
- * The transcript's renderer slots: the few pieces a row draws through an
- * app's own services. Rows read them with `useTranscriptRenderers()`; an app
- * swaps any of them with one `<TranscriptRenderersProvider>` around its
- * transcript (the desktop app plugs in its file and reference badges).
- * Without a provider the defaults below render: safe markdown, code
- * highlighted as the desktop app highlights it (`code/HighlightedCode.tsx`,
- * configured by a `CodeHighlightProvider`), plain inline text.
- *
- *   Markdown         a reply, a command's detail, a compaction summary
- *   CodeBlock        a fenced block, a tool's input, a file it read
- *   InlineText       a one-line receipt that may name files, commits, links
- *   Prompt           a sent prompt's text, inside its bubble
- *   SessionTitle     the session a tool call addresses, as a link
- *   attachmentLabel  the icon and name a prompt's file attachment shows
- *   ToolBody         a tool call's body drawn by the app (`hasToolBody` says
- *                    which calls), in place of its input and output panels
- */
-import { memo, type ComponentType, type CSSProperties, type SyntheticEvent } from 'react';
-import type { PromptSegmentRef } from 'zidane/chat/pure';
-
-import { HighlightedCode } from '../../code/HighlightedCode';
-import type { ToolRowModel } from '../headless/transcript';
-import { useChatLabels } from '../useChatLabels';
-import { useTranscriptActions } from './actions';
-import { Markdown } from './markdown';
-import { PromptLines } from './prompt-lines';
-import { useTranscriptRendererOverrides } from './renderer-slots';
-
-/** Props of the `Markdown` renderer slot. */
-export interface MarkdownSlotProps {
-  /** The markdown source to render. */
-  children: string;
-  /** Still streaming: a renderer may re-parse only the tail. */
-  streaming?: boolean;
-  /** Extra class names for the rendered block. */
-  className?: string;
-}
-
-/** Props of the `CodeBlock` renderer slot. */
-export interface CodeBlockSlotProps {
-  /** The code to show, without the closing newline. */
-  code: string;
-  /** A fence's language (`plaintext` when it names none). */
-  language: string;
-}
-
-/** Props of the `InlineText` renderer slot. */
-export interface InlineTextSlotProps {
-  /** One line of plain text; `` `code` `` spans keep their backticks. */
-  text: string;
-}
-
-/** Props of the `Prompt` renderer slot. */
-export interface PromptSlotProps {
-  /** The prompt as sent; the bubble around it keeps its whitespace. */
-  text: string;
-  /** The references the composer recorded (files, skills, links, a command). */
-  refs?: readonly PromptSegmentRef[];
-  /** A command invocation (`/fix conflicts now`). */
-  command?: boolean;
-}
-
-/** Props of the `SessionTitle` renderer slot. */
-export interface SessionTitleSlotProps {
-  /** The addressed session's id. */
-  id: string;
-  /** What to show until the app knows the session's title (the formatter's short id). */
-  fallback: string;
-  /**
-   * Only the session's current title as text: no link, no directory. For a
-   * title inside a control that already opens the session (a report row).
-   */
-  plain?: boolean;
-}
-
-/** Props of the `ToolBody` renderer slot. */
-export interface ToolBodySlotProps {
-  /** The tool call whose body to draw. */
-  tool: ToolRowModel;
-}
-
-/** Props of the `TextPreview` renderer slot: a text attachment opened in the lightbox. */
-export interface TextPreviewSlotProps {
-  /** The file name. */
-  name: string;
-  /** Its MIME type, for example `text/markdown`. */
-  mediaType: string;
-  /** Its size in bytes. */
-  size: number;
-  /** Where the text is: a `data:` URL, or any URL the page can fetch. */
-  src: string;
-}
-
-/** What a non-image attachment shows: an icon (or a short badge) and its name. */
-export interface AttachmentLabelParts {
-  /** Icon class name, for example `i-ph-file`. */
-  icon: string;
-  /** CSS color for the icon or badge. Default: the muted text color. */
-  tone?: string;
-  /** Short badge for icon-less kinds (e.g. `TS`). */
-  badge?: string;
-  /** The attachment's display name. */
-  name: string;
-  /** Secondary text, e.g. `L61 to L69` or `comment`. */
-  detail?: string;
-}
-
-/** The set of renderer slots a transcript draws through. Each is a component or function an app can replace with {@link TranscriptRenderersProvider}. */
-export interface TranscriptRenderers {
-  /** Renders markdown: a reply, a command's detail, or a compaction summary. */
-  Markdown: ComponentType<MarkdownSlotProps>;
-  /** Renders a fenced block, a tool's input, or a file a tool read. */
-  CodeBlock: ComponentType<CodeBlockSlotProps>;
-  /** Renders a one-line receipt that may name files, commits, or links. */
-  InlineText: ComponentType<InlineTextSlotProps>;
-  /** Renders a sent prompt's text inside its bubble. */
-  Prompt: ComponentType<PromptSlotProps>;
-  /** Renders the session a tool call addresses, as a link. */
-  SessionTitle: ComponentType<SessionTitleSlotProps>;
-  /** Returns the icon and name to show for a prompt's file attachment, given its file name. */
-  attachmentLabel: (name: string) => AttachmentLabelParts;
-  /** Renders a text attachment in the lightbox; the kit's plain preview when absent. */
-  TextPreview?: ComponentType<TextPreviewSlotProps>;
-  /** Drawn for the calls `hasToolBody` accepts; without both, every call shows its input and output. */
-  ToolBody?: ComponentType<ToolBodySlotProps>;
-  /** Tells whether `ToolBody` draws this tool call. Used together with `ToolBody`. */
-  hasToolBody?: (tool: ToolRowModel) => boolean;
-}
-
-/** Props for {@link DefaultInlineText}: the {@link InlineTextSlotProps}. */
-export type DefaultInlineTextProps = InlineTextSlotProps;
-
-/**
- * Renders the text as is. The default `InlineText` slot.
- *
- * @param props - The {@link InlineTextSlotProps}.
- */
-export function DefaultInlineText({ text }: DefaultInlineTextProps) {
-  return <>{text}</>;
-}
-
-/** Props for {@link DefaultPrompt}: the {@link PromptSlotProps}. */
-export type DefaultPromptProps = PromptSlotProps;
-
-/**
- * The prompt's text as typed, a block per line (`PromptLines`).
- *
- * @param props - The {@link PromptSlotProps}.
- */
-export function DefaultPrompt({ text }: DefaultPromptProps) {
-  return <PromptLines items={[text]} />;
-}
-
-/** Props for {@link DefaultSessionTitle}: the {@link SessionTitleSlotProps}. */
-export type DefaultSessionTitleProps = SessionTitleSlotProps;
-
-/**
- * The session's id as a link that opens it (`TranscriptActions.openSession`;
- * without it, plain text). A link inside the tool row's header button:
- * the click is stopped before the button toggles the row, and `role=link` +
- * Enter keeps it reachable without a nested `<button>`, which HTML forbids.
- *
- * @param props - The {@link SessionTitleSlotProps}.
- */
-export function DefaultSessionTitle({ id, fallback, plain }: DefaultSessionTitleProps) {
-  const { openSession } = useTranscriptActions();
-  const labels = useChatLabels();
-  if (plain || !openSession) return <>{fallback}</>;
-  const open = (e: SyntheticEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-    openSession(id);
-  };
-  return (
-    <span
-      role="link"
-      tabIndex={0}
-      title={labels.openNamedSession(fallback)}
-      onClick={open}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter') open(e);
-      }}
-      className="cursor-pointer hover:underline focus-visible:underline outline-none"
-    >
-      {fallback}
-    </span>
-  );
-}
-
-/**
- * Returns a generic file icon and the file name. The default `attachmentLabel` slot.
- *
- * @param name - The attachment's file name.
- */
-export function defaultAttachmentLabel(name: string): AttachmentLabelParts {
-  return { icon: 'i-ph-file', name };
-}
-
-/** Props for {@link DefaultMarkdown}: the {@link MarkdownSlotProps} plus the root's style. */
-export interface DefaultMarkdownProps extends MarkdownSlotProps {
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The kit's {@link Markdown}, its fences drawn by the `CodeBlock` slot in effect. The default
- * `Markdown` slot.
- *
- * @param props - The {@link MarkdownSlotProps}.
- */
-export const DefaultMarkdown = memo((props: DefaultMarkdownProps) => {
-  const { CodeBlock } = useTranscriptRenderers();
-  return <Markdown {...props} CodeBlock={CodeBlock} />;
-});
-
-/** The default renderer slots: safe markdown, highlighted code, plain inline text, and a generic attachment icon. Used when no {@link TranscriptRenderersProvider} is present. */
-export const DEFAULT_TRANSCRIPT_RENDERERS: TranscriptRenderers = {
-  Markdown: DefaultMarkdown,
-  CodeBlock: HighlightedCode,
-  InlineText: DefaultInlineText,
-  Prompt: DefaultPrompt,
-  SessionTitle: DefaultSessionTitle,
-  attachmentLabel: defaultAttachmentLabel,
-};
-
-export { TranscriptRenderersProvider, type TranscriptRenderersProviderProps } from './renderer-slots';
-
-// One resolved set per provider value: rows that compare slots by identity stay memoized.
-const resolved = new WeakMap<Partial<TranscriptRenderers>, TranscriptRenderers>();
-
-/** Returns the renderer slots in effect: the defaults merged with every enclosing {@link TranscriptRenderersProvider}. */
-export function useTranscriptRenderers(): TranscriptRenderers {
-  const overrides = useTranscriptRendererOverrides();
-  let slots = resolved.get(overrides);
-  if (!slots) {
-    slots = { ...DEFAULT_TRANSCRIPT_RENDERERS, ...overrides };
-    resolved.set(overrides, slots);
-  }
-  return slots;
-}

package/src/chat/transcript/row-estimate.ts

@@ -1,158 +0,0 @@
-/**
- * First-pass row heights: the `contain-intrinsic-size` placeholder of a
- * `.zg-cv-row`, and a lazy row's box until it mounts (`LazyRow`). Pure and
- * cached per row object, so a stream tick never recomputes them.
- */
-import type { CSSProperties } from 'react';
-
-import type { Row, ToolRowModel } from '../headless/transcript';
-
-/**
- * Content-aware `contain-intrinsic-size` placeholder for a row that has
- * never been rendered. The `auto` keyword makes the browser REMEMBER a
- * row's real height once painted, so the estimate only matters for the
- * first pass — but a uniform placeholder would be off by 10× for long
- * markdown rows, and every correction during a fast scroll would move the
- * scrollbar thumb (the "stutter/jump"). A cheap length-based
- * line estimate per row kind keeps first-pass placeholders within ~2×
- * of reality, which the thumb absorbs invisibly.
- *
- * Estimates are memoized on the row object — row identities are stable
- * across stream ticks (the collapse-time row cache), so this is one
- * cheap computation per row per lifetime, not per render.
- */
-const ROW_CV_STYLE_CACHE = new WeakMap<object, CSSProperties>();
-
-// Transcript body text is 14px/1.6 (22.4px a line); 21px is the rounded-down
-// first-pass line height. Prose wraps near 90 chars at the timeline's max width.
-const LINE_PX = 21;
-const WRAP_CHARS = 90;
-
-function estimateTextPx(text: string, capLines: number): number {
-  let lines = 0;
-
-  for (const segment of text.split('\n')) {
-    lines += Math.max(1, Math.ceil(segment.length / WRAP_CHARS));
-
-    if (lines >= capLines) {
-      return capLines * LINE_PX;
-    }
-  }
-
-  return lines * LINE_PX;
-}
-
-/**
- * The inline style of a row's `.zg-cv-row` wrapper: a `contain-intrinsic-size` of `auto` plus the row's height estimate. Cached per row object.
- *
- * @param row - The transcript row.
- */
-export function rowCvStyle(row: Row): CSSProperties {
-  const hit = ROW_CV_STYLE_CACHE.get(row);
-
-  if (hit) {
-    return hit;
-  }
-
-  const style: CSSProperties = { containIntrinsicSize: `auto ${rowEstimatePx(row)}px` };
-  ROW_CV_STYLE_CACHE.set(row, style);
-  return style;
-}
-
-const ROW_ESTIMATE_CACHE = new WeakMap<object, number>();
-
-/** The first-pass height estimate: the cv placeholder, and a lazy row's box until it mounts. */
-export function rowEstimatePx(row: Row): number {
-  const hit = ROW_ESTIMATE_CACHE.get(row);
-  if (hit !== undefined) return hit;
-  const px = estimateRowPx(row);
-  ROW_ESTIMATE_CACHE.set(row, px);
-  return px;
-}
-
-/** A prompt's attachments above its bubble: one line of 64px thumbnails or 36px chips, and the 8px gap under it. */
-function attachmentsPx(attachments: readonly { mediaType: string }[] | undefined): number {
-  if (!attachments?.length) return 0;
-  return (attachments.some((att) => att.mediaType.startsWith('image/')) ? 64 : 36) + 8;
-}
-
-/** Every call nested under a tool row, at any depth. */
-function nestedCount(tool: ToolRowModel): number {
-  return (tool.children ?? []).reduce((n, child) => n + 1 + nestedCount(child), 0);
-}
-
-function estimateRowPx(row: Row): number {
-  let px: number;
-
-  switch (row.kind) {
-    case 'separator':
-      px = 17;
-      break;
-    case 'markdown':
-      // Long-form prose — the kind the uniform placeholder hurt most.
-      // Padding + margins add ~12px around the text block. Cap high:
-      // a 500-line reply estimated at 60 lines still corrected by
-      // thousands of px on first render (visible thumb jump); the
-      // estimate is computed once per row, so a generous cap is free.
-      px = 12 + estimateTextPx(row.text, 400);
-      break;
-    case 'thinking':
-      // Only a LIVE (still-streaming) segment renders expanded; closed
-      // and replayed rows default to the collapsed header line (~28px).
-      px = row.live ? 12 + estimateTextPx(row.text, 60) : 28;
-      break;
-    case 'thinking-batch':
-      // Collapsed group header line — expansion is user-driven.
-      px = 28;
-      break;
-    case 'user-prompt':
-      // Bubble chrome (padding + border + margin) around the text, and the attachments above it.
-      px = 28 + estimateTextPx(row.text, 30) + attachmentsPx(row.attachments);
-      break;
-    case 'tool':
-    case 'tool-batch':
-      // Collapsed summary line — expansion is user-driven and `auto`
-      // remembers the expanded height afterwards. A call's nested calls
-      // show under it either way (a batch's only once opened).
-      px = 30 + (row.kind === 'tool' ? 24 * nestedCount(row) : 0);
-      break;
-    case 'message-group':
-      // Header line and live previews (each the fold gap above it) when there are
-      // earlier messages, then the current message in full (estimated like a markdown row).
-      px =
-        (row.messages.length > 0 ? 35 : 0) +
-        (row.live
-          ? row.messages
-              .slice(-2)
-              .reduce((n, m) => n + (m.kind === 'markdown' ? 8 + estimateTextPx(m.text, 400) : 0), 0)
-          : 0) +
-        (row.current.kind === 'markdown' ? 12 + estimateTextPx(row.current.text, 400) : 35);
-      break;
-    case 'exchange-fold':
-      // 22.4px header (+ up to three live stack lines, each the 8px fold gap above it) + the 12px row gap.
-      px = 35 + (row.live ? Math.min(3, row.stats.tools + row.stats.thoughts + row.stats.subagents) * 30 : 0);
-      break;
-    case 'user-bash':
-      // `!` header + up-to-10-line output tail block.
-      px = 40 + Math.min(10, Math.max(1, (row.result?.match(/\n/g)?.length ?? 0) + 1)) * 18;
-      break;
-    case 'command-detail':
-      // Collapsed header line (tool-row idiom) — expansion is user-driven
-      // and `auto` remembers the expanded height afterwards.
-      px = 28;
-      break;
-    case 'compact-summary':
-      px = 72;
-      break;
-    case 'session-event':
-      // 30.4px header (py-1 + title line) + a two-line clamped excerpt + the row gap.
-      px = row.sessionEvent ? 80 : 26;
-      break;
-    default:
-      // info / error / spawn markers — single-ish lines.
-      px = 26;
-      break;
-  }
-
-  return px;
-}