zidane-ui 9.0.4 → 9.1.3

package/src/session/RunningWorkDialog.tsx

@@ -1,178 +0,0 @@
-/**
- * Running work: a session's cancellable parent-level tool calls and
- * background tasks, as flat rows on one tray, each with its own Cancel;
- * Refresh and Cancel all in the footer. The list is live
- * (`runningWork.items`): rows come and go as the work does. A row the app
- * can show a terminal for (`showTerminal`) has Show terminal: the dialog
- * closes, then the app shows it.
- */
-import { useCallback, useEffect, useState, type CSSProperties } from 'react';
-import { formatElapsed } from 'zidane/chat/pure';
-
-import { BTN_LG_SECONDARY, buttonClass } from '../components/button';
-import { ErrorNote, MetaChip } from '../components/Form';
-import { EmptyState, Tray } from '../components/Surface';
-import type { RunningWorkItem } from './headless/host';
-import { ShellFrame, type RenderSessionShell } from './SessionShell';
-import { useSessionHost, useSessionRunningWork } from './SessionProvider';
-import { useSessionLabels } from './useSessionLabels';
-
-const KIND_ICON = { tool: 'i-ph-wrench', task: 'i-ph-terminal-window' } as const satisfies Record<
-  RunningWorkItem['kind'],
-  string
->;
-
-/** Props for {@link RunningWorkDialog}. */
-export interface RunningWorkDialogProps {
-  /** The session whose work to show. */
-  sessionId: string;
-  /** Closes the dialog. */
-  onClose: () => void;
-  /** The terminal a row can show: a handler that shows it, or `null`. Absent: no Show terminal. */
-  showTerminal?: (item: RunningWorkItem) => (() => void) | null;
-  /** The app's modal shell. Default: {@link SessionShell}. */
-  renderShell?: RenderSessionShell;
-  /** Extra classes on the default shell. */
-  className?: string;
-  /** Inline styles on the default shell. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a session's running work with per-row and all-at-once cancel.
- *
- * @param props - The `sessionId`, `onClose`, an optional `showTerminal`, `renderShell`, `className` and `style`.
- */
-export function RunningWorkDialog({
-  sessionId,
-  onClose,
-  showTerminal,
-  renderShell,
-  className,
-  style,
-}: RunningWorkDialogProps) {
-  const labels = useSessionLabels();
-  const work = useSessionHost().runningWork;
-  const items = useSessionRunningWork(sessionId);
-  const [busyId, setBusyId] = useState<string | 'all' | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const now = useNow(items.length > 0);
-
-  const refresh = useCallback(async () => {
-    await work?.refresh(sessionId);
-  }, [work, sessionId]);
-
-  const cancel = useCallback(
-    async (id: string | 'all') => {
-      if (!work?.cancel) return;
-      setBusyId(id);
-      setError(null);
-      try {
-        await work.cancel(sessionId, id, id === 'all' ? 'user-cancelled-all' : 'user-clicked-cancel');
-        await refresh();
-      } catch (err) {
-        setError((err as Error).message ?? String(err));
-      } finally {
-        setBusyId(null);
-      }
-    },
-    [work, refresh, sessionId],
-  );
-  const canCancel = Boolean(work?.cancel);
-
-  return (
-    <ShellFrame
-      render={renderShell}
-      title={labels.runningWorkTitle}
-      {...(items.length === 0 ? {} : { description: labels.runningWorkDescription })}
-      onClose={onClose}
-      {...(className ? { className } : {})}
-      {...(style ? { style } : {})}
-      footer={
-        <div className="flex items-center justify-end gap-2">
-          <button type="button" disabled={busyId !== null} onClick={() => void refresh()} className={BTN_LG_SECONDARY}>
-            {labels.runningWorkRefresh}
-          </button>
-          {canCancel && (
-            <button
-              type="button"
-              disabled={busyId !== null || items.length === 0}
-              onClick={() => void cancel('all')}
-              className={buttonClass({ variant: 'danger' })}
-            >
-              {busyId === 'all' ? labels.runningWorkCancelling : labels.runningWorkCancelAll}
-            </button>
-          )}
-        </div>
-      }
-    >
-      <div className="flex flex-col gap-3">
-        {error && <ErrorNote>{error}</ErrorNote>}
-        {items.length === 0 ? (
-          <EmptyState icon="i-ph-check-circle" title={labels.runningWorkEmpty} />
-        ) : (
-          <Tray radius="lg" className="p-1 flex flex-col">
-            {items.map((item) => {
-              const show = showTerminal?.(item) ?? null;
-              return (
-                <div
-                  key={item.id}
-                  data-work={item.id}
-                  className="flex items-center gap-3 px-3 py-2 rounded-zg-md hover:bg-[var(--zg-row-hover)] transition-colors"
-                >
-                  <span
-                    className={`${KIND_ICON[item.kind]} shrink-0 text-zg-body text-[var(--zg-text-muted)]`}
-                    aria-hidden
-                  />
-                  <div className="min-w-0 flex-1">
-                    <div className="text-zg-ui text-[var(--zg-text)] truncate" title={item.label}>
-                      {item.label}
-                    </div>
-                    <div className="mt-0.5 flex items-center gap-1 tabular-nums" title={item.id}>
-                      <MetaChip>{labels.runningWorkKind[item.kind]}</MetaChip>
-                      <MetaChip>{formatElapsed(Math.max(0, Math.floor((now - item.startedAt) / 1000)))}</MetaChip>
-                    </div>
-                  </div>
-                  {show && (
-                    <button
-                      type="button"
-                      onClick={() => {
-                        onClose();
-                        show();
-                      }}
-                      className={buttonClass({ variant: 'ghost', size: 'sm' })}
-                    >
-                      <span className="i-ph-terminal-window text-zg-ui" aria-hidden />
-                      {labels.runningWorkShowTerminal}
-                    </button>
-                  )}
-                  {canCancel && (
-                    <button
-                      type="button"
-                      disabled={busyId !== null}
-                      onClick={() => void cancel(item.id)}
-                      className={buttonClass({ variant: 'danger', size: 'sm' })}
-                    >
-                      {busyId === item.id ? labels.runningWorkCancelling : labels.runningWorkCancel}
-                    </button>
-                  )}
-                </div>
-              );
-            })}
-          </Tray>
-        )}
-      </div>
-    </ShellFrame>
-  );
-}
-
-/** The clock, once a second while `ticking`, so elapsed times move while the dialog is open. */
-function useNow(ticking: boolean): number {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    if (!ticking) return undefined;
-    const id = window.setInterval(() => setNow(Date.now()), 1000);
-    return () => window.clearInterval(id);
-  }, [ticking]);
-  return now;
-}

