gcloud-guard

  on('ui.render', { component: 'Pane', requestId: 'gcloud-guard' }, async ($, e, next) => {
    const view = (await read($, heldState)) as HeldView | null
    if (view === null) return next(e)
    await read($, langState)
    const snap = (await read($, contextState)) as GcloudContext | null
    return draw($, e, view, e.props.bodyColumns ?? 80, snap?.kube ?? null)
  })

function draw($: any, e: any, view: HeldView, columns: number, gke: GcloudContext['kube'] | null) {
  const { Box, Text, Button } = $.ui.resolve(e)
  const L = lang
  const risk = view.risk
  const report = view.report
  const color = severityColor(risk.severity)
  const ctx = report?.context ?? emptyContext(risk)
  const unknown = t(L, 'value.unknown')
  const projectSource = ctx.projectSource === 'flag' ? t(L, 'source.flag') : ctx.projectSource === 'config' ? t(L, 'source.config') : ''
  const location = ctx.location ?? t(L, 'value.default')
  const decide = (choice: Decision) => () => {
    if (held && held.view.id === view.id && held.decision === null) held.decision = choice
  }
  const rows: any[] = []
  rows.push(
    <Text key="title" bold color={color}>
      {t(L, 'title', { severity: severityLabel(L, risk.severity) })}
    </Text>,
  )
  rows.push(
    <Text key="head" bold color={color} wrap="truncate-end">
      {report?.headline ?? headline(L, risk)}
    </Text>,
  )
  rows.push(
    <Text key="cmd" wrap="truncate-end">
      <Text dimColor>{`${t(L, 'label.command')}  `}</Text>
      <Text bold>{truncate(view.command, Math.max(20, columns - 12))}</Text>
    </Text>,
  )
  rows.push(
    <Text key="account" wrap="truncate-end">
      <Text dimColor>{`${t(L, 'label.account')}  `}</Text>
      <Text>{ctx.account ?? unknown}</Text>
      {ctx.impersonate ? <Text dimColor>{`  (impersonating ${ctx.impersonate})`}</Text> : null}
    </Text>,
  )
  rows.push(
    <Text key="project" wrap="truncate-end">
      <Text dimColor>{`${t(L, 'label.project')}  `}</Text>
      <Text bold>{ctx.project ?? unknown}</Text>
      {projectSource ? <Text dimColor>{`  ${projectSource}`}</Text> : null}
      {ctx.configuration ? <Text dimColor>{`  · ${t(L, 'label.configuration')} ${ctx.configuration}`}</Text> : null}
    </Text>,
  )
  rows.push(
    <Text key="location" wrap="truncate-end">
      <Text dimColor>{`${t(L, 'label.location')}  `}</Text>
      <Text>{location}</Text>
      {ctx.track !== 'ga' ? <Text color="magenta">{`  · ${t(L, 'label.track')} ${ctx.track}`}</Text> : null}
    </Text>,
  )
  if (gke && gke.kind === 'gke') {
    rows.push(
      <Text key="gke" wrap="truncate-end">
        <Text dimColor>{`${t(L, 'label.gke')}  `}</Text>
        <Text>{`${gke.cluster} (${gke.location})`}</Text>
        {gke.project && ctx.project && gke.project !== ctx.project ? <Text color="yellow">{`  ≠ ${t(L, 'label.project').toLowerCase()} ${gke.project}`}</Text> : null}
      </Text>,
    )
  }
  if (ctx.quiet) {
    rows.push(
      <Text key="quiet" color="yellow">
        {t(L, 'quiet.warn')}
      </Text>,
    )
  }
  if (report && report.lines.length) {
    rows.push(
      <Box key="lines" flexDirection="column" marginTop={1}>
        {report.lines.map((line, i) => (
          <Text key={`l${i}`} wrap="truncate-end">
            {`  ${line}`}
          </Text>
        ))}
      </Box>,
    )
  }
  if (report && report.notes.length) {
    rows.push(
      <Box key="notes" flexDirection="column">
        {report.notes.map((note, i) => (
          <Text key={`n${i}`} dimColor italic wrap="wrap">
            {note}
          </Text>
        ))}
      </Box>,
    )
  }
  if (!report) {
    rows.push(
      <Text key="measuring" dimColor>
        …
      </Text>,
    )
  }
  rows.push(
    <Box key="buttons" marginTop={1} gap={2}>
      <Button key="proceed" label={t(L, 'btn.proceed')} hotkey="1" plain onPress={decide('proceed')} />
      <Button key="cancel" label={t(L, 'btn.cancel')} hotkey="2" plain autoFocus onPress={decide('cancel')} />
      <Text key="hint" dimColor>
        {t(L, 'waiting')}
      </Text>
    </Box>,
  )
  return (
    <Box flexDirection="column" borderStyle="round" borderColor={color} paddingX={1}>
      {rows}
    </Box>
  )
}

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const view = (await read($, heldState)) as HeldView | null
    await read($, langState)
    if (view !== null) {
      if (view.where !== 'band') return next(e)
      // The report takes the whole band while the command is held: the buttons must be on top
      const snap = (await read($, contextState)) as GcloudContext | null
      return draw($, e, view, e.props.bodyColumns ?? 80, snap?.kube ?? null)
    }
    if (e.props.hasSurvey || !settings.showContext || (await read($, isBandHidden))) return next(e)
    const ctx = (await read($, contextState)) as GcloudContext | null
    const text = contextLine(lang, ctx, settings)
    if (text === null) return next(e)
    const ui = $.ui.resolve(e)
    const { Text } = ui
    // AbovePrompt is a chain: draw our line in its frame, then whatever the plugins beneath drew
    const below = await next(e)
    return frameBand(
      ui,
      settings.bandStyle,
      kubeProjectMismatch(ctx),
      e.props.bodyColumns,
      <Text wrap="truncate-end" dimColor>
        {text}
      </Text>,
      below,
    )
  })

function frameBand(ui: { Box: any; Text: any }, style: BandStyle, isWarning: boolean, bodyColumns: number | undefined, content: any, below: any) {
  const { Box, Text } = ui
  const hasBelow = below !== null && below !== undefined && (below as { type?: string }).type !== 'engine'
  const own =
    style === 'box' ? (
      <Box key="frame" flexDirection="column" borderStyle="round" borderDimColor={isWarning ? undefined : true} borderColor={isWarning ? 'yellow' : undefined} paddingX={1}>
        {content}
      </Box>
    ) : style === 'rule' ? (
      <Box key="frame" flexDirection="column">
        {content}
        {hasBelow ? <Text key="rule" dimColor>{'─'.repeat(Math.max(8, Math.min(bodyColumns ?? 60, 200)))}</Text> : null}
      </Box>
    ) : (
      <Box key="frame" flexDirection="column">
        {content}
      </Box>
    )
  return (
    <Box flexDirection="column">
      {own}
      {below}
    </Box>
  )
}