From aff972b2183aaafb2b85eeb53221e7f961f1892c Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Mon, 25 May 2026 22:57:29 +0800
Subject: [PATCH] fix(input): polish runtime queue rendering

---
 static/src/components/input/InputComposer.vue     | 13 ++++++++-----
 static/src/styles/components/input/_composer.scss | 11 +++++++++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/static/src/components/input/InputComposer.vue b/static/src/components/input/InputComposer.vue
index e6ac3c9..7ada6ec 100644
--- a/static/src/components/input/InputComposer.vue
+++ b/static/src/components/input/InputComposer.vue
@@ -388,7 +388,12 @@ const composerInputKey = computed(
 
 const runtimeQueuedMessagesForRender = computed(() => {
   const list = Array.isArray(props.runtimeQueuedMessages) ? props.runtimeQueuedMessages : [];
-  return list.filter((item) => item && item.id && item.text);
+  return list
+    .filter((item) => item && item.id && item.text)
+    .map((item) => ({
+      ...item,
+      text: String(item.text || '').replace(/[\r\n\u2028\u2029]+/g, ' ')
+    }));
 });
 
 const RUNTIME_QUEUE_ANIM_DURATION = 300;
@@ -432,6 +437,7 @@ const stopRuntimeQueueAnimation = (el: HTMLElement) => {
   }
   el.style.removeProperty('transition');
   el.style.removeProperty('transform');
+  el.style.removeProperty('pointer-events');
 };
 
 const playRuntimeQueueTransform = (
@@ -563,10 +569,7 @@ const spawnRuntimeQueueLeaveGhost = (id: string) => {
 
 const animateRuntimeQueueEnter = (el: HTMLElement) => {
   const offset = resolveRuntimeQueueOffset(el);
-  el.style.pointerEvents = 'none';
-  playRuntimeQueueTransform(el, offset, 0, () => {
-    el.style.removeProperty('pointer-events');
-  });
+  playRuntimeQueueTransform(el, offset, 0);
 };
 
 onBeforeUpdate(() => {
diff --git a/static/src/styles/components/input/_composer.scss b/static/src/styles/components/input/_composer.scss
index 34141ec..b761b42 100644
--- a/static/src/styles/components/input/_composer.scss
+++ b/static/src/styles/components/input/_composer.scss
@@ -58,14 +58,16 @@
     position: relative;
     z-index: var(--runtime-queue-z, 1);
     min-height: 34px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
     align-items: center;
     gap: 10px;
     padding: 6px 10px 6px 12px;
     border: none;
     border-radius: 0;
     background: var(--runtime-queue-bg);
+    overflow: hidden;
 }
 
 .runtime-queue-item--top {
@@ -74,7 +76,9 @@
 }
 
 .runtime-queue-item__text {
+    flex: 1 1 auto;
     min-width: 0;
+    display: block;
     font-size: 13px;
     line-height: 1.3;
     color: var(--claude-text);
@@ -84,6 +88,7 @@
 }
 
 .runtime-queue-item__action {
+    flex-shrink: 0;
     border: none;
     background: transparent;
     color: var(--claude-text-secondary);
@@ -92,6 +97,8 @@
     padding: 3px 4px;
     border-radius: 6px;
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 .runtime-queue-item__action:hover {