your-serve

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const shown = await read($, serve)
    if (shown === null) return next(e)
    const below = await next(e)
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    // The mobile app draws no field, so there `other` isn't offered and a question is skipped instead.
    const Input = 'Input' in elements ? elements.Input : null
    const current = currentStep(shown)
    const count = shown.questions.length
    const isMany = count > 1
    const line =
      current === null
        ? `🎾 Your serve: all ${count} answers are in your prompt`
        : `🎾 Your serve${isMany ? ` (${current.step + 1}/${count})` : ''}: ${current.asked.question}`
    return (
      <Box flexDirection="column">
        {/* Wraps rather than truncates: answers you can't read are no use. */}
        <Box flexDirection="row" flexWrap="wrap" columnGap={2} width={e.props.bodyColumns - MARKER}>
          <Box flexShrink={1}>
            <Text>{line}</Text>
          </Box>
          {current !== null && (current.asked.options.length > 0 || isMany) && (
            <Box flexShrink={0} flexWrap="wrap" gap={1}>
              {shown.isTyping && Input !== null ? (
                <Input key="serve-other" placeholder="your answer" submitLabel="answer" autoFocus onSubmit={value => void chooseTyped($, value, false)} />
              ) : (
                current.asked.options.map((option, index) => (
                  <Button
                    key={`serve-${index + 1}`}
                    hotkey={HOTKEYS[index]}
                    plain
                    label={option.label}
                    onPress={() => void choose($, option.reply, false)}
                  />
                ))
              )}
              {/* No digit left to spare for these two: they're clicked, or reached with the focus ring. */}
              {isMany && !shown.isTyping && Input !== null && (
                <Button key="serve-other" plain dimColor label="other" onPress={() => void startTyping($)} />
              )}
              {isMany && <Button key="serve-skip" plain dimColor label="skip" onPress={() => void choose($, null, false)} />}
            </Box>
          )}
        </Box>
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    const Input = 'Input' in elements ? elements.Input : null
    const shown = await read($, serve)
    const waiting = new Set(shown?.questions.map(asked => asked.question))
    const earlier = (await read($, history)).filter(asked => !waiting.has(asked.question))
    const current = shown === null ? null : currentStep(shown)
    const isMany = shown !== null && shown.questions.length > 1
    const isTyping = shown?.isTyping === true && Input !== null
    const toast = `toast after ${Math.round(toastAfterMs / 1000)}s · voice ${shouldSpeak ? 'on' : 'off'}`
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" marginBottom={1}>
          <Text bold>🎾 Your Serve</Text>
          <Text dimColor> · {shown === null ? 'nothing waiting on you' : current === null ? 'answers in your prompt' : 'waiting on you'}</Text>
        </Box>
        {shown !== null &&
          isMany &&
          shown.answers.map((reply, index) => (
            <Text dimColor>
              {index + 1}. {shown.questions[index]?.question} {reply ?? '(skipped, type it in the prompt)'}
            </Text>
          ))}
        {current !== null && (
          <Text>
            {isMany ? `${current.step + 1}. ` : ''}
            {current.asked.question}
          </Text>
        )}
        {current !== null && (current.asked.options.length > 0 || isMany) && (
          <Box flexDirection="row" gap={1} marginTop={1}>
            {isTyping && Input !== null ? (
              <Input key="pane-serve-other" placeholder="your answer" submitLabel="answer" autoFocus onSubmit={value => void chooseTyped($, value, true)} />
            ) : (
              current.asked.options.map((option, index) => (
                <Button
                  key={`pane-serve-${index + 1}`}
                  hotkey={HOTKEYS[index]}
                  plain
                  label={option.label}
                  autoFocus={index === 0 ? true : undefined}
                  onPress={() => void choose($, option.reply, true)}
                />
              ))
            )}
            {isMany && !isTyping && Input !== null && (
              <Button
                key="pane-serve-other"
                plain
                dimColor
                label="other"
                autoFocus={current.asked.options.length === 0 ? true : undefined}
                onPress={() => void startTyping($)}
              />
            )}
            {isMany && (
              <Button
                key="pane-serve-skip"
                plain
                dimColor
                label="skip"
                onPress={() => void choose($, null, true)}
              />
            )}
          </Box>
        )}
        {earlier.length > 0 && (
          <Box flexDirection="column" marginTop={shown === null ? 0 : 1}>
            <Text dimColor>Earlier this session</Text>
            {earlier.map(asked => (
              <Box flexDirection="row" width={e.props.bodyColumns}>
                <Box width={7} flexShrink={0}>
                  <Text dimColor>{clockTime(asked.at)}</Text>
                </Box>
                <Box flexShrink={1}>
                  <Text>{asked.question}</Text>
                </Box>
              </Box>
            ))}
          </Box>
        )}
        {shown === null && earlier.length === 0 && <Text dimColor>No questions yet. The ball's with Claude.</Text>}
        <Box marginTop={1}>
          <Text dimColor>{toast} · /config to change · esc closes</Text>
        </Box>
      </Box>
    )
  })