From 8f1f219b1bdd6c596856cf7c53ac2bec4a95ff05 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Fri, 2 May 2025 09:38:57 +0100
Subject: [PATCH 1/5] WIP redesign of report header

---
 package-lock.json                             |   9 +-
 src/ciCommitLink.spec.ts                      |   2 +-
 src/ciCommitLink.ts                           |   6 +-
 src/components/app/CICommitLink.tsx           |  28 +--
 src/components/app/CIJobLink.tsx              |  29 +--
 src/components/app/CopyButton.module.scss     |  14 ++
 src/components/app/CopyButton.spec.tsx        |  35 ++++
 src/components/app/CopyButton.tsx             |  34 ++++
 .../app/ExecutionSummary.module.scss          |  57 +-----
 src/components/app/ExecutionSummary.spec.tsx  |  67 ++++++-
 src/components/app/ExecutionSummary.tsx       | 171 ++++++++++--------
 .../app/FilteredResults.module.scss           |   4 -
 src/components/app/FilteredResults.spec.tsx   |   6 +-
 src/components/app/FilteredResults.tsx        |   2 -
 src/components/app/Header.module.scss         |  47 +++++
 src/components/app/Header.tsx                 |  15 ++
 src/components/app/HealthChart.module.scss    |   9 +
 src/components/app/HealthChart.stories.tsx    |  31 ++++
 src/components/app/HealthChart.tsx            |  48 +++++
 src/components/app/ImplementationIcon.tsx     |  12 ++
 src/components/app/OSIcon.tsx                 |  11 +-
 src/components/app/RuntimeIcon.tsx            |  11 +-
 src/components/app/SearchBar.module.scss      | 106 ++++++-----
 src/components/app/SearchBar.spec.tsx         |  16 +-
 src/components/app/SearchBar.tsx              | 106 +++++------
 .../app/StatusesSummary.module.scss           |   9 +-
 src/components/app/StatusesSummary.spec.tsx   |   2 +-
 src/components/app/StatusesSummary.tsx        |   2 +-
 src/components/app/icons/CucumberLogo.tsx     |   6 +-
 src/components/app/icons/Jvm.tsx              |   6 +-
 src/components/app/icons/Linux.tsx            |   6 +-
 src/components/app/icons/MacOS.tsx            |   6 +-
 src/components/app/icons/NodeJs.tsx           |  81 +--------
 src/components/app/icons/Ruby.tsx             |   6 +-
 src/components/app/icons/Windows.tsx          |   6 +-
 src/components/app/makeSetupString.spec.ts    |  31 ++++
 src/components/app/makeSetupString.ts         |  27 +++
 src/components/app/statuses.ts                |  12 --
 src/countScenariosByStatuses.spec.ts          |   4 +-
 src/countScenariosByStatuses.ts               |  23 ++-
 src/hooks/useFilteredDocuments.ts             |   4 +-
 src/statuses.ts                               |  12 ++
 src/styles/statuses.scss                      |   8 +
 43 files changed, 687 insertions(+), 440 deletions(-)
 create mode 100644 src/components/app/CopyButton.module.scss
 create mode 100644 src/components/app/CopyButton.spec.tsx
 create mode 100644 src/components/app/CopyButton.tsx
 create mode 100644 src/components/app/Header.module.scss
 create mode 100644 src/components/app/Header.tsx
 create mode 100644 src/components/app/HealthChart.module.scss
 create mode 100644 src/components/app/HealthChart.stories.tsx
 create mode 100644 src/components/app/HealthChart.tsx
 create mode 100644 src/components/app/ImplementationIcon.tsx
 create mode 100644 src/components/app/makeSetupString.spec.ts
 create mode 100644 src/components/app/makeSetupString.ts
 delete mode 100644 src/components/app/statuses.ts
 create mode 100644 src/statuses.ts
 create mode 100644 src/styles/statuses.scss

diff --git a/package-lock.json b/package-lock.json
index b0f55ab9..d72f0d9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4609,10 +4609,11 @@
       "integrity": "sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw=="
     },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
-      "dev": true
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/clean-stack": {
       "version": "2.2.0",
diff --git a/src/ciCommitLink.spec.ts b/src/ciCommitLink.spec.ts
index bdbf432b..a1d266da 100644
--- a/src/ciCommitLink.spec.ts
+++ b/src/ciCommitLink.spec.ts
@@ -40,7 +40,7 @@ describe('ciCommitLink(ci)', () => {
         name: 'SuperCI',
       }
 
-      expect(ciCommitLink(ci)).to.eq(null)
+      expect(ciCommitLink(ci)).to.eq(undefined)
     })
   })
 })
diff --git a/src/ciCommitLink.ts b/src/ciCommitLink.ts
index 9cb9df07..2217eb55 100644
--- a/src/ciCommitLink.ts
+++ b/src/ciCommitLink.ts
@@ -1,8 +1,9 @@
-import * as messages from '@cucumber/messages'
+import { Ci } from '@cucumber/messages'
 
 import toRepositoryId from './toRepositoryId.js'
 
-export default function ciCommitLink(ci: messages.Ci): string | null {
+// TODO move upstream to create-meta
+export default function ciCommitLink(ci: Ci): string | undefined {
   if (ci.git && ci.git.remote) {
     const repositoryId = toRepositoryId(ci.git.remote)
     const github = repositoryId.startsWith('github.com') || ci.name === 'GitHub Actions'
@@ -10,5 +11,4 @@ export default function ciCommitLink(ci: messages.Ci): string | null {
       return `https://${repositoryId}/commit/${ci.git.revision}`
     }
   }
-  return null
 }
diff --git a/src/components/app/CICommitLink.tsx b/src/components/app/CICommitLink.tsx
index ae83cad6..558c1c12 100644
--- a/src/components/app/CICommitLink.tsx
+++ b/src/components/app/CICommitLink.tsx
@@ -1,28 +1,34 @@
-import * as messages from '@cucumber/messages'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { Ci } from '@cucumber/messages'
+import { faCodeCommit } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React from 'react'
+import React, { FC } from 'react'
 
 import ciCommitLink from '../../ciCommitLink.js'
 
-interface IProps {
-  ci: messages.Ci
-}
+export const CICommitLink: FC<{
+  ci: Ci
+}> = ({ ci }) => {
+  if (!ci.git) {
+    return null
+  }
 
-export const CICommitLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
+  const shortHash = ci.git.revision.substring(0, 7)
   const commitLink = ciCommitLink(ci)
 
-  if (commitLink && ci.git?.remote) {
+  if (commitLink) {
     return (
       <>
-        <FontAwesomeIcon icon={faLink} />
-        Git Ref <a href={commitLink}>{ci.git.revision.substring(0, 7)}</a>
+        <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faCodeCommit} />
+        <a href={commitLink} target="_blank" rel="noreferrer">
+          <code>{shortHash}</code>
+        </a>
       </>
     )
   }
   return (
     <>
-      <FontAwesomeIcon icon={faLink} /> Git Ref {ci.git?.revision.substring(0, 7)}
+      <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faCodeCommit} />
+      <code>{shortHash}</code>
     </>
   )
 }
diff --git a/src/components/app/CIJobLink.tsx b/src/components/app/CIJobLink.tsx
index e5c96b05..fe8eb950 100644
--- a/src/components/app/CIJobLink.tsx
+++ b/src/components/app/CIJobLink.tsx
@@ -1,20 +1,25 @@
-import * as messages from '@cucumber/messages'
-import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { Ci } from '@cucumber/messages'
+import { faServer } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import React from 'react'
+import React, { FC } from 'react'
 
-interface IProps {
-  ci: messages.Ci
-}
-
-export const CIJobLink: React.FunctionComponent<IProps> = ({ ci: ci }) => {
-  if (ci.url && ci.buildNumber) {
+export const CIJobLink: FC<{
+  ci: Ci
+}> = ({ ci }) => {
+  if (ci.url) {
     return (
       <>
-        <FontAwesomeIcon icon={faLink} />
-        Job <a href={ci.url}> {ci.buildNumber}</a>
+        <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faServer} />
+        <a href={ci.url} target="_blank" rel="noreferrer">
+          {ci.name}
+        </a>
       </>
     )
   }
-  return <></>
+  return (
+    <>
+      <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faServer} />
+      <span>{ci.name}</span>
+    </>
+  )
 }
diff --git a/src/components/app/CopyButton.module.scss b/src/components/app/CopyButton.module.scss
new file mode 100644
index 00000000..c3b6834b
--- /dev/null
+++ b/src/components/app/CopyButton.module.scss
@@ -0,0 +1,14 @@
+@import '../../styles/theming';
+
+.button {
+  background-color: transparent;
+  font-size: inherit;
+  padding: 0;
+  border: none;
+  color: $anchorColor;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: unset;
+  }
+}
diff --git a/src/components/app/CopyButton.spec.tsx b/src/components/app/CopyButton.spec.tsx
new file mode 100644
index 00000000..d75f7a16
--- /dev/null
+++ b/src/components/app/CopyButton.spec.tsx
@@ -0,0 +1,35 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { expect } from 'chai'
+import React from 'react'
+import sinon from 'sinon'
+
+import { CopyButton } from './CopyButton.js'
+
+describe('<CopyButton/>', () => {
+  const originalClipboard = navigator.clipboard
+
+  before(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = {
+      writeText: sinon.stub().resolves(),
+    }
+  })
+
+  after(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = originalClipboard
+  })
+
+  it('should copy text to clipboard, then disable and show checkmark', async () => {
+    render(<CopyButton text="test text" />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Copy' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Copied' })).to.be.visible
+      expect(screen.getByRole('button', { name: 'Copied' })).to.have.property('disabled', true)
+      expect(navigator.clipboard.writeText).to.have.been.calledOnceWithExactly('test text')
+    })
+  })
+})
diff --git a/src/components/app/CopyButton.tsx b/src/components/app/CopyButton.tsx
new file mode 100644
index 00000000..91af9518
--- /dev/null
+++ b/src/components/app/CopyButton.tsx
@@ -0,0 +1,34 @@
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { FC, useState } from 'react'
+
+import styles from './CopyButton.module.scss'
+
+export const CopyButton: FC<{ text: string }> = ({ text }) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, 3000)
+      })
+      .catch((err) => {
+        console.error('Failed to copy', err)
+      })
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      aria-label={copied ? 'Copied' : 'Copy'}
+      disabled={copied}
+      className={styles.button}
+    >
+      <FontAwesomeIcon icon={copied ? faCheck : faCopy} />
+    </button>
+  )
+}
diff --git a/src/components/app/ExecutionSummary.module.scss b/src/components/app/ExecutionSummary.module.scss
index 8b56db6f..f0e7e050 100644
--- a/src/components/app/ExecutionSummary.module.scss
+++ b/src/components/app/ExecutionSummary.module.scss
@@ -1,60 +1,5 @@
 @import '../../styles/theming';
 
