git-panel

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const text = r.text
    if ((await isHostedNow($, r)) || r.look.place !== 'top' || text === null || e.props.hasSurvey) return next(e)
    const below = await next(e)
    const { Box, Text } = $.ui.resolve(e)
    return withReadout({ Box: Box as Make['Box'], Text: Text as Make['Text'] }, below, r.name, text, r.look, e.props.isWorking, e.surface === 'terminal' ? r.glyphs : 'full')
  })

export function withReadout(make: Make, below: RenderElement | null | undefined, name: string, text: string, look: Look, isWorking = false, glyphs: IconGlyphs = 'full'): RenderElement {
  if (isWorking && look.whileWorking === 'hide') return below ?? make.Box({ children: [] })
  const piece = pieceElement(make, { name, text, color: look.color }, look, isWorking && look.whileWorking === 'dim', glyphs)
  const justify = justifyOf(look.align)
  const ownRow = (key: string) => make.Box({ key, flexDirection: 'row', justifyContent: justify, children: [make.Text({ wrap: 'wrap', children: [piece] })] })

  const isOurs = below !== null && below !== undefined && below.type === 'Box' && keyOf(below) === BAND_KEY
  const rest: RenderNode[] = isOurs ? [...(below.children ?? [])] : isEmpty(below) ? [] : [below as RenderElement]

  if (look.layout === 'merged') {
    const at = rest.findIndex(n => keyOf(n) === ROW_KEY)
    const row = at >= 0 ? rest[at] : undefined
    if (row !== undefined && typeof row !== 'string' && row.type === 'Box') {
      const line = row.children?.[0]
      if (line !== undefined && typeof line !== 'string' && line.type === 'Text') {
        const sep = make.Text({ dimColor: true, children: [separatorOf(look)] })
        const joined = make.Text({ ...line.props, children: [piece, sep, ...(line.children ?? [])] })
        rest[at] = make.Box({ ...row.props, children: [joined] })
        return make.Box({ key: BAND_KEY, flexDirection: 'column', children: rest })
      }
    }
    return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(ROW_KEY), ...rest] })
  }
  return make.Box({ key: BAND_KEY, flexDirection: 'column', children: [ownRow(`${ROW_KEY}:${name}`), ...rest] })
}

