diff --git a/.vscode/cspell.json b/.vscode/cspell.json
index 0d635abffbad..5649488074b9 100644
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -6,27 +6,41 @@
     "words": [
         "Chainable",
         "composables",
+        "dedup",
         "ERRORED",
         "execa",
+        "Fetchable",
+        "Fetchables",
         "forcedefault",
+        "getenv",
+        "graphcache",
+        "headlessui",
         "Iconify",
+        "intlify",
         "Lachlan",
+        "loggedin",
         "msapplication",
         "NOTESTS",
         "OVERLIMIT",
+        "overscan",
         "Pinia",
         "pnpm",
         "pseudoclass",
         "revparse",
         "Screenshotting",
+        "semibold",
         "shiki",
+        "speclist",
         "testid",
         "TIMEDOUT",
+        "titleize",
+        "topnav",
         "unconfigured",
         "unplugin",
         "unrunnable",
         "unstaged",
         "urql",
+        "viewports",
         "vite",
         "vitejs",
         "vueuse",
@@ -34,4 +48,4 @@
     ],
     "ignoreWords": [],
     "import": []
-}
+}
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 18f46a05a56a..845b2fc55678 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -28,7 +28,7 @@
 
     // Name: Volar
     // Description: Language server for Vue. Required for any syntax highlighting in Vue files.
-    "vue.volar",
+    "Vue.volar",
 
     // Name: Code Spell Checker
     // Description: Add spell-checking help to your code.
diff --git a/graphql-codegen.yml b/graphql-codegen.yml
index 111c3dc6c3c1..c540da7d5694 100644
--- a/graphql-codegen.yml
+++ b/graphql-codegen.yml
@@ -67,11 +67,14 @@ generates:
       - 'packages/frontend-shared/script/codegen-type-map.js'
 
   './packages/graphql/src/gen/cloud-source-types.gen.ts':
+    config:
+      useTypeImports: true
     schema: 'packages/graphql/schemas/cloud.graphql'
     plugins:
       - add:
           content: '/* eslint-disable */'
       - 'typescript'
+      - 'typescript-resolvers'
 
   ###
   # Generates types for us to infer the correct keys for graphcache
diff --git a/package.json b/package.json
index dabd63dfccff..fc41f1d03512 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "@graphql-codegen/typed-document-node": "2.2.8",
     "@graphql-codegen/typescript": "2.4.2",
     "@graphql-codegen/typescript-operations": "2.2.3",
+    "@graphql-codegen/typescript-resolvers": "^2.6.4",
     "@graphql-codegen/typescript-urql-graphcache": "2.2.3",
     "@graphql-tools/delegate": "8.2.1",
     "@graphql-tools/utils": "8.2.3",
@@ -276,4 +277,4 @@
     "sharp": "0.29.3",
     "vue-template-compiler": "2.6.12"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/app/cypress.config.ts b/packages/app/cypress.config.ts
index 772965e18456..7c42687ab789 100644
--- a/packages/app/cypress.config.ts
+++ b/packages/app/cypress.config.ts
@@ -3,9 +3,10 @@ import getenv from 'getenv'
 import { initGitRepoForTestProject, resetGitRepoForTestProject } from './cypress/tasks/git'
 
 const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
