@mcp-b/react-components 0.10.0 → 0.12.0

package/dist/styles/agent-chat.css

@@ -1,4 +1,5 @@
 .agent-chat {
+  --agent-chat-content-max-inline-size: 64rem;
   position: relative;
   width: 100%;
   height: 100%;
@@ -17,6 +18,8 @@
    --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
   gap: 0.875rem;
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  margin-inline: auto;
   padding-block: 1rem calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
   padding-inline: 1rem;
 }
@@ -51,7 +54,7 @@
 }
 
 .agent-chat__composer > .prompt-input {
-  max-inline-size: 64rem;
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
 }
 

package/dist/styles/agent-connection.css

@@ -141,180 +141,18 @@
   line-height: 1.5;
 }
 
-.agent-connect__mcp {
-  display: grid;
-  gap: 0.5rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-heading {
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.74rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.25;
-}
-
-.agent-connect__mcp-list {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.35rem;
-  max-block-size: 24rem;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  list-style: none;
-}
-
-.agent-connect__mcp-item {
-  display: grid;
-  grid-template-columns: 1.625rem minmax(0, 1fr);
-  gap: 0.5rem;
-  align-items: start;
-  min-inline-size: 0;
-  padding: 0.5rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-surface);
-}
-
-.agent-connect__mcp-icon {
-  display: grid;
-  place-items: center;
-  inline-size: 1.625rem;
-  block-size: 1.625rem;
-  border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.72rem;
-  font-weight: var(--sigvelo-font-weight-bold);
-  line-height: 1;
-}
-
-.agent-connect__mcp-icon img {
-  display: block;
-  max-inline-size: 1rem;
-  max-block-size: 1rem;
-}
-
-.agent-connect__mcp-copy {
-  display: grid;
-  gap: 0.08rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-name {
-  color: var(--sigvelo-color-text);
-  font-size: 0.78rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.2;
-  overflow-wrap: anywhere;
-  text-decoration: none;
-}
-
-.agent-connect__mcp-name:hover {
-  color: var(--sigvelo-color-primary-text);
-  text-decoration: underline;
-  text-underline-offset: 0.16em;
-}
-
-.agent-connect__mcp-name:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
-}
-
-.agent-connect__mcp-description {
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.7rem;
-  line-height: 1.25;
-  overflow-wrap: anywhere;
-}
-
-.agent-connect__mcp-setup {
-  display: grid;
-  gap: 0.3rem;
-  margin-block-start: 0.2rem;
-  min-inline-size: 0;
-}
-
-.agent-connect__mcp-setup p {
-  margin: 0;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.68rem;
-  line-height: 1.3;
-  overflow-wrap: anywhere;
-}
-
-.agent-connect__mcp-setup-auth {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.agent-connect__mcp-setup-auth span:first-child {
-  color: var(--sigvelo-color-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
-}
-
-.agent-connect__mcp-setup-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.agent-connect__mcp-setup-links a {
-  display: inline-flex;
-  align-items: center;
-  min-block-size: 1.35rem;
-  padding: 0 0.35rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-sm);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.65rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.1;
-  text-decoration: none;
-}
-
-.agent-connect__mcp-setup-links a:hover {
-  border-color: var(--sigvelo-color-primary-border-muted);
-  color: var(--sigvelo-color-primary-text);
-}
-
-.agent-connect__mcp-setup-links a:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
-}
-
 .agent-connect__mcp-form {
   display: grid;
   gap: 0.75rem;
   min-inline-size: 0;
 }
 
