zidane-ui 9.0.4 → 9.1.3

package/src/chat/transcript/BadgeMenu.tsx

@@ -1,223 +0,0 @@
-/**
- * Right-click menu for badges: links, files, `#123` / SHA chips, extension
- * references, sidebar badges and their card rows.
- *
- * A badge describes what it stands for (`BadgeTarget`) and calls
- * `useBadgeMenu()(event, target, cwd)`. The menu shows the built-in actions
- * at once (copy, add to prompt, open: `zidane/chat/pure`), asks the host for
- * the extensions' items (`ChatHost.badges`) and merges them in when they
- * land, and applies what a picked action answers (`BadgeActionEffect`):
- * clipboard, composer, opener, a brief notice. Opening stops the event, so
- * the turn's own menu never opens over a badge.
- */
-import { builtinBadgeActions, builtinBadgeEffect, mergeBadgeMenu } from 'zidane/chat/pure';
-import type { BadgeActionEffect, BadgeMenuItem, BadgeTarget } from 'zidane/chat/pure';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-
-import { RowActionsMenu, type RowActionItem } from '../../components/RowActionsMenu';
-import { useOptionalChatHost } from '../ChatProvider';
-import type { ChatLabels } from '../headless/labels';
-import { useChatLabels } from '../useChatLabels';
-
-/** Opens the badge menu for a badge at the event's point. */
-export type OpenBadgeMenu = (event: React.MouseEvent, target: BadgeTarget, cwd?: string | null) => void;
-
-/** Where "Add to prompt" and an action's `insert` go: the focused composer. */
-export interface BadgeMenuComposer {
-  /** A composer has focus now (re-render the provider when it changes). */
-  focused: boolean;
-  /** Whether a composer has focus at the moment an effect applies. */
-  isFocused(): boolean;
-  /** Inserts text at the composer's caret. */
-  insert(text: string): void;
-  /** Adds a file mention (a path relative to the chat's folder). */
-  mention(path: string): void;
-}
-
-/** Opens and reveals paths (`open` / `reveal` effects); each resolves `false` when the path is unavailable. */
-export interface BadgeMenuSystem {
-  /** Opens a path in the editor or file manager. */
-  openPath(path: string): Promise<boolean>;
-  /** Shows a path in the file manager. */
-  revealPath(path: string): Promise<boolean>;
-}
-
-const BadgeMenuContext = createContext<OpenBadgeMenu | null>(null);
-
-const NOTICE_MS = 2400;
-
-interface Open {
-  target: BadgeTarget;
-  cwd: string;
-  at: { x: number; y: number };
-  /** Extension items, once the host answered. */
-  extra: readonly BadgeMenuItem[];
-  seq: number;
-}
-
-/** `abs` relative to `cwd` when inside it: the form the composer's `@` mentions use. */
-function relativeTo(abs: string, cwd: string): string | null {
-  const root = cwd.replace(/\/$/, '');
-  return root && abs.startsWith(`${root}/`) ? abs.slice(root.length + 1) : null;
-}
-
-/** What {@link applyBadgeEffect} applies an effect with. */
-export interface BadgeEffectContext {
-  /** The badge acted on. */
-  target: BadgeTarget;
-  /** The chat's folder. */
-  cwd: string;
-  /** The built-in action's id; `null` for an extension's. */
-  builtin: string | null;
-  /** Where inserts go. */
-  composer?: BadgeMenuComposer | undefined;
-  /** Opens and reveals paths. */
-  system?: BadgeMenuSystem | undefined;
-  /** The notices' words. */
-  labels: Pick<ChatLabels, 'badgePathUnavailable' | 'badgeNoComposer' | 'badgeCopied'>;
-}
-
-/** Applies an effect. Resolves with the notice to show, if any. */
-async function applyBadgeEffect(effect: BadgeActionEffect, ctx: BadgeEffectContext): Promise<string | null> {
-  const { composer, system, labels } = ctx;
-  if (effect.copy !== undefined) await navigator.clipboard.writeText(effect.copy).catch(() => {});
-  // No focused composer (a popped-out panels window, an archived chat): the insert has nowhere to go.
-  // Dropped with a notice; the rest of the effect still applies.
-  let dropped = false;
-  if (effect.insert !== undefined && !composer?.isFocused()) dropped = true;
-  else if (effect.insert !== undefined && composer) {
-    // A file goes in as a real mention when it lives in the chat's folder.
-    const mention =
-      ctx.builtin === 'add-to-prompt' && ctx.target.kind === 'file' && ctx.target.href
-        ? relativeTo(ctx.target.href, ctx.cwd)
-        : null;
-    if (mention) composer.mention(mention);
-    else composer.insert(`${effect.insert} `);
-  }
-  if (effect.open !== undefined) {
-    if (/^https?:\/\//i.test(effect.open)) window.open(effect.open, '_blank', 'noopener');
-    else if (!(await (system?.openPath(effect.open) ?? Promise.resolve(false)).catch(() => false))) {
-      return labels.badgePathUnavailable;
-    }
-  }
-  if (
-    effect.reveal !== undefined &&
-    !(await (system?.revealPath(effect.reveal) ?? Promise.resolve(false)).catch(() => false))
-  ) {
-    return labels.badgePathUnavailable;
-  }
-  if (dropped) return labels.badgeNoComposer;
-  return effect.notice ?? (effect.copy !== undefined && effect.insert === undefined ? labels.badgeCopied : null);
-}
-
-/** Props for {@link BadgeMenuProvider}. */
-export interface BadgeMenuProviderProps {
-  /** The focused composer. Absent: "Add to prompt" is disabled and inserts are dropped with a notice. */
-  composer?: BadgeMenuComposer;
-  /** Opens and reveals paths. Absent: path actions answer "Path unavailable." */
-  system?: BadgeMenuSystem;
-  /** The surfaces whose badges open the menu. */
-  children: ReactNode;
-}
-
-/**
- * Provides the badge menu to the badges below it and renders it (and its notice) when one opens.
- *
- * @param props - The composer and the path opener the effects use, and the children.
- */
-export function BadgeMenuProvider({ composer, system, children }: BadgeMenuProviderProps) {
-  const badges = useOptionalChatHost()?.badges;
-  const labels = useChatLabels();
-  const [open, setOpen] = useState<Open | null>(null);
-  const [notice, setNotice] = useState<{ text: string; at: { x: number; y: number } } | null>(null);
-  const seq = useRef(0);
-
-  const show = useCallback<OpenBadgeMenu>(
-    (event, target, cwd) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const n = ++seq.current;
-      const scope = cwd ?? '';
-      setOpen({ target, cwd: scope, at: { x: event.clientX, y: event.clientY }, extra: [], seq: n });
-      // No host actions: built-ins only.
-      void badges
-        ?.actions(scope, target)
-        .then((extra) => setOpen((o) => (o && o.seq === n ? { ...o, extra } : o)))
-        .catch(() => {});
-    },
-    [badges],
-  );
-
-  useEffect(() => {
-    if (!notice) return undefined;
-    const t = window.setTimeout(() => setNotice(null), NOTICE_MS);
-    return () => window.clearTimeout(t);
-  }, [notice]);
-
-  const close = useCallback(() => setOpen(null), []);
-  const focused = composer?.focused ?? false;
-
-  const items = useMemo<RowActionItem[]>(() => {
-    if (!open) return [];
-    const { target, cwd, at } = open;
-    return mergeBadgeMenu([...builtinBadgeActions(target), ...open.extra]).map((item) => ({
-      id: `${item.source}:${item.id}`,
-      label: item.label,
-      ...(item.shortcut ? { shortcut: item.shortcut } : {}),
-      // The built-in "add to prompt" only inserts: nothing to do without a composer.
-      // (An extension's insert is known once it ran: dropped then, with a notice.)
-      ...(item.source === 'builtin' && item.id === 'add-to-prompt' && !focused
-        ? { disabled: true, title: labels.badgeNoComposer }
-        : {}),
-      onSelect: () => {
-        void (async () => {
-          const effect =
-            item.source === 'builtin'
-              ? (builtinBadgeEffect(item.id, target) ?? {})
-              : await (badges?.run(cwd, item.source, item.id, target) ?? Promise.resolve({})).catch(
-                  (err: unknown): BadgeActionEffect => ({
-                    notice: err instanceof Error ? err.message : String(err),
-                  }),
-                );
-          const text = await applyBadgeEffect(effect, {
-            target,
-            cwd,
-            builtin: item.source === 'builtin' ? item.id : null,
-            composer,
-            system,
-            labels,
-          });
-          if (text) setNotice({ text, at });
-        })();
-      },
-    }));
-  }, [open, focused, badges, composer, system, labels]);
-
-  return (
-    <BadgeMenuContext.Provider value={show}>
-      {children}
-      <RowActionsMenu open={open !== null} position={open?.at ?? null} onClose={close} items={items} />
-      {notice && (
-        <div
-          role="status"
-          data-testid="badge-notice"
-          // Enters with the shared menu motion, out of the corner it hangs from.
-          data-state="open"
-          data-side="bottom"
-          className="zg-float zg-menu-motion origin-top-left fixed z-zg-overlay zg-meta px-2 py-1 rounded-zg-sm pointer-events-none"
-          style={{ left: notice.at.x + 8, top: notice.at.y + 8 }}
-        >
-          {notice.text}
-        </div>
-      )}
-    </BadgeMenuContext.Provider>
-  );
-}
-
-/**
- * Opens the badge menu for a badge. Outside the provider (a test, a detached
- * surface) the event is left alone, so the surrounding menu still opens.
- */
-export function useBadgeMenu(): OpenBadgeMenu | null {
-  return useContext(BadgeMenuContext);
-}

