zidane-ui 9.0.4 → 9.1.3

package/src/session/WelcomeScreen.tsx

@@ -1,578 +0,0 @@
-/**
- * The welcome screen: a greeting, then the usage card (Overview: totals,
- * streaks and a 26-week activity heatmap; Models: daily tokens by model and
- * spend by provider), switchable by range. It is the new-chat surface: the
- * first send replaces it with the transcript.
- *
- * Data is the host's `usage.summary` through `useUsageSummary` (the last
- * numbers on the first frame, refreshed behind them); without it only the
- * greeting shows. Model and heatmap colors are an accent ramp derived with
- * `color-mix`, no palette entries of their own.
- */
-import { memo, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-
-import { MetaChip } from '../components/Form';
-import { USAGE_RANGES, type UsageRange, type UsageSummary } from './headless/usage';
-import {
-  buildHeatmapGrid,
-  buildStackedSeries,
-  formatCost,
-  formatHour,
-  formatTokens,
-  shortDayLabel,
-  type HeatmapCell,
-} from './headless/usage-format';
-import { useSessionLabels } from './useSessionLabels';
-import { useUsageSummary } from './useUsageSummary';
-
-/** Accent ramp for model series: index 0 is the biggest model. */
-const MODEL_RAMP = [
-  'var(--zg-accent)',
-  'color-mix(in srgb, var(--zg-accent) 62%, var(--zg-text))',
-  'color-mix(in srgb, var(--zg-accent) 52%, var(--zg-raised))',
-  'color-mix(in srgb, var(--zg-accent) 36%, var(--zg-raised))',
-  'color-mix(in srgb, var(--zg-accent) 24%, var(--zg-raised))',
-];
-const OTHER_COLOR = 'color-mix(in srgb, var(--zg-text-muted) 40%, var(--zg-raised))';
-
-/** Heatmap intensity ramp (level 1-4); level 0 is a quiet track tint. */
-const HEAT_RAMP = [
-  'var(--zg-track)',
-  'color-mix(in srgb, var(--zg-accent) 22%, var(--zg-raised))',
-  'color-mix(in srgb, var(--zg-accent) 42%, var(--zg-raised))',
-  'color-mix(in srgb, var(--zg-accent) 68%, var(--zg-raised))',
-  'var(--zg-accent)',
-];
-
-/** Props for {@link WelcomeScreen}. */
-export interface WelcomeScreenProps {
-  /** A model id's display name. Default: the id. */
-  modelName?: (modelId: string) => string;
-  /** The moment the screen describes (greeting, date, heatmap end). Default: when it mounts. */
-  now?: Date;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-const ownId = (id: string) => id;
-
-/**
- * Renders the greeting and the usage card.
- *
- * @param props - `modelName`, `now`, `className` and `style`.
- */
-export function WelcomeScreen({ modelName = ownId, now: nowProp, className = '', style }: WelcomeScreenProps) {
-  const labels = useSessionLabels();
-  const [range, setRange] = useState<UsageRange>('all');
-  const [tab, setTab] = useState<'overview' | 'models'>('overview');
-  const { summary, standIn, available } = useUsageSummary(range);
-  const now = useMemo(() => nowProp ?? new Date(), [nowProp]);
-  const name = summary?.userName ?? null;
-
-  const isEmpty = summary !== null && !standIn && summary.sessions === 0 && summary.messages === 0;
-
-  return (
-    <div
-      className={`zg-welcome-in mx-auto w-full max-w-[680px] pt-0 pb-8 text-zg-ui text-[var(--zg-text)] ${className}`}
-      style={style}
-    >
-      <div className="mb-7 px-1">
-        <h1 className="text-zg-title leading-7 font-medium tracking-[-0.01em] m-0">
-          {labels.welcomeGreeting(now.getHours(), name)}
-        </h1>
-        <p className="m-0 mt-1 text-zg-label leading-4 text-[var(--zg-text-muted)]">{labels.welcomeDate(now)}</p>
-      </div>
-
-      {!available ? null : isEmpty ? (
-        <p className="px-1 text-zg-label text-[var(--zg-text-muted)]">{labels.welcomeNoUsage}</p>
-      ) : (
-        <section
-          aria-label={labels.welcomeUsageLabel}
-          aria-busy={summary === null || standIn}
-          className="zg-raised border rounded-zg-xl overflow-hidden p-4"
-        >
-          <header className="flex items-center justify-between gap-3">
-            <div role="tablist" aria-label={labels.welcomeViewLabel} className="zg-segment">
-              {(['overview', 'models'] as const).map((t) => (
-                <SegmentItem key={t} role="tab" active={tab === t} onClick={() => setTab(t)}>
-                  {t === 'overview' ? labels.welcomeOverview : labels.welcomeModels}
-                </SegmentItem>
-              ))}
-            </div>
-            <div role="group" aria-label={labels.welcomeRangeLabel} className="zg-segment">
-              {USAGE_RANGES.map((r) => (
-                <SegmentItem key={r} active={range === r} onClick={() => setRange(r)}>
-                  {labels.welcomeRange[r]}
-                </SegmentItem>
-              ))}
-            </div>
-          </header>
-
-          {/*
-           * Before the first summary ever: the same layout with placeholders
-           * (`summary === null`), so nothing moves when the numbers land.
-           * While another range loads, the last one stays, dimmed.
-           */}
-          <div
-            data-stand-in={standIn || undefined}
-            className="data-[stand-in]:opacity-55"
-            style={{ transition: 'opacity var(--zg-motion-fade)' }}
-          >
-            {tab === 'overview' ? (
-              <OverviewTab summary={summary} now={now} modelName={modelName} />
-            ) : (
-              <ModelsTab summary={summary} now={now} modelName={modelName} />
-            )}
-          </div>
-        </section>
-      )}
-    </div>
-  );
-}
-
-function SegmentItem({
-  active,
-  onClick,
-  role,
-  children,
-}: {
-  active: boolean;
-  onClick: () => void;
-  role?: 'tab';
-  children: ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      role={role}
-      aria-selected={role === 'tab' ? active : undefined}
-      aria-pressed={role === 'tab' ? undefined : active}
-      onClick={onClick}
-      data-active={active ? '' : undefined}
-      className={`zg-segment-item zg-press-subtle h-6 px-2.5 rounded-full border-0 bg-transparent text-zg-meta cursor-pointer ${
-        active ? 'text-[var(--zg-text)] font-medium' : 'text-[var(--zg-text-muted)]'
-      }`}
-    >
-      {children}
-    </button>
-  );
-}
-
-/** A value not loaded yet: the box of `sample`, in the track tone. */
-function Pending({ sample }: { sample: string }) {
-  return (
-    <span aria-hidden className="zg-skeleton">
-      {sample}
-    </span>
-  );
-}
-
-function StatTile({
-  label,
-  value,
-  hint,
-  sample,
-}: {
-  label: string;
-  value: string | null;
-  hint?: string;
-  sample: string;
-}) {
-  return (
-    <div className="min-w-0">
-      <div className="text-zg-body leading-5 font-medium tabular-nums truncate" title={hint}>
-        {value ?? <Pending sample={sample} />}
-      </div>
-      <div className="mt-0.5 text-[length:var(--zg-font-size-meta)] leading-4 text-[var(--zg-text-muted)] truncate">
-        {label}
-      </div>
-    </div>
-  );
-}
-
-interface TabProps {
-  summary: UsageSummary | null;
-  now: Date;
-  modelName: (modelId: string) => string;
-}
-
-function OverviewTab({ summary, now, modelName }: TabProps) {
-  const labels = useSessionLabels();
-  const comparison =
-    summary &&
-    labels.welcomeTokenComparison(
-      summary.totalTokens,
-      // Day-of-year seed: stable within a day, rotates across days.
-      Math.floor((now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / 86_400_000),
-    );
-  const s = summary;
-
-  return (
-    <div>
-      <div className="grid grid-cols-4 gap-x-4 gap-y-3.5 mt-4">
-        <StatTile label={labels.welcomeSessions} sample="000" value={s && s.sessions.toLocaleString('en-US')} />
-        <StatTile label={labels.welcomeMessages} sample="00,000" value={s && s.messages.toLocaleString('en-US')} />
-        <StatTile
-          label={labels.welcomeTotalTokens}
-          sample="00.0M"
-          value={s && formatTokens(s.totalTokens)}
-          {...(s ? { hint: labels.welcomeTokensExact(s.totalTokens) } : {})}
-        />
-        <StatTile label={labels.welcomeActiveDays} sample="00" value={s && String(s.activeDays)} />
-        <StatTile
-          label={labels.welcomeCurrentStreak}
-          sample="0 days"
-          value={s && labels.welcomeDays(s.currentStreak)}
-        />
-        <StatTile
-          label={labels.welcomeLongestStreak}
-          sample="00 days"
-          value={s && labels.welcomeDays(s.longestStreak)}
-        />
-        <StatTile
-          label={labels.welcomePeakHour}
-          sample="00 pm"
-          value={s && (s.peakHour === null ? labels.welcomeNoneYet : formatHour(s.peakHour))}
-        />
-        <StatTile
-          label={labels.welcomeFavoriteModel}
-          sample="Model name"
-          value={s && (s.favoriteModel === null ? labels.welcomeNoneYet : modelName(s.favoriteModel))}
-          {...(s?.favoriteModel ? { hint: s.favoriteModel } : {})}
-        />
-      </div>
-
-      <div className="mt-4 pt-4 border-t border-[var(--zg-hairline)]">
-        <Heatmap days={summary?.heatmap ?? null} now={now} />
-      </div>
-
-      {/* Always one line, so the card keeps its height with or without a comparison. */}
-      <p className="m-0 mt-3.5 text-zg-label leading-4 text-[var(--zg-text-muted)] truncate">
-        {summary === null ? <Pending sample={labels.welcomeComparisonSample} /> : (comparison ?? '\u00a0')}
-      </p>
-    </div>
-  );
-}
-
-const CELL = 9;
-const GAP = 4;
-const SLOT = CELL + GAP;
-
-const Heatmap = memo(function Heatmap({ days, now }: { days: UsageSummary['heatmap'] | null; now: Date }) {
-  const labels = useSessionLabels();
-  // Placeholder: the same grid, every day empty (its size depends on `now` only).
-  const grid = useMemo(() => buildHeatmapGrid(days ?? [], now), [days, now]);
-  const [hover, setHover] = useState<{ cell: HeatmapCell; x: number; y: number; width: number } | null>(null);
-  const hostRef = useRef<HTMLDivElement>(null);
-
-  const width = grid.weeks * SLOT - GAP;
-  const height = 7 * SLOT - GAP;
-  // Built once per grid: a hover re-renders the tooltip, not the 182 cells.
-  const rects = useMemo(
-    () =>
-      grid.cells.map((cell, i) => (
-        <rect
-          key={cell.day}
-          data-i={i}
-          x={cell.week * SLOT}
-          y={cell.weekday * SLOT}
-          width={CELL}
-          height={CELL}
-          rx={2.25}
-          fill={HEAT_RAMP[cell.level]}
-        />
-      )),
-    [grid],
-  );
-
-  return (
-    <div ref={hostRef} className="relative">
-      <div className="flex items-center justify-between">
-        <span className="zg-section-label">{labels.welcomeActivity}</span>
-        <span aria-hidden className="flex items-center gap-[3px] text-zg-badge leading-4 text-[var(--zg-text-muted)]">
-          <span className="mr-0.5">{labels.welcomeLess}</span>
-          {HEAT_RAMP.map((c) => (
-            <span key={c} className="inline-block w-[7px] h-[7px] rounded-[2px]" style={{ background: c }} />
-          ))}
-          <span className="ml-0.5">{labels.welcomeMore}</span>
-        </span>
-      </div>
-
-      {/* Month labels in HTML at the UI's own size (an SVG label would scale with the grid). */}
-      <div aria-hidden className="relative h-4 mt-2.5 text-zg-badge leading-4 text-[var(--zg-text-muted)]">
-        {grid.monthLabels.map(([week, label]) => (
-          <span
-            key={`${week}-${label}`}
-            className="absolute top-0"
-            style={{ left: `${((week * SLOT) / width) * 100}%` }}
-          >
-            {label}
-          </span>
-        ))}
-      </div>
-
-      {/* `width="100%"` + viewBox scales the grid; the tooltip follows the pointer, so it stays right under scaling. */}
-      <svg
-        width="100%"
-        viewBox={`0 0 ${width} ${height}`}
-        preserveAspectRatio="xMinYMin meet"
-        role="img"
-        aria-label={labels.welcomeHeatmapLabel}
-        className="block mt-1"
-        // One listener for the grid, not one per day (182 cells).
-        onMouseMove={(e) => {
-          const index = (e.target as Element).getAttribute('data-i');
-          const cell = index === null || days === null ? undefined : grid.cells[Number(index)];
-          const host = hostRef.current?.getBoundingClientRect();
-          if (!cell || !host) return;
-          setHover((prev) =>
-            prev?.cell === cell ? prev : { cell, x: e.clientX - host.left, y: e.clientY - host.top, width: host.width },
-          );
-        }}
-        onMouseLeave={() => setHover(null)}
-      >
-        {rects}
-      </svg>
-
-      {hover !== null && (
-        <div
-          role="tooltip"
-          className="absolute z-10 pointer-events-none flex flex-col gap-1 px-2 py-1.5 rounded-zg-sm bg-[var(--zg-overlay)] shadow-[var(--zg-shadow-float)] text-zg-meta whitespace-nowrap"
-          style={{
-            // 200 ≈ the widest tooltip ([NNNM tokens] [NNN messages] under the date).
-            left: Math.max(0, Math.min(hover.x - 60, hover.width - 200)),
-            top: hover.y + 16,
-          }}
-        >
-          <span className="text-[var(--zg-text)]">{labels.welcomeDay(hover.cell.day)}</span>
-          <span className="flex gap-1 tabular-nums">
-            <MetaChip>{labels.welcomeTokens(formatTokens(hover.cell.tokens))}</MetaChip>
-            <MetaChip>{labels.welcomeMessageCount(hover.cell.messages)}</MetaChip>
-          </span>
-        </div>
-      )}
-    </div>
-  );
-});
-
-const TOP_MODELS = 5;
-
-function ModelsTab({ summary, now, modelName }: TabProps) {
-  // Nothing loaded yet: the chart's frame (its height is fixed), nothing to list.
-  if (summary === null) {
-    return (
-      <div className="mt-4">
-        <StackedChart series={[]} colorFor={() => OTHER_COLOR} placeholder />
-      </div>
-    );
-  }
-  return <ModelsBody summary={summary} now={now} modelName={modelName} />;
-}
-
-const percent = (share: number) => (share >= 1 ? Math.round(share) : share.toFixed(1));
-
-function ModelsBody({ summary, now, modelName }: TabProps & { summary: UsageSummary }) {
-  const labels = useSessionLabels();
-  const top = summary.models.slice(0, TOP_MODELS);
-  const rest = summary.models.slice(TOP_MODELS);
-  const hasOther = rest.length > 0;
-
-  const spanDays = useMemo(() => {
-    if (summary.range === '7d') return 7;
-    if (summary.range === '30d') return 30;
-    // 'all': from the oldest charted day (the backend caps the series at 120 days).
-    const first = summary.modelDaily[0]?.day;
-    if (!first) return 30;
-    const [y, m, d] = first.split('-').map(Number);
-    const days = Math.floor((now.getTime() - new Date(y!, m! - 1, d!).getTime()) / 86_400_000) + 1;
-    return Math.max(7, Math.min(120, days));
-  }, [summary, now]);
-
-  const series = useMemo(
-    () =>
-      buildStackedSeries(
-        summary.modelDaily,
-        top.map((m) => m.modelId),
-        now,
-        spanDays,
-        hasOther,
-      ),
-    [summary.modelDaily, top, now, spanDays, hasOther],
-  );
-
-  const colorFor = (i: number) => (i < TOP_MODELS ? MODEL_RAMP[i]! : OTHER_COLOR);
-  const totalTokensAll = summary.models.reduce((a, m) => a + m.tokensIn + m.tokensOut, 0);
-  const totalCost = summary.providers.reduce((a, p) => a + p.cost, 0);
-  const maxProviderCost = summary.providers[0]?.cost ?? 0;
-
-  return (
-    <div>
-      <div className="mt-4">
-        <StackedChart series={series} colorFor={colorFor} />
-      </div>
-
-      <ul className="list-none m-0 mt-4 p-0 flex flex-col gap-2">
-        {top.map((m, i) => {
-          const share = totalTokensAll > 0 ? ((m.tokensIn + m.tokensOut) / totalTokensAll) * 100 : 0;
-          return (
-            <li key={m.modelId} className="flex items-center gap-2.5 min-w-0">
-              <span
-                aria-hidden
-                className="inline-block w-[8px] h-[8px] rounded-[2px] shrink-0"
-                style={{ background: colorFor(i) }}
-              />
-              <span className="truncate" title={m.modelId}>
-                {modelName(m.modelId)}
-              </span>
-              <span className="flex gap-1">
-                <MetaChip>{labels.welcomeTokensIn(formatTokens(m.tokensIn))}</MetaChip>
-                <MetaChip>{labels.welcomeTokensOut(formatTokens(m.tokensOut))}</MetaChip>
-              </span>
-              <span className="zg-meta ml-auto pl-3">{percent(share)}%</span>
-            </li>
-          );
-        })}
-        {hasOther && (
-          <li className="flex items-center gap-2.5 min-w-0">
-            <span
-              aria-hidden
-              className="inline-block w-[8px] h-[8px] rounded-[2px] shrink-0"
-              style={{ background: OTHER_COLOR }}
-            />
-            <span className="text-[var(--zg-text-muted)]">{labels.welcomeOtherModels(rest.length)}</span>
-            <span className="zg-meta ml-auto pl-3">
-              {totalTokensAll > 0
-                ? `${Math.max(
-                    0,
-                    Math.round((rest.reduce((a, m) => a + m.tokensIn + m.tokensOut, 0) / totalTokensAll) * 100),
-                  )}%`
-                : '0%'}
-            </span>
-          </li>
-        )}
-      </ul>
-
-      {summary.providers.length > 0 && (
-        <div className="mt-4 pt-4 border-t border-[var(--zg-hairline)]">
-          <div className="flex items-center justify-between">
-            <span className="zg-section-label">{labels.welcomeSpend}</span>
-            <span className="zg-meta">{labels.welcomeSpendTotal(formatCost(totalCost))}</span>
-          </div>
-          <ul className="list-none m-0 mt-3 p-0 flex flex-col gap-2.5">
-            {summary.providers.map((p) => {
-              const share = totalCost > 0 ? (p.cost / totalCost) * 100 : 0;
-              const barPct = maxProviderCost > 0 ? (p.cost / maxProviderCost) * 100 : 0;
-              return (
-                <li key={p.provider} className="grid grid-cols-[110px_1fr_auto_auto] items-center gap-3">
-                  <span className="truncate">{p.provider}</span>
-                  <span aria-hidden className="h-[4px] rounded-full overflow-hidden bg-[var(--zg-track)]">
-                    <span
-                      className="block h-full rounded-full"
-                      style={{
-                        width: `${Math.max(1.5, barPct)}%`,
-                        background: 'color-mix(in srgb, var(--zg-accent) 70%, var(--zg-raised))',
-                      }}
-                    />
-                  </span>
-                  <span className="zg-meta !text-[var(--zg-text)]">{formatCost(p.cost)}</span>
-                  <span className="zg-meta w-[38px] text-right">{percent(share)}%</span>
-                </li>
-              );
-            })}
-          </ul>
-          {/*
-           * Honesty caption: the figures are pay-as-you-go list-price
-           * estimates; subscription users never pay them, and without this
-           * line the totals look alarming.
-           */}
-          <p className="m-0 mt-3 text-zg-meta leading-4 text-[var(--zg-text-muted)] opacity-80">
-            {labels.welcomeSpendCaption}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-const CHART_W = 600;
-const CHART_H = 120;
-const AXIS_H = 16;
-
-function StackedChart({
-  series,
-  colorFor,
-  placeholder = false,
-}: {
-  series: ReturnType<typeof buildStackedSeries>;
-  colorFor: (i: number) => string;
-  /** Loading: the empty frame at the chart's own size. */
-  placeholder?: boolean;
-}) {
-  const labels = useSessionLabels();
-  const max = series.reduce((a, d) => Math.max(a, d.total), 0);
-
-  if (placeholder) {
-    return (
-      <svg width="100%" viewBox={`0 0 ${CHART_W} ${CHART_H + AXIS_H}`} aria-hidden className="block">
-        <line x1={0} y1={CHART_H + 0.5} x2={CHART_W} y2={CHART_H + 0.5} stroke="var(--zg-hairline)" strokeWidth={1} />
-      </svg>
-    );
-  }
-
-  if (max === 0) {
-    return (
-      <div className="h-[80px] flex items-center justify-center text-zg-label text-[var(--zg-text-muted)]">
-        {labels.welcomeNoModelActivity}
-      </div>
-    );
-  }
-
-  const n = series.length;
-  const slot = CHART_W / n;
-  const barW = Math.max(1, Math.min(slot - 2, slot * 0.72));
-  // Sparse axis labels: ~4 evenly spaced, off the very edges where they would clip.
-  const labelEvery = Math.max(1, Math.ceil(n / 4));
-  const axis = series.map((d, i) => [i, d.day] as const).filter(([i]) => i % labelEvery === Math.floor(labelEvery / 2));
-
-  return (
-    <svg
-      width="100%"
-      viewBox={`0 0 ${CHART_W} ${CHART_H + AXIS_H}`}
-      role="img"
-      aria-label={labels.welcomeChartLabel}
-      className="block"
-    >
-      <line x1={0} y1={CHART_H + 0.5} x2={CHART_W} y2={CHART_H + 0.5} stroke="var(--zg-hairline)" strokeWidth={1} />
-      {series.map((d, i) => {
-        if (d.total === 0) return null;
-        const x = i * slot + (slot - barW) / 2;
-        let y = CHART_H;
-        return (
-          <g key={d.day}>
-            <title>{labels.welcomeBarTitle(shortDayLabel(d.day), formatTokens(d.total))}</title>
-            {d.values.map((v, vi) => {
-              if (v <= 0) return null;
-              const h = Math.max(0.75, (v / max) * (CHART_H - 6));
-              y -= h;
-              return <rect key={vi} x={x} y={y} width={barW} height={h} fill={colorFor(vi)} rx={barW > 4 ? 1 : 0} />;
-            })}
-          </g>
-        );
-      })}
-      {axis.map(([i, day]) => (
-        <text
-          key={day}
-          x={i * slot + slot / 2}
-          y={CHART_H + 12}
-          textAnchor="middle"
-          fontSize={9}
-          className="fill-[var(--zg-text-muted)]"
-        >
-          {shortDayLabel(day)}
-        </text>
-      ))}
-    </svg>
-  );
-}

package/src/session/headless/artifacts.ts

@@ -1,101 +0,0 @@
-/**
- * Per-session artifact groups. Rows arrive grouped and rendered by the
- * backend (the kind registry that knows how a pull request looks lives
- * there). Change signals are wake-ups: the state re-reads the session rather
- * than splicing, so one code path keeps the backend's order. A burst of
- * wake-ups for one session is one read, and only the newest read writes.
- */
-import type { Readable } from '../../chat/headless/store';
-import type { SessionArtifact, SessionArtifactGroup, SessionArtifactRow } from './host';
-import { createKeyedState } from './keyed';
-
-/** The artifact groups of every session a host has seen. */
-export interface ArtifactsState {
-  /** The session's groups store (`null` until first read). */
-  groups(sessionId: string): Readable<readonly SessionArtifactGroup[] | null>;
-  /** Reads the session from the backend. Rejects when the read fails. */
-  refresh(sessionId: string): Promise<void>;
-  /** The backend said the session's artifacts changed: re-read once this tick. */
-  wake(sessionId: string): void;
-}
-
-/**
- * Creates an {@link ArtifactsState}.
- *
- * @param list - Reads one session's groups from the backend.
- */
-export function createArtifactsState(
-  list: (sessionId: string) => Promise<readonly SessionArtifactGroup[]>,
-): ArtifactsState {
-  const state = createKeyedState<readonly SessionArtifactGroup[]>(null);
-  const pending = new Set<string>();
-  const requests = new Map<string, number>();
-  const refresh = async (sessionId: string) => {
-    const seq = (requests.get(sessionId) ?? 0) + 1;
-    requests.set(sessionId, seq);
-    const groups = await list(sessionId);
-    if (requests.get(sessionId) !== seq) return;
-    state.set(sessionId, groups);
-  };
-  return {
-    groups: (sessionId) => state.readable(sessionId),
-    refresh,
-    wake(sessionId) {
-      if (pending.has(sessionId)) return;
-      pending.add(sessionId);
-      queueMicrotask(() => {
-        pending.delete(sessionId);
-        void refresh(sessionId).catch(() => undefined);
-      });
-    },
-  };
-}
-
-/**
- * The number of artifacts across groups: the indicator badge.
- *
- * @param groups - A session's groups, `null` while unread.
- */
-export function countArtifacts(groups: readonly SessionArtifactGroup[] | null): number {
-  return groups ? groups.reduce((n, g) => n + g.rows.length, 0) : 0;
-}
-
-/** The built-in kinds first, in this order; the others follow alphabetically (as the backend groups them). */
-const KIND_ORDER = ['pull_request', 'branch', 'commit', 'file'];
-
-/**
- * Groups rendered artifacts by kind, the built-in kinds first, the others alphabetically; rows keep their order.
- *
- * @param rows - The artifacts and their rows, newest first.
- * @param kindLabel - A kind's group label. Default: the raw kind.
- */
-export function groupArtifactRows(
-  rows: readonly SessionArtifactRow[],
-  kindLabel: (kind: string) => string = (kind) => kind,
-): SessionArtifactGroup[] {
-  const byKind = new Map<string, SessionArtifactGroup>();
-  for (const row of rows) {
-    const kind = row.artifact.kind;
-    let group = byKind.get(kind);
-    if (!group) byKind.set(kind, (group = { kind, label: kindLabel(kind), rows: [] }));
-    group.rows.push(row);
-  }
-  const rank = (kind: string) => {
-    const i = KIND_ORDER.indexOf(kind);
-    return i === -1 ? KIND_ORDER.length : i;
-  };
-  return [...byKind.values()].sort((a, b) => rank(a.kind) - rank(b.kind) || a.kind.localeCompare(b.kind));
-}
-
-/**
- * A plain row for a stored artifact: its label as the title, a web URI as the link. For a backend that answers
- * stored artifacts without rendering them.
- *
- * @param artifact - The stored artifact.
- */
-export function plainArtifactRow(artifact: SessionArtifact): SessionArtifactRow {
-  return {
-    artifact,
-    row: { title: artifact.label, ...(/^https?:\/\//.test(artifact.uri) ? { href: artifact.uri } : {}) },
-  };
-}