pixipet

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const pet = await read($, petAtom)
    const activity = await read($, activityAtom)
    const speech = await read($, speechAtom)
    const logs = await read($, logAtom)
    snap.skin = await read($, skinAtom)
    snap.species = await read($, speciesAtom)
    snap.lang = await read($, langAtom)
    const t = TEXT[snap.lang]
    snap.pet = pet
    snap.activity = activity
    const now = await $.clock.now()
    const c = await palette($)

    const stage = stageOf(pet.xp)
    const mood = moodOf(pet, activity.kind)
    const toNext = nextStageIn(pet.xp)
    const busy = isBusy(activity.kind)
    const cols = Math.min(e.props.bodyColumns, 48)
    const spoken = speech !== null && speech.until > now ? speech.text : ''
    const room = Math.max(0, (e.viewport?.rows ?? 30) - 28)

    const { Box, Text, Button } = $.ui.resolve(e)
    if ((await read($, viewAtom)) === 'settings') {
      pane = null
      return await drawSettings($, e, cols, c)
    }
    let picture
    if (e.surface === 'terminal') {
      const { Raster } = $.ui.resolve(e)
      const rows = 12
      pane = { columns: cols, rows }
      const cells = cellsFor(cols, rows, true)
      sent.set(PANE, cells)
      picture = <Raster key={RASTER} columns={cols} rows={rows} cells={cells} />
    } else {
      pane = null
      const [stink, piles] = ground(pet.poop, 0)
      picture = (
        <Box flexDirection="row">
          <Box flexDirection="column">
            {sprite(stage, mood, 0).map((l, i) => (
              <Text key={`s${i}`} color={mood === 'sick' ? c.green : c.text}>
                {l}
              </Text>
            ))}
          </Box>
          <Box flexDirection="column" justifyContent="flex-end">
            <Text color={c.sub}>{stink}</Text>
            <Text color={c.yellow}>{piles}</Text>
          </Box>
        </Box>
      )
    }

    return (
      <Box flexDirection="column" width={cols}>
        <Box justifyContent="space-between">
          <Text bold color={c.pet}>
            {pet.name}
            <Text dimColor>
              {' '}
              · {t.stage[stage]} · {ageText(pet, now, snap.lang)}
            </Text>
          </Text>
          <Box key="open-settings">
            <Button
              key="settings"
              plain
              hotkey="o"
              hover={{ color: c.pet }}
              label={t.settings.open}
              onPress={() => update($, viewAtom, () => 'settings')}
            />
          </Box>
        </Box>
        <Text color={c.yellow} wrap="truncate">
          {spoken ? `「${short(spoken, cols - 4)}」` : ' '}
        </Text>
        {picture}

        <Box flexDirection="column" marginTop={1}>
          <Text>
            {t.fullness} <Text color={pet.fullness < 25 ? c.red : c.green}>{bar(pet.fullness, 10)}</Text> {Math.round(pet.fullness)}
          </Text>
          <Text>
            {t.happiness} <Text color={pet.happiness < 30 ? c.red : c.pet}>{bar(pet.happiness, 10)}</Text>{' '}
            {Math.round(pet.happiness)}
          </Text>
          <Text>
            {t.energy} <Text color={pet.energy < 15 ? c.red : c.teal}>{bar(pet.energy, 10)}</Text> {Math.round(pet.energy)}
          </Text>
          <Text dimColor>
            {t.xp} {pet.xp}
            {toNext === null ? t.grown : t.toGrow(toNext)}
          </Text>
        </Box>

        <Box flexDirection="column" marginTop={1}>
          <Text bold>{t.doing}</Text>
          <Text color={activity.kind === 'asking' || activity.kind === 'approving' ? c.red : busy ? c.teal : activity.kind === 'error' ? c.red : c.sub} wrap="wrap">
            {busy ? '● ' : '○ '}
            {describe(activity, snap.lang)}
            {busy ? t.turnTools(activity.turnTools) : ''}
          </Text>
        </Box>

        {logs.length > 0 && room > 0 && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>{t.log}</Text>
            {logs.slice(-Math.min(room, 5)).map((l, i) => (
              <Text key={`l${i}`} dimColor wrap="truncate">
                {clock(l.at)} {l.text}
              </Text>
            ))}
          </Box>
        )}

        <Box marginTop={1}>
          {careButtons(Box, Button, c, t, pet, what => ({ hotkey: what[0]! }), what => doCare($, what))}
        </Box>
        {e.surface === 'terminal' && (
          <Text dimColor wrap="truncate">
            {e.props.isFocused
              ? t.focused
              : t.unfocused}
          </Text>
        )}
      </Box>
    )
  })

