feat(kimi-code): pin scrolled-past user messages above the fullscreen transcript

In fullscreen mode, once a user message's first content line scrolls out of
view, a one-line summary pins above the transcript until the message scrolls
back into view. The summary merges every fully scrolled-out logical line of
a multi-line message, growing line by line without overlapping what is still
visible, and clicking it jumps back to the original message. While following
the output tail, the pin shows only for the latest user message and is
suppressed during the window before the follow scroll passes it.

The user message bullet is now ❯ instead of ✨ in all themes: ✨ had too
little contrast to read comfortably on light backgrounds.

Author: Grapedge

.changeset/layout-scroll-render-opt-in.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/pi-tui": patch
+---
+
+Add an opt-in `renderOnLayoutScroll` ScrollView option: when enabled, a layout pass that moves the scroll position or flips follow-end requests a follow-up render.

.changeset/sticky-user-messages.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": minor
+---
+
+Add sticky user messages in fullscreen mode: when a user message scrolls past the top, a summary line pins above the transcript, and clicking it jumps back to the original message.

.changeset/user-message-bullet.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": minor
+---
+
+Use ❯ instead of ✨ as the user message bullet — ✨ was hard to see in light themes.

apps/kimi-code/src/tui/components/messages/sticky-user-message.ts

@@ -0,0 +1,61 @@
+import {
+  Text,
+  truncateToWidth,
+  visibleWidth,
+  type Component,
+  type TuiMouseEvent,
+  type TuiMouseEventResult,
+} from '@moonshot-ai/pi-tui';
+
+import { TRUNCATION_ELLIPSIS } from '#/tui/constant/rendering';
+import { USER_MESSAGE_BULLET } from '#/tui/constant/symbols';
+import { currentTheme } from '#/tui/theme';
+import {
+  judgeStickyUserMessage,
+  type StickyJudgmentEntry,
+  type StickyUserMessageJudgment,
+} from '#/tui/utils/sticky-user-message';
+
+export interface StickyUserMessageSource {
+  measure(width: number): StickyJudgmentEntry[];
+  scrollState(): { scrollTop: number; following: boolean };
+  scrollTo(y: number): void;
+}
+
+export class StickyUserMessageComponent implements Component {
+  private judgment: StickyUserMessageJudgment | null = null;
+
+  constructor(private readonly source: StickyUserMessageSource) {}
+
+  invalidate(): void {}
+
+  render(width: number): string[] {
+    const safeWidth = Math.max(0, width);
+    const { scrollTop, following } = this.source.scrollState();
+    this.judgment = judgeStickyUserMessage({
+      entries: this.source.measure(Math.max(1, safeWidth)),
+      scrollTop,
+      following,
+    });
+    if (this.judgment === null || safeWidth <= 0) return [];
+
+    const bullet = currentTheme.boldFg('roleUser', USER_MESSAGE_BULLET);
+    const contentWidth = Math.max(1, safeWidth - visibleWidth(bullet));
+
+    const colored = currentTheme.boldFg('roleUser', this.judgment.summary);
+    const wrapped = new Text(colored, 0, 0).render(contentWidth);
+    let line = (wrapped[0] ?? '').trimEnd();
+    if (wrapped.length > 1) {
+      line = truncateToWidth(line + TRUNCATION_ELLIPSIS, contentWidth, TRUNCATION_ELLIPSIS);
+    }
+    return [truncateToWidth(bullet + line, safeWidth, TRUNCATION_ELLIPSIS)];
+  }
+
+  handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+    if (event.type === 'click' && event.button === 'left' && this.judgment !== null) {
+      this.source.scrollTo(this.judgment.targetY);
+      return { handled: true };
+    }
+    return undefined;
+  }
+}

apps/kimi-code/src/tui/components/messages/user-message.ts

@@ -2,7 +2,7 @@
  * Renders a user message in the transcript.
  */
 