+const CYPRESS_INTERNAL_DEV_PROJECT_ID = getenv('CYPRESS_INTERNAL_DEV_PROJECT_ID', process.env.CYPRESS_INTERNAL_DEV_PROJECT_ID || 'sehy69')
 
 export default defineConfig({
-  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : 'sehy69',
+  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : CYPRESS_INTERNAL_DEV_PROJECT_ID,
   retries: {
     runMode: 2,
     openMode: 0,
diff --git a/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts
index d1b480379a04..90d5af4b00d9 100644
--- a/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts
@@ -80,13 +80,13 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
     it('redirects to the specs list with error if a spec is not found', () => {
       cy.visitApp()
-      const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+      const { title, intro, explainer } = defaultMessages.specPage.noSpecError
       const badFilePath = 'src/DoesNotExist.spec.js'
 
       cy.visitApp(`/specs/runner?file=${badFilePath}`)
-      cy.contains(noSpecErrorTitle).should('be.visible')
-      cy.contains(noSpecErrorIntro).should('be.visible')
-      cy.contains(noSpecErrorExplainer).should('be.visible')
+      cy.contains(title).should('be.visible')
+      cy.contains(intro).should('be.visible')
+      cy.contains(explainer).should('be.visible')
       cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
       cy.location()
       .its('href')
@@ -94,11 +94,11 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
       // should clear after reload
       cy.reload()
-      cy.contains(noSpecErrorTitle).should('not.exist')
+      cy.contains(title).should('not.exist')
     })
 
     it('redirects to the specs list with error if an open spec is not found when specs list updates', () => {
-      const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+      const { title, intro, explainer } = defaultMessages.specPage.noSpecError
 
       const goodFilePath = 'src/TestComponent.spec.jsx'
 
@@ -109,9 +109,9 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.withCtx((ctx, o) => {
         ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
       }, { path: goodFilePath }).then(() => {
-        cy.contains(noSpecErrorTitle).should('be.visible')
-        cy.contains(noSpecErrorIntro).should('be.visible')
-        cy.contains(noSpecErrorExplainer).should('be.visible')
+        cy.contains(title).should('be.visible')
+        cy.contains(intro).should('be.visible')
+        cy.contains(explainer).should('be.visible')
         cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
         cy.location()
         .its('href')
diff --git a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
index 7da4e7badfcd..c657da01ae69 100644
--- a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
@@ -98,13 +98,13 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
   })
 
   it('redirects to the specs list with error if a spec is not found when navigating', () => {
-    const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+    const { title, intro, explainer } = defaultMessages.specPage.noSpecError
     const badFilePath = 'cypress/e2e/does-not-exist.spec.js'
 
     cy.visitApp(`/specs/runner?file=${badFilePath}`)
-    cy.contains(noSpecErrorTitle).should('be.visible')
-    cy.contains(noSpecErrorIntro).should('be.visible')
-    cy.contains(noSpecErrorExplainer).should('be.visible')
+    cy.contains(title).should('be.visible')
+    cy.contains(intro).should('be.visible')
+    cy.contains(explainer).should('be.visible')
     cy.contains(getPathForPlatform(badFilePath)).should('be.visible')
     cy.location()
     .its('href')
@@ -114,11 +114,11 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
     // should clear after reload
     cy.reload()
-    cy.contains(noSpecErrorTitle).should('not.exist')
+    cy.contains(title).should('not.exist')
   })
 
   it('redirects to the specs list with error if an open spec is not found when specs list updates', () => {
-    const { noSpecErrorTitle, noSpecErrorIntro, noSpecErrorExplainer } = defaultMessages.specPage
+    const { title, intro, explainer } = defaultMessages.specPage.noSpecError
 
     const goodFilePath = 'cypress/e2e/dom-content.spec.js'
 
@@ -129,9 +129,9 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.withCtx((ctx, o) => {
       ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
     }, { path: goodFilePath }).then(() => {
-      cy.contains(noSpecErrorTitle).should('be.visible')
-      cy.contains(noSpecErrorIntro).should('be.visible')
-      cy.contains(noSpecErrorExplainer).should('be.visible')
+      cy.contains(title).should('be.visible')
+      cy.contains(intro).should('be.visible')
+      cy.contains(explainer).should('be.visible')
       cy.contains(getPathForPlatform(goodFilePath)).should('be.visible')
       cy.location()
       .its('href')
diff --git a/packages/app/cypress/e2e/reporter_header.cy.ts b/packages/app/cypress/e2e/reporter_header.cy.ts
index d4e5abc05ad1..3f5186584463 100644
--- a/packages/app/cypress/e2e/reporter_header.cy.ts
+++ b/packages/app/cypress/e2e/reporter_header.cy.ts
@@ -13,7 +13,7 @@ describe('Reporter Header', () => {
       cy.get('body').type('f')
 
       cy.get('[data-selected-spec="true"]').should('contain', 'dom-content').should('have.length', '1')
-      cy.get('[data-selected-spec="false"]').should('have.length', '18')
+      cy.get('[data-selected-spec="false"]').should('have.length', '27')
     })
 
     it('filters the list of specs when searching for specs', () => {
@@ -26,7 +26,7 @@ describe('Reporter Header', () => {
 
       cy.get('input').clear()
 
-      cy.get('[data-cy="spec-file-item"]').should('have.length', '3')
+      cy.get('[data-cy="spec-file-item"]').should('have.length', 3)
 
       cy.get('input').type('asdf', { force: true })
 
diff --git a/packages/app/cypress/e2e/runs.cy.ts b/packages/app/cypress/e2e/runs.cy.ts
index ff6b60ae315f..09ca8bb91bee 100644
--- a/packages/app/cypress/e2e/runs.cy.ts
+++ b/packages/app/cypress/e2e/runs.cy.ts
@@ -10,7 +10,7 @@ function scaffoldTestingTypeAndVisitRunsPage (testingType: 'e2e' | 'component')
 
   // make sure there are no runs found for the project ID
   cy.remoteGraphQLIntercept(async (obj) => {
-    if (obj.result.data?.cloudProjectBySlug) {
+    if (obj.result.data?.cloudProjectBySlug?.runs?.nodes) {
       obj.result.data.cloudProjectBySlug.runs.nodes = []
     }
 
@@ -136,7 +136,7 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.visitApp()
 
       cy.remoteGraphQLIntercept(async (obj) => {
-        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer')) {
+        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer' || obj.operationName === 'SpecsPageContainer_cloudViewer')) {
           if (obj.result.data?.cloudViewer?.organizations?.nodes) {
             obj.result.data.cloudViewer.organizations.nodes = []
           }
@@ -597,8 +597,6 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       let cloudData: any
 
       cy.loginUser()
-      cy.visitApp()
-
       cy.remoteGraphQLIntercept((obj) => {
         if (obj.operationName === 'Runs_currentProject_cloudProject_cloudProjectBySlug') {
           cloudData = obj.result
@@ -610,7 +608,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         return obj.result
       })
 
+      cy.visitApp()
+
       cy.findByTestId('sidebar-link-runs-page').click()
+
       cy.contains('h2', 'Cannot connect to the Cypress Dashboard')
       cy.percySnapshot()
 
diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
index 27e07abe718e..5fbd5cdd1b36 100644
--- a/packages/app/cypress/e2e/sidebar_navigation.cy.ts
+++ b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -221,7 +221,8 @@ describe('Sidebar Navigation', () => {
 
     it('has a menu item labeled "Runs" which takes you to the Runs page', () => {
       cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('not.exist')
-      cy.findByText('Runs').should('be.visible').click()
+
+      cy.findByTestId('sidebar-link-runs-page').should('have.text', 'Runs').should('be.visible').click()
       cy.get('[data-cy="app-header-bar"]').findByText('Runs').should('be.visible')
       cy.get('.router-link-active').findByText('Runs').should('be.visible')
     })
diff --git a/packages/app/cypress/e2e/specs_list_e2e.cy.ts b/packages/app/cypress/e2e/specs_list_e2e.cy.ts
index 0ef87875ac69..2ec0cc25a7c7 100644
--- a/packages/app/cypress/e2e/specs_list_e2e.cy.ts
+++ b/packages/app/cypress/e2e/specs_list_e2e.cy.ts
@@ -112,19 +112,19 @@ describe('App: Spec List (E2E)', () => {
 
   describe('typing the filter', function () {
     it('displays only matching spec', function () {
-      cy.get('button').contains('14 Matches')
+      cy.get('button').contains('23 Matches')
       cy.findByLabelText('Search Specs').type('content')
       cy.get('[data-cy="spec-item"]')
       .should('have.length', 2)
       .and('contain', 'dom-content.spec.js')
 
-      cy.get('button').contains('2 of 14 Matches')
+      cy.get('button').contains('2 of 23 Matches')
 
       cy.findByLabelText('Search Specs').clear().type('asdf')
       cy.get('[data-cy="spec-item"]')
       .should('have.length', 0)
 
-      cy.get('button').contains('0 of 14 Matches')
+      cy.get('button').contains('0 of 23 Matches')
     })
 
     it('only shows matching folders', () => {
@@ -176,7 +176,7 @@ describe('App: Spec List (E2E)', () => {
       .should('have.value', '')
 
       cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      .should('have.length', 23)
     })
 
     it('clears the filter if the user presses ESC key', function () {
@@ -187,8 +187,7 @@ describe('App: Spec List (E2E)', () => {
       cy.findByLabelText('Search Specs')
       .should('have.value', '')
 
-      cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      cy.get('button').contains('23 Matches')
     })
 
     it('shows empty message if no results', function () {
@@ -203,8 +202,7 @@ describe('App: Spec List (E2E)', () => {
       cy.findByText('Clear Search').click()
       cy.focused().should('have.id', 'spec-filter')
 
-      cy.get('[data-cy="spec-item"]')
-      .should('have.length', 14)
+      cy.get('button').contains('23 Matches')
     })
 
     //TODO: https://cypress-io.atlassian.net/browse/UNIFY-1588
diff --git a/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
new file mode 100644
index 000000000000..28a76b60039b
--- /dev/null
+++ b/packages/app/cypress/e2e/specs_list_latest_runs.cy.ts
@@ -0,0 +1,633 @@
+import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import type { CloudRunStatus } from '@packages/frontend-shared/src/generated/graphql'
+
+function specRowSelector (specFileName: string) {
+  return `[data-cy-row="${specFileName}"]`
+}
+
+function dotSelector (specFileName: string, dotNumber: 0 | 1 | 2 |'latest') {
+  return `${specRowSelector(specFileName)} [data-cy="run-status-dot-${dotNumber}"]`
+}
+
+function dotsSkeletonSelector (specFileName: string) {
+  return `${specRowSelector(specFileName)} [data-cy="run-status-dots-loading"]`
+}
+
+function averageDurationSelector (specFileName: string) {
+  return `${specRowSelector(specFileName)} [data-cy="average-duration"]`
+}
+
+function specShouldShow (specFileName: string, runDotsClasses: string[], latestRunStatus: CloudRunStatus|'PLACEHOLDER') {
+  const latestStatusSpinning = latestRunStatus === 'RUNNING'
+
+  type dotIndex = Parameters<typeof dotSelector>[1];
+  const indexes: dotIndex[] = [0, 1, 2]
+
+  indexes.forEach((i) => {
+    return cy.get(dotSelector(specFileName, i)).should('have.class', `icon-light-${runDotsClasses.length > i ? runDotsClasses[i] : 'gray-300'}`)
+  })
+
+  cy.get(dotSelector(specFileName, 'latest'))
+  .should(`${latestStatusSpinning ? '' : 'not.'}have.class`, 'animate-spin')
+  .and('have.attr', 'data-cy-run-status', latestRunStatus)
+
+  // TODO: add link verification
+  // if (latestRunStatus !== 'PLACEHOLDER') {
+  //   cy.get(`${specRowSelector(specFileName)} [data-cy="run-status-dots"]`).validateExternalLink('https://google.com')
+  // }
+}
+
+function simulateRunData () {
+  cy.remoteGraphQLIntercept(async (obj) => {
+    const fakeRuns = (statuses: string[], idPrefix: string) => {
+      return statuses.map((s, idx) => {
+        return {
+          __typename: 'CloudSpecRun',
+          id: `SpecRun_${idPrefix}_${idx}`,
+          status: s,
+          createdAt: new Date('2022-05-08T03:17:00').toISOString(),
+          completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+          runNumber: 432,
+          groupCount: 2,
+          specDuration: {
+            min: 143003, // 2:23
+            max: 159120, // 3:40
+            __typename: 'SpecDataAggregate',
+          },
+          testsFailed: {
+            min: 1,
+            max: 2,
+            __typename: 'SpecDataAggregate',
+          },
+          testsPassed: {
+            min: 22,
+            max: 23,
+            __typename: 'SpecDataAggregate',
+          },
+          testsSkipped: {
+            min: null,
+            max: null,
+            __typename: 'SpecDataAggregate',
+          },
+          testsPending: {
+            min: 1,
+            max: 2,
+            __typename: 'SpecDataAggregate',
+          },
+          url: 'https://google.com',
+        }
+      })
+    }
+
+    if (obj.result.data && 'cloudSpecByPath' in obj.result.data) {
+      // simulate network latency to allow for caching to register
+      await new Promise((r) => setTimeout(r, 20))
+
+      const statuses = obj.variables.specPath?.includes('accounts_list.spec.js') ?
+        ['PASSED', 'FAILED', 'CANCELLED', 'ERRORED'] :
+        obj.variables.specPath?.includes('app.spec.js') ?
+          [] :
+          ['RUNNING', 'PASSED']
+
+      const runs = fakeRuns(statuses, obj.variables.specPath)
+      const averageDuration = obj.variables.specPath?.includes('accounts_list.spec.js') ?
+        12000 : // 0:12
+        123000 // 2:03
+
+      obj.result.data.cloudSpecByPath = {
+        __typename: 'CloudProjectSpec',
+        retrievedAt: new Date().toISOString(),
+        id: `id${obj.variables.specPath}`,
+        specRuns: {
+          __typename: 'CloudSpecRunConnection',
+          nodes: runs,
+        },
+        averageDuration,
+      }
+    }
+
+    return obj.result
+  })
+}
+
+function allVisibleSpecsShouldBePlaceholders () {
+  cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-gray-300')
+  cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
+  cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-300')
+  cy.findAllByTestId('run-status-dot-latest')
+  .should('not.have.class', 'animate-spin')
+  .and('have.attr', 'data-cy-run-status', 'PLACEHOLDER')
+
+  cy.get('.spec-list-container').scrollTo('bottom')
+  cy.get('.spec-list-container').scrollTo('bottom')
+}
+
+describe('App/Cloud Integration - Latest runs and Average duration', { viewportWidth: 1200, viewportHeight: 900 }, () => {
+  beforeEach(() => {
+    cy.scaffoldProject('cypress-in-cypress')
+    cy.openProject('cypress-in-cypress')
+    cy.startAppServer()
+
+    cy.withCtx((ctx, o) => {
+      o.sinon.stub(ctx.lifecycleManager.git!, 'currentBranch').value('fakeBranch')
+    })
+  })
+
+  context('when no runs are recorded', () => {
+    beforeEach(() => {
+      cy.loginUser()
+
+      cy.remoteGraphQLIntercept(async (obj) => {
+        if (obj.result.data && 'cloudSpecByPath' in obj.result.data) {
+          obj.result.data.cloudSpecByPath = {
+            __typename: 'CloudProjectSpecNotFound',
+            retrievedAt: new Date().toISOString(),
+            id: `id${obj.variables.specPath}`,
+            specRuns: {
+              __typename: 'CloudSpecRunConnection',
+              nodes: [],
+            },
+            averageDuration: null,
+          }
+        }
+
+        return obj.result
+      })
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows placeholders for all visible specs', () => {
+      allVisibleSpecsShouldBePlaceholders()
+    })
+  })
+
+  context('when logged out', () => {
+    beforeEach(() => {
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows placeholders for all visible specs', () => {
+      allVisibleSpecsShouldBePlaceholders()
+    })
+
+    it('shows correct tooltips with log in buttons', () => {
+      cy.findByTestId('latest-runs-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'Connect to the Cypress Dashboard to see the status of your latest runs')
+      .find('button')
+      .should('have.text', 'Log in to the Dashboard')
+      .click()
+
+      cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+        cy.get('button').contains('Log In')
+        cy.get('[aria-label="Close"]').click()
+      })
+
+      cy.findByTestId('latest-runs-header').trigger('mouseleave')
+
+      cy.findByTestId('average-duration-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'Connect to the Cypress Dashboard to see the average spec durations of your latest runs')
+      .find('button')
+      .should('have.text', 'Log in to the Dashboard')
+      .click()
+
+      cy.findByRole('dialog', { name: 'Log in to Cypress' }).within(() => {
+        cy.get('button').contains('Log In')
+        cy.get('[aria-label="Close"]').click()
+      })
+
+      cy.findByTestId('average-duration-header').trigger('mouseleave')
+    })
+  })
+
+  context('when project disconnected', () => {
+    beforeEach(() => {
+      cy.loginUser()
+      cy.withCtx((ctx, o) => {
+        o.sinon.stub(ctx.project, 'projectId').resolves(null)
+      })
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows placeholders for all visible specs', () => {
+      allVisibleSpecsShouldBePlaceholders()
+    })
+
+    it('shows correct tooltips with log in buttons', () => {
+      cy.findByTestId('latest-runs-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'Connect to the Cypress Dashboard to see the status of your latest runs')
+      .find('button')
+      .should('have.text', 'Connect your project')
+      .click()
+
+      cy.findByRole('dialog', { name: 'Create project' }).within(() => {
+        cy.get('[aria-label="Close"]').click({ force: true })
+      })
+
+      cy.findByTestId('latest-runs-header').trigger('mouseleave')
+
+      cy.findByTestId('average-duration-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'Connect to the Cypress Dashboard to see the average spec durations of your latest runs')
+      .find('button')
+      .should('have.text', 'Connect your project')
+      .click()
+
+      cy.findByRole('dialog', { name: 'Create project' }).within(() => {
+        cy.get('[aria-label="Close"]').click({ force: true })
+      })
+
+      cy.findByTestId('average-duration-header').trigger('mouseleave')
+    })
+  })
+
+  context('when not using a branch', () => {
+    beforeEach(() => {
+      cy.withCtx((ctx, o) => {
+        o.sinon.stub(ctx.lifecycleManager.git!, 'currentBranch').value(undefined)
+      })
+
+      cy.loginUser()
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows placeholders for all visible specs', () => {
+      allVisibleSpecsShouldBePlaceholders()
+    })
+  })
+
+  context('when runs are recorded', () => {
+    beforeEach(() => {
+      cy.loginUser()
+
+      simulateRunData()
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows correct tooltips', () => {
+      cy.findByTestId('latest-runs-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'The status of your latest runs in the Cypress Dashboard')
+      .find('button')
+      .should('not.exist')
+
+      cy.findByTestId('latest-runs-header').trigger('mouseleave')
+
+      cy.findByTestId('average-duration-header').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown')
+      .should('contain', 'The average spec durations of your latest runs in the Cypress Dashboard')
+      .find('button')
+      .should('not.exist')
+
+      cy.findByTestId('average-duration-header').trigger('mouseleave')
+    })
+
+    it('shows accurate latest runs and average duration data', () => {
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+
+      // all should use placeholder
+      specShouldShow('app.spec.js', [], 'PLACEHOLDER')
+      cy.get(averageDurationSelector('app.spec.js')).contains('2:03')
+      // shouldn't have a tooltip
+      cy.get(dotSelector('app.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('not.exist')
+      cy.get(dotSelector('app.spec.js', 'latest')).trigger('mouseleave')
+
+      // oldest 2 status dots will use placeholder
+      specShouldShow('accounts_new.spec.js', ['gray-300', 'gray-300', 'jade-400'], 'RUNNING')
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('exist')
+      // TODO: verify the contents of the tooltip
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseleave')
+      cy.get(averageDurationSelector('accounts_new.spec.js')).contains('2:03')
+    })
+
+    it('lazily loads data for off-screen specs', () => {
+      // make sure the virtualized list didn't load z008.spec.js
+      cy.get(specRowSelector('z008.spec.js')).should('not.exist')
+
+      cy.get('.spec-list-container').scrollTo('bottom')
+      // scrolling down should load z008.spec.js with loading status
+      cy.get(dotsSkeletonSelector('z008.spec.js')).should('exist')
+
+      // then z008.spec.js should show proper data
+      specShouldShow('z008.spec.js', ['gray-300', 'gray-300', 'jade-400'], 'RUNNING')
+      cy.get(averageDurationSelector('z008.spec.js')).contains('2:03')
+    })
+
+    describe('preserving tree expansion state', () => {
+      it('should preserve state when row data is updated without additions/deletions', () => {
+        // Collapse a directory
+        cy.get('button[data-cy="row-directory-depth-1"]').first()
+        .should('have.attr', 'aria-expanded', 'true')
+        .click()
+        .should('have.attr', 'aria-expanded', 'false')
+
+        // Trigger cloud specs list change by scrolling
+        cy.get('.spec-list-container')
+        .scrollTo('bottom', { duration: 500 })
+        .wait(100)
+        .scrollTo('top', { duration: 500 })
+
+        // Directory should still be collapsed
+        cy.get('button[data-cy="row-directory-depth-1"]').first()
+        .should('have.attr', 'aria-expanded', 'false')
+      })
+
+      it('should expand all directories when search is performed', () => {
+        // Collapse a directory
+        cy.get('button[data-cy="row-directory-depth-0"]').first()
+        .should('have.attr', 'aria-expanded', 'true')
+        .click()
+        .should('have.attr', 'aria-expanded', 'false')
+        .then((dir) => {
+          // Perform a search/filter operation
+          cy.findByLabelText('Search Specs').type(dir.text()[0])
+        })
+
+        // Previously-collapsed directory should automatically expand
+        cy.get('button[data-cy="row-directory-depth-0"]').first()
+        .should('have.attr', 'aria-expanded', 'true')
+      })
+    })
+
+    it('should retain data after app navigation', () => {
+      // App/Cloud Integration data should load and render to start
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+
+      // Move to Settings page and wait for render
+      cy.get('a[href="#/settings"]').click()
+      cy.location('hash').should('include', '/settings')
+      cy.findByText('Project Settings').should('be.visible')
+
+      // Move back to Specs page and wait for render
+      cy.get('a[href="#/specs"]').click()
+      cy.location('hash').should('include', '/specs')
+      cy.findByText('E2E specs').should('be.visible')
+
+      // App/Cloud Integration data should still be loaded and rendered
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+    })
+  })
+
+  context('polling indicates new data', () => {
+    beforeEach(() => {
+      cy.loginUser()
+
+      cy.remoteGraphQLIntercept(async (obj, testState) => {
+        const fakeRuns = (statuses: string[], idPrefix: string) => {
+          return statuses.map((s, idx) => {
+            return {
+              __typename: 'CloudSpecRun',
+              id: `SpecRun_${idPrefix}_${idx}`,
+              status: s,
+              createdAt: new Date('2022-05-08T03:17:00').toISOString(),
+              completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              runNumber: 432,
+              groupCount: 2,
+              specDuration: {
+                min: 143003, // 2:23
+                max: 159120, // 3:40
+                __typename: 'SpecDataAggregate',
+              },
+              testsFailed: {
+                min: 1,
+                max: 2,
+                __typename: 'SpecDataAggregate',
+              },
+              testsPassed: {
+                min: 22,
+                max: 23,
+                __typename: 'SpecDataAggregate',
+              },
+              testsSkipped: {
+                min: null,
+                max: null,
+                __typename: 'SpecDataAggregate',
+              },
+              testsPending: {
+                min: 1,
+                max: 2,
+                __typename: 'SpecDataAggregate',
+              },
+              url: 'https://google.com',
+            }
+          })
+        }
+
+        const pollingCounter = testState.pollingCounter ?? 0
+
+        if (obj.result.data && 'cloudSpecByPath' in obj.result.data) {
+          // simulate network latency to allow for caching to register
+          await new Promise((r) => setTimeout(r, 20))
+
+          const statuses = pollingCounter < 2 ? ['PASSED', 'FAILED', 'CANCELLED', 'ERRORED'] : ['FAILED', 'PASSED', 'FAILED', 'CANCELLED', 'ERRORED']
+          const runs = fakeRuns(statuses, obj.variables.specPath)
+          const averageDuration = pollingCounter < 2 ? 12000 : 13000
+
+          obj.result.data.cloudSpecByPath = {
+            __typename: 'CloudProjectSpec',
+            retrievedAt: new Date().toISOString(),
+            id: `id${obj.variables.specPath}`,
+            specRuns: {
+              __typename: 'CloudSpecRunConnection',
+              nodes: runs,
+            },
+            averageDuration,
+          }
+        } else if (obj.result.data && 'cloudLatestRunUpdateSpecData' in obj.result.data) {
+          const mostRecentUpdate = pollingCounter > 1 ? new Date().toISOString() : new Date('2022-06-10').toISOString()
+          // initial polling interval is set to every second to avoid long wait times
+          const pollingInterval = pollingCounter > 1 ? 30 : 1
+
+          obj.result.data.cloudLatestRunUpdateSpecData = {
+            __typename: 'CloudLatestRunUpdateSpecData',
+            mostRecentUpdate,
+            pollingInterval,
+          }
+
+          testState.pollingCounter = pollingCounter + 1
+        }
+
+        return obj.result
+      })
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('refreshes view to reflect new data', () => {
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('exist')
+      // TODO: verify the contents of the tooltip
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseleave')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+
+      cy.wait(1200)
+
+      // new results should be shown
+      specShouldShow('accounts_list.spec.js', ['gray-300', 'red-400', 'jade-400'], 'FAILED')
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('exist')
+      // TODO: verify the contents of the tooltip
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseleave')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:13')
+    })
+  })
+
+  context('polling indicates no new data', () => {
+    beforeEach(() => {
+      cy.loginUser()
+
+      cy.remoteGraphQLIntercept(async (obj, testState) => {
+        const fakeRuns = (statuses: string[], idPrefix: string) => {
+          return statuses.map((s, idx) => {
+            return {
+              __typename: 'CloudSpecRun',
+              id: `SpecRun_${idPrefix}_${idx}`,
+              status: s,
+              createdAt: new Date('2022-05-08T03:17:00').toISOString(),
+              completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+              runNumber: 432,
+              groupCount: 2,
+              specDuration: {
+                min: 143003, // 2:23
+                max: 159120, // 3:40
+                __typename: 'SpecDataAggregate',
+              },
+              testsFailed: {
+                min: 1,
+                max: 2,
+                __typename: 'SpecDataAggregate',
+              },
+              testsPassed: {
+                min: 22,
+                max: 23,
+                __typename: 'SpecDataAggregate',
+              },
+              testsSkipped: {
+                min: null,
+                max: null,
+                __typename: 'SpecDataAggregate',
+              },
+              testsPending: {
+                min: 1,
+                max: 2,
+                __typename: 'SpecDataAggregate',
+              },
+              url: 'https://google.com',
+            }
+          })
+        }
+
+        const pollingCounter = testState.pollingCounter ?? 0
+
+        if (obj.result.data && 'cloudSpecByPath' in obj.result.data) {
+          // simulate network latency to allow for caching to register
+          await new Promise((r) => setTimeout(r, 20))
+
+          const statuses = pollingCounter < 2 ? ['PASSED', 'FAILED', 'CANCELLED', 'ERRORED'] : ['FAILED', 'PASSED', 'FAILED', 'CANCELLED', 'ERRORED']
+          const runs = fakeRuns(statuses, obj.variables.specPath)
+          const averageDuration = pollingCounter < 2 ? 12000 : 13000
+
+          obj.result.data.cloudSpecByPath = {
+            __typename: 'CloudProjectSpec',
+            retrievedAt: new Date().toISOString(),
+            id: `id${obj.variables.specPath}`,
+            specRuns: {
+              __typename: 'CloudSpecRunConnection',
+              nodes: runs,
+            },
+            averageDuration,
+          }
+        } else if (obj.result.data && 'cloudLatestRunUpdateSpecData' in obj.result.data) {
+          const mostRecentUpdate = new Date('2022-06-10').toISOString()
+          // initial polling interval is set to every second to avoid long wait times
+          const pollingInterval = pollingCounter > 1 ? 30 : 1
+
+          obj.result.data.cloudLatestRunUpdateSpecData = {
+            __typename: 'CloudLatestRunUpdateSpecData',
+            mostRecentUpdate,
+            pollingInterval,
+          }
+
+          testState.pollingCounter = pollingCounter + 1
+        }
+
+        return obj.result
+      })
+
+      cy.visitApp()
+      cy.findByTestId('sidebar-link-specs-page').click()
+    })
+
+    it('shows the same data after polling', () => {
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('exist')
+      // TODO: verify the contents of the tooltip
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseleave')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+
+      cy.wait(1200)
+
+      // new results should be shown
+      specShouldShow('accounts_list.spec.js', ['orange-400', 'gray-300', 'red-400'], 'PASSED')
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('exist')
+      // TODO: verify the contents of the tooltip
+      cy.get(dotSelector('accounts_new.spec.js', 'latest')).trigger('mouseleave')
+      cy.get(averageDurationSelector('accounts_list.spec.js')).contains('0:12')
+    })
+  })
+})
+
+describe('App/Cloud Integration - Latest runs and Average duration', { viewportWidth: 1200 }, () => {
+  context('when offline', () => {
+    beforeEach(() => {
+      cy.scaffoldProject('cypress-in-cypress')
+      cy.goOffline()
+      cy.wait(300)
+      cy.openProject('cypress-in-cypress')
+      cy.startAppServer()
+
+      cy.loginUser()
+
+      simulateRunData()
+      cy.visitApp()
+
+      cy.findByTestId('sidebar-link-specs-page').click()
+
+      // after navigating to a new page, the browser needs to go offline again
+      cy.goOffline()
+    })
+
+    it('shows placeholders for all visible specs', () => {
+      allVisibleSpecsShouldBePlaceholders()
+    })
+
+    it('shows offline alert then hides it after coming online', () => {
+      cy.findByTestId('offline-alert')
+      .should('contain.text', defaultMessages.specPage.offlineWarning.title)
+      .and('contain.text', defaultMessages.specPage.offlineWarning.explainer)
+
+      cy.goOnline()
+      cy.findByTestId('offline-alert').should('not.exist')
+    })
+  })
+})
diff --git a/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts
index 6ea15de793d6..acbfa8274f87 100644
--- a/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts
+++ b/packages/app/cypress/e2e/subscriptions/authChange-subscription.cy.ts
@@ -33,7 +33,7 @@ describe('authChange subscription', () => {
       cy.contains('Log In')
       cy.wait(500)
       cy.withCtx(async (ctx) => {
-        await ctx.actions.auth.login()
+        await ctx.actions.auth.login('testing', 'testing')
       })
 
       cy.contains('Test User')
@@ -62,7 +62,7 @@ describe('authChange subscription', () => {
       cy.contains('Log In')
       cy.wait(500)
       cy.withCtx(async (ctx) => {
-        await ctx.actions.auth.login()
+        await ctx.actions.auth.login('testing', 'testing')
       })
 
       cy.contains('Test User')
@@ -90,7 +90,7 @@ describe('authChange subscription', () => {
       cy.contains('Log In')
       cy.wait(500)
       cy.withCtx(async (ctx) => {
-        await ctx.actions.auth.login()
+        await ctx.actions.auth.login('testing', 'testing')
       })
 
       cy.contains('Test User')
diff --git a/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
index f6a6cee32c24..d667d7e15685 100644
--- a/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
+++ b/packages/app/cypress/e2e/subscriptions/createCloudOrgModal-subscription.cy.ts
@@ -15,11 +15,10 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
       cy.startAppServer('component')
 
       cy.loginUser()
-      cy.visitApp()
 
       // Simulate no orgs
       cy.remoteGraphQLIntercept(async (obj) => {
-        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer')) {
+        if ((obj.operationName === 'CheckCloudOrganizations_cloudViewerChange_cloudViewer' || obj.operationName === 'Runs_cloudViewer' || obj.operationName === 'SpecsPageContainer_cloudViewer')) {
           if (obj.result.data?.cloudViewer?.organizations?.nodes) {
             obj.result.data.cloudViewer.organizations.nodes = []
           }
@@ -28,6 +27,8 @@ describe('App: Runs', { viewportWidth: 1200 }, () => {
         return obj.result
       })
 
+      cy.visitApp()
+
       cy.findByTestId('sidebar-link-runs-page').click()
 
       cy.findByText(defaultMessages.runs.connect.buttonProject).click()
diff --git a/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts
index 95e5a37f3b61..9cd761419f6d 100644
--- a/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts
+++ b/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts
@@ -12,7 +12,8 @@ describe('specChange subscription', () => {
   describe('specs list', () => {
     it('responds to specChange event for an added file', () => {
       cy.get('[data-cy="spec-item-link"]')
-      .should('have.length', 14)
+      // cannot assert a length since this is a virtualized list
+      // .should('have.length', 14)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -23,7 +24,8 @@ describe('specChange subscription', () => {
       }, { path: getPathForPlatform('cypress/e2e/new-file.spec.js') })
 
       cy.get('[data-cy="spec-item-link"]')
-      .should('have.length', 15)
+      // cannot assert a length since this is a virtualized list
+      // .should('have.length', 15)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -33,7 +35,8 @@ describe('specChange subscription', () => {
 
     it('responds to specChange event for a removed file', () => {
       cy.get('[data-cy="spec-item-link"]')
-      .should('have.length', 14)
+      // cannot assert a length since this is a virtualized list
+      // .should('have.length', 14)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -44,10 +47,12 @@ describe('specChange subscription', () => {
       }, { path: getPathForPlatform('cypress/e2e/dom-list.spec.js') })
 
       cy.get('[data-cy="spec-item-link"]')
-      .should('have.length', 13)
+      // cannot assert a length since this is a virtualized list
+      // .should('have.length', 13)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
+      .should('not.contain', 'dom-list.spec.js')
     })
 
     it('handles adding the first file', () => {
@@ -69,6 +74,15 @@ describe('specChange subscription', () => {
           getPathForPlatform('cypress/e2e/accounts/accounts_new.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin_users_list.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin.user/foo_list.spec.js'),
+          getPathForPlatform('cypress/e2e/z001.spec.js'),
+          getPathForPlatform('cypress/e2e/z002.spec.js'),
+          getPathForPlatform('cypress/e2e/z003.spec.js'),
+          getPathForPlatform('cypress/e2e/z004.spec.js'),
+          getPathForPlatform('cypress/e2e/z005.spec.js'),
+          getPathForPlatform('cypress/e2e/z006.spec.js'),
+          getPathForPlatform('cypress/e2e/z007.spec.js'),
+          getPathForPlatform('cypress/e2e/z008.spec.js'),
+          getPathForPlatform('cypress/e2e/z009.spec.js'),
         ],
       })
 
@@ -102,6 +116,15 @@ describe('specChange subscription', () => {
           getPathForPlatform('cypress/e2e/accounts/accounts_new.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin_users_list.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin.user/foo_list.spec.js'),
+          getPathForPlatform('cypress/e2e/z001.spec.js'),
+          getPathForPlatform('cypress/e2e/z002.spec.js'),
+          getPathForPlatform('cypress/e2e/z003.spec.js'),
+          getPathForPlatform('cypress/e2e/z004.spec.js'),
+          getPathForPlatform('cypress/e2e/z005.spec.js'),
+          getPathForPlatform('cypress/e2e/z006.spec.js'),
+          getPathForPlatform('cypress/e2e/z007.spec.js'),
+          getPathForPlatform('cypress/e2e/z008.spec.js'),
+          getPathForPlatform('cypress/e2e/z009.spec.js'),
         ],
       })
 
@@ -119,7 +142,8 @@ describe('specChange subscription', () => {
 
     it('responds to a cypress.config.js file change', () => {
       cy.get('[data-cy="spec-item-link"]')
-      .should('have.length', 14)
+      // cannot assert a length since this is a virtualized list
+      // .should('have.length', 14)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -161,7 +185,7 @@ e2e: {
 
       cy.get('body').type('f')
       cy.get('[data-cy="spec-file-item"]')
-      .should('have.length', 14)
+      .should('have.length', 23)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -172,7 +196,7 @@ e2e: {
       }, { path: getPathForPlatform('cypress/e2e/new-file.spec.js') })
 
       cy.get('[data-cy="spec-file-item"]')
-      .should('have.length', 15)
+      .should('have.length', 24)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -187,7 +211,7 @@ e2e: {
 
       cy.get('body').type('f')
       cy.get('[data-cy="spec-file-item"]')
-      .should('have.length', 14)
+      .should('have.length', 23)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -198,7 +222,7 @@ e2e: {
       }, { path: getPathForPlatform('cypress/e2e/dom-list.spec.js') })
 
       cy.get('[data-cy="spec-file-item"]')
-      .should('have.length', 13)
+      .should('have.length', 22)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -226,6 +250,15 @@ e2e: {
           getPathForPlatform('cypress/e2e/accounts/accounts_new.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin_users_list.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin.user/foo_list.spec.js'),
+          getPathForPlatform('cypress/e2e/z001.spec.js'),
+          getPathForPlatform('cypress/e2e/z002.spec.js'),
+          getPathForPlatform('cypress/e2e/z003.spec.js'),
+          getPathForPlatform('cypress/e2e/z004.spec.js'),
+          getPathForPlatform('cypress/e2e/z005.spec.js'),
+          getPathForPlatform('cypress/e2e/z006.spec.js'),
+          getPathForPlatform('cypress/e2e/z007.spec.js'),
+          getPathForPlatform('cypress/e2e/z008.spec.js'),
+          getPathForPlatform('cypress/e2e/z009.spec.js'),
         ],
       })
 
@@ -248,7 +281,7 @@ e2e: {
 
       cy.get('body').type('f')
       cy.get('[data-cy="spec-file-item"]')
-      .should('have.length', 14)
+      .should('have.length', 23)
       .should('contain', 'blank-contents.spec.js')
       .should('contain', 'dom-container.spec.js')
       .should('contain', 'dom-content.spec.js')
@@ -290,14 +323,14 @@ e2e: {
       cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.spec.{js,ts}')
 
       cy.get('[data-cy="file-match-indicator"]')
-      .should('contain', '14 Matches')
+      .should('contain', '23 Matches')
 
       cy.withCtx(async (ctx, o) => {
         await ctx.actions.file.writeFileInProject(o.path, '')
       }, { path: getPathForPlatform('cypress/e2e/new-file.spec.js') })
 
       cy.get('[data-cy="file-match-indicator"]')
-      .should('contain', '15 Matches')
+      .should('contain', '24 Matches')
     })
 
     it('responds to specChange event for a removed file', () => {
@@ -307,14 +340,14 @@ e2e: {
       cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.spec.{js,ts}')
 
       cy.get('[data-cy="file-match-indicator"]')
-      .should('contain', '14 Matches')
+      .should('contain', '23 Matches')
 
       cy.withCtx(async (ctx, o) => {
         await ctx.actions.file.removeFileInProject(o.path)
       }, { path: getPathForPlatform('cypress/e2e/dom-list.spec.js') })
 
       cy.get('[data-cy="file-match-indicator"]')
-      .should('contain', '13 Matches')
+      .should('contain', '22 Matches')
     })
 
     it('handles removing the last file', () => {
@@ -340,6 +373,15 @@ e2e: {
           getPathForPlatform('cypress/e2e/accounts/accounts_new.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin_users_list.spec.js'),
           getPathForPlatform('cypress/e2e/admin_users/admin.user/foo_list.spec.js'),
+          getPathForPlatform('cypress/e2e/z001.spec.js'),
+          getPathForPlatform('cypress/e2e/z002.spec.js'),
+          getPathForPlatform('cypress/e2e/z003.spec.js'),
+          getPathForPlatform('cypress/e2e/z004.spec.js'),
+          getPathForPlatform('cypress/e2e/z005.spec.js'),
+          getPathForPlatform('cypress/e2e/z006.spec.js'),
+          getPathForPlatform('cypress/e2e/z007.spec.js'),
+          getPathForPlatform('cypress/e2e/z008.spec.js'),
+          getPathForPlatform('cypress/e2e/z009.spec.js'),
         ],
       })
 
@@ -361,7 +403,7 @@ e2e: {
       cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.spec.{js,ts}')
 
       cy.get('[data-cy="file-match-indicator"]')
-      .should('contain', '14 Matches')
+      .should('contain', '23 Matches')
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject('cypress.config.js',
diff --git a/packages/app/cypress/e2e/support/execute-spec.ts b/packages/app/cypress/e2e/support/execute-spec.ts
index e27b85a0512b..5478bbf37c6a 100644
--- a/packages/app/cypress/e2e/support/execute-spec.ts
+++ b/packages/app/cypress/e2e/support/execute-spec.ts
@@ -9,7 +9,7 @@ declare global {
        * 3. Waits (with a timeout of 30s) for the Rerun all tests button to be present. This ensures all tests have completed
        *
        */
-      waitForSpecToFinish()
+      waitForSpecToFinish(): void
     }
   }
 }
diff --git a/packages/app/src/pages/Specs/Index.vue b/packages/app/src/pages/Specs/Index.vue
index bc39deb8e615..eb6945a9fb6f 100644
--- a/packages/app/src/pages/Specs/Index.vue
+++ b/packages/app/src/pages/Specs/Index.vue
@@ -11,6 +11,7 @@
     <SpecsList
       v-if="query.data.value.currentProject?.specs.length"
       :gql="query.data.value"
+      :most-recent-update="mostRecentUpdate"
       @showCreateSpecModal="showCreateSpecModal"
     />
     <NoSpecsPage
@@ -25,17 +26,27 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { gql, useQuery, useSubscription } from '@urql/vue'
+import { gql, SubscriptionHandlerArg, useQuery, useSubscription } from '@urql/vue'
 import { useI18n } from '@cy/i18n'
 import SpecsList from '../../specs/SpecsList.vue'
 import NoSpecsPage from '../../specs/NoSpecsPage.vue'
 import CreateSpecModal from '../../specs/CreateSpecModal.vue'
-import { SpecsPageContainerDocument, SpecsPageContainer_SpecsChangeDocument } from '../../generated/graphql'
+import { SpecsPageContainerDocument, SpecsPageContainer_SpecsChangeDocument, SpecsPageContainer_SpecListPollingDocument, SpecsPageContainer_BranchInfoDocument } from '../../generated/graphql'
 
 const { t } = useI18n()
 
 gql`
-query SpecsPageContainer {
+query SpecsPageContainer_BranchInfo {
+  currentProject {
+    id
+    branch
+    projectId
+  }
+}
+`
+
+gql`
+query SpecsPageContainer($fromBranch: String!, $hasBranch: Boolean!) {
   ...Specs_SpecsList
   ...NoSpecsPage
   ...CreateSpecModal
@@ -47,7 +58,7 @@ query SpecsPageContainer {
 `
 
 gql`
-subscription SpecsPageContainer_specsChange {
+subscription SpecsPageContainer_specsChange($fromBranch: String!, $hasBranch: Boolean!) {
   specsChange {
     id
     specs {
@@ -58,9 +69,48 @@ subscription SpecsPageContainer_specsChange {
 }
 `
 
-useSubscription({ query: SpecsPageContainer_SpecsChangeDocument })
+gql`
+subscription SpecsPageContainer_specListPolling($fromBranch: String, $projectId: String) {
+  startPollingForSpecs(branchName: $fromBranch, projectId: $projectId)
+}
+`
 
-const query = useQuery({ query: SpecsPageContainerDocument })
+const branchInfo = useQuery({ query: SpecsPageContainer_BranchInfoDocument })
+
+const variables = computed(() => {
+  const fromBranch = branchInfo.data.value?.currentProject?.branch ?? ''
+  const hasBranch = Boolean(fromBranch)
+
+  return { fromBranch, hasBranch }
+})
+
+const pollingVariables = computed(() => {
+  const fromBranch = branchInfo.data.value?.currentProject?.branch ?? null
+  const projectId = branchInfo.data.value?.currentProject?.projectId ?? null
+
+  return { fromBranch, projectId }
+})
+
+useSubscription({
+  query: SpecsPageContainer_SpecsChangeDocument,
+  variables,
+})
+
+const mostRecentUpdate = ref<string|null>(null)
+
+const updateMostRecentUpdate: SubscriptionHandlerArg<any, any> = (_, reportedUpdate) => {
+  mostRecentUpdate.value = reportedUpdate?.startPollingForSpecs ?? null
+}
+
+useSubscription({
+  query: SpecsPageContainer_SpecListPollingDocument,
+  variables: pollingVariables,
+}, updateMostRecentUpdate)
+
+const query = useQuery({
+  query: SpecsPageContainerDocument,
+  variables,
+})
 
 const isDefaultSpecPattern = computed(() => !!query.data.value?.currentProject?.isDefaultSpecPattern)
 
@@ -83,7 +133,6 @@ const closeCreateSpecModal = () => {
   modalIsShown.value = false
   generator.value = null
 }
-
 </script>
 
 <route>
diff --git a/packages/app/src/runs/CloudConnectButton.vue b/packages/app/src/runs/CloudConnectButton.vue
index bc2e681d3645..fa0d25d620c6 100644
--- a/packages/app/src/runs/CloudConnectButton.vue
+++ b/packages/app/src/runs/CloudConnectButton.vue
@@ -10,6 +10,7 @@
   <LoginModal
     v-model="isLoginOpen"
     :gql="props.gql"
+    utm-medium="Runs Tab"
   />
   <CloudConnectModals
     v-if="isProjectConnectOpen"
diff --git a/packages/app/src/runs/RunCard.vue b/packages/app/src/runs/RunCard.vue
index a946a9b60f87..7afae3eccd60 100644
--- a/packages/app/src/runs/RunCard.vue
+++ b/packages/app/src/runs/RunCard.vue
@@ -57,7 +57,7 @@
       </template>
       <template #right>
         <RunResults
-          :gql="run"
+          :gql="props.gql"
         />
       </template>
     </ListRowHeader>
diff --git a/packages/app/src/runs/RunResults.cy.tsx b/packages/app/src/runs/RunResults.cy.tsx
index f374dc3f9f57..efd23fc9146d 100644
--- a/packages/app/src/runs/RunResults.cy.tsx
+++ b/packages/app/src/runs/RunResults.cy.tsx
@@ -14,8 +14,8 @@ describe('<RunResults />', { viewportHeight: 150, viewportWidth: 250 }, () => {
             result[key] = res[key]
           })
         },
-        render (gql) {
-          return <RunResults gql={gql} />
+        render (props) {
+          return <RunResults gql={props} />
         },
       })
 
diff --git a/packages/app/src/runs/RunResults.vue b/packages/app/src/runs/RunResults.vue
index e8b8ec861cb3..fe79447f28f5 100644
--- a/packages/app/src/runs/RunResults.vue
+++ b/packages/app/src/runs/RunResults.vue
@@ -4,36 +4,19 @@
       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="border rounded flex border-gray-200 h-6 text-gray-700 text-size-14px leading-20px">
-      <div
-        v-for="(result, i) in results"
-        :key="i"
-        class="flex font-semibold px-2 items-center hover:bg-indigo-50"
-        :title="result.name"
-        :data-cy="`runResults-${result.name}-count`"
-      >
-        <component
-          :is="result.icon"
-          class="mt-px h-12px mr-1 w-12px"
-          :class="result.class"
-        />
-        <span class="sr-only">{{ result.name }}</span>
-        {{ result.value }}
-      </div>
-    </div>
+    <ResultCounts
+      :total-failed="props.gql.totalFailed"
+      :total-passed="props.gql.totalPassed"
+      :total-pending="props.gql.totalPending"
+      :total-skipped="props.gql.totalSkipped"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
 import type { RunResultsFragment } from '../generated/graphql'
 import { gql } from '@urql/core'
-import SkippedIcon from '~icons/cy/status-skipped_x12.svg'
-import PassedIcon from '~icons/cy/status-passed_x12.svg'
-import FailedIcon from '~icons/cy/status-failed_x12.svg'
-import PendingIcon from '~icons/cy/status-pending_x12.svg'
-import { useI18n } from '@cy/i18n'
-const { t } = useI18n()
+import ResultCounts from '@packages/frontend-shared/src/components/ResultCounts.vue'
 
 gql`
 fragment RunResults on CloudRun {
@@ -50,32 +33,4 @@ const props = defineProps<{
   gql: RunResultsFragment
 }>()
 
-const results = computed(() => {
-  return [
-    {
-      value: props.gql.totalSkipped,
-      class: 'icon-dark-gray-400',
-      icon: SkippedIcon,
-      name: t('runs.results.skipped'),
-    },
-    {
-      value: props.gql.totalPending,
-      class: 'icon-dark-gray-400 icon-light-white',
-      icon: PendingIcon,
-      name: t('runs.results.pending'),
-    },
-    {
-      value: props.gql.totalPassed,
-      class: 'icon-dark-jade-400',
-      icon: PassedIcon,
-      name: t('runs.results.passed'),
-    },
-    {
-      value: props.gql.totalFailed,
-      class: 'icon-dark-red-400',
-      icon: FailedIcon,
-      name: t('runs.results.failed'),
-    },
-  ]
-})
 </script>
diff --git a/packages/app/src/runs/RunsError.spec.tsx b/packages/app/src/runs/RunsError.spec.tsx
index f168bcee2e65..0b3261528c0b 100644
--- a/packages/app/src/runs/RunsError.spec.tsx
+++ b/packages/app/src/runs/RunsError.spec.tsx
@@ -6,17 +6,19 @@ describe('<RunsError />', () => {
     cy.mount({
       name: 'RunsError',
       render () {
-        return (<div class="h-screen">
-          <RunsError
-            message="Cannot connect to the Cypress Dashboard"
-            icon="error"
-            buttonText="Request Access"
-            buttonIcon={PaperAirplaneIcon}
-          >
-          The request timed out when trying to retrieve the recorded runs from the Cypress Dashboard. <br/>
-          Please refresh the page to try again and visit our Status Page if this behavior continues.
-          </RunsError>
-        </div>)
+        return (
+          <div class="h-screen">
+            <RunsError
+              message="Cannot connect to the Cypress Dashboard"
+              icon="error"
+              buttonText="Request Access"
+              buttonIcon={PaperAirplaneIcon}
+            >
+            The request timed out when trying to retrieve the recorded runs from the Cypress Dashboard. <br/>
+            Please refresh the page to try again and visit our Status Page if this behavior continues.
+            </RunsError>
+          </div>
+        )
       },
     })
   })
diff --git a/packages/app/src/runs/RunsErrorRenderer.vue b/packages/app/src/runs/RunsErrorRenderer.vue
index 8ab117956f16..d9278287d8a8 100644
--- a/packages/app/src/runs/RunsErrorRenderer.vue
+++ b/packages/app/src/runs/RunsErrorRenderer.vue
@@ -38,7 +38,7 @@
   </RunsError>
   <template v-else-if="currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized'">
     <RunsError
-      v-if="currentProject.cloudProject.hasRequestedAccess"
+      v-if="hasRequestedAccess"
       icon="access"
       :button-text="t('runs.errors.unauthorizedRequested.button')"
       :button-icon="SendIcon"
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { gql, useMutation } from '@urql/vue'
 import RunsError from './RunsError.vue'
 import { RunsErrorRenderer_RequestAccessDocument } from '../generated/graphql'
@@ -126,13 +126,27 @@ mutation RunsErrorRenderer_RequestAccess( $projectId: String! ) {
 }
 `
 
+const hasRequestedAccess = ref(false)
+
+onMounted(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+    hasRequestedAccess.value = props.gql.currentProject.cloudProject.hasRequestedAccess ?? false
+  }
+})
+
 const requestAccessMutation = useMutation(RunsErrorRenderer_RequestAccessDocument)
 
-function requestAccess () {
+async function requestAccess () {
   const projectId = props.gql.currentProject?.projectId
 
   if (projectId) {
-    requestAccessMutation.executeMutation({ projectId })
+    const result = await requestAccessMutation.executeMutation({ projectId })
+
+    if (result.data?.cloudProjectRequestAccess?.__typename === 'CloudProjectUnauthorized') {
+      hasRequestedAccess.value = result.data.cloudProjectRequestAccess.hasRequestedAccess ?? false
+    } else {
+      hasRequestedAccess.value = false
+    }
   }
 }
 
diff --git a/packages/app/src/specs/AverageDuration.cy.tsx b/packages/app/src/specs/AverageDuration.cy.tsx
new file mode 100644
index 000000000000..b3c3fc1cd1ec
--- /dev/null
+++ b/packages/app/src/specs/AverageDuration.cy.tsx
@@ -0,0 +1,116 @@
+import type { AverageDurationFragment } from '../generated/graphql'
+import AverageDuration from './AverageDuration.vue'
+
+describe('<AverageDuration />', () => {
+  function mountWithDurationValue (duration: number) {
+    const gql: AverageDurationFragment = {
+      id: 'id',
+      data: {
+        __typename: 'CloudProjectSpec',
+        id: 'id',
+        averageDuration: duration,
+        retrievedAt: new Date().toISOString(),
+      },
+    }
+
+    cy.mount(<AverageDuration gql={gql} />)
+  }
+
+  context('zero duration', () => {
+    beforeEach(() => {
+      mountWithDurationValue(0)
+    })
+
+    it('renders nothing', () => {
+      cy.findByTestId('average-duration').should('not.exist')
+      cy.percySnapshot()
+    })
+  })
+
+  context('duration less than 1 second', () => {
+    context('close to zero', () => {
+      beforeEach(() => {
+        mountWithDurationValue(33)
+      })
+
+      it('renders zero duration', () => {
+        cy.findByTestId('average-duration').contains('0:00')
+        cy.percySnapshot()
+      })
+    })
+
+    context('near one second', () => {
+      beforeEach(() => {
+        mountWithDurationValue(850)
+      })
+
+      it('shows correct time', () => {
+        cy.findByTestId('average-duration').contains('0:00')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  context('duration more than 1 second but less than 1 minute', () => {
+    beforeEach(() => {
+      mountWithDurationValue(12 * 1000)
+    })
+
+    it('shows correct time', () => {
+      cy.findByTestId('average-duration').contains('0:12')
+      cy.percySnapshot()
+    })
+  })
+
+  context('duration more than one minute but less than one hour', () => {
+    context('even number of minutes', () => {
+      beforeEach(() => {
+        mountWithDurationValue(120 * 1000)
+      })
+
+      it('shows correct time', () => {
+        // 2:00 = 120 seconds
+        cy.findByTestId('average-duration').contains('2:00')
+        cy.percySnapshot()
+      })
+    })
+
+    context('mix of minutes and seconds', () => {
+      beforeEach(() => {
+        mountWithDurationValue(154 * 1000)
+      })
+
+      it('shows correct time', () => {
+        // 2:34 = 154 seconds
+        cy.findByTestId('average-duration').contains('2:34')
+        cy.percySnapshot()
+      })
+    })
+  })
+
+  context('duration more than one hour', () => {
+    context('small number of hours', () => {
+      beforeEach(() => {
+        mountWithDurationValue(7354 * 1000)
+      })
+
+      it('shows correct time', () => {
+        // 2:02:34 = 7354 seconds
+        cy.findByTestId('average-duration').contains('2:02:34')
+        cy.percySnapshot()
+      })
+    })
+
+    context('large number of hours', () => {
+      beforeEach(() => {
+        mountWithDurationValue(151354 * 1000)
+      })
+
+      it('shows correct time', () => {
+        // 42:02:34 = 151354 seconds
+        cy.findByTestId('average-duration').contains('42:02:34')
+        cy.percySnapshot()
+      })
+    })
+  })
+})
diff --git a/packages/app/src/specs/AverageDuration.vue b/packages/app/src/specs/AverageDuration.vue
new file mode 100644
index 000000000000..133de08cb39c
--- /dev/null
+++ b/packages/app/src/specs/AverageDuration.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-if="props.gql?.data?.__typename === 'CloudProjectSpec' && props.gql?.data?.averageDuration"
+    class="h-full grid text-gray-700 justify-end items-center"
+    data-cy="average-duration"
+  >
+    {{ getDurationString(props.gql.data.averageDuration) }}
+  </div>
+  <div
+    v-else
+    class="h-full grid text-gray-400 justify-end items-center"
+  >
+    --
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import type { AverageDurationFragment } from '../generated/graphql'
+import { gql } from '@urql/vue'
+import { getDurationString } from '@packages/frontend-shared/src/utils/time'
+
+gql`
+fragment AverageDuration on RemoteFetchableCloudProjectSpecResult {
+  id
+  data {
+    ... on CloudProjectSpecNotFound {
+      retrievedAt
+    }
+    ... on CloudProjectSpec {
+      id
+      retrievedAt
+      averageDuration(fromBranch: $fromBranch)
+    }
+  }
+}
+`
+
+const props = defineProps<{
+  gql: AverageDurationFragment | null
+}>()
+
+</script>
diff --git a/packages/app/src/specs/LastUpdatedHeader.cy.tsx b/packages/app/src/specs/LastUpdatedHeader.cy.tsx
new file mode 100644
index 000000000000..d0bc8552c5db
--- /dev/null
+++ b/packages/app/src/specs/LastUpdatedHeader.cy.tsx
@@ -0,0 +1,35 @@
+import LastUpdatedHeader from './LastUpdatedHeader.vue'
+
+import { defaultMessages } from '@cy/i18n'
+
+describe('<LastUpdatedHeader />', () => {
+  function mountWithProps (isGitAvailable: boolean) {
+    cy.mount(() => <div class="flex justify-around"><LastUpdatedHeader isGitAvailable={isGitAvailable} /></div>)
+  }
+
+  it('mounts correctly with git available', () => {
+    mountWithProps(true)
+
+    cy.findByTestId('last-updated-header').trigger('mouseenter')
+
+    const expectedTooltipText = defaultMessages.specPage.lastUpdated.tooltip.gitInfoAvailable
+    .replace('{0}', defaultMessages.specPage.lastUpdated.tooltip.gitStatus)
+
+    cy.get('.v-popper__popper--shown').should('have.text', expectedTooltipText)
+
+    cy.percySnapshot()
+  })
+
+  it('mounts correctly with git unavailable', () => {
+    mountWithProps(false)
+
+    cy.findByTestId('last-updated-header').trigger('mouseenter')
+
+    const expectedTooltipText = defaultMessages.specPage.lastUpdated.tooltip.gitInfoUnavailable
+    .replace('{0}', defaultMessages.specPage.lastUpdated.tooltip.gitInfo)
+
+    cy.get('.v-popper__popper--shown').should('have.text', expectedTooltipText)
+
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/app/src/specs/LastUpdatedHeader.vue b/packages/app/src/specs/LastUpdatedHeader.vue
new file mode 100644
index 000000000000..a7a4968fcffe
--- /dev/null
+++ b/packages/app/src/specs/LastUpdatedHeader.vue
@@ -0,0 +1,69 @@
+<template>
+  <Tooltip
+    placement="top"
+    :is-interactive="true"
+    show-group="last-updated-header"
+  >
+    <div
+      class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
+      tabindex="0"
+      data-cy="last-updated-header"
+    >
+      {{ t('specPage.lastUpdated.header') }}
+    </div>
+    <template
+      #popper
+    >
+      <div
+        class="flex flex-col text-sm text-center max-w-300px p-4 items-center"
+      >
+        <i18n-t
+          v-if="props.isGitAvailable"
+          scope="global"
+          keypath="specPage.lastUpdated.tooltip.gitInfoAvailable"
+        >
+          <ExternalLink
+            :href="docsUrl"
+            class="font-medium text-indigo-500 contents group-hocus:text-indigo-600"
+          >
+            {{ t('specPage.lastUpdated.tooltip.gitStatus') }}
+          </ExternalLink>
+        </i18n-t>
+
+        <i18n-t
+          v-else
+          scope="global"
+          keypath="specPage.lastUpdated.tooltip.gitInfoUnavailable"
+        >
+          <ExternalLink
+            :href="docsUrl"
+            class="font-medium text-indigo-500 contents group-hocus:text-indigo-600"
+          >
+            {{ t('specPage.lastUpdated.tooltip.gitInfo') }}
+          </ExternalLink>
+        </i18n-t>
+      </div>
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import { useI18n } from '@cy/i18n'
+const { t } = useI18n()
+
+const props = defineProps<{
+  isGitAvailable: boolean
+}>()
+
+const docsUrl = getUrlWithParams({
+  url: 'https://on.cypress.io/specs-last-updated',
+  params: {
+    utm_medium: 'Specs Last Updated Tooltip',
+    utm_campaign: 'Last Updated',
+  },
+})
+
+</script>
diff --git a/packages/app/src/specs/RunStatusDots.cy.tsx b/packages/app/src/specs/RunStatusDots.cy.tsx
new file mode 100644
index 000000000000..d099c8d91eb7
--- /dev/null
+++ b/packages/app/src/specs/RunStatusDots.cy.tsx
@@ -0,0 +1,128 @@
+import type { RunStatusDotsFragment } from '../generated/graphql'
+import RunStatusDots from './RunStatusDots.vue'
+import { fakeRuns } from '@packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun'
+import { fill } from 'lodash'
+import type { CloudSpecRun } from '@packages/graphql/src/gen/cloud-source-types.gen'
+
+function mountWithRuns (runs: Required<CloudSpecRun>[]) {
+  const gql: RunStatusDotsFragment = {
+    id: 'id',
+    data: {
+      __typename: 'CloudProjectSpec',
+      retrievedAt: new Date().toISOString(),
+      id: 'id',
+      specRuns: {
+        nodes: [
+          ...runs as any, // suppress TS compiler
+        ],
+      },
+    },
+  }
+
+  cy.mount(() => {
+    return (
+      <div class="flex justify-center">
+        <RunStatusDots gql={gql} specFileExtension=".cy.ts" specFileName="spec"/>
+      </div>
+    )
+  })
+}
+
+describe('<RunStatusDots />', () => {
+  context('runs scenario 1', () => {
+    beforeEach(() => {
+      const runs = fakeRuns(['PASSED', 'FAILED', 'CANCELLED', 'ERRORED'])
+
+      mountWithRuns(runs)
+    })
+
+    it('renders as expected', () => {
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').contains('spec.cy.ts')
+      cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-orange-400')
+      cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-red-400')
+      cy.findAllByTestId('run-status-dot-latest').should('not.have.class', 'animate-spin')
+    })
+  })
+
+  context('runs scenario 2', () => {
+    beforeEach(() => {
+      const runs = fakeRuns(['NOTESTS', 'UNCLAIMED', 'RUNNING', 'TIMEDOUT'])
+
+      mountWithRuns(runs)
+    })
+
+    it('renders as expected', () => {
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').contains('spec.cy.ts')
+      cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-orange-400')
+      cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-indigo-400')
+      cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-400')
+      cy.findAllByTestId('run-status-dot-latest').should('not.have.class', 'animate-spin')
+    })
+  })
+
+  context('single RUNNING status', () => {
+    beforeEach(() => {
+      const runs = fakeRuns(['RUNNING'])
+
+      mountWithRuns(runs)
+    })
+
+    it('renders as expected', () => {
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').contains('spec.cy.ts')
+      cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-latest').should('have.class', 'animate-spin')
+    })
+  })
+
+  context('single UNCLAIMED status', () => {
+    beforeEach(() => {
+      const runs = fakeRuns(['UNCLAIMED'])
+
+      mountWithRuns(runs)
+    })
+
+    it('renders as expected', () => {
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').contains('spec.cy.ts')
+      cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-latest').should('not.have.class', 'animate-spin')
+    })
+  })
+
+  context('no runs', () => {
+    beforeEach(() => {
+      mountWithRuns([])
+    })
+
+    it('renders placeholder without tooltip or link', () => {
+      cy.findByTestId('external').should('not.exist')
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').should('not.exist')
+    })
+  })
+
+  context('unknown/unhandled statuses', () => {
+    beforeEach(() => {
+      const runs = fakeRuns(fill(['', '', '', ''], 'FAKE_UNKNOWN_STATUS' as any))
+
+      mountWithRuns(runs)
+    })
+
+    it('renders as expected', () => {
+      cy.findByTestId('run-status-dots').trigger('mouseenter')
+      cy.get('.v-popper__popper--shown').contains('spec.cy.ts')
+      cy.findAllByTestId('run-status-dot-0').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-1').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-2').should('have.class', 'icon-light-gray-300')
+      cy.findAllByTestId('run-status-dot-latest').should('not.have.class', 'animate-spin')
+    })
+  })
+})
diff --git a/packages/app/src/specs/RunStatusDots.vue b/packages/app/src/specs/RunStatusDots.vue
new file mode 100644
index 000000000000..14620caa480d
--- /dev/null
+++ b/packages/app/src/specs/RunStatusDots.vue
@@ -0,0 +1,206 @@
+<template>
+  <component
+    :is="latestRun? Tooltip : 'div'"
+    placement="top"
+    :is-interactive="true"
+    class="h-16px"
+    :hide-delay="0"
+    :show-group="props.gql?.id"
+    :distance="7"
+    popper-class="RunStatusDots_Tooltip"
+  >
+    <component
+      :is="latestRun? ExternalLink : 'div'"
+      :href="latestRun?.url || '#'"
+      :use-default-hocus="false"
+    >
+      <div
+        class="flex justify-end items-center"
+        data-cy="run-status-dots"
+        tabindex="0"
+      >
+        <div
+          v-for="(dot,i) in dotClasses"
+          :key="i"
+          class="ml-4px"
+        >
+          <i-cy-dot-solid_x4
+            width="4"
+            height="4"
+            :class="dot"
+            :data-cy="'run-status-dot-'+i"
+          />
+        </div>
+        <div>
+          <component
+            :is="latestDot.icon"
+            width="16"
+            height="16"
+            :class="{'animate-spin': latestDot.spin}"
+            :data-cy="'run-status-dot-latest'"
+            :data-cy-run-status="latestDot.status"
+            class="ml-4px"
+          />
+        </div>
+      </div>
+    </component>
+    <template
+      #popper
+    >
+      <ExternalLink
+        v-if="latestRun"
+        :href="latestRun.url ?? '#'"
+        :use-default-hocus="false"
+      >
+        <SpecRunSummary
+          :run="latestRun"
+          :spec-file-no-extension="props.specFileName"
+          :spec-file-extension="props.specFileExtension"
+        />
+      </ExternalLink>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import type { RunStatusDotsFragment } from '../generated/graphql'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import { computed } from 'vue'
+import CancelledIcon from '~icons/cy/cancelled-solid_x16.svg'
+import ErroredIcon from '~icons/cy/errored-solid_x16.svg'
+import FailedIcon from '~icons/cy/failed-solid_x16.svg'
+import PassedIcon from '~icons/cy/passed-solid_x16.svg'
+import PlaceholderIcon from '~icons/cy/placeholder-solid_x16.svg'
+import QueuedIcon from '~icons/cy/queued-solid_x16.svg'
+import RunningIcon from '~icons/cy/running-outline_x16.svg'
+import SpecRunSummary from './SpecRunSummary.vue'
+import { gql } from '@urql/vue'
+
+gql`
+fragment RunStatusDots on RemoteFetchableCloudProjectSpecResult {
+  id
+  data {
+    __typename
+    ... on CloudProjectSpecNotFound {
+      retrievedAt
+      # We query for message even though we don't use it so GQL can discriminate these two types properly
+      message
+    }
+    ... on CloudProjectSpec {
+      id
+      retrievedAt
+      specRuns(first: 4, fromBranch: $fromBranch) {
+        nodes {
+          id
+          runNumber
+          testsFailed{
+            min
+            max
+          }
+          testsPassed{
+            min
+            max
+          }
+          testsPending{
+            min
+            max
+          }
+          testsSkipped{
+            min
+            max
+          }
+          createdAt
+          groupCount
+          specDuration{
+            min
+            max
+          }
+          status
+          url
+        }
+      }
+    }
+  }
+}
+`
+
+const props = defineProps<{
+  gql: RunStatusDotsFragment | null
+  specFileName: string
+  specFileExtension: string
+}>()
+
+const runs = computed(() => {
+  return props.gql?.data?.__typename === 'CloudProjectSpec' ? props.gql?.data?.specRuns?.nodes ?? [] : []
+})
+
+const dotClasses = computed(() => {
+  const statuses = ['placeholder', 'placeholder', 'placeholder']
+
+  if (runs.value && runs.value.length > 0) {
+    // skip the 0th index as it represents the latest run and dotClasses
+    // is meant to represent the 3 prior runs.
+    for (let i = 1; i < Math.min(runs.value.length, 4); i++) {
+      statuses[i - 1] = runs.value[i]?.status ?? ''
+    }
+  }
+
+  return statuses.reverse().map((s) => {
+    switch (s) {
+      case 'PASSED':
+        return 'icon-light-jade-400'
+      case 'RUNNING':
+        return 'icon-light-indigo-400'
+      case 'FAILED':
+        return 'icon-light-red-400'
+      case 'ERRORED':
+      case 'TIMEDOUT':
+        return 'icon-light-orange-400'
+      case 'UNCLAIMED':
+      case 'NOTESTS':
+        return 'icon-light-gray-400'
+      case 'CANCELLED':
+      default:
+        return 'icon-light-gray-300'
+    }
+  })
+})
+
+const latestRun = computed(() => {
+  return runs.value?.[0] ?? null
+})
+
+const latestDot = computed(() => {
+  const status = latestRun.value?.status
+
+  switch (status) {
+    case 'PASSED':
+      return { icon: PassedIcon, spin: false, status }
+    case 'RUNNING':
+      return { icon: RunningIcon, spin: true, status }
+    case 'UNCLAIMED':
+      return { icon: QueuedIcon, spin: false, status }
+    case 'FAILED':
+      return { icon: FailedIcon, spin: false, status }
+    case 'ERRORED':
+    case 'TIMEDOUT':
+      return { icon: ErroredIcon, spin: false, status }
+    case 'NOTESTS':
+    case 'CANCELLED':
+      return { icon: CancelledIcon, spin: false, status }
+    default:
+      return { icon: PlaceholderIcon, spin: false, status: 'PLACEHOLDER' }
+  }
+})
+
+</script>
+
+<style lang="scss">
+.RunStatusDots_Tooltip {
+  .v-popper__arrow-container {
+    margin-left: 13px;
+  }
+}
+</style>
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx b/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
new file mode 100644
index 000000000000..5f765be706c8
--- /dev/null
+++ b/packages/app/src/specs/SpecHeaderCloudDataTooltip.cy.tsx
@@ -0,0 +1,225 @@
+import { SpecHeaderCloudDataTooltipFragmentDoc, SpecHeaderCloudDataTooltip_RequestAccessDocument } from '../generated/graphql-test'
+import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
+import { get, set } from 'lodash'
+import { defaultMessages } from '@cy/i18n'
+
+describe('SpecHeaderCloudDataTooltip', () => {
+  function mountWithStatus (
+    status: 'NOT_FOUND' | 'LOGGED_OUT' | 'CONNECTED' | 'NOT_CONNECTED' | 'UNAUTHORIZED' | 'ACCESS_REQUESTED',
+    mode: string,
+    msgKeys: {
+      header: string
+      connected: string
+      notConnected: string
+      noAccess: string
+      docs: string
+    },
+  ) {
+    cy.mountFragment(SpecHeaderCloudDataTooltipFragmentDoc, {
+      onResult: (ctx) => {
+        set(ctx, 'cloudViewer', { __typename: 'CloudUser', id: 'abc123' })
+
+        switch (status) {
+          case 'LOGGED_OUT':
+            set(ctx, 'cloudViewer', null)
+            break
+          case 'NOT_CONNECTED':
+            set(ctx, 'currentProject.cloudProject.__typename', null)
+            break
+          case 'NOT_FOUND':
+            set(ctx, 'currentProject.cloudProject.__typename', 'CloudProjectNotFound')
+            break
+          case 'ACCESS_REQUESTED':
+            set(ctx, 'currentProject.cloudProject.__typename', 'CloudProjectUnauthorized')
+            set(ctx, 'currentProject.cloudProject.hasRequestedAccess', true)
+            break
+          case 'UNAUTHORIZED':
+            set(ctx, 'currentProject.cloudProject.__typename', 'CloudProjectUnauthorized')
+            break
+          case 'CONNECTED':
+          default:
+            set(ctx, 'currentProject.cloudProject.__typename', 'CloudProjectSpec')
+            break
+        }
+      },
+      render: (gql) => {
+        const showLoginSpy = cy.spy().as('showLoginSpy')
+        const showConnectToProjectSpy = cy.spy().as('showConnectToProjectSpy')
+
+        return (
+          <div class="flex justify-around">
+            <SpecHeaderCloudDataTooltip
+              gql={gql}
+              mode={mode as any}
+              onShowLogin={showLoginSpy}
+              onShowConnectToProject={showConnectToProjectSpy}
+            />
+          </div>)
+      },
+    })
+  }
+
+  [{
+    mode: 'AVG_DURATION',
+    msgKeys: {
+      header: 'specPage.averageDuration.header',
+      connected: 'specPage.averageDuration.tooltip.connected',
+      notConnected: 'specPage.averageDuration.tooltip.notConnected',
+      noAccess: 'specPage.averageDuration.tooltip.noAccess',
+      docs: 'specPage.averageDuration.tooltip.linkText',
+    },
+  }, {
+    mode: 'LATEST_RUNS',
+    msgKeys: {
+      header: 'specPage.latestRuns.header',
+      connected: 'specPage.latestRuns.tooltip.connected',
+      notConnected: 'specPage.latestRuns.tooltip.notConnected',
+      noAccess: 'specPage.latestRuns.tooltip.noAccess',
+      docs: 'specPage.latestRuns.tooltip.linkText',
+    },
+  }].forEach(({ mode, msgKeys }) => {
+    context(mode, () => {
+      context('connected', () => {
+        beforeEach(() => {
+          mountWithStatus('CONNECTED', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.connected).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.get('button').should('not.exist')
+
+          cy.percySnapshot()
+        })
+      })
+
+      context('not connected', () => {
+        beforeEach(() => {
+          mountWithStatus('NOT_CONNECTED', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.notConnected).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.findByTestId('connect-button')
+          .should('be.visible')
+          .click()
+
+          cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+
+          cy.percySnapshot()
+        })
+      })
+
+      context('unauthorized', () => {
+        beforeEach(() => {
+          mountWithStatus('UNAUTHORIZED', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.percySnapshot()
+        })
+
+        it('should update to "Request Sent" when button is triggered', () => {
+          cy.stubMutationResolver(SpecHeaderCloudDataTooltip_RequestAccessDocument, (defineResult) => {
+            return defineResult({
+              cloudProjectRequestAccess: {
+                __typename: 'CloudProjectUnauthorized',
+                message: 'msg',
+                hasRequestedAccess: true,
+              },
+            })
+          })
+
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('request-access-button')
+          .should('be.visible')
+          .click()
+
+          cy.findByTestId('access-requested-button')
+          .should('be.visible')
+          .should('be.disabled')
+        })
+      })
+
+      context('access requested', () => {
+        beforeEach(() => {
+          mountWithStatus('ACCESS_REQUESTED', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.noAccess).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.findByTestId('access-requested-button')
+          .should('be.visible')
+          .should('be.disabled')
+
+          cy.percySnapshot()
+        })
+      })
+
+      context('logged out', () => {
+        beforeEach(() => {
+          mountWithStatus('LOGGED_OUT', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.notConnected).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.findByTestId('login-button')
+          .should('be.visible')
+          .click()
+
+          cy.get('@showLoginSpy').should('have.been.calledOnce')
+
+          cy.percySnapshot()
+        })
+      })
+
+      context('not found', () => {
+        beforeEach(() => {
+          mountWithStatus('NOT_FOUND', mode, msgKeys)
+        })
+
+        it('should render expected tooltip content', () => {
+          cy.get('.v-popper').trigger('mouseenter')
+
+          cy.findByTestId('cloud-data-tooltip-content')
+          .should('be.visible')
+          .and('contain', get(defaultMessages, msgKeys.notConnected).replace('{0}', get(defaultMessages, msgKeys.docs)))
+
+          cy.findByTestId('reconnect-button')
+          .should('be.visible')
+          .click()
+
+          cy.get('@showConnectToProjectSpy').should('have.been.calledOnce')
+
+          cy.percySnapshot()
+        })
+      })
+    })
+  })
+})
diff --git a/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
new file mode 100644
index 000000000000..d8cbf57383c3
--- /dev/null
+++ b/packages/app/src/specs/SpecHeaderCloudDataTooltip.vue
@@ -0,0 +1,244 @@
+<template>
+  <Tooltip
+    placement="top"
+    :is-interactive="true"
+    :show-group="VALUES[mode].header"
+  >
+    <div
+      class="cursor-default decoration-dotted underline underline-gray-300 underline-offset-4"
+      tabindex="0"
+    >
+      <span
+        class="hidden lg:flex"
+        data-cy="full-header-text"
+      >{{ t(VALUES[mode].header) }}</span>
+      <span
+        class="lg:hidden"
+        data-cy="short-header-text"
+      >{{ t(VALUES[mode].shortHeader || VALUES[mode].header) }}</span>
+    </div>
+    <template
+      #popper
+    >
+      <div
+        class="flex flex-col mx-4 text-sm text-center p-4 items-center"
+        data-cy="cloud-data-tooltip-content"
+      >
+        <div
+          :class="{'m-2': projectConnectionStatus!== 'CONNECTED'}"
+          class="max-w-235px"
+        >
+          <i18n-t
+            scope="global"
+            :keypath="tooltipTextKey"
+          >
+            <ExternalLink
+              :href="VALUES[mode].docsUrl"
+              class="font-medium text-indigo-500 contents group-hocus:text-indigo-600"
+            >
+              {{ t(VALUES[mode].docs) }}
+            </ExternalLink>
+          </i18n-t>
+        </div>
+        <div>
+          <Button
+            v-if="projectConnectionStatus === 'LOGGED_OUT'"
+            :prefix-icon="UserOutlineIcon"
+            prefix-icon-class="icon-dark-white icon-light-transparent"
+            data-cy="login-button"
+            @click="emits('showLogin')"
+          >
+            {{ t('specPage.dashboardLoginButton') }}
+          </Button>
+          <Button
+            v-else-if="projectConnectionStatus === 'NOT_CONNECTED'"
+            :prefix-icon="ConnectIcon"
+            prefix-icon-class="icon-dark-white icon-light-transparent"
+            data-cy="connect-button"
+            @click="emits('showConnectToProject')"
+          >
+            {{ t("specPage.connectProjectButton") }}
+          </Button>
+          <Button
+            v-else-if="projectConnectionStatus === 'NOT_FOUND'"
+            :prefix-icon="ConnectIcon"
+            prefix-icon-class="icon-dark-white icon-light-transparent"
+            data-cy="reconnect-button"
+            @click="emits('showConnectToProject')"
+          >
+            {{ t("specPage.reconnectProjectButton") }}
+          </Button>
+          <Button
+            v-else-if="projectConnectionStatus === 'UNAUTHORIZED'"
+            :prefix-icon="SendIcon"
+            prefix-icon-class="icon-dark-white icon-light-transparent"
+            data-cy="request-access-button"
+            @click="requestAccess"
+          >
+            {{ t("specPage.requestAccessButton") }}
+          </Button>
+          <Button
+            v-else-if="projectConnectionStatus === 'ACCESS_REQUESTED'"
+            :prefix-icon="SendIcon"
+            prefix-icon-class="icon-dark-white icon-light-transparent"
+            data-cy="access-requested-button"
+            class="bg-gray-800 border-gray-800"
+            disabled
+          >
+            {{ t("specPage.requestSentButton") }}
+          </Button>
+        </div>
+      </div>
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import { getUrlWithParams } from '@packages/frontend-shared/src/utils/getUrlWithParams'
+import Button from '@cy/components/Button.vue'
+import Tooltip from '@packages/frontend-shared/src/components/Tooltip.vue'
+import ConnectIcon from '~icons/cy/chain-link_x16.svg'
+import UserOutlineIcon from '~icons/cy/user-outline_x16.svg'
+import SendIcon from '~icons/cy/paper-airplane_x16.svg'
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import type { SpecHeaderCloudDataTooltipFragment } from '../generated/graphql'
+import { SpecHeaderCloudDataTooltip_RequestAccessDocument } from '../generated/graphql'
+import { useI18n } from '@cy/i18n'
+import { computed, onMounted, ref } from 'vue'
+import { gql, useMutation } from '@urql/vue'
+const { t } = useI18n()
+
+type CloudDataTooltipMode = 'LATEST_RUNS' | 'AVG_DURATION'
+
+type CouldDataTooltipModeValues = {
+  header: string
+  shortHeader: string
+  connected: string
+  notConnected: string
+  noAccess: string
+  docsUrl: string
+  docs: string
+}
+
+const VALUES: Record<CloudDataTooltipMode, CouldDataTooltipModeValues> = {
+  LATEST_RUNS: {
+    header: 'specPage.latestRuns.header',
+    shortHeader: 'specPage.latestRuns.headerShort',
+    connected: 'specPage.latestRuns.tooltip.connected',
+    notConnected: 'specPage.latestRuns.tooltip.notConnected',
+    noAccess: 'specPage.latestRuns.tooltip.noAccess',
+    docsUrl: getUrlWithParams({
+      url: 'https://on.cypress.io/specs-latest-runs',
+      params: {
+        utm_medium: 'Specs Latest Runs Tooltip',
+        utm_campaign: 'Latest Runs',
+      },
+    }),
+    docs: 'specPage.latestRuns.tooltip.linkText',
+  },
+  AVG_DURATION: {
+    header: 'specPage.averageDuration.header',
+    shortHeader: 'specPage.averageDuration.headerShort',
+    connected: 'specPage.averageDuration.tooltip.connected',
+    notConnected: 'specPage.averageDuration.tooltip.notConnected',
+    noAccess: 'specPage.averageDuration.tooltip.noAccess',
+    docsUrl: getUrlWithParams({
+      url: 'https://on.cypress.io/specs-average-duration',
+      params: {
+        utm_medium: 'Specs Average Duration Tooltip',
+        utm_campaign: 'Average Duration',
+      },
+    }),
+    docs: 'specPage.averageDuration.tooltip.linkText',
+  },
+}
+
+const emits = defineEmits<{
+  (eventName: 'showLogin'): void
+  (eventName: 'showConnectToProject'): void
+}>()
+
+const props = defineProps<{
+  gql: SpecHeaderCloudDataTooltipFragment
+  mode: CloudDataTooltipMode
+}>()
+
+gql`
+fragment SpecHeaderCloudDataTooltip on Query {
+  currentProject {
+    id
+    cloudProject{
+      __typename
+      ... on CloudProjectUnauthorized {
+        hasRequestedAccess
+      }
+    }
+  }
+  ...Auth
+  ...CloudConnectModals
+}
+`
+
+gql`
+mutation SpecHeaderCloudDataTooltip_RequestAccess( $projectId: String! ) {
+  cloudProjectRequestAccess(projectSlug: $projectId) {
+    __typename
+    ... on CloudProjectUnauthorized {
+      message
+      hasRequestedAccess
+    }
+  }
+}
+`
+
+const hasRequestedAccess = ref(false)
+
+onMounted(() => {
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+    hasRequestedAccess.value = props.gql.currentProject.cloudProject.hasRequestedAccess ?? false
+  }
+})
+
+const projectConnectionStatus = computed(() => {
+  if (!props.gql.cloudViewer) return 'LOGGED_OUT'
+
+  if (!props.gql.currentProject?.cloudProject?.__typename) return 'NOT_CONNECTED'
+
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectNotFound') return 'NOT_FOUND'
+
+  if (props.gql.currentProject?.cloudProject?.__typename === 'CloudProjectUnauthorized') {
+    if (hasRequestedAccess.value) {
+      return 'ACCESS_REQUESTED'
+    }
+
+    return 'UNAUTHORIZED'
+  }
+
+  return 'CONNECTED'
+})
+
+const requestAccessMutation = useMutation(SpecHeaderCloudDataTooltip_RequestAccessDocument)
+
+async function requestAccess () {
+  const projectId = props.gql.currentProject?.projectId
+
+  if (projectId) {
+    const result = await requestAccessMutation.executeMutation({ projectId })
+
+    if (result.data?.cloudProjectRequestAccess?.__typename === 'CloudProjectUnauthorized') {
+      hasRequestedAccess.value = result.data.cloudProjectRequestAccess.hasRequestedAccess ?? false
+    } else {
+      hasRequestedAccess.value = false
+    }
+  }
+}
+
+const tooltipTextKey = computed(() => {
+  if (projectConnectionStatus.value === 'CONNECTED') return VALUES[props.mode].connected
+
+  if (['UNAUTHORIZED', 'ACCESS_REQUESTED'].includes(projectConnectionStatus.value)) return VALUES[props.mode].noAccess
+
+  return VALUES[props.mode].notConnected
+})
+
+</script>
diff --git a/packages/app/src/specs/SpecListGitInfo.cy.tsx b/packages/app/src/specs/SpecListGitInfo.cy.tsx
new file mode 100644
index 000000000000..f448d46f730b
--- /dev/null
+++ b/packages/app/src/specs/SpecListGitInfo.cy.tsx
@@ -0,0 +1,81 @@
+import { SpecListRowFragmentDoc } from '../generated/graphql-test'
+import SpecListGitInfo from './SpecListGitInfo.vue'
+
+describe('SpecListGitInfo', () => {
+  const mountWithStatus = (status: 'created' | 'modified' | 'unmodified') => {
+    cy.mountFragment(SpecListRowFragmentDoc, {
+      onResult: (ctx) => {
+        ctx.author = 'Bob'
+        ctx.lastModifiedHumanReadable = 'Last Tuesday'
+        ctx.lastModifiedTimestamp = new Date('02-02-2022').toISOString()
+        ctx.statusType = status
+        ctx.shortHash = 'abc123'
+        ctx.subject = 'chore: did stuff'
+      },
+      render: (gql) => <SpecListGitInfo gql={gql} />,
+    })
+
+    cy.findByTestId('git-info-row').as('row')
+  }
+
+  context('created', () => {
+    beforeEach(() => {
+      mountWithStatus('created')
+    })
+
+    it('renders created icon and expected text', () => {
+      cy.get('@row').should('have.text', 'Last Tuesday')
+      cy.findByTestId('created-icon').should('be.visible')
+    })
+
+    it('provides expected tooltip content', () => {
+      cy.findByTestId('git-info-tooltip').should('not.exist')
+      cy.get('.v-popper').trigger('mouseenter')
+      cy.findByTestId('git-info-tooltip').should('be.visible')
+      .and('have.text', 'Created')
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('modified', () => {
+    beforeEach(() => {
+      mountWithStatus('modified')
+    })
+
+    it('renders created icon and expected text', () => {
+      cy.get('@row').should('have.text', 'Last Tuesday')
+      cy.findByTestId('modified-icon').should('be.visible')
+    })
+
+    it('provides expected tooltip content', () => {
+      cy.findByTestId('git-info-tooltip').should('not.exist')
+      cy.get('.v-popper').trigger('mouseenter')
+      cy.findByTestId('git-info-tooltip').should('be.visible')
+      .and('have.text', 'Modified')
+
+      cy.percySnapshot()
+    })
+  })
+
+  context('unmodified', () => {
+    beforeEach(() => {
+      mountWithStatus('unmodified')
+    })
+
+    it('renders created icon and expected text', () => {
+      cy.get('@row').should('have.text', 'Last Tuesday')
+      cy.findByTestId('unmodified-icon').should('be.visible')
+    })
+
+    it('provides expected tooltip content', () => {
+      cy.findByTestId('git-info-tooltip').should('not.exist')
+      cy.get('.v-popper').trigger('mouseenter')
+      cy.findByTestId('git-info-tooltip').should('be.visible')
+      .and('contain', 'chore: did stuff')
+      .and('contain', 'abc123 by Bob')
+
+      cy.percySnapshot()
+    })
+  })
+})
diff --git a/packages/app/src/specs/SpecListGitInfo.vue b/packages/app/src/specs/SpecListGitInfo.vue
index 94b1a0144fdc..ce34c395d2ec 100644
--- a/packages/app/src/specs/SpecListGitInfo.vue
+++ b/packages/app/src/specs/SpecListGitInfo.vue
@@ -1,23 +1,33 @@
 <template>
   <div
-    class="h-full grid gap-9px git-info-row items-center"
-    :class="{'grid-cols-[16px,auto]': classes.icon}"
+    class="h-full grid grid-col-1 git-info-row justify-start items-center"
     data-cy="git-info-row"
   >
     <Tooltip
       v-if="classes.icon"
       :key="props.gql?.statusType ?? undefined"
       placement="top"
-      class="h-full grid items-center"
+      class="h-full truncate"
+      data-cy="tooltip"
     >
-      <component
-        :is="classes.icon"
-        :class="classes.iconClasses"
-      />
+      <button class="flex h-full gap-9px justify-start items-center">
+        <div>
+          <component
+            :is="classes.icon"
+            :class="classes.iconClasses"
+            :data-cy="classes.testId"
+          />
+        </div>
+        <div
+          class="text-gray-700 overflow-hidden truncate"
+        >
+          {{ props.gql?.lastModifiedHumanReadable ?? '' }}
+        </div>
+      </button>
       <template
         #popper
       >
-        <div>
+        <div data-cy="git-info-tooltip">
           <p class="max-w-sm text-sm truncate overflow-hidden">
             {{ tooltipMainText }}
           </p>
@@ -31,6 +41,7 @@
       </template>
     </Tooltip>
     <div
+      v-else
       class="text-gray-700 overflow-hidden truncate"
     >
       {{ props.gql?.lastModifiedHumanReadable ?? '' }}
@@ -70,14 +81,17 @@ const classes = computed(() => {
     created: {
       icon: DocumentIconPlus,
       iconClasses: 'icon-dark-jade-400 icon-light-jade-50',
+      testId: 'created-icon',
     },
     modified: {
       icon: DocumentIconPlusMinus,
       iconClasses: 'icon-dark-orange-400 icon-light-orange-50',
+      testId: 'modified-icon',
     },
     unmodified: {
       icon: CommitIcon,
       iconClasses: 'icon-light-gray-500',
+      testId: 'unmodified-icon',
     },
     noGitInfo: {},
   }[props.gql?.statusType || 'unmodified']
diff --git a/packages/app/src/specs/SpecRunSummary.cy.tsx b/packages/app/src/specs/SpecRunSummary.cy.tsx
new file mode 100644
index 000000000000..e711be4dd4a6
--- /dev/null
+++ b/packages/app/src/specs/SpecRunSummary.cy.tsx
@@ -0,0 +1,213 @@
+import SpecRunSummary from './SpecRunSummary.vue'
+import { exampleRuns } from '@packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun'
+import type { CloudSpecRun } from '@packages/graphql/src/gen/cloud-source-types.gen'
+
+function validateTopBorder (color: string): void {
+  cy.findByTestId('spec-run-summary')
+  .should('have.css', 'border-top', `4px solid ${color}`)
+}
+
+function validateFilename (expected: string): void {
+  cy.findByTestId('spec-run-filename').should('have.text', expected)
+}
+
+function validateTimeAgo (expected: string): void {
+  cy.findByTestId('spec-run-time-ago')
+  .should('have.text', expected)
+}
+
+function validateStatus (status: string, color: string): void {
+  cy.findByTestId('spec-run-status')
+  .should('have.css', 'color', color)
+  .and('have.text', status)
+}
+
+function validateDuration1 (expected: string): void {
+  cy.findByTestId('spec-run-duration-1')
+  .should('have.text', expected)
+}
+
+function validateDuration2 (expected: string): void {
+  cy.findByTestId('spec-run-duration-2')
+  .should('have.text', expected)
+}
+
+function validateResultCountsVisible (): void {
+  cy.findByTestId('spec-run-result-counts').should('be.visible')
+}
+
+describe('<SpecRunSummary />', { keystrokeDelay: 0 }, () => {
+  const runs = exampleRuns()
+
+  function mountWithRun (run: CloudSpecRun) {
+    const createdAt = new Date()
+
+    createdAt.setFullYear(createdAt.getFullYear() - 1)
+    run.createdAt = createdAt.toISOString()
+    cy.mount(<SpecRunSummary run={run} specFileNoExtension="mySpecFile" specFileExtension=".spec.ts" />)
+  }
+
+  context('passing', () => {
+    beforeEach(() => {
+      mountWithRun(runs[0])
+    })
+
+    it('should render expected content', () => {
+      // Green border
+      validateTopBorder('rgb(31, 169, 113)')
+      validateFilename('mySpecFile.spec.ts')
+      // Green text
+      validateStatus('Passed', 'rgb(0, 129, 77)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('failed', () => {
+    beforeEach(() => {
+      mountWithRun(runs[1])
+    })
+
+    it('should render expected content', () => {
+      // Red border
+      validateTopBorder('rgb(228, 87, 112)')
+      validateFilename('mySpecFile.spec.ts')
+      // Red text
+      validateStatus('Failed', 'rgb(198, 43, 73)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('1:02:40')
+      cy.findByTestId('spec-run-duration-2').should('not.exist')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('canceled', () => {
+    beforeEach(() => {
+      mountWithRun(runs[2])
+    })
+
+    it('should render expected content', () => {
+      // Gray border
+      validateTopBorder('rgb(144, 149, 173)')
+      validateFilename('mySpecFile.spec.ts')
+      // Gray text
+      validateStatus('Canceled', 'rgb(90, 95, 122)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('errored', () => {
+    beforeEach(() => {
+      mountWithRun(runs[3])
+    })
+
+    it('should render expected content', () => {
+      // Orange border
+      validateTopBorder('rgb(219, 121, 3)')
+      validateFilename('mySpecFile.spec.ts')
+      // Orange text
+      validateStatus('Errored', 'rgb(189, 88, 0)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('1:02:40')
+      validateDuration2('10:26:40')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('no tests', () => {
+    beforeEach(() => {
+      mountWithRun(runs[4])
+    })
+
+    it('should render expected content', () => {
+      // Gray border
+      validateTopBorder('rgb(144, 149, 173)')
+      validateFilename('mySpecFile.spec.ts')
+      validateStatus('No tests', 'rgb(90, 95, 122)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('running', () => {
+    beforeEach(() => {
+      mountWithRun(runs[6])
+    })
+
+    it('should render expected content', () => {
+      // Blue border
+      validateTopBorder('rgb(100, 112, 243)')
+      validateFilename('mySpecFile.spec.ts')
+      // Blue text
+      validateStatus('Running', 'rgb(73, 86, 227)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('timed out', () => {
+    beforeEach(() => {
+      mountWithRun(runs[7])
+    })
+
+    it('should render expected content', () => {
+      // Orange border
+      validateTopBorder('rgb(219, 121, 3)')
+      validateFilename('mySpecFile.spec.ts')
+      // Orange text
+      validateStatus('Timed out', 'rgb(189, 88, 0)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('queued', () => {
+    beforeEach(() => {
+      mountWithRun(runs[8])
+    })
+
+    it('should render expected content', () => {
+      // Gray border
+      validateTopBorder('rgb(144, 149, 173)')
+      validateFilename('mySpecFile.spec.ts')
+      // Gray text
+      validateStatus('Queued', 'rgb(90, 95, 122)')
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+
+  context('unhandled status', () => {
+    beforeEach(() => {
+      mountWithRun(runs[9])
+    })
+
+    it('should render expected content', () => {
+      // Gray border
+      validateTopBorder('rgb(144, 149, 173)')
+      validateFilename('mySpecFile.spec.ts')
+
+      // Should not render any status text
+      cy.findByTestId('spec-run-status')
+      .should('not.exist')
+
+      validateTimeAgo('1 year ago')
+      validateDuration1('2:23')
+      validateDuration2('2:39')
+      validateResultCountsVisible()
+    })
+  })
+})
diff --git a/packages/app/src/specs/SpecRunSummary.vue b/packages/app/src/specs/SpecRunSummary.vue
new file mode 100644
index 000000000000..66186a71a843
--- /dev/null
+++ b/packages/app/src/specs/SpecRunSummary.vue
@@ -0,0 +1,184 @@
+<template>
+  <div
+    v-if="props.run"
+    class="flex flex-col p-4 gap-2 items-center"
+    :class="highlightColor"
+    data-cy="spec-run-summary"
+  >
+    <div
+      class="max-w-60 truncate overflow-hidden"
+      data-cy="spec-run-filename"
+    >
+      <span class="font-semibold text-gray-800">{{ props.specFileNoExtension }}</span><span class="text-gray-600">{{ props.specFileExtension }}</span>
+    </div>
+    <div class="flex flex-row text-gray-700 text-size-14px gap-2 items-center">
+      <div
+        v-if="statusText"
+        :class="'text-'+statusTextColor"
+        class="font-medium"
+        data-cy="spec-run-status"
+      >
+        {{ statusText }}
+      </div>
+      <i-cy-dot-solid_x4
+        v-if="statusText"
+        width="4px"
+        height="4px"
+        class="icon-light-gray-200"
+      />
+      <div
+        v-if="props.run.createdAt"
+        data-cy="spec-run-time-ago"
+      >
+        {{ getTimeAgo(props.run.createdAt) }}
+      </div>
+      <i-cy-dot-solid_x4
+        width="4px"
+        height="4px"
+        class="icon-light-gray-200"
+      />
+      <div data-cy="spec-run-duration-1">
+        {{ durationText1 }}
+      </div>
+      <div
+        v-if="durationText2"
+        class="m-[-5px] text-gray-200"
+      >
+        -
+      </div>
+      <div
+        v-if="durationText2"
+        data-cy="spec-run-duration-2"
+      >
+        {{ durationText2 }}
+      </div>
+    </div>
+    <ResultCounts
+      v-if="runResults"
+      v-bind="runResults"
+      class="my-2"
+      data-cy="spec-run-result-counts"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+import type { CloudSpecRun, SpecDataAggregate } from '../../../graphql/src/gen/cloud-source-types.gen'
+import ResultCounts, { ResultCountsProps } from '@packages/frontend-shared/src/components/ResultCounts.vue'
+import { getTimeAgo, getDurationString } from '@packages/frontend-shared/src/utils/time'
+
+const props = defineProps<{
+  run: CloudSpecRun
+  specFileNoExtension: string
+  specFileExtension: string
+}>()
+
+const getAggregateTestCountString = (agg: SpecDataAggregate) => {
+  if (agg.min == null) return '0'
+
+  if (!agg.max || agg.min === agg.max) return agg.min
+
+  return `${agg.min}-${agg.max}`
+}
+
+const durationText1 = computed(() => {
+  if (props.run?.specDuration?.min == null) return '--'
+
+  return getDurationString(props.run?.specDuration?.min)
+})
+
+const durationText2 = computed(() => {
+  if (props.run?.specDuration?.min == null) return null
+
+  // since props.run?.specDuration?.min and props.run?.specDuration?.max are in milliseconds, we want to make sure the
+  // user won't get a string like "2 - 2" for {min: 2003, max: 2010}
+  if (!props.run?.specDuration?.max || Math.round(props.run?.specDuration?.min / 1000) === Math.round(props.run?.specDuration?.max / 1000)) return null
+
+  return getDurationString(props.run?.specDuration?.max)
+})
+
+const runResults = computed(() => {
+  if (!props.run) return null
+
+  return {
+    id: props.run.id,
+    totalFailed: getAggregateTestCountString(props.run.testsFailed ?? {}),
+    totalPassed: getAggregateTestCountString(props.run.testsPassed ?? {}),
+    totalPending: getAggregateTestCountString(props.run.testsPending ?? {}),
+    totalSkipped: getAggregateTestCountString(props.run.testsSkipped ?? {}),
+  } as ResultCountsProps
+})
+
+const statusText = computed(() => {
+  if (!props.run?.status) return null
+
+  switch (props.run.status) {
+    case 'CANCELLED': return 'Canceled'
+    case 'ERRORED': return 'Errored'
+    case 'FAILED': return 'Failed'
+    case 'NOTESTS': return 'No tests'
+    case 'PASSED': return 'Passed'
+    case 'UNCLAIMED': return 'Queued'
+    case 'RUNNING': return 'Running'
+    case 'TIMEDOUT': return 'Timed out'
+    default: return null
+  }
+})
+
+const statusColor = computed(() => {
+  if (!props.run?.status) return 'gray'
+
+  switch (props.run.status) {
+    case 'ERRORED':
+    case 'TIMEDOUT':
+      return 'orange'
+    case 'FAILED':
+      return 'red'
+    case 'PASSED':
+      return 'jade'
+    case 'RUNNING':
+      return 'indigo'
+    case 'CANCELLED':
+    case 'NOTESTS':
+    case 'UNCLAIMED':
+    default: return 'gray'
+  }
+})
+
+const highlightColor = computed(() => {
+  const color = statusColor.value
+
+  if (color === 'gray') return 'gray-500'
+
+  return `${color}-400`
+})
+
+const statusTextColor = computed(() => {
+  const color = statusColor.value
+
+  if (color === 'gray') return 'gray-700'
+
+  return `${color}-500`
+})
+
+</script>
+
+<style lang="scss" scoped>
+.orange-400 {
+    border-top: 4px solid $orange-400 !important;
+}
+.red-400 {
+    border-top: 4px solid $red-400 !important;
+}
+.jade-400 {
+    border-top: 4px solid $jade-400 !important;
+}
+.indigo-400 {
+    border-top: 4px solid $indigo-400 !important;
+}
+.gray-500 {
+    border-top: 4px solid $gray-500 !important;
+}
+</style>
diff --git a/packages/app/src/specs/SpecsList.cy.tsx b/packages/app/src/specs/SpecsList.cy.tsx
index 37bc249b7aec..459b7c37b069 100644
--- a/packages/app/src/specs/SpecsList.cy.tsx
+++ b/packages/app/src/specs/SpecsList.cy.tsx
@@ -2,38 +2,39 @@ import SpecsList from './SpecsList.vue'
 import { Specs_SpecsListFragmentDoc, SpecsListFragment, TestingTypeEnum } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 
-function mountWithTestingType (testingType: TestingTypeEnum) {
-  cy.mountFragment(Specs_SpecsListFragmentDoc, {
-    onResult: (ctx) => {
-      if (!ctx.currentProject) throw new Error('need current project')
-
-      ctx.currentProject.currentTestingType = testingType
-
-      return ctx
-    },
-    render: (gqlVal) => {
-      return <SpecsList gql={gqlVal} />
-    },
-  })
-}
-
-let specs: Array<SpecsListFragment> = []
-
 describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
+  let specs: Array<SpecsListFragment>
+
+  function mountWithTestingType (testingType: TestingTypeEnum | undefined) {
+    specs = []
+    const showCreateSpecModalSpy = cy.spy().as('showCreateSpecModalSpy')
+
+    cy.mountFragment(Specs_SpecsListFragmentDoc, {
+      variableTypes: {
+        hasBranch: 'Boolean',
+      },
+      variables: {
+        hasBranch: true,
+      },
+      onResult: (ctx) => {
+        if (!ctx.currentProject) throw new Error('need current project')
+
+        specs = ctx.currentProject?.specs || []
+        if (testingType) {
+          ctx.currentProject.currentTestingType = testingType
+        }
+
+        return ctx
+      },
+      render: (gqlVal) => {
+        return <SpecsList gql={gqlVal} onShowCreateSpecModal={showCreateSpecModalSpy} />
+      },
+    })
+  }
+
   context('when testingType is unset', () => {
     beforeEach(() => {
-      const showCreateSpecModalSpy = cy.spy().as('showCreateSpecModalSpy')
-
-      cy.mountFragment(Specs_SpecsListFragmentDoc, {
-        onResult: (ctx) => {
-          specs = ctx.currentProject?.specs || []
-
-          return ctx
-        },
-        render: (gqlVal) => {
-          return <SpecsList gql={gqlVal} onShowCreateSpecModal={showCreateSpecModalSpy} />
-        },
-      })
+      mountWithTestingType(undefined)
     })
 
     it('should filter specs', () => {
@@ -119,6 +120,51 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
       cy.contains(defaultMessages.createSpec.newSpec).click()
       cy.get('@showCreateSpecModalSpy').should('have.been.calledOnce')
     })
+
+    describe('column headers', () => {
+      // Spec name (first) column is handled by type-specific tests below
+
+      it('should display last updated column', () => {
+        cy.findByTestId('last-updated-header').as('header')
+        cy.get('@header').should('be.visible').and('have.text', 'Last updated')
+      })
+
+      context('when screen is wide', { viewportWidth: 1200 }, () => {
+        it('should display latest runs column with full text', () => {
+          cy.findByTestId('latest-runs-header').within(() => {
+            cy.findByTestId('short-header-text').should('not.be.visible')
+            cy.findByTestId('full-header-text').should('be.visible')
+            .and('have.text', 'Latest runs')
+          })
+        })
+
+        it('should display average duration column with full text', () => {
+          cy.findByTestId('average-duration-header').within(() => {
+            cy.findByTestId('short-header-text').should('not.be.visible')
+            cy.findByTestId('full-header-text').should('be.visible')
+            .and('have.text', 'Average duration')
+          })
+        })
+      })
+
+      context('when screen is narrow', { viewportWidth: 800 }, () => {
+        it('should display latest runs column with short text', () => {
+          cy.findByTestId('latest-runs-header').within(() => {
+            cy.findByTestId('full-header-text').should('not.be.visible')
+            cy.findByTestId('short-header-text').should('be.visible')
+            .and('have.text', 'Runs')
+          })
+        })
+
+        it('should display average duration column with full text', () => {
+          cy.findByTestId('average-duration-header').within(() => {
+            cy.findByTestId('full-header-text').should('not.be.visible')
+            cy.findByTestId('short-header-text').should('be.visible')
+            .and('have.text', 'Duration')
+          })
+        })
+      })
+    })
   })
 
   context('when testingType is e2e', () => {
@@ -127,7 +173,7 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
     })
 
     it('should display the e2e testing header', () => {
-      cy.get('[data-cy="specs-testing-type-header"]').should('have.text', 'E2E specs')
+      cy.findByTestId('specs-testing-type-header').should('have.text', 'E2E specs')
     })
   })
 
@@ -137,7 +183,7 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
     })
 
     it('should display the component testing header', () => {
-      cy.get('[data-cy="specs-testing-type-header"]').should('have.text', 'Component specs')
+      cy.findByTestId('specs-testing-type-header').should('have.text', 'Component specs')
     })
   })
 })
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 0a9a1b29a300..7a2024fcd3a2 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -4,17 +4,64 @@
       v-if="isAlertOpen"
       v-model="isAlertOpen"
       status="error"
-      :title="t('specPage.noSpecErrorTitle')"
+      :title="t('specPage.noSpecError.title')"
       class="mb-16px"
       :icon="WarningIcon"
       dismissible
     >
       <p class="mb-24px">
-        {{ t('specPage.noSpecErrorIntro') }} <InlineCodeFragment variant="error">
+        {{ t('specPage.noSpecError.intro') }} <InlineCodeFragment variant="error">
           {{ route.params.unrunnable }}
         </InlineCodeFragment>
       </p>
-      <p>{{ t('specPage.noSpecErrorExplainer') }}</p>
+      <p>{{ t('specPage.noSpecError.explainer') }}</p>
+    </Alert>
+    <Alert
+      v-if="isOffline"
+      v-model="isOffline"
+      data-cy="offline-alert"
+      status="warning"
+      :title="t('specPage.offlineWarning.title')"
+      class="mb-16px"
+      :icon="WarningIcon"
+      dismissible
+    >
+      <p class="mb-24px">
+        {{ t('specPage.offlineWarning.explainer') }}
+      </p>
+    </Alert>
+    <Alert
+      v-if="shouldShowFetchError"
+      v-model="shouldShowFetchError"
+      status="warning"
+      :title="t('specPage.fetchFailedWarning.title')"
+      class="mb-16px"
+      :icon="WarningIcon"
+      dismissible
+    >
+      <p>
+        {{ t('specPage.fetchFailedWarning.explainer1') }}
+      </p>
+      <p>
+        <i18n-t
+          scope="global"
+          keypath="specPage.fetchFailedWarning.explainer2"
+        >
+          <ExternalLink
+            href="https://www.cypressstatus.com"
+            class="font-medium text-indigo-500 contents group-hocus:text-indigo-600"
+          >
+            Status Page
+          </ExternalLink>
+        </i18n-t>
+      </p>
+      <Button
+        :prefix-icon="RefreshIcon"
+        class="mt-24px"
+        @click="refetchFailedCloudData"
+      >
+        {{ t('specPage.fetchFailedWarning.refreshButton') }}
+      </Button>
     </Alert>
     <SpecsListHeader
       v-model="search"
@@ -33,17 +80,36 @@
     />
     <div
       v-if="specs.length"
-      class="mb-4 grid grid-cols-2 children:font-medium children:text-gray-800 "
+      class="mb-4 grid grid-cols-7 md:grid-cols-9 children:font-medium children:text-gray-800"
+      :style="`padding-right: ${scrollbarOffset + 20}px`"
     >
       <div
-        class="flex items-center justify-between"
+        class="flex col-span-4 items-center justify-between"
         data-cy="specs-testing-type-header"
       >
         {{ props.gql.currentProject?.currentTestingType === 'component' ?
           t('specPage.componentSpecsHeader') : t('specPage.e2eSpecsHeader') }}
       </div>
-      <div class="flex items-center justify-between">
-        <div>{{ t('specPage.lastUpdatedHeader') }}</div>
+      <div class="flex col-span-2 items-center justify-between truncate">
+        <LastUpdatedHeader :is-git-available="isGitAvailable" />
+      </div>
+      <div class="flex items-center justify-end whitespace-nowrap">
+        <SpecHeaderCloudDataTooltip
+          :gql="props.gql"
+          mode="LATEST_RUNS"
+          data-cy="latest-runs-header"
+          @showLogin="showLogin('Specs Latest Runs Tooltip')"
+          @showConnectToProject="showConnectToProject"
+        />
+      </div>
+      <div class="hidden items-center justify-end truncate md:flex md:col-span-2">
+        <SpecHeaderCloudDataTooltip
+          :gql="props.gql"
+          mode="AVG_DURATION"
+          data-cy="average-duration-header"
+          @showLogin="showLogin('Specs Average Duration Tooltip')"
+          @showConnectToProject="showConnectToProject"
+        />
       </div>
     </div>
     <!--
@@ -100,6 +166,30 @@
               :gql="row.data.data?.gitInfo"
             />
           </template>
+
+          <template #latest-runs>
+            <div
+              class="h-full grid justify-items-end items-center"
+            >
+              <RunStatusDots
+                v-if="row.data.isLeaf && row.data.data && (row.data.data.cloudSpec?.data || row.data.data.cloudSpec?.fetchingStatus !== 'FETCHING')"
+                :gql="row.data.data.cloudSpec ?? null"
+                :spec-file-extension="row.data.data.fileExtension"
+                :spec-file-name="row.data.data.fileName"
+              />
+              <div
+                v-else-if="row.data.isLeaf && row.data.data?.cloudSpec?.fetchingStatus === 'FETCHING'"
+                class="bg-gray-50 rounded-[20px] h-24px w-full animate-pulse"
+                data-cy="run-status-dots-loading"
+              />
+            </div>
+          </template>
+          <template #average-duration>
+            <AverageDuration
+              v-if="row.data.isLeaf"
+              :gql="row.data.data?.cloudSpec ?? null"
+            />
+          </template>
         </SpecsListRowItem>
       </div>
     </div>
@@ -111,15 +201,35 @@
       @clear="handleClear"
     />
   </div>
+  <LoginModal
+    v-model="isLoginOpen"
+    :gql="props.gql"
+    :utm-medium="loginUtmMedium"
+    @loggedin="refreshPage"
+  />
+  <CloudConnectModals
+    v-if="isProjectConnectOpen"
+    :gql="props.gql"
+    @cancel="isProjectConnectOpen = false"
+    @success="refreshPage"
+  />
 </template>
 
 <script setup lang="ts">
+import Button from '@cy/components/Button.vue'
+import LastUpdatedHeader from './LastUpdatedHeader.vue'
+import SpecHeaderCloudDataTooltip from './SpecHeaderCloudDataTooltip.vue'
+import LoginModal from '@cy/gql-components/topnav/LoginModal.vue'
+import ExternalLink from '@cy/gql-components/ExternalLink.vue'
+import CloudConnectModals from '../runs/modals/CloudConnectModals.vue'
 import SpecsListHeader from './SpecsListHeader.vue'
 import SpecListGitInfo from './SpecListGitInfo.vue'
+import RunStatusDots from './RunStatusDots.vue'
+import AverageDuration from './AverageDuration.vue'
 import SpecsListRowItem from './SpecsListRowItem.vue'
-import { gql, useSubscription } from '@urql/vue'
+import { gql, useMutation, useSubscription } from '@urql/vue'
 import { computed, ref, watch } from 'vue'
-import { Specs_SpecsListFragment, SpecsList_GitInfoUpdatedDocument, SpecsListFragment } from '../generated/graphql'
+import { CloudData_RefetchDocument, Specs_SpecsListFragment, SpecsList_GitInfoUpdatedDocument, SpecsListFragment } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
 import { buildSpecTree, fuzzySortSpecs, getDirIndexes, makeFuzzyFoundSpec, useCachedSpecs } from './spec-utils'
 import type { FuzzyFoundSpec } from './spec-utils'
@@ -129,15 +239,47 @@ import SpecItem from './SpecItem.vue'
 import { useVirtualList } from '@packages/frontend-shared/src/composables/useVirtualList'
 import NoResults from '@cy/components/NoResults.vue'
 import SpecPatternModal from '../components/SpecPatternModal.vue'
-import { useDebounce } from '@vueuse/core'
+import { useDebounce, useOnline, useResizeObserver } from '@vueuse/core'
 import Alert from '../../../frontend-shared/src/components/Alert.vue'
 import InlineCodeFragment from '../../../frontend-shared/src/components/InlineCodeFragment.vue'
 import WarningIcon from '~icons/cy/warning_x16.svg'
+import RefreshIcon from '~icons/cy/action-restart_x16'
 import { useRoute } from 'vue-router'
+import type { RemoteFetchableStatus } from '@packages/frontend-shared/src/generated/graphql'
 
 const route = useRoute()
 const { t } = useI18n()
 
+const isOnline = useOnline()
+const isOffline = ref(false)
+
+watch(isOnline, (newIsOnlineValue) => isOffline.value = !newIsOnlineValue, { immediate: true })
+
+const isProjectConnectOpen = ref(false)
+const isLoginOpen = ref(false)
+const loginUtmMedium = ref('')
+
+const showLogin = (utmMedium: string) => {
+  loginUtmMedium.value = utmMedium
+  isLoginOpen.value = true
+}
+
+const showConnectToProject = () => {
+  isProjectConnectOpen.value = true
+}
+
+const isGitAvailable = computed(() => {
+  return !(props.gql.currentProject?.specs.some((s) => s.gitInfo?.statusType === 'noGitInfo') ?? false)
+})
+
+const hasCloudErrors = computed(() => {
+  return props.gql.currentProject?.specs.some((s) => s.cloudSpec?.fetchingStatus === 'ERRORED') ?? false
+})
+
+const shouldShowFetchError = ref(false)
+
+watch(hasCloudErrors, (wasErrorFound) => shouldShowFetchError.value = wasErrorFound, { immediate: true })
+
 gql`
 subscription SpecsList_GitInfoUpdated {
   gitInfoChange {
@@ -164,6 +306,12 @@ fragment SpecsList on Spec {
   gitInfo {
     ...SpecListRow
   }
+  cloudSpec(name: "cloudSpec") @include(if: $hasBranch) {
+    id
+    fetchingStatus
+    ...AverageDuration
+    ...RunStatusDots
+  }
 }
 `
 
@@ -173,6 +321,12 @@ fragment Specs_SpecsList on Query {
     id
     projectRoot
     currentTestingType
+    cloudProject {
+      __typename
+      ... on CloudProject {
+        id
+      }
+    }
     specs {
       id
       ...SpecsList
@@ -180,14 +334,18 @@ fragment Specs_SpecsList on Query {
     config
     ...SpecPatternModal
   }
+  ...SpecHeaderCloudDataTooltip
 }
 `
 
 useSubscription({ query: SpecsList_GitInfoUpdatedDocument })
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   gql: Specs_SpecsListFragment
-}>()
+  mostRecentUpdate: string | null
+}>(), {
+  mostRecentUpdate: null,
+})
 
 const emit = defineEmits<{
   (e: 'showCreateSpecModal'): void
@@ -213,27 +371,52 @@ function handleClear () {
 }
 
 const specs = computed(() => {
-  const specs = cachedSpecs.value.map((x) => makeFuzzyFoundSpec(x))
+  const fuzzyFoundSpecs = cachedSpecs.value.map(makeFuzzyFoundSpec)
 
   if (!debouncedSearchString.value) {
-    return specs
+    return fuzzyFoundSpecs
   }
 
-  return fuzzySortSpecs(specs, debouncedSearchString.value)
+  return fuzzySortSpecs(fuzzyFoundSpecs, debouncedSearchString.value)
 })
 
+// Maintain a cache of what tree directories are expanded/collapsed so the tree state is visually preserved
+// when specs list data is updated on scroll (e.g., latest-runs & average-duration data loading async)
+const treeExpansionCache = ref(new Map<string, boolean>())
+
+// When search value changes or when specs are added/removed, reset the tree expansion cache so that any collapsed directories re-expand
+watch([() => search.value, () => specs.value.length], () => treeExpansionCache.value.clear())
+
 const collapsible = computed(() => {
   return useCollapsibleTree(
-    buildSpecTree<FuzzyFoundSpec<SpecsListFragment>>(specs.value), { dropRoot: true },
+    buildSpecTree<FuzzyFoundSpec<SpecsListFragment>>(specs.value), { dropRoot: true, cache: treeExpansionCache.value },
   )
 })
 const treeSpecList = computed(() => collapsible.value.tree.filter(((item) => !item.hidden.value)))
 
 const { containerProps, list, wrapperProps, scrollTo } = useVirtualList(treeSpecList, { itemHeight: 40, overscan: 10 })
 
-// If you are scrolled down the virtual list and list changes,
+const scrollbarOffset = ref(0)
+
+// Watch the sizing of the specs list so we can detect when a scrollbar is added/removed
+// We then calculate the width of the scrollbar and add that as padding to the list header
+// so that the columns stay aligned
+useResizeObserver(containerProps.ref, (entries) => {
+  const specListContainer = entries?.[0]
+  const containerElement = specListContainer?.target as HTMLElement
+
+  if (containerElement) {
+    const displayedScrollbarWidth = containerElement.offsetWidth - containerElement.clientWidth
+
+    scrollbarOffset.value = displayedScrollbarWidth
+  } else {
+    scrollbarOffset.value = 0
+  }
+})
+
+// If you are scrolled down the virtual list and the search filter changes,
 // reset scroll position to top of list
-watch(() => treeSpecList.value, () => scrollTo(0))
+watch(() => debouncedSearchString.value, () => scrollTo(0))
 
 function getIdIfDirectory (row) {
   if (row.data.isLeaf && row.data) {
@@ -243,6 +426,109 @@ function getIdIfDirectory (row) {
   return `speclist-${row.data.data.relative.replace(row.data.data.baseName, '')}`
 }
 
+gql`
+mutation CloudData_Refetch ($ids: [ID!]!) {
+  loadRemoteFetchables(ids: $ids){
+    id
+    fetchingStatus
+  }
+}
+`
+
+const refetchMutation = useMutation(CloudData_RefetchDocument)
+
+const isProjectDisconnected = computed(() => props.gql.cloudViewer?.id === undefined || (props.gql.currentProject?.cloudProject?.__typename !== 'CloudProject'))
+
+const refetch = async (ids: string[]) => {
+  if (!isProjectDisconnected.value && !refetchMutation.fetching.value) {
+    await refetchMutation.executeMutation({ ids })
+  }
+}
+
+type CloudSpecItem = {
+  fetchingStatus?: RemoteFetchableStatus
+  data?: {
+    __typename?: 'CloudProjectSpec'
+    retrievedAt: string | null
+  } | {
+    __typename?: 'CloudProjectSpecNotFound'
+    retrievedAt: string | null
+  } | {
+    __typename?: 'CloudProjectUnauthorized'
+  } | null
+}
+
+function shouldRefetch (item: CloudSpecItem) {
+  if (isOffline.value) {
+    // Offline, no need to refetch
+
+    return false
+  }
+
+  if (item.fetchingStatus === 'NOT_FETCHED' || item.fetchingStatus === undefined) {
+    // NOT_FETCHED, refetch
+
+    return true
+  }
+
+  if (props.mostRecentUpdate) {
+    if (
+      (
+        item.data?.__typename === 'CloudProjectSpecNotFound' ||
+        item.data?.__typename === 'CloudProjectSpec'
+      )
+      && (
+        item.data.retrievedAt &&
+        props.mostRecentUpdate > item.data.retrievedAt
+      )
+    ) {
+      // outdated, refetch
+
+      return true
+    }
+  }
+
+  // nothing new, no need to refetch
+
+  return false
+}
+
+type NonNullCloudSpec = Exclude<SpecsListFragment['cloudSpec'], undefined | null>
+
+function getIdsToRefetch () {
+  return list.value
+  .map((spec) => spec.data.data?.cloudSpec)
+  .filter((cloudSpec): cloudSpec is NonNullCloudSpec => Boolean(cloudSpec && shouldRefetch(cloudSpec)))
+  .map((cloudSpec) => cloudSpec.id)
+  ?? []
+}
+async function fetchMissingOrErroneousItems () {
+  const cloudSpecIds = getIdsToRefetch()
+
+  if (cloudSpecIds.length > 0) {
+    await refetch(cloudSpecIds)
+  }
+}
+
+const displayedSpecIds = computed(() => list.value.map((v) => v.data.data?.cloudSpec?.id).join('|'))
+
+const debouncedDisplayedSpecIds = useDebounce(displayedSpecIds, 200)
+
+watch([debouncedDisplayedSpecIds, isOnline, isProjectDisconnected, () => props.mostRecentUpdate], fetchMissingOrErroneousItems)
+
+async function refetchFailedCloudData () {
+  const latestRunsIds = props.gql.currentProject?.specs
+  .map((s) => s.cloudSpec)
+  .filter((cloudSpec): cloudSpec is NonNullCloudSpec => Boolean(cloudSpec?.fetchingStatus === 'ERRORED'))
+  .map((cloudSpec) => cloudSpec.id) ?? []
+
+  await refetchMutation.executeMutation({ ids: [...latestRunsIds] })
+}
+
+function refreshPage () {
+  location.reload()
+}
+
 </script>
 
 <style scoped>
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index 85dd1d930895..8610e7c83101 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -2,25 +2,41 @@
   <div data-cy="specs-list-row">
     <component
       :is="isLeaf ? 'RouterLink' : 'div'"
-      class="h-full outline-none border-gray-50 ring-inset grid grid-cols-2 group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      class="h-full outline-none border-gray-50 ring-inset grid pr-20px grid-cols-7 group md:grid-cols-9 focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
       :to="route"
       :data-cy="isLeaf ? 'spec-item-link' : 'spec-item-directory'"
       @click="emit('toggleRow')"
       @click.meta.prevent="handleCtrlClick"
       @click.ctrl.prevent="handleCtrlClick"
     >
-      <div data-cy="specs-list-row-file">
+      <div
+        data-cy="specs-list-row-file"
+        class="col-span-4"
+      >
         <slot name="file" />
       </div>
-
-      <div data-cy="specs-list-row-git-info">
-        <slot name="git-info" />
-      </div>
+      <template
+        v-if="lazyRender"
+      >
+        <div
+          data-cy="specs-list-row-git-info"
+          class="col-span-2"
+        >
+          <slot name="git-info" />
+        </div>
+        <div>
+          <slot name="latest-runs" />
+        </div>
+        <div class="invisible md:col-span-2 md:visible">
+          <slot name="average-duration" />
+        </div>
+      </template>
     </component>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useTimeout } from '@vueuse/core'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineProps<{
@@ -32,6 +48,8 @@ const emit = defineEmits<{
   (event: 'toggleRow'): void
 }>()
 
+const lazyRender = useTimeout(50)
+
 function handleCtrlClick (): void {
   // noop intended to reduce the chances of opening tests multiple tabs
   // which is not a supported state in Cypress
diff --git a/packages/data-context/src/DataContext.ts b/packages/data-context/src/DataContext.ts
index 6dc7502a8cad..6496adfa1660 100644
--- a/packages/data-context/src/DataContext.ts
+++ b/packages/data-context/src/DataContext.ts
@@ -40,7 +40,9 @@ import { InjectedConfigApi, ProjectLifecycleManager } from './data/ProjectLifecy
 import type { CypressError } from '@packages/errors'
 import { ErrorDataSource } from './sources/ErrorDataSource'
 import { GraphQLDataSource } from './sources/GraphQLDataSource'
+import { RemoteRequestDataSource } from './sources/RemoteRequestDataSource'
 import { resetIssuedWarnings } from '@packages/config'
+import { RemotePollingDataSource } from './sources/RemotePollingDataSource'
 
 const IS_DEV_ENV = process.env.CYPRESS_INTERNAL_ENV !== 'production'
 
@@ -113,6 +115,11 @@ export class DataContext {
     return new GraphQLDataSource()
   }
 
+  @cached
+  get remoteRequest () {
+    return new RemoteRequestDataSource()
+  }
+
   get electronApp () {
     return this._config.electronApp
   }
@@ -212,12 +219,18 @@ export class DataContext {
     return new ProjectDataSource(this)
   }
 
+  @cached
+  get remotePolling () {
+    return new RemotePollingDataSource(this)
+  }
+
   @cached
   get cloud () {
     return new CloudDataSource({
       fetch: (...args) => this.util.fetch(...args),
       getUser: () => this.user,
       logout: () => this.actions.auth.logout().catch(this.logTraceError),
+      invalidateClientUrqlCache: () => this.graphql.invalidateClientUrqlCache(this),
     })
   }
 
@@ -487,4 +500,29 @@ export class DataContext {
 
     await Promise.all(toAwait)
   }
+
+  static #activeRequestCount = 0
+  static #awaitingEmptyRequestCount: Function[] = []
+
+  static addActiveRequest () {
+    this.#activeRequestCount++
+  }
+
+  static finishActiveRequest () {
+    this.#activeRequestCount--
+    if (this.#activeRequestCount === 0) {
+      this.#awaitingEmptyRequestCount.forEach((fn) => fn())
+      this.#awaitingEmptyRequestCount = []
+    }
+  }
+
+  static async waitForActiveRequestsToFlush () {
+    if (this.#activeRequestCount === 0) {
+      return
+    }
+
+    return new Promise((resolve) => {
+      this.#awaitingEmptyRequestCount.push(resolve)
+    })
+  }
 }
diff --git a/packages/data-context/src/actions/AuthActions.ts b/packages/data-context/src/actions/AuthActions.ts
index ae25cc0f8801..4fd173e7e23d 100644
--- a/packages/data-context/src/actions/AuthActions.ts
+++ b/packages/data-context/src/actions/AuthActions.ts
@@ -4,7 +4,7 @@ import type { AuthenticatedUserShape, AuthStateShape } from '../data'
 
 export interface AuthApiShape {
   getUser(): Promise<Partial<AuthenticatedUserShape>>
-  logIn(onMessage: (message: AuthStateShape) => void, utmCode: string): Promise<AuthenticatedUserShape>
+  logIn(onMessage: (message: AuthStateShape) => void, utmSource: string, utmMedium: string): Promise<AuthenticatedUserShape>
   logOut(): Promise<void>
   resetAuthState(): void
 }
@@ -33,19 +33,22 @@ export class AuthActions {
   }
 
   async checkAuth () {
+    const operation = `query Cypress_CheckAuth { cloudViewer { id email fullName } }`
     const result = await this.ctx.cloud.executeRemoteGraphQL({
+      fieldName: 'cloudViewer',
       operationType: 'query',
-      document: parse(`query Cypress_CheckAuth { cloudViewer { id email fullName } }`),
-      variables: {},
+      operation,
+      operationDoc: parse(operation),
+      operationVariables: {},
     })
 
-    if (!result.data?.cloudViewer) {
+    if (!result.data?.cloudViewer && !result.error?.networkError) {
       this.ctx.coreData.user = null
       await this.logout()
     }
   }
 
-  async login () {
+  async login (utmSource: string, utmMedium: string) {
     const onMessage = (authState: AuthStateShape) => {
       this.ctx.update((coreData) => {
         coreData.authState = authState
@@ -63,7 +66,7 @@ export class AuthActions {
       this.#cancelActiveLogin = () => resolve(null)
 
       // NOTE: auth.logIn should never reject, it uses `onMessage` to propagate state changes (including errors) to the frontend.
-      this.authApi.logIn(onMessage, 'launchpad').then(resolve, reject)
+      this.authApi.logIn(onMessage, utmSource, utmMedium).then(resolve, reject)
     })
 
     const isMainWindowFocused = this.ctx._apis.electronApi.isMainWindowFocused()
diff --git a/packages/data-context/src/actions/DataEmitterActions.ts b/packages/data-context/src/actions/DataEmitterActions.ts
index 75c8a12a3f5d..e21a0b358e8b 100644
--- a/packages/data-context/src/actions/DataEmitterActions.ts
+++ b/packages/data-context/src/actions/DataEmitterActions.ts
@@ -1,12 +1,14 @@
 import pDefer from 'p-defer'
 import { EventEmitter } from 'stream'
-
-import type { DataContext } from '../DataContext'
+import { DataContext } from '../DataContext'
 
 export interface PushFragmentData {
   data: any
+  errors: any
   target: string
   fragment: string
+  variables?: any
+  invalidateCache?: boolean
 }
 
 abstract class DataEmitterEvents {
@@ -48,6 +50,13 @@ abstract class DataEmitterEvents {
     this._emit('devChange')
   }
 
+  /**
+   * Emitted when there is a change in the date related to refetching specs
+   */
+  specPollingUpdate (lastUpdated: string | null) {
+    this._emit('specPollingUpdate', lastUpdated)
+  }
+
   /**
    * Emitted when cypress.config is re-executed and we'd like to
    * either re-run a spec or update something in the App UI.
@@ -85,7 +94,36 @@ abstract class DataEmitterEvents {
    * triggering a full refresh, we can send down a specific fragment / data to update
    */
   pushFragment (toPush: PushFragmentData[]) {
-    this._emit('pushFragment', toPush)
+    DataContext.waitForActiveRequestsToFlush().then(() => {
+      this.#queuePushFragment(toPush)
+    }).catch(() => {
+      // This promise can never fail, it only ever resolves
+    })
+  }
+
+  // Batch the "push fragment" in 10ms payloads so remotely fetched data comes in
+  // with less noise to the frontend
+  #timer?: NodeJS.Timer
+  #toPush: PushFragmentData[] = []
+  #queuePushFragment = (toPush: PushFragmentData[]) => {
+    this.#toPush.push(...toPush)
+    if (!this.#timer) {
+      this.#timer = setTimeout(() => {
+        const toPush = this.#toPush
+
+        this.#toPush = []
+        this.#timer = undefined
+        this._emit('pushFragment', toPush)
+      }, 10)
+    }
+  }
+
+  /**
+   * This should never be triggered, but fulfills the type signatures so we can subscribeTo
+   * it in a situation where we want a "fake" subscription
+   */
+  noopChange () {
+    throw new Error('Do not call this')
   }
 
   private _emit <Evt extends keyof DataEmitterEvents> (evt: Evt, ...args: Parameters<DataEmitterEvents[Evt]>) {
@@ -139,7 +177,7 @@ export class DataEmitterActions extends DataEmitterEvents {
    * when subscribing, we want to execute the operation to get the up-to-date initial
    * value, and then we keep a deferred object, resolved when the given emitter is fired
    */
-  subscribeTo (evt: keyof DataEmitterEvents, opts?: {sendInitial: boolean}): AsyncGenerator<any> {
+  subscribeTo (evt: keyof DataEmitterEvents, opts?: {sendInitial: boolean, onUnsubscribe?: () => void }): AsyncGenerator<any> {
     const { sendInitial = true } = opts ?? {}
     let hasSentInitial = false
     let dfd: pDefer.DeferredPromise<any> | undefined
@@ -156,6 +194,7 @@ export class DataEmitterActions extends DataEmitterEvents {
         pending.push({ done: false, value })
       }
     }
+
     this.pub.on(evt, subscribed)
 
     const iterator = {
@@ -183,6 +222,11 @@ export class DataEmitterActions extends DataEmitterEvents {
       },
       return: async () => {
         this.pub.off(evt, subscribed)
+
+        if (opts?.onUnsubscribe) {
+          opts.onUnsubscribe()
+        }
+
         // If we are currently waiting on a deferred promise, we need to resolve it and signify we're done to ensure that the async loop terminates
         if (dfd) {
           dfd.resolve({ done: true, value: undefined })
diff --git a/packages/data-context/src/actions/ProjectActions.ts b/packages/data-context/src/actions/ProjectActions.ts
index a214af2cc8e4..5ea6fdd935d1 100644
--- a/packages/data-context/src/actions/ProjectActions.ts
+++ b/packages/data-context/src/actions/ProjectActions.ts
@@ -5,7 +5,7 @@ import execa from 'execa'
 import path from 'path'
 import assert from 'assert'
 
-import type { ProjectShape } from '../data/coreDataShape'
+import type { Maybe, ProjectShape, SavedStateShape } from '../data/coreDataShape'
 
 import type { DataContext } from '..'
 import { codeGenerator, SpecOptions } from '../codegen'
@@ -24,7 +24,7 @@ export interface ProjectApiShape {
   launchProject(browser: FoundBrowser, spec: Cypress.Spec, options: LaunchOpts): Promise<void>
   insertProjectToCache(projectRoot: string): Promise<void>
   removeProjectFromCache(projectRoot: string): Promise<void>
-  getProjectRootsFromCache(): Promise<string[]>
+  getProjectRootsFromCache(): Promise<ProjectShape[]>
   insertProjectPreferencesToCache(projectTitle: string, preferences: Preferences): void
   getProjectPreferencesFromCache(): Promise<Record<string, Preferences>>
   clearLatestProjectsCache(): Promise<unknown>
@@ -36,6 +36,7 @@ export interface ProjectApiShape {
   getCurrentBrowser: () => Cypress.Browser | undefined
   getCurrentProjectSavedState(): {} | undefined
   setPromptShown(slug: string): void
+  makeProjectSavedState(projectRoot: string): () => Promise<Maybe<SavedStateShape>>
   getDevServer (): {
     updateSpecs(specs: FoundSpec[]): void
     start(options: {specs: Cypress.Spec[], config: FullConfig}): Promise<{port: number}>
@@ -142,7 +143,9 @@ export class ProjectActions {
   async loadProjects () {
     const projectRoots = await this.api.getProjectRootsFromCache()
 
-    this.projects = projectRoots.map((projectRoot) => ({ projectRoot }))
+    this.ctx.update((d) => {
+      d.app.projects = [...projectRoots]
+    })
 
     return this.projects
   }
diff --git a/packages/data-context/src/data/coreDataShape.ts b/packages/data-context/src/data/coreDataShape.ts
index cd5c6ba69e2a..469b86fd18da 100644
--- a/packages/data-context/src/data/coreDataShape.ts
+++ b/packages/data-context/src/data/coreDataShape.ts
@@ -18,7 +18,7 @@ export interface AuthenticatedUserShape {
 
 export interface ProjectShape {
   projectRoot: string
-  savedState?: SavedStateShape
+  savedState?: () => Promise<Maybe<SavedStateShape>>
 }
 
 export interface DevStateShape {
@@ -35,6 +35,7 @@ export interface SavedStateShape {
   firstOpened?: number | null
   lastOpened?: number | null
   promptsShown?: object | null
+  lastProjectId?: string | null
 }
 
 export interface ConfigChildProcessShape {
diff --git a/packages/data-context/src/sources/CloudDataSource.ts b/packages/data-context/src/sources/CloudDataSource.ts
index 61ce7c18f1fb..a63bd4681437 100644
--- a/packages/data-context/src/sources/CloudDataSource.ts
+++ b/packages/data-context/src/sources/CloudDataSource.ts
@@ -3,10 +3,11 @@ import pkg from '@packages/root'
 import debugLib from 'debug'
 import { cacheExchange, Cache } from '@urql/exchange-graphcache'
 import fetch, { Response } from 'cross-fetch'
+import crypto from 'crypto'
 
 import type { DataContext } from '..'
 import getenv from 'getenv'
-import { DocumentNode, ExecutionResult, GraphQLResolveInfo, OperationTypeNode, print } from 'graphql'
+import type { DocumentNode, ExecutionResult, GraphQLResolveInfo, OperationTypeNode } from 'graphql'
 import {
   createClient,
   dedupExchange,
@@ -24,7 +25,7 @@ import { urqlSchema } from '../gen/urql-introspection.gen'
 import type { AuthenticatedUserShape } from '../data'
 import { pathToArray } from 'graphql/jsutils/Path'
 
-export type CloudDataResponse = ExecutionResult & Partial<OperationResult> & { executing?: Promise<ExecutionResult & Partial<OperationResult>> }
+export type CloudDataResponse<T = any> = ExecutionResult<T> & Partial<OperationResult<T | null>> & { executing?: Promise<ExecutionResult<T> & Partial<OperationResult<T | null>>> }
 
 const debug = debugLib('cypress:data-context:sources:CloudDataSource')
 const cloudEnv = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development') as keyof typeof REMOTE_SCHEMA_URLS
@@ -40,12 +41,15 @@ type StartsWith<T, Prefix extends string> = T extends `${Prefix}${infer _U}` ? T
 type CloudQueryField = StartsWith<keyof NexusGen['fieldTypes']['Query'], 'cloud'>
 
 export interface CloudExecuteQuery {
-  document: DocumentNode
-  variables: any
+  operation: string
+  operationHash?: string
+  operationDoc: DocumentNode
+  operationVariables: any
 }
 
 export interface CloudExecuteRemote extends CloudExecuteQuery {
-  operationType: OperationTypeNode
+  fieldName: string
+  operationType?: OperationTypeNode
   requestPolicy?: RequestPolicy
   onUpdatedResult?: (data: any) => any
 }
@@ -61,6 +65,12 @@ export interface CloudDataSourceParams {
   fetch: typeof fetch
   getUser(): AuthenticatedUserShape | null
   logout(): void
+  /**
+   * Triggered when we have an initial stale response that is not fulfilled
+   * by an additional fetch to the server. This means we've gotten into a bad state
+   * and we need to clear both the server & client side cache
+   */
+  invalidateClientUrqlCache(): void
 }
 
 /**
@@ -70,6 +80,7 @@ export interface CloudDataSourceParams {
  */
 export class CloudDataSource {
   #cloudUrqlClient: Client
+  #lastCache?: string
 
   constructor (private params: CloudDataSourceParams) {
     this.#cloudUrqlClient = this.reset()
@@ -95,12 +106,30 @@ export class CloudDataSource {
           // @ts-ignore
           schema: urqlSchema,
           ...urqlCacheKeys,
-          resolvers: {},
           updates: {
             Mutation: {
               _cloudCacheInvalidate: (parent, { args }: {args: Parameters<Cache['invalidate']>}, cache, info) => {
                 cache.invalidate(...args)
               },
+              _showUrqlCache: (parent, { args }: {args: Parameters<Cache['invalidate']>}, cache, info) => {
+                this.#lastCache = JSON.stringify(cache, function replacer (key, value) {
+                  if (value instanceof Map) {
+                    const reducer = (obj: any, mapKey: any) => {
+                      obj[mapKey] = value.get(mapKey)
+
+                      return obj
+                    }
+
+                    return [...value.keys()].sort().reduce(reducer, {})
+                  }
+
+                  if (value instanceof Set) {
+                    return [...value].sort()
+                  }
+
+                  return value
+                })
+              },
             },
           },
         }),
@@ -125,10 +154,6 @@ export class CloudDataSource {
     })
   }
 
-  isLoadingRemote (config: CloudExecuteRemote) {
-    return Boolean(this.#pendingPromises.get(this.#hashRemoteRequest(config)))
-  }
-
   delegateCloudField <F extends CloudQueryField> (params: CloudExecuteDelegateFieldParams<F>) {
     return delegateToSchema({
       operation: 'query',
@@ -149,7 +174,11 @@ export class CloudDataSource {
   #pendingPromises = new Map<string, Promise<OperationResult>>()
 
   #hashRemoteRequest (config: CloudExecuteQuery) {
-    return `${print(config.document)}-${stringifyVariables(config.variables)}`
+    return `${config.operationHash ?? this.#sha1(config.operation)}-${stringifyVariables(config.operationVariables)}`
+  }
+
+  #sha1 (str: string) {
+    return crypto.createHash('sha1').update(str).digest('hex')
   }
 
   #formatWithErrors = async (data: OperationResult<any, any>) => {
@@ -167,6 +196,7 @@ export class CloudDataSource {
       errors: data.error?.graphQLErrors,
     }
   }
+
   #maybeQueueDeferredExecute (config: CloudExecuteRemote, initialResult?: OperationResult) {
     const stableKey = this.#hashRemoteRequest(config)
 
@@ -176,10 +206,25 @@ export class CloudDataSource {
       return loading
     }
 
-    loading = this.#cloudUrqlClient.query(config.document, config.variables, { requestPolicy: 'network-only' }).toPromise().then(this.#formatWithErrors)
-    .then((op) => {
+    loading = this.#cloudUrqlClient.query(config.operationDoc, config.operationVariables, { requestPolicy: 'network-only' }).toPromise().then(this.#formatWithErrors)
+    .then(async (op) => {
       this.#pendingPromises.delete(stableKey)
 
+      // If we have an initial result, by this point we expect that the query should be fully resolved in the cache.
+      // If it's not, it means that we need to clear the cache on the client/server, otherwise it's going to fall into
+      // an infinite loop trying to resolve the stale data. This likely only happens in contrived test cases, but
+      // it's good to handle regardless.
+      if (initialResult) {
+        const eagerResult = this.readFromCache(config)
+
+        if (eagerResult?.stale) {
+          await this.invalidate({ __typename: 'Query' })
+          this.params.invalidateClientUrqlCache()
+
+          return op
+        }
+      }
+
       if (initialResult && !_.isEqual(op.data, initialResult.data)) {
         debug('Different Query Value %j, %j', op.data, initialResult.data)
 
@@ -205,28 +250,32 @@ export class CloudDataSource {
   }
 
   hasResolved (config: CloudExecuteQuery) {
-    const eagerResult = this.#cloudUrqlClient.readQuery(config.document, config.variables)
+    const eagerResult = this.#cloudUrqlClient.readQuery(config.operationDoc, config.operationVariables)
 
     return Boolean(eagerResult)
   }
 
+  readFromCache (config: CloudExecuteQuery) {
+    return this.#cloudUrqlClient.readQuery(config.operationDoc, config.operationVariables)
+  }
+
   /**
    * Executes the query against a remote schema. Keeps an urql client for the normalized caching,
    * so we can respond quickly on first-load if we have data. Since this is ultimately being used
    * as a remote request mechanism for a stitched schema, we reject the promise if we see any errors.
    */
-  executeRemoteGraphQL (config: CloudExecuteRemote): Promise<CloudDataResponse> | CloudDataResponse {
+  executeRemoteGraphQL <T = any> (config: CloudExecuteRemote): Promise<CloudDataResponse<T>> | CloudDataResponse<T> {
     // We do not want unauthenticated requests to hit the remote schema
     if (!this.#user) {
       return { data: null }
     }
 
     if (config.operationType === 'mutation') {
-      return this.#cloudUrqlClient.mutation(config.document, config.variables).toPromise().then(this.#formatWithErrors)
+      return this.#cloudUrqlClient.mutation(config.operationDoc, config.operationVariables).toPromise().then(this.#formatWithErrors)
     }
 
     // First, we check the cache to see if we have the data to fulfill this query
-    const eagerResult = this.#cloudUrqlClient.readQuery(config.document, config.variables)
+    const eagerResult = this.readFromCache(config)
 
     // If we do have a synchronous result, return it, and determine if we want to check for
     // updates to this field
@@ -258,10 +307,29 @@ export class CloudDataSource {
     `, { args }, {
       fetchOptions: {
         headers: {
-          // TODO: replace this with an exhange to filter out this request
+          // Not urgent, but a nice-to-have, replace this with an exchange to
+          // be more explicit about filtering out this request, rather than looking at headers
+          // in the in the "fetch" exchange
+          INTERNAL_REQUEST: JSON.stringify({ data: { _cloudCacheInvalidate: true } }),
+        },
+      },
+    }).toPromise()
+  }
+
+  async getCache () {
+    await this.#cloudUrqlClient.mutation(`
+      mutation Internal_showUrqlCache { 
+        _showUrqlCache
+      }
+    `, { }, {
+      fetchOptions: {
+        headers: {
+          // Same note as above on the "invalidate", we could make this a bit clearer
           INTERNAL_REQUEST: JSON.stringify({ data: { _cloudCacheInvalidate: true } }),
         },
       },
     }).toPromise()
+
+    return JSON.parse(this.#lastCache ?? '')
   }
 }
diff --git a/packages/data-context/src/sources/GraphQLDataSource.ts b/packages/data-context/src/sources/GraphQLDataSource.ts
index 189eb9041b39..b3451e8636d7 100644
--- a/packages/data-context/src/sources/GraphQLDataSource.ts
+++ b/packages/data-context/src/sources/GraphQLDataSource.ts
@@ -2,6 +2,7 @@ import type { NexusGenAbstractTypeMembers } from '@packages/graphql/src/gen/nxs.
 import debugLib from 'debug'
 import { execute, FieldNode, GraphQLResolveInfo, print, visit } from 'graphql'
 import type { core } from 'nexus'
+import _ from 'lodash'
 import type { DataContext } from '..'
 import { DocumentNodeBuilder } from '../util/DocumentNodeBuilder'
 
@@ -107,6 +108,16 @@ export class GraphQLDataSource {
     return Buffer.from(str, 'base64').toString('utf8')
   }
 
+  invalidateClientUrqlCache (ctx: DataContext) {
+    ctx.emitter.pushFragment([{
+      data: null,
+      errors: [],
+      target: 'Query',
+      fragment: '{}',
+      invalidateCache: true,
+    }])
+  }
+
   pushResult ({ source, info, ctx, result }: PushResultParams) {
     if (info.parentType.name === 'Query') {
       this.#pushFragment({ result, ctx, info })
@@ -124,13 +135,17 @@ export class GraphQLDataSource {
 
   #pushFragment (params: PushNodeFragmentParams | PushQueryFragmentParams, isNode: boolean = false) {
     const docBuilder = new DocumentNodeBuilder({
+      isNode,
       parentType: params.info.parentType,
       fieldNodes: params.info.fieldNodes,
-    }, isNode)
+      variableDefinitions: params.info.operation.variableDefinitions,
+      operationName: params.info.operation.name?.value ?? params.info.fieldNodes.map((n) => n.name.value).sort().join('_'),
+    })
 
     Promise.resolve(execute({
       schema: params.info.schema,
       document: isNode ? docBuilder.queryNode : docBuilder.query,
+      variableValues: params.info.variableValues,
       rootValue: this.#makeRootValue(params, isNode, params.source),
       contextValue: params.ctx,
     })).then((result) => {
@@ -143,9 +158,19 @@ export class GraphQLDataSource {
       params.ctx.emitter.pushFragment([{
         target: params.info.parentType.name,
         fragment: print(docBuilder.clientWriteFragment),
+        variables: _.pick(params.info.variableValues, docBuilder.variableNames),
         data,
+        errors: result.errors,
       }])
     }).catch((e) => {
+      params.ctx.emitter.pushFragment([{
+        target: params.info.parentType.name,
+        fragment: print(docBuilder.clientWriteFragment),
+        variables: _.pick(params.info.variableValues, docBuilder.variableNames),
+        data: null,
+        errors: [e],
+      }])
+
       debug(`pushFragment execution error %o`, e)
     })
   }
diff --git a/packages/data-context/src/sources/ProjectDataSource.ts b/packages/data-context/src/sources/ProjectDataSource.ts
index 652c73628a67..8102e25fa172 100644
--- a/packages/data-context/src/sources/ProjectDataSource.ts
+++ b/packages/data-context/src/sources/ProjectDataSource.ts
@@ -19,6 +19,7 @@ import assert from 'assert'
 import type { DataContext } from '..'
 import { toPosix } from '../util/file'
 import type { FilePartsShape } from '@packages/graphql/src/schemaTypes/objectTypes/gql-FileParts'
+import type { ProjectShape } from '../data'
 import type { FindSpecs } from '../actions'
 
 export type SpecWithRelativeRoot = FoundSpec & { relativeToCommonRoot: string }
@@ -536,4 +537,22 @@ export class ProjectDataSource {
 
     return _.isEqual(specPattern, [component])
   }
+
+  async maybeGetProjectId (source: ProjectShape) {
+    // If this is the currently active project, we can look at the project id
+    if (source.projectRoot === this.ctx.currentProject) {
+      return await this.projectId()
+    }
+
+    // Get the saved state & resolve the lastProjectId
+    const savedState = await source.savedState?.()
+
+    if (savedState?.lastProjectId) {
+      return savedState.lastProjectId
+    }
+
+    // Otherwise, we can try to derive the projectId by reading it from the config file
+    // (implement this in the future, if we ever want to display runs for a project in global mode)
+    return null
+  }
 }
diff --git a/packages/data-context/src/sources/RemotePollingDataSource.ts b/packages/data-context/src/sources/RemotePollingDataSource.ts
new file mode 100644
index 000000000000..598d839ee4cb
--- /dev/null
+++ b/packages/data-context/src/sources/RemotePollingDataSource.ts
@@ -0,0 +1,101 @@
+import { gql } from '@urql/core'
+import { print } from 'graphql'
+import debugLib from 'debug'
+
+import type { DataContext } from '../DataContext'
+import type { Query } from '../gen/graphcache-config.gen'
+
+const debug = debugLib('cypress:data-context:sources:RemotePollingDataSource')
+
+const LATEST_RUN_UPDATE_OPERATION_DOC = gql`
+  query RemotePollingDataSource_latestRunUpdateSpecData(
+    $commitBranch: String!
+    $projectSlug: String!
+    # sinceDateTime: DateTime
+  ) {
+    cloudLatestRunUpdateSpecData(commitBranch: $commitBranch, projectSlug: $projectSlug) {
+      mostRecentUpdate
+      pollingInterval
+    }
+  }
+`
+const LATEST_RUN_UPDATE_OPERATION = print(LATEST_RUN_UPDATE_OPERATION_DOC)
+
+export class RemotePollingDataSource {
+  #subscribedCount = 0
+  #specPolling?: NodeJS.Timeout
+  constructor (private ctx: DataContext) {}
+
+  #startPollingForSpecs (branch: string, projectSlug: string) {
+    // when the page refreshes, a previously started subscription may be running
+    // this will reset it and start a new one
+    if (this.#specPolling) {
+      clearTimeout(this.#specPolling)
+    }
+
+    debug(`Sending initial request for startPollingForSpecs`)
+
+    // Send the spec polling request
+    this.#sendSpecPollingRequest(branch, projectSlug).catch((e) => {
+      debug(`Error executing specPollingRequest %o`, e)
+    })
+  }
+
+  #stopPolling () {
+    if (this.#specPolling) {
+      clearTimeout(this.#specPolling)
+      this.#specPolling = undefined
+    }
+  }
+
+  async #sendSpecPollingRequest (commitBranch: string, projectSlug: string) {
+    const result = await this.ctx.cloud.executeRemoteGraphQL<Pick<Query, 'cloudLatestRunUpdateSpecData'>>({
+      fieldName: 'cloudLatestRunUpdateSpecData',
+      operationDoc: LATEST_RUN_UPDATE_OPERATION_DOC,
+      operation: LATEST_RUN_UPDATE_OPERATION,
+      operationVariables: {
+        commitBranch,
+        projectSlug,
+      },
+      requestPolicy: 'network-only', // we never want to hit local cache for this request
+    })
+
+    debug(`%s Response for startPollingForSpecs %o`, new Date().toISOString(), result)
+
+    const secondsToPollNext = (result.data?.cloudLatestRunUpdateSpecData?.pollingInterval ?? 30)
+    const mostRecentUpdate = result.data?.cloudLatestRunUpdateSpecData?.mostRecentUpdate ?? null
+
+    this.ctx.emitter.specPollingUpdate(mostRecentUpdate)
+
+    this.#specPolling = setTimeout(async () => {
+      await this.#sendSpecPollingRequest(commitBranch, projectSlug)
+    }, secondsToPollNext * 1000)
+
+    return result
+  }
+
+  subscribeAndPoll (branch?: string | null, projectSlug?: string | null) {
+    if (!branch || !projectSlug) {
+      return this.ctx.emitter.subscribeTo('noopChange', { sendInitial: false })
+    }
+
+    debug('Subscribing, subscribed count %d', this.#subscribedCount)
+    if (this.#subscribedCount === 0) {
+      debug('Starting polling')
+      this.#startPollingForSpecs(branch, projectSlug)
+    }
+
+    this.#subscribedCount++
+
+    return this.ctx.emitter.subscribeTo('specPollingUpdate', {
+      sendInitial: false,
+      onUnsubscribe: () => {
+        debug('Unsubscribing, subscribed count %d', this.#subscribedCount)
+        this.#subscribedCount--
+        if (this.#subscribedCount === 0) {
+          this.#stopPolling()
+        }
+      },
+    })
+  }
+}
diff --git a/packages/data-context/src/sources/RemoteRequestDataSource.ts b/packages/data-context/src/sources/RemoteRequestDataSource.ts
new file mode 100644
index 000000000000..ba3f903baf0a
--- /dev/null
+++ b/packages/data-context/src/sources/RemoteRequestDataSource.ts
@@ -0,0 +1,463 @@
+import { CombinedError, stringifyVariables } from '@urql/core'
+import type { NexusGenAbstractTypeMembers, NexusGenInterfaces, RemoteFetchableStatus } from '@packages/graphql/src/gen/nxs.gen'
+import { DocumentNode, FieldNode, GraphQLResolveInfo, SelectionNode, visit, print, ArgumentNode, VariableDefinitionNode, TypeNode, ValueNode, parseType, VariableNode, GraphQLObjectType } from 'graphql'
+import crypto from 'crypto'
+import _ from 'lodash'
+
+import type { DataContext } from '../DataContext'
+import { pathToArray } from 'graphql/jsutils/Path'
+import type { RemoteFieldDefinitionConfig, RemoteQueryArgsResolver } from '@packages/graphql/src/plugins'
+import type { CloudExecuteQuery } from './CloudDataSource'
+import assert from 'assert'
+import type { RemoteFetchableShape } from '@packages/graphql/src/schemaTypes'
+import { DocumentNodeBuilder } from '../util'
+
+interface MaybeLoadRemoteFetchable extends CloudExecuteQuery {
+  __typename: NexusGenAbstractTypeMembers['RemoteFetchable']
+  id: string
+  operationHash: string
+  ctx: DataContext
+  shouldFetch?: boolean
+  remoteQueryField: string
+  isMutation: boolean
+}
+
+interface OperationDefinition {
+  operation: string
+  operationDoc: DocumentNode
+  operationHash: string
+  operationVariableDefs: [string, {type: TypeNode, defaultValue?: ValueNode}][]
+  remoteQueryField: string
+  fieldArgMapping: Record<string, string>
+}
+
+export class RemoteRequestDataSource {
+  #operationErrors = new Map<string, CombinedError>()
+  /** The remote execution definition for the query */
+  #operationRegistry = new Map<string, OperationDefinition>()
+  /**
+   * Map<HASH_OF_QUERY, [FRONTEND_QUERY, VARIABLE_NAMES[]]>
+   */
+  #operationRegistryPushToFrontend = new Map<string, [string, string[]]>()
+
+  /**
+   * Given a RemoteFetchable "id", we look up the operation & resolve and/or
+   * execute if it hasn't been fetched yet. Assumes the ID has already been
+   * registered via a call to batchResolveRemoteFields
+   */
+  loadRemoteFetchable (id: string, ctx: DataContext): RemoteFetchableShape | Promise<never> {
+    const { name, operationHash, operationVariables } = this.unpackFetchableNodeId(id)
+    const operationResult = this.#operationRegistry.get(operationHash)
+
+    if (!operationResult) {
+      return Promise.reject(`Unable to execute RemoteFetchable for ${atob(id)}, are you sure you're using an ID that already came back from a resolved query?`)
+    }
+
+    const { operation, operationDoc, remoteQueryField } = operationResult
+
+    return this.#maybeResolveFetchable({
+      ctx,
+      __typename: name as NexusGenAbstractTypeMembers['RemoteFetchable'],
+      id,
+      operation,
+      operationDoc,
+      operationHash,
+      operationVariables,
+      remoteQueryField,
+      shouldFetch: true,
+      isMutation: true,
+    })
+  }
+
+  #maybeResolveFetchable (params: MaybeLoadRemoteFetchable): RemoteFetchableShape {
+    const { ctx, shouldFetch, ...partialResult } = params
+
+    if (ctx.cloud.isResolving(params)) {
+      return {
+        ...partialResult,
+        fetchingStatus: 'FETCHING',
+      }
+    }
+
+    const errored = this.#operationErrors.get(params.id)
+
+    if (errored) {
+      // If we're fetching, and we've errored, refetch if we're in a mutation,
+      // otherwise it'll just seem like it's fetching forever
+      if (shouldFetch && params.isMutation) {
+        this.#executeRemote(params)
+
+        return {
+          ...partialResult,
+          fetchingStatus: 'FETCHING',
+        }
+      }
+
+      return {
+        ...partialResult,
+        fetchingStatus: 'ERRORED',
+        error: { ...errored },
+      }
+    }
+
+    const cachedData = ctx.cloud.readFromCache(params)
+
+    // If we have stale data, or we should fetch - fetch the data
+    if (cachedData?.stale || shouldFetch) {
+      // Otherwise, fetch it
+      this.#executeRemote(params)
+
+      return {
+        ...partialResult,
+        fetchingStatus: 'FETCHING',
+      }
+    }
+
+    if (cachedData) {
+      // If we have the data, but it's marked as stale (meaning this is a partial eager response)
+      if (cachedData.stale) {
+        // If we're not fetching, say it's not fetched but put the data under dataRaw for debugging
+        return {
+          ...partialResult,
+          fetchingStatus: 'NOT_FETCHED',
+          dataRaw: cachedData.data,
+        }
+      }
+
+      // Otherwise, mark as fetched
+      return {
+        ...partialResult,
+        fetchingStatus: 'FETCHED',
+        data: cachedData.data?.[params.remoteQueryField],
+        dataRaw: cachedData.data,
+      }
+    }
+
+    if (!shouldFetch) {
+      return {
+        ...partialResult,
+        fetchingStatus: 'NOT_FETCHED',
+      }
+    }
+
+    // Otherwise, fetch it
+    this.#executeRemote(params)
+
+    return {
+      ...partialResult,
+      fetchingStatus: 'FETCHING',
+    }
+  }
+
+  #executeRemote (params: MaybeLoadRemoteFetchable) {
+    const { ctx, operation, operationDoc, operationHash, operationVariables, remoteQueryField } = params
+
+    Promise.resolve(ctx.cloud.executeRemoteGraphQL({
+      fieldName: remoteQueryField,
+      operation,
+      operationDoc,
+      operationHash,
+      operationVariables,
+      requestPolicy: 'network-only',
+    }))
+    .then((result) => {
+      const toPushDefinition = this.#operationRegistryPushToFrontend.get(operationHash)
+
+      assert(toPushDefinition, `Missing fragment for ${operationHash}`)
+
+      const [toSend, variableNames] = toPushDefinition
+
+      let data: any = null
+      let error: any = null
+      let fetchingStatus: RemoteFetchableStatus = 'FETCHED'
+
+      if (result.error) {
+        fetchingStatus = 'ERRORED'
+        error = { ...result.error }
+        this.#operationErrors.set(params.id, result.error)
+      } else if (result.data) {
+        data = result.data[params.remoteQueryField]
+        this.#operationErrors.delete(params.id)
+      }
+
+      if (data || error) {
+        ctx.emitter.pushFragment([{
+          target: params.__typename,
+          fragment: toSend,
+          variables: _.pick(operationVariables, variableNames),
+          data: {
+            id: params.id,
+            fetchingStatus,
+            data,
+            error,
+          },
+          errors: result.errors,
+        }])
+      }
+    })
+    .catch((e) => {
+      ctx.logTraceError(e)
+    })
+  }
+
+  unpackFetchableNodeId (id: string) {
+    const bufferString = this.#atob(id)
+    const [name, operationHash, encodedArgs] = bufferString.split(':') as [string, string, string]
+    const operationVariables = JSON.parse(this.#atob(encodedArgs))
+
+    return {
+      name,
+      operationHash,
+      operationVariables,
+    }
+  }
+
+  #atob (encoded: string) {
+    return Buffer.from(encoded, 'base64').toString('utf8')
+  }
+
+  #btoa (unencoded: string) {
+    return Buffer.from(unencoded, 'utf8').toString('base64')
+  }
+
+  makeRefetchableId (fieldType: NexusGenAbstractTypeMembers['RemoteFetchable'], operationHash: string, operationVariables: any) {
+    return this.#btoa(`${fieldType}:${operationHash}:${this.#btoa(stringifyVariables(operationVariables))}`)
+  }
+
+  batchResolveRemoteFields (
+    fieldConfig: RemoteFieldDefinitionConfig<any, any, any>,
+    sources: readonly any[],
+    args: any,
+    ctx: DataContext,
+    info: GraphQLResolveInfo,
+  ) {
+    const fieldType = `RemoteFetchable${fieldConfig.type}` as NexusGenAbstractTypeMembers['RemoteFetchable']
+
+    let operationDef: OperationDefinition | null = null
+
+    return sources.map(async (source, i): Promise<NexusGenInterfaces['RemoteFetchable'] | null> => {
+      if (!operationDef) {
+        operationDef = this.#makeRemoteOperation(fieldConfig, ctx, info)
+        if (!this.#operationRegistry.has(operationDef.operationHash)) {
+          const FIELDS_TO_PUSH = ['id', 'status', 'error', 'data']
+
+          const docBuilder = new DocumentNodeBuilder({
+            isNode: true,
+            isRemoteFetchable: true,
+            parentType: info.schema.getType(fieldType) as GraphQLObjectType,
+            fieldNodes: info.fieldNodes[0]?.selectionSet?.selections.filter((f) => f.kind === 'Field' && FIELDS_TO_PUSH.includes(f.name.value)) as FieldNode[],
+            variableDefinitions: info.operation.variableDefinitions,
+            operationName: info.operation.name?.value ?? info.fieldNodes.map((n) => n.name.value).sort().join('_'),
+          })
+
+          this.#operationRegistry.set(operationDef.operationHash, operationDef)
+          this.#operationRegistryPushToFrontend.set(operationDef.operationHash, [print(docBuilder.clientWriteFragment), docBuilder.variableNames])
+        }
+      }
+
+      const { operation, operationDoc, operationHash } = operationDef
+      const operationVariables: Record<string, any> = {}
+      const queryArgs = fieldConfig.queryArgs as RemoteQueryArgsResolver<any, any, any>
+
+      if (typeof queryArgs === 'function') {
+        const queryArgResult = await queryArgs(source, args, ctx, info)
+
+        // If we explicitly return false from queryArgs, we aren't fetching
+        if (queryArgResult === false) {
+          return null
+        }
+
+        for (const [key, val] of Object.entries(queryArgResult)) {
+          if (operationDef.fieldArgMapping[key]) {
+            operationVariables[key] = val
+          }
+        }
+      }
+
+      for (const [name] of operationDef.operationVariableDefs) {
+        operationVariables[name] ??= info.variableValues[name] ?? null
+      }
+
+      const shouldEagerFetch = typeof fieldConfig.shouldEagerFetch === 'function'
+        ? fieldConfig.shouldEagerFetch(source, args, ctx, info, i)
+        : fieldConfig.shouldEagerFetch ?? false
+
+      const id = this.makeRefetchableId(fieldType, operationDef.operationHash, operationVariables)
+
+      return this.#maybeResolveFetchable({
+        ctx,
+        __typename: fieldType,
+        id,
+        operation,
+        operationDoc,
+        operationHash,
+        operationVariables,
+        shouldFetch: shouldEagerFetch,
+        remoteQueryField: fieldConfig.remoteQueryField,
+        isMutation: false,
+      })
+    })
+  }
+
+  #makeRemoteOperation (fieldConfig: RemoteFieldDefinitionConfig<any, any, any>, ctx: DataContext, info: GraphQLResolveInfo): OperationDefinition {
+    const fieldNodes = this.#getDataFieldNodes(info)
+    const referencedVariableValues = this.#getReferencedVariables(fieldNodes, info.operation.variableDefinitions ?? [])
+
+    const queryFieldDef = ctx.schemaCloud.getQueryType()?.getFields()[fieldConfig.remoteQueryField]
+
+    assert(queryFieldDef, `Unknown remote query field ${fieldConfig.remoteQueryField}`)
+
+    const remoteFieldArgs = queryFieldDef.args
+
+    const operationVariableDefs: [string, {type: TypeNode, defaultValue?: ValueNode}][] = []
+    const fieldArgs: [string, ValueNode][] = []
+
+    const fieldArgMapping: Record<string, string> = {}
+
+    // Add the outer variables to thq query
+    for (const [referencedVar, variableDef] of Object.entries(referencedVariableValues)) {
+      operationVariableDefs.push([referencedVar, variableDef])
+    }
+
+    // Come up with names for the inner variables, ensuring they don't conflict
+    // with the outer variables
+    for (const fieldArg of remoteFieldArgs) {
+      let toName = fieldArg.name
+
+      while (referencedVariableValues[toName]) {
+        toName += '_'
+      }
+
+      fieldArgMapping[fieldArg.name] = toName
+      operationVariableDefs.push([toName, { type: parseType(fieldArg.type.toString()) }])
+      const argVar: VariableNode = {
+        kind: 'Variable',
+        name: {
+          kind: 'Name',
+          value: toName,
+        },
+      }
+
+      fieldArgs.push([toName, argVar])
+    }
+
+    const operationDoc = this.#makeOperationDoc({
+      fieldName: fieldConfig.remoteQueryField,
+      fieldArgs,
+      fieldNodes,
+      operationVariableDefs,
+    })
+
+    const operation = print(operationDoc)
+    const operationHash = this.#sha1(operation)
+
+    return {
+      operation,
+      operationDoc,
+      operationHash,
+      operationVariableDefs,
+      fieldArgMapping,
+      remoteQueryField: fieldConfig.remoteQueryField,
+    }
+  }
+
+  #sha1 (str: string) {
+    return crypto.createHash('sha1').update(str).digest('hex')
+  }
+
+  // Gather the referenced variables from each of the field nodes we
+  // are generating a query with
+  #getReferencedVariables (selectionNodes: readonly SelectionNode[], outerVariableDefs: readonly VariableDefinitionNode[]) {
+    const variableDefinitions: Record<string, {type: TypeNode, defaultValue?: ValueNode}> = {}
+
+    selectionNodes.map((node) => {
+      visit(node, {
+        Variable (node) {
+          const def = variableDefinitions[node.name.value] ?? outerVariableDefs.find((d) => d.variable.name.value === node.name.value)
+
+          assert(def, `Expected allVariableDefinitions for ${node.name.value}`)
+          variableDefinitions[node.name.value] = def
+        },
+      })
+    })
+
+    return variableDefinitions
+  }
+
+  #getDataFieldNodes (info: GraphQLResolveInfo) {
+    const dataSelection = info.fieldNodes[0]?.selectionSet?.selections.filter((s) => {
+      return s.kind === 'Field' && s.name.value === 'data'
+    }) as FieldNode[]
+
+    if (dataSelection.length > 1) {
+      throw new Error(`Cannot alias the data field, at ${dataSelection?.map(print)}`)
+    }
+
+    const selections = dataSelection[0]?.selectionSet?.selections
+
+    if (!selections) {
+      throw new Error(`Cannot resolve ${info.operation.name?.value} without a selection for data, at: ${pathToArray(info.path)}`)
+    }
+
+    return selections
+  }
+
+  #makeOperationDoc (
+    params: {
+      fieldName: string
+      fieldArgs: [string, ValueNode][]
+      fieldNodes: readonly SelectionNode[]
+      operationVariableDefs: [string, {type: TypeNode, defaultValue?: ValueNode}][]
+    },
+  ): DocumentNode {
+    const { operationVariableDefs = [], fieldArgs = [] } = params
+
+    return {
+      kind: 'Document',
+      definitions: [
+        {
+          kind: 'OperationDefinition',
+          operation: 'query',
+          name: {
+            kind: 'Name',
+            value: `RemoteRequest_${params.fieldName}`,
+          },
+          variableDefinitions: operationVariableDefs.map((v): VariableDefinitionNode => {
+            return {
+              kind: 'VariableDefinition',
+              variable: {
+                kind: 'Variable',
+                name: { kind: 'Name', value: v[0] },
+              },
+              type: v[1].type,
+              defaultValue: v[1].defaultValue,
+            }
+          }),
+          selectionSet: {
+            kind: 'SelectionSet',
+            selections: [
+              {
+                kind: 'Field',
+                name: {
+                  kind: 'Name',
+                  value: params.fieldName,
+                },
+                arguments: fieldArgs.map((a): ArgumentNode => {
+                  return {
+                    kind: 'Argument',
+                    name: { kind: 'Name', value: a[0] },
+                    value: a[1],
+                  }
+                }),
+                selectionSet: {
+                  kind: 'SelectionSet',
+                  selections: params.fieldNodes,
+                },
+              },
+            ],
+          },
+        },
+      ],
+    }
+  }
+}
diff --git a/packages/data-context/src/sources/index.ts b/packages/data-context/src/sources/index.ts
index 98aabaafa006..99f65bafdc9b 100644
--- a/packages/data-context/src/sources/index.ts
+++ b/packages/data-context/src/sources/index.ts
@@ -11,6 +11,8 @@ export * from './GraphQLDataSource'
 export * from './HtmlDataSource'
 export * from './MigrationDataSource'
 export * from './ProjectDataSource'
+export * from './RemotePollingDataSource'
+export * from './RemoteRequestDataSource'
 export * from './UtilDataSource'
 export * from './VersionsDataSource'
 export * from './WizardDataSource'
diff --git a/packages/data-context/src/util/DocumentNodeBuilder.ts b/packages/data-context/src/util/DocumentNodeBuilder.ts
index a71999cbe20a..f71fc6c799ab 100644
--- a/packages/data-context/src/util/DocumentNodeBuilder.ts
+++ b/packages/data-context/src/util/DocumentNodeBuilder.ts
@@ -1,4 +1,11 @@
-import type { DocumentNode, FragmentDefinitionNode, GraphQLResolveInfo } from 'graphql'
+import { DocumentNode, FieldNode, FragmentDefinitionNode, GraphQLResolveInfo, VariableDefinitionNode, visit } from 'graphql'
+
+export interface RemoteQueryConfig {
+  fieldNodes: FieldNode[]
+  variableDefinitions: VariableDefinitionNode[]
+}
+
+export type DocumentNodeBuilderParams = Pick<GraphQLResolveInfo, 'fieldNodes' | 'parentType'> & {isNode?: boolean, isRemoteFetchable?: boolean, variableDefinitions: readonly VariableDefinitionNode[] | undefined, operationName: string}
 
 /**
  * Builds a DocumentNode from a given GraphQLResolveInfo payload
@@ -8,20 +15,16 @@ import type { DocumentNode, FragmentDefinitionNode, GraphQLResolveInfo } from 'g
 export class DocumentNodeBuilder {
   readonly frag: FragmentDefinitionNode
   readonly clientWriteFragment: DocumentNode
+  readonly variables: VariableDefinitionNode[]
+  readonly #variableNames: Set<string>
 
-  constructor (info: Pick<GraphQLResolveInfo, 'fieldNodes' | 'parentType'>, isNode: boolean = false) {
-    let selections = info.fieldNodes
-
-    if (isNode) {
-      selections = [{
-        kind: 'Field',
-        name: { kind: 'Name', value: 'id' },
-      }, ...selections]
-    }
+  constructor (private info: DocumentNodeBuilderParams) {
+    const selections = this.#withRequiredFields(info)
 
     this.frag = {
       kind: 'FragmentDefinition',
       name: { kind: 'Name', value: 'GeneratedFragment' },
+      // variableDefinitions: info.operation?.variableDefinitions ?? [],
       typeCondition: {
         kind: 'NamedType',
         name: { kind: 'Name', value: info.parentType.name },
@@ -37,6 +40,65 @@ export class DocumentNodeBuilder {
       kind: 'Document',
       definitions: [this.frag],
     }
+
+    this.#variableNames = new Set<string>()
+    this.variables = []
+
+    /**
+     * Finds all of the variables referenced within the field nodes, pulls these definitions
+     * from the outer definition
+     */
+    this.info.fieldNodes.map((node) => {
+      visit(node, {
+        Argument: (arg) => {
+          if (arg.value.kind === 'Variable') {
+            const variableName = arg.value.name.value
+
+            if (!this.#variableNames.has(variableName)) {
+              this.#variableNames.add(variableName)
+              const def = this.info.variableDefinitions?.find((d) => d.variable.name.value === variableName)
+
+              if (def) {
+                this.variables.push(def)
+              }
+            }
+          }
+        },
+      })
+    })
+  }
+
+  #withRequiredFields (params: DocumentNodeBuilderParams) {
+    let selections: FieldNode[] = [...params.fieldNodes]
+
+    if ((params.isNode || params.isRemoteFetchable) && !selections.some((s) => s.kind === 'Field' && s.name.value === 'id')) {
+      selections = [{
+        kind: 'Field',
+        name: { kind: 'Name', value: 'id' },
+      }, ...selections]
+    }
+
+    if (params.isRemoteFetchable) {
+      if (!selections.some((s) => s.kind === 'Field' && s.name.value === 'fetchingStatus')) {
+        selections = [{
+          kind: 'Field',
+          name: { kind: 'Name', value: 'fetchingStatus' },
+        }, ...selections]
+      }
+
+      if (!selections.some((s) => s.kind === 'Field' && s.name.value === 'error')) {
+        selections = [{
+          kind: 'Field',
+          name: { kind: 'Name', value: 'error' },
+        }, ...selections]
+      }
+    }
+
+    return selections
+  }
+
+  get variableNames () {
+    return Array.from(this.#variableNames)
   }
 
   get query (): DocumentNode {
@@ -47,6 +109,10 @@ export class DocumentNodeBuilder {
         {
           kind: 'OperationDefinition',
           operation: 'query',
+          name: {
+            kind: 'Name',
+            value: this.info.operationName,
+          },
           selectionSet: {
             kind: 'SelectionSet',
             selections: [
@@ -56,6 +122,7 @@ export class DocumentNodeBuilder {
               },
             ],
           },
+          variableDefinitions: this.variables,
         },
       ],
     }
@@ -69,6 +136,10 @@ export class DocumentNodeBuilder {
         {
           kind: 'OperationDefinition',
           operation: 'query',
+          name: {
+            kind: 'Name',
+            value: this.info.operationName,
+          },
           selectionSet: {
             kind: 'SelectionSet',
             selections: [
@@ -105,6 +176,7 @@ export class DocumentNodeBuilder {
               },
             ],
           },
+          variableDefinitions: this.variables,
         },
       ],
     }
diff --git a/packages/data-context/src/util/urqlCacheKeys.ts b/packages/data-context/src/util/urqlCacheKeys.ts
index 5aee9536ab0d..c821380af436 100644
--- a/packages/data-context/src/util/urqlCacheKeys.ts
+++ b/packages/data-context/src/util/urqlCacheKeys.ts
@@ -31,11 +31,14 @@ export const urqlCacheKeys: Partial<UrqlCacheKeys> = {
     ProjectPreferences: (data) => data.__typename,
     VersionData: () => null,
     ScaffoldedFile: () => null,
+    SpecDataAggregate: () => null,
     LocalSettings: (data) => data.__typename,
     LocalSettingsPreferences: () => null,
     AuthState: () => null,
-    CloudProjectNotFound: (data) => data.__typename,
-    CloudProjectUnauthorized: (data) => data.__typename,
+    CloudProjectNotFound: (data) => null,
+    CloudProjectSpecNotFound: (data) => null,
+    CloudProjectUnauthorized: (data) => null,
+    CloudLatestRunUpdateSpecData: (data) => null,
     GeneratedSpecError: () => null,
     GenerateSpecResponse: (data) => data.__typename,
   },
diff --git a/packages/data-context/test/unit/sources/CloudDataSource.spec.ts b/packages/data-context/test/unit/sources/CloudDataSource.spec.ts
index 2d48d1dce615..598dd374fca5 100644
--- a/packages/data-context/test/unit/sources/CloudDataSource.spec.ts
+++ b/packages/data-context/test/unit/sources/CloudDataSource.spec.ts
@@ -1,5 +1,5 @@
 import sinon from 'sinon'
-import { execute, parse } from 'graphql'
+import { execute, print } from 'graphql'
 import chaiAsPromised from 'chai-as-promised'
 import { Response } from 'cross-fetch'
 
@@ -8,27 +8,26 @@ import { CloudDataResponse, CloudDataSource } from '../../../src/sources'
 import { createTestDataContext, scaffoldProject } from '../helper'
 import chai, { expect } from 'chai'
 import { ExecutionResult } from '@urql/core'
+import {
+  CLOUD_PROJECT_QUERY,
+  CLOUD_PROJECT_RESPONSE,
+  FAKE_USER_QUERY,
+  FAKE_USER_RESPONSE,
+  FAKE_USER_WITH_OPTIONAL_MISSING,
+  FAKE_USER_WITH_OPTIONAL_MISSING_RESPONSE,
+  FAKE_USER_WITH_OPTIONAL_RESOLVED_RESPONSE,
+  FAKE_USER_WITH_REQUIRED_MISSING,
+  FAKE_USER_WITH_REQUIRED_RESOLVED_RESPONSE,
+} from './fixtures/graphqlFixtures'
 
 chai.use(chaiAsPromised)
 
-const FAKE_USER_QUERY = parse(`{ cloudViewer { __typename id fullName email } }`)
-const FAKE_USER_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com' } } }
-const FAKE_USER_WITH_OPTIONAL_MISSING = parse(`{ cloudViewer { __typename id fullName email cloudProfileUrl } }`)
-const FAKE_USER_WITH_OPTIONAL_MISSING_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', cloudProfileUrl: null } } }
-const FAKE_USER_WITH_OPTIONAL_RESOLVED_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', cloudProfileUrl: 'https://example.com' } } }
-const FAKE_USER_WITH_REQUIRED_MISSING = parse(`{ cloudViewer { __typename id fullName email userIsViewer } }`)
-const FAKE_USER_WITH_REQUIRED_RESOLVED_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', userIsViewer: true } } }
-const CLOUD_PROJECT_QUERY = parse(`{ currentProject { 
-  id 
-  cloudProject { __typename  ... on CloudProject { id } }
-} }`)
-const CLOUD_PROJECT_RESPONSE = { data: { cloudProjectBySlug: { __typename: 'CloudProject', id: '1' } } }
-
 describe('CloudDataSource', () => {
   let cloudDataSource: CloudDataSource
   let fetchStub: sinon.SinonStub
   let getUserStub: sinon.SinonStub
   let logoutStub: sinon.SinonStub
+  let invalidateCacheStub: sinon.SinonStub
   let ctx: DataContext
 
   beforeEach(() => {
@@ -38,11 +37,13 @@ describe('CloudDataSource', () => {
     getUserStub = sinon.stub()
     getUserStub.returns({ authToken: '1234' })
     logoutStub = sinon.stub()
+    invalidateCacheStub = sinon.stub()
     ctx = createTestDataContext('open')
     cloudDataSource = new CloudDataSource({
       fetch: fetchStub,
       getUser: getUserStub,
       logout: logoutStub,
+      invalidateClientUrqlCache: invalidateCacheStub,
     })
   })
 
@@ -54,8 +55,10 @@ describe('CloudDataSource', () => {
     it('returns immediately with { data: null } when no user is defined', () => {
       getUserStub.returns(null)
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -65,8 +68,10 @@ describe('CloudDataSource', () => {
 
     it('issues a fetch request for the data when the user is defined', async () => {
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -77,13 +82,17 @@ describe('CloudDataSource', () => {
 
     it('only issues a single fetch if the operation is called twice', async () => {
       const result1 = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
       const result2 = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -97,16 +106,20 @@ describe('CloudDataSource', () => {
 
     it('resolves eagerly with the cached data if the data has already been resolved', async () => {
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
       await result
 
       const immediateResult = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -116,8 +129,10 @@ describe('CloudDataSource', () => {
 
     it('when there is a nullable field missing, resolves with the eager result & fetches for the rest', async () => {
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -126,8 +141,10 @@ describe('CloudDataSource', () => {
       fetchStub.resolves(new Response(JSON.stringify(FAKE_USER_WITH_OPTIONAL_RESOLVED_RESPONSE), { status: 200 }))
 
       const immediateResult = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_WITH_OPTIONAL_MISSING,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_WITH_OPTIONAL_MISSING),
+        operationDoc: FAKE_USER_WITH_OPTIONAL_MISSING,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -143,8 +160,10 @@ describe('CloudDataSource', () => {
 
     it('when there is a non-nullable field missing, issues the remote query immediately', async () => {
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -153,8 +172,10 @@ describe('CloudDataSource', () => {
       fetchStub.resolves(new Response(JSON.stringify(FAKE_USER_WITH_REQUIRED_RESOLVED_RESPONSE), { status: 200 }))
 
       const requiredResult = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_WITH_REQUIRED_MISSING,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_WITH_REQUIRED_MISSING),
+        operationDoc: FAKE_USER_WITH_REQUIRED_MISSING,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -169,8 +190,10 @@ describe('CloudDataSource', () => {
       fetchStub.resolves(new Response(JSON.stringify(new Error('Unauthorized')), { status: 200 }))
 
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -178,15 +201,17 @@ describe('CloudDataSource', () => {
 
       expect(resolved.data).to.eql(undefined)
       expect(resolved.errors).to.exist
-      expect(resolved.error.networkError.message).to.eql('No Content')
+      expect(resolved.error?.networkError?.message).to.eql('No Content')
     })
 
     it('logout user on 401 response', async () => {
       fetchStub.resolves(new Response(JSON.stringify(new Error('Unauthorized')), { status: 401 }))
 
       const result = cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
@@ -194,7 +219,7 @@ describe('CloudDataSource', () => {
 
       expect(resolved.data).to.eql(undefined)
       expect(resolved.errors).to.exist
-      expect(resolved.error.networkError.message).to.eql('Unauthorized')
+      expect(resolved.error?.networkError?.message).to.eql('Unauthorized')
 
       expect(logoutStub).to.have.been.calledOnce
     })
@@ -203,8 +228,9 @@ describe('CloudDataSource', () => {
   describe('isResolving', () => {
     it('returns false if we are not currently resolving the request', () => {
       const result = cloudDataSource.isResolving({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })
 
       expect(result).to.eql(false)
@@ -212,14 +238,17 @@ describe('CloudDataSource', () => {
 
     it('returns true if we are currently resolving the request', () => {
       cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
       const result = cloudDataSource.isResolving({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })
 
       expect(result).to.eql(true)
@@ -229,8 +258,9 @@ describe('CloudDataSource', () => {
   describe('hasResolved', () => {
     it('returns false if we have not resolved the data yet', () => {
       const result = cloudDataSource.hasResolved({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })
 
       expect(result).to.eql(false)
@@ -238,14 +268,17 @@ describe('CloudDataSource', () => {
 
     it('returns true if we have resolved the data for the query', async () => {
       await cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
       const result = cloudDataSource.hasResolved({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })
 
       expect(result).to.eql(true)
@@ -255,21 +288,25 @@ describe('CloudDataSource', () => {
   describe('invalidate', () => {
     it('allows us to issue a cache.invalidate on individual fields in the cloud schema', async () => {
       await cloudDataSource.executeRemoteGraphQL({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        fieldName: 'cloudViewer',
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
         operationType: 'query',
       })
 
       expect(cloudDataSource.hasResolved({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })).to.eq(true)
 
       await cloudDataSource.invalidate('Query', 'cloudViewer')
 
       expect(cloudDataSource.hasResolved({
-        document: FAKE_USER_QUERY,
-        variables: {},
+        operation: print(FAKE_USER_QUERY),
+        operationDoc: FAKE_USER_QUERY,
+        operationVariables: {},
       })).to.eq(false)
     })
   })
diff --git a/packages/data-context/test/unit/sources/RemoteRequestDataSource.spec.ts b/packages/data-context/test/unit/sources/RemoteRequestDataSource.spec.ts
new file mode 100644
index 000000000000..b23d6332087c
--- /dev/null
+++ b/packages/data-context/test/unit/sources/RemoteRequestDataSource.spec.ts
@@ -0,0 +1,58 @@
+import { expect } from 'chai'
+import crypto from 'crypto'
+
+import { DataContext } from '../../../src'
+import { RemoteRequestDataSource } from '../../../src/sources'
+import { createTestDataContext } from '../helper'
+
+describe('RemoteRequestDataSource', () => {
+  let ctx: DataContext
+  let remoteRequestSource: RemoteRequestDataSource
+
+  beforeEach(async () => {
+    ctx = createTestDataContext('open')
+    remoteRequestSource = new RemoteRequestDataSource()
+  })
+
+  afterEach(() => {
+    ctx.destroy()
+  })
+
+  describe('makeRefetchableId', () => {
+    it('creates an identifier from the fieldType, operationHash, operationVariables', () => {
+      const id = remoteRequestSource.makeRefetchableId(
+        'RemoteFetchableCloudProjectSpecResult',
+        crypto.createHash('sha1').update('query ...').digest('hex'),
+        { b: '2', a: 1 },
+      )
+
+      expect(id).to.eql('UmVtb3RlRmV0Y2hhYmxlQ2xvdWRQcm9qZWN0U3BlY1Jlc3VsdDo1Y2MyNWQ4YTM5YTY1NGViMjNiNTI1NzM0NWFiYmY0MmJlNDBjOGQxOmV5SmhJam94TENKaUlqb2lNaUo5')
+      expect(Buffer.from(id, 'base64').toString('utf-8')).to.eql('RemoteFetchableCloudProjectSpecResult:5cc25d8a39a654eb23b5257345abbf42be40c8d1:eyJhIjoxLCJiIjoiMiJ9')
+    })
+
+    it('stable stringifies via stringifyVariables', () => {
+      const id = remoteRequestSource.makeRefetchableId(
+        'RemoteFetchableCloudProjectSpecResult',
+        crypto.createHash('sha1').update('query ...').digest('hex'),
+        { b: '2', a: 1 },
+      )
+      const id2 = remoteRequestSource.makeRefetchableId(
+        'RemoteFetchableCloudProjectSpecResult',
+        crypto.createHash('sha1').update('query ...').digest('hex'),
+        { a: 1, b: '2' },
+      )
+
+      expect(id).to.eql(id2)
+    })
+  })
+
+  describe('unpackFetchableNodeId', () => {
+    it('takes the identifier created from makeRefetchableId and decodes the variables', () => {
+      expect(remoteRequestSource.unpackFetchableNodeId('UmVtb3RlRmV0Y2hhYmxlQ2xvdWRQcm9qZWN0U3BlY1Jlc3VsdDo1Y2MyNWQ4YTM5YTY1NGViMjNiNTI1NzM0NWFiYmY0MmJlNDBjOGQxOmV5SmhJam94TENKaUlqb2lNaUo5')).to.eql({
+        name: 'RemoteFetchableCloudProjectSpecResult',
+        operationHash: '5cc25d8a39a654eb23b5257345abbf42be40c8d1',
+        operationVariables: { a: 1, b: '2' },
+      })
+    })
+  })
+})
diff --git a/packages/data-context/test/unit/sources/fixtures/graphqlFixtures.ts b/packages/data-context/test/unit/sources/fixtures/graphqlFixtures.ts
new file mode 100644
index 000000000000..24d96277fd61
--- /dev/null
+++ b/packages/data-context/test/unit/sources/fixtures/graphqlFixtures.ts
@@ -0,0 +1,44 @@
+import { parse } from 'graphql'
+
+export const FAKE_USER_QUERY = parse(`{ cloudViewer { __typename id fullName email } }`)
+
+export const FAKE_USER_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com' } } }
+
+export const FAKE_USER_WITH_OPTIONAL_MISSING = parse(`{ cloudViewer { __typename id fullName email cloudProfileUrl } }`)
+
+export const FAKE_USER_WITH_OPTIONAL_MISSING_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', cloudProfileUrl: null } } }
+
+export const FAKE_USER_WITH_OPTIONAL_RESOLVED_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', cloudProfileUrl: 'https://example.com' } } }
+
+export const FAKE_USER_WITH_REQUIRED_MISSING = parse(`{ cloudViewer { __typename id fullName email userIsViewer } }`)
+
+export const FAKE_USER_WITH_REQUIRED_RESOLVED_RESPONSE = { data: { cloudViewer: { __typename: 'CloudUser', id: '1', fullName: 'test', email: 'test@example.com', userIsViewer: true } } }
+
+export const CLOUD_PROJECT_QUERY = parse(`{ currentProject { id cloudProject { __typename  ... on CloudProject { id } } } }`)
+
+export const CLOUD_PROJECT_RESPONSE = { data: { cloudProjectBySlug: { __typename: 'CloudProject', id: '1' } } }
+
+export const CLOUD_PROJECT_REQUEST_WITH_VARIABLES = parse(`
+  query WithVariables($fromBranch: String!) {
+    currentProject {
+      id
+      specs {
+        id
+        cloudSpec(name: "QueryList") {
+          id
+          fetchingStatus
+          data {
+            ... on CloudProjectSpec {
+              id
+              specRuns(first: 4, fromBranch: $fromBranch) {
+                nodes {
+                  id
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`)
diff --git a/packages/data-context/test/unit/util/DocumentNodeBuilder.spec.ts b/packages/data-context/test/unit/util/DocumentNodeBuilder.spec.ts
index b5a7aedccd83..ce66c493826d 100644
--- a/packages/data-context/test/unit/util/DocumentNodeBuilder.spec.ts
+++ b/packages/data-context/test/unit/util/DocumentNodeBuilder.spec.ts
@@ -36,7 +36,9 @@ describe('DocumentNodeBuilder', () => {
   it('frag: should generate a fragment', () => {
     const docNodeBuilder = new DocumentNodeBuilder({
       fieldNodes: ((CLOUD_VIEWER_QUERY.definitions[0] as OperationDefinitionNode).selectionSet.selections as ReadonlyArray<FieldNode>),
-      parentType: graphqlSchema.getQueryType(),
+      parentType: graphqlSchema.getQueryType()!,
+      variableDefinitions: [],
+      operationName: 'CLOUD_VIEWER_QUERY',
     })
 
     expect(print(docNodeBuilder.frag)).to.eql(dedent`
@@ -53,7 +55,9 @@ describe('DocumentNodeBuilder', () => {
   it('query: should create a query + fragment', () => {
     const docNodeBuilder = new DocumentNodeBuilder({
       fieldNodes: ((CLOUD_VIEWER_QUERY.definitions[0] as OperationDefinitionNode).selectionSet.selections as ReadonlyArray<FieldNode>),
-      parentType: graphqlSchema.getQueryType(),
+      parentType: graphqlSchema.getQueryType()!,
+      variableDefinitions: [],
+      operationName: 'CLOUD_VIEWER_QUERY',
     })
 
     expect(print(docNodeBuilder.query).trimEnd()).to.eql(dedent`
@@ -65,7 +69,7 @@ describe('DocumentNodeBuilder', () => {
         }
       }
 
-      {
+      query CLOUD_VIEWER_QUERY {
         ...GeneratedFragment
       }
     `)
@@ -75,8 +79,11 @@ describe('DocumentNodeBuilder', () => {
     const selections = ((CLOUD_PROJECT_QUERY.definitions[0] as OperationDefinitionNode).selectionSet.selections as ReadonlyArray<FieldNode>)
 
     const docNodeBuilder = new DocumentNodeBuilder({
-      fieldNodes: (selections[0].selectionSet.selections) as ReadonlyArray<FieldNode>,
+      isNode: true,
+      fieldNodes: (selections[0].selectionSet!.selections) as ReadonlyArray<FieldNode>,
       parentType: graphqlSchema.getType('CloudProject') as GraphQLObjectType,
+      variableDefinitions: [],
+      operationName: 'CLOUD_PROJECT_QUERY',
     })
 
     expect(print(docNodeBuilder.queryNode).trimRight()).to.eql(dedent`
@@ -94,7 +101,7 @@ describe('DocumentNodeBuilder', () => {
         }
       }
 
-      {
+      query CLOUD_PROJECT_QUERY {
         node(id: "PUSH_FRAGMENT_PLACEHOLDER") {
           __typename
           id
diff --git a/packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts b/packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts
index af4faa63167e..19f7a7881abf 100644
--- a/packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts
+++ b/packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts
@@ -174,6 +174,7 @@ async function makeE2ETasks () {
      */
     async __internal__beforeEach () {
       testState = {}
+      await DataContext.waitForActiveRequestsToFlush()
       await globalPubSub.emitThen('test:cleanup')
       await ctx.actions.app.removeAppDataDir()
       await ctx.actions.app.ensureAppDataDirExists()
@@ -214,7 +215,7 @@ async function makeE2ETasks () {
 
           if (remoteGraphQLIntercept) {
             try {
-              result = await remoteGraphQLIntercept({
+              result = await Promise.resolve(remoteGraphQLIntercept({
                 operationName,
                 variables,
                 document,
@@ -222,7 +223,7 @@ async function makeE2ETasks () {
                 result,
                 callCount: operationCount[operationName ?? 'unknown'],
                 Response,
-              }, testState)
+              }, testState))
             } catch (e) {
               const err = e as Error
 
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts b/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
index 9580706e9caf..87349335cdc6 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/clientTestUrqlClient.ts
@@ -63,13 +63,13 @@ export function testUrqlClient (context: ClientTestContext,
               }
 
               if (onResult) {
-                if (result.data.testFragmentMember) {
+                if (result.data?.testFragmentMember) {
                   const val = onResult(result.data.testFragmentMember, context)
 
                   if (val !== undefined) {
                     result.data.testFragmentMember = val
                   }
-                } else if (result.data.testFragmentMemberList) {
+                } else if (result.data?.testFragmentMemberList) {
                   const val = onResult(result.data.testFragmentMemberList, context)
 
                   if (val !== undefined) {
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
new file mode 100644
index 000000000000..3870fa6b9e38
--- /dev/null
+++ b/packages/frontend-shared/cypress/support/mock-graphql/fakeCloudSpecRun.ts
@@ -0,0 +1,77 @@
+import type { CloudSpecRun } from '../../../../graphql/src/gen/cloud-source-types.gen'
+import type { CloudSpecStatus } from '@packages/app/src/generated/graphql'
+
+export const randomRunStatus = (): CloudSpecStatus => {
+  const r = Math.floor(Math.random() * 5)
+
+  switch (r) {
+    case 0: return 'CANCELLED'
+    case 1: return 'ERRORED'
+    case 2: return 'FAILED'
+    case 3: return 'PASSED'
+    default: return 'RUNNING'
+  }
+}
+
+export const fakeRuns = (statuses: CloudSpecStatus[]): Required<CloudSpecRun>[] => {
+  return statuses.map((s, idx) => {
+    return {
+      __typename: 'CloudSpecRun',
+      id: `SpecRun_${idx}`,
+      status: s,
+      createdAt: new Date('2022-05-08T03:17:00').toISOString(),
+      completedAt: new Date('2022-05-08T05:17:00').toISOString(),
+      runNumber: 432,
+      groupCount: 2,
+      specDuration: {
+        min: 143003, // 2:23
+        max: 159120, // 3:40
+      },
+      testsFailed: {
+        min: 1,
+        max: 2,
+      },
+      testsPassed: {
+        min: 22,
+        max: 23,
+      },
+      testsSkipped: {
+        min: null,
+        max: null,
+      },
+      testsPending: {
+        min: 1,
+        max: 2,
+      },
+      url: 'https://google.com',
+    }
+  })
+}
+
+export const exampleRuns = () => {
+  const runs = fakeRuns(['PASSED', 'FAILED', 'CANCELLED', 'ERRORED', 'NOTESTS', 'OVERLIMIT', 'RUNNING', 'TIMEDOUT', 'UNCLAIMED', 'FAKE_UNKNOWN_STATUS' as any])
+
+  const now = new Date()
+  const twoYearsAgo = new Date(now.getFullYear() - 2, now.getMonth(), now.getDate())
+  const twoMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 2, now.getDate())
+
+  runs[1].groupCount = 1
+  runs[1].testsFailed = { ...runs[1].testsFailed ?? {}, max: null }
+  runs[1].testsPassed = { ...runs[1].testsPassed ?? {}, max: null }
+  runs[1].testsPending = { ...runs[1].testsPending ?? {}, max: null }
+  runs[1].specDuration = { min: 3760000, max: null }
+  runs[1].testsFailed = { ...runs[1].testsFailed ?? {}, max: null }
+  runs[1].createdAt = twoYearsAgo.toISOString()
+
+  runs[2].createdAt = twoMonthsAgo.toISOString()
+  runs[2].testsFailed = { ...runs[2].testsFailed ?? {}, max: runs[2].testsFailed?.min ?? null }
+
+  runs[3].testsFailed = { ...runs[1].testsFailed ?? {}, max: 435 }
+  runs[3].testsPassed = { ...runs[1].testsPassed ?? {}, max: 435 }
+  runs[3].testsPending = { ...runs[1].testsPending ?? {}, max: 435 }
+  runs[3].testsSkipped = { min: 4, max: 435 }
+  runs[3].specDuration = { min: 3760000, max: 37600000 }
+  runs[3].groupCount = 4358
+
+  return runs
+}
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
index 53e3c6c02994..47ca3e3230b0 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/mountFragment.ts
@@ -81,12 +81,20 @@ export const registerMountFn = ({ plugins }: MountFnOptions = {}) => {
       mountingOptions?.global?.plugins?.push(pluginFn())
     })
 
+    let queryVariablesSegment = ''
+
+    if (options.variableTypes) {
+      queryVariablesSegment = Object.entries(options.variableTypes || {}).map(([name, type]) => `\$${name}: ${type}`).join(',')
+      queryVariablesSegment = `(${queryVariablesSegment})`
+    }
+
     return mount(defineComponent({
       name: `MountFragment`,
       setup () {
         const result = useQuery({
+          variables: options.variables,
           query: `
-            query MountFragmentTest {
+            query MountFragmentTest${queryVariablesSegment} {
               ${fieldName} {
                 ...${(source.definitions[0] as FragmentDefinitionNode).name.value}
               }
@@ -161,6 +169,16 @@ export const registerMountFn = ({ plugins }: MountFnOptions = {}) => {
 }
 
 type MountFragmentConfig<T extends TypedDocumentNode<any, any>> = {
+  /**
+   * Dictionary of GQL variable names to their GQL data type (String, Boolean!, etc)
+   * for any variables that are used in the fragment.
+   * This should be used in conjunction with `variables`
+   */
+  variableTypes?: Record<keyof VariablesOf<T>, string>
+  /**
+   * Dictionary of variable names to their values for any variables that are used in the
+   * fragment. This should be used in conjunction with `variableTypes`
+   */
   variables?: VariablesOf<T>
   /**
    * When we are mounting a GraphQL Fragment, we can use `onResult`
@@ -180,6 +198,7 @@ type MountFragmentListConfig<T extends TypedDocumentNode<any, any>> = {
    * @default 2
    */
   count?: number
+  variableTypes?: Record<keyof VariablesOf<T>, string>
   variables?: VariablesOf<T>
   render: (frag: Exclude<ResultOf<T>, undefined>[]) => JSX.Element
   onResult?: (result: ResultOf<T>, ctx: ClientTestContext) => ResultOf<T> | void
diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts
index 9688a5273ac7..7f14a8af91fa 100644
--- a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts
+++ b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Mutation.ts
@@ -1,4 +1,4 @@
-import type { Mutation } from '../generated/test-graphql-types.gen'
+import type { Mutation, RemoteFetchable } from '../generated/test-graphql-types.gen'
 
 import type { MaybeResolver } from './clientTestUtils'
 import { createTestCurrentProject, createTestGlobalProject } from './stubgql-Project'
@@ -8,6 +8,10 @@ function basename (path: string) {
   return path.split(/[/\\]/).slice(-1)[0]
 }
 
+const atob = global.atob ?? function atob (str: string) {
+  return Buffer.from(str, 'base64').toString('utf8')
+}
+
 export const stubMutation: MaybeResolver<Mutation> = {
   __typename: 'Mutation',
   addProject (source, args, ctx) {
@@ -119,4 +123,20 @@ export const stubMutation: MaybeResolver<Mutation> = {
 
     return {}
   },
+  loadRemoteFetchables (source, args, ctx) {
+    return args.ids.map((id) => {
+      const [__typename, hash] = atob(id).split(':')
+
+      const rf: RemoteFetchable & {__typename: string} = {
+        id,
+        fetchingStatus: 'FETCHING',
+        operation: '',
+        operationHash: hash,
+        operationVariables: {},
+        __typename,
+      }
+
+      return rf
+    })
+  },
 }
diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
index 9c64b1ab3451..3951d6477e67 100644
--- a/packages/frontend-shared/package.json
+++ b/packages/frontend-shared/package.json
@@ -47,7 +47,7 @@
     "dayjs": "^1.9.3",
     "fake-uuid": "^1.0.0",
     "faker": "5.5.3",
-    "floating-vue": "2.0.0-beta.16",
+    "floating-vue": "2.0.0-beta.17",
     "fuzzysort": "^1.1.4",
     "graphql": "^15.5.1",
     "graphql-relay": "^0.9.0",
diff --git a/packages/frontend-shared/src/assets/icons/cancelled-solid_x16.svg b/packages/frontend-shared/src/assets/icons/cancelled-solid_x16.svg
new file mode 100644
index 000000000000..d7be1f99075f
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/cancelled-solid_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8ZM5 7C4.44772 7 4 7.44772 4 8C4 8.55228 4.44772 9 5 9H11C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7H5Z" fill="#AFB3C7"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/dot-solid_x4.svg b/packages/frontend-shared/src/assets/icons/dot-solid_x4.svg
new file mode 100644
index 000000000000..3a0bdecce15e
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/dot-solid_x4.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="2" cy="2" r="2" fill="#1FA971" class="icon-light" />
+</svg>
\ No newline at end of file
diff --git a/packages/frontend-shared/src/assets/icons/errored-solid_x16.svg b/packages/frontend-shared/src/assets/icons/errored-solid_x16.svg
new file mode 100644
index 000000000000..e627543baacb
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/errored-solid_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 5C9 4.44772 8.55228 4 8 4C7.44772 4 7 4.44772 7 5V8C7 8.55228 7.44772 9 8 9C8.55228 9 9 8.55228 9 8V5ZM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z" fill="#DB7903"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/failed-solid_x16.svg b/packages/frontend-shared/src/assets/icons/failed-solid_x16.svg
new file mode 100644
index 000000000000..141ac940c71a
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/failed-solid_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="#E45770"/>
+<path d="M6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L6.70711 5.29289ZM9.29289 10.7071C9.68342 11.0976 10.3166 11.0976 10.7071 10.7071C11.0976 10.3166 11.0976 9.68342 10.7071 9.29289L9.29289 10.7071ZM10.7071 6.70711C11.0976 6.31658 11.0976 5.68342 10.7071 5.29289C10.3166 4.90237 9.68342 4.90237 9.29289 5.29289L10.7071 6.70711ZM5.29289 9.29289C4.90237 9.68342 4.90237 10.3166 5.29289 10.7071C5.68342 11.0976 6.31658 11.0976 6.70711 10.7071L5.29289 9.29289ZM5.29289 6.70711L9.29289 10.7071L10.7071 9.29289L6.70711 5.29289L5.29289 6.70711ZM9.29289 5.29289L5.29289 9.29289L6.70711 10.7071L10.7071 6.70711L9.29289 5.29289Z" fill="white"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/passed-solid_x16.svg b/packages/frontend-shared/src/assets/icons/passed-solid_x16.svg
new file mode 100644
index 000000000000..e90d677a69f2
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/passed-solid_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="#1FA971"/>
+<path d="M10 6L7.5 10L6 8.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/placeholder-solid_x16.svg b/packages/frontend-shared/src/assets/icons/placeholder-solid_x16.svg
new file mode 100644
index 000000000000..b1d8c423542c
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/placeholder-solid_x16.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="7" fill="#D0D2E0"/>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/queued-solid_x16.svg b/packages/frontend-shared/src/assets/icons/queued-solid_x16.svg
new file mode 100644
index 000000000000..38cf3603d698
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/queued-solid_x16.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Dimensions=x16">
+<circle id="Circle" cx="8" cy="8" r="6" stroke="#E1E3ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/packages/frontend-shared/src/assets/icons/running-outline_x16.svg b/packages/frontend-shared/src/assets/icons/running-outline_x16.svg
new file mode 100644
index 000000000000..5deb3879565e
--- /dev/null
+++ b/packages/frontend-shared/src/assets/icons/running-outline_x16.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="6" stroke="#E1E3ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8C14 4.68629 11.3137 2 8 2" stroke="#6470F3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/frontend-shared/src/components/ResultCounts.cy.tsx b/packages/frontend-shared/src/components/ResultCounts.cy.tsx
new file mode 100644
index 000000000000..65608cd61337
--- /dev/null
+++ b/packages/frontend-shared/src/components/ResultCounts.cy.tsx
@@ -0,0 +1,52 @@
+import { defaultMessages } from '@cy/i18n'
+import ResultCounts from './ResultCounts.vue'
+
+describe('<ResultCounts />', () => {
+  it('renders expected contents', () => {
+    cy.mount(() => (
+      <ResultCounts
+        totalFailed={1}
+        totalPassed={2}
+        totalPending={3}
+        totalSkipped={4}
+      />))
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.skipped}-count"]`)
+    .should('contain', '4')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.pending}-count"]`)
+    .should('contain', '3')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.passed}-count"]`)
+    .should('contain', '2')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.failed}-count"]`)
+    .should('contain', '1')
+
+    cy.percySnapshot()
+  })
+
+  it('renders string range values', () => {
+    cy.mount(() => (
+      <ResultCounts
+        totalFailed="1-2"
+        totalPassed="2-20"
+        totalPending="5-5"
+        totalSkipped="10-1"
+      />))
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.skipped}-count"]`)
+    .should('contain', '10-1')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.pending}-count"]`)
+    .should('contain', '5-5')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.passed}-count"]`)
+    .should('contain', '2-20')
+
+    cy.get(`[data-cy="runResults-${defaultMessages.runs.results.failed}-count"]`)
+    .should('contain', '1-2')
+
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/frontend-shared/src/components/ResultCounts.vue b/packages/frontend-shared/src/components/ResultCounts.vue
new file mode 100644
index 000000000000..bbe5a211657e
--- /dev/null
+++ b/packages/frontend-shared/src/components/ResultCounts.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="border rounded flex border-gray-200 h-6 text-gray-700 text-size-14px leading-20px">
+    <div
+      v-for="(result, i) in results"
+      :key="i"
+      class="flex px-2 items-center"
+      :title="result.name"
+      :data-cy="`runResults-${result.name}-count`"
+    >
+      <component
+        :is="result.icon"
+        class="mt-px h-12px mr-1 w-12px"
+        :class="result.class"
+      />
+      <span class="sr-only">{{ result.name }}</span>
+      {{ result.value }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface ResultCountsProps {
+  totalPassed: number|string|null
+  totalFailed: number|string|null
+  totalPending: number|string|null
+  totalSkipped: number|string|null
+}
+
+import { computed } from 'vue'
+import SkippedIcon from '~icons/cy/status-skipped_x12.svg'
+import PassedIcon from '~icons/cy/status-passed_x12.svg'
+import FailedIcon from '~icons/cy/status-failed_x12.svg'
+import PendingIcon from '~icons/cy/status-pending_x12.svg'
+import { useI18n } from '@cy/i18n'
+const { t } = useI18n()
+
+const props = defineProps<ResultCountsProps>()
+
+const results = computed(() => {
+  return [
+    {
+      value: props.totalSkipped,
+      class: 'icon-dark-gray-400',
+      icon: SkippedIcon,
+      name: t('runs.results.skipped'),
+    },
+    {
+      value: props.totalPending,
+      class: 'icon-dark-gray-400 icon-light-white',
+      icon: PendingIcon,
+      name: t('runs.results.pending'),
+    },
+    {
+      value: props.totalPassed,
+      class: 'icon-dark-jade-400',
+      icon: PassedIcon,
+      name: t('runs.results.passed'),
+    },
+    {
+      value: props.totalFailed,
+      class: 'icon-dark-red-400',
+      icon: FailedIcon,
+      name: t('runs.results.failed'),
+    },
+  ]
+})
+
+</script>
diff --git a/packages/frontend-shared/src/components/Tooltip.cy.tsx b/packages/frontend-shared/src/components/Tooltip.cy.tsx
index 7218a819295a..971635607a82 100644
--- a/packages/frontend-shared/src/components/Tooltip.cy.tsx
+++ b/packages/frontend-shared/src/components/Tooltip.cy.tsx
@@ -1,9 +1,9 @@
 import Tooltip from './Tooltip.vue'
 
-const slotContents = {
-  popper: () => <span>tooltip</span>,
-  default: () => <span class="default-slot">hello</span>,
-}
+const slotContents = (x: number) => ({
+  popper: () => <span>Tooltip {x}</span>,
+  default: () => <span class={`default-slot${x}`}>hello</span>,
+})
 
 describe('<Tooltip />', () => {
   it('playground', () => {
@@ -11,14 +11,45 @@ describe('<Tooltip />', () => {
       return (
         <div class="p-4 w-100px">
           {/* @ts-ignore */}
-          <Tooltip v-slots={slotContents} placement="right" />
+          <Tooltip v-slots={slotContents(0)} placement="right" />
+        </div>
+      )
+    })
+
+    cy.get('.default-slot0')
+    .realHover()
+
+    cy.contains('Tooltip 0')
+  })
+
+  it('playground - interactive', { viewportHeight: 400 }, () => {
+    cy.mount(() => {
+      return (
+        <div class="flex m-100px p-4 w-100px gap-160px">
+          {/* @ts-ignore */}
+          <Tooltip v-slots={slotContents(0)} placement="bottom" isInteractive />
+          <Tooltip v-slots={slotContents(1)} placement="top" isInteractive />
+          <Tooltip v-slots={slotContents(2)} placement="left" isInteractive />
+          <Tooltip v-slots={slotContents(3)} placement="right" isInteractive />
         </div>
       )
     })
 
-    cy.get('.default-slot')
+    cy.get('.default-slot0')
+    .realHover()
+
+    cy.get('.default-slot1')
+    .realHover()
+
+    cy.get('.default-slot2')
+    .realHover()
+
+    cy.get('.default-slot3')
     .realHover()
 
-    cy.contains('tooltip')
+    cy.contains('Tooltip 0')
+    cy.contains('Tooltip 1')
+    cy.contains('Tooltip 2')
+    cy.contains('Tooltip 3')
   })
 })
diff --git a/packages/frontend-shared/src/components/Tooltip.vue b/packages/frontend-shared/src/components/Tooltip.vue
index a8353428c26d..c84eaf0b75d6 100644
--- a/packages/frontend-shared/src/components/Tooltip.vue
+++ b/packages/frontend-shared/src/components/Tooltip.vue
@@ -1,28 +1,70 @@
 <template>
-  <Tooltip
+  <component
+    :is="isInteractive? Menu : Tooltip"
     v-if="!disabled"
-    :popper-class="{'no-arrow': hideArrow}"
-    :popper-hide-triggers="['hover']"
+    :popper-class="actualPopperClass"
+    :theme="theme"
+    :placement="placement ?? 'auto'"
+    :distance="distance"
+    :skidding="skidding"
+    :auto-hide="false /* to prevent the popper from getting focus */"
+    :delay="{show: 0, hide: hideDelay }"
+    :show-group="showGroup"
   >
     <slot />
-    <template #popper>
-      <slot name="popper" />
+    <template
+      #popper
+    >
+      <slot
+        name="popper"
+      />
     </template>
-  </Tooltip>
+  </component>
   <slot v-else />
 </template>
 
 <script setup lang="ts">
-import { Tooltip } from 'floating-vue'
+import { computed } from 'vue'
+import { Tooltip, Menu } from 'floating-vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   color?: string
   hideArrow?: boolean
   disabled?: boolean
+  isInteractive?: boolean
+  distance?: number
+  skidding?: number
+  placement?: 'top' | 'right' | 'bottom' | 'left'
+  popperClass?: string
+  hideDelay?: number
+  instantMove?: boolean
+  showGroup?: string
 }>(), {
   color: 'dark',
   hideArrow: false,
   disabled: false,
+  isInteractive: false,
+  distance: undefined,
+  skidding: undefined,
+  placement: undefined,
+  popperClass: undefined,
+  hideDelay: 100,
+  instantMove: undefined,
+  showGroup: undefined,
+})
+
+const theme = computed(() => {
+  return props.isInteractive ? 'menu' : 'tooltip'
+})
+
+const actualPopperClass = computed(() => {
+  const result: string[] = props.popperClass ? [props.popperClass] : []
+
+  if (props.hideArrow) {
+    result.push('no-arrow')
+  }
+
+  return result
 })
 
 </script>
@@ -90,4 +132,42 @@ withDefaults(defineProps<{
   }
 }
 
+.v-popper__popper.v-popper--theme-menu {
+  .v-popper__inner {
+    @apply bg-white text-black;
+    border-color: transparent;
+    border-radius: 4px !important;
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
+    padding: 0;
+  }
+
+  .v-popper__arrow-outer {
+    border-color: white;
+  }
+
+  &[data-popper-placement="top"] {
+    .v-popper__arrow-outer {
+      filter: drop-shadow(0 1px 1px $gray-100);
+    }
+  }
+
+  &[data-popper-placement="bottom"] {
+    .v-popper__arrow-outer {
+      filter: drop-shadow(0 -1px 1px $gray-100);
+    }
+  }
+
+  &[data-popper-placement="left"] {
+    .v-popper__arrow-outer {
+      filter: drop-shadow(1px 0px 1px $gray-100);
+    }
+  }
+
+  &[data-popper-placement="right"] {
+    .v-popper__arrow-outer {
+      filter: drop-shadow(-1px 0px 1px $gray-100);
+    }
+  }
+}
+
 </style>
diff --git a/packages/frontend-shared/src/composables/useCollapsibleTree.ts b/packages/frontend-shared/src/composables/useCollapsibleTree.ts
index 3003396c50ba..119523bc18c9 100644
--- a/packages/frontend-shared/src/composables/useCollapsibleTree.ts
+++ b/packages/frontend-shared/src/composables/useCollapsibleTree.ts
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useToggle } from '@vueuse/core'
 
 export type RawNode <T> = {
+  id: string
   name: string
   children: RawNode<T>[]
 }
@@ -23,6 +24,12 @@ export type UseCollapsibleTreeNode <T extends RawNode<T>> = {
 export interface UseCollapsibleTreeOptions {
   expandInitially?: boolean
   dropRoot?: boolean
+  /**
+   * Provide a long-lived cache to preserve directory collapse state across tree re-builds.
+   * This can be useful when row data is updating but doesn't represent a change to the
+   * structure of the tree.
+   */
+  cache?: Map<string, boolean>
 }
 
 function collectRoots<T extends RawNode<T>> (node: UseCollapsibleTreeNode<T> | null, acc: UseCollapsibleTreeNode<T>[] = []) {
@@ -38,20 +45,34 @@ function collectRoots<T extends RawNode<T>> (node: UseCollapsibleTreeNode<T> | n
 }
 
 export const useCollapsibleTreeNode = <T extends RawNode<T>>(rawNode: T, options: UseCollapsibleTreeOptions, depth: number, parent: UseCollapsibleTreeNode<T> | null): UseCollapsibleTreeNode<T> => {
+  const { cache, expandInitially } = options
   const treeNode = rawNode as UseCollapsibleTreeNode<T>
   const roots = parent ? collectRoots<T>(parent) : []
-  const [expanded, toggle] = useToggle(!!options.expandInitially)
+  const [expanded, toggle] = useToggle(cache?.get(rawNode.id) ?? !!expandInitially)
+
   const hidden = computed(() => {
     return !!roots.find((r) => r.expanded.value === false)
   })
 
+  const wrappedToggle = (value?: boolean): boolean => {
+    const originalState = expanded.value
+    const newValue = toggle(value)
+
+    // If this is a non-hidden directory then watch for expansion changes and register them into the cache if one was provided
+    if (!!cache && !hidden.value && rawNode.children?.length) {
+      cache.set(rawNode.id, !originalState)
+    }
+
+    return newValue
+  }
+
   return {
     ...treeNode,
     depth,
     parent,
     hidden,
     expanded,
-    toggle,
+    toggle: wrappedToggle,
   }
 }
 
@@ -92,7 +113,7 @@ function sortTree<T extends RawNode<T>> (tree: T) {
 }
 
 export function useCollapsibleTree <T extends RawNode<T>> (tree: T, options: UseCollapsibleTreeOptions = {}) {
-  options.expandInitially = options.expandInitially || true
+  options.expandInitially = options.expandInitially ?? true
   sortTree(tree)
   const collapsibleTree = buildTree<T>(tree, options)
 
diff --git a/packages/frontend-shared/src/gql-components/Auth.vue b/packages/frontend-shared/src/gql-components/Auth.vue
index 0f858b1a8cb3..72cfd5a4f36d 100644
--- a/packages/frontend-shared/src/gql-components/Auth.vue
+++ b/packages/frontend-shared/src/gql-components/Auth.vue
@@ -68,6 +68,7 @@ import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { gql } from '@urql/core'
 import { useMutation } from '@urql/vue'
 import { useOnline } from '@vueuse/core'
+import { getUtmSource } from '@packages/frontend-shared/src/utils/getUtmSource'
 
 import {
   Auth_LoginDocument,
@@ -86,6 +87,7 @@ const props = defineProps<{
   gql: AuthFragment
   showRetry?: boolean
   showLogout?: boolean
+  utmMedium: string
 }>()
 
 gql`
@@ -112,8 +114,8 @@ mutation Auth_Logout {
 `
 
 gql`
-mutation Auth_Login {
-  login {
+mutation Auth_Login ($utmSource: String!, $utmMedium: String!) {
+  login (utmSource: $utmSource, utmMedium: $utmMedium) {
     ...Auth
   }
 }
@@ -183,7 +185,7 @@ const handleLoginOrContinue = async () => {
 
   loginInitiated.value = true
 
-  login.executeMutation({})
+  login.executeMutation({ utmMedium: props.utmMedium, utmSource: getUtmSource() })
 }
 
 const handleLogout = () => {
@@ -193,7 +195,7 @@ const handleLogout = () => {
 const handleTryAgain = async () => {
   await reset.executeMutation({})
 
-  login.executeMutation({})
+  login.executeMutation({ utmMedium: props.utmMedium, utmSource: getUtmSource() })
 }
 
 const handleCancel = () => {
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
index fa5be39dd581..2fc450b403ab 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -154,6 +154,7 @@
                 <Auth
                   :gql="props.gql"
                   :show-logout="true"
+                  utm-medium="Nav"
                 />
               </div>
             </div>
@@ -174,6 +175,7 @@
       <LoginModal
         v-model="isLoginOpen"
         :gql="props.gql"
+        utm-medium="Nav"
       />
     </div>
   </div>
diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx b/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx
index 7f990c668ec1..dd001c4f2b17 100644
--- a/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/topnav/LoginModal.cy.tsx
@@ -31,7 +31,7 @@ const mountSuccess = (viewer: TestCloudViewer = cloudViewer) => {
       result.cloudViewer = viewer
       result.cloudViewer.__typename = 'CloudUser'
     },
-    render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} /></div>,
+    render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing" /></div>,
   })
 }
 
@@ -39,7 +39,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
   describe('progress communication', () => {
     it('renders and reaches "opening browser" status', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} /></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing" /></div>,
       })
 
       cy.contains('h2', text.login.titleInitial).should('be.visible')
@@ -59,7 +59,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
         render: (gqlVal) => {
           gqlVal.authState.browserOpened = true
 
-          return <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} /></div>
+          return <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing" /></div>
         },
       })
 
@@ -90,7 +90,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
         },
         render: (gqlVal) =>
           (<div class="border-current border-1 h-700px resize overflow-auto">
-            <LoginModal gql={gqlVal} modelValue={true}/>
+            <LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/>
           </div>),
       })
 
@@ -118,7 +118,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
           gqlVal.authState.message = errorText
 
           return (<div class="border-current border-1 h-700px resize overflow-auto">
-            <LoginModal gql={gqlVal} modelValue={true} {...methods}/>
+            <LoginModal gql={gqlVal} modelValue={true} {...methods} utmMedium="testing"/>
           </div>)
         },
       })
@@ -158,7 +158,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
 
     it('renders correct components if there is no internet connection', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} /></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/></div>,
       })
 
       cy.goOffline()
@@ -171,7 +171,7 @@ describe('<LoginModal />', { viewportWidth: 1000, viewportHeight: 750 }, () => {
 
     it('shows login action when the internet is back', () => {
       cy.mountFragment(LoginModalFragmentDoc, {
-        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} /></div>,
+        render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><LoginModal gql={gqlVal} modelValue={true} utmMedium="testing"/></div>,
       })
 
       cy.goOffline()
diff --git a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue b/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
index 560135437b42..a7ddf8188284 100644
--- a/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/LoginModal.vue
@@ -79,7 +79,8 @@
           <Auth
             :gql="props.gql"
             :show-retry="!!error"
-            @continue="$emit('update:modelValue', false)"
+            :utm-medium="props.utmMedium"
+            @continue="continueAuth"
           />
         </div>
       </div>
@@ -107,13 +108,23 @@ import type { LoginModalFragment } from '../../generated/graphql'
 
 const online = useOnline()
 
+function continueAuth (isLoggedIn: boolean) {
+  if (isLoggedIn) {
+    emit('loggedin')
+  }
+
+  emit('update:modelValue', false)
+}
+
 const emit = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
+  (event: 'loggedin'): void
 }>()
 
 const props = defineProps<{
   modelValue: boolean
   gql: LoginModalFragment
+  utmMedium: string
 }>()
 
 gql`
diff --git a/packages/frontend-shared/src/graphql/urqlClient.ts b/packages/frontend-shared/src/graphql/urqlClient.ts
index 0eb0a9b1ac2e..9047dfe115e6 100644
--- a/packages/frontend-shared/src/graphql/urqlClient.ts
+++ b/packages/frontend-shared/src/graphql/urqlClient.ts
@@ -6,6 +6,7 @@ import {
   errorExchange,
   fetchExchange,
   subscriptionExchange,
+  CombinedError,
 } from '@urql/core'
 import { devtoolsExchange } from '@urql/devtools'
 import { useToast } from 'vue-toastification'
@@ -21,11 +22,38 @@ import { pubSubExchange } from './urqlExchangePubsub'
 import { namedRouteExchange } from './urqlExchangeNamedRoute'
 import type { SpecFile, AutomationElementId, Browser } from '@packages/types'
 import { urqlFetchSocketAdapter } from './urqlFetchSocketAdapter'
-import type { DocumentNode } from 'graphql'
 import { initializeGlobalSubscriptions } from './urqlGlobalSubscriptions'
+import type { GlobalSubscriptions_PushFragmentSubscription } from '../generated/graphql'
 
 const toast = useToast()
 
+let hasError = false
+
+export function showError (error: CombinedError) {
+  const message = `
+    GraphQL Field Path: [${error.graphQLErrors?.[0]?.path?.join(', ')}]:
+
+    ${error.message ?? error.graphQLErrors?.[0]?.message}
+
+    ${error.stack ?? error.graphQLErrors?.[0]?.stack ?? ''}
+  `
+
+  if (process.env.NODE_ENV !== 'production' && !hasError) {
+    hasError = true
+    timeoutId = setTimeout(() => {
+      toast.error(message, {
+        timeout: false,
+        onClose () {
+          hasError = false
+        },
+      })
+    }, 1000)
+  }
+
+  // eslint-disable-next-line
+  console.error(error)
+}
+
 export function makeCacheExchange (schema: any = urqlSchema) {
   return graphcacheExchange({
     ...urqlCacheKeys,
@@ -33,10 +61,22 @@ export function makeCacheExchange (schema: any = urqlSchema) {
     updates: {
       Subscription: {
         pushFragment (parent, args, cache, info) {
-          const { pushFragment } = parent as { pushFragment: { id?: string, fragment: DocumentNode, data: any, typename: string }[] }
+          const { pushFragment } = parent as GlobalSubscriptions_PushFragmentSubscription
 
           for (const toPush of pushFragment) {
-            cache.writeFragment(toPush.fragment, toPush.data)
+            if (toPush.invalidateCache) {
+              cache.invalidate({ __typename: 'Query' })
+              continue
+            }
+
+            cache.writeFragment(toPush.fragment, toPush.data, toPush.variables ?? {})
+
+            if (toPush.errors?.length) {
+              // TODO: clean this up
+              showError({
+                graphQLErrors: toPush.errors,
+              } as CombinedError)
+            }
           }
         },
       },
@@ -93,8 +133,6 @@ export function clearPendingError () {
 }
 
 export async function makeUrqlClient (config: UrqlClientConfig): Promise<Client> {
-  let hasError = false
-
   const exchanges: Exchange[] = [dedupExchange]
 
   const io = getPubSubSource(config)
@@ -114,28 +152,7 @@ export async function makeUrqlClient (config: UrqlClientConfig): Promise<Client>
   exchanges.push(
     errorExchange({
       onError (error) {
-        const message = `
-        GraphQL Field Path: [${error.graphQLErrors?.[0]?.path?.join(', ')}]:
-
-        ${error.message}
-
-        ${error.stack ?? ''}
-      `
-
-        if (process.env.NODE_ENV !== 'production' && !hasError) {
-          hasError = true
-          timeoutId = setTimeout(() => {
-            toast.error(message, {
-              timeout: false,
-              onClose () {
-                hasError = false
-              },
-            })
-          }, 1000)
-        }
-
-        // eslint-disable-next-line
-        console.error(error)
+        showError(error)
       },
     }),
     // https://formidable.com/open-source/urql/docs/graphcache/errors/
diff --git a/packages/frontend-shared/src/graphql/urqlDetailedDebugExchange.ts b/packages/frontend-shared/src/graphql/urqlDetailedDebugExchange.ts
new file mode 100644
index 000000000000..7eddbb186ff7
--- /dev/null
+++ b/packages/frontend-shared/src/graphql/urqlDetailedDebugExchange.ts
@@ -0,0 +1,74 @@
+import md5 from 'md5'
+import type { Exchange } from '@urql/core'
+import { pipe, tap } from 'wonka'
+import jsonStableStringify from 'json-stable-stringify'
+import type { OperationDefinitionNode } from 'graphql'
+import { print } from 'graphql'
+
+declare global {
+  interface Window {
+    __toPrintClear: Function
+    __toPrint__: {
+      queries: Record<any, any>
+      logs: any[]
+      data: Record<string, any>
+    }
+  }
+}
+
+window.__toPrintClear = function () {
+  window.__toPrint__ = {
+    queries: [],
+    logs: [],
+    data: {},
+  }
+}
+
+/**
+ * detailedDebugExchange:
+ *
+ * This is not imported/included by default in the urqlClient, but can be very helpful when debugging
+ * edge-case bugs in the urqlCache exchange. To use, import & add in the exchanges array, prior to the
+ * makeCacheExchange() definition. Calling `copy(window.__toPrint__)` in the console will spit out a whole
+ * bunch of metadata logged about the URQL request/response handling. The `window.__toPrintClear` can be used
+ * to reset the state, if you need to narrow down the logs to a smaller scope of payloads.
+ */
+export const detailedDebugExchange: Exchange = ({ forward }) => {
+  return (ops$) => {
+    window.__toPrint__ ??= {
+      queries: [],
+      logs: [],
+      data: {},
+    }
+
+    return pipe(
+      ops$,
+      tap((op) => {
+        // @ts-ignore
+        window.__toPrint__.queries[(op.query.definitions[0] as OperationDefinitionNode).name?.value] = print(op.query)
+        window.__toPrint__.logs.push(JSON.parse(JSON.stringify({
+          debugType: 'incoming',
+          timestamp: new Date().valueOf(),
+          ...op,
+          query: (op.query.definitions[0] as OperationDefinitionNode).name?.value,
+        })))
+      }),
+      forward,
+      tap((result) => {
+        const hash = md5(jsonStableStringify(result.data))
+
+        window.__toPrint__.data[hash] = result.data
+        window.__toPrint__.logs.push(JSON.parse(JSON.stringify({
+          debugType: 'completed',
+          timestamp: new Date().valueOf(),
+          ...result,
+          data: hash,
+          operation: {
+            ...result.operation,
+            query: (result.operation.query.definitions[0] as OperationDefinitionNode).name?.value,
+          },
+        })))
+      }),
+    )
+  }
+}
diff --git a/packages/frontend-shared/src/graphql/urqlGlobalSubscriptions.ts b/packages/frontend-shared/src/graphql/urqlGlobalSubscriptions.ts
index a9ce37de491c..b2c08398f7c5 100644
--- a/packages/frontend-shared/src/graphql/urqlGlobalSubscriptions.ts
+++ b/packages/frontend-shared/src/graphql/urqlGlobalSubscriptions.ts
@@ -8,6 +8,9 @@ gql`
      target
      fragment
      data
+     errors
+     variables
+     invalidateCache
    }
  }
 `
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
index 6532871b2556..4f5e9929b933 100644
--- a/packages/frontend-shared/src/locales/en-US.json
+++ b/packages/frontend-shared/src/locales/en-US.json
@@ -122,14 +122,59 @@
     "clearSearch": "Clear search field",
     "componentSpecsHeader": "Component specs",
     "e2eSpecsHeader": "E2E specs",
-    "lastUpdatedHeader": "Last updated",
+    "lastUpdated": {
+      "header": "Last updated",
+      "tooltip": {
+        "gitStatus": "Git status",
+        "gitInfo": "git info",
+        "gitInfoAvailable": "{0} of the spec files within this project",
+        "gitInfoUnavailable": "Cypress is unable to detect {0} for this project and has defaulted to showing file system data instead"
+      }
+    },
+    "latestRuns": {
+      "header": "Latest runs",
+      "headerShort": "Runs",
+      "tooltip": {
+        "connected": "The {0} in the Cypress Dashboard",
+        "notConnected": "Connect to the Cypress Dashboard to see the {0}",
+        "noAccess": "Request access to this project in the Cypress Dashboard to view the {0}",
+        "linkText": "status of your latest runs"
+      }
+    },
+    "averageDuration": {
+      "header": "Average duration",
+      "headerShort": "Duration",
+      "tooltip": {
+        "connected": "The {0} of your latest runs in the Cypress Dashboard",
+        "notConnected": "Connect to the Cypress Dashboard to see the {0} of your latest runs",
+        "noAccess": "Request access to this project in the Cypress Dashboard to view the {0} of your latest runs",
+        "linkText": "average spec durations"
+      }
+    },
+    "connectProjectButton": "Connect your project",
+    "dashboardLoginButton": "Log in to the Dashboard",
+    "reconnectProjectButton": "Reconnect your project",
+    "requestAccessButton": "Request access",
+    "requestSentButton": "Request sent",
     "rows": {
       "gitTooltipSubtext": "{shortHash} by {author}"
     },
     "noResultsMessage": "No specs matched your search:",
-    "noSpecErrorTitle": "Spec not found",
-    "noSpecErrorIntro": "There is no spec matching the following location:",
-    "noSpecErrorExplainer": "It is possible that the file has been moved or deleted. Please choose from the list of specs below."
+    "noSpecError": {
+      "title": "Spec not found",
+      "intro": "There is no spec matching the following location:",
+      "explainer": "It is possible that the file has been moved or deleted. Please choose from the list of specs below."
+    },
+    "offlineWarning": {
+      "title": "No internet connection",
+      "explainer": "Please check your internet connection to resolve this issue. When your internet connection is fixed, we will automatically attempt to fetch the run metrics from the Cypress Dashboard."
+    },
+    "fetchFailedWarning": {
+      "title": "Lost connection",
+      "explainer1": "The request timed out or failed when trying to retrieve the recorded run metrics from the Cypress Dashboard. The information that you're seeing in the table below may be incomplete as a result.",
+      "explainer2": "Please refresh the page to try again and visit our {0} if this behavior continues.",
+      "refreshButton": "Try again"
+    }
   },
   "noResults": {
     "defaultMessage": "No results matched your search:",
@@ -382,7 +427,7 @@
       "errorNotFound": "Project not found",
       "errorNotFoundButton": "Connect it again",
       "errorNotLoggedIn": "You are not connected to the Cypress Dashboard",
-      "errorNotLoggedInButton": "Log in to Cypress Dashboard"
+      "errorNotLoggedInButton": "Log in to the Cypress Dashboard"
     },
     "project": {
       "title": "Project Settings",
diff --git a/packages/frontend-shared/src/utils/getUrlWithParams.ts b/packages/frontend-shared/src/utils/getUrlWithParams.ts
index 0e55a9dae2c9..f8c0b527ab3f 100644
--- a/packages/frontend-shared/src/utils/getUrlWithParams.ts
+++ b/packages/frontend-shared/src/utils/getUrlWithParams.ts
@@ -1,3 +1,5 @@
+import { getUtmSource } from './getUtmSource'
+
 export type LinkWithParams = {
   url: string
   params: { [key: string]: string }
@@ -8,11 +10,7 @@ export const getUrlWithParams = (link: LinkWithParams) => {
   const hasUtmParams = Object.keys(link.params).some((param) => param.startsWith('utm_'))
 
   if (hasUtmParams) {
-    // __CYPRESS_MODE__ is only set on the window in th browser app -
-    // checking this allows us to know if links are clicked in the browser app or the launchpad
-    const utm_source = window.__CYPRESS_MODE__ ? 'Binary: App' : 'Binary: Launchpad'
-
-    link.params.utm_source = utm_source
+    link.params.utm_source = getUtmSource()
   }
 
   if (link.params) {
diff --git a/packages/frontend-shared/src/utils/getUtmSource.ts b/packages/frontend-shared/src/utils/getUtmSource.ts
new file mode 100644
index 000000000000..85e3996820a8
--- /dev/null
+++ b/packages/frontend-shared/src/utils/getUtmSource.ts
@@ -0,0 +1,7 @@
+export type LoginUtmSource = 'Binary: App' | 'Binary: Launchpad'
+
+// __CYPRESS_MODE__ is only set on the window in th browser app -
+// checking this allows us to know if links are clicked in the browser app or the launchpad
+export function getUtmSource (): LoginUtmSource {
+  return window.__CYPRESS_MODE__ ? 'Binary: App' : 'Binary: Launchpad'
+}
diff --git a/packages/frontend-shared/src/utils/time.ts b/packages/frontend-shared/src/utils/time.ts
index a4fd360e7169..738cd2c8e545 100644
--- a/packages/frontend-shared/src/utils/time.ts
+++ b/packages/frontend-shared/src/utils/time.ts
@@ -7,3 +7,26 @@ const timeAgo = new TimeAgo('en-US')
 export function getTimeAgo (iso8601: string) {
   return timeAgo.format(new Date(iso8601))
 }
+
+export function getDurationString (totalSeconds: number): string {
+  const roundedTotalSeconds = Math.floor(totalSeconds / 1000)
+  const seconds = roundedTotalSeconds % 60
+  const roundedTotalMinutes = Math.floor(roundedTotalSeconds / 60)
+  const minutes = roundedTotalMinutes % 60
+  const roundedTotalHours = Math.floor(roundedTotalMinutes / 60)
+  const hours = roundedTotalHours % 60
+
+  if (hours) {
+    return `${hours}:${
+    minutes.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    }:${
+    seconds.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    }`
+  }
+
+  return `${
+    minutes
+    }:${
+    seconds.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    }`
+}
diff --git a/packages/graphql/.eslintrc.json b/packages/graphql/.eslintrc.json
index 0eda50e708ec..b396ce9ebcf6 100644
--- a/packages/graphql/.eslintrc.json
+++ b/packages/graphql/.eslintrc.json
@@ -10,6 +10,9 @@
   "plugins": [
     "cypress"
   ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off"
+  },
   "overrides": [
     {
       "files": [
@@ -19,44 +22,8 @@
         "no-useless-constructor": "off",
         "@typescript-eslint/explicit-function-return-type": [
           "error"
-        ],
-        "no-restricted-imports": [
-          "error",
-          "assert",
-          "buffer",
-          "child_process",
-          "cluster",
-          "crypto",
-          "dgram",
-          "dns",
-          "domain",
-          "events",
-          "freelist",
-          "fs",
-          "http",
-          "https",
-          "module",
-          "net",
-          "os",
-          "path",
-          "punycode",
-          "querystring",
-          "readline",
-          "repl",
-          "smalloc",
-          "stream",
-          "string_decoder",
-          "sys",
-          "timers",
-          "tls",
-          "tracing",
-          "tty",
-          "url",
-          "util",
-          "vm",
-          "zlib"
         ]
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/graphql/package.json b/packages/graphql/package.json
index 8c06f2a639f4..b6f5dc284852 100644
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -17,11 +17,13 @@
   "dependencies": {
     "@graphql-tools/delegate": "8.2.1",
     "@graphql-tools/wrap": "8.1.1",
+    "@urql/core": "2.4.4",
     "dedent": "^0.7.0",
     "express": "4.17.1",
     "express-graphql": "^0.12.0",
     "getenv": "1.0.0",
     "graphql": "^15.5.1",
+    "graphql-resolve-batch": "1.0.3",
     "graphql-scalars": "^1.10.0",
     "graphql-ws": "^5.5.5",
     "nexus": "^1.2.0-next.15",
@@ -33,6 +35,7 @@
     "@packages/root": "0.0.0-development",
     "@packages/types": "0.0.0-development",
     "@types/dedent": "^0.7.0",
+    "@types/graphql-resolve-batch": "1.1.6",
     "@types/micromatch": "4.0.2",
     "@types/server-destroy": "^1.0.1",
     "chai": "^4.2.0",
diff --git a/packages/graphql/schemas/cloud.graphql b/packages/graphql/schemas/cloud.graphql
index 768ceceb5aec..0fe0a57f4dfb 100644
--- a/packages/graphql/schemas/cloud.graphql
+++ b/packages/graphql/schemas/cloud.graphql
@@ -1,6 +1,21 @@
 ### This file was generated by Nexus Schema
 ### Do not make changes to this file directly
 
+"""
+Represents a pollable status for clients to know when refetching data is required.
+"""
+type CloudLatestRunUpdateSpecData {
+  """
+  DateTime of the latest update in a project.
+  """
+  mostRecentUpdate: DateTime
+
+  """
+  Recommended seconds to wait before next poll.
+  """
+  pollingInterval: Int
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -186,6 +201,85 @@ union CloudProjectResult =
   | CloudProjectNotFound
   | CloudProjectUnauthorized
 
+type CloudProjectSpec implements Node {
+  """
+  Average duration the spec takes to run
+  """
+  averageDuration(
+    """
+    The branch to measure average duration against. This will fallback to the closest branch with data.
+    """
+    fromBranch: String!
+  ): Float
+
+  """
+  Globally unique identifier representing a concrete GraphQL ObjectType
+  """
+  id: ID!
+  isConsideredFlaky(
+    """
+    The branch to measure flakiness against
+    """
+    fromBranch: String!
+  ): Boolean
+
+  """
+  Current DateTime on the server. Used in connection with CloudLatestRunUpdateSpecData.
+  """
+  retrievedAt: DateTime
+
+  """
+  Shortened spec path
+  """
+  specPath: String
+
+  """
+  Runs this spec has been involved with.
+  """
+  specRuns(
+    """
+    Returns the elements in the list that come after the specified cursor
+    """
+    after: String
+
+    """
+    Returns the elements in the list that come before the specified cursor
+    """
+    before: String
+
+    """
+    Returns the first n elements from the list.
+    """
+    first: Int
+
+    """
+    The branch to filter on for the specs. This will fallback to the closest branch with data.
+    """
+    fromBranch: String!
+
+    """
+    Returns the last n elements from the list.
+    """
+    last: Int
+  ): CloudSpecRunConnection
+}
+
+"""
+Unable to find cloud spec in project
+"""
+type CloudProjectSpecNotFound {
+  """
+  an error message
+  """
+  message: String!
+  retrievedAt: DateTime
+}
+
+union CloudProjectSpecResult =
+    CloudProjectSpec
+  | CloudProjectSpecNotFound
+  | CloudProjectUnauthorized
+
 """
 Unauthorized access
 """
@@ -221,12 +315,14 @@ A Recorded run of the Test Runner, typically to the cloud
 """
 type CloudRun implements Node {
   commitInfo: CloudRunCommitInfo
+  completedAt: DateTime
   createdAt: DateTime
 
   """
   Globally unique identifier representing a concrete GraphQL ObjectType
   """
   id: ID!
+  runNumber: Int
   status: CloudRunStatus
   tags: [CloudRunTag]
 
@@ -344,6 +440,114 @@ type CloudRunTag implements Node {
   name: String
 }
 
+"""
+A Recorded run of a given spec from the Test Runner, typically to the cloud
+"""
+type CloudSpecRun implements Node {
+  """
+  When the run was completed
+  """
+  completedAt: DateTime
+
+  """
+  When the run was created
+  """
+  createdAt: DateTime
+
+  """
+  Amount of groups this spec was run in
+  """
+  groupCount: Int
+
+  """
+  Globally unique identifier representing a concrete GraphQL ObjectType
+  """
+  id: ID!
+
+  """
+  Incremental run number assigned
+  """
+  runNumber: Int
+
+  """
+  Aggregate information about how long the spec took to run in the groups
+  """
+  specDuration: SpecDataAggregate
+
+  """
+  Most important status for the spec shared between all groups
+  """
+  status: CloudSpecStatus
+
+  """
+  Aggregate information about how many tests failed in the groups
+  """
+  testsFailed: SpecDataAggregate
+
+  """
+  Aggregate information about how many tests passed in the groups
+  """
+  testsPassed: SpecDataAggregate
+
+  """
+  Aggregate information about how many tests are pending in the groups
+  """
+  testsPending: SpecDataAggregate
+
+  """
+  Aggregate information about how many tests were skipped in the groups
+  """
+  testsSkipped: SpecDataAggregate
+
+  """
+  A link to the run overview page filtered by spec
+  """
+  url: String
+}
+
+type CloudSpecRunConnection {
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-Edge-Types
+  """
+  edges: [CloudSpecRunEdge!]!
+
+  """
+  Flattened list of CloudSpecRun type
+  """
+  nodes: [CloudSpecRun!]!
+
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
+  """
+  pageInfo: PageInfo!
+}
+
+type CloudSpecRunEdge {
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-Cursor
+  """
+  cursor: String!
+
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-Node
+  """
+  node: CloudSpecRun!
+}
+
+"""
+Possible check status of the spec within a run
+"""
+enum CloudSpecStatus {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """
 A CloudUser represents an User stored in the Cypress Cloud
 """
@@ -473,6 +677,26 @@ type PageInfo {
 }
 
 type Query {
+  """
+  Polling query to determine when to refetch spec data. A null value here means no data available in the cloud.
+  """
+  cloudLatestRunUpdateSpecData(
+    """
+    Clients active branch to search for builds. This will fallback to the closest branch with data.
+    """
+    commitBranch: String!
+
+    """
+    A list of Project slugs
+    """
+    projectSlug: String!
+
+    """
+    Datetime since the fetched data
+    """
+    sinceDateTime: DateTime
+  ): CloudLatestRunUpdateSpecData
+
   """
   Returns an object conforming to the Relay spec
   """
@@ -508,8 +732,38 @@ type Query {
     slugs: [String!]!
   ): [CloudProjectResult]
 
+  """
+  Gets a set of specs on a given project and branch
+  """
+  cloudSpecByPath(
+    """
+    Slug of the project to which the set of specs belong
+    """
+    projectSlug: String!
+
+    """
+    The spec path to find
+    """
+    specPath: String!
+  ): CloudProjectSpecResult
+
   """
   A user within the Cypress Cloud
   """
   cloudViewer: CloudUser
 }
+
+"""
+Aggregate data from multiple groups for a spec run
+"""
+type SpecDataAggregate {
+  """
+  Maximum value in the groups
+  """
+  max: Int
+
+  """
+  Minimum value in the groups
+  """
+  min: Int
+}
diff --git a/packages/graphql/schemas/schema.graphql b/packages/graphql/schemas/schema.graphql
index 83fffe561297..5b511d93133a 100644
--- a/packages/graphql/schemas/schema.graphql
+++ b/packages/graphql/schemas/schema.graphql
@@ -65,6 +65,17 @@ type CachedUser implements Node {
   id: ID!
 }
 
+"""
+Represents a pollable status for clients to know when refetching data is required.
+"""
+type CloudLatestRunUpdateSpecData {
+  """DateTime of the latest update in a project."""
+  mostRecentUpdate: DateTime
+
+  """Recommended seconds to wait before next poll."""
+  pollingInterval: Int
+}
+
 """
 A CloudOrganization represents an Organization stored in the Cypress Cloud
 """
@@ -189,6 +200,60 @@ type CloudProjectNotFound {
 
 union CloudProjectResult = CloudProject | CloudProjectNotFound | CloudProjectUnauthorized
 
+type CloudProjectSpec implements Node {
+  """Average duration the spec takes to run"""
+  averageDuration(
+    """
+    The branch to measure average duration against. This will fallback to the closest branch with data.
+    """
+    fromBranch: String!
+  ): Float
+
+  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  id: ID!
+  isConsideredFlaky(
+    """The branch to measure flakiness against"""
+    fromBranch: String!
+  ): Boolean
+
+  """
+  Current DateTime on the server. Used in connection with CloudLatestRunUpdateSpecData.
+  """
+  retrievedAt: DateTime
+
+  """Shortened spec path"""
+  specPath: String
+
+  """Runs this spec has been involved with."""
+  specRuns(
+    """Returns the elements in the list that come after the specified cursor"""
+    after: String
+
+    """Returns the elements in the list that come before the specified cursor"""
+    before: String
+
+    """Returns the first n elements from the list."""
+    first: Int
+
+    """
+    The branch to filter on for the specs. This will fallback to the closest branch with data.
+    """
+    fromBranch: String!
+
+    """Returns the last n elements from the list."""
+    last: Int
+  ): CloudSpecRunConnection
+}
+
+"""Unable to find cloud spec in project"""
+type CloudProjectSpecNotFound {
+  """an error message"""
+  message: String!
+  retrievedAt: DateTime
+}
+
+union CloudProjectSpecResult = CloudProjectSpec | CloudProjectSpecNotFound | CloudProjectUnauthorized
+
 """Unauthorized access"""
 type CloudProjectUnauthorized {
   """does the user have a requested access pending"""
@@ -212,10 +277,12 @@ type CloudRecordKey implements Node {
 """A Recorded run of the Test Runner, typically to the cloud"""
 type CloudRun implements Node {
   commitInfo: CloudRunCommitInfo
+  completedAt: DateTime
   createdAt: DateTime
 
   """Globally unique identifier representing a concrete GraphQL ObjectType"""
   id: ID!
+  runNumber: Int
   status: CloudRunStatus
   tags: [CloudRunTag]
 
@@ -305,6 +372,84 @@ type CloudRunTag implements Node {
   name: String
 }
 
+"""
+A Recorded run of a given spec from the Test Runner, typically to the cloud
+"""
+type CloudSpecRun implements Node {
+  """When the run was completed"""
+  completedAt: DateTime
+
+  """When the run was created"""
+  createdAt: DateTime
+
+  """Amount of groups this spec was run in"""
+  groupCount: Int
+
+  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  id: ID!
+
+  """Incremental run number assigned"""
+  runNumber: Int
+
+  """
+  Aggregate information about how long the spec took to run in the groups
+  """
+  specDuration: SpecDataAggregate
+
+  """Most important status for the spec shared between all groups"""
+  status: CloudSpecStatus
+
+  """Aggregate information about how many tests failed in the groups"""
+  testsFailed: SpecDataAggregate
+
+  """Aggregate information about how many tests passed in the groups"""
+  testsPassed: SpecDataAggregate
+
+  """Aggregate information about how many tests are pending in the groups"""
+  testsPending: SpecDataAggregate
+
+  """Aggregate information about how many tests were skipped in the groups"""
+  testsSkipped: SpecDataAggregate
+
+  """A link to the run overview page filtered by spec"""
+  url: String
+}
+
+type CloudSpecRunConnection {
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-Edge-Types
+  """
+  edges: [CloudSpecRunEdge!]!
+
+  """Flattened list of CloudSpecRun type"""
+  nodes: [CloudSpecRun!]!
+
+  """
+  https://facebook.github.io/relay/graphql/connections.htm#sec-undefined.PageInfo
+  """
+  pageInfo: PageInfo!
+}
+
+type CloudSpecRunEdge {
+  """https://facebook.github.io/relay/graphql/connections.htm#sec-Cursor"""
+  cursor: String!
+
+  """https://facebook.github.io/relay/graphql/connections.htm#sec-Node"""
+  node: CloudSpecRun!
+}
+
+"""Possible check status of the spec within a run"""
+enum CloudSpecStatus {
+  CANCELLED
+  ERRORED
+  FAILED
+  NOTESTS
+  PASSED
+  RUNNING
+  TIMEDOUT
+  UNCLAIMED
+}
+
 """A CloudUser represents an User stored in the Cypress Cloud"""
 type CloudUser implements Node {
   """Url to manage cloud organizations for this user"""
@@ -387,6 +532,15 @@ type CurrentProject implements Node & ProjectLike {
   """The remote associated project from Cypress Dashboard"""
   cloudProject: CloudProjectResult
 
+  """
+  A refetchable remote field implementation to fetch the cloudProject,
+  this can safely be used when rendering a list of projects
+  """
+  cloudProjectRemote(
+    """A globally unique name for this field"""
+    name: String!
+  ): RemoteFetchableCloudProjectResult
+
   """List of all code generation candidates stories"""
   codeGenCandidates(glob: String!): [FileParts]
 
@@ -773,6 +927,15 @@ enum GitInfoStatusType {
 
 """A project which exists on the filesystem but has not been opened"""
 type GlobalProject implements Node & ProjectLike {
+  """
+  A refetchable remote field implementation to fetch the cloudProject,
+  this can safely be used when rendering a list of projects
+  """
+  cloudProjectRemote(
+    """A globally unique name for this field"""
+    name: String!
+  ): RemoteFetchableCloudProjectResult
+
   """Relay style Node ID field for the GlobalProject field"""
   id: ID!
 
@@ -960,6 +1123,9 @@ type Mutation {
   """Used internally to update the URQL cache in the CloudDataSource"""
   _cloudCacheInvalidate(args: JSON): Boolean
 
+  """Internal use only, clears the cloud cache"""
+  _showUrqlCache: JSON
+
   """Add project to projects array and cache it"""
   addProject(
     """Whether to open the project when added"""
@@ -1013,8 +1179,14 @@ type Mutation {
     id: ID!
   ): CurrentProject
 
+  """Fetches the remote data for a RemoteFetchable ID"""
+  loadRemoteFetchables(
+    """The identifier for the RemoteFetchable we are loading"""
+    ids: [ID!]!
+  ): [RemoteFetchable]!
+
   """Auth with Cypress Dashboard"""
-  login: Query
+  login(utmMedium: String!, utmSource: String!): Query
 
   """Log out of Cypress Dashboard"""
   logout: Query
@@ -1164,6 +1336,15 @@ enum PluginsState {
 
 """Common base fields inherited by GlobalProject / CurrentProject"""
 interface ProjectLike {
+  """
+  A refetchable remote field implementation to fetch the cloudProject,
+  this can safely be used when rendering a list of projects
+  """
+  cloudProjectRemote(
+    """A globally unique name for this field"""
+    name: String!
+  ): RemoteFetchableCloudProjectResult
+
   """Used to associate project with Cypress dashboard"""
   projectId: String
 
@@ -1179,9 +1360,19 @@ type ProjectPreferences {
 }
 
 type PushFragmentPayload {
+  """Raw data associated with the fragment to be written into the cache"""
   data: JSON
+
+  """Any errors encountered when executing the operation"""
+  errors: JSON
   fragment: JSON!
+
+  """If present, indicates we need to invalidate the client-side cache"""
+  invalidateCache: Boolean
   target: String!
+
+  """Variables associated with the fragment"""
+  variables: JSON
 }
 
 """The root "Query" type containing all entry fields for our querying"""
@@ -1191,6 +1382,22 @@ type Query {
   baseError: ErrorWrapper
   cachedUser: CachedUser
 
+  """
+  Polling query to determine when to refetch spec data. A null value here means no data available in the cloud.
+  """
+  cloudLatestRunUpdateSpecData(
+    """
+    Clients active branch to search for builds. This will fallback to the closest branch with data.
+    """
+    commitBranch: String!
+
+    """A list of Project slugs"""
+    projectSlug: String!
+
+    """Datetime since the fetched data"""
+    sinceDateTime: DateTime
+  ): CloudLatestRunUpdateSpecData
+
   """Returns an object conforming to the Relay spec"""
   cloudNode(
     """An ID for a Node conforming to the Relay spec"""
@@ -1212,6 +1419,15 @@ type Query {
     slugs: [String!]!
   ): [CloudProjectResult]
 
+  """Gets a set of specs on a given project and branch"""
+  cloudSpecByPath(
+    """Slug of the project to which the set of specs belong"""
+    projectSlug: String!
+
+    """The spec path to find"""
+    specPath: String!
+  ): CloudProjectSpecResult
+
   """A user within the Cypress Cloud"""
   cloudViewer: CloudUser
 
@@ -1255,6 +1471,110 @@ type Query {
   wizard: Wizard!
 }
 
+"""
+Represents a container for a piece of remote data stitched into the graph
+"""
+interface RemoteFetchable implements Node {
+  """The raw data response when resolving the data"""
+  dataRaw: JSON
+
+  """JSON representation of the error response"""
+  error: JSON
+
+  """The current fetching status of the fetchable data"""
+  fetchingStatus: RemoteFetchableStatus!
+
+  """Globally unique identifier representing a concrete GraphQL ObjectType"""
+  id: ID!
+
+  """Prints the full operation sent for this query, for debugging purposes"""
+  operation: String!
+
+  """The hash of the operation, for debugging purposes"""
+  operationHash: String!
+
+  """The variables passed to the operation, for debugging purposes"""
+  operationVariables: JSON!
+}
+
+"""
+Wrapper for the resolution remote RemoteFetchableCloudProjectResult data
+"""
+type RemoteFetchableCloudProjectResult implements Node & RemoteFetchable {
+  """Data resolved for the RemoteFetchableCloudProjectResult from the cloud"""
+  data: CloudProjectResult
+
+  """The raw data response when resolving the data"""
+  dataRaw: JSON
+
+  """JSON representation of the error response"""
+  error: JSON
+
+  """The current fetching status of the fetchable data"""
+  fetchingStatus: RemoteFetchableStatus!
+
+  """
+  This ID is generated based on hashes of the queried data, and should be passed to the loadRemoteFetchables mutation to initiate loading the remote data
+  """
+  id: ID!
+
+  """Prints the full operation sent for this query, for debugging purposes"""
+  operation: String!
+
+  """The hash of the operation, for debugging purposes"""
+  operationHash: String!
+
+  """The variables passed to the operation, for debugging purposes"""
+  operationVariables: JSON!
+}
+
+"""
+Wrapper for the resolution remote RemoteFetchableCloudProjectSpecResult data
+"""
+type RemoteFetchableCloudProjectSpecResult implements Node & RemoteFetchable {
+  """
+  Data resolved for the RemoteFetchableCloudProjectSpecResult from the cloud
+  """
+  data: CloudProjectSpecResult
+
+  """The raw data response when resolving the data"""
+  dataRaw: JSON
+
+  """JSON representation of the error response"""
+  error: JSON
+
+  """The current fetching status of the fetchable data"""
+  fetchingStatus: RemoteFetchableStatus!
+
+  """
+  This ID is generated based on hashes of the queried data, and should be passed to the loadRemoteFetchables mutation to initiate loading the remote data
+  """
+  id: ID!
+
+  """Prints the full operation sent for this query, for debugging purposes"""
+  operation: String!
+
+  """The hash of the operation, for debugging purposes"""
+  operationHash: String!
+
+  """The variables passed to the operation, for debugging purposes"""
+  operationVariables: JSON!
+}
+
+enum RemoteFetchableStatus {
+  """Errored while fetching"""
+  ERRORED
+
+  """We have loaded the remote data"""
+  FETCHED
+
+  """Currently fetching"""
+  FETCHING
+
+  """Has not been fetched yet"""
+  NOT_FETCHED
+}
+
 """A file that we just added to the filesystem during project setup"""
 type ScaffoldedFile {
   """Info about the file we just scaffolded"""
@@ -1277,6 +1597,12 @@ type Spec implements Node {
   """Full name of spec file (e.g. MySpec.test.tsx)"""
   baseName: String!
 
+  """Wrapper for resolving remote data associated with this field"""
+  cloudSpec(
+    """A globally unique name for this field"""
+    name: String!
+  ): RemoteFetchableCloudProjectSpecResult
+
   """The file extension (e.g. tsx, jsx)"""
   fileExtension: String!
 
@@ -1304,6 +1630,15 @@ type Spec implements Node {
   specType: SpecType!
 }
 
+"""Aggregate data from multiple groups for a spec run"""
+type SpecDataAggregate {
+  """Maximum value in the groups"""
+  max: Int
+
+  """Minimum value in the groups"""
+  min: Int
+}
+
 enum SpecType {
   component
   integration
@@ -1341,10 +1676,15 @@ type Subscription {
   """
   When we have resolved a section of a query, and want to update the local normalized cache, we "push" the fragment to the frontend to merge in the client side cache
   """
-  pushFragment: [PushFragmentPayload]
+  pushFragment: [PushFragmentPayload!]!
 
   """Issued when the watched specs for the project changes"""
   specsChange: CurrentProject
+
+  """
+  Initiates the polling mechanism with the Cypress Cloud to check if we should refetch specs, and mark specs as stale if we have updates
+  """
+  startPollingForSpecs(branchName: String, projectId: String): String
 }
 
 enum SupportStatusEnum {
diff --git a/packages/graphql/src/makeGraphQLServer.ts b/packages/graphql/src/makeGraphQLServer.ts
index df08478be832..84159139e3f8 100644
--- a/packages/graphql/src/makeGraphQLServer.ts
+++ b/packages/graphql/src/makeGraphQLServer.ts
@@ -151,6 +151,8 @@ export async function handleGraphQLSocketRequest (uid: string, payload: string,
     const operation = JSON.parse(payload) as GraphQLSocketPayload
     const context = getCtx()
     const document = parse(operation.query)
+
+    DataContext.addActiveRequest()
     const result = await execute({
       operationName: operation.operationName,
       variableValues: operation.variables,
@@ -167,6 +169,8 @@ export async function handleGraphQLSocketRequest (uid: string, payload: string,
     callback(result)
   } catch (e) {
     callback({ data: null, errors: [e] })
+  } finally {
+    DataContext.finishActiveRequest()
   }
 }
 
@@ -230,10 +234,14 @@ export const graphQLHTTP = graphqlHTTP((req, res, params) => {
       const date = new Date()
       const prefix = `${args.operationName ?? '(anonymous)'}`
 
+      DataContext.addActiveRequest()
+
       return Promise.resolve(execute(args)).then((val) => {
         debug(`${prefix} completed in ${new Date().valueOf() - date.valueOf()}ms with ${val.errors?.length ?? 0} errors`)
 
         return val
+      }).finally(() => {
+        DataContext.finishActiveRequest()
       })
     },
   }
diff --git a/packages/graphql/src/plugins/index.ts b/packages/graphql/src/plugins/index.ts
index 6141bfbda258..ef71125558bd 100644
--- a/packages/graphql/src/plugins/index.ts
+++ b/packages/graphql/src/plugins/index.ts
@@ -5,4 +5,5 @@ export * from './nexusDebugFieldPlugin'
 export * from './nexusDeferIfNotLoadedPlugin'
 export * from './nexusMutationErrorPlugin'
 export * from './nexusNodePlugin'
+export * from './nexusRemoteFieldPlugin'
 export * from './nexusSlowGuardPlugin'
diff --git a/packages/graphql/src/plugins/nexusRemoteFieldPlugin.ts b/packages/graphql/src/plugins/nexusRemoteFieldPlugin.ts
new file mode 100644
index 000000000000..494d382b435b
--- /dev/null
+++ b/packages/graphql/src/plugins/nexusRemoteFieldPlugin.ts
@@ -0,0 +1,137 @@
+import dedent from 'dedent'
+import type { DocumentNode, GraphQLResolveInfo } from 'graphql'
+import { dynamicOutputMethod, plugin, core, objectType, mutationField, idArg, list, nonNull, stringArg } from 'nexus'
+import { createBatchResolver } from 'graphql-resolve-batch'
+
+import type { NexusGenAbstractTypeMembers } from '../gen/nxs.gen'
+import { RemoteFetchable } from '../schemaTypes'
+import type { DataContext } from '@packages/data-context'
+import type { CloudRemoteTargets, CloudQueryArgs, CloudQueryFields } from '../utils/graphqlTypeUtils'
+
+export type RemoteFieldDefinitionConfig<TypeName extends string, FieldName extends string, RemoteField extends CloudQueryFields> = {
+  /**
+   * The type we expect to resolve as the "data"
+   */
+  type: CloudRemoteTargets
+  /**
+   * Args to make available to the field definition
+   */
+  args?: core.ArgsRecord
+  /**
+   * Optional description for the field
+   */
+  description?: string
+  /**
+   * Whether we should "eager-fetch" the data for the field when the field is first resolved.
+   * Either a boolean (true), or called with the fetch
+   * @default false
+   */
+  shouldEagerFetch?: boolean | ((
+    source: core.RootValueField<TypeName, FieldName>,
+    args: core.ArgsValue<TypeName, FieldName>,
+    ctx: DataContext,
+    info: GraphQLResolveInfo,
+    index: number // Index, when resolving in a list. Useful to eager load the first "N" items
+  ) => boolean)
+  /**
+   * The remote "query field" to delegate the query to
+   */
+  remoteQueryField: RemoteField
+  /**
+   * Given the "fieldNodes" for the type we're resolving, any arguments, and the remoteQueryField,
+   * allows us to
+   */
+  makeQueryDocument?: () => DocumentNode
+} & AdditionalRemoteFieldProps<TypeName, FieldName, RemoteField>
+
+// If not every member of CloudQueryArgs is provided, then we will not issue the request
+export type AdditionalRemoteFieldProps<TypeName extends string, FieldName extends string, RemoteField extends CloudQueryFields> = RemoteField extends never ? {
+  queryArgs?: RemoteQueryArgsResolver<TypeName, FieldName, any>
+} : {
+  queryArgs: RemoteQueryArgsResolver<TypeName, FieldName, RemoteField>
+}
+
+export type RemoteQueryArgsResolver<TypeName extends string, FieldName extends string, RemoteField extends CloudQueryFields> = (
+  source: core.SourceValue<TypeName>,
+  args: core.ArgsValue<TypeName, FieldName>,
+  ctx: DataContext,
+  info: GraphQLResolveInfo
+) => core.MaybePromise<CloudQueryArgs<RemoteField> | false>
+
+export const remoteFieldPlugin = plugin({
+  name: 'remoteFieldPlugin',
+  description: 'Adds a container for an independently fetchable remote-resolved field',
+  fieldDefTypes: [
+    core.printedGenTypingImport({
+      module: '@packages/graphql/src/plugins/nexusRemoteFieldPlugin',
+      bindings: ['RemoteFieldDefinitionConfig'],
+    }),
+    core.printedGenTypingImport({
+      module: '@packages/graphql/src/gen/cloud-source-types.gen',
+      bindings: [['Query', 'CloudQuery']],
+    }),
+  ],
+  onInstall (b) {
+    b.addType(mutationField('loadRemoteFetchables', {
+      description: 'Fetches the remote data for a RemoteFetchable ID',
+      type: nonNull(list('RemoteFetchable')),
+      args: {
+        ids: nonNull(list(nonNull(idArg({
+          description: 'The identifier for the RemoteFetchable we are loading',
+        })))),
+      },
+      resolve: (source, args, ctx, info) => {
+        // Each ID encodes all of the information necessary to resolve a remote fetchable,
+        // we just need to unpack them and execute
+        return args.ids.map((id) => ctx.remoteRequest.loadRemoteFetchable(id, ctx))
+      },
+    }))
+
+    b.addType(dynamicOutputMethod({
+      name: 'remoteField',
+      typeDescription: dedent`
+        Adds a field which is resolved with data from from the Cloud API.
+        The "id" is refetchable via the loadRemoteFetchables APIs
+      `,
+      typeDefinition: dedent`
+        <FieldName extends string, RemoteField extends Exclude<keyof CloudQuery, '__typename' | undefined>>(fieldName: FieldName, config: RemoteFieldDefinitionConfig<TypeName, FieldName, RemoteField>): void
+      `,
+      factory ({ typeName: parentTypeName, typeDef: t, args: factoryArgs, stage, builder, wrapping }) {
+        const [fieldName, fieldConfig] = factoryArgs as [string, RemoteFieldDefinitionConfig<any, any, any>]
+        const fieldType = `RemoteFetchable${fieldConfig.type}` as NexusGenAbstractTypeMembers['RemoteFetchable']
+
+        if (!builder.hasType(fieldType)) {
+          builder.addType(objectType({
+            name: fieldType,
+            description: `Wrapper for the resolution remote ${fieldType} data`,
+            definition (t) {
+              t.implements(RemoteFetchable)
+              t.nonNull.id('id', {
+                description: 'This ID is generated based on hashes of the queried data, and should be passed to the loadRemoteFetchables mutation to initiate loading the remote data',
+                resolve: (source, args, ctx) => ctx.remoteRequest.makeRefetchableId(fieldType, source.operationHash, source.operationVariables),
+              })
+
+              t.field('data', {
+                description: `Data resolved for the ${fieldType} from the cloud`,
+                type: fieldConfig.type,
+              })
+            },
+          }))
+        }
+
+        t.field(fieldName, {
+          type: fieldType as any,
+          description: fieldConfig.description ?? 'Wrapper for resolving remote data associated with this field',
+          args: {
+            ...fieldConfig.args ?? {},
+            name: nonNull(stringArg({ description: 'A globally unique name for this field' })),
+          },
+          // Wrap with a batch resolver, so we aren't doing the same info parsing for each row
+          resolve: createBatchResolver((sources, args, ctx, info) => {
+            return ctx.remoteRequest.batchResolveRemoteFields(fieldConfig, sources, args, ctx, info)
+          }),
+        })
+      },
+    }))
+  },
+})
diff --git a/packages/graphql/src/plugins/nexusSlowGuardPlugin.ts b/packages/graphql/src/plugins/nexusSlowGuardPlugin.ts
index a4552901e9b7..d87cf7cc8765 100644
--- a/packages/graphql/src/plugins/nexusSlowGuardPlugin.ts
+++ b/packages/graphql/src/plugins/nexusSlowGuardPlugin.ts
@@ -2,7 +2,7 @@ import { plugin } from 'nexus'
 import { isPromiseLike, pathToArray } from 'nexus/dist/utils'
 import chalk from 'chalk'
 
-const HANGING_RESOLVER_THRESHOLD = 15
+const HANGING_RESOLVER_THRESHOLD = 100
 
 export const nexusSlowGuardPlugin = plugin({
   name: 'NexusSlowGuard',
diff --git a/packages/graphql/src/schema.ts b/packages/graphql/src/schema.ts
index 307810e94b96..12b93763116a 100644
--- a/packages/graphql/src/schema.ts
+++ b/packages/graphql/src/schema.ts
@@ -4,7 +4,7 @@ import { makeSchema, connectionPlugin } from 'nexus'
 import * as schemaTypes from './schemaTypes/'
 import { nodePlugin } from './plugins/nexusNodePlugin'
 import { remoteSchemaWrapped } from './stitching/remoteSchemaWrapped'
-import { mutationErrorPlugin, nexusDebugLogPlugin, nexusSlowGuardPlugin, nexusDeferIfNotLoadedPlugin, nexusDeferResolveGuard } from './plugins'
+import { mutationErrorPlugin, nexusDebugLogPlugin, nexusSlowGuardPlugin, nexusDeferIfNotLoadedPlugin, nexusDeferResolveGuard, remoteFieldPlugin } from './plugins'
 
 const isCodegen = Boolean(process.env.CYPRESS_INTERNAL_NEXUS_CODEGEN)
 
@@ -30,17 +30,21 @@ export const graphqlSchema = makeSchema({
     },
   },
   plugins: [
-    nexusDeferResolveGuard,
-    nexusSlowGuardPlugin,
-    nexusDeferIfNotLoadedPlugin,
-    nexusDebugLogPlugin,
-    mutationErrorPlugin,
+    // Structural Plugins
     connectionPlugin({
       nonNullDefaults: {
         output: true,
       },
     }),
     nodePlugin,
+    remoteFieldPlugin,
+
+    // Runtime Resolver Plugins
+    nexusDeferResolveGuard,
+    nexusSlowGuardPlugin,
+    nexusDeferIfNotLoadedPlugin,
+    nexusDebugLogPlugin,
+    mutationErrorPlugin,
   ],
   formatTypegen (content, type) {
     if (type === 'schema') {
diff --git a/packages/graphql/src/schemaTypes/interfaceTypes/gql-Node.ts b/packages/graphql/src/schemaTypes/interfaceTypes/gql-Node.ts
new file mode 100644
index 000000000000..687a19d1761c
--- /dev/null
+++ b/packages/graphql/src/schemaTypes/interfaceTypes/gql-Node.ts
@@ -0,0 +1,22 @@
+import { interfaceType } from 'nexus'
+import assert from 'assert'
+
+export const Node = interfaceType({
+  name: 'Node',
+  description: 'Implements the Relay Node spec',
+  definition (t) {
+    t.nonNull.id('id', {
+      description: 'Globally unique identifier representing a concrete GraphQL ObjectType',
+      resolve: (source) => {
+        throw new Error('Abstract resolve, should be handled separately')
+      },
+    })
+  },
+  resolveType: (t: any) => {
+    if (!t.__typename) {
+      assert(t.__typename, `Cannot resolve Node without __typename: saw ${String(t)}`)
+    }
+
+    return t.__typename
+  },
+})
diff --git a/packages/graphql/src/schemaTypes/interfaceTypes/gql-ProjectLike.ts b/packages/graphql/src/schemaTypes/interfaceTypes/gql-ProjectLike.ts
index d9194767afc6..9d7f4b0ed050 100644
--- a/packages/graphql/src/schemaTypes/interfaceTypes/gql-ProjectLike.ts
+++ b/packages/graphql/src/schemaTypes/interfaceTypes/gql-ProjectLike.ts
@@ -1,10 +1,6 @@
+import dedent from 'dedent'
 import { interfaceType } from 'nexus'
 
-export interface ProjectShape {
-  projectId?: string | null
-  projectRoot: string
-}
-
 export const ProjectLike = interfaceType({
   name: 'ProjectLike',
   description: 'Common base fields inherited by GlobalProject / CurrentProject',
@@ -15,18 +11,36 @@ export const ProjectLike = interfaceType({
 
     t.string('projectId', {
       description: 'Used to associate project with Cypress dashboard',
-      resolve: (source, args, ctx) => ctx.project.projectId(),
+      resolve: (source, args, ctx) => ctx.project.maybeGetProjectId(source),
     })
 
     t.nonNull.string('title', {
       resolve: (source, args, ctx) => ctx.project.projectTitle(source.projectRoot),
     })
+
+    t.remoteField('cloudProjectRemote', {
+      type: 'CloudProjectResult',
+      remoteQueryField: 'cloudProjectBySlug',
+      description: dedent`
+        A refetchable remote field implementation to fetch the cloudProject,
+        this can safely be used when rendering a list of projects
+      `,
+      queryArgs: async (source, args, ctx) => {
+        const projectId = await ctx.project.maybeGetProjectId(source)
+
+        if (projectId) {
+          return { slug: projectId }
+        }
+
+        return false
+      },
+    })
   },
   resolveType (root) {
     return 'GlobalProject'
   },
   sourceType: {
-    module: __dirname,
+    module: '@packages/data-context/src/data/coreDataShape',
     export: 'ProjectShape',
   },
 })
diff --git a/packages/graphql/src/schemaTypes/interfaceTypes/gql-RemoteFetchable.ts b/packages/graphql/src/schemaTypes/interfaceTypes/gql-RemoteFetchable.ts
new file mode 100644
index 000000000000..a5ad4d33785b
--- /dev/null
+++ b/packages/graphql/src/schemaTypes/interfaceTypes/gql-RemoteFetchable.ts
@@ -0,0 +1,68 @@
+import { enumType, interfaceType } from 'nexus'
+import type { RemoteFetchableStatus, NexusGenAbstractTypeMembers } from '../../gen/nxs.gen'
+
+export interface RemoteFetchableShape {
+  __typename: NexusGenAbstractTypeMembers['RemoteFetchable']
+  id: string
+  fetchingStatus: RemoteFetchableStatus
+  operation: string
+  operationHash: string
+  operationVariables: any
+  data?: any
+  dataRaw?: any
+  error?: any
+}
+
+const FETCHABLE_MEMBERS = {
+  NOT_FETCHED: 'Has not been fetched yet',
+  FETCHING: 'Currently fetching',
+  ERRORED: 'Errored while fetching',
+  FETCHED: 'We have loaded the remote data',
+}
+
+const RemoteFetchableStatusEnum = enumType({
+  name: 'RemoteFetchableStatus',
+  members: Object.entries(FETCHABLE_MEMBERS).map(([key, val]) => {
+    return {
+      name: key,
+      description: val,
+    }
+  }),
+})
+
+export const RemoteFetchable = interfaceType({
+  name: 'RemoteFetchable',
+  description: 'Represents a container for a piece of remote data stitched into the graph',
+  definition (t) {
+    t.implements('Node')
+    t.nonNull.field('fetchingStatus', {
+      description: 'The current fetching status of the fetchable data',
+      type: RemoteFetchableStatusEnum,
+    })
+
+    t.json('error', {
+      description: 'JSON representation of the error response',
+    })
+
+    t.json('dataRaw', {
+      description: 'The raw data response when resolving the data',
+    })
+
+    t.nonNull.string('operation', {
+      description: 'Prints the full operation sent for this query, for debugging purposes',
+    })
+
+    t.nonNull.string('operationHash', {
+      description: 'The hash of the operation, for debugging purposes',
+    })
+
+    t.nonNull.json('operationVariables', {
+      description: 'The variables passed to the operation, for debugging purposes',
+    })
+  },
+  resolveType: (t) => t.__typename,
+  sourceType: {
+    module: __filename,
+    export: 'RemoteFetchableShape',
+  },
+})
diff --git a/packages/graphql/src/schemaTypes/interfaceTypes/index.ts b/packages/graphql/src/schemaTypes/interfaceTypes/index.ts
index e704b30161ed..d2e7042a3002 100644
--- a/packages/graphql/src/schemaTypes/interfaceTypes/index.ts
+++ b/packages/graphql/src/schemaTypes/interfaceTypes/index.ts
@@ -1,4 +1,6 @@
 /* eslint-disable padding-line-between-statements */
 // created by autobarrel, do not modify directly
 
+export * from './gql-Node'
 export * from './gql-ProjectLike'
+export * from './gql-RemoteFetchable'
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
index f2780cf6c319..0490552a34cb 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts
@@ -259,8 +259,12 @@ export const mutation = mutationType({
     t.field('login', {
       type: Query,
       description: 'Auth with Cypress Dashboard',
+      args: {
+        utmMedium: nonNull(stringArg()),
+        utmSource: nonNull(stringArg()),
+      },
       resolve: async (_, args, ctx) => {
-        await ctx.actions.auth.login()
+        await ctx.actions.auth.login(args.utmSource, args.utmMedium)
 
         return {}
       },
@@ -661,5 +665,14 @@ export const mutation = mutationType({
         return true
       },
     })
+
+    t.json('_showUrqlCache', {
+      description: 'Internal use only, clears the cloud cache',
+      resolve: async (source, args, ctx) => {
+        const { data } = await ctx.cloud.getCache()
+
+        return data
+      },
+    })
   },
 })
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
index ef83db8923de..ed693c03ff0a 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Spec.ts
@@ -47,5 +47,25 @@ export const Spec = objectType({
         return ctx.lifecycleManager.git?.gitInfoFor(source.absolute) ?? null
       },
     })
+
+    t.remoteField('cloudSpec', {
+      type: 'CloudProjectSpecResult',
+      remoteQueryField: 'cloudSpecByPath',
+      shouldEagerFetch: () => false, // defaults to false to be fully lazy and rely on the UI to fetch as needed
+      queryArgs: async (source, args, ctx) => {
+        const projectId = await ctx.project.projectId()
+        const fromBranch = ctx.lifecycleManager.git?.currentBranch
+
+        if (!projectId) {
+          return false
+        }
+
+        return {
+          projectSlug: projectId,
+          specPath: source.relative,
+          fromBranch,
+        }
+      },
+    })
   },
 })
diff --git a/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts b/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts
index 4e4e52790295..fb21a4855a43 100644
--- a/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts
+++ b/packages/graphql/src/schemaTypes/objectTypes/gql-Subscription.ts
@@ -1,5 +1,5 @@
 import type { PushFragmentData } from '@packages/data-context/src/actions'
-import { list, objectType, subscriptionType } from 'nexus'
+import { list, nonNull, objectType, stringArg, subscriptionType } from 'nexus'
 import { CurrentProject, DevState, Query } from '.'
 import { Spec } from './gql-Spec'
 
@@ -85,18 +85,44 @@ export const Subscription = subscriptionType({
       resolve: (source, args, ctx) => ctx.lifecycleManager,
     })
 
-    t.field('pushFragment', {
+    t.nonNull.field('pushFragment', {
       description: 'When we have resolved a section of a query, and want to update the local normalized cache, we "push" the fragment to the frontend to merge in the client side cache',
-      type: list(objectType({
+      type: list(nonNull(objectType({
         name: 'PushFragmentPayload',
         definition (t) {
           t.nonNull.string('target')
           t.nonNull.json('fragment')
-          t.json('data')
+          t.json('data', {
+            description: 'Raw data associated with the fragment to be written into the cache',
+          })
+
+          t.json('variables', {
+            description: 'Variables associated with the fragment',
+          })
+
+          t.json('errors', {
+            description: 'Any errors encountered when executing the operation',
+          })
+
+          t.boolean('invalidateCache', {
+            description: 'If present, indicates we need to invalidate the client-side cache',
+          })
         },
-      })),
+      }))),
       subscribe: (source, args, ctx) => ctx.emitter.subscribeTo('pushFragment', { sendInitial: false }),
       resolve: (source: PushFragmentData[], args, ctx) => source,
     })
+
+    t.string('startPollingForSpecs', {
+      args: {
+        projectId: stringArg(),
+        branchName: stringArg(),
+      },
+      description: 'Initiates the polling mechanism with the Cypress Cloud to check if we should refetch specs, and mark specs as stale if we have updates',
+      subscribe: (source, args, ctx) => {
+        return ctx.remotePolling.subscribeAndPoll(args.branchName, args.projectId)
+      },
+      resolve: (o: string | null) => o,
+    })
   },
 })
diff --git a/packages/graphql/src/stitching/remoteSchemaWrapped.ts b/packages/graphql/src/stitching/remoteSchemaWrapped.ts
index 797f8a92d4fc..982da8927487 100644
--- a/packages/graphql/src/stitching/remoteSchemaWrapped.ts
+++ b/packages/graphql/src/stitching/remoteSchemaWrapped.ts
@@ -4,7 +4,7 @@ import type { DataContext } from '@packages/data-context'
 import type { RequestPolicy } from '@urql/core'
 import assert from 'assert'
 import debugLib from 'debug'
-import { BREAK, OperationDefinitionNode, visit } from 'graphql'
+import { BREAK, OperationDefinitionNode, print, visit } from 'graphql'
 import { remoteSchema } from './remoteSchema'
 
 const debug = debugLib('cypress:graphql:remoteSchemaWrapped')
@@ -44,29 +44,35 @@ export const remoteSchemaWrapped = wrapSchema<DataContext>({
 
     debug('executing: %j', { rootValue: obj.rootValue, operationName, requestPolicy })
 
-    return obj.context.cloud.executeRemoteGraphQL({
+    const operationDoc = visit(obj.document, {
+      OperationDefinition (node) {
+        if (!node.name) {
+          return {
+            ...node, name: { kind: 'Name', value: operationName },
+          } as OperationDefinitionNode
+        }
+
+        return BREAK
+      },
+    })
+
+    const context = obj.context
+
+    return context.cloud.executeRemoteGraphQL({
+      fieldName: info.fieldName,
       requestPolicy,
       operationType: obj.operationType ?? 'query',
-      document: visit(obj.document, {
-        OperationDefinition (node) {
-          if (!node.name) {
-            return {
-              ...node, name: { kind: 'Name', value: operationName },
-            } as OperationDefinitionNode
-          }
-
-          return BREAK
-        },
-      }),
-      variables: obj.variables,
+      operation: print(operationDoc),
+      operationDoc,
+      operationVariables: obj.variables,
       // When we respond eagerly with a result, but receive an updated value
       // for the query, we can "push" the data down using the pushFragment subscription
       onUpdatedResult (result) {
-        obj.context?.graphql.pushResult({
+        context.graphql.pushResult({
           result: result?.[info.fieldName] ?? null,
           source: obj.rootValue,
           info,
-          ctx: obj.context,
+          ctx: context,
         })
       },
     }) as any
diff --git a/packages/graphql/src/utils/graphqlTypeUtils.ts b/packages/graphql/src/utils/graphqlTypeUtils.ts
new file mode 100644
index 000000000000..7f5d0fab532d
--- /dev/null
+++ b/packages/graphql/src/utils/graphqlTypeUtils.ts
@@ -0,0 +1,14 @@
+import type { QueryResolvers as CloudQueryResolvers, Resolver } from '../gen/cloud-source-types.gen'
+import type { NexusGenInterfaceNames, NexusGenObjectNames, NexusGenUnionNames } from '../gen/nxs.gen'
+
+export type CloudRemoteTargets = {
+  [K in NexusGenObjectNames | NexusGenUnionNames | NexusGenInterfaceNames]:
+  K extends `Cloud${infer U}` ? K extends `${infer _}${'Edge'}` ? never : K : never
+}[NexusGenObjectNames | NexusGenUnionNames | NexusGenInterfaceNames]
+
+export type CloudQueryFields = keyof CloudQueryResolvers
+
+export type CloudQueryArgs<T extends keyof CloudQueryResolvers> =
+  Exclude<CloudQueryResolvers[T], undefined> extends Resolver<any, any, any, infer Args>
+    ? keyof Args extends never ? never : Args
+    : never
diff --git a/packages/graphql/src/utils/index.ts b/packages/graphql/src/utils/index.ts
new file mode 100644
index 000000000000..bc5e2c071e78
--- /dev/null
+++ b/packages/graphql/src/utils/index.ts
@@ -0,0 +1,4 @@
+/* eslint-disable padding-line-between-statements */
+// created by autobarrel, do not modify directly
+
+export * from './graphqlTypeUtils'
diff --git a/packages/graphql/test/stubCloudTypes.ts b/packages/graphql/test/stubCloudTypes.ts
index 5300b14e8ce1..8cb907c90c53 100644
--- a/packages/graphql/test/stubCloudTypes.ts
+++ b/packages/graphql/test/stubCloudTypes.ts
@@ -168,6 +168,7 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
   const cloudRunData: Required<CloudRun> = {
     ...testNodeId('CloudRun'),
     status: 'PASSED',
+    runNumber: 432,
     totalFailed: 0,
     totalSkipped: 0,
     totalPending: 0,
@@ -179,6 +180,7 @@ export function createCloudRun (config: Partial<CloudRun>): Required<CloudRun> {
     tags: [],
     url: 'http://dummy.cypress.io/runs/1',
     createdAt: new Date(Date.now() - 1000 * 60 * 61).toISOString(),
+    completedAt: null,
     commitInfo: createCloudRunCommitInfo({
       sha: `fake-sha-${getNodeIdx('CloudRun')}`,
       summary: `fix: make gql work ${config.status ?? 'PASSED'}`,
diff --git a/packages/launchpad/README.md b/packages/launchpad/README.md
index 73bcb702fe91..957bd33f9dfd 100644
--- a/packages/launchpad/README.md
+++ b/packages/launchpad/README.md
@@ -36,7 +36,7 @@ yarn workspace @packages/launchpad build
 
 ## Developing
 
-For the best development experience, you will want to use VS Code with the [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar) extension. This will give you type completion inside `vue` files.
+For the best development experience, you will want to use VS Code with the [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension. This will give you type completion inside `vue` files.
 
 
 ```bash
diff --git a/packages/launchpad/cypress.config.ts b/packages/launchpad/cypress.config.ts
index b11799991fc5..c52816ef08fa 100644
--- a/packages/launchpad/cypress.config.ts
+++ b/packages/launchpad/cypress.config.ts
@@ -4,9 +4,10 @@ import { snapshotCypressDirectory } from './cypress/tasks/snapshotsScaffold'
 import { uninstallDependenciesInScaffoldedProject } from './cypress/tasks/uninstallDependenciesInScaffoldedProject'
 
 const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
+const CYPRESS_INTERNAL_DEV_PROJECT_ID = getenv('CYPRESS_INTERNAL_DEV_PROJECT_ID', process.env.CYPRESS_INTERNAL_DEV_PROJECT_ID || 'sehy69')
 
 export default defineConfig({
-  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : 'sehy69',
+  projectId: CYPRESS_INTERNAL_CLOUD_ENV === 'staging' ? 'ypt4pf' : CYPRESS_INTERNAL_DEV_PROJECT_ID,
   viewportWidth: 800,
   viewportHeight: 850,
   retries: {
diff --git a/packages/launchpad/cypress/e2e/open-mode.cy.ts b/packages/launchpad/cypress/e2e/open-mode.cy.ts
index f469ff4ec8c5..29f78ab15e55 100644
--- a/packages/launchpad/cypress/e2e/open-mode.cy.ts
+++ b/packages/launchpad/cypress/e2e/open-mode.cy.ts
@@ -176,7 +176,7 @@ describe('Launchpad: Open Mode', () => {
           },
         ]
 
-        ctx.coreData.app.projects = [{ projectRoot: '/some/project' }]
+        ctx.coreData.app.projects = [{ projectRoot: '/some/project', savedState: () => Promise.resolve({}) }]
       })
 
       cy.visitLaunchpad()
@@ -203,7 +203,7 @@ describe('Launchpad: Open Mode', () => {
 
     it('opens using finder', () => {
       cy.withCtx(async (ctx, o) => {
-        ctx.coreData.app.projects = [{ projectRoot: '/some/project' }]
+        ctx.coreData.app.projects = [{ projectRoot: '/some/project', savedState: () => Promise.resolve({}) }]
       })
 
       cy.visitLaunchpad()
diff --git a/packages/server/lib/cache.js b/packages/server/lib/cache.js
index f714c591a2e3..c1dbe1f79098 100644
--- a/packages/server/lib/cache.js
+++ b/packages/server/lib/cache.js
@@ -84,6 +84,9 @@ module.exports = {
     return tx.set({ PROJECTS: projects })
   },
 
+  /**
+   * @return {Promise<string[]>}
+   */
   getProjectRoots () {
     return fileUtil.transaction((tx) => {
       return this._getProjects(tx).then((projects) => {
diff --git a/packages/server/lib/gui/auth.ts b/packages/server/lib/gui/auth.ts
index fc0c890ef1ba..bdd2b3d90bac 100644
--- a/packages/server/lib/gui/auth.ts
+++ b/packages/server/lib/gui/auth.ts
@@ -24,7 +24,7 @@ const buildLoginRedirectUrl = (server) => {
   return `http://127.0.0.1:${port}/redirect-to-auth`
 }
 
-const buildFullLoginUrl = (baseLoginUrl, server, utmCode) => {
+const buildFullLoginUrl = (baseLoginUrl, server, utmSource, utmMedium) => {
   const { port } = server.address()
 
   if (!authState) {
@@ -43,10 +43,10 @@ const buildFullLoginUrl = (baseLoginUrl, server, utmCode) => {
       platform: os.platform(),
     }
 
-    if (utmCode) {
+    if (utmMedium) {
       authUrl.query = {
-        utm_source: 'Test Runner',
-        utm_medium: utmCode,
+        utm_source: utmSource,
+        utm_medium: utmMedium,
         utm_campaign: 'Log In',
         ...authUrl.query,
       }
@@ -65,7 +65,7 @@ const getOriginFromUrl = (originalUrl) => {
 /**
  * @returns the currently running auth server instance, launches one if there is not one
  */
-const launchServer = (baseLoginUrl, sendMessage, utmCode) => {
+const launchServer = (baseLoginUrl, sendMessage, utmSource, utmMedium) => {
   if (!server) {
     // launch an express server to listen for the auth callback from dashboard
     const origin = getOriginFromUrl(baseLoginUrl)
@@ -76,7 +76,7 @@ const launchServer = (baseLoginUrl, sendMessage, utmCode) => {
     app.get('/redirect-to-auth', (req, res) => {
       authRedirectReached = true
 
-      buildFullLoginUrl(baseLoginUrl, server, utmCode)
+      buildFullLoginUrl(baseLoginUrl, server, utmSource, utmMedium)
       .then((fullLoginUrl) => {
         debug('Received GET to /redirect-to-auth, redirecting: %o', { fullLoginUrl })
 
@@ -187,7 +187,7 @@ const _internal = {
 /**
  * @returns a promise that is resolved with a user when auth is complete or rejected when it fails
  */
-const start = (onMessage, utmCode) => {
+const start = (onMessage, utmSource, utmMedium) => {
   function sendMessage (name, message) {
     onMessage({
       name,
@@ -199,7 +199,7 @@ const start = (onMessage, utmCode) => {
 
   return user.getBaseLoginUrl()
   .then((baseLoginUrl) => {
-    return _internal.launchServer(baseLoginUrl, sendMessage, utmCode)
+    return _internal.launchServer(baseLoginUrl, sendMessage, utmSource, utmMedium)
   })
   .then(() => {
     return _internal.buildLoginRedirectUrl(server)
diff --git a/packages/server/lib/makeDataContext.ts b/packages/server/lib/makeDataContext.ts
index cd076808f163..ec663552ea1e 100644
--- a/packages/server/lib/makeDataContext.ts
+++ b/packages/server/lib/makeDataContext.ts
@@ -2,6 +2,7 @@ import { DataContext, getCtx, clearCtx, setCtx } from '@packages/data-context'
 import electron, { OpenDialogOptions, SaveDialogOptions, BrowserWindow } from 'electron'
 import pkg from '@packages/root'
 import * as configUtils from '@packages/config'
+
 import { isListening } from './util/ensure-url'
 import { isMainWindowFocused, focusMainWindow } from './gui/windows'
 
@@ -73,8 +74,8 @@ export function makeDataContext (options: MakeDataContextOptions): DataContext {
       getUser () {
         return user.get()
       },
-      logIn (onMessage, utmCode) {
-        return auth.start(onMessage, utmCode)
+      logIn (onMessage, utmSource, utmMedium) {
+        return auth.start(onMessage, utmSource, utmMedium)
       },
       logOut () {
         return user.logOut()
@@ -93,8 +94,15 @@ export function makeDataContext (options: MakeDataContextOptions): DataContext {
       insertProjectToCache (projectRoot: string) {
         return cache.insertProject(projectRoot)
       },
-      getProjectRootsFromCache () {
-        return cache.getProjectRoots()
+      async getProjectRootsFromCache () {
+        return cache.getProjectRoots().then((roots) => {
+          return Promise.all(roots.map(async (projectRoot: string) => {
+            return {
+              projectRoot,
+              savedState: () => savedState.create(projectRoot).then((s) => s.get()),
+            }
+          }))
+        })
       },
       clearLatestProjectsCache () {
         return cache.removeLatestProjects()
@@ -146,6 +154,9 @@ export function makeDataContext (options: MakeDataContextOptions): DataContext {
           },
         })
       },
+      makeProjectSavedState (projectRoot: string) {
+        return () => savedState.create(projectRoot).then((s) => s.get())
+      },
       getDevServer () {
         return devServer
       },
diff --git a/packages/server/lib/project-base.ts b/packages/server/lib/project-base.ts
index a50c21da613d..e8df3ca4bb36 100644
--- a/packages/server/lib/project-base.ts
+++ b/packages/server/lib/project-base.ts
@@ -25,6 +25,7 @@ import { DataContext, getCtx } from '@packages/data-context'
 import { createHmac } from 'crypto'
 
 export interface Cfg extends ReceivedCypressOptions {
+  projectId?: string
   projectRoot: string
   proxyServer?: Cypress.RuntimeConfigOptions['proxyUrl']
   testingType: TestingType
@@ -198,8 +199,10 @@ export class ProjectBase<TServer extends Server> extends EE {
     // save the last time they opened the project
     // along with the first time they opened it
     const now = Date.now()
+
     const stateToSave = {
       lastOpened: now,
+      lastProjectId: cfg.projectId ?? null,
     } as any
 
     if (!cfg.state || !cfg.state.firstOpened) {
diff --git a/packages/server/lib/saved_state.ts b/packages/server/lib/saved_state.ts
index b10cb049ed94..3ee675e2c46b 100644
--- a/packages/server/lib/saved_state.ts
+++ b/packages/server/lib/saved_state.ts
@@ -7,6 +7,7 @@ import cwd from './cwd'
 import FileUtil from './util/file'
 import { fs } from './util/fs'
 import { AllowedState, allowedKeys } from '@packages/types'
+import { globalPubSub } from '@packages/data-context'
 
 const debug = Debug('cypress:server:saved_state')
 
@@ -83,7 +84,7 @@ const normalizeAndAllowSet = (set, key, value) => {
 
   if (invalidKeys.length) {
     // eslint-disable-next-line no-console
-    console.error(`WARNING: attempted to save state for non-allowed key(s): ${invalidKeys.join(', ')}. All keys must be allowed in server/lib/saved_state.js`)
+    console.error(`WARNING: attempted to save state for non-allowed key(s): ${invalidKeys.join(', ')}. All keys must be allowed in server/lib/saved_state.ts`)
   }
 
   return set(_.pick(valueObject, allowedKeys))
@@ -115,6 +116,10 @@ export const create = (projectRoot?: string, isTextTerminal: boolean = false): B
       path: fullStatePath,
     })
 
+    globalPubSub.on('test:cleanup', () => {
+      stateFile.__resetForTest()
+    })
+
     stateFile.set = _.wrap(stateFile.set.bind(stateFile), normalizeAndAllowSet)
 
     stateFiles[fullStatePath] = stateFile
diff --git a/packages/server/test/unit/gui/auth_spec.js b/packages/server/test/unit/gui/auth_spec.js
index e89e80538124..fc1a00deee16 100644
--- a/packages/server/test/unit/gui/auth_spec.js
+++ b/packages/server/test/unit/gui/auth_spec.js
@@ -15,7 +15,7 @@ const RANDOM_STRING = 'a'.repeat(32)
 const PORT = 9001
 const REDIRECT_URL = `http://127.0.0.1:${PORT}/redirect-to-auth`
 const FULL_LOGIN_URL = `https://foo.invalid/login.html?port=${PORT}&state=${RANDOM_STRING}&machineId=abc123&cypressVersion=${pkg.version}&platform=linux`
-const FULL_LOGIN_URL_UTM = `https://foo.invalid/login.html?utm_source=Test%20Runner&utm_medium=GUI%20Tab&utm_campaign=Log%20In&port=${PORT}&state=${RANDOM_STRING}&machineId=abc123&cypressVersion=${pkg.version}&platform=linux`
+const FULL_LOGIN_URL_UTM = `https://foo.invalid/login.html?utm_source=UTM%20Source&utm_medium=UTM%20Medium&utm_campaign=Log%20In&port=${PORT}&state=${RANDOM_STRING}&machineId=abc123&cypressVersion=${pkg.version}&platform=linux`
 
 describe('lib/gui/auth', function () {
   beforeEach(() => {
@@ -71,7 +71,7 @@ describe('lib/gui/auth', function () {
     })
 
     it('uses utm code to form a trackable URL', function () {
-      return auth._internal.buildFullLoginUrl(BASE_URL, this.server, 'GUI Tab')
+      return auth._internal.buildFullLoginUrl(BASE_URL, this.server, 'UTM Source', 'UTM Medium')
       .then((url) => {
         expect(url).to.eq(FULL_LOGIN_URL_UTM)
       })
diff --git a/packages/server/test/unit/saved_state_spec.js b/packages/server/test/unit/saved_state_spec.js
index efae9fa28b30..808190448785 100644
--- a/packages/server/test/unit/saved_state_spec.js
+++ b/packages/server/test/unit/saved_state_spec.js
@@ -89,7 +89,7 @@ describe('lib/saved_state', () => {
       .then((state) => {
         return state.set({ foo: 'bar', baz: 'qux' })
       }).then(() => {
-        expect(console.error).to.be.calledWith('WARNING: attempted to save state for non-allowed key(s): foo, baz. All keys must be allowed in server/lib/saved_state.js')
+        expect(console.error).to.be.calledWith('WARNING: attempted to save state for non-allowed key(s): foo, baz. All keys must be allowed in server/lib/saved_state.ts')
       })
     })
   })
diff --git a/packages/types/src/preferences.ts b/packages/types/src/preferences.ts
index 6278cee0ad8c..8e1db207b335 100644
--- a/packages/types/src/preferences.ts
+++ b/packages/types/src/preferences.ts
@@ -30,6 +30,7 @@ export const allowedKeys: Readonly<Array<keyof AllowedState>> = [
   'ctSpecListWidth',
   'firstOpened',
   'lastOpened',
+  'lastProjectId',
   'promptsShown',
   'preferredEditorBinary',
   'isSideNavigationOpen',
@@ -60,6 +61,7 @@ export type AllowedState = Partial<{
   ctReporterWidth: Maybe<number>
   ctIsSpecsListOpen: Maybe<boolean>
   ctSpecListWidth: Maybe<number>
+  lastProjectId: Maybe<string>
   firstOpened: Maybe<number>
   lastOpened: Maybe<number>
   promptsShown: Maybe<object>
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z001.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z001.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z001.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z002.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z002.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z002.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z003.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z003.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z003.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z004.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z004.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z004.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z005.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z005.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z005.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z006.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z006.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z006.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z007.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z007.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z007.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z008.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z008.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z008.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/cypress-in-cypress/cypress/e2e/z009.spec.js b/system-tests/projects/cypress-in-cypress/cypress/e2e/z009.spec.js
new file mode 100644
index 000000000000..2fe654da72ca
--- /dev/null
+++ b/system-tests/projects/cypress-in-cypress/cypress/e2e/z009.spec.js
@@ -0,0 +1,9 @@
+describe('Blank Contents', () => {
+  it('renders the blank page', () => {
+    cy.contains('cy.visit()')
+  })
+
+  it('renders the visit failure page', () => {
+    cy.visit('http://localhost:999')
+  })
+})
diff --git a/system-tests/projects/vue3-vite-ts-configured/.vscode/extensions.json b/system-tests/projects/vue3-vite-ts-configured/.vscode/extensions.json
index b338073e1464..a7cea0b06781 100644
--- a/system-tests/projects/vue3-vite-ts-configured/.vscode/extensions.json
+++ b/system-tests/projects/vue3-vite-ts-configured/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["vue.volar"]
+  "recommendations": ["Vue.volar"]
 }
diff --git a/yarn.lock b/yarn.lock
index c6266b708c51..0f0a55333435 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3604,6 +3604,18 @@
     auto-bind "~4.0.0"
     tslib "~2.3.0"
 
+"@graphql-codegen/typescript-resolvers@^2.6.4":
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript-resolvers/-/typescript-resolvers-2.6.4.tgz#857e24279603f4e8f7293385a90a1f2498eb672e"
+  integrity sha512-BTV5q9d7V+4mVyYRnE8N7HyArmvDbUEY5JwyV94jhlN0AOq2zKQBrs8MRvx8v1VenjTGV+PlnDpF3aEtQu8o+g==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^2.4.0"
+    "@graphql-codegen/typescript" "^2.4.11"
+    "@graphql-codegen/visitor-plugin-common" "2.8.0"
+    "@graphql-tools/utils" "^8.1.1"
+    auto-bind "~4.0.0"
+    tslib "~2.4.0"
+
 "@graphql-codegen/typescript-urql-graphcache@2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript-urql-graphcache/-/typescript-urql-graphcache-2.2.3.tgz#ec481d29857d764becb9b3c3c4eb4cd061ca8568"
@@ -3615,7 +3627,7 @@
     change-case-all "1.0.14"
     tslib "~2.3.0"
 
-"@graphql-codegen/typescript@2.4.2", "@graphql-codegen/typescript@^2.4.2":
+"@graphql-codegen/typescript@2.4.2":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-2.4.2.tgz#a239d5fd8f11140d5d4c81cfae7ff02054b724dc"
   integrity sha512-8ajWidiFqF1KNAywtb/692SjwTyjzrDHo1sf2Q7Z+rh9qDEIrh83VHB8naT/1CefOvxj3MS6GbcsvJMizaE/AQ==
@@ -3626,6 +3638,17 @@
     auto-bind "~4.0.0"
     tslib "~2.3.0"
 
+"@graphql-codegen/typescript@^2.4.11", "@graphql-codegen/typescript@^2.4.2":
+  version "2.4.11"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/typescript/-/typescript-2.4.11.tgz#b9d8bddaeb79ff4a85e1d0f9c774afba7423177c"
+  integrity sha512-K3oDLPJRH9Wgpg9TOvb7L+xrJZ8HxkIzV2umqGn54c+8DQjvnRFBIYRO0THgUBMnEauE2sEy6RZkGHGfgQUruA==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^2.4.0"
+    "@graphql-codegen/schema-ast" "^2.4.1"
+    "@graphql-codegen/visitor-plugin-common" "2.8.0"
+    auto-bind "~4.0.0"
+    tslib "~2.4.0"
+
 "@graphql-codegen/visitor-plugin-common@2.5.2":
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.5.2.tgz#90aa4add41e17bca83f1c7c8ad674f2a06065efd"
@@ -3658,6 +3681,22 @@
     parse-filepath "^1.0.2"
     tslib "~2.3.0"
 
+"@graphql-codegen/visitor-plugin-common@2.8.0":
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/@graphql-codegen/visitor-plugin-common/-/visitor-plugin-common-2.8.0.tgz#f1de3bd5ee123e6f72c06423912a3a83a6044938"
+  integrity sha512-29MOaxBog7qaEhmeCzJn2mONSbcA+slCTzHN4nJ3aZl4KrC9V32rXlQpG5x0qHbFQ1LaG1f5gPO83xbiAeMBIw==
+  dependencies:
+    "@graphql-codegen/plugin-helpers" "^2.4.0"
+    "@graphql-tools/optimize" "^1.0.1"
+    "@graphql-tools/relay-operation-optimizer" "^6.3.7"
+    "@graphql-tools/utils" "^8.3.0"
+    auto-bind "~4.0.0"
+    change-case-all "1.0.14"
+    dependency-graph "^0.11.0"
+    graphql-tag "^2.11.0"
+    parse-filepath "^1.0.2"
+    tslib "~2.4.0"
+
 "@graphql-tools/apollo-engine-loader@^7.0.5":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@graphql-tools/apollo-engine-loader/-/apollo-engine-loader-7.1.0.tgz#12d58a459da976b496c7632bd41b76f3aceed48e"
@@ -7459,6 +7498,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/graphql-resolve-batch@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@types/graphql-resolve-batch/-/graphql-resolve-batch-1.1.6.tgz#b53099b57a8b1c02bbb39f3cf7c8f89a6c076d33"
+  integrity sha512-5wnYqk1zkutWyj16Llm8l95Gr2tVsu8PmFwMKmzh3OPm0/Nd02CKYXiZtoLX2Zv4tdkzAsIPOpev8Jk9N9am5Q==
+  dependencies:
+    graphql ">=14"
+
 "@types/gulp@^4.0.9":
   version "4.0.9"
   resolved "https://registry.yarnpkg.com/@types/gulp/-/gulp-4.0.9.tgz#a2f9667bcc26bc72b4899dd16216d6584a12346c"
@@ -18750,10 +18796,10 @@ flex-exec@^1.0.0:
   resolved "https://registry.yarnpkg.com/flex-exec/-/flex-exec-1.0.0.tgz#06974b68532839d2a12c32debcdb12378200fdf0"
   integrity sha1-BpdLaFMoOdKhLDLevNsSN4IA/fA=
 
-floating-vue@2.0.0-beta.16:
-  version "2.0.0-beta.16"
-  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.16.tgz#511d2eca106e67da6ccb4e85bb89c86b96297cbd"
-  integrity sha512-MoVA9pLGMVkuyG9cvlzpSB9//HGynbWnkLr0cxDgnEWORL98kuSa2ph/bcq7sDGNM3l0/3v6HYSqhBMBp9F3/A==
+floating-vue@2.0.0-beta.17:
+  version "2.0.0-beta.17"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-2.0.0-beta.17.tgz#f488d992f58d76b41fc3490f3ef969d58a5c8f99"
+  integrity sha512-zgHPIdlILFxMEq2kLpeUpE3SUSd/zHI4pNAO2QYtp2rATkiSOlcLJidTDjG3mcBKzN3ahoAF6t/FhA1VbMTkAg==
   dependencies:
     "@floating-ui/dom" "^0.1.10"
     vue-resize "^2.0.0-alpha.1"
@@ -20087,6 +20133,11 @@ graphql-request@^3.3.0:
     extract-files "^9.0.0"
     form-data "^3.0.0"
 
+graphql-resolve-batch@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/graphql-resolve-batch/-/graphql-resolve-batch-1.0.3.tgz#eabffd89d929063d115fd5122939898dc649ee0b"
+  integrity sha512-GnrgWxHVV2Z+LbFkC3FS/kBBo4yUYAsLDFJGTK11MYfIcCStyiNAU2TeEdryJbIEndYMLUQY41pcUW1A5RY6Fg==
+
 graphql-scalars@^1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/graphql-scalars/-/graphql-scalars-1.10.0.tgz#9daf9252b16e6fae553a06976163a23f41b65dfd"
@@ -20123,7 +20174,7 @@ graphql@14.0.0:
   dependencies:
     iterall "^1.2.2"
 
-graphql@^15.5.1:
+graphql@>=14, graphql@^15.5.1:
   version "15.5.1"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.1.tgz#f2f84415d8985e7b84731e7f3536f8bb9d383aad"
   integrity sha512-FeTRX67T3LoE3LWAxxOlW2K3Bz+rMYAC18rRguK4wgXaTZMiJwSUwDmPFo3UadAKbzirKIg5Qy+sNJXbpPRnQw==
@@ -36199,7 +36250,7 @@ tslib@2.1.0, tslib@~2.1.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
 
-tslib@2.3.1, tslib@^2, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@~2.3.0:
+tslib@2.3.1, tslib@~2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -36209,6 +36260,11 @@ tslib@^1.0.0, tslib@^1.10.0, tslib@^1.11.1, tslib@^1.13.0, tslib@^1.8.0, tslib@^
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@~2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@~2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"