async function drawSettings($: Engine, e: PaneSite, cols: number, c: Palette) {
  const t = tx()
  const o = t.settings
  const els = $.ui.resolve(e)
  const { Box, Text, Button } = els
  const [band, place, hasButtons, hasKeys, skin, species, langWanted, isConfirming] = await Promise.all([
    read($, bandModeAtom),
    read($, placeAtom),
    read($, hasButtonsAtom),
    read($, hasKeysAtom),
    read($, skinAtom),
    read($, speciesAtom),
    read($, langWantedAtom),
    read($, isConfirmingResetAtom),
  ])

  // One row: the label, then a chip per choice
  const row = <T extends string | boolean>(
    key: string,
    label: string,
    choices: readonly (readonly [T, string])[],
    current: T,
    pick: (value: T) => unknown,
  ) => (
    <Box key={`row-${key}`} flexDirection="row">
      <Box width={9} flexShrink={0}>
        <Text color={c.sub}>{label}</Text>
      </Box>
      <Box flexDirection="row" gap={1} flexWrap="wrap">
        {choices.map(([value, name]) => {
          const isOn = value === current
          return (
            <Box key={`${key}-${String(value)}`} backgroundColor={isOn ? c.chip.sleep : undefined} paddingX={1}>
              <Button
                key={`set-${key}-${String(value)}`}
                plain
                dimColor={!isOn}
                hover={{ color: c.pet }}
                label={`${isOn ? '●' : '○'} ${name}`}
                onPress={() => pick(value)}
              />
            </Box>
          )
        })}
      </Box>
    </Box>
  )

  const speciesRow =
    'Select' in els ? (
      <Box key="row-species" flexDirection="row">
        <Box width={9} flexShrink={0}>
          <Text color={c.sub}>{o.species}</Text>
        </Box>
        <els.Select
          key="set-species"
          value={species}
          options={speciesIds().map(id => ({ value: id, label: speciesName(id) }))}
          onSelect={id => setSpecies($, id)}
        />
      </Box>
    ) : (
      row('species', o.species, speciesIds().map(id => [id, speciesName(id)] as const), species, id => setSpecies($, id))
    )

  const nameRow =
    'Input' in els ? (
      <Box key="row-name" flexDirection="row">
        <Box width={9} flexShrink={0}>
          <Text color={c.sub}>{o.name}</Text>
        </Box>
        <els.Input
          key="set-name"
          value={snap.pet.name}
          placeholder={o.namePlaceholder}
          onSubmit={value => {
            const name = short(value, 12)
            if (name !== '') return rename($, name)
          }}
        />
      </Box>
    ) : null

  return (
    <Box flexDirection="column" width={cols} gap={0}>
      <Box justifyContent="space-between" marginBottom={1}>
        <Text bold color={c.pet}>
          {o.title}
        </Text>
        <Box key="back-to-pet">
          <Button
            key="back"
            plain
            hotkey="b"
            hover={{ color: c.pet }}
            label={o.back}
            onPress={async () => {
              await update($, isConfirmingResetAtom, () => false)
              await update($, viewAtom, () => 'pet')
            }}
          />
        </Box>
      </Box>
      {speciesRow}
      {row('place', o.place, [['above', o.above], ['below', o.below]] as const, place, v => setPlace($, v))}
      {row('band', o.band, [['full', o.full], ['mini', o.mini], ['hidden', o.hidden]] as const, band, v => setBand($, v))}
      {row('buttons', o.buttons, [[true, o.show], [false, o.hide]] as const, hasButtons, v => setButtons($, v))}
      {row('keys', o.keys, [[true, o.enabled], [false, o.disabled]] as const, hasKeys, v => setKeys($, v))}
      {row('skin', o.skin, [['color', o.color], ['lcd', o.lcd]] as const, skin, v => setSkin($, v))}
      {row('lang', o.lang, [['zh', '中文'], ['en', 'English'], ['auto', o.auto]] as const, langWanted, v => setLang($, v))}
      {nameRow}
      <Box key="row-reset" flexDirection="row" marginTop={1}>
        <Box width={9} flexShrink={0}>
          <Text color={c.sub}>{o.reset}</Text>
        </Box>
        {isConfirming ? (
          <Box flexDirection="row" gap={1}>
            <Text color={c.red}>{o.resetSure} </Text>
            <Box key="reset-yes" backgroundColor={c.chip.feed} paddingX={1}>
              <Button
                key="reset-confirm"
                plain
                hover={{ color: c.red }}
                label={o.resetYes}
                onPress={async () => {
                  await resetPet($)
                  await update($, isConfirmingResetAtom, () => false)
                  await update($, viewAtom, () => 'pet')
                }}
              />
            </Box>
            <Box key="reset-no" paddingX={1}>
              <Button key="reset-cancel" plain label={o.cancel} onPress={() => update($, isConfirmingResetAtom, () => false)} />
            </Box>
          </Box>
        ) : (
          <Box key="reset-ask" paddingX={1}>
            <Button key="reset" plain dimColor hover={{ color: c.red }} label={o.resetAsk} onPress={() => update($, isConfirmingResetAtom, () => true)} />
          </Box>
        )}
      </Box>
      <Text dimColor wrap="wrap">
        {o.hint}
      </Text>
    </Box>
  )
}

