@mcp-b/react-components 0.55.0 → 0.56.1

package/dist/styles/app-icon.css

@@ -3,7 +3,7 @@
    silhouette, so a transparent favicon casts its shape, not an invisible box. */
 .avatar.app-icon {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
-  --sigvelo-recipe-app-icon-radius: 30%;
+  --sigvelo-recipe-app-icon-radius: var(--sigvelo-radius-md);
 
   position: relative;
   display: inline-flex;
@@ -28,7 +28,6 @@
 
 .app-icon[data-app-icon-size="sm"] {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-6);
-  --sigvelo-recipe-app-icon-radius: 37.5%;
 }
 
 .app-icon[data-app-icon-size="lg"] {

package/dist/styles/base.css

@@ -27,33 +27,32 @@
  * `round` in the block below. audit:css-recipes fails if that list falls out of
  * sync with the stylesheets.
  */
-:where(*) {
+:where(*),
+:where(*)::before,
+:where(*)::after {
   corner-shape: var(--sigvelo-corner-shape);
 }
 
+/* Pseudo-elements follow :where(), since they are invalid inside its selector list. */
 /* sigvelo-pill-shapes:start */
 :where(
   .approval__key,
   .avatar[data-shape="circle"],
   .avatar-group__count,
   .browser-run-panel__tab-glyph,
+  .browser-replay .replayer-mouse.touch-device,
   .chain-of-thought__search-result,
   .chain-of-thought__step-indicator,
   .codex-model-selector__trigger,
-  .codex-model-selector__trigger::before,
   .empty-state__icon,
   .inline-citation__trigger,
   .media-preview-card__play,
   .manager-office__unread-dot,
-  .manager-office__employee-nav::-webkit-scrollbar-thumb,
-  :where([data-layout="chat"]) .manager-office__employee-link[aria-current="page"]::after,
-  .menu__radio-indicator::before,
   .message-scroller__button,
   .plan-summary__trigger,
   .plan__step-indicator,
   .prompt-input__button[data-responsive-label],
   .prompt-input__context-trigger,
-  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before,
   .prompt-input__permissions-trigger,
   .prompt-input__recording-button,
   .prompt-input__stop,
@@ -62,24 +61,34 @@
   .radio,
   .radio__indicator,
   .scroll-area__thumb,
+  .sigvelo-floating-prompt > *,
   .slider__indicator,
   .slider__thumb,
   .slider__track,
   .stepper__indicator,
   .stepper__separator,
   .stepper__trigger,
-  .subagent-run__milestone::before,
   .switch,
   .switch__thumb,
-  .task__item::before,
   .test-results__test-status,
-  .think-full-app__resizer::before,
   .think-routine__routine-status,
+  .think-thread-status-dot,
   [data-slot="meter-indicator"],
   [data-slot="meter-track"],
   [data-slot="progress-indicator"],
   [data-slot="progress-track"]
-) {
+),
+:where(.browser-replay .replayer-mouse)::after,
+:where(.codex-model-selector__trigger)::before,
+:where(.github-motion-mark)::before,
+:where(.github-motion-mark)::after,
+:where(.manager-office__employee-nav)::-webkit-scrollbar-thumb,
+:where(:where([data-layout="chat"]) .manager-office__employee-link[aria-current="page"])::after,
+:where(.menu__radio-indicator)::before,
+:where(.prompt-input__dictation[data-listening] .prompt-input__dictation-icon)::before,
+:where(.subagent-run__milestone)::before,
+:where(.task__item)::before,
+:where(.think-full-app__resizer)::before {
   --sigvelo-corner-shape: round;
 }
 /* sigvelo-pill-shapes:end */

package/dist/styles/brand-loading.css

@@ -47,6 +47,20 @@
   text-align: center;
 }
 
+/* A brief pending mount should not flash a full-strength logo. Keep the
+   region and its announcement present; only the artwork and copy fade in. */
+.brand-loading__mark,
+.brand-loading__label {
+  transition: opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
+}
+
+@starting-style {
+  .brand-loading__mark,
+  .brand-loading__label {
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce), (forced-colors: active) {
   .brand-loading__mark::after {
     display: none;

package/dist/styles/brand.test.ts

@@ -156,3 +156,24 @@ test("OS-following mode uses the same Sigvelo palette", () => {
     matchMedia("(prefers-color-scheme: dark)").matches ? "rgb(23, 23, 22)" : "rgb(247, 247, 244)",
   );
 });
+
+test("shared Squircle corners preserve true circular pseudo-elements and button variant shape", () => {
+  root.removeAttribute("data-preset");
+  root.removeAttribute("data-style");
+  const primary = document.createElement("button");
+  primary.className = "button button--normal button--primary";
+  const destructive = document.createElement("button");
+  destructive.className = "button button--normal button--destructive";
+  const mark = document.createElement("span");
+  mark.className = "github-motion-mark";
+  document.body.append(primary, destructive, mark);
+  expect(getComputedStyle(destructive).borderRadius).toBe(getComputedStyle(primary).borderRadius);
+  if (CSS.supports("corner-shape", "superellipse(1.5)")) {
+    expect(getComputedStyle(primary).getPropertyValue("corner-shape")).toBe("superellipse(1.5)");
+    expect(getComputedStyle(primary, "::after").getPropertyValue("corner-shape")).toBe(
+      "superellipse(1.5)",
+    );
+    expect(getComputedStyle(mark, "::before").getPropertyValue("corner-shape")).toBe("round");
+    expect(getComputedStyle(mark, "::after").getPropertyValue("corner-shape")).toBe("round");
+  }
+});

package/dist/styles/browser-replay.css

@@ -96,7 +96,7 @@
   width: 20px;
   height: 20px;
   background: var(--sigvelo-color-focus);
-  border-radius: 100%;
+  border-radius: var(--sigvelo-radius-circle);
   transform: translate(-50%, -50%);
   opacity: 0.3;
 }
@@ -114,7 +114,7 @@
   border-color: transparent;
   border-style: solid;
   border-width: 4px;
-  border-radius: 100%;
+  border-radius: var(--sigvelo-radius-circle);
   transition:
     left 0s linear,
     top 0s linear,

package/dist/styles/button.css

@@ -83,8 +83,6 @@
 }
 
 .button--normal.button--destructive {
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
-
   background-color: var(--sigvelo-color-danger-bg);
   color: var(--sigvelo-color-danger-text-on-bg);
 }

package/dist/styles/checkbox.css

@@ -9,7 +9,7 @@
   flex-shrink: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
-  border-radius: calc(var(--sigvelo-radius-md) - 4px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-1));
   background-color: var(--sigvelo-color-canvas);
   outline: none;
   cursor: pointer;

