zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/ComposerHostProvider.tsx

@@ -1,46 +0,0 @@
-/**
- * Puts a `ComposerHost` (and composer label overrides) in context for the rich
- * composer and its chrome. Light on purpose: no editor code, so `AppHostProvider`
- * can mount it without pulling Tiptap into every app.
- */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-import type { ComposerHost } from '../headless/composer/host';
-import { DEFAULT_COMPOSER_LABELS, type ComposerLabels } from '../headless/composer/labels';
-import { useLabels } from '../../labels';
-
-const NO_HOST: ComposerHost = {};
-
-const ComposerHostContext = createContext<{ host: ComposerHost; labels?: Partial<ComposerLabels> }>({ host: NO_HOST });
-
-/** Props for {@link ComposerHostProvider}. */
-export interface ComposerHostProviderProps {
-  /** What the composer reads and does beyond sending. */
-  host: ComposerHost;
-  /** Overrides for the composer's strings. Keys you leave out keep the default English label. */
-  labels?: Partial<ComposerLabels>;
-  /** The app's components. */
-  children: ReactNode;
-}
-
-/**
- * Provides a {@link ComposerHost} to the composer components below it.
- *
- * @param props - The `host`, optional `labels` and the `children`.
- */
-export function ComposerHostProvider({ host, labels, children }: ComposerHostProviderProps) {
-  const value = useMemo(() => (labels ? { host, labels } : { host }), [host, labels]);
-  return <ComposerHostContext.Provider value={value}>{children}</ComposerHostContext.Provider>;
-}
-
-/** The nearest {@link ComposerHost}; an empty host (every capability left out) outside a provider. */
-export function useComposerHost(): ComposerHost {
-  return useContext(ComposerHostContext).host;
-}
-
-/** The composer's strings: defaults, then `<LabelsProvider>` overrides, then the provider's `labels`. */
-export function useComposerLabels(): ComposerLabels {
-  const global = useLabels() as Partial<ComposerLabels>;
-  const local = useContext(ComposerHostContext).labels;
-  return useMemo(() => ({ ...DEFAULT_COMPOSER_LABELS, ...global, ...local }), [global, local]);
-}

package/src/chat/composer/ComposerShell.tsx

