fix(Markdown): implement sticky-height streaming to fix layout jump

Streaming assistant messages now keep a maximum observed rendered height
and add temporary blank rows when live markdown causes content to reflow
upward, so later transcript content no longer jumps.

Factored the line/height math into `src/components/Messages/layout.ts`
and exported the markdown terminal renderer from
`src/components/Markdown/Markdown.tsx` via `src/components/Markdown/index.ts`.

---

Preserve Live Markdown and Prevent Transcript Jump

Summary:

Keep live markdown rendering for streaming assistant messages and prevent surrounding layout from jumping upward by giving the active streaming message a sticky minimum height.

The fix should preserve the current live-rendered markdown/code behavior, but when a rerender would make the streaming message shorter because content reflowed upward, the component should pad the message so it keeps its previous on-screen height until the stream finishes.

Implementation Changes:

- Add a dedicated wrapper around the active streaming assistant message in `src/components/Messages/Messages.tsx`.
- Track a sticky height for the current streaming message instance:
  - compute the rendered line count of the streaming message after markdown/code rendering
  - store the maximum line count seen so far for that in-flight message
  - if the newest rendered output is shorter than the stored maximum, append blank lines so the wrapper still occupies the stored maximum height
- Apply sticky-height behavior only to `streamingMessage`.
  - Do not change committed transcript items rendered through `Static`
  - Do not change user/system message behavior
- Reset sticky height when any of these happen:
  - the streaming message is committed and removed
  - a different streaming message starts
  - `sessionId` changes
  - terminal width changes
- Keep the existing live markdown/code rendering path intact:
  - assistant prose still renders through `Markdown`
  - completed code fences still render through `CodeBlock`
  - existing streaming inline markdown behavior stays unchanged

Measurement Strategy:

- Measure rendered height from the final display string that Ink will wrap, not from raw markdown source.
- Add a shared line-count utility for terminal output that:
  - strips ANSI escape sequences before width measurement
  - splits on explicit newlines
  - counts wrapped rows using the current available content width
  - treats empty lines as occupying one row
- Use the same available width assumptions already used by `Markdown`:
  - terminal columns from `useStdout()`
  - minus horizontal margins used for assistant message containers
- For code blocks:
  - count visible rows from the rendered code block content plus its surrounding border/padding rows
  - use the same width calculation the `CodeBlock` container effectively occupies
- Keep the measurement utility local to the message-rendering subsystem unless another component clearly needs it.

Public Interfaces / Behavior:

- No CLI/API/type changes.
- User-visible behavior:
  - live markdown rendering remains enabled during streaming
  - when inline markdown completion causes content to reflow upward, later transcript content and the input area should no longer jump upward during that stream
  - temporary blank space may appear below the active streaming assistant message until the stream completes
  - once committed, the final message renders normally with no sticky padding retained

Assumptions:

- Live markdown during streaming is a hard requirement and should not be reduced.
- The priority is preventing upward movement of surrounding layout, not preventing the streamed text itself from reflowing internally.
- Temporary blank space under the active streaming message is acceptable during streaming if it removes transcript/input jump.
- Terminal-width changes should invalidate prior sticky height rather than trying to preserve it across different wrap widths.

Author: remarkablemark

src/components/Markdown/Markdown.tsx

