ask-threads

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button, Markdown } = elements
    // Mobile draws no field: the follow-up is typed as /ask N there.
    const Input = 'Input' in elements ? elements.Input : null
    const all = await read($, threads)
    const id = await read($, openId)
    const waiting = await read($, busy)
    const attached = await read($, pulled)
    const thread = all.find(t => t.id === id)
    const width = Math.max(20, (e.viewport?.columns ?? 80) - 16)

    if (thread === undefined) {
      return (
        <Box flexDirection="column">
          {all.length === 0 && <Text dimColor>No side questions yet. /ask &lt;question&gt; asks one.</Text>}
          {all.map(t => (
            <Button
              key={`t${t.id}`}
              plain
              label={`#${t.id}  ${preview(t.exchanges[0]?.question ?? '', width)}  (${t.exchanges.length})${attached.includes(t.id) ? '  ✓ attached' : ''}`}
              onPress={() => update($, openId, () => t.id)}
            />
          ))}
          {all.length > 0 && <Text dimColor>/ask N &lt;follow-up&gt; · /ask pull N · /ask drop N</Text>}
        </Box>
      )
    }

    const isBusy = waiting.includes(thread.id)
    const isAttached = attached.includes(thread.id)

    return (
      <Box flexDirection="column">
        <Text dimColor>ask #{thread.id}</Text>
        {thread.exchanges.map((x, i) => (
          <Box key={`x${i}`} flexDirection="column" marginBottom={1}>
            <Text bold>› {x.question}</Text>
            {x.answer !== null && <Markdown text={x.answer} />}
            {x.answer === null && x.error !== undefined && <Text color="red">No answer: {x.error}</Text>}
            {x.answer === null && x.error === undefined && <Text dimColor>thinking…</Text>}
          </Box>
        ))}
        {!isBusy && Input === null && <Text dimColor>/ask {thread.id} &lt;follow-up&gt; to continue</Text>}
        {!isBusy && Input !== null && (
          <Input
            key="follow"
            placeholder={`Follow up on #${thread.id}…`}
            autoFocus
            onSubmit={(value: string) => (value.trim() === '' ? undefined : void ask($, thread.id, value.trim()))}
          />
        )}
        <Box>
          <Button key="back" label="← All threads" onPress={() => update($, openId, () => null)} />
          <Text> </Text>
          {isAttached ? (
            <Text color="green">✓ attached to your next message</Text>
          ) : (
            <Button key="pull" label="Send to main chat" onPress={() => void pull($, thread.id)} />
          )}
        </Box>
      </Box>
    )
  })