source-control

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    bandDraws += 1
    bandSurfaces.add(e.surface)

    if (e.props.hasSurvey) {
      return next(e)
    }

    const [probe, snapshot, view] = await Promise.all([read($, PROBE), read($, SNAPSHOT), read($, VIEW)])

    if (probe !== 'repo' || snapshot === null) {
      return next(e)
    }

    const kit = kitOf($.ui.resolve(e), e.surface, e.props.bodyColumns)

    return bandView(kit, snapshot, view ?? INITIAL_VIEW, handlers, staleAfterMs)
  })

export function bandView(
  kit: Kit,
  snapshot: ScSnapshot,
  view: ScView,
  handlers: Handlers,
  staleAfterMs: number,
): RenderElement {
  const { Box, Button } = kit
  const primary: Primary | null = primaryOf(snapshot)
  const isNarrow = kit.columns < NARROW_COLUMNS
  const isBusy = view.busy !== null

  const primaryLabel = primary === null ? '' : isNarrow ? primary.short : primary.label
  const busyLabel = view.busy ?? ''

  return (
    <Box flexDirection="row" width="100%" paddingRight={kit.surface === 'terminal' ? ENGINE_MARK_COLUMNS : 0}>
      <Box flexShrink={1}>{statusText(kit, snapshot, view, staleAfterMs)}</Box>
      <Box flexGrow={1} />
      {primary !== null && (
        <Box marginLeft={1}>
          {primaryButton(kit, 'primary', isBusy ? null : primary.icon, isBusy ? busyLabel : primaryLabel, () => {
            if (!isBusy) {
              handlers.primary(primary.kind)
            }
          }, isBusy)}
        </Box>
      )}
      <Box marginLeft={1}>
        <Button key="panel" plain dimColor={!view.isPaneOpen} onPress={() => handlers.togglePane()}>
          {GLYPH.panel}
        </Button>
      </Box>
    </Box>
  )
}

function statusText(kit: Kit, snapshot: ScSnapshot, view: ScView, staleAfterMs: number): RenderElement {
  const { Text } = kit
  const isNarrow = kit.columns < NARROW_COLUMNS
  const changes = changeCountOf(snapshot)
  const operation = operationTextOf(snapshot)
  const freshness = isNarrow ? null : freshnessOf(snapshot, view, staleAfterMs)
  const isUnpublished = snapshot.upstream === null && snapshot.branch !== null && snapshot.remoteName !== null && !snapshot.isUnborn
  const branchRoom = Math.max(8, Math.floor(kit.columns / 3))

  const { Box } = kit

  // the desktop draws the pencil as an icon (the glyph is an emoji there),
  // so the line breaks into the text before it and the text after it
  const hasIcons = kit.Svg !== null

  return (
    <Box flexDirection="row" alignItems="center">
      {icon(kit, 'branch', 'muted', COLOR.muted)}
      <Text wrap="truncate-end">
        <Text bold>{cutEnd(clean(branchTextOf(snapshot)), branchRoom)}</Text>
        {snapshot.behind > 0 && <Text color={COLOR.behind}>{` ${snapshot.behind}${GLYPH.behind}`}</Text>}
        {snapshot.ahead > 0 && <Text color={COLOR.ahead}>{` ${snapshot.ahead}${GLYPH.ahead}`}</Text>}
        {changes > 0 && !hasIcons && <Text>{`  ${GLYPH.changes} ${changes}`}</Text>}
      </Text>
      {changes > 0 && hasIcons && (
        <Box flexDirection="row" alignItems="center" marginLeft={2}>
          {icon(kit, 'edit', 'muted')}
          <Text>{`${changes}`}</Text>
        </Box>
      )}
      <Text wrap="truncate-end">
        {isConfirmedSettled(snapshot, view, staleAfterMs) && <Text color={COLOR.ok}>{` ${GLYPH.clean}`}</Text>}
        {operation !== null && <Text color={COLOR.error}>{` · ${operation}`}</Text>}
        {isUnpublished && !isNarrow && <Text color={COLOR.muted}>{` · ${t().unpublished}`}</Text>}
        {view.busy !== null && <Text color={COLOR.muted}>{` · ${view.busy}`}</Text>}
        {view.busy === null && freshness !== null && (
          <Text color={freshness.isWarning ? COLOR.warn : COLOR.muted}>{` · ${freshness.text}`}</Text>
        )}
      </Text>
    </Box>
  )
}

