From d5eb3507b6d9e33a8244147f43bc53ec15710614 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Mon, 10 Aug 2026 06:00:05 -0400
Subject: [PATCH] fix(ui): show superseded content inline

---
 .../src/components/chat/MessageBubble.vue     | 37 +------------------
 .../supersededContentDisplay.test.ts          | 15 ++++++++
 2 files changed, 16 insertions(+), 36 deletions(-)
 create mode 100644 mateclaw-ui/src/components/chat/__tests__/supersededContentDisplay.test.ts

diff --git a/mateclaw-ui/src/components/chat/MessageBubble.vue b/mateclaw-ui/src/components/chat/MessageBubble.vue
index 46b56fc2..9ae8db87 100644
--- a/mateclaw-ui/src/components/chat/MessageBubble.vue
+++ b/mateclaw-ui/src/components/chat/MessageBubble.vue
@@ -75,34 +75,15 @@
                 <ThinkingSegment v-if="seg.type === 'thinking' && showThinking" :segment="seg" />
                 <ToolCallSegment v-else-if="seg.type === 'tool_call'" :segment="seg" />
                 <template v-else-if="seg.type === 'content'">
-                  <button
-                    v-if="seg.superseded"
-                    class="superseded-toggle"
-                    type="button"
-                    @click="toggleSupersededSegment(seg.id)"
-                  >
-                    <el-icon><InfoFilled /></el-icon>
-                    <!-- Label tracks the actual state — it read "已折叠" even while
-                         the body below it was expanded, so the banner contradicted
-                         what the reader could plainly see. -->
-                    <span>{{ isSupersededExpanded(seg.id)
-                      ? $t('chat.supersededPreviewExpanded')
-                      : $t('chat.supersededPreviewCollapsed') }}</span>
-                    <span class="superseded-toggle__action">
-                      {{ isSupersededExpanded(seg.id) ? $t('chat.collapse') : $t('chat.expand') }}
-                    </span>
-                  </button>
-                  <div v-if="seg.repetitionWarning && (!seg.superseded || isSupersededExpanded(seg.id))" class="repetition-warning">
+                  <div v-if="seg.repetitionWarning" class="repetition-warning">
                     <el-icon><WarningFilled /></el-icon>
                     <span class="repetition-warning__text">{{ $t('chat.contentRepetitionWarning') }}</span>
                     <span v-if="seg.truncatedChars" class="repetition-warning__meta">({{ seg.truncatedChars }} chars)</span>
                   </div>
                   <ContentSegment
-                    v-if="!seg.superseded || isSupersededExpanded(seg.id)"
                     :segment="seg"
                     :show-cursor="showCursor && seg.status === 'running'"
                     :generated-file-names="generatedFileNames"
-                    :class="{ 'content-segment--superseded': seg.superseded }"
                   />
                 </template>
                 </template>
@@ -1080,18 +1061,6 @@ const formatFileSize = (size: number) => {
 
 // --- 执行过程面板 ---
 const executionExpanded = ref(false)
-const expandedSupersededSegments = ref(new Set<string>())
-
-function isSupersededExpanded(id: string) {
-  return expandedSupersededSegments.value.has(id)
-}
-
-function toggleSupersededSegment(id: string) {
-  const next = new Set(expandedSupersededSegments.value)
-  if (next.has(id)) next.delete(id)
-  else next.add(id)
-  expandedSupersededSegments.value = next
-}
 
 // --- 分段式渲染（Claude Code 风格） ---
 const parsedMetadata = computed(() => {
@@ -1715,10 +1684,6 @@ watch(isGenerating, (generating) => {
   color: var(--mc-primary, #2563eb);
 }
 
-.content-segment--superseded {
-  opacity: 0.72;
-}
-
 .message-wrapper {
   display: flex;
   gap: 12px;
diff --git a/mateclaw-ui/src/components/chat/__tests__/supersededContentDisplay.test.ts b/mateclaw-ui/src/components/chat/__tests__/supersededContentDisplay.test.ts
new file mode 100644
index 00000000..73ab10da
--- /dev/null
+++ b/mateclaw-ui/src/components/chat/__tests__/supersededContentDisplay.test.ts
@@ -0,0 +1,15 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import messageBubbleSource from '../MessageBubble.vue?raw'
+
+describe('MessageBubble superseded content display', () => {
+  it('直接显示工具前预写内容，不渲染折叠提示或隐藏正文', () => {
+    const source = messageBubbleSource
+
+    expect(source).not.toContain('supersededPreviewCollapsed')
+    expect(source).not.toContain('supersededPreviewExpanded')
+    expect(source).not.toContain('toggleSupersededSegment')
+    expect(source).not.toContain("v-if=\"!seg.superseded || isSupersededExpanded(seg.id)\"")
+    expect(source).not.toContain('content-segment--superseded')
+  })
+})