From b2923fa375c8e5d37472abdd0dbcd3fc5eea6727 Mon Sep 17 00:00:00 2001
From: harlan <harlan@harlanzw.com>
Date: Sun, 3 Mar 2024 16:09:10 +1100
Subject: [PATCH] feat: CrUX tab

---
 docs/composables/shiki.ts                     |   2 +-
 package.json                                  |   2 -
 packages/client/App.vue                       | 265 ++++++++++++------
 packages/client/components.d.ts               |   4 +-
 packages/client/components/Btn/BtnTab.vue     |   5 +-
 .../components/Cell/CellNetworkRequests.vue   |   4 +-
 .../components/Cell/CellScoreSingle.vue       |  17 +-
 .../components/Crux/Graph/CruxGraphCls.vue    | 209 ++++++++++++++
 .../components/Crux/Graph/CruxGraphInp.vue    | 215 ++++++++++++++
 .../components/Crux/Graph/CruxGraphLcp.vue    | 227 +++++++++++++++
 packages/client/index.html                    |   2 +-
 packages/client/logic/formatting.ts           |  24 ++
 packages/client/logic/state.ts                |   2 +-
 packages/client/logic/static.ts               |  36 ++-
 packages/client/package.json                  |  11 +-
 packages/core/src/unlighthouse.ts             |   2 +-
 pnpm-lock.yaml                                |  74 ++++-
 17 files changed, 998 insertions(+), 103 deletions(-)
 create mode 100644 packages/client/components/Crux/Graph/CruxGraphCls.vue
 create mode 100644 packages/client/components/Crux/Graph/CruxGraphInp.vue
 create mode 100644 packages/client/components/Crux/Graph/CruxGraphLcp.vue
 create mode 100644 packages/client/logic/formatting.ts

