diagrams

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const all = await read($, list)
    const at = clamp(await read($, index), all.length)
    const diagram = all[at]

    if (!diagram || e.props.hasSurvey) {
      return next(e)
    }

    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    // Pictures draw only where the surface has Image (the terminal); elsewhere the text.
    const Image = 'Image' in elements ? elements.Image : undefined
    const step = (by: number) => () => update($, index, i => clamp(i + by, all.length))
    const showsPicture = isPictures && !!Image && !!diagram.picture && !(await read($, isText))
    const toggle: Action[] = isPictures && diagram.picture
      ? [{ key: 'view', label: showsPicture ? '⌗ text' : '▦ picture', onPress: () => update($, isText, text => !text) }]
      : []
    const expand = () => update($, isOpen, () => true)
    const collapse = () => update($, isOpen, () => false)
    const fullScreen = async () => {
      await collapse()
      await openPane($)
    }
    const navigation = all.length > 1 && (
      <Box gap={1} flexShrink={0}>
        {/* Words beside the arrows: a one-cell arrow is too small to hit. */}
        <Button key="prev" label="‹ prev" plain onPress={step(-1)} />
        <Text {...S.muted}>
          {at + 1}/{all.length}
        </Text>
        <Button key="next" label="next ›" plain onPress={step(1)} />
      </Box>
    )

    // While Claude works the chip is a bare symbol, out of the way, that still expands.
    if (e.props.isWorking && !(await read($, isOpen))) {
      return (
        <Box justifyContent="flex-end">
          <Box borderStyle="round" {...S.rule} paddingX={1} gap={1}>
            <Button key="open-symbol" label={PULSE[(await read($, pulse)) % PULSE.length]!} plain onPress={expand} />
            {all.length > 1 && <Text {...S.muted}>{all.length}</Text>}
            <Button key="open" label="⤢" plain onPress={expand} />
          </Box>
        </Box>
      )
    }

    if (await read($, isOpen)) {
      return <Box justifyContent="flex-end">{expandedCard()}</Box>
    }

    // Full screen is open: the chip says so and closes it.
    if (await read($, isFull)) {
      return (
        <Box justifyContent="flex-end">
          <Box borderStyle="round" {...S.highlight} paddingX={1} gap={1}>
            <Text {...S.accent}>⛶</Text>
            <Text bold {...S.text} wrap="truncate-end">
              {diagram.title}
            </Text>
            <Text {...S.muted}>in full screen</Text>
            <Button key="close-full" label="close" onPress={() => closePane($)} />
          </Box>
        </Box>
      )
    }

    const shown = await read($, reveal)
    const title = shown < 0 ? diagram.title : diagram.title.slice(0, shown)

    return (
      <Box justifyContent="flex-end">
        <Box borderStyle="round" {...S.rule} paddingX={1} gap={1}>
          <Text {...S.accent}>◆</Text>
          {/* The whole title expands too, not only the small button at the end. */}
          <Button key="open-title" label={title || ' '} plain onPress={expand} />
          {shown < 0 && navigation}
          <Button key="open" label="expand" variant="primary" onPress={expand} />
        </Box>
      </Box>
    )

    // The chip grown into a card in place. Painting it over the chat (an absolute
    // Box above the band) left the chat garbled in a fullscreen terminal, so it takes
    // its rows; a diagram taller than the band's room is cut, with full screen offered.
    function expandedCard() {
      const lines = diagram!.source.split('\n')
      // One width for every diagram in the history, so switching doesn't move the controls.
      const widest = Math.max(...all.flatMap(one => one.source.split('\n').map(line => [...line].length)), 56)
      // Wide enough for every diagram's text and, with pictures on, its picture at actual size.
      const pictured = isPictures ? Math.max(0, ...all.map(one => (one.picture ? Math.ceil(one.picture.width / PIXELS_PER_COLUMN) : 0))) : 0
      const width = Math.min(e.props.bodyColumns, Math.max(widest, pictured) + 4)
      // The band's rows less the card's own: two border rows, the title bar, the footer
      // and the "more lines" note; more than that and the band scrolls, cutting off the top.
      const room = Math.max(4, e.props.maxRows - 5)
      const hidden = Math.max(0, lines.length - room)

      return (
        <Box flexDirection="column" width={width} borderStyle="round" {...S.highlight} backgroundColor={S.background}>
          <Box gap={1} paddingX={1} backgroundColor={S.surface}>
            <Text {...S.accent} backgroundColor={S.surface}>
              ◉
            </Text>
            <Text bold {...S.text} backgroundColor={S.surface} wrap="truncate-end">
              {diagram!.title}
            </Text>
          </Box>
          {showsPicture ? (
            pictureBox(S, Box, Image!, diagram!, width - 4, room)
          ) : (
            diagramLines(S, Box, Text, hidden > 0 ? lines.slice(0, room) : lines, 0)
          )}
          {!showsPicture && hidden > 0 && (
            <Text {...S.muted} backgroundColor={S.background}>
              {`  … ${hidden} more lines in full screen`}
            </Text>
          )}
          {/* Every control on the bottom row, which sits on the prompt and so stays put. */}
          <Box justifyContent="space-between" paddingX={1} backgroundColor={S.background}>
            <Box flexShrink={0}>{navigation || <Text backgroundColor={S.background}> </Text>}</Box>
            {actions(S, Box, Button, Text, [
              ...toggle,
              { key: 'full', label: '⛶ full', onPress: fullScreen },
              { key: 'browser', label: '↗ browser', onPress: () => openInBrowser($, diagram!) },
              { key: 'copy', label: '⧉ copy', onPress: press => copy($, diagram!, press.surface, showsPicture) },
              { key: 'close', label: '✕ close', onPress: collapse },
            ])}
          </Box>
        </Box>
      )
    }

  })

