Showcase

renderStatus('passed', 'Configuration validated cleanly')
renderStatus('warning', '3 non-critical findings detected')
renderStatus('failed', 'Build failed: 2 errors')
renderStatus('action-required', 'Sign in to continue the deployment')
renderStatus('skipped', 'Link check disabled for drafts')
renderStatus('info', 'Using cached results from 09:41')

renderReport({
  schemaVersion: 1,
  title: "Site audit v1.2.0",
  verdict: "warning",
  metrics: [
    {
      key: "Errors",
      value: "0"
    },
    {
      key: "Warnings",
      value: "4",
      trend: "negative",
      delta: "+2"
    },
    {
      key: "Score",
      value: "94/100",
      trend: "positive",
      delta: "+5%"
    }
  ],
  groups: [
    {
      title: "Accessibility violations",
      findings: [
        {
          message: "Image missing alt attribute",
          tone: "warning",
          ruleId: "a11y/img-alt",
          confidence: "high",
          badge: {
            label: "quick win",
            tone: "success"
          },
          location: {
            kind: "file",
            value: "src/pages/index.astro",
            line: 42,
            column: 10
          },
          remedy: "Add an alt=\"…\" description to the <img> tag."
        },
        {
          message: "Low contrast ratio on hero button",
          tone: "warning",
          ruleId: "a11y/contrast",
          location: {
            kind: "file",
            value: "src/components/Hero.astro",
            line: 18
          }
        }
      ]
    }
  ],
  nextSteps: [
    {
      text: "Run the auto-fixer for formatting issues",
      command: "audit --fix"
    }
  ]
}, { width: 80 })

renderReport({ ...audit, detailLevel: 'detailed' }, { width: 80 })

renderReport({
  schemaVersion: 1,
  title: "Content audit",
  verdict: "warning",
  metrics: [
    {
      key: "Errors",
      value: "0"
    },
    {
      key: "Warnings",
      value: "4",
      trend: "negative",
      delta: "+2"
    },
    {
      key: "Score",
      value: "94/100",
      trend: "positive",
      delta: "+5%"
    }
  ],
  groups: [
    {
      title: "Navigation",
      findings: [
        {
          message: "The main navigation contains more links than can be reached comfortably with a keyboard",
          tone: "warning",
          ruleId: "ux/nav-size"
        },
        {
          message: "Two landmarks share the label \"Menu\", so screen reader users cannot tell them apart",
          tone: "warning",
          ruleId: "a11y/landmark-label"
        }
      ]
    }
  ]
}, { width: 44 })

renderError({
  heading: "Required toolchain is unavailable",
  explanation: "The configured version is not installed.",
  remedy: "Install the required toolchain:",
  commands: [
    "toolchain install stable"
  ]
})

renderDiff({
  changes: [
    {
      action: "added",
      path: "src/components/Footer.astro",
      delta: "+1.2 kB"
    },
    {
      action: "modified",
      path: "src/layouts/Layout.astro"
    },
    {
      action: "renamed",
      path: "src/styles/site.css"
    },
    {
      action: "deleted",
      path: "src/legacy/Footer.jsx"
    }
  ]
})