export function primaryButton(
  kit: Kit,
  key: string,
  iconName: IconName | null,
  label: string,
  onPress: () => void,
  isBusy: boolean,
  isWide = false,
): RenderElement {
  const { Box, Button } = kit

  // the app's own button keeps the app's size, next to its neighbours
  if (kit.surface !== 'terminal') {
    return (
      <Box flexDirection="row">
        <Button key={key} variant="primary" dimColor={isBusy} onPress={onPress}>
          {label === '' ? ' ' : label}
        </Button>
      </Box>
    )
  }

  const shown = iconName !== null ? [glyphOf(iconName), label].filter(part => part !== '').join(' ') : label

  return (
    <Box
      flexDirection="row"
      alignItems="center"
      backgroundColor={VSCODE_BLUE}
      paddingX={1}
      {...(isWide ? { flexGrow: 1, justifyContent: 'center' as const } : {})}
    >
      <Button key={key} plain dimColor={isBusy} onPress={onPress}>
        {shown === '' ? ' ' : shown}
      </Button>
    </Box>
  )
}

  on('ui.render', { component: 'Pane', requestId: PANE_ID }, async ($, e) => {
    paneDraws += 1
    paneSurfaces.add(e.surface)

    const [snapshot, view] = await Promise.all([read($, SNAPSHOT), read($, VIEW)])
    const kit = kitOf($.ui.resolve(e), e.surface, Math.max(10, e.props.bodyColumns - 2))

    return paneView(kit, snapshot, view ?? INITIAL_VIEW, handlers, staleAfterMs, e.props.placement === 'dock')
  })