package/src/session/SessionCacheFacts.tsx

@@ -1,190 +0,0 @@
-/**
- * Session details' Cache fact: what the prompt cache did for the session's
- * last requests (`SessionHost.details.cacheReport`, the numbers `/cache`
- * prints): the shown window, the uncached share, breaks and the estimated
- * expiry as chips, then one row per request. Hand it to
- * `SessionDetailsDialog`'s `cache`.
- */
-import { formatCount } from 'zidane/chat/pure';
-import { useEffect, useState, type CSSProperties } from 'react';
-
-import { Caret } from '../chat/transcript/frame';
-import { MetaChip } from '../components/Form';
-import { useStaysMounted } from '../motion/collapse';
-import type { SessionCacheReport } from './headless/host';
-import { useSessionHost } from './SessionProvider';
-import { useSessionLabels } from './useSessionLabels';
-
-/**
- * The session's cache report, read again when the session changes (`updatedAt`). `null` while loading, when there
- * is none, or without the host's `details.cacheReport`.
- *
- * @param sessionId - The session.
- * @param updatedAt - Its last update: a new value reads the report again.
- */
-export function useSessionCacheReport(sessionId: string, updatedAt: number | undefined): SessionCacheReport | null {
-  const read = useSessionHost().details?.cacheReport;
-  const [report, setReport] = useState<SessionCacheReport | null>(null);
-  useEffect(() => {
-    if (!read) return;
-    let cancelled = false;
-    read(sessionId).then(
-      (next) => {
-        if (!cancelled) setReport(next);
-      },
-      () => {
-        if (!cancelled) setReport(null);
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [read, sessionId, updatedAt]);
-  return read ? report : null;
-}
-
-/** `3 min`, `45 s`. */
-function untilLabel(at: number, now: number): string {
-  const sec = Math.max(0, Math.round((at - now) / 1000));
-  return sec < 60 ? `${sec} s` : `${Math.round(sec / 60)} min`;
-}
-
-function msLabel(ms: number): string {
-  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(1)} s`;
-}
-
-function joulesLabel(joules: number): string {
-  return `${joules < 100 ? joules.toFixed(1).replace(/\.0$/, '') : formatCount(joules)} J`;
-}
-
-/** Props for {@link SessionCacheFacts}. */
-export interface SessionCacheFactsProps {
-  /** The report, from {@link useSessionCacheReport}. */
-  report: SessionCacheReport;
-  /** The per-request table starts open. Default: collapsed behind a toggle. */
-  defaultOpen?: boolean;
-  /** The clock the expiry reads against. Default: now. */
-  now?: number;
-  /** Classes merged on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the cache chips and the per-request rows; nothing before the first request.
- *
- * @param props - {@link SessionCacheFactsProps}.
- */
-export function SessionCacheFacts({
-  report,
-  defaultOpen = false,
-  // eslint-disable-next-line react-hooks/purity -- the expiry reads the clock at each render, as the dialog redraws
-  now = Date.now(),
-  className = '',
-  style,
-}: SessionCacheFactsProps) {
-  const labels = useSessionLabels();
-  const [open, setOpen] = useState(defaultOpen);
-  const mounted = useStaysMounted(open);
-  if (report.rows.length === 0) return null;
-  const energy = report.rows.some((row) => row.energyJoules !== undefined);
-  const dropped = report.rows.some((row) => row.reasoningDropped !== undefined);
-  const scope =
-    report.rows.length < report.totalRequests
-      ? labels.cacheScopeLast(report.rows.length, report.totalRequests)
-      : labels.cacheScopeAll(report.totalRequests);
-  const columns = labels.cacheColumns;
-  const headers = [
-    columns.turn,
-    columns.prompt,
-    columns.cached,
-    columns.reread,
-    columns.ttft,
-    ...(energy ? [columns.energy] : []),
-    ...(dropped ? [columns.dropped] : []),
-  ];
-  return (
-    <div className={`flex flex-col gap-2 min-w-0 ${className}`} style={style} data-testid="session-cache">
-      {/* On the facts grid's 28px line, like every other row of the details. */}
-      <span className="inline-flex flex-wrap items-center gap-1.5 min-h-7">
-        <MetaChip tone="text">{scope}</MetaChip>
-        <MetaChip tone="text">{labels.cacheUncached(report.uncachedPct ?? 0)}</MetaChip>
-        <MetaChip tone={report.breaks > 0 ? 'warn' : 'muted'}>{labels.cacheBreaks(report.breaks)}</MetaChip>
-        {report.expiresAt !== null && (
-          <MetaChip tone="muted" title={labels.cacheExpiryHint}>
-            {report.expiresAt > now ? labels.cacheExpiresIn(untilLabel(report.expiresAt, now)) : labels.cacheExpired}
-          </MetaChip>
-        )}
-      </span>
-      <button
-        type="button"
-        aria-expanded={open}
-        onClick={() => setOpen((o) => !o)}
-        className="self-start inline-flex items-center gap-1 bg-transparent border-0 p-0 cursor-pointer text-xs text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] transition-colors rounded-zg-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--zg-ring)]"
-      >
-        <Caret open={open} />
-        {open ? labels.cacheHideRequests : labels.cacheShowRequests}
-      </button>
-      <div className="zg-collapsible" data-open={open}>
-        <div className="zg-collapsible-inner">
-          {mounted && <CacheTable report={report} headers={headers} energy={energy} dropped={dropped} />}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function CacheTable({
-  report,
-  headers,
-  energy,
-  dropped,
-}: {
-  report: SessionCacheReport;
-  headers: readonly string[];
-  energy: boolean;
-  dropped: boolean;
-}) {
-  return (
-    <div
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a keyboard scrolls the table when it overflows (many turns, a narrow column)
-      tabIndex={0}
-      // No top padding: the header row holds it, so rows scrolling under the stuck header never show above it.
-      className="zg-tray mt-1 max-h-60 overflow-y-auto min-w-0 rounded-zg-md px-3 pb-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--zg-ring)]"
-    >
-      <table className="w-full border-collapse text-zg-meta tabular-nums">
-        <thead>
-          <tr>
-            {headers.map((header) => (
-              <th
-                key={header}
-                // Stuck to the top while the rows scroll, on the tray's tone so they pass under it.
-                className="zg-meta !text-zg-meta font-normal whitespace-nowrap text-right first:text-left pr-3 last:pr-0 pt-2 pb-1.5 sticky top-0 z-[1] bg-[var(--zg-tray)]"
-              >
-                {header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody className="text-[var(--zg-text)]">
-          {report.rows.map((row) => (
-            <tr key={row.turn}>
-              <td className="text-left pr-3">{row.turn}</td>
-              <td className="text-right pr-3">{formatCount(row.promptTokens)}</td>
-              <td className="text-right pr-3">{row.cachedPct === null ? '–' : `${row.cachedPct}%`}</td>
-              <td className="text-right pr-3">{row.rereadTokens > 0 ? formatCount(row.rereadTokens) : '–'}</td>
-              <td className="text-right pr-3">{row.ttftMs === undefined ? '–' : msLabel(row.ttftMs)}</td>
-              {energy && (
-                <td className="text-right pr-3">
-                  {row.energyJoules === undefined ? '–' : joulesLabel(row.energyJoules)}
-                </td>
-              )}
-              {dropped && <td className="text-right pr-3">{row.reasoningDropped ?? '–'}</td>}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}