-.backdrop {
-  background-color: $panelAccentColor;
-  border: 1px solid transparent;
-}
-
-.list {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: 1fr 1fr;
-  gap: 1px;
-  margin: 0;
-  text-align: center;
-}
-
-.item {
-  grid-column-end: span 4;
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: center;
-  padding: 1.5em;
-  background-color: $backgroundColor;
-  color: $textColor;
-
-  &Ci,
-  &Ci ~ & {
-    grid-column-end: span 3;
-  }
-}
-
-.value {
-  font-weight: bold;
-  font-size: 1.25em;
-  margin: 0;
-
-  svg {
-    display: inline-block;
-    max-width: 2em;
-  }
-}
-
-.suffix {
-  font-size: 1em;
-  margin-top: 0.25em;
+.conjunction {
   color: $codeTextColor;
 }
-
-.gitItem {
-  display: inline-flex;
-  gap: 0.25em;
-
-  & + & {
-    margin-left: 1em;
-  }
-
-  a {
-    color: $anchorColor;
-  }
-}
diff --git a/src/components/app/ExecutionSummary.spec.tsx b/src/components/app/ExecutionSummary.spec.tsx
index 0c5995be..15fbb8c3 100644
--- a/src/components/app/ExecutionSummary.spec.tsx
+++ b/src/components/app/ExecutionSummary.spec.tsx
@@ -1,7 +1,9 @@
 import { Meta } from '@cucumber/messages'
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
 import { expect } from 'chai'
 import React from 'react'
+import sinon from 'sinon'
 
 import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
 import { EnvelopesWrapper } from './EnvelopesWrapper.js'
@@ -25,30 +27,75 @@ const meta: Meta = {
   },
 }
 
