zidane-ui 9.1.1 → 9.1.4

package/src/chat/headless/transcript-host.ts

@@ -1,180 +0,0 @@
-/**
- * The `ChatHost` members the transcript's extras read: the search a
- * session's windows share, extension text references, what prose chips
- * name on disk, the facts chip hover cards show, and the badge menu's
- * extension actions. Every one is optional: a host that leaves one out
- * hides what needs it (no reference badges, chips open the path as written,
- * no commit card, built-in badge actions only).
- */
-import type {
-  BadgeActionEffect,
-  BadgeMenuItem,
-  BadgeTarget,
-  ExtensionReferenceView,
-  ReferenceProviderWire,
-} from 'zidane/chat/pure';
-
-import type { ChatSessionStatus } from './host';
-
-/** The transcript search of one session, as its windows share it. */
-export interface ChatSearchState {
-  /** The session the search runs in. */
-  sessionId: string;
-  /** The search is open. */
-  active: boolean;
-  /** The query as typed. */
-  query: string;
-}
-
-/** The transcript search a session's windows share (the composer's `?` mode). */
-export interface ChatSearchSync {
-  /** Tells the session's other windows this window's search. */
-  set(sessionId: string, state: { active: boolean; query: string }): Promise<void>;
-  /** Calls `listener` when another window changes a session's search. Returns the unsubscribe. */
-  onChanged(listener: (state: ChatSearchState) => void): () => void;
-}
-
-/** What made the host's references change. */
-export type ChatReferencesChange =
-  /** The extensions changed: every provider and view is stale. */
-  | { kind: 'all' }
-  /** One reference changed (a pull request refreshed): its views are stale. */
-  | { kind: 'reference'; providerId: string; key: string };
-
-/** Extension text references (`ctx.registerReferences`): the providers' patterns per folder and the views of the keys found. */
-export interface ChatReferences {
-  /**
-   * The providers for `cwd` (`''`: user-level). `peek`: only what the host already built, `null` when it
-   * has nothing cached (a sidebar title never builds a registry).
-   */
-  providers(cwd: string, options?: { peek?: boolean }): Promise<readonly ReferenceProviderWire[] | null>;
-  /** The views of `items`, in order: `null` for a key that names nothing (it stays plain text). */
-  resolve(
-    cwd: string,
-    items: readonly { providerId: string; key: string }[],
-  ): Promise<readonly (ExtensionReferenceView | null)[]>;
-  /** Keys per `resolve` call, at most. Default 50. */
-  resolveMax?: number;
-  /** Calls `listener` when providers or views change. Returns the unsubscribe. Absent: views refresh on their own schedule. */
-  onChanged?(listener: (change: ChatReferencesChange) => void): () => void;
-}
-
-/** What a name in prose points at: a file or folder on disk, a git branch of the repo, or nothing. */
-export type ChatResolvedPath =
-  { kind: 'file' | 'dir'; path: string } | { kind: 'branch'; name: string; remote?: string } | { kind: 'missing' };
-
-/** What prose chips name on the session's disk. */
-export interface ChatPaths {
-  /** What each of `texts` names under `cwd`, in order; `null` when the folder can't be checked. */
-  resolve(cwd: string, texts: readonly string[]): Promise<readonly ChatResolvedPath[] | null>;
-  /** Calls `listener` with a folder whose files may have moved (a commit, a checkout). Returns the unsubscribe. */
-  onChanged?(listener: (cwd: string) => void): () => void;
-}
-
-/** One commit, for a sha chip's hover card. */
-export interface ChatCommit {
-  /** The full sha. */
-  sha: string;
-  /** First line of the message. */
-  subject: string;
-  /** Author name. */
-  author: string;
-  /** Author date, epoch ms. */
-  authoredAt: number;
-  /** Lines added. */
-  added: number;
-  /** Lines removed. */
-  removed: number;
-  /** Files changed. */
-  files: number;
-}
-
-/** A session as a `#chat` chip's hover card shows it. */
-export interface ChatSessionFacts {
-  /** Session id. A `#token` names the one session whose id starts with it. */
-  id: string;
-  /** Title; empty when untitled. */
-  title: string;
-  /** Run state. */
-  status: ChatSessionStatus;
-  /** Epoch ms of the last activity. */
-  updatedAt: number;
-  /** The folder the session runs in (its last segment is shown). */
-  project?: string;
-  /** Model id. */
-  modelId?: string;
-  /** Prompts sent. */
-  prompts?: number;
-  /** Turns stored. */
-  turns?: number;
-  /** Branch of the session's environment. */
-  branch?: string;
-}
-
-/** A session's context gauge, as a `#chat` card shows it. */
-export interface ChatContextFacts {
-  /** The model the gauge is for. */
-  modelId: string;
-  /** Tokens in use, formatted (`12.3k`). */
-  usedLabel: string;
-  /** The window, formatted (`200k`). */
-  windowLabel: string;
-  /** Used share of the window, 0 to 1. */
-  fraction: number;
-}
-
-/** A skill, as a skill chip's hover card shows it. */
-export interface ChatSkillFacts {
-  /** Skill name. */
-  name: string;
-  /** One-line description. */
-  description?: string;
-  /** The instructions (their size is shown). */
-  instructions?: string;
-  /** Where it was found (`project`, `user`, a plugin). */
-  source?: string;
-}
-
-/** A command, as a command chip's hover card shows it. */
-export interface ChatCommandFacts {
-  /** Command name, without the slash. */
-  name: string;
-  /** One-line description. */
-  description?: string;
-  /** Other names it answers to. */
-  aliases?: readonly string[];
-  /** Its group (`zidane`, an extension). */
-  group?: string;
-}
-
-/** What chip hover cards read when they open. Each method left out leaves its card with the chip's own text. */
-export interface ChatChipDetails {
-  /** A commit of the repo at `cwd`; `null` when unknown. */
-  commit?(cwd: string, sha: string): Promise<ChatCommit | null>;
-  /** The sessions a `#chat` chip can name. */
-  sessions?(): Promise<readonly ChatSessionFacts[]>;
-  /** A session's context gauge; `null` when unknown. */
-  context?(sessionId: string): Promise<ChatContextFacts | null>;
-  /** The skills of `cwd`. */
-  skills?(cwd: string): Promise<readonly ChatSkillFacts[]>;
-  /** The commands of `cwd` on a host (`null`: this one). */
-  commands?(cwd: string, hostId: string | null): Promise<readonly ChatCommandFacts[]>;
-}
-
-/** Site icons for link badges: one ask per origin, shared by every badge of the site. */
-export interface ChatSiteIcons {
-  /** The icon's data URL once known; `null` when the site has none or it has not loaded. */
-  get(origin: string): string | null;
-  /** Asks for an origin's icon, once. */
-  request(origin: string): void;
-  /** Calls `listener` after a new icon arrives. Returns the unsubscribe. */
-  subscribe(listener: () => void): () => void;
-}
-
-/** The badge menu's extension actions (`badges:actions`). Absent: the built-in actions only. */
-export interface ChatBadgeActions {
-  /** The extensions' items for a badge. */
-  actions(cwd: string, target: BadgeTarget): Promise<readonly BadgeMenuItem[]>;
-  /** Runs an extension's item and resolves with what to do. */
-  run(cwd: string, source: string, id: string, target: BadgeTarget): Promise<BadgeActionEffect>;
-}

