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 chords = await boundChords($)
    const own = paletteColor(await sessionColor($))
    // The chip is the band's identity, as the session name is the bar's: on
    // the session colour, Claude coral once a handoff is armed so the /clear
    // reads apart, and on the surface in the terminal's own ink for a session
    // with no colour. The body keeps the surface either way, where the count's
    // ramp keeps its contrast.
    const chipFill = armed ? `rgb(${BRAND})` : own ?? fill
    const chipInk = chipFill === fill
      ? undefined
      : `rgb(${(await $.env.get("CS_TERM_THEME")) === 'dark' ? WHITE_DARK : WHITE_LIGHT})`
    // Caps close a fill on the terminal's own background, so they need both a
    // fill and this machine's consent to the glyph.
    const caps = fill !== undefined && chipFill !== undefined && (await capsWanted($))
    const { Box, Text, Button } = await $.ui.resolve(e)
    // The Buttons carry no hotkey: a bare digit pressed them from an empty
    // composer, where a digit typed as the answer to a numbered question
    // belongs. A chord bound to each Button's action presses it instead, and
    // the engine draws a Button with no hotkey as its label alone, so the key
    // is spelled beside it, and only when keybindings.json binds one.
    const key = (action: string) => chords[action] !== undefined &&
      <Box marginRight={1}><Text bold color={own}>{chords[action]}</Text></Box>
    // One capsule in the status bar's idiom: the cs chip, then 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. It starts two columns in, where
    // Claude Code draws the bar and the mode line under the prompt.
    return (
      <Box flexDirection="column">
        {drawn}
        <Box marginTop={1}>
          <Box key="cs-rotate-band" marginLeft={2}>
            {caps && <Text color={chipFill}>{CAP_LEFT}</Text>}
            <Box paddingX={1} backgroundColor={chipFill}><Text bold color={chipInk}>cs</Text></Box>
            <Box key="cs-rotate-band-body" paddingX={1} backgroundColor={fill}>
            {key(ROTATE_ACTION)}
            {armed
              ? <Button key="cs-rotate" action={ROTATE_ACTION} plain label="/clear and continue from the handoff"
                        onPress={() => clearAndContinue($)} />
              : <Button key="cs-rotate" action={ROTATE_ACTION} 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 && key(WRAP_ACTION)}
            {!armed && !wrapped && <Button key="cs-wrap" action={WRAP_ACTION} 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>
            {caps && <Text color={fill}>{CAP_RIGHT}</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>
    )
  })