diff --git a/docs/composables/shiki.ts b/docs/composables/shiki.ts
index 5bcbe1f8..9201586f 100644
--- a/docs/composables/shiki.ts
+++ b/docs/composables/shiki.ts
@@ -1,4 +1,4 @@
-import type { Highlighter, BundledLanguage } from 'shiki'
+import type { BundledLanguage, Highlighter } from 'shiki'
 import { getHighlighter } from 'shiki'
 import { computed, ref, unref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
diff --git a/package.json b/package.json
index dccae10a..2d7968ee 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,7 @@
     "build:docs": "cd docs && pnpm i && nuxi build",
     "build:pkg": "pnpm -r --filter=./packages/** run build",
     "stub": "JITI_ESM_RESOLVE=true && pnpm -r --parallel run stub",
-    "dev": "pnpm run stub && pnpm run watch:client",
     "lint": "eslint . --fix",
-    "lint:fix": "npm run lint -- --fix",
     "release": "bumpp package.json packages/*/package.json --commit --push --tag",
     "test": "vitest",
     "test:update": "vitest -u",
diff --git a/packages/client/App.vue b/packages/client/App.vue
index 0c946157..f278d53e 100644
--- a/packages/client/App.vue
+++ b/packages/client/App.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useTitle } from '@vueuse/core'
+import { $fetch } from 'ofetch'
 import {
+  activeTab,
   apiUrl,
   basePath,
   categoryScores,
@@ -29,12 +31,18 @@ import {
   wsConnect,
 } from './logic'
 
+const crux = ref(null)
+
 if (!isStatic) {
   onMounted(() => {
     wsConnect()
     setInterval(() => {
       refreshScanMeta()
     }, 5000)
+
+    $fetch(`https://crux.unlighthouse.dev/api/${encodeURIComponent(website)}/crux/history`).then((res) => {
+      crux.value = res
+    })
   })
 }
 
@@ -45,9 +53,9 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
   <main class="text-gray-700 dark:text-gray-200 overflow-y-hidden max-h-screen h-screen grid grid-rows-[min-content,1fr]">
     <NavBar />
     <div class="2xl:flex mt-2">
-      <div class="xl:ml-3 mx-3 mr-0 w-full 2xl:(mr-5 w-250px mb-0) mb-3">
+      <div class="flex justify-between max-h-[95%] flex-col xl:ml-3 mx-3 mr-0 w-full 2xl:(mr-5 w-250px mb-0)">
         <TabGroup vertical @change="changedTab">
-          <TabList class="p-1 dark:(bg-blue-900/20 border-none) border-2 border-blue-900/30 rounded-xl 2xl:(mt-8 block) flex">
+          <TabList class="2xl:(block) flex">
             <Tab
               v-for="(category, key) in tabs"
               :key="key"
@@ -57,8 +65,10 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
               <btn-tab
                 :selected="selected"
               >
-                <span class="inline-flex items-center">{{ category }}
-                  <tooltip v-if="category === 'Performance'" class="text-left">
+                <span class="inline-flex items-center">
+                  <component :is="category.icon" class="inline text-sm opacity-40 h-4 w-4 mr-2" />
+                  <span>{{ category.label }}</span>
+                  <tooltip v-if="category.label === 'Performance'" class="text-left">
                     <i-carbon-warning class="inline text-xs mx-1" />
                     <template #tooltip>
                       <div class="mb-2">Lighthouse is running with variability. Performance scores should not be considered accurate.</div>
@@ -66,12 +76,13 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
                     </template>
                   </tooltip>
                 </span>
-                <metric-guage v-if="category !== 'Overview' && !Number.isNaN(categoryScores[key - 1])" :score="categoryScores[key - 1]" :stripped="true" class="dark:font-bold" :class="selected ? ['dark:bg-teal-900 bg-blue-100 rounded px-2'] : []" />
+                <metric-guage v-if="!['Overview', 'CrUX'].includes(category.label) && !Number.isNaN(categoryScores[key - 1])" :score="categoryScores[key - 1]" :stripped="true" class="dark:font-bold" :class="selected ? ['dark:bg-teal-900 bg-blue-100 rounded px-2'] : []" />
               </btn-tab>
             </Tab>
           </TabList>
         </TabGroup>
         <div class="hidden 2xl:block">
+          <lighthouse-three-d v-if="!isStatic" class="mb-7" />
           <div class="px-2 text-center 2xl:text-left">
             <div class="text-xs opacity-75 2xl:mt-4">
               <a href="https://unlighthouse.dev" target="_blank" class="underline hover:no-underline">Documentation</a>
@@ -86,90 +97,186 @@ useTitle(`${website.replace(/https?:\/\/(www.)?/, '')} | Unlighthouse`)
               Portions of this report use Lighthouse. For more information visit <a href="https://developers.google.com/web/tools/lighthouse" class="underline hover:no-underline">here</a>.
             </div>
           </div>
-          <lighthouse-three-d v-if="!isStatic" />
         </div>
       </div>
       <div class="xl:w-full w-screen overflow-x-auto px-3">
-        <div class="pr-10 py-1 w-full min-w-1500px">
-          <div class="grid grid-cols-12 gap-4 text-sm dark:(text-gray-300) text-gray-700">
-            <results-table-head
-              v-for="(column, key) in resultColumns"
-              :key="key"
-              :sorting="sorting"
-              :column="column"
-              @sort="incrementSort"
-            />
+        <div v-if="tabs[activeTab].label === 'CrUX'">
+          <div>
+            <h2 class="font-bold text-2xl mb-7">
+              Origin CrUX History - Mobile
+            </h2>
           </div>
-        </div>
-        <div class="w-full min-w-1500px 2xl:(max-h-[calc(100vh-100px)]) lg:max-h-[calc(100vh-205px)] sm:max-h-[calc(100vh-220px)] max-h-[calc(100vh-250px)] overflow-auto pr-5 mr-4">
-          <div v-if="Object.values(searchResults).length === 0" class="px-4 py-3">
-            <template v-if="searchText">
-              <p class="mb-2">
-                No results for search "{{ searchText }}"...
-              </p>
-              <btn-action class="dark:(bg-teal-700) bg-blue-100 px-2 text-sm" @click="searchText = ''">
-                Reset Search
-              </btn-action>
-            </template>
-            <div v-else class="flex items-center">
-              <loading-spinner class="mr-2" />
+          <div v-if="!crux" class="w-full">
+            <div class="text-gray-500 text-center w-full text-sm">
+              Loading CrUX data...
+            </div>
+          </div>
+          <div v-else-if="crux?.exists === false" class="w-full">
+            <div class="text-gray-500 text-center w-full text-sm">
+              No data from Chrome UX report
+            </div>
+          </div>
+          <div v-else class="w-full flex-col flex space-y-5">
+            <div>
+              <div>
+                <a href="https://web.dev/articles/inp" target="_blank" class="transition hover:underline">Interaction to Next Paint (INP)</a>
+              </div>
+              <div v-if="crux?.inp" class="flex items-center">
+                <div class="w-full h-[200px] w-[400px] relative">
+                  <CruxGraphInp v-if="crux?.inp" :value="crux.inp" :height="200" />
+                </div>
+                <div>
+                  <div class="text-green-500 font-bold">
+                    Good &lt; 200ms
+                  </div>
+                  <div class="text-yellow-500 font-bold">
+                    Needs Improvement 200ms - 500ms
+                  </div>
+                  <div class="text-red-500 font-bold">
+                    Poor &gt; 500ms
+                  </div>
+                </div>
+              </div>
+              <div v-else class="inline">
+                <div class="inline text-gray-500 text-center w-full text-sm">
+                  No data
+                </div>
+              </div>
+            </div>
+            <div>
+              <div><a href="https://web.dev/articles/cls" target="_blank" class="transition hover:underline">Cumulative Layout Shift (CLS)</a></div>
+              <div v-if="crux?.cls" class="flex items-center">
+                <div class="w-full h-[200px] w-[400px] relative">
+                  <CruxGraphCls v-if="crux?.cls" :value="crux.cls" :height="200" />
+                </div>
+                <div>
+                  <div class="text-green-500 font-bold">
+                    Good &lt; 0.1
+                  </div>
+                  <div class="text-yellow-500 font-bold">
+                    Needs Improvement 0.1 - 0.25
+                  </div>
+                  <div class="text-red-500 font-bold">
+                    Poor &gt; 0.25
+                  </div>
+                </div>
+              </div>
+              <div v-else class="inline">
+                <div class="text-gray-500 inline text-center w-full text-sm">
+                  No data
+                </div>
+              </div>
+            </div>
+            <div>
               <div>
-                <p>Waiting for routes...</p>
-                <span class="text-xs opacity-50">If this hangs consider running Unlighthouse with --debug.</span>
+                <a href="https://web.dev/articles/lcp" target="_blank" class="transition hover:underline">Largest Contentful Paint (LCP)</a>
+              </div>
+              <div v-if="crux?.lcp" class="flex items-center">
+                <div class="w-full h-[200px] w-[400px] relative">
+                  <CruxGraphLcp v-if="crux?.lcp" :value="crux.lcp" :height="200" />
+                </div>
+                <div>
+                  <div class="text-green-500 font-bold">
+                    Good &lt; 2.5s
+                  </div>
+                  <div class="text-yellow-500 font-bold">
+                    Needs Improvement 2.5s - 4s
+                  </div>
+                  <div class="text-red-500 font-bold">
+                    Poor &gt; 4s
+                  </div>
+                </div>
+              </div>
+              <div v-else class="inline">
+                <div class="text-gray-500 text-center inline w-full text-sm">
+                  No data
+                </div>
               </div>
             </div>
           </div>
-          <div v-else-if="searchText" class="px-4 py-3">
-            <p>Showing {{ Object.values(searchResults).flat().length }} routes for search "{{ searchText }}":</p>
+        </div>
+        <template v-else>
+          <div class="pr-10 pb-1 w-full min-w-1500px">
+            <div class="grid grid-cols-12 gap-4 text-sm dark:(text-gray-300) text-gray-700">
+              <results-table-head
+                v-for="(column, key) in resultColumns"
+                :key="key"
+                :sorting="sorting"
+                :column="column"
+                @sort="incrementSort"
+              />
+            </div>
           </div>
-          <results-row
-            v-for="(reports, routeName) in searchResults"
-            :key="routeName"
-            :reports="reports"
-            :route-name="routeName"
-          >
-            <template #actions="{ report }">
-              <popover-actions position="left">
-                <div class="w-300px flex flex-col space-y-2">
-                  <btn-basic
-                    v-if="report.report"
-                    class="flex items-start hover:bg-blue-500 transition children:hover:text-white"
-                    @click="openLighthouseReportIframeModal(report)"
-                  >
-                    <div style="flex-basis: 70px;" class="mt-1 text-blue-500">
-                      <i-vscode-icons-file-type-lighthouse class="text-xl mr-2" />
-                    </div>
-                    <div class="text-left">
-                      <p class="break-none text-base">
-                        Open Lighthouse Report
-                      </p>
-                      <span class="opacity-70 text-xs">
-                        Lighthouse HTML report is opened in a modal.
-                      </span>
-                    </div>
-                  </btn-basic>
-                  <btn-basic
-                    :disabled="isOffline ? 'disabled' : false"
-                    class="flex items-start hover:bg-blue-500 transition children:hover:text-white"
-                    @click="rescanRoute(report.route)"
-                  >
-                    <div style="flex-basis: 70px;" class="mt-1 text-blue-500">
-                      <i-mdi-magnify-scan class="text-xl" />
-                    </div>
-                    <div class="text-left">
-                      <p class="break-none text-base">
-                        Rescan Route
-                      </p>
-                      <span class="opacity-70 text-xs">
-                        Crawl the route again and generate a fresh report.
-                      </span>
-                    </div>
-                  </btn-basic>
+          <div class="w-full min-w-1500px 2xl:(max-h-[calc(100vh-100px)]) lg:max-h-[calc(100vh-205px)] sm:max-h-[calc(100vh-220px)] max-h-[calc(100vh-250px)] overflow-auto pr-5 mr-4">
+            <div v-if="Object.values(searchResults).length === 0" class="px-4 py-3">
+              <template v-if="searchText">
+                <p class="mb-2">
+                  No results for search "{{ searchText }}"...
+                </p>
+                <btn-action class="dark:(bg-teal-700) bg-blue-100 px-2 text-sm" @click="searchText = ''">
+                  Reset Search
+                </btn-action>
+              </template>
+              <div v-else class="flex items-center">
+                <loading-spinner class="mr-2" />
+                <div>
+                  <p>Waiting for routes...</p>
+                  <span class="text-xs opacity-50">If this hangs consider running Unlighthouse with --debug.</span>
                 </div>
-              </popover-actions>
-            </template>
-          </results-row>
-        </div>
+              </div>
+            </div>
+            <div v-else-if="searchText" class="px-4 py-3">
+              <p>Showing {{ Object.values(searchResults).flat().length }} routes for search "{{ searchText }}":</p>
+            </div>
+            <results-row
+              v-for="(reports, routeName) in searchResults"
+              :key="routeName"
+              :reports="reports"
+              :route-name="routeName"
+            >
+              <template #actions="{ report }">
+                <popover-actions position="left">
+                  <div class="w-300px flex flex-col space-y-2">
+                    <btn-basic
+                      v-if="report.report"
+                      class="flex items-start hover:bg-blue-500 transition children:hover:text-white"
+                      @click="openLighthouseReportIframeModal(report)"
+                    >
+                      <div style="flex-basis: 70px;" class="mt-1 text-blue-500">
+                        <i-vscode-icons-file-type-lighthouse class="text-xl mr-2" />
+                      </div>
+                      <div class="text-left">
+                        <p class="break-none text-base">
+                          Open Lighthouse Report
+                        </p>
+                        <span class="opacity-70 text-xs">
+                          Lighthouse HTML report is opened in a modal.
+                        </span>
+                      </div>
+                    </btn-basic>
+                    <btn-basic
+                      :disabled="isOffline ? 'disabled' : false"
+                      class="flex items-start hover:bg-blue-500 transition children:hover:text-white"
+                      @click="rescanRoute(report.route)"
+                    >
+                      <div style="flex-basis: 70px;" class="mt-1 text-blue-500">
+                        <i-mdi-magnify-scan class="text-xl" />
+                      </div>
+                      <div class="text-left">
+                        <p class="break-none text-base">
+                          Rescan Route
+                        </p>
+                        <span class="opacity-70 text-xs">
+                          Crawl the route again and generate a fresh report.
+                        </span>
+                      </div>
+                    </btn-basic>
+                  </div>
+                </popover-actions>
+              </template>
+            </results-row>
+          </div>
+        </template>
       </div>
     </div>
     <footer class="block 2xl:hidden my-2">
diff --git a/packages/client/components.d.ts b/packages/client/components.d.ts
index e6500937..d0c4a126 100644
--- a/packages/client/components.d.ts
+++ b/packages/client/components.d.ts
@@ -34,6 +34,9 @@ declare module 'vue' {
     CellTapTargets: typeof import('./components/Cell/CellTapTargets.vue')['default']
     CellWebVitals: typeof import('./components/Cell/CellWebVitals.vue')['default']
     Container: typeof import('./components/Container.vue')['default']
+    CruxGraphCls: typeof import('./components/Crux/Graph/CruxGraphCls.vue')['default']
+    CruxGraphInp: typeof import('./components/Crux/Graph/CruxGraphInp.vue')['default']
+    CruxGraphLcp: typeof import('./components/Crux/Graph/CruxGraphLcp.vue')['default']
     Dialog: typeof import('@headlessui/vue')['Dialog']
     DialogOverlay: typeof import('@headlessui/vue')['DialogOverlay']
     Disclosure: typeof import('@headlessui/vue')['Disclosure']
@@ -41,7 +44,6 @@ declare module 'vue' {
     DisclosureHandle: typeof import('./components/Disclosure/DisclosureHandle.vue')['default']
     DisclosurePanel: typeof import('@headlessui/vue')['DisclosurePanel']
     ErrorChip: typeof import('./components/Chip/ErrorChip.vue')['default']
-    ICarbonCaretRight: typeof import('~icons/carbon/caret-right')['default']
     ICarbonChevronSort: typeof import('~icons/carbon/chevron-sort')['default']
     ICarbonChevronSortDown: typeof import('~icons/carbon/chevron-sort-down')['default']
     ICarbonChevronSortUp: typeof import('~icons/carbon/chevron-sort-up')['default']
diff --git a/packages/client/components/Btn/BtnTab.vue b/packages/client/components/Btn/BtnTab.vue
index 46a01600..360dba0e 100644
--- a/packages/client/components/Btn/BtnTab.vue
+++ b/packages/client/components/Btn/BtnTab.vue
@@ -5,10 +5,9 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center 2xl:(mb-1) focus:outline-none justify-between">
-    <i-carbon-caret-right v-if="selected" class="inline text-sm opacity-80 mr-1" />
+  <div class="flex items-center focus:outline-none justify-between">
     <button
-      class="focus:(outline-none ring-1) ring-offset-blue-400 ring-white ring-opacity-60 flex flex-col px-1 py-1 text-xs lg:(px-2 flex-row py-2 text-sm) items-center justify-between w-full leading-5 transition font-medium xl:text-base text-blue-700 rounded-lg"
+      class="focus:(outline-none ring-1) ring-offset-blue-400 ring-white ring-opacity-60 flex flex-col text-xs lg:(px-2 flex-row py-1 text-sm) items-center justify-between w-full leading-5 transition font-medium text-blue-700 rounded-lg"
       :class="[
         selected
           ? 'bg-blue-900 text-blue-200 shadow'
diff --git a/packages/client/components/Cell/CellNetworkRequests.vue b/packages/client/components/Cell/CellNetworkRequests.vue
index 7419dea3..0d10d0eb 100644
--- a/packages/client/components/Cell/CellNetworkRequests.vue
+++ b/packages/client/components/Cell/CellNetworkRequests.vue
@@ -36,8 +36,8 @@ const requestsMapped = computed(() => {
 <template>
   <div v-if="value" class="text-sm">
     <div class="opacity-90 flex items-center mb-1">
-      <span>{{ value.details.items.length }} total</span>
-      <span class="opacity-70 ml-1">{{ totalTransfer }}</span>
+      <span>{{ totalTransfer }}</span>
+      <span class="opacity-70 ml-1">{{ value.details.items.length }} total</span>
     </div>
     <div class="grid gap-2 grid-cols-2">
       <div v-for="(group, resourceType) in requestsMapped" :key="resourceType" class="text-xs flex items-center">
diff --git a/packages/client/components/Cell/CellScoreSingle.vue b/packages/client/components/Cell/CellScoreSingle.vue
index a7cbb6f9..e918eba0 100644
--- a/packages/client/components/Cell/CellScoreSingle.vue
+++ b/packages/client/components/Cell/CellScoreSingle.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { UnlighthouseColumn, UnlighthouseRouteReport } from '@unlighthouse/core'
-import { activeTab, openLighthouseReportIframeModal, website } from '../../logic'
+import { activeTab, openLighthouseReportIframeModal, throttle, website } from '../../logic'
 
 const props = defineProps<{
   report: UnlighthouseRouteReport
@@ -36,11 +36,20 @@ const isLocalhost = website.includes('localhost')
       <metric-guage class="hidden lg:flex" :score="category.score" :label="category.title" />
       <metric-guage class="lg:hidden" :stripped="true" :score="category.score" :label="category.title" />
       <div class="text-xs opacity-60 mt-1" style="font-size: 10px;">
-        View Report
+        Lighthouse Report
       </div>
     </button>
-    <div v-if="!isLocalhost && category.title === 'Performance'" class="text-xs opacity-70 text-center">
-      <a :href="`https://pagespeed.web.dev/report?url=${encodeURIComponent(report.route.url)}`" target="_blank" class="underline hover:no-underline">PSI Test</a>
+    <div v-if="!isLocalhost && category.title === 'Performance'" class="text-xs text-center inline-flex whitespace-nowrap">
+      <tooltip class="text-left">
+        <i-carbon-warning class="inline text-xs mx-1 opacity-70" />
+        <template #tooltip>
+          <div class="mb-2">
+            Lighthouse is running with variability.<br>Performance scores should not be considered accurate.
+          </div>
+          <div>Unlighthouse is running <span class="underline">with{{ throttle ? '' : 'out' }} throttling</span> which will also effect scores.</div>
+        </template>
+      </tooltip>
+      <a :href="`https://pagespeed.web.dev/report?url=${encodeURIComponent(report.route.url)}`" target="_blank" class="underline hover:no-underline opacity-70">PSI Test</a>
     </div>
   </div>
 </template>
diff --git a/packages/client/components/Crux/Graph/CruxGraphCls.vue b/packages/client/components/Crux/Graph/CruxGraphCls.vue
new file mode 100644
index 00000000..f3846276
--- /dev/null
+++ b/packages/client/components/Crux/Graph/CruxGraphCls.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import { createChart } from 'lightweight-charts'
+import dayjs from 'dayjs'
+import { isDark } from '../../../logic'
+import { useHumanFriendlyNumber } from '../../../logic/formatting'
+
+const props = defineProps<{
+  value?: { time: string, value: number }[]
+  height?: number | string
+}>()
+
+const chart = ref(null)
+const container = ref(null)
+
+const tooltipData = ref({
+  cls: 0,
+  time: '',
+})
+
+const darkTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#D9D9D9',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    crosshair: {
+      color: '#758696',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(32, 226, 47, 0.56)',
+    bottomColor: 'rgba(32, 226, 47, 0.04)',
+    lineColor: 'rgba(32, 226, 47, 1)',
+  },
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.4)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.5)',
+  },
+}
+
+const lightTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#191919',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(33, 150, 243, 0.9)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 0.5)',
+  },
+  // this is the impressions from google search console, we want to use a similar purple
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.3)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.4)',
+  },
+}
+
+const themesData = {
+  Dark: darkTheme,
+  Light: lightTheme,
+}
+
+onMounted(() => {
+  const _chart = createChart(chart.value!, {
+    height: Number(props.height) || 100,
+    autoSize: true,
+    rightPriceScale: {
+      visible: false,
+    },
+    timeScale: {
+      visible: false,
+    },
+    crosshair: {
+      horzLine: {
+        visible: false,
+      },
+      vertLine: {
+        visible: false,
+      },
+    },
+  })
+  _chart.timeScale().fitContent()
+
+  const areaSeries = _chart.addBaselineSeries({
+    topColor: 'rgba(33, 150, 243, 0.56)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 1)',
+    lineWidth: 2,
+    priceLineVisible: false,
+    lastValueVisible: false,
+    priceScaleId: 'right',
+    baseValue: { type: 'price', price: 0.1 },
+    bottomLineColor: 'rgba( 12, 206, 106, 1)',
+    bottomFillColor1: 'rgba( 12, 206, 106, 0.28)',
+    bottomFillColor2: 'rgba( 12, 206, 106, 0.05)',
+    topLineColor: 'rgba( 255, 164, 0, 1)',
+    topFillColor1: 'rgba( 255, 164, 0, 0.05)',
+    topFillColor2: 'rgba( 255, 164, 0, 0.28)',
+    priceFormat: {
+      type: 'volume',
+    },
+    lineType: 2,
+  })
+  if (props.value && props.value.length)
+    areaSeries.setData(props.value)
+
+  _chart.subscribeCrosshairMove((param) => {
+    const _container = container.value!
+    if (
+      param.point === undefined
+      || !param.time
+      || param.point.x < 0
+      || param.point.x > _container.clientWidth
+      || param.point.y < 0
+      || param.point.y > _container.clientHeight
+    ) {
+      tooltipData.value = {
+        cls: 0,
+        time: '',
+      }
+    }
+    else {
+      // time will be in the same format that we supplied to setData.
+      // thus it will be YYYY-MM-DD
+      const dateStr = dayjs(param.time).format('MMM D, YYYY')
+      // toolTip.style.display = 'block'
+      const _cls = param.seriesData.get(areaSeries)!
+      const cls = _cls.value !== undefined ? _cls.value : _cls.time
+
+      tooltipData.value = {
+        cls,
+        time: dateStr,
+      }
+    }
+  })
+
+  function syncToTheme(theme) {
+    _chart.applyOptions(themesData[theme].chart)
+    areaSeries.applyOptions(themesData[theme].series)
+  }
+
+  watch(isDark, () => {
+    syncToTheme(isDark.value ? 'Dark' : 'Light')
+  }, {
+    immediate: true,
+  })
+})
+</script>
+
+<template>
+  <div ref="container" class="w-full h-full">
+    <div ref="chart" />
+    <div class="tooltip">
+      <div v-if="tooltipData.time" class="dark:text-gray-200 text-gray-600 text-xs">
+        <div class="dark:text-gray-400 text-gray-500 text-xs ">
+          {{ tooltipData.time }}
+        </div>
+        <div>CLS {{ useHumanFriendlyNumber(tooltipData.cls) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  text-align: center;
+  position: absolute;
+  padding: 4px;
+  z-index: 20;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+</style>
diff --git a/packages/client/components/Crux/Graph/CruxGraphInp.vue b/packages/client/components/Crux/Graph/CruxGraphInp.vue
new file mode 100644
index 00000000..ea715604
--- /dev/null
+++ b/packages/client/components/Crux/Graph/CruxGraphInp.vue
@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { createChart } from 'lightweight-charts'
+import dayjs from 'dayjs'
+import { isDark } from '../../../logic'
+import { useHumanMs } from '../../../logic/formatting'
+
+const props = defineProps<{
+  value?: { time: string, value: number }[]
+  height?: number | string
+}>()
+
+const chart = ref(null)
+const container = ref(null)
+
+const tooltipData = ref({
+  inp: 0,
+  time: '',
+})
+
+const darkTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#D9D9D9',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    crosshair: {
+      color: '#758696',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(32, 226, 47, 0.56)',
+    bottomColor: 'rgba(32, 226, 47, 0.04)',
+    lineColor: 'rgba(32, 226, 47, 1)',
+  },
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.4)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.5)',
+  },
+}
+
+const lightTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#191919',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(33, 150, 243, 0.9)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 0.5)',
+  },
+  // this is the impressions from google search console, we want to use a similar purple
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.3)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.4)',
+  },
+}
+
+const themesData = {
+  Dark: darkTheme,
+  Light: lightTheme,
+}
+
+onMounted(() => {
+  const _chart = createChart(chart.value!, {
+    height: Number(props.height) || 100,
+    autoSize: true,
+    rightPriceScale: {
+      visible: false,
+    },
+    timeScale: {
+      visible: false,
+    },
+    crosshair: {
+      horzLine: {
+        visible: false,
+      },
+      vertLine: {
+        visible: false,
+      },
+    },
+  })
+  _chart.timeScale().fitContent()
+
+  const areaSeries = _chart.addBaselineSeries({
+    topColor: 'rgba(33, 150, 243, 0.56)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 1)',
+    lineWidth: 2,
+    priceLineVisible: false,
+    lastValueVisible: false,
+    priceScaleId: 'right',
+    baseValue: { type: 'price', price: 200 },
+    bottomLineColor: 'rgba( 12, 206, 106, 1)',
+    bottomFillColor1: 'rgba( 12, 206, 106, 0.28)',
+    bottomFillColor2: 'rgba( 12, 206, 106, 0.05)',
+    topLineColor: 'rgba( 255, 164, 0, 1)',
+    topFillColor1: 'rgba( 255, 164, 0, 0.05)',
+    topFillColor2: 'rgba( 255, 164, 0, 0.28)',
+    priceFormat: {
+      type: 'volume',
+    },
+    lineType: 2,
+  })
+  if (props.value && props.value.length)
+    areaSeries.setData(props.value)
+
+  _chart.subscribeCrosshairMove((param) => {
+    const _container = container.value!
+    if (
+      param.point === undefined
+      || !param.time
+      || param.point.x < 0
+      || param.point.x > _container.clientWidth
+      || param.point.y < 0
+      || param.point.y > _container.clientHeight
+    ) {
+      tooltipData.value = {
+        inp: 0,
+        time: '',
+      }
+    }
+    else {
+      // time will be in the same format that we supplied to setData.
+      // thus it will be YYYY-MM-DD
+      const dateStr = dayjs(param.time).format('MMM D, YYYY')
+      // toolTip.style.display = 'block'
+      const _inp = param.seriesData.get(areaSeries)!
+      const inp = _inp.value !== undefined ? _inp.value : _inp.time
+
+      tooltipData.value = {
+        inp,
+        time: dateStr,
+      }
+    }
+  })
+
+  function syncToTheme(theme) {
+    _chart.applyOptions(themesData[theme].chart)
+    areaSeries.applyOptions(themesData[theme].series)
+  }
+
+  watch(isDark, () => {
+    syncToTheme(isDark.value ? 'Dark' : 'Light')
+  }, {
+    immediate: true,
+  })
+})
+</script>
+
+<template>
+  <div ref="container" class="w-full h-full">
+    <div ref="chart" />
+    <div class="tooltip">
+      <slot name="tooltip" v-bind="tooltipData" />
+      <div v-if="tooltipData.time" class="dark:text-gray-200 text-gray-600 text-xs">
+        <div class="dark:text-gray-400 text-gray-500 text-xs ">
+          {{ tooltipData.time }}
+        </div>
+        <div v-if="tooltipData.inp > 0">
+          {{ useHumanMs(tooltipData.inp) }}
+        </div>
+        <div v-else>
+          No data
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  text-align: center;
+  position: absolute;
+  padding: 4px;
+  z-index: 20;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+</style>
diff --git a/packages/client/components/Crux/Graph/CruxGraphLcp.vue b/packages/client/components/Crux/Graph/CruxGraphLcp.vue
new file mode 100644
index 00000000..3318914b
--- /dev/null
+++ b/packages/client/components/Crux/Graph/CruxGraphLcp.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import { createChart } from 'lightweight-charts'
+import dayjs from 'dayjs'
+import { isDark } from '../../../logic'
+import { useHumanMs } from '../../../logic/formatting'
+
+const props = defineProps<{
+  value?: { time: string, value: number }[]
+  height?: number | string
+}>()
+
+const chart = ref(null)
+const container = ref(null)
+
+const tooltipData = ref({
+  lcp: 0,
+  time: '',
+})
+
+const darkTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#D9D9D9',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    crosshair: {
+      color: '#758696',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(32, 226, 47, 0.56)',
+    bottomColor: 'rgba(32, 226, 47, 0.04)',
+    lineColor: 'rgba(32, 226, 47, 1)',
+  },
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.4)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.5)',
+  },
+}
+
+const lightTheme = {
+  chart: {
+    layout: {
+      background: {
+        type: 'solid',
+        color: 'transparent',
+      },
+      lineColor: '#2B2B43',
+      textColor: '#191919',
+    },
+    watermark: {
+      color: 'rgba(0, 0, 0, 0)',
+    },
+    grid: {
+      vertLines: {
+        visible: false,
+      },
+      horzLines: {
+        visible: false,
+      },
+    },
+  },
+  series: {
+    topColor: 'rgba(33, 150, 243, 0.9)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 0.5)',
+  },
+  // this is the impressions from google search console, we want to use a similar purple
+  series2: {
+    topColor: 'rgba(156, 39, 176, 0.3)',
+    bottomColor: 'rgba(156, 39, 176, 0.04)',
+    lineColor: 'rgba(156, 39, 176, 0.4)',
+  },
+}
+
+const themesData = {
+  Dark: darkTheme,
+  Light: lightTheme,
+}
+
+onMounted(() => {
+  const _chart = createChart(chart.value!, {
+    height: Number(props.height) || 100,
+    autoSize: true,
+    rightPriceScale: {
+      visible: false,
+    },
+    timeScale: {
+      visible: false,
+    },
+    crosshair: {
+      horzLine: {
+        visible: false,
+      },
+      vertLine: {
+        visible: false,
+      },
+    },
+  })
+  _chart.timeScale().fitContent()
+
+  const areaSeries = _chart.addBaselineSeries({
+    topColor: 'rgba(33, 150, 243, 0.56)',
+    bottomColor: 'rgba(33, 150, 243, 0.04)',
+    lineColor: 'rgba(33, 150, 243, 1)',
+    lineWidth: 2,
+    priceLineVisible: false,
+    lastValueVisible: false,
+    priceScaleId: 'right',
+    baseValue: { type: 'price', price: 2500 },
+    bottomLineColor: 'rgba( 12, 206, 106, 1)',
+    bottomFillColor1: 'rgba( 12, 206, 106, 0.28)',
+    bottomFillColor2: 'rgba( 12, 206, 106, 0.05)',
+    topLineColor: 'rgba( 255, 164, 0, 1)',
+    topFillColor1: 'rgba( 255, 164, 0, 0.05)',
+    topFillColor2: 'rgba( 255, 164, 0, 0.28)',
+    priceFormat: {
+      type: 'volume',
+    },
+    lineType: 2,
+  })
+  if (props.value && props.value.length) {
+    // Good (≤ 2.5 s)
+    // Needs Improvement (2.5 s - 4 s)
+    // Poor (> 4 s)
+
+    areaSeries.setData(props.value.map(({ time, value }) => {
+      if (value >= 4000) {
+        return {
+          time,
+          value,
+          topLineColor: 'rgba( 255, 78, 67, 1)',
+          topFillColor1: 'rgba( 255, 78, 67, 0.05)',
+          topFillColor2: 'rgba( 255, 78, 67, 0.28)',
+        }
+      }
+      return { time, value }
+    }))
+  }
+
+  _chart.subscribeCrosshairMove((param) => {
+    const _container = container.value!
+    if (
+      param.point === undefined
+      || !param.time
+      || param.point.x < 0
+      || param.point.x > _container.clientWidth
+      || param.point.y < 0
+      || param.point.y > _container.clientHeight
+    ) {
+      tooltipData.value = {
+        lcp: 0,
+        time: '',
+      }
+    }
+    else {
+      // time will be in the same format that we supplied to setData.
+      // thus it will be YYYY-MM-DD
+      const dateStr = dayjs(param.time).format('MMM D, YYYY')
+      // toolTip.style.display = 'block'
+      const _lcp = param.seriesData.get(areaSeries)!
+      const lcp = _lcp.value !== undefined ? _lcp.value : _lcp.time
+
+      tooltipData.value = {
+        lcp,
+        time: dateStr,
+      }
+    }
+  })
+
+  function syncToTheme(theme) {
+    _chart.applyOptions(themesData[theme].chart)
+    areaSeries.applyOptions(themesData[theme].series)
+  }
+
+  watch(isDark, () => {
+    syncToTheme(isDark.value ? 'Dark' : 'Light')
+  }, {
+    immediate: true,
+  })
+})
+</script>
+
+<template>
+  <div ref="container" class="w-full h-full">
+    <div ref="chart" />
+    <div class="tooltip">
+      <div v-if="tooltipData.time" class="dark:text-gray-200 text-gray-600 text-xs">
+        <div>
+          {{ tooltipData.time }}
+        </div>
+        <div class="font-bold" :class="tooltipData.lcp >= 4000 ? 'text-red-500' : tooltipData.lcp >= 2500 ? 'text-yellow-500' : 'text-green-500'">
+          LCP {{ useHumanMs(tooltipData.lcp) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tooltip {
+  text-align: center;
+  position: absolute;
+  padding: 4px;
+  z-index: 20;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+</style>
diff --git a/packages/client/index.html b/packages/client/index.html
index f1ae4977..bd28a66c 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -63,7 +63,7 @@
   }
   </style>
 </head>
-<body class="dark:bg-teal-900">
+<body class="dark:bg-[#020617]">
 <div id="app"></div>
 <script>
 (function () {
diff --git a/packages/client/logic/formatting.ts b/packages/client/logic/formatting.ts
new file mode 100644
index 00000000..9f4319eb
--- /dev/null
+++ b/packages/client/logic/formatting.ts
@@ -0,0 +1,24 @@
+export function useHumanMs(ms: number): string {
+  // need to convert it such < 1000 we say $x ms, otherwise we say $x s
+  if (ms < 1000)
+    return `${ms}ms`
+  return `${(ms / 1000).toFixed(1)}s`
+}
+
+function useHumanFriendlyNumber(number: Ref<number>, decimals?: number): ComputedRef<string>
+function useHumanFriendlyNumber(number: number, decimals?: number): string
+export function useHumanFriendlyNumber(number: MaybeRef<number>, decimals?: number) {
+  const format = (number: number) => {
+    // apply decimals if defined
+    if (typeof decimals !== 'undefined')
+      number = Number.parseFloat(number.toFixed(decimals))
+    return new Intl.NumberFormat('en', { notation: 'compact' }).format(number)
+  }
+  if (isRef(number)) {
+    return computed(() => {
+      return format(number.value)
+    })
+  }
+  // use intl to format the number, should have `k` or `m` suffix if needed
+  return format(number)
+}
diff --git a/packages/client/logic/state.ts b/packages/client/logic/state.ts
index 2a5243c1..0d1bfaa1 100644
--- a/packages/client/logic/state.ts
+++ b/packages/client/logic/state.ts
@@ -56,7 +56,7 @@ export const resultColumns = computed(() => {
         ? CellScoresOverview
         : CellScoreSingle,
     },
-    ...columns[activeTab.value],
+    ...(activeTab.value > columns.length - 1 ? [] : columns[activeTab.value]),
     {
       label: 'Actions',
       cols: 1,
diff --git a/packages/client/logic/static.ts b/packages/client/logic/static.ts
index f86c4abb..d9e0e57f 100644
--- a/packages/client/logic/static.ts
+++ b/packages/client/logic/static.ts
@@ -12,6 +12,13 @@ import CellTapTargets from '../components/Cell/CellTapTargets.vue'
 import CellWebVitals from '../components/Cell/CellWebVitals.vue'
 import CellLargestContentfulPaint from '../components/Cell/CellLargestContentfulPaint.vue'
 import CellLayoutShift from '../components/Cell/CellLayoutShift.vue'
+import MdiViewDashboard from '~icons/mdi/view-dashboard'
+import MdiSpeedometer from '~icons/mdi/speedometer'
+import MdiAccessibility from '~icons/mdi/accessibility'
+import MdiThumbUp from '~icons/mdi/thumb-up'
+import MdiWeb from '~icons/mdi/web'
+import MdiCellphone from '~icons/mdi/cellphone'
+import MdiWorld from '~icons/mdi/world'
 
 const {
   options: {
@@ -50,7 +57,34 @@ export const tabs = [
 
     return startCase(c)
   }),
-]
+  categories.includes('performance') ? 'CrUX' : undefined,
+].filter(Boolean).map((tab) => {
+  // map icons to tabs
+  switch (tab) {
+    case 'Overview':
+      tab = { label: tab, icon: MdiViewDashboard }
+      break
+    case 'Performance':
+      tab = { label: tab, icon: MdiSpeedometer }
+      break
+    case 'Accessibility':
+      tab = { label: tab, icon: MdiAccessibility }
+      break
+    case 'Best Practices':
+      tab = { label: tab, icon: MdiThumbUp }
+      break
+    case 'SEO':
+      tab = { label: tab, icon: MdiWeb }
+      break
+    case 'PWA':
+      tab = { label: tab, icon: MdiCellphone }
+      break
+    case 'CrUX':
+      tab = { label: tab, icon: MdiWorld }
+      break
+  }
+  return tab
+})
 
 // map the column components
 export const columns = Object.values(configColumns)
diff --git a/packages/client/package.json b/packages/client/package.json
index 3e59e9fe..ef70594a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -25,14 +25,23 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.19",
+    "dayjs": "^1.11.10",
     "defu": "^6.1.4",
     "fuse.js": "^7.0.0",
+    "lightweight-charts": "^4.1.3",
     "lodash-es": "^4.17.21",
     "ufo": "^1.4.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.188",
+    "@iconify-json/carbon": "latest",
+    "@iconify-json/ic": "latest",
+    "@iconify-json/icomoon-free": "latest",
+    "@iconify-json/la": "latest",
+    "@iconify-json/logos": "latest",
+    "@iconify-json/mdi": "latest",
+    "@iconify-json/simple-line-icons": "latest",
+    "@iconify-json/vscode-icons": "latest",
     "@types/lodash": "^4.14.202",
     "@types/three": "^0.160.0",
     "@unlighthouse/core": "workspace:../core",
diff --git a/packages/core/src/unlighthouse.ts b/packages/core/src/unlighthouse.ts
index 99c68e42..90a1b2e1 100644
--- a/packages/core/src/unlighthouse.ts
+++ b/packages/core/src/unlighthouse.ts
@@ -11,6 +11,7 @@ import { defu } from 'defu'
 import objectHash from 'object-hash'
 import { createCommonJS, resolvePath } from 'mlly'
 import { $fetch } from 'ofetch'
+import chalk from 'chalk'
 import { version } from '../package.json'
 import { WS, createApi, createBroadcastingEvents, createMockRouter } from './router'
 import { createUnlighthouseWorker, inspectHtmlTask, runLighthouseTask } from './puppeteer'
@@ -29,7 +30,6 @@ import { AppName, ClientPkg } from './constants'
 import { createLogger } from './logger'
 import { normaliseHost } from './util'
 import { successBox } from './util/cliFormatting'
-import chalk from 'chalk'
 
 const engineContext = createContext<UnlighthouseContext>()
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6199ec8f..cb717942 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -109,9 +109,30 @@ importers:
         specifier: ^3.4.21
         version: 3.4.21(typescript@5.3.3)
     devDependencies:
-      '@iconify/json':
-        specifier: ^2.2.188
-        version: 2.2.188
+      '@iconify-json/carbon':
+        specifier: latest
+        version: 1.1.30
+      '@iconify-json/ic':
+        specifier: latest
+        version: 1.1.17
+      '@iconify-json/icomoon-free':
+        specifier: latest
+        version: 1.1.8
+      '@iconify-json/la':
+        specifier: latest
+        version: 1.1.8
+      '@iconify-json/logos':
+        specifier: latest
+        version: 1.1.42
+      '@iconify-json/mdi':
+        specifier: latest
+        version: 1.1.64
+      '@iconify-json/simple-line-icons':
+        specifier: latest
+        version: 1.1.8
+      '@iconify-json/vscode-icons':
+        specifier: latest
+        version: 1.1.33
       '@types/lodash':
         specifier: ^4.14.202
         version: 4.14.202
@@ -1159,11 +1180,52 @@ packages:
     resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
     dev: true
 
-  /@iconify/json@2.2.188:
-    resolution: {integrity: sha512-gsJwZ60Vb5IrtjYu+Al4qMaML9ZKUnop6Gi0537ZcA6nEhe3Nb58WH4c6b1+mXOHwOkFlLA8AFBXJUHY5nKMdA==}
+  /@iconify-json/carbon@1.1.30:
+    resolution: {integrity: sha512-tEvEmxCO0J0t0p2NT2IvJ+iiSNqqnabygSo/S8wkeh2Guhc4tQOgl9dxvDMpy6RqwtKRTKsaROPtnRfu/bl+Tg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/ic@1.1.17:
+    resolution: {integrity: sha512-EvAjZzVESmN36zlyefylePUNaU2BQ3eRKVZ6KQSQ2bG01ppoZaiFZRri74VTyvp5Mlv2yn68ux1fgCoT+etGmA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/icomoon-free@1.1.8:
+    resolution: {integrity: sha512-gOHUmCvadswFYN2ieuZZH3QeU2dr0ux+dAWTqtAUtRJhlUxZfgOBMyvqOZsMMj1EpIOf+fLY1qLRCjwlTlB4WA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/la@1.1.8:
+    resolution: {integrity: sha512-67cXIkU4kg78OA52qcIzC5rIIHMf3K2rdl8GqiNgpiMbbX3o7n+yPh/0QWIIn8lDUQT6qT5d0ZkUCnwEYzxl2w==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/logos@1.1.42:
+    resolution: {integrity: sha512-/f+frtPm3m3Z30oy8Pk+QqRDkbmAiIaWGPl5CmsCXm15MVfvw9a/V/gD7WzdyuSGAZcFuQaqbHXj92y/n+2ifg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/mdi@1.1.64:
+    resolution: {integrity: sha512-zGeo5TjhNFAY6FmSDBLAzDO811t77r6v/mDi7CAL9w5eXqKez6bIjk8R9AL/RHIeq44ALP4Ozr4lMqFTkHr7ug==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/simple-line-icons@1.1.8:
+    resolution: {integrity: sha512-p4Fyw5WCa6n4zEOhfAfEm1D0pS+AeatSTYTE8UDnuXxj5h5I/Y3B1+Z3ion4D+C0QOJ8Jl7QUYygK1jjlY3A0A==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/vscode-icons@1.1.33:
+    resolution: {integrity: sha512-Aj1SoViQ5dw9hrYc4PHK8/vHpZREUA158jhnyNsD95uhN40mmeLuq+4o9OxiSakgLlac9R5OKpnp8tHTCgMhCA==}
     dependencies:
       '@iconify/types': 2.0.0
-      pathe: 1.1.2
     dev: true
 
   /@iconify/types@2.0.0: