@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/styles/activity.css

@@ -56,39 +56,6 @@
   box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
-/* Basis 0 keeps the long nowrap label from inflating the message width
-   (it truncates instead); max-content caps growth so the chevron hugs the
-   text, Codex-style. */
-.activity__trigger-label {
-  flex: 1 1 0;
-  min-width: 0;
-  max-width: max-content;
-  color: var(--sigvelo-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Streaming shimmer: a highlight sweeps the label left-to-right, then rests
-   muted for the back half of the loop (the gradient tiles seamlessly). */
-.activity[data-streaming] .activity__trigger-label {
-  /* Resting shade matches the trigger's dimmed color; the sweep brightens */
-  --activity-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
-  background: linear-gradient(
-    90deg,
-    var(--activity-shimmer-base) 0%,
-    var(--activity-shimmer-base) 40%,
-    var(--sigvelo-color-text) 50%,
-    var(--activity-shimmer-base) 60%,
-    var(--activity-shimmer-base) 100%
-  );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  animation: activity-shimmer 2.4s linear infinite;
-}
-
 .activity__trigger-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);
@@ -253,6 +220,55 @@
   color: var(--sigvelo-color-danger-text-on-subtle);
 }
 
+.activity__call-audit {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.activity__call-audit-label {
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.activity__call-audit-list {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sigvelo-spacing-1);
+  margin: 0;
+  padding-inline-start: var(--sigvelo-spacing-4);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.activity__call-audit-item {
+  min-width: 0;
+  padding-inline-start: var(--sigvelo-spacing-0-5);
+  color: var(--sigvelo-color-text);
+  overflow-wrap: anywhere;
+}
+
+.activity__call-audit-code,
+.activity__call-audit-result {
+  font-family: var(--sigvelo-font-mono);
+  white-space: pre-wrap;
+}
+
+.activity__call-audit-state {
+  margin-inline-start: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.activity__call-audit-item[data-state="error"] .activity__call-audit-state {
+  color: var(--sigvelo-color-danger-text-on-subtle);
+}
+
+.activity__call-audit-item[data-state="reverted"] .activity__call-audit-state {
+  text-decoration: line-through;
+}
+
 /* Browser panels: screenshots and live views sit inside the quiet fill */
 .activity__shell .browser-live-view {
   width: 100%;
@@ -307,12 +323,6 @@
   color: var(--sigvelo-color-success-text-on-subtle);
 }
 
-.activity__item-icon {
-  display: inline-flex;
-  align-self: center;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .activity__favicon {
   display: block;
   width: 1rem;
@@ -335,31 +345,7 @@
   text-overflow: ellipsis;
 }
 
-@keyframes activity-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .activity[data-streaming] .activity__trigger-label {
-    animation: none;
-    background: none;
-    color: inherit;
-  }
-}
-
 @media (forced-colors: active) {
-  /* background-clip: text has no forced-colors story — plain text instead */
-  .activity[data-streaming] .activity__trigger-label {
-    animation: none;
-    background: none;
-    color: inherit;
-  }
-
   .activity__trigger:focus-visible {
     outline: 2px solid Highlight;
     outline-offset: 2px;

package/dist/styles/agent-activity-preview-overlay.css

@@ -0,0 +1,80 @@
+/*
+ * Standalone closed-shadow styles for AgentActivityPreview. The extension host
+ * owns placement, top-layer behavior, containment, and pointer-event policy.
+ */
+@import "./activity-header.css";
+@import "./agent-activity-preview.css";
+
+:host {
+  all: initial;
+  color-scheme: light dark;
+  display: block;
+  color: CanvasText;
+  font-family: system-ui, sans-serif;
+
+  --sigvelo-spacing-0-5: 0.125rem;
+  --sigvelo-spacing-1: 0.25rem;
+  --sigvelo-spacing-1-5: 0.375rem;
+  --sigvelo-spacing-2: 0.5rem;
+  --sigvelo-spacing-3: 0.75rem;
+  --sigvelo-radius-md: 0.5rem;
+  --sigvelo-radius-lg: 0.75rem;
+  --sigvelo-radius-xs: 0.1875rem;
+  --sigvelo-text-compact: 0.8125rem;
+  --sigvelo-font-weight-semibold: 500;
+  --sigvelo-duration-fast: 150ms;
+  --sigvelo-duration-slow: 360ms;
+  --sigvelo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --sigvelo-color-surface: Canvas;
+  --sigvelo-color-text: CanvasText;
+  --sigvelo-color-text-muted: GrayText;
+  --sigvelo-color-primary-text: LinkText;
+  --sigvelo-color-warning-text: #8a4b00;
+  --sigvelo-color-neutral-bg-subtle: color-mix(in oklab, CanvasText 7%, Canvas);
+  --sigvelo-shadow-sm: 0 0.125rem 0.1875rem color-mix(in oklab, CanvasText 8%, transparent);
+  --sigvelo-recipe-focus-shadow: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
+}
+
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+.activity__favicon {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--sigvelo-radius-xs);
+  background-color: var(--sigvelo-color-surface);
+  object-fit: contain;
+}
+
+.sigvelo-icon--spinner {
+  animation: agent-activity-preview-spin var(--sigvelo-duration-slow) linear infinite;
+  transform-origin: center;
+}
+
+@keyframes agent-activity-preview-spin {
+  to {
+    rotate: 1turn;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --sigvelo-color-warning-text: #f0aa45;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sigvelo-icon--spinner {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :host {
+    --sigvelo-color-warning-text: MarkText;
+  }
+}

package/dist/styles/agent-activity-preview.css

@@ -0,0 +1,235 @@
+.agent-activity-preview {
+  position: relative;
+  width: min(28rem, 100%);
+  min-width: 0;
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  border-radius: calc(var(--sigvelo-radius-lg) + var(--sigvelo-spacing-1));
+  color: var(--sigvelo-color-text);
+  background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 3%);
+  box-shadow:
+    0 1.25rem 3rem color-mix(in oklab, var(--sigvelo-color-text), transparent 88%),
+    0 0.25rem 0.75rem color-mix(in oklab, var(--sigvelo-color-text), transparent 94%);
+}
+
+.agent-activity-preview__badge {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
+  inset-inline-end: var(--sigvelo-spacing-1);
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+  color: var(--sigvelo-color-primary-text);
+  background: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-shadow-sm);
+}
+
+.agent-activity-preview__badge > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.agent-activity-preview__dismiss {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: calc(-1 * var(--sigvelo-spacing-2));
+  inset-inline-end: var(--sigvelo-spacing-1);
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  color: var(--sigvelo-color-text-muted);
+  background: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-shadow-sm);
+  cursor: pointer;
+  opacity: 0;
+  scale: 0.92;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    scale var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.agent-activity-preview:hover .agent-activity-preview__dismiss,
+.agent-activity-preview:focus-within .agent-activity-preview__dismiss,
+.agent-activity-preview__dismiss:focus-visible {
+  opacity: 1;
+  scale: 1;
+}
+
+.agent-activity-preview__dismiss:hover {
+  color: var(--sigvelo-color-text);
+}
+
+.agent-activity-preview__dismiss:focus-visible,
+.agent-activity-preview__row:focus-visible,
+.agent-activity-preview__file-action:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.agent-activity-preview__dismiss > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.agent-activity-preview__list {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  max-height: min(18rem, 60dvh);
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.agent-activity-preview__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: stretch;
+  gap: var(--sigvelo-spacing-0-5);
+  min-width: 0;
+}
+
+.agent-activity-preview__row {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: var(--sigvelo-spacing-2);
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.agent-activity-preview__row:hover {
+  background: var(--sigvelo-color-neutral-bg-subtle);
+  transform: translateY(-1px);
+}
+
+.agent-activity-preview__file-action {
+  display: grid;
+  place-items: center;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: var(--sigvelo-spacing-2);
+  border: 0;
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
+    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+}
+
+.agent-activity-preview__file-action:hover {
+  color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.agent-activity-preview__file-action > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.agent-activity-preview__row .activity__header {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.agent-activity-preview__row .activity__header-label {
+  max-width: none;
+}
+
+.agent-activity-preview__trailing {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-width: 1rem;
+}
+
+.agent-activity-preview__favicons {
+  display: flex;
+  align-items: center;
+  padding-inline-start: 0.25rem;
+}
+
+.agent-activity-preview__favicons img {
+  display: block;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-inline-start: -0.25rem;
+  border: 2px solid var(--sigvelo-color-surface);
+  border-radius: 999px;
+  background: var(--sigvelo-color-surface);
+  object-fit: contain;
+}
+
+.agent-activity-preview__trailing > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.agent-activity-preview__row[data-status="running"] .agent-activity-preview__trailing > svg,
+.agent-activity-preview__row[data-status="unviewed"] .agent-activity-preview__trailing {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.agent-activity-preview__row[data-status="input-required"] .agent-activity-preview__trailing > svg {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.agent-activity-preview__unviewed-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+@media (pointer: coarse) {
+  .agent-activity-preview__dismiss {
+    opacity: 1;
+    scale: 1;
+  }
+
+  .agent-activity-preview__row,
+  .agent-activity-preview__file-action {
+    min-height: 2.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-activity-preview__dismiss,
+  .agent-activity-preview__row,
+  .agent-activity-preview__file-action {
+    transition: none;
+  }
+
+  .agent-activity-preview__row:hover {
+    transform: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .agent-activity-preview {
+    outline: 1px solid CanvasText;
+  }
+
+  .agent-activity-preview__badge,
+  .agent-activity-preview__dismiss,
+  .agent-activity-preview__file-action,
+  .agent-activity-preview__favicons img {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/agent-attention.css

@@ -0,0 +1,122 @@
+.agent-attention {
+  display: grid;
+  width: min(22rem, 100%);
+  min-width: 0;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
+  border: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-lg);
+  color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-shadow-md);
+}
+
+.agent-attention[data-tone="warning"] {
+  border-color: var(--sigvelo-color-warning-border);
+}
+
+.agent-attention__header,
+.agent-attention__trigger {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-width: 0;
+}
+
+.agent-attention__trigger.button {
+  width: 100%;
+  height: auto;
+  min-height: 2.5rem;
+  justify-content: stretch;
+  padding: var(--sigvelo-spacing-2);
+  margin: calc(-1 * var(--sigvelo-spacing-2));
+  text-align: start;
+}
+
+.agent-attention__icon {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--sigvelo-radius-md);
+  color: var(--sigvelo-color-text-muted);
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.agent-attention[data-tone="warning"] .agent-attention__icon {
+  color: var(--sigvelo-color-warning-text);
+  background: var(--sigvelo-color-warning-bg-subtle);
+}
+
+.agent-attention__icon > :is(svg, img) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.agent-attention__text {
+  display: grid;
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.agent-attention__title,
+.agent-attention__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-attention__title {
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.agent-attention__description {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.agent-attention__body {
+  min-width: 0;
+  overflow: hidden;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.agent-attention__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.agent-attention[data-busy] .agent-attention__title {
+  --agent-attention-shimmer: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  background: linear-gradient(
+    90deg,
+    var(--agent-attention-shimmer) 0% 40%,
+    var(--sigvelo-color-text) 50%,
+    var(--agent-attention-shimmer) 60% 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: agent-attention-shimmer 2.4s linear infinite;
+}
+
+@keyframes agent-attention-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .agent-attention[data-busy] .agent-attention__title {
+    animation: none;
+    background: none;
+    color: inherit;
+  }
+}