function careButtons(
  Box: Elements['Box'],
  Button: Elements['Button'],
  c: Palette,
  t: (typeof TEXT)[Lang],
  pet: Pet,
  hotkey: (what: Care) => { hotkey?: string },
  onPress: (what: Care) => void,
) {
  const chips: [Care, string][] = [
    ['feed', t.feed],
    ['play', t.play],
    ['clean', t.clean],
    ['sleep', pet.isAsleep ? t.wake : t.sleep],
  ]
  // Medicine only while it is sick
  if (pet.isSick) chips.push(['heal', t.heal])
  return (
    <Box flexDirection="row" gap={1} flexWrap="wrap">
      {chips.map(([what, label]) => (
        <Box key={`care-${what}`} backgroundColor={c.chip[what]} paddingX={1}>
          <Button key={what} plain hover={{ color: c.pet }} {...hotkey(what)} label={label} onPress={() => onPress(what)} />
        </Box>
      ))}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey || (await read($, placeAtom)) !== 'above') return next(e)
    const theirs = await next(e)
    const ours = await drawBand($, e, e.props.bodyColumns, e.props.maxRows, true)
    if (ours === undefined) return theirs
    // Share the band with any other mod drawing there
    if (!theirs) return ours
    const { Box } = $.ui.resolve(e)
    return (
      <Box flexDirection="column">
        {theirs}
        {ours}
      </Box>
    )
  })

