bearings

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const participation = await read($, participationAtom)
    if (e.props.hasSurvey || participation === 'off' || participation === 'panel') return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)

    const glossary = await read($, glossaryAtom)
    const bearings = await read($, bearingsAtom)
    const turn = await read($, turnAtom)
    const isBusy =
      (await read($, isUpdatingAtom)) || (await read($, isScanningAtom)) || (await read($, rebuildProgressAtom)) !== null
    const otherCount = (await read($, otherSessionsAtom)).length

    const knownTerms = await read($, knownTermsAtom)
    const newCount = glossary.filter(entry => isNew(entry, turn) && !isKnown(entry.term, knownTerms)).length
    const bearingsAge = bearings === null ? 'not built yet' : turnsAgo(turn - bearings.updatedAtTurn)

    return (
      <Box flexDirection="row" gap={2}>
        <Button key="open-glossary" plain hotkey="g" label={`Glossary · ${newCount} new`} onPress={() => void openGlossary($)} />
        <Button key="open-bearings" plain hotkey="b" label={`Bearings · ${bearingsAge}`} onPress={() => void openBearings($)} />
        {otherCount > 0 && <Text dimColor>· {otherCountLabel(otherCount)}</Text>}
        {isBusy && <Text dimColor>updating</Text>}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: BEARINGS_PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Button, Markdown, Text } = elements
    const Input = 'Input' in elements ? elements.Input : undefined

    const turn = await read($, turnAtom)
    const bearings = (await read($, bearingsAtom)) ?? emptyBearings()
    const isEarlierOpen = await read($, isBearingsEarlierOpenAtom)
    const rebuildProgress = await read($, rebuildProgressAtom)
    const thread = await read($, btwAtom)
    const pendingQuestion = await read($, btwPendingQuestionAtom)
    const notice = await read($, btwNoticeAtom)
    const stats = await read($, statsAtom)
    const { recent: recentFacts, earlier: earlierFacts } = splitByRecency(bearings.facts, turn)
    const inherited = bearings.inheritedFrom
    const otherSessions = await read($, otherSessionsAtom)
    const isOthersOpen = await read($, isOtherSessionsOpenAtom)
    const now = await $.clock.now()

    return (
      <Box flexDirection="column" gap={1}>
        {inherited !== undefined && (
          <Text dimColor>
            glossary seeded from the other sessions here (newest {shortId(inherited.sessionId)}, {relativeTime(Date.parse(inherited.savedAt), now)})
          </Text>
        )}
        <Markdown text={capText(bearingsSections(bearings, recentFacts, turn), MARKDOWN_LIMIT)} />
        {earlierFacts.length > 0 && (
          <Button
            key="toggle-earlier"
            plain
            dimColor
            label={`${isEarlierOpen ? 'Hide' : 'Show'} earlier facts (${earlierFacts.length})`}
            onPress={() => void update($, isBearingsEarlierOpenAtom, isOpen => !isOpen)}
          />
        )}
        {earlierFacts.length > 0 && isEarlierOpen && <Markdown dimColor text={capText(factList(earlierFacts), MARKDOWN_LIMIT)} />}
        {otherSessions.length > 0 && (
          <Button
            key="toggle-other-sessions"
            plain
            dimColor
            label={`${isOthersOpen ? 'Hide' : 'Show'} other sessions here (${otherSessions.length})`}
            onPress={() => void update($, isOtherSessionsOpenAtom, isOpen => !isOpen)}
          />
        )}
        {otherSessions.length > 0 && isOthersOpen && (
          <Markdown text={capText(`## Other sessions here\n\n${sessionSections(otherSessions, now)}`, MARKDOWN_LIMIT)} />
        )}
        <Button key="rebuild" hotkey="r" label={rebuildLabel(rebuildProgress)} onPress={() => void logIfNotDone($, () => rebuild($, model))} />
        {thread.length > 0 && <Markdown text={capText(btwThread(thread), MARKDOWN_LIMIT)} />}
        {pendingQuestion !== null && <Text dimColor>thinking: {pendingQuestion}</Text>}
        {notice !== null && <Text dimColor>{notice}</Text>}
        {Input !== undefined && (
          <Input
            key="btw-input"
            placeholder="btw: a side question (or add: / fact: / pin: commands)"
            submitLabel="ask"
            onSubmit={value => void submitPaneInput($, model, value, true)}
          />
        )}
        <Text dimColor>{statsLine(stats)}</Text>
      </Box>
    )
  })