package/dist/styles/composition-motion.css

@@ -50,7 +50,7 @@
   }
 }
 
-/* React owns native snapshots; the class comes from <ViewTransition>. */
+/* Snapshot ownership stays with the caller: Router for routes, React for local Suspense demos. */
 ::view-transition {
   pointer-events: none;
 }
@@ -60,12 +60,22 @@
   animation-timing-function: var(--sigvelo-motion-ease-change);
 }
 
+/* A single Router-owned crossfade. Streaming and refetches never start this type. */
+:root:active-view-transition-type(sigvelo-navigation)::view-transition-group(root) {
+  animation-duration: var(--sigvelo-motion-duration-disclosure);
+  animation-timing-function: var(--sigvelo-motion-ease-change);
+}
+
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(.sigvelo-layout-transition) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
     animation: none !important;
   }
 }
 
-:root[data-motion="reduce"]::view-transition-group(.sigvelo-layout-transition) {
+:root[data-motion="reduce"]::view-transition-group(*),
+:root[data-motion="reduce"]::view-transition-old(*),
+:root[data-motion="reduce"]::view-transition-new(*) {
   animation: none !important;
 }

package/dist/styles/github-motion-mark.css

@@ -26,7 +26,7 @@
 .github-motion-mark::before {
   inset: -0.22em;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentColor;
-  border-radius: 999px;
+  border-radius: var(--sigvelo-radius-circle);
   opacity: 0.24;
   transform-origin: 50% 50%;
   animation: github-motion-mark-ring 2.6s ease-out infinite;
@@ -35,7 +35,7 @@
 .github-motion-mark::after {
   inline-size: 0.24em;
   block-size: 0.24em;
-  border-radius: 999px;
+  border-radius: var(--sigvelo-radius-circle);
   background: currentColor;
   opacity: 0.55;
   transform: translate(0.48em, -0.46em);

package/dist/styles/responsive-sidebar-shell.css

@@ -272,6 +272,16 @@
     display: contents;
   }
 
+  /* Rich title triggers need the space left by the actual controls, rather
+     than the plain title's 45vw cap, to keep activity counts and a readable name. */
+  .app-top-bar[data-compact-leading="trigger"] {
+    grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
+  }
+
+  .app-top-bar[data-compact-leading="trigger"] .app-top-bar__title {
+    max-inline-size: 100%;
+  }
+
   .responsive-sidebar-shell__title-trigger {
     inline-size: auto;
     max-inline-size: 100%;
@@ -290,7 +300,7 @@
     box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   }
 
-  .responsive-sidebar-shell__title-trigger span {
+  .responsive-sidebar-shell__title-trigger > span {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/styles/search-field.css

@@ -4,7 +4,7 @@
   --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
   --sigvelo-recipe-control-line-height: var(--sigvelo-density-compact-control-line-height);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
-  --sigvelo-recipe-control-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-xl);
   --sigvelo-recipe-focus-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   --sigvelo-focus-offset: -2px;
 }

package/dist/styles/tabs.css

@@ -148,7 +148,7 @@
 
 .tabs--bordered .tabs__tab {
   border-block-end: none;
-  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-0-5));
   margin-block-end: 0;
 }
 

