@alumbwe/anvil 1.0.0

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

@@ -0,0 +1,493 @@
+import { TextAttributes } from '@opentui/core'
+import React, {
+  memo,
+  useCallback,
+  useMemo,
+  useRef,
+  type ReactNode,
+} from 'react'
+
+import { AgentBlockGrid } from './agent-block-grid'
+import { AgentBranchItem } from './agent-branch-item'
+import { trimNewlines, sanitizePreview } from './block-helpers'
+import { ContentWithMarkdown } from './content-with-markdown'
+import { ImplementorGroup } from './implementor-row'
+import { ThinkingBlock } from './thinking-block'
+import { ToolBlockGroup } from './tool-block-group'
+import { useTheme } from '../../hooks/use-theme'
+import { useChatStore } from '../../state/chat-store'
+import { isTextBlock } from '../../types/chat'
+import {
+  getAgentDisplayPrompt,
+  getBasherFinishedOutputPreview,
+} from '../../utils/agent-display'
+import { getAgentStatusInfo } from '../../utils/agent-helpers'
+import {
+  processBlocks,
+  type BlockProcessorHandlers,
+} from '../../utils/block-processor'
+import { getCodeSearcherCollapsedPreview } from '../../utils/code-search-summary'
+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 {
+  AgentContentBlock,
+  ContentBlock,
+  TextContentBlock,
+  HtmlContentBlock,
+  ToolContentBlock,
+} 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,
+  availableWidth: number,
+): string {
+  // No preview needed if expanded and not streaming
+  if (!isStreaming && !isCollapsed) {
+    return ''
+  }
+
+  if (!isStreaming) {
+    const outputPreview = getBasherFinishedOutputPreview(
+      agentBlock,
+      Math.max(24, Math.min(120, availableWidth - 4)),
+    )
+    if (outputPreview) {
+      return outputPreview
+    }
+  }
+
+  // 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
+    }
+  }
+
+  const codeSearcherPreview = getCodeSearcherCollapsedPreview(agentBlock)
+  if (codeSearcherPreview) {
+    return codeSearcherPreview
+  }
+
+  // Default preview: use the displayed prompt or first line of text content.
+  const displayPrompt = getAgentDisplayPrompt(agentBlock)
+  if (displayPrompt) {
+    return sanitizePreview(displayPrompt)
+  }
+
+  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
+  parentIsStreaming: boolean
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  isLastMessage?: boolean
+}
+
+/** Props stored in ref for stable handler access in AgentBody */
+interface AgentBodyPropsRef {
+  agentBlock: AgentContentBlock
+  keyPrefix: string
+  nestedBlocks: ContentBlock[]
+  parentIsStreaming: boolean
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  isLastMessage?: boolean
+  theme: ReturnType<typeof useTheme>
+  getAgentMarkdownOptions: (indent: number) => {
+    codeBlockWidth: number
+    palette: MarkdownPalette
+  }
+}
+
+const AgentBody = memo(
+  ({
+    agentBlock,
+    keyPrefix,
+    parentIsStreaming,
+    availableWidth,
+    markdownPalette,
+    onToggleCollapsed,
+    onBuildFast,
+    onBuildMax,
+    onBuildLite,
+    isLastMessage,
+  }: AgentBodyProps): ReactNode[] => {
+    const theme = useTheme()
+    const nestedBlocks = agentBlock.blocks ?? []
+
+    const getAgentMarkdownOptions = useCallback(
+      (indent: number) => {
+        const indentationOffset = indent * 2
+        return {
+          codeBlockWidth: Math.max(
+            10,
+            availableWidth -
+              AGENT_CONTENT_HORIZONTAL_PADDING -
+              indentationOffset,
+          ),
+          palette: {
+            ...markdownPalette,
+            codeTextFg: theme.foreground,
+          },
+        }
+      },
+      [availableWidth, markdownPalette, theme.foreground],
+    )
+
+    // Store props in ref for stable handler access (avoids 12+ useMemo dependencies)
+    const propsRef = useRef<AgentBodyPropsRef>(null!)
+    propsRef.current = {
+      agentBlock,
+      keyPrefix,
+      nestedBlocks,
+      parentIsStreaming,
+      availableWidth,
+      markdownPalette,
+      onToggleCollapsed,
+      onBuildFast,
+      onBuildMax,
+      onBuildLite,
+      isLastMessage,
+      theme,
+      getAgentMarkdownOptions,
+    }
+
+    // Handlers are stable (empty deps) and read latest props from ref
+    const handlers: BlockProcessorHandlers = useMemo(
+      () => ({
+        onReasoningGroup: (reasoningBlocks, startIndex) => {
+          const p = propsRef.current
+          return (
+            <ThinkingBlock
+              key={
+                reasoningBlocks[0]?.thinkingId ??
+                `${p.keyPrefix}-thinking-${startIndex}`
+              }
+              blocks={reasoningBlocks}
+              onToggleCollapsed={p.onToggleCollapsed}
+              availableWidth={p.availableWidth}
+              isNested={true}
+              isMessageComplete={p.agentBlock.status === 'complete'}
+            />
+          )
+        },
+
+        onToolGroup: (toolBlocks, startIndex, nextIndex) => {
+          const p = propsRef.current
+          return (
+            <ToolBlockGroup
+              key={`${p.keyPrefix}-tool-group-${startIndex}`}
+              toolBlocks={toolBlocks}
+              keyPrefix={p.keyPrefix}
+              startIndex={startIndex}
+              nextIndex={nextIndex}
+              siblingBlocks={p.nestedBlocks}
+              availableWidth={p.availableWidth}
+              onToggleCollapsed={p.onToggleCollapsed}
+              markdownPalette={p.markdownPalette}
+            />
+          )
+        },
+
+        onImplementorGroup: (implementors, startIndex) => {
+          const p = propsRef.current
+          return (
+            <ImplementorGroup
+              key={`${p.keyPrefix}-implementor-group-${startIndex}`}
+              implementors={implementors}
+              siblingBlocks={p.nestedBlocks}
+              availableWidth={p.availableWidth}
+            />
+          )
+        },
+
+        onAgentGroup: (agentBlocks, startIndex) => {
+          const p = propsRef.current
+          return (
+            <AgentBlockGrid
+              key={`${p.keyPrefix}-agent-grid-${startIndex}`}
+              agentBlocks={agentBlocks}
+              keyPrefix={`${p.keyPrefix}-agent-grid-${startIndex}`}
+              availableWidth={p.availableWidth}
+              renderAgentBranch={(innerAgentBlock, prefix, width) => (
+                <AgentBranchWrapper
+                  agentBlock={innerAgentBlock}
+                  keyPrefix={prefix}
+                  availableWidth={width}
+                  markdownPalette={p.markdownPalette}
+                  onToggleCollapsed={p.onToggleCollapsed}
+                  onBuildFast={p.onBuildFast}
+                  onBuildMax={p.onBuildMax}
+                  onBuildLite={p.onBuildLite}
+                  siblingBlocks={p.nestedBlocks}
+                  isLastMessage={p.isLastMessage}
+                />
+              )}
+            />
+          )
+        },
+
+        onSingleBlock: (block, index) => {
+          const p = propsRef.current
+          if (block.type === 'text') {
+            const textBlock = block as TextContentBlock
+            const nestedStatus = textBlock.status
+            const isNestedStreamingText =
+              p.parentIsStreaming || nestedStatus === 'running'
+            const filteredNestedContent = isNestedStreamingText
+              ? trimNewlines(textBlock.content)
+              : textBlock.content.trim()
+            if (!filteredNestedContent) {
+              return null
+            }
+            const markdownOptionsForLevel = p.getAgentMarkdownOptions(0)
+            const explicitColor = textBlock.color
+            const nestedTextColor = explicitColor ?? p.theme.foreground
+
+            return (
+              <text
+                key={`${p.keyPrefix}-text-${index}`}
+                style={{
+                  wrapMode: 'word',
+                  fg: nestedTextColor,
+                }}
+              >
+                <ContentWithMarkdown
+                  content={filteredNestedContent}
+                  isStreaming={isNestedStreamingText}
+                  codeBlockWidth={markdownOptionsForLevel.codeBlockWidth}
+                  palette={markdownOptionsForLevel.palette}
+                />
+              </text>
+            )
+          }
+
+          if (block.type === 'html') {
+            const htmlBlock = block as HtmlContentBlock
+
+            return (
+              <box
+                key={`${p.keyPrefix}-html-${index}`}
+                style={{
+                  flexDirection: 'column',
+                  gap: 0,
+                }}
+              >
+                {htmlBlock.render({
+                  textColor: p.theme.foreground,
+                  theme: p.theme,
+                })}
+              </box>
+            )
+          }
+
+          // Fallback for unknown block types
+          return null
+        },
+      }),
+      [], // Empty deps - handlers read from propsRef.current
+    )
+
+    return processBlocks(nestedBlocks, handlers) as ReactNode[]
+  },
+)
+
+export interface AgentBranchWrapperProps {
+  agentBlock: Extract<ContentBlock, { type: 'agent' }>
+  keyPrefix: string
+  availableWidth: number
+  markdownPalette: MarkdownPalette
+  onToggleCollapsed: (id: string) => void
+  onBuildFast: () => void
+  onBuildMax: () => void
+  onBuildLite: () => void
+  siblingBlocks?: ContentBlock[]
+  isLastMessage?: boolean
+}
+
+export const AgentBranchWrapper = memo(
+  ({
+    agentBlock,
+    keyPrefix,
+    availableWidth,
+    markdownPalette,
+    onToggleCollapsed,
+    onBuildFast,
+    onBuildMax,
+    onBuildLite,
+    siblingBlocks,
+    isLastMessage,
+  }: 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),
+    )
+
+    if (shouldRenderAsSimpleText(agentBlock.agentType)) {
+      const isStreaming = agentBlock.status === 'running' || agentIsStreaming
+
+      const effectiveStatus = isStreaming ? 'running' : agentBlock.status
+      const { indicator: statusIndicator, color: statusColor } =
+        getAgentStatusInfo(effectiveStatus, theme)
+
+      let statusText = 'Selecting best'
+      let reason: string | undefined
+
+      const isComplete = agentBlock.status === 'complete'
+      if (isComplete && siblingBlocks) {
+        const blocks = agentBlock.blocks ?? []
+        // Find the set_output tool call block (not necessarily the last block)
+        const setOutputBlock = blocks.find(
+          (b): b is ToolContentBlock =>
+            b.type === 'tool' && b.toolName === 'set_output',
+        )
+        // set_output wraps data in a 'data' property, so we need to access input.data
+        const outputData = (
+          setOutputBlock?.input as { data?: Record<string, unknown> }
+        )?.data
+        const implementationId = outputData?.implementationId as
+          | string
+          | undefined
+        if (implementationId) {
+          const letterIndex = implementationId.charCodeAt(0) - 65
+          const implementors = siblingBlocks.filter(
+            (b): b is AgentContentBlock =>
+              b.type === 'agent' && isImplementorAgent(b),
+          )
+
+          reason = outputData?.reason as string | undefined
+
+          const selectedAgent = implementors[letterIndex]
+          if (selectedAgent) {
+            const index = getImplementorIndex(selectedAgent, siblingBlocks)
+            statusText =
+              index !== undefined
+                ? `Selected Strategy #${index + 1}`
+                : 'Selected'
+          }
+        }
+      }
+
+      return (
+        <box
+          key={keyPrefix}
+          style={{
+            flexDirection: 'column',
+            gap: 0,
+            width: '100%',
+          }}
+        >
+          <text style={{ wrapMode: 'word' }}>
+            <span fg={statusColor}>{statusIndicator}</span>
+            <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+              {' '}
+              {statusText}
+            </span>
+          </text>
+          {reason && (
+            <text
+              style={{
+                wrapMode: 'word',
+                fg: theme.foreground,
+                marginLeft: 2,
+              }}
+            >
+              {reason}
+            </text>
+          )}
+        </box>
+      )
+    }
+
+    const isCollapsed = agentBlock.isCollapsed ?? false
+    const isStreaming = agentBlock.status === 'running' || agentIsStreaming
+
+    // Compute collapsed preview text
+    const preview = getCollapsedPreview(
+      agentBlock,
+      isStreaming,
+      isCollapsed,
+      availableWidth,
+    )
+    const displayPrompt = getAgentDisplayPrompt(agentBlock)
+
+    const effectiveStatus = isStreaming ? 'running' : agentBlock.status
+    const {
+      indicator: statusIndicator,
+      label: statusLabel,
+      color: statusColor,
+    } = getAgentStatusInfo(effectiveStatus, theme)
+
+    const onToggle = useCallback(() => {
+      onToggleCollapsed(agentBlock.agentId)
+    }, [onToggleCollapsed, agentBlock.agentId])
+
+    return (
+      <box key={keyPrefix} style={{ flexDirection: 'column', gap: 0 }}>
+        <AgentBranchItem
+          name={agentBlock.agentName}
+          prompt={displayPrompt}
+          agentId={agentBlock.agentId}
+          isCollapsed={isCollapsed}
+          isStreaming={isStreaming}
+          preview={preview}
+          statusLabel={statusLabel ?? undefined}
+          statusColor={statusColor}
+          statusIndicator={statusIndicator}
+          onToggle={onToggle}
+        >
+          <AgentBody
+            agentBlock={agentBlock}
+            keyPrefix={keyPrefix}
+            parentIsStreaming={isStreaming}
+            availableWidth={availableWidth}
+            markdownPalette={markdownPalette}
+            onToggleCollapsed={onToggleCollapsed}
+            onBuildFast={onBuildFast}
+            onBuildMax={onBuildMax}
+            onBuildLite={onBuildLite}
+            isLastMessage={isLastMessage}
+          />
+        </AgentBranchItem>
+      </box>
+    )
+  },
+)

package/src/components/blocks/agent-list-branch.tsx

@@ -0,0 +1,77 @@
+import { pluralize } from '@anvil/common/util/string'
+import { memo, useCallback } from 'react'
+
+import { useTheme } from '../../hooks/use-theme'
+import { ToolCallItem } from '../tools/tool-call-item'
+
+import type { ContentBlock } from '../../types/chat'
+
+interface AgentListBranchProps {
+  agentListBlock: Extract<ContentBlock, { type: 'agent-list' }>
+  keyPrefix: string
+  onToggleCollapsed: (id: string) => void
+}
+
+export const AgentListBranch = memo(
+  ({ agentListBlock, keyPrefix, onToggleCollapsed }: AgentListBranchProps) => {
+    const theme = useTheme()
+    const isCollapsed = agentListBlock.isCollapsed ?? true
+    const { agents } = agentListBlock
+
+    const sortedAgents = [...agents].sort((a, b) => {
+      const displayNameComparison = (a.displayName || '')
+        .toLowerCase()
+        .localeCompare((b.displayName || '').toLowerCase())
+
+      return (
+        displayNameComparison ||
+        a.id.toLowerCase().localeCompare(b.id.toLowerCase())
+      )
+    })
+
+    const agentCount = sortedAgents.length
+
+    const formatIdentifier = useCallback(
+      (agent: { id: string; displayName: string }) =>
+        agent.displayName && agent.displayName !== agent.id
+          ? `${agent.displayName} (${agent.id})`
+          : agent.displayName || agent.id,
+      [],
+    )
+
+    const headerText = pluralize(agentCount, 'local agent')
+
+    const handleToggle = useCallback(() => {
+      onToggleCollapsed(agentListBlock.id)
+    }, [onToggleCollapsed, agentListBlock.id])
+
+    return (
+      <box key={keyPrefix}>
+        <ToolCallItem
+          name={headerText}
+          content={
+            <box style={{ flexDirection: 'column', gap: 0 }}>
+              {sortedAgents.map((agent, idx) => {
+                const identifier = formatIdentifier(agent)
+                return (
+                  <text
+                    key={`agent-${idx}`}
+                    style={{ wrapMode: 'word', fg: theme.foreground }}
+                  >
+                    {`• ${identifier}`}
+                  </text>
+                )
+              })}
+            </box>
+          }
+          isCollapsed={isCollapsed}
+          isStreaming={false}
+          streamingPreview=""
+          finishedPreview=""
+          onToggle={handleToggle}
+          dense
+        />
+      </box>
+    )
+  },
+)

package/src/components/blocks/ask-user-branch.tsx

@@ -0,0 +1,81 @@
+import { pluralize } from '@anvil/common/util/string'
+import { TextAttributes } from '@opentui/core'
+import React from 'react'
+
+import { useTheme } from '../../hooks/use-theme'
+import { BORDER_CHARS } from '../../utils/ui-constants'
+
+import type { AskUserContentBlock } from '../../types/chat'
+
+interface AskUserBranchProps {
+  block: AskUserContentBlock
+  availableWidth: number
+}
+
+export const AskUserBranch = ({ block, availableWidth }: AskUserBranchProps) => {
+  const theme = useTheme()
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        width: Math.max(10, availableWidth - 2),
+        borderStyle: 'single',
+        borderColor: theme.secondary,
+        customBorderChars: BORDER_CHARS,
+        padding: 1,
+        marginTop: 1,
+        marginBottom: 1,
+      }}
+    >
+      {block.skipped ? (
+        <text style={{ fg: theme.muted, attributes: TextAttributes.ITALIC }}>
+          You skipped the {pluralize(block.questions.length, 'question', { includeCount: false })}.
+        </text>
+      ) : (
+        <box style={{ flexDirection: 'column', gap: 1 }}>
+          <text style={{ fg: theme.secondary, attributes: TextAttributes.BOLD }}>
+            Your {pluralize(block.questions.length, 'answer', { includeCount: false })}:
+          </text>
+          {block.questions.map((q, idx) => {
+            const answer = block.answers?.find((a) => a.questionIndex === idx)
+
+            // Determine display answer based on answer type
+            let displayAnswer: string
+            let isCustomAnswer = false
+
+            if (answer?.otherText) {
+              // Custom text input
+              displayAnswer = `"${answer.otherText}"`
+              isCustomAnswer = true
+            } else if (answer?.selectedOptions) {
+              // Multi-select: join options with commas
+              displayAnswer = answer.selectedOptions.join(', ')
+            } else if (answer?.selectedOption) {
+              // Single-select
+              displayAnswer = answer.selectedOption
+            } else {
+              displayAnswer = 'No answer'
+            }
+
+            return (
+              <box key={idx} style={{ flexDirection: 'column', gap: 0 }}>
+                <text style={{ fg: theme.foreground }}>
+                  {idx + 1}. {q.question}
+                </text>
+                <text style={{
+                  fg: theme.primary,
+                  marginLeft: 2,
+                  attributes: isCustomAnswer ? TextAttributes.ITALIC : undefined,
+                }}>
+                  ↳ {displayAnswer}
+                </text>
+              </box>
+            )
+          })}
+        </box>
+      )}
+    </box>
+  )
+}

package/src/components/blocks/block-helpers.ts

@@ -0,0 +1,11 @@
+
+export function trimNewlines(str: string): string {
+  return str.replace(/^\n+|\n+$/g, '')
+}
+
+export function sanitizePreview(text: string): string {
+  return text.replace(/[#*_`~\[\]()]/g, '').trim()
+}
+
+// Re-export from block-processor for backwards compatibility
+export { isReasoningTextBlock } from '../../utils/block-processor'