diff --git a/apps/web/e2e/chat-composer-performance.spec.ts b/apps/web/e2e/chat-composer-performance.spec.ts
new file mode 100644
index 000000000..a300a1aa7
--- /dev/null
+++ b/apps/web/e2e/chat-composer-performance.spec.ts
@@ -0,0 +1,99 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { expect, test, type Page } from '@playwright/test';
+
+type InputMode = 'direct' | 'composition';
+
+async function measureInputToPaint(page: Page, mode: InputMode) {
+  return page
+    .locator('textarea[name="agent-message"]')
+    .evaluate(async (textarea, inputMode) => {
+      const input = textarea as HTMLTextAreaElement;
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+      if (!valueSetter) throw new Error('textarea value setter unavailable');
+
+      const samples: number[] = [];
+      for (let index = 0; index < 12; index++) {
+        const nextCharacter = inputMode === 'composition' ? '你' : 'a';
+        const duration = await new Promise<number>((resolve) => {
+          const start = performance.now();
+          if (inputMode === 'composition') {
+            input.dispatchEvent(
+              new CompositionEvent('compositionstart', { bubbles: true }),
+            );
+          }
+          valueSetter.call(input, input.value + nextCharacter);
+          input.dispatchEvent(
+            new InputEvent('input', {
+              bubbles: true,
+              data: nextCharacter,
+              inputType:
+                inputMode === 'composition'
+                  ? 'insertCompositionText'
+                  : 'insertText',
+              isComposing: inputMode === 'composition',
+            }),
+          );
+          if (inputMode === 'composition') {
+            input.dispatchEvent(
+              new CompositionEvent('compositionend', {
+                bubbles: true,
+                data: nextCharacter,
+              }),
+            );
+          }
+          requestAnimationFrame(() => resolve(performance.now() - start));
+        });
+        samples.push(duration);
+        await new Promise<void>((resolve) =>
+          requestAnimationFrame(() => resolve()),
+        );
+      }
+
+      samples.sort((left, right) => left - right);
+      return {
+        median: samples[Math.floor(samples.length / 2)] ?? 0,
+        p95: samples[Math.ceil(samples.length * 0.95) - 1] ?? 0,
+      };
+    }, mode);
+}
+
+async function openFixture(page: Page, messageCount: number) {
+  await page.goto(`/playground/chat-performance?messages=${messageCount}`);
+  await expect(
+    page.locator(`[data-chat-performance-fixture="${messageCount}"]`),
+  ).toBeVisible();
+  await expect(page.locator('[data-chat-user-message]')).toHaveCount(
+    Math.ceil(messageCount / 2),
+  );
+  await expect(page.locator('textarea[name="agent-message"]')).toBeEditable();
+  await page.waitForTimeout(500);
+}
+
+test('input-to-paint remains stable with 200 historical messages', async ({
+  page,
+}) => {
+  await openFixture(page, 0);
+  const freshDirect = await measureInputToPaint(page, 'direct');
+  await openFixture(page, 0);
+  const freshComposition = await measureInputToPaint(page, 'composition');
+
+  await openFixture(page, 200);
+  const longDirect = await measureInputToPaint(page, 'direct');
+  await openFixture(page, 200);
+  const longComposition = await measureInputToPaint(page, 'composition');
+
+  console.log({
+    freshDirect,
+    longDirect,
+    freshComposition,
+    longComposition,
+  });
+
+  expect(longDirect.p95 - freshDirect.p95).toBeLessThanOrEqual(8);
+  expect(longComposition.p95 - freshComposition.p95).toBeLessThanOrEqual(8);
+});
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 0b74b4b9f..32ed0e691 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -58,6 +58,14 @@ const playgroundRoutes = import.meta.env.DEV
             .default,
         }),
       },