package/src/chat/headless/transcript-labels.ts

@@ -1,12 +0,0 @@
-/**
- * The strings of the transcript's extras: the search, select-turn, the turn
- * menu, earlier history, prose chips and their hover cards, the badge menu.
- * Part of the chat dictionary (`DEFAULT_CHAT_LABELS`), overridable the same way.
- */
-import { CHIP_LABELS } from './chip-labels';
-import { TURN_LABELS } from './turn-labels';
-
-export const TRANSCRIPT_LABELS = {
-  ...TURN_LABELS,
-  ...CHIP_LABELS,
-};

package/src/chat/headless/turn-labels.ts

@@ -1,28 +0,0 @@
-/** The strings of the transcript search, select-turn and the turn menu. Part of `TRANSCRIPT_LABELS`. */
-export const TURN_LABELS = {
-  // The ⌘F search overlay (its match steps reuse the design system's find labels)
-  findInConversation: 'Find in conversation',
-  findInConversationClose: 'Close search',
-  // The turn menu
-  turnMenuCopySelection: 'Copy selection',
-  turnMenuCopySelectionFailed: "Couldn't copy the selection.",
-  turnMenuCopy: 'Copy message',
-  turnMenuFork: 'Fork from here',
-  turnMenuEdit: 'Edit message',
-  turnMenuRewind: 'Rewind to here',
-  turnMenuDelete: 'Delete turn',
-  turnMenuStopFirst: (label: string) => `${label} (stop the run first)`,
-  turnMenuSent: (age: string) => `Sent ${age}`,
-  turnMenuEditNeedsComposer: 'Open the chat to edit this message.',
-  // Select-turn mode's dock row
-  selectTurnSelecting: 'Selecting',
-  selectTurnMove: 'Move',
-  selectTurnDetails: 'Details',
-  selectTurnCopy: 'Copy',
-  selectTurnFork: 'Fork',
-  selectTurnExit: 'Exit',
-  // Select-turn mode's notices
-  selectTurnCopied: 'Copied',
-  selectTurnNothingToCopy: 'Nothing to copy',
-  selectTurnForkFailed: 'Fork failed',
-};

