@mcp-b/react-components 0.39.0 → 0.41.0

package/dist/styles/think-execution-workbench.css

@@ -1,16 +1,20 @@
+/*
+ * One quiet canvas and one pane, like the workspace slot it lives in: the run
+ * list is a gap-separated roster (routine-library anatomy), and a selected
+ * run replaces it with a mini-page — eyebrow, title, hairline fact rows —
+ * the way opening a file replaces the workspace browser.
+ */
 .think-execution-workbench {
+  position: relative;
   min-inline-size: 0;
   min-block-size: 0;
   display: flex;
   flex: 1;
   flex-direction: column;
+  block-size: 100%;
   overflow: hidden;
   container-type: inline-size;
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+  /* No paint: the workbench card (or whatever plane hosts it) shows through. */
   color: var(--sigvelo-color-text);
 }
 
@@ -23,24 +27,32 @@
   font: inherit;
 }
 
+/* The routine library's floating error notice overlays rather than
+   reflows, so a failed action never shoves the roster around. */
 .think-execution-workbench__error {
-  margin: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3) 0;
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-block: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-2-5);
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--sigvelo-spacing-3);
+  inset-inline: 50% auto;
+  max-inline-size: min(32rem, calc(100% - 2rem));
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
-  background: var(--sigvelo-color-danger-bg-subtle);
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-danger-text);
-  font-size: var(--sigvelo-text-xs);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-compact);
 }
 
 .think-execution-workbench__content {
   min-block-size: 0;
   display: grid;
   flex: 1;
-  grid-template-rows: minmax(12rem, 0.75fr) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
 }
 
@@ -51,25 +63,13 @@
   overflow: auto;
 }
 
-.think-execution-detail {
-  display: grid;
-  align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
-}
-
-/* Only the container concerns — the block inside is `EmptyState`, and this
-   component is documented as reusable outside the workbench, so it does not
-   reach for a workbench class to fill itself. */
-.think-execution-detail--empty {
-  align-content: center;
-  justify-items: center;
-  min-block-size: 12rem;
-}
-
-.think-execution-workbench__run-list {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
+/* Roster column cap (the Ploy number) so full-page routes don't stretch rows
+   across the whole viewport; narrow hosts are unaffected. */
+.think-execution-workbench__list-header,
+.think-execution-workbench__list,
+.think-execution-workbench__empty {
+  inline-size: min(100%, 50rem);
+  margin-inline: auto;
 }
 
 .think-execution-workbench__list-header {
@@ -88,17 +88,21 @@
   line-height: var(--sigvelo-leading-tight);
 }
 
+/* Same hairline-bounded band the routine library gives its empty run section. */
 .think-execution-workbench__empty {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-2-5);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
 
-  margin: var(--sigvelo-spacing-3);
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
 }
 
 .think-execution-workbench__list {
-  margin: 0;
-  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
+  /* Block only — the roster-cap rule above owns margin-inline. */
+  margin-block: 0;
+  padding: 0 var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .think-execution-workbench__list > li {
@@ -106,114 +110,103 @@
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   min-inline-size: 0;
-  border-radius: var(--sigvelo-radius-sm);
+  border-radius: var(--sigvelo-radius-md);
   transition: background-color var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
-.think-execution-workbench__list > li:not(:last-child) {
-  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
-.think-execution-workbench__list > li[data-selected="true"] {
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-primary-bg-subtle),
-    var(--sigvelo-color-surface) 70%
-  );
-}
-
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: calc(var(--sigvelo-control-height-xl) + var(--sigvelo-spacing-3));
+  min-block-size: var(--sigvelo-spacing-14);
   display: flex;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-2);
   border-radius: inherit;
   text-align: start;
 }
 
