@alumbwe/anvil 1.0.0 → 1.0.2

package/src/components/blocks/implementor-row.tsx

@@ -1,429 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React, { memo, useCallback, useMemo, useState } from 'react'
-
-/** Horizontal padding inside implementor cards (left + right) */
-const CARD_HORIZONTAL_PADDING = 4
-/** Fixed width for the +/- bar visualization */
-const STATS_BAR_WIDTH = 5
-/** Minimum inner content width */
-const MIN_INNER_WIDTH = 10
-
-/** Labels for proposal cards when no file changes exist */
-const EMPTY_STATE_LABELS = {
-  running: 'generating...',
-  complete: 'no changes',
-  failed: 'failed',
-  cancelled: 'cancelled',
-} as const
-
-import { useGridLayout } from '../../hooks/use-grid-layout'
-import { useTheme } from '../../hooks/use-theme'
-import { getAgentStatusInfo } from '../../utils/agent-helpers'
-import {
-  buildActivityTimeline,
-  getImplementorDisplayName,
-  getImplementorIndex,
-  getFileStatsFromBlocks,
-  truncateWithEllipsis,
-  type FileStats,
-} from '../../utils/implementor-helpers'
-import { getRelativePath } from '../../utils/path-helpers'
-import { PROPOSAL_BORDER_CHARS } from '../../utils/ui-constants'
-import { Button } from '../button'
-import { CollapseButton } from '../collapse-button'
-import { DiffViewer } from '../tools/diff-viewer'
-
-import type { AgentContentBlock, ContentBlock } from '../../types/chat'
-
-interface ImplementorGroupProps {
-  implementors: AgentContentBlock[]
-  siblingBlocks: ContentBlock[]
-  availableWidth: number
-}
-
-export const ImplementorGroup = memo(
-  ({ implementors, siblingBlocks, availableWidth }: ImplementorGroupProps) => {
-    const { columnWidth: cardWidth, columnGroups } = useGridLayout(
-      implementors,
-      availableWidth,
-    )
-
-    return (
-      <box
-        style={{
-          flexDirection: 'column',
-          gap: 1,
-          width: '100%',
-          marginTop: 1,
-        }}
-      >
-        {/* Masonry layout: columns side by side, cards stack vertically in each */}
-        <box
-          style={{
-            flexDirection: 'row',
-            gap: 1,
-            width: '100%',
-            alignItems: 'flex-start',
-          }}
-        >
-          {columnGroups.map((columnItems, colIdx) => {
-            // Use first agent's ID as stable column key
-            const columnKey = columnItems[0]?.agentId ?? `col-${colIdx}`
-            return (
-              <box
-                key={columnKey}
-                style={{
-                  flexDirection: 'column',
-                  gap: 0,
-                  flexGrow: 1,
-                  flexShrink: 1,
-                  flexBasis: 0,
-                  minWidth: 0,
-                }}
-              >
-                {columnItems.map((agentBlock) => {
-                  const implementorIndex = getImplementorIndex(
-                    agentBlock,
-                    siblingBlocks,
-                  )
-
-                  return (
-                    <ImplementorCard
-                      key={agentBlock.agentId}
-                      agentBlock={agentBlock}
-                      implementorIndex={implementorIndex}
-                      cardWidth={cardWidth}
-                    />
-                  )
-                })}
-              </box>
-            )
-          })}
-        </box>
-      </box>
-    )
-  },
-)
-
-interface ImplementorCardProps {
-  agentBlock: AgentContentBlock
-  implementorIndex?: number
-  cardWidth: number
-}
-
-const ImplementorCard = memo(
-  ({ agentBlock, implementorIndex, cardWidth }: ImplementorCardProps) => {
-    const theme = useTheme()
-    const [selectedFile, setSelectedFile] = useState<string | null>(null)
-
-    const isComplete = agentBlock.status === 'complete'
-
-    const displayName = getImplementorDisplayName(
-      agentBlock.agentType,
-      implementorIndex,
-    )
-
-    // Get file stats for compact view
-    const fileStats = useMemo(
-      () => getFileStatsFromBlocks(agentBlock.blocks),
-      [agentBlock.blocks],
-    )
-
-    // Build timeline to extract diffs
-    const timeline = useMemo(
-      () => buildActivityTimeline(agentBlock.blocks),
-      [agentBlock.blocks],
-    )
-
-    // Build map of file path -> diff for inline display
-    const fileDiffs = useMemo(() => {
-      const diffs = new Map<string, string>()
-      for (const item of timeline) {
-        if (item.type === 'edit' && item.diff) {
-          diffs.set(item.content, item.diff)
-        }
-      }
-      return diffs
-    }, [timeline])
-
-    // Get status info from helper
-    const {
-      indicator: statusIndicator,
-      label: statusLabel,
-      color: statusColor,
-    } = getAgentStatusInfo(agentBlock.status, theme)
-    // Format: "● running" when streaming, "completed ✓" when done (checkmark at end)
-    const statusText =
-      statusIndicator === '✓'
-        ? `${statusLabel} ${statusIndicator}`
-        : `${statusIndicator} ${statusLabel}`
-
-    // Use cardWidth for internal truncation calculations (approximate internal space)
-    const innerWidth = Math.max(
-      MIN_INNER_WIDTH,
-      cardWidth - CARD_HORIZONTAL_PADDING,
-    )
-
-    // Toggle file selection - clicking same file deselects it
-    const handleFileSelect = useCallback((filePath: string) => {
-      setSelectedFile((prev) => (prev === filePath ? null : filePath))
-    }, [])
-
-    return (
-      <box
-        border
-        borderStyle="single"
-        customBorderChars={PROPOSAL_BORDER_CHARS}
-        borderColor={isComplete ? theme.muted : theme.primary}
-        style={{
-          flexDirection: 'column',
-          flexGrow: 1,
-          flexShrink: 1,
-          minWidth: 0,
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 0,
-          paddingBottom: 0,
-        }}
-      >
-        {/* Header: Model name + Status */}
-        <box
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 1,
-            width: '100%',
-          }}
-        >
-          <text
-            fg={theme.foreground}
-            attributes={TextAttributes.BOLD}
-            style={{ wrapMode: 'none' }}
-          >
-            {displayName}
-          </text>
-          <text
-            fg={statusColor}
-            attributes={TextAttributes.DIM}
-            style={{ wrapMode: 'none' }}
-          >
-            {statusText}
-          </text>
-        </box>
-
-        {/* Prompt provided to this proposal */}
-        {agentBlock.initialPrompt && (
-          <box style={{ marginTop: 1, width: '100%' }}>
-            <text fg={theme.muted} attributes={TextAttributes.ITALIC}>
-              {agentBlock.initialPrompt}
-            </text>
-          </box>
-        )}
-
-        {/* File stats - click file name to view diff inline */}
-        {fileStats.length > 0 && (
-          <CompactFileStats
-            fileStats={fileStats}
-            availableWidth={innerWidth}
-            selectedFile={selectedFile}
-            onSelectFile={handleFileSelect}
-            fileDiffs={fileDiffs}
-          />
-        )}
-
-        {/* Show status-appropriate message when no file changes */}
-        {fileStats.length === 0 && (
-          <text
-            fg={theme.muted}
-            attributes={TextAttributes.ITALIC}
-            style={{ marginTop: 1 }}
-          >
-            {EMPTY_STATE_LABELS[agentBlock.status]}
-          </text>
-        )}
-      </box>
-    )
-  },
-)
-
-interface CompactFileStatsProps {
-  fileStats: FileStats[]
-  availableWidth: number
-  selectedFile: string | null
-  onSelectFile: (filePath: string) => void
-  /** Map of file path to diff content */
-  fileDiffs: Map<string, string>
-}
-
-const CompactFileStats = memo(
-  ({
-    fileStats,
-    availableWidth,
-    selectedFile,
-    onSelectFile,
-    fileDiffs,
-  }: CompactFileStatsProps) => {
-    const theme = useTheme()
-
-    // Fixed bar width - keeps layout simple and predictable
-    const maxBarWidth = STATS_BAR_WIDTH
-
-    // Calculate max string widths for alignment (so all bars meet at center axis)
-    // Always include +0/-0 in width calculation since we always show them
-    const maxAddedStrWidth = Math.max(
-      ...fileStats.map((f) => `+${f.stats.linesAdded}`.length),
-      2, // Minimum "+0"
-    )
-    const maxRemovedStrWidth = Math.max(
-      ...fileStats.map((f) => `-${f.stats.linesRemoved}`.length),
-      2, // Minimum "-0"
-    )
-
-    return (
-      <box style={{ flexDirection: 'column', marginTop: 1 }}>
-        {fileStats.map((file, idx) => (
-          <CompactFileRow
-            key={`${file.path}-${idx}`}
-            file={file}
-            availableWidth={availableWidth}
-            maxBarWidth={maxBarWidth}
-            maxAddedStrWidth={maxAddedStrWidth}
-            maxRemovedStrWidth={maxRemovedStrWidth}
-            isSelected={selectedFile === file.path}
-            onSelect={() => onSelectFile(file.path)}
-            diff={fileDiffs.get(file.path)}
-          />
-        ))}
-      </box>
-    )
-  },
-)
-
-interface CompactFileRowProps {
-  file: FileStats
-  availableWidth: number
-  maxBarWidth: number
-  maxAddedStrWidth: number
-  maxRemovedStrWidth: number
-  isSelected: boolean
-  onSelect: () => void
-  diff?: string
-}
-
-const CompactFileRow = memo(
-  ({
-    file,
-    availableWidth,
-    maxBarWidth,
-    maxAddedStrWidth,
-    maxRemovedStrWidth,
-    isSelected,
-    onSelect,
-    diff,
-  }: CompactFileRowProps) => {
-    const theme = useTheme()
-    const [isHovered, setIsHovered] = useState(false)
-
-    // Format numbers - always show counts, including +0 and -0
-    const addedStr = `+${file.stats.linesAdded}`
-    const removedStr = `-${file.stats.linesRemoved}`
-
-    // Full-width colored sections with numbers inside:
-    // - Added section: green bar extending to center with +N in white (right-aligned)
-    // - Removed section: red bar extending from center with -N in white (left-aligned)
-    const addedSectionWidth = maxBarWidth + maxAddedStrWidth
-    const removedSectionWidth = maxBarWidth + maxRemovedStrWidth
-
-    // +N right-aligned within the green section with 1 space padding before the center edge
-    const addedContent = (addedStr + ' ').padStart(addedSectionWidth)
-    // -N left-aligned within the red section with 1 space padding after the center edge
-    const removedContent = (' ' + removedStr).padEnd(removedSectionWidth)
-
-    // Calculate available width for file path
-    // Layout: changeType(1) + spaces(2) + filePath + spaces(2) + bars
-    // Total bar section width: 2*maxBarWidth + maxAddedStrWidth + maxRemovedStrWidth (no center gap)
-    const barWidth = 2 * maxBarWidth + maxAddedStrWidth + maxRemovedStrWidth
-    const fixedWidth = 1 + 2 + 2 + barWidth
-    const maxFilePathWidth = Math.max(10, availableWidth - fixedWidth)
-
-    // Get and truncate file path
-    const relativePath = getRelativePath(file.path)
-    const displayPath = truncateWithEllipsis(relativePath, maxFilePathWidth)
-
-    return (
-      <box style={{ flexDirection: 'column' }}>
-        {/* File row */}
-        <box style={{ flexDirection: 'row', alignItems: 'center' }}>
-          {/* Change type: fixed */}
-          <text fg={theme.muted} style={{ flexShrink: 0 }}>
-            {file.changeType}
-          </text>
-          <text style={{ flexShrink: 0 }}> </text>
-
-          {/* File path: clickable with underline on hover, flexes to push bars right */}
-          <Button
-            onClick={onSelect}
-            onMouseOver={() => setIsHovered(true)}
-            onMouseOut={() => setIsHovered(false)}
-            style={{
-              paddingLeft: 0,
-              paddingRight: 0,
-              flexGrow: 1,
-              flexShrink: 1,
-              flexBasis: 0,
-              minWidth: 0,
-            }}
-          >
-            <text
-              fg={theme.foreground}
-              attributes={
-                isHovered || isSelected ? TextAttributes.UNDERLINE : undefined
-              }
-              style={{
-                wrapMode: 'none',
-              }}
-            >
-              {displayPath}
-            </text>
-          </Button>
-          <text style={{ flexShrink: 0 }}> </text>
-
-          {/* Bar visualization: full-width bars meeting at center with numbers inside */}
-          <text style={{ flexShrink: 0, wrapMode: 'none' }}>
-            {/* Added section: muted gray-green bar with +N inside */}
-            <span fg={theme.foreground} bg="#3A5A3A">
-              {addedContent}
-            </span>
-            {/* Removed section: muted gray-red bar with -N inside */}
-            <span fg={theme.foreground} bg="#5A3A3A">
-              {removedContent}
-            </span>
-          </text>
-        </box>
-
-        {/* Inline diff viewer when selected - aligns with card content (full width) */}
-        {isSelected && diff && (
-          <box style={{ flexDirection: 'column', marginTop: 1, width: '100%' }}>
-            <box
-              style={{
-                flexDirection: 'column',
-                width: '100%',
-                paddingLeft: 1,
-                paddingRight: 1,
-                paddingTop: 1,
-                paddingBottom: 1,
-                backgroundColor: theme.surface,
-              }}
-            >
-              <DiffViewer diffText={diff} />
-            </box>
-            <CollapseButton onClick={onSelect} />
-          </box>
-        )}
-      </box>
-    )
-  },
-)
-
-// Keep the old exports for backward compatibility during transition
-export { ImplementorCard as ImplementorRow }

