src/components/LogoV2/Feed.tsx

import * as React from 'react'
import { stringWidth } from '../../ink/stringWidth.js'
import { Box, Text } from '../../ink.js'
import { truncate } from '../../utils/format.js'

export type FeedLine = {
  text: string
  timestamp?: string
}

export type FeedConfig = {
  title: string
  lines: FeedLine[]
  footer?: string
  emptyMessage?: string
  customContent?: { content: React.ReactNode; width: number }
}

type FeedProps = {
  config: FeedConfig
  actualWidth: number
}

export function calculateFeedWidth(config: FeedConfig): number {
  const { title, lines, footer, emptyMessage, customContent } = config

  let maxWidth = stringWidth(title)

  if (customContent !== undefined) {
    maxWidth = Math.max(maxWidth, customContent.width)
  } else if (lines.length === 0 && emptyMessage) {
    maxWidth = Math.max(maxWidth, stringWidth(emptyMessage))
  } else {
    const gap = '  '
    const maxTimestampWidth = Math.max(
      0,
      ...lines.map(line => (line.timestamp ? stringWidth(line.timestamp) : 0)),
    )

    for (const line of lines) {
      const timestampWidth = maxTimestampWidth > 0 ? maxTimestampWidth : 0
      const lineWidth =
        stringWidth(line.text) +
        (timestampWidth > 0 ? timestampWidth + gap.length : 0)
      maxWidth = Math.max(maxWidth, lineWidth)
    }
  }

  if (footer) {
    maxWidth = Math.max(maxWidth, stringWidth(footer))
  }

  return maxWidth
}

export function Feed({ config, actualWidth }: FeedProps): React.ReactNode {
  const { title, lines, footer, emptyMessage, customContent } = config

  const gap = '  '
  const maxTimestampWidth = Math.max(
    0,
    ...lines.map(line => (line.timestamp ? stringWidth(line.timestamp) : 0)),
  )

  return (
    <Box flexDirection="column" width={actualWidth}>
      <Text bold color="clawd_body">
        {title}
      </Text>
      {customContent ? (
        <>
          {customContent.content}
          {footer && (
            <Text dimColor italic>
              {truncate(footer, actualWidth)}
            </Text>
          )}
        </>
      ) : lines.length === 0 && emptyMessage ? (
        <Text dimColor>{truncate(emptyMessage, actualWidth)}</Text>
      ) : (
        <>
          {lines.map((line, index) => {
            const textWidth = Math.max(
              10,
              actualWidth -
                (maxTimestampWidth > 0 ? maxTimestampWidth + gap.length : 0),
            )

            return (
              <Text key={index}>
                {maxTimestampWidth > 0 && (
                  <>
                    <Text dimColor>
                      {(line.timestamp || '').padEnd(maxTimestampWidth)}
                    </Text>
                    {gap}
                  </>
                )}
                <Text>{truncate(line.text, textWidth)}</Text>
              </Text>
            )
          })}
          {footer && (
            <Text dimColor italic>
              {truncate(footer, actualWidth)}
            </Text>
          )}
        </>
      )}
    </Box>
  )
}