From 6aaa07e2369f60143ca599759d1673c0862ccb33 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Tue, 6 Jan 2026 01:03:22 +0100
Subject: [PATCH 1/6] feat: add mermaid diagram support and migrate to
 markstream-vue

---
 package.json                                  |  3 +-
 src/webview/src/components/MermaidDiagram.vue | 47 +++++++++++++++++++
 .../components/Messages/blocks/TextBlock.vue  | 31 +++++-------
 .../Messages/blocks/tools/ExitPlanMode.vue    | 39 ++++++++-------
 src/webview/src/main.ts                       |  9 ++++
 src/webview/src/utils/themeDetector.ts        | 46 ++++++++++++++++++
 6 files changed, 138 insertions(+), 37 deletions(-)
 create mode 100644 src/webview/src/components/MermaidDiagram.vue
 create mode 100644 src/webview/src/utils/themeDetector.ts

diff --git a/package.json b/package.json
index c9d14c8..7cc57e2 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,8 @@
     "fuse.js": "^7.1.0",
     "lexical": "^0.38.2",
     "lexical-vue": "^0.14.1",
-    "marked": "^17.0.1",
+    "markstream-vue": "^0.0.4",
+    "mermaid": "^11.6.0",
     "motion-v": "^1.7.4",
     "path-browserify-esm": "^1.0.6",
     "pinia": "^3.0.4",
diff --git a/src/webview/src/components/MermaidDiagram.vue b/src/webview/src/components/MermaidDiagram.vue
new file mode 100644
index 0000000..e5345cb
--- /dev/null
+++ b/src/webview/src/components/MermaidDiagram.vue
@@ -0,0 +1,47 @@
+<template>
+  <MermaidBlockNode
+    v-bind="$attrs"
+    :show-header="false"
+    :show-mode-toggle="true"
+    :show-copy-button="false"
+    :show-export-button="false"
+    :show-fullscreen-button="false"
+    :show-collapse-button="false"
+    :show-zoom-controls="false"
+    :enable-wheel-zoom="true"
+  />
+</template>
+
+<script setup lang="ts">
+import { MermaidBlockNode } from 'markstream-vue';
+</script>
+
+<style scoped>
+/* Container for hover reveal */
+:deep(.mermaid-container) {
+  position: relative;
+}
+
+/* Subtle toggle - bottom-right, visible on hover */
+:deep(.mode-toggle) {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  background: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+:deep(.mermaid-container:hover .mode-toggle) {
+  opacity: 0.7;
+}
+
+:deep(.mode-toggle:hover) {
+  opacity: 1 !important;
+}
+</style>
diff --git a/src/webview/src/components/Messages/blocks/TextBlock.vue b/src/webview/src/components/Messages/blocks/TextBlock.vue
index 0268ac8..7f96d30 100644
--- a/src/webview/src/components/Messages/blocks/TextBlock.vue
+++ b/src/webview/src/components/Messages/blocks/TextBlock.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="text-block">
-    <div :class="markdownClasses" v-html="renderedMarkdown"></div>
+    <div :class="markdownClasses">
+      <MarkdownRender
+        :content="props.block.text"
+        :enable-mermaid="true"
+        :is-dark="isDark"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { MarkdownRender } from 'markstream-vue';
 import type { TextBlock as TextBlockType } from '../../../models/ContentBlock';
 import type { ToolContext } from '../../../types/tool';
-import { marked } from 'marked';
-// import DOMPurify from 'dompurify'; // TODO: 安装后启用
+import { useThemeDetector } from '../../../utils/themeDetector';
 
 interface Props {
   block: TextBlockType;
@@ -18,7 +24,9 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// Markdown 类名
+const { isDark } = useThemeDetector();
+
+// Markdown class names
 const markdownClasses = computed(() => {
   const classes = ['markdown-content'];
   if (props.block.isSlashCommand) {
@@ -26,19 +34,6 @@ const markdownClasses = computed(() => {
   }
   return classes;
 });
-
-// 配置 marked
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-});
-
-// 渲染 Markdown
-const renderedMarkdown = computed(() => {
-  const rawHtml = marked.parse(props.block.text) as string;
-  // TODO: 使用 DOMPurify.sanitize(rawHtml) 进行安全清理
-  return rawHtml;
-});
 </script>
 
 <style scoped>
@@ -60,7 +55,7 @@ const renderedMarkdown = computed(() => {
   font-weight: 600;
 }
 
-/* Markdown 基础样式 - Claudex 风格 */
+/* Markdown base styles - Claudex style */
 .markdown-content :deep(p) {
   margin: 8px 0;
   line-height: 1.6;
diff --git a/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue b/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
index 3eaf7d7..87b7cc0 100644
--- a/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
+++ b/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
@@ -5,26 +5,32 @@
   >
     <template #custom>
       <div class="plan-card">
-        <!-- Plan 标题栏 -->
+        <!-- Plan header -->
         <div class="plan-header">
           <span class="codicon codicon-tasklist"></span>
           <span class="plan-title">Plan</span>
         </div>
 
-        <!-- Plan 内容 -->
+        <!-- Plan content -->
         <div v-if="plan" class="plan-body" :class="{ 'is-expanded': isExpanded }">
-          <div class="plan-content" v-html="renderedPlan"></div>
+          <div class="plan-content">
+            <MarkdownRender
+              :content="plan"
+              :enable-mermaid="true"
+              :is-dark="isDark"
+            />
+          </div>
         </div>
 
-        <!-- 展开按钮 -->
+        <!-- Expand button -->
         <div v-if="plan && !toolResult?.is_error" class="plan-footer">
           <button @click="toggleExpand" class="expand-button">
             <span class="codicon" :class="isExpanded ? 'codicon-chevron-up' : 'codicon-chevron-down'"></span>
-            <span>{{ isExpanded ? '收起' : '展开' }}</span>
+            <span>{{ isExpanded ? 'Collapse' : 'Expand' }}</span>
           </button>
         </div>
 
-        <!-- 错误内容 -->
+        <!-- Error content -->
         <ToolError v-if="toolResult?.is_error" :tool-result="toolResult" />
       </div>
     </template>
@@ -33,9 +39,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { marked } from 'marked';
+import { MarkdownRender } from 'markstream-vue';
 import ToolMessageWrapper from './common/ToolMessageWrapper.vue';
 import ToolError from './common/ToolError.vue';
+import { useThemeDetector } from '../../../../utils/themeDetector';
 
 interface Props {
   toolUse?: any;
@@ -45,21 +52,17 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// 展开状态
+const { isDark } = useThemeDetector();
+
+// Expand state
 const isExpanded = ref(false);
 
-// Plan内容
+// Plan content
 const plan = computed(() => {
   return props.toolUse?.input?.plan || props.toolUseResult?.plan;
 });
 
-// 使用marked渲染Markdown
-const renderedPlan = computed(() => {
-  if (!plan.value) return '';
-  return marked(plan.value);
-});
-
-// 切换展开/收起
+// Toggle expand/collapse
 const toggleExpand = () => {
   isExpanded.value = !isExpanded.value;
 };
@@ -124,7 +127,7 @@ const toggleExpand = () => {
   color: var(--vscode-editor-foreground);
 }
 
-/* Markdown 样式 */
+/* Markdown styles */
 .plan-content :deep(h1) {
   font-size: 1.4em;
   font-weight: 600;
@@ -189,7 +192,7 @@ const toggleExpand = () => {
   padding: 0;
 }
 
-/* 展开按钮 */
+/* Expand button */
 .plan-footer {
   display: flex;
   justify-content: center;
diff --git a/src/webview/src/main.ts b/src/webview/src/main.ts
index 4b0eb02..30a5deb 100644
--- a/src/webview/src/main.ts
+++ b/src/webview/src/main.ts
@@ -1,8 +1,11 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import { enableMermaid, setCustomComponents } from 'markstream-vue';
 import App from './App.vue';
+import MermaidDiagram from './components/MermaidDiagram.vue';
 import '@vscode/codicons/dist/codicon.css';
 import '@mdi/font/css/materialdesignicons.min.css';
+import 'markstream-vue/index.css';
 import 'virtual:svg-icons-register';
 
 declare global {
@@ -19,6 +22,12 @@ declare global {
   }
 }
 
+// Register custom Mermaid component BEFORE app mount
+setCustomComponents({
+  mermaid: MermaidDiagram
+});
+enableMermaid();
+
 const pinia = createPinia();
 const app = createApp(App);
 
diff --git a/src/webview/src/utils/themeDetector.ts b/src/webview/src/utils/themeDetector.ts
new file mode 100644
index 0000000..b153e22
--- /dev/null
+++ b/src/webview/src/utils/themeDetector.ts
@@ -0,0 +1,46 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+/**
+ * Detects VSCode dark/light theme from document.body.classList
+ * and watches for theme changes via MutationObserver.
+ */
+export function useThemeDetector() {
+  const isDark = ref(true);
+
+  const detectTheme = () => {
+    const body = document.body;
+    // VSCode adds 'vscode-dark', 'vscode-light', or 'vscode-high-contrast' class to body
+    isDark.value = body.classList.contains('vscode-dark') ||
+                   body.classList.contains('vscode-high-contrast');
+  };
+
+  let observer: MutationObserver | null = null;
+
+  onMounted(() => {
+    detectTheme();
+
+    // Watch for theme changes via MutationObserver
+    observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          detectTheme();
+          break;
+        }
+      }
+    });
+
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  });
+
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
+
+  return { isDark };
+}

From abcb57c4e2a824e1e7faaa7535c8f49dc4a7c008 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Tue, 6 Jan 2026 04:23:18 +0100
Subject: [PATCH 2/6] refactor: singleton theme detector and MarkdownContent
 wrapper

---
 .../components/Messages/MarkdownContent.vue   | 18 +++++
 .../{ => Messages}/MermaidDiagram.vue         |  0
 .../components/Messages/blocks/TextBlock.vue  | 11 +--
 .../Messages/blocks/tools/ExitPlanMode.vue    | 11 +--
 src/webview/src/main.ts                       |  2 +-
 src/webview/src/utils/themeDetector.ts        | 75 ++++++++++---------
 src/webview/vite.config.ts                    |  4 +
 7 files changed, 67 insertions(+), 54 deletions(-)
 create mode 100644 src/webview/src/components/Messages/MarkdownContent.vue
 rename src/webview/src/components/{ => Messages}/MermaidDiagram.vue (100%)

diff --git a/src/webview/src/components/Messages/MarkdownContent.vue b/src/webview/src/components/Messages/MarkdownContent.vue
new file mode 100644
index 0000000..fe91ca4
--- /dev/null
+++ b/src/webview/src/components/Messages/MarkdownContent.vue
@@ -0,0 +1,18 @@
+<template>
+  <MarkdownRender
+    :content="content"
+    :enable-mermaid="true"
+    :is-dark="isDark"
+  />
+</template>
+
+<script setup lang="ts">
+import { MarkdownRender } from 'markstream-vue';
+import { useThemeDetector } from '../../utils/themeDetector';
+
+defineProps<{
+  content: string;
+}>();
+
+const { isDark } = useThemeDetector();
+</script>
diff --git a/src/webview/src/components/MermaidDiagram.vue b/src/webview/src/components/Messages/MermaidDiagram.vue
similarity index 100%
rename from src/webview/src/components/MermaidDiagram.vue
rename to src/webview/src/components/Messages/MermaidDiagram.vue
diff --git a/src/webview/src/components/Messages/blocks/TextBlock.vue b/src/webview/src/components/Messages/blocks/TextBlock.vue
index 7f96d30..5e4c72a 100644
--- a/src/webview/src/components/Messages/blocks/TextBlock.vue
+++ b/src/webview/src/components/Messages/blocks/TextBlock.vue
@@ -1,21 +1,16 @@
 <template>
   <div class="text-block">
     <div :class="markdownClasses">
-      <MarkdownRender
-        :content="props.block.text"
-        :enable-mermaid="true"
-        :is-dark="isDark"
-      />
+      <MarkdownContent :content="props.block.text" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { MarkdownRender } from 'markstream-vue';
+import MarkdownContent from '../MarkdownContent.vue';
 import type { TextBlock as TextBlockType } from '../../../models/ContentBlock';
 import type { ToolContext } from '../../../types/tool';
-import { useThemeDetector } from '../../../utils/themeDetector';
 
 interface Props {
   block: TextBlockType;
@@ -24,8 +19,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { isDark } = useThemeDetector();
-
 // Markdown class names
 const markdownClasses = computed(() => {
   const classes = ['markdown-content'];
diff --git a/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue b/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
index 87b7cc0..83a946f 100644
--- a/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
+++ b/src/webview/src/components/Messages/blocks/tools/ExitPlanMode.vue
@@ -14,11 +14,7 @@
         <!-- Plan content -->
         <div v-if="plan" class="plan-body" :class="{ 'is-expanded': isExpanded }">
           <div class="plan-content">
-            <MarkdownRender
-              :content="plan"
-              :enable-mermaid="true"
-              :is-dark="isDark"
-            />
+            <MarkdownContent :content="plan" />
           </div>
         </div>
 
@@ -39,10 +35,9 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { MarkdownRender } from 'markstream-vue';
+import MarkdownContent from '../../MarkdownContent.vue';
 import ToolMessageWrapper from './common/ToolMessageWrapper.vue';
 import ToolError from './common/ToolError.vue';
-import { useThemeDetector } from '../../../../utils/themeDetector';
 
 interface Props {
   toolUse?: any;
@@ -52,8 +47,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const { isDark } = useThemeDetector();
-
 // Expand state
 const isExpanded = ref(false);
 
diff --git a/src/webview/src/main.ts b/src/webview/src/main.ts
index 30a5deb..f43971c 100644
--- a/src/webview/src/main.ts
+++ b/src/webview/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { enableMermaid, setCustomComponents } from 'markstream-vue';
 import App from './App.vue';
-import MermaidDiagram from './components/MermaidDiagram.vue';
+import MermaidDiagram from './components/Messages/MermaidDiagram.vue';
 import '@vscode/codicons/dist/codicon.css';
 import '@mdi/font/css/materialdesignicons.min.css';
 import 'markstream-vue/index.css';
diff --git a/src/webview/src/utils/themeDetector.ts b/src/webview/src/utils/themeDetector.ts
index b153e22..d52681e 100644
--- a/src/webview/src/utils/themeDetector.ts
+++ b/src/webview/src/utils/themeDetector.ts
@@ -1,45 +1,50 @@
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted } from 'vue';
+
+// Singleton state at module scope - shared by all consumers
+const isDark = ref(true);
+let observer: MutationObserver | null = null;
+let initialized = false;
+
+const detectTheme = () => {
+  const body = document.body;
+  // VSCode adds 'vscode-dark', 'vscode-light', or 'vscode-high-contrast' class to body
+  isDark.value = body.classList.contains('vscode-dark') ||
+                 body.classList.contains('vscode-high-contrast');
+};
+
+const ensureInitialized = () => {
+  if (initialized || typeof document === 'undefined') return;
+
+  detectTheme();
+
+  // Watch for theme changes via MutationObserver (single instance for entire app)
+  observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        detectTheme();
+        break;
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['class'],
+  });
+
+  initialized = true;
+};
 
 /**
  * Detects VSCode dark/light theme from document.body.classList
  * and watches for theme changes via MutationObserver.
+ *
+ * Uses a singleton pattern - the observer is created once and shared
+ * by all components that use this composable.
  */
 export function useThemeDetector() {
-  const isDark = ref(true);
-
-  const detectTheme = () => {
-    const body = document.body;
-    // VSCode adds 'vscode-dark', 'vscode-light', or 'vscode-high-contrast' class to body
-    isDark.value = body.classList.contains('vscode-dark') ||
-                   body.classList.contains('vscode-high-contrast');
-  };
-
-  let observer: MutationObserver | null = null;
-
   onMounted(() => {
-    detectTheme();
-
-    // Watch for theme changes via MutationObserver
-    observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-          detectTheme();
-          break;
-        }
-      }
-    });
-
-    observer.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['class'],
-    });
-  });
-
-  onUnmounted(() => {
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
+    ensureInitialized();
   });
 
   return { isDark };
