zidane-ui 9.0.4 → 9.1.3

package/src/chat/SessionStreamsProvider.tsx

@@ -1,253 +0,0 @@
-/**
- * The session stream store (`createSessionStreams`, `zidane-ui/chat/headless`)
- * as React hooks. An app creates the streams, feeds them its live signals and
- * wraps once in `SessionStreamsProvider`; every hook below reads them.
- *
- * Subscription model: each read subscribes to one session only
- * (`subscribeSession` through `useSyncExternalStore`), so a tick on session A
- * re-renders A's readers and leaves B's transcript and sidebar row inert. The
- * dispatch hooks return the bound writes of `createSessionStreamActions`:
- * stable functions that never subscribe their caller.
- */
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type ReactNode,
-} from 'react';
-import type { SystemMdFile } from 'zidane/chat';
-
-import type { ChatEvent } from './headless/host';
-import {
-  createSessionStreamActions,
-  selectEditEvents,
-  stableSelection,
-  type SessionFallbackModel,
-  type SessionPageState,
-  type SessionRetryState,
-  type SessionStreamActions,
-  type SessionStreams,
-  type SessionStreamStore,
-} from './headless/streams';
-import {
-  readSessionEvents,
-  readSessionFallback,
-  readSessionPage,
-  readSessionRetry,
-  readSessionRunning,
-  readSessionSystemMd,
-  type SessionStreamRead,
-} from './headless/streams/selectors';
-
-interface StreamsContextValue {
-  store: SessionStreamStore<string>;
-  actions: SessionStreamActions<string>;
-  streams: SessionStreams<string>;
-}
-
-const StreamsContext = createContext<StreamsContextValue | null>(null);
-
-/** Props of {@link SessionStreamsProvider}. */
-export interface SessionStreamsProviderProps<K extends string = string> {
-  /** The streams the hooks read; keep its identity for the provider's life. */
-  streams: SessionStreams<K>;
-  /** The components that read the streams. */
-  children?: ReactNode;
-}
-
-/**
- * Provides one session streams to the hooks below it.
- *
- * @param props - The streams and the components that read them.
- */
-export function SessionStreamsProvider<K extends string = string>({
-  streams,
-  children,
-}: SessionStreamsProviderProps<K>) {
-  const value = useMemo<StreamsContextValue>(() => {
-    const any = streams as unknown as SessionStreams<string>;
-    return { store: any.store, actions: createSessionStreamActions(any), streams: any };
-  }, [streams]);
-  return <StreamsContext.Provider value={value}>{children}</StreamsContext.Provider>;
-}
-
-function useStreamsCtx(): StreamsContextValue {
-  const ctx = useContext(StreamsContext);
-  if (!ctx) throw new Error('zidane-ui/chat: wrap the stream hooks in <SessionStreamsProvider streams={…}>');
-  return ctx;
-}
-
-/** The streams themselves (stable). */
-export function useSessionStreams<K extends string = string>(): SessionStreams<K> {
-  return useStreamsCtx().streams as unknown as SessionStreams<K>;
-}
-
-/** The streams' bound writes (stable): dispatching never subscribes the caller. */
-export function useSessionStreamActions<K extends string = string>(): SessionStreamActions<K> {
-  return useStreamsCtx().actions as unknown as SessionStreamActions<K>;
-}
-
-/**
- * One session's slice of the store, subscribed to that session only. `read`
- * returns a stable reference for an unchanged slice and is itself stable.
- */
-function useSessionSnapshot<K extends string, T>(sessionId: K | null, read: SessionStreamRead<T, K>): T {
-  const ctx = useStreamsCtx();
-  const store = ctx.store as unknown as SessionStreamStore<K>;
-  const subscribe = useCallback(
-    (listener: () => void) => store.subscribeSession(sessionId, listener),
-    [store, sessionId],
-  );
-  const getSnapshot = useCallback(() => read(store, sessionId), [store, sessionId, read]);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-/**
- * The session's events.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionEvents<K extends string>(sessionId: K | null): readonly ChatEvent[] {
-  return useSessionSnapshot(sessionId, readSessionEvents<K>);
-}
-
-/**
- * A value derived from the session's events, recomputed only when the events
- * change. `select` should be stable (module-level or memoised) and return a
- * stable reference for unchanged input.
- *
- * @param sessionId - The session (`null`: none).
- * @param select - Derives the value from the events.
- */
-export function useSessionEventsSelector<K extends string, T>(
-  sessionId: K | null,
-  select: (events: readonly ChatEvent[]) => T,
-): T {
-  const last = useRef<{ events: readonly ChatEvent[]; select: typeof select; value: T } | null>(null);
-  const read = useCallback(
-    (store: SessionStreamStore<K>, id: K | null) => {
-      const events = store.getEventsSnapshot(id);
-      const prev = last.current;
-      if (prev && prev.events === events && prev.select === select) return prev.value;
-      const value = select(events);
-      last.current = { events, select, value };
-      return value;
-    },
-    [select],
-  );
-  return useSessionSnapshot(sessionId, read);
-}
-
-/**
- * The session's events that carry a file edit, as a stable list: a reader
- * re-renders when an edit lands, not on every streamed token.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionEdits<K extends string>(sessionId: K | null): readonly ChatEvent[] {
-  const [select] = useState(() => stableSelection<ChatEvent, ChatEvent>(selectEditEvents));
-  return useSessionEventsSelector(sessionId, select);
-}
-
-/**
- * Whether a run is in flight for the session.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionRunning<K extends string>(sessionId: K | null): boolean {
-  return useSessionSnapshot(sessionId, readSessionRunning<K>);
-}
-
-/**
- * The fallback model the session's run switched to, `null` when none.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionFallbackModel<K extends string>(sessionId: K | null): SessionFallbackModel | null {
-  return useSessionSnapshot(sessionId, readSessionFallback<K>);
-}
-
-/**
- * The provider retry the session's run is in, `null` when none.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionRetry<K extends string>(sessionId: K | null): SessionRetryState | null {
-  return useSessionSnapshot(sessionId, readSessionRetry<K>);
-}
-
-/**
- * The session's `SYSTEM.md` override (it replaces the built-in doctrine), `null` when none.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionSystemMd<K extends string>(sessionId: K | null): SystemMdFile | null {
-  return useSessionSnapshot(sessionId, readSessionSystemMd<K>);
-}
-
-/**
- * The session's scrollback state: whether older turns exist, whether a page is loading.
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useSessionPage<K extends string>(sessionId: K | null): SessionPageState {
-  return useSessionSnapshot(sessionId, readSessionPage<K>);
-}
-
-/**
- * Whether the store holds any record for the session (re-renders when that changes).
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useHasSessionEvents<K extends string>(sessionId: K | null): boolean {
-  const { store } = useStreamsCtx();
-  const subscribe = useCallback((listener: () => void) => store.subscribeHas(listener), [store]);
-  const getSnapshot = useCallback(() => store.hasEvents(sessionId), [store, sessionId]);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-/**
- * Whether the session's transcript is hydrated (re-renders when that changes).
- *
- * @param sessionId - The session (`null`: none).
- */
-export function useIsSessionHydrated<K extends string>(sessionId: K | null): boolean {
-  const { store } = useStreamsCtx();
-  const subscribe = useCallback((listener: () => void) => store.subscribeHas(listener), [store]);
-  const getSnapshot = useCallback(() => store.isHydrated(sessionId), [store, sessionId]);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-/** Reads a session's current events without subscribing (for event handlers). Stable. */
-export function usePeekSessionEvents<K extends string = string>(): (sessionId: K | null) => readonly ChatEvent[] {
-  const { store } = useStreamsCtx();
-  return useCallback((sessionId) => store.getEventsSnapshot(sessionId), [store]);
-}
-
-/** Reads whether a session's run is in flight without subscribing. Stable. */
-export function usePeekSessionRunning<K extends string = string>(): (sessionId: K | null) => boolean {
-  const { store } = useStreamsCtx();
-  return useCallback((sessionId) => store.getRunningSnapshot(sessionId), [store]);
-}
-
-/** Reads a session's run-start sequence without subscribing. Stable. */
-export function usePeekRunSeq<K extends string = string>(): (sessionId: K | null) => number {
-  const { store } = useStreamsCtx();
-  return useCallback((sessionId) => store.getRunSeqSnapshot(sessionId), [store]);
-}
-
-/**
- * Captures the run-state version; the returned check says whether it still
- * holds. A signal or runtime switch invalidates snapshots fetched before it.
- */
-export function useCaptureRunState(): () => () => boolean {
-  const { store } = useStreamsCtx();
-  return useCallback(() => {
-    const version = store.runStateVersion;
-    return () => store.runStateVersion === version;
-  }, [store]);
-}

package/src/chat/StatusDot.tsx

@@ -1,128 +0,0 @@
-/**
- * A session's state as one 8px dot: idle ring, running core with an
- * orbiting arc, a rippling "needs you" for a pending approval, a breathing
- * "awaiting input", an attached ring, a popping completion, a glowing error.
- * Three layers (core, orbit, ripple) so every change tweens instead of
- * snapping (`.zg-state-tween`, styles/motion.css). The loops (orbit,
- * ripple, breathe) keep their own fixed timing and carry `.zg-loop`, which
- * stills them under reduced / off motion; the completion pop is the `snap`
- * spring with its opacity on `fade`. Colours are the decorative `-dot`
- * tones (a fill, not text: vivid in light rather than held to text floors).
- */
-import { memo, type CSSProperties } from 'react';
-
-import { Presence } from '../motion/swap';
-import type { ChatSessionStatus } from './headless/host';
-import type { ChatLabels } from './headless/labels';
-import { useChatLabels } from './useChatLabels';
-
-/** Visual state of a {@link StatusDot}. */
-export type SessionDotState = 'idle' | 'running' | 'pending' | 'completed' | 'error' | 'attention' | 'attached';
-
-/**
- * The dot for a session's plain status, when a host has nothing richer.
- *
- * @param status - The session's status, or `undefined` when the host reports none. `running`, `completed`, and `error` map to the matching dot state; anything else is `idle`.
- */
-export function dotStateFor(status: ChatSessionStatus | undefined): SessionDotState {
-  return status === 'running' || status === 'completed' || status === 'error' ? status : 'idle';
-}
-
-interface DotStyle {
-  label: keyof ChatLabels;
-  style: CSSProperties;
-  ring?: 'orbit' | 'ripple';
-}
-
-const STYLES: Record<SessionDotState, DotStyle> = {
-  idle: {
-    label: 'dotIdle',
-    style: { background: 'transparent', boxShadow: 'inset 0 0 0 1px var(--zg-text-muted)', opacity: 0.5 },
-  },
-  // The core shrinks (a tweenable transform) so the orbiting arc has room in the 8px slot.
-  running: {
-    label: 'dotRunning',
-    style: { background: 'var(--zg-accent-dot)', transform: 'scale(0.62)' },
-    ring: 'orbit',
-  },
-  // This window's own approval or question: the strongest "needs you" cue.
-  pending: { label: 'dotPending', style: { background: 'var(--zg-warn-dot)' }, ring: 'ripple' },
-  attention: {
-    label: 'dotAttention',
-    style: {
-      background: 'var(--zg-warn-dot)',
-      boxShadow: '0 0 6px 1px color-mix(in srgb, var(--zg-warn-dot) 55%, transparent)',
-      animation: 'zg-breathe 1.2s ease-in-out infinite',
-    },
-  },
-  attached: {
-    label: 'dotAttached',
-    style: { background: 'transparent', boxShadow: 'inset 0 0 0 1.5px var(--zg-success-dot)', opacity: 0.8 },
-  },
-  completed: {
-    label: 'dotCompleted',
-    style: {
-      background: 'var(--zg-success-dot)',
-      animation: 'zg-pop var(--zg-motion-snap) both, zg-fade-in var(--zg-motion-fade) both',
-    },
-  },
-  error: {
-    label: 'dotError',
-    style: {
-      background: 'var(--zg-danger-dot)',
-      boxShadow: '0 0 5px 1px color-mix(in srgb, var(--zg-danger-dot) 45%, transparent)',
-    },
-  },
-};
-
-const ORBIT_MASK = 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px))';
-const ORBIT_STYLE: CSSProperties = {
-  background: 'conic-gradient(from 0deg, var(--zg-accent-dot) 0 32%, transparent 32% 100%)',
-  WebkitMaskImage: ORBIT_MASK,
-  maskImage: ORBIT_MASK,
-  animation: 'zg-orbit 1.1s linear infinite',
-};
-const RIPPLE_STYLE: CSSProperties = { background: 'var(--zg-warn-dot)', animation: 'zg-dot 1.8s ease-in-out infinite' };
-
-/** Props for {@link StatusDot}. */
-export interface StatusDotProps {
-  /** The state the dot shows. */
-  state: SessionDotState;
-  /** Accessible name and tooltip; defaults to the state's label. */
-  label?: string;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-function StatusDotInner({ state, label, className, style }: StatusDotProps) {
-  const labels = useChatLabels();
-  const cfg = STYLES[state];
-  const name = label ?? (labels[cfg.label] as string);
-  return (
-    <span
-      role="img"
-      aria-label={name}
-      title={name}
-      className={['relative shrink-0 inline-block w-2 h-2', className].filter(Boolean).join(' ')}
-      style={style}
-    >
-      <span
-        aria-hidden
-        className={`zg-state-tween absolute inset-0 rounded-full${state === 'attention' ? ' zg-loop' : ''}`}
-        style={cfg.style}
-        data-core
-      />
-      <Presence show={cfg.ring === 'orbit'} className="absolute -inset-[3px]">
-        <span aria-hidden className="zg-loop absolute rounded-full inset-0" style={ORBIT_STYLE} />
-      </Presence>
-      <Presence show={cfg.ring === 'ripple'} className="absolute inset-0">
-        <span aria-hidden className="zg-loop absolute inset-0 rounded-full" style={RIPPLE_STYLE} />
-      </Presence>
-    </span>
-  );
-}
-
-/** Renders a session's state as a small dot, with a motion cue for states that need attention. */
-export const StatusDot = memo(StatusDotInner);

package/src/chat/TextPreview.tsx

@@ -1,121 +0,0 @@
-/**
- * A text attachment's contents, sized for the lightbox: a header (icon,
- * name, language, size) over the text, highlighted by the code blocks'
- * highlighter (`useCodeHighlight`: off the main thread, in their theme). The source is a `data:` URL (an
- * attachment the page holds), decoded at once, or any URL the page can
- * fetch (the desktop app's `zg-media:` address of a saved prompt's file),
- * loaded when the preview opens. Past `{@link MAX_TEXT_PREVIEW_BYTES}` it is
- * not loaded: decoding megabytes stalls the page.
- */
-import { useEffect, useMemo, useState, type CSSProperties } from 'react';
-
-import { useCodeHighlight } from '../code/CodeHighlightProvider';
-import { decodeDataUrlAsText, detectLanguage, formatBytes } from './composer/attachment-ingest';
-import { AttachmentIcon } from './transcript/prompt';
-import { type TextPreviewSlotProps, useTranscriptRenderers } from './transcript/renderers';
-import { useChatLabels } from './useChatLabels';
-
-/** Past this size a text attachment is listed, not previewed. */
-export const MAX_TEXT_PREVIEW_BYTES = 1024 * 1024;
-
-/** What a text preview shows: the text once it is in, or that it could not be read. */
-export type AttachmentTextState = { status: 'loading' } | { status: 'ready'; text: string } | { status: 'failed' };
-
-/**
- * The text behind `src`: a `data:` URL decodes at once, any other URL is fetched.
- *
- * @param src - Where the text is.
- * @param skip - Load nothing (the file is too large to preview).
- */
-export function useAttachmentText(src: string, skip = false): AttachmentTextState {
-  const inline = src.startsWith('data:');
-  const decoded = useMemo(() => (inline && !skip ? decodeDataUrlAsText(src) : null), [inline, skip, src]);
-  const [fetched, setFetched] = useState<{ src: string; state: AttachmentTextState } | null>(null);
-
-  useEffect(() => {
-    if (inline || skip) return;
-    let cancelled = false;
-    fetch(src)
-      .then((res) => (res.ok ? res.text() : Promise.reject(new Error(String(res.status)))))
-      .then((text) => !cancelled && setFetched({ src, state: { status: 'ready', text } }))
-      .catch(() => !cancelled && setFetched({ src, state: { status: 'failed' } }));
-    return () => {
-      cancelled = true;
-    };
-  }, [inline, skip, src]);
-
-  if (decoded !== null) return { status: 'ready', text: decoded };
-  return fetched?.src === src ? fetched.state : { status: 'loading' };
-}
-
-/** Props for {@link TextPreview}: the {@link TextPreviewSlotProps} plus the root's class and style. */
-export interface TextPreviewProps extends TextPreviewSlotProps {
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The kit's text preview, the default `TextPreview` slot: the text highlighted for its language (a plain
- * `<pre>` for plain text, while the highlighter loads, or when it fails).
- *
- * @param props - The {@link TextPreviewProps}.
- */
-export function TextPreview({ name, mediaType, size, src, className, style }: TextPreviewProps) {
-  const labels = useChatLabels();
-  const { attachmentLabel } = useTranscriptRenderers();
-  const label = attachmentLabel(name);
-  // A text file reads as text: the generic file icon becomes the text one.
-  const parts = label.icon === 'i-ph-file' ? { ...label, icon: 'i-ph-file-text' } : label;
-  const tooLarge = size > MAX_TEXT_PREVIEW_BYTES;
-  const state = useAttachmentText(src, tooLarge);
-  const text = state.status === 'ready' ? state.text : '';
-  const language = useMemo(() => detectLanguage({ name, mediaType }), [name, mediaType]);
-  const html = useHighlightedHtml(text, language);
-  return (
-    <div className={['zg-lightbox-text zg-raised border', className].filter(Boolean).join(' ')} style={style}>
-      <div className="zg-lightbox-text-header">
-        <AttachmentIcon parts={parts} />
-        <span className="text-sm text-[var(--zg-text)] truncate">{parts.name}</span>
-        {parts.detail && <span className="zg-meta shrink-0">{parts.detail}</span>}
-        {!tooLarge && language !== 'plaintext' && (
-          <span className="zg-meta zg-track-chip px-1.5 py-0.5 shrink-0">{language}</span>
-        )}
-        <span className="zg-meta ml-auto shrink-0">{formatBytes(size)}</span>
-      </div>
-      {tooLarge || state.status === 'failed' ? (
-        <div className="zg-lightbox-text-empty">
-          <span className="i-ph-file-text text-[var(--zg-text-muted)] text-3xl" aria-hidden />
-          <p className={`text-sm ${tooLarge ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`}>
-            {tooLarge ? labels.previewTooLarge(name, formatBytes(size)) : labels.previewFailed(name)}
-          </p>
-        </div>
-      ) : html ? (
-        <div className="zg-lightbox-text-body zg-shiki" dangerouslySetInnerHTML={{ __html: html }} />
-      ) : (
-        <pre className="zg-lightbox-text-body">{text}</pre>
-      )}
-    </div>
-  );
-}
-
-/** `code` highlighted as `language`; `null` for plain text, while it loads, or when it fails. */
-function useHighlightedHtml(code: string, language: string): string | null {
-  const { highlighter, theme } = useCodeHighlight();
-  const skip = language === 'plaintext' || !code;
-  const [done, setDone] = useState<{ code: string; language: string; theme: string; html: string | null } | null>(null);
-  useEffect(() => {
-    if (skip) return undefined;
-    let cancelled = false;
-    const settle = (html: string | null) => !cancelled && setDone({ code, language, theme, html });
-    highlighter
-      .highlight(code, language, theme)
-      .then(settle)
-      .catch(() => settle(null));
-    return () => {
-      cancelled = true;
-    };
-  }, [skip, code, language, theme, highlighter]);
-  return !skip && done?.code === code && done.language === language && done.theme === theme ? done.html : null;
-}