-import { Spacer, Text, truncateToWidth, visibleWidth, type Component } from '@moonshot-ai/pi-tui';
+import { Spacer, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from '@moonshot-ai/pi-tui';
 
 import { ImageThumbnail } from '#/tui/components/media/image-thumbnail';
 import { USER_MESSAGE_BULLET } from '#/tui/constant/symbols';
@@ -11,6 +11,38 @@ import type { ImageAttachment } from '#/tui/utils/image-attachment-store';
 import { markOsc133Zone } from '#/tui/utils/osc133';
 import { isRenderCacheEnabled } from '#/tui/utils/render-cache';
 
+function firstContentLineIndex(lines: string[]): number {
+  let first = 0;
+  while (first < lines.length && lines[first]!.trim() === '') first++;
+  return first;
+}
+
+/**
+ * Visual row index of the message's first visible text line: one leading
+ * Spacer row plus one row per leading blank logical line. The sticky pill
+ * anchors its pin threshold and click target to this row. It must be derived
+ * from the raw content rather than the rendered lines: the bullet prefix
+ * makes even a blank first text row visibly non-empty, so scanning rendered
+ * rows for the first non-blank one would miss leading blank lines.
+ */
+export function userMessageContentOffset(text: string): number {
+  return 1 + firstContentLineIndex(text.split(/\r?\n/));
+}
+
+/**
+ * Visual row count of each logical content line after the leading blanks, at
+ * the width the message would render with its bullet. The sticky pill uses
+ * this to map "visual rows scrolled out" back to logical lines.
+ */
+export function userMessageLineHeights(text: string, width: number, bullet?: string): number[] {
+  const marker = bullet ?? USER_MESSAGE_BULLET;
+  const contentWidth = Math.max(1, width - visibleWidth(marker));
+  const lines = text.split(/\r?\n/);
+  return lines
+    .slice(firstContentLineIndex(lines))
+    .map((line) => wrapTextWithAnsi(line.replaceAll('\t', '   '), contentWidth).length);
+}
+
 export class UserMessageComponent implements Component {
   private text: string;
   private readonly bullet?: string;

apps/kimi-code/src/tui/constant/symbols.ts

@@ -3,7 +3,7 @@ export const STATUS_BULLET = '● ';
 
 // Shared transcript markers. Keep widths stable because message wrapping
 // assumes the marker occupies the leading cells.
-export const USER_MESSAGE_BULLET = '✨ ';
+export const USER_MESSAGE_BULLET = '❯ ';
 export const SUCCESS_MARK = '✓ ';
 export const FAILURE_MARK = '✗ ';
 

apps/kimi-code/src/tui/tui-state.ts

@@ -17,12 +17,15 @@ import { NotifyPanelComponent } from './components/chrome/notify-panel';
 import { TodoPanelComponent } from './components/chrome/todo-panel';
 import type { SessionRow } from './components/dialogs/session-picker';
 import { CustomEditor } from './components/editor/custom-editor';
+import { StickyUserMessageComponent } from './components/messages/sticky-user-message';
+import { userMessageContentOffset, userMessageLineHeights } from './components/messages/user-message';
 import { DEFAULT_MARKDOWN_CONFIG, DEFAULT_TUI_CONFIG } from './config';
 import { CHROME_GUTTER } from './constant/rendering';
 import type { TasksBrowserState } from './controllers/tasks-browser';
 import { currentTheme, type Theme } from './theme';
 import { setMarkdownAltScreenActive, setMarkdownMermaidMode, setMarkdownRenderLatex, setMarkdownRenderRequester } from './utils/markdown-options';
 import { createTerminalState, type TerminalState } from './utils/terminal-state';
+import { getTranscriptComponentEntry } from './utils/transcript-component-metadata';
 import {
   INITIAL_LIVE_PANE,
   type AppState,
@@ -159,7 +162,32 @@ export function createTUIState(options: KimiTUIOptions): TUIState {
       primary: true,
       overscroll: 'chain',
       scrollbar: 'auto',
+      renderOnLayoutScroll: true,
     });
+    const stickyUserMessage = new StickyUserMessageComponent({
+      measure: (width) =>
+        transcriptContainer.children.map((child) => {
+          const entry = getTranscriptComponentEntry(child);
+          const lines = child.render(width);
+          const isUserMessage = entry?.kind === 'user' && entry.bullet !== '';
+          return {
+            kind: entry?.kind,
+            bullet: entry?.bullet,
+            content: entry?.content ?? '',
+            height: lines.length,
+            contentOffset: isUserMessage ? userMessageContentOffset(entry.content) : undefined,
+            lineHeights: isUserMessage
+              ? userMessageLineHeights(entry.content, width, entry.bullet)
+              : [],
+          };
+        }),
+      scrollState: () => ({ scrollTop: scrollView.scrollTop, following: scrollView.isFollowingEnd }),
+      scrollTo: (y) => {
+        scrollView.scrollTo(y);
+      },
+    });
+    const stickyUserMessageContainer = new GutterContainer(CHROME_GUTTER, CHROME_GUTTER);
+    stickyUserMessageContainer.addChild(stickyUserMessage);
     dockContainer = new VStack();
     dockContainer.addChild(activityContainer, { shrink: 1, minSize: 0 });
     dockContainer.addChild(todoPanelContainer, { shrink: 1, minSize: 0 });
@@ -169,6 +197,7 @@ export function createTUIState(options: KimiTUIOptions): TUIState {
     dockContainer.addChild(surveyContainer, { shrink: 0, minSize: 0 });
     dockContainer.addChild(editorContainer, { shrink: 1, minSize: 3 });
     const root = new VStack();
+    root.addChild(stickyUserMessageContainer, { shrink: 0, minSize: 0 });
     root.addChild(scrollView, { basis: 0, grow: 1, shrink: 1, minSize: 1 });
     root.addChild(dockContainer, { basis: 'auto', grow: 0, shrink: 1, minSize: 1 });
     ui.setLayoutRoot(root);

apps/kimi-code/src/tui/types.ts

@@ -234,7 +234,7 @@ export interface TranscriptEntry {
   modelText?: boolean;
   color?: ColorToken;
   detail?: string;
-  /** Optional override for the leading bullet of a 'user' message entry. An empty string suppresses the bullet entirely (used by shell-command echoes so `$` replaces the sparkles marker). */
+  /** Optional override for the leading bullet of a 'user' message entry. An empty string suppresses the bullet entirely (used by shell-command echoes so `$` takes the bullet's place). */
   bullet?: string;
   toolCallData?: ToolCallBlockData;
   backgroundAgentStatus?: BackgroundAgentStatusData;

apps/kimi-code/src/tui/utils/sticky-user-message.ts

@@ -0,0 +1,73 @@
+import type { TranscriptEntryKind } from '../types';
+
+export interface StickyJudgmentEntry {
+  kind: TranscriptEntryKind | undefined;
+  bullet?: string;
+  content: string;
+  height: number;
+  contentOffset?: number;
+  lineHeights: number[];
+}
+
+export interface StickyUserMessageJudgment {
+  index: number;
+  summary: string;
+  targetY: number;
+}
+
+export function summarizeStickyUserMessage(content: string, lineCount = 1): string {
+  const lines = content.split(/\r?\n/);
+  let first = 0;
+  while (first < lines.length && lines[first]!.trim() === '') first++;
+  return lines
+    .slice(first, first + Math.max(1, lineCount))
+    .join(' ')
+    .replaceAll(/\s+/g, ' ')
+    .trim();
+}
+
+function countScrolledOutLines(lineHeights: number[], rowsOut: number): number {
+  let rows = 0;
+  let count = 0;
+  for (const height of lineHeights) {
+    const lineRows = Math.max(1, height);
+    if (rows + lineRows > rowsOut) break;
+    rows += lineRows;
+    count++;
+  }
+  return Math.max(1, count);
+}
+
+export function judgeStickyUserMessage(input: {
+  entries: readonly StickyJudgmentEntry[];
+  scrollTop: number;
+  following: boolean;
+}): StickyUserMessageJudgment | null {
+  const { entries, scrollTop, following } = input;
+  if (scrollTop <= 0) return null;
+  let y = 0;
+  let latest: StickyUserMessageJudgment | null = null;
+  let pinned: StickyUserMessageJudgment | null = null;
+  for (let index = 0; index < entries.length; index++) {
+    const entry = entries[index]!;
+    const entryY = y;
+    const height = Math.max(0, entry.height);
+    y += height;
+    if (entry.kind !== 'user' || entry.bullet === '') continue;
+    const summary = summarizeStickyUserMessage(entry.content);
+    if (summary === '') continue;
+    const offset = Math.min(Math.max(0, entry.contentOffset ?? 0), height);
+    const firstLineY = entryY + offset;
+    const judgment = { index, summary, targetY: firstLineY + 1 };
+    latest = judgment;
+    if (firstLineY < scrollTop) {
+      judgment.summary = summarizeStickyUserMessage(
+        entry.content,
+        countScrolledOutLines(entry.lineHeights, scrollTop - firstLineY),
+      );
+      pinned = judgment;
+    }
+  }
+  if (following) return pinned !== null && pinned === latest ? pinned : null;
+  return pinned;
+}