zidane-ui 9.1.1 → 9.1.3

package/src/chat/composer/RunStatusChip.tsx

@@ -1,150 +0,0 @@
-/**
- * The ONE live indicator for a running turn, set into the composer card:
- *
- *   [1m 29s] [↓72.2k] [41 tok/s] [~$0.123]   (one track chip per value)
- *
- * Visible from `run:start` to `run:end` (one fade in, one fade out), never
- * in between: the elapsed counter and the run-wide output count are always
- * defined, so tool calls between streaming turns do not blank the chip.
- * Chips that only exist while text streams (the tok/s rate) appear and
- * disappear beside the others; the row itself holds still.
- *
- *   - elapsed: since the run started, as a person says it (`42s`, `1m 29s`, `1h 03m`).
- *   - tokens: settled parent turns of this run + the in-flight turn's live
- *     count; `~` while the live part is an estimate from streamed text.
- *   - cost: live session total, dimmed while it includes the estimate.
- *
- * Each value changes at most every `CHIP_CADENCE_MS` (the newest wins, the
- * last always lands), changed digits roll (`RollingText`), and the row
- * eases to its new width (`SmoothWidth`). Narrow composers drop the rate,
- * then cost, then tokens (`.zg-run-*` tiers in styles/composer.css). The
- * elapsed time reads the host's run counters (`ComposerHost.runs`).
- */
-import { useRef, type CSSProperties, type ReactNode } from 'react';
-import {
-  EMPTY_RATE,
-  fmtTokens,
-  formatElapsed,
-  stepStreamRate,
-  streamRateValue,
-  type RateState,
-} from 'zidane/chat/pure';
-
-import { RollingText } from '../../motion/roll';
-import { SmoothWidth } from '../../motion/size';
-import { Presence, useCadencedValue } from '../../motion/swap';
-import { formatSessionCostLabel, type LiveCostStatus, type LiveStreamProgress } from '../headless/composer/live-cost';
-import { useComposerLabels } from './ComposerHostProvider';
-import { useRunElapsedSec } from './use-run-meter';
-
-const CHIP_CADENCE_MS = 320;
-
-/** Props for {@link RunStatusChip}. */
-export interface RunStatusChipProps {
-  /** The session that runs. */
-  sessionId: string;
-  /** Whether it runs now: the chip shows from start to end. */
-  running: boolean;
-  /** The streaming turn's live counters, `null` between turns. */
-  progress: LiveStreamProgress | null;
-  /** Output tokens of the run's settled parent turns. */
-  settledOutputTokens: number;
-  /** The live session cost. */
-  cost: LiveCostStatus | null;
-  /** Extra classes on the chip's wrapper. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * The run's live indicator (see the header).
- *
- * @param props - The {@link RunStatusChipProps}.
- */
-export function RunStatusChip({
-  sessionId,
-  running,
-  progress,
-  settledOutputTokens,
-  cost,
-  className,
-  style,
-}: RunStatusChipProps) {
-  const labels = useComposerLabels();
-  const elapsedSec = useRunElapsedSec(sessionId, running);
-  /*
-   * `turn:end` nulls `progress` and folds that turn's real output into
-   * `settledOutputTokens` in the same handler, so the live part is only ever
-   * added while a turn is actually streaming. Carrying the last tick across
-   * the gap would count the finished turn twice.
-   */
-  const tokens = useCadencedValue(settledOutputTokens + (progress?.outputTokens ?? 0), CHIP_CADENCE_MS);
-  const rate = useCadencedValue(useStreamRate(progress), CHIP_CADENCE_MS);
-  const usd = useCadencedValue(cost?.label ? cost.totalCost : 0, CHIP_CADENCE_MS);
-  const costLabel = formatSessionCostLabel(usd);
-
-  return (
-    <Presence show={running} className={`shrink-0${className ? ` ${className}` : ''}`}>
-      <span
-        data-testid="run-status"
-        className="inline-flex"
-        style={style}
-        title={progress?.estimated ? labels.runChipEstimatedHint : labels.runChipHint}
-        aria-live="off"
-      >
-        <SmoothWidth className="-my-px">
-          <span className="inline-flex items-center gap-1 whitespace-nowrap">
-            <Segment>
-              <RollingText text={formatElapsed(elapsedSec)} value={elapsedSec} />
-            </Segment>
-            {tokens > 0 && (
-              <Segment className="zg-run-tokens" color="var(--zg-accent)">
-                ↓{progress?.estimated ? '~' : ''}
-                <RollingText text={fmtTokens(tokens)} value={tokens} />
-              </Segment>
-            )}
-            {rate !== null && (
-              <Segment className="zg-run-rate" color="var(--zg-accent)">
-                <RollingText text={`${rate}`} value={rate} />
-                &nbsp;{labels.runChipRate}
-              </Segment>
-            )}
-            {costLabel && (
-              <Segment className="zg-run-cost" color={cost?.estimated ? 'var(--zg-text-muted)' : 'var(--zg-money)'}>
-                {cost?.estimated ? '~' : ''}
-                <RollingText text={costLabel} value={usd} />
-              </Segment>
-            )}
-          </span>
-        </SmoothWidth>
-      </span>
-    </Presence>
-  );
-}
-
-/**
- * Output tokens per second while a turn streams (`stepStreamRate`:
- * tokens gained over a trailing window, corrections excluded, smoothed),
- * `null` before there is an honest reading or between turns.
- */
-/* eslint-disable react-hooks/refs -- each tick steps the rate during its own render: state would cost a second render per tick */
-function useStreamRate(progress: LiveStreamProgress | null): number | null {
-  const state = useRef<RateState>(EMPTY_RATE);
-  const seen = useRef<LiveStreamProgress | null>(null);
-  if (progress && progress !== seen.current) {
-    seen.current = progress;
-    state.current = stepStreamRate(state.current, progress);
-  }
-  return progress ? streamRateValue(state.current) : null;
-}
-/* eslint-enable react-hooks/refs */
-
-/** One value of the run, as its own track chip. */
-function Segment({ className = '', color, children }: { className?: string; color?: string; children: ReactNode }) {
-  return (
-    <span style={{ color }} className={`zg-meta zg-track-chip inline-flex items-center h-6 px-2 ${className}`}>
-      {children}
-    </span>
-  );
-}

package/src/chat/composer/ScopeToggle.tsx

@@ -1,94 +0,0 @@
-/**
- * Scope toggle for a DRAFT session, in the composer's trailing actions: one
- * `.zg-segment` track with two sides.
- *
- *   - "Chat": directory-less draft (`folderPath === ''`).
- *   - folder: bound draft, labeled with the folder's basename ("Select…"
- *     while unbound). Opens a menu of recent folders, "Import repository…"
- *     (clone a git / GitHub URL) and the native picker.
- *
- * The undecided gate (`folderPath === null`) shows NEITHER side active:
- * the app's send then resolves it folderless, so the toggle is an affordance,
- * not a gate.
- *
- * On a tight composer "Chat" folds to its icon and the folder name takes at
- * most a share of the card (styles/composer.css).
- */
-import type { CSSProperties } from 'react';
-
-import { basename } from '../../path';
-import { useComposerLabels } from './ComposerHostProvider';
-import { ProjectMenu } from './ProjectMenu';
-import { SCOPE_SIDE, scopeTone } from './scope-side';
-
-/** Props for {@link ScopeToggle}. */
-export interface ScopeToggleProps {
-  /** The draft's folder: `''` no folder (Chat), `null` undecided. */
-  folderPath: string | null;
-  /** Opens the app's folder picker. */
-  onPickFolder: () => void | Promise<void>;
-  /** Imports a repository into the draft. Absent: the menu doesn't offer it. */
-  onImportRepo?: () => void | Promise<void>;
-  /** Makes the draft folderless. */
-  onJustChat: () => void;
-  /** Recent folders, offered first. */
-  recents: readonly string[];
-  /** Picks a recent folder. */
-  onPickRecent: (dir: string) => void;
-  /** Extra classes on the group. */
-  className?: string;
-  /** Inline styles on the group. */
-  style?: CSSProperties;
-}
-
-/**
- * The draft's Chat / folder toggle (see the header).
- *
- * @param props - The {@link ScopeToggleProps}.
- */
-export function ScopeToggle({
-  folderPath,
-  onPickFolder,
-  onJustChat,
-  recents,
-  onPickRecent,
-  onImportRepo,
-  className,
-  style,
-}: ScopeToggleProps) {
-  const labels = useComposerLabels();
-  const chatActive = folderPath === '';
-  const folderActive = typeof folderPath === 'string' && folderPath.length > 0;
-
-  return (
-    <div
-      role="group"
-      aria-label={labels.scopeGroup}
-      className={`zg-segment shrink-0${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      <button
-        type="button"
-        aria-pressed={chatActive}
-        data-active={chatActive ? '' : undefined}
-        onClick={onJustChat}
-        title={labels.scopeChatHint}
-        className={`${SCOPE_SIDE} ${scopeTone(chatActive)}`}
-      >
-        <span aria-hidden className="i-ph-chat-circle text-zg-meta shrink-0" />
-        <span className="zg-pill-label">{labels.scopeChat}</span>
-      </button>
-      <ProjectMenu
-        label={folderActive ? basename(folderPath) : labels.scopeSelect}
-        title={folderActive ? labels.scopeFolderHint(folderPath) : labels.scopeSelectHint}
-        active={folderActive}
-        ariaLabel={labels.scopeChooseFolder}
-        projects={recents}
-        current={folderPath}
-        onPick={onPickRecent}
-        {...(onImportRepo ? { onImportRepo } : {})}
-        onSelectDirectory={onPickFolder}
-      />
-    </div>
-  );
-}

package/src/chat/composer/SelectTurnHint.tsx

@@ -1,40 +0,0 @@
-/**
- * Select-turn mode's dock row above the composer: the kit's key list and exit
- * key (`zidane-ui/chat/transcript`) in a dock card, while the mode is on in
- * the session. The desktop app's and the web app's.
- */
-import type { CSSProperties } from 'react';
-
-import { SelectTurnExit, SelectTurnHintKeys } from '../transcript/SelectTurnHint';
-import { useSelectTurn } from '../transcript/SelectTurnProvider';
-import { DockCard, DockRow } from './DockCard';
-
-/** Props for {@link SelectTurnHint}. */
-export interface SelectTurnHintProps {
-  /** The composer's session: the row shows while select-turn mode is on in it. */
-  sessionId: string | null;
-  /** Extra classes on the card. */
-  className?: string;
-  /** Inline styles on the card. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders select-turn mode's keys and its exit in the composer's dock, or nothing while the mode is off here.
- *
- * @param props - The `sessionId`, `className` and `style`.
- */
-export function SelectTurnHint({ sessionId, className, style }: SelectTurnHintProps) {
-  const sel = useSelectTurn().state;
-  if (!sel || sel.sessionId !== sessionId) return null;
-  return (
-    <DockCard className={className} style={style}>
-      <DockRow
-        glyph={<span aria-hidden className="i-ph-cursor-text text-zg-label text-[var(--zg-accent)]" />}
-        trailing={<SelectTurnExit />}
-      >
-        <SelectTurnHintKeys sessionId={sessionId} />
-      </DockRow>
-    </DockCard>
-  );
-}

package/src/chat/composer/SendButton.tsx

@@ -1,89 +0,0 @@
-/**
- * Send / Stop: one 32px circle whose three states crossfade in place
- * (`.zg-composer-send` in styles/composer.css). Idle it sends; while a run
- * streams and the composer can stop it, it is a quiet spinner that turns
- * into a stop button on hover or focus, and a click always stops (hover is
- * a reveal, not a gate). While a run streams without a stop, it sends the
- * draft as steering or a queued follow-up, whichever the composer routes to.
- */
-import type { CSSProperties } from 'react';
-
-import { useChatLabels } from '../useChatLabels';
-
-/** Where Enter sends the draft: `send` as a new prompt, `steer` into the run in flight, or `queue` for after the run ends. */
-export type SendRoute = 'send' | 'steer' | 'queue';
-
-/** Props for {@link SendButton}. */
-export interface SendButtonProps {
-  /** A run is streaming and can be stopped: the button is Stop. */
-  stoppable: boolean;
-  /** Where the draft goes. Sets the button's label. */
-  route: SendRoute;
-  /** The draft can be sent now. When false the button is disabled unless it is Stop. */
-  canSend: boolean;
-  /** Called when the user sends the draft. */
-  onSend(): void;
-  /** Called when the user stops the run. */
-  onStop(): void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the Send or Stop button: a circle that sends the draft, or stops the run while one streams and can be stopped.
- *
- * @param props - Button props: `stoppable`, `route`, `canSend`, `onSend`, and `onStop`.
- */
-export function SendButton({ stoppable, route, canSend, onSend, onStop, className, style }: SendButtonProps) {
-  const labels = useChatLabels();
-  const name = stoppable
-    ? labels.stopRun
-    : route === 'steer'
-      ? labels.steerMessage
-      : route === 'queue'
-        ? labels.queueMessage
-        : labels.sendMessage;
-  const hint = stoppable
-    ? labels.stopHint
-    : route === 'steer'
-      ? labels.steerHint
-      : route === 'queue'
-        ? labels.queueHint
-        : labels.sendHint;
-  return (
-    <button
-      type="button"
-      disabled={!stoppable && !canSend}
-      data-state={stoppable ? 'run' : 'send'}
-      data-testid="composer-send"
-      onClick={(event) => {
-        event.stopPropagation();
-        if (stoppable) onStop();
-        else onSend();
-      }}
-      aria-label={name}
-      title={hint}
-      className={[
-        'zg-composer-send zg-press relative inline-flex items-center justify-center w-8 h-8 rounded-full border-0 cursor-pointer disabled:opacity-zg-disabled disabled:cursor-not-allowed zg-focus-ring',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <span className="zg-composer-send-layer zg-composer-send-glyph" aria-hidden>
-        <span
-          className={`${route === 'send' ? 'i-ph-arrow-elbow-down-left' : 'i-ph-arrow-bend-down-right'} text-base`}
-        />
-      </span>
-      <span className="zg-composer-send-layer zg-composer-send-spin" aria-hidden>
-        <span className="zg-composer-send-ring" />
-      </span>
-      <span className="zg-composer-send-layer zg-composer-send-stop" aria-hidden>
-        <span className="i-ph-stop-fill text-sm" />
-      </span>
-    </button>
-  );
-}

package/src/chat/composer/ServerScopeToggle.tsx

@@ -1,188 +0,0 @@
-/**
- * The folder of a new session on a saved server, in the composer's trailing
- * actions: the same pill and project menu as on this computer
- * (`ProjectMenu`, as in `ScopeToggle`), over the server's folders.
- *
- * The menu lists, in order:
- *
- *   - the clone of the local project, when the draft started from one
- *     (`clone`, `git/headless/remote-clone.ts`): picked while no folder
- *     is, it clones on send. On a server that takes no clones it shows
- *     greyed out, and "Default folder" is the pick;
- *   - "Default folder", the server's first workspace root;
- *   - the server's recent folders (its sessions' folders);
- *   - "Import repository…", cloning a URL on the server (`onImportRepo`);
- *   - "Select directory…", which turns the menu into the server's folder
- *     browser (`RemoteFolderBrowser`: filter, a typed path, search below,
- *     new folder).
- *
- * There is no Chat side: a session on a server always has a folder there.
- */
-import type { CSSProperties } from 'react';
-
-import type { DraftRemoteClone } from '../../git/headless/remote-clone';
-import { RemoteFolderBrowser } from '../../git/RemoteFolderPicker';
-import { MenuRow } from '../../components/Menu';
-import { useDisplayPath } from '../../hooks/useDisplayPath';
-import { basename, compactPath } from '../../path';
-import { useComposerLabels } from './ComposerHostProvider';
-import { ProjectMenu } from './ProjectMenu';
-
-/** Props for {@link ServerScopeToggle}. */
-export interface ServerScopeToggleProps {
-  /** The saved server. */
-  hostId: string;
-  /** Its name, as the pill and the menu say it. */
-  hostName: string;
-  /** The folder picked there, `null` for none (the clone, else the first root). */
-  folder: string | null;
-  /** Picks a folder there (`null`: none). */
-  onChange: (folder: string | null) => void;
-  /** The server's recent folders, most recent first. */
-  projects: readonly string[];
-  /** The server's first workspace root, once known. */
-  root?: string | null;
-  /** What a send clones there while no folder is picked. */
-  clone?: DraftRemoteClone | null;
-  /** The send is cloning {@link ServerScopeToggleProps.clone}. */
-  cloning?: boolean;
-  /** Clones a repository on the server into the draft. Absent: not offered. */
-  onImportRepo?: () => void | Promise<void>;
-  /** Extra classes on the group. */
-  className?: string;
-  /** Inline styles on the group. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the server folder pill and its project menu (see the header).
- *
- * @param props - The {@link ServerScopeToggleProps}.
- */
-export function ServerScopeToggle({
-  hostId,
-  hostName,
-  folder,
-  onChange,
-  projects,
-  root = null,
-  clone = null,
-  cloning = false,
-  onImportRepo,
-  className,
-  style,
-}: ServerScopeToggleProps) {
-  const labels = useComposerLabels();
-  const display = useDisplayPath();
-  // What a send clones: none once a folder is picked, or where the server takes no clones.
-  const pending = folder === null && clone?.state !== 'off' ? clone : null;
-  const label = folder
-    ? basename(folder)
-    : pending
-      ? cloning
-        ? labels.scopeCloning(pending.name)
-        : pending.state === 'clone'
-          ? labels.scopeCloneWill(pending.name)
-          : pending.name
-      : labels.scopeServerDefault;
-  const title = folder
-    ? labels.scopeServerFolderHint(folder, hostName)
-    : pending
-      ? cloneHint(pending)
-      : labels.scopeServerDefaultHint(hostName);
-  const icon = cloning
-    ? 'i-ph-circle-notch animate-spin'
-    : pending?.state === 'clone'
-      ? 'i-ph-git-branch'
-      : 'i-ph-folder';
-
-  function cloneHint(c: DraftRemoteClone): string {
-    if (c.state === 'clone') return labels.scopeCloneWillHint(c.input, c.parent, hostName);
-    if (c.state === 'off') return labels.scopeCloneOffHint(hostName);
-    return labels.scopeCloneThere(`${c.parent}/${c.name}`, hostName);
-  }
-
-  // With a clone pending, "Default folder" is an explicit pick of the root (no clone); without one, it is no pick.
-  const defaultPicked = folder === null ? !pending : folder === root;
-  const listed = projects.filter((dir) => dir !== root);
-
-  return (
-    <div
-      role="group"
-      aria-label={labels.scopeServerGroup(hostName)}
-      className={`zg-segment shrink-0${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      <ProjectMenu
-        label={label}
-        title={title}
-        icon={icon}
-        active={folder !== null || pending !== null}
-        disabled={cloning}
-        ariaLabel={labels.scopeServerChoose(hostName)}
-        projects={listed}
-        current={folder}
-        onPick={onChange}
-        hostId={hostId}
-        leading={(close) => (
-          <>
-            {clone && (
-              <MenuRow
-                role="menuitem"
-                icon={<span aria-hidden className="i-ph-git-branch" />}
-                title={clone.name}
-                hint={cloneHint(clone)}
-                checked={pending !== null}
-                disabled={clone.state === 'off'}
-                trailing={
-                  <span className="zg-meta">
-                    {clone.state === 'clone'
-                      ? labels.scopeCloneTag
-                      : clone.state === 'off'
-                        ? labels.scopeCloneOffTag
-                        : labels.scopeCloneThereTag}
-                  </span>
-                }
-                onClick={() => {
-                  close();
-                  onChange(null);
-                }}
-              />
-            )}
-            <MenuRow
-              role="menuitem"
-              icon={<span aria-hidden className="i-ph-hard-drives" />}
-              title={labels.scopeServerDefault}
-              hint={root ?? labels.scopeServerDefaultHint(hostName)}
-              checked={defaultPicked}
-              {...(root
-                ? {
-                    trailing: (
-                      <span className="zg-meta truncate max-w-[140px]">
-                        {compactPath(display.path(root, hostId), 24)}
-                      </span>
-                    ),
-                  }
-                : {})}
-              onClick={() => {
-                close();
-                onChange(pending && root ? root : null);
-              }}
-            />
-          </>
-        )}
-        {...(onImportRepo ? { onImportRepo } : {})}
-        browse={(close) => (
-          <RemoteFolderBrowser
-            hostId={hostId}
-            start={folder}
-            onUse={(path) => {
-              close();
-              onChange(path);
-            }}
-          />
-        )}
-      />
-    </div>
-  );
-}