crab-buddy

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const rest = await next(e)
    if (e.props.hasSurvey) return rest
    const { mood: m, take: t, log: seen, from } = await read($, look)
    // The caption log, newest on top; before the first change, the mood's first line.
    const log = seen.length ? seen : [LINES[m][0]]
    // Footer-owned lines never draw here, even one a 0.2.0 session left in the atom.
    const ls = Object.entries(await read($, lines)).filter(([who]) => !FOOTER.has(who))
    const { Box, Svg, Text, Client } = $.ui.resolve(e) as ReturnType<typeof $.ui.resolve> & { Svg: never; Client: never }
    const row = ls.length > 0 && (
      <Box key="crab-lines" flexDirection="row" flexWrap="wrap" columnGap={3}>
        {ls.map(([who, text]) => <Text key={who} color="text">{text}</Text>)}
      </Box>
    )
    const info = !!row || !isEmpty(rest)
    // Terminal: the welcome-screen crab in quadrant blocks, at the band's bottom right, three rows tall; the
    // terminal animates it (./term.tsx). Too narrow for it beside the lines, the lines keep the room.
    // By surface, not by table: the terminal's table answers Svg too, drawn as an empty fragment.
    if (e.surface !== 'desktop') {
      if (e.surface !== 'terminal' || e.props.bodyColumns < COLS + 24) return row ? <Box flexDirection="column">{row}{rest}</Box> : rest
      return (
        <Box key="crab-band" flexDirection="row" alignItems="flex-end" columnGap={2}>
          <Box key="crab-text" flexDirection="column" flexGrow={1} flexShrink={1}>
            {row}
            {info && rest}
          </Box>
          <Client key="crab-term" module="./term.tsx" props={{ mood: m }} width={COLS} height={ROWS} />
        </Box>
      )
    }
    // The crab is in flow at the bar's right, beside the lines: floated, the band clipped it or shrank it to
    // its slot (0.4.3). 52×41: one size up, art ratio 38:30 (Praj, 11 Oct).
    // The bar reads like the transcript (Praj, 11 Oct). Nothing floats: a floated fill painted over
    // the crab and the lines in the app (0.4.5-0.4.7; 0.4.7's lift boxes did not lift them, live check 22:07).
    //  - crab-fill is the crab's and the lines' own parent, so they paint over its fill in document order.
    //  - It reaches into the card's padding ((40px - 1lh)/2 x 8px; margin units .5lh and ch) with the same
    //    padding back, so the content stays put. The band clips overshoot above and sideways without
    //    scrolling; below, overshoot would scroll the band, so the bottom stops at the padding's edge:
    //    1.16 x .5lh = (40px - 1lh)/2 at the measured lh 18.5 (half a line left a 1.5px grey line, 22:24).
    //  - crab-band carries the same colour: the app zeroes vertical margins down a single-child chain from
    //    the root, and stops at a Box with a background.
    // ponytail: 1.16 is calibrated to lh 18.5: a larger text size leaves a grey line below (lower it), a smaller
    // one lets the bar scroll a pixel or two.
    // The transcript's colour by theme key, which the desktop resolves by the app's own theme: Claude Code's theme
    // setting can say dark while the app is light (Windows, Praj 12 Oct). Probe 10:58: #151515 dark, #fcfcfb light.
    const bg = 'userMessageBackground'
    const stage = e.props.bodyColumns >= 60
    return (
      <Box key="crab-band" flexDirection="row" backgroundColor={bg}>
        {/* The crab stands at the bottom right, right on the prompt box, however many lines sit beside it (Praj, 12 Oct). */}
        <Box key="crab-fill" flexDirection="row" alignItems="flex-end" columnGap={2} flexGrow={1} backgroundColor={bg}
          marginTop={-2} paddingTop={2} marginBottom={-1.16} paddingBottom={1.16} marginLeft={-2} paddingLeft={2} marginRight={-2} paddingRight={2}>
          <Box key="crab-text" flexDirection="column" flexGrow={1} flexShrink={1}>
            {row}
            {info && rest}
            {/* Crab alone in the band: its caption fills the left, so the bar is never an empty strip (Praj, 12 Oct). */}
            {/* Two lines when the crab is alone, the newest only beside other lines and cards (Praj, 12 Oct). */}
            {(info ? log.slice(0, 1) : log).map((l, i) => <Text key={l} color={i === 0 ? 'inactive' : 'subtle'} wrap="truncate-end">{l}</Text>)}
          </Box>
          {/* The right half is the crab's stage (Praj, 12 Oct). The Svg asks for more than the half and is capped to it.
              Under 60 columns the half is too small to walk in, and the crab stands as before. */}
          <Box key="crab-buddy" flexShrink={0} width={stage ? '50%' : undefined}>
            {/* On the stage the label is part of the crab's art, over its head wherever it stands; interactive, so
                the art sees the pointer. On Windows a hover Box got the desktop's own pill, which kept only the text
                colour (Praj's photos, 12 Oct). */}
            {stage
              ? <Svg source={stageArt(m, t, from ?? STATION[m], MEANING[m])} alt={`Claude crab: ${m}`} width={2000} height={41} isInteractive />
              : <Svg source={crabArt(m, t)} alt={`Claude crab: ${m}`} width={52} height={41} />}
            {/* Narrow band, crab in the corner: the label floats left of it in the band's own colours, top row. */}
            {!stage && <Box position="absolute" top={0} right={8} display="none" hover={{ display: 'flex' }}
              backgroundColor={bg} paddingX={1}>
              <Text color="text" wrap="truncate-end">{MEANING[m]}</Text>
            </Box>}
          </Box>
        </Box>
      </Box>
    )
  })