@@ -14,7 +14,7 @@ interface MarkdownProps {
 
 const HR_PLACEHOLDER = '__CODE_OLLAMA_HR_PLACEHOLDER__';
 
-function renderMarkdown(content: string, hrWidth: number): string {
+export function renderMarkdown(content: string, hrWidth: number): string {
   const hr = UI.MARKDOWN_HR_CHARACTER.repeat(Math.max(1, hrWidth));
   const markdown = new Marked();
   const rendererExtension = {

src/components/Markdown/index.ts

@@ -1 +1 @@
-export { Markdown } from './Markdown';
+export { Markdown, renderMarkdown } from './Markdown';

src/components/Messages/Messages.test.tsx

@@ -1,11 +1,26 @@
-import { Text } from 'ink';
+import { Text, useStdout } from 'ink';
 import { render } from 'ink-testing-library';
 
 import { ROLE, UI } from '../../constants';
 import type { Role } from '../../types';
 import { TURN_ABORTED_MESSAGE } from './constants';
 import { Messages } from './Messages';
 
+const { mockColumns } = vi.hoisted(() => ({
+  mockColumns: {
+    value: 100,
+  },
+}));
+
+vi.mock('ink', async () => ({
+  ...(await vi.importActual('ink')),
+  useStdout: vi.fn(() => ({
+    stdout: {
+      columns: mockColumns.value,
+    },
+  })),
+}));
+
 vi.mock('@inkjs/ui', () => ({
   Spinner: ({ label }: { label?: string }) => <Text>{`⏳${label ?? ''}`}</Text>,
 }));
@@ -34,7 +49,20 @@ const systemMessage: { role: Role; content: string } = {
   content: 'system info',
 };
 
+function setTerminalWidth(columns: number) {
+  mockColumns.value = columns;
+}
+
+function lineCount(frame: string | undefined) {
+  return (frame ?? '').split('\n').length;
+}
+
 describe('Messages', () => {
+  beforeEach(() => {
+    setTerminalWidth(100);
+    vi.mocked(useStdout).mockClear();
+  });
+
   it('renders committed transcript items through static output', () => {
     const { lastFrame } = render(
       <Messages
@@ -197,6 +225,75 @@ describe('Messages', () => {
     expect(lastFrame()).toContain('Use important');
   });
 
+  it('keeps live markdown formatting during streaming', () => {
+    const streamingBold: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: 'Use **important** text',
+    };
+    const { lastFrame } = render(
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingBold}
+      />,
+    );
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('Use important text');
+    expect(frame).not.toContain('**important**');
+  });
+
+  it('keeps the streaming frame height stable when markdown reflows upward', () => {
+    const incompleteBold: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: 'Use **important',
+    };
+    const completeBold: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: 'Use **important**',
+    };
+    const tree = (streamingMessage: { role: Role; content: string }) => (
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingMessage}
+      />
+    );
+
+    const { lastFrame, rerender } = render(tree(incompleteBold));
+    const initialHeight = lineCount(lastFrame());
+
+    rerender(tree(completeBold));
+
+    expect(lineCount(lastFrame())).toBe(initialHeight);
+    expect(lastFrame()).toContain('Use important');
+  });
+
+  it('recomputes sticky streaming height when the terminal width changes', () => {
+    const streamingBold: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: 'Use **important** text',
+    };
+    const tree = () => (
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingBold}
+      />
+    );
+
+    setTerminalWidth(100);
+    const { lastFrame, rerender } = render(tree());
+
+    setTerminalWidth(10);
+    rerender(tree());
+
+    expect(lastFrame()).toContain('Use');
+    expect(lastFrame()).toContain('important');
+  });
+
   it('renders code blocks with syntax highlighting', () => {
     const messageWithCode: { role: Role; content: string } = {
       role: ROLE.ASSISTANT,
@@ -221,6 +318,78 @@ describe('Messages', () => {
     expect(lastFrame()).toContain('plain code');
   });
 
+  it('renders completed code blocks live while streaming', () => {
+    const streamingCode: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: '```typescript\nconst x = 1;\n```',
+    };
+    const { lastFrame } = render(
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingCode}
+      />,
+    );
+    expect(lastFrame()).toContain('const x = 1;');
+  });
+
+  it('renders ambiguous raw fenced blocks while streaming', () => {
+    const streamingRaw: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: [
+        'Example:',
+        '```markdown',
+        '## Title',
+        '```ts',
+        'const x = 1;',
+        '```',
+        '```',
+        'Done.',
+      ].join('\n'),
+    };
+    const { lastFrame } = render(
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingRaw}
+      />,
+    );
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('Example:');
+    expect(frame).toContain('## Title');
+    expect(frame).toContain('```ts');
+    expect(frame).toContain('Done.');
+  });
+
+  it('renders non-markdown raw fenced blocks while streaming', () => {
+    const streamingRaw: { role: Role; content: string } = {
+      role: ROLE.ASSISTANT,
+      content: [
+        'Shell example:',
+        '```sh',
+        'echo start',
+        '```ts',
+        'const x = 1;',
+        '```',
+        '```',
+      ].join('\n'),
+    };
+    const { lastFrame } = render(
+      <Messages
+        messages={[]}
+        isLoading={true}
+        sessionId=""
+        streamingMessage={streamingRaw}
+      />,
+    );
+    const frame = lastFrame() ?? '';
+    expect(frame).toContain('Shell example:');
+    expect(frame).toContain('```sh');
+    expect(frame).toContain('```ts');
+  });
+
   it('renders multiple code blocks in one message', () => {
     const messageWithMultipleCode: { role: Role; content: string } = {
       role: ROLE.ASSISTANT,

src/components/Messages/Messages.tsx

@@ -1,11 +1,17 @@
 import { Spinner } from '@inkjs/ui';
-import { Box, Static, Text } from 'ink';
+import { Box, Static, Text, useStdout } from 'ink';
+import { useRef } from 'react';
 
 import { ROLE, UI } from '../../constants';
 import type { Message as OllamaMessage } from '../../utils/ollama';
 import { CodeBlock } from '../CodeBlock';
 import { Markdown } from '../Markdown';
 import { TURN_ABORTED_MESSAGE } from './constants';
+import {
+  getAssistantContentWidth,
+  getCodeBlockHeight,
+  getStreamingTextHeight,
+} from './layout';
 import {
   getMessageColor,
   parseContent,
@@ -26,9 +32,18 @@ interface MessageProps {
 }
 
 export function Message({ message, isStreaming = false }: MessageProps) {
+  const { stdout } = useStdout();
   const messageColor = getMessageColor(message.role);
   const isSystem = message.role === ROLE.SYSTEM;
   const isUser = message.role === ROLE.USER;
+  const isStreamingAssistant = isStreaming && !isUser && !isSystem;
+  const stickyHeightRef = useRef<{
+    columns: number;
+    maxHeight: number;
+  }>({
+    columns: stdout.columns,
+    maxHeight: 0,
+  });
 
   // System messages: render raw content (preserves backticks, no parsing)
   if (isSystem) {
@@ -42,6 +57,46 @@ export function Message({ message, isStreaming = false }: MessageProps) {
   }
 
   const segments = parseContent(message.content);
+  const availableWidth = getAssistantContentWidth(stdout.columns);
+
+  if (stickyHeightRef.current.columns !== stdout.columns) {
+    stickyHeightRef.current = {
+      columns: stdout.columns,
+      maxHeight: 0,
+    };
+  }
+
+  const streamingHeight = isStreamingAssistant
+    ? segments.reduce((height, segment) => {
+        if (segment.type === 'code') {
+          return height + getCodeBlockHeight(segment.content, availableWidth);
+        }
+
+        if (segment.type === 'raw') {
+          const markdownSource = unwrapRawMarkdownFence(segment.content);
+          return (
+            height +
+            getCodeBlockHeight(
+              markdownSource ?? segment.content,
+              availableWidth,
+            )
+          );
+        }
+
+        const textParts = splitStreamingInlineContent(segment.content);
+        return height + getStreamingTextHeight(textParts, availableWidth);
+      }, 0)
+    : 0;
+
+  if (isStreamingAssistant) {
+    stickyHeightRef.current.maxHeight = Math.max(
+      stickyHeightRef.current.maxHeight,
+      streamingHeight,
+    );
+  }
+  const stickyPaddingLines = isStreamingAssistant
+    ? stickyHeightRef.current.maxHeight - streamingHeight
+    : 0;
 
   return (
     <Box flexDirection="column" marginBottom={1}>
@@ -107,6 +162,10 @@ export function Message({ message, isStreaming = false }: MessageProps) {
           </Box>
         );
       })}
+
+      {Array.from({ length: stickyPaddingLines }, (_, index) => (
+        <Text key={'padding-' + String(index)}> </Text>
+      ))}
     </Box>
   );
 }

src/components/Messages/layout.test.ts

@@ -0,0 +1,45 @@
+import {
+  countWrappedLines,
+  getAssistantContentWidth,
+  getCodeBlockHeight,
+  getStreamingTextHeight,
+  stripAnsi,
+} from './layout';
+
+describe('message layout utilities', () => {
+  it('strips ANSI escape sequences', () => {
+    expect(stripAnsi('\u001B[36mhello\u001B[39m')).toBe('hello');
+  });
+
+  it('counts wrapped lines for plain text', () => {
+    expect(countWrappedLines('abcdefghij', 4)).toBe(3);
+  });
+
+  it('counts explicit blank lines', () => {
+    expect(countWrappedLines('top\n\nbottom', 10)).toBe(3);
+  });
+
+  it('counts wrapped lines after ANSI is removed', () => {
+    expect(countWrappedLines('\u001B[36mabcdef\u001B[39m', 3)).toBe(2);
+  });
+
+  it('counts streaming text height across markdown and plain parts', () => {
+    expect(
+      getStreamingTextHeight(
+        [
+          { type: 'markdown', content: 'Use **bold**' },
+          { type: 'plain', content: 'tail' },
+        ],
+        20,
+      ),
+    ).toBe(2);
+  });
+
+  it('accounts for code block chrome in height', () => {
+    expect(getCodeBlockHeight('const x = 1;', 20)).toBe(5);
+  });
+
+  it('derives assistant content width from terminal columns', () => {
+    expect(getAssistantContentWidth(40)).toBe(36);
+  });
+});