@@ -1,129 +0,0 @@
-/**
- * What the composer shows until its editor chunk lands: the editor's own
- * markup (the `.zg-composer-editor` box, one `<p>` per line, the same
- * placeholder), editable as plain text, so nothing moves when the editor
- * swaps in and nothing typed meanwhile is lost. The DOM inside is built here,
- * never by React, so the browser's edits and React never fight over it.
- */
-import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, type KeyboardEvent } from 'react';
-
-/** Props for {@link ComposerShell}. */
-export interface ComposerShellProps {
-  /** The draft shown on mount. */
-  text: string;
-  placeholder: string;
-  ariaLabel: string;
-  disabled: boolean;
-  autoFocus: boolean;
-  /** The draft after each edit. */
-  onInput(text: string): void;
-  onKeyDown(event: KeyboardEvent<HTMLDivElement>): void;
-  /** True when the paste was taken (attachments): the shell keeps it out of the text. */
-  onPaste(event: ClipboardEvent): boolean;
-  onFocusChange(focused: boolean): void;
-}
-
-/** Imperative handle of the {@link ComposerShell}. */
-export interface ComposerShellHandle {
-  /** Focuses the shell, caret at the end. */
-  focus(): void;
-  /** Replaces the draft. */
-  setText(text: string): void;
-}
-
-/** The shell's text: its lines joined with `\n`. */
-export function readShellText(root: HTMLElement): string {
-  const lines = root.querySelectorAll(':scope > p');
-  return lines.length ? Array.from(lines, (p) => p.textContent ?? '').join('\n') : (root.textContent ?? '');
-}
-
-function mark(root: HTMLElement, placeholder: string) {
-  const first = root.firstElementChild;
-  if (!first) return;
-  first.setAttribute('data-placeholder', placeholder);
-  first.classList.toggle('is-editor-empty', readShellText(root) === '');
-}
-
-function fill(root: HTMLElement, text: string, placeholder: string) {
-  root.replaceChildren(
-    ...text.split('\n').map((line) => {
-      const p = document.createElement('p');
-      p.textContent = line;
-      return p;
-    }),
-  );
-  mark(root, placeholder);
-}
-
-/** Renders the composer's stand-in textbox while its editor loads. */
-export const ComposerShell = forwardRef<ComposerShellHandle, ComposerShellProps>(function ComposerShell(props, ref) {
-  const root = useRef<HTMLDivElement>(null);
-  const initial = useRef(props.text);
-  const autoFocus = useRef(props.autoFocus);
-  // Set before the shell leaves the DOM: the blur its removal fires is not the user leaving.
-  const leaving = useRef(false);
-  useLayoutEffect(() => {
-    leaving.current = false;
-    return () => {
-      leaving.current = true;
-    };
-  }, []);
-
-  const focusEnd = () => {
-    const el = root.current;
-    if (!el) return;
-    el.focus();
-    const selection = el.ownerDocument.getSelection();
-    if (!selection) return;
-    const range = el.ownerDocument.createRange();
-    range.selectNodeContents(el);
-    range.collapse(false);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  };
-
-  useLayoutEffect(() => {
-    if (root.current) fill(root.current, initial.current, props.placeholder);
-    if (autoFocus.current) focusEnd();
-    // Built once: later edits are the browser's.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useLayoutEffect(() => {
-    if (root.current) mark(root.current, props.placeholder);
-  }, [props.placeholder]);
-
-  useImperativeHandle(ref, () => ({
-    focus: focusEnd,
-    setText: (text: string) => {
-      if (root.current) fill(root.current, text, props.placeholder);
-    },
-  }));
-
-  return (
-    <div
-      ref={root}
-      role="textbox"
-      aria-multiline="true"
-      aria-label={props.ariaLabel}
-      aria-disabled={props.disabled || undefined}
-      tabIndex={0}
-      contentEditable={props.disabled ? false : 'plaintext-only'}
-      suppressContentEditableWarning
-      className="zg-composer-editor"
-      data-testid="composer-input"
-      data-composer-shell=""
-      onInput={(e) => {
-        mark(e.currentTarget, props.placeholder);
-        props.onInput(readShellText(e.currentTarget));
-      }}
-      onKeyDown={props.onKeyDown}
-      onPaste={(e) => {
-        if (props.onPaste(e.nativeEvent)) e.preventDefault();
-      }}
-      onFocus={() => props.onFocusChange(true)}
-      onBlur={() => {
-        if (!leaving.current) props.onFocusChange(false);
-      }}
-    />
-  );
-});

package/src/chat/composer/ContextBreakdown.tsx

