while-you-wait

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const queue = await read($, queueAtom)
    const detail = await read($, detailAtom)
    const seen = await read($, seenAtom)
    const now = await $.clock.now()
    const rule = '─'.repeat(Math.max(20, e.props.bodyColumns - 2))
    if (detail) return detailView($, e, detail, rule)

    const { Box, Text, Button } = $.ui.resolve(e)
    const hint = hintOf(queue, seen)
    const sections: ReturnType<typeof cardView>[] = []
    if (queue.reviews.length) {
      sections.push(heading($, e, 'REVIEW REQUESTED', queue.reviews.length, 'yellow', sections.length === 0, rule))
      for (const pr of queue.reviews) {
        const meta = `${pr.repo}#${pr.number} · by ${pr.author} · +${pr.additions} −${pr.deletions} in ${pr.files} files · ${agoText(pr.updatedAt, now)}${pr.isDraft ? ' · draft' : ''}`
        const pick = { url: pr.url, title: pr.title, meta }
        sections.push(cardView($, e, `r-${pr.url}`, pr.title, meta, pr.url, [{ label: 'Diff', run: () => showDiff($, pick) }]))
      }
    }
    if (queue.mine.length) {
      sections.push(heading($, e, 'YOUR PULL REQUESTS', queue.mine.length, 'magenta', sections.length === 0, rule))
      for (const pr of queue.mine) {
        const fresh = newTalk(pr, seen)
        const meta = `${pr.repo}#${pr.number} · ${STATE_TEXT[pr.state]}${fresh ? ` · ${fresh} new comment${fresh === 1 ? '' : 's'}` : ''} · ${agoText(pr.updatedAt, now)}`
        sections.push(cardView($, e, `m-${pr.url}`, pr.title, meta, pr.url, []))
      }
    }
    if (queue.issues.length) {
      sections.push(heading($, e, 'ASSIGNED ISSUES', queue.issues.length, 'blue', sections.length === 0, rule))
      for (const issue of queue.issues) {
        sections.push(cardView($, e, `i-${issue.url}`, issue.title, `${issue.repo}#${issue.number} · ${agoText(issue.updatedAt, now)}`, issue.url, []))
      }
    }

    return (
      <Box flexDirection="column" paddingX={1}>
        <Box flexDirection="row" justifyContent="space-between">
          <Text bold>👀 While you wait</Text>
          <Text dimColor>{queue.fetchedAt ? `updated ${agoText(new Date(queue.fetchedAt).toISOString(), now)}` : 'loading…'}</Text>
        </Box>
        <Text dimColor>{rule}</Text>
        {queue.problem && <Text color="red">{queue.problem}</Text>}
        {!hint && !queue.problem && queue.fetchedAt > 0 && (
          <Box flexDirection="column" alignItems="center" marginY={1}>
            <Text dimColor>Nothing waiting for you on GitHub.</Text>
          </Box>
        )}
        {sections}
        <Text dimColor>{rule}</Text>
        <Box flexDirection="row" gap={1}>
          <Button key="refresh" label="Refresh" onPress={() => refresh($)} />
          <Text dimColor>{config.onlyThisRepo ? `this repository only${repo ? ` (${repo})` : ''}` : 'all your repositories'}</Text>
        </Box>
      </Box>
    )
  })

function detailView($: EngineInterface, e: View, detail: Detail, rule: string) {
  const { Box, Text, Button, Code, Link } = $.ui.resolve(e)
  return (
    <Box flexDirection="column" paddingX={1}>
      <Box flexDirection="row" gap={1}>
        <Button key="back" label="← Back" onPress={() => setDetail($, null)} />
        {e.surface === 'mobile' ? <Link href={detail.url} label="Open on GitHub" /> : <Button key="detail-open" label="Open" onPress={() => openUrl($, detail.url)} />}
        {!detail.summary && !detail.busy && !detail.problem && <Button key="pre-review" label="Pre-review" variant="primary" onPress={() => preReview($)} />}
      </Box>
      <Text dimColor>{rule}</Text>
      <Text bold wrap="wrap">
        {detail.title}
      </Text>
      <Text dimColor wrap="wrap">
        {detail.meta}
      </Text>
      {detail.busy === 'diff' && <Text dimColor>Loading the diff…</Text>}
      {detail.busy === 'summary' && <Text dimColor>Reading the diff for a pre-review…</Text>}
      {detail.problem && <Text color="red">{detail.problem}</Text>}
      {detail.summary && (
        <Box flexDirection="column" marginTop={1}>
          <Box flexDirection="row" gap={1}>
            <Text bold color="magenta">PRE-REVIEW</Text>
            <Text dimColor>Haiku, first pass</Text>
          </Box>
          <Text wrap="wrap">{detail.summary}</Text>
        </Box>
      )}
      {detail.files.length > 0 && (
        <Box flexDirection="column" marginTop={1}>
          <Text dimColor>{rule}</Text>
          <Box flexDirection="row" gap={1} marginBottom={1}>
            <Text bold color="blue">FILES</Text>
            <Text dimColor>{detail.files.length + detail.more}</Text>
          </Box>
          {detail.files.map((file, i) => (
            <Box key={`f-${i}`} flexDirection="column" marginBottom={1}>
              <Box flexDirection="row" gap={1}>
                <Text bold wrap="truncate-middle">
                  {file.path}
                </Text>
                <Text color="green">+{file.added}</Text>
                <Text color="red">−{file.removed}</Text>
              </Box>
              {file.hunks ? <Code source={file.hunks} format="diff" path={file.path} /> : <Text dimColor>No text changes (binary or renamed).</Text>}
              {file.isCut && <Text dimColor>The rest of this file is on GitHub.</Text>}
            </Box>
          ))}
          {detail.more > 0 && <Text dimColor>{detail.more} more files on GitHub.</Text>}
        </Box>
      )}
    </Box>
  )
}