zidane-ui 9.0.4 → 9.1.3

package/src/chat/composer/suggestion-extension.ts

@@ -1,113 +0,0 @@
-/**
- * One completion trigger as a Tiptap Mention node. Apart from the popup
- * (`suggestions.tsx`) so the Tiptap code stays in the composer's lazy editor
- * chunk.
- */
-import Mention from '@tiptap/extension-mention';
-import { PluginKey } from '@tiptap/pm/state';
-import type { RefObject } from 'react';
-
-import {
-  TRIGGER,
-  type MentionItem,
-  type SuggestionKind,
-  type SuggestionSource,
-  type SuggestionState,
-} from './suggestions';
-
-function anchorOf(rect: (() => DOMRect | null) | null | undefined, fallback: Element): { x: number; y: number } {
-  let r: DOMRect | null = null;
-  try {
-    r = rect?.() ?? null;
-  } catch {
-    // jsdom and detached views cannot measure a caret.
-  }
-  const box = r ?? fallback.getBoundingClientRect();
-  return { x: box.left, y: box.top };
-}
-
-/**
- * One trigger as a Tiptap extension. `source` and `state` are refs so the
- * editor, built once, always reads the latest props and popup.
- *
- * @param kind - Which trigger the extension handles.
- * @param source - Ref to the source that supplies items and serialization.
- * @param state - Ref to the popup state the keyboard handler reads.
- * @param setState - Updates the popup state.
- */
-export function suggestionExtension(
-  kind: SuggestionKind,
-  source: RefObject<SuggestionSource | undefined>,
-  state: RefObject<SuggestionState | null>,
-  setState: (next: SuggestionState | null) => void,
-) {
-  const char = TRIGGER[kind];
-  const text = (attrs: { id?: unknown; label?: unknown }) => {
-    const item = { id: String(attrs.id ?? ''), label: String(attrs.label ?? attrs.id ?? '') };
-    return source.current?.serialize?.(item) ?? `${char}${item.label}`;
-  };
-  return Mention.extend({ name: kind }).configure({
-    renderText: ({ node }) => text(node.attrs),
-    renderHTML: ({ node }) => [
-      'span',
-      { class: 'zg-composer-mention', 'data-kind': kind, 'data-id': String(node.attrs.id ?? '') },
-      `${char}${String(node.attrs.label ?? node.attrs.id ?? '')}`,
-    ],
-    suggestion: {
-      char,
-      // One key per trigger: two suggestion plugins may not share one.
-      pluginKey: new PluginKey(`composer-${kind}`),
-      // A command names the whole prompt: only at its very start.
-      ...(kind === 'command' ? { allow: ({ range }: { range: { from: number } }) => range.from <= 1 } : {}),
-      items: async ({ query }) => [...((await source.current?.items(query)) ?? [])],
-      render: () => {
-        const open = (props: {
-          items: MentionItem[];
-          text: string;
-          command: (attrs: { id: string; label: string }) => void;
-          clientRect?: (() => DOMRect | null) | null;
-          editor: { view: { dom: Element } };
-        }) => {
-          // A command typed out in full has nothing left to complete: no popup, so Enter sends it.
-          const top = props.items[0];
-          if (kind === 'command' && top && text(top) === props.text) {
-            setState(null);
-            return;
-          }
-          setState({
-            kind,
-            items: props.items,
-            active: 0,
-            anchor: anchorOf(props.clientRect, props.editor.view.dom),
-            pick: (item) => props.command({ id: item.id, label: item.label }),
-          });
-        };
-        return {
-          onStart: open,
-          onUpdate: open,
-          onExit: () => setState(null),
-          onKeyDown: ({ event }) => {
-            const s = state.current;
-            if (!s) return false;
-            if (event.key === 'Escape') {
-              setState(null);
-              return true;
-            }
-            if (s.items.length === 0) return false;
-            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-              const step = event.key === 'ArrowDown' ? 1 : -1;
-              setState({ ...s, active: (s.active + step + s.items.length) % s.items.length });
-              return true;
-            }
-            if (event.key === 'Enter' || event.key === 'Tab') {
-              const item = s.items[s.active];
-              if (item) s.pick(item);
-              return true;
-            }
-            return false;
-          },
-        };
-      },
-    },
-  });
-}

package/src/chat/composer/suggestions.tsx

