agentic-ui-kit 0.0.0-stage → 0.2.0

package/dist/tailwind.css

@@ -0,0 +1,350 @@
+/*
+ * Theme and Tailwind setup for agentic-ui-kit. Import after Tailwind in the host app's CSS:
+ *
+ *   @import "tailwindcss";
+ *   @import "agentic-ui-kit/tailwind.css";
+ *
+ * Every visual value is a --chat-* variable. A host retheme sets them on :root or on any wrapper element;
+ * components only use the Tailwind names below (bg-chat-surface, text-chat-muted, ...), never raw colors.
+ */
+
+@import "katex/dist/katex.min.css";
+
+@source "./";
+
+@theme inline {
+  --color-chat-bg: var(--chat-bg);
+  --color-chat-sidebar: var(--chat-sidebar);
+  --color-chat-surface: var(--chat-surface);
+  --color-chat-raised: var(--chat-raised);
+  --color-chat-hover: var(--chat-hover);
+  --color-chat-selected: var(--chat-selected);
+  --color-chat-bubble: var(--chat-bubble);
+  --color-chat-popover: var(--chat-popover);
+  --color-chat-popover-border: var(--chat-popover-border);
+  --color-chat-popover-hover: var(--chat-popover-hover);
+  --color-chat-border: var(--chat-border);
+  --color-chat-border-strong: var(--chat-border-strong);
+  --color-chat-divider: var(--chat-divider);
+  --color-chat-code-bg: var(--chat-code-bg);
+  --color-chat-code-border: var(--chat-code-border);
+  --color-chat-inline-code: var(--chat-inline-code);
+  --color-chat-fg: var(--chat-fg);
+  --color-chat-muted: var(--chat-muted);
+  --color-chat-subtle: var(--chat-subtle);
+  --color-chat-accent: var(--chat-accent);
+  --color-chat-check: var(--chat-check);
+  --color-chat-warning: var(--chat-warning);
+  --color-chat-warning-bg: var(--chat-warning-bg);
+  --color-chat-danger: var(--chat-danger);
+  --color-chat-focus: var(--chat-focus);
+
+  --font-chat-sans: var(--chat-font-sans);
+  --font-chat-serif: var(--chat-font-serif);
+  --font-chat-mono: var(--chat-font-mono);
+
+  --radius-chat-sm: var(--chat-radius-sm);
+  --radius-chat-md: var(--chat-radius-md);
+  --radius-chat-lg: var(--chat-radius-lg);
+  --radius-chat-popover: var(--chat-radius-popover);
+
+  --shadow-chat-popover: var(--chat-shadow-popover);
+
+  --animate-chat-in: chat-in 120ms ease-out;
+  --animate-chat-out: chat-out 90ms ease-in forwards;
+  --animate-chat-fade-in: chat-fade-in 200ms ease-out;
+  --animate-chat-fade-out: chat-fade-in 150ms ease-in reverse forwards;
+  --animate-chat-drawer-in: chat-drawer-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --animate-chat-drawer-out: chat-drawer-in 160ms ease-in reverse forwards;
+  --animate-chat-drawer-in-right: chat-drawer-in-right 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --animate-chat-drawer-out-right: chat-drawer-in-right 160ms ease-in reverse forwards;
+
+  @keyframes chat-drawer-in-right {
+    from {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes chat-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes chat-drawer-in {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes chat-in {
+    from {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+  }
+  @keyframes chat-out {
+    to {
+      opacity: 0;
+      transform: scale(0.98);
+    }
+  }
+}
+
+@layer base {
+  /* Default theme: claude.ai dark. */
+  :root,
+  [data-chat-theme="claude-dark"] {
+    color-scheme: dark;
+
+    --chat-bg: #191919;
+    --chat-sidebar: #1f1f1f;
+    --chat-surface: #303030;
+    --chat-raised: #3a3a3a;
+    --chat-hover: #3d3d3d;
+    --chat-selected: #4a4a4a;
+    --chat-bubble: #2a2a2a;
+    --chat-popover: #303030;
+    --chat-popover-border: #383838;
+    --chat-popover-hover: #4f4f4f;
+    --chat-border: #303030;
+    --chat-border-strong: #454545;
+    /* Faint lines inside the message column, e.g. the activity box. */
+    --chat-divider: #222222;
+    --chat-code-bg: #1c1c1c;
+    --chat-code-border: #252525;
+    --chat-inline-code: #2e2e2e;
+    --chat-fg: #ecebe6;
+    --chat-muted: #a3a29e;
+    --chat-subtle: #75746f;
+    --chat-accent: #d97757;
+    --chat-check: #6c9cf0;
+    --chat-warning: #e8b04b;
+    --chat-warning-bg: #4a3b1c;
+    --chat-danger: #e5675c;
+    --chat-focus: #6c9cf0;
+
+    --chat-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+    --chat-font-serif: "Source Serif 4", ui-serif, Georgia, serif;
+    --chat-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+    /*
+     * --chat-font-message (unset): assistant message text. Falls back to the serif, like claude.ai; hosts
+     * with sans UIs set it to var(--chat-font-sans). Left unset here so it follows a nested theme's fonts.
+     */
+
+    --chat-radius-sm: 6px;
+    --chat-radius-md: 10px;
+    --chat-radius-lg: 16px;
+    --chat-radius-popover: 12px;
+    --chat-shadow-popover: 0 8px 24px rgb(0 0 0 / 0.5);
+
+    /* Message column. Hosts and users adjust these; ChatView reads them. */
+    --chat-content-width: 48rem;
+    --chat-content-padding: 1.5rem;
+    --chat-message-font-size: 1.0625rem;
+    --chat-message-line-height: 1.65;
+  }
+}
+
+/*
+ * Markdown in messages. Streamdown runs with a class prefix, so none of its own utility classes apply and
+ * the host's classes never leak in; everything is styled here by element and data-streamdown attribute.
+ */
+@layer components {
+  .chat-markdown {
+    font-family: var(--chat-font-message, var(--chat-font-serif));
+    font-size: var(--chat-message-font-size);
+    line-height: var(--chat-message-line-height);
+    color: var(--chat-fg);
+    overflow-wrap: anywhere;
+  }
+  .chat-markdown > div > * + * {
+    margin-top: 0.75em;
+  }
+  .chat-markdown :is(h1, h2, h3, h4) {
+    font-weight: 600;
+    line-height: 1.3;
+    margin-top: 1.25em;
+  }
+  .chat-markdown h1 { font-size: 1.5em; }
+  .chat-markdown h2 { font-size: 1.3em; }
+  .chat-markdown h3 { font-size: 1.12em; }
+  .chat-markdown strong { font-weight: 650; }
+  .chat-markdown :is(ul, ol) {
+    padding-left: 1.6em;
+  }
+  .chat-markdown ul { list-style: disc; }
+  .chat-markdown ol { list-style: decimal; }
+  .chat-markdown li + li { margin-top: 0.3em; }
+  .chat-markdown li > :is(ul, ol) { margin-top: 0.3em; }
+  .chat-markdown a {
+    color: var(--chat-fg);
+    text-decoration: underline;
+    text-decoration-color: var(--chat-subtle);
+    text-underline-offset: 3px;
+  }
+  .chat-markdown a:hover { text-decoration-color: var(--chat-fg); }
+  .chat-markdown blockquote {
+    border-left: 3px solid var(--chat-border-strong);
+    padding-left: 1em;
+    color: var(--chat-muted);
+  }
+  .chat-markdown hr { border-color: var(--chat-border); margin-block: 1.5em; }
+  .chat-markdown [data-chat-inline-code] {
+    font-family: var(--chat-font-mono);
+    font-size: 0.82em;
+    background: var(--chat-inline-code);
+    border-radius: 5px;
+    padding: 0.12em 0.35em;
+  }
+  .chat-markdown [data-streamdown="table-wrapper"] {
+    overflow-x: auto;
+    margin-block: 1em;
+  }
+  .chat-markdown table {
+    border-collapse: collapse;
+    font-family: var(--chat-font-sans);
+    font-size: 0.875rem;
+  }
+  .chat-markdown :is(th, td) {
+    border-bottom: 1px solid var(--chat-border);
+    padding: 0.45em 0.9em 0.45em 0;
+    text-align: left;
+  }
+  .chat-markdown th { font-weight: 600; }
+  .chat-markdown .katex-display {
+    margin-block: 1em;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .chat-markdown .katex { font-size: 1.08em; }
+  /* KaTeX CSS must match the katex version @streamdown/math renders with (0.16.x). */
+}
+
+/*
+ * Streamed words fade in as they mount (see word-fade.ts). The fade is long enough that several groups
+ * are mid-fade at once, so the end of the text trails off instead of typing left to right.
+ */
+@layer components {
+  .chat-markdown.chat-fade .chat-word {
+    animation: chat-word-in var(--chat-fade-duration, 700ms) ease-out both;
+  }
+}
+
+@keyframes chat-word-in {
+  from { opacity: 0; }
+}
+
+/*
+ * A ChatView sizes itself to its pane, not the window, so several can sit side by side or stacked (an
+ * agent dashboard). The view is an inline-size container ("chat"); its body is a size container
+ * ("chat-body") so the composer and empty state can respond to a short pane too.
+ */
+@layer components {
+  .chat-view {
+    container: chat / inline-size;
+  }
+  .chat-view-body {
+    container: chat-body / size;
+    --chat-gutter: var(--chat-content-padding);
+  }
+  @container chat (max-width: 34rem) {
+    .chat-view-body {
+      --chat-gutter: min(var(--chat-content-padding), 0.75rem);
+    }
+  }
+  @container chat (max-width: 24rem) {
+    .chat-picker-detail {
+      display: none;
+    }
+  }
+  @container chat-body (max-height: 24rem) {
+    .chat-empty-greeting {
+      display: none;
+    }
+  }
+}
+
+/* Highlighted code: each token has both theme colors; the chat theme's color-scheme picks one. */
+@layer components {
+  .chat-code-token {
+    color: light-dark(var(--shiki-light), var(--shiki-dark));
+  }
+}
+
+/* codeThemes.background = "theme": the block takes the Shiki theme's own background and text color. Unlayered so it wins over utilities. */
+[data-chat-code-bg="theme"] {
+  background-color: light-dark(var(--shiki-light-bg), var(--shiki-dark-bg));
+}
+[data-chat-code-bg="theme"] pre {
+  color: light-dark(var(--shiki-light), var(--shiki-dark));
+}
+
+/* A highlight sweeping across live labels ("Thinking…", "Searching the web"). */
+@layer components {
+  /*
+   * The gradient repeats in fixed-size tiles and moves one tile per cycle, so the highlight travels at
+   * the same speed whatever the label's length. Live (activity-group.tsx) offsets the start to a shared
+   * clock, so re-renders and remounts never restart or jump the sweep.
+   */
+  .chat-shimmer {
+    background-image: linear-gradient(
+      90deg,
+      var(--chat-muted) 0%,
+      var(--chat-muted) 35%,
+      var(--chat-fg) 50%,
+      var(--chat-muted) 65%,
+      var(--chat-muted) 100%
+    );
+    background-size: 20em 100%;
+    background-repeat: repeat-x;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: chat-shimmer var(--chat-shimmer-duration, 2s) linear infinite;
+  }
+  .chat-markdown.chat-thinking {
+    font-family: var(--chat-font-sans);
+    font-size: 0.9375rem;
+    line-height: 1.6;
+    color: var(--chat-muted);
+  }
+}
+
+/* A light sweeping across a card while it uploads. */
+@layer components {
+  .chat-shimmer-surface::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--chat-fg) 12%, transparent) 50%, transparent 70%) 0 0 / 300% 100%;
+    animation: chat-shimmer-surface 1.6s linear infinite;
+    pointer-events: none;
+  }
+}
+
+@keyframes chat-shimmer-surface {
+  from { background-position: 150% 0; }
+  to { background-position: -50% 0; }
+}
+
+@keyframes chat-shimmer {
+  from { background-position: -20em 0; }
+  to { background-position: 0 0; }
+}
+
+/*
+ * Reduced motion. Applies with the OS setting, unless data-chat-motion="full" is on an ancestor (ChatTheme
+ * `motion`, or <html>); and always under data-chat-motion="reduce". Keep the two lists in sync.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .chat-markdown.chat-fade .chat-word:not([data-chat-motion="full"] *) { animation: none; }
+  .chat-shimmer-surface:not([data-chat-motion="full"] *)::after { animation: none; background: color-mix(in srgb, var(--chat-fg) 6%, transparent); }
+  .chat-shimmer:not([data-chat-motion="full"] *) { animation: none; color: var(--chat-muted); background: none; }
+  /* Popovers, drawers, dialogs: no slide or scale. A tiny duration keeps exit handling working. */
+  [data-entering]:not([data-chat-motion="full"] *), [data-exiting]:not([data-chat-motion="full"] *) { animation-duration: 1ms !important; }
+}
+
+[data-chat-motion="reduce"] .chat-markdown.chat-fade .chat-word { animation: none; }
+[data-chat-motion="reduce"] .chat-shimmer-surface::after { animation: none; background: color-mix(in srgb, var(--chat-fg) 6%, transparent); }
+[data-chat-motion="reduce"] .chat-shimmer { animation: none; color: var(--chat-muted); background: none; }
+[data-chat-motion="reduce"] [data-entering], [data-chat-motion="reduce"] [data-exiting] { animation-duration: 1ms !important; }