package/src/chat/transcript/CardMarkdown.tsx

@@ -1,92 +0,0 @@
-/**
- * A hover card's body as compact Markdown: headings as a medium line, tight
- * lists, inline code, links out to the browser. Images and raw HTML are
- * dropped (`markdownExcerpt` already trims them host-side; this is the
- * renderer's own guard). Mounted only while a card is open, over at most
- * 600 chars, so the parse is a fraction of a millisecond.
- *
- * Long bodies clip at six lines with a fade; `line-clamp` can't, since it
- * only counts the lines of one block.
- */
-import { memo, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
-import ReactMarkdown, { type Components } from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-
-import { INLINE_CODE_CLASS } from './markdown-context';
-
-const FADE = 'linear-gradient(to bottom, black calc(100% - 20px), transparent)';
-
-const heading = ({ children }: { children?: ReactNode }) => (
-  <p className="m-0 font-medium text-[var(--zg-text)]">{children}</p>
-);
-
-const COMPONENTS: Components = {
-  h1: heading,
-  h2: heading,
-  h3: heading,
-  h4: heading,
-  h5: heading,
-  h6: heading,
-  p: ({ children }) => <p className="m-0">{children}</p>,
-  ul: ({ children }) => <ul className="m-0 pl-4 list-disc">{children}</ul>,
-  ol: ({ children }) => <ol className="m-0 pl-4 list-decimal">{children}</ol>,
-  li: ({ children }) => <li className="m-0 [&>p]:inline">{children}</li>,
-  blockquote: ({ children }) => (
-    <blockquote className="m-0 pl-2 border-l-2 border-[var(--zg-hairline)]">{children}</blockquote>
-  ),
-  a: ({ href, children }) => (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className="text-[var(--zg-text)] no-underline hover:underline"
-      onClick={(e) => e.stopPropagation()}
-    >
-      {children}
-    </a>
-  ),
-  code: ({ children }) => <code className={INLINE_CODE_CLASS}>{children}</code>,
-  pre: ({ children }) => {
-    const child = Array.isArray(children) ? children[0] : children;
-    const code =
-      child && typeof child === 'object' && 'props' in child
-        ? String((child.props as { children?: unknown }).children ?? '').replace(/\n$/, '')
-        : '';
-    return (
-      <pre className="m-0 px-2 py-1 rounded-[5px] bg-[var(--zg-code-bg)] text-[var(--zg-code-fg)] font-mono text-zg-meta leading-4 whitespace-pre overflow-hidden">
-        {code}
-      </pre>
-    );
-  },
-  img: () => null,
-  hr: () => null,
-};
-
-/** Props for {@link CardMarkdown}. */
-export interface CardMarkdownProps {
-  /** The excerpt, as Markdown. */
-  text: string;
-}
-
-/** A hover card's body as compact Markdown (see the module comment). */
-export const CardMarkdown = memo(({ text }: CardMarkdownProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [clipped, setClipped] = useState(false);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (el) setClipped(el.scrollHeight > el.clientHeight + 1);
-  }, [text]);
-  return (
-    <div
-      ref={ref}
-      data-testid="reference-card-body"
-      data-clipped={clipped ? '' : undefined}
-      className="flex flex-col gap-1 max-h-[96px] overflow-hidden text-[var(--zg-text-muted)] [overflow-wrap:anywhere]"
-      style={clipped ? { maskImage: FADE, WebkitMaskImage: FADE } : undefined}
-    >
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={COMPONENTS} skipHtml>
-        {text}
-      </ReactMarkdown>
-    </div>
-  );
-});