@@ -1,115 +0,0 @@
-/**
- * The composer's two completion hooks, `@` mentions and `/` commands: each
- * a Tiptap Mention node (`suggestion-extension.ts`) fed by an app's `items(query)`, with the popup drawn
- * by the kit (a `FloatingSurface` holding a `Menu` of rows) instead of a
- * DOM library. A picked item becomes an inline badge; on send it serialises
- * to plain text the host understands, `@label` / `/label` unless the
- * source says otherwise.
- */
-import { useEffect, useRef, type CSSProperties } from 'react';
-
-import { FloatingSurface } from '../../components/floating/FloatingSurface';
-import { Menu, MenuNote, MenuRow } from '../../components/Menu';
-import { useChatLabels } from '../useChatLabels';
-
-/** One completion offered by a {@link SuggestionSource}: a file, a session, a command. */
-export interface MentionItem {
-  /** What the host resolves (a path, a session id, a command name). */
-  id: string;
-  /** What the popup and the badge show. */
-  label: string;
-  /** Short text shown under the label in the popup. */
-  description?: string;
-  /** A Uno icon class (`i-ph-file`) drawn in the row. */
-  icon?: string;
-}
-
-/** Feeds one completion trigger of the composer: the items for what the user typed, and how a picked item is written into the prompt. */
-export interface SuggestionSource {
-  /** Items for what follows the trigger, ranked. Called on every keystroke while the popup is open. */
-  items(query: string): Promise<readonly MentionItem[]> | readonly MentionItem[];
-  /** The prompt text for a picked item. Default: `@label` for mentions, `/label` for commands. */
-  serialize?(item: Pick<MentionItem, 'id' | 'label'>): string;
-}
-
-/** Which trigger a completion belongs to: `mention` (`@`) or `command` (`/`). */
-export type SuggestionKind = 'mention' | 'command';
-
-/** The open popup, as the composer renders it. */
-export interface SuggestionState {
-  /** Which trigger opened the popup. */
-  kind: SuggestionKind;
-  /** The items shown, ranked. */
-  items: readonly MentionItem[];
-  /** Index in `items` of the row under the keyboard cursor. */
-  active: number;
-  /** Viewport position the popup attaches to, at the caret. */
-  anchor: { x: number; y: number };
-  /** Inserts an item into the draft as a badge. */
-  pick(item: MentionItem): void;
-}
-
-/** The character that opens each completion: `@` for mentions and `/` for commands. */
-export const TRIGGER: Record<SuggestionKind, string> = { mention: '@', command: '/' };
-
-/** Props for {@link SuggestionPopup}. */
-export interface SuggestionPopupProps {
-  /** The open popup, or `null` to hide it. */
-  state: SuggestionState | null;
-  /** Extra classes on the root element (the floating surface). */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The popup over the caret: one row per item, the keyboard cursor raised.
- *
- * @param props - Popup props: the `state` to show.
- */
-export function SuggestionPopup({ state, className, style }: SuggestionPopupProps) {
-  const labels = useChatLabels();
-  const listRef = useRef<HTMLDivElement | null>(null);
-  const active = state?.active ?? 0;
-  useEffect(() => {
-    listRef.current?.querySelector('[data-active]')?.scrollIntoView?.({ block: 'nearest' });
-  }, [active]);
-  const label = state?.kind === 'command' ? labels.commandSuggestions : labels.mentionSuggestions;
-  return (
-    <FloatingSurface
-      open={state !== null}
-      anchor={{ point: state?.anchor ?? { x: 0, y: 0 } }}
-      side="top"
-      align="start"
-      offset={6}
-      width={320}
-      className={className}
-      style={style}
-      data-testid="composer-suggestions"
-    >
-      {state && (
-        <div ref={listRef} className="max-h-[min(40vh,280px)] overflow-y-auto">
-          {state.items.length === 0 ? (
-            <MenuNote>{labels.noSuggestions}</MenuNote>
-          ) : (
-            <Menu role="listbox" aria-label={label}>
-              {state.items.map((item, i) => (
-                <MenuRow
-                  key={item.id}
-                  aria-selected={i === state.active}
-                  active={i === state.active}
-                  icon={item.icon ? <span aria-hidden className={item.icon} /> : undefined}
-                  title={item.label}
-                  description={item.description}
-                  // Keep the editor's focus (and selection) through the press.
-                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => state.pick(item)}
-                />
-              ))}
-            </Menu>
-          )}
-        </div>
-      )}
-    </FloatingSurface>
-  );
-}

package/src/chat/composer/use-agent-profiles.ts

