@mcp-b/react-components 0.23.0 → 0.25.0

package/dist/components/WorkspaceHeader.js

@@ -1,4 +1,4 @@
-import { W as RefreshIcon } from "../icons-ua6f_GH3.js";
+import { W as RefreshIcon } from "../icons-w5PpKGRz.js";
 import { AppTopBar } from "./AppTopBar.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { $ as TerminalIcon, A as InfoIcon, B as PaperclipIcon, C as EyeOffIcon, D as HashIcon, E as FolderOpenIcon, F as MicrophoneIcon, G as QueueIcon, H as PencilIcon, I as MinusIcon, J as SidebarIcon, K as RefreshIcon, L as MonitorIcon, M as MaximizeIcon, N as McpIcon, O as IconProps, P as MessageSquareIcon, Q as SunIcon, R as MoonIcon, S as EyeIcon, T as FolderIcon, U as PlayIcon, V as PauseIcon, W as PlusIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, _ as CopyIcon, a as ArrowUpIcon, b as DownloadIcon, c as BoxIcon, d as CalendarIcon, et as TrashIcon, f as CheckIcon, g as CodeIcon, h as ChevronRightIcon, i as ArrowRightIcon, j as LinkIcon, k as ImageIcon, l as BrainIcon, m as ChevronLeftIcon, n as ArrowDownIcon, nt as WrenchIcon, o as ArrowUpRightIcon, p as ChevronDownIcon, q as SearchIcon, r as ArrowLeftIcon, rt as XIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WarningIcon, u as BrandIconProps, v as DiscordIcon, w as FileIcon, x as EllipsisIcon, y as DotIcon, z as MoveToFrontIcon } from "../icons-wP1yFUXF.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as TargetIcon, A as InfoIcon, B as PaperclipIcon, C as EyeOffIcon, D as HashIcon, E as FolderOpenIcon, F as MicrophoneIcon, G as QueueIcon, H as PencilIcon, I as MinusIcon, J as SidebarIcon, K as RefreshIcon, L as MonitorIcon, M as MaximizeIcon, N as McpIcon, O as IconProps, P as MessageSquareIcon, Q as SunIcon, R as MoonIcon, S as EyeIcon, T as FolderIcon, U as PlayIcon, V as PauseIcon, W as PlusIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, _ as CopyIcon, a as ArrowUpIcon, b as DownloadIcon, c as BoxIcon, d as CalendarIcon, et as TerminalIcon, f as CheckIcon, g as CodeIcon, h as ChevronRightIcon, i as ArrowRightIcon, it as XIcon, j as LinkIcon, k as ImageIcon, l as BrainIcon, m as ChevronLeftIcon, n as ArrowDownIcon, nt as WarningIcon, o as ArrowUpRightIcon, p as ChevronDownIcon, q as SearchIcon, r as ArrowLeftIcon, rt as WrenchIcon, s as BookmarkIcon, t as ArchiveIcon, tt as TrashIcon, u as BrandIconProps, v as DiscordIcon, w as FileIcon, x as EllipsisIcon, y as DotIcon, z as MoveToFrontIcon } from "../icons-Cih3W-zM.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { $ as WarningIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SquareIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as InfoIcon, P as MinusIcon, Q as TrashIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as SunIcon, Y as StopIcon, Z as TerminalIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as WrenchIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SpinnerIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as XIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../icons-ua6f_GH3.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as TrashIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SquareIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as InfoIcon, P as MinusIcon, Q as TerminalIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as SunIcon, Y as StopIcon, Z as TargetIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, nt as XIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SpinnerIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WrenchIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../icons-w5PpKGRz.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-TWq8nZhc.js → copy-button-Buxmtmp9.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, g as CopyIcon } from "./icons-ua6f_GH3.js";
+import { d as CheckIcon, g as CopyIcon } from "./icons-w5PpKGRz.js";
 import { IconButton } from "./components/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{icons-wP1yFUXF.d.ts → icons-Cih3W-zM.d.ts}

