@tangle-network/agent-app 0.27.2 → 0.29.0

package/dist/theme/index.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Typed mirror of tokens.css for runtime/JS theming. The canonical source is
+ * tokens.css (`import '@tangle-network/agent-app/styles'`); this module is for
+ * apps that compute theme variables in JS, or read color values where CSS
+ * custom properties cannot reach — notably Konva canvas render code, which
+ * paints to a bitmap and cannot resolve `var(--…)`.
+ *
+ * Values are shadcn-style HSL channel triples ("H S% L%"); wrap with `color()`.
+ */
+interface AgentAppTheme {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Full CSS color (not a triple) — the canvas/scene backdrop. */
+    canvasBackdrop: string;
+    /** Konva render palette — full hex colors the bitmap canvas paints with
+     *  (it cannot resolve `var(--…)`). NOT emitted by themeToCssVars. */
+    canvasRender: CanvasRenderPalette;
+}
+/**
+ * Colors the Konva design-canvas paints directly. Konva renders to a bitmap
+ * and cannot read CSS custom properties, so these are full hex strings sourced
+ * from the active theme and threaded through the canvas components.
+ */
+interface CanvasRenderPalette {
+    /** Grid line color (GridLayer). */
+    grid: string;
+    /** Grid-snap guide line (SnapGuidesOverlay, kind 'grid'). */
+    snapGrid: string;
+    /** Saved ruler-guide snap line (kind 'guide'). */
+    snapGuide: string;
+    /** Page edge/center snap line (kinds 'page-edge'/'page-center'). */
+    snapPage: string;
+    /** Element edge/center snap line (kinds 'element-edge'/'element-center'). */
+    snapElement: string;
+    /** Transformer border + anchor stroke (SelectionLayer). */
+    selectionStroke: string;
+    /** Transformer anchor fill (SelectionLayer). */
+    selectionAnchorFill: string;
+    /** Video placeholder fill (ElementNode VideoNode). */
+    placeholderFill: string;
+    /** Video placeholder stroke (ElementNode VideoNode). */
+    placeholderStroke: string;
+    /** Broken/loading image placeholder fill (ElementNode ImageNode). */
+    brokenFill: string;
+    /** Broken/loading image placeholder stroke (ElementNode ImageNode). */
+    brokenStroke: string;
+}
+declare const lightTheme: AgentAppTheme;
+declare const darkTheme: AgentAppTheme;
+/** Wrap a channel triple in `hsl()`; pass through values already in a color form. */
+declare function themeColor(value: string): string;
+/**
+ * Map a theme to the full CSS-variable set (shadcn triples + canvas/sequences
+ * aliases + canvas surface). Apply at runtime to scope a theme without loading
+ * tokens.css: `Object.assign(el.style, themeToCssVars(darkTheme))`.
+ */
+declare function themeToCssVars(theme: AgentAppTheme): Record<string, string>;
+
+export { type AgentAppTheme, type CanvasRenderPalette, darkTheme, lightTheme, themeColor, themeToCssVars };

package/dist/theme/index.js

@@ -0,0 +1,14 @@
+import "../chunk-UAKFCMWK.js";
+import {
+  darkTheme,
+  lightTheme,
+  themeColor,
+  themeToCssVars
+} from "../chunk-Y2SZVW35.js";
+export {
+  darkTheme,
+  lightTheme,
+  themeColor,
+  themeToCssVars
+};
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme/tailwind-preset.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Tailwind preset mapping the shadcn semantic color names used by web-react
+ * (bg-card, text-muted-foreground, border-border, …) onto the CSS variables in
+ * tokens.css — so a consuming app themes every agent-app surface from one source.
+ *
+ *   // tailwind.config.{js,ts}
+ *   import agentAppPreset from '@tangle-network/agent-app/tailwind-preset'
+ *   export default { presets: [agentAppPreset], content: [...] }
+ *
+ * Pair with `import '@tangle-network/agent-app/styles'` for the variable values.
+ * design-canvas/sequences need no preset — they consume vars via arbitrary
+ * values (bg-[var(--bg-input)]), which Tailwind supports without color config.
+ */
+declare const agentAppPreset: {
+    darkMode: [string, string];
+    theme: {
+        extend: {
+            colors: {
+                background: string;
+                foreground: string;
+                border: string;
+                input: string;
+                ring: string;
+                success: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                warning: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+            };
+        };
+    };
+};
+
+export { agentAppPreset as default };

