@mcp-b/react-components 0.48.0 → 0.49.1

package/dist/styles/color-contrast.test.ts

@@ -0,0 +1,212 @@
+import { expect, test } from "vitest";
+import { cdp, page } from "vitest/browser";
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { FileTree, FileTreeFile, FileTreeFolder } from "../components/general-purpose/FileTree.js";
+import presetsCss from "../../../design-tokens/src/color-presets.css?raw";
+import "./index.css";
+
+const presets = [
+  "",
+  ...new Set([...presetsCss.matchAll(/data-preset="([^"]+)"/g)].map((m) => m[1])),
+];
+const colorPrefix = "--sigvelo-color-";
+
+function luminance(channels: Uint8ClampedArray) {
+  return [0.2126, 0.7152, 0.0722].reduce((sum, weight, index) => {
+    const channel = channels[index] / 255;
+    return (
+      sum + weight * (channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4)
+    );
+  }, 0);
+}
+
+function contrastRatio(
+  context: CanvasRenderingContext2D,
+  foreground: string,
+  background: string,
+  surface: string,
+) {
+  context.fillStyle = surface;
+  context.fillRect(0, 0, 1, 1);
+  context.fillStyle = background;
+  context.fillRect(0, 0, 1, 1);
+  const backgroundLuminance = luminance(context.getImageData(0, 0, 1, 1).data);
+  context.fillStyle = foreground;
+  context.fillRect(0, 0, 1, 1);
+  const foregroundLuminance = luminance(context.getImageData(0, 0, 1, 1).data);
+  return (
+    (Math.max(backgroundLuminance, foregroundLuminance) + 0.05) /
+    (Math.min(backgroundLuminance, foregroundLuminance) + 0.05)
+  );
+}
+
+test.each(["light", "dark"])("semantic color pairs stay readable in %s mode", async (theme) => {
+  const root = document.documentElement;
+  const probe = document.createElement("div");
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Contrast checks require a canvas context");
+  document.body.append(probe);
+  root.dataset.theme = theme;
+
+  try {
+    for (const preset of presets) {
+      if (preset) root.dataset.preset = preset;
+      else delete root.dataset.preset;
+
+      for (const family of ["primary", "neutral", "success", "warning", "danger"]) {
+        const pairs = [
+          [`${family}-bg`, `${family}-text-on-bg`],
+          [`${family}-bg-subtle`, `${family}-text-on-subtle`],
+          [`${family}-bg-strong`, `${family}-text-on-strong`],
+          ["surface", `${family}-text`],
+        ];
+        if (family === "primary" || family === "danger") {
+          pairs.push(
+            [`${family}-bg-hover`, `${family}-text-on-bg`],
+            [`${family}-bg-press`, `${family}-text-on-bg`],
+          );
+        }
+
+        for (const [background, foreground] of pairs) {
+          probe.style.cssText = `background: var(${colorPrefix}${background}); color: var(${colorPrefix}${foreground}); border-color: var(--sigvelo-color-surface)`;
+          const style = getComputedStyle(probe);
+          const ratio = contrastRatio(
+            context,
+            style.color,
+            style.backgroundColor,
+            style.borderColor,
+          );
+          expect(
+            ratio,
+            `${preset || "default"}: ${foreground} on ${background}`,
+          ).toBeGreaterThanOrEqual(4.5);
+        }
+      }
+    }
+
+    delete root.dataset.preset;
+    probe.style.backgroundColor = "var(--sigvelo-color-neutral-bg-subtle)";
+    await cdp().send("Emulation.setEmulatedMedia", {
+      features: [{ name: "prefers-contrast", value: "no-preference" }],
+    });
+    const background = getComputedStyle(probe).backgroundColor;
+    await cdp().send("Emulation.setEmulatedMedia", {
+      features: [{ name: "prefers-contrast", value: "more" }],
+    });
+    expect(getComputedStyle(probe).backgroundColor).toBe(background);
+  } finally {
+    probe.remove();
+    delete root.dataset.theme;
+    delete root.dataset.preset;
+    await cdp().send("Emulation.setEmulatedMedia", { features: [] });
+  }
+});
+
+test.each(["light", "dark"])("selected FileTree rows stay readable in %s mode", async (theme) => {
+  const root = document.documentElement;
+  const fixture = document.createElement("div");
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Contrast checks require a canvas context");
+  document.body.append(fixture);
+  const reactRoot = createRoot(fixture);
+  act(() =>
+    reactRoot.render(
+      createElement(
+        "div",
+        null,
+        createElement(
+          FileTree,
+          { selectedPath: "src" },
+          createElement(FileTreeFolder, { path: "src", name: "Source" }),
+        ),
+        createElement(
+          FileTree,
+          { selectedPath: "index.ts" },
+          createElement(FileTreeFile, { path: "index.ts", name: "index.ts" }),
+        ),
+      ),
+    ),
+  );
+  root.dataset.theme = theme;
+
+  try {
+    const nodes = fixture.querySelectorAll<HTMLElement>(".file-tree__node[data-selected]");
+    expect(nodes).toHaveLength(2);
+    for (const node of nodes) {
+      for (const hovered of [false, true]) {
+        if (hovered) await page.elementLocator(node).hover();
+        else await page.elementLocator(node).unhover();
+        expect(node.matches(":hover")).toBe(hovered);
+        for (const preset of presets) {
+          if (preset) root.dataset.preset = preset;
+          else delete root.dataset.preset;
+          for (const animation of node.getAnimations()) animation.finish();
+          const style = getComputedStyle(node);
+          const surface = getComputedStyle(fixture.querySelector(".file-tree")!).backgroundColor;
+          expect(
+            contrastRatio(context, style.color, style.backgroundColor, surface),
+            `${preset || "default"}: ${node.textContent}, hover=${hovered}`,
+          ).toBeGreaterThanOrEqual(4.5);
+          for (const icon of node.querySelectorAll(".file-tree__icon, .file-tree__chevron")) {
+            expect(
+              contrastRatio(context, getComputedStyle(icon).color, style.backgroundColor, surface),
+              `${preset || "default"}: ${node.textContent} icon, hover=${hovered}`,
+            ).toBeGreaterThanOrEqual(3);
+          }
+        }
+      }
+    }
+  } finally {
+    act(() => reactRoot.unmount());
+    fixture.remove();
+    delete root.dataset.theme;
+    delete root.dataset.preset;
+  }
+});
+
+test("forced colors preserve scalar indicators and slider keyboard focus", async () => {
+  const fixture = document.createElement("div");
+  fixture.className = "progress--destructive";
+  document.body.append(fixture);
+  try {
+    await cdp().send("Emulation.setEmulatedMedia", {
+      features: [{ name: "forced-colors", value: "active" }],
+    });
+    const systemColor = document.createElement("div");
+    systemColor.style.backgroundColor = "Highlight";
+    fixture.append(systemColor);
+
+    for (const name of ["meter", "progress", "slider"]) {
+      const track = document.createElement("div");
+      const indicator = document.createElement("div");
+      track.className = `${name}__track`;
+      track.dataset.slot = `${name}-track`;
+      indicator.className = `${name}__indicator`;
+      indicator.dataset.slot = `${name}-indicator`;
+      track.append(indicator);
+      fixture.append(track);
+      expect(getComputedStyle(track).outlineStyle, name).toBe("solid");
+      expect(getComputedStyle(indicator).backgroundColor, name).toBe(
+        getComputedStyle(systemColor).backgroundColor,
+      );
+    }
+
+    const thumb = document.createElement("div");
+    thumb.className = "slider__thumb";
+    const range = document.createElement("input");
+    range.type = "range";
+    thumb.append(range);
+    fixture.append(thumb);
+    range.focus();
+    expect(range.matches(":focus-visible")).toBe(true);
+    expect(getComputedStyle(thumb).outlineStyle).toBe("solid");
+  } finally {
+    fixture.remove();
+    await cdp().send("Emulation.setEmulatedMedia", { features: [] });
+  }
+});

package/dist/styles/composition-motion.css

@@ -7,7 +7,6 @@
   .message,
   .queue,
   .queue__item,
-  .agent-chat__queued-message,
   .reasoning,
   .sources,
   .sources__item,
@@ -33,7 +32,6 @@
     .message,
     .queue,
     .queue__item,
-    .agent-chat__queued-message,
     .reasoning,
     .sources,
     .sources__item,

package/dist/styles/employee-chrome.css

@@ -0,0 +1,43 @@
+.employee-shell {
+  display: grid;
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+
+.employee-gate {
+  box-sizing: border-box;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sigvelo-spacing-3);
+  block-size: 100%;
+  padding: var(--sigvelo-layout-gutter);
+}
+
+.employee-shell__run-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  font: inherit;
+}
+
+.employee-menu__switch {
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.employee-menu__group-label {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.employee-menu__hint {
+  display: inline-flex;
+  color: var(--sigvelo-color-text-muted);
+}

package/dist/styles/file-tree.css

@@ -57,6 +57,11 @@
   transition-behavior: allow-discrete;
 }
 
+/* Lazy listings must have a numeric starting size when their first rows arrive. */
+.file-tree__group:empty {
+  block-size: 0;
+}
+
 .file-tree__group[data-collapsed] {
   block-size: 0;
   visibility: hidden;
@@ -105,7 +110,7 @@
 
 .file-tree__node[data-selected] {
   background-color: var(--sigvelo-color-primary-bg-subtle);
-  color: var(--sigvelo-color-primary-text);
+  color: var(--sigvelo-color-primary-text-on-subtle);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
@@ -152,6 +157,10 @@
   color: var(--sigvelo-color-primary-text);
 }
 
+.file-tree__node[data-selected] :is(.file-tree__icon, .file-tree__chevron) {
+  color: inherit;
+}
+
 .file-tree__actions {
   display: inline-flex;
   align-items: center;

package/dist/styles/index.css

@@ -15,6 +15,8 @@
 @import "./accordion.css" layer(components);
 @import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
+@import "./think-chat-tool-panels.css" layer(components);
+@import "./think-chat-activity.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
@@ -35,6 +37,7 @@
 @import "./combobox.css" layer(components);
 @import "./context-menu.css" layer(components);
 @import "./dialog.css" layer(components);
+@import "./employee-chrome.css" layer(components);
 @import "./empty-state.css" layer(components);
 @import "./field.css" layer(components);
 @import "./fieldset.css" layer(components);
@@ -125,8 +128,7 @@
 @import "./think-execution-status.css" layer(components);
 @import "./think-execution-workbench.css" layer(components);
 @import "./think-full-app.css" layer(components);
-@import "./think-routine-library.css" layer(components);
-@import "./think-sidepanel.css" layer(components);
+@import "./think-routine.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);

package/dist/styles/manager-office.css

@@ -116,8 +116,8 @@
   --manager-office-face: 2.625rem;
 
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
 }
 
 .manager-office__sidebar[data-layout="chat"] .manager-office__sidebar-heading {
@@ -211,7 +211,7 @@
   min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -295,7 +295,7 @@
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-2);
   display: grid;
-  grid-template-columns: var(--manager-office-face) minmax(0, 1fr);
+  grid-template-columns: var(--manager-office-face) var(--sigvelo-layout-track-fill);
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-md);
@@ -549,7 +549,7 @@
 .manager-office__employee-header {
   min-inline-size: 0;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
   align-items: start;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-1);

package/dist/styles/message.css

@@ -127,14 +127,6 @@
   border-radius: var(--sigvelo-radius-md);
 }
 