package/src/chat/headless/turn-prompt.ts

@@ -1,32 +0,0 @@
-/**
- * A sent prompt back as a draft, from the transcript's `user-prompt` events:
- * what "Edit message" puts back in the composer.
- */
-import type { ChatAttachment, ChatEvent } from './host';
-
-/** A sent prompt as a draft: its text and attachments. */
-export interface TurnPromptDraft {
-  /** The prompt text. */
-  text: string;
-  /** Its attachments. */
-  attachments: ChatAttachment[];
-}
-
-/**
- * The prompt of a turn: a turn with several text blocks shows several prompts
- * (joined back with a blank line); their attachments ride along.
- *
- * @param events - The session's transcript events.
- * @param turnId - The turn.
- * @param fallbackText - The text when the transcript holds no prompt of it.
- */
-export function promptDraftOf(events: readonly ChatEvent[], turnId: string, fallbackText = ''): TurnPromptDraft {
-  const prompts = events.filter(
-    (e): e is ChatEvent & { kind: 'user-prompt' } => e.kind === 'user-prompt' && e.turnId === turnId,
-  );
-  if (prompts.length === 0) return { text: fallbackText, attachments: [] };
-  return {
-    text: prompts.map((e) => e.text).join('\n\n'),
-    attachments: prompts.flatMap((e) => e.attachments ?? []),
-  };
-}

package/src/chat/index.ts

@@ -1,31 +0,0 @@
-/**
- * `zidane-ui/chat`: the styled chat components over a `ChatHost`:
- * `ChatProvider`, `SessionList`, `Transcript` / `HostTranscript`,
- * `Composer` / `HostComposer`, `HostInteractions`, plus everything in
- * `./composer`, `./interactions` and `./transcript`. The React-free model
- * is `zidane-ui/chat/headless`.
- */
-export * from './ChatProvider';
-export * from './SessionList';
-export * from './SessionListRow';
-export * from './SessionGroupHeader';
-export * from './SessionFilterMenu';
-export * from './StatusDot';
-export * from './RunEstimateChip';
-export * from './Throbber';
-export * from './DaemonOrb';
-export * from './HostStatusDot';
-export * from './HostBadge';
-export * from './SessionHostHeader';
-export * from './PdfPreview';
-export * from './TextPreview';
-export * from './provider-color';
-export * from './Transcript';
-export * from './HostTranscript';
-export { TRANSCRIPT_OPTION_KEYS, useTranscriptOptions } from './transcript-options';
-export * from './SessionStreamsProvider';
-export * from './useChatLabels';
-export * from './composer';
-export * from './interactions';
-// `./transcript/index`, not `./transcript`: that resolves to `Transcript.tsx` on case-insensitive filesystems.
-export * from './transcript/index';

