zidane-ui 9.1.1 → 9.1.4

package/src/chat/SessionListRow.tsx

@@ -1,296 +0,0 @@
-/**
- * One session in a list: status dot, title (inline rename), trailing badges
- * and meta, an optional second line, and an actions menu behind a 3-dots
- * trigger and right-click.
- *
- * Every app-specific part is a slot (`status`, `titleDisplay`, `badges`,
- * `meta`, `sub`) and the actions are data (`menuItems`), so a host adds its
- * own (an environment badge, a commits line, "open in new window") without
- * forking the row. Paint (hover, active, renaming, archived) lives on
- * `.zg-session-row` data attributes (styles/chat.css), so a keyboard cursor
- * can move without a React render.
- */
-import { memo, useCallback, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { EditableTitle } from '../components/EditableTitle';
-import { IconButton } from '../components/IconButton';
-import { RowActionsMenu, type RowActionItem } from '../components/RowActionsMenu';
-import { StatusDot, type SessionDotState } from './StatusDot';
-import { useChatLabels } from './useChatLabels';
-
-/**
- * The hovered title's right edge stays clear of the 3-dots trigger: the
- * text is fully visible up to this many pixels before the line's end
- * (`.zg-title-clip`'s hover mask in styles/chat.css spells the same 32px).
- */
-const TITLE_HOVER_FADE = 32;
-/** Reading pace of the hover slide, in pixels a second. */
-const TITLE_SLIDE_SPEED = 50;
-
-/**
- * Arms the hover slide of a long title: how far it must travel for its end
- * to show, and how long that takes at a reading pace. Measured when the
- * pointer or the keyboard arrives, against the room the line will have
- * once the trailing meta folds away (its width plus the title's).
- */
-function armTitleSlide(clip: HTMLElement | null): void {
-  const title = clip?.firstElementChild as HTMLElement | null;
-  if (!clip || !title) return;
-  const meta = clip.parentElement?.querySelector<HTMLElement>(':scope > .zg-row-meta');
-  const room = clip.clientWidth + (meta?.offsetWidth ?? 0) - TITLE_HOVER_FADE;
-  const shift = Math.ceil(title.scrollWidth - room);
-  if (shift <= 0) {
-    title.removeAttribute('data-slide');
-    return;
-  }
-  title.style.setProperty('--zg-title-shift', `${-shift}px`);
-  title.style.setProperty(
-    '--zg-title-slide',
-    `${Math.round(Math.min(6000, Math.max(500, (shift / TITLE_SLIDE_SPEED) * 1000)))}ms`,
-  );
-  title.setAttribute('data-slide', '');
-}
-
-export type { RowActionItem };
-
-/** Props for {@link SessionListRow}. Every app-specific part is a slot (`status`, `titleDisplay`, `badges`, `meta`, `sub`) or data (`menuItems`). */
-export interface SessionListRowProps {
-  /** Session id, passed to `onSelect`, `onStartRename`, and the menu callbacks. */
-  id: string;
-  /** Session title. Shown unless `titleDisplay` replaces it, and used as the rename field's text. */
-  title: string;
-  /**
-   * Marks the row as the selected session.
-   * @default false
-   */
-  active?: boolean;
-  /**
-   * Marks the session as archived. The default glyph becomes an archive icon.
-   * @default false
-   */
-  archived?: boolean;
-  /** Leading glyph. Default: a `StatusDot` for `dot` (an archive glyph when archived). */
-  status?: ReactNode;
-  /**
-   * State drawn by the default `StatusDot` when `status` is not set.
-   * @default 'idle'
-   */
-  dot?: SessionDotState;
-  /** What the title shows when not renaming (badges inside a title, highlighting). Default: the title. */
-  titleDisplay?: ReactNode;
-  /** After the title, on its line (an environment badge). Hidden while renaming. */
-  badges?: ReactNode;
-  /** Trailing, on the title's line (`now`, `3h`, a run's elapsed time). Hidden while renaming. */
-  meta?: ReactNode;
-  /** A second line (a search excerpt, commits). */
-  sub?: ReactNode;
-  /** Extra classes on the second line's box. */
-  subClassName?: string;
-  /** Called with `id` when the user clicks the row. Not called while renaming. */
-  onSelect: (id: string) => void;
-
-  /**
-   * Replaces the title with an inline text field.
-   * @default false
-   */
-  renaming?: boolean;
-  /**
-   * Current text of the rename field. Only used while `renaming`.
-   * @default ''
-   */
-  renameValue?: string;
-  /** Called with `id` and `title` when the user asks to edit the title in place. */
-  onStartRename?: (id: string, title: string) => void;
-  /** Called with the new text as the user types in the rename field. */
-  onRenameChange?: (value: string) => void;
-  /** Called when the user confirms the rename. */
-  onRenameCommit?: () => void | Promise<void>;
-  /** Called when the user abandons the rename. */
-  onRenameCancel?: () => void;
-
-  /** Row actions; none hides the trigger. */
-  menuItems?: readonly RowActionItem[];
-  /** The actions trigger's accessible name. Default: `labels.sessionActions` (a row that is no session names its own). */
-  menuLabel?: string;
-  /**
-   * The row folds rows under it and a click toggles them: `true` while they show, `false` while
-   * folded (`aria-expanded` on the row's button). Absent: the row folds nothing.
-   */
-  expanded?: boolean;
-  /** Controlled menu (one open menu across a list); uncontrolled when omitted. */
-  menuOpen?: boolean;
-  /** Called with `id` when the row asks to open its actions menu. Used with a controlled `menuOpen`. */
-  onOpenMenu?: (id: string) => void;
-  /** Called with `id` when the actions menu closes. Used with a controlled `menuOpen`. */
-  onCloseMenu?: (id: string) => void;
-
-  /** Plays the row's arrival sweep (`data-arrived`, styles/chat.css). */
-  arrived?: boolean;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Renders one session in a list: status dot, title with inline rename, badges, meta, an optional second line, and an actions menu behind a 3-dots trigger and right-click. */
-export const SessionListRow = memo(function SessionListRow({
-  id,
-  title,
-  active = false,
-  archived = false,
-  status,
-  dot = 'idle',
-  titleDisplay,
-  badges,
-  meta,
-  sub,
-  subClassName = '',
-  onSelect,
-  renaming = false,
-  renameValue = '',
-  onStartRename,
-  onRenameChange,
-  onRenameCommit,
-  onRenameCancel,
-  menuItems,
-  menuLabel,
-  expanded,
-  menuOpen: menuOpenProp,
-  onOpenMenu,
-  onCloseMenu,
-  arrived = false,
-  className,
-  style,
-}: SessionListRowProps) {
-  const labels = useChatLabels();
-  const trigger = useRef<HTMLButtonElement | null>(null);
-  const [ownOpen, setOwnOpen] = useState(false);
-  const [contextPos, setContextPos] = useState<{ x: number; y: number } | null>(null);
-  const controlled = menuOpenProp !== undefined;
-  const menuOpen = controlled ? menuOpenProp : ownOpen;
-  const hasMenu = Boolean(menuItems && menuItems.length > 0);
-
-  const open = useCallback(() => (controlled ? onOpenMenu?.(id) : setOwnOpen(true)), [controlled, onOpenMenu, id]);
-  const close = useCallback(() => {
-    setContextPos(null);
-    if (controlled) onCloseMenu?.(id);
-    else setOwnOpen(false);
-  }, [controlled, onCloseMenu, id]);
-
-  const onContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLLIElement>) => {
-      if (!hasMenu) return;
-      event.preventDefault();
-      setContextPos({ x: event.clientX, y: event.clientY });
-      open();
-    },
-    [hasMenu, open],
-  );
-
-  const SelectBox = renaming ? 'div' : 'button';
-  const clipRef = useRef<HTMLDivElement | null>(null);
-  const armSlide = useCallback(() => armTitleSlide(clipRef.current), []);
-  return (
-    <li
-      className={['zg-session-row zg-press-host group relative rounded-[var(--zg-radius-md)] mb-1', className]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-      data-session-id={id}
-      data-active={active ? 'true' : undefined}
-      data-renaming={renaming ? 'true' : undefined}
-      data-archived={archived ? 'true' : undefined}
-      data-arrived={arrived ? '' : undefined}
-      aria-current={active ? 'true' : undefined}
-      onContextMenu={onContextMenu}
-      onPointerEnter={renaming ? undefined : armSlide}
-      onFocus={renaming ? undefined : armSlide}
-    >
-      {/* The select button and the actions trigger are siblings (never nested). While renaming the
-          row is a plain box: the title's editor is a textbox, and a textbox inside a button is
-          nested interactive content (the caret, Space and Enter would belong to the button). */}
-      <div className="py-1 pr-2 pl-1">
-        <SelectBox
-          {...(renaming
-            ? {}
-            : {
-                type: 'button' as const,
-                'data-row-select': true,
-                onClick: () => onSelect(id),
-                ...(expanded !== undefined ? { 'aria-expanded': expanded } : {}),
-              })}
-          className={`block w-full text-left bg-transparent border-0 rounded-[var(--zg-radius-md)] p-0 ${
-            renaming ? '' : 'zg-press-subtle cursor-pointer'
-          }`}
-        >
-          <div className="zg-sidebar-fade flex items-baseline gap-1.5 pr-2">
-            {/* On the title's line (20px), however many lines the row has. */}
-            <span className="w-[18px] h-5 shrink-0 inline-flex items-center justify-center self-start">
-              {status ??
-                (archived ? (
-                  <span
-                    role="img"
-                    aria-label={labels.archived}
-                    title={labels.archived}
-                    className="i-ph-archive text-sm text-[var(--zg-text-muted)] translate-y-[1px]"
-                  />
-                ) : (
-                  <StatusDot state={dot} />
-                ))}
-            </span>
-            {/* The clip masks the title's end; the title inside slides on hover to show the rest. */}
-            <div ref={clipRef} className="zg-title-clip min-w-[45%] flex-1 overflow-hidden">
-              <EditableTitle
-                text={renaming ? renameValue : title}
-                display={titleDisplay ?? title}
-                editing={renaming}
-                onStartEdit={() => onStartRename?.(id, title)}
-                onChange={(v) => onRenameChange?.(v)}
-                onCommit={() => onRenameCommit?.()}
-                onCancel={() => onRenameCancel?.()}
-                className={`zg-session-title text-sm whitespace-nowrap text-[var(--zg-text)] ${
-                  renaming ? 'overflow-hidden' : 'zg-title-slide w-max'
-                }`}
-              />
-            </div>
-            {!renaming && badges}
-            {!renaming && meta}
-          </div>
-          {sub !== undefined && sub !== null && sub !== false && (
-            <div className={`zg-session-sub pl-6 pr-2 ${subClassName}`.trim()}>{sub}</div>
-          )}
-        </SelectBox>
-        {hasMenu && (
-          <>
-            {/* `.zg-row-dots` owns the hover / focus reveal. */}
-            <IconButton
-              ref={trigger}
-              icon="i-ph-dots-three"
-              label={menuLabel ?? labels.sessionActions}
-              title={labels.moreActions}
-              size="sm"
-              active={menuOpen}
-              aria-haspopup="menu"
-              aria-expanded={menuOpen}
-              data-open={menuOpen ? '' : undefined}
-              // Its glyph on the sidebar's trailing column (22px in from the edge), with the filter, gear and pin.
-              className="zg-row-dots zg-hit-extend absolute top-0.5 right-0.5"
-              onClick={(e) => {
-                e.stopPropagation();
-                if (menuOpen) close();
-                else open();
-              }}
-            />
-            <RowActionsMenu
-              open={menuOpen}
-              anchorRef={trigger}
-              position={contextPos}
-              onClose={close}
-              items={menuItems as RowActionItem[]}
-            />
-          </>
-        )}
-      </div>
-    </li>
-  );
-});

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);