Merge branch 'master' into feat/web-diff-card

packages/client/ui-conversation/src/client/queue/QueueDock.module.css

@@ -1,10 +1,21 @@
-/* Figma .FileContainerText 1:791: 776px wrapper around the inset 752px panel. */
+/* Figma .FileContainerText 1:791: the wrapper uses the shared dock inset
+   inside the composer card around the inset panel. */
 
 .dock {
   box-sizing: border-box;
   flex: none;
-  width: 100%;
-  max-width: 776px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
   /* Flex gap still applies after this item; subtract it together with the
      design's overlap so the later composer paints over the queue edge. */
   margin: 0 auto calc(

packages/client/ui-conversation/src/client/queue/QueueDock.tsx

@@ -73,7 +73,7 @@ export function QueueDock({ useSession, updateQueue, notify, t }: QueueDockProps
   }
 
   return (
-    <div className={css.dock}>
+    <div className={css.dock} data-queue-dock="">
       <div className={css.panel}>
         {queue.length > 1 && (
           <button

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -133,6 +133,12 @@
   --dsh-composer-stack-gap: 6px;
   --dsh-queue-composer-overlap: 5px;
 
+  /* InputBar and dock registrants derive their horizontal geometry from the
+     same card width, outer clearance, and dock inset. */
+  --dsh-composer-card-max-width: 800px;
+  --dsh-composer-side-clearance: 32px;
+  --dsh-composer-dock-inset: 12px;
+
   display: flex;
   flex-direction: column;
   gap: var(--dsh-composer-stack-gap);

packages/client/ui-conversation/src/client/skeleton/HeroShell.module.css

@@ -11,7 +11,7 @@
   padding: 0 24px;
 }
 
-/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+/* Cap matches the InputBar card. Glow may paint past the sides. */
 .stack {
   display: flex;
   flex-direction: column;
@@ -19,7 +19,7 @@
   /* figma 75:8208: 12 between title block / workspace / card. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   overflow: visible;
 }
 

packages/client/ui-conversation/src/client/skeleton/InputBar.module.css

@@ -23,7 +23,7 @@
   /* figma Input_Bottom: pad L32/R32/B8; the bottom gradient mask is owned by
      the chat scroller. No top pad: the composer stack's gap owns the space
      above; error/status strips still carry their own margin. */
-  padding: 0 32px 8px;
+  padding: 0 var(--dsh-composer-side-clearance) 8px;
 }
 
 .hero {
@@ -33,7 +33,7 @@
 .error,
 .status {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -48,7 +48,7 @@
 
 .notice {
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -69,6 +69,7 @@
 }
 
 .card {
+  box-sizing: border-box;
   position: relative; /* overlay anchor positioning context */
   display: flex;
   flex-direction: column;
@@ -76,7 +77,7 @@
      top pad on the card before .InputText. */
   gap: 12px;
   width: 100%;
-  max-width: 800px;
+  max-width: var(--dsh-composer-card-max-width);
   padding-top: 10px;
   /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
      the input border is one notch weaker than buttons) — exactly the

packages/client/ui-conversation/src/client/skeleton/TodoPanel.module.css

@@ -1,13 +1,24 @@
 /* Todo strip in the composer context stack (Figma 9:959): tip surface,
-   14px radius, status icons + secondary item labels. */
+   14px radius, status icons + secondary item labels. It shares the composer
+   card geometry and adds the dock inset on both sides. */
 
 .root {
   box-sizing: border-box;
   flex: none;
   overflow: hidden;
   margin: 0 auto;
-  width: calc(100% - 88px);
-  max-width: 752px;
+  width: calc(
+    100% -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-side-clearance) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
+  max-width: calc(
+    var(--dsh-composer-card-max-width) -
+    var(--dsh-composer-dock-inset) -
+    var(--dsh-composer-dock-inset)
+  );
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 14px;
   background: var(--dsw-specific-tip);