async function drawBand($: Engine, e: BandSite, width: number, maxRows: number, takesDigits: boolean) {
  const mode = await read($, bandModeAtom)
  if (mode === 'hidden') {
    band = null
    return undefined
  }
  const pet = await read($, petAtom)
  const activity = await read($, activityAtom)
  const speech = await read($, speechAtom)
  snap.skin = await read($, skinAtom)
  snap.species = await read($, speciesAtom)
  snap.lang = await read($, langAtom)
  const t = TEXT[snap.lang]
  snap.pet = pet
  snap.activity = activity
  const now = await $.clock.now()
  const c = await palette($)
  const mood = moodOf(pet, activity.kind)
  const busy = isBusy(activity.kind)
  const spoken = speech !== null && speech.until > now ? `「${speech.text}」` : ''
  const toNext = nextStageIn(pet.xp)
  const rows = 8
  const isFull = mode === 'full' && e.surface === 'terminal' && maxRows >= rows && width >= 64

  const hasKeys = takesDigits && (await read($, hasKeysAtom))
  const hasButtons = await read($, hasButtonsAtom)
  const { Box, Text, Button } = $.ui.resolve(e)
  const actColor = activity.kind === 'asking' || activity.kind === 'approving' ? c.red : busy ? c.teal : c.sub

  // A bare digit in an empty prompt presses a band Button: care without leaving the prompt
  const digits: Record<Care, string> = { feed: '1', play: '2', clean: '3', sleep: '4', heal: '5' }
  const buttons = careButtons(Box, Button, c, t, pet, what => (hasKeys ? { hotkey: digits[what] } : {}), what =>
    doCare($, what),
  )

  if (isFull && e.surface === 'terminal') {
    const { Raster } = $.ui.resolve(e)
    const columns = width >= 90 ? 44 : Math.max(26, width - 46)
    band = { id: e.requestId, columns, rows }
    const cells = cellsFor(columns, rows, false)
    sent.set(e.requestId, cells)
    return (
      <Box flexDirection="row">
        <Raster key={RASTER} columns={columns} rows={rows} cells={cells} />
        <Box flexDirection="column" justifyContent="flex-end" paddingLeft={1} width={Math.min(52, width - columns - 1)}>
          <Text wrap="truncate">
            <Text bold color={c.pet}>
              {pet.name}
            </Text>
            <Text color={c.sub}>
              {' '}
              · {t.stage[stageOf(pet.xp)]} · {t.xp} {pet.xp}
              {toNext === null ? '' : `/${pet.xp + toNext}`}
            </Text>
          </Text>
          <Text wrap="truncate">
            <Text color={c.sub}>{t.short.fullness} </Text>
            <Text color={pet.fullness < 25 ? c.red : c.green}>{bar(pet.fullness)}</Text>
            <Text color={c.sub}> {t.short.happiness} </Text>
            <Text color={pet.happiness < 30 ? c.red : c.pet}>{bar(pet.happiness)}</Text>
            <Text color={c.sub}> {t.short.energy} </Text>
            <Text color={pet.energy < 15 ? c.red : c.teal}>{bar(pet.energy)}</Text>
          </Text>
          <Text color={actColor} wrap="wrap">
            {busy ? '● ' : '○ '}Claude {describe(activity, snap.lang)}
            {busy && activity.turnTools > 0 ? t.tools(activity.turnTools) : ''}
          </Text>
          <Text color={c.yellow} wrap="wrap">
            {spoken || ' '}
          </Text>
          {hasButtons && buttons}
        </Box>
      </Box>
    )
  }

  // One line of stats that never gives way, Claude's activity after it, the buttons under it
  band = null
  return (
    <Box flexDirection="column" width={width}>
      <Box flexDirection="row">
        <Box flexShrink={0} flexDirection="row">
          <Text color={c.pet} bold>
            {stageOf(pet.xp) === 'egg' ? '(  .  )' : face(mood, 0)}{' '}
          </Text>
          <Text>{pet.name} </Text>
          <Text color={c.sub}>{t.short.fullness}</Text>
          <Text color={pet.fullness < 25 ? c.red : c.green}>{bar(pet.fullness, 5)} </Text>
          <Text color={c.sub}>{t.short.happiness}</Text>
          <Text color={pet.happiness < 30 ? c.red : c.pet}>{bar(pet.happiness, 5)} </Text>
          <Text color={c.sub}>{t.short.energy}</Text>
          <Text color={pet.energy < 15 ? c.red : c.teal}>{bar(pet.energy, 5)} </Text>
          {pet.poop > 0 && <Text color={c.yellow}>{'@'.repeat(pet.poop)} </Text>}
        </Box>
        <Text color={spoken ? c.yellow : actColor} wrap="truncate">
          {spoken || `│ Claude ${describe(activity, snap.lang)}`}
        </Text>
      </Box>
      {hasButtons && buttons}
    </Box>
  )
}