package/src/components/blocks/single-block.tsx

@@ -1,201 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React, { memo, type ReactNode } from 'react'
-
-import { AgentBranchWrapper } from './agent-branch-wrapper'
-import { AgentListBranch } from './agent-list-branch'
-import { AskUserBranch } from './ask-user-branch'
-import { trimNewlines, isReasoningTextBlock } from './block-helpers'
-import { ContentWithMarkdown } from './content-with-markdown'
-import { ImageBlock } from './image-block'
-import { UserBlockTextWithInlineCopy } from './user-content-copy'
-import { useTheme } from '../../hooks/use-theme'
-import { PlanBox } from '../renderers/plan-box'
-
-import type {
-  ContentBlock,
-  TextContentBlock,
-  ImageContentBlock,
-} from '../../types/chat'
-import type { MarkdownPalette } from '../../utils/markdown-renderer'
-
-interface SingleBlockProps {
-  block: ContentBlock
-  idx: number
-  messageId: string
-  blocks?: ContentBlock[]
-  isLoading: boolean
-  isComplete?: boolean
-  isUser: boolean
-  textColor: string
-  availableWidth: number
-  markdownPalette: MarkdownPalette
-  onToggleCollapsed: (id: string) => void
-  onBuildFast: () => void
-  onBuildMax: () => void
-  onBuildLite: () => void
-  isLastMessage?: boolean
-  contentToCopy?: string
-}
-
-export const SingleBlock = memo(
-  ({
-    block,
-    idx,
-    messageId,
-    blocks,
-    isLoading,
-    isComplete,
-    isUser,
-    textColor,
-    availableWidth,
-    markdownPalette,
-    onToggleCollapsed,
-    onBuildFast,
-    onBuildMax,
-    onBuildLite,
-    isLastMessage,
-    contentToCopy,
-  }: SingleBlockProps): ReactNode => {
-    const theme = useTheme()
-    const codeBlockWidth = Math.max(10, availableWidth - 8)
-
-    switch (block.type) {
-      case 'text': {
-        if (isReasoningTextBlock(block)) {
-          return null
-        }
-        const textBlock = block as TextContentBlock
-        const isStreamingText = isLoading || !isComplete
-        const filteredContent = isStreamingText
-          ? trimNewlines(textBlock.content)
-          : textBlock.content.trim()
-        if (!filteredContent) {
-          return null
-        }
-        const renderKey = `${messageId}-text-${idx}`
-        const explicitColor = textBlock.color
-        const blockTextColor = explicitColor ?? textColor
-
-        if (contentToCopy) {
-          return (
-            <UserBlockTextWithInlineCopy
-              key={renderKey}
-              content={filteredContent}
-              contentToCopy={contentToCopy}
-              isStreaming={isStreamingText}
-              textColor={blockTextColor}
-              codeBlockWidth={codeBlockWidth}
-              palette={markdownPalette}
-              marginTop={0}
-              marginBottom={0}
-            />
-          )
-        }
-
-        return (
-          <text
-            key={renderKey}
-            style={{
-              wrapMode: 'word',
-              fg: blockTextColor,
-            }}
-            attributes={isUser ? TextAttributes.ITALIC : undefined}
-          >
-            <ContentWithMarkdown
-              content={filteredContent}
-              isStreaming={isStreamingText}
-              codeBlockWidth={codeBlockWidth}
-              palette={markdownPalette}
-            />
-          </text>
-        )
-      }
-
-      case 'plan': {
-        return (
-          <box key={`${messageId}-plan-${idx}`} style={{ width: '100%' }}>
-            <PlanBox
-              planContent={block.content}
-              availableWidth={availableWidth}
-              markdownPalette={markdownPalette}
-              onBuildFast={onBuildFast}
-              onBuildMax={onBuildMax}
-              onBuildLite={onBuildLite}
-            />
-          </box>
-        )
-      }
-
-      case 'html': {
-        return (
-          <box
-            key={`${messageId}-html-${idx}`}
-            style={{
-              flexDirection: 'column',
-              gap: 0,
-              width: '100%',
-            }}
-          >
-            {block.render({ textColor, theme })}
-          </box>
-        )
-      }
-
-      case 'tool': {
-        return null
-      }
-
-      case 'ask-user': {
-        return (
-          <AskUserBranch
-            key={`${messageId}-ask-user-${idx}`}
-            block={block}
-            availableWidth={availableWidth}
-          />
-        )
-      }
-
-      case 'image': {
-        return (
-          <ImageBlock
-            key={`${messageId}-image-${idx}`}
-            block={block as ImageContentBlock}
-            availableWidth={availableWidth}
-          />
-        )
-      }
-
-      case 'agent': {
-        return (
-          <AgentBranchWrapper
-            key={`${messageId}-agent-${block.agentId}`}
-            agentBlock={block}
-            keyPrefix={`${messageId}-agent-${block.agentId}`}
-            availableWidth={availableWidth}
-            markdownPalette={markdownPalette}
-            onToggleCollapsed={onToggleCollapsed}
-            onBuildFast={onBuildFast}
-            onBuildMax={onBuildMax}
-            onBuildLite={onBuildLite}
-            siblingBlocks={blocks}
-            isLastMessage={isLastMessage}
-          />
-        )
-      }
-
-      case 'agent-list': {
-        return (
-          <AgentListBranch
-            key={`${messageId}-agent-list-${block.id}`}
-            agentListBlock={block}
-            keyPrefix={`${messageId}-agent-list-${block.id}`}
-            onToggleCollapsed={onToggleCollapsed}
-          />
-        )
-      }
-
-      default:
-        return null
-    }
-  },
-)

