gob-pet

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = r.text
    if ((await isHostedNow($, r)) || r.look.place !== 'top' || text === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return withReadout({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, below, r.name, text, r.look, e.props.isWorking, e.surface === 'terminal' ? r.glyphs : 'full')
  })

export function withReadout(make: Make, below: RenderElement | null | undefined, name: string, text: string, look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement {
  if (isWorking && look.whileWorking === 'hide') return below ?? make.Box({ children: [] })
  const piece = pieceElement(make, { name, text, color: look.color }, look, isWorking && look.whileWorking === 'dim', glyphs)
  const justify = justifyOf(look.align)
  const ownRow = (key: string) => make.Box({ key, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [piece] })] })

  const isOurs = below !== null && below !== undefined && below.type === 'Box' && keyOf(below) === BAND_KEY
  const rest: RenderNode[] = isOurs ? [...(below.children ?? [])] : isEmpty(below) ? [] : [below as RenderElement]

  if (look.layout === 'merged') {
    const at = rest.findIndex(n => keyOf(n) === ROW_KEY)
    const row = at >= 0 ? rest[at] : undefined
    if (row !== undefined && typeof row !== 'string' && row.type === 'Box') {
      const line = row.children?.[0]
      if (line !== undefined && typeof line !== 'string' && line.type === 'Text') {
        const sep = make.Text({ dimColor: true, children: [separatorOf(look)] })
        const joined = make.Text({ ...line.props, children: [piece, sep, ...(line.children ?? [])] })
        rest[at] = make.Box({ ...row.props, children: [joined] })
        return make.Box({ key: BAND_KEY, flexDirection: 'column', children: rest })
      }
    }
    return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(ROW_KEY), ...rest] })
  }
  return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(`${ROW_KEY}:${name}`), ...rest] })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const now = await $.clock.now()
    const stored = await read($, petState)
    const pet = stored ? advance(stored, now) : newPet(now, optName())
    const stage = await read($, stageState)
    const pane = await read($, paneState)
    const width = Math.max(30, e.props.bodyColumns - 1)
    const mood = moodOf(pet, now, stage.worriedUntil)
    const says = stage.says !== null && now < stage.saysUntil ? stage.says : lineFor(mood, pet.name)
    // he thinks along while Claude works, unless he is napping (then he may doze off on the stage)
    const stageMood: GobMood = mood === 'napping' ? 'sleep' : now < stage.cheerUntil ? 'cheer' : stage.isWorking ? 'think' : 'idle'
    // asleep he wears his nightcap, whatever is in the wardrobe
    const hat: GobHat | null = mood === 'napping' ? 'nightcap' : pet.hat
    const parts: JSX.Element[] = []

    // ------------------------------------------------------------ the stage
    if (e.surface === 'terminal') {
      const { Client } = $.ui.resolve(e)
      const props: StageProps = { says, mood: stageMood, event: stage.event, seq: stage.seq, columns: width, rows: STAGE_ROWS, isReducedMotion, hat, cursorSeq: 0, chip: stage.chip }
      parts.push(<Client key="stage" module="./stage.tsx" props={props} width={width} height={STAGE_ROWS} />)
    } else {
      const { Svg } = $.ui.resolve(e)
      // the sky by the quarter hour, so the markup (and what it plays) changes only every 15 minutes
      const local = new Date(now)
      const hour = Math.floor((local.getHours() + local.getMinutes() / 60) * 4) / 4
      const scene = sceneSvg({ says, mood: stageMood, event: stage.event, isFresh: now - stage.eventAt < 3200, seq: stage.seq, isAnimated: !isReducedMotion, hat, chip: stage.chip, ...(isReducedMotion ? {} : { hour }) })
      const sceneWidth = Math.min(640, Math.max(280, e.props.bodyColumns * 7))
      parts.push(<Svg source={scene} alt={`${pet.name}, your goblin, says: ${says}`} width={sceneWidth} height={Math.round((sceneWidth * SCENE_H) / SCENE_W)} isInteractive />)
    }

    // ------------------------------------------------------- name and level
    const { level, into, need } = levelOf(pet.xp)
    const barWidth = Math.max(8, Math.min(24, width - 30))
    const xpBar = bar(into / need, barWidth)
    parts.push(
      <Box flexDirection="row" columnGap={1}>
        <Text bold color={C.gob}>
          {pet.name}
        </Text>
        <Text bold>{`Lv ${level}`}</Text>
        <Text>
          <Text color={C.gold}>{xpBar.filled}</Text>
          <Text dimColor>{xpBar.empty}</Text>
        </Text>
        <Text dimColor>{`${into}/${need} xp`}</Text>
      </Box>,
    )

    // ----------------------------------------------------------- the stats
    const stat = (label: string, value: number, color: string, flag: string | null) => {
      const b = bar(value / 100, barWidth)
      return (
        <Box flexDirection="row" columnGap={1}>
          <Text>{label.padEnd(9)}</Text>
          <Text>
            <Text color={color}>{b.filled}</Text>
            <Text dimColor>{b.empty}</Text>
          </Text>
          <Text dimColor>{String(Math.round(value)).padStart(3)}</Text>
          {flag !== null && <Text color={C.amber}>{flag}</Text>}
        </Box>
      )
    }
    const isNapping = mood === 'napping'
    parts.push(
      stat('Happiness', pet.happiness, C.pink, null),
      stat('Energy', pet.energy, C.blue, isNapping ? 'napping' : pet.energy < SLEEPY_BELOW ? 'sleepy' : null),
      stat('Fullness', pet.fullness, C.green, pet.fullness < HUNGRY_BELOW ? 'hungry' : null),
    )

    // ------------------------------------------------ streak, age, tally
    const streak = currentStreak(pet, now)
    const streakText = streak > 0 ? `Streak ${streak} day${streak === 1 ? '' : 's'}${pet.bestStreak > streak ? ` (best ${pet.bestStreak})` : ''}` : 'Streak starts today'
    parts.push(<Text dimColor wrap="wrap">{[streakText, ageText(pet, now), pet.hat ? `wearing the ${hatLabel(pet.hat)}` : 'no hat'].join(' · ')}</Text>)
    const t = pet.tally
    parts.push(
      <Text dimColor wrap="wrap">
        {`Turns ${t.turns} · Green tests ${t.tests} · Commits ${t.commits} · Errors ${t.errors} · Fed ${t.feeds} · Pets ${t.pets} · Plays ${t.plays} · Naps ${t.naps}`}
      </Text>,
    )

    // ------------------------------------------------------------ buttons
    parts.push(
      <Box flexDirection="row" columnGap={2} flexWrap="wrap">
        <Button key="feed" plain hotkey="f" label="Feed" onPress={() => void tend($, 'feed')} />
        <Button key="play" plain hotkey="p" label="Play" onPress={() => void tend($, 'play')} />
        <Button key="pet" plain hotkey="e" label="Pet" onPress={() => void tend($, 'pet')} />
        <Button key="nap" plain hotkey="n" label={isNapping ? 'Wake' : 'Nap'} onPress={() => void tend($, 'nap')} />
        <Button key="wardrobe" plain hotkey="w" label="Wardrobe" onPress={() => void togglePanel($, 'wardrobe')} />
        <Button key="rename" plain hotkey="r" label="Rename" onPress={() => void togglePanel($, 'rename')} />
        <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
      </Box>,
    )

    // ------------------------------------------------------------ drawers
    if (pane.panel === 'wardrobe') {
      const next = nextUnlock(level)
      parts.push(
        <Box flexDirection="column">
          <Text dimColor>{pet.hats.length > 0 ? 'Wardrobe: pick a hat (digit keys), w closes' : 'Wardrobe: no hats yet; the first one comes at level 2.'}</Text>
          <Box flexDirection="row" columnGap={2} flexWrap="wrap">
            {wardrobeOf(pet).map((choice, i) => {
              const hotkey = i < 10 ? { hotkey: String((i + 1) % 10) } : {}
              const label = `${choice === pet.hat ? '● ' : ''}${choice ? hatLabel(choice) : 'no hat'}`
              return <Button key={`hat:${choice ?? 'none'}`} plain {...hotkey} label={label} onPress={() => void wear($, choice ?? 'none')} />
            })}
          </Box>
          {next && <Text dimColor>{`Next: the ${next.label} at level ${next.level}`}</Text>}
        </Box>,
      )
    }
    if (pane.panel === 'rename') {
      if (e.surface === 'mobile') parts.push(<Text dimColor>{'Rename him with /pet name <name>'}</Text>)
      else {
        const { Input } = $.ui.resolve(e)
        parts.push(<Input key="name" label="New name: " placeholder={pet.name} autoFocus onSubmit={value => void rename($, value)} />)
      }
    }
    if (pane.notice) parts.push(<Text color={C.amber} wrap="wrap">{pane.notice}</Text>)
    parts.push(<Text dimColor wrap="wrap">{`He lives off your work: a finished turn +${XP.turn} xp, green tests +${XP.test}, a commit +${XP.commit}.`}</Text>)

    return <Box flexDirection="column">{parts}</Box>
  })