@workerdeck/ui 0.15.0 → 0.16.0

package/build/index.d.mts

@@ -1,5 +1,5 @@
-import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-ljc3lKpA.mjs";
-import { _ as PermissionModeSelectProps, a as SessionVitals, c as TranscriptFont, d as useTranscriptDensity, f as useTranscriptVariant, g as PermissionModeSelect, h as PermissionModeMeta, i as SessionSurfacePanel, l as TranscriptVariant, m as PermissionModeChoice, n as SessionPanel, o as TranscriptDensity, p as PERMISSION_MODES, r as SessionPanelProps, s as TranscriptDensityProvider, t as SessionControls, u as TranscriptVariantProvider, v as permissionModeChoices, y as permissionModeMeta } from "./SessionPanel-J2U8v88q.mjs";
+import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-DfI_je9S.mjs";
+import { C as permissionModeChoices, S as PermissionModeSelectProps, _ as useAffordances, a as SessionVitals, b as PermissionModeMeta, c as TranscriptDensityProvider, d as TranscriptVariantProvider, f as useTranscriptDensity, g as WithActions, h as TerminalAffordances, i as SessionSurfacePanel, l as TranscriptFont, m as CopyAction, n as SessionPanel, o as TerminalMetrics, p as useTranscriptVariant, r as SessionPanelProps, s as TranscriptDensity, t as SessionControls, u as TranscriptVariant, v as PERMISSION_MODES, w as permissionModeMeta, x as PermissionModeSelect, y as PermissionModeChoice } from "./SessionPanel-B9CHoq8x.mjs";
 import * as _$react from "react";
 import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode, Ref, RefObject, TextareaHTMLAttributes } from "react";
 import { VariantProps } from "class-variance-authority";
@@ -15,7 +15,7 @@ import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import * as _$_base_ui_react_tooltip0 from "@base-ui/react/tooltip";
 import { Tooltip } from "@base-ui/react/tooltip";
 import { toast } from "sonner";
-import { ContextUsage, ModelOption, PermissionRequest, ProfileEngine, QuestionBehavior, RateLimitInfo, SessionInfo, SessionRow, SessionStatus, SkillInfo, SlashCommandInfo, UserQuestion, ViewConfig, WorkspaceScope } from "@workerdeck/protocol";
+import { ContextUsage, FilePatch, ModelOption, PermissionRequest, ProfileEngine, QuestionBehavior, RateLimitInfo, SessionInfo, SessionRow, SessionStatus, SkillInfo, SlashCommandInfo, UsageWindowRow, UserQuestion, ViewConfig, WorkspaceScope } from "@workerdeck/protocol";
 import { ConnectionState, TranscriptItem, TranscriptState, UseAttachmentsResult } from "@workerdeck/react";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 import { WorkerDeckClient } from "@workerdeck/client";
@@ -758,6 +758,91 @@ declare function isSegmentsEmpty(segments: Segment[]): boolean;
 /** Extracts chips matching a specific trigger character. */
 declare function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[];
 //#endregion