package/dist/styles/think-routine.css

@@ -79,8 +79,6 @@
 }
 
 .think-routine__search {
-  --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
-
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
   margin-block-end: var(--sigvelo-spacing-2);

package/dist/styles/think-thread-picker.css

@@ -43,6 +43,7 @@
 }
 
 .think-thread-status-indicators {
+  flex: 0 0 auto;
   min-inline-size: 0;
   display: inline-flex;
   align-items: center;
@@ -66,6 +67,18 @@
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
+.think-thread-status-dot {
+  flex: none;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  border-radius: var(--sigvelo-radius-full);
+  background: currentColor;
+}
+
+.think-thread-status-indicators__item .think-thread-status-dot {
+  margin-inline: var(--sigvelo-spacing-1);
+}
+
 .think-thread-status-indicators__item[data-status="running"] {
   color: var(--sigvelo-color-primary-text);
 }
@@ -260,11 +273,6 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-/* The six statuses this rule used to list were `isThreadBusy` written out a
-   second time, and those are exactly the ones that render SpinnerIcon, which
-   spins itself. A DotIcon never needed the rule and would have started turning
-   the moment the two lists disagreed. */
-
 .think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-danger-text);
 }
@@ -343,6 +351,11 @@
 }
 
 @media (forced-colors: active) {
+  .think-thread-status-dot {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
   .think-thread-picker {
     border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;

package/dist/styles/toggle-group.css

@@ -19,7 +19,7 @@
 .toggle-group__item {
   color: var(--sigvelo-color-text-muted);
   border: none;
-  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-0-5));
 }
 
 .toggle-group__item:hover:not([data-disabled]) {
@@ -65,7 +65,7 @@
   inset-block: var(--sigvelo-spacing-1);
   inline-size: var(--toggle-group-thumb-size, 0);
   translate: var(--toggle-group-thumb-start, 0) 0;
-  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-0-5));
   background-color: var(--sigvelo-color-canvas);
   box-shadow: var(--sigvelo-elevation-raised);
   transition:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.55.0",