-.agent-connect__mcp-form--row {
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
-  align-items: end;
-  padding: 0.75rem;
-  background: var(--sigvelo-color-surface);
-}
-
 .agent-connect__mcp-form-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.agent-connect__mcp-form--row .agent-connect__mcp-form-actions {
-  align-self: end;
-}
-
 .agent-connect__mcp-form-status {
   align-self: end;
   min-inline-size: 0;
@@ -340,10 +178,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .agent-connect__mcp-list {
-    grid-template-columns: 1fr;
-  }
-
   .agent-connect-popover {
     inline-size: min(24rem, calc(100dvi - 1.5rem));
   }

package/dist/styles/browser-run-panel.css

@@ -0,0 +1,125 @@
+.browser-run-panel {
+  min-inline-size: 0;
+  min-block-size: 0;
+  height: 100%;
+}
+
+.browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
+  min-block-size: 3rem;
+  gap: 0;
+  padding-block: 0;
+  padding-inline: 0.375rem;
+  border-block-end: 0;
+  background: var(--sigvelo-color-canvas);
+}
+
+.browser-run-panel__tabs {
+  display: flex;
+  flex: 1;
+  min-inline-size: 0;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.browser-run-panel__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.browser-run-panel__tab.button {
+  min-inline-size: min(11rem, 45vw);
+  min-block-size: 2.75rem;
+  max-inline-size: 13rem;
+  flex: 0 0 auto;
+  gap: 0.5rem;
+  padding-inline: 0.75rem;
+  border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
+  text-align: start;
+  white-space: nowrap;
+}
+
+.browser-run-panel__tab[aria-selected="true"] {
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
+}
+
+.browser-run-panel__tab-glyph {
+  display: grid;
+  flex: none;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--sigvelo-color-primary-bg-subtle);
+  color: var(--sigvelo-color-primary-text);
+  font-size: 0.625rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1;
+}
+
+.browser-run-panel__tab-title {
+  overflow: hidden;
+  max-inline-size: 100%;
+  font-size: 0.75rem;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-run-panel__address-bar {
+  min-block-size: 3rem;
+  background: var(--sigvelo-color-surface);
+}
+
+.browser-run-panel .browser-run-panel__body {
+  min-block-size: 0;
+  display: flex;
+  padding: 0.625rem;
+}
+
+.browser-run-panel__live-view {
+  flex: 1;
+  min-block-size: 16rem;
+  aspect-ratio: auto;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.browser-run-panel__state {
+  flex: 1;
+  min-block-size: 14rem;
+}
+
+.browser-run-panel__state[data-tone="danger"] {
+  min-block-size: auto;
+  flex: none;
+  margin: 0;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: 0;
+  border-color: var(--sigvelo-color-danger-border-subtle);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+}
+
+.browser-run-panel__spinner {
+  animation: browser-run-panel-spin 900ms linear infinite;
+}
+
+@keyframes browser-run-panel-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .browser-run-panel__spinner {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .browser-run-panel__tab[aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/dist/styles/codex-model-selector.css

@@ -0,0 +1,197 @@
+/*
+ * Codex response settings compose the shared Menu primitive. These rules only
+ * express the component's density and content hierarchy; Menu owns popup
+ * surfaces, borders, shadows, motion, focus management, and collision-aware
+ * positioning.
+ */
+.codex-model-selector__trigger {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  max-inline-size: calc(100vi - var(--sigvelo-spacing-8));
+  min-block-size: var(--sigvelo-control-height-md);
+  padding: 0;
+  color: var(--sigvelo-color-text);
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  cursor: pointer;
+  font-family: var(--sigvelo-font-sans);
+  font-size: var(--sigvelo-control-text-lg);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: 1.25;
+  isolation: isolate;
+}
+
+.codex-model-selector__trigger::before {
+  position: absolute;
+  z-index: -1;
+  inset-block: calc(var(--sigvelo-spacing-1) * -1);
+  inset-inline: calc(var(--sigvelo-spacing-2) * -1);
+  content: "";
+  pointer-events: none;
+  background-color: var(--sigvelo-color-neutral-bg-muted);
+  border-radius: var(--sigvelo-radius-full);
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.codex-model-selector__trigger:is(:hover, :focus-visible, [data-popup-open])::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.codex-model-selector__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-color-canvas),
+    0 0 0 4px var(--sigvelo-color-focus);
+}
+
+.codex-model-selector__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.codex-model-selector__summary {
+  display: flex;
+  flex: 0 1 auto;
+  justify-content: center;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.codex-model-selector__summary-effort,
+.codex-model-selector__trigger-icon,
+.codex-model-selector__submenu-value,
+.codex-model-selector__submenu-icon,
+.codex-model-selector__option-description,
+.codex-model-selector__reset {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.codex-model-selector__summary-effort--ultra {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.codex-model-selector__trigger-icon,
+.codex-model-selector__submenu-icon,
+.codex-model-selector__reset-icon {
+  flex: 0 0 auto;
+}
+
+.codex-model-selector__menu {
+  inline-size: min(28rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-2);
+}
+
+.codex-model-selector__submenu {
+  inline-size: min(25.5rem, calc(100vi - var(--sigvelo-spacing-8)));
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-6);
+}
+
+.codex-model-selector__submenu--model {
+  inline-size: min(35rem, calc(100vi - var(--sigvelo-spacing-8)));
+}
+
+.codex-model-selector__submenu--speed {
+  inline-size: min(29rem, calc(100vi - var(--sigvelo-spacing-8)));
+}
+
+.codex-model-selector__submenu-title.menu__group-label {
+  padding: 0;
+  margin-block-end: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-control-text-lg);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: 1.25;
+}
+
+.codex-model-selector__submenu-trigger,
+.codex-model-selector__option,
+.codex-model-selector__reset {
+  min-block-size: var(--sigvelo-control-height-lg);
+  font-size: var(--sigvelo-control-text-lg);
+}
+
+.codex-model-selector__submenu-trigger {
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-4);
+  color: var(--sigvelo-color-text);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.codex-model-selector__submenu-trigger::after {
+  content: none;
+}
+
+.codex-model-selector__submenu-value {
+  min-inline-size: 0;
+  margin-inline-start: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.codex-model-selector__option {
+  align-items: flex-start;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: 0;
+  color: var(--sigvelo-color-text);
+  border-radius: 0;
+}
+
+.codex-model-selector__option > span:first-child {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.codex-model-selector__option-label,
+.codex-model-selector__option-description {
+  display: block;
+}
+
+.codex-model-selector__option-description {
+  margin-block-start: var(--sigvelo-spacing-1);
+  font-size: var(--sigvelo-control-text-md);
+  line-height: 1.25;
+}
+
+.codex-model-selector__option-indicator {
+  order: 2;
+  margin-inline-start: auto;
+  color: var(--sigvelo-color-text);
+}
+
+.codex-model-selector__option-indicator::before {
+  content: none;
+}
+
+.codex-model-selector__reset {
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-4);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.codex-model-selector__reset-icon {
+  inline-size: var(--sigvelo-spacing-6);
+  block-size: var(--sigvelo-spacing-6);
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .codex-model-selector__summary-effort--ultra {
+    color: LinkText;
+  }
+}

package/dist/styles/index.css

@@ -62,12 +62,14 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./code-block.css" layer(components);
 @import "./commit.css" layer(components);
 @import "./context.css" layer(components);
 @import "./conversation.css" layer(components);
+@import "./codex-model-selector.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
 @import "./message.css" layer(components);
@@ -80,8 +82,11 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
+@import "./think-execution-workbench.css" layer(components);
+@import "./think-resize-handle.css" layer(components);
 @import "./think-full-app.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
+@import "./think-thread-shell.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/mcp-server-picker.css

@@ -4,7 +4,7 @@
 
 .mcp-server-picker__trigger {
   flex-shrink: 0;
-  color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-text-muted);
   background: none;
 }
 
@@ -14,6 +14,11 @@
   background: none;
 }
 
+.mcp-server-picker__trigger > svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .mcp-server-picker__popup {
   inline-size: min(32rem, calc(100dvw - 1rem));
   max-block-size: min(28rem, calc(100dvh - 2rem));
@@ -22,8 +27,10 @@
   overscroll-behavior: contain;
 }
 
-.mcp-server-picker__group + .mcp-server-picker__group {
-  margin-block-start: 0.25rem;
+.mcp-server-picker__row-shell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
 }
 
 .mcp-server-picker__row {
@@ -34,6 +41,18 @@
   overflow: hidden;
 }
 
+.mcp-server-picker__row-shell[data-connection="connected"] .mcp-server-picker__row {
+  opacity: 1;
+}
+
+.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__row {
+  opacity: 0.68;
+}
+
+.mcp-server-picker__row-shell[data-connection="disconnected"] .mcp-server-picker__description {
+  color: var(--sigvelo-color-text);
+}
+
 .mcp-server-picker__icon {
   display: inline-flex;
   flex: 0 0 auto;
@@ -83,17 +102,9 @@
   min-inline-size: 0;
   max-inline-size: 20rem;
   overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.mcp-server-picker__meta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 1rem;
-  min-inline-size: max-content;
+  color: var(--sigvelo-color-text-muted);
 }
 
 .mcp-server-picker__status-label {
@@ -108,15 +119,47 @@
   border: 0;
 }
 
-.mcp-server-picker__row[data-status="ready"] .mcp-server-picker__meta {
+.mcp-server-picker__row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  padding-inline-end: 0.5rem;
+}
+
+.mcp-server-picker__row-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.mcp-server-picker__action {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-block-size: 1.5rem;
+  justify-content: center;
+  padding: 0;
+}
+
+.mcp-server-picker__row-status > svg,
+.mcp-server-picker__action > svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.mcp-server-picker__row-shell[data-status="ready"] .mcp-server-picker__row-status,
+.mcp-server-picker__row-shell[data-status="connected"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
-.mcp-server-picker__row[data-status="needs-auth"] .mcp-server-picker__meta {
+.mcp-server-picker__row-shell[data-status="needs-auth"] .mcp-server-picker__row-status,
+.mcp-server-picker__row-shell[data-status="authenticating"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-warning-text-on-subtle);
 }
 
-.mcp-server-picker__row[data-status="failed"] .mcp-server-picker__meta {
+.mcp-server-picker__row-shell[data-status="failed"] .mcp-server-picker__row-status {
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
@@ -142,6 +185,10 @@
     flex-direction: column;
     gap: 0;
   }
+
+  .mcp-server-picker__row-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
 @media (forced-colors: active) {

package/dist/styles/message.css

@@ -89,9 +89,9 @@
 
 .message__attachment-zoom {
   display: block;
+  min-block-size: 0;
   max-width: 100%;
   padding: 0;
-  border: none;
   background: none;
   cursor: zoom-in;
 }