Refactor gateway task handling and recording flow

apps/web/src/styles/playground.css

@@ -1158,6 +1158,40 @@
   padding-bottom: 18px;
 }
 
+.assistantUserMessage {
+  display: grid;
+  justify-items: end;
+  gap: 8px;
+  width: fit-content;
+  max-width: min(560px, 78%);
+  margin-left: auto;
+}
+
+.assistantUserImageGrid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+  max-width: min(420px, 100%);
+}
+
+.assistantUserImagePreview {
+  display: block;
+  width: min(168px, 100%);
+  overflow: hidden;
+  aspect-ratio: 4 / 3;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-muted);
+}
+
+.assistantUserImagePreview img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .assistantBubble {
   align-self: flex-start;
   width: fit-content;
@@ -1181,6 +1215,10 @@
   color: var(--primary-foreground);
 }
 
+.assistantUserMessage .assistantBubble.user {
+  max-width: 100%;
+}
+
 .assistantBubble.assistant {
   width: min(720px, 86%);
   margin-right: auto;