package/src/chat/transcript/ChipCard.tsx

@@ -1,176 +0,0 @@
-/**
- * The one hover card every chip opens: extension references (a Linear
- * ticket, a GitHub PR), commits, `#chat` references, skills and commands.
- * Each kind builds an `ExtensionReferenceView` and hands it here, so they
- * share one layout:
- *
- *   icon  label       status    (the chip's identity, its state on the right)
- *   Title                        (a link, or an action: open the chat)
- *   subtitle                     (where / who / when, muted)
- *   facts                        (label / value grid; diffs in the diff colors)
- *   body                         (a short muted Markdown excerpt)
- *
- * `loading` marks facts still being read (a commit's size, a chat's
- * context): a muted line holds their place so the card doesn't jump much.
- */
-import type { CSSProperties, ReactNode } from 'react';
-import type { ExtensionReferenceCardFact, ExtensionReferenceView } from 'zidane/chat/pure';
-
-import { HoverCard, type HoverCardTriggerProps } from '../../components/floating/HoverCard';
-import { badgeColorStyle, badgeToneClass, DiffFacts } from '../../session/ArtifactRowChips';
-import { useChatLabels } from '../useChatLabels';
-import { CardMarkdown } from './CardMarkdown';
-
-/**
- * The hover card's width, px.
- */
-export const CHIP_CARD_WIDTH = 340;
-
-/** Props for {@link ChipHover}. */
-export interface ChipHoverProps {
-  /** The card's accessible name. */
-  ariaLabel: string;
-  /** Renders the chip, spreading the props that open the card. */
-  trigger: (props: HoverCardTriggerProps) => ReactNode;
-  /** The card. */
-  children: ReactNode;
-}
-
-/**
- * A chip with its card: opens on hover / focus, under the chip.
- *
- * @param props - The {@link ChipHoverProps}.
- */
-export function ChipHover({ ariaLabel, trigger, children }: ChipHoverProps) {
-  return (
-    <HoverCard ariaLabel={ariaLabel} side="bottom" width={CHIP_CARD_WIDTH} trigger={(props) => trigger(props)}>
-      {children}
-    </HoverCard>
-  );
-}
-
-const TITLE = 'font-medium text-[var(--zg-text)] text-zg-ui leading-[18px]';
-
-/** Props for {@link ChipCard}. */
-export interface ChipCardProps {
-  /** What the card shows. */
-  view: ExtensionReferenceView;
-  /** Facts still being read. */
-  loading?: boolean;
-  /** The title as an action (open the chat) instead of `href`. */
-  onTitle?: () => void;
-  /** The label in the code face (a sha). */
-  mono?: boolean;
-  /** Extra classes on the card. */
-  className?: string;
-  /** Inline style on the card. */
-  style?: CSSProperties;
-}
-
-/**
- * The one hover card every chip opens (see the module comment for its layout).
- *
- * @param props - The {@link ChipCardProps}.
- */
-export function ChipCard({ view, loading = false, onTitle, mono = false, className, style }: ChipCardProps) {
-  const labels = useChatLabels();
-  const card = view.card;
-  return (
-    <div
-      className={`flex flex-col gap-1.5 px-3 py-2.5 text-zg-label leading-4${className ? ` ${className}` : ''}`}
-      style={style}
-      data-testid="reference-card"
-    >
-      <div className="flex items-center gap-1.5 min-w-0">
-        {view.icon?.gui && (
-          <span
-            aria-hidden
-            className={`${view.icon.gui} shrink-0 ${badgeToneClass(view.tone)}`}
-            style={badgeColorStyle(view.color)}
-          />
-        )}
-        <span className={`zg-meta truncate ${mono ? 'font-mono' : ''}`}>{view.label}</span>
-        {view.status && (
-          <span className={`zg-meta shrink-0 ml-auto ${badgeToneClass(view.tone)}`} style={badgeColorStyle(view.color)}>
-            {view.status}
-          </span>
-        )}
-      </div>
-      {view.title &&
-        (onTitle ? (
-          <button
-            type="button"
-            onClick={onTitle}
-            className={`${TITLE} text-left bg-transparent border-0 p-0 cursor-pointer hover:underline`}
-          >
-            {view.title}
-          </button>
-        ) : view.href ? (
-          <a href={view.href} target="_blank" rel="noreferrer" className={`${TITLE} no-underline hover:underline`}>
-            {view.title}
-          </a>
-        ) : (
-          <div className={TITLE}>{view.title}</div>
-        ))}
-      {card?.subtitle &&
-        (card.subtitleHref ? (
-          <a
-            href={card.subtitleHref}
-            target="_blank"
-            rel="noreferrer"
-            className="zg-meta truncate no-underline hover:underline hover:text-[var(--zg-text)]"
-          >
-            {card.subtitle}
-          </a>
-        ) : (
-          <div className="zg-meta truncate">{card.subtitle}</div>
-        ))}
-      {card?.facts && card.facts.length > 0 && (
-        <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5">
-          {card.facts.map((f) => (
-            <div key={f.label} className="contents">
-              <dt className="zg-meta">{f.label}</dt>
-              <dd className="m-0 min-w-0 truncate text-[var(--zg-text)]">
-                <CardFactValue fact={f} />
-              </dd>
-            </div>
-          ))}
-        </dl>
-      )}
-      {loading && (
-        <div className="zg-meta" data-testid="reference-card-loading">
-          {labels.chipLoading}
-        </div>
-      )}
-      {card?.body && <CardMarkdown text={card.body} />}
-    </div>
-  );
-}
-
-/** A fact's value: a change size in the diff colors, a link, or text. */
-function CardFactValue({ fact }: { fact: ExtensionReferenceCardFact }) {
-  if (fact.diff) {
-    const { added, removed, files } = fact.diff;
-    return (
-      <DiffFacts
-        added={added}
-        removed={removed}
-        {...(files !== undefined ? { files } : {})}
-        {...(fact.href ? { href: fact.href } : {})}
-      />
-    );
-  }
-  if (fact.href) {
-    return (
-      <a
-        href={fact.href}
-        target="_blank"
-        rel="noreferrer"
-        className="text-[var(--zg-text)] no-underline hover:underline"
-      >
-        {fact.value}
-      </a>
-    );
-  }
-  return <>{fact.value}</>;
-}