package/dist/types/core/src/blocks.d.ts

@@ -0,0 +1,22 @@
+import type { Part, ThinkingPart, ToolCallPart } from "./types";
+export type ActivityPart = ThinkingPart | ToolCallPart;
+/**
+ * How an assistant message is laid out: runs of consecutive thinking and tool-call parts fold into one
+ * activity group (the "Recalled memory ▾" dropdown); every other part stands alone. Tool calls for which
+ * `standalone` is true stand alone too (`kind: "tool"`), e.g. a question's answers or a chart.
+ */
+export type Block = {
+    kind: "activity";
+    id: string;
+    parts: ActivityPart[];
+} | {
+    kind: "tool";
+    id: string;
+    part: ToolCallPart;
+} | {
+    kind: "part";
+    id: string;
+    part: Exclude<Part, ActivityPart>;
+};
+export declare function isActivityPart(part: Part): part is ActivityPart;
+export declare function toBlocks(parts: readonly Part[], standalone?: (part: ToolCallPart) => boolean): Block[];

package/dist/types/core/src/events.d.ts

@@ -0,0 +1,75 @@
+import type { MessageStatus, Part, PartStatus, Usage } from "./types";
+/**
+ * The stream a backend sends for one run (one assistant reply). Sent as server-sent events: the SSE `id`
+ * is `seq`, the `data` is the JSON event. Any backend in any language that emits these works with the UI.
+ */
+export type StreamEvent = RunStart | PartStart | PartDelta | PartUpdate | PartEnd | RunUsage | RunEnd | TitleEvent;
+interface Base {
+    runId: string;
+    /** Increases by one per event within a run. Clients resume with the last seq they applied. */
+    seq: number;
+}
+export interface RunStart extends Base {
+    type: "run.start";
+    messageId: string;
+    parentId: string | null;
+    createdAt: string;
+    model?: string;
+    effort?: string;
+}
+/** A new part. `part` is its initial state; text fields usually start empty and grow through deltas. */
+export interface PartStart extends Base {
+    type: "part.start";
+    part: Part;
+}
+/**
+ * Appends to a part. `text` goes to the text of text, thinking and custom parts and to the html of widget
+ * parts; `inputJson` goes to the raw input of tool calls.
+ */
+export interface PartDelta extends Base {
+    type: "part.delta";
+    partId: string;
+    text?: string;
+    inputJson?: string;
+}
+/** Fields a backend can set on a part after it starts. Only the fields valid for the part's type apply. */
+export interface PartFields {
+    status?: PartStatus;
+    title?: string;
+    subtitle?: string;
+    durationMs?: number;
+    input?: unknown;
+    result?: unknown;
+    error?: string;
+    data?: unknown;
+    url?: string;
+    resourceUri?: string;
+}
+/** Sets fields while the part is still open, e.g. a tool call moving from input to running. */
+export interface PartUpdate extends Base, PartFields {
+    type: "part.update";
+    partId: string;
+}
+/** Closes a part. Status becomes "done" unless the event sets "error". */
+export interface PartEnd extends Base, PartFields {
+    type: "part.end";
+    partId: string;
+}
+/** Token counts so far, for backends whose provider reports usage while streaming. Replaces the last one. */
+export interface RunUsage extends Base {
+    type: "run.usage";
+    usage: Usage;
+}
+export interface RunEnd extends Base {
+    type: "run.end";
+    status: Exclude<MessageStatus, "streaming">;
+    usage?: Usage;
+    error?: string;
+}
+/** The conversation got a title, usually after the first reply. Not applied to the message. */
+export interface TitleEvent extends Base {
+    type: "title";
+    conversationId: string;
+    title: string;
+}
+export {};