package/dist/theme/tailwind-preset.js

@@ -0,0 +1,33 @@
+// src/theme/tailwind-preset.ts
+var withForeground = (name) => ({
+  DEFAULT: `hsl(var(--${name}))`,
+  foreground: `hsl(var(--${name}-foreground))`
+});
+var agentAppPreset = {
+  darkMode: ["class", '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        success: withForeground("success"),
+        warning: withForeground("warning"),
+        card: withForeground("card"),
+        popover: withForeground("popover"),
+        primary: withForeground("primary"),
+        secondary: withForeground("secondary"),
+        muted: withForeground("muted"),
+        accent: withForeground("accent"),
+        destructive: withForeground("destructive")
+      }
+    }
+  }
+};
+var tailwind_preset_default = agentAppPreset;
+export {
+  tailwind_preset_default as default
+};
+//# sourceMappingURL=tailwind-preset.js.map

package/dist/theme/tailwind-preset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset mapping the shadcn semantic color names used by web-react\n * (bg-card, text-muted-foreground, border-border, …) onto the CSS variables in\n * tokens.css — so a consuming app themes every agent-app surface from one source.\n *\n *   // tailwind.config.{js,ts}\n *   import agentAppPreset from '@tangle-network/agent-app/tailwind-preset'\n *   export default { presets: [agentAppPreset], content: [...] }\n *\n * Pair with `import '@tangle-network/agent-app/styles'` for the variable values.\n * design-canvas/sequences need no preset — they consume vars via arbitrary\n * values (bg-[var(--bg-input)]), which Tailwind supports without color config.\n */\n\nconst withForeground = (name: string) => ({\n  DEFAULT: `hsl(var(--${name}))`,\n  foreground: `hsl(var(--${name}-foreground))`,\n})\n\nconst agentAppPreset = {\n  darkMode: ['class', '[data-theme=\"dark\"]'] as [string, string],\n  theme: {\n    extend: {\n      colors: {\n        background: 'hsl(var(--background))',\n        foreground: 'hsl(var(--foreground))',\n        border: 'hsl(var(--border))',\n        input: 'hsl(var(--input))',\n        ring: 'hsl(var(--ring))',\n        success: withForeground('success'),\n        warning: withForeground('warning'),\n        card: withForeground('card'),\n        popover: withForeground('popover'),\n        primary: withForeground('primary'),\n        secondary: withForeground('secondary'),\n        muted: withForeground('muted'),\n        accent: withForeground('accent'),\n        destructive: withForeground('destructive'),\n      },\n    },\n  },\n}\n\nexport default agentAppPreset\n"],"mappings":";AAcA,IAAM,iBAAiB,CAAC,UAAkB;AAAA,EACxC,SAAS,aAAa,IAAI;AAAA,EAC1B,YAAY,aAAa,IAAI;AAC/B;AAEA,IAAM,iBAAiB;AAAA,EACrB,UAAU,CAAC,SAAS,qBAAqB;AAAA,EACzC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS,eAAe,SAAS;AAAA,QACjC,SAAS,eAAe,SAAS;AAAA,QACjC,MAAM,eAAe,MAAM;AAAA,QAC3B,SAAS,eAAe,SAAS;AAAA,QACjC,SAAS,eAAe,SAAS;AAAA,QACjC,WAAW,eAAe,WAAW;AAAA,QACrC,OAAO,eAAe,OAAO;AAAA,QAC7B,QAAQ,eAAe,QAAQ;AAAA,QAC/B,aAAa,eAAe,aAAa;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/theme/tokens.css

