lens

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const kit = kitOf($.ui.resolve(e))
    const { Text } = kit
    const now = settledView(await read($, view))
    const stored = await read($, scan)
    const found = settledScan(stored)

    if (now.repo === '') {
      return frame(
        kit,
        false,
        settings.sidePadding,
        recentsScreen(
          kit,
          { recents: await read($, recents), now: await $.clock.now() },
          {
            open: one => void openReview($, one.repo, undefined),
            forget: one => void forgetReview($, one.repo),
          },
        ),
      )
    }

    const { repo, target } = now
    const history = historyOf(repo)
    const compared = comparisonOf(now, found, history)
    const { isComparing } = compared
    // The request whose comments show: the one under review, or else the
    // open request of the branch checked out.
    const ofBranch =
      target === '' && branchRequest?.repo === repo && branchRequest.branch === found.head
        ? branchRequest
        : undefined
    const requestTyped = compared.requestTyped || (ofBranch?.typed ?? '')
    const requestLabel = (compared.request.split(' → ')[0] ?? '') || (ofBranch?.label ?? '')
    // The request's comments, as the forge has them, on the files of the
    // folder under review: a forge's paths are from the repo's root, the
    // pane's from that folder. A comment on the request as a whole keeps its
    // empty path.
    const reviewed =
      requestTyped !== '' && commentsCache?.key === `${repo}\n${requestTyped}`
        ? commentsCache
        : undefined
    const requestComments = (reviewed?.comments ?? []).flatMap(one =>
      one.path === ''
        ? [one]
        : one.path.startsWith(reviewed?.prefix ?? '')
          ? [{ ...one, path: one.path.slice((reviewed?.prefix ?? '').length) }]
          : [],
    )
    // The ledger mod's review findings, where it is loaded and has a run, join
    // them: each shows on its line as a thread does. Reading the run here
    // draws the pane again when it changes.
    const ledgerRun = await $.state.get(LEDGER_RUN).then(
      got => got.value,
      () => undefined,
    )
    const sessionRoot = await $.session.cwd().catch(() => '')
    const comments = [
      ...requestComments,
      ...findingComments(
        ledgerRun,
        repo,
        sessionRoot,
        found.files.map(one => one.path),
      ),
    ]
    // The comparison border takes a cell on each side, which the screens that
    // size their own window leave out of their width and height.
    const inset = isComparing ? 2 : 0
    // While a scan runs: a mark that turns. Reading its frame subscribes the
    // drawing only then, so an idle pane stays still.
    const busyMark =
      found.status === 'running' ? (SPINNER[(await read($, spin)) % SPINNER.length] ?? '') : ''
    const inChanged = changedDiags(found)

    // A scan from before the line counts and graph existed has neither: ask
    // for a fresh one, which the timer picks up.
    if (stored.stats === undefined && found.status !== 'running') {
      job ??= { isProject: false }
    }

    const shell: Shell = {
      columns: (e.props.bodyColumns ?? 80) - inset - 2 * settings.sidePadding,
      rows: (e.props.scroll?.bodyRows ?? e.viewport?.rows ?? 30) - inset,
      inset,
      padding: settings.sidePadding,
      repoName: repo.split('/').pop() ?? '',
      // git lists the main checkout first; any other is a worktree of it.
      worktreeOf:
        found.worktrees.length > 1 && found.worktrees[0]?.isCurrent === false
          ? (found.worktrees[0].path.split('/').pop() ?? '')
          : '',
      headName: compared.headName,
      side: compared.side,
      against: compared.against,
      request: compared.request,
      reviewing: requestLabel,
      isComparing,
      isScanning: found.status === 'running',
      busyMark,
      pending: found.pending,
      checked: found.checked,
      toCheck: found.toCheck,
      // Shown while the language server reads the open file: its colours,
      // outline and hints come after the file itself.
      working:
        now.screen === 'file' && insightFor === now.file && now.commit === ''
          ? 'language server reading this file…'
          : '',
      isProjectChecked: found.isProjectChecked,
      notes: found.notes,
      totals: totalsOf(found, inChanged),
    }
    // A screen that draws its own window (`isOwn`) needs the pane held one
    // row down (see `frame`): asked for here, done by the timer once the
    // screen has been drawn.
    const framed = (screen: RenderChildren, isOwn = false) => {
      if (isOwn) {
        wantPin = (e.props.scroll?.offset ?? 1) !== 1
      }

      return frame(kit, isComparing, settings.sidePadding, screen, isOwn)
    }

    // What several screens' actions are made of.
    const set = (change: (last: View) => View): void => void update($, view, change)
    const rescan = (): void => {
      job = { isProject: false }
    }
    const help = (): void => set(last => ({ ...last, isHelp: true }))

    if (now.isHelp) {
      return framed(
        helpScreen(kit, shell, now.screen, {
          close: () => set(last => ({ ...last, isHelp: false })),
        }),
      )
    }

    // Opens a file of the working tree at a line: a definition, a use, an
    // outline entry. A library's file is read from where it is installed,
    // outside what git tracks.
    const openAt = async (path: string, line: number): Promise<void> => {
      await loadSource($, repo, path)
      await update(
        $,
        view,
        (last): View => ({
          ...last,
          screen: 'file',
          file: path,
          commit: '',
          origin: 'tree',
          top: Math.max(1, line - 3),
          cursor: -1,
          isDiff: false,
          isPreview: false,
          symbol: NO_SYMBOL,
          crumb: NO_CRUMB,

export const frame = (
  { Box, Text }: Kit,
  isComparing: boolean,
  padding: number,
  screen: RenderChildren,
  isOwn = false,
) => {
  const framed = isComparing ? (
    <Box
      key="pin"
      flexDirection="column"
      borderStyle="round"
      borderColor={COMPARE_COLOR}
      paddingX={padding}
    >
      {screen}
    </Box>
  ) : (
    <Box key="pin" flexDirection="column" paddingX={padding}>
      {screen}
    </Box>
  )

  if (!isOwn) {
    return framed
  }

  return (
    <Box flexDirection="column">
      <Text> </Text>
      {framed}
      <Text> </Text>
      <Text> </Text>
      <Text> </Text>
    </Box>
  )
}

export const recentsScreen = (
  { Box, Button, Text }: Kit,
  model: { recents: readonly Recent[]; now: number },
  actions: RecentsActions,
) => {
  // A path under the person's home folder reads from `~`.
  const short = (repo: string): string => repo.replace(/^\/(Users|home)\/[^/]+\//, '~/')
  const nameOf = (path: string): string => path.split('/').pop() ?? path

  if (model.recents.length === 0) {
    return (
      <Box flexDirection="column">
        <Text bold>Nothing to review here</Text>
        <Text dimColor>
          This folder is not inside a git repository, and no repo has been reviewed yet.
        </Text>
        <Text dimColor>Name one: /lens ~/Code/my-repo [base branch or commit]</Text>
      </Box>
    )
  }

  // The first nine reviews, in the order drawn, answer to their number.
  let drawn = 0
  const row = (one: Recent, label: string, indent: number) => {
    const at = drawn

    drawn += 1

    return (
      <Box key={`recent:${one.repo}`} columnGap={1} height={1} overflow="hidden">
        <Text dimColor>
          {' '.repeat(indent)}
          {at < 9 ? String(at + 1) : ' '}
        </Text>
        <Button
          plain
          key={`open:${one.repo}`}
          {...(at < 9 ? { hotkey: String(at + 1) } : {})}
          label={label}
          onPress={() => actions.open(one)}
        />
        <Text color="#ffab40" wrap="truncate-end">
          {comparisonLabel(one)}
        </Text>
        <Text dimColor wrap="truncate-end">
          {short(one.repo)} · {agoOf(one.at, model.now)}
        </Text>
        <Box display="none" hover={{ display: 'flex' }}>
          <Button plain key={`forget:${one.repo}`} label="✕ forget" onPress={() => actions.forget(one)} />
        </Box>
      </Box>
    )
  }

  return (
    <Box flexDirection="column">
      <Text bold>Recently reviewed</Text>
      <Text dimColor wrap="truncate-end">
        This folder is not in a git repository. Pick a repo (its number), or name one: /lens
        ~/Code/my-repo
      </Text>
      <Text> </Text>
      {groupRecents(model.recents).flatMap(({ home, reviews }) =>
        // A repo reviewed in one place is one row; one with worktrees is a
        // heading and a row for each, the main checkout named as such.
        reviews.length === 1 && reviews[0]?.repo === home
          ? reviews.map(one => row(one, nameOf(one.repo), 0))
          : [
              <Text bold wrap="truncate-end">
                {nameOf(home)} <Text dimColor>{short(home)}</Text>
              </Text>,
              ...reviews.map(one =>
                row(one, one.repo === home ? 'main checkout' : `worktree ${nameOf(one.repo)}`, 2),
              ),
            ],
      )}
    </Box>
  )
}

export const helpScreen = (kit: Kit, shell: Shell, screen: View['screen'], actions: HelpActions) => {
  const { Box, Button, Text } = kit

  return (
    <Box flexDirection="column">
      {statusLine(kit, shell)}
      <Box>
        <Button plain key="help" hotkey="h" label="close" onPress={actions.close} />
      </Box>
      {HELP[screen].flatMap(([heading, rows]) => [
        <Text> </Text>,
        <Text bold>{heading}</Text>,
        ...rows.map(([key, what]) => (
          <Box>
            <Box flexShrink={0} width={12}>
              <Text color="cyan">{key}</Text>
            </Box>
            <Text>{what}</Text>
          </Box>
        )),
      ])}
    </Box>
  )
}

export const statusLine = ({ Text }: Kit, shell: Shell) => (
  <Text dimColor wrap="truncate-end">
    {/* A worktree says so first and in colour: its files are not the main
        checkout's, which is easy to forget once inside it. */}
    {shell.worktreeOf === '' ? (
      ''
    ) : (
      <Text color={WORKTREE_COLOR} dimColor={false} bold>
        {WORKTREE_ICON} worktree of {shell.worktreeOf} ·{' '}
      </Text>
    )}
    {shell.repoName} · {shell.request === '' ? shell.side : shell.request}
    {shell.request !== ''
      ? ''
      : shell.isComparing
        ? ` vs ${shell.against}`
        : ' · uncommitted changes'}
    {shell.request === '' && shell.reviewing !== '' ? ` · ${shell.reviewing}` : ''}
    {shell.isScanning
      ? ` · ${shell.busyMark} ${shell.pending.length === 0 ? 'reading changes' : `checking: ${shell.pending.join(', ')}`}`
      : ''}
    {shell.isScanning && shell.toCheck > shell.checked && shell.checked > 0
      ? ` · ${shell.checked} of ${shell.toCheck} files checked`
      : ''}
    {shell.working === '' ? '' : ` · ${shell.working}`}
    {shell.isProjectChecked ? ' · whole project checked' : ''}
  </Text>
)

export const listScreen = (kit: Kit, shell: Shell, shown: Listing, actions: ListActions) => {
  const { Box, Button, Text } = kit

  return (
    <Box flexDirection="column">
      {statusLine(kit, shell)}
      <Box columnGap={2}>
        <Button plain key="back" hotkey="b" label="back" onPress={actions.back} />
        {shown.prompt !== '' && (
          <Button
            plain
            key="list-send"
            hotkey="n"
            label="send list to prompt"
            onPress={actions.sendList}
          />
        )}
        {helpButton(kit, actions.help)}
      </Box>
      <Text bold wrap="truncate-end">
        {shown.title}
      </Text>
      {shown.rows.map((row, at) =>
        row.path === '' ? (
          <Text color="cyan" wrap="truncate-end">
            {row.label}
          </Text>
        ) : row.tail !== undefined ? (
          // A name to jump to. The name itself is what is pressed; a Button
          // takes no colour, so its kind's colour is on the mark before it
          // (ƒ, C, v), with any indent kept ahead of that.
          <Box height={1} overflow="hidden">
            <Text color={(row.color ?? '') === '' ? undefined : row.color}>
              {row.label.slice(0, row.label.length - row.label.trimStart().length)}
              {row.mark ?? ''}{' '}
            </Text>
            <Button
              plain
              key={`row:${at}`}
              label={row.label.trimStart()}
              onPress={() => actions.open(row.path, row.line)}
            />
            <Text dimColor>
              {'  '}
              line {row.line}
              {row.tail === '' ? '' : ` · ${row.tail}`}
            </Text>
          </Box>
        ) : (
          <Box height={1} overflow="hidden">
            <Button
              plain
              key={`row:${at}`}
              label={row.label.slice(0, Math.max(20, shell.columns - 2))}
              onPress={() => actions.open(row.path, row.line)}
            />
          </Box>
        ),
      )}
      {shown.rows.length >= LIST_ROWS && (
        <Text dimColor>Only the first {LIST_ROWS} are listed.</Text>
      )}
    </Box>
  )
}