对话界面调整布局v1

Author: SymbolZH

apps/tui/src/ui/App.tsx

@@ -760,11 +760,12 @@ export const App: React.FC<AppProps> = ({
   // Handle agent query execution
   const handleAgentQuery = async (input: string) => {
     setCommandNotice(null);
-    scrollAnchor.current.jumpToLatest();
-    setChatScrollbackRows(0);
-    // Add user message to chat history
     store.addUserMessage(input);
     store.clearInputBuffer();
+    // Reset after the message enters history so the startup banner no longer
+    // contributes to the viewport slice.
+    scrollAnchor.current.jumpToLatest();
+    setChatScrollbackRows(0);
 
     // Prepare stable run input material. Retry attempts should not append
     // duplicate chat messages or send retry UI text back as model history.

apps/tui/src/ui/ChatArea.tsx

@@ -5,6 +5,7 @@ import {
   buildChatLines,
   chatContentWidth,
   countChatLines,
+  type VisualLine,
   type StartupInfo,
 } from './transcript-lines.js';
 
@@ -23,6 +24,42 @@ interface ChatAreaProps {
   startup?: StartupInfo | undefined;
 }
 
+function messageIDFromKey(key: string): string | undefined {
+  if (!key.startsWith('m:')) return undefined;
+  const end = key.indexOf(':', 2);
+  if (end === -1) return undefined;
+  return key.slice(2, end);
+}
+
+function snapTopToNearbyMessageStart(
+  lines: VisualLine[],
+  top: number,
+  viewport: number,
+): number {
+  if (top <= 0 || top >= lines.length) return top;
+
+  const currentID = messageIDFromKey(lines[top]?.key ?? '');
+  if (!currentID) return top;
+
+  const currentKey = lines[top]?.key;
+  if (currentKey === `m:${currentID}:h` || currentKey === `m:${currentID}:after`) {
+    return top;
+  }
+
+  let start = top;
+  while (start > 0 && messageIDFromKey(lines[start - 1]?.key ?? '') === currentID) {
+    start -= 1;
+  }
+
+  if (lines[start]?.key !== `m:${currentID}:h`) return top;
+
+  // Preserve bottom anchoring for large blocks; fix the common case where the
+  // slice starts one or two rows below a message header.
+  const shift = top - start;
+  if (shift <= Math.min(2, viewport - 1)) return start;
+  return top;
+}
+
 /**
  * Chat transcript viewport.
  *
@@ -79,15 +116,27 @@ export const ChatArea: React.FC<ChatAreaProps> = ({
   } else if (total <= viewport) {
     visible = lines;
   } else {
-    const top = Math.max(0, total - viewport - safeScroll);
-    visible = lines.slice(top, top + viewport);
+    // Early sessions should not jump straight to the bottom when the startup
+    // banner is replaced by the first messages. Later sessions stay anchored to
+    // the latest row, unless that would hide a nearby message header.
+    const shouldPinEarlyConversation = messageCount <= 3 && safeScroll === 0;
+
+    if (shouldPinEarlyConversation) {
+      visible = lines.slice(0, viewport);
+    } else {
+      const rawTop = Math.max(0, total - viewport - safeScroll);
+      const top = safeScroll === 0
+        ? snapTopToNearbyMessageStart(lines, rawTop, viewport)
+        : rawTop;
+      visible = lines.slice(top, top + viewport);
+    }
   }
 
   const bottomPadding = Math.max(0, viewport - visible.length);
 
   return (
     <Box flexDirection="column" flexGrow={1} overflowY="hidden">
-      <Box height={viewport} flexDirection="column" overflowY="hidden">
+      <Box flexDirection="column" overflowY="hidden">
         {visible.map((line) => line.node)}
         {Array.from({ length: bottomPadding }, (_, index) => (
           <Text key={`pad-bottom:${index}`}> </Text>

apps/tui/src/ui/transcript-lines.tsx

@@ -57,6 +57,8 @@ export interface BuildChatLinesInput {
 
 const INDENT = '  ';
 const INDENT_WIDTH = 2;
+const USER_MESSAGE_BORDER = '┃ ';
+const USER_MESSAGE_BORDER_WIDTH = textWidth(USER_MESSAGE_BORDER);
 const MAX_ELEMENT_LINES = 1000;
 const MAX_TABLE_ROWS = 12;
 const MIN_TABLE_CELL_WIDTH = 3;
@@ -108,6 +110,13 @@ export function buildChatLines(input: BuildChatLinesInput): VisualLine[] {
     return lines;
   }
 
+  // Keep the first message clear of the viewport edge when it replaces the
+  // startup banner.
+  if (hasMessages) {
+    push('spacer:top:0', blankNode('spacer:top:0'));
+    push('spacer:top:1', blankNode('spacer:top:1'));
+  }
+
   for (const message of input.messages) {
     pushMessageLines(message, toolCalls, bodyWidth, push);
     push(`m:${message.id}:after`, blankNode(`m:${message.id}:after`));
@@ -171,12 +180,31 @@ function pushMessageLines(
   bodyWidth: number,
   push: (key: string, node: React.ReactNode) => void,
 ): void {
+  const isUser = message.role === 'user';
   const headerKey = `m:${message.id}:h`;
-  push(headerKey, <MessageHeader key={headerKey} message={message} />);
+  const messageBodyWidth = isUser
+    ? Math.max(1, bodyWidth - USER_MESSAGE_BORDER_WIDTH)
+    : bodyWidth;
+
+  const pushLine = (key: string, node: React.ReactNode) => {
+    if (isUser) {
+      push(
+        key,
+        <Box key={`box-${key}`}>
+          <Text color="blue">{USER_MESSAGE_BORDER}</Text>
+          {node}
+        </Box>,
+      );
+    } else {
+      push(key, node);
+    }
+  };
+
+  pushLine(headerKey, <MessageHeader key={headerKey} message={message} />);
 
   if (message.elements.length === 0 && message.isStreaming) {
     const key = `m:${message.id}:thinking`;
-    push(key, <ThinkingLine key={key} />);
+    pushLine(key, <ThinkingLine key={key} />);
     return;
   }
 
@@ -188,7 +216,7 @@ function pushMessageLines(
   // uniform marginTop={1} spacing within the flat single-row line model.
   const separate = (key: string): void => {
     if (blocksEmitted > 0) {
-      push(key, blankNode(key));
+      pushLine(key, blankNode(key));
     }
   };
 
@@ -202,12 +230,12 @@ function pushMessageLines(
       }
       separate(`${keyBase}:gap`);
       blocksEmitted += 1;
-      pushMarkdownLines(normalized, bodyWidth, keyBase, (key, node) => {
+      pushMarkdownLines(normalized, messageBodyWidth, keyBase, (key, node) => {
         if (emittedLines >= MAX_ELEMENT_LINES) {
           return;
         }
         emittedLines += 1;
-        push(key, node);
+        pushLine(key, node);
       });
       return;
     }
@@ -220,7 +248,7 @@ function pushMessageLines(
     const key = `${keyBase}:tool`;
     separate(`${key}:gap`);
     blocksEmitted += 1;
-    push(
+    pushLine(
       key,
       <Box key={key} paddingLeft={INDENT_WIDTH}>
         <InlineToolCall toolCall={toolCall} showName />
@@ -230,7 +258,7 @@ function pushMessageLines(
 
   if (message.isStreaming && message.elements.length > 0) {
     const key = `m:${message.id}:cursor`;
-    push(key, <Text key={key} dimColor>{`${INDENT}▊`}</Text>);
+    pushLine(key, <Text key={key} dimColor>{`${INDENT}▊`}</Text>);
   }
 }