Smooth WebUI streaming with state-driven viewport motion (#4696)

webui/src/globals.css

@@ -265,33 +265,6 @@
     @apply list-none pl-0;
   }
 
-  /* Show a caret only while the full markdown renderer is still loading. */
-  @keyframes streaming-caret-blink {
-    0%, 45% { opacity: 1; }
-    55%, 100% { opacity: 0; }
-  }
-  .streaming-text-fallback::after {
-    content: "";
-    display: inline-block;
-    width: 1.5px;
-    height: 1em;
-    margin-left: 3px;
-    vertical-align: -0.12em;
-    border-radius: 1px;
-    background: hsl(var(--foreground) / 0.8);
-    animation: streaming-caret-blink 1s step-end infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-sd-animate] {
-      animation: none !important;
-    }
-
-    .streaming-text-fallback::after {
-      animation: none;
-    }
-  }
-
   /* CJK-friendly line-height: prose paragraphs default to 1.625 which is
      tight for Chinese/Japanese/Korean characters. Bump to 1.8 for better
      readability when the browser detects a CJK primary font. */
@@ -371,6 +344,23 @@
     }
   }
 
+  /**
+   * The composer is one persistent grid item in both landing and thread
+   * layouts. On desktop, the landing's trailing flexible row holds it at the
+   * visual center; collapsing only that row lets the same element dock at the
+   * bottom without a remount or a transform clone.
+   */
+  .thread-layout {
+    grid-template-rows: minmax(min-content, 1fr) auto 0fr;
+    transition:
+      grid-template-rows 900ms cubic-bezier(0.33, 1, 0.68, 1);
+  }
+  @media (min-width: 640px) {
+    .thread-layout[data-layout="hero"] {
+      grid-template-rows: minmax(min-content, 1fr) auto 1fr;
+    }
+  }
+
   @keyframes composer-status-strip-enter {
     0% {
       max-height: 0;
@@ -410,6 +400,39 @@
   .composer-status-strip[data-state="exit"] {
     animation: composer-status-strip-exit 180ms ease-in both;
   }
+  .composer-status-drawer {
+    --composer-status-drawer-duration: 600ms;
+    --composer-status-drawer-easing: ease-out;
+
+    display: grid;
+    grid-template-rows: 0fr;
+    pointer-events: none;
+    transition:
+      grid-template-rows var(--composer-status-drawer-duration)
+        var(--composer-status-drawer-easing);
+  }
+  .composer-status-drawer[data-state="open"] {
+    grid-template-rows: 1fr;
+    pointer-events: auto;
+  }
+  .composer-status-drawer-clip {
+    min-height: 0;
+    overflow: hidden;
+  }
+  .composer-status-drawer-content {
+    opacity: 0;
+    transform: translateY(8px);
+    transform-origin: bottom center;
+    transition:
+      opacity var(--composer-status-drawer-duration)
+        var(--composer-status-drawer-easing),
+      transform var(--composer-status-drawer-duration)
+        var(--composer-status-drawer-easing);
+  }
+  .composer-status-drawer[data-state="open"] .composer-status-drawer-content {
+    opacity: 1;
+    transform: translateY(0);
+  }
   @keyframes run-pulse-dot {
     0%,
     100% {
@@ -474,6 +497,16 @@
     .composer-status-strip[data-state] {
       animation: none;
     }
+    .composer-status-drawer {
+      transition-duration: 220ms;
+    }
+    .composer-status-drawer-content {
+      transform: translateY(2px);
+      transition-duration: 140ms, 220ms;
+    }
+    .thread-layout {
+      transition-duration: 360ms;
+    }
     .run-pulse-icon,
     .run-pulse-icon * {
       animation: none;