+  "version": "0.56.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -54,13 +54,13 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.55.0"
+    "@mcp-b/design-tokens": "0.56.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",
-    "@cloudflare/codemode": "^0.5.2",
-    "@cloudflare/shell": "^0.4.3",
-    "@cloudflare/think": "^0.18.0",
+    "@cloudflare/codemode": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-codemode-0.5.2.tgz",
+    "@cloudflare/shell": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-shell-0.4.3.tgz",
+    "@cloudflare/think": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/cloudflare-think-0.18.0.tgz",
     "@cloudflare/workers-types": "^5.20260811.1",
     "@storybook/addon-a11y": "^10.5.7",
     "@storybook/addon-docs": "^10.5.7",
@@ -79,7 +79,7 @@
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.10",
     "@vitest/mocker": "^4.1.10",
-    "agents": "^0.23.0",
+    "agents": "https://github.com/WebMCP-org/do-runtime/releases/download/rook-sdk-155b267477ca/agents-0.23.0.tgz",
     "ai": "^6.0.247",
     "cloudflare": "^7.0.0",
     "oversight-lint": "0.7.1",

package/dist/SessionCompaction-CmTJFpzj.d.ts

@@ -1,89 +0,0 @@
-import { ChatStatus, UIMessage } from "ai";
-
-//#region src/components/agents-sdk/SessionCompaction.d.ts
-type SessionStatusPhase = "idle" | "compacting";
-interface SessionStatusFrame {
-  phase: SessionStatusPhase;
-  /** Present on the idle frame that follows a successful compaction. */
-  compacted: boolean;
-  /**
-   * Session's own estimate for the history this frame describes, or null when
-   * the frame omits it or carries a non-finite value. Not provider-reported
-   * usage — never render it as an exact token count, and never feed it to the
-   * `Context` ring, which reads `metadata.usage`.
-   */
-  tokenEstimate: number | null;
-  /**
-   * The same estimate taken before the compaction this frame reports, from its
-   * `compacted` payload. Null on every other frame. Both numbers come from one
-   * estimator over one history, so their difference is a meaningful size even
-   * though neither is exact.
-   */
-  tokensBefore: number | null;
-}
-/**
- * Parse a raw websocket payload as a `cf_agent_session` status frame.
- * Returns null for every other frame on the connection.
- */
-declare function parseSessionStatusFrame(data: unknown): SessionStatusFrame | null;
-/**
- * Parse a raw websocket payload as a `cf_agent_session_error` frame,
- * returning its error text. Null for every other frame on the connection.
- */
-declare function parseSessionErrorFrame(data: unknown): string | null;
-/** The message-frame surface of a `useAgent` connection. */
-interface SessionFrameSource {
-  addEventListener(type: "message", listener: (event: MessageEvent) => void): void;
-  removeEventListener(type: "message", listener: (event: MessageEvent) => void): void;
-}
-interface UseSessionCompactionOptions<MessageT extends UIMessage> {
-  /** The conversation agent's `useAgent` connection. */
-  agent: SessionFrameSource;
-  /** The conversation's `useAgentChat` value (status + local view setter). */
-  chat: {
-    status: ChatStatus;
-    setMessages: (messages: MessageT[]) => void;
-  };
-  /** Server read used to reload the transcript after a compaction lands. */
-  getMessages: () => Promise<MessageT[]>;
-}
-/**
- * How much a landed compaction shortened the history, per Session's own
- * estimator. A UI may show the difference as an approximate size; it must not
- * present either number as exact usage.
- */
-interface SessionCompactionSize {
-  tokensBefore: number;
-  tokensAfter: number;
-}
-interface UseSessionCompactionResult {
-  compacting: boolean;
-  /**
-   * Size of the compaction that landed most recently on this connection, or
-   * null when none has landed or the frames carried no usable estimates. A new
-   * object per compaction, so a consumer can dismiss one acknowledgement by
-   * identity and still show the next. Cleared when the next compaction starts.
-   */
-  lastCompaction: SessionCompactionSize | null;
-  /**
-   * Set when the post-compaction transcript reload rejected — the local view
-   * is stale relative to the server until a retry succeeds. Surface it
-   * ("Transcript may be out of date"); the hook retries on the next status
-   * transition to `"ready"`.
-   */
-  reloadError: unknown;
-  /**
-   * Error text from the last `cf_agent_session_error` frame — the only signal
-   * a user who ran /compact gets when the server-side compaction itself fails
-   * (the phase just flips back to idle with no `compacted` payload). Cleared
-   * when the next compaction starts.
-   */
-  sessionError: string | null;
-}
-declare function useSessionCompaction<MessageT extends UIMessage>({
-  agent,
-  chat,
-  getMessages
-}: UseSessionCompactionOptions<MessageT>): UseSessionCompactionResult;
-//#endregion
-export { UseSessionCompactionOptions as a, parseSessionStatusFrame as c, SessionStatusPhase as i, useSessionCompaction as l, SessionFrameSource as n, UseSessionCompactionResult as o, SessionStatusFrame as r, parseSessionErrorFrame as s, SessionCompactionSize as t };