package/dist/types/core/src/index.d.ts

@@ -0,0 +1,7 @@
+export type * from "./types";
+export type * from "./events";
+export { applyEvent, reduceEvents, estimateTokens, outputTokens, activityTokens, resolveEffort, awaitingToolCalls, settleToolCall } from "./reduce";
+export { toBlocks, isActivityPart } from "./blocks";
+export type { Block, ActivityPart } from "./blocks";
+export { readEventStream, formatEvent } from "./sse";
+export { parsePartialJson } from "./partial-json";

package/dist/types/core/src/partial-json.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Best-effort value of JSON that is still streaming, so a tool call's fields can show while the model
+ * writes them: `{"title":"Stand-up","day":"Tu` gives `{ title: "Stand-up", day: "Tu" }`. Open strings are
+ * cut where the text ends, open objects and arrays are closed, and a key without its value yet is left
+ * out. Returns undefined when nothing usable has arrived. One pass over the text.
+ */
+export declare function parsePartialJson(text: string): unknown;

package/dist/types/core/src/reduce.d.ts

@@ -0,0 +1,33 @@
+import type { StreamEvent } from "./events";
+import type { Message, ModelInfo, Part, ToolCallPart } from "./types";
+/**
+ * Applies one stream event to the message it builds. Pure and immutable: returns the same object when the
+ * event changes nothing, so React can skip renders.
+ *
+ * Events with a seq at or below `message.lastSeq` are dropped, so replaying from an earlier seq after a
+ * reconnect is safe. Events other than run.start need the message to exist; without it they are dropped.
+ */
+export declare function applyEvent(message: Message | undefined, event: StreamEvent): Message | undefined;
+/** Builds a message from a full event list, e.g. a stored run or a test fixture. */
+export declare function reduceEvents(events: Iterable<StreamEvent>, initial?: Message): Message | undefined;
+/** Rough token count of text, about four characters per token. For live counters, not billing. */
+export declare function estimateTokens(text: string): number;
+/**
+ * Tokens the model spent inside an activity group: its reasoning and the tool inputs it wrote. Tool
+ * results are not model output, so they do not count. An estimate; per-step counts are not reported.
+ */
+export declare function activityTokens(parts: readonly Part[]): number;
+/**
+ * Output tokens of a message so far: the backend's count when it has sent one, else an estimate from
+ * everything the model has written (text, thinking, tool input, widget html).
+ */
+export declare function outputTokens(message: Message): number;
+/**
+ * The effort to send with a model: the chosen one if the model offers it, else the model's default, else
+ * none. Models without effort levels never get one.
+ */
+export declare function resolveEffort(model: ModelInfo | undefined, effort?: string): string | undefined;
+/** Tool calls the client has to act on: run them (client tools) or ask the user (approvals). */
+export declare function awaitingToolCalls(message: Message): ToolCallPart[];
+/** Sets fields on one tool call locally, e.g. a client tool's result or the user's approval. */
+export declare function settleToolCall(message: Message, partId: string, fields: Partial<Pick<ToolCallPart, "status" | "result" | "error" | "approval" | "durationMs">>): Message;

package/dist/types/core/src/sse.d.ts

@@ -0,0 +1,8 @@
+import type { StreamEvent } from "./events";
+/**
+ * Reads a server-sent event stream of `StreamEvent`s. Each SSE message carries one JSON event in `data`;
+ * comments and messages without data (keep-alives) are skipped.
+ */
+export declare function readEventStream(body: ReadableStream<Uint8Array>): AsyncGenerator<StreamEvent>;
+/** Formats one event as an SSE message, for servers written in TS. */
+export declare function formatEvent(event: StreamEvent): string;

package/dist/types/core/src/types.d.ts

@@ -0,0 +1,171 @@
+export type Role = "user" | "assistant";
+export type MessageStatus = "streaming" | "done" | "stopped" | "error";
+/**
+ * Status of a single part. Tool calls go input -> running -> done | error; other parts go streaming -> done.
+ * A tool call is "awaiting" when the run ended waiting on the client: to run a client tool, or for the
+ * user to approve a tool (see ToolCallPart).
+ */
+export type PartStatus = "streaming" | "input" | "awaiting" | "running" | "done" | "error";
+export interface TextPart {
+    type: "text";
+    id: string;
+    text: string;
+    status: PartStatus;
+}
+/**
+ * Model reasoning. `title` is the short line shown collapsed ("Deriving the rejection region...").
+ * `visibility` says what `text` holds: the model's full reasoning, a summary of it, or nothing because the
+ * provider hides it (only the duration is known).
+ */
+export interface ThinkingPart {
+    type: "thinking";
+    id: string;
+    text: string;
+    status: PartStatus;
+    visibility?: "full" | "summary" | "hidden";
+    title?: string;
+    durationMs?: number;
+}
+/**
+ * A tool call. `inputJson` is the raw input as streamed; `input` is the parsed value once complete.
+ * `title` is the display line ("Recalled memory"), `subtitle` the highlighted detail ("preferences.md").
+ */
+export interface ToolCallPart {
+    type: "tool_call";
+    id: string;
+    name: string;
+    status: PartStatus;
+    inputJson: string;
+    input?: unknown;
+    /**
+     * While the input streams: a best-effort parse of `inputJson`, so pages and views can show fields as the
+     * model writes them. Strings may be cut short and keys missing. Gone once `input` is set.
+     */
+    partialInput?: unknown;
+    result?: unknown;
+    error?: string;
+    title?: string;
+    subtitle?: string;
+    durationMs?: number;
+    /**
+     * Where the tool runs. "server" (the default): the backend runs it and streams the result; the page can
+     * still react to it through the tool's `onResult`. "client": the backend ends the run with this call
+     * "awaiting", the browser runs it and sends the result back in a continuation request.
+     */
+    runsOn?: "server" | "client";
+    /** The backend asks the user before the tool runs. The client may also require it per tool. */
+    needsApproval?: boolean;
+    /** The user's answer, sent back in the continuation request. */
+    approval?: "granted" | "denied";
+}
+export interface AttachmentPart {
+    type: "attachment";
+    id: string;
+    status: PartStatus;
+    fileId: string;
+    name: string;
+    mime: string;
+    size: number;
+    url?: string;
+    /** Pasted text kept inline instead of uploaded. */
+    text?: string;
+}
+/**
+ * An interactive visual rendered in a sandboxed frame. Either inline `html` (streamed as text deltas)
+ * or an MCP Apps UI resource.
+ */
+export interface WidgetPart {
+    type: "widget";
+    id: string;
+    status: PartStatus;
+    title?: string;
+    html?: string;
+    resourceUri?: string;
+}
+/** A host-defined part, rendered by a renderer the host registers for `kind`. */
+export interface CustomPart {
+    type: "custom";
+    id: string;
+    status: PartStatus;
+    kind: string;
+    data: unknown;
+    /** Plain text fallback for hosts without a renderer for `kind`, and for copy. */
+    text?: string;
+}
+export type Part = TextPart | ThinkingPart | ToolCallPart | AttachmentPart | WidgetPart | CustomPart;
+export type PartType = Part["type"];
+export interface Usage {
+    inputTokens?: number;
+    outputTokens?: number;
+    reasoningTokens?: number;
+    cachedInputTokens?: number;
+}
+export interface Message {
+    id: string;
+    /** Previous message in the conversation tree. Edits and retries create siblings with the same parent. */
+    parentId: string | null;
+    role: Role;
+    status: MessageStatus;
+    parts: Part[];
+    createdAt: string;
+    model?: string;
+    effort?: string;
+    usage?: Usage;
+    error?: string;
+    /** Run that produced this message, and the last event applied from it. Used to resume and to drop repeats. */
+    runId?: string;
+    lastSeq?: number;
+}
+export interface EffortLevel {
+    id: string;
+    label: string;
+    recommended?: boolean;
+    /** Short warning shown next to the level, e.g. "5.5x or more usage". */
+    warning?: string;
+}
+export interface ModelInfo {
+    /** The slug sent to the backend, e.g. "gpt-6-astra". */
+    id: string;
+    /** Display name, e.g. "GPT 6 Astra". */
+    label: string;
+    description?: string;
+    /** Context window in tokens; the context panel's limit. */
+    contextWindow?: number;
+    /** Reasoning effort levels. Leave unset for models without them: no Effort menu, no effort sent. */
+    efforts?: EffortLevel[];
+    defaultEffort?: string;
+    /** Shown under "More models" instead of the main list. */
+    secondary?: boolean;
+    disabled?: boolean;
+    disabledReason?: string;
+}
+/** One slice of the context window, e.g. "System prompt" or "MCP tools". */
+export interface ContextCategory {
+    id: string;
+    label: string;
+    tokens: number;
+    /** CSS color for the bar segment and swatch. Defaults to a grey. */
+    color?: string;
+    /** Loaded on demand, not counted in `used`; shown with a dash instead of a percentage. */
+    deferred?: boolean;
+    /** Held back (e.g. an autocompact buffer): shown in the bar and taken from free space, but not "used". */
+    reserved?: boolean;
+    /** Tooltip explaining the category. Categories with a hint are underlined. */
+    hint?: string;
+}
+/** An expandable list under the categories, e.g. each MCP tool or memory file and its size. */
+export interface ContextGroup {
+    id: string;
+    label: string;
+    items: {
+        id: string;
+        label: string;
+        tokens: number;
+    }[];
+}
+/** What fills a conversation's context window, as reported by the backend. */
+export interface ContextUsage {
+    limit: number;
+    categories: ContextCategory[];
+    groups?: ContextGroup[];
+}

package/dist/types/react/src/components/activity-group.d.ts

@@ -0,0 +1,13 @@
+import { type ActivityPart } from "../../../core/src/index.js";
+export interface ActivityGroupProps {
+    /** Consecutive thinking and tool-call parts, as grouped by `toBlocks`. */
+    parts: readonly ActivityPart[];
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * The "Ran a command, searched the web ▾" dropdown: a one-line heading that opens a bordered box with one
+ * row per step. Each row expands on its own; tool rows render through the registered `ToolView`.
+ * A group of one step skips the rows: the heading is the step's own label and the box holds its detail.
+ */
+export declare function ActivityGroup({ parts, defaultExpanded, className }: ActivityGroupProps): import("react").JSX.Element;