@mcp-b/react-components 0.2.2 → 0.4.0

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as MinusIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MaximizeIcon, T as PauseIcon, _ as FolderOpenIcon, a as BrainIcon, b as InfoIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-BklFyZbx.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SearchIcon, C as MinusIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MaximizeIcon, T as PauseIcon, _ as FolderOpenIcon, a as BrainIcon, b as InfoIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-ctdVxng0.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SquareIcon, C as MonitorIcon, D as RefreshIcon, E as PlusIcon, M as WarningIcon, N as WrenchIcon, O as SearchIcon, P as XIcon, S as MinusIcon, T as PlayIcon, _ as FolderOpenIcon, a as BrainIcon, b as LinkIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as TerminalIcon, k as SpinnerIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-Bf7JMKk-.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MinusIcon, T as PencilIcon, _ as FolderOpenIcon, a as BrainIcon, b as LinkIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-DQC4Zw5R.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-DAPlB8Z0.js → copy-button-Dd6DEhOm.js}

@@ -1,4 +1,4 @@
-import { o as CheckIcon, u as CopyIcon } from "./icons-Bf7JMKk-.js";
+import { o as CheckIcon, u as CopyIcon } from "./icons-DQC4Zw5R.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-Bf7JMKk-.js → icons-DQC4Zw5R.js}

@@ -51,6 +51,10 @@ const XIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M4 4L12 12M12 4L4 12" })
 });