@@ -1,382 +0,0 @@
-/**
- * Context window breakdown inside the context orb's popover: one segmented
- * bar + per-category rows with expandable items. `breakdown` undefined is
- * loading, null is unavailable (no live agent yet); both show the
- * single-color utilization bar (the `fallback*` props) so the popover
- * always has a gauge.
- */
-import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';
-
-import type { ContextBreakdown as ContextBreakdownData } from 'zidane/chat/pure';
-import { displayNameFor, fmtTokens } from 'zidane/chat/pure';
-import { Tooltip } from '../../components/Tooltip';
-import { MenuNote, MenuSection } from '../../components/Menu';
-import { useChatLabels } from '../useChatLabels';
-
-export type { ContextBreakdownData };
-
-type Category = ContextBreakdownData['categories'][number];
-type CategoryItem = NonNullable<Category['items']>[number];
-
-/**
- * Categorical palette, in lock-step with the TUI panel
- * (`src/tui/context-panel.tsx` `CATEGORY_HEX`) so both surfaces read
- * identically. Fixed hues, not theme tokens, so a category is the same color
- * across every theme; deferred / free buckets use neutral tokens.
- */
-const CATEGORY_COLORS: Record<string, string> = {
-  systemPrompt: '#4f9dff',
-  rules: '#22d3ee',
-  skills: '#a855f7',
-  mcpInstructions: '#eab308',
-  subagentDefs: '#ec4899',
-  tools: 'var(--zg-success)',
-  mcpTools: 'var(--zg-warn)',
-  conversation: '#fb923c',
-  mcpToolsDeferred: 'var(--zg-text-muted)',
-  toolsDeferred: 'var(--zg-text-muted)',
-  // Auto-compact buffer zone (threshold → end): a dim but visible tail.
-  autocompactBuffer: 'color-mix(in srgb, var(--zg-text-muted) 45%, var(--zg-track))',
-  freeSpace: 'transparent',
-};
-
-/**
- * Returns the display color for a context category id, with a muted fallback for unknown ids.
- *
- * @param id - The category id, for example `conversation` or `tools`.
- */
-export function colorForCategory(id: string): string {
-  return CATEGORY_COLORS[id] ?? 'var(--zg-text-muted)';
-}
-
-/** `<1%` for tiny non-zero shares, empty at exactly 0. */
-function pctLabel(tokens: number, denom: number): string {
-  if (tokens <= 0 || denom <= 0) return '';
-  const raw = (tokens / denom) * 100;
-  return raw < 1 ? '<1%' : `${Math.round(raw)}%`;
-}
-
-function clipText(text: string, max: number): string {
-  const oneLine = text.replace(/\s+/g, ' ').trim();
-  return oneLine.length <= max ? oneLine : `${oneLine.slice(0, max - 1)}…`;
-}
-
-/** The stacked bar, set into the surface on the track tone. */
-function ContextBar({ children }: { children: ReactNode }) {
-  return (
-    <div className="zg-track-chip relative flex h-1.5 overflow-hidden" aria-hidden>
-      {children}
-    </div>
-  );
-}
-
-/** A label / value line under a section label (usage, extension rows). */
-function MetaLine({ label, value }: { label: string; value: ReactNode }) {
-  return (
-    <div className="flex items-center justify-between gap-2 h-5 px-2 text-zg-label">
-      <span className="text-[var(--zg-text-muted)]">{label}</span>
-      <span className="zg-meta">{value}</span>
-    </div>
-  );
-}
-
-/** Props for {@link ContextBreakdown}. */
-export interface ContextBreakdownProps {
-  /** undefined: loading; null: no breakdown (no live agent yet). */
-  breakdown: ContextBreakdownData | null | undefined;
-  /** The orb's share and color, for the plain gauge while there is no breakdown. */
-  fallbackPct: number;
-  /** CSS color of the fallback gauge. */
-  fallbackColor: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the context window breakdown: a stacked bar and a list of categories with their token shares. While there is no breakdown it shows a plain gauge from the fallback values.
- *
- * @param props - The {@link ContextBreakdownProps}.
- */
-export function ContextBreakdown({ breakdown, fallbackPct, fallbackColor, className, style }: ContextBreakdownProps) {
-  const labels = useChatLabels();
-  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
-
-  if (!breakdown) {
-    // Skeleton rows reserve roughly the loaded height so the popover doesn't jump.
-    return (
-      <div className={['flex flex-col gap-2.5', className].filter(Boolean).join(' ')} style={style}>
-        <ContextBar>
-          <span
-            className="block h-full"
-            style={{
-              width: `${fallbackPct}%`,
-              background: fallbackColor,
-              transition: 'width var(--zg-motion-settle), background-color var(--zg-motion-fade)',
-            }}
-          />
-        </ContextBar>
-        <div className="flex flex-col" aria-hidden>
-          {[0, 1, 2, 3].map((i) => (
-            <div key={i} className="flex items-center justify-between gap-2 h-[26px] px-2">
-              <span className="h-2 w-24 rounded-full bg-[var(--zg-track)]" />
-              <span className="h-2 w-12 rounded-full bg-[var(--zg-track)]" />
-            </div>
-          ))}
-        </div>
-        {breakdown === null && <MenuNote className="!px-1">{labels.contextNoBreakdown}</MenuNote>}
-      </div>
-    );
-  }
-
-  const denom = breakdown.effectiveWindow || breakdown.used || 1;
-  const live = breakdown.categories.filter((c) => !c.deferred);
-  const deferred = breakdown.categories.filter((c) => c.deferred);
-
-  const toggle = (id: string) =>
-    setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-
-  /*
-   * Bar layout: [colored categories][free space][autocompact buffer], sized
-   * by flex-grow WEIGHTS so children always tile exactly 100% with no
-   * overflow; the floor for tiny shares is baked into the weight
-   * (`MIN_WEIGHT`), mirroring the TUI's StackedBar.
-   */
-  const MIN_WEIGHT = 14;
-  const weight = (tokens: number) => Math.max(MIN_WEIGHT, Math.round((tokens / denom) * 1000));
-  const coloredSegments = breakdown.categories
-    .filter((c) => !c.deferred && c.tokens > 0)
-    .map((c) => ({ id: c.id, weight: weight(c.tokens) }));
-  const bufferCat = breakdown.categories.find((c) => c.id === 'autocompactBuffer' && c.tokens > 0);
-  const bufferWeight = bufferCat ? weight(bufferCat.tokens) : 0;
-  const coloredWeight = coloredSegments.reduce((a, s) => a + s.weight, 0);
-  const freeWeight = Math.max(0, 1000 - coloredWeight - bufferWeight);
-
-  const row = (cat: Category) => (
-    <ContextRow key={cat.id} cat={cat} denom={denom} isOpen={expanded.has(cat.id)} onToggle={() => toggle(cat.id)} />
-  );
-
-  const usageRows = breakdown.usage
-    ? [
-        { label: labels.contextCacheRead, tokens: breakdown.usage.cacheRead },
-        { label: labels.contextCacheWrite, tokens: breakdown.usage.cacheCreation },
-        { label: labels.contextFreshInput, tokens: breakdown.usage.input },
-        { label: labels.contextOutput, tokens: breakdown.usage.output },
-      ].filter((r) => r.tokens > 0)
-    : [];
-
-  return (
-    <div className={['flex flex-col gap-2.5', className].filter(Boolean).join(' ')} style={style}>
-      <ContextBar>
-        {coloredSegments.map((s, i) => (
-          <span
-            key={`${s.id}-${i}`}
-            className="h-full"
-            style={{ flexGrow: s.weight, flexBasis: 0, background: colorForCategory(s.id) }}
-          />
-        ))}
-        {freeWeight > 0 && <span className="h-full" style={{ flexGrow: freeWeight, flexBasis: 0 }} />}
-        {bufferWeight > 0 && (
-          <span
-            className="h-full"
-            style={{ flexGrow: bufferWeight, flexBasis: 0, background: colorForCategory('autocompactBuffer') }}
-          />
-        )}
-      </ContextBar>
-
-      {/* Rows scroll in a bounded region so expanding a 40-tool MCP server never
-          pushes the popover off the window; header, bar and cost stay put. */}
-      <div className="flex flex-col max-h-[min(48vh,420px)] overflow-y-auto">
-        <div className="flex flex-col">{live.map(row)}</div>
-        {deferred.length > 0 && <MenuSection label={labels.contextDeferred}>{deferred.map(row)}</MenuSection>}
-      </div>
-
-      {breakdown.activeSkills && breakdown.activeSkills.length > 0 && (
-        <MenuSection label={labels.contextActiveSkills}>
-          <div className="flex flex-wrap gap-1 px-2">
-            {breakdown.activeSkills.map((name) => (
-              <span
-                key={name}
-                className="zg-meta zg-track-chip px-1.5 py-0.5 truncate text-[var(--zg-accent-hover)]"
-                title={name}
-              >
-                {name}
-              </span>
-            ))}
-          </div>
-        </MenuSection>
-      )}
-
-      {usageRows.length > 0 && (
-        <MenuSection label={labels.contextLastTurn}>
-          {usageRows.map((r) => (
-            <MetaLine key={r.label} label={r.label} value={fmtTokens(r.tokens)} />
-          ))}
-        </MenuSection>
-      )}
-
-      {breakdown.extensionSections?.map((section) =>
-        section.rows.length === 0 ? null : (
-          <MenuSection
-            key={section.id}
-            // Extension-owned: labels and values are opaque to core.
-            label={
-              <span style={section.accentColor ? { color: section.accentColor } : undefined}>{section.label}</span>
-            }
-          >
-            {section.rows.map((r) => (
-              <MetaLine key={r.label} label={r.label} value={r.value} />
-            ))}
-          </MenuSection>
-        ),
-      )}
-
-      {breakdown.hasEstimates && <MenuNote className="!px-1">{labels.contextEstimated}</MenuNote>}
-    </div>
-  );
-}
-
-/** One breakdown row: swatch, label, token count + percent, expandable items. */
-function ContextRow({
-  cat,
-  denom,
-  isOpen,
-  onToggle,
-}: {
-  cat: Category;
-  denom: number;
-  isOpen: boolean;
-  onToggle: () => void;
-}) {
-  const hasItems = !!cat.items && cat.items.length > 0;
-  const pct = pctLabel(cat.tokens, denom);
-  const body = (
-    <>
-      <span className="w-2.5 shrink-0 inline-flex items-center justify-center">
-        {hasItems && (
-          <span
-            className={`i-ph-caret-right text-zg-badge transition-transform duration-snap ease-snap text-[var(--zg-text-muted)] ${isOpen ? 'rotate-90' : ''}`}
-            aria-hidden
-          />
-        )}
-      </span>
-      <span className="w-2 h-2 rounded-[3px] shrink-0" style={{ background: colorForCategory(cat.id) }} aria-hidden />
-      <span className={`flex-1 min-w-0 truncate ${cat.deferred ? 'text-[var(--zg-text-muted)]' : ''}`}>
-        {cat.label}
-      </span>
-      <span className="zg-meta shrink-0">
-        {cat.estimated && <span className="opacity-60">~</span>}
-        {fmtTokens(cat.tokens)}
-      </span>
-      <span className="zg-meta shrink-0 w-8 text-right opacity-80">{pct}</span>
-    </>
-  );
-
-  return (
-    <div className="flex flex-col">
-      {hasItems ? (
-        <button
-          type="button"
-          data-size="sm"
-          aria-expanded={isOpen}
-          onClick={onToggle}
-          className="zg-menu-row zg-press-subtle"
-        >
-          {body}
-        </button>
-      ) : (
-        // Same geometry as the expandable rows, but nothing to press: no hover.
-        <div data-size="sm" className="zg-menu-row pointer-events-none">
-          {body}
-        </div>
-      )}
-      {isOpen && hasItems && <ContextItems items={cat.items!} />}
-    </div>
-  );
-}
-
-/**
- * Expanded items of a category. Tool items are grouped by their MCP server
- * (one quiet header per group) and shown by their READABLE name
- * (`Github create pull request`, not `mcp_GitHub_create_pull_request`); the
- * raw wire name and the description live in the tooltip, and a click copies
- * the description (falls back to the name), the same text the model sees.
- */
-function ContextItems({ items }: { items: CategoryItem[] }) {
-  const groups = useMemo(() => {
-    const map = new Map<string | undefined, CategoryItem[]>();
-    for (const item of items) {
-      const list = map.get(item.group) ?? [];
-      list.push(item);
-      map.set(item.group, list);
-    }
-    return [...map.entries()];
-  }, [items]);
-  const labelled = groups.length > 1;
-
-  return (
-    <div className="flex flex-col mb-1">
-      {groups.map(([group, list]) => (
-        <div key={group ?? '__none'} className="flex flex-col">
-          {group !== undefined && labelled && (
-            <div className="zg-section-label h-5 pl-[42px] flex items-center select-none">{group}</div>
-          )}
-          {list.map((item) => (
-            <ContextToolItem
-              key={item.id}
-              item={item}
-              indent={group !== undefined && labelled ? 'pl-[50px]' : 'pl-[42px]'}
-            />
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ContextToolItem({ item, indent }: { item: CategoryItem; indent: string }) {
-  const labels = useChatLabels();
-  const [copied, setCopied] = useState(false);
-  const name = displayNameFor(item.label);
-  const text = item.description ?? item.label;
-  const copy = () => {
-    void navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1200);
-    });
-  };
-
-  return (
-    <Tooltip
-      portal
-      align="center"
-      side="top"
-      className="w-full"
-      label={
-        <span className="block max-w-[360px] whitespace-normal text-left">
-          <span className="zg-meta block">{item.label}</span>
-          {item.description && <span className="block mt-1 leading-snug">{clipText(item.description, 360)}</span>}
-          <span className="zg-meta block mt-1">{labels.contextClickToCopy(Boolean(item.description))}</span>
-        </span>
-      }
-    >
-      <button
-        type="button"
-        onClick={copy}
-        className={`zg-press-subtle flex items-center gap-2 w-full h-5 ${indent} pr-2 rounded-zg-sm text-zg-meta text-left text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] border-0 bg-transparent cursor-pointer`}
-      >
-        <span className="flex-1 min-w-0 truncate">{copied ? labels.contextCopied : name}</span>
-        <span className="zg-meta shrink-0">
-          {item.estimated && <span className="opacity-60">~</span>}
-          {fmtTokens(item.tokens)}
-        </span>
-      </button>
-    </Tooltip>
-  );
-}