From 130d6888b4963a272bb9dedbb1c9f13d0c48c845 Mon Sep 17 00:00:00 2001
From: yiliang114 <1204183885@qq.com>
Date: Fri, 20 Mar 2026 13:21:25 +0800
Subject: [PATCH] perf(cli): memoize btw message component

---
 .../components/messages/BtwMessage.test.tsx   | 34 +++++++++++++++++++
 .../src/ui/components/messages/BtwMessage.tsx |  6 ++--
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 packages/cli/src/ui/components/messages/BtwMessage.test.tsx

diff --git a/packages/cli/src/ui/components/messages/BtwMessage.test.tsx b/packages/cli/src/ui/components/messages/BtwMessage.test.tsx
new file mode 100644
index 000000000..da784dc0d
--- /dev/null
+++ b/packages/cli/src/ui/components/messages/BtwMessage.test.tsx
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Code
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, it } from 'vitest';
+import { render } from 'ink-testing-library';
+import { BtwMessage } from './BtwMessage.js';
+
+describe('BtwMessage', () => {
+  it('is wrapped in React.memo to avoid unnecessary layout rerenders', () => {
+    expect((BtwMessage as unknown as { $$typeof?: symbol }).$$typeof).toBe(
+      Symbol.for('react.memo'),
+    );
+  });
+
+  it('renders the side question and answer', () => {
+    const { lastFrame } = render(
+      <BtwMessage
+        btw={{
+          question: 'side question',
+          answer: 'side answer',
+          isPending: false,
+        }}
+      />,
+    );
+
+    const output = lastFrame() ?? '';
+    expect(output).toContain('/btw');
+    expect(output).toContain('side question');
+    expect(output).toContain('side answer');
+  });
+});
diff --git a/packages/cli/src/ui/components/messages/BtwMessage.tsx b/packages/cli/src/ui/components/messages/BtwMessage.tsx
index 8a7ac9d15..a172d43fa 100644
--- a/packages/cli/src/ui/components/messages/BtwMessage.tsx
+++ b/packages/cli/src/ui/components/messages/BtwMessage.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type React from 'react';
+import React from 'react';
 import { Box, Text } from 'ink';
 import type { BtwProps } from '../../types.js';
 import { Colors } from '../../colors.js';
@@ -14,7 +14,7 @@ export interface BtwDisplayProps {
   btw: BtwProps;
 }
 
-export const BtwMessage: React.FC<BtwDisplayProps> = ({ btw }) => (
+const BtwMessageInternal: React.FC<BtwDisplayProps> = ({ btw }) => (
   <Box
     flexDirection="column"
     borderStyle="round"
@@ -45,3 +45,5 @@ export const BtwMessage: React.FC<BtwDisplayProps> = ({ btw }) => (
     )}
   </Box>
 );
+
+export const BtwMessage = React.memo(BtwMessageInternal);