+const PencilIcon = (props) => /* @__PURE__ */ jsx(Icon, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M11.1 2.6a1.4 1.4 0 0 1 2 2L5.5 12.2l-2.8.8.8-2.8z" })
+});
 const CopyIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	...props,
 	children: [/* @__PURE__ */ jsx("rect", {
@@ -258,4 +262,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SquareIcon as A, MonitorIcon as C, RefreshIcon as D, PlusIcon as E, WarningIcon as M, WrenchIcon as N, SearchIcon as O, XIcon as P, MinusIcon as S, PlayIcon as T, FolderOpenIcon as _, BrainIcon as a, LinkIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, TerminalIcon as j, SpinnerIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { SpinnerIcon as A, MonitorIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MinusIcon as S, PencilIcon as T, FolderOpenIcon as _, BrainIcon as a, LinkIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/{icons-BklFyZbx.d.ts → icons-ctdVxng0.d.ts}

@@ -16,6 +16,7 @@ declare const ChevronLeftIcon: (props: IconProps) => React.JSX.Element;
 declare const BrainIcon: (props: IconProps) => React.JSX.Element;
 declare const CheckIcon: (props: IconProps) => React.JSX.Element;
 declare const XIcon: (props: IconProps) => React.JSX.Element;
+declare const PencilIcon: (props: IconProps) => React.JSX.Element;
 declare const CopyIcon: (props: IconProps) => React.JSX.Element;
 declare const EyeIcon: (props: IconProps) => React.JSX.Element;
 declare const EyeOffIcon: (props: IconProps) => React.JSX.Element;
@@ -45,4 +46,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SpinnerIcon as A, MinusIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MaximizeIcon as S, PauseIcon as T, FolderOpenIcon as _, BrainIcon as a, InfoIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };
+export { SearchIcon as A, MinusIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MaximizeIcon as S, PauseIcon as T, FolderOpenIcon as _, BrainIcon as a, InfoIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };

package/dist/styles/agent-chat.css

@@ -19,3 +19,22 @@
   padding: 0.75rem;
   background-color: var(--sigvelo-color-surface);
 }
+
+/* Transient status pill between transcript and composer (recovery, errors). */
+.agent-chat__notice {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-block-end: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat__notice[data-tone="danger"],
+.agent-chat__notice [data-tone="danger"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.agent-chat__suggestions {
+  margin-block-end: 0.5rem;
+}

package/dist/styles/attachment-preview.css

@@ -0,0 +1,21 @@
+/* Click-to-zoom lightbox for image attachments (composer chips + messages).
+   Scoped as .dialog__popup.attachment-preview so it beats the base dialog
+   sizing regardless of import order. */
+.dialog__popup.attachment-preview {
+  width: fit-content;
+  max-width: min(90vw, 56rem);
+}
+
+.attachment-preview__image {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.attachment-preview__name {
+  margin-block-start: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}

package/dist/styles/context.css

@@ -3,20 +3,19 @@
   font-family: var(--sigvelo-font-sans);
 }
 
+/* Bare ring icon — undo the popover__trigger pill chrome. */
 .context__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.context__trigger-ring {
-  display: inline-flex;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
 }
 
-.context__trigger-label {
-  font-size: 0.75rem;
-  color: var(--sigvelo-color-text-muted);
+.context__trigger:hover {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
 .context__content {
@@ -98,7 +97,7 @@
 
 .context__row {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto;
   gap: 0.75rem;
   font-size: 0.75rem;
   align-items: baseline;
@@ -113,13 +112,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.context__row-cost {
-  color: var(--sigvelo-color-text-muted);
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
-  font-variant-numeric: tabular-nums;
-}
-
 .context__footer {
   display: flex;
   flex-direction: column;

package/dist/styles/index.css

@@ -12,6 +12,7 @@
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
 @import "./alert-dialog.css" layer(components);
+@import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
 @import "./badge.css" layer(components);
@@ -45,6 +46,7 @@
 @import "./separator.css" layer(components);
 @import "./slider.css" layer(components);
 @import "./stepper.css" layer(components);
+@import "./suggestions.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
 @import "./toast.css" layer(components);

package/dist/styles/message.css

@@ -57,6 +57,54 @@
   overflow: auto;
 }
 
+.message__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 100%;
+  font-size: 0.8125rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.message__attachment:hover .message__attachment-name {
+  text-decoration: underline;
+}
+
+.message__attachment-icon {
+  flex-shrink: 0;
+}
+
+.message__attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message__attachment-zoom {
+  display: block;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+}
+
+.message__attachment-image {
+  display: block;
+  max-width: 16rem;
+  max-height: 16rem;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+/* Quiet annotation under a part whose stored content was compacted. */
+.message__compacted {
+  margin-block-start: 0.25rem;
+  font-size: var(--sigvelo-text-xs);
+  font-style: italic;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .message__actions {
   display: inline-flex;
   align-items: center;

package/dist/styles/prompt-input.css

@@ -43,6 +43,83 @@
   min-height: 1.5rem;
 }
 
+.prompt-input__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Hairline chip, borderless-direction: no fill, just the outline. */
+.prompt-input__attachment {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__attachment[data-image] {
+  padding: 0;
+  overflow: hidden;
+}
+
+.prompt-input__attachment-zoom {
+  display: block;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+}
+
+.prompt-input__attachment-thumb {
+  display: block;
+  width: 3rem;
+  height: 3rem;
+  object-fit: cover;
+}
+
+.prompt-input__attachment-icon {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.prompt-input__attachment-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  background: none;
+  color: var(--sigvelo-color-text-muted);
+  cursor: pointer;
+}
+
+.prompt-input__attachment[data-image] .prompt-input__attachment-remove {
+  position: absolute;
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+  background-color: color-mix(in oklab, var(--sigvelo-color-surface), transparent 20%);
+}
+
+.prompt-input__attachment-remove:hover {
+  color: var(--sigvelo-color-text);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 8%);
+}
+
 .prompt-input__body {
   display: flex;
   align-items: stretch;
@@ -84,6 +161,12 @@
   padding-block-start: 0.25rem;
 }
 
+.prompt-input__footer-end {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .prompt-input__tools {
   display: inline-flex;
   align-items: center;
@@ -136,6 +219,95 @@
   margin-inline-end: 0.5rem;
 }
 
+/* Undo .menu__trigger's boxed chrome — this trigger is a ghost footer button
+   like its neighbors: transparent at rest, background only on hover/open. */
+.prompt-input__permissions-trigger {
+  gap: 0.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: inherit;
+  background: none;
+  border: none;
+}
+
+.prompt-input__permissions-trigger:hover,
+.prompt-input__permissions-trigger[data-popup-open] {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
+/* Bypass is the loud one — Codex-style warning tint so it can't be missed. */
+.prompt-input__permissions-trigger[data-mode="bypass"],
+.prompt-input__permissions-trigger[data-mode="bypass"]:hover:not([data-disabled]) {
+  color: var(--sigvelo-color-warning-text);
+}
+
+/* Both modes stacked in one cell; the trigger is always as wide as the
+   widest, so toggling can't shift the footer. */
+.prompt-input__permissions-current {
+  display: inline-grid;
+}
+
+.prompt-input__permissions-current-option {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-self: start;
+  white-space: nowrap;
+}
+
+.prompt-input__permissions-current-option:not([data-active]) {
+  visibility: hidden;
+}
+
+.prompt-input__permissions-menu {
+  min-width: 17rem;
+}
+
+.prompt-input__permissions-question {
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__permissions-option {
+  align-items: flex-start;
+}
+
+.prompt-input__permissions-option-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.prompt-input__permissions-option-label {
+  font-size: 0.8125rem;
+}
+
+.prompt-input__permissions-option-description {
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+/* Check on the right, drawn like the checkbox indicator instead of the dot. */
+.prompt-input__permissions-check {
+  margin-inline-start: auto;
+  align-self: center;
+}
+
+.prompt-input__permissions-check::before {
+  width: 0.625rem;
+  height: 0.375rem;
+  background-color: transparent;
+  border-radius: 0;
+  border-inline-start: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: rotate(-45deg) translateY(-1px);
+}
+
 .prompt-input__hover-card {
   position: relative;
   display: inline-block;
@@ -177,6 +349,155 @@
   flex-direction: column;
 }
 
+/* Approval state: the composer becomes the confirmation */
+.prompt-input__approval {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.prompt-input__approval-question {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  line-height: 1.4;
+}
+
+.prompt-input__approval-question code {
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.8125em;
+}
+
+.prompt-input__approval-count {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+}
+
+.prompt-input__approval-preview {
+  max-height: 6rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.625rem;
+  overflow: auto;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.prompt-input__approval-preview-key {
+  color: var(--sigvelo-color-text);
+}
+
+.prompt-input__approval-preview-key::after {
+  content: ":";
+}
+
+.prompt-input__approval-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.prompt-input__approval-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding-block: 0.3125rem;
+  padding-inline: 0.5rem;
+  border: none;
+  border-radius: var(--sigvelo-radius-md);
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.prompt-input__approval-option[data-selected] {
+  background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 92%);
+}
+
+.prompt-input__approval-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.prompt-input__approval-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.6875rem;
+}
+
+.prompt-input__approval-option[data-selected] .prompt-input__approval-key {
+  border-color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-surface);
+}
+
+.prompt-input__approval-arrows {
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  visibility: hidden;
+}
+
+.prompt-input__approval-option[data-selected] .prompt-input__approval-arrows {
+  visibility: visible;
+}
+
+.prompt-input__approval-deny {
+  cursor: text;
+}
+
+.prompt-input__approval-reason {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--sigvelo-color-text);
+  font: inherit;
+}
+
+.prompt-input__approval-reason::placeholder {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__approval-reason:focus {
+  outline: none;
+}
+
+.prompt-input__approval-skip {
+  flex-shrink: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.prompt-input__approval-submit {
+  flex-shrink: 0;
+  gap: 0.375rem;
+}
+
+.prompt-input__approval-kbd {
+  font-family: inherit;
+  font-size: 0.75em;
+  opacity: 0.75;
+}
+
 @keyframes prompt-input-spin {
   from {
     transform: rotate(0deg);

package/dist/styles/suggestions.css

@@ -0,0 +1,21 @@
+.suggestions {
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.suggestions::-webkit-scrollbar {
+  display: none;
+}
+
+.suggestions__row {
+  display: flex;
+  width: max-content;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.suggestions__chip {
+  border-radius: var(--sigvelo-radius-full);
+  white-space: nowrap;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.2.2",
-  "description": "MCP-B React components built on Base UI and shared design tokens.",
+  "version": "0.4.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": {
     "url": "https://github.com/WebMCP-org/design-system/issues"
@@ -40,6 +40,8 @@
   },
   "dependencies": {
     "@base-ui/react": "~1.6.0",
+    "@cloudflare/codemode": "^0.4.2",
+    "@rrweb/replay": "^2.1.0",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",
     "@streamdown/math": "^1.0.2",
@@ -47,9 +49,13 @@
     "anser": "^2.3.5",
     "shiki": "^3.23.0",
     "streamdown": "^2.5.0",
-    "@mcp-b/design-tokens": "0.2.2"
+    "@mcp-b/design-tokens": "0.4.0"
   },
   "devDependencies": {
+    "@ai-sdk/react": "^3.0.194",
+    "@cloudflare/shell": "^0.4.1",
+    "@cloudflare/think": "^0.12.1",
+    "@cloudflare/workers-types": "^4.20260630.1",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-mcp": "^0.6.0",
@@ -62,6 +68,7 @@
     "@vitest/browser-playwright": "^4.1.9",
     "@vitest/coverage-v8": "^4.1.9",
     "@vitest/mocker": "^4.1.9",
+    "agents": "^0.17.3",
     "ai": "^6.0.182",
     "playwright": "^1.61.0",
     "react": "^19.2.7",
@@ -73,11 +80,27 @@
     "vitest": "^4.1.9"
   },
   "peerDependencies": {
+    "@ai-sdk/react": "^3.0.194",
+    "@cloudflare/shell": "^0.4.1",
+    "@cloudflare/think": "^0.12.1",
+    "agents": "^0.17.3",
     "ai": "^6.0.182",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "peerDependenciesMeta": {
+    "@ai-sdk/react": {
+      "optional": true
+    },
+    "@cloudflare/shell": {
+      "optional": true
+    },
+    "@cloudflare/think": {
+      "optional": true
+    },
+    "agents": {
+      "optional": true
+    },
     "ai": {
       "optional": true
     }