pixel-pet

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const current = await read($, view)
    if (e.props.hasSurvey || current.isHidden || e.props.maxRows < 4) return next(e)
    const { Box, Text } = $.ui.resolve(e)
    const now = await $.clock.now()
    const percent = current.meter.percent
    const parts = segments(current.meter, now)
    // The helpers' ages at this draw: each one's story (pop in, bob, wave, fade) runs from its age.
    // Newest first, so a new helper takes the leftmost slot and pushes the rest along; one still
    // queued has a negative age and no slot yet.
    const helpers = [...current.minis].sort((a, b) => b.at - a.at).map(m => ({ id: m.id, color: m.color, state: m.state, age: now - m.at }))
    // Point at the meter for the details the line leaves out: tokens, resets, how you're billed.
    // Hidden until hovered; it opens over the band, which clips it, so it stays within four rows.
    const card = cardLines(current.meter, now)
    const details = card.length > 0 && (
      <Box position="absolute" top={-2} left={0} display="none" hover={{ display: 'flex' }} flexDirection="column" paddingX={1} backgroundColor={theme === 'light' ? '#f3f3f5' : '#2b2b30'}>
        {card.map(text => <Text wrap="truncate">{text}</Text>)}
      </Box>
    )
    const hint = card.length > 0 && <Text dimColor> ⓘ</Text>

    // The terminal draws pixels as half-block text on its grid and animates the line and the meter
    // there too; anywhere else text doesn't line up into pixels, so pet, line and meter are SVGs
    // with their motion built in.
    if (e.surface === 'terminal') {
      const { Client } = $.ui.resolve(e)
      const pet: PetViewProps = { mood: current.mood, look, color: current.color }
      const status: StatusViewProps = { name: current.name, line: current.line }
      const gauge: MeterViewProps = { ...(percent === undefined ? {} : { percent }), segments: parts, isWorking, width: METER_CELLS }
      return (
        <Box gap={2} alignItems="center">
          <Client key="pet" module="./pet-view.tsx" width={10} height={4} props={pet} />
          <Box flexDirection="column" justifyContent="center">
            <Client key="status" module="./status-view.tsx" props={status} />
            <Box key="meter-row" alignItems="flex-end">
              {helpers.length > 0 && <Client key="minis" module="./minis-view.tsx" props={{ minis: helpers, stamp: now } satisfies MinisViewProps} />}
              <Client key="meter" module="./meter-view.tsx" props={gauge} />
              {hint}
              {details}
            </Box>
          </Box>
        </Box>
      )
    }

    if (shown && (shown.mood !== current.mood || shown.color !== current.color)) fadeFrom = { ...shown, at: now }
    shown = { mood: current.mood, color: current.color }
    if (shownLine !== undefined && shownLine !== current.line) slideFrom = { line: shownLine, at: now }
    shownLine = current.line
    const from = drawnPercent
    if (percent !== undefined) drawnPercent = percent
    const { Svg } = $.ui.resolve(e)
    // An invisible layer over the sprite catches the click; the SVG itself can't.
    let hit: RenderChildren = null
    if (e.surface === 'desktop') {
      const { Client } = $.ui.resolve(e)
      hit = (
        <Box position="absolute" top={0} left={0}>
          <Client key="pet-hit" module="./hit.tsx" width={6} height={2} props={{ columns: 6, rows: 2 }} />
        </Box>
      )
    }
    const previous = slideFrom && now - slideFrom.at < 600 ? slideFrom.line : undefined
    // The second line, helpers and all, as one SVG that glides from where the last draw left it.
    const resets = parts.filter(p => p.text.startsWith(' resets')).map(p => p.text.trim()).join(' · ')
    const bill = parts.find(p => p.text.startsWith('$'))?.text
    const two = lineTwoSvg({
      minis: helpers,
      ...(percent === undefined ? {} : { percent }),
      from,
      isWorking,
      limits: current.meter.limits ?? [],
      ...(resets ? { resets } : {}),
      ...(bill ? { bill } : {}),
      hasInfo: card.length > 0,
      tones: { ...TONES[theme], text: LINE_COLORS[theme].text },
    }, lineTwoLayout)
    lineTwoLayout = two.layout
    const helpersAlt = current.minis.map(m => `${m.name} helper${m.state === 'bye' ? ' waving bye' : ''}`)
    return (
      <Box gap={2} alignItems="center">
        <Box>
          <Svg source={petSvg(current.mood, fadeFrom && now - fadeFrom.at < 500 ? fadeFrom : undefined, look, current.color)} alt={`${current.name}, a pixel pet, ${current.mood}`} width={50} height={40} />
          {hit}
        </Box>
        <Box flexDirection="column" justifyContent="center">
          <Svg source={lineSvg(current.name, current.line, previous, LINE_COLORS[theme])} alt={`${current.name} ${current.line}`} width={lineWidth(current.name, current.line, previous)} height={20} />
          <Box key="meter-row">
            <Svg source={two.svg} alt={[...helpersAlt, ...card].join('; ') || 'context meter'} width={two.width} height={26} />
            {details}
          </Box>
        </Box>
      </Box>
    )
  })