-/* Quiet annotation under a part whose stored content was compacted. */
-.message__compacted {
-  margin-block-start: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-text-meta);
-  font-style: italic;
-  color: var(--sigvelo-color-text-muted);
-}
-
 .message__meta {
   display: flex;
   align-items: center;
@@ -166,7 +158,7 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message__actions--reserved {
+.message__actions[data-reserve-space] {
   min-block-size: var(--sigvelo-control-height-xs);
 }
 
@@ -207,7 +199,7 @@
 }
 
 @media (any-pointer: coarse) {
-  .message__actions--reserved {
+  .message__actions[data-reserve-space] {
     min-block-size: var(--sigvelo-control-height-xl);
   }
 

package/dist/styles/queue.css

@@ -60,6 +60,19 @@
   gap: var(--sigvelo-spacing-2);
 }
 
+.queue__section-content {
+  display: grid;
+  gap: var(--sigvelo-layout-cluster);
+  min-inline-size: 0;
+}
+
+.queue__section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--sigvelo-spacing-1);
+}
+
 .queue__list {
   margin-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-1);
 }
@@ -179,10 +192,61 @@
   opacity: 1;
 }
 
+.queue__item-actions[data-persistent] {
+  opacity: 1;
+}
+
 .queue__item-action {
   min-inline-size: 0;
 }
 
