refactor message stream layout

packages/ui/src/styles/messaging.css

@@ -1,6 +1,7 @@
 @import "./messaging/message-base.css";
 @import "./messaging/prompt-input.css";
-@import "./messaging/message-stream.css";
+@import "./messaging/message-section.css";
+@import "./messaging/message-block-list.css";
 @import "./messaging/tool-call.css";
 @import "./messaging/log-view.css";
 
@@ -51,61 +52,6 @@
   animation: pulse 1.5s ease-in-out infinite;
 }
 
-/* Message stream component utilities */
-.message-stream-container {
-  @apply relative flex-1 min-h-0 flex flex-col overflow-hidden;
-}
-
-.connection-status {
-  @apply grid items-center px-4 py-2 gap-4;
-  grid-template-columns: 1fr auto 1fr;
-  background-color: var(--surface-secondary);
-  border-bottom: 1px solid var(--border-base);
-}
-
-.message-stream {
-  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1;
-  background-color: var(--surface-base);
-  color: inherit;
-}
-
-.message-scroll-button-wrapper {
-  position: absolute;
-  right: 1rem;
-  bottom: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  align-items: flex-end;
-}
-
-.message-scroll-button {
-  @apply inline-flex items-center justify-center;
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 9999px;
-  border: 1px solid var(--border-base);
-  background-color: transparent;
-  color: var(--text-primary);
-  box-shadow: var(--scroll-elevation-shadow);
-  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.message-scroll-button:hover {
-  background-color: var(--surface-hover);
-  transform: translateY(-1px);
-}
-
-.message-scroll-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent-primary);
-}
-
-.message-scroll-icon {
-  font-size: var(--font-size-lg);
-  color: var(--accent-primary);
-}
-
 .message-text {
   font-size: var(--font-size-base);
   line-height: var(--line-height-normal);

packages/ui/src/styles/messaging/message-block-list.css

@@ -0,0 +1,35 @@
+.message-stream {
+  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-0.5;
+  background-color: var(--surface-base);
+  color: inherit;
+}
+
+.message-stream-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+
+.virtual-item-wrapper {
+  width: 100%;
+}
+
+.virtual-item-placeholder,
+.message-stream-placeholder {
+  display: block;
+  width: 100%;
+  position: relative;
+  background-color: transparent;
+}
+
+.virtual-item-content {
+  width: 100%;
+  position: relative;
+}
+
+.virtual-item-content-hidden {
+  position: absolute;
+  inset: 0;
+  visibility: hidden;
+  pointer-events: none;
+}

packages/ui/src/styles/messaging/message-section.css

@@ -1,4 +1,3 @@
-/* Message stream container + status */
 .message-stream-container {
   @apply relative flex-1 min-h-0 flex flex-col overflow-hidden;
 }
@@ -64,18 +63,6 @@
   }
 }
 
-.message-stream {
-  @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-0.5;
-  background-color: var(--surface-base);
-  color: inherit;
-}
-
-.message-stream-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0.0625rem;
-}
-
 .message-scroll-button-wrapper {
   position: absolute;
   right: 1rem;
@@ -112,27 +99,3 @@
   font-size: var(--font-size-lg);
   color: var(--accent-primary);
 }
-
-.virtual-item-wrapper {
-  width: 100%;
-}
-
-.virtual-item-placeholder,
-.message-stream-placeholder {
-  display: block;
-  width: 100%;
-  position: relative;
-  background-color: transparent;
-}
-
-.virtual-item-content {
-  width: 100%;
-  position: relative;
-}
-
-.virtual-item-content-hidden {
-  position: absolute;
-  inset: 0;
-  visibility: hidden;
-  pointer-events: none;
-}