@mcp-b/react-components 0.40.0 → 0.41.0

package/dist/{icons-DwgNir1Q.d.ts → icons-0corjfxR.d.ts}

@@ -22,11 +22,6 @@ declare const ChevronDownIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const ChevronLeftIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const CheckIcon: ({
   size,
   strokeWidth,
@@ -238,11 +233,6 @@ declare const CalendarIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const HashIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const WrenchIcon: ({
   size,
   strokeWidth,
@@ -253,11 +243,6 @@ declare const InfoIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const ImageIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const MonitorIcon: ({
   size,
   strokeWidth,
@@ -301,4 +286,4 @@ declare const MaximizeIcon: ({
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { StopIcon as $, InfoIcon as A, MoveToFrontIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MessageSquareIcon as F, PlusIcon as G, PauseIcon as H, MicrophoneIcon as I, SearchIcon as J, QueueIcon as K, MinusIcon as L, LinkIcon as M, MaximizeIcon as N, IconProps as O, McpIcon as P, SquareIcon as Q, MonitorIcon as R, EyeIcon as S, FolderIcon as T, PencilIcon as U, PaperclipIcon as V, PlayIcon as W, SlackIcon as X, SidebarIcon as Y, SpinnerIcon as Z, CopyIcon as _, ArrowUpIcon as a, WrenchIcon as at, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, SunIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, WarningIcon as it, KeyboardIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, TerminalIcon as nt, ArrowUpRightIcon as o, XIcon as ot, ChevronDownIcon as p, RefreshIcon as q, ArrowLeftIcon as r, TrashIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TargetIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoonIcon as z };
+export { TerminalIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, InfoIcon as D, IconProps as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SpinnerIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, KeyboardIcon as O, MinusIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SlackIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, BrandIconProps as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/{icons-MmIXciMO.js → icons-CVFSeTJn.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
-import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Keyboard, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
+import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
 //#region src/components/_internal/icons.tsx
@@ -27,7 +27,6 @@ function brandIcon(Component) {
 }
 const ChevronRightIcon = icon(ChevronRight);
 const ChevronDownIcon = icon(ChevronDown);
-const ChevronLeftIcon = icon(ChevronLeft);
 const CheckIcon = icon(Check);
 const CodeIcon = icon(CodeXml);
 const XIcon = icon(X);
@@ -79,10 +78,8 @@ const WarningIcon = icon(TriangleAlert);
 const BoxIcon = icon(Box);
 const BrainIcon = icon(Brain);
 const CalendarIcon = icon(CalendarDays);
-const HashIcon = icon(Hash);
 const WrenchIcon = icon(Wrench);
 const InfoIcon = icon(Info);
-const ImageIcon = icon(Image);
 const MonitorIcon = icon(Monitor);
 const MessageSquareIcon = icon(MessageSquare);
 const McpIcon = brandIcon(SiModelcontextprotocol);
@@ -93,4 +90,4 @@ const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { TargetIcon as $, LinkIcon as A, PauseIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MinusIcon as F, RefreshIcon as G, PlayIcon as H, MonitorIcon as I, SlackIcon as J, SearchIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, InfoIcon as O, MicrophoneIcon as P, SunIcon as Q, MoveToFrontIcon as R, EyeOffIcon as S, FolderOpenIcon as T, PlusIcon as U, PencilIcon as V, QueueIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, TerminalIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, XIcon as it, MaximizeIcon as j, KeyboardIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SidebarIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TrashIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PaperclipIcon as z };
+export { WarningIcon as $, MessageSquareIcon as A, PlusIcon as B, FolderIcon as C, LinkIcon as D, KeyboardIcon as E, MoveToFrontIcon as F, SlackIcon as G, RefreshIcon as H, PaperclipIcon as I, StopIcon as J, SpinnerIcon as K, PauseIcon as L, MinusIcon as M, MonitorIcon as N, MaximizeIcon as O, MoonIcon as P, TrashIcon as Q, PencilIcon as R, FileIcon as S, InfoIcon as T, SearchIcon as U, QueueIcon as V, SidebarIcon as W, TargetIcon as X, SunIcon as Y, TerminalIcon as Z, DotIcon as _, ArrowUpIcon as a, EyeIcon as b, BoxIcon as c, CheckIcon as d, WrenchIcon as et, ChevronDownIcon as f, DiscordIcon as g, CopyIcon as h, ArrowRightIcon as i, MicrophoneIcon as j, McpIcon as k, BrainIcon as l, CodeIcon as m, ArrowDownIcon as n, ArrowUpRightIcon as o, ChevronRightIcon as p, SquareIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, XIcon as tt, CalendarIcon as u, DownloadIcon as v, FolderOpenIcon as w, EyeOffIcon as x, EllipsisIcon as y, PlayIcon as z };

package/dist/styles/agent-attention.css

@@ -12,8 +12,8 @@
   box-shadow: var(--sigvelo-elevation-raised);
 }
 
-.agent-attention[data-tone="warning"] {
-  border-color: var(--sigvelo-color-warning-border);
+.agent-attention[data-tone="attention"] {
+  border-color: var(--sigvelo-color-danger-border);
 }
 
 .agent-attention__header,
@@ -45,9 +45,9 @@
   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[data-tone="attention"] .agent-attention__icon {
+  color: var(--sigvelo-color-danger-text);
+  background: var(--sigvelo-color-danger-bg-subtle);
 }
 
 .agent-attention__icon > :is(svg, img) {

package/dist/styles/agent-chat.css

@@ -1,14 +1,20 @@
 .agent-chat {
-  --agent-chat-content-max-inline-size: 64rem;
-  --agent-chat-composer-scrim-fade: 2.5rem;
-
+  /* Hooks, not constants: hosts set --agent-chat-content-max-inline-size or
+     --agent-chat-composer-scrim-fade on any ancestor. Declaring them here
+     would beat every inherited value, so the defaults live in the fallbacks
+     at each use site. */
   container: agent-chat / inline-size;
   position: relative;
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
   min-block-size: 0;
-  background-color: var(--sigvelo-color-surface);
+  /* The colour the lane rests on. Hosts that seat the conversation on the
+     underlay rather than a plane of its own inherit --agent-chat-surface down
+     to here, so the composer's scrim dissolves into what is actually behind
+     it. Declared as a fallback rather than on .agent-chat itself: a local
+     custom property would beat the ancestor's value. */
+  background-color: var(--agent-chat-surface, var(--sigvelo-color-surface));
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -34,12 +40,15 @@
      block padding), so the inline gutters land OUTSIDE this size — subtract
      them from the full-width term or the padding box overflows the viewport
      and end-aligned user rows hang past the right edge. */
-  inline-size: min(100% - 2 * var(--sigvelo-spacing-4), var(--agent-chat-content-max-inline-size));
+  inline-size: min(
+    100% - 2 * var(--sigvelo-spacing-4),
+    var(--agent-chat-content-max-inline-size, 64rem)
+  );
   margin-inline: auto;
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade));
+    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade, 2.5rem));
   padding-inline: var(--sigvelo-spacing-4);
 }
 
@@ -89,7 +98,7 @@
 
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
   min-block-size: 100%;
   margin-inline: auto;
   padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
@@ -360,24 +369,25 @@
   position: absolute;
   z-index: -1;
   inset: 0;
-  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade));
+  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade, 2.5rem));
   content: "";
   pointer-events: none;
   background: linear-gradient(
     to bottom,
     transparent,
-    var(--sigvelo-color-surface) var(--agent-chat-composer-scrim-fade)
+    var(--agent-chat-surface, var(--sigvelo-color-surface))
+      var(--agent-chat-composer-scrim-fade, 2.5rem)
   );
 }
 
 .agent-chat__composer > .prompt-input {
   z-index: 1;
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
   margin-inline: auto;
   padding-block: var(--sigvelo-spacing-3);
 }
 
-/* Transient status pill between transcript and composer (recovery, errors). */
+/* Transient status between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
   align-items: center;
@@ -397,7 +407,7 @@
   flex-direction: column;
   align-items: stretch;
   inline-size: calc(
-    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-10)
+    min(100%, var(--agent-chat-content-max-inline-size, 64rem)) - var(--sigvelo-spacing-10)
   );
   margin-inline: auto;
 }
@@ -528,6 +538,31 @@
    spare pixels under it. Only the height query below drops the centring, and
    only where there is genuinely no room for it. */
 @container agent-chat (width <= 36rem) {
+  .agent-chat__transcript-content {
+    /* A notch pushes the first row down only as far as it must: the desktop
+       inset already clears shallow insets, so only deeper ones add height. */
+    --message-scroller-virtual-block-start: max(
+      var(--sigvelo-spacing-8),
+      calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px))
+    );
+
+    inline-size: min(
+      100% - 2 * var(--sigvelo-spacing-3),
+      var(--agent-chat-content-max-inline-size, 64rem)
+    );
+    padding-inline: var(--sigvelo-spacing-3);
+  }
+
+  .agent-chat .message[data-from="assistant"] .message__content {
+    inline-size: 100%;
+  }
+
+  .agent-chat__composer {
+    padding-block-end: max(var(--sigvelo-spacing-4), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--sigvelo-spacing-3), env(safe-area-inset-left, 0px))
+      max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
+  }
+
   .agent-chat-start-screen__content {
     --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
   }

