From 0e239bf2108b6a80c0d4a5a4c017b77568101549 Mon Sep 17 00:00:00 2001
From: Dave Kasper <dave.m.kasper@gmail.com>
Date: Thu, 14 Sep 2023 16:35:12 -0500
Subject: [PATCH] feat(app): Update Runs page visuals to new layout and card
 design (#27770)

* basic card visuals, working on click

* visual tweaks and i18n

* match other i18n

* redo duration format, should make common too

* basic debug, needs validation of relevant run

* refactor and move files

* working top level state

* working grouping, needs subcomponent

* switch click target

* remove dayjs change

* fix current commit

* revise commit for message

* working view runs button

* fix type check

* fix tests

* fix integration tests

* remove old test

* add layout

* add component test for new layout and cleanup

* add count check

* standardize cy tags

* revise count test

* fix typos

* fix padding

* start wrapping

* happy wrap, next trunc

* responsive if wonky

* clean up and titles

* magic resize, needs tests per breakpoint

* standardize the rollup

* working default rollup

* rollup spacing tweaks

* center elements

* update tests for multiple viewports

* add missing breakpoint tests

* fix debug tests for status and badge

* remove unneeded check

* add functional component

* fix check_ts

* update container test

* add changelog

* add tooltip, needs aria label and external link update

* fix overflow

* fix avatar and add aria label to count summary

* change to external href

* remove popup sizing

* add tests

* add missing data cy

* fix runcard test

* Truncate result count

* make truncate style conditional

* match design truncate position

* adddress PR comments

* chore:updating styles (#27798)

* add tooltip content tests and skeletons

* clean up tooltip validation

* fix runs selector

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunsSkeleton.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunsSkeletonRow.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* Update packages/app/src/runs/RunTagCount.vue

Co-authored-by: Stokes Player <stokes@cypress.io>

* remove redundant shrink-1s

* more shrinks

---------

Co-authored-by: Stokes Player <stokes@cypress.io>
---
 cli/CHANGELOG.md                              |   8 +
 packages/app/cypress/e2e/debug.cy.ts          |   4 +-
 packages/app/cypress/e2e/runs.cy.ts           |  53 ++--
 packages/app/package.json                     |   2 +-
 packages/app/src/debug/DebugPageHeader.cy.tsx |   8 +-
 packages/app/src/debug/DebugPageHeader.vue    |  12 +-
 packages/app/src/debug/DebugResults.cy.tsx    |  51 ---
 packages/app/src/debug/DebugResults.vue       |  59 ----
 packages/app/src/debug/DebugRunNavigation.vue |  10 +-
 .../app/src/debug/DebugRunNavigationRow.vue   |  10 +-
 packages/app/src/debug/DebugRunNumber.cy.tsx  |  14 -
 packages/app/src/debug/DebugRunNumber.vue     |  45 ---
 packages/app/src/debug/StatsMetadata.vue      |   5 +-
 packages/app/src/pages/Runs.vue               |   9 +-
 packages/app/src/runs/RunCard.cy.tsx          | 194 ++++++++----
 packages/app/src/runs/RunCard.vue             | 290 +++++++++++++-----
 packages/app/src/runs/RunNumber.cy.tsx        |  34 ++
 packages/app/src/runs/RunNumber.vue           |  58 ++++
 packages/app/src/runs/RunResults.cy.tsx       |  57 +++-
 packages/app/src/runs/RunResults.vue          |  43 ++-
 packages/app/src/runs/RunTag.cy.tsx           |  37 +++
 packages/app/src/runs/RunTag.vue              |  34 ++
 packages/app/src/runs/RunTagCount.cy.tsx      |  81 +++++
 packages/app/src/runs/RunTagCount.vue         | 126 ++++++++
 packages/app/src/runs/RunsComposable.ts       |   2 +
 packages/app/src/runs/RunsContainer.cy.tsx    |   5 +-
 packages/app/src/runs/RunsContainer.vue       |  31 +-
 packages/app/src/runs/RunsLayout.cy.tsx       | 171 +++++++++++
 packages/app/src/runs/RunsLayout.vue          | 157 ++++++++++
 packages/app/src/runs/RunsSkeleton.cy.tsx     |  10 +-
 packages/app/src/runs/RunsSkeleton.vue        |  90 ++++--
 packages/app/src/runs/RunsSkeletonRow.cy.tsx  |   7 +
 packages/app/src/runs/RunsSkeletonRow.vue     |  39 +++
 packages/app/src/runs/useGitTreeRuns.ts       |  11 +
 packages/app/src/runs/useProjectRuns.ts       |   1 +
 .../src/sources/RelevantRunsDataSource.ts     |   2 +-
 .../src/components/ResultCounts.vue           |   1 +
 .../frontend-shared/src/locales/en-US.json    |  12 +
 packages/graphql/schemas/schema.graphql       |   2 +-
 .../schemaTypes/objectTypes/gql-Mutation.ts   |   5 +-
 yarn.lock                                     |  16 +-
 41 files changed, 1378 insertions(+), 428 deletions(-)
 delete mode 100644 packages/app/src/debug/DebugResults.cy.tsx
 delete mode 100644 packages/app/src/debug/DebugResults.vue
 delete mode 100644 packages/app/src/debug/DebugRunNumber.cy.tsx
 delete mode 100644 packages/app/src/debug/DebugRunNumber.vue
 create mode 100644 packages/app/src/runs/RunNumber.cy.tsx
 create mode 100644 packages/app/src/runs/RunNumber.vue
 create mode 100644 packages/app/src/runs/RunTag.cy.tsx
 create mode 100644 packages/app/src/runs/RunTag.vue
 create mode 100644 packages/app/src/runs/RunTagCount.cy.tsx
 create mode 100644 packages/app/src/runs/RunTagCount.vue
 create mode 100644 packages/app/src/runs/RunsLayout.cy.tsx
 create mode 100644 packages/app/src/runs/RunsLayout.vue
 create mode 100644 packages/app/src/runs/RunsSkeletonRow.cy.tsx
 create mode 100644 packages/app/src/runs/RunsSkeletonRow.vue

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index d413af3445ba..6418a505b6e8 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.3.0
+
+_Released 09/19/2023 (PENDING)_
+
+**Features:**
+
+ - Introduces new layout for Runs page providing additional run information. Addresses [#27203](https://github.com/cypress-io/cypress/issues/27203).
+
 ## 13.2.0
 
 _Released 09/12/2023_
diff --git a/packages/app/cypress/e2e/debug.cy.ts b/packages/app/cypress/e2e/debug.cy.ts
index a5252b99eb56..c2c39129028b 100644
--- a/packages/app/cypress/e2e/debug.cy.ts
+++ b/packages/app/cypress/e2e/debug.cy.ts
@@ -75,7 +75,7 @@ describe('App - Debug Page', () => {
     .contains('View in Cypress Cloud')
     .should('have.attr', 'href', 'https://cloud.cypress.io/projects/7p5uce/runs/2?utm_medium=Debug+Tab&utm_campaign=View+in+Cypress+Cloud&utm_source=Binary%3A+App')
 
-    cy.findByTestId('debug-runNumber-PASSED').contains('#2')
+    cy.findByTestId('runNumber-status-PASSED').contains('#2')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {
@@ -136,7 +136,7 @@ describe('App - Debug Page', () => {
 
     cy.findByLabelText('Relevant run had 1 test failure').should('be.visible').contains('1')
 
-    cy.findByTestId('debug-runNumber-FAILED').contains('#136')
+    cy.findByTestId('runNumber-status-FAILED').contains('#136')
     cy.findByTestId('debug-commitsAhead').contains('You are 1 commit ahead')
 
     cy.findByTestId('metadata').within(() => {
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index d89a684b872d..5e6efb766d58 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -60,7 +60,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
 
       cy.visitApp()
       cy.findByTestId('sidebar-link-runs-page').click()
-      cy.get('[data-cy="runs-loader"]')
+      cy.get('[data-cy*="runsSkeleton-"]')
       cy.get('[data-cy="runs"]')
     })
   })
@@ -103,7 +103,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.visitApp()
 
       moveToRunsPage()
-      cy.contains('a', 'OVERLIMIT').click()
+      cy.findByTestId('runNumber-status-OVERLIMIT').click()
 
       cy.withCtx((ctx, o) => {
         expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/4')
@@ -666,29 +666,25 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: make gql work CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/1"]').first().within(() => {
-          cy.findByText('fix: make gql work ERRORED')
-          cy.get('[data-cy="run-card-icon-ERRORED"]')
+        cy.get('[data-cy="runCard-status-ERRORED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-ERRORED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/2"]').first().within(() => {
-          cy.findByText('fix: make gql work FAILED')
-          cy.get('[data-cy="run-card-icon-FAILED"]')
+        cy.get('[data-cy="runCard-status-FAILED"]').first().within(() => {
+          cy.get('[data-cy="runNumber-status-FAILED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -702,7 +698,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -765,19 +761,18 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
         moveToRunsPage()
 
+        cy.findByText('fix: using Git data CANCELLED')
         cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().within(() => {
-          cy.findByText('fix: using Git data CANCELLED')
-          cy.get('[data-cy="run-card-icon-CANCELLED"]')
+          cy.get('[data-cy="runNumber-status-CANCELLED"]')
         })
 
-        cy.get('[href^="http://dummy.cypress.io/runs/0"]').first().as('firstRun')
+        cy.get('[data-cy="runCard-status-CANCELLED"]').first().as('firstRun')
 
         cy.get('@firstRun').within(() => {
-          cy.get('[data-cy="run-card-author"]').contains('John Appleseed')
-          cy.get('[data-cy="run-card-avatar"]')
-          cy.get('[data-cy="run-card-branch"]').contains('main')
-          cy.get('[data-cy="run-card-created-at"]').contains('an hour ago')
-          cy.get('[data-cy="run-card-duration"]').contains('01:00')
+          cy.get('[data-cy="runCard-author"]').contains('John Appleseed')
+          cy.get('[data-cy="runCard-avatar"]')
+          cy.get('[data-cy="runCard-branchName"]').contains('main')
+          cy.get('[data-cy="runCard-createdAt"]').contains('01m 00s (an hour ago)')
 
           cy.contains('span', 'skipped')
           cy.get('span').contains('pending')
@@ -791,7 +786,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         cy.visitApp()
 
         moveToRunsPage()
-        cy.get('[data-cy^="runCard-"]').first().click()
+        cy.get('[data-cy="runNumber-status-CANCELLED"]').first().click()
 
         cy.withCtx((ctx) => {
           expect((ctx.actions.electron.openExternal as SinonStub).lastCall.lastArg).to.contain('http://dummy.cypress.io/runs/0')
@@ -955,7 +950,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
     const itSkipIfWindows = Cypress.platform === 'win32' ? it.skip : it
 
     itSkipIfWindows('should re-query for executing runs', () => {
-      cy.get('[data-cy="run-card-icon-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
+      cy.get('[data-cy="runNumber-status-RUNNING"]').should('have.length', RUNNING_COUNT).should('be.visible')
 
       cy.remoteGraphQLIntercept(async (obj) => {
         await new Promise((resolve) => setTimeout(resolve, 100))
@@ -976,7 +971,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       })
 
       function completeNext (passed) {
-        cy.get('[data-cy="run-card-icon-PASSED"]').should('have.length', passed).should('be.visible')
+        cy.get('[data-cy="runNumber-status-PASSED"]').should('have.length', passed).should('be.visible')
         if (passed < RUNNING_COUNT) {
           completeNext(passed + 1)
         }
diff --git a/packages/app/package.json b/packages/app/package.json
index c4a45f225676..e2c9505defcf 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -21,7 +21,7 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-button": "^0.10.1",
-    "@cypress-design/vue-icon": "^0.25.0",
+    "@cypress-design/vue-icon": "^0.26.0",
     "@cypress-design/vue-statusicon": "^0.5.0",
     "@cypress-design/vue-tabs": "^0.5.1",
     "@graphql-typed-document-node/core": "^3.1.0",
diff --git a/packages/app/src/debug/DebugPageHeader.cy.tsx b/packages/app/src/debug/DebugPageHeader.cy.tsx
index 20a5b574ebb2..b5de9ddd2260 100644
--- a/packages/app/src/debug/DebugPageHeader.cy.tsx
+++ b/packages/app/src/debug/DebugPageHeader.cy.tsx
@@ -43,11 +43,11 @@ describe('<DebugPageHeader />', {
 
     cy.findByTestId('debug-results').should('be.visible')
 
-    cy.findByTestId('debug-runNumber-FAILED')
+    cy.findByTestId('runNumber-status-FAILED')
     .should('have.text', '#432')
     .children().should('have.length', 2)
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .should('not.exist')
 
     defaults.forEach((obj) => {
@@ -73,7 +73,7 @@ describe('<DebugPageHeader />', {
       },
     })
 
-    cy.findByTestId('debug-flaky-badge')
+    cy.findByTestId('runResults-flakyBadge')
     .contains(defaultMessages.specPage.flaky.badgeLabel)
 
     cy.findByTestId('total-flaky-tests')
@@ -97,7 +97,7 @@ describe('<DebugPageHeader />', {
         },
       })
 
-      cy.findByTestId(`debug-runNumber-${status}`).should('be.visible')
+      cy.findByTestId(`runNumber-status-${status}`).should('be.visible')
     })
   })
 
diff --git a/packages/app/src/debug/DebugPageHeader.vue b/packages/app/src/debug/DebugPageHeader.vue
index 020eaffac4be..ee5f734d598b 100644
--- a/packages/app/src/debug/DebugPageHeader.vue
+++ b/packages/app/src/debug/DebugPageHeader.vue
@@ -51,12 +51,12 @@
         <li
           class="flex flex-row text-sm gap-x-2 items-center justify-center"
         >
-          <DebugRunNumber
+          <RunNumber
             v-if="(debug.runNumber && debug.status)"
             :status="debug.status"
             :value="debug.runNumber"
           />
-          <DebugResults
+          <RunResults
             :gql="props.gql"
             data-cy="debug-results"
           />
@@ -92,7 +92,7 @@
           v-if="debug.createdAt"
           data-cy="debug-header-createdAt"
         >
-          <IconTimeStopwatch
+          <IconTimeClock
             size="16"
             class="mr-2"
             stroke-color="gray-500"
@@ -106,14 +106,14 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import DebugResults from './DebugResults.vue'
+import RunResults from '../runs/RunResults.vue'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
 import type { DebugPageHeaderFragment } from '../generated/graphql'
-import { IconTimeStopwatch } from '@cypress-design/vue-icon'
+import { IconTimeClock } from '@cypress-design/vue-icon'
 import CommitIcon from '~icons/cy/commit_x14'
 import { gql } from '@urql/core'
 import { useI18n } from 'vue-i18n'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
 import { useRunDateTimeInterval } from './useRunDateTimeInterval'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
diff --git a/packages/app/src/debug/DebugResults.cy.tsx b/packages/app/src/debug/DebugResults.cy.tsx
deleted file mode 100644
index 70b0ee565706..000000000000
--- a/packages/app/src/debug/DebugResults.cy.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import DebugResults from './DebugResults.vue'
-import { DebugResultsFragmentDoc } from '../generated/graphql-test'
-import { defaultMessages } from '@cy/i18n'
-import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
-
-describe('<DebugResults />', () => {
-  it('shows the failed icon and the number of passed, skipped, pending, failed tests passed through gql props', () => {
-    const cloudRuns = Object.values(CloudRunStubs)
-
-    cy.mount(() => cloudRuns.map((cloudRun, i) => (<DebugResults data-cy={`run-result-${i}`} gql={cloudRun} />)))
-
-    cloudRuns.forEach((cloudRun, i) => {
-      cy.findByTestId(`run-result-${i}`).within(() => {
-        cy.get(`[title=${defaultMessages.runs.results.passed}]`).should('contain.text', cloudRun.totalPassed)
-        cy.get(`[title=${defaultMessages.runs.results.failed}]`).should('contain.text', cloudRun.totalFailed)
-        cy.get(`[title=${defaultMessages.runs.results.skipped}]`).should('contain.text', cloudRun.totalSkipped)
-        cy.get(`[title=${defaultMessages.runs.results.pending}]`).should('contain.text', cloudRun.totalPending)
-      })
-    })
-  })
-})
-
-describe('Flaky badge tests', () => {
-  const mountingFragment = (flakyTests: number) => {
-    return (
-      cy.mountFragment(DebugResultsFragmentDoc, {
-        onResult (result) {
-          if (result) {
-            result.totalFlakyTests = flakyTests
-          }
-        },
-        render: (gqlVal) => {
-          return (
-            <DebugResults gql={gqlVal} />
-          )
-        },
-      })
-    )
-  }
-
-  it('does not show flaky component when flakyTests are < 1', () => {
-    mountingFragment(0)
-    cy.contains('Flaky').should('not.exist')
-  })
-
-  it('contains flaky badge', () => {
-    mountingFragment(4)
-    cy.findByTestId('debug-flaky-badge').contains(defaultMessages.specPage.flaky.badgeLabel)
-    cy.findByTestId('total-flaky-tests').contains(4)
-  })
-})
diff --git a/packages/app/src/debug/DebugResults.vue b/packages/app/src/debug/DebugResults.vue
deleted file mode 100644
index 0d4b2ea042c3..000000000000
--- a/packages/app/src/debug/DebugResults.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div
-    class="flex gap-[8px] items-center bg-transparent"
-    data-cy="debug-results-holder"
-  >
-    <ResultCounts
-      :total-passed="results.totalPassed"
-      :total-failed="results.totalFailed"
-      :total-skipped="results.totalSkipped"
-      :total-pending="results.totalPending"
-      :order="['PASSED', 'FAILED', 'SKIPPED', 'PENDING']"
-    />
-    <div
-      v-if="results?.totalFlakyTests"
-      data-cy="debug-flaky-badge"
-      class="border rounded flex flex-row gap-[8px] items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1 border"
-    >
-      <span
-        data-cy="total-flaky-tests"
-        class="font-medium pr-1 opacity-70"
-      >
-        {{ results.totalFlakyTests }}
-      </span>
-      <div class="w-px my-[6px] h-6 border-orange-200 border" />
-      <span class="font-semibold pl-1">
-        {{ t('specPage.flaky.badgeLabel') }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { DebugResultsFragment } from '../generated/graphql'
-import { gql } from '@urql/core'
-import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
-import { useI18n } from '@cy/i18n'
-
-const { t } = useI18n()
-
-gql`
-fragment DebugResults on CloudRun {
-  id
-  totalPassed
-  totalFailed
-  totalPending
-  totalSkipped
-  totalFlakyTests
-}
-`
-
-const props = defineProps<{
-  gql: DebugResultsFragment
-}>()
-
-const results = computed(() => {
-  return props.gql
-})
-</script>
diff --git a/packages/app/src/debug/DebugRunNavigation.vue b/packages/app/src/debug/DebugRunNavigation.vue
index ff2a1c4a260f..7bd9be4e92d2 100644
--- a/packages/app/src/debug/DebugRunNavigation.vue
+++ b/packages/app/src/debug/DebugRunNavigation.vue
@@ -38,12 +38,12 @@
           </LightText>
 
           <template v-else-if="latest?.status && latest.runNumber">
-            <DebugRunNumber
+            <RunNumber
               :status="latest.status"
               :value="latest.runNumber"
               class="mx-[8px]"
             />
-            <DebugResults
+            <RunResults
               v-if="latest"
               :gql="latest"
               class="bg-white mr-[12px]"
@@ -135,8 +135,8 @@ import Button from '@packages/frontend-shared/src/components/Button.vue'
 import { compact, groupBy } from 'lodash'
 import { computed, FunctionalComponent, h } from 'vue'
 import { DebugRunNavigationFragment, DebugRunNavigationRunInfoFragment, DebugRunNavigation_MoveToRunDocument } from '../generated/graphql'
-import DebugResults from './DebugResults.vue'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunResults from '../runs/RunResults.vue'
+import RunNumber from '../runs/RunNumber.vue'
 import DebugCommitIcon from './DebugCommitIcon.vue'
 import DebugRunNavigationLimitMessage from './DebugRunNavigationLimitMessage.vue'
 import { IconChevronRightSmall } from '@cypress-design/vue-icon'
@@ -149,7 +149,7 @@ const { t } = useI18n()
 
 gql`
 fragment DebugRunNavigationRunInfo on CloudRun {
-  ...DebugResults
+  ...RunResults
   ...DebugProgress_DebugTests
   __typename
   runNumber
diff --git a/packages/app/src/debug/DebugRunNavigationRow.vue b/packages/app/src/debug/DebugRunNavigationRow.vue
index aa8e5490527f..f5efed254b03 100644
--- a/packages/app/src/debug/DebugRunNavigationRow.vue
+++ b/packages/app/src/debug/DebugRunNavigationRow.vue
@@ -20,13 +20,13 @@
         class="flex items-center justify-between w-full"
       >
         <div class="flex items-center min-w-0">
-          <DebugRunNumber
+          <RunNumber
             v-if="props.gql.status && props.gql.runNumber"
             :status="props.gql.status"
             :value="props.gql.runNumber"
             class="mr-[8px]"
           />
-          <DebugResults
+          <RunResults
             v-if="props.gql"
             :gql="props.gql"
           />
@@ -46,11 +46,11 @@
 
 <script lang="ts" setup>
 import { gql } from '@urql/vue'
-import DebugRunNumber from './DebugRunNumber.vue'
+import RunNumber from '../runs/RunNumber.vue'
+import RunResults from '../runs/RunResults.vue'
 import DebugCurrentRunIcon from './DebugCurrentRunIcon.vue'
 import type { DebugProgress_DebugTestsFragment } from '../generated/graphql'
 import { computed, FunctionalComponent, h } from 'vue'
-import DebugResults from './DebugResults.vue'
 import { useDebugRunSummary } from './useDebugRunSummary'
 import { useRunDateTimeInterval } from './useRunDateTimeInterval'
 import { useI18n } from '@cy/i18n'
@@ -75,7 +75,7 @@ fragment DebugProgress_DebugTests on CloudRun {
   status
   completedInstanceCount
   totalInstanceCount
-  ...DebugResults
+  ...RunResults
 }`
 
 const Dot: FunctionalComponent = () => {
diff --git a/packages/app/src/debug/DebugRunNumber.cy.tsx b/packages/app/src/debug/DebugRunNumber.cy.tsx
deleted file mode 100644
index 8cdbb0d1a18f..000000000000
--- a/packages/app/src/debug/DebugRunNumber.cy.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { CloudRunStatus } from '../generated/graphql-test'
-import DebugRunNumber from './DebugRunNumber.vue'
-
-const STATUSES: CloudRunStatus[] = ['PASSED', 'FAILED', 'CANCELLED', 'RUNNING', 'ERRORED']
-
-describe('<DebugRunNumber />', () => {
-  describe('playground', () => {
-    STATUSES.forEach((status) => {
-      it(`status = '${status}'`, () => {
-        cy.mount(<DebugRunNumber status={status} value={123} />)
-      })
-    })
-  })
-})
diff --git a/packages/app/src/debug/DebugRunNumber.vue b/packages/app/src/debug/DebugRunNumber.vue
deleted file mode 100644
index eda2561aab9c..000000000000
--- a/packages/app/src/debug/DebugRunNumber.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div
-    class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 text-sm px-2 gap-x-1 items-center justify-center"
-    :data-cy="`debug-runNumber-${props.status}`"
-  >
-    <SolidStatusIcon
-      size="16"
-      :status="ICON_MAP[props.status].type"
-    />
-    <span :class="runNumberColor">
-      {{ `#${props.value}` }}
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { CloudRunStatus } from '../generated/graphql'
-import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
-
-const props = defineProps<{
-  status: CloudRunStatus
-  value: number
-}>()
-
-const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType }> = {
-  PASSED: { textColor: 'text-jade-400', type: 'passed' },
-  FAILED: { textColor: 'text-red-400', type: 'failed' },
-  CANCELLED: { textColor: 'text-gray-500', type: 'cancelled' },
-  ERRORED: { textColor: 'text-orange-400', type: 'errored' },
-  RUNNING: { textColor: 'text-indigo-500', type: 'running' },
-  NOTESTS: { textColor: 'text-indigo-500', type: 'noTests' },
-  OVERLIMIT: { textColor: 'text-indigo-500', type: 'overLimit' },
-  TIMEDOUT: { textColor: 'text-indigo-500', type: 'timedOut' },
-} as const
-
-const runNumberColor = computed(() => {
-  if (props.status) {
-    return ICON_MAP[props.status].textColor
-  }
-
-  return ''
-})
-
-</script>
diff --git a/packages/app/src/debug/StatsMetadata.vue b/packages/app/src/debug/StatsMetadata.vue
index 2692c056cfdf..c61edb1db0be 100644
--- a/packages/app/src/debug/StatsMetadata.vue
+++ b/packages/app/src/debug/StatsMetadata.vue
@@ -49,7 +49,8 @@ import { computed } from 'vue'
 import { useI18n } from '@cy/i18n'
 import type { SpecDataAggregate } from '@packages/data-context/src/gen/graphcache-config.gen'
 import type { TestingTypeEnum, StatsMetadata_GroupsFragment } from '../generated/graphql'
-import { IconTimeStopwatch,
+import {
+  IconTimeClock,
   IconOsLinux,
   IconOsApple,
   IconOsGeneric,
@@ -154,7 +155,7 @@ const ORDER_MAP = computed<Record<StatType, Metadata>>(() => {
   return {
     'DURATION': {
       value: props.specDuration,
-      icon: IconTimeStopwatch,
+      icon: IconTimeClock,
       name: 'spec-duration',
     },
     'OS': {
diff --git a/packages/app/src/pages/Runs.vue b/packages/app/src/pages/Runs.vue
index 6edb245b75d7..d36419918dbb 100644
--- a/packages/app/src/pages/Runs.vue
+++ b/packages/app/src/pages/Runs.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="h-full p-[24px] relative">
     <TransitionQuickFade mode="out-in">
-      <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
+      <RunsSkeleton
+        v-if="query.fetching.value || !query.data.value"
+        :is-using-git="isUsingGit"
+      />
       <RunsContainer
         v-else
         :gql="query.data.value"
         :runs="runs"
         :online="isOnlineRef"
         data-cy="runs-container"
+        :all-run-ids="allRunIds"
+        :current-commit-info="currentCommitInfo"
         @re-execute-runs-query="reExecuteRunsQuery"
       />
     </TransitionQuickFade>
@@ -38,7 +43,7 @@ if (isUsingGit) {
   runComposable = useProjectRuns
 }
 
-const { runs, reExecuteRunsQuery, query } = runComposable(isOnlineRef)
+const { runs, reExecuteRunsQuery, query, allRunIds, currentCommitInfo } = runComposable(isOnlineRef)
 
 watchEffect(() => {
   // We want to keep track of the previous state to refetch the query
diff --git a/packages/app/src/runs/RunCard.cy.tsx b/packages/app/src/runs/RunCard.cy.tsx
index 0b1a8f46f81e..530932b51e20 100644
--- a/packages/app/src/runs/RunCard.cy.tsx
+++ b/packages/app/src/runs/RunCard.cy.tsx
@@ -1,6 +1,7 @@
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
 import { RunCardFragmentDoc } from '../generated/graphql-test'
 import RunCard from './RunCard.vue'
+import _ from 'lodash'
 
 const SECOND = 1000
 const MINUTE = 60 * SECOND
@@ -9,43 +10,87 @@ const HOUR = 60 * MINUTE
 const generateTags = (num): any => new Array(num).fill(null).map((_, i) => ({ id: `${i}`, name: `tag${i}`, __typename: 'CloudRunTag' }))
 
 describe('<RunCard />', { viewportHeight: 400 }, () => {
-  it('renders with all run information', () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.tags = generateTags(3)
-        result.totalFlakyTests = 1
-      },
-      render: (gqlVal) => {
-        return (
-          <div class="h-screen bg-gray-100 p-3">
-            <RunCard gql={gqlVal} />
-          </div>
-        )
-      },
-    })
+  context('when there is all run information', () => {
+    [1600, 1536, 1280, 1024, 768, 600].forEach((viewportWidth) => {
+      it(`renders at viewport - ${viewportWidth}`, { viewportWidth }, () => {
+        cy.mountFragment(RunCardFragmentDoc, {
+          onResult (result) {
+            result.tags = generateTags(3)
+            result.totalFlakyTests = 1
+          },
+          render: (gqlVal) => {
+            const withLongBranchName = _.cloneDeep(gqlVal)
 
-    cy.percySnapshot()
-  })
+            if (withLongBranchName.commitInfo) {
+              withLongBranchName.commitInfo.branch = 'user/this-is-a-really-long-branch-name-that-should-truncate'
+            }
 
-  it('renders with all run information on small viewport', { viewportWidth: 600 }, () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.tags = [1, 2, 3].map((i) => ({ id: `${i}`, name: `tag${i}`, __typename: 'CloudRunTag' }))
-        result.totalFlakyTests = 1
-      },
-      render: (gqlVal) => {
-        return (
-          <div class="h-screen bg-gray-100 p-3">
-            <RunCard gql={gqlVal} />
-          </div>
-        )
-      },
-    })
+            return (
+              //left margins mimic the app sidebar
+              //min width mimics the overall grid layout
+              <div class="p-3 ml-[64px] lg:ml-[248px] min-w-[728px]">
+                <RunCard gql={gqlVal} showDebug debugEnabled />
+                <RunCard gql={gqlVal} showDebug />
+                <RunCard gql={gqlVal} />
+                <RunCard gql={withLongBranchName} showDebug debugEnabled />
+              </div>
+            )
+          },
+        })
+
+        let countTagIndex = 0
+
+        switch (viewportWidth) {
+          case 600:
+          case 768:
+          case 1024:
+            countTagIndex = 2
+            break
+          case 1280:
+            countTagIndex = 1
+            break
+          default:
+            break
+        }
+
+        cy.get('[data-cy="runTagCount"]').eq(countTagIndex).realHover()
 
-    cy.percySnapshot()
+        if (countTagIndex === 0) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('not.contain', 'Flaky')
+          .and('not.contain', 'main')
+          .and('not.contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        if (countTagIndex === 1) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('not.contain', 'Flaky')
+          .and('not.contain', 'main')
+          .and('contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        if (countTagIndex === 2) {
+          cy.get('[data-cy="runTagCount-tooltip"]')
+          .should('be.visible')
+          .and('contain', 'Flaky')
+          .and('contain', 'main')
+          .and('contain', 'tag0')
+          .and('contain', 'tag1')
+          .and('contain', 'tag2')
+        }
+
+        cy.percySnapshot()
+      })
+    })
   })
 
-  context('when there is full commit info', () => {
+  context('when there is full commit info', { viewportWidth: 1536 }, () => {
     it('displays last commit info', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
@@ -55,7 +100,7 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -69,15 +114,12 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       cy.contains(CloudRunStubs.allPassing.commitInfo.authorName as string)
       .should('be.visible')
 
-      cy.contains(CloudRunStubs.allPassing.commitInfo.summary as string)
-      .should('be.visible')
-
       cy.contains(CloudRunStubs.allPassing.commitInfo.branch as string)
       .should('be.visible')
     })
   })
 
-  context('when there is missing commit info', () => {
+  context('when there is missing commit info', { viewportWidth: 1536 }, () => {
     it('renders without errors', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
@@ -89,7 +131,7 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -98,18 +140,20 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
 
       // this is the human readable commit time from the stub
       cy.contains('an hour ago').should('be.visible')
+      cy.findByTestId('runCard-avatar').should('not.exist')
+      cy.findByTestId('runCard-branchName').should('not.exist')
     })
   })
 
   context('run timing', () => {
-    it('displays HH:mm:ss format for run duration', () => {
+    it('displays  HH[h] mm[m] ss[s] format for run duration', { viewportWidth: 1536 }, () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.totalDuration = HOUR + MINUTE + SECOND
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -117,17 +161,17 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       })
 
       // this is the human readable commit time from the stub
-      cy.contains('01:01:01').should('be.visible')
+      cy.contains('01h 01m 01s').should('be.visible')
     })
 
-    it('displays mm:ss format for run duration if duration is less than an hour', () => {
+    it('displays mm[m] ss[s] format for run duration if duration is less than an hour', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.totalDuration = MINUTE + SECOND
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
@@ -135,43 +179,89 @@ describe('<RunCard />', { viewportHeight: 400 }, () => {
       })
 
       // this is the human readable commit time from the stub
-      cy.contains('01:01').should('be.visible')
+      cy.contains('01m 01s').should('be.visible')
     })
   })
 
-  context('tags', () => {
-    it('renders all tags if >= 2', () => {
+  context('tags', { viewportWidth: 1536 }, () => {
+    it('renders all tags if >= 1 with commitInfo', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
-          result.tags = generateTags(2)
+          result.tags = generateTags(1)
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
         },
       })
 
-      cy.get('[data-cy="run-tag"]').should('have.length', 2).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+      cy.get('[data-cy="runCard-branchName"]').should('be.visible')
+      cy.get('[data-cy="runTagCount"]').should('not.be.visible')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => {
+        cy.wrap($el).contains(`tag${i}`)
+      })
     })
 
-    it('truncates tags if > 2', () => {
+    it('truncates tags if > 1  with commitInfo', () => {
       cy.mountFragment(RunCardFragmentDoc, {
         onResult (result) {
           result.tags = generateTags(6)
         },
         render: (gqlVal) => {
           return (
-            <div class="h-screen bg-gray-100 p-3">
+            <div class="p-3">
+              <RunCard gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.get('[data-cy="runCard-branchName"]').should('be.visible')
+      cy.get('[data-cy="runTagCount"]').should('be.visible').contains('+5')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+    })
+
+    it('renders all tags if >= 1', () => {
+      cy.mountFragment(RunCardFragmentDoc, {
+        onResult (result) {
+          result.tags = generateTags(1)
+
+          result.commitInfo = null
+        },
+        render: (gqlVal) => {
+          return (
+            <div class="p-3">
+              <RunCard gql={gqlVal} />
+            </div>
+          )
+        },
+      })
+
+      cy.get('[data-cy="runTagCount"]').should('not.be.visible')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
+    })
+
+    it('truncates tags if > 1', () => {
+      cy.mountFragment(RunCardFragmentDoc, {
+        onResult (result) {
+          result.tags = generateTags(6)
+
+          result.commitInfo = null
+        },
+        render: (gqlVal) => {
+          return (
+            <div class="p-3">
               <RunCard gql={gqlVal} />
             </div>
           )
         },
       })
 
-      cy.get('[data-cy="run-tag"]').should('have.length', 3).last().contains('+4')
+      cy.get('[data-cy="runTagCount"]').should('be.visible').contains('+5')
+      cy.get('[data-cy="runTag"]').should('have.length', 1).each(($el, i) => cy.wrap($el).contains(`tag${i}`))
     })
   })
 })
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index 177f015d8b5c..a40a19a72a88 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -1,83 +1,165 @@
 <template>
-  <ExternalLink
+  <div
     :data-cy="`runCard-${run.id}`"
-    class="border rounded bg-light-50 border-gray-100 w-full block overflow-hidden hocus-default"
-    :href="runUrl"
-    :use-default-hocus="false"
   >
-    <ListRowHeader
-      :data-cy="`run-card-icon-${run.status}`"
+    <div
+      class="flex justify-between p-[16px] gap-[8px] text-sm text-gray-700 items-center"
+      :data-cy="`runCard-status-${run.status}`"
     >
-      <template #icon>
-        <SolidStatusIcon
-          size="24"
-          :status="STATUS_MAP[run.status!]"
-        />
-      </template>
-      <template #header>
-        <span class="font-semibold mr-[8px] whitespace-pre-wrap">{{ run.commitInfo?.summary }}</span>
-        <span
-          v-for="tag in tags"
-          :key="tag"
-          class="rounded-md font-semibold border-gray-200 border-[1px] text-xs mr-[8px] px-[4px] text-gray-700"
-          data-cy="run-tag"
-        >{{ tag }}</span>
-      </template>
-      <template #description>
-        <ul class="flex flex-wrap text-sm text-gray-700 gap-[8px] items-center whitespace-nowrap children:flex children:items-center">
-          <li
-            v-if="run.commitInfo?.authorName"
-            data-cy="run-card-author"
+      <div
+        class="flex items-center gap-[8px] min-w-0"
+      >
+        <div>
+          <ExternalLink
+            :data-cy="`runNumberLink-${run.id}`"
+            class="group focus-visible:outline-none hover:underline-transparent"
+            :href="runUrl"
+            :use-default-hocus="false"
           >
-            <i-cy-general-user_x16
-              class="mr-1 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
-              data-cy="run-card-avatar"
+            <RunNumber
+              v-if="props.gql.status && props.gql.runNumber"
+              :status="props.gql.status"
+              :value="props.gql.runNumber"
+              :is-actionable="true"
             />
-            <span class="sr-only">Commit Author:</span>{{ run.commitInfo.authorName }}
-          </li>
-
-          <li
+          </ExternalLink>
+        </div>
+        <div
+          class="flex gap-[8px] min-w-0"
+        >
+          <RunResults
+            :gql="props.gql"
+            :use-breakpoint-display="true"
+          />
+          <RunTag
             v-if="run.commitInfo?.branch"
-            data-cy="run-card-branch"
-          >
-            <i-cy-tech-branch-h_x16 class="mr-1 icon-dark-gray-300" />
-            <span class="sr-only">Branch Name:</span>{{ run.commitInfo.branch }}
-          </li>
-
+            :label="run.commitInfo?.branch"
+            :title="run.commitInfo?.branch"
+            :icon="IconTechnologyBranchH"
+            :icon-label="t('runs.card.branchName')"
+            class="hidden xl:inline-flex min-w-0"
+            data-cy="runCard-branchName"
+          />
+          <RunTag
+            v-for="tag in tagData?.tags"
+            :key="tag"
+            :label="tag"
+            :title="tag"
+            class="hidden 2xl:inline-flex max-w-[100px]"
+          />
+          <RunTagCount
+            v-for="tagCount in tagData?.tagCounts"
+            :key="tagCount.value"
+            :value="tagCount.value"
+            :class="tagCount.class"
+            :tooltip-data="{
+              flaky: tagCount.flaky,
+              branchName: tagCount.branchName,
+              tags: tagCount.tags,
+            }"
+          />
+        </div>
+      </div>
+      <div
+        class="flex gap-[16px] items-center"
+      >
+        <ul
+          class="flex gap-2 2xl:gap-4 w-[80px] lg:w-auto lg:max-w-[160px] 2xl:max-w-none justify-end text-sm text-gray-700 items-center whitespace-nowrap children:flex children:items-center"
+        >
           <li
-            v-if="run.createdAt"
-            data-cy="run-card-created-at"
+            v-if="run.commitInfo?.authorName"
+            data-cy="runCard-author"
+            class="gap-2 shrink-0 xl:max-w-[160px] overflow-hidden"
+            :title="run.commitInfo.authorName"
           >
-            <span class="sr-only">Run Created At:</span>{{ relativeCreatedAt }}
+            <UserAvatar
+              aria-hidden="true"
+              data-cy="runCard-avatar"
+              class="h-[16px] w-[16px] shrink-0 icon-dark-gray-500 icon-light-gray-100 icon-secondary-light-gray-200"
+              :email="run.commitInfo?.authorEmail"
+            />
+            <span class="sr-only">{{ t('runs.card.commitAuthor') }}</span>
+            <div
+              class="hidden 2xl:block truncate"
+              role="none"
+            >
+              {{ run.commitInfo.authorName }}
+            </div>
           </li>
-
           <li
-            v-if="run.totalDuration"
-            data-cy="run-card-duration"
+            v-if="run.createdAt"
+            data-cy="runCard-createdAt"
+            class="gap-2 2xl:w-[200px] overflow-hidden"
+            :title="`${totalDuration} ${relativeCreatedAt}`"
           >
-            <span class="sr-only">Run Total Duration:</span>{{ totalDuration }}
+            <IconTimeClock
+              size="16"
+              class="hidden 2xl:inline-block shrink-0"
+              stroke-color="gray-500"
+              fill-color="gray-50"
+              aria-hidden="true"
+            />
+            <span class="sr-only">{{ t('runs.card.totalDuration') }}</span>
+            <div
+              class="truncate"
+              role="none"
+            >
+              {{ totalDuration }} ({{ relativeCreatedAt }})
+            </div>
           </li>
         </ul>
-      </template>
-      <template #middle>
-        <RunResults :gql="props.gql" />
-      </template>
-    </ListRowHeader>
-  </ExternalLink>
+        <Tooltip
+          v-if="props.showDebug && run.runNumber"
+          tab-index="0"
+          :disabled="props.debugEnabled"
+          placement="bottom"
+        >
+          <Button
+            data-cy="open-debug"
+            variant="outline-light"
+            :disabled="!props.debugEnabled"
+            size="24"
+            :aria-label="t(props.debugEnabled ? 'runs.card.debugDescription' : 'runs.card.noDebugAvailable', { runNumber: run.runNumber })"
+            @click="onDebugClick"
+          >
+            <IconTechnologyDebugger
+              aria-hidden="true"
+              class="h-[16px] w-[16px] mr-2 shrink-0"
+            />
+            {{ t('runs.card.debugLabel') }}
+          </Button>
+          <template #popper>
+            <div
+              class="max-w-full break-words whitespace-normal"
+            >
+              {{ t('runs.card.noDebugAvailable') }}
+            </div>
+          </template>
+        </Tooltip>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import ListRowHeader from '@cy/components/ListRowHeader.vue'
+import { useI18n } from '@cy/i18n'
 import ExternalLink from '@cy/gql-components/ExternalLink.vue'
-import { gql, useSubscription } from '@urql/vue'
+import { gql, useSubscription, useMutation } from '@urql/vue'
+import RunTag from './RunTag.vue'
+import RunTagCount from './RunTagCount.vue'
 import RunResults from './RunResults.vue'
-import { CloudRunStatus, RunCardFragment, RunCard_ChangeDocument } from '../generated/graphql'
-import { dayjs } from './utils/day.js'
-import { useDurationFormat } from '../composables/useDurationFormat'
-import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
+import RunNumber from './RunNumber.vue'
+import Button from '@cypress-design/vue-button'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import UserAvatar from '@cy/gql-components/topnav/UserAvatar.vue'
+import { RunCardFragment, RunCard_ChangeDocument, RunCard_ShowDebugForCloudRunDocument } from '../generated/graphql'
+import { useRunDateTimeInterval } from '../debug/useRunDateTimeInterval'
+import { IconTechnologyDebugger, IconTimeClock, IconTechnologyBranchH } from '@cypress-design/vue-icon'
 import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
 
+const { t } = useI18n()
+
 gql`
 fragment RunCard on CloudRun {
 	id
@@ -85,6 +167,7 @@ fragment RunCard on CloudRun {
 	status
   totalDuration
   url
+  runNumber
   tags {
     id
     name
@@ -95,6 +178,7 @@ fragment RunCard on CloudRun {
 		authorEmail
 		summary
 		branch
+		sha
 	}
 }
 `
@@ -108,19 +192,16 @@ subscription RunCard_Change($id: ID!) {
 }
 `
 
-const STATUS_MAP: Record<CloudRunStatus, StatusType> = {
-  PASSED: 'passed',
-  FAILED: 'failed',
-  CANCELLED: 'cancelled',
-  ERRORED: 'errored',
-  RUNNING: 'running',
-  NOTESTS: 'noTests',
-  OVERLIMIT: 'overLimit',
-  TIMEDOUT: 'timedOut',
-} as const
+gql`
+mutation RunCard_showDebugForCloudRun($runNumber: Int!) {
+  showDebugForCloudRun(runNumber: $runNumber)
+}
+`
 
 const props = defineProps<{
   gql: RunCardFragment
+  showDebug?: boolean
+  debugEnabled?: boolean
 }>()
 
 const run = computed(() => props.gql)
@@ -147,21 +228,72 @@ const runUrl = computed(() => {
   })
 })
 
-const relativeCreatedAt = computed(() => dayjs(new Date(run.value.createdAt!)).fromNow())
+const { relativeCreatedAt, totalDuration } = useRunDateTimeInterval(run)
 
-const totalDuration = useDurationFormat(run.value.totalDuration ?? 0)
+const showDebugForCloudRun = useMutation(RunCard_ShowDebugForCloudRunDocument)
 
-const tags = computed(() => {
-  const tags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]
+async function showDebugForRun () {
+  if (run.value.runNumber) {
+    await showDebugForCloudRun.executeMutation({ runNumber: run.value.runNumber })
+  }
+}
 
-  return tags.length <= 2 ? tags : tags.slice(0, 2).concat(`+${tags.length - 2}`)
+const tagData = computed(() => {
+  const tempTags = (props.gql.tags ?? []).map((tag) => tag?.name).filter(Boolean) as string[]
+
+  const baseCount = 1
+  const branchCount = run.value.commitInfo?.branch ? 1 : 0
+  const flakyCount = (run.value.totalFlakyTests || 0) > 0 ? 1 : 0
+  const tagCount = tempTags.length > 0 ? 1 : 0
+  const initialCount = tempTags.length > 0 ? tempTags.length - baseCount : 0
+  const secondCount = initialCount + tagCount
+  const thirdCount = initialCount + tagCount + branchCount + flakyCount
+
+  const tagCounts: {
+    value: number
+    flaky?: number
+    branchName?: string
+    tags?: string[]
+    class: string
+  }[] = []
+
+  // initial display
+  if (initialCount > 0) {
+    tagCounts.push({
+      value: initialCount,
+      tags: tempTags.slice(baseCount, tempTags.length),
+      class: 'hidden 2xl:inline-flex',
+    })
+  }
+
+  // first collapse
+  if (secondCount > 0) {
+    tagCounts.push({
+      value: initialCount + tagCount,
+      tags: tempTags,
+      class: 'hidden xl:inline-flex 2xl:hidden',
+    })
+  }
+
+  // second collapse
+  if (thirdCount > 0) {
+    tagCounts.push({
+      value: thirdCount,
+      branchName: run.value.commitInfo?.branch ?? undefined,
+      flaky: run.value.totalFlakyTests ?? undefined,
+      tags: tempTags,
+      class: 'inline-flex xl:hidden',
+    })
+  }
+
+  return { tags: tempTags.slice(0, baseCount), tagCounts }
 })
 
-</script>
+const onDebugClick = (event) => {
+  event.preventDefault()
+  event.stopPropagation()
 
-<style scoped>
-li:not(:first-child)::before {
-  content: '•';
-  @apply text-lg text-gray-400 pr-[8px]
+  showDebugForRun()
 }
-</style>
+
+</script>
diff --git a/packages/app/src/runs/RunNumber.cy.tsx b/packages/app/src/runs/RunNumber.cy.tsx
new file mode 100644
index 000000000000..54a4b2d58201
--- /dev/null
+++ b/packages/app/src/runs/RunNumber.cy.tsx
@@ -0,0 +1,34 @@
+import type { CloudRunStatus } from '../generated/graphql-test'
+import RunNumber from './RunNumber.vue'
+
+const STATUSES: CloudRunStatus[] = ['PASSED', 'FAILED', 'CANCELLED', 'RUNNING', 'ERRORED']
+
+describe('<RunNumber />', () => {
+  describe('playground', () => {
+    STATUSES.forEach((status) => {
+      it(`status = '${status}'`, () => {
+        cy.mount(() => (
+          <div class="flex m-2">
+            <RunNumber status={status} value={123} />
+          </div>
+        ))
+
+        cy.findByTestId(`runNumber-status-${status}`).should('be.visible').should('not.have.class', 'group-focus-visible:outline')
+      })
+    })
+  })
+
+  describe('with hover', () => {
+    STATUSES.forEach((status) => {
+      it(`status = '${status}'`, () => {
+        cy.mount(() => (
+          <div class="flex m-2 group">
+            <RunNumber status={status} value={123} is-actionable={true} />
+          </div>
+        ))
+
+        cy.findByTestId(`runNumber-status-${status}`).should('be.visible').should('have.class', 'group-focus-visible:outline')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/runs/RunNumber.vue b/packages/app/src/runs/RunNumber.vue
new file mode 100644
index 000000000000..7705618c03ef
--- /dev/null
+++ b/packages/app/src/runs/RunNumber.vue
@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="border rounded flex flex-row font-semibold bg-gray-50 border-gray-200 h-6 text-sm px-2 gap-x-1 items-center justify-center"
+    :class="hocusStyles"
+    :data-cy="`runNumber-status-${props.status}`"
+  >
+    <SolidStatusIcon
+      size="16"
+      :status="ICON_MAP[props.status].type"
+    />
+    <span :class="runNumberColor">
+      {{ `#${props.value}` }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CloudRunStatus } from '../generated/graphql'
+import { SolidStatusIcon, StatusType } from '@cypress-design/vue-statusicon'
+
+const props = defineProps<{
+  status: CloudRunStatus
+  value: number
+  isActionable?: boolean
+}>()
+
+const ICON_MAP: Record<CloudRunStatus, { textColor: string, type: StatusType, hocusStyles: readonly string[] }> = {
+  PASSED: { textColor: 'text-jade-400', type: 'passed', hocusStyles: ['group-hover:border-jade-400', 'group-focus-visible:border-jade-400', 'group-focus-visible:outline-jade-400'] },
+  FAILED: { textColor: 'text-red-400', type: 'failed', hocusStyles: ['group-hover:border-red-400', 'group-focus-visible:border-red-400', 'group-focus-visible:outline-red-400'] },
+  CANCELLED: { textColor: 'text-gray-500', type: 'cancelled', hocusStyles: ['group-hover:border-gray-500', 'group-focus-visible:border-gray-500', 'group-focus-visible:outline-gray-500'] },
+  ERRORED: { textColor: 'text-orange-400', type: 'errored', hocusStyles: ['group-hover:border-orange-400', 'group-focus-visible:border-orange-400', 'group-focus-visible:outline-orange-400'] },
+  RUNNING: { textColor: 'text-indigo-500', type: 'running', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  NOTESTS: { textColor: 'text-indigo-500', type: 'noTests', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  OVERLIMIT: { textColor: 'text-indigo-500', type: 'overLimit', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+  TIMEDOUT: { textColor: 'text-indigo-500', type: 'timedOut', hocusStyles: ['group-hover:border-indigo-500', 'group-focus-visible:border-indigo-500', 'group-focus-visible:outline-indigo-500'] },
+} as const
+
+const icon = computed(() => {
+  return ICON_MAP[props.status]
+})
+
+const runNumberColor = computed(() => {
+  return icon.value.textColor
+})
+
+const hocusStyles = computed(() => {
+  if (!props.isActionable) {
+    return
+  }
+
+  return [
+    'group-focus-visible:outline',
+    ...icon.value.hocusStyles,
+  ]
+})
+
+</script>
diff --git a/packages/app/src/runs/RunResults.cy.tsx b/packages/app/src/runs/RunResults.cy.tsx
index 140a9ec5daa2..885ab7fa26fe 100644
--- a/packages/app/src/runs/RunResults.cy.tsx
+++ b/packages/app/src/runs/RunResults.cy.tsx
@@ -1,16 +1,16 @@
+import RunResults from './RunResults.vue'
+import { RunResultsFragmentDoc } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 import { CloudRunStubs } from '@packages/graphql/test/stubCloudTypes'
-import { RunCardFragmentDoc } from '../generated/graphql-test'
-import RunResults from './RunResults.vue'
 
-describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
-  it('shows number of passed, skipped, pending and failed tests', () => {
+describe('<RunResults />', () => {
+  it('shows the failed icon and the number of passed, skipped, pending, failed tests passed through gql props', () => {
     const cloudRuns = Object.values(CloudRunStubs)
 
     cy.mount(() => cloudRuns.map((cloudRun, i) => (<RunResults data-cy={`run-result-${i}`} gql={cloudRun} />)))
 
     cloudRuns.forEach((cloudRun, i) => {
-      cy.get(`[data-cy=run-result-${i}]`).within(() => {
+      cy.findByTestId(`run-result-${i}`).within(() => {
         cy.get(`[title=${defaultMessages.runs.results.passed}]`).should('contain.text', cloudRun.totalPassed)
         cy.get(`[title=${defaultMessages.runs.results.failed}]`).should('contain.text', cloudRun.totalFailed)
         cy.get(`[title=${defaultMessages.runs.results.skipped}]`).should('contain.text', cloudRun.totalSkipped)
@@ -18,17 +18,44 @@ describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
       })
     })
   })
+})
 
-  it('renders flaky ribbon', () => {
-    cy.mountFragment(RunCardFragmentDoc, {
-      onResult (result) {
-        result.totalFlakyTests = 4
-      },
-      render (gql) {
-        return <RunResults gql={gql} />
-      },
-    })
+describe('Flaky badge tests', () => {
+  const mountingFragment = (flakyTests: number, useBreakpoint?: boolean) => {
+    return (
+      cy.mountFragment(RunResultsFragmentDoc, {
+        onResult (result) {
+          if (result) {
+            result.totalFlakyTests = flakyTests
+          }
+        },
+        render: (gqlVal) => {
+          return (
+            <RunResults gql={gqlVal} useBreakpointDisplay={useBreakpoint} />
+          )
+        },
+      })
+    )
+  }
+
+  it('does not show flaky component when flakyTests are < 1', () => {
+    mountingFragment(0)
+    cy.contains('Flaky').should('not.exist')
+  })
+
+  it('contains flaky badge', () => {
+    mountingFragment(4)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel)
+    cy.findByTestId('total-flaky-tests').contains(4)
+  })
+
+  it('responds to breakpoint with ', { viewportWidth: 1279 }, () => {
+    mountingFragment(4, false)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel).should('be.visible')
+    cy.findByTestId('total-flaky-tests').contains(4)
 
-    cy.contains('4 Flaky')
+    mountingFragment(4, true)
+    cy.findByTestId('runResults-flakyBadge').contains(defaultMessages.specPage.flaky.badgeLabel).should('not.be.visible')
+    cy.findByTestId('total-flaky-tests').contains(4)
   })
 })
diff --git a/packages/app/src/runs/RunResults.vue b/packages/app/src/runs/RunResults.vue
index 85e91002c1e9..8beb0f5060d2 100644
--- a/packages/app/src/runs/RunResults.vue
+++ b/packages/app/src/runs/RunResults.vue
@@ -1,22 +1,43 @@
 <template>
-  <div class="flex gap-[8px] items-center">
-    <span
-      v-if="props.gql.totalFlakyTests"
-      class="rounded-md font-semibold bg-warning-100 text-sm py-[2px] px-[4px] text-warning-600 whitespace-nowrap"
-    >{{ props.gql.totalFlakyTests }} Flaky</span>
+  <div
+    class="flex gap-[8px] items-center bg-transparent"
+    data-cy="runResults-holder"
+  >
     <ResultCounts
-      :total-failed="props.gql.totalFailed"
-      :total-passed="props.gql.totalPassed"
-      :total-pending="props.gql.totalPending"
-      :total-skipped="props.gql.totalSkipped"
+      :total-passed="results.totalPassed"
+      :total-failed="results.totalFailed"
+      :total-skipped="results.totalSkipped"
+      :total-pending="results.totalPending"
+      :order="['PASSED', 'FAILED', 'SKIPPED', 'PENDING']"
     />
+    <div
+      v-if="results?.totalFlakyTests"
+      data-cy="runResults-flakyBadge"
+      class="border rounded flex-row gap-[8px] items-center h-6 bg-orange-50 border-orange-200 text-sm text-orange-600 px-2 gap-x-1"
+      :class="useBreakpointDisplay ? 'hidden xl:flex' : 'flex'"
+    >
+      <span
+        data-cy="total-flaky-tests"
+        class="font-medium pr-1 opacity-70"
+      >
+        {{ results.totalFlakyTests }}
+      </span>
+      <div class="w-px my-[6px] h-6 border-orange-200 border" />
+      <span class="font-semibold pl-1">
+        {{ t('specPage.flaky.badgeLabel') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import type { RunResultsFragment } from '../generated/graphql'
 import { gql } from '@urql/core'
 import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
 
 gql`
 fragment RunResults on CloudRun {
@@ -31,6 +52,10 @@ fragment RunResults on CloudRun {
 
 const props = defineProps<{
   gql: RunResultsFragment
+  useBreakpointDisplay?: boolean
 }>()
 
+const results = computed(() => {
+  return props.gql
+})
 </script>
diff --git a/packages/app/src/runs/RunTag.cy.tsx b/packages/app/src/runs/RunTag.cy.tsx
new file mode 100644
index 000000000000..2db3ed2e8490
--- /dev/null
+++ b/packages/app/src/runs/RunTag.cy.tsx
@@ -0,0 +1,37 @@
+import RunTag from './RunTag.vue'
+
+describe('<RunTag />', () => {
+  it('should show a normal tag', () => {
+    cy.mount({
+      name: 'RunTag',
+      render () {
+        return (
+          <RunTag
+            label="test-label"
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-label')
+  })
+
+  it('should show a icon tag', () => {
+    cy.mount({
+      name: 'RunTag',
+      render () {
+        return (
+          <RunTag
+            label="test-label"
+            icon={<span data-cy="test-dummy-icon">z</span>}
+            iconLabel="test-sr-text"
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-label')
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('test-sr-text')
+    cy.get(`[data-cy="runTag"`).should('be.visible').contains('z')
+  })
+})
diff --git a/packages/app/src/runs/RunTag.vue b/packages/app/src/runs/RunTag.vue
new file mode 100644
index 000000000000..f5884e0a2e56
--- /dev/null
+++ b/packages/app/src/runs/RunTag.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    v-if="label"
+    class="inline-flex rounded-md bg-gray-50 border-gray-200 border-[1px] text-sm px-[8px] text-gray-700 items-center py-[2px]"
+    data-cy="runTag"
+  >
+    <component
+      :is="icon"
+      class="mr-2 icon-dark-gray-600 shrink-0"
+    />
+    <span
+      class="sr-only"
+    >
+      {{ iconLabel }}
+    </span>
+    <span
+      class="truncate"
+      role="none"
+    >
+      {{ label }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Component } from 'vue'
+
+defineProps<{
+  label: string
+  iconLabel?: string
+  icon?: Component
+}>()
+
+</script>
diff --git a/packages/app/src/runs/RunTagCount.cy.tsx b/packages/app/src/runs/RunTagCount.cy.tsx
new file mode 100644
index 000000000000..976814ffab49
--- /dev/null
+++ b/packages/app/src/runs/RunTagCount.cy.tsx
@@ -0,0 +1,81 @@
+import RunTagCount from './RunTagCount.vue'
+
+describe('<RunTagCount />', () => {
+  it('should show all information', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              flaky: 1,
+              branchName: 'test-branch',
+              tags: ['tag-one', 'tag-two'],
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('1 Flaky Branch Name: test-branch tag-one tag-two').should('exist')
+  })
+
+  it('should show tags only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              tags: ['tag-one', 'tag-two'],
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('tag-one tag-two').should('exist')
+  })
+
+  it('should show flaky only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              flaky: 1,
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('1 Flaky').should('exist')
+  })
+
+  it('should show branch only', () => {
+    cy.mount({
+      name: 'RunTagCount',
+      render () {
+        return (
+          <RunTagCount
+            value={5}
+            tooltipData={{
+              branchName: 'test-branch',
+            }}
+          />
+        )
+      },
+    })
+
+    cy.get(`[data-cy="runTagCount"`).should('be.visible').contains('5')
+    cy.findAllByLabelText('Branch Name: test-branch').should('exist')
+  })
+})
diff --git a/packages/app/src/runs/RunTagCount.vue b/packages/app/src/runs/RunTagCount.vue
new file mode 100644
index 000000000000..7ac2156ec33c
--- /dev/null
+++ b/packages/app/src/runs/RunTagCount.vue
@@ -0,0 +1,126 @@
+<template>
+  <Tooltip
+    tab-index="0"
+    placement="bottom"
+  >
+    <RunTag
+      :aria-label="ariaLabel"
+      :title="`+${value}`"
+      :label="`+${value}`"
+      data-cy="runTagCount"
+    />
+    <template
+      v-if="tooltipData"
+      #popper
+    >
+      <ul
+        class="flex gap-[8px] flex-col max-w-full children:flex text-gray-300"
+        data-cy="runTagCount-tooltip"
+      >
+        <li
+          v-if="(tooltipData.flaky || 0 > 0)"
+          class="items-center overflow-hidden"
+        >
+          <div
+            class="flex border rounded flex-row gap-[8px] items-center h-6 border-white/20 text-orange-300 text-sm px-2 gap-x-1"
+          >
+            <span
+              class="font-medium pr-1 opacity-70"
+            >
+              {{ tooltipData.flaky }}
+            </span>
+            <div class="w-px my-[6px] h-6 border-white/20 border" />
+            <span class="font-semibold pl-1">
+              {{ t('specPage.flaky.badgeLabel') }}
+            </span>
+          </div>
+        </li>
+        <li
+          v-if="tooltipData.branchName"
+          class="items-center overflow-hidden text-sm"
+        >
+          <IconTechnologyBranchH
+            aria-hidden="true"
+            class="shrink-0 mr-2 icon-dark-gray-500"
+          />
+          <span
+            class="sr-only"
+          >
+            {{ t('runs.card.branchName') }}
+          </span>
+          <div class="grow-1 max-w-full overflow-hidden">
+            <div class="max-w-full break-words whitespace-normal">
+              {{ tooltipData.branchName }}
+            </div>
+            <div />
+          </div>
+        </li>
+        <li
+          v-if="tooltipData.tags && tooltipData.tags?.length > 0"
+          class="flex-col items-start max-w-full  text-sm gap-[8px]"
+        >
+          <span class="font-medium">Tags</span>
+          <ul
+            class="flex flex-col gap-[8px] children:flex children:items-center w-full"
+          >
+            <li
+              v-for="tag in tooltipData.tags"
+              :key="tag"
+              class="relative overflow-hidden max-w-full"
+            >
+              <div
+                aria-hidden="true"
+                class=" shrink-0 pr-[8px]"
+              >
+                <IconDotOutlineSmall class="icon-dark-gray-500 icon-light-gray-500" />
+              </div>
+              <div class="grow-1 max-w-full overflow-hidden">
+                <div class="max-w-full break-words whitespace-normal">
+                  {{ tag }}
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </template>
+  </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { IconTechnologyBranchH, IconDotOutlineSmall } from '@cypress-design/vue-icon'
+import RunTag from './RunTag.vue'
+import { useI18n } from '@cy/i18n'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  value: number
+  tooltipData: {
+    flaky?: number
+    branchName?: string
+    tags?: string[]
+  }
+}>()
+
+const ariaLabel = computed(() => {
+  let labelArray: string[] = []
+
+  if (props.tooltipData.flaky) {
+    labelArray.push(`${props.tooltipData.flaky}`, t('specPage.flaky.badgeLabel'))
+  }
+
+  if (props.tooltipData.branchName) {
+    labelArray.push(t('runs.card.branchName'), props.tooltipData.branchName)
+  }
+
+  if (props.tooltipData.tags) {
+    labelArray = labelArray.concat(props.tooltipData.tags)
+  }
+
+  return labelArray.join(' ')
+})
+
+</script>
diff --git a/packages/app/src/runs/RunsComposable.ts b/packages/app/src/runs/RunsComposable.ts
index 74de6a22efbb..533dfea788b2 100644
--- a/packages/app/src/runs/RunsComposable.ts
+++ b/packages/app/src/runs/RunsComposable.ts
@@ -5,4 +5,6 @@ export type RunsComposable = {
   runs: Ref<RunCardFragment[] | undefined>
   reExecuteRunsQuery: () => void
   query: any
+  allRunIds?: Ref<string[] | undefined>
+  currentCommitInfo?: Ref<{ sha: string, message: string } | null | undefined>
 }
diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx
index f120d782f49b..d296e3f48624 100644
--- a/packages/app/src/runs/RunsContainer.cy.tsx
+++ b/packages/app/src/runs/RunsContainer.cy.tsx
@@ -16,15 +16,16 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
       cy.mountFragment(RunsContainerFragmentDoc, {
         render (gqlVal) {
           const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+          const runIds: string[] = runs?.[0]?.id ? [runs?.[0]?.id] : [] as string[]
 
-          return <RunsContainer gql={gqlVal} runs={runs} online />
+          return <RunsContainer gql={gqlVal} runs={runs} online allRunIds={runIds} />
         },
       })
 
       const statuses = ['CANCELLED', 'ERRORED', 'FAILED', 'NOTESTS', 'OVERLIMIT', 'PASSED', 'RUNNING', 'TIMEDOUT']
 
       cy.wrap(statuses).each((status: string) => {
-        cy.contains(`fix: make gql work ${ status}`).should('be.visible')
+        cy.get(`[data-cy="runCard-status-${status}"]`).should('exist')
       })
 
       cy.percySnapshot()
diff --git a/packages/app/src/runs/RunsContainer.vue b/packages/app/src/runs/RunsContainer.vue
index 4b0c9a7ec11d..5e4a2972ea36 100644
--- a/packages/app/src/runs/RunsContainer.vue
+++ b/packages/app/src/runs/RunsContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full ">
+  <div class="h-full">
     <NoInternetConnection v-if="!online">
       {{ t('launchpadErrors.noInternet.connectProject') }}
     </NoInternetConnection>
@@ -60,10 +60,12 @@
       >
         {{ t('runs.empty.ensureGitSetupCorrectly') }}
       </TrackedBanner>
-      <RunCard
-        v-for="run of runs"
-        :key="run.id"
-        :gql="run"
+      <RunsLayout
+        :runs="runs"
+        :all-run-ids="allRunIds"
+        :is-using-git="userProjectStatusStore.project.isUsingGit"
+        :latest-run-url="latestRunUrl"
+        :current-commit-info="props.currentCommitInfo"
       />
     </div>
   </div>
@@ -73,10 +75,10 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from '@cy/i18n'
 import NoInternetConnection from '@packages/frontend-shared/src/components/NoInternetConnection.vue'
-import RunCard from './RunCard.vue'
 import RunsConnect from './RunsConnect.vue'
 import RunsConnectSuccessAlert from './RunsConnectSuccessAlert.vue'
 import RunsEmpty from './RunsEmpty.vue'
+import RunsLayout from './RunsLayout.vue'
 import Warning from '@packages/frontend-shared/src/warning/Warning.vue'
 import RunsErrorRenderer from './RunsErrorRenderer.vue'
 import { useUserProjectStatusStore } from '@packages/frontend-shared/src/store/user-project-status-store'
@@ -104,11 +106,28 @@ const props = defineProps<{
   gql: RunsContainerFragment | RunsGitTreeQuery
   runs?: RunCardFragment[]
   online: boolean
+  allRunIds?: string[]
+  currentCommitInfo?: { sha: string, message: string } | null
 }>()
 
 const showConnectSuccessAlert = ref(false)
 const connectionFailed = computed(() => !props.gql.currentProject?.cloudProject && props.online)
 
+const latestRunUrl = computed(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename !== 'CloudProject') {
+    return '#'
+  }
+
+  return getUrlWithParams({
+    url: props.gql.currentProject?.cloudProject?.cloudProjectUrl,
+    params: {
+      utm_source: getUtmSource(),
+      utm_medium: RUNS_TAB_MEDIUM,
+      utm_campaign: 'View runs in Cypress Cloud',
+    },
+  })
+})
+
 const noRunsForBranchMessage = computed(() => {
   const learnMoreLink = getUrlWithParams({
     url: 'https://on.cypress.io/git-info',
diff --git a/packages/app/src/runs/RunsLayout.cy.tsx b/packages/app/src/runs/RunsLayout.cy.tsx
new file mode 100644
index 000000000000..fb9102d41d70
--- /dev/null
+++ b/packages/app/src/runs/RunsLayout.cy.tsx
@@ -0,0 +1,171 @@
+import RunsLayout from './RunsLayout.vue'
+import { RunsContainerFragmentDoc } from '../generated/graphql-test'
+
+const statuses = ['CANCELLED', 'ERRORED', 'FAILED', 'NOTESTS', 'OVERLIMIT', 'PASSED', 'RUNNING', 'TIMEDOUT']
+
+describe('<RunsLayout />', () => {
+  context('grouped runs when isUsingGit is true', () => {
+    it('displays commits grouped by sha', () => {
+      const shas: string[] = []
+
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          for (let i = 0; i < statuses.length; i += 1) {
+            const runSha = runs?.[i]?.commitInfo?.sha
+
+            if (runSha) {
+              shas.push(runSha)
+            }
+          }
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="runsLayout-git"`).should('be.visible')
+      cy.get(`[data-cy="runsLayout-no-git"`).should('not.exist')
+      cy.get(`[data-cy="runsLayout-git"`).children('li').should('have.length', 21).each((item, index) => {
+        if (index === 0) {
+          cy.wrap(item).should('be.visible').contains('a message')
+        } else {
+          cy.wrap(item).should('be.visible').contains(`fix: make gql work ${statuses[(index - 1) % statuses.length]}`).should('be.visible')
+        }
+      })
+    })
+
+    it('hides View Runs button when latestRunUrl not present', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get('[data-cy="open-cloud-latest').should('not.exist')
+    })
+
+    it('displays newer commit checked out', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'new-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get('[data-cy="commit-new-sha"]').should('exist').contains('Checked out')
+      cy.get('[data-cy="open-cloud-latest').should('be.visible').contains('View runs in Cypress Cloud')
+    })
+
+    it('displays first commit checked out', () => {
+      let firstRunSha: string | null | undefined = null
+
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          firstRunSha = runs?.[0].commitInfo?.sha
+          const commitInfo = firstRunSha ? { sha: firstRunSha, message: 'a message' } : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={[]}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={commitInfo}
+            />
+          )
+        },
+      })
+
+      cy.then(() => {
+        cy.get(`[data-cy="commit-${firstRunSha}"`).should('exist').contains('Checked out')
+      })
+
+      cy.get(`[data-cy="open-cloud-latest"`).should('be.visible').contains('View runs in Cypress Cloud')
+    })
+
+    it('displays debug button enabled when allRunIds populated', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          const firstRunId = runs?.[0].id
+          const secondRunId = runs?.[1].id
+          const runIds = firstRunId && secondRunId ? [firstRunId, secondRunId] : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={runIds}
+              isUsingGit={true}
+              latestRunUrl="https://cypress.io"
+              currentCommitInfo={{ sha: 'some-sha', message: 'a message' }}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="open-cloud-latest"`).should('be.visible').contains('View runs in Cypress Cloud')
+      cy.get(`[data-cy="runsLayout-git"`).children('li').should('have.length', 21).each((item, index) => {
+        if (index === 0) return
+
+        if (index < 3) {
+          cy.wrap(item).should('be.visible').contains('Debug').should('be.enabled')
+        } else {
+          cy.wrap(item).should('be.visible').contains('Debug').should('not.be.enabled')
+        }
+      })
+    })
+  })
+
+  context('block runs when isUsingGit is false', () => {
+    it('displays in block layout', () => {
+      cy.mountFragment(RunsContainerFragmentDoc, {
+        render (gqlVal) {
+          const runs = gqlVal.currentProject?.cloudProject?.__typename === 'CloudProject' ? gqlVal.currentProject.cloudProject.runs?.nodes : undefined
+
+          return (
+            <RunsLayout
+              runs={runs}
+              allRunIds={['some-id']}
+            />
+          )
+        },
+      })
+
+      cy.get(`[data-cy="runsLayout-git"`).should('not.exist')
+      cy.get(`[data-cy="runsLayout-no-git"`).should('be.visible')
+      cy.get(`[data-cy="runsLayout-no-git"`).children('li').should('have.length', 20).each((item, index) => {
+        cy.wrap(item).should('be.visible').find(`[data-cy="runCard-status-${statuses[index % statuses.length]}"]`).should('be.visible')
+      })
+    })
+  })
+})
diff --git a/packages/app/src/runs/RunsLayout.vue b/packages/app/src/runs/RunsLayout.vue
new file mode 100644
index 000000000000..f944d4419690
--- /dev/null
+++ b/packages/app/src/runs/RunsLayout.vue
@@ -0,0 +1,157 @@
+<template>
+  <div
+    v-if="isUsingGit"
+    class="flex flex-col gap-[24px]"
+  >
+    <ul
+      data-cy="runsLayout-git"
+      class="flex flex-col gap-[16px] relative before:content-[''] before:absolute before:top-[20px] before:bottom-[10px] before:w-[2px] before:border-2 before:border-dashed before:border-l-0 before:border-y-0 before:border-r-gray-100 before:left-[7px]"
+    >
+      <li
+        v-for="(sha,index) of Object.keys(groupByCommit)"
+        :key="sha"
+        :data-cy="`commit-${sha}`"
+        :class="{ 'mb-[-24px]': !groupByCommit[sha].runs }"
+      >
+        <div
+          class="flex items-center my-[10px] [&>*:last-child]:mr-[8px]"
+          :class="{ 'mt-0': index === 0 }"
+        >
+          <DebugCommitIcon
+            aria-hidden="true"
+            class="h-[16px] w-[16px] relative"
+          />
+          <LightText class="shrink-0 truncate ml-[8px]">
+            {{ sha.slice(0, 7) }}
+          </LightText>
+          <Dot />
+          <span
+            class="text-sm font-medium text-gray-800 truncate"
+            :title="groupByCommit[sha].message!"
+            role="none"
+          >
+            {{ groupByCommit[sha].message }}
+          </span>
+          <span
+            v-if="sha === currentCommitInfo?.sha"
+            data-cy="tag-checked-out"
+            class="inline-flex items-center shrink-0 font-medium text-purple-400 align-middle border border-gray-100 rounded border-1 h-[16px] ml-[8px] px-[4px] text-[12px] leading-[16px]"
+          >
+            {{ t('runs.layout.checkedOut') }}
+          </span>
+        </div>
+        <ul
+          v-if="groupByCommit[sha].runs"
+          class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+        >
+          <li
+            v-for="run of groupByCommit[sha].runs"
+            :key="run.id"
+            class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+          >
+            <RunCard
+              :gql="run"
+              :show-debug="true"
+              :debug-enabled="enableDebugging(run.id)"
+            />
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <Button
+      v-if="props.latestRunUrl"
+      data-cy="open-cloud-latest"
+      variant="outline-indigo"
+      size="32"
+      class="self-start"
+      @click="openLatest"
+    >
+      <IconTechnologyCypress class="h-[16px] w-[16px] mr-[8px]" />
+      {{ t('runs.layout.viewCloudRuns') }}
+    </Button>
+  </div>
+  <ul
+    v-else
+    data-cy="runsLayout-no-git"
+    class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+  >
+    <li
+      v-for="run of runs"
+      :key="run.id"
+      class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+    >
+      <RunCard
+        :gql="run"
+      />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { compact, groupBy } from 'lodash'
+import { computed, h, FunctionalComponent } from 'vue'
+import { useI18n } from '@cy/i18n'
+import RunCard from './RunCard.vue'
+import DebugCommitIcon from '../debug/DebugCommitIcon.vue'
+import Button from '@cypress-design/vue-button'
+import { IconTechnologyCypress } from '@cypress-design/vue-icon'
+import type { RunCardFragment } from '../generated/graphql'
+import { useExternalLink } from '@cy/gql-components/useExternalLink'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  runs?: RunCardFragment[]
+  allRunIds?: string[]
+  isUsingGit?: boolean
+  latestRunUrl?: string
+  currentCommitInfo?: { sha: string, message: string } | null
+}>()
+
+const openLatest = useExternalLink(props.latestRunUrl)
+
+const Dot: FunctionalComponent = () => {
+  return h('span', { ariaHidden: 'true', class: 'px-[8px] text-gray-300' }, '•')
+}
+
+const LightText: FunctionalComponent = (_props, { slots }) => {
+  return h('span', { class: 'text-sm text-gray-700' }, slots?.default?.())
+}
+
+const enableDebugging = (runId: string) => {
+  const allRunIds = props.allRunIds
+
+  if (!allRunIds) {
+    return false
+  }
+
+  return allRunIds.some((allRunId) => runId === allRunId)
+}
+
+const groupByCommit = computed(() => {
+  const grouped = groupBy(compact(props.runs), (run) => {
+    return run?.commitInfo?.sha
+  })
+
+  const mapped = {}
+
+  const hasRunsForCurrentCommit = props.currentCommitInfo?.sha && Object.keys(grouped).includes(props.currentCommitInfo.sha)
+
+  if (!hasRunsForCurrentCommit && props.currentCommitInfo) {
+    mapped[props.currentCommitInfo.sha] = props.currentCommitInfo
+  }
+
+  const result = Object.keys(grouped).reduce<Record<string, {sha: string, message: string | undefined | null, runs: typeof props.runs}>>((acc, curr) => {
+    acc[curr] = {
+      sha: curr,
+      message: grouped[curr][0].commitInfo?.summary,
+      runs: grouped[curr],
+    }
+
+    return acc
+  }, mapped)
+
+  return result
+})
+
+</script>
diff --git a/packages/app/src/runs/RunsSkeleton.cy.tsx b/packages/app/src/runs/RunsSkeleton.cy.tsx
index 31df937b90e8..7cd8716cb698 100644
--- a/packages/app/src/runs/RunsSkeleton.cy.tsx
+++ b/packages/app/src/runs/RunsSkeleton.cy.tsx
@@ -1,7 +1,15 @@
 import RunsSkeleton from './RunsSkeleton.vue'
 
 describe('<RunsSkeleton />', () => {
-  it('playground', () => {
+  it('displays git structure', () => {
+    cy.mount(<RunsSkeleton isUsingGit />)
+
+    cy.get(`[data-cy="runsSkeleton-git"`).should('be.visible')
+  })
+
+  it('displays default structure', () => {
     cy.mount(<RunsSkeleton />)
+
+    cy.get(`[data-cy="runsSkeleton-default"`).should('be.visible')
   })
 })
diff --git a/packages/app/src/runs/RunsSkeleton.vue b/packages/app/src/runs/RunsSkeleton.vue
index d95de7065cd7..33bd4b5c6702 100644
--- a/packages/app/src/runs/RunsSkeleton.vue
+++ b/packages/app/src/runs/RunsSkeleton.vue
@@ -1,43 +1,67 @@
 <template>
-  <div
-    data-cy="runs-loader"
+  <ul
+    v-if="isUsingGit"
+    data-cy="runsSkeleton-git"
+    class="flex flex-col mb-[24px] gap-[16px] relative before:content-[''] before:absolute before:top-[20px] before:bottom-[10px] before:w-[2px] before:border-2 before:border-dashed before:border-l-0 before:border-y-0 before:border-r-gray-100 before:left-[7px]"
   >
-    <div
-      v-for="i in numberOfLines"
+    <li
+      v-for="i in numberOfLinesGit"
       :key="i"
-      class="mb-4"
     >
-      <ListRowHeader
-        disabled
-        class="border border-gray-100"
+      <div
+        class="flex items-center my-[10px] gap-[8px] children:h-[14px]"
+        :class="{ 'mt-0': i === 0 }"
       >
-        <template #icon>
-          <div class="h-[20px] w-[20px] bg-gray-100 rounded-xl mx-[2px]" />
-        </template>
-        <template #header>
-          <div class="w-[256px] rounded-xl h-[16px] bg-gray-50 my-[4px]" />
-        </template>
-        <template #description>
-          <div
-            v-for="j in 4"
-            :key="j"
-            class="rounded-lg h-[8px] bg-gray-50 mr-[20px] inline-block"
-            :class="j === 4 ? 'w-[64px]' : 'w-[80px]'"
-          />
-        </template>
-        <template #right>
-          <div
-            v-if="i >= 2"
-            class="rounded-lg h-[16px] bg-gray-50 w-[216px]"
-          />
-        </template>
-      </ListRowHeader>
-    </div>
-  </div>
+        <div
+          class="relative w-[16px] rounded-lg bg-gray-50"
+        />
+        <div
+          class="w-[46px] max-w-[46px] rounded-lg bg-gray-50"
+        />
+        <div
+          class="flex items-center text-gray-50"
+        >
+          •
+        </div>
+        <div
+          class="w-[240px] max-w-[240px] rounded-lg bg-gray-50"
+        />
+      </div>
+      <ul
+        class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden"
+      >
+        <li
+          v-for="j in (i %2 === 0 ? 2 : 1)"
+          :key="j"
+          class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+        >
+          <RunsSkeletonRow />
+        </li>
+      </ul>
+    </li>
+  </ul>
+  <ul
+    v-else
+    data-cy="runsSkeleton-default"
+    class="relative bg-white border border-gray-100 rounded border-1 overflow-hidden mb-[24px]"
+  >
+    <li
+      v-for="i of numberOfLinesDefault"
+      :key="i"
+      class="border-gray-100 [&:not(:last-child)]:border-b w-full block overflow-auto"
+    >
+      <RunsSkeletonRow />
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
-import ListRowHeader from '@cy/components/ListRowHeader.vue'
+import RunsSkeletonRow from './RunsSkeletonRow.vue'
+
+defineProps<{
+  isUsingGit?: boolean
+}>()
 
-const numberOfLines = 20
+const numberOfLinesDefault = 7
+const numberOfLinesGit = 5
 </script>
diff --git a/packages/app/src/runs/RunsSkeletonRow.cy.tsx b/packages/app/src/runs/RunsSkeletonRow.cy.tsx
new file mode 100644
index 000000000000..8d4fa2998b51
--- /dev/null
+++ b/packages/app/src/runs/RunsSkeletonRow.cy.tsx
@@ -0,0 +1,7 @@
+import RunsSkeletonRow from './RunsSkeletonRow.vue'
+
+describe('<RunsSkeletonRow />', () => {
+  it('playground', () => {
+    cy.mount(<RunsSkeletonRow />)
+  })
+})
diff --git a/packages/app/src/runs/RunsSkeletonRow.vue b/packages/app/src/runs/RunsSkeletonRow.vue
new file mode 100644
index 000000000000..ec72b6f5807c
--- /dev/null
+++ b/packages/app/src/runs/RunsSkeletonRow.vue
@@ -0,0 +1,39 @@
+<template>
+  <div
+    data-cy="runsSkeletonRow"
+    class="p-[16px] gap-[16px] flex justify-between children:flex"
+  >
+    <div class="overflow-hidden gap-[8px] children:rounded-lg children:h-[26px] children:bg-gray-50">
+      <div
+        class="shrink-0 w-[80px]"
+      />
+      <div
+        class="w-[160px] max-w-[160px]"
+      />
+      <div
+        class="w-[80px] max-w-[80px]"
+      />
+      <div
+        class="w-[80px] max-w-[80px]"
+      />
+    </div>
+    <div class="children:flex  children:items-center overflow-hidden gap-[16px] children:overflow-hidden children:gap-[8px]">
+      <div class="children:bg-gray-50 children:rounded-lg">
+        <div
+          class="shrink-0 w-[16px] h-[16px]"
+        />
+        <div
+          class="w-[80px] max-w-[80px] h-[20px]"
+        />
+      </div>
+      <div class="children:bg-gray-50 children:rounded-lg">
+        <div
+          class="shrink-0 w-[16px] h-[16px]"
+        />
+        <div
+          class="w-[120px] max-w-[120px] h-[20px]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/app/src/runs/useGitTreeRuns.ts b/packages/app/src/runs/useGitTreeRuns.ts
index 5871798a03c9..5a4eb6ff919f 100644
--- a/packages/app/src/runs/useGitTreeRuns.ts
+++ b/packages/app/src/runs/useGitTreeRuns.ts
@@ -21,6 +21,7 @@ fragment RunsGitTreeProject on Query {
       __typename
       ... on CloudProject {
         id
+        cloudProjectUrl
       }
     }
   }
@@ -52,6 +53,14 @@ export const useGitTreeRuns = (online: Ref<boolean>): RunsComposable => {
     return nodes
   })
 
+  const allRunIds = computed(() => {
+    return relevantRuns?.value.all?.map((run) => run.runId) || []
+  })
+
+  const currentCommitInfo = computed(() => {
+    return relevantRuns?.value.currentCommitInfo
+  })
+
   function reExecuteRunsQuery () {
     query.executeQuery()
   }
@@ -60,5 +69,7 @@ export const useGitTreeRuns = (online: Ref<boolean>): RunsComposable => {
     runs,
     reExecuteRunsQuery,
     query,
+    allRunIds,
+    currentCommitInfo,
   }
 }
diff --git a/packages/app/src/runs/useProjectRuns.ts b/packages/app/src/runs/useProjectRuns.ts
index 49da4a413d1c..6ecefab19984 100644
--- a/packages/app/src/runs/useProjectRuns.ts
+++ b/packages/app/src/runs/useProjectRuns.ts
@@ -31,6 +31,7 @@ fragment RunsContainer on Query {
       __typename
       ... on CloudProject {
         id
+        cloudProjectUrl
         runs(first: 10) {
           ...RunsContainer_RunsConnection
         }
diff --git a/packages/data-context/src/sources/RelevantRunsDataSource.ts b/packages/data-context/src/sources/RelevantRunsDataSource.ts
index 284369d0309a..0d378bbd117d 100644
--- a/packages/data-context/src/sources/RelevantRunsDataSource.ts
+++ b/packages/data-context/src/sources/RelevantRunsDataSource.ts
@@ -218,7 +218,7 @@ export class RelevantRunsDataSource {
   }
 
   #takeLatestRuns (runs: RelevantRunInfo[]) {
-    const latestRuns = take(runs, 10)
+    const latestRuns = take(runs, 100)
 
     debug('latest runs after take', latestRuns)
 
diff --git a/packages/frontend-shared/src/components/ResultCounts.vue b/packages/frontend-shared/src/components/ResultCounts.vue
index 4779af03272c..d94e4c42aae4 100644
--- a/packages/frontend-shared/src/components/ResultCounts.vue
+++ b/packages/frontend-shared/src/components/ResultCounts.vue
@@ -11,6 +11,7 @@
         :is="result.icon"
         class="mt-px h-[12px] mr-1 w-[12px]"
         :class="result.class"
+        aria-hidden="true"
       />
       <span
         class="sr-only"
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 6084e023860b..43efd7657898 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -765,6 +765,18 @@
         "link": "Support page",
         "button": "Try again"
       }
+    },
+    "card": {
+      "branchName": "Branch Name:",
+      "commitAuthor": "Commit Author:",
+      "totalDuration": "Run Total Duration:",
+      "debugLabel": "Debug",
+      "debugDescription": "View debug for run {runNumber}",
+      "noDebugAvailable": "You can only debug runs for your most recent commits."
+    },
+    "layout": {
+      "viewCloudRuns": "View runs in Cypress Cloud",
+      "checkedOut": "Checked out"
     }
   },
   "debugPage": {
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index b25af0988237..ff2add5b3310 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -1831,7 +1831,7 @@ type Mutation {
   setTestsForRun(testsBySpec: [TestsBySpecInput!]!): Boolean
 
   """Set the route to debug and show the specified CloudRun"""
-  showDebugForCloudRun(runNumber: Int!): Query
+  showDebugForCloudRun(runNumber: Int!): Boolean
 
   """Show system notification via Electron"""
   showSystemNotification(body: String!, title: String!): Boolean
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
index 5aaf7253e0e1..3bd84c9a21b2 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
@@ -831,8 +831,7 @@ export const mutation = mutationType({
     /**
      * Currently, this is only used for debugging purposes by running this mutation in GraphiQL
      */
-    t.field('showDebugForCloudRun', {
-      type: Query,
+    t.boolean('showDebugForCloudRun', {
       description: 'Set the route to debug and show the specified CloudRun',
       args: {
         runNumber: nonNull(intArg()),
@@ -840,7 +839,7 @@ export const mutation = mutationType({
       resolve: async (_, args, ctx) => {
         await ctx.actions.project.debugCloudRun(args.runNumber)
 
-        return {}
+        return true
       },
     })
   },
diff --git a/yarn.lock b/yarn.lock
index 38a98fab6fca..33f62e2a3034 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2276,7 +2276,14 @@
     resolve-pkg "^2.0.0"
     tailwindcss "^3.3.3"
 
-"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.27.0":
+"@cypress-design/icon-registry@*", "@cypress-design/icon-registry@^0.28.0":
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.28.0.tgz#a3c5336f7b544d8be82b6a941b8915ba7084d5c9"
+  integrity sha512-xJvE1u3KBQz6Hc0Ea3ia9xUDKxTj5MdKrgYrlE9t321qKxStxVN34VB595TfWzluHZzUb6Qu7QqgqdCTFTccgw==
+  dependencies:
+    "@cypress-design/css" "^0.15.1"
+
+"@cypress-design/icon-registry@^0.27.0":
   version "0.27.0"
   resolved "https://registry.yarnpkg.com/@cypress-design/icon-registry/-/icon-registry-0.27.0.tgz#3feedb6bad82c7a461a348f72e62225fe912c49b"
   integrity sha512-2tiH0YklKLYQ59pduni9aAsCu5uMKf/ZVHFjoP5xZW8em3FP5NZtmIAZzdIWLXjqihz/Q4TcOAL77qi8T11UJQ==
@@ -2297,6 +2304,13 @@
   dependencies:
     "@cypress-design/icon-registry" "^0.27.0"
 
+"@cypress-design/vue-icon@^0.26.0":
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-icon/-/vue-icon-0.26.0.tgz#f56bee36514dc4f9b9606a75f69201e312ff9c70"
+  integrity sha512-ZiMpIvjNWX/x6OJDyhb9VrXXlwPQTgSx87PA4VMVC9JVARXja4UZ950KVTZVEdDuCG8MGYu3N4/hWOrNxCKXCQ==
+  dependencies:
+    "@cypress-design/icon-registry" "^0.28.0"
+
 "@cypress-design/vue-statusicon@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@cypress-design/vue-statusicon/-/vue-statusicon-0.5.0.tgz#a183214a323528be86608229cba1ba99011b80ee"