claude-code/src/components/ClickableImageRef.tsx

import * as React from 'react'
import { pathToFileURL } from 'url'
import { Link, supportsHyperlinks, Text } from '@anthropic/ink'
import { getStoredImagePath } from '../utils/imageStore.js'
import type { Theme } from '../utils/theme.js'

type Props = {
  imageId: number
  backgroundColor?: keyof Theme
  isSelected?: boolean
}

/**
 * Renders an image reference like [Image #1] as a clickable link.
 * When clicked, opens the stored image file in the default viewer.
 *
 * Falls back to styled text if:
 * - Terminal doesn't support hyperlinks
 * - Image file is not found in the store
 */
export function ClickableImageRef({
  imageId,
  backgroundColor,
  isSelected = false,
}: Props): React.ReactNode {
  const imagePath = getStoredImagePath(imageId)
  const displayText = `[Image #${imageId}]`

  // If we have a stored image and terminal supports hyperlinks, make it clickable
  if (imagePath && supportsHyperlinks()) {
    const fileUrl = pathToFileURL(imagePath).href

    return (
      <Link
        url={fileUrl}
        fallback={
          <Text backgroundColor={backgroundColor} inverse={isSelected}>
            {displayText}
          </Text>
        }
      >
        <Text
          backgroundColor={backgroundColor}
          inverse={isSelected}
          bold={isSelected}
        >
          {displayText}
        </Text>
      </Link>
    )
  }

  // Fallback: styled but not clickable
  return (
    <Text backgroundColor={backgroundColor} inverse={isSelected}>
      {displayText}
    </Text>
  )
}