From 4bf0733907a2205eb1e198668abf1c4a8e273727 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 7 Jun 2026 14:59:44 +0800
Subject: [PATCH] feat: add minimal tool reel animation

---
 static/demo/minimal-tool-roller-demo.html    | 443 +++++++++++++++++++
 static/src/components/chat/MinimalBlocks.vue | 381 +++++++++++++++-
 2 files changed, 813 insertions(+), 11 deletions(-)
 create mode 100644 static/demo/minimal-tool-roller-demo.html
diff --git a/static/demo/minimal-tool-roller-demo.html b/static/demo/minimal-tool-roller-demo.html
new file mode 100644
index 0000000..a0edb66
--- /dev/null
+++ b/static/demo/minimal-tool-roller-demo.html
@@ -0,0 +1,443 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>极简模式 · 并行工具转轮动画 Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --surface-base: #faf9f5;
+      --surface-card: #f0ece3;
+      --surface-muted: #e7e1d5;
+      --surface-raised: #fffdf8;
+      --text-primary: #25231f;
+      --text-secondary: #6c665d;
+      --text-muted: #91887a;
+      --border-subtle: #ddd5c8;
+      --accent: #b9654f;
+      --state-running: #8b7567;
+      --state-done: #47735e;
+      --shadow-panel: 0 18px 52px rgba(53, 45, 35, .14);
+      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      background:
+        linear-gradient(180deg, var(--surface-base), var(--surface-muted));
+      color: var(--text-primary);
+      font-family: var(--sans);
+    }
+
+    .stage {
+      width: min(760px, calc(100vw - 40px));
+      padding: 34px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 24px;
+      background: var(--surface-raised);
+      box-shadow: var(--shadow-panel);
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--text-muted);
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: .16em;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      margin: 0 0 12px;
+      font-size: 24px;
+      line-height: 1.25;
+      letter-spacing: -.03em;
+    }
+
+    .desc {
+      max-width: 620px;
+      margin: 0 0 28px;
+      color: var(--text-secondary);
+      font-size: 14px;
+      line-height: 1.75;
+    }
+
+    .minimal-line {
+      display: grid;
+      grid-template-columns: 10px minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 12px;
+      height: 46px;
+      padding: 0 14px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 16px;
+      background: var(--surface-card);
+      overflow: hidden;
+    }
+
+    .dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: var(--state-running);
+      transform-origin: center;
+      animation: breathe 1.25s ease-in-out infinite;
+    }
+
+    .dot.done {
+      background: var(--state-done);
+      animation: none;
+    }
+
+    @keyframes breathe {
+      0%, 100% { transform: scale(.72); opacity: .55; }
+      50% { transform: scale(1); opacity: 1; }
+    }
+
+    .summary {
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-primary);
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    .intent {
+      flex: 0 0 auto;
+      color: var(--text-secondary);
+    }
+
+    .tool-window {
+      position: relative;
+      flex: 1 1 auto;
+      min-width: 0;
+      height: 26px;
+      overflow: hidden;
+      font-family: var(--mono);
+      color: var(--text-primary);
+    }
+
+    .tool-window::before,
+    .tool-window::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      height: 7px;
+      pointer-events: none;
+    }
+
+    .tool-window::before {
+      top: 0;
+      background: linear-gradient(180deg, var(--surface-card), transparent);
+    }
+
+    .tool-window::after {
+      bottom: 0;
+      background: linear-gradient(0deg, var(--surface-card), transparent);
+    }
+
+    .tool-item,
+    .typing-text,
+    .done-text {
+      height: 26px;
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .typing-text,
+    .done-text {
+      position: absolute;
+      inset: 0;
+    }
+
+    .typing-text::after {
+      content: "";
+      width: 1px;
+      height: 15px;
+      margin-left: 2px;
+      background: var(--accent);
+      animation: caret .75s steps(1) infinite;
+    }
+
+    @keyframes caret {
+      0%, 45% { opacity: 1; }
+      46%, 100% { opacity: 0; }
+    }
+
+    .tool-reel {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      will-change: transform;
+      transform: translateY(0);
+    }
+
+    .tool-reel.rolling {
+      transition: transform 520ms cubic-bezier(.22, .9, .25, 1);
+    }
+
+    .tool-reel.settle {
+      transition: transform 170ms cubic-bezier(.2, .72, .26, 1);
+    }
+
+    .badge {
+      flex: 0 0 auto;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 9px;
+      border-radius: 999px;
+      background: var(--surface-muted);
+      color: var(--text-secondary);
+      font-size: 12px;
+      font-weight: 650;
+    }
+
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 18px;
+    }
+
+    button {
+      height: 36px;
+      padding: 0 14px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 12px;
+      background: var(--surface-card);
+      color: var(--text-primary);
+      font: 650 13px/1 var(--sans);
+      cursor: pointer;
+    }
+
+    button.primary {
+      border-color: var(--accent);
+      background: var(--accent);
+      color: var(--surface-raised);
+    }
+
+    button:disabled {
+      cursor: not-allowed;
+      opacity: .55;
+    }
+
+    .notes {
+      margin: 18px 0 0;
+      padding-left: 18px;
+      color: var(--text-secondary);
+      font-size: 13px;
+      line-height: 1.8;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: .001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: .001ms !important;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="stage">
+    <p class="eyebrow">Minimal Mode Motion Test</p>
+    <h1>并行工具调用摘要行 · 转轮动画</h1>
+    <p class="desc">
+      演示逻辑：并行批次开始后，第一个工具先按打字机显示；随后摘要行在本批次工具之间做纵向转轮循环，直到批次结束后停在最终状态。
+    </p>
+
+    <section class="minimal-line" aria-label="极简模式摘要行">
+      <span id="dot" class="dot" aria-hidden="true"></span>
+      <div class="summary">
+        <span id="intent" class="intent">正在并行调用</span>
+        <span id="toolWindow" class="tool-window" aria-live="polite"></span>
+      </div>
+      <span id="badge" class="badge">准备中</span>
+    </section>
+
+    <div class="controls">
+      <button id="startBtn" class="primary" type="button">播放并行调用</button>
+      <button id="finishBtn" type="button" disabled>结束批次</button>
+      <button id="resetBtn" type="button">重置</button>
+    </div>
+
+    <ul class="notes">
+      <li>工具列表是一整列，窗口只露出当前命中的一项；所有工具同时向上滚动。</li>
+      <li>每项停留约 1.45 秒；落位时只轻微多冲一点，再回弹，模拟克制的“刹不住车”顿挫。</li>
+      <li>第一个工具保留打字机式出现，避免开头突兀。</li>
+    </ul>
+  </main>
+
+  <script>
+    const tools = [
+      "search_query · 检索相关资料",
+      "read_file · 读取项目片段",
+      "run_command · 执行最小验证",
+      "browser_preview · 检查本地界面"
+    ];
+
+    const toolWindow = document.getElementById("toolWindow");
+    const badge = document.getElementById("badge");
+    const dot = document.getElementById("dot");
+    const startBtn = document.getElementById("startBtn");
+    const finishBtn = document.getElementById("finishBtn");
+    const resetBtn = document.getElementById("resetBtn");
+
+    let typingTimer = null;
+    let wheelTimer = null;
+    let settleTimer = null;
+    let index = 0;
+    let running = false;
+    const itemHeight = 26;
+
+    function clearTimers() {
+      window.clearInterval(typingTimer);
+      window.clearInterval(wheelTimer);
+      window.clearTimeout(settleTimer);
+      typingTimer = null;
+      wheelTimer = null;
+      settleTimer = null;
+    }
+
+    function clearToolWindow() {
+      toolWindow.replaceChildren();
+    }
+
+    function setTextNode(text, className) {
+      clearToolWindow();
+      const node = document.createElement("span");
+      node.className = className;
+      node.textContent = text;
+      toolWindow.appendChild(node);
+      return node;
+    }
+
+    function buildReel() {
+      clearToolWindow();
+      const reel = document.createElement("div");
+      reel.id = "toolReel";
+      reel.className = "tool-reel";
+
+      [...tools, tools[0]].forEach((tool) => {
+        const item = document.createElement("div");
+        item.className = "tool-item";
+        item.textContent = tool;
+        reel.appendChild(item);
+      });
+
+      toolWindow.appendChild(reel);
+      index = 0;
+      reel.style.transform = "translateY(0)";
+      return reel;
+    }
+
+    function typeFirstTool(done) {
+      const text = tools[0];
+      let cursor = 0;
+      const typingNode = setTextNode("", "typing-text");
+      badge.textContent = "1 / " + tools.length;
+
+      typingTimer = window.setInterval(() => {
+        cursor += 1;
+        typingNode.textContent = text.slice(0, cursor);
+
+        if (cursor >= text.length) {
+          window.clearInterval(typingTimer);
+          typingTimer = null;
+          window.setTimeout(done, 520);
+        }
+      }, 34);
+    }
+
+    function spinToNext() {
+      const reel = document.getElementById("toolReel");
+      if (!reel) return;
+
+      index = (index + 1) % tools.length;
+      badge.textContent = `${index + 1} / ${tools.length}`;
+
+      const visualIndex = index === 0 ? tools.length : index;
+      const target = -visualIndex * itemHeight;
+      const overshoot = target - 2;
+
+      reel.className = "tool-reel rolling";
+      reel.style.transform = `translateY(${overshoot}px)`;
+
+      settleTimer = window.setTimeout(() => {
+        reel.className = "tool-reel settle";
+        reel.style.transform = `translateY(${target}px)`;
+
+        if (index === 0) {
+          settleTimer = window.setTimeout(() => {
+            reel.className = "tool-reel";
+            reel.style.transform = "translateY(0)";
+          }, 175);
+        }
+      }, 520);
+    }
+
+    function startWheel() {
+      buildReel();
+      wheelTimer = window.setInterval(spinToNext, 1450);
+    }
+
+    function startDemo() {
+      if (running) return;
+      clearTimers();
+      running = true;
+      index = 0;
+      dot.classList.remove("done");
+      startBtn.disabled = true;
+      finishBtn.disabled = false;
+      badge.textContent = "启动中";
+      typeFirstTool(startWheel);
+    }
+
+    function finishDemo() {
+      if (!running) return;
+      clearTimers();
+      running = false;
+      setTextNode("并行工具调用完成", "done-text");
+      badge.textContent = "完成";
+      dot.classList.add("done");
+      startBtn.disabled = false;
+      finishBtn.disabled = true;
+    }
+
+    function resetDemo() {
+      clearTimers();
+      running = false;
+      index = 0;
+      setTextNode("等待并行工具批次", "done-text");
+      badge.textContent = "准备中";
+      dot.classList.remove("done");
+      startBtn.disabled = false;
+      finishBtn.disabled = true;
+    }
+
+    startBtn.addEventListener("click", startDemo);
+    finishBtn.addEventListener("click", finishDemo);
+    resetBtn.addEventListener("click", resetDemo);
+    resetDemo();
+  </script>
+</body>
+</html>
diff --git a/static/src/components/chat/MinimalBlocks.vue b/static/src/components/chat/MinimalBlocks.vue
index 4f21bb8..e4ffc05 100644
--- a/static/src/components/chat/MinimalBlocks.vue
+++ b/static/src/components/chat/MinimalBlocks.vue
@@ -12,15 +12,35 @@
         >
           <div class="summary-content-wrapper">
             <span class="summary-preview">
-              <template v-if="isSummaryRunning(group.actions, group.id)">
+              <template v-if="shouldAnimateSummary(group.actions, group.id)">
                 <span
-                  v-for="(char, idx) in getAnimatedSummaryChars(getSummaryPreview(group.actions))"
-                  :key="`${group.id}-${idx}`"
-                  class="summary-char"
-                  :style="{ animationDelay: `${(idx + 1) * 0.12}s` }"
+                  v-if="shouldShowToolReel(group.actions, group.id)"
+                  class="summary-tool-reel-window"
                 >
-                  {{ char === ' ' ? '\u00A0' : char }}
+                  <span
+                    class="summary-tool-reel-track"
+                    :class="getToolReelPhase(group.id)"
+                    :style="getToolReelTrackStyle(group.id)"
+                  >
+                    <span
+                      v-for="(item, idx) in getToolReelDisplayItems(group.actions, group.id)"
+                      :key="`${group.id}-tool-reel-${idx}-${item}`"
+                      class="summary-tool-reel-item"
+                    >
+                      {{ item }}
+                    </span>
+                  </span>
                 </span>
+                <template v-else>
+                  <span
+                    v-for="(char, idx) in getAnimatedSummaryChars(getSummaryPreview(group.actions))"
+                    :key="`${group.id}-${idx}`"
+                    class="summary-char"
+                    :style="{ animationDelay: `${(idx + 1) * 0.12}s` }"
+                  >
+                    {{ char === ' ' ? '\u00A0' : char }}
+                  </span>
+                </template>
               </template>
               <template v-else>
                 {{ getSummaryPreview(group.actions) }}
@@ -125,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, Component } from 'vue';
+import { ref, reactive, computed, watch, nextTick, onBeforeUnmount, Component } from 'vue';
 import { usePersonalizationStore } from '@/stores/personalization';
 import { renderEnhancedToolResult } from './actions/toolRenderers';
 import { getRandomLoader } from './loaders/index';