-describe('ExecutionSummary', () => {
-  const envelopes = [...examplesTablesFeature, { meta }]
+const envelopes = [...examplesTablesFeature, { meta }]
+
+describe('<ExecutionSummary/>', () => {
+  const originalClipboard = navigator.clipboard
+
+  before(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = {
+      writeText: sinon.stub().resolves(),
+    }
+  })
+
+  after(() => {
+    // @ts-expect-error overriding navigator.clipboard
+    navigator.clipboard = originalClipboard
+  })
 
   describe('meta', () => {
-    it('should include the implementation name and version', () => {
-      const { getByText } = render(
+    it('should include a phrase for the setup details', () => {
+      render(
         <EnvelopesWrapper envelopes={envelopes}>
           <ExecutionSummary />
         </EnvelopesWrapper>
       )
 
-      expect(getByText('cucumber-js 8.0.0-rc.1')).to.be.visible
+      expect(screen.getByTestId('setup.phrase')).to.contain.text(
+        'cucumber-js@8.0.0-rc.1 with node.js@16.13.1 on linux@5.11.0-1022-azure'
+      )
+    })
+
+    it('should copy the setup details on request', async () => {
+      render(
+        <EnvelopesWrapper envelopes={envelopes}>
+          <ExecutionSummary />
+        </EnvelopesWrapper>
+      )
+
+      await userEvent.click(screen.getByRole('button', { name: 'Copy' }))
+
+      expect(navigator.clipboard.writeText).to.have.been
+        .calledOnceWithExactly(`Implementation: cucumber-js@8.0.0-rc.1
+Runtime: node.js@16.13.1
+Platform: linux@5.11.0-1022-azure`)
     })
 
     it('should include the job link', () => {
-      const { getByText } = render(
+      render(
+        <EnvelopesWrapper envelopes={envelopes}>
+          <ExecutionSummary />
+        </EnvelopesWrapper>
+      )
+
+      expect(screen.getByRole('link', { name: 'GitHub Actions' }))
+        .attr('href')
+        .to.eq(meta?.ci?.url)
+    })
+
+    it('should include the commit link', () => {
+      render(
         <EnvelopesWrapper envelopes={envelopes}>
           <ExecutionSummary />
         </EnvelopesWrapper>
       )
 
-      const jobLinkElement = getByText(meta?.ci?.buildNumber as string)
-      expect(jobLinkElement).to.be.visible
-      expect(jobLinkElement.getAttribute('href')).to.eq(meta?.ci?.url)
+      expect(screen.getByRole('link', { name: 'b53d820' }))
+        .attr('href')
+        .to.eq(
+          'https://github.com/cucumber/cucumber-js/commit/b53d820504b31c8e4d44234dc5eaa58d6b7fdd4c'
+        )
     })
   })
 })
diff --git a/src/components/app/ExecutionSummary.tsx b/src/components/app/ExecutionSummary.tsx
index 040c94ca..486ef89e 100644
--- a/src/components/app/ExecutionSummary.tsx
+++ b/src/components/app/ExecutionSummary.tsx
@@ -1,5 +1,5 @@
-import { TestStepResultStatus, TimeConversion } from '@cucumber/messages'
-import { faCodeBranch, faTag } from '@fortawesome/free-solid-svg-icons'
+import { Product, TestStepResultStatus, TimeConversion } from '@cucumber/messages'
+import { faCodeBranch, faStopwatch, faTag } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { FC } from 'react'
 
@@ -10,8 +10,12 @@ import { useQueries } from '../../hooks/index.js'
 import { useResultStatistics } from '../../hooks/useResultStatistics.js'
 import { CICommitLink } from './CICommitLink.js'
 import { CIJobLink } from './CIJobLink.js'
+import { CopyButton } from './CopyButton.js'
 import styles from './ExecutionSummary.module.scss'
-import { CucumberLogo } from './icons/CucumberLogo.js'
+import { HeaderItem, HeaderSection, HeaderSubItem } from './Header.js'
+import { HealthChart } from './HealthChart.js'
+import { ImplementationIcon } from './ImplementationIcon.js'
+import { makeSetupString } from './makeSetupString.js'
 import { OSIcon } from './OSIcon.js'
 import { RuntimeIcon } from './RuntimeIcon.js'
 
@@ -22,92 +26,101 @@ export const ExecutionSummary: FC = () => {
   const meta = cucumberQuery.findMeta()
   const { scenarioCountByStatus, totalScenarioCount } = useResultStatistics()
 
-  const percentagePassed: string =
-    formatStatusRate(scenarioCountByStatus[TestStepResultStatus.PASSED], totalScenarioCount) +
-    ' passed'
-
   const startDate = testRunStarted?.timestamp
     ? new Date(TimeConversion.timestampToMillisecondsSinceEpoch(testRunStarted.timestamp))
     : undefined
-
   const finishDate = testRunFinished?.timestamp
     ? new Date(TimeConversion.timestampToMillisecondsSinceEpoch(testRunFinished.timestamp))
     : undefined
 
-  const formattedTimestamp = startDate ? formatExecutionDistance(startDate) : 'Unknown start time'
-  const formattedDuration =
-    startDate && finishDate ? formatExecutionDuration(startDate, finishDate) : 'Unknown duration'
   return (
-    <div className={styles.backdrop}>
-      <dl className={styles.list}>
-        <div className={styles.item}>
-          <dt className={styles.suffix}>{totalScenarioCount} executed</dt>
-          <dd className={styles.value}>{percentagePassed}</dd>
-        </div>
-        <div className={styles.item}>
-          <dt className={styles.suffix}>last run</dt>
-          <dd className={styles.value}>{formattedTimestamp}</dd>
-        </div>
-        <div className={styles.item}>
-          <dt className={styles.suffix}>duration</dt>
-          <dd className={styles.value}>{formattedDuration}</dd>
-        </div>
-        {meta?.ci && (
-          <div className={`${styles.item} ${styles.itemCi}`}>
-            <dt className={styles.suffix}>
-              {meta.ci.git ? (
-                <>
-                  {meta.ci.git.branch && (
-                    <span className={styles.gitItem}>
-                      <FontAwesomeIcon icon={faCodeBranch} />
-                      {meta.ci.git.branch}
-                    </span>
-                  )}
-                  {meta.ci.git.tag && (
-                    <span className={styles.gitItem}>
-                      <FontAwesomeIcon icon={faTag} />
-                      {meta.ci.git.tag}
-                    </span>
-                  )}
-                  <span className={styles.gitItem}>
-                    <CICommitLink ci={meta.ci} />
-                  </span>
-                  <span className={styles.gitItem}>
-                    <CIJobLink ci={meta.ci} />
-                  </span>
-                </>
-              ) : (
-                '-'
+    <>
+      {meta && (
+        <HeaderSection>
+          <HeaderItem>
+            <HeaderSubItem>
+              <ImplementationIcon implementation={meta.implementation} />
+              <RuntimeIcon runtime={meta.runtime} />
+              <OSIcon os={meta.os} />
+            </HeaderSubItem>
+            <span data-testid="setup.phrase">
+              <VersionedTool {...meta.implementation} fallback="unknown tool" />
+              <em className={styles.conjunction}> with </em>
+              <VersionedTool {...meta.runtime} fallback="unknown runtime" />
+              <em className={styles.conjunction}> on </em>
+              <VersionedTool {...meta.os} fallback="unknown platform" />
+            </span>
+            <CopyButton text={makeSetupString(meta)} />
+          </HeaderItem>
+        </HeaderSection>
+      )}
+      <HeaderSection>
+        <HeaderItem>
+          <HeaderSubItem>
+            <HealthChart />
+            <span>
+              {formatStatusRate(
+                scenarioCountByStatus[TestStepResultStatus.PASSED],
+                totalScenarioCount
               )}
-            </dt>
-            <dd className={styles.value}>{meta.ci.name}</dd>
-          </div>
+              {' passed'}
+            </span>
+          </HeaderSubItem>
+        </HeaderItem>
+        {startDate && (
+          <HeaderItem>
+            <HeaderSubItem>
+              <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faStopwatch} />
+              <span>
+                <time title={startDate.toString()} dateTime={startDate.toISOString()}>
+                  {formatExecutionDistance(startDate)}
+                </time>
+                {finishDate && (
+                  <>
+                    <em className={styles.conjunction}> in </em>
+                    <span>{formatExecutionDuration(startDate, finishDate)}</span>
+                  </>
+                )}
+              </span>
+            </HeaderSubItem>
+          </HeaderItem>
+        )}
+        {meta?.ci && (
+          <HeaderItem>
+            <HeaderSubItem>
+              <CIJobLink ci={meta.ci} />
+            </HeaderSubItem>
+          </HeaderItem>
         )}
-        {meta && (
-          <>
-            <div className={styles.item}>
-              <dt className={styles.suffix}>{meta.os.name}</dt>
-              <dd className={styles.value}>
-                <OSIcon name={meta.os.name} />
-              </dd>
-            </div>
-            <div className={styles.item}>
-              <dt className={styles.suffix}>{meta.runtime.name + ' ' + meta.runtime.version}</dt>
-              <dd className={styles.value}>
-                <RuntimeIcon name={meta.runtime.name} />
-              </dd>
-            </div>
-            <div className={styles.item}>
-              <dt className={styles.suffix}>
-                {`${meta.implementation.name} ${meta.implementation.version}`}
-              </dt>
-              <dd className={styles.value}>
-                <CucumberLogo />
-              </dd>
-            </div>
-          </>
+        {meta?.ci?.git && (
+          <HeaderItem>
+            <HeaderSubItem>
+              <CICommitLink ci={meta.ci} />
+            </HeaderSubItem>
+            {meta.ci.git.branch && (
+              <HeaderSubItem>
+                <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faCodeBranch} />
+                <code>{meta.ci.git.branch}</code>
+              </HeaderSubItem>
+            )}
+            {meta.ci.git.tag && (
+              <HeaderSubItem>
+                <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faTag} />
+                <code>{meta.ci.git.tag}</code>
+              </HeaderSubItem>
+            )}
+          </HeaderItem>
         )}
-      </dl>
-    </div>
+      </HeaderSection>
+    </>
+  )
+}
+
+const VersionedTool: FC<Product & { fallback: string }> = ({ name, fallback, version }) => {
+  return (
+    <code>
+      <strong>{name || fallback}</strong>
+      {version && <span>@{version}</span>}
+    </code>
   )
 }
diff --git a/src/components/app/FilteredResults.module.scss b/src/components/app/FilteredResults.module.scss
index f08c001d..c23fbcef 100644
--- a/src/components/app/FilteredResults.module.scss
+++ b/src/components/app/FilteredResults.module.scss
@@ -1,7 +1,3 @@
 .reportHeader {
   margin-bottom: 1.5em;
-
-  > * {
-    border-top: 0 !important;
-  }
 }
diff --git a/src/components/app/FilteredResults.spec.tsx b/src/components/app/FilteredResults.spec.tsx
index b10188b2..e3a3f5df 100644
--- a/src/components/app/FilteredResults.spec.tsx
+++ b/src/components/app/FilteredResults.spec.tsx
@@ -105,9 +105,9 @@ describe('FilteredResults', () => {
 
       await waitFor(() => {
         expect(getAllByRole('checkbox')).to.have.length(3)
-        expect(getByRole('checkbox', { name: 'passed' })).to.be.visible
-        expect(getByRole('checkbox', { name: 'failed' })).to.be.visible
-        expect(getByRole('checkbox', { name: 'undefined' })).to.be.visible
+        expect(getByRole('checkbox', { name: 'passed 5' })).to.be.visible
+        expect(getByRole('checkbox', { name: 'failed 2' })).to.be.visible
+        expect(getByRole('checkbox', { name: 'undefined 2' })).to.be.visible
         getAllByRole('checkbox').forEach((checkbox: HTMLInputElement) => {
           expect(checkbox).to.be.checked
         })
diff --git a/src/components/app/FilteredResults.tsx b/src/components/app/FilteredResults.tsx
index 85404ee3..0d8ee790 100644
--- a/src/components/app/FilteredResults.tsx
+++ b/src/components/app/FilteredResults.tsx
@@ -4,7 +4,6 @@ import { ExecutionSummary } from './ExecutionSummary.js'
 import { FilteredDocuments } from './FilteredDocuments.js'
 import styles from './FilteredResults.module.scss'
 import { SearchBar } from './SearchBar.js'
-import { StatusesSummary } from './StatusesSummary.js'
 
 export const FilteredResults: FC<{
   className?: string
@@ -12,7 +11,6 @@ export const FilteredResults: FC<{
   return (
     <div className={className}>
       <div className={styles.reportHeader}>
-        <StatusesSummary />
         <ExecutionSummary />
         <SearchBar />
       </div>
diff --git a/src/components/app/Header.module.scss b/src/components/app/Header.module.scss
new file mode 100644
index 00000000..5c5ef5a0
--- /dev/null
+++ b/src/components/app/Header.module.scss
@@ -0,0 +1,47 @@
+@import '../../styles/theming';
+
+.section {
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+  border: 1px solid $panelAccentColor;
+  margin: 0;
+
+  & + & {
+    border-top: none;
+  }
+}
+
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+  font-size: 1.125em;
+  padding: 1rem;
+
+  & + & {
+    border-left: 1px solid $panelAccentColor;
+  }
+
+  > svg {
+    height: 1.25em;
+  }
+
+  a {
+    color: $anchorColor;
+  }
+
+  code {
+    font-family: $monoFamily;
+  }
+}
+
+.subItem {
+  display: inline-flex;
+  gap: 0.25em;
+
+  > svg {
+    height: 1.25em;
+  }
+}
diff --git a/src/components/app/Header.tsx b/src/components/app/Header.tsx
new file mode 100644
index 00000000..a94b3733
--- /dev/null
+++ b/src/components/app/Header.tsx
@@ -0,0 +1,15 @@
+import React, { FC, PropsWithChildren } from 'react'
+
+import styles from './Header.module.scss'
+
+export const HeaderSection: FC<PropsWithChildren> = ({ children }) => {
+  return <div className={styles.section}>{children}</div>
+}
+
+export const HeaderItem: FC<PropsWithChildren> = ({ children }) => {
+  return <div className={styles.item}>{children}</div>
+}
+
+export const HeaderSubItem: FC<PropsWithChildren> = ({ children }) => {
+  return <div className={styles.subItem}>{children}</div>
+}
diff --git a/src/components/app/HealthChart.module.scss b/src/components/app/HealthChart.module.scss
new file mode 100644
index 00000000..344146c6
--- /dev/null
+++ b/src/components/app/HealthChart.module.scss
@@ -0,0 +1,9 @@
+@import '../../styles/statuses';
+
+.segment {
+  @each $name, $color in $statusColors {
+    &[data-status='#{$name}'] {
+      stroke: $color;
+    }
+  }
+}
diff --git a/src/components/app/HealthChart.stories.tsx b/src/components/app/HealthChart.stories.tsx
new file mode 100644
index 00000000..be9be7cb
--- /dev/null
+++ b/src/components/app/HealthChart.stories.tsx
@@ -0,0 +1,31 @@
+import { Envelope } from '@cucumber/messages'
+import { Story } from '@ladle/react'
+import React from 'react'
+
+import examplesTablesFeature from '../../../acceptance/examples-tables/examples-tables.feature.js'
+import { CucumberReact } from '../CucumberReact.js'
+import { EnvelopesWrapper } from './EnvelopesWrapper.js'
+import { HealthChart } from './HealthChart.js'
+
+export default {
+  title: 'App/HealthChart',
+}
+
+type TemplateArgs = {
+  envelopes: readonly Envelope[]
+}
+
+const Template: Story<TemplateArgs> = ({ envelopes }) => {
+  return (
+    <CucumberReact>
+      <EnvelopesWrapper envelopes={envelopes}>
+        <HealthChart />
+      </EnvelopesWrapper>
+    </CucumberReact>
+  )
+}
+
+export const Typical = Template.bind({})
+Typical.args = {
+  envelopes: examplesTablesFeature,
+} as TemplateArgs
diff --git a/src/components/app/HealthChart.tsx b/src/components/app/HealthChart.tsx
new file mode 100644
index 00000000..174664eb
--- /dev/null
+++ b/src/components/app/HealthChart.tsx
@@ -0,0 +1,48 @@
+import { TestStepResultStatus } from '@cucumber/messages'
+import React, { FC } from 'react'
+
+import { useResultStatistics } from '../../hooks/useResultStatistics.js'
+import styles from './HealthChart.module.scss'
+
+export const HealthChart: FC = () => {
+  const { scenarioCountByStatus, totalScenarioCount, statusesWithScenarios } = useResultStatistics()
+  let offsetAccumulator = 0
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+      <g transform="rotate(-90 50 50)">
+        {statusesWithScenarios.length > 0 ? (
+          <>
+            {[...statusesWithScenarios].map((status) => {
+              const scenarioCount = scenarioCountByStatus[status]
+              offsetAccumulator += scenarioCount
+              return (
+                <path
+                  key={status}
+                  className={styles.segment}
+                  data-status={status}
+                  pathLength={totalScenarioCount}
+                  strokeDasharray={`${scenarioCount} ${totalScenarioCount - scenarioCount}`}
+                  strokeDashoffset={offsetAccumulator}
+                  strokeWidth="50"
+                  d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
+                  fill="none"
+                />
+              )
+            })}
+          </>
+        ) : (
+          <path
+            className={styles.segment}
+            data-status={TestStepResultStatus.UNKNOWN}
+            pathLength="1"
+            strokeDasharray="1 0"
+            strokeDashoffset="1"
+            strokeWidth="50"
+            d="M75 50a1 1 90 10-50 0a1 1 90 10 50 0"
+            fill="none"
+          />
+        )}
+      </g>
+    </svg>
+  )
+}
diff --git a/src/components/app/ImplementationIcon.tsx b/src/components/app/ImplementationIcon.tsx
new file mode 100644
index 00000000..e630e40e
--- /dev/null
+++ b/src/components/app/ImplementationIcon.tsx
@@ -0,0 +1,12 @@
+import { Product } from '@cucumber/messages'
+import React, { FC } from 'react'
+
+import { CucumberLogo } from './icons/CucumberLogo.js'
+
+export const ImplementationIcon: FC<{ implementation: Product }> = ({ implementation }) => {
+  const { name } = implementation
+  if (name.toLowerCase().includes('cucumber')) {
+    return <CucumberLogo />
+  }
+  return null
+}
diff --git a/src/components/app/OSIcon.tsx b/src/components/app/OSIcon.tsx
index 7a737b43..0487261c 100644
--- a/src/components/app/OSIcon.tsx
+++ b/src/components/app/OSIcon.tsx
@@ -1,13 +1,12 @@
-import React, { VoidFunctionComponent } from 'react'
+import { Meta } from '@cucumber/messages'
+import React, { FC } from 'react'
 
 import { Linux } from './icons/Linux.js'
 import { MacOS } from './icons/MacOS.js'
 import { Windows } from './icons/Windows.js'
 
-export const OSIcon: VoidFunctionComponent<{ name: string }> = ({ name }) => {
-  if (!name) {
-    return <>Unknown OS</>
-  }
+export const OSIcon: FC<{ os: Meta['os'] }> = ({ os }) => {
+  const { name } = os
   if (name.match(/windows|win32/i)) {
     return <Windows />
   }
@@ -17,5 +16,5 @@ export const OSIcon: VoidFunctionComponent<{ name: string }> = ({ name }) => {
   if (name.match(/linux/i)) {
     return <Linux />
   }
-  return <>{name}</>
+  return null
 }
diff --git a/src/components/app/RuntimeIcon.tsx b/src/components/app/RuntimeIcon.tsx
index 5ab4a5e1..812927ca 100644
--- a/src/components/app/RuntimeIcon.tsx
+++ b/src/components/app/RuntimeIcon.tsx
@@ -1,13 +1,12 @@
-import React, { VoidFunctionComponent } from 'react'
+import { Product } from '@cucumber/messages'
+import React, { FC } from 'react'
 
 import { Jvm } from './icons/Jvm.js'
 import { NodeJs } from './icons/NodeJs.js'
 import { Ruby } from './icons/Ruby.js'
 
-export const RuntimeIcon: VoidFunctionComponent<{ name: string }> = ({ name }) => {
-  if (!name) {
-    return <>Unknown Runtime</>
-  }
+export const RuntimeIcon: FC<{ runtime: Product }> = ({ runtime }) => {
+  const { name } = runtime
   if (name.match(/(oracle|openjdk|java)/i)) {
     return <Jvm />
   }
@@ -17,5 +16,5 @@ export const RuntimeIcon: VoidFunctionComponent<{ name: string }> = ({ name }) =
   if (name.match(/node/i)) {
     return <NodeJs />
   }
-  return <>{name}</>
+  return null
 }
diff --git a/src/components/app/SearchBar.module.scss b/src/components/app/SearchBar.module.scss
index b10202d2..235dfb5c 100644
--- a/src/components/app/SearchBar.module.scss
+++ b/src/components/app/SearchBar.module.scss
@@ -1,61 +1,23 @@
 @import '../../styles/theming';
+@import '../../styles/statuses';
 
-.layout {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 1em;
-  border: 1px solid $panelAccentColor;
-  background-color: $panelBackgroundColor;
-  color: $panelTextColor;
-}
-
-.searchForm {
-  position: relative;
-  margin-top: -0.5em;
-}
-
-.queryIcon {
-  position: absolute;
-  left: 0;
-  margin-left: 0.4em;
-  top: 0.5em;
-  opacity: 0.666;
-}
-
-.queryField {
+.field {
   box-sizing: border-box;
   width: 100%;
-  padding: 0.5em 0 0.5em 1.5em;
+  min-width: 20em;
+  max-width: 50vw;
+  height: 1.5em;
+  padding: 0;
   font-family: inherit;
   font-size: inherit;
   background-color: transparent;
   color: $textColor;
-  border: 1px solid #ced4da;
-  border-radius: 0.3em;
-}
-
-.searchHelp {
-  display: block;
-  font-size: 0.75em;
-  line-height: 1em;
-  margin-top: 0.3em;
-
-  a {
-    color: $anchorColor;
-  }
-}
-
-.filterLayout {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
+  border: 1px solid transparent;
 }
 
-.filterList {
+.statuses {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.5em;
   list-style: none;
@@ -63,13 +25,49 @@
   margin: 0;
 }
 
-.filterIcon {
-  opacity: 0.666;
+.label {
+  position: relative;
+  font-size: 0.75em;
 }
 
-.filterField {
-  display: flex;
-  align-items: center;
-  gap: 1px;
-  accent-color: $anchorColor;
+.checkbox {
+  position: absolute;
+  top: 0.125em;
+  left: 0.5em;
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.status {
+  padding: 0.333em 0.5em;
+  border-radius: 0.333em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+
+  @each $name, $color in $statusColors {
+    &[data-status='#{$name}'] {
+      background-color: fade-out($color, 0.666);
+
+      svg {
+        color: $color;
+      }
+    }
+  }
+
+  .checkbox:not(:checked) + & {
+    opacity: 0.666;
+
+    svg {
+      opacity: 0;
+    }
+  }
+
+  > * + * {
+    margin-left: 0.25em;
+  }
 }
diff --git a/src/components/app/SearchBar.spec.tsx b/src/components/app/SearchBar.spec.tsx
index 705bc2cc..6d40ed28 100644
--- a/src/components/app/SearchBar.spec.tsx
+++ b/src/components/app/SearchBar.spec.tsx
@@ -141,9 +141,9 @@ describe('SearchBar', () => {
       )
 
       expect(getAllByRole('checkbox')).to.have.length(3)
-      expect(getByRole('checkbox', { name: 'passed' })).to.be.visible
-      expect(getByRole('checkbox', { name: 'undefined' })).to.be.visible
-      expect(getByRole('checkbox', { name: 'failed' })).to.be.visible
+      expect(getByRole('checkbox', { name: 'passed 5' })).to.be.visible
+      expect(getByRole('checkbox', { name: 'undefined 2' })).to.be.visible
+      expect(getByRole('checkbox', { name: 'failed 2' })).to.be.visible
       getAllByRole('checkbox').forEach((checkbox: HTMLInputElement) => {
         expect(checkbox).to.be.checked
       })
@@ -160,7 +160,7 @@ describe('SearchBar', () => {
         </EnvelopesWrapper>
       )
 
-      await userEvent.click(getByRole('checkbox', { name: 'undefined' }))
+      await userEvent.click(getByRole('checkbox', { name: 'undefined 2' }))
 
       expect(onUpdate).to.have.been.calledOnceWithExactly({
         query: '',
@@ -180,9 +180,9 @@ describe('SearchBar', () => {
         </EnvelopesWrapper>
       )
 
-      expect(getByRole('checkbox', { name: 'passed' })).to.be.checked
-      expect(getByRole('checkbox', { name: 'failed' })).to.be.checked
-      expect(getByRole('checkbox', { name: 'undefined' })).not.to.be.checked
+      expect(getByRole('checkbox', { name: 'passed 5' })).to.be.checked
+      expect(getByRole('checkbox', { name: 'failed 2' })).to.be.checked
+      expect(getByRole('checkbox', { name: 'undefined 2' })).not.to.be.checked
     })
 
     it('updates the search context when a status is rechecked', async () => {
@@ -201,7 +201,7 @@ describe('SearchBar', () => {
         </EnvelopesWrapper>
       )
 
-      await userEvent.click(getByRole('checkbox', { name: 'failed' }))
+      await userEvent.click(getByRole('checkbox', { name: 'failed 2' }))
 
       expect(onUpdate).to.have.been.calledOnceWithExactly({
         query: '',
diff --git a/src/components/app/SearchBar.tsx b/src/components/app/SearchBar.tsx
index 47920111..1488f4f0 100644
--- a/src/components/app/SearchBar.tsx
+++ b/src/components/app/SearchBar.tsx
@@ -1,17 +1,18 @@
 import { TestStepResultStatus as Status } from '@cucumber/messages'
-import { faFilter, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { faCheck, faFilter, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { FC } from 'react'
 import { useDebouncedCallback } from 'use-debounce'
 
 import { useSearch } from '../../hooks/index.js'
 import { useResultStatistics } from '../../hooks/useResultStatistics.js'
+import statuses from '../../statuses.js'
 import statusName from '../gherkin/statusName.js'
+import { HeaderItem, HeaderSection, HeaderSubItem } from './Header.js'
 import styles from './SearchBar.module.scss'
-import statuses from './statuses.js'
 
 export const SearchBar: FC = () => {
-  const { statusesWithScenarios } = useResultStatistics()
+  const { scenarioCountByStatus, statusesWithScenarios } = useResultStatistics()
   const { query, hideStatuses, update } = useSearch()
 
   const debouncedSearchChange = useDebouncedCallback((newValue) => update({ query: newValue }), 500)
@@ -26,57 +27,58 @@ export const SearchBar: FC = () => {
   }
 
   return (
-    <div className={styles.layout}>
-      <form className={styles.searchForm} onSubmit={searchSubmitted}>
-        <FontAwesomeIcon aria-hidden="true" className={styles.queryIcon} icon={faSearch} />
-        <input
-          className={styles.queryField}
-          aria-label="Search"
-          type="text"
-          name="query"
-          placeholder="Search with text or @tags"
-          defaultValue={query}
-          onChange={(e) => debouncedSearchChange(e.target.value)}
-        />
-        <small className={styles.searchHelp}>
-          You can search with plain text or{' '}
-          <a
-            href="https://cucumber.io/docs/cucumber/api/#tag-expressions"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Cucumber Tag Expressions
-          </a>{' '}
-          to filter the output
-        </small>
-      </form>
+    <HeaderSection>
+      <HeaderItem>
+        <form onSubmit={searchSubmitted}>
+          <HeaderSubItem>
+            <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faSearch} />
+            <input
+              className={styles.field}
+              aria-label="Search"
+              type="text"
+              name="query"
+              placeholder="Search with text or @tags"
+              defaultValue={query}
+              onChange={(e) => debouncedSearchChange(e.target.value)}
+            />
+          </HeaderSubItem>
+        </form>
+      </HeaderItem>
+
       {statusesWithScenarios.length > 1 && (
-        <div className={styles.filterLayout}>
-          <FontAwesomeIcon className={styles.filterIcon} title="Filter by status" icon={faFilter} />
-          <ul className={styles.filterList}>
-            {statuses.map((status) => {
-              if (!statusesWithScenarios.includes(status)) {
-                return
-              }
-              const name = statusName(status)
-              const enabled = !hideStatuses.includes(status)
+        <HeaderItem>
+          <HeaderSubItem>
+            <FontAwesomeIcon aria-hidden="true" style={{ opacity: 0.75 }} icon={faFilter} />
+            <ul className={styles.statuses}>
+              {statuses.map((status) => {
+                if (!statusesWithScenarios.includes(status)) {
+                  return
+                }
+                const name = statusName(status)
+                const enabled = !hideStatuses.includes(status)
 
-              return (
-                <li key={name}>
-                  <label className={styles.filterField}>
-                    <input
-                      type="checkbox"
-                      defaultChecked={enabled}
-                      onChange={(evt) => filterChanged(status, evt.target.checked)}
-                    />
-                    {name}
-                  </label>
-                </li>
-              )
-            })}
-          </ul>
-        </div>
+                return (
+                  <li key={name}>
+                    <label className={styles.label}>
+                      <input
+                        className={styles.checkbox}
+                        type="checkbox"
+                        defaultChecked={enabled}
+                        onChange={(evt) => filterChanged(status, evt.target.checked)}
+                      />
+                      <span className={styles.status} data-status={status}>
+                        <FontAwesomeIcon aria-hidden="true" icon={faCheck} />
+                        <span>{name}</span>
+                        <strong>{scenarioCountByStatus[status]}</strong>
+                      </span>
+                    </label>
+                  </li>
+                )
+              })}
+            </ul>
+          </HeaderSubItem>
+        </HeaderItem>
       )}
-    </div>
+    </HeaderSection>
   )
 }
diff --git a/src/components/app/StatusesSummary.module.scss b/src/components/app/StatusesSummary.module.scss
index 4143da7e..4642e1c2 100644
--- a/src/components/app/StatusesSummary.module.scss
+++ b/src/components/app/StatusesSummary.module.scss
@@ -1,11 +1,4 @@
-$statusColors:
-  'PASSED' #2cb14a,
-  'SKIPPED' #00a0cc,
-  'PENDING' #ffad33,
-  'UNDEFINED' #ffad33,
-  'AMBIGUOUS' #f4ebfd,
-  'FAILED' #bb0000,
-  'UNKNOWN' #b6becb;
+@import '../../styles/statuses';
 
 .statusesList {
   list-style: none;
diff --git a/src/components/app/StatusesSummary.spec.tsx b/src/components/app/StatusesSummary.spec.tsx
index c353d104..1c6a309d 100644
--- a/src/components/app/StatusesSummary.spec.tsx
+++ b/src/components/app/StatusesSummary.spec.tsx
@@ -15,9 +15,9 @@ describe('StatusesSummary', () => {
     )
 
     expect(getAllByRole('listitem').map((li) => li.textContent)).to.deep.eq([
-      '2 failed',
       '5 passed',
       '2 undefined',
+      '2 failed',
     ])
   })
 })
diff --git a/src/components/app/StatusesSummary.tsx b/src/components/app/StatusesSummary.tsx
index ef49390e..4b9b48d8 100644
--- a/src/components/app/StatusesSummary.tsx
+++ b/src/components/app/StatusesSummary.tsx
@@ -1,8 +1,8 @@
 import React, { FC } from 'react'
 
 import { useResultStatistics } from '../../hooks/useResultStatistics.js'
+import statuses from '../../statuses.js'
 import statusName from '../gherkin/statusName.js'
-import statuses from './statuses.js'
 import styles from './StatusesSummary.module.scss'
 
 export const StatusesSummary: FC = () => {
diff --git a/src/components/app/icons/CucumberLogo.tsx b/src/components/app/icons/CucumberLogo.tsx
index 34ee8dc6..b511b121 100644
--- a/src/components/app/icons/CucumberLogo.tsx
+++ b/src/components/app/icons/CucumberLogo.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export const CucumberLogo = () => {
+export const CucumberLogo: FC = () => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0.06 0.56 32.5 37.13">
+    <svg viewBox="0.06 0.56 32.5 37.13" aria-hidden="true">
       <g fill="none" fillRule="evenodd">
         <path d="M-4-1h40v40H-4z" />
         <path
diff --git a/src/components/app/icons/Jvm.tsx b/src/components/app/icons/Jvm.tsx
index 74e003c8..7cfc5228 100644
--- a/src/components/app/icons/Jvm.tsx
+++ b/src/components/app/icons/Jvm.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export const Jvm = () => {
+export const Jvm: FC = () => {
   return (
-    <svg viewBox="0 0 128 128">
+    <svg viewBox="0 0 128 128" aria-hidden="true">
       <path
         fill="#0074BD"
         d="M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z"
diff --git a/src/components/app/icons/Linux.tsx b/src/components/app/icons/Linux.tsx
index 71fb34f8..09f43d45 100644
--- a/src/components/app/icons/Linux.tsx
+++ b/src/components/app/icons/Linux.tsx
@@ -1,8 +1,8 @@
-import React, { VoidFunctionComponent } from 'react'
+import React, { FC } from 'react'
 
-export const Linux: VoidFunctionComponent = () => {
+export const Linux: FC = () => {
   return (
-    <svg viewBox="0 0 310.96 367.914">
+    <svg viewBox="0 0 310.96 367.914" aria-hidden="true">
       <path d="M280.594 246.472c-4.757 19.568-28.863 60.446-41.666 78.436-12.812 18.06-11.224 34.32-34.9 27.994-23.607-6.336-30.224-5.187-54.619-3.748-24.248 1.439-19-.72-34.182 6.117-15.111 6.835-65.843-82.893-69.941-99.594-4.038-16.691-3.263-18.766 4.528-38.161 6.437-16.03 14.067-34.537 25.906-52.359 14.372-21.637 29.933-33.101 28.783-49.872-4.527-62.246-8.125-93.328 19.499-107.721 26.345-13.671 48.364-5.546 57.069-.87 3.738 2.02 11.373 5.908 17.05 12.744 5.686 6.687 10.794 16.84 13.672 29.644 5.906 25.696-2.438 17.2 4.248 46.633 6.626 29.354 20.078 43.746 36.489 66.993 16.401 23.248 33.532 61.596 28.064 83.764z" />
       <path d="M231.514 150.021c.67-.467.745-1.172.204-1.963-.546-.799-1.311-1.034-1.947-.6-.536.366-.603.816-.245 1.762l.225.595c.168.442.133.687-.116.856-.32.221-.755.047-1.083-.431-.2-.294-.285-.601-.236-.837.04-.152.112-.258.332-.457l-.394-.575c-.774.567-.85 1.272-.236 2.168.59.864 1.392 1.123 2.052.671.511-.349.595-.829.294-1.622l-.234-.608c-.199-.517-.185-.805.057-.971.314-.214.709-.072 1.014.373.299.439.27.804-.081 1.064l.394.575zm1.904.734-.371-.543-3.429 2.345.371.543 3.429-2.345zm1.342-.917-.376-.549-.687.469.375.55.688-.47zm-.706 1.846-3.429 2.345.375.55 2.154-1.473c.497-.339 1.142-.252 1.446.193.278.406.185.804-.253 1.105l-2.363 1.615.377.549 2.153-1.472c.497-.339 1.142-.253 1.447.193.273.398.178.809-.253 1.104l-2.364 1.615.377.55 2.572-1.759c.615-.42.714-1.006.275-1.647-.314-.459-.639-.64-1.244-.696.228-.453.197-.836-.107-1.281-.314-.458-.69-.643-1.303-.655l.484-.332-.344-.504zm4.729 6.707c-.657-.962-1.744-1.075-2.895-.287-1.152.787-1.446 1.833-.779 2.808.658.962 1.748 1.081 2.873.312 1.185-.81 1.477-1.845.801-2.833zm-.499.351c.42.616.167 1.326-.685 1.908-.804.55-1.574.52-1.986-.083-.416-.608-.167-1.326.664-1.894.825-.564 1.59-.539 2.007.069zm1.985 2.032-3.429 2.345.375.55 1.891-1.293c.701-.478 1.409-.426 1.794.137.295.433.221.886-.191 1.168l-2.376 1.625.372.543 2.592-1.772c.569-.389.644-1.066.193-1.727-.35-.51-.77-.703-1.453-.677l.576-.394-.344-.505zm4.998 7.637-.529.151c.26-.419.269-.828.023-1.188-.6-.877-2.014-1.091-2.963-.443-.68.466-.884 1.277-.468 1.886.237.346.574.53 1.106.607-.293.288-.293.652-.012 1.065.332.484.794.754 1.415.819.665.073 1.334-.087 1.844-.435 1.329-.908 1.571-2.928.529-4.452a4.054 4.054 0 0 0-2.335-1.603 3.884 3.884 0 0 0-3.023.55c-1.453.994-1.714 3.112-.582 4.768.332.484.787.94 1.286 1.291l.313-.483c-.517-.434-.831-.767-1.072-1.121-.949-1.386-.717-3.111.533-3.966 1.375-.939 3.374-.558 4.318.822.855 1.251.659 2.931-.434 3.677-.767.525-1.877.487-2.257-.069-.121-.177-.093-.417.065-.525a1.48 1.48 0 0 1 .38-.144l2.235-.664-.372-.543zm-.952-.79c.251.366.16.823-.207 1.045-.337.211-1.008.41-1.361.411-.394.001-.716-.134-.882-.376-.246-.361-.103-.88.329-1.176.734-.502 1.745-.453 2.121.096zm4.252 2.413-4.771 3.262.337.491.437-.301c-.219.536-.173 1.012.154 1.49.617.903 1.76.987 2.898.208 1.113-.761 1.416-1.793.798-2.697-.322-.47-.727-.684-1.287-.675l1.805-1.235-.371-.543zm-.729 2.698c.416.609.155 1.364-.664 1.923-.779.532-1.586.489-1.994-.106-.393-.577-.129-1.314.676-1.864.805-.551 1.589-.529 1.982.047zm.361 7.004 3.429-2.345-.371-.543-1.944 1.329c-.7.479-1.409.425-1.798-.144-.295-.432-.221-.886.191-1.167l2.428-1.66-.372-.544-2.643 1.808c-.57.388-.645 1.065-.189 1.732.344.504.74.704 1.411.716l-.477.326.335.492zm7.317.462-.372-.543-1.773 1.212c.19-.466.123-.958-.19-1.416-.609-.89-1.72-.985-2.813-.238-1.159.793-1.483 1.849-.852 2.772.322.471.722.678 1.349.682l-.451.308.331.485 4.771-3.262zm-2.783-.307c.402.589.134 1.32-.685 1.88-.791.541-1.574.52-1.968-.057-.412-.602-.154-1.363.644-1.909.799-.546 1.601-.51 2.009.086zm2.385 2.605-.371-.544-3.43 2.345.371.543 3.43-2.344zm1.342-.918-.376-.549-.687.469.376.551.687-.471zm.824 4.086-.498.339c.218-.552.18-1.015-.12-1.454-.595-.87-1.757-.941-2.869-.179-.563.384-.918.847-1.054 1.352-.113.452-.032.936.214 1.296.295.431.684.607 1.326.62l-.177.12c-.464.319-.785.451-1.07.444-.301-.005-.611-.206-.839-.54-.17-.249-.256-.516-.242-.747.013-.191.069-.306.25-.477l-.381-.557c-.608.502-.649 1.27-.099 2.075.349.51.813.837 1.24.871.493.047.992-.15 1.797-.7l2.866-1.959-.344-.504zm-1.082-.712c.403.589.143 1.276-.714 1.862-.819.56-1.558.547-1.952-.03-.407-.595-.149-1.299.683-1.868.825-.563 1.585-.546 1.983.036zm-.168 4.782-.465-.679-.681.464.465.681.681-.466zm6.694 1.013-.371-.543-1.774 1.213c.19-.466.123-.959-.19-1.416-.609-.891-1.72-.985-2.813-.239-1.158.793-1.482 1.85-.852 2.773.323.471.723.678 1.35.681l-.451.308.33.485 4.771-3.262zm-2.783-.306c.403.589.135 1.32-.684 1.879-.791.542-1.575.521-1.968-.056-.412-.602-.154-1.364.643-1.91.799-.546 1.602-.509 2.009.087zm2.111 6.278c.524-.359.812-.613 1-.885.411-.607.393-1.364-.046-2.005-.653-.956-1.806-1.07-2.932-.3s-1.412 1.839-.754 2.801c.537.786 1.353 1.024 2.192.652l-.375-.55c-.554.159-1.001.012-1.3-.426a1.143 1.143 0 0 1-.119-1.129c.107-.265.272-.446.608-.685l1.726 2.527zm-1.272-2.818c.666-.388 1.342-.284 1.718.266.367.537.204 1.253-.359 1.638-.013.008-.026.018-.044.02l-1.315-1.924z" />
       <path
diff --git a/src/components/app/icons/MacOS.tsx b/src/components/app/icons/MacOS.tsx
index c4208c72..aa81effe 100644
--- a/src/components/app/icons/MacOS.tsx
+++ b/src/components/app/icons/MacOS.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export const MacOS = () => {
+export const MacOS: FC = () => {
   return (
-    <svg viewBox="0 0 42 42">
+    <svg viewBox="0 0 42 42" aria-hidden="true">
       <path d="m23.091 14.018v-0.342l-1.063 0.073c-0.301 0.019-0.527 0.083-0.679 0.191-0.152 0.109-0.228 0.26-0.228 0.453 0 0.188 0.075 0.338 0.226 0.449 0.15 0.112 0.352 0.167 0.604 0.167 0.161 0 0.312-0.025 0.451-0.074s0.261-0.118 0.363-0.206c0.102-0.087 0.182-0.191 0.239-0.312 0.058-0.121 0.087-0.254 0.087-0.399zm-2.091-13.768c-11.579 0-20.75 9.171-20.75 20.75 0 11.58 9.171 20.75 20.75 20.75s20.75-9.17 20.75-20.75c0-11.579-9.17-20.75-20.75-20.75zm4.028 12.299c0.098-0.275 0.236-0.511 0.415-0.707s0.394-0.347 0.646-0.453 0.533-0.159 0.842-0.159c0.279 0 0.531 0.042 0.755 0.125 0.225 0.083 0.417 0.195 0.578 0.336s0.289 0.305 0.383 0.493 0.15 0.387 0.169 0.596h-0.833c-0.021-0.115-0.059-0.223-0.113-0.322s-0.125-0.185-0.213-0.258c-0.089-0.073-0.193-0.13-0.312-0.171-0.12-0.042-0.254-0.062-0.405-0.062-0.177 0-0.338 0.036-0.481 0.107-0.144 0.071-0.267 0.172-0.369 0.302s-0.181 0.289-0.237 0.475c-0.057 0.187-0.085 0.394-0.085 0.622 0 0.236 0.028 0.448 0.085 0.634 0.056 0.187 0.136 0.344 0.24 0.473 0.103 0.129 0.228 0.228 0.373 0.296s0.305 0.103 0.479 0.103c0.285 0 0.517-0.067 0.697-0.201s0.296-0.33 0.35-0.588h0.834c-0.024 0.228-0.087 0.436-0.189 0.624s-0.234 0.348-0.396 0.481c-0.163 0.133-0.354 0.236-0.574 0.308s-0.462 0.109-0.725 0.109c-0.312 0-0.593-0.052-0.846-0.155-0.252-0.103-0.469-0.252-0.649-0.445s-0.319-0.428-0.417-0.705-0.147-0.588-0.147-0.935c-2e-3 -0.339 0.047-0.647 0.145-0.923zm-11.853-1.262h0.834v0.741h0.016c0.051-0.123 0.118-0.234 0.2-0.33 0.082-0.097 0.176-0.179 0.284-0.248 0.107-0.069 0.226-0.121 0.354-0.157 0.129-0.036 0.265-0.054 0.407-0.054 0.306 0 0.565 0.073 0.775 0.219 0.211 0.146 0.361 0.356 0.449 0.63h0.021c0.056-0.132 0.13-0.25 0.221-0.354s0.196-0.194 0.314-0.268 0.248-0.13 0.389-0.169 0.289-0.058 0.445-0.058c0.215 0 0.41 0.034 0.586 0.103s0.326 0.165 0.451 0.29 0.221 0.277 0.288 0.455 0.101 0.376 0.101 0.594v2.981h-0.87v-2.772c0-0.287-0.074-0.51-0.222-0.667-0.147-0.157-0.358-0.236-0.632-0.236-0.134 0-0.257 0.024-0.369 0.071-0.111 0.047-0.208 0.113-0.288 0.198-0.081 0.084-0.144 0.186-0.189 0.304-0.046 0.118-0.069 0.247-0.069 0.387v2.715h-0.858v-2.844c0-0.126-0.02-0.24-0.059-0.342s-0.094-0.189-0.167-0.262c-0.072-0.073-0.161-0.128-0.264-0.167-0.104-0.039-0.22-0.059-0.349-0.059-0.134 0-0.258 0.025-0.373 0.075-0.114 0.05-0.212 0.119-0.294 0.207-0.082 0.089-0.146 0.193-0.191 0.314-0.044 0.12-0.116 0.252-0.116 0.394v2.683h-0.825v-4.374zm1.893 20.939c-3.825 0-6.224-2.658-6.224-6.9s2.399-6.909 6.224-6.909 6.215 2.667 6.215 6.909c0 4.241-2.39 6.9-6.215 6.9zm7.082-16.575c-0.141 0.036-0.285 0.054-0.433 0.054-0.218 0-0.417-0.031-0.598-0.093-0.182-0.062-0.337-0.149-0.467-0.262s-0.232-0.249-0.304-0.409c-0.073-0.16-0.109-0.338-0.109-0.534 0-0.384 0.143-0.684 0.429-0.9s0.7-0.342 1.243-0.377l1.18-0.068v-0.338c0-0.252-0.08-0.445-0.24-0.576s-0.386-0.197-0.679-0.197c-0.118 0-0.229 0.015-0.331 0.044-0.102 0.03-0.192 0.072-0.27 0.127s-0.143 0.121-0.193 0.198c-0.051 0.076-0.086 0.162-0.105 0.256h-0.818c5e-3 -0.193 0.053-0.372 0.143-0.536s0.212-0.306 0.367-0.427 0.336-0.215 0.546-0.282 0.438-0.101 0.685-0.101c0.266 0 0.507 0.033 0.723 0.101s0.401 0.163 0.554 0.288 0.271 0.275 0.354 0.451 0.125 0.373 0.125 0.59v3.001h-0.833v-0.729h-0.021c-0.062 0.118-0.14 0.225-0.235 0.32-0.096 0.095-0.203 0.177-0.322 0.244-0.12 0.067-0.25 0.119-0.391 0.155zm5.503 16.575c-2.917 0-4.9-1.528-5.038-3.927h1.899c0.148 1.371 1.473 2.279 3.288 2.279 1.741 0 2.992-0.908 2.992-2.149 0-1.074-0.76-1.723-2.519-2.167l-1.714-0.426c-2.464-0.611-3.584-1.732-3.584-3.575 0-2.269 1.982-3.844 4.807-3.844 2.76 0 4.686 1.584 4.76 3.862h-1.88c-0.13-1.371-1.25-2.214-2.918-2.214-1.658 0-2.806 0.852-2.806 2.084 0 0.972 0.722 1.547 2.482 1.991l1.445 0.361c2.751 0.667 3.881 1.751 3.881 3.696-1e-3 2.482-1.964 4.029-5.095 4.029zm-12.585-12.106c-2.621 0-4.26 2.01-4.26 5.205 0 3.186 1.639 5.196 4.26 5.196 2.612 0 4.26-2.01 4.26-5.196 1e-3 -3.195-1.648-5.205-4.26-5.205z" />
     </svg>
   )
diff --git a/src/components/app/icons/NodeJs.tsx b/src/components/app/icons/NodeJs.tsx
index 87f73157..8534d354 100644
--- a/src/components/app/icons/NodeJs.tsx
+++ b/src/components/app/icons/NodeJs.tsx
@@ -1,80 +1,11 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export const NodeJs = () => {
+export const NodeJs: FC = () => {
   return (
-    <svg viewBox="0 0 442.37 270.929">
-      <defs>
-        <linearGradient
-          id="b"
-          x1="-.348"
-          x2="1.251"
-          gradientTransform="rotate(116.114 53.1 202.97) scale(86.48)"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset=".3" stopColor="#3e863d" />
-          <stop offset=".5" stopColor="#55934f" />
-          <stop offset=".8" stopColor="#5aad45" />
-        </linearGradient>
-        <linearGradient
-          id="d"
-          x1="-.456"
-          x2=".582"
-          gradientTransform="rotate(-36.46 550.846 -214.337) scale(132.798)"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset=".57" stopColor="#3e863d" />
-          <stop offset=".72" stopColor="#619857" />
-          <stop offset="1" stopColor="#76ac64" />
-        </linearGradient>
-        <linearGradient
-          id="f"
-          x1=".043"
-          x2=".984"
-          gradientTransform="translate(192.862 279.652) scale(97.417)"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset=".16" stopColor="#6bbf47" />
-          <stop offset=".38" stopColor="#79b461" />
-          <stop offset=".47" stopColor="#75ac64" />
-          <stop offset=".7" stopColor="#659e5a" />
-          <stop offset=".9" stopColor="#3e863d" />
-        </linearGradient>
-        <clipPath id="a">
-          <path d="m239.03 226.605-42.13 24.317a5.085 5.085 0 0 0-2.546 4.406v48.668c0 1.817.968 3.496 2.546 4.406l42.133 24.336a5.1 5.1 0 0 0 5.09 0l42.126-24.336a5.096 5.096 0 0 0 2.54-4.406v-48.668c0-1.816-.97-3.496-2.55-4.406l-42.12-24.317a5.123 5.123 0 0 0-5.1 0" />
-        </clipPath>
-        <clipPath id="c">
-          <path d="M195.398 307.086c.403.523.907.976 1.5 1.316l36.14 20.875 6.02 3.46c.9.52 1.926.74 2.934.665.336-.027.672-.09 1-.183l44.434-81.36c-.34-.37-.738-.68-1.184-.94l-27.586-15.93-14.582-8.39a5.318 5.318 0 0 0-1.32-.53zm0 0" />
-        </clipPath>
-        <clipPath id="e">
-          <path d="M241.066 225.953a5.14 5.14 0 0 0-2.035.652l-42.01 24.247 45.3 82.51c.63-.09 1.25-.3 1.81-.624l42.13-24.336a5.105 5.105 0 0 0 2.46-3.476l-46.18-78.89a5.29 5.29 0 0 0-1.03-.102c-.14 0-.28.007-.42.02" />
-        </clipPath>
-      </defs>
-      <path
-        fill="#689f63"
-        d="M218.647 270.93c-1.46 0-2.91-.383-4.19-1.12l-13.337-7.896c-1.992-1.114-1.02-1.508-.363-1.735 2.656-.93 3.195-1.14 6.03-2.75.298-.17.688-.11.993.07l10.246 6.08c.37.2.895.2 1.238 0l39.95-23.06c.37-.21.61-.64.61-1.08v-46.1c0-.46-.24-.87-.618-1.1l-39.934-23.04c-.37-.22-.86-.22-1.23 0l-39.926 23.04c-.387.22-.633.65-.633 1.09v46.1c0 .44.24.86.62 1.07l10.94 6.32c5.94 2.97 9.57-.53 9.57-4.05v-45.5c0-.65.51-1.15 1.16-1.15h5.06c.63 0 1.15.5 1.15 1.15v45.52c0 7.92-4.32 12.47-11.83 12.47-2.31 0-4.13 0-9.21-2.5l-10.48-6.04a8.447 8.447 0 0 1-4.19-7.29v-46.1c0-3 1.6-5.8 4.19-7.28l39.99-23.07c2.53-1.43 5.89-1.43 8.4 0l39.94 23.08a8.428 8.428 0 0 1 4.19 7.28v46.1c0 2.99-1.61 5.78-4.19 7.28l-39.94 23.07a8.397 8.397 0 0 1-4.21 1.12"
-      />
-      <path
-        fill="#689f63"
-        d="M230.987 239.164c-17.48 0-21.145-8.024-21.145-14.754 0-.64.516-1.15 1.157-1.15h5.16c.57 0 1.05.415 1.14.978.78 5.258 3.1 7.91 13.67 7.91 8.42 0 12-1.902 12-6.367 0-2.57-1.02-4.48-14.1-5.76-10.94-1.08-17.7-3.49-17.7-12.24 0-8.06 6.8-12.86 18.19-12.86 12.79 0 19.13 4.44 19.93 13.98a1.164 1.164 0 0 1-1.16 1.26h-5.19c-.54 0-1.01-.38-1.12-.9-1.25-5.53-4.27-7.3-12.48-7.3-9.19 0-10.26 3.2-10.26 5.6 0 2.91 1.26 3.76 13.66 5.4 12.28 1.63 18.11 3.93 18.11 12.56 0 8.7-7.26 13.69-19.92 13.69m48.66-48.89h1.34c1.1 0 1.31-.77 1.31-1.22 0-1.18-.81-1.18-1.26-1.18h-1.38zm-1.63-3.78h2.97c1.02 0 3.02 0 3.02 2.28 0 1.59-1.02 1.92-1.63 2.12 1.19.08 1.27.86 1.43 1.96.08.69.21 1.88.45 2.28h-1.83c-.05-.4-.33-2.6-.33-2.72-.12-.49-.29-.73-.9-.73h-1.51v3.46h-1.67zm-3.57 4.3c0 3.58 2.89 6.48 6.44 6.48 3.58 0 6.47-2.96 6.47-6.48 0-3.59-2.93-6.44-6.48-6.44-3.5 0-6.44 2.81-6.44 6.43m14.16.03c0 4.24-3.47 7.7-7.7 7.7-4.2 0-7.7-3.42-7.7-7.7 0-4.36 3.58-7.7 7.7-7.7 4.15 0 7.69 3.35 7.69 7.7"
-      />
-      <path
-        fill="currentColor"
-        fillRule="evenodd"
-        d="M94.936 90.55c0-1.84-.97-3.53-2.558-4.445l-42.356-24.37a4.946 4.946 0 0 0-2.328-.67h-.438c-.812.03-1.613.25-2.34.67L2.562 86.105A5.154 5.154 0 0 0 0 90.555l.093 65.64c0 .91.47 1.76 1.27 2.21.78.48 1.76.48 2.54 0l25.18-14.42c1.59-.946 2.56-2.618 2.56-4.44V108.88a5.1 5.1 0 0 1 2.555-4.43l10.72-6.174a5.086 5.086 0 0 1 2.56-.688c.876 0 1.77.226 2.544.687l10.715 6.172c1.586.91 2.56 2.6 2.56 4.43v30.663c0 1.82.983 3.5 2.565 4.44l25.164 14.41a2.5 2.5 0 0 0 2.56 0 2.568 2.568 0 0 0 1.268-2.21zm199.868 34.176c0 .457-.243.88-.64 1.106l-14.548 8.386a1.282 1.282 0 0 1-1.277 0l-14.55-8.386c-.4-.227-.64-.65-.64-1.106V107.93c0-.458.24-.88.63-1.11l14.54-8.4c.4-.23.89-.23 1.29 0l14.55 8.4c.4.23.64.652.64 1.11zM298.734.324a2.568 2.568 0 0 0-2.544.027c-.78.46-1.262 1.3-1.262 2.21v65a1.788 1.788 0 0 1-2.684 1.55L281.634 63a5.108 5.108 0 0 0-5.112 0l-42.37 24.453a5.105 5.105 0 0 0-2.56 4.42v48.92c0 1.83.977 3.51 2.56 4.43l42.37 24.47c1.582.91 3.53.91 5.117 0l42.37-24.48c1.58-.92 2.56-2.6 2.56-4.43V18.863a5.128 5.128 0 0 0-2.63-4.47zm141.093 107.164a5.116 5.116 0 0 0 2.543-4.422V91.21c0-1.824-.97-3.507-2.547-4.425l-42.1-24.44a5.113 5.113 0 0 0-5.13 0l-42.36 24.45c-1.59.92-2.56 2.6-2.56 4.43v48.9c0 1.84.99 3.54 2.58 4.45l42.09 23.99c1.55.89 3.45.9 5.02.03l25.46-14.15c.8-.45 1.31-1.3 1.31-2.22 0-.92-.49-1.78-1.29-2.23l-42.62-24.46c-.8-.45-1.29-1.3-1.29-2.21v-15.34c0-.916.48-1.76 1.28-2.216l13.26-7.65c.79-.46 1.76-.46 2.55 0l13.27 7.65c.79.45 1.28 1.3 1.28 2.21v12.06c0 .91.49 1.76 1.28 2.22.79.45 1.77.45 2.56-.01zm0 0"
-      />
-      <path
-        fill="#689f63"
-        fillRule="evenodd"
-        d="M394.538 105.2a.97.97 0 0 1 .98 0l8.13 4.69c.304.176.49.5.49.85v9.39c0 .35-.186.674-.49.85l-8.13 4.69a.97.97 0 0 1-.98 0l-8.125-4.69a.979.979 0 0 1-.5-.85v-9.39c0-.35.18-.674.49-.85zm0 0"
-      />
-      <g clipPath="url(#a)" transform="translate(-78.306 -164.016)">
-        <path fill="url(#b)" d="m331.363 246.793-118.715-58.19-60.87 124.174L270.49 370.97zm0 0" />
-      </g>
-      <g clipPath="url(#c)" transform="translate(-78.306 -164.016)">
-        <path fill="url(#d)" d="m144.07 264.004 83.825 113.453 110.86-81.906-83.83-113.45zm0 0" />
-      </g>
-      <g clipPath="url(#e)" transform="translate(-78.306 -164.016)">
-        <path fill="url(#f)" d="M197.02 225.934v107.43h91.683v-107.43zm0 0" />
+    <svg viewBox="0 0 71 80" aria-hidden="true">
+      <g fill="#5FA04E">
+        <path d="M35.625 79.5c-1.081 0-2.09-.288-3.028-.792l-9.59-5.686c-1.442-.792-.721-1.08-.289-1.224 1.947-.648 2.308-.792 4.327-1.944.216-.144.504-.072.72.072l7.356 4.391c.288.144.649.144.865 0l28.77-16.628c.289-.144.433-.431.433-.791V23.714c0-.36-.144-.648-.432-.792L35.986 6.366c-.288-.144-.65-.144-.865 0L6.35 22.922c-.29.144-.434.504-.434.792v33.184c0 .287.145.647.433.791l7.86 4.535c4.254 2.16 6.922-.36 6.922-2.879V26.593c0-.432.36-.864.865-.864h3.678c.432 0 .865.36.865.864v32.752c0 5.687-3.1 8.998-8.509 8.998-1.658 0-2.956 0-6.633-1.8l-7.572-4.319A6.073 6.073 0 0 1 .798 56.97V23.786a6.073 6.073 0 0 1 3.028-5.255l28.77-16.628c1.804-1.008 4.255-1.008 6.058 0l28.77 16.628a6.073 6.073 0 0 1 3.029 5.255V56.97a6.073 6.073 0 0 1-3.029 5.254l-28.77 16.628c-.865.36-1.947.648-3.029.648Z" />
+        <path d="M44.567 56.682c-12.62 0-15.215-5.759-15.215-10.654 0-.432.36-.864.865-.864h3.75c.433 0 .793.288.793.72.577 3.815 2.235 5.687 9.879 5.687 6.057 0 8.652-1.368 8.652-4.607 0-1.871-.72-3.24-10.167-4.175-7.86-.792-12.762-2.52-12.762-8.782 0-5.83 4.903-9.285 13.123-9.285 9.23 0 13.772 3.167 14.35 10.077 0 .216-.073.432-.217.648-.144.144-.36.288-.577.288h-3.822a.844.844 0 0 1-.793-.648c-.865-3.96-3.1-5.255-9.013-5.255-6.634 0-7.427 2.304-7.427 4.031 0 2.088.937 2.736 9.879 3.887 8.869 1.152 13.05 2.808 13.05 8.998 0 6.335-5.263 9.934-14.348 9.934Z" />
       </g>
     </svg>
   )
diff --git a/src/components/app/icons/Ruby.tsx b/src/components/app/icons/Ruby.tsx
index 9e79725b..65e807c0 100644
--- a/src/components/app/icons/Ruby.tsx
+++ b/src/components/app/icons/Ruby.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { FC } from 'react'
 
-export const Ruby = () => {
+export const Ruby: FC = () => {
   return (
-    <svg viewBox="0 0 128 128">
+    <svg viewBox="0 0 128 128" aria-hidden="true">
       <path
         fillRule="evenodd"
         clipRule="evenodd"
diff --git a/src/components/app/icons/Windows.tsx b/src/components/app/icons/Windows.tsx
index 875bd699..760d7ef2 100644
--- a/src/components/app/icons/Windows.tsx
+++ b/src/components/app/icons/Windows.tsx
@@ -1,8 +1,8 @@
-import React, { VoidFunctionComponent } from 'react'
+import React, { FC } from 'react'
 
-export const Windows: VoidFunctionComponent = () => {
+export const Windows: FC = () => {
   return (
-    <svg viewBox="0 0 128 128">
+    <svg viewBox="0 0 128 128" aria-hidden="true">
       <path
         fill="#00ADEF"
         d="M126 1.637l-67 9.834v49.831l67-.534zM1.647 66.709l.003 42.404 50.791 6.983-.04-49.057zM58.467 67.389l.094 49.465 67.376 9.509.016-58.863zM1.61 19.297l.047 42.383 50.791-.289-.023-49.016z"
diff --git a/src/components/app/makeSetupString.spec.ts b/src/components/app/makeSetupString.spec.ts
new file mode 100644
index 00000000..d6216b50
--- /dev/null
+++ b/src/components/app/makeSetupString.spec.ts
@@ -0,0 +1,31 @@
+import { expect } from 'chai'
+
+import { makeSetupString } from './makeSetupString.js'
+
+describe('makeSetupString', () => {
+  it('returns a multi-line string including impl, runtime and os', () => {
+    const result = makeSetupString({
+      protocolVersion: '17.1.1',
+      implementation: { version: '8.0.0-rc.1', name: 'cucumber-js' },
+      cpu: { name: 'x64' },
+      os: { name: 'linux', version: '5.11.0-1022-azure' },
+      runtime: { name: 'node.js', version: '16.13.1' },
+      ci: {
+        name: 'GitHub Actions',
+        url: 'https://github.com/cucumber/cucumber-js/actions/runs/1592557391',
+        buildNumber: '1592557391',
+        git: {
+          revision: 'b53d820504b31c8e4d44234dc5eaa58d6b7fdd4c',
+          remote: 'https://github.com/cucumber/cucumber-js.git',
+          branch: 'main',
+        },
+      },
+    })
+
+    expect(result).to.eq(
+      `Implementation: cucumber-js@8.0.0-rc.1
+Runtime: node.js@16.13.1
+Platform: linux@5.11.0-1022-azure`
+    )
+  })
+})
diff --git a/src/components/app/makeSetupString.ts b/src/components/app/makeSetupString.ts
new file mode 100644
index 00000000..f7c65dc8
--- /dev/null
+++ b/src/components/app/makeSetupString.ts
@@ -0,0 +1,27 @@
+import { Meta } from '@cucumber/messages'
+
+export function makeSetupString(meta: Meta): string {
+  const parts = []
+  if (meta.implementation) {
+    let implementation = `Implementation: ${meta.implementation.name}`
+    if (meta.implementation.version) {
+      implementation += `@${meta.implementation.version}`
+    }
+    parts.push(implementation)
+  }
+  if (meta.runtime) {
+    let runtime = `Runtime: ${meta.runtime.name}`
+    if (meta.runtime.version) {
+      runtime += `@${meta.runtime.version}`
+    }
+    parts.push(runtime)
+  }
+  if (meta.os) {
+    let os = `Platform: ${meta.os.name}`
+    if (meta.os.version) {
+      os += `@${meta.os.version}`
+    }
+    parts.push(os)
+  }
+  return parts.join('\n')
+}
diff --git a/src/components/app/statuses.ts b/src/components/app/statuses.ts
deleted file mode 100644
index 76731302..00000000
--- a/src/components/app/statuses.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as messages from '@cucumber/messages'
-
-const statuses: readonly messages.TestStepResultStatus[] = [
-  messages.TestStepResultStatus.AMBIGUOUS,
-  messages.TestStepResultStatus.FAILED,
-  messages.TestStepResultStatus.PASSED,
-  messages.TestStepResultStatus.PENDING,
-  messages.TestStepResultStatus.SKIPPED,
-  messages.TestStepResultStatus.UNDEFINED,
-  messages.TestStepResultStatus.UNKNOWN,
-]
-export default statuses
diff --git a/src/countScenariosByStatuses.spec.ts b/src/countScenariosByStatuses.spec.ts
index d6c3f9cd..ac48a131 100644
--- a/src/countScenariosByStatuses.spec.ts
+++ b/src/countScenariosByStatuses.spec.ts
@@ -54,9 +54,9 @@ Feature: statuses
     expect(scenarioCountByStatus[messages.TestStepResultStatus.FAILED]).to.eq(1)
     expect(scenarioCountByStatus[messages.TestStepResultStatus.UNDEFINED]).to.eq(1)
     expect(statusesWithScenarios).to.deep.eq([
-      TestStepResultStatus.FAILED,
       TestStepResultStatus.PASSED,
       TestStepResultStatus.UNDEFINED,
+      TestStepResultStatus.FAILED,
     ])
     expect(totalScenarioCount).to.eq(4)
     // Ridiculously long because runFeature (fake cucumber) seems to run very slowly with ts-node (?)
@@ -88,9 +88,9 @@ Feature: statuses
     expect(scenarioCountByStatus[messages.TestStepResultStatus.FAILED]).to.eq(1)
     expect(scenarioCountByStatus[messages.TestStepResultStatus.UNDEFINED]).to.eq(1)
     expect(statusesWithScenarios).to.deep.eq([
-      TestStepResultStatus.FAILED,
       TestStepResultStatus.PASSED,
       TestStepResultStatus.UNDEFINED,
+      TestStepResultStatus.FAILED,
     ])
     expect(totalScenarioCount).to.eq(3)
   })
diff --git a/src/countScenariosByStatuses.ts b/src/countScenariosByStatuses.ts
index 0965776e..cf23359f 100644
--- a/src/countScenariosByStatuses.ts
+++ b/src/countScenariosByStatuses.ts
@@ -1,15 +1,7 @@
 import { TestStepResultStatus } from '@cucumber/messages'
 import { Query as CucumberQuery } from '@cucumber/query'
 
-export const allStatuses = [
-  TestStepResultStatus.UNKNOWN,
-  TestStepResultStatus.SKIPPED,
-  TestStepResultStatus.FAILED,
-  TestStepResultStatus.PASSED,
-  TestStepResultStatus.AMBIGUOUS,
-  TestStepResultStatus.PENDING,
-  TestStepResultStatus.UNDEFINED,
-] as const
+import statuses from './statuses.js'
 
 export default function countScenariosByStatuses(cucumberQuery: CucumberQuery): {
   scenarioCountByStatus: Record<TestStepResultStatus, number>
@@ -22,7 +14,8 @@ export default function countScenariosByStatuses(cucumberQuery: CucumberQuery):
     .filter(([, value]) => {
       return value > 0
     })
-    .map(([key]) => key) as TestStepResultStatus[]
+    .map(([key]) => key)
+    .sort(statusComparator) as TestStepResultStatus[]
 
   const totalScenarioCount = [...Object.values(scenarioCountByStatus)].reduce(
     (prev, curr) => prev + curr,
@@ -31,3 +24,13 @@ export default function countScenariosByStatuses(cucumberQuery: CucumberQuery):
 
   return { scenarioCountByStatus, statusesWithScenarios, totalScenarioCount }
 }
+
+function statusComparator(a: TestStepResultStatus, b: TestStepResultStatus) {
+  if (statuses.indexOf(a) < statuses.indexOf(b)) {
+    return -1
+  }
+  if (statuses.indexOf(a) > statuses.indexOf(b)) {
+    return 1
+  }
+  return 0
+}
diff --git a/src/hooks/useFilteredDocuments.ts b/src/hooks/useFilteredDocuments.ts
index d60011bf..ab1cdabe 100644
--- a/src/hooks/useFilteredDocuments.ts
+++ b/src/hooks/useFilteredDocuments.ts
@@ -1,9 +1,9 @@
 import { GherkinDocument } from '@cucumber/messages'
 import { useEffect, useState } from 'react'
 
-import { allStatuses } from '../countScenariosByStatuses.js'
 import filterByStatus from '../filter/filterByStatus.js'
 import { createSearch, Searchable } from '../search/index.js'
+import statuses from '../statuses.js'
 import { useQueries } from './useQueries.js'
 import { useSearch } from './useSearch.js'
 
@@ -27,7 +27,7 @@ export function useFilteredDocuments(): GherkinDocument[] | undefined {
               document,
               gherkinQuery,
               cucumberQuery,
-              allStatuses.filter((s) => !hideStatuses.includes(s))
+              statuses.filter((s) => !hideStatuses.includes(s))
             )
           )
           .filter((document) => document !== null) as GherkinDocument[]
diff --git a/src/statuses.ts b/src/statuses.ts
new file mode 100644
index 00000000..63103f09
--- /dev/null
+++ b/src/statuses.ts
@@ -0,0 +1,12 @@
+import { TestStepResultStatus } from '@cucumber/messages'
+
+const statuses: ReadonlyArray<TestStepResultStatus> = [
+  TestStepResultStatus.UNKNOWN,
+  TestStepResultStatus.PASSED,
+  TestStepResultStatus.SKIPPED,
+  TestStepResultStatus.PENDING,
+  TestStepResultStatus.UNDEFINED,
+  TestStepResultStatus.AMBIGUOUS,
+  TestStepResultStatus.FAILED,
+]
+export default statuses
diff --git a/src/styles/statuses.scss b/src/styles/statuses.scss
new file mode 100644
index 00000000..d7c7b922
--- /dev/null
+++ b/src/styles/statuses.scss
@@ -0,0 +1,8 @@
+$statusColors:
+  'PASSED' #2cb14a,
+  'SKIPPED' #00a0cc,
+  'PENDING' #ffad33,
+  'UNDEFINED' #ffad33,
+  'AMBIGUOUS' #f4ebfd,
+  'FAILED' #bb0000,
+  'UNKNOWN' #b6becb;

From 7d09076066b29deec5176536a991cdfad59a651a Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Fri, 2 May 2025 09:41:42 +0100
Subject: [PATCH 2/5] bolster testing

---
 src/components/app/ExecutionSummary.spec.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/app/ExecutionSummary.spec.tsx b/src/components/app/ExecutionSummary.spec.tsx
index 15fbb8c3..1ce6783a 100644
--- a/src/components/app/ExecutionSummary.spec.tsx
+++ b/src/components/app/ExecutionSummary.spec.tsx
@@ -72,6 +72,16 @@ Runtime: node.js@16.13.1
 Platform: linux@5.11.0-1022-azure`)
     })
 
+    it('should include the pass rate', () => {
+      render(
+        <EnvelopesWrapper envelopes={envelopes}>
+          <ExecutionSummary />
+        </EnvelopesWrapper>
+      )
+
+      expect(screen.getByText('55.5% passed')).to.be.visible
+    })
+
     it('should include the job link', () => {
       render(
         <EnvelopesWrapper envelopes={envelopes}>

From f2d3b0f2e59e235d2d6712e849b2c404188aee6d Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Fri, 2 May 2025 17:47:28 +0100
Subject: [PATCH 3/5] bolster testing

---
 src/components/app/makeSetupString.spec.ts | 26 +++++++++++++---------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/app/makeSetupString.spec.ts b/src/components/app/makeSetupString.spec.ts
index d6216b50..b821cba8 100644
--- a/src/components/app/makeSetupString.spec.ts
+++ b/src/components/app/makeSetupString.spec.ts
@@ -10,16 +10,6 @@ describe('makeSetupString', () => {
       cpu: { name: 'x64' },
       os: { name: 'linux', version: '5.11.0-1022-azure' },
       runtime: { name: 'node.js', version: '16.13.1' },
-      ci: {
-        name: 'GitHub Actions',
-        url: 'https://github.com/cucumber/cucumber-js/actions/runs/1592557391',
-        buildNumber: '1592557391',
-        git: {
-          revision: 'b53d820504b31c8e4d44234dc5eaa58d6b7fdd4c',
-          remote: 'https://github.com/cucumber/cucumber-js.git',
-          branch: 'main',
-        },
-      },
     })
 
     expect(result).to.eq(
@@ -28,4 +18,20 @@ Runtime: node.js@16.13.1
 Platform: linux@5.11.0-1022-azure`
     )
   })
+
+  it('copes without versions', () => {
+    const result = makeSetupString({
+      protocolVersion: '17.1.1',
+      implementation: { name: 'cucumber-js' },
+      cpu: { name: 'x64' },
+      os: { name: 'linux' },
+      runtime: { name: 'node.js' },
+    })
+
+    expect(result).to.eq(
+      `Implementation: cucumber-js
+Runtime: node.js
+Platform: linux`
+    )
+  })
 })

From 727ef4db7a65c2574d369c512c02669d858a1d4e Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Fri, 2 May 2025 18:02:21 +0100
Subject: [PATCH 4/5] refactor function

---
 src/components/app/makeSetupString.ts | 28 ++++++++++++---------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/app/makeSetupString.ts b/src/components/app/makeSetupString.ts
index f7c65dc8..c336a0af 100644
--- a/src/components/app/makeSetupString.ts
+++ b/src/components/app/makeSetupString.ts
@@ -1,27 +1,23 @@
-import { Meta } from '@cucumber/messages'
+import { Meta, Product } from '@cucumber/messages'
 
 export function makeSetupString(meta: Meta): string {
   const parts = []
   if (meta.implementation) {
-    let implementation = `Implementation: ${meta.implementation.name}`
-    if (meta.implementation.version) {
-      implementation += `@${meta.implementation.version}`
-    }
-    parts.push(implementation)
+    parts.push(makeProductString(meta.implementation, 'Implementation'))
   }
   if (meta.runtime) {
-    let runtime = `Runtime: ${meta.runtime.name}`
-    if (meta.runtime.version) {
-      runtime += `@${meta.runtime.version}`
-    }
-    parts.push(runtime)
+    parts.push(makeProductString(meta.runtime, 'Runtime'))
   }
   if (meta.os) {
-    let os = `Platform: ${meta.os.name}`
-    if (meta.os.version) {
-      os += `@${meta.os.version}`
-    }
-    parts.push(os)
+    parts.push(makeProductString(meta.os, 'Platform'))
   }
   return parts.join('\n')
 }
+
+function makeProductString(product: Product, title: string): string {
+  let result = `${title}: ${product.name}`
+  if (product.version) {
+    result += `@${product.version}`
+  }
+  return result
+}

From 51d7ad019353c2ea3bb10515d1d99ce0df40b159 Mon Sep 17 00:00:00 2001
From: David Goss <david@davidgoss.co>
Date: Fri, 2 May 2025 18:05:15 +0100
Subject: [PATCH 5/5] update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fdec92e..30183fb7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 - Inherit font-size instead of setting at 14px ([#377](https://github.com/cucumber/react-components/pull/377))
+- Redesigned report header block ([#381](https://github.com/cucumber/react-components/pull/381))
 - BREAKING CHANGE: Remove props from `<StatusesSummary/>`, `<ExecutionSummary/>` and `<SearchBar/>` components, use contexts for state ([#374](https://github.com/cucumber/react-components/pull/374))
 
 ### Removed