@alumbwe/anvil 1.0.0

package/src/components/attachment-card.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import { Button } from './button'
+import { useTheme } from '../hooks/use-theme'
+import { IMAGE_CARD_BORDER_CHARS } from '../utils/ui-constants'
+
+import type { ReactNode } from 'react'
+
+export interface AttachmentCardProps {
+  /** Width of the card in characters */
+  width: number
+  /** Content to render inside the bordered card. */
+  children: ReactNode
+  /** Callback when the remove button is clicked. If omitted, the button is hidden. */
+  onRemove?: () => void
+  /** Whether to show the remove button (default: true). Ignored if onRemove is not provided. */
+  showRemoveButton?: boolean
+}
+
+/**
+ * Shared attachment card shell used by image and text attachments.
+ * Renders a bordered card with an optional 'X' remove button to the right.
+ */
+export const AttachmentCard = ({
+  width,
+  children,
+  onRemove,
+  showRemoveButton = true,
+}: AttachmentCardProps) => {
+  const theme = useTheme()
+  const [isCloseHovered, setIsCloseHovered] = useState(false)
+
+  const shouldShowClose = showRemoveButton && !!onRemove
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+      <box
+        style={{
+          flexDirection: 'column',
+          borderStyle: 'single',
+          borderColor: theme.imageCardBorder,
+          width,
+          padding: 0,
+        }}
+        customBorderChars={IMAGE_CARD_BORDER_CHARS}
+      >
+        {children}
+      </box>
+
+      {shouldShowClose ? (
+        <Button
+          onClick={onRemove}
+          onMouseOver={() => setIsCloseHovered(true)}
+          onMouseOut={() => setIsCloseHovered(false)}
+          style={{ paddingLeft: 0, paddingRight: 0 }}
+        >
+          <text style={{ fg: isCloseHovered ? theme.error : theme.muted }}>X</text>
+        </Button>
+      ) : (
+        // Keep layout aligned when there is no close button
+        <box style={{ width: 1 }} />
+      )}
+    </box>
+  )
+}

package/src/components/blocks/agent-block-grid.tsx

@@ -0,0 +1,58 @@
+import React, { memo, useCallback, useMemo } from 'react'
+
+import { GridLayout } from '../grid-layout'
+import { splitAgentsBySize } from '../../utils/block-processor'
+
+import type { AgentContentBlock } from '../../types/chat'
+
+export interface AgentBlockGridProps {
+  agentBlocks: AgentContentBlock[]
+  keyPrefix: string
+  availableWidth: number
+  renderAgentBranch: (
+    agentBlock: AgentContentBlock,
+    keyPrefix: string,
+    availableWidth: number,
+  ) => React.ReactNode
+}
+
+export const AgentBlockGrid = memo(
+  ({
+    agentBlocks,
+    keyPrefix,
+    availableWidth,
+    renderAgentBranch,
+  }: AgentBlockGridProps) => {
+    const getItemKey = useCallback(
+      (agentBlock: AgentContentBlock) => agentBlock.agentId,
+      [],
+    )
+
+    const renderItem = useCallback(
+      (agentBlock: AgentContentBlock, idx: number, columnWidth: number) =>
+        renderAgentBranch(agentBlock, `${keyPrefix}-agent-${idx}`, columnWidth),
+      [keyPrefix, renderAgentBranch],
+    )
+
+    const subGroups = useMemo(
+      () => splitAgentsBySize(agentBlocks),
+      [agentBlocks],
+    )
+
+    if (agentBlocks.length === 0) return null
+
+    return (
+      <box style={{ flexDirection: 'column', gap: 0, width: '100%' }}>
+        {subGroups.map((group) => (
+          <GridLayout
+            key={getItemKey(group[0])}
+            items={group}
+            availableWidth={availableWidth}
+            getItemKey={getItemKey}
+            renderItem={renderItem}
+          />
+        ))}
+      </box>
+    )
+  },
+)

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

@@ -0,0 +1,311 @@
+import { TextAttributes } from '@opentui/core'
+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'
+import { ShimmerText } from '../shimmer-text'
+import { TerminalThinkingOrb } from '../terminal-thinking-orb'
+
+interface AgentBranchItemProps {
+  name: string
+  children?: ReactNode
+  prompt?: string
+  agentId?: string
+  isCollapsed: boolean
+  isStreaming: boolean
+  /** Preview text shown when collapsed (empty string = no preview) */
+  preview: string
+  statusLabel?: string
+  statusColor?: string
+  statusIndicator?: string
+  onToggle?: () => void
+  titleSuffix?: string
+}
+
+export const AgentBranchItem = memo((props: AgentBranchItemProps) => {
+  const {
+    name,
+    children,
+    prompt,
+    agentId,
+    isCollapsed,
+    isStreaming,
+    preview,
+    statusLabel,
+    statusColor,
+    statusIndicator = '●',
+    onToggle,
+    titleSuffix,
+  } = props
+  useWhyDidYouUpdateById('AgentBranchItem', agentId ?? '', props, {
+    logLevel: 'debug',
+    enabled: getCliEnv().ANVIL_PERF_TEST === 'true',
+  })
+  const theme = useTheme()
+
+  const baseTextAttributes = theme.messageTextAttributes ?? 0
+  const getAttributes = (extra: number = 0): number | undefined => {
+    const combined = baseTextAttributes | extra
+    return combined === 0 ? undefined : combined
+  }
+
+  const isExpanded = !isCollapsed
+  const toggleFrameColor = isExpanded ? theme.secondary : theme.muted
+  const toggleIconColor = isStreaming ? theme.primary : theme.foreground
+  const bulletChar = '• '
+  const toggleIndicator = onToggle ? (isCollapsed ? '▸ ' : '▾ ') : ''
+  const toggleLabel = onToggle ? toggleIndicator : bulletChar
+  const statusText =
+    statusLabel && statusLabel.length > 0
+      ? statusIndicator === '✓'
+        ? `${statusLabel} ${statusIndicator}`
+        : `${statusIndicator} ${statusLabel}`
+      : null
+  const showCollapsedPreview = preview.length > 0
+
+  const isTextRenderable = (value: ReactNode): boolean => {
+    if (value === null || value === undefined || typeof value === 'boolean') {
+      return false
+    }
+
+    if (typeof value === 'string' || typeof value === 'number') {
+      return true
+    }
+
+    if (Array.isArray(value)) {
+      return value.every((child) => isTextRenderable(child))
+    }
+
+    if (React.isValidElement(value)) {
+      const elProps = value.props as Record<string, unknown>
+      if (value.type === React.Fragment) {
+        return isTextRenderable(elProps.children as ReactNode)
+      }
+
+      if (typeof value.type === 'string') {
+        if (
+          value.type === 'span' ||
+          value.type === 'strong' ||
+          value.type === 'em'
+        ) {
+          return isTextRenderable(elProps.children as ReactNode)
+        }
+
+        return false
+      }
+    }
+
+    return false
+  }
+
+  const renderExpandedContent = (value: ReactNode): ReactNode => {
+    if (
+      value === null ||
+      value === undefined ||
+      value === false ||
+      value === true
+    ) {
+      return null
+    }
+
+    if (isTextRenderable(value)) {
+      return (
+        <text
+          fg={theme.foreground}
+          key="expanded-text"
+          attributes={getAttributes()}
+        >
+          {value}
+        </text>
+      )
+    }
+
+    if (React.isValidElement(value)) {
+      if (value.key === null || value.key === undefined) {
+        return (
+          <box key="expanded-node" style={{ flexDirection: 'column', gap: 1 }}>
+            {value}
+          </box>
+        )
+      }
+      return value
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <box key="expanded-array" style={{ flexDirection: 'column', gap: 1 }}>
+          {value.map((child, idx) => (
+            <box
+              key={`expanded-array-${idx}`}
+              style={{ flexDirection: 'column', gap: 0 }}
+            >
+              {child}
+            </box>
+          ))}
+        </box>
+      )
+    }
+
+    return (
+      <box key="expanded-unknown" style={{ flexDirection: 'column', gap: 1 }}>
+        {value}
+      </box>
+    )
+  }
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        gap: 0,
+        flexShrink: 0,
+        marginTop: 0,
+        marginBottom: 0,
+        paddingBottom: 0,
+        width: '100%',
+      }}
+    >
+      <box
+        border
+        borderStyle="single"
+        borderColor={toggleFrameColor}
+        customBorderChars={BORDER_CHARS}
+        style={{
+          flexDirection: 'column',
+          gap: 0,
+          paddingLeft: 0,
+          paddingRight: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          width: '100%',
+        }}
+      >
+        <Button
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 0,
+            paddingBottom: 0,
+            width: '100%',
+          }}
+          onClick={onToggle}
+        >
+          <text style={{ wrapMode: 'none' }}>
+            <span fg={toggleIconColor}>{toggleLabel}</span>
+            <span
+              fg={theme.foreground}
+              attributes={isExpanded ? TextAttributes.BOLD : undefined}
+            >
+              {name}
+            </span>
+            {titleSuffix ? (
+              <span fg={theme.foreground} attributes={TextAttributes.BOLD}>
+                {` ${titleSuffix}`}
+              </span>
+            ) : null}
+            {statusText ? (
+              <span
+                fg={statusColor ?? theme.muted}
+                attributes={TextAttributes.DIM}
+              >
+                {` ${statusText}`}
+              </span>
+            ) : null}
+          </text>
+        </Button>
+
+        {isCollapsed ? (
+          showCollapsedPreview ? (
+            <Button
+              style={{
+                paddingLeft: 1,
+                paddingRight: 1,
+                paddingTop: 0,
+                paddingBottom: 0,
+              }}
+              onClick={onToggle}
+            >
+              <text
+                fg={isStreaming ? theme.foreground : theme.muted}
+                attributes={getAttributes(TextAttributes.ITALIC)}
+              >
+                {truncateToLines(preview, MAX_COLLAPSED_LINES)}
+              </text>
+            </Button>
+          ) : null
+        ) : (
+          <box
+            style={{
+              flexDirection: 'column',
+              gap: 0,
+              paddingLeft: 1,
+              paddingRight: 1,
+              paddingTop: 0,
+              paddingBottom: 0,
+            }}
+          >
+            {prompt && (
+              <box
+                style={{
+                  flexDirection: 'row',
+                  gap: 0,
+                  alignItems: 'stretch',
+                  marginBottom: children ? 1 : 0,
+                }}
+              >
+                <box
+                  style={{
+                    width: 1,
+                    backgroundColor: theme.aiLine,
+                    marginTop: 0,
+                    marginBottom: 0,
+                  }}
+                />
+                <box
+                  style={{
+                    paddingLeft: 1,
+                    flexGrow: 1,
+                  }}
+                >
+                  <text
+                    fg={theme.foreground}
+                    style={{ wrapMode: 'word' }}
+                    attributes={getAttributes(TextAttributes.ITALIC)}
+                  >
+                    {prompt}
+                  </text>
+                </box>
+              </box>
+            )}
+            {renderExpandedContent(children)}
+            {onToggle && <CollapseButton onClick={onToggle} />}
+          </box>
+        )}
+        {isStreaming && isExpanded && (
+          <box
+            style={{
+              paddingLeft: 1,
+              paddingBottom: 0,
+            }}
+          >
+            <text>
+              <TerminalThinkingOrb state="working" variant="spark" />{' '}
+              <ShimmerText
+                text="on it..."
+                interval={160}
+                primaryColor={theme.secondary}
+              />
+            </text>
+          </box>
+        )}
+      </box>
+    </box>
+  )
+})