session-band

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) {
      return next(e)
    }

    await read($, tick)

    const now = await $.clock.now()
    const seen = await read($, usage)
    const tier = tierOf(seen.percent, set)
    const isArmed = (await read($, armedUntil)) > now
    // The desktop app shows the model and effort beside its own prompt box.
    const row = fitRow(
      buildSegments(seen, await read($, stats), now, set, (await lifetime($, set)).minutes, e.surface === 'terminal'),
      e.props.bodyColumns,
    )
    const { Box, Button, Text } = $.ui.resolve(e)

    const pressHandoff = (): void => {
      void prepareHandoff($, set, '').then(
        one => {
          submitHandoff($, one)
          $.ui.toast(`Handoff requested: ${one.path}`)
        },
        () => $.ui.toast('Handoff failed: the template could not be read.'),
      )
    }

    const pressCompact = (): void => {
      void (async () => {
        const pressedAt = await $.clock.now()

        if ((await read($, armedUntil)) > pressedAt) {
          await update($, armedUntil, () => 0)
          await compact($, set, '')

          return
        }

        await update($, armedUntil, () => pressedAt + ARM_MS)
        $.clock.after(ARM_MS, () => {
          void update($, tick, count => count + 1)
        })
      })().catch(() => $.ui.toast('Compact failed: the template could not be read.'))
    }

    // The blank line above also holds the engine's collapse mark, `[-]`, drawn
    // at the band's top right; without it the mark covers the end of the row.
    return (
      <Box flexDirection="row" marginTop={1}>
        <Text dimColor>{MARKER}</Text>
        {row.segments.map((one, index) => (
          <Text color={one.color} dimColor={one.isDim} wrap="truncate">
            {index === 0 ? '' : ' | '}
            {one.text}
          </Text>
        ))}
        <Box flexGrow={1} />
        <Text> </Text>
        {row.isCompact ? (
          <Button key="handoff" label="h" plain dimColor={tier === 'quiet'} onPress={pressHandoff} />
        ) : (
          <Button
            key="handoff"
            label="handoff"
            hotkey="h"
            plain
            dimColor={tier === 'quiet'}
            onPress={pressHandoff}
          />
        )}
        <Text> </Text>
        {row.isCompact && !isArmed ? (
          <Button key="compact" label="c" plain dimColor={tier !== 'alert'} onPress={pressCompact} />
        ) : (
          <Button
            key="compact"
            label={isArmed ? 'again to compact' : 'compact'}
            hotkey="c"
            plain
            dimColor={tier !== 'alert' && !isArmed}
            onPress={pressCompact}
          />
        )}
      </Box>
    )
  })