package/dist/styles/agent-tool-detail.css

@@ -1,6 +1,6 @@
 .agent-tool-detail {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr);
   min-inline-size: 0;
   block-size: 100%;
   background-color: var(--sigvelo-color-surface);
@@ -47,18 +47,8 @@
   block-size: 100%;
 }
 
-.agent-tool-detail > .subagent-run__actions {
-  grid-row: 4;
-  display: flex;
-  justify-content: center;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
-  border-block-start: var(--sigvelo-border-width) var(--sigvelo-border-style)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
 @media (forced-colors: active) {
-  .agent-tool-detail__run-state,
-  .agent-tool-detail > .subagent-run__actions {
+  .agent-tool-detail__run-state {
     border-color: CanvasText;
   }
 }

package/dist/styles/app-icon.css

@@ -1,3 +1,6 @@
+/* A mark sits flat on whatever canvas hosts it — the tile never paints its
+   own background. Elevation is a drop shadow that follows the mark's own
+   silhouette, so a transparent favicon casts its shape, not an invisible box. */
 .avatar.app-icon {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
   --sigvelo-recipe-app-icon-radius: 30%;
@@ -11,10 +14,11 @@
   flex: none;
   overflow: hidden;
   border-radius: var(--sigvelo-recipe-app-icon-radius);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: 0 var(--sigvelo-spacing-1) var(--sigvelo-spacing-4)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
-  corner-shape: round;
+  background: transparent;
+  filter: drop-shadow(
+    0 var(--sigvelo-border-width) var(--sigvelo-spacing-0-5)
+      color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 25%)
+  );
   user-select: none;
 }
 
@@ -40,24 +44,15 @@
   padding: var(--sigvelo-spacing-2);
 }
 
-.app-icon[data-app-icon-variant="surface"] {
-  background: var(--sigvelo-color-surface-raised);
-}
+/* The surface variant keeps only the inset; the mark stays flat on the canvas. */
 
 .app-icon[data-app-icon-variant="contrast"] {
   background: var(--sigvelo-color-primary-bg);
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
-.app-icon::after {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width-hairline)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
-  content: "";
-  pointer-events: none;
-}
+/* Full-bleed artwork brings its own edges; a hairline ring around a flat
+   transparent mark would outline an invisible box, so no variant draws one. */
 
 .app-icon__image,
 .app-icon__fallback,
@@ -80,7 +75,7 @@
   align-items: center;
   justify-content: center;
   border-radius: inherit;
-  background: var(--sigvelo-color-surface-raised);
+  background: transparent;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -94,7 +89,6 @@
 .app-icon-stack {
   display: inline-flex;
   align-items: center;
-  block-size: 0;
   isolation: isolate;
 }
 

package/dist/styles/app-top-bar.css

@@ -1,12 +1,19 @@
 .app-top-bar {
-  --app-top-bar-block-size: calc(
-    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2)
-  );
-
   box-sizing: border-box;
   inline-size: 100%;
   min-inline-size: 0;
-  min-block-size: calc(var(--app-top-bar-block-size) + env(safe-area-inset-top, 0px));
+  /* Hooks, not constants: declaring either here would beat every inherited
+     value, so the defaults live in the fallbacks. Hosts set
+     --app-top-bar-block-size on any ancestor to size every bar in a region at
+     once; the bar adds the safe-area inset itself, so the hook stays a plain
+     content height. */
+  min-block-size: calc(
+    var(
+        --app-top-bar-block-size,
+        calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2))
+      ) +
+      env(safe-area-inset-top, 0px)
+  );
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -17,7 +24,9 @@
     calc(var(--sigvelo-spacing-2) + env(safe-area-inset-right, 0px));
   border: 0;
   border-radius: 0;
-  background: var(--sigvelo-color-surface);
+  /* No surface of its own: the bar occupies a layout row, so whatever plane
+     it sits on shows through and can never disagree with it. */
+  background: transparent;
 }
 
 .app-top-bar__leading,
@@ -48,6 +57,23 @@
   justify-self: end;
 }
 
+/* A panel header, not an application title bar: the symmetric track layout
+   would float the name in the middle of the plane instead of labelling its
+   leading edge. Only the trailing group still needs room of its own.
+   Panel chrome also sits atop scrolling content, so it separates the Ploy
+   way — one hairline and a breath of shadow, still no fill. */
+.app-top-bar[data-title-align="start"] {
+  position: relative;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  box-shadow: var(--sigvelo-elevation-bar);
+}
+
+.app-top-bar[data-title-align="start"] .app-top-bar__title {
+  justify-self: start;
+}
+
 .app-top-bar__button {
   box-sizing: border-box;
   flex: 0 0 auto;

package/dist/styles/avatar.css

@@ -1,6 +1,5 @@
 .avatar {
   --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-sm);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2-5);
 
   position: relative;
   display: inline-flex;
@@ -12,23 +11,23 @@
   overflow: hidden;
   font-family: inherit;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
   user-select: none;
 }
 
+.avatar[data-shape="circle"] {
+  border-radius: var(--sigvelo-radius-full);
+}
+
 .avatar[data-size="sm"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-6);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-2);
 }
 
 .avatar[data-size="lg"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-control-height-lg);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-3);
 }
 
 .avatar[data-size="xl"] {
   --sigvelo-recipe-avatar-size: var(--sigvelo-spacing-14);
-  --sigvelo-recipe-avatar-badge-size: var(--sigvelo-spacing-4);
 }
 
 .avatar[data-shape="rounded"] {
@@ -68,7 +67,7 @@
   color: var(--sigvelo-color-text-muted);
   text-transform: uppercase;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
-  border-radius: var(--sigvelo-radius-full);
+  border-radius: inherit;
 }
 
 .avatar[data-size="sm"] .avatar__fallback {
@@ -89,8 +88,7 @@
   margin-inline-start: 0;
 }
 
-.avatar-group__count,
-.avatar__badge {
+.avatar-group__count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -122,17 +120,3 @@
 .avatar-group:has(.avatar[data-size="lg"]) .avatar-group__count {
   --sigvelo-recipe-avatar-count-size: var(--sigvelo-control-height-lg);
 }
-
-.avatar__badge {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: 0;
-  z-index: 10;
-  inline-size: var(--sigvelo-recipe-avatar-badge-size);
-  block-size: var(--sigvelo-recipe-avatar-badge-size);
-  color: var(--sigvelo-color-primary-text-on-bg);
-  background-color: var(--sigvelo-color-primary-bg);
-  border: 2px solid var(--sigvelo-color-canvas);
-  border-radius: var(--sigvelo-radius-full);
-  user-select: none;
-}

package/dist/styles/base.css

@@ -33,15 +33,9 @@
 
 /* sigvelo-pill-shapes:start */
 :where(
-  .agent-activity-preview__badge,
-  .agent-activity-preview__dismiss,
-  .agent-activity-preview__unviewed-dot,
   .approval__key,
-  .avatar,
+  .avatar[data-shape="circle"],
   .avatar-group__count,
-  .avatar__badge,
-  .avatar__fallback,
-  .badge,
   .browser-run-panel__tab-glyph,
   .chain-of-thought__search-result,
   .chain-of-thought__step-indicator,
@@ -50,6 +44,7 @@
   .empty-state__icon,
   .inline-citation__trigger,
   .media-preview-card__play,
+  .manager-office__unread-dot,
   .menu__radio-indicator::before,
   .message-scroller__button,
   .plan-summary__trigger,
@@ -68,7 +63,6 @@
   .slider__indicator,
   .slider__thumb,
   .slider__track,
-  .status-pill__dot,
   .stepper__indicator,
   .stepper__separator,
   .stepper__trigger,

package/dist/styles/browser-live-screen.css

@@ -0,0 +1,38 @@
+.browser-live-screen__input {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  resize: none;
+  border: 0;
+  padding: 0;
+  appearance: none;
+  background: transparent;
+  caret-color: transparent;
+  color: transparent;
+  cursor: default;
+  touch-action: none;
+}
+
+.browser-live-screen__input:focus-visible {
+  outline: none;
+  box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
+}
+
+.browser-live-screen__keyboard {
+  display: none;
+  position: absolute;
+  inset-block-end: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  z-index: 1;
+  background-color: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
+}
+
+@media (pointer: coarse) {
+  .browser-live-screen__keyboard {
+    display: inline-flex;
+  }
+}

package/dist/styles/browser-live-view.css

@@ -39,17 +39,25 @@
   opacity: 1;
 }
 
-/* The chip itself is the library StatusPill (sm/destructive/busy) — only the
-   overlay placement lives here. */
-.browser-live-view__badge {
+.browser-live-view__status {
   position: absolute;
   inset-block-start: var(--sigvelo-spacing-2);
   inset-inline-end: var(--sigvelo-spacing-2);
   z-index: 1;
-  box-shadow: var(--sigvelo-elevation-raised);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
   pointer-events: none;
 }
 
+.browser-live-view__status > svg {
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
+}
+
 /* Ended state: quiet fill, same footprint so the layout never jumps */
 .browser-live-view__ended {
   display: flex;

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

@@ -2,15 +2,18 @@
   min-inline-size: 0;
   min-block-size: 0;
   block-size: 100%;
+  border: 0;
+  border-radius: 0;
 }
 
+/* The tab strip and the address row are one chrome group: only the bottom
+   row draws the group's edge. */
 .browser-run-panel .web-preview__nav:has(.browser-run-panel__tabs) {
-  min-block-size: var(--sigvelo-spacing-12);
   gap: 0;
   padding-block: 0;
   padding-inline: var(--sigvelo-spacing-1-5);
   border-block-end: 0;
-  background: var(--sigvelo-color-canvas);
+  box-shadow: none;
 }
 
 .browser-run-panel__tabs {
@@ -29,20 +32,27 @@
   display: none;
 }
 
-.browser-run-panel__tab.button {
+/* Not drawn browser chrome: a tab is the same muted control as every other
+   row in the card's bar, selection the same subtle fill. */
+.browser-run-panel__tab {
   min-inline-size: min(11rem, 45vw);
-  min-block-size: var(--sigvelo-control-height-xl);
   max-inline-size: 13rem;
+  min-block-size: var(--sigvelo-control-height-sm);
   flex: 0 0 auto;
   gap: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
-  border-radius: var(--sigvelo-radius-md) var(--sigvelo-radius-md) 0 0;
+  padding-inline: var(--sigvelo-spacing-2);
+  border-radius: var(--sigvelo-radius-sm);
   text-align: start;
   white-space: nowrap;
 }
 
+.browser-run-panel__tab:hover:not([data-disabled]) {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
+}
+
 .browser-run-panel__tab[data-active] {
-  background: var(--sigvelo-color-surface);
+  border-block-end-color: transparent;
+  background: var(--sigvelo-color-neutral-bg-subtle);
   color: var(--sigvelo-color-text);
 }
 
@@ -66,24 +76,16 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
-.browser-run-panel__address-bar {
-  min-block-size: var(--sigvelo-spacing-12);
-  background: var(--sigvelo-color-surface);
-}
-
 .browser-run-panel .browser-run-panel__body {
   min-block-size: 0;
   display: flex;
-  padding: var(--sigvelo-spacing-2-5);
+  padding: 0;
 }
 
-/* Whichever live surface the body holds — the panel's own embedded view or a
- * host-fed stream — fills the frame the same way. */
-.browser-run-panel__body > .browser-live-view {
+/* The panel owns the space allotted to whichever direct surface it hosts. */
+.browser-run-panel__body > * {
   flex: 1;
   min-block-size: 16rem;
-  aspect-ratio: auto;
-  border-radius: var(--sigvelo-radius-md);
 }
 
 .browser-run-panel__state {

package/dist/styles/chatgpt-sign-in-screen.css

@@ -1,7 +1,4 @@
 .chatgpt-sign-in {
-  --chatgpt-sign-in-pointer-x: 50%;
-  --chatgpt-sign-in-pointer-y: 58%;
-
   position: relative;
   isolation: isolate;
   overflow-x: hidden;
@@ -33,14 +30,17 @@
   position: absolute;
   z-index: 0;
   inset: 0;
+  /* The pointer position arrives as an inline style from the component's own
+     mousemove handler; the fallbacks are only the resting spot before the
+     first move. */
   background:
     radial-gradient(
-      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      circle at var(--chatgpt-sign-in-pointer-x, 50%) var(--chatgpt-sign-in-pointer-y, 58%),
       color-mix(in oklab, var(--sigvelo-color-primary-bg), transparent 72%),
       transparent 12rem
     ),
     radial-gradient(
-      circle at var(--chatgpt-sign-in-pointer-x) var(--chatgpt-sign-in-pointer-y),
+      circle at var(--chatgpt-sign-in-pointer-x, 50%) var(--chatgpt-sign-in-pointer-y, 58%),
       color-mix(in oklab, var(--sigvelo-color-primary-bg-muted), transparent 86%),
       transparent 18rem
     );