cockpit

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    // The band is shared with surveys, and a subagent's transcript is not the session's cockpit.
    if (e.props.hasSurvey || e.props.view.agentId !== undefined || (e.surface !== 'terminal' && e.surface !== 'desktop')) {
      return next(e)
    }

    const { Box, Button, Select, Text } = $.ui.resolve(e)
    const fold = await read($, collapsed)
    const queued = await read($, pending)
    const standingNow = await read($, standing)
    const toolAt = await read($, lastToolAt)
    const cardsNow = await read($, cards)
    const waitingNow = await read($, waiting)
    const ruleNow = await read($, rule)
    const reportAt = await read($, lastReportAt)
    const backgroundNow = await read($, background)
    const hostNow = await read($, host)
    const now = await $.clock.now()
    const isWorking = e.props.isWorking
    const done = completion({
      standing: standingNow,
      now,
      isWorking,
      hasPending: queued !== null && now - queued.at < PENDING_EXPIRY_MS,
      waiting: waitingNow.length,
      openDecisions: cardsNow === null ? 0 : cardsNow.questions.filter(q => q.picked === null).length,
      background: backgroundNow,
      lead: { state: hostNow.leadState, id: hostNow.lead },
      lastReportAt: reportAt,
    })
    const reason = archiveReason(standingNow)
    const contextNow = await read($, context)
    // Offered only while a plugin lists the command: nothing advertises a mod that is not there.
    const handoffAt =
      hostNow.handoffCommand === true
        ? handoffBreak({
            standing: standingNow,
            waiting: waitingNow.length,
            background: backgroundNow,
            context: contextNow,
            isWorking,
            hasPending: queued !== null && now - queued.at < PENDING_EXPIRY_MS,
            tokensLine,
          })
        : null
    // An idle session that is not done says what stands, so the missing button is never a mystery.
    const showBlockers = !done.isReady && !isWorking && standingNow !== null
    const width = Math.max(1, e.props.bodyColumns)
    const queuedLabel = queued !== null && now - queued.at < PENDING_EXPIRY_MS ? (replies.find(reply => reply.text === queued.text)?.label ?? 'reply') : null

    const toggle = (section: keyof CockpitCollapsed, title: string) => (
      <Button
        key={`fold-${section}`}
        plain
        dimColor
        label={`${fold[section] ? '▸' : '▾'} ${title}`}
        onPress={() => {
          void update($, collapsed, held => ({ ...held, [section]: !held[section] }))
        }}
      />
    )

    const allRecommended = cardsNow !== null && cardsNow.questions.every(question => question.recommended !== null)
    // A phrase set in the options can say anything, as the person: show it wherever it differs from the default.
    const custom = replies.filter(reply => reply.text !== reply.fallback)
    // What Send answers puts in the prompt (or sends as the person where there is no prompt box), shown before the press.
    const answersPreview =
      cardsNow === null
        ? ''
        : answersText(cardsNow.questions.map(question => ({ number: question.number, value: question.picked ?? question.recommended ?? '?' })))
    const recommendedPreview =
      cardsNow === null ? '' : answersText(cardsNow.questions.map(question => ({ number: question.number, value: question.recommended ?? '?' })))

    return (
      <Box flexDirection="column" width={width}>
        <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
          {toggle('replies', 'Replies')}
          {!fold.replies &&
            replies.map(reply => (
              <Button
                key={`reply-${reply.id}`}
                {...(reply.hotkey === undefined ? {} : { hotkey: reply.hotkey })}
                label={reply.label}
                dimColor={isWorking}
                onPress={() => {
                  void sendReply($, reply.label, reply.text, isWorking)
                }}
              />
            ))}
          {!fold.replies && queuedLabel !== null && <Text dimColor>queued: {queuedLabel}</Text>}
        </Box>
        {!fold.replies &&
          custom.map(reply => (
            <Text key={`custom-${reply.id}`} dimColor wrap="wrap">
              {reply.label} sends: "{reply.text}"
            </Text>
          ))}
        <Box flexDirection="row" columnGap={1}>
          {toggle('standing', 'Standing')}
          {!fold.standing && (
            <Box flexShrink={1}>
              <Text dimColor wrap="truncate-end">
                {standingLine(standingNow, now, toolAt, isWorking)}
              </Text>
            </Box>
          )}
          {!fold.standing && done.isReady && hostNow.archiveTool && (
            <Button key="archive" label="Archive session" onPress={() => void archiveSession($, reason)} />
          )}
          {!fold.standing && done.isReady && !hostNow.archiveTool && <Text dimColor>done: ready to archive (use the app)</Text>}
          {/* No hotkey: a hand-off ends in a /clear, so it goes only on an explicit press. */}
          {!fold.standing && handoffAt !== null && <Button key="handoff" label="Hand off" onPress={() => offerHandoff($, isWorking)} />}
          {!fold.standing && handoffAt !== null && <Text dimColor>{handoffAt.text}</Text>}
        </Box>
        {!fold.standing && showBlockers && (
          <Text dimColor wrap="truncate-end">
            archive after: {done.blockers.join(', ')}
          </Text>
        )}
        {cardsNow !== null && (
          <Box flexDirection="column">
            {toggle('cards', `Decisions (${cardsNow.questions.length})`)}
            {!fold.cards &&
              cardsNow.questions.map(question => (
                <Box flexDirection="column">
                  <Text wrap="truncate-end">
                    Q{question.number} {question.text}
                  </Text>
                  <Select
                    key={`pick-${question.number}`}
                    options={question.options.map(option => ({
                      value: option.value,
                      label: `${option.value}) ${option.label}${option.value === question.recommended && !labelMarksRecommended(option.label) ? ' (recommended)' : ''}`,
                    }))}
                    value={question.picked ?? question.recommended ?? undefined}
                    onSelect={value => {
                      void pickAnswer($, cardsNow.turnId, question.number, value)
                    }}
                  />
                </Box>
              ))}
            {!fold.cards && (
              <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
                <Button
                  key="cards-send"
                  variant="primary"
                  label="Send answers"
                  dimColor={isWorking}
                  onPress={() => {
                    void sendAnswers($, 'picked', isWorking)
                  }}
                />
                {allRecommended && (
                  <Button
                    key="cards-accept"
                    label="Accept all recommended"
                    dimColor={isWorking}
                    onPress={() => {
                      void sendAnswers($, 'recommended', isWorking)
                    }}