zidane-ui 9.1.1 → 9.1.4

package/src/session/headless/usage.ts

@@ -1,407 +0,0 @@
-/**
- * Usage: token spend over time (the welcome screen's dashboard) and the
- * providers' subscription windows (the usage panel, a footer gauge).
- *
- *   - `createUsageSummaryState` keeps one summary per range across mounts,
- *     mirrored to a `Storage` (localStorage in a browser) so the first frame
- *     after a launch paints the last numbers; every read re-fetches behind
- *     them. One request per range in flight; a reply that changes nothing
- *     notifies no one.
- *   - `createProviderUsageState` is one cache and one refresh cadence for the
- *     subscription windows, shared by every reader: auto-probes while
- *     visible when enabled, a manual refresh that always works, GitHub's API
- *     limits beside the model providers but never mixed into them.
- */
-import type { ProviderResetCredit, ProviderResetOutcome, ProviderUsageSnapshot } from 'zidane/chat/pure';
-
-import type { Readable } from '../../chat/headless/store';
-
-export type { ProviderResetCredit, ProviderResetOutcome, ProviderUsageSnapshot };
-
-/** Which account a banked reset is spent on: a snapshot's provider and credential. */
-export interface ProviderResetTarget {
-  /** The snapshot's `providerKey`. */
-  providerKey: string;
-  /** The snapshot's `credentialKey`. */
-  credentialKey: string;
-  /** Which reset to spend (`ProviderResetCredit.id`). Absent: the provider picks. */
-  creditId?: string;
-}
-
-/** The time window of a usage summary. */
-export type UsageRange = 'all' | '30d' | '7d';
-
-/** The ranges, in the order a range switcher shows them. */
-export const USAGE_RANGES: readonly UsageRange[] = ['all', '30d', '7d'];
-
-/** Per-model usage over the summary's range. `tokensIn` counts prompt input plus cache reads and writes; `cost` is USD. */
-export interface UsageModelRow {
-  /** The model id. */
-  modelId: string;
-  /** The provider's display name. */
-  provider: string;
-  /** Assistant turns. */
-  turns: number;
-  /** Tokens sent to the model. */
-  tokensIn: number;
-  /** Tokens the model produced. */
-  tokensOut: number;
-  /** USD. */
-  cost: number;
-}
-
-/** One stacked-bar segment of the models chart: a model's tokens on a day. */
-export interface UsageModelDayPoint {
-  /** Local `YYYY-MM-DD`. */
-  day: string;
-  /** The model id. */
-  modelId: string;
-  /** Tokens that day. */
-  tokens: number;
-}
-
-/** Spend per provider. */
-export interface UsageProviderRow {
-  /** The provider's display name. */
-  provider: string;
-  /** USD. */
-  cost: number;
-}
-
-/** One heatmap cell. Sparse: days without activity are left out. */
-export interface UsageHeatmapDay {
-  /** Local `YYYY-MM-DD`. */
-  day: string;
-  /** Tokens that day. */
-  tokens: number;
-  /** User messages that day. */
-  messages: number;
-}
-
-/** Usage and spend over a range. The heatmap always spans the last ~26 weeks. */
-export interface UsageSummary {
-  /** The range it covers. */
-  range: UsageRange;
-  /** First name for the greeting; `null` when unknown. */
-  userName: string | null;
-  /** Sessions in range. */
-  sessions: number;
-  /** User messages (prompts the agent spawned excluded). */
-  messages: number;
-  /** Tokens in and out. */
-  totalTokens: number;
-  /** Tokens sent to models. */
-  tokensIn: number;
-  /** Tokens models produced. */
-  tokensOut: number;
-  /** USD, from assistant-turn costs. */
-  totalCost: number;
-  /** Days with activity. */
-  activeDays: number;
-  /** Consecutive active days up to today. */
-  currentStreak: number;
-  /** The longest run of active days. */
-  longestStreak: number;
-  /** Local hour (0-23) with the most messages; `null` without data. */
-  peakHour: number | null;
-  /** The most used model id; `null` without data. */
-  favoriteModel: string | null;
-  /** Per model, most used first. */
-  models: UsageModelRow[];
-  /** The models chart's points. */
-  modelDaily: UsageModelDayPoint[];
-  /** Spend per provider, largest first. */
-  providers: UsageProviderRow[];
-  /** The activity heatmap's days. */
-  heatmap: UsageHeatmapDay[];
-  /** When the backend computed it (ms). */
-  generatedAt: number;
-}
-
-/** The summaries held, by range. */
-export type UsageSummaries = Partial<Record<UsageRange, UsageSummary>>;
-
-/**
- * Enough of the shape to render without throwing; anything else is dropped.
- *
- * @param value - A stored or received value.
- * @param range - The range it should cover.
- */
-export function isUsageSummary(value: unknown, range: UsageRange): value is UsageSummary {
-  if (!value || typeof value !== 'object') return false;
-  const s = value as Partial<UsageSummary>;
-  return (
-    s.range === range &&
-    typeof s.sessions === 'number' &&
-    typeof s.messages === 'number' &&
-    typeof s.totalTokens === 'number' &&
-    Array.isArray(s.models) &&
-    Array.isArray(s.modelDaily) &&
-    Array.isArray(s.providers) &&
-    Array.isArray(s.heatmap)
-  );
-}
-
-/** The usage summaries a host keeps. */
-export interface UsageSummaryState {
-  /** Every range held so far (a stored snapshot until the first reply). */
-  summaries: Readable<UsageSummaries>;
-  /** Fetches `range` (deduped per range). Resolves once the store holds the reply, or the read failed. */
-  revalidate(range: UsageRange): Promise<void>;
-}
-
-/** Options for {@link createUsageSummaryState}. */
-export interface UsageSummaryStateOptions {
-  /** Where the snapshot is mirrored (`localStorage`). Absent: memory only. */
-  storage?: Pick<Storage, 'getItem' | 'setItem'> | null;
-  /** The storage key. Default `zg:usage-summary:v1`. */
-  storageKey?: string;
-  /** Defers the snapshot write off the critical path. Default: `requestIdleCallback`, else a 0 ms timeout. */
-  schedule?: (write: () => void) => void;
-}
-
-/** The default storage key of the usage snapshot. */
-export const USAGE_SNAPSHOT_KEY = 'zg:usage-summary:v1';
-
-function readSnapshot(storage: UsageSummaryStateOptions['storage'], key: string): UsageSummaries {
-  try {
-    const raw = storage?.getItem(key);
-    const parsed: unknown = raw ? JSON.parse(raw) : null;
-    if (!parsed || typeof parsed !== 'object') return {};
-    const out: UsageSummaries = {};
-    for (const range of USAGE_RANGES) {
-      const s = (parsed as Record<string, unknown>)[range];
-      if (isUsageSummary(s, range)) out[range] = s;
-    }
-    return out;
-  } catch {
-    return {};
-  }
-}
-
-const idle = (write: () => void) => {
-  if (typeof requestIdleCallback === 'function') requestIdleCallback(write, { timeout: 2000 });
-  else setTimeout(write, 0);
-};
-
-/** Same numbers, ignoring when they were computed. */
-function sameSummary(a: UsageSummary, b: UsageSummary): boolean {
-  return JSON.stringify({ ...a, generatedAt: 0 }) === JSON.stringify({ ...b, generatedAt: 0 });
-}
-
-/**
- * Creates a {@link UsageSummaryState}.
- *
- * @param fetchSummary - Reads one range from the backend.
- * @param options - Where the snapshot is mirrored.
- */
-export function createUsageSummaryState(
-  fetchSummary: (range: UsageRange) => Promise<UsageSummary>,
-  options: UsageSummaryStateOptions = {},
-): UsageSummaryState {
-  const key = options.storageKey ?? USAGE_SNAPSHOT_KEY;
-  const schedule = options.schedule ?? idle;
-  let summaries: UsageSummaries | null = null;
-  const inFlight = new Map<UsageRange, Promise<void>>();
-  const listeners = new Set<() => void>();
-  const current = () => (summaries ??= readSnapshot(options.storage, key));
-  const persist = () =>
-    schedule(() => {
-      try {
-        options.storage?.setItem(key, JSON.stringify(current()));
-      } catch {
-        // Quota or disabled storage: the next launch fetches.
-      }
-    });
-
-  return {
-    summaries: {
-      get: current,
-      subscribe(onChange) {
-        listeners.add(onChange);
-        return () => listeners.delete(onChange);
-      },
-    },
-    revalidate(range) {
-      let pending = inFlight.get(range);
-      if (pending) return pending;
-      pending = fetchSummary(range)
-        .then((next) => {
-          // Not a summary (a stub, a backend mid-quit): keep what is held.
-          if (!isUsageSummary(next, range)) return;
-          const prev = current()[range];
-          if (prev && sameSummary(prev, next)) return;
-          summaries = { ...current(), [range]: next };
-          persist();
-          for (const notify of [...listeners]) notify();
-        })
-        .catch(() => undefined)
-        .finally(() => inFlight.delete(range));
-      inFlight.set(range, pending);
-      return pending;
-    },
-  };
-}
-
-/**
- * The summary to show for `range`: its own, or while it loads another range's (the one on screen, else any).
- *
- * @param all - The summaries held.
- * @param range - The range asked for.
- * @param shown - The range on screen before.
- */
-export function pickUsageSummary(
-  all: UsageSummaries,
-  range: UsageRange,
-  shown: UsageRange,
-): { summary: UsageSummary | null; standIn: boolean } {
-  const own = all[range];
-  if (own) return { summary: own, standIn: false };
-  const standIn = all[shown] ?? USAGE_RANGES.map((r) => all[r]).find((s) => s !== undefined) ?? null;
-  return { summary: standIn, standIn: standIn !== null };
-}
-
-/** What the subscription-usage readers see. */
-export interface ProviderUsageView {
-  /** The model providers' snapshots. */
-  snapshots: readonly ProviderUsageSnapshot[];
-  /** GitHub's API limits, one snapshot per host. Never read as a model provider. */
-  github: readonly ProviderUsageSnapshot[];
-  /** A fetch is in flight. */
-  loading: boolean;
-  /** At least one fetch completed (auto or manual). */
-  loaded: boolean;
-}
-
-/** One cache of subscription usage, shared by every reader. */
-export interface ProviderUsageState {
-  /** What is shown. A quiet probe that changes nothing keeps the same object. */
-  view: Readable<ProviderUsageView>;
-  /** Fetches the providers (and GitHub). `refresh`: bypass the backend's cache; one landing mid-fetch runs after it. */
-  load(refresh: boolean): Promise<void>;
-  /** GitHub alone: `probe` asks GitHub, otherwise what was observed. */
-  loadGithub(probe: boolean): Promise<void>;
-  /** When the last provider fetch landed (ms), `0` before any. */
-  lastLoad(): number;
-  /** Spends one banked reset, then refreshes. `null` when the source can't redeem. */
-  redeemReset: ((target: ProviderResetTarget) => Promise<ProviderResetOutcome>) | null;
-}
-
-/** The backend calls a {@link ProviderUsageState} makes. */
-export interface ProviderUsageSource {
-  /** The model providers' snapshots. Never rejects on a provider error (it lands in the snapshot). */
-  providers(options?: { refresh?: boolean }): Promise<readonly ProviderUsageSnapshot[]>;
-  /** GitHub's API limits. Absent: no GitHub section. */
-  github?(options?: { probe?: boolean }): Promise<readonly ProviderUsageSnapshot[]>;
-  /** Spends one banked reset. Absent: no reset button. */
-  redeemReset?(target: ProviderResetTarget): Promise<ProviderResetOutcome>;
-}
-
-/** Same rows as what is shown: keep the old array so a quiet probe re-renders nobody. */
-function sameSnapshots(a: readonly ProviderUsageSnapshot[], b: readonly ProviderUsageSnapshot[]): boolean {
-  if (a === b) return true;
-  // A malformed answer (null from a stubbed or failing bridge) is passed through, and counts as changed.
-  if (!Array.isArray(a) || !Array.isArray(b)) return false;
-  return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
-}
-
-/**
- * Creates a {@link ProviderUsageState}. The cadence (when to auto-load) is the reader's: `useProviderUsage`.
- *
- * @param source - The backend calls.
- * @param now - The clock. Default `Date.now`.
- */
-export function createProviderUsageState(
-  source: ProviderUsageSource,
-  now: () => number = Date.now,
-): ProviderUsageState {
-  let view: ProviderUsageView = { snapshots: [], github: [], loading: false, loaded: false };
-  const listeners = new Set<() => void>();
-  const set = (patch: Partial<ProviderUsageView>) => {
-    const next = { ...view, ...patch };
-    if (
-      next.snapshots === view.snapshots &&
-      next.github === view.github &&
-      next.loading === view.loading &&
-      next.loaded === view.loaded
-    )
-      return;
-    view = next;
-    for (const notify of [...listeners]) notify();
-  };
-
-  let inFlight = false;
-  /*
-   * A manual refresh that lands while a fetch is in flight is deferred, not
-   * dropped (a slow endpoint holds a fetch for seconds, and the Refresh
-   * button would do nothing). Auto-probes colliding with anything are skipped.
-   */
-  let pendingRefresh = false;
-  let githubInFlight = false;
-  let last = 0;
-
-  const loadGithub = async (probe: boolean) => {
-    if (!source.github || githubInFlight) return;
-    githubInFlight = true;
-    try {
-      const next = await source.github({ probe });
-      if (!sameSnapshots(view.github, next)) set({ github: next });
-    } catch {
-      // Keep what was shown.
-    } finally {
-      githubInFlight = false;
-    }
-  };
-
-  const load = async (refresh: boolean) => {
-    if (inFlight) {
-      if (refresh) pendingRefresh = true;
-      return;
-    }
-    inFlight = true;
-    set({ loading: true });
-    try {
-      let force = refresh;
-      do {
-        pendingRefresh = false;
-        // GitHub travels on its own: a slow probe never holds the providers' rows.
-        void loadGithub(true);
-        const next = await source.providers(force ? { refresh: true } : undefined);
-        last = now();
-        set({ ...(sameSnapshots(view.snapshots, next) ? {} : { snapshots: next }), loaded: true });
-        force = true;
-      } while (pendingRefresh);
-    } catch {
-      // The call itself failed (a provider error lands in its snapshot): keep what is shown.
-    } finally {
-      inFlight = false;
-      set({ loading: false });
-    }
-  };
-
-  return {
-    view: {
-      get: () => view,
-      subscribe(onChange) {
-        listeners.add(onChange);
-        return () => listeners.delete(onChange);
-      },
-    },
-    load,
-    loadGithub,
-    lastLoad: () => last,
-    redeemReset: source.redeemReset
-      ? async (target) => {
-          let outcome: ProviderResetOutcome;
-          try {
-            outcome = await source.redeemReset!(target);
-          } catch (err) {
-            outcome = { code: 'failed', windowsReset: 0, error: err instanceof Error ? err.message : null };
-          }
-          // The windows and the count moved (or may have): show what the backend holds now.
-          await load(true);
-          return outcome;
-        }
-      : null,
-  };
-}