-.think-execution-workbench__detail-header code {
-  min-inline-size: 0;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
-}
-
 .think-execution-workbench__run-actions {
   inline-size: var(--sigvelo-control-height-sm);
   min-block-size: var(--sigvelo-control-height-sm);
   margin-inline-end: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail {
+/* The detail pane owns scrolling; the mini-page inside centres itself. */
+.think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-3);
-  background: var(--sigvelo-color-surface);
+  gap: var(--sigvelo-spacing-4);
+  /* The routine library's single-column measure and page padding. */
+  inline-size: min(100%, 46rem);
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-execution-workbench__detail-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  min-inline-size: 0;
+/* Only the container concerns — the block inside is `EmptyState`, and this
+   component is documented as reusable outside the workbench, so it does not
+   reach for a workbench class to fill itself. */
+.think-execution-detail--empty {
+  align-content: center;
+  justify-items: center;
+  min-block-size: 12rem;
+  block-size: 100%;
 }
 
-.think-execution-workbench__detail-header > div {
+.think-execution-detail__header {
   min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
 }
 
-.think-execution-workbench__detail-status {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
+.think-execution-detail__eyebrow {
+  margin: 0;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
-  text-align: end;
-}
-
-.think-execution-workbench__detail-status > div {
-  display: grid;
-  gap: var(--sigvelo-spacing-0-5);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.think-execution-workbench__detail-status strong {
-  color: var(--sigvelo-color-text);
-  font-weight: var(--sigvelo-font-weight-semibold);
+.think-execution-detail__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
 }
 
-.think-execution-workbench__detail h3 {
+.think-execution-detail__heading h3 {
+  min-inline-size: 0;
   margin: 0;
-  font-size: var(--sigvelo-text-sm);
+  overflow-wrap: anywhere;
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: -0.025em;
   line-height: var(--sigvelo-leading-tight);
 }
 
-@container (width >= 44rem) {
-  .think-execution-workbench__content {
-    grid-template-rows: minmax(0, 1fr);
-    grid-template-columns: minmax(15rem, 0.85fr) minmax(21rem, 1.15fr);
-  }
+.think-execution-detail__header code {
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--sigvelo-color-text-muted);
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: var(--sigvelo-text-xs);
+}
 
-  .think-execution-workbench__run-list {
-    border-block-end: 0;
-    border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
-      var(--sigvelo-color-neutral-border-subtle);
-  }
+.think-execution-detail__error {
+  margin: 0;
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2-5);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-relaxed);
+  overflow-wrap: anywhere;
 }
 
-@media (forced-colors: active) {
-  .think-execution-workbench {
-    border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
-    background: canvas;
-    color: canvastext;
-    box-shadow: none;
-  }
+.think-execution-detail__facts {
+  font-size: var(--sigvelo-text-compact);
 }

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

@@ -1,13 +1,11 @@
-.think-thread-shell {
+/* The app names the shell's own container so bar rules below can measure the
+   whole app, rail included — the bar lives in the shell's row, outside the
+   `.think-full-app` container. */
+.think-full-app-shell {
   container-name: responsive-sidebar-shell think-full-app;
 }
 
 .think-full-app {
-  --think-full-app-header-block-size: calc(
-    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2) +
-      env(safe-area-inset-top, 0px)
-  );
-
   position: relative;
   container: think-full-app / inline-size;
   block-size: 100%;
@@ -15,84 +13,67 @@
   min-inline-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  background: var(--sigvelo-color-surface-under);
+  background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
 
-.think-full-app[data-has-workbench-topbar="true"] {
-  grid-template-rows: var(--think-full-app-header-block-size) minmax(0, 1fr);
-}
-
 .think-full-app__view-scope {
   grid-column: 1;
   grid-row: 1;
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) var(--resizable-side-panel-size, 21.25rem);
+  /* Conversation first and sized, workbench second and greedy. */
+  grid-template-columns: auto minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  transition: grid-template-columns var(--sigvelo-motion-duration-layout)
-    var(--sigvelo-motion-ease-change);
-}
-
-.think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
-  margin-block-start: var(--sigvelo-spacing-2);
-}
-
-/* ResponsiveSidebarShell owns the outer material when a thread sidebar is
-   present. Flatten the nested app so the hierarchy still has exactly one
-   raised primary plane. */
-.think-full-app[data-has-thread-sidebar="true"] {
-  background: var(--sigvelo-color-surface);
-}
-
-.think-full-app[data-has-thread-sidebar="true"] > .think-full-app__view-scope {
-  margin: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.think-full-app[data-has-workbench-topbar="true"] > .think-full-app__view-scope {
-  grid-row: 2;
-}
-
-.think-full-app[data-has-workbench="false"] > .think-full-app__view-scope {
-  grid-template-columns: minmax(0, 1fr);
+  margin: var(--sigvelo-spacing-3);
 }
 
 .think-full-app__mobile-view-switch {
   display: none;
 }
 
-.think-full-app__thread-trigger {
-  display: none;
-}
-
 .think-full-app__view-switch {
   gap: var(--sigvelo-spacing-0-5);
   padding: 0;
   background: transparent;
 }
 
-.think-full-app > .think-full-app__app-bar {
-  grid-column: 1 / -1;
-  grid-row: 1;
-  z-index: var(--sigvelo-z-chrome);
-  background: var(--sigvelo-color-surface-under);
+.think-full-app__app-bar {
+  /* Line the bar's controls up with the plane inset below it. */
+  padding-inline: var(--sigvelo-spacing-3);
+}
+
+/* Without host chrome the bar carries only the compact view switch, and that
+   is hidden above the breakpoint — reserve no room for it. */
+.think-full-app__app-bar[data-app-chrome="false"] {
+  display: none;
 }
 
 .think-full-app__chat-surface {
   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(--resizable-side-panel-size, 24.5rem);
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: minmax(0, 1fr);
   overflow: hidden;
-  background: var(--sigvelo-color-surface);
+  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-spacing-3) * 2);
+}
+
+body.is-resizing-side-panel .think-full-app__chat-surface {
+  transition: none;
 }
 
 .think-full-app__chat,
@@ -110,6 +91,8 @@
   grid-template-rows: minmax(0, 1fr) auto;
 }
 
+/* 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;
@@ -117,26 +100,16 @@
   min-block-size: 0;
   display: grid;
   grid-template-rows: minmax(0, 1fr);
-  overflow: hidden;
-  border-inline-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+  /* A margin, not a column gap: with no panels at all the aside is absent and
+     a gap would still hold its track open. */
+  margin-inline-start: var(--sigvelo-spacing-3);
 }
 
 .think-full-app__resizer {
   z-index: 5;
-}
-
-.think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
-  inset-block-start: var(--think-full-app-header-block-size);
-}
-
-body.is-resizing-side-panel .think-full-app__view-scope {
-  transition: none;
+  /* 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. */
+  translate: calc(var(--sigvelo-spacing-3) * 1.5) 0;
 }
 
 .think-full-app__workbench-slot,
