Function ArtifactsMenu

src/commands/artifacts/ArtifactsMenu.tsx:11–65

({ artifacts, onExit }: Props)

};

export function ArtifactsMenu({ artifacts, onExit }: Props): React.ReactElement {
  const [selected, setSelected] = React.useState(0);

  useInput((input, key) => {
    if (input === 'q' || key.escape) {
      onExit();
      return;
    }
    if (artifacts.length === 0) return;
    if (key.upArrow) {
      setSelected(s => (s - 1 + artifacts.length) % artifacts.length);
      return;
    }
    if (key.downArrow) {
      setSelected(s => (s + 1) % artifacts.length);
      return;
    }
    if (key.return) {
      const target = artifacts[selected];
      if (target.url) {
        void openBrowser(target.url);
      }
      return;
    }
    if (input === 'c') {
      const target = artifacts[selected];
      if (target.url) {
        void setClipboard(target.url).then(raw => {
          if (raw) process.stdout.write(raw);
        });
      }
    }
  });

  return (
    <Box flexDirection="column" paddingX={1} paddingY={0}>
      <Box marginBottom={1}>
        <Text bold>Artifacts ({artifacts.length})</Text>
      </Box>

      {artifacts.length === 0 ? (
        <Text color="subtle">No artifacts uploaded this session. Run /use-artifacts to learn how.</Text>
      ) : (
        <Box flexDirection="column">
          {artifacts.map((a, idx) => (
            <ArtifactRow key={a.toolUseId} artifact={a} isSelected={idx === selected} />
          ))}
          <Box marginTop={1}>
            <Text color="subtle">{'↑/↓ select · Enter open · c copy URL · Esc exit'}</Text>
          </Box>
        </Box>
      )}
    </Box>
  );
}

function ArtifactRow({ artifact, isSelected }: { artifact: ArtifactInfo; isSelected: boolean }): React.ReactElement {
  const marker = isSelected ? '›' : ' ';