+      {
+        path: '/playground/chat-performance',
+        lazy: async () => ({
+          Component: (
+            await import('./pages/playground/ChatPerformancePlaygroundPage')
+          ).default,
+        }),
+      },
       {
         path: '/playground/agent-nodes',
         lazy: async () => ({
diff --git a/apps/web/src/components/Messages/AIMessage/MilkdownMessageCard.tsx b/apps/web/src/components/Messages/AIMessage/MilkdownMessageCard.tsx
index 5747c1001..52371f9c0 100644
--- a/apps/web/src/components/Messages/AIMessage/MilkdownMessageCard.tsx
+++ b/apps/web/src/components/Messages/AIMessage/MilkdownMessageCard.tsx
@@ -5,6 +5,8 @@
  * Milkdown-backed renderer for AI chat messages.
  */
 
+import { memo } from 'react';
+
 import { parseArtifactUrl } from '@huabu/shared';
 
 import { MilkdownPreview } from '@/components/Milkdown';
@@ -13,7 +15,6 @@ import { setDragPayload } from '@/utils/io/dragDrop';
 
 import type { ImageDragPayload, NoteDragPayload } from '@/utils/io/dragDrop';
 import type { NodeOrigin } from '@huabu/shared';
-import type { FC } from 'react';
 
 interface MilkdownMessageCardProps {
   content: string;
@@ -87,10 +88,10 @@ export function buildImageDragPayload(
   };
 }
 
-export const MilkdownMessageCard: FC<MilkdownMessageCardProps> = ({
+export const MilkdownMessageCard = memo(function MilkdownMessageCard({
   content,
   threadId,
-}) => {
+}: MilkdownMessageCardProps) {
   const canvasId = useCanvasStore((s) => s.canvasId);
 
   return (
@@ -111,4 +112,4 @@ export const MilkdownMessageCard: FC<MilkdownMessageCardProps> = ({
       }}
     />
   );
-};
+});
diff --git a/apps/web/src/components/Messages/AIMessage/index.tsx b/apps/web/src/components/Messages/AIMessage/index.tsx
index 9178a425f..5b42a0fed 100644
--- a/apps/web/src/components/Messages/AIMessage/index.tsx
+++ b/apps/web/src/components/Messages/AIMessage/index.tsx
@@ -2,6 +2,7 @@
 // Licensed under the MIT license.
 
 import { Copy } from 'lucide-react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { groupByThinkingPhase, type SegmentGroup } from './groupParts';
@@ -106,12 +107,12 @@ function renderToolGroup(
   }
 }
 
-export const AIMessage = ({
+export const AIMessage = memo(function AIMessage({
   messageId,
   segments,
   isStreaming,
   hideActions,
-}: AIMessageProps) => {
+}: AIMessageProps) {
   const { t } = useTranslation();
   const addNode = useCanvasStore((state) => state.addNode);
   const { threadId } = useChatSession();
@@ -282,4 +283,4 @@ export const AIMessage = ({
       </div>
     </div>
   );
-};
+});
diff --git a/apps/web/src/components/Messages/MessageList.test.tsx b/apps/web/src/components/Messages/MessageList.test.tsx
index a7bd2209e..54a28423f 100644
--- a/apps/web/src/components/Messages/MessageList.test.tsx
+++ b/apps/web/src/components/Messages/MessageList.test.tsx
@@ -1,41 +1,183 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { act } from 'react';
+import { act, useState } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { MessageList } from './MessageList';
 import { rememberMessageListScrollPosition } from './messageListScroll';
 
-vi.mock('./UserMessage', () => ({
-  UserMessage: ({ content }: { content: string }) => <div>{content}</div>,
+import type { ChatMessage } from '../../store/chatTypes';
+
+const renderCounts = vi.hoisted(() => ({
+  assistant: new Map<string, number>(),
+  user: 0,
 }));
-vi.mock('./AIMessage', () => ({ AIMessage: () => <div /> }));
-vi.mock('./StatusMessage', () => ({ StatusMessage: () => <div /> }));
-vi.mock('../Common/Loading', () => ({ Loading: () => null }));
+
+vi.mock('./AIMessage', async () => {
+  const { memo } = await import('react');
+  return {
+    AIMessage: memo(function MockAIMessage({
+      messageId,
+    }: {
+      messageId: string;
+    }) {
+      renderCounts.assistant.set(
+        messageId,
+        (renderCounts.assistant.get(messageId) ?? 0) + 1,
+      );
+      return <div data-assistant-message={messageId} />;
+    }),
+  };
+});
+
+vi.mock('./UserMessage', async () => {
+  const { memo } = await import('react');
+  return {
+    UserMessage: memo(function MockUserMessage() {
+      renderCounts.user++;
+      return <div data-user-message />;
+    }),
+  };
+});
+
+vi.mock('./StatusMessage', () => ({
+  StatusMessage: () => <div data-status-message />,
+}));
+
+vi.mock('../Common/Button', () => ({
+  Button: ({ children }: { children: React.ReactNode }) => (
+    <button>{children}</button>
+  ),
+}));
+
+vi.mock('../Common/Loading', () => ({
+  Loading: () => <div data-loading />,
+}));
+
 vi.mock('../Common/ThinkingIndicator', () => ({
-  ThinkingIndicator: () => null,
+  ThinkingIndicator: () => <div data-thinking />,
 }));
 
 let root: Root | undefined;
-let host: HTMLDivElement | undefined;
+let container: HTMLDivElement | undefined;
 
-afterEach(async () => {
-  await act(async () => root?.unmount());
-  host?.remove();
+function mount(element: React.ReactNode): void {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+  act(() => root?.render(element));
+}
+
+beforeEach(() => {
+  renderCounts.assistant.clear();
+  renderCounts.user = 0;
+  vi.spyOn(HTMLElement.prototype, 'scrollTo').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
   root = undefined;
-  host = undefined;
+  container = undefined;
+  vi.restoreAllMocks();
+});
+
+describe('MessageList render isolation', () => {
+  it('does not rerender historical messages when a sibling draft changes', () => {
+    const messages: ChatMessage[] = Array.from(
+      { length: 100 },
+      (_, index): ChatMessage[] => [
+        {
+          id: `user-${index}`,
+          role: 'user',
+          content: `Question ${index}`,
+        },
+        {
+          id: `assistant-${index}`,
+          role: 'assistant',
+          segments: [
+            {
+              kind: 'text',
+              text: `## Answer ${index}\n\nA representative Markdown response.`,
+            },
+          ],
+        },
+      ],
+    ).flat();
+
+    function Harness() {
+      const [draft, setDraft] = useState('');
+      return (
+        <>
+          <textarea
+            aria-label="Draft"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <MessageList messages={messages} isLoading={false} />
+        </>
+      );
+    }
+
+    mount(<Harness />);
+    const textarea = container?.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+
+    act(() => {
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+      valueSetter?.call(textarea, '你');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(renderCounts.user).toBe(100);
+    expect(renderCounts.assistant.size).toBe(100);
+    expect(
+      [...renderCounts.assistant.values()].every((count) => count === 1),
+    ).toBe(true);
+  });
+
+  it('rerenders only the assistant message whose segments changed', () => {
+    const first = {
+      id: 'assistant-1',
+      role: 'assistant',
+      segments: [{ kind: 'text', text: 'Stable' }],
+    } satisfies ChatMessage;
+    const second = {
+      id: 'assistant-2',
+      role: 'assistant',
+      segments: [{ kind: 'text', text: 'Streaming' }],
+    } satisfies ChatMessage;
+
+    mount(<MessageList messages={[first, second]} isLoading />);
+    act(() => {
+      root?.render(
+        <MessageList
+          messages={[
+            first,
+            {
+              ...second,
+              segments: [{ kind: 'text', text: 'Streaming update' }],
+            },
+          ]}
+          isLoading
+        />,
+      );
+    });
+
+    expect(renderCounts.assistant.get('assistant-1')).toBe(1);
+    expect(renderCounts.assistant.get('assistant-2')).toBe(2);
+  });
 });
 
 describe('MessageList opening position', () => {
-  it('restores a saved position and offers new messages without auto-scrolling', async () => {
+  it('restores a saved position and offers new messages without auto-scrolling', () => {
     const viewKey = 'canvas-1:thread-1';
     rememberMessageListScrollPosition(viewKey, 240);
-    host = document.createElement('div');
-    document.body.appendChild(host);
-    root = createRoot(host);
-
     const scrollHeight = vi
       .spyOn(HTMLElement.prototype, 'scrollHeight', 'get')
       .mockReturnValue(1_000);
@@ -44,23 +186,21 @@ describe('MessageList opening position', () => {
       .mockReturnValue(200);
 
     try {
-      await act(async () => {
-        root?.render(
-          <MessageList
-            messages={[]}
-            isLoading={false}
-            viewKey={viewKey}
-            openPosition="last-user"
-            openPositionRequestNonce={1}
-          />,
-        );
-      });
-
-      const container = host.querySelector<HTMLElement>(
+      mount(
+        <MessageList
+          messages={[]}
+          isLoading={false}
+          viewKey={viewKey}
+          openPosition="last-user"
+          openPositionRequestNonce={1}
+        />,
+      );
+
+      const messageContainer = container?.querySelector<HTMLElement>(
         '[data-chat-thread-root]',
       );
-      expect(container?.scrollTop).toBe(240);
-      expect(host.textContent).toContain('New message');
+      expect(messageContainer?.scrollTop).toBe(240);
+      expect(container?.textContent).toContain('New message');
     } finally {
       scrollHeight.mockRestore();
       clientHeight.mockRestore();
diff --git a/apps/web/src/components/Messages/MessageList.tsx b/apps/web/src/components/Messages/MessageList.tsx
index 1e646b72a..505825370 100644
--- a/apps/web/src/components/Messages/MessageList.tsx
+++ b/apps/web/src/components/Messages/MessageList.tsx
@@ -3,6 +3,7 @@
 
 import { ArrowDown } from 'lucide-react';
 import {
+  memo,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -49,7 +50,7 @@ interface MessageListProps {
   onOpenPositionHandled?: (nonce: number) => void;
 }
 
-export const MessageList = ({
+export const MessageList = memo(function MessageList({
   messages,
   isLoading,
   isHistoryLoading,
@@ -60,7 +61,7 @@ export const MessageList = ({
   openPosition = 'bottom',
   openPositionRequestNonce,
   onOpenPositionHandled,
-}: MessageListProps) => {
+}: MessageListProps) {
   const [hasNewMessage, setHasNewMessage] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const isAtBottomRef = useRef(true);
@@ -285,4 +286,4 @@ export const MessageList = ({
       )}
     </div>
   );
-};
+});
diff --git a/apps/web/src/components/Messages/UserMessage.tsx b/apps/web/src/components/Messages/UserMessage.tsx
index 5400563e3..b88c510a0 100644
--- a/apps/web/src/components/Messages/UserMessage.tsx
+++ b/apps/web/src/components/Messages/UserMessage.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGesturePreviewStore } from '@/store/gesturePreviewStore';
@@ -30,13 +30,13 @@ interface UserMessageProps {
   invokedSkills?: string[];
 }
 
-export const UserMessage = ({
+export const UserMessage = memo(function UserMessage({
   content,
   attachments,
   selectedNodeIds,
   selectedStrokeIds,
   invokedSkills,
-}: UserMessageProps) => {
+}: UserMessageProps) {
   const { t } = useTranslation();
   const setStrokeHighlight = useGesturePreviewStore(
     (s) => s.setSketchStrokeHighlight,
@@ -102,4 +102,4 @@ export const UserMessage = ({
       )}
     </div>
   );
-};
+});
diff --git a/apps/web/src/components/Panels/ChatPanel/ChatInput.test.tsx b/apps/web/src/components/Panels/ChatPanel/ChatInput.test.tsx
index 0ffec6728..b0a54d3da 100644
--- a/apps/web/src/components/Panels/ChatPanel/ChatInput.test.tsx
+++ b/apps/web/src/components/Panels/ChatPanel/ChatInput.test.tsx
@@ -292,4 +292,117 @@ describe('ChatInput', () => {
       ),
     ).not.toBeNull();
   });
+
+  it('updates a Chinese IME composition without submitting it', () => {
+    const onSubmit = vi.fn();
+
+    function Harness() {
+      const [value, setValue] = useState('');
+      return (
+        <ChatInput
+          value={value}
+          onChange={setValue}
+          onSubmit={onSubmit}
+          onStop={vi.fn()}
+          mode="ask"
+        />
+      );
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() =>
+      root?.render(
+        <ChatSessionProvider
+          value={{
+            threadId: 'thread-test',
+            canvasId: 'canvas-test',
+            ownerCanvasId: 'canvas-test',
+            conversationView: null,
+          }}
+        >
+          <Harness />
+        </ChatSessionProvider>,
+      ),
+    );
+
+    const textarea = container.querySelector('textarea');
+    expect(textarea).not.toBeNull();
+
+    act(() => {
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+      valueSetter?.call(textarea, '你');
+      const input = new InputEvent('input', {
+        bubbles: true,
+        data: '你',
+        inputType: 'insertCompositionText',
+      });
+      Object.defineProperty(input, 'isComposing', { value: true });
+      textarea?.dispatchEvent(input);
+
+      const enter = new KeyboardEvent('keydown', {
+        key: 'Enter',
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(enter, 'isComposing', { value: true });
+      textarea?.dispatchEvent(enter);
+    });
+
+    expect(textarea?.value).toBe('你');
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('reuses computed resize metrics while the draft changes', () => {
+    const getComputedStyle = vi.spyOn(window, 'getComputedStyle');
+
+    function Harness() {
+      const [value, setValue] = useState('');
+      return (
+        <ChatInput
+          value={value}
+          onChange={setValue}
+          onSubmit={vi.fn()}
+          onStop={vi.fn()}
+          mode="ask"
+        />
+      );
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() =>
+      root?.render(
+        <ChatSessionProvider
+          value={{
+            threadId: 'thread-test',
+            canvasId: 'canvas-test',
+            ownerCanvasId: 'canvas-test',
+            conversationView: null,
+          }}
+        >
+          <Harness />
+        </ChatSessionProvider>,
+      ),
+    );
+
+    const textarea = container.querySelector('textarea');
+    act(() => {
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+      valueSetter?.call(textarea, 'a');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+      valueSetter?.call(textarea, 'ab');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(getComputedStyle).toHaveBeenCalledOnce();
+  });
 });
diff --git a/apps/web/src/components/Panels/ChatPanel/ChatInput.tsx b/apps/web/src/components/Panels/ChatPanel/ChatInput.tsx
index c9fafef7d..d6a6b7908 100644
--- a/apps/web/src/components/Panels/ChatPanel/ChatInput.tsx
+++ b/apps/web/src/components/Panels/ChatPanel/ChatInput.tsx
@@ -32,7 +32,7 @@ import { Tooltip } from '../../Common/Tooltip';
 import type { ContextUsageOverride } from './ContextUsageRing';
 import type { AgentMode, AvailableCommand } from '@huabu/shared';
 
-interface ChatInputProps {
+export interface ChatInputProps {
   value: string;
   onChange: (value: string) => void;
   onSubmit: (e: React.FormEvent, mode: AgentMode) => void;
@@ -133,6 +133,12 @@ export const ChatInput = ({
   const { t } = useTranslation();
   const isSubmitDisabled = disabled || !value.trim();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const resizeMetricsRef = useRef<{
+    minHeight: number;
+    maxHeight: number;
+    borderY: number;
+  } | null>(null);
+  const resizeMetricsModeRef = useRef<AgentMode | null>(null);
   const historyIndexRef = useRef(-1);
   const draftRef = useRef('');
 
@@ -295,43 +301,59 @@ export const ChatInput = ({
     const textarea = textareaRef.current;
     if (!textarea) return;
 
-    const computed = window.getComputedStyle(textarea);
-    const lineHeightRaw = Number.parseFloat(computed.lineHeight);
-    const lineHeight =
-      Number.isFinite(lineHeightRaw) && lineHeightRaw > 0 ? lineHeightRaw : 20;
-
-    const paddingY =
-      (Number.parseFloat(computed.paddingTop) || 0) +
-      (Number.parseFloat(computed.paddingBottom) || 0);
-    const borderY =
-      (Number.parseFloat(computed.borderTopWidth) || 0) +
-      (Number.parseFloat(computed.borderBottomWidth) || 0);
-
-    const minLines = 2;
-    const maxLines = 5;
-    // With box-sizing: border-box (Tailwind preflight), style.height must
-    // include padding + border to match the visible row count.
-    const chrome = paddingY + borderY;
-    const minHeight = lineHeight * minLines + chrome;
-    const maxHeight = lineHeight * maxLines + chrome;
+    let metrics =
+      resizeMetricsModeRef.current === mode ? resizeMetricsRef.current : null;
+    if (!metrics) {
+      const computed = window.getComputedStyle(textarea);
+      const lineHeightRaw = Number.parseFloat(computed.lineHeight);
+      const lineHeight =
+        Number.isFinite(lineHeightRaw) && lineHeightRaw > 0
+          ? lineHeightRaw
+          : 20;
+      const paddingY =
+        (Number.parseFloat(computed.paddingTop) || 0) +
+        (Number.parseFloat(computed.paddingBottom) || 0);
+      const borderY =
+        (Number.parseFloat(computed.borderTopWidth) || 0) +
+        (Number.parseFloat(computed.borderBottomWidth) || 0);
+      const chrome = paddingY + borderY;
+      metrics = {
+        minHeight: lineHeight * 2 + chrome,
+        maxHeight: lineHeight * 5 + chrome,
+        borderY,
+      };
+      resizeMetricsRef.current = metrics;
+      resizeMetricsModeRef.current = mode;
+    }
 
     if (!value) {
       // Empty content — skip scrollHeight measurement because it's unreliable
       // on first mount (layout / fonts not yet settled) and tends to produce
       // a value larger than the actual rows={2} default, making the textarea
       // appear stretched until the user types.
-      textarea.style.height = `${minHeight}px`;
-      textarea.style.overflowY = 'hidden';
+      const minHeight = `${metrics.minHeight}px`;
+      if (textarea.style.height !== minHeight) {
+        textarea.style.height = minHeight;
+      }
+      if (textarea.style.overflowY !== 'hidden') {
+        textarea.style.overflowY = 'hidden';
+      }
       return;
     }
 
     // Reset to auto so scrollHeight reflects the intrinsic content height.
     textarea.style.height = 'auto';
     // scrollHeight excludes border per spec — add it back for border-box.
-    const measured = textarea.scrollHeight + borderY;
-    const nextHeight = Math.max(minHeight, Math.min(measured, maxHeight));
+    const measured = textarea.scrollHeight + metrics.borderY;
+    const nextHeight = Math.max(
+      metrics.minHeight,
+      Math.min(measured, metrics.maxHeight),
+    );
     textarea.style.height = `${nextHeight}px`;
-    textarea.style.overflowY = measured > maxHeight ? 'auto' : 'hidden';
+    const overflowY = measured > metrics.maxHeight ? 'auto' : 'hidden';
+    if (textarea.style.overflowY !== overflowY) {
+      textarea.style.overflowY = overflowY;
+    }
   }, [mode, value]);
 
   // Handle Enter key for submission and ArrowUp/ArrowDown for prompt history
diff --git a/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.test.tsx b/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.test.tsx
new file mode 100644
index 000000000..075de91ce
--- /dev/null
+++ b/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.test.tsx
@@ -0,0 +1,106 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ChatSessionProvider } from '@/hooks/useChatSession';
+import { selectThreadDraft, useChatStore } from '@/store/chatStore';
+
+import { ThreadChatInput } from './ThreadChatInput';
+
+vi.mock('./ChatInput', () => ({
+  ChatInput: ({
+    value,
+    onChange,
+    onSubmit,
+  }: {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (event: React.FormEvent, mode: 'ask') => void;
+  }) => (
+    <form onSubmit={(event) => onSubmit(event, 'ask')}>
+      <textarea
+        aria-label="Thread draft"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+      />
+      <button type="submit">Send</button>
+    </form>
+  ),
+}));
+
+let root: Root | undefined;
+let container: HTMLDivElement | undefined;
+
+beforeEach(() => {
+  useChatStore.setState({ threadsById: {} });
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  container?.remove();
+  root = undefined;
+  container = undefined;
+  vi.restoreAllMocks();
+});
+
+describe('ThreadChatInput', () => {
+  it('updates its thread draft without rerendering its parent', () => {
+    let parentRenderCount = 0;
+    const onSubmit = vi.fn();
+
+    function Parent() {
+      parentRenderCount++;
+      return (
+        <ThreadChatInput onSubmit={onSubmit} onStop={vi.fn()} mode="ask" />
+      );
+    }
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() =>
+      root?.render(
+        <ChatSessionProvider
+          value={{
+            threadId: 'thread-test',
+            canvasId: 'canvas-test',
+            ownerCanvasId: 'canvas-test',
+            conversationView: null,
+          }}
+        >
+          <Parent />
+        </ChatSessionProvider>,
+      ),
+    );
+
+    const textarea = container.querySelector('textarea');
+    act(() => {
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        HTMLTextAreaElement.prototype,
+        'value',
+      )?.set;
+      valueSetter?.call(textarea, 'thread-local draft');
+      textarea?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(parentRenderCount).toBe(1);
+    expect(selectThreadDraft(useChatStore.getState(), 'thread-test')).toBe(
+      'thread-local draft',
+    );
+    expect(textarea?.value).toBe('thread-local draft');
+
+    act(() => {
+      container
+        ?.querySelector('form')
+        ?.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
+    });
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.anything(),
+      'ask',
+      'thread-local draft',
+    );
+  });
+});
diff --git a/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.tsx b/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.tsx
new file mode 100644
index 000000000..237a9fa96
--- /dev/null
+++ b/apps/web/src/components/Panels/ChatPanel/ThreadChatInput.tsx
@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { useCallback } from 'react';
+
+import { useChatSession } from '@/hooks/useChatSession';
+import { selectThreadDraft, useChatStore } from '@/store/chatStore';
+
+import { ChatInput, type ChatInputProps } from './ChatInput';
+
+import type { AgentMode } from '@huabu/shared';
+
+interface ThreadChatInputProps extends Omit<
+  ChatInputProps,
+  'value' | 'onChange' | 'onSubmit'
+> {
+  onSubmit: (event: React.FormEvent, mode: AgentMode, draft: string) => void;
+}
+
+export function ThreadChatInput({ onSubmit, ...props }: ThreadChatInputProps) {
+  const { threadId } = useChatSession();
+  const draft = useChatStore((state) => selectThreadDraft(state, threadId));
+  const setDraft = useChatStore((state) => state.setDraft);
+  const handleChange = useCallback(
+    (text: string) => setDraft(threadId, text),
+    [setDraft, threadId],
+  );
+  const handleSubmit = useCallback(
+    (event: React.FormEvent, mode: AgentMode) => {
+      onSubmit(event, mode, draft);
+    },
+    [draft, onSubmit],
+  );
+
+  return (
+    <ChatInput
+      {...props}
+      value={draft}
+      onChange={handleChange}
+      onSubmit={handleSubmit}
+    />
+  );
+}
diff --git a/apps/web/src/components/Panels/ChatPanel/index.tsx b/apps/web/src/components/Panels/ChatPanel/index.tsx
index 1ab87ba07..4e12b4ba5 100644
--- a/apps/web/src/components/Panels/ChatPanel/index.tsx
+++ b/apps/web/src/components/Panels/ChatPanel/index.tsx
@@ -34,7 +34,6 @@ import { useAcpThreadChangesStore } from '@/store/acpThreadChangesStore';
 import useCanvasStore from '@/store/canvasStore';
 import {
   selectThreadBinding,
-  selectThreadDraft,
   selectThreadHistoryLoaded,
   selectThreadLastAction,
   selectThreadMessages,
@@ -59,9 +58,9 @@ import { bindingsEqual } from './agentMenu';
 import { AgentSelector, type AgentChoice } from './AgentSelector';
 import { BuiltinSessionSelectors } from './BuiltinSessionSelectors';
 import { ChangeReviewCard } from './ChangeReviewCard';
-import { ChatInput } from './ChatInput';
 import { parseSlashInvocations } from './parseSlashInvocations';
 import { saveChatAsQuestion } from './saveChatAsQuestion';
+import { ThreadChatInput } from './ThreadChatInput';
 import { useAgentStream } from '../../../hooks/useAgentStream';
 import { useChatHistory } from '../../../hooks/useChatHistory';
 import { MessageList } from '../../Messages/MessageList';
@@ -100,7 +99,6 @@ export const ChatPanel = ({
 }: ChatPanelProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const setDraft = useChatStore((state) => state.setDraft);
   const canvasId = useCanvasStore((state) => state.canvasId);
 
   // When the panel is replaying a question node's thread, the mode is a
@@ -121,12 +119,6 @@ export const ChatPanel = ({
   );
   const activeConversationView = session.conversationView;
 
-  // Composer draft lives in the store keyed by threadId (see chatStore
-  // `ChatThreadState.draft`) so an unsent draft stays with its own session
-  // instead of being wiped when the user switches canvas or opens a
-  // question replay.
-  const input = useChatStore((state) => selectThreadDraft(state, threadId));
-
   const viewingQuestionNodeId =
     activeConversationView?.conversationOwner.nodeId;
   const headlessConversation = isHeadlessConversation(activeConversationView);
@@ -229,13 +221,6 @@ export const ChatPanel = ({
   const isHistoryLoaded = useChatStore((state) =>
     selectThreadHistoryLoaded(state, threadId),
   );
-  // Wire the composer's onChange to the current thread's draft slot. An
-  // empty string clears the draft (see `setDraft`), so the existing
-  // `setInput('')` on send doubles as clear-on-send.
-  const setInput = useCallback(
-    (text: string) => setDraft(threadId, text),
-    [setDraft, threadId],
-  );
   const addNode = useCanvasStore((state) => state.addNode);
   const llmConfig = useLLMStore((state) => state.config);
   const llmLoading = useLLMStore((state) => state.loading);
@@ -632,48 +617,60 @@ export const ChatPanel = ({
     viewingQuestionNodeId,
   ]);
 
-  const handleSubmit = async (e: React.FormEvent, agentMode: AgentMode) => {
-    e.preventDefault();
-    // Strip leading `/<id>` tokens that match a known slash command
-    // and forward them as `invokedSkills`. Skill invocation is gated
-    // to **internal + operate mode** only:
-    //
-    //  - External (ACP) bindings: skip parsing entirely. ACP agents
-    //    handle their own slash dispatch inside the prompt body, so
-    //    re-splitting here would double-strip the leading token.
-    //  - Internal + ask mode: skip parsing too. Ask is a Q&A surface
-    //    where a leading `/foo` is just literal text (e.g. a path or
-    //    a typo); the menu is suppressed upstream and submit must
-    //    mirror that or the two halves of the UX would disagree.
-    //  - Internal + operate mode: parse, dedup, forward.
-    //
-    // Unknown `/foo` tokens in operate mode pass through as literal
-    // message text — matches the typeahead UX (no menu hit → no
-    // recognition).
-    const raw = input;
-    setInput('');
-    const isSkillInvocationAllowed =
-      agentBinding.kind === 'internal' && agentMode === 'operate';
-    if (!isSkillInvocationAllowed) {
-      const prompt = raw.trim();
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent, agentMode: AgentMode, draft: string) => {
+      e.preventDefault();
+      // Strip leading `/<id>` tokens that match a known slash command
+      // and forward them as `invokedSkills`. Skill invocation is gated
+      // to **internal + operate mode** only:
+      //
+      //  - External (ACP) bindings: skip parsing entirely. ACP agents
+      //    handle their own slash dispatch inside the prompt body, so
+      //    re-splitting here would double-strip the leading token.
+      //  - Internal + ask mode: skip parsing too. Ask is a Q&A surface
+      //    where a leading `/foo` is just literal text (e.g. a path or
+      //    a typo); the menu is suppressed upstream and submit must
+      //    mirror that or the two halves of the UX would disagree.
+      //  - Internal + operate mode: parse, dedup, forward.
+      //
+      // Unknown `/foo` tokens in operate mode pass through as literal
+      // message text — matches the typeahead UX (no menu hit → no
+      // recognition).
+      const raw = draft;
+      useChatStore.getState().setDraft(threadId, '');
+      const isSkillInvocationAllowed =
+        agentBinding.kind === 'internal' && agentMode === 'operate';
+      if (!isSkillInvocationAllowed) {
+        const prompt = raw.trim();
+        if (!prompt) return;
+        onCommit?.();
+        await startStream(prompt, agentMode);
+        return;
+      }
+      const { invokedSkills, message } = parseSlashInvocations(
+        raw,
+        knownSlashIds,
+      );
+      const prompt = message.trim();
       if (!prompt) return;
       onCommit?.();
-      await startStream(prompt, agentMode);
-      return;
+      await startStream(
+        prompt,
+        agentMode,
+        invokedSkills.length > 0 ? invokedSkills : undefined,
+      );
+    },
+    [agentBinding.kind, knownSlashIds, onCommit, startStream, threadId],
+  );
+
+  const handleRetry = useCallback(() => {
+    const lastUserMsg = [...messages]
+      .reverse()
+      .find((message) => message.role === 'user');
+    if (lastUserMsg?.role === 'user') {
+      void startStream(lastUserMsg.content, mode);
     }
-    const { invokedSkills, message } = parseSlashInvocations(
-      raw,
-      knownSlashIds,
-    );
-    const prompt = message.trim();
-    if (!prompt) return;
-    onCommit?.();
-    await startStream(
-      prompt,
-      agentMode,
-      invokedSkills.length > 0 ? invokedSkills : undefined,
-    );
-  };
+  }, [messages, mode, startStream]);
 
   // Inline agent selector (left of the chat input toolbar). The binding
   // is mutable only while the thread has no user message yet — once a
@@ -852,15 +849,7 @@ export const ChatPanel = ({
             }
             openPositionRequestNonce={openPositionRequest?.nonce}
             onOpenPositionHandled={onOpenPositionHandled}
-            onRetry={() => {
-              // Find the last user message and re-send it
-              const lastUserMsg = [...messages]
-                .reverse()
-                .find((m) => m.role === 'user');
-              if (lastUserMsg && lastUserMsg.role === 'user') {
-                void startStream(lastUserMsg.content, mode);
-              }
-            }}
+            onRetry={handleRetry}
           />
 
           <div className="px-3 pb-2">
@@ -890,9 +879,7 @@ export const ChatPanel = ({
                 </Button>
               </div>
             ) : null}
-            <ChatInput
-              value={input}
-              onChange={setInput}
+            <ThreadChatInput
               onSubmit={handleSubmit}
               onCommit={onCommit}
               onStop={stopStream}
diff --git a/apps/web/src/pages/playground/ChatPerformancePlaygroundPage.tsx b/apps/web/src/pages/playground/ChatPerformancePlaygroundPage.tsx
new file mode 100644
index 000000000..2dc08bb36
--- /dev/null
+++ b/apps/web/src/pages/playground/ChatPerformancePlaygroundPage.tsx
@@ -0,0 +1,68 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { useMemo } from 'react';
+
+import { MessageList } from '@/components/Messages/MessageList';
+import { ThreadChatInput } from '@/components/Panels/ChatPanel/ThreadChatInput';
+import { ChatSessionProvider } from '@/hooks/useChatSession';
+
+import type { ChatMessage } from '@/store/chatTypes';
+
+const SESSION = {
+  threadId: 'chat-performance-thread',
+  canvasId: 'chat-performance-canvas',
+  ownerCanvasId: 'chat-performance-canvas',
+  conversationView: null,
+} as const;
+
+function buildMessages(count: number): ChatMessage[] {
+  return Array.from({ length: count }, (_, index): ChatMessage => {
+    if (index % 2 === 0) {
+      return {
+        id: `user-${index}`,
+        role: 'user',
+        content: `Representative question ${index / 2 + 1}`,
+      };
+    }
+    return {
+      id: `assistant-${index}`,
+      role: 'assistant',
+      segments: [
+        {
+          kind: 'text',
+          text: `## Representative answer ${(index + 1) / 2}\n\nThis fixture includes **Markdown**, a [link](https://example.com), and enough text to exercise the real historical message renderer.`,
+        },
+      ],
+    };
+  });
+}
+
+export default function ChatPerformancePlaygroundPage() {
+  const messageCount = Math.max(
+    0,
+    Number.parseInt(
+      new URLSearchParams(window.location.search).get('messages') ?? '0',
+      10,
+    ) || 0,
+  );
+  const messages = useMemo(() => buildMessages(messageCount), [messageCount]);
+
+  return (
+    <ChatSessionProvider value={SESSION}>
+      <main
+        data-chat-performance-fixture={messageCount}
+        className="bg-bg-default mx-auto flex h-full w-full max-w-3xl flex-col p-4"
+      >
+        <MessageList messages={messages} isLoading={false} />
+        <div className="pt-3">
+          <ThreadChatInput
+            onSubmit={() => undefined}
+            onStop={() => undefined}
+            mode="ask"
+          />
+        </div>
+      </main>
+    </ChatSessionProvider>
+  );
+}
diff --git a/docs/architecture/preview-workspace.md b/docs/architecture/preview-workspace.md
index dac1dec09..8a41a38cb 100644
--- a/docs/architecture/preview-workspace.md
+++ b/docs/architecture/preview-workspace.md
@@ -12,6 +12,8 @@ Preview Workspace owns presentation topology: open tabs, tab order, active tabs,
 
 `chatStore` owns conversation state keyed by `threadId`: messages, drafts, history status, streaming state, binding, model settings, compose mode, and pending attachments. It persists thread identity metadata (binding, built-in settings, and compose mode) without an entry limit so every independent Chat tab rehydrates with the same agent after reload; messages, drafts, history status, streaming state, and attachments remain runtime-only. Preview Workspace stores only the target needed to select a renderer.
 
+Within a mounted Chat renderer, the thread-scoped composer owns the draft subscription. Draft updates therefore rerender the composer without invalidating `MessageList`; unchanged historical message cards are memoized, while message-array updates and streaming changes continue through the history tree normally.
+
 `panelStore` owns and persists the outer right-column collapse state, owns the transient Preview fullscreen state, and owns thread-addressed composer focus requests. Opening a Preview target expands the right column; closing a tab does not delete its underlying node or conversation history. `MainLayout` treats the persisted collapse state as authoritative whenever no panel motion is active. A settled collapsed slot is zero-width and clips overflow, while an active open/close motion temporarily releases that clipping; interrupted startup hydration therefore cannot leave translated panel content visible over the Canvas in either persisted state. Fullscreen is intentionally not persisted across reloads.
 
 ```text