@vybestack/llxprt-code 0.10.0 → 0.11.0-nightly.260728.ffaa8d5d7

package/src/ui/components/QueuedMessagesPanel.tsx

@@ -0,0 +1,388 @@
+/**
+ * @license
+ * Copyright 2026 Vybestack LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type {
+  AgentRequestInput,
+  ContentBlock,
+  IContent,
+} from '@vybestack/llxprt-code-core';
+import type React from 'react';
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { SemanticColors } from '../colors.js';
+import { Command, getDefaultKeyBindingHint } from '../../config/keyBindings.js';
+import { truncateEnd } from '../utils/responsive.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import type { QueuedSubmission } from '../hooks/agentStream/types.js';
+
+interface QueuedMessagesPanelProps {
+  width: number;
+  collapsed?: boolean;
+  messages: readonly QueuedSubmission[];
+}
+
+const PANEL_HEIGHT_RATIO = 0.2;
+const COLLAPSED_PREVIEW_WIDTH_RATIO = 0.55;
+const FALLBACK_KEY_PREVIEW_LENGTH = 20;
+const MIN_EXPANDED_PANEL_HEIGHT = 3;
+const QUEUED_MESSAGES_KEY_HINT = getDefaultKeyBindingHint(
+  Command.TOGGLE_QUEUED_MESSAGES,
+);
+
+export type QueuedMessagesPanelView =
+  | { readonly kind: 'empty' }
+  | {
+      readonly kind: 'compact';
+      readonly width: number;
+      readonly summary: string;
+    }
+  | {
+      readonly kind: 'collapsed';
+      readonly width: number;
+      readonly panelHeight: number;
+      readonly summary: string;
+      readonly nextPreview?: string;
+    }
+  | {
+      readonly kind: 'expanded';
+      readonly width: number;
+      readonly panelHeight: number;
+      readonly heading: string;
+      readonly messages: ReadonlyArray<{
+        readonly key: string;
+        readonly number: number;
+        readonly preview: string;
+      }>;
+      readonly moreCount: number;
+      readonly showMoreIndicator: boolean;
+    };
+
+/**
+ * Extract a human-readable preview string from any AgentRequestInput variant.
+ */
+export function extractPreviewText(query: AgentRequestInput): string {
+  if (typeof query === 'string') {
+    return query;
+  }
+
+  if (Array.isArray(query)) {
+    if (query.length === 0) {
+      return '(empty message)';
+    }
+
+    if (isIContentArray(query)) {
+      return extractTextFromTurns(query);
+    }
+
+    const text = extractTextFromBlocks(query as ContentBlock[]);
+    return text.length > 0 ? text : '(non-text message)';
+  }
+
+  if (isIContent(query)) {
+    const text = extractTextFromBlocks(query.blocks);
+    return text.length > 0 ? text : '(non-text turn)';
+  }
+
+  return '(non-text message)';
+}
+
+function extractTextFromTurns(turns: IContent[]): string {
+  const text = turns
+    .map((turn) => extractTextFromBlocks(turn.blocks))
+    .filter((part) => part.length > 0)
+    .join(' ');
+  return text.length > 0 ? text : '(non-text turn)';
+}
+
+function extractTextFromBlocks(blocks: ContentBlock[]): string {
+  const parts: string[] = [];
+  for (const block of blocks) {
+    if (isTextBlock(block) && block.text.length > 0) {
+      parts.push(block.text);
+    }
+  }
+  return parts.join(' ');
+}
+
+function isTextBlock(block: unknown): block is { type: 'text'; text: string } {
+  if (typeof block !== 'object' || block === null) {
+    return false;
+  }
+  const candidate = block as Record<string, unknown>;
+  return candidate.type === 'text' && typeof candidate.text === 'string';
+}
+
+function isIContent(value: unknown): value is IContent {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const candidate = value as Record<string, unknown>;
+  return (
+    (candidate.speaker === 'human' ||
+      candidate.speaker === 'ai' ||
+      candidate.speaker === 'tool') &&
+    Array.isArray(candidate.blocks)
+  );
+}
+
+function isIContentArray(value: unknown): value is IContent[] {
+  return Array.isArray(value) && value.every((item) => isIContent(item));
+}
+
+function stableKey(
+  message: QueuedSubmission,
+  index: number,
+  preview: string,
+): string {
+  if (message.queueId !== undefined) {
+    return `queued-${message.queueId}`;
+  }
+  if (message.promptId !== undefined && message.promptId !== '') {
+    return `queued-${message.promptId}-${index}`;
+  }
+  return `queued-${index}-${preview.slice(0, FALLBACK_KEY_PREVIEW_LENGTH)}`;
+}
+
+function calculatePanelHeight(rows: number): number {
+  return Math.max(1, Math.floor(rows * PANEL_HEIGHT_RATIO));
+}
+
+function calculateAvailableRows(panelHeight: number): number {
+  const borderRows = panelHeight > 1 ? 1 : 0;
+  const headerRows = 1;
+  return Math.max(0, panelHeight - borderRows - headerRows);
+}
+
+function calculateMaxVisibleItems(
+  panelHeight: number,
+  messageCount: number,
+): number {
+  const availableRows = calculateAvailableRows(panelHeight);
+  if (messageCount <= availableRows) {
+    return messageCount;
+  }
+  if (availableRows <= 1) {
+    return 0;
+  }
+  return availableRows - 1;
+}
+
+function queuedMessageSummary(messageCount: number): string {
+  return `${messageCount} queued ${messageCount === 1 ? 'message' : 'messages'}`;
+}
+
+function calculateExpandedPreviewWidth(
+  panelWidth: number,
+  messageNumber: number,
+): number {
+  const shellPaddingWidth = panelWidth > 2 ? 2 : 0;
+  const numberPrefixWidth = `${messageNumber}. `.length;
+  return Math.max(1, panelWidth - shellPaddingWidth - numberPrefixWidth);
+}
+
+export function prepareQueuedMessagesPanelView({
+  width,
+  collapsed = false,
+  messages,
+  columns,
+  rows,
+}: QueuedMessagesPanelProps & {
+  columns: number;
+  rows: number;
+}): QueuedMessagesPanelView {
+  if (messages.length === 0) {
+    return { kind: 'empty' };
+  }
+
+  const panelHeight = calculatePanelHeight(rows);
+  const boundedWidth = Math.max(1, Math.min(width, columns));
+
+  if (collapsed) {
+    return {
+      kind: 'collapsed',
+      width: boundedWidth,
+      panelHeight,
+      summary: queuedMessageSummary(messages.length),
+      nextPreview: truncateEnd(
+        extractPreviewText(messages[0].query),
+        Math.max(1, Math.floor(boundedWidth * COLLAPSED_PREVIEW_WIDTH_RATIO)),
+      ),
+    };
+  }
+
+  if (panelHeight < MIN_EXPANDED_PANEL_HEIGHT) {
+    return {
+      kind: 'compact',
+      width: boundedWidth,
+      summary: queuedMessageSummary(messages.length),
+    };
+  }
+
+  const maxVisibleItems = calculateMaxVisibleItems(
+    panelHeight,
+    messages.length,
+  );
+  const visibleMessages = messages.slice(0, maxVisibleItems);
+  const moreCount = messages.length - visibleMessages.length;
+
+  return {
+    kind: 'expanded',
+    width: boundedWidth,
+    panelHeight,
+    heading: `Queued Messages (${messages.length})`,
+    messages: visibleMessages.map((message, index) => {
+      const preview = extractPreviewText(message.query);
+      const messageNumber = index + 1;
+      return {
+        key: stableKey(message, index, preview),
+        number: messageNumber,
+        preview: truncateEnd(
+          preview,
+          calculateExpandedPreviewWidth(boundedWidth, messageNumber),
+        ),
+      };
+    }),
+    moreCount,
+    showMoreIndicator: moreCount > 0,
+  };
+}
+
+function CompactQueuedMessagesPanel({
+  view,
+}: {
+  view: Extract<QueuedMessagesPanelView, { kind: 'compact' }>;
+}) {
+  return (
+    <Box width={view.width} height={1} overflow="hidden">
+      <Text color={SemanticColors.text.accent} bold wrap="truncate-end">
+        {view.summary}
+      </Text>
+    </Box>
+  );
+}
+
+function QueuedMessagesPanelShell({
+  width,
+  panelHeight,
+  children,
+}: {
+  width: number;
+  panelHeight: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      height={panelHeight}
+      overflow="hidden"
+      borderStyle="single"
+      borderColor={SemanticColors.text.accent}
+      borderTop={panelHeight > 1}
+      borderBottom={false}
+      borderLeft={false}
+      borderRight={false}
+      paddingX={width > 2 ? 1 : 0}
+    >
+      {children}
+    </Box>
+  );
+}
+
+function CollapsedQueuedMessagesPanel({
+  view,
+}: {
+  view: Extract<QueuedMessagesPanelView, { kind: 'collapsed' }>;
+}) {
+  return (
+    <QueuedMessagesPanelShell width={view.width} panelHeight={view.panelHeight}>
+      <Box flexDirection="row" minHeight={1} overflow="hidden">
+        <Text color={SemanticColors.text.primary} bold wrap="truncate-end">
+          {view.summary}
+        </Text>
+        {view.nextPreview !== undefined && (
+          <Text color={SemanticColors.text.secondary}>
+            {' '}
+            • next: {view.nextPreview}
+          </Text>
+        )}
+        <Text color={SemanticColors.text.secondary}>
+          {' '}
+          • {QUEUED_MESSAGES_KEY_HINT} to expand
+        </Text>
+      </Box>
+    </QueuedMessagesPanelShell>
+  );
+}
+
+function ExpandedQueuedMessagesPanel({
+  view,
+}: {
+  view: Extract<QueuedMessagesPanelView, { kind: 'expanded' }>;
+}) {
+  return (
+    <QueuedMessagesPanelShell width={view.width} panelHeight={view.panelHeight}>
+      <Box minHeight={1} marginBottom={0}>
+        <Text color={SemanticColors.text.accent} bold>
+          {view.heading}
+        </Text>
+        <Text color={SemanticColors.text.secondary}>
+          {' '}
+          • {QUEUED_MESSAGES_KEY_HINT} to minimize
+        </Text>
+      </Box>
+      {view.messages.map((message) => (
+        <Box key={message.key} flexDirection="row" minHeight={1}>
+          <Text color={SemanticColors.text.secondary} bold>
+            {message.number}.{' '}
+          </Text>
+          <Box flexGrow={1} overflow="hidden">
+            <Text color={SemanticColors.text.secondary} wrap="truncate-end">
+              {message.preview}
+            </Text>
+          </Box>
+        </Box>
+      ))}
+      {view.showMoreIndicator && (
+        <Box flexDirection="row" minHeight={1}>
+          <Text color={SemanticColors.text.secondary}>
+            ▼ +{view.moreCount} more
+          </Text>
+        </Box>
+      )}
+    </QueuedMessagesPanelShell>
+  );
+}
+
+export function QueuedMessagesPanel({
+  width,
+  collapsed = false,
+  messages,
+}: QueuedMessagesPanelProps) {
+  const { columns, rows } = useTerminalSize();
+  const view = useMemo(
+    () =>
+      prepareQueuedMessagesPanelView({
+        width,
+        collapsed,
+        messages,
+        columns,
+        rows,
+      }),
+    [width, collapsed, messages, columns, rows],
+  );
+
+  if (view.kind === 'empty') {
+    return null;
+  }
+  if (view.kind === 'compact') {
+    return <CompactQueuedMessagesPanel view={view} />;
+  }
+  if (view.kind === 'collapsed') {
+    return <CollapsedQueuedMessagesPanel view={view} />;
+  }
+  return <ExpandedQueuedMessagesPanel view={view} />;
+}

package/src/ui/components/inputPromptHooks.ts

@@ -190,6 +190,7 @@ type InputPromptState = Pick<
   InputPromptProps,
   | 'buffer'
   | 'onSubmit'
+  | 'onSteer'
   | 'userMessages'
   | 'onClearScreen'
   | 'config'
@@ -390,6 +391,7 @@ const buildInputHandlerDeps = (
   inputHistory,
   handleSubmitAndClear: submitState.handleSubmitAndClear,
   handleSubmit: submitState.handleSubmit,
+  handleSteer: state.onSteer,
   shellHistory: completionState.shellHistory,
   reverseSearchCompletion: completionState.reverseSearchCompletion,
   shellPathCompletion: completionState.shellPathCompletion,

package/src/ui/components/inputPromptKeyHandlers.ts

@@ -415,6 +415,8 @@ export type InputHandlerDeps = {
   inputHistory: { navigateUp: () => void; navigateDown: () => void };
   handleSubmitAndClear: (value: string) => void;
   handleSubmit: (value: string) => void;
+  /** Optional steer callback: injects the text into the active agent loop at the next tool-call boundary. Returns true if consumed (streaming), false to fall through to newline. */
+  handleSteer?: (text: string) => boolean;
   shellHistory: {
     getPreviousCommand: () => string | null;
     getNextCommand: () => string | null;
@@ -518,6 +520,18 @@ const handleNavigationInputKeys = (key: Key, deps: InputHandlerDeps): boolean =>
 
 const handleSubmitAndEditKeys = (key: Key, deps: InputHandlerDeps): boolean => {
   const { buffer, handleSubmit, resetCompletionState } = deps;
+  // During streaming, Ctrl+Enter (STEER) injects the current buffer as a
+  // mid-turn steer. When not streaming, handleSteer returns false and the
+  // key falls through to NEWLINE (which also matches Ctrl+Enter) for normal
+  // multi-line input.
+  if (deps.handleSteer && keyMatchers[Command.STEER](key)) {
+    const consumed = deps.handleSteer(buffer.text);
+    if (consumed) {
+      buffer.setText('');
+      resetCompletionState();
+      return true;
+    }
+  }
   if (keyMatchers[Command.SUBMIT](key)) {
     submitBufferInput(buffer, handleSubmit);
     return true;

package/src/ui/components/inputPromptTypes.ts

@@ -14,6 +14,12 @@ import type { CliUiRuntime } from '../cliUiRuntime.js';
 export interface InputPromptProps {
   buffer: TextBuffer;
   onSubmit: (value: string) => void;
+  /**
+   * Optional steer callback: during streaming, Ctrl+Enter injects the text
+   * into the active agent loop at the next tool-call boundary. Returns true
+   * if consumed (agent is streaming), false to fall through to newline.
+   */
+  onSteer?: (text: string) => boolean;
   userMessages: readonly string[];
   onClearScreen: () => void;
   config: CliUiRuntime;

package/src/ui/components/messages/AiMessage.tsx

@@ -24,6 +24,16 @@ interface AiMessageProps {
   thinkingBlocks?: ThinkingBlock[]; // @plan:PLAN-20251202-THINKING-UI.P06
 }
 
+export function getVisibleThinkingBlocks(
+  showThinking: boolean,
+  thinkingBlocks?: ThinkingBlock[],
+): ThinkingBlock[] | undefined {
+  if (!showThinking) {
+    return undefined;
+  }
+  return thinkingBlocks?.filter((block) => block.isHidden !== true);
+}
+
 export const AiMessage: React.FC<AiMessageProps> = ({
   text,
   isPending,
@@ -46,10 +56,13 @@ export const AiMessage: React.FC<AiMessageProps> = ({
   const prefix = ' ';
   const prefixWidth = prefix.length;
 
-  // Don't show thinkingBlocks in pending items - LoadingIndicator shows the
-  // thought subject/description as spinner text during streaming. Only show
-  // thinkingBlocks in committed history items to avoid duplication (fixes #922).
-  const shouldShowThinkingBlocks = showThinking && !isPending;
+  // #1723: Show thinking blocks in BOTH pending and committed items so thinking
+  // content streams in real-time. The LoadingIndicator still shows the transient
+  // thought subject, but the growing thinking block is now visible below it.
+  const visibleThinkingBlocks = getVisibleThinkingBlocks(
+    showThinking,
+    thinkingBlocks,
+  );
 
   return (
     <Box flexDirection="column">
@@ -63,14 +76,13 @@ export const AiMessage: React.FC<AiMessageProps> = ({
           <Text color={Colors.DimComment}>{model}</Text>
         </Box>
       )}
-      {shouldShowThinkingBlocks &&
-        thinkingBlocks?.map((block, index) => (
-          <ThinkingBlockDisplay
-            key={`thinking-${index}`}
-            block={block}
-            visible={true}
-          />
-        ))}
+      {visibleThinkingBlocks?.map((block, index) => (
+        <ThinkingBlockDisplay
+          key={`thinking-${index}`}
+          block={block}
+          visible={true}
+        />
+      ))}
       <Box flexDirection="row">
         <Box width={prefixWidth}>
           <Text

package/src/ui/components/messages/ToolMessage.tsx

@@ -5,14 +5,14 @@
  */
 
 import type React from 'react';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import type { IndividualToolCallDisplay } from '../../types.js';
 import { ToolCallStatus } from '../../types.js';
 import { Colors } from '../../colors.js';
 import { theme } from '../../semantic-colors.js';
 import { SHELL_COMMAND_NAME, SHELL_NAME } from '../../constants.js';
-import { useKeypress } from '../../hooks/useKeypress.js';
+import { useShellCommandDisplay } from '../../contexts/ShellCommandDisplayContext.js';
 import {
   ShellExecutionService,
   splitCommands,
@@ -67,12 +67,14 @@ function extractEchoText(cmd: string): string | null {
  * Compute current subcommand for display when details visible.
  */
 function computeCurrentSubcommand(
-  isDetailsVisible: boolean,
+  showFullShellDescription: boolean,
   status: ToolCallStatus,
   description: string | undefined,
   resultDisplay: string | object | undefined,
 ): string | null {
-  if (!isDetailsVisible || status !== ToolCallStatus.Executing) return null;
+  if (!showFullShellDescription || status !== ToolCallStatus.Executing) {
+    return null;
+  }
   if (!description) return null;
 
   const outputString =
@@ -164,39 +166,11 @@ function computeShellFocusState(
   };
 }
 
-/**
- * Hook to manage details visibility toggle.
- */
-function useDetailsToggle(
-  status: ToolCallStatus,
-  isFocused: boolean,
-): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
-  const [isDetailsVisible, setIsDetailsVisible] = useState(false);
-
-  useKeypress(
-    (key) => {
-      if (
-        key.ctrl === true &&
-        key.name === 'r' &&
-        status === ToolCallStatus.Executing
-      ) {
-        setIsDetailsVisible((prev) => !prev);
-      }
-    },
-    { isActive: isFocused },
-  );
-
-  return [isDetailsVisible, setIsDetailsVisible];
-}
-
 /**
  * Render the executing status hint.
  */
-function renderExecutingHint(
-  status: ToolCallStatus,
-  isDetailsVisible: boolean,
-): React.ReactNode {
-  if (status !== ToolCallStatus.Executing || isDetailsVisible) {
+function renderExecutingHint(showExecutingHint: boolean): React.ReactNode {
+  if (!showExecutingHint) {
     return null;
   }
   return (
@@ -260,6 +234,7 @@ function renderToolMessageHeader(
   name: string,
   description: string,
   emphasis: TextEmphasis,
+  showFullDescription: boolean,
   isThisShellFocusable: boolean,
   isThisShellFocused: boolean,
 ): React.ReactNode {
@@ -276,6 +251,7 @@ function renderToolMessageHeader(
         status={status}
         description={description}
         emphasis={emphasis}
+        showFullDescription={showFullDescription}
       />
       {isThisShellFocusable && (
         <Box marginLeft={1} flexShrink={0}>
@@ -299,7 +275,7 @@ function renderToolMessageContent(
   borderColor: string,
   borderDimColor: boolean,
   status: ToolCallStatus,
-  isDetailsVisible: boolean,
+  showExecutingHint: boolean,
   currentSubcommand: string | null,
   resultDisplay: string | object | undefined,
   availableTerminalHeight: number | undefined,
@@ -323,7 +299,7 @@ function renderToolMessageContent(
       flexDirection="column"
       overflowX="hidden"
     >
-      {renderExecutingHint(status, isDetailsVisible)}
+      {renderExecutingHint(showExecutingHint)}
       {renderCurrentSubcommand(currentSubcommand)}
       <ToolResultDisplay
         resultDisplay={resultDisplay}
@@ -355,6 +331,7 @@ export interface ToolMessageProps extends IndividualToolCallDisplay {
 }
 
 export const ToolMessage: React.FC<ToolMessageProps> = ({
+  callId,
   name,
   description,
   resultDisplay,
@@ -372,7 +349,13 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   borderColor = Colors.Gray,
   borderDimColor = false,
 }) => {
-  const [isDetailsVisible] = useDetailsToggle(status, isFocused);
+  const isShellTool = name === SHELL_NAME || name === SHELL_COMMAND_NAME;
+  const showFullShellDescription = useShellCommandDisplay(
+    callId,
+    name,
+    status,
+    isFocused,
+  );
 
   const { isThisShellFocused, isThisShellFocusable } = computeShellFocusState(
     name,
@@ -386,12 +369,12 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
   const currentSubcommand = useMemo(
     () =>
       computeCurrentSubcommand(
-        isDetailsVisible,
+        showFullShellDescription,
         status,
         description,
         resultDisplay,
       ),
-    [isDetailsVisible, status, description, resultDisplay],
+    [showFullShellDescription, status, description, resultDisplay],
   );
 
   return (
@@ -405,6 +388,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
         name,
         description || '',
         emphasis,
+        showFullShellDescription,
         isThisShellFocusable,
         isThisShellFocused,
       )}
@@ -413,7 +397,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
         borderColor,
         borderDimColor,
         status,
-        isDetailsVisible,
+        isShellTool &&
+          status === ToolCallStatus.Executing &&
+          !showFullShellDescription,
         currentSubcommand,
         resultDisplay,
         availableTerminalHeight,

package/src/ui/containers/AppContainer/builders/buildUIActions.ts

@@ -25,6 +25,7 @@ export interface UIActionsParams {
 
   // Input actions
   handleUserInputSubmit: (value: string) => void;
+  handleSteer: (text: string) => boolean;
   handleClearScreen: () => void;
 
   // Theme dialog
@@ -92,7 +93,7 @@ export interface UIActionsParams {
   exitToolsDialog: () => void;
 
   // Folder trust dialog
-  handleFolderTrustSelect: (choice: FolderTrustChoice) => void;
+  handleFolderTrustSelect: (choice: FolderTrustChoice) => Promise<void>;
 
   // Welcome onboarding
   welcomeActions: UIActions['welcomeActions'];
@@ -198,6 +199,7 @@ export function buildUIActions(params: UIActionsParams): UIActions {
 
     // Input actions
     handleUserInputSubmit: params.handleUserInputSubmit,
+    handleSteer: params.handleSteer,
     handleClearScreen: params.handleClearScreen,
 
     // Theme dialog