package/dist/components/agents-sdk/SessionCompaction.d.ts

@@ -1,2 +0,0 @@
-import { a as UseSessionCompactionOptions, c as parseSessionStatusFrame, i as SessionStatusPhase, l as useSessionCompaction, n as SessionFrameSource, o as UseSessionCompactionResult, r as SessionStatusFrame, s as parseSessionErrorFrame, t as SessionCompactionSize } from "../../SessionCompaction-CmTJFpzj.js";
-export { SessionCompactionSize, SessionFrameSource, SessionStatusFrame, SessionStatusPhase, UseSessionCompactionOptions, UseSessionCompactionResult, parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };

package/dist/components/agents-sdk/SessionCompaction.js

@@ -1,140 +0,0 @@
-import * as React from "react";
-//#region src/components/agents-sdk/SessionCompaction.ts
-/**
-* Client-side session-compaction plumbing for Think conversations.
-*
-* The Agents Session broadcasts `cf_agent_session` status frames to every
-* connected client: `phase` flips to `"compacting"` while a compaction runs
-* and back to `"idle"` when it settles, with a `compacted` payload on the
-* idle frame when an overlay was actually written. Think refreshes only its
-* server-side message cache after a compaction (`_syncMessages()` does not
-* push to clients), so a connected transcript keeps showing the uncompacted
-* history until its next `getMessages()`. `useSessionCompaction` closes that
-* gap: it tracks the live phase for a "Compacting context…" affordance and
-* reloads the transcript once a compaction lands — deferring the reload to
-* the end of the turn when one is streaming, so a mid-turn proactive
-* compaction never clobbers streamed state.
-*
-* Compose the command with `useAgentChatCompaction`: supply the app's
-* compaction callable, then place its command and notice explicitly.
-*
-* This module is the "local adapter … documented runtime-only mirror" that
-* docs/think-session-ui.md calls for: upstream exports no payload types or
-* client hook for these frames. The doc records the complete frame shapes;
-* this adapter consumes `phase`, the presence of `compacted`, the error string
-* of `cf_agent_session_error`, and the two estimates that size a landed
-* compaction (`tokenEstimate` and `compacted.tokensBefore`). Every field but
-* `phase` degrades to null rather than throwing, so an upstream field change
-* costs detail, never the UI. Per that doc, `tokenThreshold` is the
-* auto-compaction threshold, not the model context window — it stays unread
-* here, and neither estimate may drive the `Context` ring, which reads
-* provider-reported `metadata.usage`.
-*
-* @see ../../docs/think-session-ui.md
-* @see https://github.com/cloudflare/agents/blob/main/docs/agents/sessions.md#compaction
-*/
-/** Finite numbers only — an absent or malformed field degrades to null. */
-function finiteNumber(value) {
-	return typeof value === "number" && Number.isFinite(value) ? value : null;
-}
-/**
-* Parse a raw websocket payload as a `cf_agent_session` status frame.
-* Returns null for every other frame on the connection.
-*/
-function parseSessionStatusFrame(data) {
-	if (typeof data !== "string") return null;
-	let message;
-	try {
-		message = JSON.parse(data);
-	} catch {
-		return null;
-	}
-	if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session" || !("phase" in message) || message.phase !== "idle" && message.phase !== "compacting") return null;
-	const compacted = "compacted" in message && message.compacted != null ? message.compacted : null;
-	return {
-		phase: message.phase,
-		compacted: compacted !== null,
-		tokenEstimate: finiteNumber("tokenEstimate" in message ? message.tokenEstimate : void 0),
-		tokensBefore: typeof compacted === "object" && compacted !== null && "tokensBefore" in compacted ? finiteNumber(compacted.tokensBefore) : null
-	};
-}
-/**
-* Parse a raw websocket payload as a `cf_agent_session_error` frame,
-* returning its error text. Null for every other frame on the connection.
-*/
-function parseSessionErrorFrame(data) {
-	if (typeof data !== "string") return null;
-	let message;
-	try {
-		message = JSON.parse(data);
-	} catch {
-		return null;
-	}
-	if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session_error" || !("error" in message) || typeof message.error !== "string") return null;
-	return message.error;
-}
-function useSessionCompaction({ agent, chat, getMessages }) {
-	const [compacting, setCompacting] = React.useState(false);
-	const [refreshPending, setRefreshPending] = React.useState(false);
-	const [reloadError, setReloadError] = React.useState(null);
-	const [sessionError, setSessionError] = React.useState(null);
-	const [lastCompaction, setLastCompaction] = React.useState(null);
-	React.useEffect(() => {
-		setCompacting(false);
-		setSessionError(null);
-		setRefreshPending(false);
-		setReloadError(null);
-		setLastCompaction(null);
-		const onMessage = (event) => {
-			const frame = parseSessionStatusFrame(event.data);
-			if (frame) {
-				setCompacting(frame.phase === "compacting");
-				if (frame.phase === "compacting") {
-					setSessionError(null);
-					setLastCompaction(null);
-				}
-				if (frame.compacted) {
-					setRefreshPending(true);
-					setLastCompaction(frame.tokensBefore !== null && frame.tokenEstimate !== null ? {
-						tokensAfter: frame.tokenEstimate,
-						tokensBefore: frame.tokensBefore
-					} : null);
-				}
-				return;
-			}
-			const error = parseSessionErrorFrame(event.data);
-			if (error !== null) {
-				setCompacting(false);
-				setSessionError(error);
-			}
-		};
-		agent.addEventListener("message", onMessage);
-		return () => agent.removeEventListener("message", onMessage);
-	}, [agent]);
-	const { status, setMessages } = chat;
-	React.useEffect(() => {
-		if (!refreshPending || status !== "ready") return;
-		let stale = false;
-		getMessages().then((messages) => {
-			if (stale) return;
-			setRefreshPending(false);
-			setReloadError(null);
-			setMessages(messages);
-		}, (error) => {
-			if (stale) return;
-			console.error("Transcript reload after compaction failed", error);
-			setReloadError(error);
-		});
-		return () => {
-			stale = true;
-		};
-	}, [refreshPending, status]);
-	return {
-		compacting,
-		lastCompaction,
-		reloadError,
-		sessionError
-	};
-}
-//#endregion
-export { parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };