@mcp-b/react-components 0.48.0 → 0.49.0

package/dist/styles/think-full-app.css

@@ -1,62 +1,3 @@
-.think-full-app-shell {
-  --think-full-app-panel-outline: color-mix(in srgb, var(--sigvelo-color-text) 14%, transparent);
-  --sigvelo-color-surface: light-dark(
-    var(--sigvelo-color-surface-light),
-    var(--sigvelo-color-surface-under-dark)
-  );
-  --sigvelo-color-surface-raised: light-dark(
-    var(--sigvelo-color-surface-raised-light),
-    var(--sigvelo-color-surface-under-dark)
-  );
-  --sigvelo-color-neutral-bg-subtle: light-dark(
-    var(--sigvelo-color-neutral-bg-subtle-light),
-    rgb(255 255 255 / 4%)
-  );
-  --responsive-sidebar-shell-sidebar-surface: light-dark(
-    var(--sigvelo-color-surface-raised),
-    var(--sigvelo-color-surface-under)
-  );
-
-  background: var(--sigvelo-color-surface-under);
-}
-
-.think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
-  border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-full-app-shell .responsive-sidebar-shell__main {
-  background: var(--sigvelo-color-surface);
-}
-
-/* The thread rail owns its wide-layout toggle. Seat it in the picker's header
-   instead of reserving a second row above the sidebar content. */
-.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .responsive-sidebar-shell__sidebar {
-  position: relative;
-  display: block;
-}
-
-.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
-  .responsive-sidebar-shell__sidebar-content {
-  block-size: 100%;
-}
-
-.think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
-  .responsive-sidebar-shell__sidebar-leading {
-  position: absolute;
-  inset-block-start: var(--sigvelo-spacing-1);
-  inset-inline-end: var(--sigvelo-spacing-2);
-  z-index: var(--sigvelo-z-chrome);
-  min-block-size: var(--sigvelo-density-compact-control-height);
-  padding: 0;
-}
-
-.think-full-app-shell[data-sidebar-toggle-placement="sidebar"] .think-thread-picker__header {
-  padding-inline-end: calc(
-    var(--sigvelo-layout-gutter) + var(--sigvelo-density-compact-control-height)
-  );
-}
-
 .think-full-app {
   position: relative;
   container: think-full-app / inline-size;
@@ -73,101 +14,75 @@
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  /* Conversation first and sized, workbench second and greedy. */
   grid-template-columns: auto var(--sigvelo-layout-track-fill);
   grid-template-rows: var(--sigvelo-layout-track-fill);
   margin: var(--sigvelo-layout-gutter);
-  overflow: visible;
-}
-
-.think-full-app__view-switch {
-  gap: var(--sigvelo-spacing-0-5);
-  padding: 0;
-  background: transparent;
-}
-
-.think-full-app__compact-view-menu {
-  display: none;
 }
 
 .think-full-app__chat-surface {
+  --agent-chat-content-max-inline-size: var(--sigvelo-measure-wide-block);
   grid-column: 1;
   grid-row: 1;
-  /* The conversation carries the resize, so the workbench can simply take the
-     rest of the row. */
   inline-size: var(--think-full-app-conversation-size, var(--sigvelo-layout-conversation));
   min-inline-size: 0;
   min-block-size: 0;
-  display: grid;
-  grid-template-columns: var(--sigvelo-layout-track-fill);
-  grid-template-rows: var(--sigvelo-layout-track-fill);
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   transition: inline-size var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change);
 }
 