@@ -150,12 +123,11 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   overflow: hidden;
 }
 
-.think-full-app__workbench {
-  background: color-mix(
-    in oklab,
-    var(--sigvelo-color-canvas),
-    var(--sigvelo-color-primary-bg-subtle) 18%
-  );
+/* The app's one raised plane. Panels fill it and never draw a second edge. */
+.think-full-app__workbench-slot {
+  border-radius: var(--sigvelo-radius-lg);
+  background: var(--sigvelo-color-surface-raised);
+  box-shadow: var(--sigvelo-elevation-floating);
 }
 
 /* The panel stands in for itself while its first read is in flight, so the
@@ -164,44 +136,59 @@ body.is-resizing-side-panel .think-full-app__view-scope {
   justify-content: center;
 }
 
-.think-full-app__workbench.workspace-explorer {
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.think-full-app__workbench-view-switch {
-  margin-inline-start: auto;
-}
-
 .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;
 }
 
 @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: minmax(0, 1fr);
+    margin: 0;
+    overflow: hidden;
   }
 
-  /* A side panel or phone has no desktop chrome around the app, so the
-     floating application 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 > .think-full-app__view-scope,
-  .think-full-app[data-has-workbench-topbar="false"] > .think-full-app__view-scope {
-    margin: 0;
+  .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. The extra class matches the
+     closed-workbench rule this has to beat. */
+  .think-full-app .think-full-app__chat-surface {
+    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-radius: 0;
+    background: var(--sigvelo-color-surface);
     box-shadow: none;
   }
 
-  .think-full-app > .think-full-app__app-bar {
-    background: var(--sigvelo-color-surface);
+  .think-full-app__app-bar[data-app-chrome="false"] {
+    display: grid;
   }
 
+  /* One switch at a time: compact swaps the whole view rather than opening a
+     panel beside the conversation. */
   .think-full-app__workbench-view-switch {
     display: none;
   }
@@ -210,40 +197,6 @@ body.is-resizing-side-panel .think-full-app__view-scope {
     display: flex;
   }
 
-  .think-full-app__app-title {
-    display: none;
-  }
-
-  .think-full-app__thread-trigger {
-    inline-size: auto;
-    max-inline-size: min(22rem, 58vw);
-    min-inline-size: 0;
-    min-block-size: var(--sigvelo-density-compact-control-height);
-    display: inline-flex;
-    gap: var(--sigvelo-density-compact-control-gap);
-    padding-inline: var(--sigvelo-density-compact-control-padding-inline);
-    border-radius: var(--sigvelo-radius-md);
-    color: var(--sigvelo-color-text);
-    font-size: var(--sigvelo-density-compact-control-font-size);
-    font-weight: var(--sigvelo-font-weight-semibold);
-  }
-
-  .think-full-app__thread-trigger-title {
-    min-inline-size: 0;
-  }
-
-  .think-full-app__thread-trigger > svg {
-    flex: 0 0 auto;
-    inline-size: var(--sigvelo-density-compact-control-icon-size);
-    block-size: var(--sigvelo-density-compact-control-icon-size);
-    color: var(--sigvelo-color-text-muted);
-    transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
-  }
-
-  .think-full-app__thread-trigger[aria-expanded="true"] > svg {
-    rotate: 180deg;
-  }
-
   .think-full-app__chat-surface,
   .think-full-app__workbench-slot,
   .think-full-app__workbench {
@@ -261,7 +214,6 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 
   .think-full-app__aside {
     display: contents;
-    border-inline-start: 0;
   }
 
   .think-full-app__resizer {
@@ -277,63 +229,8 @@ body.is-resizing-side-panel .think-full-app__view-scope {
     --agent-chat-content-max-inline-size: 34rem;
   }
 
-  .think-full-app .think-full-app__chat .message-scroller__viewport {
-    --message-scroller-fade-size: 3rem;
-  }
-
-  .think-full-app .think-full-app__chat .agent-chat__transcript-content {
-    --message-scroller-virtual-block-start: calc(
-      var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px)
-    );
-
-    padding-block-start: var(--message-scroller-virtual-block-start);
-    /* Matches Codex's side-panel gutter (--padding-panel: 12px). */
-    padding-inline: var(--sigvelo-spacing-3);
-  }
-
-  /* The base composer scrim already dissolves the transcript above the box. */
-  .think-full-app .agent-chat__composer {
-    padding-block: var(--sigvelo-spacing-2)
-      max(var(--sigvelo-spacing-2), 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));
-  }
-
-  .think-full-app .prompt-input {
-    gap: var(--sigvelo-spacing-1);
-    padding-block: var(--sigvelo-spacing-2);
-    padding-inline: var(--sigvelo-spacing-2-5);
-  }
-
-  .think-full-app .message__content {
-    line-height: var(--sigvelo-leading-normal);
-  }
-
-  .think-full-app .message[data-from="user"] .message__content {
-    padding-block: var(--sigvelo-spacing-1-5);
-    padding-inline: var(--sigvelo-spacing-2-5);
-  }
-
-  .think-full-app .workspace-explorer__header {
-    min-block-size: var(--sigvelo-density-compact-control-height);
-    padding-block: 0;
-  }
-
-  .think-full-app .workspace-explorer__filter {
-    margin-block: var(--sigvelo-spacing-1);
-    margin-inline: var(--sigvelo-spacing-2);
-  }
-}
-
-@container responsive-sidebar-shell (inline-size <= 56rem) {
-  .think-thread-shell:has(.think-full-app) .responsive-sidebar-shell__toggle {
-    display: none;
-  }
-
-  .think-thread-shell[data-hide-app-bar-in-workbench]:has(
-      .think-full-app[data-mobile-view="workbench"]
-    )
-    > .app-top-bar {
+  /* An immersive workbench view owns the whole viewport. */
+  .think-full-app__app-bar[data-hide-in-workbench][data-mobile-view="workbench"] {
     display: none;
   }
 }
@@ -341,10 +238,9 @@ body.is-resizing-side-panel .think-full-app__view-scope {
 @media (forced-colors: active) {
   .think-full-app,
   .think-full-app__chat-surface,
-  .think-full-app__aside,
+  .think-full-app__workbench-slot,
   .think-full-app__workbench,
-  .think-full-app__app-bar,
-  .think-full-app__workbench-view-switch {
+  .think-full-app__app-bar {
     border: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;
     color: canvastext;