@mcp-b/react-components 0.40.0 → 0.41.0

package/dist/styles/commit.css

@@ -126,9 +126,32 @@
 }
 
 .commit__file-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
   min-inline-size: var(--sigvelo-spacing-5);
-  justify-content: center;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-compact);
+  color: var(--sigvelo-color-text-muted);
+}
+
+.commit__file-status[data-status="added"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.commit__file-status[data-status="modified"] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.commit__file-status[data-status="deleted"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.commit__file-status[data-status="renamed"] {
+  color: var(--sigvelo-color-primary-text);
 }
 
 .commit__file-icon {

package/dist/styles/environment-variables.css

@@ -92,6 +92,9 @@
 
 .environment-variables__required {
   flex-shrink: 0;
+  color: var(--sigvelo-color-warning-text);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
 }
 
 .environment-variables__copy {

package/dist/styles/index.css

@@ -15,7 +15,6 @@
 @import "./accordion.css" layer(components);
 @import "./activity-header.css" layer(components);
 @import "./activity.css" layer(components);
-@import "./agent-activity-preview.css" layer(components);
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
@@ -27,7 +26,6 @@
 @import "./avatar.css" layer(components);
 @import "./app-icon.css" layer(components);
 @import "./app-frame.css" layer(components);
-@import "./badge.css" layer(components);
 @import "./button.css" layer(components);
 @import "./action-guide.css" layer(components);
 @import "./card.css" layer(components);
@@ -67,9 +65,7 @@
 @import "./search-field.css" layer(components);
 @import "./select.css" layer(components);
 @import "./separator.css" layer(components);
-@import "./shell.css" layer(components);
 @import "./slider.css" layer(components);
-@import "./status-pill.css" layer(components);
 @import "./stepper.css" layer(components);
 @import "./switch.css" layer(components);
 @import "./tabs.css" layer(components);
@@ -88,6 +84,7 @@
 @import "./streamdown.css" layer(components);
 @import "./artifact.css" layer(components);
 @import "./browser-live-view.css" layer(components);
+@import "./browser-live-screen.css" layer(components);
 @import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
 @import "./browser-replay.css" layer(components);
@@ -112,6 +109,10 @@
 @import "./reasoning.css" layer(components);
 @import "./resizable-side-panel.css" layer(components);
 @import "./responsive-sidebar-shell.css" layer(components);
+/* After the shell it composes: `.manager-office` and `.responsive-sidebar-shell`
+   land on the same element at equal specificity, so the shell's `min-block-size:
+   0` silently ate the office's own floor while this sat earlier in the file. */
+@import "./manager-office.css" layer(components);
 @import "./sources.css" layer(components);
 @import "./subagent-run.css" layer(components);
 @import "./task.css" layer(components);

package/dist/styles/manager-office.css

@@ -0,0 +1,486 @@
+.manager-office {
+  block-size: 100%;
+  min-block-size: 32rem;
+}
+
+.manager-office__sidebar {
+  block-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  gap: var(--sigvelo-density-compact-control-gap);
+  padding: var(--sigvelo-spacing-2);
+}
+
+.manager-office__sidebar-heading,
+.manager-office__sidebar-actions {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+}
+
+.manager-office__sidebar-heading {
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  justify-content: space-between;
+  padding-inline-start: var(--sigvelo-spacing-2);
+}
+
+.manager-office__sidebar-actions {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+/*
+ * Ploy's measured application voice is 14px/21px for content and ~12.25px for
+ * metadata. The office previously ran a step below that on both — 13px titles
+ * over 11px meta — which read as a settings panel rather than the surface a
+ * manager works out of. The dense sidebar keeps the compact step; only the
+ * content plane moves up.
+ */
+.manager-office__sidebar-heading strong,
+.manager-office__employee-nav strong,
+.manager-office__routine-trigger strong {
+  font-size: var(--sigvelo-text-compact);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-compact-leading);
+}
+
+.manager-office__employee-header strong,
+.manager-office__work-list strong,
+.manager-office__routine-list strong,
+.manager-office__channel-list strong {
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+.manager-office__attention-nav,
+.manager-office__employee-link {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  align-items: center;
+  justify-content: stretch;
+  gap: var(--sigvelo-density-compact-control-gap);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-align: start;
+}
+
+.manager-office__attention-nav {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.manager-office__attention-nav > svg {
+  color: var(--sigvelo-color-danger-text);
+}
+
+/* A section label above the roster, sized to the rail's own quiet voice. */
+.manager-office__nav-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  margin: var(--sigvelo-spacing-1) 0 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-text-2xs-leading);
+  text-transform: uppercase;
+  letter-spacing: var(--sigvelo-tracking-wide);
+}
+
+.manager-office__employee-nav {
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.manager-office__employee-link {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__identity {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__employee-nav small,
+.manager-office__routine-list small {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-2xs);
+  line-height: var(--sigvelo-text-2xs-leading);
+}
+
+.manager-office__employee-header small,
+.manager-office__work-list small,
+.manager-office__channel-list small {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-text-xs-leading);
+}
+
+.manager-office__attention-nav[aria-current="page"],
+.manager-office__employee-link[aria-current="page"] {
+  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), transparent 18%);
+}
+
+.manager-office__main {
+  min-inline-size: 0;
+  min-block-size: 0;
+  block-size: 100%;
+  overflow: auto;
+}
+
+/*
+ * A capped, centred column. Stretched to a 1440px pane, a roster row put its
+ * status a screen-width away from the name it belonged to; Ploy caps the same
+ * lists at 800px for the same reason.
+ */
+.manager-office__attention,
+.manager-office__employee-detail {
+  min-inline-size: 0;
+  inline-size: 100%;
+  max-inline-size: 60rem;
+  margin-inline: auto;
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
+}
+
+.manager-office__attention-list {
+  gap: var(--sigvelo-spacing-2);
+}
+
+/*
+ * Rows are bounded surfaces, not naked ghost buttons. One hairline and a real
+ * padding box give each row an edge to scan against, which is what carried
+ * Ploy's 67px work rows and Codex's activity rows.
+ */
+.manager-office__work-link,
+.manager-office__routine-link,
+.manager-office__channel {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  align-items: center;
+  justify-content: stretch;
+  gap: var(--sigvelo-density-compact-control-gap);
+  font-weight: var(--sigvelo-font-weight-normal);
+  text-align: start;
+  white-space: normal;
+}
+
+.manager-office__work-link {
+  min-block-size: var(--sigvelo-control-height-xl);
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  border-radius: var(--sigvelo-radius-md);
+  background: var(--sigvelo-color-surface);
+}
+
+.manager-office__routine-link {
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__work-link,
+.manager-office__routine-link {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.manager-office__row-chevron {
+  color: var(--sigvelo-color-text-subtle);
+}
+
+.manager-office__employee-detail {
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__employee-header {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-1);
+}
+
+.manager-office__employee-handoffs,
+.manager-office__attention-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__handoff {
+  inline-size: 100%;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
+  /* Lifted off a transcript the card needs elevation; sitting on the page it
+     does not, and the attention hairline reads better without a shadow
+     competing with it. Same call as the sections below. */
+  box-shadow: none;
+}
+
+/*
+ * `AgentAttention` stacks header over body over actions, which is right when
+ * the employee quoted its ask. When it did not, that stack spends a whole row
+ * on a lone button, so the card pulls the way in up beside the ask instead.
+ */
+.manager-office__handoff:not(:has(.agent-attention__body)) {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+/* The verbatim ask is the point of the card; it wraps rather than truncating,
+   unlike the description line above it. */
+.manager-office__handoff > .agent-attention__body {
+  grid-column: 1 / -1;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  line-height: var(--sigvelo-text-sm-leading);
+}
+
+@container responsive-sidebar-shell (inline-size <= 34rem) {
+  .manager-office__handoff:not(:has(.agent-attention__body)) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sigvelo-spacing-2);
+  }
+}
+
+.manager-office__employee-columns {
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
+  align-items: stretch;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__employee-aside {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.manager-office__section {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-3);
+}
+
+.manager-office__section-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+}
+
+/* The glyph makes the three panes distinct before their labels are read. */
+.manager-office__section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.manager-office__section-title > svg {
+  color: var(--sigvelo-color-text-muted);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__section-content {
+  display: grid;
+  gap: 0;
+}
+
+.manager-office__channel-list {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__channel {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  padding: var(--sigvelo-spacing-1) 0;
+}
+
+/* The host's mark sits in the tile the way a favicon would, so a supplied SVG
+   and a fallback initial occupy the same box. */
+.manager-office__channel-mark {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.manager-office__channel-mark > svg {
+  inline-size: 65%;
+  block-size: 65%;
+}
+
+.manager-office__channel-direction {
+  display: inline-grid;
+  place-items: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__channel-status {
+  display: inline-grid;
+  place-items: center;
+}
+
+.manager-office__channel-status[data-status="connected"] {
+  color: var(--sigvelo-color-success-text);
+}
+
+.manager-office__channel-status[data-status="needs-auth"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__channel-status[data-status="error"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__work-list {
+  gap: var(--sigvelo-spacing-2);
+}
+
+.manager-office__routine-list {
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.manager-office__routine-trigger {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  justify-content: stretch;
+  padding-inline: 0;
+  text-align: start;
+}
+
+.manager-office__routine-trigger > span:first-child {
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+}
+
+.manager-office__routine-list {
+  margin-block-start: var(--sigvelo-spacing-1);
+}
+
+.manager-office__nav-status,
+.manager-office__thread-status {
+  display: inline-grid;
+  place-items: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.manager-office__status,
+.manager-office__evidence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-density-compact-control-gap);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+  white-space: nowrap;
+}
+
+.manager-office__status > svg,
+.manager-office__evidence > svg,
+.manager-office__nav-status > svg,
+.manager-office__thread-status > svg,
+.manager-office__channel-direction > svg,
+.manager-office__channel-status > svg,
+.manager-office__row-chevron,
+.manager-office__routine-link > svg {
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
+}
+
+.manager-office__status[data-status="needs-you"],
+.manager-office__nav-status[data-status="needs-you"],
+.manager-office__status[data-status="issue"],
+.manager-office__status[data-status="unavailable"],
+.manager-office__nav-status[data-status="issue"],
+.manager-office__nav-status[data-status="unavailable"],
+.manager-office__thread-status[data-status="error"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
+.manager-office__status[data-status="working"],
+.manager-office__status[data-status="connecting"],
+.manager-office__nav-status[data-status="working"],
+.manager-office__nav-status[data-status="connecting"],
+.manager-office__thread-status[data-status="running"] {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.manager-office__evidence[data-complete] {
+  color: var(--sigvelo-color-success-text);
+}
+
+/*
+ * The rail's state line stays muted and lets the glyph beside it carry the
+ * colour. Tinting both put semantic text at 11px over the selected row's
+ * raised background, which lands at 4.28:1 — under the 4.5:1 floor — and the
+ * glyph is a non-text element held to 3:1, so it can say the same thing.
+ */
+
+.manager-office__unread-dot {
+  display: inline-block;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  margin-inline-start: var(--sigvelo-spacing-1);
+  border-radius: var(--sigvelo-radius-full);
+  background: var(--sigvelo-color-primary-text);
+  vertical-align: middle;
+}
+
+.manager-office__main > .empty-state {
+  padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
+}
+
+@container responsive-sidebar-shell (inline-size <= 42rem) {
+  .manager-office__attention,
+  .manager-office__employee-detail {
+    padding: var(--sigvelo-spacing-2);
+  }
+
+  .manager-office__employee-columns {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container responsive-sidebar-shell (inline-size <= 30rem) {
+  .manager-office__status > span {
+    display: none;
+  }
+}
+
+@media (any-pointer: coarse) {
+  .manager-office__attention-nav,
+  .manager-office__employee-link,
+  .manager-office__work-link,
+  .manager-office__routine-link,
+  .manager-office__routine-trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
+@media (forced-colors: active) {
+  .manager-office__attention-nav[aria-current="page"],
+  .manager-office__employee-link[aria-current="page"] {
+    outline: var(--sigvelo-border-width) solid Highlight;
+  }
+}