package/src/chat/interactions/HostInteractions.tsx

@@ -1,76 +0,0 @@
-/**
- * The requests a session is waiting on (`host.interactions.pending`), one
- * `InteractionCard` each, answered through `host.interactions.answer`
- * (and withdrawn through `cancel` when the host has it). Renders nothing
- * while nothing waits, or when the host has no interactions. The oldest
- * request comes first; `autoFocus` focuses it as it arrives.
- *
- *   <HostInteractions sessionId={id} />
- */
-import { useMemo, type ComponentType, type CSSProperties } from 'react';
-
-import { useChatHost } from '../ChatProvider';
-import type { ChatInteraction } from '../headless/host';
-import { constant, useReadable } from '../headless/store';
-import type { MarkdownSlotProps } from '../transcript/renderers';
-import { useChatLabels } from '../useChatLabels';
-import { InteractionCard } from './InteractionCard';
-
-/** Props for {@link HostInteractions}. */
-export interface HostInteractionsProps {
-  /** Id of the session whose pending requests to show. */
-  sessionId: string;
-  /**
-   * Focuses the oldest card as it arrives.
-   * @default false
-   */
-  autoFocus?: boolean;
-  /** Extra class names for the list. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Draws an intro or a plan. Defaults to the transcript's `Markdown` slot. */
-  Markdown?: ComponentType<MarkdownSlotProps>;
-}
-
-const NONE = constant<readonly ChatInteraction[]>([]);
-
-/**
- * Renders the requests a session is waiting on as cards, oldest first, answered through the {@link ChatHost} in context. Renders nothing while none wait.
- *
- * @param props - The {@link HostInteractionsProps}.
- */
-export function HostInteractions({
-  sessionId,
-  autoFocus = false,
-  className = '',
-  style,
-  Markdown,
-}: HostInteractionsProps) {
-  const host = useChatHost();
-  const labels = useChatLabels();
-  const interactions = host.interactions;
-  const store = useMemo(() => interactions?.pending(sessionId) ?? NONE, [interactions, sessionId]);
-  const pending = useReadable(store);
-  if (!interactions || pending.length === 0) return null;
-  const cancel = interactions.cancel?.bind(interactions);
-  return (
-    <ul
-      className={`m-0 p-0 list-none flex flex-col gap-2 ${className}`}
-      style={style}
-      aria-label={labels.interactionsLabel}
-    >
-      {pending.map((item, i) => (
-        <li key={item.requestId}>
-          <InteractionCard
-            interaction={item}
-            autoFocus={autoFocus && i === 0}
-            Markdown={Markdown}
-            onAnswer={(response) => interactions.answer(item.requestId, response)}
-            {...(cancel ? { onDismiss: () => cancel(item.requestId) } : {})}
-          />
-        </li>
-      ))}
-    </ul>
-  );
-}

package/src/chat/interactions/InboxPanel.tsx