@@ -281,10 +281,15 @@ declare const SunIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
+declare const TargetIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
 declare const MaximizeIcon: ({
   size,
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { TerminalIcon as $, InfoIcon as A, PaperclipIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MicrophoneIcon as F, QueueIcon as G, PencilIcon as H, MinusIcon as I, SidebarIcon as J, RefreshIcon as K, MonitorIcon as L, MaximizeIcon as M, McpIcon as N, IconProps as O, MessageSquareIcon as P, SunIcon as Q, MoonIcon as R, EyeIcon as S, FolderIcon as T, PlayIcon as U, PauseIcon as V, PlusIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, CopyIcon as _, ArrowUpIcon as a, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, LinkIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SearchIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoveToFrontIcon as z };
+export { TargetIcon as $, InfoIcon as A, PaperclipIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MicrophoneIcon as F, QueueIcon as G, PencilIcon as H, MinusIcon as I, SidebarIcon as J, RefreshIcon as K, MonitorIcon as L, MaximizeIcon as M, McpIcon as N, IconProps as O, MessageSquareIcon as P, SunIcon as Q, MoonIcon as R, EyeIcon as S, FolderIcon as T, PlayIcon as U, PauseIcon as V, PlusIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, CopyIcon as _, ArrowUpIcon as a, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, TerminalIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, XIcon as it, LinkIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SearchIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TrashIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoveToFrontIcon as z };

package/dist/{icons-ua6f_GH3.js → icons-w5PpKGRz.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
-import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
+import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
@@ -87,6 +87,7 @@ const McpIcon = brandIcon(SiModelcontextprotocol);
 const DiscordIcon = brandIcon(SiDiscord);
 const MoonIcon = icon(Moon);
 const SunIcon = icon(Sun);
+const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { WarningIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SquareIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon as P, TrashIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, SunIcon as X, StopIcon as Y, TerminalIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, WrenchIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, ArrowUpRightIcon as o, ChevronLeftIcon as p, SpinnerIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, XIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };
+export { TrashIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SquareIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon as P, TerminalIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, SunIcon as X, StopIcon as Y, TargetIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, WarningIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, XIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SpinnerIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, WrenchIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/styles/activity.css

@@ -85,6 +85,12 @@
   padding-inline: var(--sigvelo-spacing-2);
 }
 
+/* Reveal row for step logs capped at the trailing window. */
+.activity__show-earlier {
+  align-self: flex-start;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .activity__item {
   display: flex;
   align-items: baseline;

package/dist/styles/agent-chat.css

@@ -1,5 +1,6 @@
 .agent-chat {
   --agent-chat-content-max-inline-size: 64rem;
+  --agent-chat-composer-scrim-fade: 2.5rem;
 
   container: agent-chat / inline-size;
   position: relative;
@@ -21,13 +22,20 @@
 /* Room for the last message to scroll clear of the floating composer.
    --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
-  gap: var(--sigvelo-spacing-3);
+  /* Also the virtual rows' block-start offset — keep padding and rows in
+     lockstep (see .message-scroller__virtual-item). Row spacing is NOT css
+     gap: rows are absolutely positioned, so the virtualizer's JS gap option
+     owns it (see VirtualMessageScroller). */
+  --message-scroller-virtual-block-start: var(--sigvelo-spacing-8);
+
   min-inline-size: 0;
   max-inline-size: 100%;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
-  padding-block: var(--sigvelo-spacing-8)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2));
+  /* Clearance = composer + its scrim band, so a transcript resting at the
+     bottom never sits inside the fade. */
+  padding-block: var(--message-scroller-virtual-block-start)
+    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade));
   padding-inline: var(--sigvelo-spacing-4);
 }
 
@@ -272,13 +280,21 @@
   padding: 0 var(--sigvelo-spacing-6) var(--sigvelo-spacing-6);
 }
 
+/* Solid behind the composer itself, dissolving upward so passing transcript
+   content fades into the surface instead of hitting a hard edge (Codex and
+   Claude both ship an equivalent bottom fade band). */
 .agent-chat__composer::after {
   position: absolute;
   z-index: -1;
   inset: 0;
+  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade));
   content: "";
   pointer-events: none;