package/src/session/index.ts

@@ -1,31 +0,0 @@
-/**
- * `zidane-ui/session`: the session surfaces over a `SessionHost`:
- * `SessionProvider` and its per-session hooks, the panel bodies
- * (`TodosPanel`, `QueueTab`, `ArtifactsPanel`), the read-only `TodoListView`
- * and `TodoTally`, the Diffs panel's `DiffFileTree`, the session header, the
- * welcome screen, and the dialogs (`SessionDetailsDialog`,
- * `TurnDetailsDialog`, `RunningWorkDialog`, `UsagePanel`) with their default
- * `SessionShell`. The React-free model is `zidane-ui/session/headless`.
- */
-export * from './SessionProvider';
-export * from './useSessionLabels';
-export * from './TodosPanel';
-export * from './TodoList';
-export * from './DiffFileTree';
-export * from './QueueTab';
-export * from './ArtifactsPanel';
-export * from './ArtifactRowChips';
-export * from './PanelAttention';
-export * from './SideChat';
-export { SessionShell, type SessionShellProps, type RenderSessionShell } from './SessionShell';
-export { renderSessionModalShell, renderWideSessionModalShell } from './modal-shell';
-export * from './SessionHeader';
-export * from './SessionDetailsDialog';
-export * from './SessionCacheFacts';
-export * from './TurnDetailsDialog';
-export * from './RunningWorkDialog';
-export * from './UsagePanel';
-export * from './ProviderUsageProvider';
-export * from './useUsageSummary';
-export * from './WelcomeScreen';
-export * from './ProjectHome';

package/src/session/modal-shell.tsx

@@ -1,24 +0,0 @@
-/**
- * The session dialogs (details, turn details, running work, usage) drawn in
- * the app's `ModalShell`, so their header, close button, Esc and footer are
- * the app's like every other modal. Pass one as a dialog's `renderShell`.
- */
-import type { RenderSessionShell } from './SessionShell';
-
-import { ModalShell } from '../app/ModalProvider';
-
-const noop = () => undefined;
-
-const shellOfSize =
-  (size: 'medium' | 'large'): RenderSessionShell =>
-  ({ title, description, onClose, footer, children }) => (
-    <ModalShell title={title} description={description} onClose={onClose ?? noop} footer={footer} size={size}>
-      {children}
-    </ModalShell>
-  );
-
-/** A session dialog in the app's `ModalShell`, medium width. */
-export const renderSessionModalShell = shellOfSize('medium');
-
-/** For the session details: a facts grid and the cache table need the room. */
-export const renderWideSessionModalShell = shellOfSize('large');