+//#region src/components/terminal/row.d.ts
+/**
+ * The primitives every terminal row is built from.
+ *
+ * There are three, and that is the whole vocabulary: a {@link Row} (a gutter
+ * cell and a body cell), a {@link Blank} (one empty line), and a {@link Band} (a
+ * run of rows carrying a full-bleed background). Anything the theme draws — a
+ * message, a tool call, a diff hunk, an approval prompt — is some arrangement of
+ * those, which is what keeps the grid a property of the renderer rather than a
+ * thing each component re-derives.
+ *
+ * Geometry is in `styles/terminal.css`. These components choose a class, a
+ * marker and a tone; they never carry a measurement.
+ */
+/** The palette, as a name. See the `[data-tone]` rules in `terminal.css`. */
+type Tone = 'fg' | 'bright' | 'dim' | 'faint' | 'mark' | 'blue' | 'green' | 'red' | 'yellow' | 'magenta';
+interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * What sits in the gutter — `●`, `⎿`, `>`, a list bullet, or nothing. Kept to
+   * the width of the gutter (`--term-cell`, two columns by default): a wider
+   * marker would push its own body off the column every other row starts on.
+   * Omitted, the gutter is still drawn as empty space, so an unmarked row's
+   * text lines up with a marked one's.
+   */
+  glyph?: ReactNode;
+  /** The marker's colour. Defaults to dim — the marker is structure, not content. */
+  glyphTone?: Tone;
+  /** The body's colour. */
+  tone?: Tone;
+  bold?: boolean;
+  /** Indent levels, one character cell each. A child row's marker then sits
+   * exactly under its parent row's first letter. */
+  indent?: 0 | 1 | 2 | 3;
+  /**
+   * Gutter width in columns, when the marker needs other than two — an ordered
+   * list's `10.` is four, a prompt's `❯ 1.` is five, and a framed payload wants
+   * `0`. Changes only this row's split, so the body still starts on a whole
+   * column.
+   */
+  columns?: number;
+  children?: ReactNode;
+}
+declare function Row({
+  glyph,
+  glyphTone,
+  tone,
+  bold,
+  indent,
+  columns,
+  className,
+  children,
+  style,
+  ...props
+}: RowProps): _$react.JSX.Element;
+/**
+ * One empty line — the theme's only vertical spacing.
+ *
+ * A terminal separates blocks with a blank line, not with padding, and saying it
+ * that way has a practical payoff: spacing is part of the row list, so it can be
+ * decided by whoever knows whether two blocks belong together (a tool call and
+ * its output do not get one; two assistant turns do), instead of by a margin
+ * rule that cannot tell them apart.
+ */
+declare function Blank(): _$react.JSX.Element;
+/**
+ * A run of rows under a background: a code block, a command's output, a diff
+ * hunk. Full-bleed — the wash reaches the scroller's edges, because in a
+ * terminal the line is the full width of the screen. See `--term-bleed` on
+ * {@link TerminalSurface}.
+ */
+declare function Band({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): _$react.JSX.Element;
+/** Inline colour/weight inside a row's body. */
+declare function Ink({
+  tone,
+  bold,
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement> & {
+  tone?: Tone;
+  bold?: boolean;
+}): _$react.JSX.Element;
+//#endregion
 //#region src/components/agent/Transcript.d.ts
 interface TranscriptProps {
   state: TranscriptState;
@@ -775,9 +860,9 @@ interface TranscriptProps {
    * on the host (codex's `image_gen`). Omit and those cards name the path. */
   hostImage?: (path: string) => Promise<string | undefined>;
   /**
-   * How a turn is drawn: `cards` (default, the chat convention) or `lines` —
-   * full-width transparent line items with a gutter glyph, for hosts where
-   * vertical space is scarce. See {@link TranscriptVariant}.
+   * How a turn is drawn: `cards` (default, the chat convention) or `terminal`,
+   * which is not a set of branches in these components but its own renderer.
+   * See {@link TranscriptVariant}.
    */
   variant?: TranscriptVariant;
   /**
@@ -786,6 +871,42 @@ interface TranscriptProps {
    * {@link TranscriptVariant}. See {@link TranscriptDensity}.
    */
   density?: TranscriptDensity;
+  /** Terminal theme only: the character cell, in whole pixels. See
+   * {@link TerminalSurface}. */
+  fontSize?: number;
+  lineHeight?: number;
+  /** Terminal theme only: the pointer affordances a real terminal cannot offer.
+   * `false` for none. See {@link TerminalAffordances}. */
+  affordances?: TerminalAffordances | boolean;
+  /** Terminal theme only: hold the prompt of the turn being read at the top of
+   * the scroller. The *real* row is pinned, not a copy — see `TranscriptRows`. */
+  stickyPrompt?: boolean;
+  /**
+   * Terminal theme only: mount the overview-ruler scrubber — a 2ch rail of
+   * marks (your prompts, each turn's response and result as one mark, errors,
+   * the pending approval, the catch-up boundary) that replaces the native
+   * scrollbar. Ignored under `cards`: the rail's positions ride the height
+   * calculator, which has no claim there. With `affordances={false}` the rail
+   * degrades to passive paint — no drag, peek or click — and the native
+   * scrollbar stays. See {@link TerminalScrubber}.
+   */
+  scrubber?: boolean;
+  /**
+   * Bookmarked item indices, painted as full-width marks on the rail. Paint
+   * only, deliberately: the store — and the affordance that writes it — is
+   * the client's, the way the unread watermarks are, not the panel's.
+   */
+  scrubberMarks?: readonly number[];
+  /**
+   * The attach replay is still landing (`useClaudeSession().replaying`): rows
+   * render, measure and pin exactly as normal but nothing paints, and a loading
+   * line shows in their place; when it flips false the settled tail appears in
+   * one frame. Hiding is by *visibility*, never by not mounting — see the
+   * comment at the render site. Optional: an embedder that never passes it
+   * gets today's behaviour, and a short or empty session holds for no visible
+   * time at all (the frame between attach and replay-complete).
+   */
+  replaying?: boolean;
   /**
    * Catch-up: `from` is how many items had been seen last time, `since` when
    * that was. A recap row is drawn at that boundary and everything above it is
@@ -804,6 +925,14 @@ interface TranscriptProps {
    * catch-up strip never touch it. `null` while no transcript is mounted.
    */
   jumpToRecapRef?: RefObject<(() => void) | null>;
+  /**
+   * Filled with a closure that re-pins the transcript to the bottom, so a host
+   * can resume following after the reader has scrolled away. The panel presses
+   * it on send: choosing to say something is choosing to watch what happens
+   * next, and a transcript left parked where you were reading makes a sent
+   * message look like it did nothing at all.
+   */
+  repinRef?: RefObject<(() => void) | null>;
   className?: string;
 }
 declare function Transcript({
@@ -814,29 +943,234 @@ declare function Transcript({
   hostImage,
   variant,
   density,
+  fontSize,
+  lineHeight,
+  affordances,
+  stickyPrompt,
+  scrubber,
+  scrubberMarks,
+  replaying,
   catchUp,
   jumpToRecapRef,
+  repinRef,
   className
 }: TranscriptProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/terminal/surface.d.ts
+/**
+ * The root of the terminal theme: the element that establishes the character
+ * cell every row inside it lands on.
+ *
+ * It exists as a component rather than a class because the cell has to be *set*
+ * somewhere — the font, the size and the line height together are what make
+ * `1ch` mean one column and `--term-line` mean one row — and because that is the
+ * one place a host is allowed to change the metrics. Everything below this
+ * element measures itself in those two units and never in pixels.
+ *
+ * The geometry and the palette live in `styles/terminal.css`; this only names
+ * the element and hands down the two numbers.
+ */
+interface TerminalSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Cell size in **whole pixels**. Fractional values put every other row on a
+   * half-pixel: text softens and the diff bands show a seam, which is exactly
+   * what a grid renderer must not do. Defaults (13/18) are the CLI's own.
+   */
+  fontSize?: number;
+  lineHeight?: number;
+  /**
+   * How far a full-bleed band reaches past the content edge — normally the
+   * scroller's own horizontal padding. A band cancels it with matched negative
+   * margin and padding, so a diff hunk's wash runs to the viewport edge the way
+   * a terminal's line does, instead of stopping at a gutter.
+   */
+  bleed?: string;
+  /**
+   * The things a real terminal cannot do — the pointer hover fill, the
+   * hover-revealed copy actions. `false` turns them all off, an object picks.
+   * Default: all on. See {@link TerminalAffordances}; none of them costs layout,
+   * so switching them off changes no glyph's position.
+   */
+  affordances?: TerminalAffordances | boolean;
+}
+declare function TerminalSurface({
+  fontSize,
+  lineHeight,
+  bleed,
+  affordances,
+  className,
+  style,
+  children,
+  ...props
+}: TerminalSurfaceProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/TerminalTranscript.d.ts
+/**
+ * The transcript, drawn as a terminal.
+ *
+ * The whole of the layout is here and it is four lines long, which is the point:
+ * items become row blocks, a blank line goes between blocks that do not belong
+ * together, and the working line is one more row at the end. There is no gap
+ * scale, no density knob and no variant branch — a terminal has one line height
+ * and one type size, and everything the theme can express is expressed in which
+ * rows exist and what marker each carries.
+ *
+ * Not virtualized yet: the row blocks are the part that has to be right first,
+ * and the existing `Transcript` already owns a hard-won virtualizer plus the
+ * scroll-regime rules it needs. This renders into that shell when the rows are
+ * settled, rather than growing a second copy of that logic.
+ */
+interface TerminalTranscriptProps {
+  state: TranscriptState;
+  /** Builds the download URL for a delivered file. */
+  fileUrl?: (path: string) => string;
+  /** Cell metrics, in whole pixels. See {@link TerminalSurface}. */
+  fontSize?: number;
+  lineHeight?: number;
+  /** The pointer affordances a real terminal has no way to offer — hover fill,
+   * hover-revealed copy. `false` for none. See {@link TerminalAffordances}. */
+  affordances?: TerminalAffordances | boolean;
+  className?: string;
+}
+/**
+ * One transcript item as terminal rows. Exported because the virtualized shell
+ * in `agent/Transcript.tsx` renders rows through it: the theme owns how a row
+ * looks, that component owns which rows are mounted, and neither needs a copy
+ * of the other.
+ */
+declare function TerminalItemView({
+  item,
+  fileUrl
+}: {
+  item: TranscriptItem;
+  fileUrl?: (path: string) => string;
+}): _$react.JSX.Element | null;
+declare function TerminalTranscript({
+  state,
+  fileUrl,
+  fontSize,
+  lineHeight,
+  affordances,
+  className
+}: TerminalTranscriptProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/StatusLine.d.ts
+interface TerminalStatusLineProps {
+  state: TranscriptState;
+  /** Plan windows to read from, when they should not be the session's own — the
+   * gateway's per-profile state merged over this transcript's. See
+   * {@link StatusBarProps.rateLimits}. Absent = `state.rateLimits`. */
+  rateLimits?: Record<string, RateLimitInfo>;
+  /** How the client is doing at reaching the gateway. Wins the status slot when
+   * the socket is down — see above. */
+  connection?: ConnectionState;
+  /** Opens the panel that answers each reading's own question. Omit and the
+   * reading is text rather than something to press. */
+  onOpenStatus?: () => void;
+  onOpenContext?: () => void;
+  onOpenUsage?: () => void;
+}
+declare function TerminalStatusLine({
+  state,
+  rateLimits,
+  connection,
+  onOpenStatus,
+  onOpenContext,
+  onOpenUsage
+}: TerminalStatusLineProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/PermissionPrompt.d.ts
+/**
+ * The approval, as the CLI draws it: a rule, what is being asked and about what,
+ * the change itself, a dashed rule, the question, numbered answers, and the keys.
+ *
+ * Two things it does that the card version does not, both taken from the CLI:
+ *
+ * - **It shows the change, not the payload.** For a file edit, `old_string` and
+ *   `new_string` are a diff — so it renders one, rather than the JSON input a
+ *   reader would have to diff in their head. Without line numbers, necessarily:
+ *   the edit has not happened and this client has never read the file (see
+ *   {@link previewPatch}). Everything else falls back to the input.
+ * - **The heading is the engine's own sentence.** `displayName` ("Edit file")
+ *   over `title`, never "wants to use {tool}" composed here — for codex an
+ *   approval is an *escalation after a sandbox refusal*, and the runner has
+ *   already written the sentence that says so.
+ */
+interface TerminalPermissionPromptProps {
+  request: PermissionRequest;
+  onApprove: (requestId: string) => void;
+  /** `message` is fed back to the agent, which can then try something else;
+   * `interrupt` also stops the turn. */
+  onDeny: (requestId: string, message?: string, interrupt?: boolean) => void;
+}
+declare function TerminalPermissionPrompt({
+  request,
+  onApprove,
+  onDeny
+}: TerminalPermissionPromptProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/QuestionPrompt.d.ts
+interface TerminalQuestionPromptProps {
+  /** A pending permission whose toolName is 'AskUserQuestion'. */
+  request: PermissionRequest;
+  /** Allow the tool with `updatedInput` (the original input plus `answers`). */
+  onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void;
+  /** Deny the tool — the model proceeds without an answer. */
+  onDismiss: (requestId: string, message?: string) => void;
+}
+declare function TerminalQuestionPrompt({
+  request,
+  onAnswer,
+  onDismiss
+}: TerminalQuestionPromptProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/diff.d.ts
+/**
+ * A patch for a change that has **not happened yet** — an approval prompt's
+ * `Edit`, where the input names the old and new text but no line numbers exist
+ * because the edit has not been applied and this client has never read the file.
+ *
+ * `newStart: 0` is how it says so, and {@link TerminalDiff} reads that back: a
+ * diff whose hunks all start at zero renders without a number column rather than
+ * printing a column of zeroes or inventing an offset.
+ */
+declare function previewPatch(input: unknown): FilePatch | undefined;
+declare function TerminalDiff({
+  patch
+}: {
+  patch: FilePatch;
+}): _$react.JSX.Element;
+//#endregion
+//#region src/components/terminal/markdown.d.ts
+interface TerminalMarkdownProps {
+  children: string;
+  /** Streaming text: tolerate half-written markdown (unclosed fences, half links). */
+  streaming?: boolean;
+  className?: string;
+}
+declare const TerminalMarkdown: _$react.MemoExoticComponent<({
+  children,
+  streaming,
+  className
+}: TerminalMarkdownProps) => _$react.JSX.Element>;
+//#endregion
 //#region src/components/agent/Conversation.d.ts
 interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode;
-  /**
-   * How the view follows content that grows. `'smooth'` is right for a live
-   * turn — the text scrolls as it is written. `'instant'` is right while a
-   * transcript is *filling* (an attach replaying a whole session), where
-   * animating each arrival makes opening a session a several-second journey
-   * from its first row to its last.
-   */
-  resize?: 'smooth' | 'instant';
 }
 /** Scroll container that stays pinned to the bottom while streaming, unless the user
- * scrolls up — plus a floating scroll-to-bottom button. */
+ * scrolls up — plus a floating scroll-to-bottom button.
+ *
+ * **Nothing here animates its scroll position.** `initial` and `resize` are both
+ * `'instant'` and are no longer configurable: the follow spring's job is to
+ * *stay* at the bottom, not to travel there, and every travel a reader has ever
+ * complained about on this surface was an animation we asked for. The `resize`
+ * prop used to exist so a caller could pick, which required the caller to know
+ * whether the transcript was streaming or replaying — a latch's worth of
+ * machinery to decide something that has one right answer. */
 declare function Conversation({
   className,
   children,
-  resize,
   ...props
 }: ConversationProps): _$react.JSX.Element;
 declare function ConversationContent({
@@ -866,10 +1200,8 @@ interface MessageProps extends HTMLAttributes<HTMLDivElement> {
  * column separates a prompt from the reply it produced. The bubble alone is
  * enough to say who spoke.
  *
- * `lines`: both are left-aligned full-width line items behind a gutter glyph —
- * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
- * already distinguishable by its marker, and the bubble's padding is vertical
- * space the terminal treatment refuses to spend.
+ * The terminal theme draws none of this: it is its own renderer
+ * (`components/terminal/`) and mounts instead of these rows.
  */
 declare function Message({
   from,
@@ -919,24 +1251,25 @@ interface LoaderProps {
   /** Overrides the cycling verb — for a state that has one true name
    * ("Starting session…"). */
   label?: string;
-  /** When the current run began, for the elapsed clock. Absent = no clock. */
+  /** When the current run began, for the elapsed clock. Absent = no clock.
+   * Unused by the card treatment; kept so the `cards` and `terminal` loaders
+   * take the same call site in `Transcript`. */
   startedAt?: number;
-  /** Context tokens in play, shown beside the clock. */
+  /** Context tokens in play. Same story as `startedAt`. */
   tokens?: number;
   className?: string;
 }
 /**
  * "The agent is working and hasn't produced output yet."
  *
- * `lines`: a terminal working line — the mark's own pulse in the gutter (see
- * `pulse.tsx`), a verb, and the readings that answer "should I still be
- * waiting?" in one parenthesis. `cards`: the three-dot pulse, unchanged — the
- * dashboard's loader is not a gutter glyph and has no column to pulse in.
+ * Three dots pulsing in CSS — the chat convention, for the `cards` variant. The
+ * terminal theme has its own working line (`terminal/items.tsx`'s `WorkingRow`,
+ * with the mark's pulse in the gutter and the run's readings beside the verb),
+ * because there it is a *row of the transcript* rather than a spinner floating
+ * over one.
  */
 declare function Loader({
   label,
-  startedAt,
-  tokens,
   className
 }: LoaderProps): _$react.JSX.Element;
 //#endregion
@@ -1091,6 +1424,19 @@ interface ComposerProps {
    * empty composer would otherwise spend two rows saying nothing.
    */
   layout?: 'stacked' | 'inline';
+  /**
+   * Terminal theme only: the cell the composer draws on. Passed straight
+   * through to its own {@link TerminalSurface}, and it has to be passed — the
+   * composer sits outside the transcript's scroller, so it establishes a second
+   * surface, and a surface handed no metrics falls back to the 13/18 default. A
+   * host running the transcript at its editor's size and the composer at the
+   * default would have the caret land on a different column from the text above
+   * it, which is the one thing this theme exists to prevent.
+   */
+  fontSize?: number;
+  lineHeight?: number;
+  /** Terminal theme only; see {@link TerminalAffordances}. */
+  affordances?: TerminalAffordances | boolean;
   className?: string;
   ref?: Ref<ComposerHandle>;
 }
@@ -1141,6 +1487,9 @@ declare function Composer({
   attachments,
   toolbar,
   layout,
+  fontSize,
+  lineHeight,
+  affordances,
   className,
   ref
 }: ComposerProps): _$react.JSX.Element;
@@ -1175,6 +1524,15 @@ declare function ModelSelect({
 //#region src/components/agent/StatusBar.d.ts
 interface StatusBarProps {
   state: TranscriptState;
+  /**
+   * Plan windows to draw, when they should not be the session's own. The panel
+   * hands over the gateway's per-profile state merged over this transcript's
+   * reading (`mergeUsage`): a session's own `rate_limit` readings arrive only at
+   * a turn's edges, so one idle since yesterday would otherwise render
+   * yesterday's number as current. Absent = `state.rateLimits`, which is what a
+   * bar composed by hand outside the panel gets.
+   */
+  rateLimits?: Record<string, RateLimitInfo>;
   /** @deprecated Pass {@link StatusBarProps.connection}; kept so an embedder
    * still handing over a boolean keeps working. */
   connected?: boolean;
@@ -1207,6 +1565,7 @@ interface StatusBarProps {
 }
 declare function StatusBar({
   state,
+  rateLimits,
   connected,
   connection,
   onOpenStatus,
@@ -1239,31 +1598,31 @@ declare function ContextDialog({
 //#endregion
 //#region src/components/agent/UsageDialog.d.ts
 interface UsageDialogProps {
-  /** Windows in reading order — session, weekly, then per-model weeklies. */
-  rateLimits: Array<{
-    key: string;
-    info: RateLimitInfo;
-  }>;
+  /**
+   * Windows in reading order — session, weekly, then per-model weeklies.
+   *
+   * `updatedAt`/`inferredReset` ride each window because the readings no longer
+   * share one clock: the panel merges the gateway's per-profile state over this
+   * session's, so a `five_hour` learned from a sibling session two minutes ago
+   * can sit beside a `seven_day` this session last heard about yesterday.
+   * `inferredReset` marks the ones the *gateway* zeroed because their own reset
+   * time passed with nothing newer — a floor, not a report.
+   */
+  rateLimits: UsageWindowRow[];
   /** claude.ai plan behind the windows ('max', 'pro', …), when there is one. */
   subscriptionType?: string;
   engine: ProfileEngine;
   totalCostUsd: number;
-  /** Local receipt time of the last window update. `rate_limit` events are one
-   * per turn at best, so a stale reading is normal and worth saying out loud. */
+  /** When the *freshest* of the windows was read, for the footer line. Readings
+   * arrive one per turn at best (and for an idle session, not at all), so a
+   * stale one is normal and worth saying out loud. */
   updatedAt?: number;
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
 /**
- * The plan's rate-limit windows, spelled out: how much of each is used, how that
- * compares to the pace that would spend the window exactly, and when it resets.
- *
- * The pace marker is the point. A bar alone says "17% used", which is only
- * alarming or reassuring once you know how far into the week you are — so every
- * window draws a tick at the elapsed share of its duration. Left of the tick is
- * under budget, right of it is ahead of it. The duration comes from the window
- * key (5h, 7d) because the CLI reports a reset time and a percentage and never a
- * duration; a window whose key doesn't say gets no marker rather than a guessed one.
+ * The session's view of the plan: every window as a meter (see
+ * {@link UsageMeters}), the plan tier, and what this session itself has cost.
  */
 declare function UsageDialog({
   rateLimits,
@@ -1275,6 +1634,44 @@ declare function UsageDialog({
   onOpenChange
 }: UsageDialogProps): _$react.JSX.Element;
 //#endregion
+//#region src/components/agent/UsageMeters.d.ts
+/**
+ * Ticking clock — the countdowns and the pace markers both move with it, and a
+ * minute is the finest resolution either of them prints.
+ *
+ * `active` is what a dialog passes its `open`: a closed panel's clock is a timer
+ * re-rendering something nobody can see.
+ */
+declare function useMinuteClock(active?: boolean): number;
+/**
+ * The plan's rate-limit windows, spelled out: how much of each is used, how that
+ * compares to the pace that would spend the window exactly, and when it resets.
+ *
+ * The pace marker is the point. A bar alone says "17% used", which is only
+ * alarming or reassuring once you know how far into the week you are — so every
+ * window draws a tick at the elapsed share of its duration. Left of the tick is
+ * under budget, right of it is ahead of it. The duration comes from the window
+ * key (5h, 7d) because the engine reports a reset time and a percentage and
+ * never a duration; a window whose key doesn't say gets no marker rather than a
+ * guessed one.
+ *
+ * Its own component rather than the Usage dialog's private helper because two
+ * surfaces draw these now — the session panel's Usage panel, from the session's
+ * readings merged with the gateway's, and the dashboard's profile page, straight
+ * off `ProfileInfo.usage` with no session in sight. Same account, same bars.
+ */
+declare function UsageMeters({
+  windows,
+  now,
+  className
+}: {
+  /** In reading order — protocol's `orderUsageWindows`. */windows: UsageWindowRow[];
+  /** A shared clock, when the caller already ticks one. Omitted, this ticks its
+   * own for as long as it is mounted. */
+  now?: number;
+  className?: string;
+}): _$react.JSX.Element;
+//#endregion
 //#region src/components/agent/SessionInfoDialog.d.ts
 interface SessionInfoDialogProps {
   state: TranscriptState;
@@ -1622,5 +2019,5 @@ declare function toolIcon(toolName: string): LucideIcon;
  */
 declare function isMutatingTool(toolName: string): boolean;
 //#endregion
-export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerFileMatch, type ComposerHandle, type ComposerProps, ContextDialog, type ContextDialogProps, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, type FileCardProps, type FileDeliveredItem, HostFilesDialog, type HostFilesDialogProps, Input, Loader, McpDialog, type McpDialogProps, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, type MessageProps, ModelSelect, type ModelSelectProps, PERMISSION_MODES, type PermissionModeChoice, type PermissionModeMeta, PermissionModeSelect, type PermissionModeSelectProps, PermissionPrompt, type PermissionPromptProps, ProgressRing, type ProgressRingProps, PromptArea, type PromptAreaHandle, type PromptAreaProps, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, type SessionBrowserProps, type SessionControls, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, SessionStatusIcon, type SessionSurfacePanel, type SessionVitals, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type TextSegment, Textarea, Tip, Toaster, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptDensity, TranscriptDensityProvider, type TranscriptFont, type TranscriptProps, type TranscriptVariant, TranscriptVariantProvider, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, rateLimitWindowSeconds, rowShapeClass, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, usePromptAreaState, useTranscriptDensity, useTranscriptVariant };
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Band, Blank, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerFileMatch, type ComposerHandle, type ComposerProps, ContextDialog, type ContextDialogProps, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyAction, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger, Empty, EmptyKey, EngineIcon, FileCard, type FileCardProps, type FileDeliveredItem, HostFilesDialog, type HostFilesDialogProps, Ink, Input, Loader, McpDialog, type McpDialogProps, Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger, Message, MessageContent, type MessageProps, ModelSelect, type ModelSelectProps, PERMISSION_MODES, type PermissionModeChoice, type PermissionModeMeta, PermissionModeSelect, type PermissionModeSelectProps, PermissionPrompt, type PermissionPromptProps, ProgressRing, type ProgressRingProps, PromptArea, type PromptAreaHandle, type PromptAreaProps, PromptTokenText, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, Row, type RowProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionBrowser, type SessionBrowserProps, type SessionControls, SessionEmptyState, type SessionEmptyStateProps, SessionInfoDialog, type SessionInfoDialogProps, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, SessionStatusIcon, type SessionSurfacePanel, type SessionVitals, SkillsDialog, type SkillsDialogProps, Spinner, Splitter, type SplitterProps, StatusBar, type StatusBarProps, type TerminalAffordances, TerminalDiff, TerminalItemView, TerminalMarkdown, type TerminalMarkdownProps, type TerminalMetrics, TerminalPermissionPrompt, type TerminalPermissionPromptProps, TerminalQuestionPrompt, type TerminalQuestionPromptProps, TerminalStatusLine, type TerminalStatusLineProps, TerminalSurface, type TerminalSurfaceProps, TerminalTranscript, type TerminalTranscriptProps, type TextSegment, Textarea, Tip, Toaster, type Tone, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptDensity, TranscriptDensityProvider, type TranscriptFont, type TranscriptProps, type TranscriptVariant, TranscriptVariantProvider, type TriggerConfig, type TriggerSuggestion, UsageDialog, type UsageDialogProps, UsageMeters, WithActions, badgeVariants, buttonVariants, cn, commandTrigger, copyText, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, getChipsByTrigger, hashtagTrigger, isMutatingTool, isSegmentsEmpty, mentionTrigger, parseUserQuestions, permissionModeChoices, permissionModeMeta, plainTextToSegments, previewPatch, rateLimitWindowSeconds, rowShapeClass, segmentsToPlainText, skillPrompt, toast, toolIcon, toolInputPreview, useAffordances, useMinuteClock, usePromptAreaState, useTranscriptDensity, useTranscriptVariant };
 //# sourceMappingURL=index.d.mts.map