@@ -1,97 +0,0 @@
-/**
- * The agent profiles a folder offers (`ComposerHost.agents`): read for the
- * folder, and again whenever the host says they may have changed
- * (`agents.onChanged`: extensions reloaded, settings changed), so an
- * extension's new agent shows without reopening anything.
- */
-import { useCallback, useEffect, useState } from 'react';
-
-import { useSessionApprovalHead } from '../../approvals/ApprovalsProvider';
-import type { ComposerAgentProfile, ComposerAgents, ComposerSessionView } from '../headless/composer/host-chrome';
-import { useInteractionHead } from '../interactions/hooks';
-import { useComposerHost } from './ComposerHostProvider';
-
-const NONE: readonly ComposerAgentProfile[] = [];
-
-/**
- * The profiles `cwd` offers (`''`: no folder). Empty until read, and without `agents`.
- *
- * @param cwd - The folder.
- * @param agentsOverride - The profiles' source. Default: the host's `agents`.
- */
-export function useAgentProfiles(cwd: string, agentsOverride?: ComposerAgents): readonly ComposerAgentProfile[] {
-  const hostAgents = useComposerHost().agents;
-  const agents = agentsOverride ?? hostAgents;
-  const [profiles, setProfiles] = useState<readonly ComposerAgentProfile[]>(NONE);
-  const [generation, setGeneration] = useState(0);
-
-  useEffect(() => agents?.onChanged?.(() => setGeneration((n) => n + 1)), [agents]);
-
-  useEffect(() => {
-    if (!agents) return undefined;
-    let cancelled = false;
-    void agents
-      .list(cwd)
-      .then((list) => {
-        if (!cancelled) setProfiles(list);
-      })
-      .catch(() => undefined);
-    return () => {
-      cancelled = true;
-    };
-  }, [agents, cwd, generation]);
-
-  return profiles;
-}
-
-/**
- * The profile after `currentId` in `ids`, wrapping; the first one when
- * `currentId` is not listed. `null` when there is nothing to switch to.
- *
- * @param ids - The offered profile ids, in the picker's order.
- * @param currentId - The current profile.
- */
-export function nextProfileId(ids: readonly string[], currentId: string): string | null {
-  if (ids.length <= 1) return null;
-  const index = ids.indexOf(currentId);
-  return ids[(index < 0 ? 0 : index + 1) % ids.length] ?? null;
-}
-
-/** Options for {@link useCycleAgent}. */
-export interface CycleAgentOptions {
-  /** The session runs now (no switch mid-run). */
-  running: boolean;
-  /** Called once a switch is written (refresh the app's session list). */
-  onCommitted?: () => void | Promise<void>;
-}
-
-/**
- * Quick-cycle through the folder's agent profiles (the `cycleAgent`
- * shortcut). Mirrors the TUI's Shift+Tab: the next profile in the picker's
- * order, wrapping; a no-op with one profile, while the session runs, or while
- * it waits on an approval (`ApprovalsHost`) or a question (`ChatHost`).
- *
- * @param session - The session, `null` for none (the callback does nothing).
- * @param options - Whether it runs, and what to do after a switch.
- * @returns A callback that moves the session to its next profile.
- */
-export function useCycleAgent(session: ComposerSessionView | null, options: CycleAgentOptions): () => Promise<void> {
-  const { running, onCommitted } = options;
-  const setAgent = useComposerHost().controls?.setAgent;
-  const profiles = useAgentProfiles(session?.cwd ?? '');
-  const sessionId = session?.id ?? null;
-  const approval = useSessionApprovalHead(sessionId);
-  const interaction = useInteractionHead(sessionId);
-
-  return useCallback(async () => {
-    if (!session || !setAgent || running || approval || interaction) return;
-    const next = nextProfileId(
-      profiles.map((p) => p.id),
-      session.agentId ?? 'build',
-    );
-    if (!next) return;
-    await setAgent(session.id, next);
-    // The write lands on disk; the app's lists read their own cache, which only a refresh updates.
-    await onCommitted?.();
-  }, [session, setAgent, running, approval, interaction, profiles, onCommitted]);
-}

package/src/chat/composer/use-cache-hints.ts