package/src/components/blocks/thinking-block.tsx

@@ -1,67 +0,0 @@
-import { memo, useCallback } from 'react'
-
-import { Thinking } from '../thinking'
-
-import type { ContentBlock } from '../../types/chat'
-
-// Nested thinking blocks need more offset to account for the subagent's border and padding
-const WIDTH_OFFSET = 6
-const NESTED_WIDTH_OFFSET = 10
-
-interface ThinkingBlockProps {
-  blocks: Extract<ContentBlock, { type: 'text' }>[]
-  onToggleCollapsed: (id: string) => void
-  availableWidth: number
-  isNested: boolean
-  /** Whether the parent message is complete (used to hide native reasoning blocks) */
-  isMessageComplete: boolean
-}
-
-export const ThinkingBlock = memo(
-  ({
-    blocks,
-    onToggleCollapsed,
-    availableWidth,
-    isNested,
-    isMessageComplete,
-  }: ThinkingBlockProps) => {
-    const firstBlock = blocks[0]
-    const thinkingId = firstBlock?.thinkingId
-    const combinedContent = blocks
-      .map((b) => b.content)
-      .join('')
-      .trim()
-
-    const thinkingCollapseState = firstBlock?.thinkingCollapseState ?? 'preview'
-    const offset = isNested ? NESTED_WIDTH_OFFSET : WIDTH_OFFSET
-    const availWidth = Math.max(10, availableWidth - offset)
-
-    const handleToggle = useCallback(() => {
-      if (thinkingId) {
-        onToggleCollapsed(thinkingId)
-      }
-    }, [onToggleCollapsed, thinkingId])
-
-    // thinkingOpen === false means explicitly closed (with </think> tag or message completion)
-    // Otherwise (true or undefined), completion is determined by message completion
-    const isThinkingComplete =
-      firstBlock?.thinkingOpen === false || isMessageComplete
-
-    // Hide if no content or no thinkingId (but NOT when thinking is complete)
-    if (!combinedContent || !thinkingId) {
-      return null
-    }
-
-    return (
-      <box>
-        <Thinking
-          content={combinedContent}
-          thinkingCollapseState={thinkingCollapseState}
-          isThinkingComplete={isThinkingComplete}
-          onToggle={handleToggle}
-          availableWidth={availWidth}
-        />
-      </box>
-    )
-  },
-)