session-inbox

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!isOn || e.props.hasSurvey) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    const [ledger, presence, prev, prs, now] = await Promise.all([
      readLedger($),
      read($, PRESENCE),
      read($, PREVIOUS),
      read($, PR_VIEWS),
      $.clock.now(),
    ])
    const isWorking = e.props.isWorking

    if (prev && ledger.turn === 0) {
      const c = prev.ledger.card
      const waiting = prev.ledger.items.length

      return (
        <Box flexDirection="column">
          <Text bold>
            Last session in this folder <Text dimColor>· {ago(now - prev.savedAt)}</Text>
          </Text>
          {c && <Text wrap="truncate-end">  Goal  {c.goal}</Text>}
          {c?.now && <Text wrap="truncate-end" dimColor>  Now   {c.now}</Text>}
          {waiting > 0 && (
            <Text wrap="truncate-end" dimColor>
              {'  '}
              {waiting} waiting on you: {prev.ledger.items.slice(0, 3).map(i => i.ask).join(' · ')}
            </Text>
          )}
          <Box flexDirection="row" gap={1}>
            {prev.isBroughtIn ? (
              <Text dimColor>  Added to your next message.</Text>
            ) : (
              <Button
                key="bring"
                label="Continue from it"
                variant="primary"
                onPress={() => update($, PREVIOUS, p => (p ? { ...p, isBroughtIn: true } : p))}
              />
            )}
            <Button key="hide-prev" label="Hide" onPress={() => update($, PREVIOUS, () => null)} />
          </Box>
        </Box>
      )
    }

    const card = ledger.card
    if (!card && ledger.items.length === 0 && ledger.notes.length === 0) return next(e)

    const batch = latestBatch(ledger)
    const older = olderItems(ledger)
    // Numbers only map back to items while no prompt has been sent since the
    // reply that asked them; answerNote applies the same rule.
    const numbered = ledger.batchTurn === ledger.turn ? batch : []
    const goal = card?.goal || 'This session'
    const waiting = ledger.items.length
    const noteCount = ledger.notes.length
    const prAlert = prAttention(Object.values(prs.views))
    // What else in /inbox wants attention, appended to the band's first line.
    const hints = [
      noteCount > 0 ? <Text color={NOTES}> · {noteCount === 1 ? '1 note' : `${noteCount} notes`} in /inbox</Text> : null,
      prAlert ? <Text color={PRS}> · {prAlert}</Text> : null,
    ]

    if (isWorking) {
      return (
        <Text wrap="truncate-end">
          <Text color={ACCENT}>◆ </Text>
          <Text dimColor>{goal}</Text>
          {waiting > 0 ? <Text color={WAITING}> · {waiting} waiting on you</Text> : null}
        </Text>
      )
    }

    const isReturn = presence.isAway && card !== null
    const shown = (isReturn ? [...older.slice(-2), ...batch] : batch).slice(-6)
    const hidden = waiting - shown.length
    const olderRows = hidden > 0 ? [<Text dimColor>  +{hidden} older in /inbox</Text>] : []
    const fit = (rows: JSX.Element[]) => <Box flexDirection="column">{rows.slice(0, Math.max(1, e.props.maxRows))}</Box>
    const itemRow = (item: Item) => {
      const handle = marker(item, numbered)
      const isInline = fitsInline(item)

      return (
        <Box flexDirection="row">
          <Box width={4} flexShrink={0}>
            <Text bold color={WAITING}>
              {handle}
            </Text>
          </Box>
          <Box flexShrink={1}>
            <Text wrap="truncate-end">
              {item.ask}
              {!isInline && item.rec ? <Text dimColor>  recommended: </Text> : null}
              {!isInline && item.rec ? <Text color={RECOMMENDED}>{item.rec}</Text> : null}
            </Text>
          </Box>
          {isInline ? (
            <Box flexDirection="row" flexShrink={0} gap={1} marginLeft={2}>
              {bandActions($, item).map(a => (
                <Button {...a} />
              ))}
            </Box>
          ) : null}
        </Box>
      )
    }
    const openRows = (card?.running ?? []).slice(0, 3).map(run => (
      <Text wrap="truncate-end">
        <Text color={DONE}>  ● </Text>
        <Text dimColor>{run}</Text>
      </Text>
    ))

    if (isReturn && card) {
      const rows = [
        <Text wrap="truncate-end">
          <Text color={ACCENT}>◆ </Text>
          <Text bold>{card.goal}</Text>
          <Text dimColor> · last active {ago(now - presence.lastActiveAt)}</Text>
          {hints}
        </Text>,
        ...(card.done.length > 0
          ? [
              <Text wrap="truncate-end">
                <Text color={DONE}>  ✓ </Text>
                <Text dimColor>{card.done.slice(-3).join(' · ')}</Text>
              </Text>,
            ]
          : []),
        <Text wrap="truncate-end">
          <Text dimColor>  → </Text>
          {card.now}
        </Text>,
        ...openRows,
        ...(ledger.decided.length > 0
          ? [
              <Text wrap="truncate-end" dimColor>
                {'  Decided: '}
                {ledger.decided
                  .slice(-2)
                  .map(decisionText)
                  .join(' · ')}
              </Text>,
            ]
          : []),
        ...(shown.length > 0
          ? [
              <Text bold color={WAITING}>
                Waiting on you
              </Text>,
              ...shown.map(itemRow),
            ]
          : []),
        ...olderRows,
      ]

      return fit(rows)
    }

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Link, Markdown, Text } = $.ui.resolve(e)
    const [ledger, presence, tab, prState, collapsed, selection, now, isDark] = await Promise.all([
      readLedger($),
      read($, PRESENCE),
      read($, TAB),
      read($, PR_VIEWS),
      read($, COLLAPSED),
      read($, SELECTION),
      $.clock.now(),
      read($, IS_DARK_THEME),
    ])
    const card = ledger.card
    const numbered = ledger.batchTurn === ledger.turn ? latestBatch(ledger) : []
    const prViews = Object.values(prState.views)
    const isFocused = e.props.isFocused
    const color = TAB_COLORS[tab]

    // One list row's content. Selected, a row shows its context line, its title
    // in full, its body and its keys; otherwise one line: `line`, or the title.
    type Row = {
      id: string
      handle: string
      meta: JSX.Element
      title: string
      line?: JSX.Element
      body?: JSX.Element | null
      keys: () => KeyAction[]
    }
    const itemRow = (item: Item): Row => {
      const handle = marker(item, numbered)
      const rec = item.rec && item.kind !== 'do' ? item.rec : null

      return {
        id: item.id,
        handle,
        meta: (
          <Text color={WAITING} bold>
            {item.kind === 'do' ? 'Your task' : 'Question'}
          </Text>
        ),
        title: item.ask,
        body: rec ? (
          <Text wrap="wrap">
            <Text dimColor>Recommended: </Text>
            <Text bold>{rec}</Text>
          </Text>
        ) : null,
        keys: () => itemKeys($, item, handle),
      }
    }
    const noteRow = (note: Note): Row => ({
      id: note.id,
      handle: '•',
      meta: (
        <Text wrap="truncate-end">
          <Text color={NOTES} bold>
            {noteKindLabel(note)}
          </Text>
          <Text dimColor>
            {' · '}
            {ago(now - note.at)}
            {note.path ? ` · ${baseName(note.path)}` : ''}
          </Text>
        </Text>
      ),
      title: note.title,
      line: (
        <Text wrap="truncate-end">
          {note.title}
          <Text dimColor> · {ago(now - note.at)}</Text>
        </Text>
      ),
      body: <Text wrap="wrap">{note.detail}</Text>,
      keys: () => [
        { key: `address-${note.id}`, label: 'Address it', hotkey: 'a', onPress: () => void actOnNote($, note, 'address') },
        { key: `discuss-${note.id}`, label: 'Discuss', hotkey: 'd', onPress: () => void actOnNote($, note, 'discuss') },
        { key: `drop-${note.id}`, label: 'Dismiss', hotkey: 'x', onPress: () => void removeNote($, note.id) },
      ],
    })
    const checkRow = (pr: PrView, c: PrCheck): Row => ({
      id: `${pr.ref} check ${c.name}`,
      handle: '✗',
      meta: (
        <Text color="error" bold>
          Failing check
        </Text>
      ),
      title: c.name,
      line: (
        <Text wrap="truncate-end">
          <Text color="error">{c.name}</Text>
          <Text dimColor> · failing check</Text>
        </Text>
      ),
      keys: () => [
        { key: `fix-${pr.ref}-${c.name}`, label: 'Fix', hotkey: 'f', onPress: () => void send($, prompts.fix(pr, c)) },
        { key: `log-${pr.ref}-${c.name}`, label: 'Open log', hotkey: 'o', onPress: () => void openUrl($, c.url ?? pr.url) },
      ],
    })
    const threadRow = (pr: PrView, t: PrThread): Row => {
      const latest = t.reply ?? { author: t.author, body: t.body }

      return {
        id: `${pr.ref} thread ${t.id}`,
        handle: '◦',
        meta: (
          <Text wrap="truncate-end">
            <Text color={PRS} bold>
              Review thread
            </Text>
            <Text dimColor>
              {t.replies > 0 ? ` · ${t.replies + 1} comments` : ''}
              {t.isOutdated ? ' · outdated' : ''}
            </Text>
          </Text>
        ),
        title: threadWhere(t),
        line: (
          <Text wrap="truncate-end">
            <Text dimColor>{threadWhere(t, baseName(t.path))} </Text>
            {latest.body.replace(/\s+/g, ' ')}
          </Text>
        ),
        body: (
          <Box flexDirection="column">
            {t.reply ? <Markdown dimColor text={`@${t.author}: ${clipLabel(t.body, 200)}`} /> : null}
            <Markdown text={`**@${latest.author}:** ${clipLabel(latest.body, 1200)}`} />
          </Box>
        ),
        keys: () => [
          { key: `address-${t.id}`, label: 'Address', hotkey: 'a', onPress: () => void send($, prompts.address(pr, [t])) },
          { key: `draft-${t.id}`, label: 'Draft reply', hotkey: 'r', onPress: () => void send($, prompts.draft(pr, t)) },
          { key: `discuss-${t.id}`, label: 'Discuss', hotkey: 'd', onPress: () => void send($, prompts.discuss(pr, t)) },
          { key: `open-${t.id}`, label: 'Open', hotkey: 'o', onPress: () => void openUrl($, t.reply?.url || t.url || pr.url) },
        ],
      }
    }

    // Each tab's rows in order: the cursor, the counts and the drawing all read these.
    const prGroups = prViews.map(pr => ({ pr, rows: [...failingChecks(pr).map(c => checkRow(pr, c)), ...waitingThreads(pr).map(t => threadRow(pr, t))] }))
    const rows: Record<Tab, Row[]> = {
      waiting: ledger.items.map(itemRow),
      notes: [...ledger.notes].reverse().map(noteRow),
      prs: prGroups.flatMap(g => g.rows),
    }
    const ids = rows[tab].map(r => r.id)
    const indexOf = new Map(ids.map((id, n) => [id, n]))
    const at = selectedIndex(ids, selection[tab])
    // Wide enough for the longest handle, such as "you" on a task.
    const handleWidth = 3 + Math.max(1, ...rows[tab].map(r => r.handle.length))

    const keyRow = (keys: KeyAction[]) => (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
        {keys.map(k => (
          <Button plain {...k} />
        ))}
      </Box>
    )
    // The selected row gets a bar in the tab's color and a tinted background,