@@ -1,93 +0,0 @@
-/**
- * What a pick would cost the session's prompt cache, for the pickers: the
- * TUI's wording and floor (`cacheHintText`), from the composer's host
- * (`ComposerHost.controls.cacheImpact`; without it, no hints).
- */
-import { useCallback, useEffect, useReducer, useRef } from 'react';
-import { CACHE_HINT_MIN_TOKENS, cacheHintText } from 'zidane/chat/pure';
-
-import type { ComposerCacheImpact, ComposerCacheImpactChange } from '../headless/composer/host-chrome';
-import { useComposerHost } from './ComposerHostProvider';
-
-/** Whether any option can show a hint, judged from one answer: every re-read is the same last prompt. */
-function hintsPossible(impact: ComposerCacheImpact | null): boolean {
-  return impact !== null && !impact.expired && (impact.keepsCache || impact.tokens >= CACHE_HINT_MIN_TOKENS);
-}
-
-/**
- * Cache hints for a picker's options, fetched once per open: an option's
- * estimate is asked the first time it renders. The first answer decides for
- * all: no live agent, an expired cache, a short prompt or an older daemon
- * means no option can show one, so nothing more is asked. Never blocks a
- * pick; a failed estimate shows nothing.
- *
- * @param sessionId - The session the pick applies to; `null` (a draft) shows no hints.
- * @param open - Whether the picker is showing. A modal is (the default); a popover passes its open state: closed asks nothing, and each opening asks afresh.
- * @returns A lookup: the hint for option `key` (the change it would make), `undefined` while unknown or when there is none. A new lookup each time an answer arrives, so it can key a memo.
- */
-export function useCacheHints(
-  sessionId: string | null,
-  open = true,
-): (key: string, change: ComposerCacheImpactChange) => string | undefined {
-  const cacheImpact = useComposerHost().controls?.cacheImpact;
-  const known = useRef(new Map<string, ComposerCacheImpact | null>());
-  const wanted = useRef(new Map<string, ComposerCacheImpactChange>());
-  const asked = useRef(new Set<string>());
-  const gate = useRef<'unknown' | 'probing' | 'open' | 'closed'>('unknown');
-  // Bumped on each opening: answers to an earlier one are dropped.
-  const round = useRef(0);
-  const wasOpen = useRef(false);
-  const mounted = useRef(true);
-  const [answers, refresh] = useReducer((n: number) => n + 1, 0);
-
-  /* eslint-disable react-hooks/refs -- an opening resets the round in the render that shows it, before any row asks */
-  if (open && !wasOpen.current) {
-    round.current += 1;
-    known.current.clear();
-    wanted.current.clear();
-    asked.current.clear();
-    gate.current = 'unknown';
-  }
-  wasOpen.current = open;
-  /* eslint-enable react-hooks/refs */
-
-  useEffect(
-    () => () => {
-      mounted.current = false;
-    },
-    [],
-  );
-
-  // After each render: ask for the options that rendered without an estimate.
-  useEffect(() => {
-    if (!sessionId || !open || !cacheImpact || wanted.current.size === 0) return;
-    if (gate.current === 'probing' || gate.current === 'closed') return;
-    const batch = gate.current === 'unknown' ? [...wanted.current].slice(0, 1) : [...wanted.current];
-    if (gate.current === 'unknown') gate.current = 'probing';
-    const asking = round.current;
-    for (const [key, change] of batch) {
-      wanted.current.delete(key);
-      asked.current.add(key);
-      void cacheImpact(sessionId, change)
-        .catch(() => null)
-        .then((impact) => {
-          if (asking !== round.current) return;
-          known.current.set(key, impact);
-          if (gate.current === 'probing') gate.current = hintsPossible(impact) ? 'open' : 'closed';
-          if (mounted.current) refresh();
-        });
-    }
-  });
-
-  return useCallback(
-    (key: string, change: ComposerCacheImpactChange) => {
-      if (!sessionId || !open || !cacheImpact || gate.current === 'closed') return undefined;
-      if (known.current.has(key)) return cacheHintText(known.current.get(key));
-      if (!asked.current.has(key)) wanted.current.set(key, change);
-      return undefined;
-    },
-    // `answers` renews the lookup when an estimate arrives.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sessionId, open, cacheImpact, answers],
-  );
-}

package/src/chat/composer/use-composer-stores.ts