-/* A length rather than `auto`: closing has to interpolate from the open width,
-   and a length-to-auto transition never finishes. */
-.think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
-  inline-size: calc(100cqi - var(--sigvelo-layout-gutter) * 2);
-}
-
-body.is-resizing-side-panel .think-full-app__chat-surface {
-  transition: none;
-}
-
-.think-full-app__chat,
-.think-full-app__chat-inner {
-  --agent-chat-content-max-inline-size: var(--sigvelo-measure-wide-block);
+/* The conversation fills the surface; a run's report disclosure
+   (SubagentRunReport) sits above it as a fixed band. */
+.think-full-app__chat-surface > * {
+  flex: 1 1 auto;
   min-inline-size: 0;
   min-block-size: 0;
-  display: grid;
-  grid-template-columns: var(--sigvelo-layout-track-fill);
-  grid-template-rows: var(--sigvelo-layout-track-fill);
-  overflow: hidden;
 }
 
-.think-full-app__chat-inner {
-  grid-template-rows: var(--sigvelo-layout-track-fill) auto;
+.think-full-app__chat-surface > [data-slot="subagent-run-report"] {
+  flex: 0 0 auto;
 }
 
-/* The raised workbench establishes the desktop bottom gutter. Keep the
-   floating composer on that same baseline and give it the same quiet edge. */
-.think-full-app-shell .agent-chat__composer {
-  padding-block-end: max(var(--sigvelo-spacing-1), env(safe-area-inset-bottom, 0px));
+.think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
+  inline-size: calc(100cqi - var(--sigvelo-layout-gutter) * 2);
 }
 
-.think-full-app-shell .agent-chat__composer > .prompt-input {
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--think-full-app-panel-outline);
-  background: light-dark(
-    var(--sigvelo-color-surface-raised-light),
-    var(--sigvelo-color-surface-raised-dark)
-  );
+body.is-resizing-side-panel .think-full-app__chat-surface {
+  transition: none;
 }
 
-/* Transparent column: the aside positions the plane, it is not a material of
-   its own. */
 .think-full-app__aside {
   grid-column: 2;
   grid-row: 1;
   min-inline-size: 0;
   min-block-size: 0;
-  display: grid;
-  grid-template-rows: var(--sigvelo-layout-track-fill);
-  /* A margin, not a column gap: with no panels at all the aside is absent and
-     a gap would still hold its track open. */
+  display: flex;
+  flex-direction: column;
   margin-inline-start: var(--sigvelo-layout-gap);
+  overflow: hidden;
+  border-radius: var(--sigvelo-radius-xl);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
+}
+
+.think-full-app__aside > * {
+  flex: 1;
+  min-block-size: 0;
+}
+
+.think-full-app__aside:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
 }
 
 .think-full-app__resizer {
-  z-index: 5;
-  /* Centre the handle in the column gap rather than on the grid edge: the
-     conversation is inset by the gutter and the gap sits beyond its edge. */
+  inset-inline-start: var(--resizable-side-panel-size);
+  margin-inline-start: calc(var(--sigvelo-spacing-6) / -2);
+  z-index: var(--sigvelo-z-chrome);
   translate: calc(var(--sigvelo-layout-gap) * 1.5) 0;
 }
 
-/* Keep the resize target generous without painting a full-height rule beside
-   the rounded panel. A short grip appears only on hover, focus, or drag. */
 .think-full-app__resizer::before {
   inset-block: 50% auto;
   block-size: calc(var(--sigvelo-spacing-6) * 2);
@@ -176,53 +91,7 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   translate: -50% -50%;
 }
 
-.think-full-app__workbench-slot,
-.think-full-app__workbench,
-.think-full-app__workbench-panel {
-  min-inline-size: 0;
-  min-block-size: 0;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* The app's one raised plane. Panels fill it and never draw a second edge. */
-.think-full-app__workbench-slot {
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--think-full-app-panel-outline);
-  border-radius: var(--sigvelo-radius-xl);
-  background: light-dark(var(--sigvelo-color-surface-raised), var(--sigvelo-color-surface-under));
-  box-shadow: var(--sigvelo-elevation-bar);
-}
-
-/* The panel stands in for itself while its first read is in flight, so the
-   waiting state sits where the content will rather than in the top corner. */
-.think-full-app__workbench--loading {
-  justify-content: center;
-}
-
-.think-full-app__workbench-panel {
-  padding: 0;
-}
-
-/* Host panels fill the plane rather than sizing to their content. Only visible
-   once the plane became the wide side of the split. */
-.think-full-app__workbench-panel > * {
-  flex: 1;
-  min-block-size: 0;
-}
-
-.think-full-app__workbench-panel:focus-visible {
-  outline: 2px solid var(--sigvelo-color-focus);
-  outline-offset: -2px;
-}
-
-/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container think-full-app (inline-size <= 56rem) {
-  /* A side panel or phone has no desktop chrome around the app, so an inset
-     plane reads as a card in a frame. Flatten to one edge-to-edge surface,
-     app bar included — the frame never shows. */
   .think-full-app__view-scope {
     grid-template-columns: var(--sigvelo-layout-track-fill);
     margin: 0;
@@ -230,114 +99,36 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
     background: var(--sigvelo-color-surface);
   }
 
-  .think-full-app__aside {
-    margin-inline-start: 0;
-  }
-
-  /* Compact swaps between the two rather than seating them side by side, so
-     neither carries the desktop split's width. Repeat the closed-workbench
-     attribute so this beats `.think-full-app[data-has-workbench="false"]`. */
   .think-full-app .think-full-app__chat-surface,
   .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
+    --agent-chat-content-max-inline-size: 100%;
+    --agent-chat-column-inset: var(--sigvelo-spacing-2);
     inline-size: auto;
     transition: none;
   }
 
-  /* .think-full-app__workbench needs the extra class: panels that paint
-     themselves raised are defined after this stylesheet. */
-  .think-full-app__workbench-slot,
-  .think-full-app .think-full-app__workbench {
-    border: 0;
-    border-radius: 0;
-    background: var(--sigvelo-color-surface);
-    box-shadow: none;
-  }
-
-  .think-full-app__chat-surface,
-  .think-full-app__workbench-slot,
-  .think-full-app__workbench {
-    grid-column: 1 / -1;
-    grid-row: 1;
-    min-block-size: 0;
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__chat-surface {
     display: none;
   }
 
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench-slot,
-  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench {
-    grid-row: 1;
-    display: flex;
-  }
-
   .think-full-app__aside {
-    display: contents;
+    grid-column: 1;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background: var(--sigvelo-color-surface);
+    box-shadow: none;
   }
 
   .think-full-app__resizer {
     display: none;
   }
-
-  .think-full-app[data-mobile-view="chat"] .think-full-app__chat-surface {
-    display: grid;
-  }
-
-  .think-full-app__chat,
-  .think-full-app__chat-inner {
-    /* Codex side panel: --thread-content-max-width: 100% and
-       --padding-toolbar: spacing*2 (8px). A 68ch cap left the transcript
-       as a start-aligned island in the pane. */
-    --agent-chat-content-max-inline-size: 100%;
-    --agent-chat-column-inset: var(--sigvelo-spacing-2);
-  }
-}
-
-@container responsive-sidebar-shell (inline-size <= 56rem) {
-  .think-full-app-shell[data-sidebar-toggle-placement="sidebar"]
-    .responsive-sidebar-shell__sidebar {
-    display: grid;
-  }
-
-  .think-full-app-shell > .responsive-sidebar-shell__frame > .responsive-sidebar-shell__sidebar {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      color-mix(in srgb, var(--sigvelo-color-text) 24%, transparent);
-    box-shadow:
-      0 0 0 1px color-mix(in srgb, var(--sigvelo-color-surface) 36%, transparent),
-      var(--sigvelo-elevation-overlay);
-  }
-
-  .think-full-app__app-bar {
-    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  }
-
-  .think-full-app__app-bar .app-top-bar__title {
-    inline-size: auto;
-    max-inline-size: min(20rem, 60vw);
-    justify-self: center;
-    text-align: center;
-  }
-
-  .think-full-app__view-switch {
-    display: none;
-  }
-
-  .think-full-app__compact-view-menu {
-    display: flex;
-  }
-
-  .think-full-app-shell .agent-chat__composer {
-    padding-block-end: max(var(--sigvelo-spacing-3), env(safe-area-inset-bottom, 0px));
-  }
-
-  .think-full-app-shell :is(.think-full-app__chat, .think-full-app__chat-inner) {
-    --agent-chat-column-inset: var(--sigvelo-spacing-4);
-  }
 }
 
 @media (forced-colors: active) {
   .think-full-app,
   .think-full-app__chat-surface,
-  .think-full-app__workbench-slot,
-  .think-full-app__workbench,
-  .think-full-app__app-bar {
+  .think-full-app__aside {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;