function pieceElement(make: Make, p: Piece, look: Look, isDimmed: boolean, glyphs: IconGlyphs = 'full'): RenderElement {
  const text = pieceText(p.name, p.text, look, glyphs)
  return make.Text({ ...pieceProps(p.color, look, isDimmed), children: [look.style === 'pills' ? ` ${text} ` : text] })
}

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Code } = $.ui.resolve(e)
    const state = await read($, gitAtom)
    const diff = await read($, diffAtom)
    const message = await read($, messageAtom)
    const isCommitOpen = await read($, commitOpenAtom)
    const busy = await read($, busyAtom)
    const { changed, untracked, staged } = counts(state)
    const paneRows = e.props.scroll.bodyRows > 0 ? e.props.scroll.bodyRows : (e.viewport?.rows ?? 30)
    const room = Math.max(3, paneRows - 6 - (isCommitOpen ? 5 : 0) - (diff === null ? 0 : 18))
    const mode: GlyphMode = e.surface === 'terminal' ? glyphMode : 'full'

    if (state.status === 'none') return <Text dimColor>Not a git repository.</Text>
    if (state.status === 'idle') return <Text dimColor>Reading git status…</Text>

    const head = state.isDetached ? `detached at ${state.oid?.slice(0, 7) ?? '?'}` : state.branch || 'HEAD'
    const upstream = state.upstream === null ? 'no upstream' : `${state.upstream} ↑${state.ahead} ↓${state.behind}`

    let field: JSX.Element | null = null
    if (e.surface !== 'mobile') {
      const { Input } = $.ui.resolve(e)
      field = (
        <Input
          key="msg"
          label="Message "
          placeholder="type(scope): summary"
          value={message?.subject ?? ''}
          submitLabel="commit"
          onInput={value => detach(typeSubject($, value))}
          onSubmit={value => detach(pressCommit($, { subject: value, body: message?.body ?? '' }))}
        />
      )
    }

    return (
      <Box flexDirection="column">
        <Text wrap="wrap">
          <Text bold>
            {glyphOf('branch', mode)} {safe(head)}
          </Text>
          <Text dimColor>
            {' '}
            · {upstream} · {plural(changed, 'change')}, {untracked} untracked, {staged} staged
          </Text>
        </Text>
        {state.status === 'error' && <Text color="red" wrap="wrap">× {state.error ?? 'git failed'}</Text>}
        {busy !== null && <Text color="cyan" wrap="wrap">► {busy}</Text>}
        <Box gap={1}>
          <Button key="refresh" hotkey="r" label="Refresh" onPress={() => detach(refresh($))} />
          <Button key="stage-all" hotkey="a" label="Stage all" onPress={() => detach(stageAll($))} />
          <Button
            key="commit-open"
            hotkey="c"
            label={isCommitOpen ? `Commit ${CARET[mode === 'full' ? 0 : 1]}` : 'Commit…'}
            variant="primary"
            onPress={() => update($, commitOpenAtom, open => !open)}
          />
          <Button key="close" hotkey="x" role="dismiss" label="Close" onPress={() => void $.ui.close({ id: PANE })} />
        </Box>
        {isCommitOpen && (
          <Box flexDirection="column" marginY={1}>
            {field ?? (
              <Box flexDirection="column">
                {message === null ? (
                  <Text dimColor wrap="wrap">Generate a message, then commit with it.</Text>
                ) : (
                  <Text>
                    <Text bold wrap="wrap">{message.subject}</Text>
                  </Text>
                )}
              </Box>
            )}
            {message !== null && message.body !== '' && <Text dimColor wrap="wrap">{message.body}</Text>}
            <Box gap={1}>
              <Button key="generate" hotkey="g" label="Generate" onPress={() => detach(pressGenerate($))} />
              {field !== null ? (
                <Button key="commit" label="Commit" variant="primary" onPress={() => detach(pressCommit($, message))} />
              ) : (
                message !== null && (
                  <Button key="commit" label="Commit with this message" variant="primary" onPress={() => detach(pressCommit($, message))} />
                )
              )}
            </Box>
          </Box>
        )}
        {state.files.length === 0 && <Text dimColor>Working tree clean.</Text>}
        {state.files.slice(0, room).map((file, i) => (
          <Box gap={1}>
            <Text>
              <Text color="green">{file.x}</Text>
              <Text color="red">{file.y}</Text>
            </Text>
            <Box flexGrow={1} flexShrink={1}>
              <Text wrap="truncate-start">{safe(file.orig === null ? file.path : `${file.orig} → ${file.path}`)}</Text>
            </Box>
            <Text dimColor>{file.isBinary ? 'bin' : file.added === null ? '' : `+${file.added} −${file.removed}`}</Text>
            <Button key={`diff-${i}`} label="Diff" dimColor onPress={() => detach(showDiff($, file))} />
            {isUnstaged(file) && <Button key={`stage-${i}`} label="Stage" onPress={() => detach(stageFile($, file, true))} />}
            {isStaged(file) && <Button key={`unstage-${i}`} label="Unstage" onPress={() => detach(stageFile($, file, false))} />}
            <Button key={`revert-${i}`} label="Revert" dimColor onPress={() => detach(revertFile($, file))} />
          </Box>
        ))}
        {state.files.length > room && <Text dimColor>… {state.files.length - room} more</Text>}
        {diff !== null && (
          <Box flexDirection="column" marginTop={1}>
            <Box gap={1}>
              <Box flexGrow={1} flexShrink={1}>
                <Text bold wrap="truncate-start">{safe(diff.path)}</Text>
              </Box>
              <Button key="close-diff" label="Close" dimColor onPress={() => update($, diffAtom, () => null)} />
            </Box>
            {diff.sections.map(section => (
              <Box flexDirection="column">
                <Text dimColor>
                  {section.label}
                  {section.isTruncated ? ' (cut to fit)' : ''}
                </Text>
                <Code source={section.text} format="diff" />
              </Box>
            ))}
            {diff.notes.map(note => (
              <Text dimColor wrap="wrap">{note}</Text>
            ))}
          </Box>
        )}
      </Box>
    )
  })