Add progress-focused collapsed preview for editor-multi-prompt

Author: brandonkachen

agents/editor/best-of-n/editor-multi-prompt.ts

@@ -206,13 +206,14 @@ function* handleStepsMultiPrompt({
   }
 
   // Extract suggested improvements from selector output
-  const { suggestedImprovements } = selectorOutput
+  const { reason, suggestedImprovements } = selectorOutput
 
   // Set output with the applied results and suggested improvements
   yield {
     toolName: 'set_output',
     input: {
       chosenStrategy: chosenImplementation.strategy,
+      reason,
       toolResults: appliedToolResults,
       suggestedImprovements,
     },

cli/src/components/blocks/agent-branch-item.tsx

@@ -4,6 +4,7 @@ import React, { memo, type ReactNode } from 'react'
 import { useTheme } from '../../hooks/use-theme'
 import { useWhyDidYouUpdateById } from '../../hooks/use-why-did-you-update'
 import { getCliEnv } from '../../utils/env'
+import { MAX_COLLAPSED_LINES, truncateToLines } from '../../utils/strings'
 import { BORDER_CHARS } from '../../utils/ui-constants'
 import { Button } from '../button'
 import { CollapseButton } from '../collapse-button'
@@ -15,8 +16,8 @@ interface AgentBranchItemProps {
   agentId?: string
   isCollapsed: boolean
   isStreaming: boolean
-  streamingPreview: string
-  finishedPreview: string
+  /** Preview text shown when collapsed (empty string = no preview) */
+  preview: string
   statusLabel?: string
   statusColor?: string
   statusIndicator?: string
@@ -32,8 +33,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
     agentId,
     isCollapsed,
     isStreaming,
-    streamingPreview,
-    finishedPreview,
+    preview,
     statusLabel,
     statusColor,
     statusIndicator = '●',
@@ -64,8 +64,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
         ? `${statusLabel} ${statusIndicator}`
         : `${statusIndicator} ${statusLabel}`
       : null
-  const showCollapsedPreview =
-    (isStreaming && !!streamingPreview) || (!isStreaming && !!finishedPreview)
+  const showCollapsedPreview = preview.length > 0
 
   const isTextRenderable = (value: ReactNode): boolean => {
     if (value === null || value === undefined || typeof value === 'boolean') {
@@ -234,7 +233,7 @@ export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
                 fg={isStreaming ? theme.foreground : theme.muted}
                 attributes={getAttributes(TextAttributes.ITALIC)}
               >
-                {isStreaming ? streamingPreview : finishedPreview}
+                {truncateToLines(preview, MAX_COLLAPSED_LINES)}
               </text>
             </Button>
           ) : null

cli/src/components/blocks/agent-branch-wrapper.tsx

@@ -1,5 +1,11 @@
 import { TextAttributes } from '@opentui/core'
-import React, { memo, useCallback, useMemo, useRef, type ReactNode } from 'react'
+import React, {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from 'react'
 
 import { AgentBlockGrid } from './agent-block-grid'
 import { AgentBranchItem } from './agent-branch-item'
@@ -13,9 +19,16 @@ import { useChatStore } from '../../state/chat-store'
 import { isTextBlock } from '../../types/chat'
 import { getAgentStatusInfo } from '../../utils/agent-helpers'
 import { extractHtmlBlockMargins } from '../../utils/block-margins'
-import { processBlocks, type BlockProcessorHandlers } from '../../utils/block-processor'
-import { shouldRenderAsSimpleText } from '../../utils/constants'
-import { isImplementorAgent, getImplementorIndex } from '../../utils/implementor-helpers'
+import {
+  processBlocks,
+  type BlockProcessorHandlers,
+} from '../../utils/block-processor'
+import { shouldRenderAsSimpleText, isMultiPromptEditor } from '../../utils/constants'
+import {
+  isImplementorAgent,
+  getImplementorIndex,
+  getMultiPromptPreview,
+} from '../../utils/implementor-helpers'
 import { AGENT_CONTENT_HORIZONTAL_PADDING } from '../../utils/layout-helpers'
 
 import type {
@@ -26,6 +39,45 @@ import type {
 } from '../../types/chat'
 import type { MarkdownPalette } from '../../utils/markdown-renderer'
 
+/**
+ * Compute preview text for collapsed agent display.
+ * Returns empty string when preview shouldn't be shown (expanded state).
+ */
+function getCollapsedPreview(
+  agentBlock: AgentContentBlock,
+  isStreaming: boolean,
+  isCollapsed: boolean,
+): string {
+  // No preview needed if expanded and not streaming
+  if (!isStreaming && !isCollapsed) {
+    return ''
+  }
+
+  // For multi-prompt editors, try progress-focused preview first
+  if (isMultiPromptEditor(agentBlock.agentType)) {
+    const multiPromptPreview = getMultiPromptPreview(
+      agentBlock.blocks,
+      agentBlock.status === 'complete',
+    )
+    if (multiPromptPreview) {
+      return multiPromptPreview
+    }
+  }
+
+  // Default preview: use initialPrompt or first line of text content
+  if (agentBlock.initialPrompt) {
+    return sanitizePreview(agentBlock.initialPrompt)
+  }
+
+  const textContent =
+    agentBlock.blocks
+      ?.filter(isTextBlock)
+      .map((b) => b.content)
+      .join('') || ''
+  const firstLine = textContent.split('\n').find((line) => line.trim()) || ''
+  return `${sanitizePreview(firstLine)}...`
+}
+
 interface AgentBodyProps {
   agentBlock: Extract<ContentBlock, { type: 'agent' }>
   keyPrefix: string
@@ -51,7 +103,10 @@ interface AgentBodyPropsRef {
   onBuildMax: () => void
   isLastMessage?: boolean
   theme: ReturnType<typeof useTheme>
-  getAgentMarkdownOptions: (indent: number) => { codeBlockWidth: number; palette: MarkdownPalette }
+  getAgentMarkdownOptions: (indent: number) => {
+    codeBlockWidth: number
+    palette: MarkdownPalette
+  }
 }
 
 const AgentBody = memo(
@@ -75,7 +130,9 @@ const AgentBody = memo(
         return {
           codeBlockWidth: Math.max(
             10,
-            availableWidth - AGENT_CONTENT_HORIZONTAL_PADDING - indentationOffset,
+            availableWidth -
+              AGENT_CONTENT_HORIZONTAL_PADDING -
+              indentationOffset,
           ),
           palette: {
             ...markdownPalette,
@@ -110,7 +167,10 @@ const AgentBody = memo(
           const p = propsRef.current
           return (
             <ThinkingBlock
-              key={reasoningBlocks[0]?.thinkingId ?? `${p.keyPrefix}-thinking-${startIndex}`}
+              key={
+                reasoningBlocks[0]?.thinkingId ??
+                `${p.keyPrefix}-thinking-${startIndex}`
+              }
               blocks={reasoningBlocks}
               onToggleCollapsed={p.onToggleCollapsed}
               availableWidth={p.availableWidth}
@@ -179,7 +239,8 @@ const AgentBody = memo(
           if (block.type === 'text') {
             const textBlock = block as TextContentBlock
             const nestedStatus = textBlock.status
-            const isNestedStreamingText = p.parentIsStreaming || nestedStatus === 'running'
+            const isNestedStreamingText =
+              p.parentIsStreaming || nestedStatus === 'running'
             const filteredNestedContent = isNestedStreamingText
               ? trimTrailingNewlines(textBlock.content)
               : textBlock.content.trim()
@@ -211,7 +272,8 @@ const AgentBody = memo(
 
           if (block.type === 'html') {
             const htmlBlock = block as HtmlContentBlock
-            const { marginTop, marginBottom } = extractHtmlBlockMargins(htmlBlock)
+            const { marginTop, marginBottom } =
+              extractHtmlBlockMargins(htmlBlock)
 
             return (
               <box
@@ -268,7 +330,9 @@ export const AgentBranchWrapper = memo(
   }: AgentBranchWrapperProps) => {
     const theme = useTheme()
     // Derive streaming boolean for this specific agent to avoid re-renders when other agents change
-    const agentIsStreaming = useChatStore((state) => state.streamingAgents.has(agentBlock.agentId))
+    const agentIsStreaming = useChatStore((state) =>
+      state.streamingAgents.has(agentBlock.agentId),
+    )
 
     if (shouldRenderAsSimpleText(agentBlock.agentType)) {
       const isStreaming = agentBlock.status === 'running' || agentIsStreaming
@@ -341,29 +405,15 @@ export const AgentBranchWrapper = memo(
     const isCollapsed = agentBlock.isCollapsed ?? false
     const isStreaming = agentBlock.status === 'running' || agentIsStreaming
 
-    const allTextContent =
-      agentBlock.blocks
-        ?.filter(isTextBlock)
-        .map((nested) => nested.content)
-        .join('') || ''
-
-    const lines = allTextContent.split('\n').filter((line) => line.trim())
-    const firstLine = lines[0] || ''
-
-    const streamingPreview = isStreaming
-      ? agentBlock.initialPrompt
-        ? sanitizePreview(agentBlock.initialPrompt)
-        : `${sanitizePreview(firstLine)}...`
-      : ''
-
-    const finishedPreview =
-      !isStreaming && isCollapsed && agentBlock.initialPrompt
-        ? sanitizePreview(agentBlock.initialPrompt)
-        : ''
+    // Compute collapsed preview text
+    const preview = getCollapsedPreview(agentBlock, isStreaming, isCollapsed)
 
-    const isActive = isStreaming || agentBlock.status === 'running'
-    const { indicator: statusIndicator, label: statusLabel, color: statusColor } =
-      getAgentStatusInfo(isActive ? 'running' : agentBlock.status, theme)
+    const effectiveStatus = isStreaming ? 'running' : agentBlock.status
+    const {
+      indicator: statusIndicator,
+      label: statusLabel,
+      color: statusColor,
+    } = getAgentStatusInfo(effectiveStatus, theme)
 
     const onToggle = useCallback(() => {
       onToggleCollapsed(agentBlock.agentId)
@@ -377,8 +427,7 @@ export const AgentBranchWrapper = memo(
           agentId={agentBlock.agentId}
           isCollapsed={isCollapsed}
           isStreaming={isStreaming}
-          streamingPreview={streamingPreview}
-          finishedPreview={finishedPreview}
+          preview={preview}
           statusLabel={statusLabel ?? undefined}
           statusColor={statusColor}
           statusIndicator={statusIndicator}