function pictureBox(S: Palette, Box: Elements['Box'], Image: TerminalImage, diagram: Diagram, columns: number, rows: number, grows = false) {
  const picture = diagram.picture!
  const rowsPerColumn = (picture.height / picture.width) * CELL_ASPECT
  const wide = Math.min(255, grows ? columns : picture.width / PIXELS_PER_COLUMN, columns, rows / rowsPerColumn)

  return (
    <Box paddingX={1} justifyContent="center" backgroundColor={S.background}>
      <Image
        source={{ file: picture.path, format: 'png' }}
        columns={Math.max(1, Math.round(wide))}
        rows={Math.max(1, Math.min(255, Math.round(wide * rowsPerColumn)))}
        alt={diagram.title}
      />
    </Box>
  )
}

function diagramLines(S: Palette, Box: Elements['Box'], Text: Elements['Text'], lines: readonly string[], paddingY: number) {
  return (
    <Box flexDirection="column" paddingX={1} paddingY={paddingY} backgroundColor={S.background}>
      {lines.map((line, row) => (
        <Text key={`line-${row}`} {...S.text} backgroundColor={S.background} wrap="truncate-end">
          {line || ' '}
        </Text>
      ))}
    </Box>
  )
}

function actions(S: Palette, Box: Elements['Box'], Button: Elements['Button'], Text: Elements['Text'], list: readonly Action[]) {
  return (
    <Box gap={1} flexShrink={0}>
      {list.flatMap((action, at) => [
        ...(at > 0 ? [<Text key={`dot-${action.key}`} {...S.muted} backgroundColor={S.background}>·</Text>] : []),
        <Button key={action.key} label={action.label} plain onPress={action.onPress} />,
      ])}
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const S = fullS
    const diagram = await current($)
    const elements = $.ui.resolve(e)
    const { Box, Button, Text } = elements
    const Image = 'Image' in elements ? elements.Image : undefined

    if (!diagram) {
      return <Text {...S.muted}>No diagrams yet.</Text>
    }

    const lines = diagram.source.split('\n')
    // The pane's width less its padding; a wider diagram pans sideways instead of being cut.
    const visible = Math.max(10, e.props.bodyColumns - 2)
    const widest = Math.max(...lines.map(line => [...line].length))
    const maxPan = Math.max(0, widest - visible)
    const left = Math.min(await read($, pan), maxPan)
    const panBy = (by: number) => () => update($, pan, at => Math.max(0, Math.min(at + by, maxPan)))
    const step = Math.max(10, Math.floor(visible / 2))
    const showsPicture = isPictures && !!Image && !!diagram.picture && !(await read($, isText))

    // At least the pane's height, so the palette fills it and the footer sits at its
    // bottom; a taller diagram makes it longer and the person scrolls with the arrows.
    return (
      <Box flexDirection="column" width={e.props.bodyColumns} minHeight={e.props.scroll.bodyRows} backgroundColor={S.background}>
        <Box gap={1} paddingX={1} backgroundColor={S.surface}>
          <Text {...S.accent} backgroundColor={S.surface}>
            ◉
          </Text>
          <Text bold {...S.text} backgroundColor={S.surface} wrap="truncate-end">
            {diagram.title}
          </Text>
        </Box>
        <Box flexDirection="column" flexGrow={1} backgroundColor={S.background}>
          {showsPicture
            ? pictureBox(S, Box, Image!, diagram, visible, Math.max(4, e.props.scroll.bodyRows - 4), true)
            : diagramLines(S, Box, Text, lines.map(line => [...line].slice(left, left + visible).join('')), 1)}
        </Box>
        <Box justifyContent="space-between" paddingX={1} backgroundColor={S.background}>
          {!showsPicture && maxPan > 0 ? (
            <Box gap={1} flexShrink={0}>
              <Button key="left" label="◀" plain onPress={panBy(-step)} />
              <Text {...S.muted} backgroundColor={S.background}>
                columns {left + 1}–{Math.min(left + visible, widest)} of {widest}
              </Text>
              <Button key="right" label="▶" plain onPress={panBy(step)} />
            </Box>
          ) : (
            <Text backgroundColor={S.background}> </Text>
          )}
          {actions(S, Box, Button, Text, [
            ...(isPictures && diagram.picture
              ? [{ key: 'view', label: showsPicture ? '⌗ text' : '▦ picture', onPress: () => update($, isText, text => !text) }]
              : []),
            { key: 'browser', label: '↗ browser', onPress: () => openInBrowser($, diagram) },
            { key: 'copy', label: '⧉ copy', onPress: press => copy($, diagram, press.surface, showsPicture) },
            { key: 'close', label: '✕ close', onPress: () => closePane($) },
          ])}
        </Box>
      </Box>
    )
  })