diff --git a/src/webview/vite.config.ts b/src/webview/vite.config.ts
index 7b2c0e9..f67fc86 100644
--- a/src/webview/vite.config.ts
+++ b/src/webview/vite.config.ts
@@ -11,6 +11,10 @@ export default defineConfig(({ mode }) => ({
   server: {
     port: Number(process.env.VITE_DEV_PORT) || 5173,
     strictPort: true,
+    cors: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
     fs: {
       // 允许从工作区根目录及外部资源目录读取文件（用于别名资源与图标目录）
       allow: [

From 24ad8256837f77ce4e3fecb98e023a8196253085 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Tue, 6 Jan 2026 04:23:55 +0100
Subject: [PATCH 3/6] feat: add fullscreen and copy buttons to mermaid diagrams

---
 .../components/Messages/MermaidDiagram.vue    | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/webview/src/components/Messages/MermaidDiagram.vue b/src/webview/src/components/Messages/MermaidDiagram.vue
index e5345cb..3c68256 100644
--- a/src/webview/src/components/Messages/MermaidDiagram.vue
+++ b/src/webview/src/components/Messages/MermaidDiagram.vue
@@ -3,9 +3,9 @@
     v-bind="$attrs"
     :show-header="false"
     :show-mode-toggle="true"
-    :show-copy-button="false"
+    :show-copy-button="true"
     :show-export-button="false"
-    :show-fullscreen-button="false"
+    :show-fullscreen-button="true"
     :show-collapse-button="false"
     :show-zoom-controls="false"
     :enable-wheel-zoom="true"
@@ -22,6 +22,42 @@ import { MermaidBlockNode } from 'markstream-vue';
   position: relative;
 }
 
+/* Toolbar buttons - top-right, visible on hover */
+:deep(.mermaid-toolbar) {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+:deep(.mermaid-container:hover .mermaid-toolbar) {
+  opacity: 0.7;
+}
+
+:deep(.mermaid-toolbar:hover) {
+  opacity: 1 !important;
+}
+
+:deep(.mermaid-toolbar button) {
+  background: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--vscode-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.mermaid-toolbar button:hover) {
+  background: var(--vscode-toolbar-hoverBackground);
+}
+
 /* Subtle toggle - bottom-right, visible on hover */
 :deep(.mode-toggle) {
   position: absolute;
@@ -44,4 +80,13 @@ import { MermaidBlockNode } from 'markstream-vue';
 :deep(.mode-toggle:hover) {
   opacity: 1 !important;
 }
+
+/* Fullscreen overlay styles */
+:deep(.mermaid-fullscreen-overlay) {
+  background: var(--vscode-editor-background);
+}
+
+:deep(.mermaid-fullscreen-overlay .mermaid-toolbar) {
+  opacity: 1;
+}
 </style>

From 9e85753220f3a6c3cdea8ec9dbb50f98acaf3304 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Tue, 6 Jan 2026 10:02:31 +0100
Subject: [PATCH 4/6] fix(mermaid): increase timeouts and add theme detection
 for complex diagrams

---
 .../components/Messages/MermaidDiagram.vue    | 412 +++++++++++++++---
 1 file changed, 358 insertions(+), 54 deletions(-)

diff --git a/src/webview/src/components/Messages/MermaidDiagram.vue b/src/webview/src/components/Messages/MermaidDiagram.vue
index 3c68256..58329e2 100644
--- a/src/webview/src/components/Messages/MermaidDiagram.vue
+++ b/src/webview/src/components/Messages/MermaidDiagram.vue
@@ -1,92 +1,396 @@
 <template>
-  <MermaidBlockNode
-    v-bind="$attrs"
-    :show-header="false"
-    :show-mode-toggle="true"
-    :show-copy-button="true"
-    :show-export-button="false"
-    :show-fullscreen-button="true"
-    :show-collapse-button="false"
-    :show-zoom-controls="false"
-    :enable-wheel-zoom="true"
-  />
+  <div
+    class="mermaid-wrapper"
+    @mouseenter="showActions = true"
+    @mouseleave="showActions = false"
+  >
+    <MermaidBlockNode
+      ref="mermaidRef"
+      v-bind="$attrs"
+      :show-header="true"
+      :show-mode-toggle="false"
+      :show-copy-button="false"
+      :show-export-button="false"
+      :show-fullscreen-button="true"
+      :show-collapse-button="false"
+      :show-zoom-controls="true"
+      :enable-wheel-zoom="true"
+      :is-strict="false"
+      :is-dark="isDark"
+      :worker-timeout-ms="WORKER_TIMEOUT_MS"
+      :parse-timeout-ms="PARSE_TIMEOUT_MS"
+      :render-timeout-ms="RENDER_TIMEOUT_MS"
+      :full-render-timeout-ms="FULL_RENDER_TIMEOUT_MS"
+      @open-modal="onOpenModal"
+    >
+      <!-- Empty slots to hide default content -->
+      <template #header-left><span></span></template>
+      <template #header-center><span></span></template>
+    </MermaidBlockNode>
+
+    <!-- Custom copy button positioned before the native fullscreen button -->
+    <div class="action-buttons" :class="{ visible: showActions }">
+      <button @click="copySource" :title="copied ? 'Copied!' : 'Copy source'">
+        <span class="codicon" :class="copied ? 'codicon-check' : 'codicon-copy'"></span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
+/**
+ * MermaidDiagram - Custom wrapper for markstream-vue's MermaidBlockNode
+ *
+ * This component uses a CSS hack approach to customize the library's UI:
+ * - The library's header is kept enabled (required for fullscreen button to work)
+ * - CSS transforms the header into floating action buttons on hover
+ * - A custom copy button is positioned alongside the library's fullscreen button
+ *
+ * Security: `isStrict=false` is required to render all diagram types (bar charts,
+ * Gantt charts, etc.). Strict mode uses securityLevel="strict" with DOM purification
+ * that breaks these diagram types. Since this runs in VSCode's webview (already
+ * sandboxed), loose security is acceptable here.
+ *
+ * Timeouts: Complex diagram types (xychart, gantt) use dynamic imports that may
+ * take longer to load in the VSCode webview environment. We use increased timeout
+ * values (5-15 seconds) compared to defaults (1.4-4 seconds) to prevent premature
+ * timeout errors.
+ *
+ * The library uses Vue Teleport for the fullscreen modal, which is always rendered
+ * regardless of header visibility. We hook into the @open-modal event to:
+ * 1. Auto-scale the diagram to fit the fullscreen viewport
+ * 2. Watch for modal close to reset the inline diagram zoom
+ *
+ * DOM selectors used here rely on markstream-vue's internal Tailwind classes.
+ * If the library updates, these selectors may need adjustment.
+ */
+import { ref, useAttrs, nextTick, onUnmounted } from 'vue';
 import { MermaidBlockNode } from 'markstream-vue';
+import { useThemeDetector } from '../../utils/themeDetector';
+
+// =============================================================================
+// Configuration Constants
+// =============================================================================
+
+/** Padding around diagram in fullscreen modal (pixels) */
+const FULLSCREEN_PADDING = 200;
+/** Maximum auto-zoom scale (1.5 = 150%) */
+const MAX_AUTO_ZOOM = 1.5;
+/** Minimum scale threshold before auto-zoom activates (1.1 = 10% enlargement needed) */
+const MIN_ZOOM_THRESHOLD = 1.1;
+/** Dampening factor for zoom (0.7 = use 70% of calculated zoom) */
+const ZOOM_DAMPENING_FACTOR = 0.7;
+/** Zoom increment per click (library uses 0.1 per click, so 10 = 1x) */
+const ZOOM_STEP_INCREMENT = 10;
+/** Delay between zoom button clicks (ms) */
+const CLICK_INTERVAL_MS = 20;
+/** Delay before accessing modal after open event (ms) */
+const MODAL_READY_DELAY_MS = 50;
+/** Delay for SVG to render in modal before measuring (ms) */
+const SVG_RENDER_DELAY_MS = 100;
+/** Duration to show "Copied!" feedback (ms) */
+const COPY_FEEDBACK_DURATION_MS = 2000;
+
+/**
+ * Timeout values for mermaid rendering - increased from defaults to handle
+ * complex diagram types (xychart, gantt) that require dynamic imports
+ */
+/** Worker timeout for diagram parsing (default: 1400ms) */
+const WORKER_TIMEOUT_MS = 5000;
+/** Parse timeout (default: 1800ms) */
+const PARSE_TIMEOUT_MS = 6000;
+/** Render timeout (default: 2500ms) */
+const RENDER_TIMEOUT_MS = 8000;
+/** Full render timeout (default: 4000ms) */
+const FULL_RENDER_TIMEOUT_MS = 15000;
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Node data passed via attrs from markstream-vue */
+interface MermaidNode {
+  content?: string;
+  raw?: string;
+}
+
+/**
+ * Props interface - empty as this component uses passthrough via v-bind="$attrs"
+ * All props are forwarded to MermaidBlockNode (e.g., node, content, etc.)
+ */
+interface Props {}
+defineProps<Props>();
+
+// =============================================================================
+// State
+// =============================================================================
+
+const attrs = useAttrs();
+const { isDark } = useThemeDetector();
+const mermaidRef = ref<InstanceType<typeof MermaidBlockNode> | null>(null);
+const showActions = ref(false);
+const copied = ref(false);
+
+// Module-level refs for lifecycle cleanup
+let modalObserver: MutationObserver | null = null;
+let zoomTimers: ReturnType<typeof setTimeout>[] = [];
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Clear any pending zoom animation timers
+ */
+const clearZoomTimers = () => {
+  zoomTimers.forEach(clearTimeout);
+  zoomTimers = [];
+};
+
+/**
+ * Find a button containing "%" text (the reset/zoom level button)
+ */
+const findResetButton = (container: Element): HTMLButtonElement | null => {
+  const buttons = container.querySelectorAll('button');
+  for (const btn of buttons) {
+    if (btn.textContent?.includes('%')) {
+      return btn as HTMLButtonElement;
+    }
+  }
+  return null;
+};
+
+// =============================================================================
+// Actions
+// =============================================================================
+
+const copySource = async () => {
+  const node = attrs.node as MermaidNode | undefined;
+  const source = node?.content || node?.raw || '';
+  if (source) {
+    await navigator.clipboard.writeText(source);
+    copied.value = true;
+    setTimeout(() => (copied.value = false), COPY_FEEDBACK_DURATION_MS);
+  }
+};
+
+/**
+ * Reset the inline diagram zoom to default (100%, centered)
+ */
+const resetInlineZoom = () => {
+  const wrapper = mermaidRef.value?.$el;
+  if (!wrapper) {
+    console.warn('[MermaidDiagram] Cannot reset zoom: component ref not available');
+    return;
+  }
+
+  // Find the hidden zoom controls (we hide them via CSS but they're still functional)
+  const zoomControls = wrapper.querySelector('.absolute.top-2.right-2');
+  if (!zoomControls) {
+    console.warn('[MermaidDiagram] Zoom controls not found in inline view');
+    return;
+  }
+
+  const resetBtn = findResetButton(zoomControls);
+  if (resetBtn) {
+    resetBtn.click();
+  } else {
+    console.warn('[MermaidDiagram] Reset button not found in zoom controls');
+  }
+};
+
+/**
+ * Watch for modal removal from DOM to reset inline diagram zoom
+ */
+const watchForModalClose = (modal: Element) => {
+  // Disconnect any existing observer before creating a new one
+  modalObserver?.disconnect();
+
+  modalObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const removed of mutation.removedNodes) {
+        if (removed === modal || (removed as Element).contains?.(modal)) {
+          resetInlineZoom();
+          modalObserver?.disconnect();
+          modalObserver = null;
+          return;
+        }
+      }
+    }
+  });
+
+  modalObserver.observe(document.body, { childList: true, subtree: true });
+};
+
+/**
+ * Handle fullscreen modal open - scale diagram to fit and set up close watcher
+ */
+const onOpenModal = () => {
+  nextTick(() => {
+    setTimeout(() => {
+      const modal = document.querySelector('.fixed.inset-0.z-50');
+      if (!modal) {
+        console.warn('[MermaidDiagram] Fullscreen modal element not found');
+        return;
+      }
+
+      // Watch for modal close to reset inline zoom
+      watchForModalClose(modal);
+
+      // First, reset zoom to get clean baseline
+      const resetBtn = findResetButton(modal);
+      if (resetBtn) {
+        resetBtn.click();
+      }
+
+      // Then scale SVG to fit the modal
+      setTimeout(() => {
+        const modalContent = modal.querySelector('.w-full.h-full.flex');
+        const svg = modal.querySelector('svg');
+
+        if (!modalContent) {
+          console.warn('[MermaidDiagram] Modal content container not found');
+          return;
+        }
+        if (!svg) {
+          console.warn('[MermaidDiagram] SVG element not found in modal');
+          return;
+        }
+
+        const modalRect = modalContent.getBoundingClientRect();
+        const svgRect = svg.getBoundingClientRect();
+
+        // Calculate scale to fit with padding for controls
+        const availableWidth = modalRect.width - FULLSCREEN_PADDING;
+        const availableHeight = modalRect.height - FULLSCREEN_PADDING;
+
+        const scaleX = availableWidth / svgRect.width;
+        const scaleY = availableHeight / svgRect.height;
+        const scale = Math.min(scaleX, scaleY, MAX_AUTO_ZOOM);
+
+        // Only zoom if diagram needs notable enlargement
+        if (scale > MIN_ZOOM_THRESHOLD) {
+          const buttons = modal.querySelectorAll('button');
+          // Library renders zoom-in as first button in modal controls
+          const zoomInBtn = buttons[0] as HTMLButtonElement | undefined;
+
+          if (!zoomInBtn) {
+            console.warn('[MermaidDiagram] Zoom-in button not found in modal');
+            return;
+          }
+
+          // Clear any previous zoom animation
+          clearZoomTimers();
+
+          // Apply dampened zoom for comfortable fit
+          const targetScale = 1 + (scale - 1) * ZOOM_DAMPENING_FACTOR;
+          const clicks = Math.round((targetScale - 1) * ZOOM_STEP_INCREMENT);
+
+          for (let i = 0; i < clicks; i++) {
+            zoomTimers.push(setTimeout(() => zoomInBtn.click(), i * CLICK_INTERVAL_MS));
+          }
+        }
+      }, SVG_RENDER_DELAY_MS);
+    }, MODAL_READY_DELAY_MS);
+  });
+};
+
+// =============================================================================
+// Lifecycle
+// =============================================================================
+
+onUnmounted(() => {
+  // Clean up observer to prevent memory leaks
+  if (modalObserver) {
+    modalObserver.disconnect();
+    modalObserver = null;
+  }
+  // Clear any pending zoom animation timers
+  clearZoomTimers();
+});
 </script>
 
 <style scoped>
-/* Container for hover reveal */
-:deep(.mermaid-container) {
+.mermaid-wrapper {
   position: relative;
 }
 
-/* Toolbar buttons - top-right, visible on hover */
-:deep(.mermaid-toolbar) {
+/* Transform header into floating buttons on the right */
+.mermaid-wrapper :deep(.mermaid-block-header) {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  gap: 4px;
+  top: 0;
+  right: 0;
+  left: auto;
+  width: auto;
+  background: transparent !important;
+  border: none !important;
+  padding: 8px;
+  z-index: 10;
   opacity: 0;
   transition: opacity 0.2s ease;
 }
 
-:deep(.mermaid-container:hover .mermaid-toolbar) {
-  opacity: 0.7;
+.mermaid-wrapper:hover :deep(.mermaid-block-header) {
+  opacity: 1;
 }
 
-:deep(.mermaid-toolbar:hover) {
-  opacity: 1 !important;
+/* Style the native fullscreen button to match VSCode */
+.mermaid-wrapper :deep(.mermaid-block-header button) {
+  background: var(--vscode-editor-background) !important;
+  border: 1px solid var(--vscode-panel-border) !important;
+  border-radius: 4px !important;
+  color: var(--vscode-foreground) !important;
+  opacity: 0.8;
 }
 
-:deep(.mermaid-toolbar button) {
-  background: var(--vscode-editor-background);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  padding: 4px 6px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--vscode-foreground);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.mermaid-wrapper :deep(.mermaid-block-header button:hover) {
+  opacity: 1;
+  background: var(--vscode-toolbar-hoverBackground) !important;
 }
 
-:deep(.mermaid-toolbar button:hover) {
-  background: var(--vscode-toolbar-hoverBackground);
+/* Hide the in-diagram zoom controls - header has fullscreen */
+.mermaid-wrapper :deep(.absolute.top-2.right-2) {
+  display: none;
 }
 
-/* Subtle toggle - bottom-right, visible on hover */
-:deep(.mode-toggle) {
+/* Custom copy button on right side, next to fullscreen */
+.action-buttons {
   position: absolute;
-  bottom: 8px;
-  right: 8px;
+  top: 8px;
+  right: 40px; /* Position to the left of the fullscreen button */
+  display: flex;
+  gap: 4px;
   opacity: 0;
   transition: opacity 0.2s ease;
-  background: var(--vscode-editor-background);
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 11px;
-  cursor: pointer;
+  z-index: 10;
 }
 
-:deep(.mermaid-container:hover .mode-toggle) {
-  opacity: 0.7;
+.action-buttons.visible {
+  opacity: 1;
 }
 
-:deep(.mode-toggle:hover) {
-  opacity: 1 !important;
+.action-buttons button {
+  background: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+  border-radius: 4px;
+  padding: 8px; /* Match library's p-2 */
+  cursor: pointer;
+  color: var(--vscode-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  transition: opacity 0.15s, background 0.15s;
 }
 
-/* Fullscreen overlay styles */
-:deep(.mermaid-fullscreen-overlay) {
-  background: var(--vscode-editor-background);
+.action-buttons button .codicon {
+  font-size: 12px; /* Match library's w-3 h-3 */
+  width: 12px;
+  height: 12px;
 }
 
-:deep(.mermaid-fullscreen-overlay .mermaid-toolbar) {
+.action-buttons button:hover {
   opacity: 1;
+  background: var(--vscode-toolbar-hoverBackground);
 }
 </style>

From eea972ce5f714f827b23f144ac17beb35eff0009 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Thu, 8 Jan 2026 20:56:40 +0100
Subject: [PATCH 5/6] refactor: streaming architecture with useSignal pattern
 and mermaid ESM fix

---
 .gitignore                                    |  10 +
 src/services/webViewService.ts                |   4 +-
 .../components/Messages/AssistantMessage.vue  |  84 +++-
 .../src/components/Messages/ContentBlock.vue  |  17 +-
 .../components/Messages/MarkdownContent.vue   |  16 +
 .../components/Messages/blocks/TextBlock.vue  |  15 +-
 .../Messages/blocks/ThinkingBlock.vue         |  21 +-
 src/webview/src/core/Session.ts               |  64 ++-
 src/webview/src/core/StreamingController.ts   | 476 ++++++++++++++++++
 src/webview/src/models/ContentBlockWrapper.ts | 188 ++++++-
 src/webview/src/models/Message.ts             | 214 ++++++--
 src/webview/vite.config.ts                    |   5 +
 12 files changed, 1025 insertions(+), 89 deletions(-)
 create mode 100644 src/webview/src/core/StreamingController.ts

diff --git a/.gitignore b/.gitignore
index dd3e8e8..1d90c34 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,13 @@ records/**
 
 # Documentation
 CLAUDE.md
+
+# Environment variables
+.env
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+dev-debug.log
diff --git a/src/services/webViewService.ts b/src/services/webViewService.ts
index c19dc93..c9a9bfa 100644
--- a/src/services/webViewService.ts
+++ b/src/services/webViewService.ts
@@ -264,7 +264,7 @@ export class WebViewService implements IWebViewService {
 			`img-src ${webview.cspSource} https: data:;`,
 			`style-src ${webview.cspSource} 'unsafe-inline' https://*.vscode-cdn.net;`,
 			`font-src ${webview.cspSource} data:;`,
-			`script-src ${webview.cspSource} 'nonce-${nonce}';`,
+			`script-src ${webview.cspSource} 'nonce-${nonce}' 'unsafe-eval' blob:;`,
 			`connect-src ${webview.cspSource} https:;`,
 			`worker-src ${webview.cspSource} blob:;`,
 		].join(' ');
@@ -315,7 +315,7 @@ export class WebViewService implements IWebViewService {
 			`img-src ${webview.cspSource} https: data:;`,
 			`style-src ${webview.cspSource} 'unsafe-inline' ${origin} https://*.vscode-cdn.net;`,
 			`font-src ${webview.cspSource} data: ${origin};`,
-			`script-src ${webview.cspSource} 'nonce-${nonce}' 'unsafe-eval' ${origin};`,
+			`script-src ${webview.cspSource} 'nonce-${nonce}' 'unsafe-eval' ${origin} blob:;`,
 			`connect-src ${webview.cspSource} ${origin} ${wsUrl} https:;`,
 			`worker-src ${webview.cspSource} blob:;`,
 		].join(' ');
diff --git a/src/webview/src/components/Messages/AssistantMessage.vue b/src/webview/src/components/Messages/AssistantMessage.vue
index a8c7166..e99fd41 100644
--- a/src/webview/src/components/Messages/AssistantMessage.vue
+++ b/src/webview/src/components/Messages/AssistantMessage.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="assistant-message" :class="messageClasses">
+    <!-- Interrupted badge -->
+    <div v-if="isInterrupted" class="interrupted-badge">
+      <span class="codicon codicon-warning"></span>
+      Stream interrupted
+    </div>
+
     <template v-if="typeof message.message.content === 'string'">
       <ContentBlock :block="{ type: 'text', text: message.message.content }" :context="context" />
     </template>
@@ -17,6 +23,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useSignal } from '@gn8/alien-signals-vue';
 import type { Message } from '../../models/Message';
 import type { ToolContext } from '../../types/tool';
 import ContentBlock from './ContentBlock.vue';
@@ -28,18 +35,35 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// 计算动态 class
+// Streaming state - reactively consumed via useSignal
+const isStreaming = useSignal(props.message.isStreaming);
+const isInterrupted = useSignal(props.message.isInterrupted);
+
+// Compute dynamic classes
 const messageClasses = computed(() => {
+  const classes: string[] = [];
   const content = props.message.message.content;
 
-  // content 总是数组，检查是否包含 tool_use
+  // Add streaming class for pulsing indicator
+  if (isStreaming.value) {
+    classes.push('streaming');
+  }
+
+  // Add interrupted class for error styling
+  if (isInterrupted.value) {
+    classes.push('interrupted');
+  }
+
+  // content is always array, check if contains tool_use
   if (Array.isArray(content)) {
     const hasToolUse = content.some(wrapper => wrapper.content.type === 'tool_use');
-    // 只有纯文本消息（没有 tool_use）才显示圆点
-    return hasToolUse ? [] : ['prefix'];
+    // Only show dot prefix for text-only messages (no tool_use)
+    if (!hasToolUse) {
+      classes.push('prefix');
+    }
   }
 
-  return [];
+  return classes;
 });
 </script>
 
@@ -55,9 +79,10 @@ const messageClasses = computed(() => {
   color: var(--vscode-editor-foreground);
   word-wrap: break-word;
   padding-left: 24px;
+  position: relative;
 }
 
-/* 只在纯文本消息时显示圆点 */
+/* Only show dot prefix for text-only messages */
 .assistant-message.prefix::before {
   content: "\25cf";
   position: absolute;
@@ -67,4 +92,51 @@ const messageClasses = computed(() => {
   color: var(--vscode-input-border);
   z-index: 1;
 }
+
+/* Streaming state - subtle pulsing indicator */
+.assistant-message.streaming::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 8px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--vscode-progressBar-background, #0078d4);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Interrupted state */
+.assistant-message.interrupted {
+  border-left: 2px solid var(--vscode-inputValidation-warningBorder, #c9a500);
+}
+
+/* Interrupted badge */
+.interrupted-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  margin-bottom: 8px;
+  background-color: var(--vscode-inputValidation-warningBackground, rgba(201, 165, 0, 0.1));
+  border: 1px solid var(--vscode-inputValidation-warningBorder, #c9a500);
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--vscode-inputValidation-warningForeground, #c9a500);
+}
+
+.interrupted-badge .codicon {
+  font-size: 12px;
+}
 </style>
diff --git a/src/webview/src/components/Messages/ContentBlock.vue b/src/webview/src/components/Messages/ContentBlock.vue
index c5edd55..4349714 100644
--- a/src/webview/src/components/Messages/ContentBlock.vue
+++ b/src/webview/src/components/Messages/ContentBlock.vue
@@ -1,14 +1,15 @@
 <template>
-  <!-- 根据 block.type 选择性传递 wrapper -->
-  <!-- 只有 tool_use 需要 wrapper 来访问 toolResult Signal -->
+  <!-- Pass wrapper to blocks that need reactive streaming/toolResult access -->
+  <!-- tool_use: needs wrapper for toolResult Signal -->
+  <!-- text/thinking: needs wrapper for streaming text Signal -->
   <component
-    v-if="block.type === 'tool_use'"
+    v-if="needsWrapper"
     :is="blockComponent"
     :block="block"
     :wrapper="wrapper"
     :context="context"
   />
-  <!-- 其他类型不需要 wrapper，避免渲染到 DOM -->
+  <!-- Other types don't need wrapper -->
   <component
     v-else
     :is="blockComponent"
@@ -44,7 +45,13 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// 根据 block.type 选择对应的组件
+// Blocks that need wrapper for reactive streaming or toolResult access
+const needsWrapper = computed(() => {
+  const type = props.block.type;
+  return type === 'tool_use' || type === 'text' || type === 'thinking';
+});
+
+// Select component based on block.type
 const blockComponent = computed(() => {
   switch (props.block.type) {
     case 'text':
diff --git a/src/webview/src/components/Messages/MarkdownContent.vue b/src/webview/src/components/Messages/MarkdownContent.vue
index fe91ca4..ba575b7 100644
--- a/src/webview/src/components/Messages/MarkdownContent.vue
+++ b/src/webview/src/components/Messages/MarkdownContent.vue
@@ -1,5 +1,20 @@
 <template>
+  <!-- Streaming mode: virtualization enabled for performance -->
   <MarkdownRender
+    v-if="!final"
+    :content="content"
+    :enable-mermaid="true"
+    :is-dark="isDark"
+    :max-live-nodes="320"
+    :live-node-buffer="60"
+    :code-block-stream="true"
+    :viewport-priority="true"
+    :defer-nodes-until-visible="true"
+    :typewriter="true"
+  />
+  <!-- Final mode: full rendering quality -->
+  <MarkdownRender
+    v-else
     :content="content"
     :enable-mermaid="true"
     :is-dark="isDark"
@@ -12,6 +27,7 @@ import { useThemeDetector } from '../../utils/themeDetector';
 
 defineProps<{
   content: string;
+  final?: boolean;
 }>();
 
 const { isDark } = useThemeDetector();
diff --git a/src/webview/src/components/Messages/blocks/TextBlock.vue b/src/webview/src/components/Messages/blocks/TextBlock.vue
index 5e4c72a..23768e7 100644
--- a/src/webview/src/components/Messages/blocks/TextBlock.vue
+++ b/src/webview/src/components/Messages/blocks/TextBlock.vue
@@ -1,24 +1,37 @@
 <template>
   <div class="text-block">
     <div :class="markdownClasses">
-      <MarkdownContent :content="props.block.text" />
+      <MarkdownContent :content="displayText" :final="!isStreaming" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useSignal } from '@gn8/alien-signals-vue';
 import MarkdownContent from '../MarkdownContent.vue';
 import type { TextBlock as TextBlockType } from '../../../models/ContentBlock';
+import type { ContentBlockWrapper } from '../../../models/ContentBlockWrapper';
 import type { ToolContext } from '../../../types/tool';
 
 interface Props {
   block: TextBlockType;
   context?: ToolContext;
+  wrapper?: ContentBlockWrapper;
 }
 
 const props = defineProps<Props>();
 
+// Streaming state - reactively consumed via useSignal (consistent pattern)
+const isStreaming = props.wrapper
+  ? useSignal(props.wrapper.isStreaming)
+  : computed(() => false);
+
+// Display text - reactively consumed via useSignal (follows toolResult pattern)
+const displayText = props.wrapper
+  ? useSignal(props.wrapper.text)
+  : computed(() => props.block.text ?? '');
+
 // Markdown class names
 const markdownClasses = computed(() => {
   const classes = ['markdown-content'];
diff --git a/src/webview/src/components/Messages/blocks/ThinkingBlock.vue b/src/webview/src/components/Messages/blocks/ThinkingBlock.vue
index 874c424..09a8244 100644
--- a/src/webview/src/components/Messages/blocks/ThinkingBlock.vue
+++ b/src/webview/src/components/Messages/blocks/ThinkingBlock.vue
@@ -1,27 +1,40 @@
 <template>
   <div class="thinking-block">
     <div class="thinking-header" @click="toggleExpanded">
-      <span class="thinking-label">Thinking...</span>
+      <span class="thinking-label">{{ isStreaming ? 'Thinking...' : 'Thought' }}</span>
       <span class="codicon" :class="expanded ? 'codicon-chevron-up' : 'codicon-chevron-down'" />
     </div>
     <div v-if="expanded" class="thinking-content">
-      {{ block.thinking }}
+      {{ displayText }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useSignal } from '@gn8/alien-signals-vue';
 import type { ThinkingBlock as ThinkingBlockType } from '../../../models/ContentBlock';
+import type { ContentBlockWrapper } from '../../../models/ContentBlockWrapper';
 
 interface Props {
   block: ThinkingBlockType;
+  wrapper?: ContentBlockWrapper;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const expanded = ref(false);
 
+// Streaming state - reactively consumed via useSignal (consistent pattern)
+const isStreaming = props.wrapper
+  ? useSignal(props.wrapper.isStreaming)
+  : computed(() => false);
+
+// Display text - reactively consumed via useSignal (follows toolResult pattern)
+const displayText = props.wrapper
+  ? useSignal(props.wrapper.text)
+  : computed(() => props.block.thinking ?? '');
+
 function toggleExpanded() {
   expanded.value = !expanded.value;
 }
diff --git a/src/webview/src/core/Session.ts b/src/webview/src/core/Session.ts
index af48ec7..67f190d 100644
--- a/src/webview/src/core/Session.ts
+++ b/src/webview/src/core/Session.ts
@@ -7,6 +7,7 @@ import type { PermissionMode } from '@anthropic-ai/claude-agent-sdk';
 import { processAndAttachMessage /*, mergeConsecutiveReadMessages */ } from '../utils/messageUtils';
 import { Message as MessageModel } from '../models/Message';
 import type { Message } from '../models/Message';
+import { StreamingController } from './StreamingController';
 
 export interface SelectionRange {
   filePath: string;
@@ -66,6 +67,12 @@ export class Session {
   private lastSentSelection?: SelectionRange;
   private effectCleanup?: () => void;
 
+  /**
+   * Streaming controller for handling SDK stream events
+   * CLEANUP: Disposed in dispose()
+   */
+  private readonly streamingController: StreamingController;
+
   readonly connection = signal<BaseTransport | undefined>(undefined);
 
   readonly busy = signal(false);
@@ -128,11 +135,38 @@ export class Session {
   ) {
     this.isExplicit(options.isExplicit ?? true);
 
+    // Initialize streaming controller with callbacks
+    this.streamingController = new StreamingController();
+    this.setupStreamingCallbacks();
+
     effect(() => {
       this.selection(this.context.currentSelection());
     });
   }
 
+  /**
+   * Set up streaming controller callbacks
+   */
+  private setupStreamingCallbacks(): void {
+    // Called when a new streaming message is created
+    this.streamingController.setOnMessageCreated((message, _parentToolUseId) => {
+      // Add streaming message to messages array
+      this.messages([...this.messages(), message]);
+    });
+
+    // Called when a streaming message is finalized
+    this.streamingController.setOnMessageFinalized((_message, _parentToolUseId) => {
+      // Message is already in the array from onMessageCreated
+      // Just trigger a re-render by updating the signal
+      this.messages([...this.messages()]);
+    });
+
+    // Called when usage data is updated
+    this.streamingController.setOnUsageUpdate((usage) => {
+      this.updateUsage(usage);
+    });
+  }
+
   static fromServer(
     summary: SessionSummary,
     connectionProvider: () => Promise<BaseTransport>,
@@ -371,9 +405,13 @@ export class Session {
   }
 
   dispose(): void {
+    // CLEANUP: Stop effect watchers
     if (this.effectCleanup) {
       this.effectCleanup();
     }
+
+    // CLEANUP: Dispose streaming controller
+    this.streamingController.dispose();
   }
 
   private async readMessages(stream: AsyncIterable<any>): Promise<void> {
@@ -390,27 +428,29 @@ export class Session {
   }
 
   private processIncomingMessage(event: any): void {
-    // 🔥 使用完整的消息处理流程
+    // Route stream_event to streaming controller for real-time streaming
+    if (event?.type === 'stream_event') {
+      const streamEvent = event.event;
+      const parentToolUseId = event.parent_tool_use_id ?? null;
+      this.streamingController.handleStreamEvent(streamEvent, parentToolUseId);
+      return; // Stream events are fully handled by controller
+    }
 
-    // 1. 获取当前消息数组（转为可变数组）
+    // 1. Get current messages array (as mutable copy)
     const currentMessages = [...this.messages()] as Message[];
 
-    // 2. 处理特殊消息（TodoWrite, usage 等）
+    // 2. Process special messages (TodoWrite, usage, etc.)
     this.processMessage(event);
 
-    // 3. 使用工具函数处理消息：
-    //    - 关联 tool_result 到 tool_use（响应式更新）
-    //    - 将原始事件转换为 Message 并添加到数组
+    // 3. Use utility function to process message:
+    //    - Attach tool_result to tool_use (reactive update)
+    //    - Convert raw event to Message and add to array
     processAndAttachMessage(currentMessages, event);
 
-    // 4. 合并连续 Read 消息为 ReadCoalesced（已禁用，保留作为参考）
-    // const merged = mergeConsecutiveReadMessages(currentMessages);
-
-    // 5. 更新 messages signal
-    // this.messages(merged);
+    // 4. Update messages signal
     this.messages(currentMessages);
 
-    // 6. 更新其他状态
+    // 5. Update other state
     if (event?.type === 'system') {
       this.sessionId(event.session_id);
       if (event.subtype === 'init') {
diff --git a/src/webview/src/core/StreamingController.ts b/src/webview/src/core/StreamingController.ts
new file mode 100644
index 0000000..2e15eea
--- /dev/null
+++ b/src/webview/src/core/StreamingController.ts
@@ -0,0 +1,476 @@
+/**
+ * StreamingController - Event router for streaming message lifecycle
+ *
+ * Manages the complete lifecycle of Claude SDK streaming events with:
+ * - Concurrent subagent stream support via parent_tool_use_id
+ * - Adaptive timeouts based on content block type
+ * - Cleanup on stream completion
+ *
+ * Simplified from state machine approach - SDK guarantees event ordering:
+ * - message_start always first
+ * - content_block_start -> content_block_delta* -> content_block_stop
+ * - message_stop always last
+ *
+ * CLEANUP CONTRACT:
+ * - dispose() MUST be called when controller is no longer needed
+ * - All timers are cleared on stream completion
+ */
+
+import { ContentBlockWrapper } from '../models/ContentBlockWrapper';
+import { Message } from '../models/Message';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * SDK stream event types
+ */
+export type StreamEventType =
+  | 'message_start'
+  | 'message_delta'
+  | 'message_stop'
+  | 'content_block_start'
+  | 'content_block_delta'
+  | 'content_block_stop'
+  | 'ping'
+  | 'error';
+
+/**
+ * Content block types for timeout calculation
+ */
+export type ContentBlockType = 'text' | 'thinking' | 'tool_use' | 'tool_result' | 'image';
+
+/**
+ * Delta types within content_block_delta
+ */
+export type DeltaType = 'text_delta' | 'input_json_delta' | 'thinking_delta' | 'signature_delta';
+
+/**
+ * Stream context for a single agent (main or subagent)
+ */
+export interface StreamContext {
+  parentToolUseId: string | null;
+  message: Message;
+  wrappers: Map<number, ContentBlockWrapper>;
+  currentBlockIndex: number;
+  currentBlockType: ContentBlockType | null;
+  timeoutId: ReturnType<typeof setTimeout> | null;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+/**
+ * Adaptive timeouts based on content block type
+ */
+const TIMEOUTS = {
+  TEXT_BLOCK: 30_000,       // 30 seconds
+  THINKING_BLOCK: 120_000,  // 2 minutes (extended thinking takes longer)
+  TOOL_USE_BLOCK: 60_000,   // 1 minute (tool execution)
+  DEFAULT: 30_000           // Default timeout
+} as const;
+
+// ============================================================================
+// StreamingController
+// ============================================================================
+
+export class StreamingController {
+  /**
+   * Active streams keyed by parent_tool_use_id (null = main agent)
+   */
+  private readonly activeStreams = new Map<string | null, StreamContext>();
+
+  /**
+   * Disposed flag
+   */
+  private disposed = false;
+
+  /**
+   * Callback for when a new streaming message is created
+   */
+  private onMessageCreated?: (message: Message, parentToolUseId: string | null) => void;
+
+  /**
+   * Callback for when a message is finalized
+   */
+  private onMessageFinalized?: (message: Message, parentToolUseId: string | null) => void;
+
+  /**
+   * Callback for usage updates
+   */
+  private onUsageUpdate?: (usage: any) => void;
+
+  // ==========================================================================
+  // Public API
+  // ==========================================================================
+
+  /**
+   * Set callback for message creation
+   */
+  setOnMessageCreated(callback: (message: Message, parentToolUseId: string | null) => void): void {
+    this.onMessageCreated = callback;
+  }
+
+  /**
+   * Set callback for message finalization
+   */
+  setOnMessageFinalized(callback: (message: Message, parentToolUseId: string | null) => void): void {
+    this.onMessageFinalized = callback;
+  }
+
+  /**
+   * Set callback for usage updates
+   */
+  setOnUsageUpdate(callback: (usage: any) => void): void {
+    this.onUsageUpdate = callback;
+  }
+
+  /**
+   * Check if any stream is active
+   */
+  hasActiveStreams(): boolean {
+    return this.activeStreams.size > 0;
+  }
+
+  /**
+   * Handle an incoming stream event
+   *
+   * Routes events to the correct stream context based on parentToolUseId.
+   *
+   * @param event Raw SDK stream event
+   * @param parentToolUseId Parent tool_use ID (null for main agent)
+   */
+  handleStreamEvent(event: any, parentToolUseId: string | null = null): void {
+    if (this.disposed) {
+      return;
+    }
+
+    const eventType = event.type as StreamEventType;
+
+    switch (eventType) {
+      case 'message_start':
+        this.handleMessageStart(event, parentToolUseId);
+        break;
+
+      case 'content_block_start':
+        this.handleContentBlockStart(event, parentToolUseId);
+        break;
+
+      case 'content_block_delta':
+        this.handleContentBlockDelta(event, parentToolUseId);
+        break;
+
+      case 'content_block_stop':
+        this.handleContentBlockStop(event, parentToolUseId);
+        break;
+
+      case 'message_delta':
+        this.handleMessageDelta(event, parentToolUseId);
+        break;
+
+      case 'message_stop':
+        this.handleMessageStop(event, parentToolUseId);
+        break;
+
+      case 'ping':
+        this.handlePing(parentToolUseId);
+        break;
+
+      case 'error':
+        this.handleError(event, parentToolUseId);
+        break;
+    }
+  }
+
+  /**
+   * Cancel an active stream
+   */
+  cancel(parentToolUseId: string | null = null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    this.disposeStreamContext(context);
+    this.activeStreams.delete(parentToolUseId);
+  }
+
+  /**
+   * CLEANUP: Dispose all resources
+   *
+   * MUST be called when the controller is no longer needed.
+   */
+  dispose(): void {
+    if (this.disposed) {
+      return;
+    }
+    this.disposed = true;
+
+    // Dispose all stream contexts
+    for (const context of this.activeStreams.values()) {
+      this.disposeStreamContext(context);
+    }
+    this.activeStreams.clear();
+
+    // Clear callbacks
+    this.onMessageCreated = undefined;
+    this.onMessageFinalized = undefined;
+    this.onUsageUpdate = undefined;
+  }
+
+  // ==========================================================================
+  // Event Handlers
+  // ==========================================================================
+
+  private handleMessageStart(_event: any, parentToolUseId: string | null): void {
+    // Create new stream context
+    const context = this.createStreamContext(parentToolUseId);
+
+    // Create streaming message
+    const message = Message.createStreaming(parentToolUseId);
+    context.message = message;
+
+    // Start timeout
+    this.setTimeoutForContext(context);
+
+    // Notify callback
+    this.onMessageCreated?.(message, parentToolUseId);
+  }
+
+  private handleContentBlockStart(event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    const index = event.index ?? context.wrappers.size;
+    const contentBlock = event.content_block;
+
+    // Create wrapper (owns text signal directly)
+    const wrapper = new ContentBlockWrapper(contentBlock);
+    wrapper.startStreaming();
+
+    context.wrappers.set(index, wrapper);
+    context.currentBlockIndex = index;
+    context.currentBlockType = this.getBlockType(contentBlock);
+
+    // Add wrapper to message content
+    this.addBlockToMessage(context.message, wrapper);
+
+    // Reset timeout with block-type-appropriate duration
+    this.setTimeoutForContext(context);
+  }
+
+  private handleContentBlockDelta(event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    const index = event.index ?? context.currentBlockIndex;
+    const wrapper = context.wrappers.get(index);
+    if (!wrapper) {
+      return;
+    }
+
+    const delta = event.delta;
+    if (!delta) {
+      return;
+    }
+
+    // Extract text from delta and append to wrapper
+    const text = delta.text ?? delta.thinking ?? delta.partial_json ?? '';
+    if (text) {
+      wrapper.appendDelta(text);
+    }
+
+    // Reset timeout
+    this.setTimeoutForContext(context);
+  }
+
+  private handleContentBlockStop(event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    const index = event.index ?? context.currentBlockIndex;
+    const wrapper = context.wrappers.get(index);
+
+    if (wrapper) {
+      wrapper.finalizeStreaming();
+    }
+
+    // Reset timeout
+    this.setTimeoutForContext(context);
+  }
+
+  private handleMessageDelta(event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    // Update usage if present
+    if (event.usage && this.onUsageUpdate) {
+      this.onUsageUpdate(event.usage);
+    }
+
+    // Reset timeout
+    this.setTimeoutForContext(context);
+  }
+
+  private handleMessageStop(_event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    // Finalize all remaining blocks
+    for (const wrapper of context.wrappers.values()) {
+      if (wrapper.getIsStreaming()) {
+        wrapper.finalizeStreaming();
+      }
+    }
+
+    // Mark message as no longer streaming
+    context.message.setStreaming(false);
+
+    // CLEANUP: Clear timeout
+    this.clearTimeout(context);
+
+    // Notify callback
+    this.onMessageFinalized?.(context.message, parentToolUseId);
+
+    // CLEANUP: Remove from active streams
+    this.activeStreams.delete(parentToolUseId);
+  }
+
+  private handlePing(parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    // Reset timeout
+    this.setTimeoutForContext(context);
+  }
+
+  private handleError(event: any, parentToolUseId: string | null): void {
+    const context = this.activeStreams.get(parentToolUseId);
+    if (!context) {
+      return;
+    }
+
+    // CLEANUP: Clear timeout
+    this.clearTimeout(context);
+
+    // Mark message as interrupted but preserve content
+    const errorMessage = event.error?.message ?? 'Stream error';
+    context.message.setError(errorMessage);
+
+    // Finalize remaining wrappers
+    for (const wrapper of context.wrappers.values()) {
+      if (wrapper.getIsStreaming()) {
+        wrapper.finalizeStreaming();
+      }
+    }
+
+    // CLEANUP: Remove from active streams
+    this.activeStreams.delete(parentToolUseId);
+  }
+
+  // ==========================================================================
+  // Context Management
+  // ==========================================================================
+
+  private createStreamContext(parentToolUseId: string | null): StreamContext {
+    const context: StreamContext = {
+      parentToolUseId,
+      message: null as any, // Will be set in handleMessageStart
+      wrappers: new Map(),
+      currentBlockIndex: -1,
+      currentBlockType: null,
+      timeoutId: null
+    };
+
+    this.activeStreams.set(parentToolUseId, context);
+    return context;
+  }
+
+  /**
+   * CLEANUP: Dispose a single stream context
+   */
+  private disposeStreamContext(context: StreamContext): void {
+    this.clearTimeout(context);
+    context.wrappers.clear();
+  }
+
+  // ==========================================================================
+  // Timeout Management
+  // ==========================================================================
+
+  private setTimeoutForContext(context: StreamContext): void {
+    // Always clear existing timeout first
+    this.clearTimeout(context);
+
+    const timeout = this.getCurrentTimeout(context);
+    context.timeoutId = setTimeout(() => {
+      context.timeoutId = null;
+      this.handleTimeout(context);
+    }, timeout);
+  }
+
+  private clearTimeout(context: StreamContext): void {
+    if (context.timeoutId !== null) {
+      clearTimeout(context.timeoutId);
+      context.timeoutId = null;
+    }
+  }
+
+  private handleTimeout(context: StreamContext): void {
+    // Mark message as interrupted due to timeout
+    context.message.markInterrupted();
+
+    // Finalize all wrappers
+    for (const wrapper of context.wrappers.values()) {
+      if (wrapper.getIsStreaming()) {
+        wrapper.finalizeStreaming();
+      }
+    }
+
+    // Mark message as no longer streaming
+    context.message.setStreaming(false);
+
+    // Remove from active streams
+    this.activeStreams.delete(context.parentToolUseId);
+  }
+
+  private getCurrentTimeout(context: StreamContext): number {
+    switch (context.currentBlockType) {
+      case 'thinking':
+        return TIMEOUTS.THINKING_BLOCK;
+      case 'tool_use':
+        return TIMEOUTS.TOOL_USE_BLOCK;
+      default:
+        return TIMEOUTS.TEXT_BLOCK;
+    }
+  }
+
+  // ==========================================================================
+  // Message/Block Helpers
+  // ==========================================================================
+
+  private addBlockToMessage(message: Message, wrapper: ContentBlockWrapper): void {
+    const content = message.message.content;
+    if (Array.isArray(content)) {
+      (content as ContentBlockWrapper[]).push(wrapper);
+    }
+  }
+
+  private getBlockType(contentBlock: any): ContentBlockType {
+    return contentBlock?.type ?? 'text';
+  }
+}
diff --git a/src/webview/src/models/ContentBlockWrapper.ts b/src/webview/src/models/ContentBlockWrapper.ts
index 67aa397..d085baf 100644
--- a/src/webview/src/models/ContentBlockWrapper.ts
+++ b/src/webview/src/models/ContentBlockWrapper.ts
@@ -1,17 +1,23 @@
 /**
- * ContentBlockWrapper - Content Block 包装器
+ * ContentBlockWrapper - Content Block Wrapper
  *
- * 使用 alien-signals 管理 tool_result 的响应式关联
+ * Uses alien-signals for reactive tool_result binding and streaming text.
  *
- * 核心功能：
- * 1. 包装每个 content block
- * 2. 使用 Signal 管理 toolResult（响应式）
- * 3. 提供 setToolResult 方法用于异步关联
+ * Core features:
+ * 1. Wraps each content block
+ * 2. Uses Signal for toolResult (reactive)
+ * 3. Uses Signal for text content (reactive) - enables useSignal() in components
+ * 4. Provides setToolResult method for async binding
  *
- * 为什么需要这个包装器？
- * - tool_use 和 tool_result 不在同一条消息中
- * - 需要异步关联（收到 tool_result 时，反向查找 tool_use）
- * - 使用 signal 可以响应式更新 UI
+ * Pattern consistency:
+ * - text signal follows same pattern as toolResult signal
+ * - Components consume via useSignal(wrapper.text) like useSignal(wrapper.toolResult)
+ *
+ * Why this wrapper?
+ * - tool_use and tool_result are in different messages
+ * - Need async binding (when tool_result arrives, find tool_use backwards)
+ * - Signals enable reactive UI updates
+ * - Streaming text needs reactive accumulation
  */
 
 import { signal } from 'alien-signals';
@@ -19,57 +25,195 @@ import type { ContentBlockType, ToolResultBlock } from './ContentBlock';
 
 export class ContentBlockWrapper {
   /**
-   * 原始 content block
+   * Original content block
    */
   public readonly content: ContentBlockType;
 
   /**
-   * Tool Result 的 Signal（响应式）
-   * 用于实时对话中的 tool_result
+   * Tool Result Signal (reactive)
+   * Used for real-time tool_result binding
    */
   private readonly toolResultSignal = signal<ToolResultBlock | undefined>(undefined);
 
   /**
-   * Tool Use Result（普通属性）
-   * 用于会话加载时的 toolUseResult（不需要响应式）
+   * Text content Signal (reactive)
+   * Used for real-time streaming text - follows same pattern as toolResultSignal
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const text = useSignal(wrapper.text);
+   * ```
+   */
+  private readonly textSignal = signal<string>('');
+
+  /**
+   * Streaming state signal (reactive)
+   * True when block is actively streaming
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const isStreaming = useSignal(wrapper.isStreaming);
+   * ```
+   */
+  private readonly streamingSignal = signal<boolean>(false);
+
+  /**
+   * Tool Use Result (plain property)
+   * Used for session-loaded toolUseResult (non-reactive)
    */
   public toolUseResult?: any;
 
   constructor(content: ContentBlockType) {
     this.content = content;
+    // Initialize text signal from static content
+    this.textSignal(this.getInitialText());
+  }
+
+  // ==========================================================================
+  // Text Signal (follows toolResult pattern)
+  // ==========================================================================
+
+  /**
+   * Get text signal for reactive consumption
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const text = useSignal(wrapper.text);
+   * ```
+   *
+   * This follows the same pattern as toolResult for consistency.
+   */
+  get text() {
+    return this.textSignal;
+  }
+
+  /**
+   * Get streaming state signal for reactive consumption
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const isStreaming = useSignal(wrapper.isStreaming);
+   * ```
+   */
+  get isStreaming() {
+    return this.streamingSignal;
+  }
+
+  /**
+   * Append streaming delta to text
+   *
+   * Called by StreamingController on content_block_delta events.
+   *
+   * @param delta Text delta to append
+   */
+  appendDelta(delta: string): void {
+    this.textSignal(this.textSignal() + delta);
+  }
+
+  /**
+   * Start streaming mode
+   *
+   * Called by StreamingController on content_block_start events.
+   * Clears text signal for fresh accumulation.
+   */
+  startStreaming(): void {
+    this.textSignal('');
+    this.streamingSignal(true);
+  }
+
+  /**
+   * Finalize streaming
+   *
+   * Called by StreamingController on content_block_stop events.
+   * Updates static content and clears streaming state.
+   *
+   * @param finalContent Optional final text (uses current signal value if not provided)
+   */
+  finalizeStreaming(finalContent?: string): void {
+    const text = finalContent ?? this.textSignal();
+
+    // Update static content block with final text
+    const content = this.content as any;
+    if (content.type === 'text') {
+      content.text = text;
+    } else if (content.type === 'thinking') {
+      content.thinking = text;
+    }
+
+    // Update signal with final content (in case finalContent was provided)
+    if (finalContent !== undefined) {
+      this.textSignal(finalContent);
+    }
+
+    this.streamingSignal(false);
+  }
+
+  /**
+   * Check if currently streaming (non-reactive)
+   */
+  getIsStreaming(): boolean {
+    return this.streamingSignal();
+  }
+
+  /**
+   * Get current text value (non-reactive)
+   */
+  getTextValue(): string {
+    return this.textSignal();
   }
 
+  // ==========================================================================
+  // Tool Result Support
+  // ==========================================================================
+
   /**
-   * 获取 toolResult signal
+   * Get toolResult signal for reactive consumption
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const toolResult = useSignal(wrapper.toolResult);
+   * ```
    *
-   * @returns Alien signal 函数
+   * @returns Alien signal function
    */
   get toolResult() {
     return this.toolResultSignal;
   }
 
   /**
-   * 设置 tool result
+   * Set tool result
    *
-   * 🔥 使用 alien-signals 函数调用 API
+   * Uses alien-signals function call API
    *
-   * @param result Tool 执行结果
+   * @param result Tool execution result
    */
   setToolResult(result: ToolResultBlock): void {
     this.toolResultSignal(result);
   }
 
   /**
-   * 检查是否有 tool_result
+   * Check if has tool_result
    */
   hasToolResult(): boolean {
     return this.toolResultSignal() !== undefined;
   }
 
   /**
-   * 获取 tool_result 的值（非响应式）
+   * Get tool_result value (non-reactive)
    */
   getToolResultValue(): ToolResultBlock | undefined {
     return this.toolResultSignal();
   }
+
+  // ==========================================================================
+  // Private Helpers
+  // ==========================================================================
+
+  /**
+   * Get initial text from static content
+   */
+  private getInitialText(): string {
+    const c = this.content as any;
+    return c.text ?? c.thinking ?? '';
+  }
 }
diff --git a/src/webview/src/models/Message.ts b/src/webview/src/models/Message.ts
index d48e1ab..88d515d 100644
--- a/src/webview/src/models/Message.ts
+++ b/src/webview/src/models/Message.ts
@@ -1,23 +1,28 @@
 /**
- * Message - 消息类
+ * Message - Message class
  *
- * 核心功能：
- * 1. 包装消息数据
- * 2. 提供 isEmpty getter（动态计算）
- * 3. 支持 ContentBlockWrapper 响应式 tool_result 关联
+ * Core features:
+ * 1. Wraps message data
+ * 2. Provides isEmpty getter (dynamically computed)
+ * 3. Supports ContentBlockWrapper reactive tool_result binding
+ * 4. Supports streaming mode with isStreaming signal
+ *
+ * CLEANUP CONTRACT:
+ * - disposeStreaming() MUST be called when streaming completes
  */
 
+import { signal } from 'alien-signals';
 import type { ContentBlockType } from '../models/ContentBlock';
 import { parseMessageContent } from '../models/contentParsers';
 import { ContentBlockWrapper } from '../models/ContentBlockWrapper';
 
 /**
- * 消息类型
+ * Message role types
  */
 export type MessageRole = 'user' | 'assistant' | 'system' | 'result' | 'tip' | 'slash_command_result';
 
 /**
- * 消息内容数据
+ * Message content data
  */
 export interface MessageData {
   role: MessageRole;
@@ -25,22 +30,42 @@ export interface MessageData {
 }
 
 /**
- * 消息类
+ * Message class
  *
- * 对应原版逻辑：
- * - user/assistant 消息：content 是 ContentBlockWrapper[]
- * - system/result 消息：content 是 string
+ * Corresponding logic:
+ * - user/assistant messages: content is ContentBlockWrapper[]
+ * - system/result messages: content is string
  */
 export class Message {
   type: MessageRole;
   message: MessageData;
   timestamp: number;
 
-  // 额外字段（用于 system 和 result 消息）
+  // Extra fields (for system and result messages)
   subtype?: string;
   session_id?: string;
   is_error?: boolean;
 
+  // Streaming support
+  parentToolUseId?: string | null;
+
+  /**
+   * Streaming state signal (reactive)
+   * True when message is actively streaming
+   */
+  private readonly streamingSignal = signal<boolean>(false);
+
+  /**
+   * Interrupted state signal (reactive)
+   * True when stream was interrupted
+   */
+  private readonly interruptedSignal = signal<boolean>(false);
+
+  /**
+   * Error message (if stream errored)
+   */
+  private errorMessage?: string;
+
   constructor(
     type: MessageRole,
     message: MessageData,
@@ -49,6 +74,7 @@ export class Message {
       subtype?: string;
       session_id?: string;
       is_error?: boolean;
+      parentToolUseId?: string | null;
     }
   ) {
     this.type = type;
@@ -59,39 +85,153 @@ export class Message {
       this.subtype = extra.subtype;
       this.session_id = extra.session_id;
       this.is_error = extra.is_error;
+      this.parentToolUseId = extra.parentToolUseId;
     }
   }
 
+  // ==========================================================================
+  // Streaming Support
+  // ==========================================================================
+
+  /**
+   * Get streaming state signal for reactive consumption
+   *
+   * Usage with Vue:
+   * ```typescript
+   * const isStreaming = useSignal(message.isStreaming);
+   * ```
+   */
+  get isStreaming() {
+    return this.streamingSignal;
+  }
+
+  /**
+   * Get interrupted state signal for reactive consumption
+   */
+  get isInterrupted() {
+    return this.interruptedSignal;
+  }
+
+  /**
+   * Get error message if stream errored
+   */
+  getError(): string | undefined {
+    return this.errorMessage;
+  }
+
+  /**
+   * Set streaming state
+   */
+  setStreaming(streaming: boolean): void {
+    this.streamingSignal(streaming);
+  }
+
+  /**
+   * Mark message as interrupted
+   */
+  markInterrupted(): void {
+    this.interruptedSignal(true);
+    this.streamingSignal(false);
+  }
+
+  /**
+   * Set error message
+   */
+  setError(error: string): void {
+    this.errorMessage = error;
+    this.markInterrupted();
+  }
+
+  /**
+   * Check if streaming (non-reactive)
+   */
+  getIsStreaming(): boolean {
+    return this.streamingSignal();
+  }
+
+  /**
+   * Check if interrupted (non-reactive)
+   */
+  getIsInterrupted(): boolean {
+    return this.interruptedSignal();
+  }
+
+  /**
+   * CLEANUP: Finalize streaming
+   *
+   * Finalizes all streaming content blocks and sets isStreaming to false.
+   */
+  disposeStreaming(): void {
+    const content = this.message.content;
+
+    if (Array.isArray(content)) {
+      for (const wrapper of content) {
+        if (wrapper.getIsStreaming()) {
+          wrapper.finalizeStreaming();
+        }
+      }
+    }
+
+    this.streamingSignal(false);
+  }
+
+  /**
+   * Static factory - Create a streaming message shell
+   *
+   * Used by StreamingController when message_start event arrives.
+   *
+   * @param parentToolUseId Parent tool_use ID (null for main agent)
+   * @returns Streaming Message instance
+   */
+  static createStreaming(parentToolUseId: string | null = null): Message {
+    const message = new Message(
+      'assistant',
+      {
+        role: 'assistant',
+        content: []
+      },
+      Date.now(),
+      { parentToolUseId }
+    );
+
+    message.setStreaming(true);
+    return message;
+  }
+
+  // ==========================================================================
+  // Core Functionality
+  // ==========================================================================
+
   /**
-   * isEmpty getter - 判断消息是否为"空"
+   * isEmpty getter - Check if message is "empty"
    *
-   * 判断逻辑：
-   * 1. system 消息永远不是 empty
-   * 2. user/assistant 消息：
-   *    - 内容为空数组 → empty
-   *    - 所有内容块都是 tool_result → empty
+   * Logic:
+   * 1. system messages are never empty
+   * 2. user/assistant messages:
+   *    - empty array → empty
+   *    - all content blocks are tool_result → empty
    */
   get isEmpty(): boolean {
-    // system 消息永远不是 empty
+    // system messages are never empty
     if (this.type === 'system') {
       return false;
     }
 
     const content = this.message.content;
 
-    // 字符串内容不会是 empty
+    // String content is not empty if has length
     if (typeof content === 'string') {
       return content.length === 0;
     }
 
-    // ContentBlockWrapper 数组
+    // ContentBlockWrapper array
     if (Array.isArray(content)) {
-      // 空数组 → empty
+      // Empty array → empty
       if (content.length === 0) {
         return true;
       }
 
-      // 所有内容块都是 tool_result → empty
+      // All content blocks are tool_result → empty
       return content.every((wrapper) => wrapper.content.type === 'tool_result');
     }
 
@@ -99,10 +239,10 @@ export class Message {
   }
 
   /**
-   * 静态工厂方法 - 从原始消息创建 Message 实例
+   * Static factory - Create Message from raw SDK message
    *
-   * @param raw 原始消息对象
-   * @returns Message 实例或 null
+   * @param raw Raw message object
+   * @returns Message instance or null
    */
   static fromRaw(raw: any): Message | null {
     if (raw.type === 'user' || raw.type === 'assistant') {
@@ -112,16 +252,16 @@ export class Message {
           ? [{ type: 'text', text: String(raw.message.content) }]
           : [];
 
-      // 解析原始 content
+      // Parse raw content
       const contentBlocks = parseMessageContent(rawContent);
 
-      // 包装为 ContentBlockWrapper
+      // Wrap as ContentBlockWrapper
       const wrappedContent = contentBlocks.map((block) => new ContentBlockWrapper(block));
 
-      // 基于 contentParsers 的解析结果判断消息类型
+      // Determine message type based on contentParsers result
       let messageType: MessageRole = raw.type;
 
-      // 检查是否为特殊消息类型
+      // Check for special message types
       if (raw.type === 'user') {
         const specialType = getSpecialMessageType(contentBlocks);
         if (specialType) {
@@ -139,23 +279,23 @@ export class Message {
       );
     }
 
-    // 不渲染 system 消息（仅用于状态更新）
+    // Don't render system messages (used for state updates only)
     if (raw.type === 'system') {
       return null;
     }
 
-    // 不渲染 result 消息（仅用于结束标志/用量统计等状态更新）
+    // Don't render result messages (used for end flag/usage stats)
     if (raw.type === 'result') {
       return null;
     }
 
-    // stream_event 等不创建消息
+    // stream_event etc don't create messages
     return null;
   }
 }
 
 /**
- * 类型守卫
+ * Type guards
  */
 export function isUserMessage(msg: Message): boolean {
   return msg.type === 'user';
@@ -174,10 +314,10 @@ export function isResultMessage(msg: Message): boolean {
 }
 
 /**
- * 获取特殊消息类型
+ * Get special message type
  *
- * 基于 contentParsers.ts 的解析结果判断
- * 返回特定的消息类型，用于分化渲染
+ * Based on contentParsers.ts parsing result
+ * Returns specific message type for differentiated rendering
  */
 function getSpecialMessageType(contentBlocks: ContentBlockType[]): MessageRole | null {
   if (contentBlocks.length === 1) {
diff --git a/src/webview/vite.config.ts b/src/webview/vite.config.ts
index f67fc86..1222ef5 100644
--- a/src/webview/vite.config.ts
+++ b/src/webview/vite.config.ts
@@ -82,9 +82,14 @@ export default defineConfig(({ mode }) => ({
       // 使用本地的 codicon 资源替换依赖包中的资源
       '@vscode/codicons/dist/codicon.css': path.resolve(__dirname, '../../assets/codicons/codicon.css'),
       '@vscode/codicons/dist/codicon.ttf': path.resolve(__dirname, '../../assets/codicons/codicon.ttf'),
+      // Force mermaid to use pre-built ESM bundle (fixes dynamic import issues in webview)
+      'mermaid': path.resolve(__dirname, '../../node_modules/mermaid/dist/mermaid.esm.min.mjs'),
     },
   },
   base: '',
+  optimizeDeps: {
+    include: ['mermaid'],
+  },
   build: {
     outDir: path.resolve(__dirname, '../../dist/media'),
     emptyOutDir: true,

From bceb9e0c3cb0379c2000f88f17ab2bd1f2e6fe45 Mon Sep 17 00:00:00 2001
From: Jozi Gila <jozi.gila@bioloupe.com>
Date: Thu, 8 Jan 2026 21:01:27 +0100
Subject: [PATCH 6/6] fix: address Sourcery review - cancel state, delta
 handling, comments

---
 src/services/webViewService.ts              |  6 +++-
 src/webview/src/core/StreamingController.ts | 32 +++++++++++++++++++--
 src/webview/src/models/Message.ts           |  2 +-
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/services/webViewService.ts b/src/services/webViewService.ts
index c9a9bfa..4c34eba 100644
--- a/src/services/webViewService.ts
+++ b/src/services/webViewService.ts
@@ -259,6 +259,9 @@ export class WebViewService implements IWebViewService {
 			vscode.Uri.joinPath(extensionUri, 'dist', 'media', 'style.css')
 		);
 
+		// CSP: 'unsafe-eval' and 'blob:' required for mermaid diagram rendering
+		// Mermaid v10+ uses dynamic ESM imports and eval for diagram parsing
+		// See: https://github.com/mermaid-js/mermaid/issues/5453
 		const csp = [
 			`default-src 'none';`,
 			`img-src ${webview.cspSource} https: data:;`,
@@ -309,7 +312,8 @@ export class WebViewService implements IWebViewService {
 			wsUrl = 'ws://localhost:5173';
 		}
 
-		// Vite 开发场景的 CSP：允许连接 devServer 与 HMR 的 ws
+		// Dev CSP: allows devServer + HMR websocket
+		// 'unsafe-eval' and 'blob:' required for mermaid (see production CSP comment)
 		const csp = [
 			`default-src 'none';`,
 			`img-src ${webview.cspSource} https: data:;`,
diff --git a/src/webview/src/core/StreamingController.ts b/src/webview/src/core/StreamingController.ts
index 2e15eea..b11db87 100644
--- a/src/webview/src/core/StreamingController.ts
+++ b/src/webview/src/core/StreamingController.ts
@@ -186,6 +186,9 @@ export class StreamingController {
 
   /**
    * Cancel an active stream
+   *
+   * Updates message state to match handleTimeout/handleError behavior
+   * so the UI correctly reflects the cancelled state.
    */
   cancel(parentToolUseId: string | null = null): void {
     const context = this.activeStreams.get(parentToolUseId);
@@ -193,6 +196,19 @@ export class StreamingController {
       return;
     }
 
+    // Finalize any active wrappers
+    for (const wrapper of context.wrappers.values()) {
+      if (wrapper.getIsStreaming()) {
+        wrapper.finalizeStreaming();
+      }
+    }
+
+    // Update message state (mirror handleTimeout/handleError)
+    if (context.message) {
+      context.message.markInterrupted();
+      context.message.setStreaming(false);
+    }
+
     this.disposeStreamContext(context);
     this.activeStreams.delete(parentToolUseId);
   }
@@ -280,8 +296,20 @@ export class StreamingController {
       return;
     }
 
-    // Extract text from delta and append to wrapper
-    const text = delta.text ?? delta.thinking ?? delta.partial_json ?? '';
+    // Extract text from delta based on delta type
+    // SDK delta types: text_delta, thinking_delta, input_json_delta
+    let text = '';
+    if (delta.type === 'text_delta' && delta.text) {
+      text = delta.text;
+    } else if (delta.type === 'thinking_delta' && delta.thinking) {
+      text = delta.thinking;
+    } else if (delta.type === 'input_json_delta' && delta.partial_json !== undefined) {
+      // partial_json may be string or object - serialize if needed
+      text = typeof delta.partial_json === 'string'
+        ? delta.partial_json
+        : JSON.stringify(delta.partial_json);
+    }
+
     if (text) {
       wrapper.appendDelta(text);
     }
diff --git a/src/webview/src/models/Message.ts b/src/webview/src/models/Message.ts
index 88d515d..a79c2c7 100644
--- a/src/webview/src/models/Message.ts
+++ b/src/webview/src/models/Message.ts
@@ -219,7 +219,7 @@ export class Message {
 
     const content = this.message.content;
 
-    // String content is not empty if has length
+    // String content is empty if zero length
     if (typeof content === 'string') {
       return content.length === 0;
     }