-  background-color: var(--sigvelo-color-surface);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--sigvelo-color-surface) var(--agent-chat-composer-scrim-fade)
+  );
 }
 
 .agent-chat__composer > .prompt-input {

package/dist/styles/composition-motion.css

@@ -52,32 +52,22 @@
   }
 }
 
-/*
- * Native snapshot motion uses the major-layout rhythm instead of Chrome's UA
- * default. Element-scoped pseudo-trees attach to their transition root, while
- * the :root selector also covers the document fallback.
- */
-:where(
-  :root,
-  .workspace-explorer,
-  .responsive-sidebar-shell__frame,
-  .think-execution-workbench,
-  .think-routine-library,
-  .think-full-app__view-scope,
-  .think-full-app__workbench-panel
-)::view-transition {
+/* React owns native snapshots; the class comes from <ViewTransition>. */
+::view-transition {
   pointer-events: none;
 }
 
-:where(
-  :root,
-  .workspace-explorer,
-  .responsive-sidebar-shell__frame,
-  .think-execution-workbench,
-  .think-routine-library,
-  .think-full-app__view-scope,
-  .think-full-app__workbench-panel
-)::view-transition-group(*) {
+::view-transition-group(.sigvelo-layout-transition) {
   animation-duration: var(--sigvelo-motion-duration-layout);
   animation-timing-function: var(--sigvelo-motion-ease-change);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(.sigvelo-layout-transition) {
+    animation: none !important;
+  }
+}
+
+:root[data-motion="reduce"]::view-transition-group(.sigvelo-layout-transition) {
+  animation: none !important;
+}

package/dist/styles/goal.css

@@ -0,0 +1,57 @@
+.goal {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  min-block-size: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.goal__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__content {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 0 var(--sigvelo-spacing-1);
+  align-items: baseline;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.goal__title {
+  min-inline-size: 0;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.goal__objective {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__meta {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__objective + .goal__meta::before,
+.goal__title + .goal__meta::before {
+  content: "\00b7";
+  margin-inline-end: var(--sigvelo-spacing-1);
+}
+
+.goal__actions {
+  display: inline-flex;
+  flex: none;
+  gap: var(--sigvelo-spacing-1);
+  align-items: center;
+  margin-inline-start: auto;
+}

package/dist/styles/index.css

@@ -65,6 +65,7 @@
 @import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
+@import "./shell.css" layer(components);
 @import "./slider.css" layer(components);
 @import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
@@ -97,6 +98,7 @@
 @import "./codex-model-selector.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
+@import "./goal.css" layer(components);
 @import "./inline-citation.css" layer(components);
 @import "./message.css" layer(components);
 @import "./model-selector.css" layer(components);

package/dist/styles/message-scroller.css

@@ -41,6 +41,31 @@
 .message-scroller__item {
   min-width: 0;
   flex-shrink: 0;
+  /* Off-screen rows skip layout/paint entirely (Codex ships the same pair on
+     turn content). `auto` keeps the last rendered size once measured; 15rem is
+     only the pre-first-render estimate, so scroll math stays sane. */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 15rem;
+}
+
+/* Virtualized variant: rows are windowed and absolutely positioned by
+   TanStack Virtual, so no gap/content-visibility here — the window itself
+   bounds DOM cost, and translateY replaces flow layout. */
+.message-scroller__virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+/* Absolutely positioned rows resolve against the wrapper's padding box, so
+   its padding never insets them. Rows inherit the inline padding to restore
+   the gutters, and start below the block-start padding via the variable the
+   padded wrapper re-exports (0 when the wrapper is unpadded). */
+.message-scroller__virtual-item {
+  position: absolute;
+  inset-block-start: var(--message-scroller-virtual-block-start, 0px);
+  inset-inline: 0;
+  min-width: 0;
+  padding-inline: inherit;
 }
 
 .message-scroller__button {

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

@@ -92,6 +92,18 @@
 }
 
 @container responsive-sidebar-shell (inline-size <= 56rem) {
+  /* Narrow hosts flatten the application plane: no desktop chrome remains
+     around it, so margins and elevation would read as a card in a frame. */
+  .responsive-sidebar-shell__main {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .responsive-sidebar-shell > .app-top-bar {
+    background: var(--sigvelo-color-surface);
+  }
+
   .responsive-sidebar-shell__frame {
     grid-template-columns: minmax(0, 1fr);
   }

package/dist/styles/shell.css

@@ -0,0 +1,122 @@
+/* Shell Component */
+.shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 25rem;
+  border-radius: var(--sigvelo-radius-md);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: var(--sigvelo-color-surface-raised);
+  overflow: hidden;
+}
+
+.shell__header {
+  display: flex;
+  align-items: center;
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
+  background: var(--sigvelo-color-surface-sunken);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__heading {
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-text);
+}
+
+.shell__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+/* Action Bar */
+.shell__action-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-2);
+  background: var(--sigvelo-color-surface-sunken);
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sigvelo-spacing-10);
+  height: var(--sigvelo-spacing-10);
+  padding: 0;
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.shell__action:hover {
+  background: var(--sigvelo-color-surface-sunken);
+  color: var(--sigvelo-color-text);
+}
+
+.shell__action--active {
+  background: var(--sigvelo-color-primary-bg);
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.shell__action--active:hover {
+  background: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+  color: var(--sigvelo-color-primary-text-on-bg);
+}
+
+.shell__action svg {
+  width: var(--sigvelo-spacing-5);
+  height: var(--sigvelo-spacing-5);
+}
+
+/* Panel */
+.shell__panel {
+  display: flex;
+  flex-direction: column;
+  width: 16.25rem;
+  max-width: 100%;
+  background: var(--sigvelo-color-surface-raised);
+  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  overflow: hidden;
+}
+
+.shell__panel[hidden] {
+  display: none;
+}
+
+.shell__panel-heading {
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-bold);
+  color: var(--sigvelo-color-text);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.shell__panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sigvelo-spacing-4);
+}
+
+/* Content */
+.shell__content {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+}

package/dist/styles/think-full-app.css

@@ -178,6 +178,20 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 }
 
 @container think-full-app (inline-size <= 56rem) {
+  /* A side panel or phone has no desktop chrome around the app, so the
+     floating application plane reads as a card in a frame. Flatten to one
+     edge-to-edge surface, app bar included — the frame never shows. */
+  .think-full-app > .think-full-app__view-scope,
+  .think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .think-full-app > .think-full-app__app-bar {
+    background: var(--sigvelo-color-surface);
+  }
+
   .think-full-app__workbench-view-switch {
     display: none;
   }
@@ -254,28 +268,22 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   }
 
   .think-full-app .think-full-app__chat .message-scroller__viewport {
-    --message-scroller-fade-t-size: 3rem;
-    --message-scroller-fade-b-size: 3rem;
-  }
-
-  .think-full-app .think-full-app__chat .message-scroller__viewport[data-scrollable~="start"] {
-    --message-scroller-fade-t: var(--message-scroller-fade-t-size);
+    --message-scroller-fade-size: 3rem;
   }
 
   .think-full-app .think-full-app__chat .agent-chat__transcript-content {
-    gap: var(--sigvelo-spacing-2-5);
-    padding-block-start: calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px));
+    --message-scroller-virtual-block-start: calc(
+      var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px)
+    );
+
+    padding-block-start: var(--message-scroller-virtual-block-start);
+    /* Matches Codex's side-panel gutter (--padding-panel: 12px). */
     padding-inline: var(--sigvelo-spacing-3);
   }
 
+  /* The base composer scrim already dissolves the transcript above the box. */
   .think-full-app .agent-chat__composer {
     padding: var(--sigvelo-spacing-2);
-    padding-block-start: var(--sigvelo-spacing-4);
-    background: linear-gradient(
-      to top,
-      var(--sigvelo-color-surface) calc(100% - var(--sigvelo-spacing-4)),
-      transparent
-    );
   }
 
   .think-full-app .prompt-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "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": {
@@ -47,6 +47,7 @@
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
+    "@tanstack/react-virtual": "^3.14.8",
     "agent-skills-ts-sdk": "^2.4.1",
     "anser": "^2.3.5",
     "cloudflare": "^7.0.0",
@@ -57,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.23.0"
+    "@mcp-b/design-tokens": "0.25.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.222",
@@ -83,8 +84,8 @@
     "agents": "^0.17.4",
     "ai": "^6.0.220",
     "playwright": "^1.61.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "19.3.0-canary-711c445b-20260722",
+    "react-dom": "19.3.0-canary-711c445b-20260722",
     "storybook": "^10.5.2",
     "typescript": "^6.0.3",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.2.4",
@@ -100,8 +101,8 @@
     "@tanstack/react-router": "^1.170.18",
     "agents": "^0.17.4",
     "ai": "^6.0.182",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "19.3.0-canary-711c445b-20260722",
+    "react-dom": "19.3.0-canary-711c445b-20260722"
   },
   "peerDependenciesMeta": {
     "@ai-sdk/react": {

package/dist/view-transitions-DyUP0lSg.js

@@ -1,77 +0,0 @@
-import { flushSync } from "react-dom";
-//#region src/components/_internal/view-transitions.ts
-let documentScopeSequence = 0;
-let restoreActiveDocumentScope = null;
-/**
-* Reports whether motion should be suppressed, honoring both the app-level
-* `data-motion="reduce"` override and the `prefers-reduced-motion` media query.
-* Returns `true` (reduced) when there is no document, e.g. during SSR.
-*/
-function motionIsReduced() {
-	if (typeof document === "undefined") return true;
-	if (document.documentElement.dataset.motion === "reduce") return true;
-	return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
-}
-function isReactTestEnvironment() {
-	return globalThis.IS_REACT_ACT_ENVIRONMENT;
-}
-function scopeDocumentTransition(scope) {
-	if (!(scope instanceof HTMLElement || scope instanceof SVGElement)) return null;
-	restoreActiveDocumentScope?.();
-	const rootStyle = document.documentElement.style;
-	const scopeStyle = scope.style;
-	const rootValue = rootStyle.getPropertyValue("view-transition-name");
-	const rootPriority = rootStyle.getPropertyPriority("view-transition-name");
-	const scopeValue = scopeStyle.getPropertyValue("view-transition-name");
-	const scopePriority = scopeStyle.getPropertyPriority("view-transition-name");
-	rootStyle.setProperty("view-transition-name", "none", "important");
-	scopeStyle.setProperty("view-transition-name", `sigvelo-transition-scope-${++documentScopeSequence}`, "important");
-	let active = true;
-	const restore = () => {
-		if (!active) return;
-		active = false;
-		if (rootValue) rootStyle.setProperty("view-transition-name", rootValue, rootPriority);
-		else rootStyle.removeProperty("view-transition-name");
-		if (scopeValue) scopeStyle.setProperty("view-transition-name", scopeValue, scopePriority);
-		else scopeStyle.removeProperty("view-transition-name");
-		if (restoreActiveDocumentScope === restore) restoreActiveDocumentScope = null;
-	};
-	restoreActiveDocumentScope = restore;
-	return restore;
-}
-/**
-* Runs one synchronous React update inside the narrowest supported native view
-* transition. Unsupported and reduced-motion environments commit immediately.
-*/
-function runViewTransition({ scope, update }) {
-	let committed = false;
-	const commitOnce = () => {
-		if (committed) return;
-		committed = true;
-		flushSync(update);
-	};
-	if (typeof document === "undefined" || motionIsReduced() || isReactTestEnvironment()) {
-		commitOnce();
-		return null;
-	}
-	const scopedHost = scope;
-	const documentHost = document;
-	const useScopedHost = typeof scopedHost?.startViewTransition === "function";
-	const host = useScopedHost ? scopedHost : typeof documentHost.startViewTransition === "function" ? documentHost : null;
-	if (!host?.startViewTransition) {
-		commitOnce();
-		return null;
-	}
-	const restoreDocumentScope = useScopedHost ? null : scopeDocumentTransition(scope);
-	try {
-		const transition = host.startViewTransition(commitOnce);
-		if (restoreDocumentScope) transition.finished.finally(restoreDocumentScope).catch(() => void 0);
-		return transition;
-	} catch {
-		restoreDocumentScope?.();
-		commitOnce();
-		return null;
-	}
-}
-//#endregion
-export { runViewTransition as n, motionIsReduced as t };