@@ -0,0 +1,95 @@
+/**
+ * agent-app design tokens — the single source of truth for theming every React
+ * surface (design-canvas-react, sequences-react, web-react).
+ *
+ * Import once at your app root:  import '@tangle-network/agent-app/styles'
+ * Dark mode: set `data-theme="dark"` (or class `dark`) on a parent element.
+ *
+ * Two vocabularies resolve to ONE set of channel triples:
+ *   - shadcn semantic names (--card, --foreground, --muted-foreground, …) —
+ *     consumed by web-react via Tailwind classes (bg-card, text-foreground).
+ *     Wire them with the Tailwind preset: import '@tangle-network/agent-app/tailwind-preset'.
+ *   - canvas/sequences alias names (--bg-input, --text-primary, …) — full
+ *     colors consumed directly via Tailwind arbitrary values (bg-[var(--bg-input)]).
+ *     These need no Tailwind config; tokens.css alone is enough.
+ *
+ * The aliases reference the triples, so redefining only the triples in the dark
+ * scope re-themes both vocabularies through the cascade.
+ */
+
+:root {
+  /* shadcn channel triples — "H S% L%", consumed as hsl(var(--name)) */
+  --background: 0 0% 100%;
+  --foreground: 222 47% 11%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 47% 11%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 47% 11%;
+  --primary: 221 83% 47%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222 47% 30%;
+  --muted: 210 40% 96%;
+  /* 44% L (was 47%) so muted text clears WCAG AA even on subtly tinted surfaces
+     (e.g. the failed tool card's 5%-red wash); ~4.7:1 on white. */
+  --muted-foreground: 215 16% 44%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222 47% 11%;
+  --destructive: 0 72% 45%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 214 32% 91%;
+  --input: 214 32% 91%;
+  --ring: 221 83% 53%;
+  /* note: --primary below is darkened from 53% → 47% L so the brand blue clears
+     WCAG AA (4.5:1) when used AS TEXT on a light surface; --ring stays at the
+     brighter 53% (a 2px focus ring only needs 3:1 non-text contrast). */
+  /* status colors — dark enough on light surfaces to clear AA as text (used by
+     chips, dots, and solid buttons via the Tailwind preset's success/warning). */
+  --success: 142 72% 29%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 32%;
+  --warning-foreground: 38 92% 12%;
+
+  /* canvas/sequences aliases — full colors, resolve to the triples above */
+  --bg-input: hsl(var(--card));
+  --text-primary: hsl(var(--foreground));
+  --text-secondary: hsl(var(--secondary-foreground));
+  --text-muted: hsl(var(--muted-foreground));
+  --text-danger: hsl(var(--destructive));
+  --text-warning: hsl(var(--warning));
+  --border-default: hsl(var(--border));
+  --brand-primary: hsl(var(--primary));
+
+  /* canvas-only surfaces (not part of the shadcn vocabulary). Name matches the
+     `--canvas-backdrop` the design-canvas Workspace references (with a #1a1a1a fallback). */
+  --canvas-backdrop: hsl(220 13% 91%);
+}
+
+[data-theme='dark'],
+.dark {
+  --background: 222 47% 7%;
+  --foreground: 210 40% 98%;
+  --card: 222 47% 11%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222 47% 11%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217 91% 72%;
+  --primary-foreground: 222 47% 11%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 90%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 78% 67%;
+  --destructive-foreground: 0 0% 12%;
+  --border: 217 33% 20%;
+  --input: 217 33% 20%;
+  --ring: 217 91% 60%;
+  --success: 142 60% 50%;
+  --success-foreground: 142 80% 12%;
+  --warning: 38 95% 58%;
+  --warning-foreground: 38 92% 12%;
+
+  --canvas-backdrop: hsl(0 0% 10%);
+}

package/dist/trace/index.d.ts

@@ -1,3 +1,4 @@
+import { a as FlowTrace, F as FlowSpan } from '../flow-types-Cb_AblZs.js';
 import { S as StepAgentActivity } from '../agent-activity-C8ZG0F0M.js';
 
 /**
@@ -154,23 +155,6 @@ interface TimedEvent {
     t: number;
     event: Record<string, unknown>;
 }
-interface FlowSpan {
-    kind: 'pipeline' | 'model' | 'tool';
-    name: string;
-    startMs: number;
-    endMs: number;
-    approx?: boolean;
-    meta?: Record<string, unknown>;
-}
-interface FlowTrace {
-    spans: FlowSpan[];
-    totalMs: number;
-    promptTokens: number;
-    completionTokens: number;
-    /** Computed when per-token pricing is supplied. */
-    costUsd?: number;
-    toolCalls: number;
-}
 /** Parse stored turn-event lines (JSON strings with `_t`) into TimedEvents. */
 declare function timedEventsFromLines(lines: string[]): TimedEvent[];
 /**
@@ -204,4 +188,4 @@ declare function renderHistogram(values: number[], opts?: {
     format?: (v: number) => string;
 }): string;
 
-export { type DistributionSummary, type FlowSpan, type FlowTrace, type LoopTraceEventLike, type MissionFlowStep, type MissionTraceContext, type StepSpanContext, type TimedEvent, buildFlowTrace, childSpanContext, composeMissionFlowTrace, createMissionTraceContext, delegationActivityToFlowSpans, loopTraceEventsToFlowSpans, renderHistogram, renderWaterfall, stepActivityFlowTrace, summarize, timedEventsFromLines, traceEnv };
+export { type DistributionSummary, FlowSpan, FlowTrace, type LoopTraceEventLike, type MissionFlowStep, type MissionTraceContext, type StepSpanContext, type TimedEvent, buildFlowTrace, childSpanContext, composeMissionFlowTrace, createMissionTraceContext, delegationActivityToFlowSpans, loopTraceEventsToFlowSpans, renderHistogram, renderWaterfall, stepActivityFlowTrace, summarize, timedEventsFromLines, traceEnv };

package/dist/trace/index.js

@@ -7,13 +7,13 @@ import {
   summarize,
   timedEventsFromLines,
   traceEnv
-} from "../chunk-5RT6KY4G.js";
+} from "../chunk-GQRL6VNU.js";
 import {
   composeMissionFlowTrace,
   delegationActivityToFlowSpans,
   loopTraceEventsToFlowSpans,
   stepActivityFlowTrace
-} from "../chunk-AFDROJ64.js";
+} from "../chunk-2QI7XV2T.js";
 export {
   buildFlowTrace,
   childSpanContext,

package/dist/web/index.d.ts

@@ -33,7 +33,18 @@ interface RateLimitResult {
     resetAt: number;
 }
 /** KV-backed sliding-window rate limit. Stores recent timestamps per key,
- *  prunes the window, allows until `limit` is hit. */
+ *  prunes the window, allows until `limit` is hit.
+ *
+ *  Read-modify-write is best-effort, NOT atomic: KV has no compare-and-swap, so
+ *  two requests racing on the same key can each read the same pre-state and both
+ *  write — a concurrent burst can momentarily admit up to one extra request per
+ *  racing writer. This is acceptable for coarse abuse limiting; it is NOT a hard
+ *  quota gate.
+ *
+ *  Fail-CLOSED on unreadable state: corrupt/non-array KV (a poisoned or
+ *  truncated value) is treated as a full window, so a tampered key cannot reset
+ *  the count and bypass the limiter. A bare `JSON.parse` here would throw and
+ *  abort the request handler, silently disabling the limit (fail-open). */
 declare function checkRateLimit(kv: KvLike, key: string, limit: number, windowSeconds: number): Promise<RateLimitResult>;
 interface CookieOptions {
     name: string;
@@ -68,5 +79,17 @@ interface SecurityHeaderOptions {
  *  referrer-policy, XSS) + optional product disclaimer/retention. The security
  *  set is generic; the disclaimer/retention are the product's. */
 declare function addSecurityHeaders(response: Response, opts?: SecurityHeaderOptions): Response;
+/**
+ * Canonical media-reference boundary shared by every surface that persists a
+ * media url (sequences clips, design-canvas image/video src). The ONE rule:
+ * remote `http(s)` or a rooted `/api/` path are allowed; everything else is
+ * rejected, with a named reason for known-bad local/inline schemes so the
+ * thrown message is actionable for an LLM planner. The url is trimmed before
+ * the scheme check so leading whitespace cannot smuggle a rejected scheme past
+ * a naive `startsWith`.
+ *
+ * @param what - noun for the error message (e.g. 'media url', 'src').
+ */
+declare function assertMediaUrl(url: string, what?: string): void;
 
-export { type CookieOptions, type JsonObject, type KvLike, type RateLimitResult, type RequestContext, type SecurityHeaderOptions, addSecurityHeaders, checkRateLimit, clearCookieHeader, extractRequestContext, parseJsonObjectBody, readCookieValue, requireString, serializeCookie };
+export { type CookieOptions, type JsonObject, type KvLike, type RateLimitResult, type RequestContext, type SecurityHeaderOptions, addSecurityHeaders, assertMediaUrl, checkRateLimit, clearCookieHeader, extractRequestContext, parseJsonObjectBody, readCookieValue, requireString, serializeCookie };

package/dist/web/index.js

@@ -1,5 +1,6 @@
 import {
   addSecurityHeaders,
+  assertMediaUrl,
   checkRateLimit,
   clearCookieHeader,
   extractRequestContext,
@@ -7,9 +8,10 @@ import {
   readCookieValue,
   requireString,
   serializeCookie
-} from "../chunk-SCG5JJ4C.js";
+} from "../chunk-HFC4BTWJ.js";
 export {
   addSecurityHeaders,
+  assertMediaUrl,
   checkRateLimit,
   clearCookieHeader,
   extractRequestContext,

package/dist/web-react/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { S as StepAgentActivity } from '../agent-activity-C8ZG0F0M.js';
-import { FlowTrace } from '../trace/index.js';
-import { Harness } from '../harness/index.js';
+import { a as FlowTrace } from '../flow-types-Cb_AblZs.js';
 import { C as CatalogModel } from '../model-catalog-BEAEVDaa.js';
+import { Harness } from '../harness/index.js';
 
 /**
  * Client-side chat-stream consumption — the NDJSON parse loop every agent
@@ -248,8 +248,10 @@ declare function useSandboxTerminalConnection(opts: UseSandboxTerminalConnection
 interface SeatPaywallProps {
     /** Human product name shown in the headline, e.g. "Creative". */
     product: string;
-    /** Fired when the user clicks the unlock CTA — route them to checkout. */
-    onCheckout: () => void;
+    /** Fired when the user clicks the unlock CTA — route them to checkout. When
+     *  it returns a promise the button shows a pending state and ignores repeat
+     *  clicks until it settles (no double-charge on a slow checkout open). */
+    onCheckout: () => void | Promise<void>;
     /** Monthly seat price in whole dollars. Default 100. */
     priceUsd?: number;
     /** Included monthly AI usage in whole dollars. Default 50. */
@@ -266,6 +268,59 @@ interface SeatPaywallProps {
  */
 declare function SeatPaywall({ product, onCheckout, priceUsd, includedUsageUsd, tagline, ctaLabel, }: SeatPaywallProps): ReactNode;
 
+/**
+ * Keyboard + pointer model for a trigger-and-popover pair, dependency-free.
+ * Outside-mousedown and Escape both close; Escape also returns focus to the
+ * trigger so keyboard users aren't dropped at the top of the document. The
+ * returned `triggerProps` carry the ARIA contract (`aria-haspopup`/
+ * `aria-expanded`); spread them onto the trigger button.
+ */
+declare function usePopover(open: boolean, setOpen: (open: boolean) => void): {
+    containerRef: react.RefObject<HTMLDivElement | null>;
+    triggerRef: react.RefObject<HTMLButtonElement | null>;
+    triggerProps: {
+        ref: react.RefObject<HTMLButtonElement | null>;
+        'aria-haspopup': true;
+        'aria-expanded': boolean;
+    };
+};
+/**
+ * Guard an async action against double-submit. `run` ignores re-entrant calls
+ * while a promise is in flight and flips `pending` so the caller can disable
+ * the control — the fix for double-charge / double-approve on a slow network.
+ * Settles (success or throw) before clearing, and no-ops state updates after
+ * unmount.
+ */
+declare function usePending(): {
+    pending: boolean;
+    run: (action: () => void | Promise<void>) => void;
+};
+interface ModelPickerProps {
+    value: string;
+    onChange: (id: string) => void;
+    /** Catalogue models — from `GET`ing the app's catalogue route (see
+     *  `runtime/model-catalog`), plus any product-specific entries appended. */
+    models: CatalogModel[];
+    loading?: boolean;
+    /** Render a provider logo/badge; default is a generic sparkle. */
+    renderProviderBadge?: (provider: string) => ReactNode;
+    /** Section label for `featured` models. */
+    recommendedLabel?: string;
+}
+/**
+ * Searchable model picker pill + popover: a featured/recommended section
+ * first, then per-provider groups in catalogue order (the server already
+ * sorts providers by tier).
+ */
+declare function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel }: ModelPickerProps): react.JSX.Element;
+interface EffortPickerProps {
+    value: string;
+    onChange: (id: string) => void;
+}
+/** Reasoning-effort selector pill, styled to match {@link ModelPicker}. Show
+ *  it only when the selected model `supportsReasoning`. */
+declare function EffortPicker({ value, onChange }: EffortPickerProps): react.JSX.Element;
+
 interface AgentSessionControlsProps {
     /** Catalog models — canonical provider-prefixed ids. */
     models: CatalogModel[];
@@ -304,31 +359,6 @@ interface ChatMessageMetrics {
 declare function formatModelCost(msg: ChatMessageMetrics, models: CatalogModel[]): string | null;
 /** "38 tok/s" from completion tokens over first-token→end duration; null when unknown. */
 declare function formatTokensPerSecond(msg: ChatMessageMetrics): string | null;
-interface ModelPickerProps {
-    value: string;
-    onChange: (id: string) => void;
-    /** Catalogue models — from `GET`ing the app's catalogue route (see
-     *  `runtime/model-catalog`), plus any product-specific entries appended. */
-    models: CatalogModel[];
-    loading?: boolean;
-    /** Render a provider logo/badge; default is a generic sparkle. */
-    renderProviderBadge?: (provider: string) => ReactNode;
-    /** Section label for `featured` models. */
-    recommendedLabel?: string;
-}
-/**
- * Searchable model picker pill + popover: a featured/recommended section
- * first, then per-provider groups in catalogue order (the server already
- * sorts providers by tier).
- */
-declare function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel }: ModelPickerProps): react.JSX.Element;
-interface EffortPickerProps {
-    value: string;
-    onChange: (id: string) => void;
-}
-/** Reasoning-effort selector pill, styled to match {@link ModelPicker}. Show
- *  it only when the selected model `supportsReasoning`. */
-declare function EffortPicker({ value, onChange }: EffortPickerProps): react.JSX.Element;
 /** One step of a retained tool run (e.g. a sandbox command + its output). */
 interface ToolRunStep {
     at: string;
@@ -398,6 +428,16 @@ interface ChatMessagesProps {
     onToolCallClick?: (call: ChatToolCallInfo, message: ChatUiMessage) => void;
     /** Per-tool custom detail renderers for expanded tool cards. */
     toolRenderers?: ToolDetailRenderers;
+    /** Stream-error affordance: when the turn failed (a thrown transport error or
+     *  a loop-level `onErrorEvent`), pass the message here to render an error row.
+     *  A failed turn otherwise just stops with no UI signal. */
+    error?: string | null;
+    /** Retry control shown on the error row; omit to render the error without a
+     *  retry button (e.g. when the product retries automatically). */
+    onRetry?: () => void;
+    /** Zero-state renderer, shown when there are no messages and the turn is
+     *  neither loading nor errored. Omit to render nothing (current behavior). */
+    renderEmpty?: () => ReactNode;
 }
 interface ProposalApprovalHandlers {
     onApprove: (proposalId: string, toolCallId: string) => void | Promise<void>;
@@ -412,6 +452,6 @@ type ToolDetailRenderers = Record<string, (call: ChatToolCallInfo, message: Chat
  * model id, tokens/sec, and cost, plus a collapsible thinking section and
  * tool-call chips.
  */
-declare function ChatMessages({ messages, models, renderMarkdown, renderExtras, userLabel, agentLabel, loading, approval, onToolCallClick, toolRenderers, }: ChatMessagesProps): react.JSX.Element;
+declare function ChatMessages({ messages, models, renderMarkdown, renderExtras, userLabel, agentLabel, loading, approval, onToolCallClick, toolRenderers, error, onRetry, renderEmpty, }: ChatMessagesProps): react.JSX.Element;
 
-export { type ActivityTone, type AgentActivityPage, AgentActivityPanel, type AgentActivityPanelProps, type AgentActivityRecord, AgentSessionControls, type AgentSessionControlsProps, type ChatMessageMetrics, ChatMessages, type ChatMessagesProps, type ChatStreamCallbacks, type ChatStreamToolCall, type ChatStreamToolResult, type ChatToolCallInfo, type ChatUiMessage, type ConsumeChatStreamResult, EffortPicker, type EffortPickerProps, FlowWaterfall, type FlowWaterfallProps, MissionActivityLane, type MissionActivityLaneProps, ModelPicker, type ModelPickerProps, type ProposalApprovalHandlers, ProviderLogo, type ProviderLogoProps, RunDrillIn, type RunDrillInProps, type SandboxTerminalConnection, type SandboxTerminalConnectionResponse, SeatPaywall, type SeatPaywallProps, type SmoothRevealOptions, type StreamChatOptions, type ToolDetailRenderers, type ToolRunRecord, type ToolRunStep, type UseSandboxTerminalConnectionOptions, type UseSandboxTerminalConnectionResult, type WaterfallRow, activityTone, consumeChatStream, dispatchChatStreamLine, formatActivityCost, formatActivityDuration, formatModelCost, formatTokensPerSecond, mergeActivityPages, nextRevealCount, pendingApprovalOf, streamChatTurn, useSandboxTerminalConnection, useSmoothText, waterfallLayout };
+export { type ActivityTone, type AgentActivityPage, AgentActivityPanel, type AgentActivityPanelProps, type AgentActivityRecord, AgentSessionControls, type AgentSessionControlsProps, type ChatMessageMetrics, ChatMessages, type ChatMessagesProps, type ChatStreamCallbacks, type ChatStreamToolCall, type ChatStreamToolResult, type ChatToolCallInfo, type ChatUiMessage, type ConsumeChatStreamResult, EffortPicker, type EffortPickerProps, FlowWaterfall, type FlowWaterfallProps, MissionActivityLane, type MissionActivityLaneProps, ModelPicker, type ModelPickerProps, type ProposalApprovalHandlers, ProviderLogo, type ProviderLogoProps, RunDrillIn, type RunDrillInProps, type SandboxTerminalConnection, type SandboxTerminalConnectionResponse, SeatPaywall, type SeatPaywallProps, type SmoothRevealOptions, type StreamChatOptions, type ToolDetailRenderers, type ToolRunRecord, type ToolRunStep, type UseSandboxTerminalConnectionOptions, type UseSandboxTerminalConnectionResult, type WaterfallRow, activityTone, consumeChatStream, dispatchChatStreamLine, formatActivityCost, formatActivityDuration, formatModelCost, formatTokensPerSecond, mergeActivityPages, nextRevealCount, pendingApprovalOf, streamChatTurn, usePending, usePopover, useSandboxTerminalConnection, useSmoothText, waterfallLayout };