@spunto/design-system 0.27.0 → 0.30.0

package/src/components/tasks/new-task-dialog.tsx

@@ -0,0 +1,301 @@
+"use client"
+
+// Delegating work, as a form: what to do and where to start. No machine to pick — the task
+// allocates its own worker (a recycled one when the pool has a free machine), which is the whole
+// point of the object.
+//
+// Presentational like the rest of `/tasks`: the lists it offers (projects, branches, models) come
+// in as props, the value goes out through `onSubmit`, and `submitting`/`error` come back down. The
+// form owns only its draft — the fields and the files — and resets it every time it opens.
+
+import { useState, type FormEvent, type ReactElement, type ReactNode } from "react"
+import { GitBranchIcon, PackageIcon, SparklesIcon } from "lucide-react"
+
+import { Button } from "../button"
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "../combobox"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../dialog"
+import { Input } from "../input"
+import { Label } from "../label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select"
+import { Textarea } from "../textarea"
+import { AttachFileButton, AttachmentDraftStrip, FileDropOverlay, useAttachmentDraft } from "./task-attachments"
+import type { DraftFile } from "./types"
+
+export interface NewTaskValue {
+  /** Only when `projects` was given — the page otherwise already knows. */
+  projectId?: string
+  prompt: string
+  /** Omitted when blank: the task then takes the name the agent gives the conversation. */
+  title?: string
+  /** Omitted when blank: the repositories' default branch. */
+  baseBranch?: string
+  /** Omitted when blank: the project's default model. */
+  model?: string
+  /** Prepared in the browser — `data` is base64, ready for a JSON body. */
+  files: DraftFile[]
+}
+
+/** A harness and the models it knows — the suggestions under "Model". */
+export interface NewTaskModelGroup {
+  id: string
+  label: string
+  models: { value: string; label: string }[]
+}
+
+export interface NewTaskDialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** The button that opens it. Omitted → "New task". `null` → no trigger (open it yourself). */
+  trigger?: ReactNode | null
+  /** Label of the default trigger. @default "New task" */
+  label?: string
+  /** Variant of the default trigger. @default "default" */
+  variant?: "default" | "outline"
+
+  /** Pass the org's projects when no project is in scope: the form then asks for one first. */
+  projects?: { id: string; name: string }[]
+  /** Called when a project is picked, so the app can load that project's branches and default model. */
+  onProjectChange?: (projectId: string) => void
+  /** Branches common to the project's repositories. Empty → a free-text field. */
+  branches?: string[]
+  defaultBranch?: string | null
+  modelGroups?: NewTaskModelGroup[]
+  /** The project's default model, shown as the placeholder so a blank field says what it means. */
+  defaultModel?: string | null
+
+  onSubmit: (value: NewTaskValue) => void
+  submitting?: boolean
+  error?: string | null
+}
+
+export function NewTaskDialog({
+  open: openProp,
+  onOpenChange,
+  trigger,
+  label = "New task",
+  variant = "default",
+  projects,
+  onProjectChange,
+  branches = [],
+  defaultBranch = null,
+  modelGroups = [],
+  defaultModel = null,
+  onSubmit,
+  submitting = false,
+  error = null,
+}: NewTaskDialogProps) {
+  const [localOpen, setLocalOpen] = useState(false)
+  const open = openProp ?? localOpen
+  const [title, setTitle] = useState("")
+  const [prompt, setPrompt] = useState("")
+  const [baseBranch, setBaseBranch] = useState("")
+  const [model, setModel] = useState("")
+  const [projectId, setProjectId] = useState("")
+  // What the work starts from — a screenshot of the bug, a mockup, a spec (RFC 0022).
+  const draft = useAttachmentDraft()
+
+  const asksProject = projects !== undefined
+
+  function handleOpen(next: boolean) {
+    if (next) {
+      setTitle("")
+      setPrompt("")
+      setBaseBranch("")
+      setModel("")
+      setProjectId("")
+      draft.clear()
+    }
+    if (openProp === undefined) setLocalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    if (asksProject && !projectId) return
+    if (!prompt.trim()) return
+    onSubmit({
+      ...(asksProject ? { projectId } : {}),
+      prompt: prompt.trim(),
+      ...(title.trim() ? { title: title.trim() } : {}),
+      ...(baseBranch.trim() ? { baseBranch: baseBranch.trim() } : {}),
+      ...(model.trim() ? { model: model.trim() } : {}),
+      files: draft.files,
+    })
+  }
+
+  const branchPlaceholder = defaultBranch ? `${defaultBranch} (default)` : "Default branch"
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpen}>
+      {trigger !== null &&
+        (trigger !== undefined ? (
+          <DialogTrigger render={trigger as ReactElement} />
+        ) : (
+          <DialogTrigger render={<Button type="button" size="sm" variant={variant} className="shrink-0 gap-1.5" />}>
+            <SparklesIcon className="h-3.5 w-3.5" />
+            {label}
+          </DialogTrigger>
+        ))}
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New task</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="mt-1 flex flex-col gap-4">
+          {asksProject && (
+            <div className="flex flex-col gap-1.5">
+              <Label>Project</Label>
+              <Select
+                value={projectId || null}
+                onValueChange={(value) => {
+                  const next = (value as string | null) ?? ""
+                  setProjectId(next)
+                  // The branch list belongs to the previous project; keeping a pick would offer a
+                  // ref that does not exist on the new one.
+                  setBaseBranch("")
+                  if (next) onProjectChange?.(next)
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Pick a project…">
+                    {(value: unknown) => projects.find((p) => p.id === value)?.name ?? "Pick a project…"}
+                  </SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {projects.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-[11px] text-muted-foreground">Where the work happens: its repositories, its harness, its settings.</p>
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <Label>Prompt</Label>
+              {/* Spelled out here, unlike the composer's icon: a form has the room, and this is
+                  where someone describing a visual bug most wants to hand over the screenshot. */}
+              <AttachFileButton className="ml-auto" label="Attach files" onFiles={(files) => void draft.add(files)} />
+            </div>
+            <div {...draft.dropZone} className="relative flex flex-col gap-1.5">
+              {draft.draggingOver && <FileDropOverlay />}
+              <Textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                onPaste={draft.onPaste}
+                rows={6}
+                className="resize-y"
+                placeholder="What the agent should do, in as much detail as you'd give a teammate. Paste or drop a screenshot, a PDF, a CSV…"
+                required
+                autoFocus
+              />
+              <AttachmentDraftStrip draft={draft} />
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label>
+              Title <span className="font-normal text-muted-foreground/70">— optional</span>
+            </Label>
+            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Named by the agent" maxLength={200} />
+            <p className="text-[11px] text-muted-foreground">
+              Leave it empty and the task takes the name the agent gives the conversation. The branch keeps the name it was created
+              with.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label>Base branch</Label>
+            {branches.length > 0 ? (
+              <Combobox
+                value={baseBranch || null}
+                onValueChange={(value) => setBaseBranch((value as string | null) ?? "")}
+                inputValue={baseBranch}
+                onInputValueChange={(text, details) => {
+                  if (details.reason === "input-change") setBaseBranch(text)
+                }}
+              >
+                <ComboboxInput placeholder={branchPlaceholder} icon={<GitBranchIcon />} />
+                <ComboboxContent>
+                  <ComboboxList>
+                    <ComboboxEmpty>No such branch — it will be used as typed</ComboboxEmpty>
+                    {branches.map((b) => (
+                      <ComboboxItem key={b} value={b} icon={<GitBranchIcon />}>
+                        {b}
+                      </ComboboxItem>
+                    ))}
+                  </ComboboxList>
+                </ComboboxContent>
+              </Combobox>
+            ) : (
+              <div className="relative">
+                <GitBranchIcon className="absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                <Input value={baseBranch} onChange={(e) => setBaseBranch(e.target.value)} className="pl-8" placeholder={branchPlaceholder} />
+              </div>
+            )}
+            <p className="text-[11px] text-muted-foreground">Leave empty to start from the repositories&apos; default branch.</p>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label>Model</Label>
+            <Combobox
+              value={model || null}
+              onValueChange={(value) => setModel((value as string | null) ?? "")}
+              inputValue={model}
+              onInputValueChange={(text, details) => {
+                if (details.reason === "input-change") setModel(text)
+              }}
+            >
+              <ComboboxInput
+                placeholder={defaultModel ? `${defaultModel} (project default)` : "Harness default"}
+                icon={<PackageIcon />}
+                className="font-mono"
+              />
+              <ComboboxContent>
+                <ComboboxList>
+                  <ComboboxEmpty>Any model id your harness understands</ComboboxEmpty>
+                  {modelGroups.map((group) => (
+                    <ComboboxGroup key={group.id} heading={group.label}>
+                      {group.models.map((m) => (
+                        <ComboboxItem key={m.value} value={m.value} keywords={[m.label]} meta={m.label}>
+                          {m.value}
+                        </ComboboxItem>
+                      ))}
+                    </ComboboxGroup>
+                  ))}
+                </ComboboxList>
+              </ComboboxContent>
+            </Combobox>
+            <p className="text-[11px] text-muted-foreground">
+              Pick one, or type any model id your harness understands. Leave empty to use the project&apos;s default.
+            </p>
+          </div>
+
+          {error && <p className="text-xs text-destructive">{error}</p>}
+
+          <DialogFooter>
+            <Button type="button" variant="outline" size="sm" onClick={() => handleOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" className="gap-1.5" disabled={submitting || (asksProject && !projectId) || !prompt.trim()}>
+              <SparklesIcon className="h-3.5 w-3.5" />
+              {submitting ? "Delegating…" : "Delegate"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/tasks/pull-request.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import type { ReactNode } from "react"
+import {
+  CheckCircle2Icon,
+  CircleDotIcon,
+  CircleSlashIcon,
+  ExternalLinkIcon,
+  GitMergeIcon,
+  GitPullRequestDraftIcon,
+  GitPullRequestIcon,
+  Loader2Icon,
+  MessageSquareIcon,
+  TriangleAlertIcon,
+  XCircleIcon,
+} from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import { Badge } from "../badge"
+import type { TaskPullRequestData, TaskPullRequests } from "./types"
+
+/**
+ * What the forge says about the task's branch.
+ *
+ * The one thing on this screen the platform cannot read off the machine it started — a proposal
+ * lives at the forge, with the discussion, the CI and the approvals around it. Everything else
+ * here (the diff, the session, the machine) is observed; this is *reported*, by whichever app
+ * implements `git.pullRequestForBranch`.
+ *
+ * So the whole block is conditional on the answer, not on a provider id: `supported: false` means
+ * nothing connected can answer, and the section is **absent** rather than empty. That is the rule
+ * RFC 0024 asks for — read `operations`, never `if (provider === "github")` — and it is why this
+ * component names no forge anywhere in its markup.
+ *
+ * **It never moves the task.** A merged proposal does not mark the task `done`, and this
+ * deliberately does not offer an Accept button of its own: accepting is the project's command,
+ * run by the human who read the diff.
+ */
+
+type PullRequest = TaskPullRequestData
+
+/**
+ * Colours borrowed from the task states they mean the same thing as: merged is a `done`, closed
+ * a `failed`, open the flame that says "a human is expected here". A draft is muted on purpose —
+ * it is work someone has not yet asked to be looked at.
+ */
+const STATE_STYLES: Record<PullRequest["state"], { label: string; className: string }> = {
+  draft: { label: "Draft", className: "bg-muted text-muted-foreground border-border" },
+  open: { label: "Open", className: "bg-primary/15 text-primary border-primary/30" },
+  merged: { label: "Merged", className: "bg-green-500/15 text-green-700 dark:text-green-400 border-green-500/30" },
+  closed: { label: "Closed", className: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30" },
+}
+
+function StateIcon({ state }: { state: PullRequest["state"] }) {
+  if (state === "merged") return <GitMergeIcon className="h-3 w-3" />
+  if (state === "closed") return <XCircleIcon className="h-3 w-3" />
+  if (state === "draft") return <GitPullRequestDraftIcon className="h-3 w-3" />
+  return <GitPullRequestIcon className="h-3 w-3" />
+}
+
+/** A verdict and its colour — the same three-way vocabulary for checks and for review. */
+function Signal({
+  icon,
+  label,
+  tone,
+}: {
+  icon: ReactNode
+  label: string
+  tone: "good" | "bad" | "waiting"
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 text-[10px]",
+        tone === "good" && "text-green-700 dark:text-green-400",
+        tone === "bad" && "text-red-700 dark:text-red-400",
+        tone === "waiting" && "text-muted-foreground",
+      )}
+    >
+      {icon}
+      {label}
+    </span>
+  )
+}
+
+function Checks({ checks = null }: { checks?: PullRequest["checks"] }) {
+  // Null is not "passing": a repository with no CI has not passed anything, and drawing a green
+  // tick for it would be the panel's one outright lie.
+  if (checks === null) return null
+  if (checks === "passing") return <Signal icon={<CheckCircle2Icon className="h-3 w-3" />} label="Checks passing" tone="good" />
+  if (checks === "failing") return <Signal icon={<TriangleAlertIcon className="h-3 w-3" />} label="Checks failing" tone="bad" />
+  return <Signal icon={<Loader2Icon className="h-3 w-3 animate-spin" />} label="Checks running" tone="waiting" />
+}
+
+function Review({ review = null }: { review?: PullRequest["review"] }) {
+  if (review === null) return null
+  if (review === "approved") return <Signal icon={<CheckCircle2Icon className="h-3 w-3" />} label="Approved" tone="good" />
+  if (review === "changes-requested")
+    return <Signal icon={<CircleSlashIcon className="h-3 w-3" />} label="Changes requested" tone="bad" />
+  return <Signal icon={<CircleDotIcon className="h-3 w-3" />} label="Review requested" tone="waiting" />
+}
+
+function PullRequestCard({ repo, pr, showRepo }: { repo: string; pr: PullRequest; showRepo: boolean }) {
+  const style = STATE_STYLES[pr.state] ?? STATE_STYLES.open
+  return (
+    <a
+      href={pr.url}
+      target="_blank"
+      rel="noreferrer"
+      className="group block rounded-md border border-border/60 bg-background/60 px-2.5 py-2 transition-colors hover:border-border hover:bg-muted/40"
+    >
+      <div className="flex items-center gap-1.5">
+        <Badge variant="outline" className={cn("h-5 shrink-0 gap-1 px-1.5 text-[10px]", style.className)}>
+          <StateIcon state={pr.state} />
+          {style.label}
+        </Badge>
+        <span className="shrink-0 font-mono text-[11px] text-muted-foreground">{pr.label}</span>
+        <ExternalLinkIcon className="ml-auto h-3 w-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+      </div>
+      {/* The title is the proposal's own, not the task's: an agent that renamed its work on the
+          way out is telling the reviewer something, and echoing the task title would hide it. */}
+      <p className="mt-1.5 line-clamp-2 text-xs leading-snug">{pr.title}</p>
+      {showRepo && <p className="mt-1 truncate font-mono text-[10px] text-muted-foreground">{repo}</p>}
+      {(pr.checks || pr.review || pr.comments) && (
+        <div className="mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-1">
+          <Checks checks={pr.checks} />
+          <Review review={pr.review} />
+          {!!pr.comments && (
+            <Signal icon={<MessageSquareIcon className="h-3 w-3" />} label={String(pr.comments)} tone="waiting" />
+          )}
+        </div>
+      )}
+      {pr.updatedAt && (
+        <p className="mt-1.5 text-[10px] text-muted-foreground">Updated {formatRelativeTime(pr.updatedAt)}</p>
+      )}
+    </a>
+  )
+}
+
+/**
+ * The proposals open for the task's branch, one card per repository that has one. Render it only
+ * when `data.supported` — the cockpit's details panel does exactly that.
+ */
+export function TaskPullRequest({ data }: { data: TaskPullRequests }) {
+  const withProposal = data.repos.filter((r) => r.pullRequest)
+  const failed = data.repos.filter((r) => r.error)
+
+  if (withProposal.length === 0) {
+    return (
+      <p className="text-[11px] leading-relaxed text-muted-foreground">
+        {failed.length > 0
+          ? failed.map((r) => r.error).join(" · ")
+          : // Said plainly, because it is the normal state of a task that has not pushed yet —
+            // not a failure, and not something the reader has to do anything about.
+            "No pull request for this branch yet."}
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-1.5">
+      {withProposal.map((row) => (
+        <PullRequestCard
+          key={row.repo}
+          repo={row.repo}
+          pr={row.pullRequest!}
+          // Named only when there is more than one — on the single-repository project that most
+          // are, the repo name is the project's name repeated under every card.
+          showRepo={data.repos.length > 1}
+        />
+      ))}
+      {failed.map((row) => (
+        <p key={row.repo} className="text-[10px] text-muted-foreground">
+          {row.repo}: {row.error}
+        </p>
+      ))}
+    </div>
+  )
+}

package/src/components/tasks/session-usage.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "../../utils"
+import type { TaskSessionUsageData } from "./types"
+
+/**
+ * What a session has consumed — the accounting panel of the task cockpit.
+ *
+ * The timeline answers "what is it doing?"; this answers the three questions that come right
+ * after, and that a running session is otherwise silent about: **how full is its context**, how
+ * many tokens it has burned, and what that has cost. They are facts *about* the session rather
+ * than moments in it, which is why they live in the sidebar and not on the rail (see
+ * `event-stream.tsx`).
+ *
+ * Context gets the meter and everything else gets a line of text, because context is the only
+ * number here with a ceiling — it is the one that predicts something (a compaction, a session
+ * running out of room), where tokens and dollars only ever count up.
+ *
+ * Every value is the API's (Spunto: `GET .../tasks/{id}/events` → `usage`), derived from the whole event
+ * log rather than from the page the timeline happens to hold. Nothing is computed here beyond
+ * formatting — in particular not cost, which is the harness's own number.
+ */
+
+
+/** `41.2k`, `1.4M`, `1M` — a token count is read as an order of magnitude, never digit by digit. */
+export function formatTokens(value: number): string {
+  if (value < 1_000) return String(Math.round(value))
+  if (value < 1_000_000) {
+    const k = value / 1_000
+    return `${trim(k >= 100 ? Math.round(k) : k.toFixed(1))}k`
+  }
+  return `${trim((value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1))}M`
+}
+
+/** `1.0M` is a window, `1M` is the window — the decimal only earns its place when it says something. */
+function trim(value: string | number): string {
+  return String(value).replace(/\.0$/, "")
+}
+
+/**
+ * Cheap sessions are the common case and `$0.00` would say nothing, so the small end keeps four
+ * decimals; past a cent, two are what anyone reads.
+ */
+export function formatCost(value: number): string {
+  return value >= 0.01 ? `$${value.toFixed(2)}` : `$${value.toFixed(4)}`
+}
+
+/** `21s`, `8m 30s`, `49m`, `1h 12m` — the smaller unit is dropped when it is zero. */
+function formatSessionDuration(ms: number): string {
+  const s = Math.round(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  if (m < 60) return s % 60 === 0 ? `${m}m` : `${m}m ${s % 60}s`
+  return m % 60 === 0 ? `${Math.floor(m / 60)}h` : `${Math.floor(m / 60)}h ${m % 60}m`
+}
+
+/** The model, without the harness's own decorations — `claude-opus-5[1m]` reads as the model. */
+function shortModel(model: string): string {
+  return model.replace(/^claude-/, "").replace(/-\d{8}$/, "")
+}
+
+function Line({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3">
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <span className="font-mono text-[11px] tabular-nums">{children}</span>
+    </div>
+  )
+}
+
+/** The context meter. Drawn only when the window is known — see `contextWindowOf` in the API. */
+function ContextMeter({ used, window: size }: { used: number; window: number | null }) {
+  const pct = size ? Math.min(100, Math.round((used / size) * 100)) : null
+  // Same thresholds and the same warm ramp as the node gauges (the dashboard's node gauges): a
+  // meter filling up means the same thing everywhere in the product.
+  const tone = pct === null ? null : pct > 90 ? "critical" : pct > 75 ? "warning" : null
+  const barColor =
+    tone === "critical"
+      ? "var(--destructive)"
+      : tone === "warning"
+        ? "var(--color-amber-500, #f59e0b)"
+        : "color-mix(in oklch, var(--ship) 80%, var(--build))"
+  return (
+    <div>
+      <div className="flex items-baseline justify-between gap-3">
+        <span className="text-[11px] text-muted-foreground">Context</span>
+        <span
+          className={cn(
+            "font-mono text-[11px] tabular-nums",
+            tone === "critical" && "font-semibold text-destructive",
+            tone === "warning" && "font-semibold text-amber-600 dark:text-amber-400",
+          )}
+        >
+          {formatTokens(used)}
+          {size ? ` / ${formatTokens(size)}` : ""}
+          {pct !== null ? ` · ${pct}%` : ""}
+        </span>
+      </div>
+      {pct !== null && (
+        <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-muted">
+          <div
+            className="h-full rounded-full transition-[width] duration-500"
+            style={{ width: `${pct}%`, background: barColor }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Never rounds up to 100 while a single token was still paid for: a session whose cache ratio
+ * reads "100% cached" is claiming it cost nothing to send, and on a long session the fresh part
+ * is always a rounding error away from disappearing.
+ */
+function cachedShare(cached: number, sent: number): number {
+  if (cached >= sent) return 100
+  return Math.min(99, Math.round((cached / sent) * 100))
+}
+
+export function TaskSessionUsage({ usage, className }: { usage: TaskSessionUsageData; className?: string }) {
+  const { contextTokens = null, contextWindow = null, inputTokens = null, outputTokens = null, cacheReadTokens = null, cacheCreationTokens = null } = usage
+  const costUsd = usage.costUsd ?? null
+  const turns = usage.turns ?? null
+  const durationMs = usage.durationMs ?? null
+  const cached = (cacheReadTokens ?? 0) + (cacheCreationTokens ?? 0)
+  // What the session sent, all of it — the split between fresh and cached input is the next line
+  // down, because "how much did it read" and "how much did it pay full price for" are different
+  // questions and only the first one is asked first.
+  const sent = (inputTokens ?? 0) + cached
+
+  return (
+    <div className={cn("space-y-2.5", className)}>
+      {contextTokens !== null && <ContextMeter used={contextTokens} window={contextWindow} />}
+
+      <div className="space-y-1">
+        {sent > 0 && (
+          <Line label="Sent">
+            {formatTokens(sent)}
+            {cached > 0 && <span className="text-muted-foreground"> · {cachedShare(cached, sent)}% cached</span>}
+          </Line>
+        )}
+        {outputTokens !== null && outputTokens > 0 && <Line label="Generated">{formatTokens(outputTokens)}</Line>}
+        {costUsd !== null && <Line label="Cost">{formatCost(costUsd)}</Line>}
+        {(turns !== null || durationMs !== null) && (
+          <Line label="Turns">
+            {[
+              turns !== null ? String(turns) : null,
+              durationMs !== null ? formatSessionDuration(durationMs) : null,
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+          </Line>
+        )}
+        {usage.model && (
+          <Line label="Model">
+            <span className="text-muted-foreground">{shortModel(usage.model)}</span>
+          </Line>
+        )}
+      </div>
+    </div>
+  )
+}