Show terminal command in run_terminal_command preview

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

cli/src/components/message-block.tsx

@@ -16,6 +16,9 @@ import type { ChatTheme } from '../utils/theme-system'
 const trimTrailingNewlines = (value: string): string =>
   value.replace(/[\r\n]+$/g, '')
 
+const sanitizePreview = (value: string): string =>
+  value.replace(/[#*_`~\[\]()]/g, '').trim()
+
 interface MessageBlockProps {
   messageId: string
   blocks?: ContentBlock[]
@@ -123,13 +126,23 @@ export const MessageBlock = ({
                 .split('\n')
                 .filter((line) => line.trim())
               const firstLine = lines[0] || ''
+              const lastLine = lines[lines.length - 1] || firstLine
+              const commandPreview =
+                block.toolName === 'run_terminal_command' &&
+                block.input &&
+                typeof (block.input as any).command === 'string'
+                  ? `$ ${(block.input as any).command.trim()}`
+                  : null
+
               const streamingPreview = isStreaming
-                ? firstLine.replace(/[#*_`~\[\]()]/g, '').trim() + '...'
+                ? commandPreview ?? `${sanitizePreview(firstLine)}...`
                 : ''
 
               let finishedPreview = ''
               if (!isStreaming && isCollapsed) {
-                if (block.toolName === 'run_terminal_command' && block.output) {
+                if (commandPreview) {
+                  finishedPreview = commandPreview
+                } else if (block.toolName === 'run_terminal_command' && block.output) {
                   const outputLines = block.output
                     .split('\n')
                     .filter((line) => line.trim())
@@ -139,9 +152,7 @@ export const MessageBlock = ({
                     ? '...\n' + lastThreeLines.join('\n')
                     : lastThreeLines.join('\n')
                 } else {
-                  finishedPreview = lastLine
-                    .replace(/[#*_`~\[\]()]/g, '')
-                    .trim()
+                  finishedPreview = sanitizePreview(lastLine)
                 }
               }
 
@@ -284,15 +295,22 @@ export const MessageBlock = ({
                         const lastNestedLine =
                           nestedLines[nestedLines.length - 1] || firstNestedLine
 
+                        const nestedCommandPreview =
+                          nestedBlock.toolName === 'run_terminal_command' &&
+                          nestedBlock.input &&
+                          typeof (nestedBlock.input as any).command === 'string'
+                            ? `$ ${(nestedBlock.input as any).command.trim()}`
+                            : null
+
                         const nestedStreamingPreview = isNestedStreaming
-                          ? firstNestedLine
-                              .replace(/[#*_`~\[\]()]/g, '')
-                              .trim() + '...'
+                          ? nestedCommandPreview ?? `${sanitizePreview(firstNestedLine)}...`
                           : ''
 
                         let nestedFinishedPreview = ''
                         if (!isNestedStreaming && isNestedCollapsed) {
-                          if (
+                          if (nestedCommandPreview) {
+                            nestedFinishedPreview = nestedCommandPreview
+                          } else if (
                             nestedBlock.toolName === 'run_terminal_command' &&
                             nestedBlock.output
                           ) {
@@ -305,9 +323,9 @@ export const MessageBlock = ({
                               ? '...\n' + lastThreeLines.join('\n')
                               : lastThreeLines.join('\n')
                           } else {
-                            nestedFinishedPreview = lastNestedLine
-                              .replace(/[#*_`~\[\]()]/g, '')
-                              .trim()
+                            nestedFinishedPreview = sanitizePreview(
+                              lastNestedLine,
+                            )
                           }
                         }
 

cli/src/components/multiline-input.tsx

@@ -1,7 +1,7 @@
 import { useKeyboard, usePaste } from '@opentui/react'
 import { useCallback, useState, useEffect, useMemo, useRef } from 'react'
 
-import type { ScrollBoxRenderable } from '@opentui/core'
+import { TextAttributes, type ScrollBoxRenderable } from '@opentui/core'
 
 
 // Helper functions for text manipulation
@@ -53,6 +53,8 @@ function findNextWordBoundary(text: string, cursor: number): number {
   return pos
 }
 
+const CURSOR_CHAR = '\u2009'
+
 interface MultilineInputProps {
   value: string
   onChange: (value: string) => void
@@ -394,30 +396,29 @@ export function MultilineInput({
   // Calculate display with cursor
   const displayValue = value || placeholder
   const isPlaceholder = !value && placeholder
-  const displayText =
-    focused && !isPlaceholder
-      ? displayValue.slice(0, cursorPosition) +
-        '│' +
-        displayValue.slice(cursorPosition)
-      : displayValue
+  const showCursor = focused && !isPlaceholder
+  const beforeCursor = showCursor ? displayValue.slice(0, cursorPosition) : ''
+  const afterCursor = showCursor ? displayValue.slice(cursorPosition) : ''
+  const displayText = showCursor
+    ? `${beforeCursor}${CURSOR_CHAR}${afterCursor}`
+    : displayValue
 
   // Memoize height calculation to avoid expensive computation on every render
   const height = useMemo(() => {
     const maxCharsPerLine = Math.max(1, width - 4)
-    const lines = displayValue.split('\n')
+    const contentForHeight = showCursor ? displayText : displayValue
+    const lines = contentForHeight.split('\n')
     let totalLineCount = 0
     for (const line of lines) {
-      if (line.length === 0) {
+      const length = line.length
+      if (length === 0) {
         totalLineCount += 1
       } else {
-        // Account for cursor character which adds 1 to display length
-        const displayLength =
-          focused && !isPlaceholder ? line.length + 1 : line.length
-        totalLineCount += Math.ceil(displayLength / maxCharsPerLine)
+        totalLineCount += Math.ceil(length / maxCharsPerLine)
       }
     }
     return Math.max(1, Math.min(totalLineCount, maxHeight))
-  }, [displayValue, width, focused, isPlaceholder, maxHeight])
+  }, [displayValue, displayText, showCursor, width, maxHeight])
 
   return (
     <scrollbox
@@ -456,7 +457,21 @@ export function MultilineInput({
               : theme.inputFg,
         }}
       >
-        {displayText}
+        {showCursor ? (
+          <>
+            {beforeCursor}
+            <span
+              fg={theme.cursor}
+              bg={theme.cursor}
+              attributes={TextAttributes.BOLD}
+            >
+              {CURSOR_CHAR}
+            </span>
+            {afterCursor}
+          </>
+        ) : (
+          displayText
+        )}
       </text>
     </scrollbox>
   )