aeo-audit

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const report = await read($, last)
    const busy = await read($, running)

    if (report === null) {
      return (
        <Box flexDirection="column">
          <Text>{busy === null ? 'No audit yet. Run /aeo <url>.' : `Auditing ${busy}...`}</Text>
        </Box>
      )
    }

    const scoreColor = report.score >= 80 ? 'green' : report.score >= 50 ? 'yellow' : 'red'
    const row = (c: Check) => (
      <Box key={c.id} flexDirection="column">
        <Text wrap="truncate-end">
          <Text color={COLOR[c.status]} bold={c.status === 'fail'}>
            {MARK[c.status]}
          </Text>{' '}
          {c.label}
        </Text>
        {(c.status === 'fail' || c.status === 'warn') && (
          <Text dimColor wrap="wrap">
            {'     '}
            {c.fix ?? c.detail}
          </Text>
        )}
      </Box>
    )

    return (
      <Box flexDirection="column">
        <Text bold wrap="truncate-end">
          {report.url}
        </Text>
        <Text>
          <Text color={scoreColor} bold>
            {report.score}/100
          </Text>
          <Text dimColor>
            {'  '}
            {report.counts.fail} fail, {report.counts.warn} warn, {report.counts.pass} pass
            {report.isPartial ? ', partial' : ''}
          </Text>
        </Text>
        {busy !== null && <Text color="yellow">Re-auditing {busy}...</Text>}
        {(['Crawler access', 'Page', 'Content', 'Extras'] as const).map(group => {
          const rows = report.checks.filter(c => c.group === group)
          if (rows.length === 0) return null

          return (
            <Box key={group} flexDirection="column" marginTop={1}>
              <Text bold>{group}</Text>
              {rows.map(row)}
            </Box>
          )
        })}
        <Box marginTop={1}>
          <Button
            key="fix"
            label="Fix with Claude"
            hotkey="f"
            variant="primary"
            onPress={async () => {
              const live = await read($, last)
              if (live === null) return
              const where = live.path === null ? 'the AEO audit in this session' : `the AEO audit at ${live.path}`
              await $.prompt.fill({
                text: `Read ${where} for ${live.url} and write the exact fixes for every FAIL and WARN, most impact first. Quote the source for each.`,
              })
            }}
          />
          <Text> </Text>
          <Button
            key="rerun"
            label="Rerun"
            hotkey="r"
            onPress={async () => {
              const live = await read($, last)
              if (live !== null) await runAudit($, live.url)
            }}
          />
        </Box>
      </Box>
    )
  })