@@ -139,6 +159,10 @@ interface Action {
   tool?: {
     name?: string;
     intent?: string;
+    intent_rendered?: string;
+    intent_full?: string;
+    status?: string;
+    display_name?: string;
     arguments?: any;
     result?: any;
   };
@@ -181,6 +205,26 @@ const expandedGroups = ref(new Set<string>());
 const thinkingRefs = new Map<string, HTMLElement>();
 const summaryLoaders = new Map<string, Component>();
 const SUMMARY_PREVIEW_MAX_CHARS = 25;
+const TOOL_REEL_ITEM_HEIGHT = 26;
+const TOOL_REEL_INTERVAL_MS = 1450;
+const TOOL_REEL_ROLL_MS = 520;
+const TOOL_REEL_SETTLE_MS = 170;
+const TOOL_REEL_OVERSHOOT_PX = 2;
+
+type ToolReelPhase = 'idle' | 'rolling' | 'settle';
+
+interface ToolReelState {
+  index: number;
+  offsetPx: number;
+  phase: ToolReelPhase;
+  signature: string;
+  items: string[];
+  completing?: boolean;
+}
+
+const toolReelStates = reactive<Record<string, ToolReelState>>({});
+const toolReelIntervals = new Map<string, number>();
+const toolReelTimeouts = new Map<string, number[]>();
 
 const truncateSummaryPreview = (raw: string) => {
   const text = typeof raw === 'string' ? raw : '';
@@ -192,6 +236,251 @@ const truncateSummaryPreview = (raw: string) => {
 
 const getAnimatedSummaryChars = (text: string) => Array.from(text || '');
 
+const getFirstLine = (raw: string) => {
+  const text = typeof raw === 'string' ? raw : '';
+  const firstLineEnd = text.indexOf('\n');
+  return firstLineEnd > 0 ? text.substring(0, firstLineEnd) : text;
+};
+
+const getToolSummaryText = (action: Action) => {
+  const tool = action.tool;
+  if (!tool) return '';
+
+  const intentEnabled = personalizationStore.form.tool_intent_enabled;
+  const intentText = tool.intent_rendered || tool.intent_full || '';
+
+  if (intentEnabled && intentText) {
+    return truncateSummaryPreview(getFirstLine(intentText));
+  }
+
+  if (tool.status === 'preparing') {
+    return `准备调用 ${tool.name || '工具'}...`;
+  }
+  if (tool.status === 'running') {
+    return `正在调用 ${tool.name || '工具'}...`;
+  }
+  if (tool.status === 'completed') {
+    return tool.display_name || tool.name || '工具执行完成';
+  }
+  return action.streaming ? '正在执行工具...' : tool.display_name || tool.name || '执行工具';
+};
+
+const isActiveToolAction = (action: Action) => {
+  if (action.type !== 'tool') return false;
+  if (action.streaming) return true;
+
+  const status = String(action.tool?.status || '').toLowerCase();
+  return [
+    'hinted',
+    'preparing',
+    'running',
+    'pending',
+    'pending_approval',
+    'awaiting_approval',
+    'awaiting_user_answer'
+  ].includes(status);
+};
+
+const getLatestToolSegment = (actions: Action[]) => {
+  let lastToolIndex = -1;
+  for (let i = actions.length - 1; i >= 0; i--) {
+    if (actions[i].type === 'tool') {
+      lastToolIndex = i;
+      break;
+    }
+    if (actions[i].type === 'thinking') {
+      break;
+    }
+  }
+  if (lastToolIndex < 0) return [];
+
+  let startIndex = lastToolIndex;
+  while (startIndex > 0 && actions[startIndex - 1].type === 'tool') {
+    startIndex--;
+  }
+
+  return actions.slice(startIndex, lastToolIndex + 1);
+};
+
+const getLatestActiveToolSegment = (actions: Action[]) => {
+  const segment = getLatestToolSegment(actions);
+  return segment.some(isActiveToolAction) ? segment : [];
+};
+
+const getToolReelItems = (actions: Action[]) =>
+  getLatestActiveToolSegment(actions)
+    .map(getToolSummaryText)
+    .filter((item) => item.trim().length > 0);
+
+const getToolReelDisplayItems = (actions: Action[], groupId: string) => {
+  const completingItems = toolReelStates[groupId]?.completing
+    ? toolReelStates[groupId].items
+    : null;
+  if (completingItems?.length) {
+    return completingItems;
+  }
+
+  const items = getToolReelItems(actions);
+  return items.length > 0 ? [...items, items[0]] : [];
+};
+
+const shouldShowToolReel = (actions: Action[], groupId: string) =>
+  !!toolReelStates[groupId]?.completing ||
+  (isSummaryRunning(actions, groupId) && getToolReelItems(actions).length > 1);
+
+const shouldAnimateSummary = (actions: Action[], groupId: string) =>
+  isSummaryRunning(actions, groupId) || !!toolReelStates[groupId]?.completing;
+
+const getToolReelPhase = (groupId: string) => toolReelStates[groupId]?.phase || 'idle';
+
+const getToolReelTrackStyle = (groupId: string) => ({
+  transform: `translateY(${toolReelStates[groupId]?.offsetPx || 0}px)`
+});
+
+const clearToolReelTimers = (groupId: string) => {
+  const interval = toolReelIntervals.get(groupId);
+  if (interval) {
+    window.clearInterval(interval);
+    toolReelIntervals.delete(groupId);
+  }
+
+  const timeouts = toolReelTimeouts.get(groupId) || [];
+  timeouts.forEach((timeout) => window.clearTimeout(timeout));
+  toolReelTimeouts.delete(groupId);
+};
+
+const pushToolReelTimeout = (groupId: string, timeout: number) => {
+  const timeouts = toolReelTimeouts.get(groupId) || [];
+  timeouts.push(timeout);
+  toolReelTimeouts.set(groupId, timeouts);
+};
+
+const spinToolReel = (groupId: string, itemCount: number) => {
+  const state = toolReelStates[groupId];
+  if (!state || state.completing || itemCount < 2) return;
+
+  const nextIndex = (state.index + 1) % itemCount;
+  const visualIndex = nextIndex === 0 ? itemCount : nextIndex;
+  const targetOffset = -visualIndex * TOOL_REEL_ITEM_HEIGHT;
+
+  state.phase = 'rolling';
+  state.offsetPx = targetOffset - TOOL_REEL_OVERSHOOT_PX;
+
+  const settleTimeout = window.setTimeout(() => {
+    state.phase = 'settle';
+    state.offsetPx = targetOffset;
+    state.index = nextIndex;
+
+    if (nextIndex === 0) {
+      const resetTimeout = window.setTimeout(() => {
+        state.phase = 'idle';
+        state.offsetPx = 0;
+      }, TOOL_REEL_SETTLE_MS);
+      pushToolReelTimeout(groupId, resetTimeout);
+    }
+  }, TOOL_REEL_ROLL_MS);
+  pushToolReelTimeout(groupId, settleTimeout);
+};
+
+const finishToolReel = (groupId: string, actions: Action[]) => {
+  const state = toolReelStates[groupId];
+  if (!state || state.completing) return;
+
+  const items =
+    state.items.length > 1
+      ? state.items
+      : getLatestToolSegment(actions)
+          .map(getToolSummaryText)
+          .filter((item) => item.trim().length > 0);
+
+  if (items.length < 2) {
+    clearToolReelTimers(groupId);
+    delete toolReelStates[groupId];
+    return;
+  }
+
+  clearToolReelTimers(groupId);
+  state.items = items;
+  state.signature = items.join('\u0001');
+  state.completing = true;
+
+  const finalIndex = items.length - 1;
+  const normalizedOffset = -state.index * TOOL_REEL_ITEM_HEIGHT;
+  const targetOffset = -finalIndex * TOOL_REEL_ITEM_HEIGHT;
+
+  state.phase = 'idle';
+  state.offsetPx = normalizedOffset;
+
+  window.requestAnimationFrame(() => {
+    state.phase = 'rolling';
+    state.offsetPx = targetOffset - TOOL_REEL_OVERSHOOT_PX;
+
+    const settleTimeout = window.setTimeout(() => {
+      state.phase = 'settle';
+      state.offsetPx = targetOffset;
+      state.index = finalIndex;
+    }, TOOL_REEL_ROLL_MS);
+    pushToolReelTimeout(groupId, settleTimeout);
+
+    const cleanupTimeout = window.setTimeout(() => {
+      clearToolReelTimers(groupId);
+      delete toolReelStates[groupId];
+    }, TOOL_REEL_ROLL_MS + TOOL_REEL_SETTLE_MS + 260);
+    pushToolReelTimeout(groupId, cleanupTimeout);
+  });
+};
+
+const syncToolReels = () => {
+  const activeGroups = new Set<string>();
+
+  blockGroups.value.forEach((group) => {
+    if (group.type !== 'summary' || !group.actions || !shouldShowToolReel(group.actions, group.id)) {
+      return;
+    }
+
+    const items = getToolReelItems(group.actions);
+    const signature = items.join('\u0001');
+    activeGroups.add(group.id);
+
+    if (!toolReelStates[group.id] || toolReelStates[group.id].signature !== signature) {
+      clearToolReelTimers(group.id);
+      toolReelStates[group.id] = {
+        index: 0,
+        offsetPx: 0,
+        phase: 'idle',
+        signature,
+        items
+      };
+    } else {
+      toolReelStates[group.id].items = items;
+    }
+
+    if (!toolReelIntervals.has(group.id)) {
+      const interval = window.setInterval(
+        () => spinToolReel(group.id, items.length),
+        TOOL_REEL_INTERVAL_MS
+      );
+      toolReelIntervals.set(group.id, interval);
+    }
+  });
+
+  Object.keys(toolReelStates).forEach((groupId) => {
+    if (!activeGroups.has(groupId)) {
+      const group = blockGroups.value.find((item) => item.id === groupId);
+      if (group?.type === 'summary' && group.actions && !toolReelStates[groupId].completing) {
+        activeGroups.add(groupId);
+        finishToolReel(groupId, group.actions);
+        return;
+      }
+
+      if (!toolReelStates[groupId].completing) {
+        clearToolReelTimers(groupId);
+        delete toolReelStates[groupId];
+      }
+    }
+  });
+};
+
 // 获取摘要组的加载动画组件（每次action类型切换时随机一次）
 const getSummaryLoader = (groupId: string) => {
   const group = blockGroups.value.find((g) => g.id === groupId);
@@ -342,9 +631,11 @@ const getSummaryPreview = (actions: Action[]) => {
       return `正在调用 ${tool.name || '工具'}...`;
     }
     if (tool.status === 'completed') {
-      return '工具执行完成';
+      return truncateSummaryPreview(tool.display_name || tool.name || '工具执行完成');
     }
-    return currentStep.streaming ? '正在执行工具...' : '工具执行完成';
+    return currentStep.streaming
+      ? '正在执行工具...'
+      : truncateSummaryPreview(tool.display_name || tool.name || '工具执行完成');
   }
   return '';
 };
@@ -533,10 +824,21 @@ const handleScroll = (blockId: string, event: Event) => {
 watch(
   () => props.actions,
   () => {
-    // 简化：不需要动态更新高度
+    syncToolReels();
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
+
+watch(
+  () => [props.conversationRunning, props.isLatestMessage],
+  () => {
+    syncToolReels();
+  }
+);
+
+onBeforeUnmount(() => {
+  Object.keys(toolReelStates).forEach(clearToolReelTimers);
+});
 </script>
 
 <style scoped>
@@ -596,6 +898,63 @@ watch(
   color: inherit;
 }
 
+.summary-tool-reel-window {
+  position: relative;
+  display: inline-block;
+  width: min(100%, 36em);
+  height: 26px;
+  overflow: hidden;
+  vertical-align: top;
+}
+
+.summary-tool-reel-window::before,
+.summary-tool-reel-window::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 6px;
+  pointer-events: none;
+}
+
+.summary-tool-reel-window::before {
+  top: 0;
+  background: linear-gradient(180deg, var(--surface-base), transparent);
+}
+
+.summary-tool-reel-window::after {
+  bottom: 0;
+  background: linear-gradient(0deg, var(--surface-base), transparent);
+}
+
+.summary-tool-reel-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  will-change: transform;
+}
+
+.summary-tool-reel-track.rolling {
+  transition: transform 520ms cubic-bezier(0.22, 0.9, 0.25, 1);
+}
+
+.summary-tool-reel-track.settle {
+  transition: transform 170ms cubic-bezier(0.2, 0.72, 0.26, 1);
+}
+
+.summary-tool-reel-item {
+  display: block;
+  height: 26px;
+  line-height: 26px;
+  overflow: hidden;
+  color: var(--text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .summary-status-icon {
   flex-shrink: 0;
   margin-left: 0;