@@ -1,140 +0,0 @@
-/**
- * The composer chrome's reads in a component: a host resource (a catalog, a
- * context gauge), the model catalog, the picker preferences and the
- * remembered knobs. Each reads the nearest `ComposerHost`.
- */
-import { useEffect, useMemo, useSyncExternalStore } from 'react';
-import type { ModelNamer, SessionKnobs } from 'zidane/chat/pure';
-
-import { IDLE_RESOURCE, type ResourceSnapshot } from '../../app/headless/resource';
-import type { ComposerModelEntry } from '../headless/composer/models';
-import { modelKnobsOf, type ModelKnobs } from '../headless/composer/model-knobs';
-import { modelNamesOf } from '../headless/composer/model-names';
-import {
-  createModelPickerPrefs,
-  type ModelPickerPrefs,
-  type ModelPickerPrefsStore,
-} from '../headless/composer/model-picker-prefs';
-import type { Readable } from '../headless/store';
-import { useComposerHost } from './ComposerHostProvider';
-
-const noSubscribe = () => () => undefined;
-const idle = () => IDLE_RESOURCE as ResourceSnapshot<never>;
-
-/**
- * A host resource, kept current while mounted (`IDLE_RESOURCE` for `null`).
- *
- * @param resource - The resource; memoize it (a new one each render resubscribes).
- */
-export function useHostResource<T>(resource: Readable<ResourceSnapshot<T>> | null): ResourceSnapshot<T> {
-  return useSyncExternalStore(
-    resource ? resource.subscribe : noSubscribe,
-    resource ? resource.get : idle,
-    resource ? resource.get : idle,
-  );
-}
-
-/**
- * The text of a resource's error, `null` for none.
- *
- * @param error - The snapshot's `error`.
- */
-export function resourceErrorText(error: unknown): string | null {
-  if (error === undefined || error === null) return null;
-  return typeof error === 'string' ? error : error instanceof Error ? error.message : String(error);
-}
-
-/** A model catalog as a picker reads it. */
-export interface ModelCatalogState {
-  /** The rows, `null` while loading. */
-  catalog: readonly ComposerModelEntry[] | null;
-  /** Why it failed to load. */
-  error: string | null;
-  /** Reads it again. */
-  retry: (() => void) | undefined;
-}
-
-/**
- * The catalog to list: `outer` when the caller loaded one, else the host's for `cwd` on `hostId`.
- *
- * @param outer - A catalog the caller already holds.
- * @param cwd - The folder.
- * @param hostId - The server, `null` for this computer.
- */
-export function useModelCatalog(
-  outer: readonly ComposerModelEntry[] | null,
-  cwd?: string,
-  hostId: string | null = null,
-): ModelCatalogState {
-  const models = useComposerHost().models;
-  const resource = useMemo(() => (outer || !models ? null : models.catalog(cwd, hostId)), [outer, models, cwd, hostId]);
-  const snap = useHostResource(resource);
-  if (outer) return { catalog: outer, error: null, retry: undefined };
-  return {
-    catalog: snap.data ?? null,
-    error: snap.status === 'error' ? resourceErrorText(snap.error) : null,
-    retry: resource ? snap.refresh : undefined,
-  };
-}
-
-const memoryPrefs = createModelPickerPrefs({ getItem: () => null, setItem: () => undefined });
-
-/** The host's picker preferences store (an in-memory one when it has none). */
-export function useModelPickerPrefsStore(): ModelPickerPrefsStore {
-  return useComposerHost().pickerPrefs ?? memoryPrefs;
-}
-
-/** The model picker's preferences, live. */
-export function useModelPickerPrefs(): ModelPickerPrefs {
-  const store = useModelPickerPrefsStore();
-  return useSyncExternalStore(store.subscribe, store.get, store.get);
-}
-
-function useKnobsMemory() {
-  const store = modelKnobsOf(useComposerHost().prefs);
-  useEffect(() => {
-    void store.load();
-  }, [store]);
-  return { store, memory: useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot) };
-}
-
-/**
- * The last effort and options used with `modelId`, live.
- *
- * @param modelId - The model.
- */
-export function useRememberedKnobs(modelId: string | null): ModelKnobs {
-  const { store, memory } = useKnobsMemory();
-  return store.remembered(modelId, memory);
-}
-
-/**
- * A new chat's starting effort and options on `modelId`, live (its draft's pick, the configured defaults, the last used).
- *
- * @param modelId - The model the draft starts on.
- * @param configured - The configured defaults.
- */
-export function useDraftKnobs(modelId: string | null, configured: SessionKnobs | undefined): ModelKnobs {
-  const { store, memory } = useKnobsMemory();
-  return store.draft(modelId, configured, memory);
-}
-
-function useNames() {
-  const store = modelNamesOf(useComposerHost().models);
-  return useSyncExternalStore(store.subscribe, store.get, store.get);
-}
-
-/** Names a model as the model picker does; re-renders when the catalog arrives or changes. */
-export function useComposerModelName(): ModelNamer {
-  return useNames().model;
-}
-
-/** A provider's label as the model picker groups it (`Anthropic`). */
-export function useComposerProviderLabel(): (providerKey: string) => string {
-  return useNames().provider;
-}
-
-/** The remembered knobs of the nearest host, for actions. */
-export function useModelKnobs() {
-  return modelKnobsOf(useComposerHost().prefs);
-}