package/src/chat/transcript/ChipCards.tsx

@@ -1,100 +0,0 @@
-/**
- * The hover cards of the kit's own chips, on the shared `ChipCard`: a
- * commit (subject, author, when, size), a `#chat` reference (title,
- * project, model, context, turns), a skill (description, size in tokens)
- * and a command (description, aliases). Each reads its details when it
- * opens (`chip-details.ts`, over `ChatHost.chips`).
- */
-import { useContext } from 'react';
-
-import { commandView, commitView, sessionView, skillView } from '../headless/chip-views';
-import { useChatLabels } from '../useChatLabels';
-import { ChipCard } from './ChipCard';
-import { useCommand, useCommitInfo, useReferencedSession, useSkill } from './chip-details';
-import { CommandScopeContext, OpenSessionContext } from './markdown-context';
-
-/** Props for {@link CommitCard}. */
-export interface CommitCardProps {
-  /** The repository's folder. */
-  cwd: string | null;
-  /** The commit. */
-  sha: string;
-  /** Where the commit's page is. */
-  href?: string;
-}
-
-/**
- * A sha chip's card.
- *
- * @param props - The {@link CommitCardProps}.
- */
-export function CommitCard({ cwd, sha, href }: CommitCardProps) {
-  const labels = useChatLabels();
-  const { value, loading } = useCommitInfo(cwd, sha);
-  return <ChipCard view={commitView(labels, sha, value, href)} loading={loading} mono />;
-}
-
-/** Props for {@link SessionCard}. */
-export interface SessionCardProps {
-  /** The `#token` naming the chat. */
-  token: string;
-}
-
-/**
- * A `#chat` chip's card; its title opens the chat (`OpenSessionContext`).
- *
- * @param props - The {@link SessionCardProps}.
- */
-export function SessionCard({ token }: SessionCardProps) {
-  const labels = useChatLabels();
-  const { session, context, loading } = useReferencedSession(token);
-  const openSession = useContext(OpenSessionContext);
-  const view = sessionView(labels, token, session, context);
-  return (
-    <ChipCard
-      view={session || loading ? view : { ...view, card: { subtitle: labels.chipNotAmongChats } }}
-      loading={loading}
-      {...(session && openSession ? { onTitle: () => openSession(session.id) } : {})}
-    />
-  );
-}
-
-/** Props for {@link SkillCard}. */
-export interface SkillCardProps {
-  /** The folder whose skills are read. */
-  cwd: string | null;
-  /** The chip's text (`/review`, `$review`). */
-  text: string;
-}
-
-/**
- * A skill chip's card.
- *
- * @param props - The {@link SkillCardProps}.
- */
-export function SkillCard({ cwd, text }: SkillCardProps) {
-  const labels = useChatLabels();
-  const { skill, loading } = useSkill(cwd, text);
-  return <ChipCard view={skillView(labels, text, skill)} loading={loading} />;
-}
-
-/** Props for {@link CommandCard}. */
-export interface CommandCardProps {
-  /** The folder whose commands are read, when the transcript names no scope. */
-  cwd: string | null;
-  /** The chip's text (`/fix conflicts`). */
-  text: string;
-}
-
-/**
- * A command chip's card.
- *
- * @param props - The {@link CommandCardProps}.
- */
-export function CommandCard({ cwd, text }: CommandCardProps) {
-  const labels = useChatLabels();
-  const transcript = useContext(CommandScopeContext);
-  const scope = transcript ?? (cwd !== null ? { cwd, hostId: null } : null);
-  const { command, loading } = useCommand(scope, text);
-  return <ChipCard view={commandView(labels, text, command)} loading={loading} />;
-}