Inline thinking bubbles with summary/full modes (#18033)

Co-authored-by: Jacob Richman <jacob314@gmail.com>
2026-04-21 10:34:35 -07:00 · 2026-02-09 19:24:41 -08:00
parent 7a132512cf
commit d3cfbdb3b7
26 changed files with 719 additions and 26 deletions
@@ -0,0 +1,96 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, it, expect } from 'vitest';
+import { renderWithProviders } from '../../../test-utils/render.js';
+import { ThinkingMessage } from './ThinkingMessage.js';
+
+describe('ThinkingMessage', () => {
+  it('renders subject line', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{ subject: 'Planning', description: 'test' }}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).toContain('Planning');
+  });
+
+  it('uses description when subject is empty', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{ subject: '', description: 'Processing details' }}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).toContain('Processing details');
+  });
+
+  it('renders full mode with left vertical rule and full text', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{
+          subject: 'Planning',
+          description: 'I am planning the solution.',
+        }}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).toContain('│');
+    expect(lastFrame()).not.toContain('┌');
+    expect(lastFrame()).not.toContain('┐');
+    expect(lastFrame()).not.toContain('└');
+    expect(lastFrame()).not.toContain('┘');
+    expect(lastFrame()).toContain('Planning');
+    expect(lastFrame()).toContain('I am planning the solution.');
+  });
+
+  it('starts left rule below the bold summary line in full mode', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{
+          subject: 'Summary line',
+          description: 'First body line',
+        }}
+        terminalWidth={80}
+      />,
+    );
+
+    const lines = (lastFrame() ?? '').split('\n');
+    expect(lines[0] ?? '').toContain('Summary line');
+    expect(lines[0] ?? '').not.toContain('│');
+    expect(lines.slice(1).join('\n')).toContain('│');
+  });
+
+  it('normalizes escaped newline tokens so literal \\n\\n is not shown', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{
+          subject: 'Matching the Blocks',
+          description: '\\n\\n',
+        }}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).toContain('Matching the Blocks');
+    expect(lastFrame()).not.toContain('\\n\\n');
+  });
+
+  it('renders empty state gracefully', () => {
+    const { lastFrame } = renderWithProviders(
+      <ThinkingMessage
+        thought={{ subject: '', description: '' }}
+        terminalWidth={80}
+      />,
+    );
+
+    expect(lastFrame()).not.toContain('Planning');
+  });
+});
@@ -0,0 +1,171 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import type { ThoughtSummary } from '@google/gemini-cli-core';
+import { theme } from '../../semantic-colors.js';
+
+interface ThinkingMessageProps {
+  thought: ThoughtSummary;
+  terminalWidth: number;
+}
+
+const THINKING_LEFT_PADDING = 1;
+
+function splitGraphemes(value: string): string[] {
+  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    const segmenter = new Intl.Segmenter(undefined, {
+      granularity: 'grapheme',
+    });
+    return Array.from(segmenter.segment(value), (segment) => segment.segment);
+  }
+
+  return Array.from(value);
+}
+
+function normalizeEscapedNewlines(value: string): string {
+  return value.replace(/\\r\\n/g, '\n').replace(/\\n/g, '\n');
+}
+
+function normalizeThoughtLines(thought: ThoughtSummary): string[] {
+  const subject = normalizeEscapedNewlines(thought.subject).trim();
+  const description = normalizeEscapedNewlines(thought.description).trim();
+
+  if (!subject && !description) {
+    return [];
+  }
+
+  if (!subject) {
+    return description
+      .split('\n')
+      .map((line) => line.trim())
+      .filter(Boolean);
+  }
+
+  const bodyLines = description
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  return [subject, ...bodyLines];
+}
+
+function graphemeLength(value: string): number {
+  return splitGraphemes(value).length;
+}
+
+function chunkToWidth(value: string, width: number): string[] {
+  if (width <= 0) {
+    return [''];
+  }
+
+  const graphemes = splitGraphemes(value);
+  if (graphemes.length === 0) {
+    return [''];
+  }
+
+  const chunks: string[] = [];
+  for (let index = 0; index < graphemes.length; index += width) {
+    chunks.push(graphemes.slice(index, index + width).join(''));
+  }
+  return chunks;
+}
+
+function wrapLineToWidth(line: string, width: number): string[] {
+  if (width <= 0) {
+    return [''];
+  }
+
+  const normalized = line.trim();
+  if (!normalized) {
+    return [''];
+  }
+
+  const words = normalized.split(/\s+/);
+  const wrapped: string[] = [];
+  let current = '';
+
+  for (const word of words) {
+    const wordChunks = chunkToWidth(word, width);
+
+    for (const wordChunk of wordChunks) {
+      if (!current) {
+        current = wordChunk;
+        continue;
+      }
+
+      if (graphemeLength(current) + 1 + graphemeLength(wordChunk) <= width) {
+        current = `${current} ${wordChunk}`;
+      } else {
+        wrapped.push(current);
+        current = wordChunk;
+      }
+    }
+  }
+
+  if (current) {
+    wrapped.push(current);
+  }
+
+  return wrapped;
+}
+
+export const ThinkingMessage: React.FC<ThinkingMessageProps> = ({
+  thought,
+  terminalWidth,
+}) => {
+  const fullLines = useMemo(() => normalizeThoughtLines(thought), [thought]);
+  const fullSummaryDisplayLines = useMemo(() => {
+    const contentWidth = Math.max(terminalWidth - THINKING_LEFT_PADDING - 2, 1);
+    return fullLines.length > 0
+      ? wrapLineToWidth(fullLines[0], contentWidth)
+      : [];
+  }, [fullLines, terminalWidth]);
+  const fullBodyDisplayLines = useMemo(() => {
+    const contentWidth = Math.max(terminalWidth - THINKING_LEFT_PADDING - 2, 1);
+    return fullLines
+      .slice(1)
+      .flatMap((line) => wrapLineToWidth(line, contentWidth));
+  }, [fullLines, terminalWidth]);
+
+  if (
+    fullSummaryDisplayLines.length === 0 &&
+    fullBodyDisplayLines.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <Box
+      width={terminalWidth}
+      marginBottom={1}
+      paddingLeft={THINKING_LEFT_PADDING}
+      flexDirection="column"
+    >
+      {fullSummaryDisplayLines.map((line, index) => (
+        <Box key={`summary-line-row-${index}`} flexDirection="row">
+          <Box width={2}>
+            <Text> </Text>
+          </Box>
+          <Text color={theme.text.primary} bold italic wrap="truncate-end">
+            {line}
+          </Text>
+        </Box>
+      ))}
+      {fullBodyDisplayLines.map((line, index) => (
+        <Box key={`body-line-row-${index}`} flexDirection="row">
+          <Box width={2}>
+            <Text color={theme.border.default}>│ </Text>
+          </Box>
+          <Text color={theme.text.secondary} italic wrap="truncate-end">
+            {line}
+          </Text>
+        </Box>
+      ))}
+    </Box>
+  );
+};
@@ -247,7 +247,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
             */
        (visibleToolCalls.length > 0 || borderBottomOverride !== undefined) && (
          <Box
-            height={0}
+            height={1}
            width={contentWidth}
            borderLeft={true}
            borderRight={true}