+.queue[data-density="compact"] {
+  --queue-row-block-size: var(--sigvelo-spacing-5);
+  /* Whole rows plus the list's own row gaps (.queue__list-inner). */
+  --queue-list-max-block-size: calc(
+    3 * var(--queue-row-block-size) + 2 * var(--sigvelo-spacing-0-5)
+  );
+
+  gap: 0;
+}
+
+.queue[data-density="compact"] .queue__list {
+  margin-block: 0;
+}
+
+.queue[data-density="compact"] .queue__list-viewport {
+  max-block-size: var(--queue-list-max-block-size);
+}
+
+.queue[data-density="compact"] .queue__item {
+  align-items: center;
+  min-block-size: var(--queue-row-block-size);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-2);
+}
+
+.queue[data-density="compact"] .queue__item-indicator {
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+  margin-block-start: 0;
+}
+
+.queue[data-density="compact"] .queue__item-content {
+  gap: 0;
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.queue[data-density="compact"] .queue__item-action {
+  --sigvelo-recipe-button-height: var(--queue-row-block-size);
+  --sigvelo-recipe-button-padding-inline: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-button-font-size: var(--sigvelo-text-xs);
+  --sigvelo-recipe-button-icon-size: var(--sigvelo-text-xs);
+
+  font-weight: var(--sigvelo-font-weight-normal);
+}
+
 .queue__item-attachment {
   display: flex;
   align-items: center;
@@ -218,6 +282,13 @@
   }
 }
 
