zidane-ui 9.1.1 → 9.1.3

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

@@ -1,157 +0,0 @@
-/**
- * remark plugin: extension text references (`ctx.registerReferences`) in a
- * reply become `zg-ref:ext:` links the `a` renderer paints as reference
- * badges (`ReferenceChip`). Two places:
- *
- *   - prose text: a match becomes a link whose text is the match;
- *   - links whose whole URL is a reference (an autolinked issue URL): the
- *     link is retargeted, carrying the original URL so the badge falls back
- *     to the plain link while unresolved.
- *
- *   - inline code that is one reference and nothing else (`BOA-123`): the
- *     code is wrapped in the link, so it still renders as code while
- *     unresolved or when the reference names nothing.
- *
- * Other code, headings and html are left alone, as in `remark-refs.ts`.
- */
-import { findReferences, type ReferenceProviderWire } from 'zidane/chat/pure';
-
-interface MdNode {
-  type: string;
-  value?: string;
-  url?: string;
-  children?: MdNode[];
-}
-
-const SKIP = new Set(['link', 'linkReference', 'inlineCode', 'code', 'heading', 'html']);
-const PREFIX = 'zg-ref:ext:';
-
-/**
- * An extension reference a `zg-ref:ext:` link names.
- */
-export interface ParsedReferenceUrl {
-  /** The reference's provider. */
-  providerId: string;
-  /** The reference's key. */
-  key: string;
-  /** The link's own URL, when a link was retargeted. */
-  href?: string;
-  /** The match's placeholder label (`ReferenceMatch.placeholder`). */
-  placeholder?: string;
-  /** The placeholder's GUI icon class. */
-  placeholderIcon?: string;
-}
-
-/**
- * The `zg-ref:ext:` URL for an extension reference (what the remark plugin writes).
- *
- * @param providerId - The provider.
- * @param key - The key.
- * @param href - The link's own URL, when a link was retargeted.
- * @param placeholder - The match's placeholder label.
- * @param placeholderIcon - The placeholder's icon class.
- */
-export function referenceUrl(
-  providerId: string,
-  key: string,
-  href?: string,
-  placeholder?: string,
-  placeholderIcon?: string,
-): string {
-  const parts = [providerId, key, href ?? '', placeholder ?? '', placeholderIcon ?? ''].map(encodeURIComponent);
-  while (parts.length > 2 && parts[parts.length - 1] === '') parts.pop();
-  return `${PREFIX}${parts.join(':')}`;
-}
-
-/**
- * The extension reference a `zg-ref:ext:` link names; `null` for any other URL.
- *
- * @param url - The link's URL.
- */
-export function parseReferenceUrl(url: string | undefined): ParsedReferenceUrl | null {
-  if (!url?.startsWith(PREFIX)) return null;
-  const [providerId, key, href, placeholder, placeholderIcon] = url.slice(PREFIX.length).split(':');
-  if (!providerId || !key) return null;
-  try {
-    return {
-      providerId: decodeURIComponent(providerId),
-      key: decodeURIComponent(key),
-      ...(href ? { href: decodeURIComponent(href) } : {}),
-      ...(placeholder ? { placeholder: decodeURIComponent(placeholder) } : {}),
-      ...(placeholderIcon ? { placeholderIcon: decodeURIComponent(placeholderIcon) } : {}),
-    };
-  } catch {
-    return null;
-  }
-}
-
-function splitText(text: string, providers: readonly ReferenceProviderWire[]): MdNode[] {
-  const matches = findReferences(text, providers, 'assistant');
-  if (matches.length === 0) return [{ type: 'text', value: text }];
-  const nodes: MdNode[] = [];
-  let cursor = 0;
-  for (const m of matches) {
-    if (m.start > cursor) nodes.push({ type: 'text', value: text.slice(cursor, m.start) });
-    nodes.push({
-      type: 'link',
-      url: referenceUrl(m.providerId, m.key, undefined, m.placeholder, m.placeholderIcon?.gui),
-      children: [{ type: 'text', value: text.slice(m.start, m.end) }],
-    });
-    cursor = m.end;
-  }
-  if (cursor < text.length) nodes.push({ type: 'text', value: text.slice(cursor) });
-  return nodes;
-}
-
-/** The reference that is the whole of `text`, if any. */
-function wholeReference(text: string, providers: readonly ReferenceProviderWire[]) {
-  const matches = findReferences(text, providers, 'assistant');
-  const [only] = matches;
-  return matches.length === 1 && only && only.start === 0 && only.end === text.length ? only : null;
-}
-
-function visit(node: MdNode, providers: readonly ReferenceProviderWire[]): 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, providers));
-      continue;
-    }
-    if (child.type === 'inlineCode' && typeof child.value === 'string') {
-      const whole = wholeReference(child.value, providers);
-      if (whole) {
-        next.push({
-          type: 'link',
-          url: referenceUrl(whole.providerId, whole.key, undefined, whole.placeholder, whole.placeholderIcon?.gui),
-          children: [child],
-        });
-        continue;
-      }
-    }
-    if (child.type === 'link' && typeof child.url === 'string' && !child.url.startsWith('zg-ref:')) {
-      const whole = wholeReference(child.url, providers);
-      if (whole) {
-        next.push({
-          ...child,
-          url: referenceUrl(whole.providerId, whole.key, child.url, whole.placeholder, whole.placeholderIcon?.gui),
-        });
-        continue;
-      }
-    }
-    if (!SKIP.has(child.type)) visit(child, providers);
-    next.push(child);
-  }
-  node.children = next;
-}
-
-/**
- * The remark plugin: the providers' matches in prose become `zg-ref:ext:` links.
- *
- * @param options - The providers whose patterns match.
- */
-export function remarkReferences(options: { providers: readonly ReferenceProviderWire[] }) {
-  return (tree: MdNode) => {
-    if (options.providers.length > 0) visit(tree, options.providers);
-  };
-}

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,251 +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
- *
- * Under an `ExtensionsProvider`, the extensions' renderers route in on top
- * (`extension-renderers.tsx`): a fence whose language, or a call whose tool,
- * has one draws through it, over the slot in effect as its default.
- */
-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';
-import { useExtensionItems } from '../../extensions/ExtensionsProvider';
-import { withExtensionRenderers } from './extension-renderers';
-
-/** 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}, and the extensions' language and tool renderers routed in.
- */
-export function useTranscriptRenderers(): TranscriptRenderers {
-  const overrides = useTranscriptRendererOverrides();
-  const extensions = useExtensionItems('renderer');
-  let slots = resolved.get(overrides);
-  if (!slots) {
-    slots = { ...DEFAULT_TRANSCRIPT_RENDERERS, ...overrides };
-    resolved.set(overrides, slots);
-  }
-  return withExtensionRenderers(slots, extensions);
-}