@mcp-b/react-components 0.11.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/browser-run-panel.css

@@ -1,132 +1,83 @@
 .browser-run-panel {
   min-inline-size: 0;
   min-block-size: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--sigvelo-color-canvas);
-  color: var(--sigvelo-color-text);
-  font-family: var(--sigvelo-font-sans);
+  height: 100%;
 }
 
-.browser-run-panel__header {
+.browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
   min-block-size: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.625rem;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 62%, transparent);
-  background: var(--sigvelo-color-surface);
-}
-
-.browser-run-panel__identity {
-  min-inline-size: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-}
-
-.browser-run-panel__icon {
-  flex: none;
-  color: var(--sigvelo-color-text-muted);
+  gap: 0;
+  padding-block: 0;
+  padding-inline: 0.375rem;
+  border-block-end: 0;
+  background: var(--sigvelo-color-canvas);
 }
 
-.browser-run-panel__title-block {
-  min-inline-size: 0;
+.browser-run-panel__tabs {
   display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.browser-run-panel__title {
-  font-size: 0.8125rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: 1.2;
-}
-
-.browser-run-panel__url,
-.browser-run-panel__target-url {
+  flex: 1;
   min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.75rem;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.browser-run-panel__actions {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.browser-run-panel__actions svg {
-  width: 1rem;
-  height: 1rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
-.browser-run-panel__targets {
-  display: flex;
-  gap: 0.375rem;
-  padding: 0.5rem 0.625rem;
-  overflow-x: auto;
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 50%, transparent);
-  background: color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-surface) 58%);
+.browser-run-panel__tabs::-webkit-scrollbar {
+  display: none;
 }
 
-.browser-run-panel__target {
-  min-inline-size: 8rem;
+.browser-run-panel__tab.button {
+  min-inline-size: min(11rem, 45vw);
+  min-block-size: 2.75rem;
   max-inline-size: 13rem;
-  display: flex;
   flex: 0 0 auto;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0.375rem 0.5rem;
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 68%, transparent);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-surface);
-  color: inherit;
-  font: inherit;
+  gap: 0.5rem;
+  padding-inline: 0.75rem;
+  border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
   text-align: start;
-  cursor: pointer;
-}
-
-.browser-run-panel__target:hover {
-  border-color: var(--sigvelo-color-neutral-border);
+  white-space: nowrap;
 }
 
-.browser-run-panel__target:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: 2px;
+.browser-run-panel__tab[aria-selected="true"] {
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text);
 }
 
-.browser-run-panel__target[aria-pressed="true"] {
-  border-color: color-mix(in srgb, var(--sigvelo-color-primary-border) 82%, transparent);
+.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__target-title {
+.browser-run-panel__tab-title {
   overflow: hidden;
+  max-inline-size: 100%;
   font-size: 0.75rem;
-  font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1.2;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.browser-run-panel__body {
+.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;
-  flex: 1;
   padding: 0.625rem;
 }
 
-.browser-run-panel__body > .browser-live-view {
+.browser-run-panel__live-view {
   flex: 1;
   min-block-size: 16rem;
   aspect-ratio: auto;
@@ -134,27 +85,17 @@
 }
 
 .browser-run-panel__state {
-  min-block-size: 14rem;
-  display: flex;
   flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  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-neutral-bg-subtle);
-  color: var(--sigvelo-color-text-muted);
-  font-size: 0.8125rem;
-  text-align: center;
+  min-block-size: 14rem;
 }
 
 .browser-run-panel__state[data-tone="danger"] {
   min-block-size: auto;
   flex: none;
-  margin: 0.625rem 0.625rem 0;
+  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);
@@ -171,8 +112,14 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .browser-run-panel__spinner,
-  .browser-run-panel__actions .button svg {
+  .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

@@ -39,7 +39,6 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
-@import "./mcp-server-connections.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
 @import "./preview-card.css" layer(components);
 @import "./progress.css" layer(components);
@@ -70,6 +69,7 @@
 @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);
@@ -82,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;
 }

package/dist/styles/model-selector.css

@@ -52,9 +52,10 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__input {
+.model-selector__input.input {
   flex: 1;
   min-width: 0;
+  height: auto;
   padding: 0;
   border: none;
   outline: none;
@@ -64,6 +65,10 @@
   font-size: 0.875rem;
 }
 
+.model-selector__input.input:focus-visible {
+  box-shadow: none;
+}
+
 .model-selector__input::placeholder {
   color: var(--sigvelo-color-text-muted);
 }
@@ -96,24 +101,28 @@
 .model-selector__item {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 0.625rem;
   width: 100%;
   padding-block: 0.5rem;
   padding-inline: 1rem;
-  background-color: transparent;
-  border: none;
+  border-radius: 0;
   color: var(--sigvelo-color-text);
   font-family: inherit;
   font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
-  cursor: pointer;
   transition: background-color 120ms ease;
 }
 
-.model-selector__item:hover:not([data-disabled]),
+.model-selector__item:hover:not(:disabled):not([data-disabled]),
 .model-selector__item:focus-visible {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.model-selector__item:focus-visible {
   outline: none;
+  box-shadow: inset 0 0 0 var(--sigvelo-focus-width) var(--sigvelo-color-focus);
 }
 
 .model-selector__item[data-selected] {
@@ -122,6 +131,11 @@
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
+.model-selector__item:is(:disabled, [data-disabled]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .model-selector__empty {
   padding-block: 1.5rem;
   padding-inline: 1rem;
@@ -137,9 +151,7 @@
 
 .model-selector__separator {
   margin: 0.25rem 0;
-  border: none;
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+  background-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
 .model-selector__logo {

package/dist/styles/prompt-input.css

@@ -184,6 +184,11 @@
   color: var(--sigvelo-color-text);
 }
 
+.prompt-input__tools .prompt-input__action-menu-trigger[data-popup-open] {
+  color: var(--sigvelo-color-text);
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
 .prompt-input__tooltip-content {
   display: inline-block;
 }