+@media (any-pointer: coarse) {
+  .queue[data-density="compact"] {
+    --queue-row-block-size: var(--sigvelo-control-height-xl);
+    --queue-list-max-block-size: calc(2 * var(--queue-row-block-size) + var(--sigvelo-spacing-0-5));
+  }
+}
+
 .queue__item-file-icon {
   display: inline-flex;
   color: var(--sigvelo-color-text-muted);

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

@@ -49,7 +49,7 @@
 .responsive-sidebar-shell[data-sidebar-toggle-placement="sidebar"]
   .responsive-sidebar-shell__sidebar {
   display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
 }
 
 .responsive-sidebar-shell__sidebar-leading {

package/dist/styles/subagent-run.css

@@ -3,7 +3,7 @@
    border at the end of this file. */
 .subagent-run__selector {
   max-inline-size: 18rem;
-  /* Two text lines (name over live status) inside a pill: the control's fixed
+  /* Two text lines (name over live status) inside a control: the control's fixed
      small height would clip the second, so let the content size it. */
   block-size: auto;
   min-block-size: var(--sigvelo-density-compact-control-height);
@@ -15,7 +15,7 @@
   text-align: start;
 }
 
-/* The run's name over its live status line. Shared by the selector chip and
+/* The run's name over its live status line. Shared by the selector and
    the drill-in's top bar so one run reads the same in both. */
 .subagent-run__text {
   display: grid;
@@ -30,14 +30,14 @@
   line-height: var(--sigvelo-leading-snug);
 }
 
-/* Scoped to the label, not the chip, so the drill-in bar tints the same. */
+/* Scoped to the label, not the control, so the drill-in bar tints the same. */
 .subagent-run__text[data-status="error"] .subagent-run__status {
   color: var(--sigvelo-color-danger-text);
 }
 
 /* The ghost hover would swap the raised surface for a near-transparent tint;
    keep the surface and tint over it instead. */
-.subagent-run__selector:hover:not([data-disabled]) {
+.subagent-run__selector:hover:not([data-disabled], [data-surface="plain"]) {
   background-color: color-mix(
     in oklab,
     var(--sigvelo-color-surface-raised),
@@ -45,6 +45,93 @@
   );
 }
 
+.subagent-run__selector[data-surface="plain"] {
+  flex: 1 1 auto;
+  inline-size: 100%;
+  max-inline-size: none;
+  min-block-size: 0;
+  padding: 0;
+  border-radius: var(--sigvelo-radius-sm);
+  background: transparent;
+}
+
+/* Drop the raised chip's elevation, never the focus ring the button recipe
+   draws with the same property. */
+.subagent-run__selector[data-surface="plain"]:not(:focus-visible) {
+  box-shadow: none;
+}
+
+/* A delegated row is two text lines (name over status). The shared compact
+   queue caps its viewport at whole rows of --queue-row-block-size, so the
+   row measure has to say what the row actually is. */
+[data-subagent-run-panel] .queue[data-density="compact"] {
+  --queue-row-block-size: calc(
+    var(--sigvelo-text-compact-leading) + var(--sigvelo-text-xs) * var(--sigvelo-leading-snug)
+  );
+}
+
+@media (any-pointer: coarse) {
+  [data-subagent-run-panel] .queue[data-density="compact"] {
+    --queue-row-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
+/* The report disclosure above a run's transcript on the employee run route;
+   a fixed band, so the transcript beneath it takes the remaining height. */
+.subagent-run__report {
+  flex: 0 0 auto;
+  min-inline-size: 0;
+  padding-inline: var(--sigvelo-layout-gutter);
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-subtle);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.subagent-run__report-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: 0;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
+  background: transparent;
+  color: var(--sigvelo-color-text-muted);
+  font: inherit;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  text-align: start;
+  cursor: pointer;
+}
+
+.subagent-run__report-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.subagent-run__report-trigger::after {
+  content: "";
+  flex: 0 0 auto;
+  inline-size: 0;
+  block-size: 0;
+  border-inline: var(--sigvelo-spacing-1) solid transparent;
+  border-block-start: var(--sigvelo-spacing-1) solid currentColor;
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+}
+
+.subagent-run__report-trigger[data-panel-open]::after {
+  rotate: 180deg;
+}
+
+.subagent-run__report .subagent-run__metadata {
+  padding-block-end: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__selector[data-surface="plain"]:hover:not([data-disabled]) {
+  background: transparent;
+}
+
 .subagent-run__selector[aria-current="page"] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
@@ -61,10 +148,35 @@
 
 .subagent-run__list-item {
   min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__metadata p {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.subagent-run__metadata [role="alert"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.subagent-run__metadata {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  max-block-size: 12rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
 }
 
-.subagent-run__list--adjacent {
-  margin-block-start: var(--sigvelo-spacing-2);
+.subagent-run__metadata p,
+.subagent-run__milestone {
+  white-space: pre-wrap;
 }
 
 /* Size comes from the surrounding control — the selector's button recipe, the
@@ -158,6 +270,10 @@
     border-color: CanvasText;
   }
 
+  .subagent-run__report {
+    border-color: CanvasText;
+  }
+
   .subagent-run__indicator {
     color: CanvasText;
   }