cs

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const drawn = await withGateBand($, e, await next(e))
    // The band draws in a new conversation before any of its turns end, so
    // the birth is settled here: a later /resume is not mistaken for it.
    noteConversation(await $.session.id())
    // A survey owns the band; a running turn cannot be rotated out of.
    turnRunning = e.props.isWorking
    bandIdle = !e.props.hasSurvey && !e.props.isWorking
    if (!bandIdle) return drawn
    const armed = await handoffArmed($)
    const { context } = await $.session.usage()
    const percent = context.percent
    if (!armed && (percent === undefined || percent < (await threshold($)))) return drawn
    if (!(await ownsRotation($))) return drawn
    const wrapped = !armed && (await wrapFinished($))
    const fill = surfaceColor(await $.env.get("CS_TERM_BG_RGB"))
    const { Box, Text, Button } = await $.ui.resolve(e)
    // One capsule in the status bar's idiom: the keys on the bar's own fill,
    // a blank line above them so the band reads apart from the transcript.
    // The context percentage is the bar's to carry; the band does not repeat
    // it. The keyed box lights coral under the pointer; the engine restyles it
    // without running the hook.
    return (
      <Box flexDirection="column">
        {drawn}
        <Box marginTop={1}>
          <Box key="cs-rotate-band" paddingX={1} backgroundColor={fill}>
            {/* The engine draws a plain button as "1: label", and it draws
                that prefix whether or not the label is empty (measured live:
                a hand-drawn digit beside an empty-label button prints the
                hotkey twice), so the label stays on the button. */}
            {armed
              ? <Button key="cs-rotate" hotkey="1" plain label="/clear and continue from the handoff"
                        onPress={() => clearAndContinue($)} />
              : <Button key="cs-rotate" hotkey="1" plain label="rotate this conversation"
                        onPress={() => rotate($)} />}
            {/* a Button is a block: nested in a Text the engine refuses the whole tree (measured), so the separator stands beside it */}
            {!armed && !wrapped && <Text dimColor>{'  \u00b7  '}</Text>}
            {!armed && !wrapped && <Button key="cs-wrap" hotkey="2" plain label="wrap up this session" onPress={() => askToWrap($)} />}
            {/* the forced rotation's grace: the seconds left before the mod runs the /clear itself */}
            {armed && left !== undefined && <Text dimColor>{'  \u00b7  '}</Text>}
            {armed && left !== undefined && <Text bold color={await rampColor($, left)}>{`/clear in ${left}s`}</Text>}
          </Box>
        </Box>
      </Box>
    )
  })

async function withGateBand($: EngineInterface, e: Parameters<EngineInterface['ui']['resolve']>[0], drawn: unknown) {
  if (finishGate === undefined) return drawn
  const { Box, Text } = await $.ui.resolve(e)
  const fill = surfaceColor(await $.env.get("CS_TERM_BG_RGB"))
  const secs = Math.max(0, Math.floor((await $.clock.now()) / 1000) - finishGate.since)
  return (
    <Box flexDirection="column">
      {drawn}
      <Box marginTop={1}>
        <Box paddingX={1} backgroundColor={fill}>
          <Text>{`finishing ${cutTask(finishGate.task)} · gate ${gateElapsed(secs)}`}</Text>
        </Box>
      </Box>
    </Box>
  )
}

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    if (e.requestId !== PREVIEW_PANE || preview === undefined) return next(e)
    const { Box, Text, Markdown } = await $.ui.resolve(e)
    // With one pane open the engine draws no title, so the pane carries its
    // own, in the session's colour; the step is drawn as a reply's markdown is.
    const own = paletteColor(await sessionColor($))
    const color = left === undefined ? undefined : await rampColor($, left)
    return (
      <Box flexDirection="column" paddingX={1}>
        <Text key="header" bold color={own}>Handoff</Text>
        <Box flexDirection="column" marginTop={1}>
          <Markdown key="step" text={preview.text} />
          {preview.cut && <Text key="cut" dimColor>… the rest of the step is in the handoff</Text>}
        </Box>
        {left !== undefined && (
          <Box flexDirection="column" marginTop={1}>
            <Box>
              <Text key="bar" color={color}>{countdownBar(left)}</Text>
              <Text>{'  '}</Text>
              <Text key="count" bold color={color}>{`/clear in ${left}s`}</Text>
            </Box>
            <Text dimColor>press 1 to clear now, or send a prompt to stay</Text>
          </Box>
        )}
      </Box>
    )
  })