@@ -1,226 +0,0 @@
-/**
- * The inbox: what the agent is waiting on in one session, from
- * `ChatHost.interactions`. The head request is expanded as a card; older
- * ones stack beneath it, collapsed to one line and expandable. Resolving a
- * card animates it out (`exit` / `fade-out`, none with motion off) and the
- * next one takes the head. Nothing in here decides implicitly: leaving a
- * card alone keeps the agent waiting. Esc hands the keyboard back
- * (`onEscape`).
- *
- *   <InboxPanel sessionId={id} focus={focusRequest === INBOX_PANEL_ID} onFocusTaken={takeFocusRequest} />
- */
-import { useEffect, useState, type ComponentType, type CSSProperties } from 'react';
-import type { InteractionRequest } from 'zidane/chat';
-
-import { MetaChip } from '../../components/Form';
-import { PanelEmpty } from '../../components/PanelEmpty';
-import { readExitMs } from '../../motion/presence';
-import { useChatHost } from '../ChatProvider';
-import type { ChatInteraction } from '../headless/host';
-import type { MarkdownSlotProps } from '../transcript/renderers';
-import { useChatLabels } from '../useChatLabels';
-import { usePendingInteractions } from './hooks';
-import { PlanCard } from './PlanCard';
-import { QuestionForm } from './QuestionForm';
-
-/** What a dismissed question tells the agent. */
-const DISMISSED = 'dismissed by user';
-
-/** Props for {@link InboxPanel}. */
-export interface InboxPanelProps {
-  /** The session whose requests to show. */
-  sessionId: string;
-  /** Hand keyboard focus to the head card once it is there (the panel's focus request). */
-  focus?: boolean;
-  /** The head card took `focus`: clear the request. */
-  onFocusTaken?(): void;
-  /** Esc inside the list: give the keyboard back (the composer). Absent: Esc does nothing here. */
-  onEscape?(): void;
-  /** Draws an intro or a plan. Defaults to the transcript's `Markdown` slot. */
-  Markdown?: ComponentType<MarkdownSlotProps>;
-  /** Extra class names for the root. */
-  className?: string;
-  /** Inline styles on the root element. */
-  style?: CSSProperties;
-}
-
-interface Row {
-  item: ChatInteraction;
-  /** Resolved; kept mounted for the exit animation. */
-  leaving: boolean;
-}
-
-/**
- * Renders one session's pending requests as inbox cards, the head one open; an empty state while none wait.
- *
- * @param props - The {@link InboxPanelProps}.
- */
-export function InboxPanel({
-  sessionId,
-  focus = false,
-  onFocusTaken,
-  onEscape,
-  Markdown,
-  className,
-  style,
-}: InboxPanelProps) {
-  const interactions = useChatHost().interactions;
-  const labels = useChatLabels();
-  const pending = usePendingInteractions(sessionId);
-
-  // Exit presence: a request that left `pending` lingers as `leaving` for the animation.
-  const [rows, setRows] = useState<Row[]>(() => pending.map((item) => ({ item, leaving: false })));
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- a resolved request stays mounted, leaving, for its exit
-    setRows((prev) => {
-      const ids = new Set(pending.map((p) => p.requestId));
-      const kept = prev.map((r) => (ids.has(r.item.requestId) || r.leaving ? r : { ...r, leaving: true }));
-      const known = new Set(kept.map((r) => r.item.requestId));
-      const added = pending.filter((p) => !known.has(p.requestId)).map((item) => ({ item, leaving: false }));
-      if (added.length === 0 && kept.every((r, i) => r === prev[i])) return prev;
-      return [...kept, ...added];
-    });
-  }, [pending]);
-  useEffect(() => {
-    if (!rows.some((r) => r.leaving)) return;
-    // The card's `exit` / `fade-out` animation (`.zg-inbox-card`); 0 under motion off.
-    const exitMs = readExitMs();
-    const t = setTimeout(() => setRows((prev) => prev.filter((r) => !r.leaving)), exitMs && exitMs + 20);
-    return () => clearTimeout(t);
-  }, [rows]);
-
-  const head = rows.find((r) => !r.leaving);
-  const [expanded, setExpanded] = useState<string | null>(null);
-  // A focus request hands focus to the head card once.
-  useEffect(() => {
-    if (focus && head) onFocusTaken?.();
-  }, [focus, head, onFocusTaken]);
-
-  if (rows.length === 0) {
-    return <PanelEmpty icon="i-ph-tray" title={labels.inboxEmpty} className={className} style={style} />;
-  }
-
-  return (
-    <div className={`flex-1 min-h-0 overflow-y-auto${className ? ` ${className}` : ''}`} style={style}>
-      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Esc from any card hands the keyboard back */}
-      <ul
-        className="m-0 p-3 list-none flex flex-col gap-2"
-        aria-label={labels.interactionsLabel}
-        onKeyDown={(e) => {
-          // Esc never decides; it hands the keyboard back.
-          if (e.key === 'Escape' && onEscape) {
-            e.preventDefault();
-            e.stopPropagation();
-            onEscape();
-          }
-        }}
-      >
-        {rows.map((row) => {
-          const isHead = row === head;
-          const open = isHead || expanded === row.item.requestId;
-          const request = row.item.request;
-          return (
-            <li
-              key={row.item.requestId}
-              data-state={row.leaving ? 'leaving' : 'open'}
-              data-testid="inbox-card"
-              className="zg-inbox-card zg-raised border rounded-zg-lg overflow-hidden"
-            >
-              <CardHeader
-                request={request}
-                live={row.item.live !== false}
-                open={open}
-                collapsible={!isHead}
-                onToggle={() => setExpanded((e) => (e === row.item.requestId ? null : row.item.requestId))}
-              />
-              {open && !row.leaving && interactions && (
-                <div className="px-3 pb-3">
-                  {request.kind === 'plan' ? (
-                    <PlanCard
-                      request={request}
-                      autoFocus={isHead && focus}
-                      Markdown={Markdown}
-                      onAnswer={(response) => interactions.answer(request.id, response)}
-                    />
-                  ) : (
-                    <QuestionForm
-                      request={request}
-                      autoFocus={isHead && focus}
-                      Markdown={Markdown}
-                      onAnswer={(response) => interactions.answer(request.id, response)}
-                      {...(interactions.cancel ? { onDismiss: () => interactions.cancel!(request.id, DISMISSED) } : {})}
-                    />
-                  )}
-                </div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-function CardHeader({
-  request,
-  live,
-  open,
-  collapsible,
-  onToggle,
-}: {
-  request: InteractionRequest;
-  live: boolean;
-  open: boolean;
-  collapsible: boolean;
-  onToggle: () => void;
-}) {
-  const labels = useChatLabels();
-  const kind = request.kind === 'plan' ? labels.interactionPlan : labels.interactionQuestion;
-  const title =
-    request.kind === 'plan'
-      ? request.payload.title
-      : request.payload.questions.length === 1
-        ? request.payload.questions[0]!.prompt
-        : labels.questionCount(request.payload.questions.length);
-  const icon = request.kind === 'plan' ? 'i-ph-path' : 'i-ph-question';
-  const inner = (
-    <>
-      {/* Every part sits in a 20px line box pinned to the top, so the icon, meta
-          and caret stay on the title's first line when an open title wraps. */}
-      <span className="h-5 shrink-0 inline-flex items-center" aria-hidden>
-        <span className={`${icon} text-zg-body text-zg-warn`} />
-      </span>
-      <span className="min-w-0 flex-1 flex items-baseline gap-2">
-        <span className="zg-section-label shrink-0">{kind}</span>
-        <span
-          className={`min-w-0 text-zg-ui leading-5 font-medium text-[var(--zg-text)] ${open ? 'zg-balance' : 'truncate'}`}
-        >
-          {title}
-        </span>
-      </span>
-      {!live && (
-        <span className="h-5 shrink-0 inline-flex items-center">
-          <MetaChip>{labels.inboxPreviousSession}</MetaChip>
-        </span>
-      )}
-      {collapsible && (
-        <span className="h-5 shrink-0 inline-flex items-center" aria-hidden>
-          <span className={`${open ? 'i-ph-caret-up' : 'i-ph-caret-down'} text-zg-label text-[var(--zg-text-muted)]`} />
-        </span>
-      )}
-    </>
-  );
-  const cls = 'flex items-start gap-2 w-full px-3 py-2.5 text-left';
-  return collapsible ? (
-    <button
-      type="button"
-      onClick={onToggle}
-      aria-expanded={open}
-      className={`${cls} bg-transparent border-0 cursor-pointer hover:bg-[var(--zg-row-hover)]`}
-    >
-      {inner}
-    </button>
-  ) : (
-    <div className={cls}>{inner}</div>
-  );
-}