export function paneView(
  kit: Kit,
  snapshot: ScSnapshot | null,
  view: ScView,
  handlers: Handlers,
  staleAfterMs: number,
  isDocked: boolean,
): RenderElement {
  const { Box, Button, Text } = kit
  const isBusy = view.busy !== null
  const isFolded = (id: string) => view.folded.includes(id)
  const top = headerRow(kit, handlers, isBusy, isDocked)
  // the terminal draws a docked pane's close mark in its first row; the
  // desktop puts it in a title bar of its own
  const hasMarkRow = isDocked && kit.Svg === null

  if (snapshot === null) {
    return (
      <Box flexDirection="column" paddingX={1} paddingTop={hasMarkRow ? 1 : 0}>
        {top}
        {dimLine(kit, t().noRepository)}
      </Box>
    )
  }

  const details = snapshot.details
  const conflictCount = snapshot.conflicts.length

  const operation =
    snapshot.operation !== null
      ? `${t().operationRunning(OPERATION_NAMES[snapshot.operation])} · ${conflictCount > 0 ? t().conflicts(conflictCount) : t().allConflictsResolved}`
      : operationTextOf(snapshot)
  const notice = view.notice
  const noticeColor = notice?.tone === 'error' ? COLOR.error : notice?.tone === 'success' ? COLOR.ok : COLOR.muted
  const target = snapshot.branch ?? 'HEAD'
  // the message field only while there is something to commit (or a merge
  // to conclude), so a clean repository shows no commit control at all
  const canCommit = changeCountOf(snapshot) > 0 || snapshot.operation === 'merge'
  const { Input } = kit

  const sections: (RenderElement | null | false)[] = []

  if (snapshot.conflicts.length > 0) {
    sections.push(sectionHeader(kit, handlers, 'conflicts', t().conflictsSection, snapshot.conflicts.length, isFolded('conflicts')))

    if (!isFolded('conflicts')) {
      sections.push(dimLine(kit, t().conflictsHint))
      sections.push(...snapshot.conflicts.map(file => fileRow(kit, handlers, file, 'stage')))
    }
  }

  if (snapshot.staged.length > 0) {
    sections.push(
      sectionHeader(
        kit,
        handlers,
        'staged',
        t().stagedSection,
        snapshot.staged.length,
        isFolded('staged'),
        <Button key="unstage-all" plain dimColor onPress={() => handlers.act('unstageAll')}>
          {`${GLYPH.unstage} ${t().all}`}
        </Button>,
      ),
    )

    if (!isFolded('staged')) {
      sections.push(...snapshot.staged.map(file => fileRow(kit, handlers, file, 'unstage')))
    }
  }

  sections.push(
    sectionHeader(
      kit,
      handlers,
      'changes',
      t().changesSection,
      snapshot.unstaged.length,
      isFolded('changes'),
      snapshot.unstaged.length > 0 ? (
        <Button key="stage-all" plain dimColor onPress={() => handlers.act('stageAll')}>
          {`${GLYPH.stage} ${t().all}`}
        </Button>
      ) : null,
    ),
  )

  if (!isFolded('changes')) {
    sections.push(
      ...(snapshot.unstaged.length > 0
        ? snapshot.unstaged.map(file => fileRow(kit, handlers, file, 'stage'))
        : [dimLine(kit, changeCountOf(snapshot) === 0 ? `${t().noChanges} ${GLYPH.clean}` : conflictCount > 0 ? t().noOtherChanges : t().allStaged)]),
    )
  }

  sections.push(sectionHeader(kit, handlers, 'history', t().historySection, null, isFolded('history')))

  if (!isFolded('history')) {
    sections.push(...historyRows(kit, snapshot))
  }

  if (details !== null) {
    sections.push(sectionHeader(kit, handlers, 'branches', t().branchesSection, details.branches.length, isFolded('branches')))

    if (!isFolded('branches')) {
      sections.push(...details.branches.map(branch => branchRow(kit, branch, view.fetchError === null)))
    }

    if (details.worktrees.length > 1) {
      sections.push(sectionHeader(kit, handlers, 'worktrees', t().worktreesSection, details.worktrees.length, isFolded('worktrees')))

      if (!isFolded('worktrees')) {
        sections.push(...details.worktrees.map(tree => worktreeRow(kit, tree)))
      }
    }

    if (details.stashes.length > 0) {
      sections.push(sectionHeader(kit, handlers, 'stashes', t().stashesSection, details.stashes.length, isFolded('stashes')))

      if (!isFolded('stashes')) {
        sections.push(...details.stashes.map(stash => stashRow(kit, stash)))
      }
    }
  }

  return (
    <Box flexDirection="column" paddingX={1} paddingTop={hasMarkRow ? 1 : 0}>
      {top}
      {infoRow(kit, snapshot, view, staleAfterMs)}
      {details?.remote != null && remoteRow(kit, snapshot.remoteName ?? 'remote', details.remote)}
      {snapshot.isLinkedWorktree && dimLine(kit, t().worktreeOf(shortPathOf(snapshot.commonDir.replace(/[\\/]\.git[\\/]?$/, ''))))}
      {operation !== null && <Text color={conflictCount > 0 ? COLOR.error : COLOR.warn} wrap="wrap">{operation}</Text>}
      {view.fetchError !== null && <Text color={COLOR.warn} wrap="wrap">{t().fetchFailed(view.fetchError)}</Text>}
      {notice !== null && notice.text !== view.fetchError && <Text color={noticeColor} wrap="wrap">{notice.text}</Text>}
      {notice?.retry === 'autostash' && !isBusy && (
        <Box flexDirection="row">
          <Button key="retry-autostash" onPress={() => handlers.act('pullAutostash')}>
            {t().pullAutostash}
          </Button>
        </Box>
      )}
      {kit.Svg === null ? rule(kit) : <Box marginTop={1} />}
      {Input !== null && canCommit && (
        <Input
          key={`message-${view.commitField}`}
          placeholder={t().messagePlaceholder(target)}
          submitLabel={kit.Svg === null ? 'commit' : '↵'}
          autoFocus
          onInput={value => handlers.draft(value)}
          onSubmit={value => handlers.commit(value)}
        />
      )}
      {actionRow(kit, snapshot, view, handlers)}
      {details?.hasHooks === true && dimLine(kit, t().hooksHint)}
      {sections}
    </Box>
  )
}